From 4a41a4cf959e2b1ffa3cb29ed8c0fc10f23f9d04 Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Wed, 7 May 2025 11:53:39 +0800 Subject: [PATCH] perf: styles of pipelines --- web/src/app/home/bots/botConfig.module.css | 2 +- .../components/bot-card/botCard.module.css | 2 +- web/src/app/home/bots/page.tsx | 3 +- .../components/pipeline-card/PipelineCard.tsx | 47 ++++++++ .../pipeline-card/PipelineCardComponent.tsx | 29 ----- .../pipeline-card/PipelineCardVO.ts | 14 +-- .../pipeline-card/pipelineCard.module.css | 113 +++++++++++------- web/src/app/home/pipelines/page.tsx | 34 ++++-- .../home/pipelines/pipelineConfig.module.css | 19 +++ web/src/app/infra/api/api-types/index.ts | 1 + 10 files changed, 169 insertions(+), 95 deletions(-) create mode 100644 web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx delete mode 100644 web/src/app/home/pipelines/components/pipeline-card/PipelineCardComponent.tsx diff --git a/web/src/app/home/bots/botConfig.module.css b/web/src/app/home/bots/botConfig.module.css index 2dadb80a..6f2a97ff 100644 --- a/web/src/app/home/bots/botConfig.module.css +++ b/web/src/app/home/bots/botConfig.module.css @@ -13,7 +13,7 @@ align-self: flex-start; justify-self: flex-start; width: calc(100% - 60px); - margin: auto; + margin: auto; display: grid; grid-template-rows: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); diff --git a/web/src/app/home/bots/components/bot-card/botCard.module.css b/web/src/app/home/bots/components/bot-card/botCard.module.css index 7b53fa81..6d35b5c6 100644 --- a/web/src/app/home/bots/components/bot-card/botCard.module.css +++ b/web/src/app/home/bots/components/bot-card/botCard.module.css @@ -42,7 +42,7 @@ } .basicInfoDescription { - font-size: 1.2rem; + font-size: 1rem; font-weight: 300; color: #b1b1b1; } diff --git a/web/src/app/home/bots/page.tsx b/web/src/app/home/bots/page.tsx index 0e7bb4f3..7cbdd7b6 100644 --- a/web/src/app/home/bots/page.tsx +++ b/web/src/app/home/bots/page.tsx @@ -150,8 +150,9 @@ export default function BotConfigPage() {
{botList.map((cardVO) => { diff --git a/web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx b/web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx new file mode 100644 index 00000000..2445aeed --- /dev/null +++ b/web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx @@ -0,0 +1,47 @@ +import styles from './pipelineCard.module.css'; +import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO'; + +export default function PipelineCard({ + cardVO, +}: { + cardVO: PipelineCardVO; +}) { + return ( +
+ +
+ +
+
+ {cardVO.name} +
+
+ {cardVO.description} +
+
+ +
+ +
+ 更新于{cardVO.lastUpdatedTimeAgo} +
+
+ +
+ +
+ + {cardVO.isDefault && ( + +
+ +
+ 默认 +
+
+ )} +
+ +
+ ); +} diff --git a/web/src/app/home/pipelines/components/pipeline-card/PipelineCardComponent.tsx b/web/src/app/home/pipelines/components/pipeline-card/PipelineCardComponent.tsx deleted file mode 100644 index 32045c65..00000000 --- a/web/src/app/home/pipelines/components/pipeline-card/PipelineCardComponent.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styles from './pipelineCard.module.css'; -import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO'; - -export default function PipelineCardComponent({ - cardVO, -}: { - cardVO: PipelineCardVO; -}) { - return ( -
- {/* icon和基本信息 */} -
- {/* icon */} -
ICO
- {/* 基本信息 */} -
-
- {cardVO.name} -
-
- 描述：{cardVO.description} -
-
-
- {/* URL和创建时间 */} -
版本：{cardVO.version}
-
- ); -} diff --git a/web/src/app/home/pipelines/components/pipeline-card/PipelineCardVO.ts b/web/src/app/home/pipelines/components/pipeline-card/PipelineCardVO.ts index b6dd8e18..4ac80938 100644 --- a/web/src/app/home/pipelines/components/pipeline-card/PipelineCardVO.ts +++ b/web/src/app/home/pipelines/components/pipeline-card/PipelineCardVO.ts @@ -2,22 +2,22 @@ export interface IPipelineCardVO { id: string; name: string; description: string; - createTime: string; - version: string; + lastUpdatedTimeAgo: string; + isDefault: boolean; } export class PipelineCardVO implements IPipelineCardVO { - createTime: string; - description: string; id: string; + description: string; name: string; - version: string; + lastUpdatedTimeAgo: string; + isDefault: boolean; constructor(props: IPipelineCardVO) { this.id = props.id; this.name = props.name; this.description = props.description; - this.createTime = props.createTime; - this.version = props.version; + this.lastUpdatedTimeAgo = props.lastUpdatedTimeAgo; + this.isDefault = props.isDefault; } } diff --git a/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css b/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css index 33fe3aa5..de7416ff 100644 --- a/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css +++ b/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css @@ -1,59 +1,86 @@ -.iconBasicInfoContainer { - width: 300px; - height: 100px; - margin-left: 20px; +.cardContainer { + width: 24rem; + height: 10rem; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); + padding: 1.2rem; + cursor: pointer; display: flex; flex-direction: row; -} - -.cardContainer { - width: 360px; - height: 200px; - background-color: #FFF; - border-radius: 9px; - box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: space-evenly; -} - -.icon { - width: 90px; - height: 90px; - border-radius: 5px; - font-size: 40px; - line-height: 90px; - text-align: center; - color: #ffffff; - background: rgba(96, 149, 209, 0.31); - border: 1px solid rgba(96, 149, 209, 0.31); + justify-content: space-between; + gap:0.5rem; } .basicInfoContainer { - width: 200px; - height: 90px; - padding-left: 20px; + width: 100%; + height: 100%; display: flex; flex-direction: column; - align-items: flex-start; justify-content: space-between; + gap: 0.4rem; } -.basicInfoText { - +.basicInfoNameContainer { + display: flex; + flex-direction: column; + gap: 0.2rem; } -.bigText { - font-size: 20px; +.basicInfoNameText { + font-size: 1.4rem; + font-weight: 500; } -.urlAndUpdateText { - margin-left: 20px; +.basicInfoDescriptionText { + font-size: 0.9rem; + font-weight: 400; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + color: #b1b1b1; } -.createCardContainer { - font-size: 90px; - background: #6062E7; - color: white; -} \ No newline at end of file +.basicInfoLastUpdatedTimeContainer { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; +} + +.basicInfoUpdateTimeIcon { + width: 1.2rem; + height: 1.2rem; +} + +.basicInfoUpdateTimeText { + font-size: 1rem; + font-weight: 400; +} + +.operationContainer { + display: flex; + flex-direction: row; + gap: 0.5rem; + width: 5rem; +} + +.operationDefaultBadge { + display: flex; + flex-direction: row; + gap: 0.5rem; +} + +.operationDefaultBadgeIcon { + width: 1.2rem; + height: 1.2rem; + color: #ffcd27; +} + +.operationDefaultBadgeText { + font-size: 1rem; + font-weight: 400; + color: #ffcd27; +} diff --git a/web/src/app/home/pipelines/page.tsx b/web/src/app/home/pipelines/page.tsx index 7349b27a..932f9f12 100644 --- a/web/src/app/home/pipelines/page.tsx +++ b/web/src/app/home/pipelines/page.tsx @@ -5,8 +5,9 @@ import CreateCardComponent from '@/app/infra/basic-component/create-card-compone import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent'; import { httpClient } from '@/app/infra/http/HttpClient'; import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO'; -import PipelineCardComponent from '@/app/home/pipelines/components/pipeline-card/PipelineCardComponent'; +import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard'; import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity'; +import styles from './pipelineConfig.module.css'; export default function PluginConfigPage() { const [modalOpen, setModalOpen] = useState(false); @@ -31,13 +32,18 @@ export default function PluginConfigPage() { httpClient .getPipelines() .then((value) => { + let currentTime = new Date(); const pipelineList = value.pipelines.map((pipeline) => { + let lastUpdatedTimeAgo = Math.floor((currentTime.getTime() - new Date(pipeline.updated_at).getTime()) / 1000 / 60 / 60 / 24); + + let lastUpdatedTimeAgoText = lastUpdatedTimeAgo > 0 ? ` ${lastUpdatedTimeAgo} 天前` : '今天'; + return new PipelineCardVO({ - createTime: pipeline.created_at, + lastUpdatedTimeAgo: lastUpdatedTimeAgoText, description: pipeline.description, id: pipeline.uuid, name: pipeline.name, - version: pipeline.for_version, + isDefault: pipeline.is_default, }); }); setPipelineList(pipelineList); @@ -65,7 +71,7 @@ export default function PluginConfigPage() { } return ( -
+
{pipelineList.length > 0 && ( -
+
+ { + setModalOpen(true); + }} + /> + {pipelineList.map((pipeline) => { return (
- +
); })}
)} - { - setModalOpen(true); - }} - />
); } diff --git a/web/src/app/home/pipelines/pipelineConfig.module.css b/web/src/app/home/pipelines/pipelineConfig.module.css index 66240516..b18be41f 100644 --- a/web/src/app/home/pipelines/pipelineConfig.module.css +++ b/web/src/app/home/pipelines/pipelineConfig.module.css @@ -2,3 +2,22 @@ font-size: 30px; font-weight: bold; } + +.configPageContainer { + width: 100%; + height: 100%; +} + + +.pipelineListContainer { + align-self: flex-start; + justify-self: flex-start; + width: calc(100% - 60px); + margin: auto; + display: grid; + grid-template-rows: repeat(auto-fill, minmax(220px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 2rem; + justify-items: center; + align-items: center; +} diff --git a/web/src/app/infra/api/api-types/index.ts b/web/src/app/infra/api/api-types/index.ts index 582b736f..ebb1f40e 100644 --- a/web/src/app/infra/api/api-types/index.ts +++ b/web/src/app/infra/api/api-types/index.ts @@ -64,6 +64,7 @@ export interface Pipeline { for_version: string; config: object; stages: string[]; + is_default: boolean; created_at: string; updated_at: string; }