feat(portal): 门户系统部分UI更新 (#1277)

做了什么：更改了portal门户部分UI的样式：修改后 ![image](https://github.com/PKUHPC/SCOW/assets/72734623/ecd23877-be51-45ae-bb00-aed555b3a6fe) ![image](https://github.com/PKUHPC/SCOW/assets/72734623/023b0804-7d2c-42e3-8e1b-0f8fcf4e7068) 修改前： ![image](https://github.com/PKUHPC/SCOW/assets/72734623/99e3758f-af15-4da9-bc1a-fedf9f8c3af5) ![image](https://github.com/PKUHPC/SCOW/assets/72734623/99e3758f-af15-4da9-bc1a-fedf9f8c3af5) 图标颜色和主题色相统一： ![image](https://github.com/PKUHPC/SCOW/assets/8363856/42132448-6942-4d7b-afce-a92c8a664118) --------- Co-authored-by: Chen Junda <[email protected]>
PKUHPC · Jun 19, 2024 · f21f3e0 · f21f3e0
1 parent 0a43348
commit f21f3e0
Show file tree

Hide file tree

Showing 35 changed files with 1,120 additions and 210 deletions.
diff --git a/.changeset/brave-dancers-swim.md b/.changeset/brave-dancers-swim.md
@@ -0,0 +1,5 @@
+---
+"@scow/portal-web": patch
+---
+
+修改了 portal 部分 UI 的样式
diff --git a/apps/portal-web/next.config.js b/apps/portal-web/next.config.js
@@ -47,6 +47,20 @@ module.exports = async (phase) => {
           }
         }
       });
