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) {
+                        history.push(`/sf/resources/releases`)
-                          downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
+                      }} disabled={!item.fileIds}>查看</button>
-                        }
-                      }} disabled={!item.fileIds} className={!item.fileIds && '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 fileDownload from '../../../../images/factory/resource/version-file-download.webp'
-import imageGif from '../../../../images/factory/resource/tools-detail-head-left2.webp'
+import fileDownloadHover from '../../../../images/factory/resource/version-file-download-hover.webp'
-import headIcon from '../../../../images/factory/resource/tools-detail-head-icon.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,6 +147,7 @@ function Index(props) {
           <Breadcrumb.Item> <span className="breacrumb-name">{detail.name}</span> </Breadcrumb.Item>
         </Breadcrumb>
         <div className="header-content">
+          <div className="header-info">
             <Tooltip title={ detail.name } placement="topLeft">
               <h3>{detail.name}</h3>
             </Tooltip>
@@ -128,14 +172,30 @@ function Index(props) {
                 <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) => (
+                {getCurrentPageFiles().map((file, index) => (
-                  <div key={file.fileId || index} className="file-item">
+                  <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,20 +40,23 @@
     .header-content {
       margin-top: 30px;
       width: 1600px;
-      min-height: 481px;
+      height: 460px;
       position: relative;
-      border-radius: 16px;
+      padding: 28px 32px 28px 43px;
-      padding: 60px 45px;
+      background: url('../../../../images/factory/resource/version-detail-header.webp');
-      background: linear-gradient(106.16deg, #f7fbff 2.47%, #f5faff 95.98%);
+      background-repeat: no-repeat;
-      border: 2px solid;
+      background-size: 100% 100%;
-      border-color: #ffffff;
+      display: flex;
+
+      .header-info {
+        width: 550px;
+        padding: 39px 47px 0 0;
 
         h3 {
           line-height: 47px;
           font-family: alibabaBold;
-        font-weight: 700;
+          color: #ffffff;
-        color: #091221;
+          font-size: 30px;
-        font-size: 34px;
           max-width: 650px;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -65,7 +68,7 @@
           max-width: 650px;
           line-height: 22px;
           font-family: alibabareg;
-        color: #5d6a80;
+          color: #ffffff;
           font-size: 16px;
           display: -webkit-box;
           -webkit-line-clamp: 2;
@@ -76,26 +79,29 @@
         .tools-info {
           display: flex;
           margin-top: 35px;
+          flex-wrap: wrap;
+          width: 400px;
 
           div {
             display: flex;
             flex-direction: column;
             position: relative;
-          margin-right: 78px;
+            min-width: 140px;
+            margin-bottom: 40px;
 
             span:nth-child(1) {
               line-height: 32px;
               font-family: alibabaBold;
               font-weight: 700;
-            color: #164ce4;
+              color: #ffd88e;
-            font-size: 24px;
+              font-size: 22px;
             }
 
             span:nth-child(2) {
               line-height: 20px;
               font-family: alibabareg;
-            color: #5d6a80;
+              color: #ffffff;
-            font-size: 14px;
+              font-size: 16px;
               margin-top: 8px;
             }
 
@@ -112,26 +118,37 @@
             }
           }
         }
-
-      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;
+        flex-shrink: 0;
-        max-width: 650px;
+        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;
+          display: flex;
-          border-radius: 8px;
+          align-items: flex-start;
-          padding: 15px;
+          justify-content: center;
-          border: 1px solid rgba(22, 76, 228, 0.1);
+          height: 100%;
-          margin-top: 15px;
+          flex-wrap: wrap;
+          gap: 16px 18px;
+          padding-top: 10px;
 
           .file-item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 12px 15px;
+            width: 408px;
-            background: #ffffff;
+            height: 105px;
-            border-radius: 6px;
+            background: url('../../../../images/factory/resource/version-item-bg.webp'), #ffffff;
-            margin-bottom: 10px;
+            background-repeat: no-repeat;
-            border: 1px solid rgba(22, 76, 228, 0.08);
+            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;
+                color: #666b86;
-                font-size: 12px;
+                font-size: 15px;
                 margin-top: 4px;
+                margin-top: 10px;
               }
             }
 
             .file-download-btn {
-              margin-left: 15px;
+              margin-right: 25px;
-              width: 70px;
+              margin-left: 25px;
-              height: 28px;
+              background: unset;
-              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);
               flex-shrink: 0;
+              cursor: pointer;
 
+              img {
+                width: 28px;
+              }
+            }
             &:hover {
-                background: #d6e6ff;
+              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-image: url('../../../../images/factory/resource/detail-bg.png');
-      background-repeat: no-repeat;
+      // background-repeat: no-repeat;
-      background-size: 100% 100%;
+      // background-size: 100% 100%;
       padding: 30px;
       border-radius: 16px;
       margin-bottom: 60px;