Merge branch 'fac-hxy-zc' into factory

src/factory/components/Resource/index.jsx

@@ -20,7 +20,7 @@ const resourceInfo = [
   { name: '软件', title: '开源社区软件', icon: 'icon-gongju', desc: '来自开源社区，可按授权许可使用和复用的各类软件', path: '/sf/resources/devtools' },
 ]
 
-const Resource = forwardRef(({ zoneId }, ref) => {
+const Resource = forwardRef(({ zoneId, history }, ref) => {
   const r1Ref = useRef(null);
   const r2Ref = useRef(null);
   const r3Ref = useRef(null);
@@ -315,10 +315,8 @@ const Resource = forwardRef(({ zoneId }, ref) => {
                       <div className="item-name" title={item.name}>{item.name}</div>
                       <div className="item-desc" title={item.summary}>{item.summary}</div>
                       <button onClick={() => {
-                        if (item.fileIds) {
-                          downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
-                        }
-                      }} disabled={!item.fileIds} className={!item.fileIds && 'disabled'} >{item.fileIds ? '下载' : '稍后下载'}</button>
+                        history.push(`/sf/resources/releases`)
+                      }} disabled={!item.fileIds}>查看</button>
                     </div>
                   })
                 }

src/factory/index.jsx

@@ -298,7 +298,7 @@ function Index(props) {
 
       <News zoneId={factoryZoneId} />
       <Feature />
-      <Resource zoneId={factoryZoneId} ref={resourceRef} />
+      <Resource zoneId={factoryZoneId} history={ props.history } ref={resourceRef} />
       <Resource2 zoneId={factoryZoneId} ref={resource2Ref} />
       {/* <Scene zoneId={factoryZoneId} /> */}
     </div>

src/factory/resource/factoryVersion/detail/index.jsx

@@ -1,9 +1,17 @@
 import React, { useEffect, useState, useRef } from 'react';
 import './index.scss';
 import { TPMIndexHOC } from '../../../../modules/tpm/TPMIndexHOC';
-import imageBack1 from '../../../../images/factory/resource/tools-detail-head-left.webp'
-import imageGif from '../../../../images/factory/resource/tools-detail-head-left2.webp'
-import headIcon from '../../../../images/factory/resource/tools-detail-head-icon.webp'
+import fileDownload from '../../../../images/factory/resource/version-file-download.webp'
+import fileDownloadHover from '../../../../images/factory/resource/version-file-download-hover.webp'
+import icon1 from '../../../../images/factory/resource/version-file-icon-1.webp'
+import icon2 from '../../../../images/factory/resource/version-file-icon-2.webp'
+import icon3 from '../../../../images/factory/resource/version-file-icon-3.webp'
+import icon4 from '../../../../images/factory/resource/version-file-icon-4.webp'
+import icon5 from '../../../../images/factory/resource/version-file-icon-5.webp'
+import icon6 from '../../../../images/factory/resource/version-file-icon-6.webp'
+import buttonLeft from '../../../../images/factory/resource/version-list-left.webp'
+import buttonRight from '../../../../images/factory/resource/version-list-right.webp'
+
 import { Link } from 'react-router-dom';
 import RenderHtml from '../../../../components/render-html';
 import { Breadcrumb, Tooltip } from 'antd';
@@ -19,6 +27,9 @@ function Index(props) {
   const [detail, setDetail] = useState({})
   const [content, setContent] = useState();
   const [totalFileSize, setTotalFileSize] = useState(0);
+  const [hoveredFileId, setHoveredFileId] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 6;
 
   useEffect(() => {
     document.title = '工具详情-软件工厂专区';
@@ -90,10 +101,42 @@ function Index(props) {
         if (detailData.fileList && detailData.fileList.length > 0) {
           setTotalFileSize(calculateTotalFileSize(detailData.fileList));
         }
+        // 重置分页
+        setCurrentPage(1);
       }
     }).catch(error => { })
   }
 
+  const iconList = [icon1, icon2, icon3, icon4, icon5, icon6]
+
+  // 计算当前页的文件列表
+  const getCurrentPageFiles = () => {
+    if (!detail.fileList || detail.fileList.length <= itemsPerPage) {
+      return detail.fileList || [];
+    }
+    
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return detail.fileList.slice(startIndex, endIndex);
+  }
+
+  // 总页数
+  const totalPages = detail.fileList ? Math.ceil(detail.fileList.length / itemsPerPage) : 1;
+
+  // 上一页
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  }
+
+  // 下一页
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  }
+
   return (
     <div className="news-detail">
 
@@ -104,38 +147,55 @@ function Index(props) {
           <Breadcrumb.Item> <span className="breacrumb-name">{detail.name}</span> </Breadcrumb.Item>
         </Breadcrumb>
         <div className="header-content">
-          <Tooltip title={ detail.name } placement="topLeft">
-            <h3>{detail.name}</h3>
-          </Tooltip>
-          <Tooltip title={ detail.summary } placement="topLeft">
-            <p>{detail.summary}</p>
-          </Tooltip>
-          <div className="tools-info">
-            <div>
-              <span>{detail.downloadCount}</span>
-              <span>下载量</span>
-            </div>
-            <div>
-              <span>{totalFileSize || (detail.fileList && detail.fileList[0] ? detail.fileList[0].fileSizeInfo : 0)}</span>
-              <span>文件大小</span>
-            </div>
-            <div>
-              <span>{detail.fileList ? detail.fileList.length : 0}</span>
-              <span>文件数量</span>
-            </div>
-            <div>
-              <span>{detail.domainName}</span>
-              <span>工具类型</span>
+          <div className="header-info">
+            <Tooltip title={ detail.name } placement="topLeft">
+              <h3>{detail.name}</h3>
+            </Tooltip>
+            <Tooltip title={ detail.summary } placement="topLeft">
+              <p>{detail.summary}</p>
+            </Tooltip>
+            <div className="tools-info">
+              <div>
+                <span>{detail.downloadCount}</span>
+                <span>下载量</span>
+              </div>
+              <div>
+                <span>{totalFileSize || (detail.fileList && detail.fileList[0] ? detail.fileList[0].fileSizeInfo : 0)}</span>
+                <span>文件大小</span>
+              </div>
+              <div>
+                <span>{detail.fileList ? detail.fileList.length : 0}</span>
+                <span>文件数量</span>
+              </div>
+              <div>
+                <span>{detail.domainName}</span>
+                <span>工具类型</span>
+              </div>
             </div>
           </div>
           
           {/* 文件列表展示 */}
           {detail.fileList && detail.fileList.length > 0 && (
             <div className="file-list">
-              <h6>文件列表</h6>
+              {/* 左侧翻页按钮 - 始终显示，但在不需要时作为占位符 */}
+              <div 
+                className={`pagination-button left ${currentPage > 1 ? 'clickable' : 'placeholder'}`}
+                onClick={currentPage > 1 ? goToPreviousPage : undefined}
+              >
+                <img src={buttonLeft} alt="上一页" />
+              </div>
+              
               <div className="file-list-content">
-                {detail.fileList.map((file, index) => (
-                  <div key={file.fileId || index} className="file-item">
+                {getCurrentPageFiles().map((file, index) => (
+                  <div 
+                    key={file.fileId || index} 
+                    className="file-item"
+                    onMouseEnter={() => setHoveredFileId(file.fileId || index)}
+                    onMouseLeave={() => setHoveredFileId(null)}
+                  >
+                    <div className="file-icon">
+                      <img src={ iconList[ index % 6 ] }></img>
+                    </div>
                     <div className="file-info">
                       <span className="file-name">{file.fileOriginName}</span>
                       <span className="file-size">{file.fileSizeInfo}</span>
@@ -148,20 +208,21 @@ function Index(props) {
                         }
                       }}
                     >
-                      下载
+                      <img src={ (hoveredFileId === (file.fileId || index)) ? fileDownloadHover : fileDownload } alt="" />
                     </button>
                   </div>
                 ))}
               </div>
+              
+              {/* 右侧翻页按钮 - 始终显示，但在不需要时作为占位符 */}
+              <div 
+                className={`pagination-button right ${currentPage < totalPages ? 'clickable' : 'placeholder'}`}
+                onClick={currentPage < totalPages ? goToNextPage : undefined}
+              >
+                <img src={buttonRight} alt="下一页" />
+              </div>
             </div>
           )}
-
-          <div className="header-img">
-            <div className="header-img-wrapper">
-              <img src={detail.headImg || imageBack1} alt="" />
-              {!detail.headImg && <img src={imageGif} alt="" />}
-            </div>
-          </div>
         </div>
       </div>
       <div className="news-detail-content">

src/factory/resource/factoryVersion/detail/index.scss

@@ -40,98 +40,115 @@
     .header-content {
       margin-top: 30px;
       width: 1600px;
-      min-height: 481px;
+      height: 460px;
       position: relative;
-      border-radius: 16px;
-      padding: 60px 45px;
-      background: linear-gradient(106.16deg, #f7fbff 2.47%, #f5faff 95.98%);
-      border: 2px solid;
-      border-color: #ffffff;
+      padding: 28px 32px 28px 43px;
+      background: url('../../../../images/factory/resource/version-detail-header.webp');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
 
-      h3 {
-        line-height: 47px;
-        font-family: alibabaBold;
-        font-weight: 700;
-        color: #091221;
-        font-size: 34px;
-        max-width: 650px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
+      .header-info {
+        width: 550px;
+        padding: 39px 47px 0 0;
 
-      p {
-        margin-top: 25px;
-        max-width: 650px;
-        line-height: 22px;
-        font-family: alibabareg;
-        color: #5d6a80;
-        font-size: 16px;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
+        h3 {
+          line-height: 47px;
+          font-family: alibabaBold;
+          color: #ffffff;
+          font-size: 30px;
+          max-width: 650px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
 
-      .tools-info {
-        display: flex;
-        margin-top: 35px;
+        p {
+          margin-top: 25px;
+          max-width: 650px;
+          line-height: 22px;
+          font-family: alibabareg;
+          color: #ffffff;
+          font-size: 16px;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
 
-        div {
+        .tools-info {
           display: flex;
-          flex-direction: column;
-          position: relative;
-          margin-right: 78px;
+          margin-top: 35px;
+          flex-wrap: wrap;
+          width: 400px;
 
-          span:nth-child(1) {
-            line-height: 32px;
-            font-family: alibabaBold;
-            font-weight: 700;
-            color: #164ce4;
-            font-size: 24px;
-          }
+          div {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            min-width: 140px;
+            margin-bottom: 40px;
 
-          span:nth-child(2) {
-            line-height: 20px;
-            font-family: alibabareg;
-            color: #5d6a80;
-            font-size: 14px;
-            margin-top: 8px;
-          }
+            span:nth-child(1) {
+              line-height: 32px;
+              font-family: alibabaBold;
+              font-weight: 700;
+              color: #ffd88e;
+              font-size: 22px;
+            }
 
-          &:not(:last-child) {
-            &::after {
-              position: absolute;
-              content: "";
-              width: 0px;
-              height: 60px;
-              right: -39px;
-              border-right: 1px dashed;
-              border-color: rgba(22, 76, 228, 0.15);
+            span:nth-child(2) {
+              line-height: 20px;
+              font-family: alibabareg;
+              color: #ffffff;
+              font-size: 16px;
+              margin-top: 8px;
+            }
+
+            &:not(:last-child) {
+              &::after {
+                position: absolute;
+                content: "";
+                width: 0px;
+                height: 60px;
+                right: -39px;
+                border-right: 1px dashed;
+                border-color: rgba(22, 76, 228, 0.15);
+              }
             }
           }
         }
       }
 
-      button {
-        margin-top: 30px;
-        width: 110px;
-        height: 36px;
-        line-height: 36px;
-        cursor: pointer;
-        border-radius: 6px;
-        line-height: 20px;
-        font-family: alibaba;
-        font-weight: 500;
-        color: #ffffff;
-        font-size: 14px;
-        text-align: center;
-        background-color: #091221;
-      }
+      // button {
+      //   margin-top: 30px;
+      //   width: 110px;
+      //   height: 36px;
+      //   line-height: 36px;
+      //   cursor: pointer;
+      //   border-radius: 6px;
+      //   line-height: 20px;
+      //   font-family: alibaba;
+      //   font-weight: 500;
+      //   color: #ffffff;
+      //   font-size: 14px;
+      //   text-align: center;
+      //   background-color: #091221;
+      // }
+
 
       .file-list {
-        margin-top: 30px;
-        max-width: 650px;
+        flex-shrink: 0;
+        width: 947px;
+        height: 404px;
+        background: linear-gradient(108.75deg, #f7fbff36 2.52%, #f5faff59 95.95%);
+        border-radius: 16px;
+        backdrop-filter: blur(30px);
+        padding: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
 
         h6 {
           line-height: 22px;
@@ -143,26 +160,50 @@
         }
 
         &-content {
-          background: #f7fbff;
-          border-radius: 8px;
-          padding: 15px;
-          border: 1px solid rgba(22, 76, 228, 0.1);
-          margin-top: 15px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          height: 100%;
+          flex-wrap: wrap;
+          gap: 16px 18px;
+          padding-top: 10px;
 
           .file-item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 12px 15px;
-            background: #ffffff;
-            border-radius: 6px;
-            margin-bottom: 10px;
-            border: 1px solid rgba(22, 76, 228, 0.08);
+            width: 408px;
+            height: 105px;
+            background: url('../../../../images/factory/resource/version-item-bg.webp'), #ffffff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            border: 2px solid;
+            border-color: #ffffff;
+            border-radius: 8px;
+            padding: 20px 17px;
 
             &:last-child {
               margin-bottom: 0;
             }
 
+            .file-icon {
+              width: 50px;
+              height: 50px;
+              background: linear-gradient(46.14deg, #edf2ff 5.48%, #f5f5ff 94.87%);
+              border: 1px solid;
+              border-color: #ffffff;
+              border-radius: 9px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 30px;
+
+              img {
+                width: 22.03px;
+                height: 22.03px;
+              }
+            }
+
             .file-info {
               display: flex;
               flex-direction: column;
@@ -173,7 +214,7 @@
                 line-height: 20px;
                 font-family: alibaba;
                 color: #091221;
-                font-size: 14px;
+                font-size: 17px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -182,32 +223,71 @@
               .file-size {
                 line-height: 18px;
                 font-family: alibabareg;
-                color: #5d6a80;
-                font-size: 12px;
+                color: #666b86;
+                font-size: 15px;
                 margin-top: 4px;
+                margin-top: 10px;
               }
             }
 
             .file-download-btn {
-              margin-left: 15px;
-              width: 70px;
-              height: 28px;
-              line-height: 28px;
-              cursor: pointer;
-              border-radius: 4px;
-              font-family: alibaba;
-              font-weight: 500;
-              color: #164ce4;
-              font-size: 12px;
-              text-align: center;
-              background-color: #e9f2ff;
-              border: 1px solid rgba(22, 76, 228, 0.2);
+              margin-right: 25px;
+              margin-left: 25px;
+              background: unset;
               flex-shrink: 0;
+              cursor: pointer;
 
-              &:hover {
-                background: #d6e6ff;
+              img {
+                width: 28px;
               }
             }
+            &:hover {
+              background: url('../../../../images/factory/resource/version-item-bg-hover.webp'), #ffffff;
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              .file-info {
+                .file-name, .file-size {
+                  color: #ffffff;
+                }
+              }
+              .file-download-btn {
+                border: none;
+              }
+            }
+          }
+        }
+
+        .pagination-button {
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          z-index: 10;
+          
+          &.clickable {
+            cursor: pointer;
+          }
+          
+          &.placeholder {
+            opacity: 0;
+            cursor: default;
+            pointer-events: none;
+          }
+          
+          img {
+            width: 40px;
+            height: 40px;
+          }
+          
+          &.left {
+            left: 10px;
+          }
+          
+          &.right {
+            right: 10px;
           }
         }
       }
@@ -322,9 +402,9 @@
     }
 
     .news-detail-content-wrapper {
-      background-image: url('../../../../images/factory/resource/detail-bg.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
+      // background-image: url('../../../../images/factory/resource/detail-bg.png');
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
       padding: 30px;
       border-radius: 16px;
       margin-bottom: 60px;
@@ -357,4 +437,4 @@
       }
     }
   }
-}
+}