+
+      // // 添加SVG处理规则
+      // config.module.rules.push({
+      //   test: /\.svg$/,
+      //   use: [
+      //     {
+      //       loader: "@svgr/webpack",
+      //       options: {
+      //         icon: true,
+      //       },
+      //     },
+      //   ],
+      // });
+
       return config;
     },
     compiler: {

diff --git a/apps/portal-web/src/components/Icon.tsx b/apps/portal-web/src/components/Icon.tsx
@@ -10,15 +10,17 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { BookOutlined, DesktopOutlined, MacCommandOutlined, PlusCircleOutlined, SaveOutlined } from "@ant-design/icons";
 import React, { ComponentType, CSSProperties, ReactElement } from "react";
+import { AllJobsIcon, DeskTopIcon, RunningJobIcon,
+  ShellIcon, SubmitJobIcon, TemplatejobIcon } from "src/icons/EntryItemIcon";
 
 const iconMap = {
-  PlusCircleOutlined: <PlusCircleOutlined />,
-  BookOutlined: <BookOutlined />,
-  SaveOutlined: <SaveOutlined />,
-  DesktopOutlined: <DesktopOutlined />,
-  MacCommandOutlined: <MacCommandOutlined />,
+  PlusCircleOutlined: <SubmitJobIcon />,
+  BookOutlined: <RunningJobIcon />,
+  SaveOutlined: <TemplatejobIcon />,
+  DesktopOutlined: <DeskTopIcon />,
+  MacCommandOutlined: <ShellIcon />,
+  AllJobsOutlined:<AllJobsIcon />,
 };
 
 export type IconName = keyof typeof iconMap;

diff --git a/apps/portal-web/src/components/LanguageSwitcher.tsx b/apps/portal-web/src/components/LanguageSwitcher.tsx
@@ -67,6 +67,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ initialLangu
   return (
     <Container>
       <Select
+        style={{ border: "1px solid #DEDEDE", borderRadius:"5px", backgroundColor:"#fafafa", fontWeight:700 }}
         value={selectedLanguage}
         onChange={(value) => {
           setLanguage(value);

diff --git a/apps/portal-web/src/i18n/en.ts b/apps/portal-web/src/i18n/en.ts
@@ -475,6 +475,9 @@ export default {
         job:"Job",
         pending:"Pending",
         platformOverview:"Platform Overview",
+        totalNodes:"Total Nodes",
+        totalCores:"Total Cores",
+        totalCards:"Total Cards",
       },
       nodeRange:{
         jobs:"Jobs",

diff --git a/apps/portal-web/src/i18n/zh_cn.ts b/apps/portal-web/src/i18n/zh_cn.ts
@@ -454,6 +454,9 @@ export default {
         job:"作业",
         pending:"排队中",
         platformOverview:"平台概览",
+        totalNodes:"总数",
+        totalCores:"总核心数",
+        totalCards:"总卡数",
       },
       nodeRange:{
         jobs:"作业",

diff --git a/apps/portal-web/src/icons/EntryItemIcon.tsx b/apps/portal-web/src/icons/EntryItemIcon.tsx
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Icon from "@ant-design/icons";
+import React, { LegacyRef } from "react";
+
+// 定义图标组件的接口以接受样式属性
+
+// 提交作业的SVG
+const submitJobSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5 2.5H62C63.3807 2.5 64.5 3.61929 64.5 5V11.9118V43.6765
+    V70C64.5 71.3807 63.3807 72.5 62 72.5H5C3.61929 72.5 2.5 71.3807 2.5 70
+    V5C2.5 3.61929 3.61929 2.5 5 2.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+    />
+    <path
+      opacity="0.2"
+      d="M20 13.5H75C76.3807 13.5 77.5 14.6193 77.5 16V22.7529
+    V54.0941V80C77.5 81.3807 76.3807 82.5 75 82.5H20C18.6193 82.5 17.5 81.3807 17.5 80
+    V16C17.5 14.6193 18.6193 13.5 20 13.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+    />
+    <path d="M15.2354 22H50.5295" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <path d="M15.2354 37.8823H41.7059" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <path d="M15.2354 53.7646H32.8824" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <circle opacity="0.8" cx="60" cy="65" r="17" fill="white" />
+    <path d="M54 65L66 65" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    <path d="M60 59L60 71" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+  </svg>
+);
+
+export const SubmitJobIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={submitJobSVG} {...props} ref={ref} />
+));
+
+// 未结束作业的SVG
+const runningJobSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5 2.5H62C63.3807 2.5 64.5 3.61929 64.5 5V11.9118V43.6765V70C64.5 71.3807 63.3807 72.5 62 72.5
+    H5C3.61929 72.5 2.5 71.3807 2.5 70V5C2.5 3.61929 3.61929 2.5 5 2.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+    />
+    <path
+      opacity="0.2"
+      d="M20 13.5H75C76.3807 13.5 77.5 14.6193 77.5 16V22.7529V54.0941V80
+    C77.5 81.3807 76.3807 82.5 75 82.5H20C18.6193 82.5 17.5 81.3807 17.5 80V16C17.5 14.6193 18.6193 13.5 20 13.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+    />
+    <path d="M15.2354 22H50.5295" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <path d="M15.2354 37.8823H41.7059" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <path d="M15.2354 53.7646H32.8824" stroke="white" strokeWidth="5" strokeLinecap="round" />
+    <circle opacity="0.8" cx="60" cy="65" r="17" fill="white" />
+    <path d="M59.0001 60L59 68.5H67.4627" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+  </svg>
+);
+
+export const RunningJobIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={runningJobSVG} {...props} ref={ref} />
+));
+
+// 所有作业的SVG
+const allJobsSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect opacity="0.2" x="9.125" y="13" width="70.875" height="72" rx="5" fill="currentColor" />
+    <rect x="2.5" y="2.5" width="27" height="27" rx="2.5" fill="currentColor" stroke="currentColor" strokeWidth="5" />
+    <rect
+      x="2.5"
+      y="40.4331"
+      width="27"
+      height="27"
+      rx="2.5"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+    />
+    <rect x="40.5" y="2.5" width="27" height="27" rx="2.5" fill="currentColor" stroke="currentColor" strokeWidth="5" />
+    <path d="M44.5498 49.4004H72.0581" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+    <path d="M44.5498 59.5774H66.3667" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+    <path d="M44.5498 69.7544H57.8297" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+  </svg>
+);
+
+export const AllJobsIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={allJobsSVG} {...props} ref={ref} />
+));
+
+// 作业模板SVG
+const templateJobSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      opacity="0.2"
+      x="2.5"
+      y="2.5"
+      width="75"
+      height="80"
+      rx="2.5"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+    />
+    <rect x="7" y="5" width="66" height="21" rx="2" fill="currentColor" />
+    <rect x="7" y="32" width="40" height="28" rx="2" fill="currentColor" />
+    <rect x="7" y="66" width="40" height="14" rx="2" fill="currentColor" />
+    <rect width="20" height="48" rx="2" transform="matrix(-1 0 0 1 73 32)" fill="currentColor" />
+  </svg>
+);
+
+export const TemplatejobIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={templateJobSVG} {...props} ref={ref} />
+));
+
+// 桌面SVG
+const deskTopSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      opacity="0.2"
+      x="8.5"
+      y="23.5"
+      width="69"
+      height="59"
+      rx="2.5"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="5"
+    />
+    <path d="M14 67H55.5" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+    <path d="M29 55L29 67" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+    <path d="M40.4126 55L40.4126 67" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
+    <rect width="70" height="55" rx="5" fill="currentColor" />
+    <path d="M27 5L43 5" stroke="white" strokeWidth="3" strokeLinecap="round" />
+  </svg>
+
+);
+
+export const DeskTopIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={deskTopSVG} {...props} ref={ref} />
+));
+
+// shellSVG
+
+const shellSVG = () => (
+  <svg width="1em" height="1.1em" viewBox="0 0 80 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="8" y="10" width="72" height="75" rx="5" fill="currentColor" fillOpacity="0.2" />
+    <rect x="2.5" y="2.5" width="67" height="69" rx="2.5" fill="currentColor" stroke="currentColor" strokeWidth="5" />
+    <line y1="21.5" x2="72" y2="21.5" stroke="white" strokeWidth="3" />
+    <ellipse cx="10.8815" cy="10.8296" rx="2.52257" ry="2.5" fill="white" />
+    <ellipse cx="19.2403" cy="10.8296" rx="2.52257" ry="2.5" fill="white" />
+    <ellipse cx="27.5992" cy="10.8296" rx="2.52257" ry="2.5" fill="white" />
+    <path
+      d="M18.5752 42.0227L29.7204 50.76
+L18.5752 59.5113"
+      stroke="white"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M37.1504 56.75H53.8682" stroke="white" strokeWidth="5" strokeLinecap="round" />
+  </svg>
+
+);
+
+export const ShellIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={shellSVG} {...props} ref={ref} />
+));
diff --git a/apps/portal-web/src/icons/headerIcons/arrow.svg b/apps/portal-web/src/icons/headerIcons/arrow.svg