diff --git a/src/factory/components/Resource/index.jsx b/src/factory/components/Resource/index.jsx index bf971a68..b21f064f 100644 --- a/src/factory/components/Resource/index.jsx +++ b/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) => {
{item.name}
{item.summary}
+ history.push(`/sf/resources/releases`) + }} disabled={!item.fileIds}>查看 }) } diff --git a/src/factory/index.jsx b/src/factory/index.jsx index 2d94537d..4bcf9d2e 100644 --- a/src/factory/index.jsx +++ b/src/factory/index.jsx @@ -298,7 +298,7 @@ function Index(props) { - + {/* */} diff --git a/src/factory/resource/factoryVersion/detail/index.jsx b/src/factory/resource/factoryVersion/detail/index.jsx index 41589885..f1601672 100644 --- a/src/factory/resource/factoryVersion/detail/index.jsx +++ b/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 (
@@ -104,38 +147,55 @@ function Index(props) { {detail.name}
- -

{detail.name}

-
- -

{detail.summary}

-
-
-
- {detail.downloadCount} - 下载量 -
-
- {totalFileSize || (detail.fileList && detail.fileList[0] ? detail.fileList[0].fileSizeInfo : 0)} - 文件大小 -
-
- {detail.fileList ? detail.fileList.length : 0} - 文件数量 -
-
- {detail.domainName} - 工具类型 +
+ +

{detail.name}

+
+ +

{detail.summary}

+
+
+
+ {detail.downloadCount} + 下载量 +
+
+ {totalFileSize || (detail.fileList && detail.fileList[0] ? detail.fileList[0].fileSizeInfo : 0)} + 文件大小 +
+
+ {detail.fileList ? detail.fileList.length : 0} + 文件数量 +
+
+ {detail.domainName} + 工具类型 +
{/* 文件列表展示 */} {detail.fileList && detail.fileList.length > 0 && (
-
文件列表
+ {/* 左侧翻页按钮 - 始终显示,但在不需要时作为占位符 */} +
1 ? 'clickable' : 'placeholder'}`} + onClick={currentPage > 1 ? goToPreviousPage : undefined} + > + 上一页 +
+
- {detail.fileList.map((file, index) => ( -
+ {getCurrentPageFiles().map((file, index) => ( +
setHoveredFileId(file.fileId || index)} + onMouseLeave={() => setHoveredFileId(null)} + > +
+ +
{file.fileOriginName} {file.fileSizeInfo} @@ -148,20 +208,21 @@ function Index(props) { } }} > - 下载 +
))}
+ + {/* 右侧翻页按钮 - 始终显示,但在不需要时作为占位符 */} +
+ 下一页 +
)} - -
-
- - {!detail.headImg && } -
-
diff --git a/src/factory/resource/factoryVersion/detail/index.scss b/src/factory/resource/factoryVersion/detail/index.scss index ee5b4aef..e32e7978 100644 --- a/src/factory/resource/factoryVersion/detail/index.scss +++ b/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 @@ } } } -} \ No newline at end of file +} diff --git a/src/images/factory/resource/version-detail-header.webp b/src/images/factory/resource/version-detail-header.webp new file mode 100644 index 00000000..f65b75a9 Binary files /dev/null and b/src/images/factory/resource/version-detail-header.webp differ diff --git a/src/images/factory/resource/version-file-download-hover.webp b/src/images/factory/resource/version-file-download-hover.webp new file mode 100644 index 00000000..ff279289 Binary files /dev/null and b/src/images/factory/resource/version-file-download-hover.webp differ diff --git a/src/images/factory/resource/version-file-download.webp b/src/images/factory/resource/version-file-download.webp new file mode 100644 index 00000000..3594b25c Binary files /dev/null and b/src/images/factory/resource/version-file-download.webp differ diff --git a/src/images/factory/resource/version-file-icon-1.webp b/src/images/factory/resource/version-file-icon-1.webp new file mode 100644 index 00000000..c8c95576 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-1.webp differ diff --git a/src/images/factory/resource/version-file-icon-2.webp b/src/images/factory/resource/version-file-icon-2.webp new file mode 100644 index 00000000..d711a0c7 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-2.webp differ diff --git a/src/images/factory/resource/version-file-icon-3.webp b/src/images/factory/resource/version-file-icon-3.webp new file mode 100644 index 00000000..d51f3b81 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-3.webp differ diff --git a/src/images/factory/resource/version-file-icon-4.webp b/src/images/factory/resource/version-file-icon-4.webp new file mode 100644 index 00000000..02d78b64 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-4.webp differ diff --git a/src/images/factory/resource/version-file-icon-5.webp b/src/images/factory/resource/version-file-icon-5.webp new file mode 100644 index 00000000..7a686c78 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-5.webp differ diff --git a/src/images/factory/resource/version-file-icon-6.webp b/src/images/factory/resource/version-file-icon-6.webp new file mode 100644 index 00000000..072f9bd5 Binary files /dev/null and b/src/images/factory/resource/version-file-icon-6.webp differ diff --git a/src/images/factory/resource/version-item-bg-hover.webp b/src/images/factory/resource/version-item-bg-hover.webp new file mode 100644 index 00000000..396cbc3e Binary files /dev/null and b/src/images/factory/resource/version-item-bg-hover.webp differ diff --git a/src/images/factory/resource/version-item-bg.webp b/src/images/factory/resource/version-item-bg.webp new file mode 100644 index 00000000..58fd42d5 Binary files /dev/null and b/src/images/factory/resource/version-item-bg.webp differ diff --git a/src/images/factory/resource/version-list-left.webp b/src/images/factory/resource/version-list-left.webp new file mode 100644 index 00000000..d5fc491c Binary files /dev/null and b/src/images/factory/resource/version-list-left.webp differ diff --git a/src/images/factory/resource/version-list-right.webp b/src/images/factory/resource/version-list-right.webp new file mode 100644 index 00000000..ae6e4a4c Binary files /dev/null and b/src/images/factory/resource/version-list-right.webp differ