feat(portal): 调整门户快捷入口文字过多时图标高度不一致的问题；略微了门户系统header图标的样式；取消了门户系统表格默认选…

…中的状态 (#1323) 1.做了什么调整门户快捷入口文字过多时图标高度不一致的问题： ![image](https://github.com/PKUHPC/SCOW/assets/72734623/cfe7b42a-2fe0-4ffc-8699-17ed145b293a) ![image](https://github.com/PKUHPC/SCOW/assets/72734623/834ead0c-ad78-499f-b3e9-ff81c1ba8d42) 略微了门户系统header图标的样式： ![image](https://github.com/PKUHPC/SCOW/assets/72734623/e8452850-3a28-445e-8d7f-042f2b8ac331) ![image](https://github.com/PKUHPC/SCOW/assets/72734623/752963b9-0d17-45d5-b69e-ef750956893a) 取消了门户系统表格默认选中的状态
PKUHPC · Jun 25, 2024 · a047082 · a047082
1 parent b874024
commit a047082
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 30 deletions.
diff --git a/.changeset/dull-taxis-kiss.md b/.changeset/dull-taxis-kiss.md
@@ -0,0 +1,5 @@
+---
+"@scow/portal-web": patch
+---
+
+调整门户快捷入口文字过多时图标高度不一致的问题；略微了门户系统 header 图标的样式；取消了门户系统表格默认选中的状态
diff --git a/apps/portal-web/src/icons/headerIcons/headerIcons.tsx b/apps/portal-web/src/icons/headerIcons/headerIcons.tsx
@@ -94,7 +94,7 @@ export const ShellIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((
 
 // 桌面图标
 const desktopSVG = () => (
-  <svg width="1em" height="1em" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="1em" height="1em" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 7H3C1.89543 7 1 7.89543 1 9
     V26C1 27.1046 1.89543 28 3 28
@@ -219,25 +219,16 @@ export const MisIcon = (props) => <Icon component={misSVG} {...props} />;
 
 // 所有作业图标
 const allJobsSVG = () => (
-  <svg width="1em" height="1em" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="4.67856" y="5.57141" width="20.3214" height="19.4286" rx="1" stroke="currentColor" strokeWidth="2" />
+  <svg width="1em" height="1em" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4.67859" y="5.57141" width="20.3214" height="19.4286" rx="1" stroke="#262743" strokeWidth="2" />
+    <rect x="1.10718" y="1" width="7.82143" height="7.82143" rx="1" fill="white" stroke="#262743" strokeWidth="2" />
     <rect
       x="1.10718"
-      y="1"
-      width="7.82143"
-      height="7.82143"
-      rx="1"
-      fill="#F5EBEB"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-    <rect
-      x="1.10715"
       y="12.7142"
       width="7.82143"
       height="7.82143"
       rx="1"
-      fill="#F5EBEB"
+      fill="white"
       stroke="currentColor"
       strokeWidth="2"
     />
@@ -247,14 +238,15 @@ const allJobsSVG = () => (
       width="7.82143"
       height="7.82143"
       rx="1"
-      fill="#F5EBEB"
+      fill="white"
       stroke="currentColor"
       strokeWidth="2"
     />
-    <path d="M14.3929 15.2858H21.5357" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <path d="M14.3929 17.9642H19.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <path d="M14.3929 20.6428H17.9643" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M14.3928 15.2858H21.5357" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M14.3928 17.9642H19.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M14.3928 20.6428H17.9643" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
   </svg>
+
 );
 export const AllJobsIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
   ref: LegacyRef<HTMLSpanElement> | undefined) => (
@@ -416,7 +408,7 @@ const appSessionsSVG = () => (
     <path
       d="M17 19.2857L18.4545 21
     L21 18"
-      stroke="currentColor"
+      stroke="#fff"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -454,3 +446,64 @@ export const InIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((pro
   ref: LegacyRef<HTMLSpanElement> | undefined) => (
   <Icon component={inSVG} {...props} ref={ref} />
 ));
+
+// 作业模板图标
+const templateJobSVG = () => (
+  <svg width="1em" height="1em" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_840_4698" fill="white">
+      <rect x="4" y="3" width="15" height="6" rx="1" />
+    </mask>
+    <rect
+      x="4"
+      y="3"
+      width="15"
+      height="6"
+      rx="1"
+      fill="white"
+      stroke="currentColor"
+      strokeWidth="3"
+      mask="url(#path-1-inside-1_840_4698)"
+    />
+    <rect x="4.5" y="11.5" width="6" height="1" rx="0.5" fill="white" stroke="currentColor" />
+    <rect x="4.5" y="14.5" width="6" height="1" rx="0.5" fill="white" stroke="currentColor" />
+    <mask id="path-4-inside-2_840_4698" fill="white">
+      <rect x="4" y="17" width="7" height="5" rx="1" />
+    </mask>
+    <rect
+      x="4"
+      y="17"
+      width="7"
+      height="5"
+      rx="1"
+      fill="white"
+      stroke="currentColor"
+      strokeWidth="3"
+      mask="url(#path-4-inside-2_840_4698)"
+    />
+    <mask id="path-5-inside-3_840_4698" fill="white">
+      <rect width="7" height="12" rx="1" transform="matrix(-1 0 0 1 19 10)" />
+    </mask>
+    <rect
+      width="7"
+      height="12"
+      rx="1"
+      transform="matrix(-1 0 0 1 19 10)"
+      fill="white"
+      stroke="currentColor"
+      strokeWidth="3"
+      mask="url(#path-5-inside-3_840_4698)"
+    />
+    <path
+      d="M2 1H21C21.5523 1 22 1.44771 22 2V3.97059V14.5588V23C22 23.5523 21.5523 24 21 24
+      H2C1.44771 24 1 23.5523 1 23V2C1 1.44772 1.44772 1 2 1Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const TemplateJobIcon: React.ForwardRefExoticComponent<{}> = React.forwardRef((props,
+  ref: LegacyRef<HTMLSpanElement> | undefined) => (
+  <Icon component={templateJobSVG} {...props} ref={ref} />
+));
diff --git a/apps/portal-web/src/layouts/routes.tsx b/apps/portal-web/src/layouts/routes.tsx
@@ -15,7 +15,7 @@ import {
   CloudSyncOutlined,
   ClusterOutlined,
   LinkOutlined,
-  SaveOutlined } from "@ant-design/icons";
+} from "@ant-design/icons";
 import { NavItemProps } from "@scow/lib-web/build/layouts/base/types";
 import { NavIcon } from "@scow/lib-web/build/layouts/icon";
 import { getI18nConfigCurrentText } from "@scow/lib-web/build/utils/systemLanguage";
@@ -25,7 +25,7 @@ import { AllJobsIcon, ApplicationIcon
   , AppSessionsIcon, ClusterFileManagerIcon
   , CreateAppIcon, DashBoardIcon, DesktopIcon
   , FileManagerIcon, JobIcon, RunningJobsIcon
-  , ShellClusterIcon, ShellIcon, SubmitJobIcon } from "src/icons/headerIcons/headerIcons";
+  , ShellClusterIcon, ShellIcon, SubmitJobIcon, TemplateJobIcon } from "src/icons/headerIcons/headerIcons";
 import { User } from "src/stores/UserStore";
 import { Cluster, LoginNode } from "src/utils/cluster";
 import { publicConfig } from "src/utils/config";
@@ -74,7 +74,7 @@ export const userRoutes: (
           path: "/jobs/submit",
         },
         {
-          Icon: SaveOutlined,
+          Icon: TemplateJobIcon,
           text: t("routes.job.jobTemplates"),
           path: "/jobs/savedJobs",
         },

diff --git a/apps/portal-web/src/pageComponents/dashboard/EntryItem.tsx b/apps/portal-web/src/pageComponents/dashboard/EntryItem.tsx
@@ -35,7 +35,6 @@ const AvatarContainer = styled.div`
 const NameContainer = styled.div`
   text-align: center;
   white-space: nowrap;
-  margin-top: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
@@ -72,13 +71,16 @@ export const EntryItem: React.FC<Props> = ({ style,
             <img
               src={join(publicConfig.PUBLIC_PATH, logoPath)}
               onError={() => handleImageError(entryBaseName)}
-              style={{ maxWidth:"60px", objectFit:"contain" }}
+              style={{ maxWidth:"60px", objectFit:"contain",
+                position:"relative", top:`${(entryExtraInfo?.length ?? 0 - 0) * 8}px` }}
             />
           ) : (
             icon && isSupportedIconName(icon) ? (
               <ColoredIcon
                 name={icon}
-                style={{ fontSize:"60px", color:theme.token.colorPrimary,
+                style={{ fontSize:`${60 - (entryExtraInfo?.length ?? 0 - 0) * 4}px`,
+                  color:theme.token.colorPrimary,
+                  position:"relative", top:`${(entryExtraInfo?.length ?? 0 - 0) * 8}px`,
                 }}
               />
             )
@@ -87,7 +89,11 @@ export const EntryItem: React.FC<Props> = ({ style,
       </AvatarContainer>
       {
         [entryBaseName, ...entryExtraInfo ?? []].map((x, i) => (
-          <NameContainer key={i}>{x}</NameContainer>
+          <NameContainer
+            key={i}
+            style={{ fontWeight:`${((entryExtraInfo) && (i == 1)) ? "700"
+              : "500"}`, position:"relative", bottom:`${entryExtraInfo?.length ?? 0 > 0 ? "0px" : "18px"}` }}
+          >{x}</NameContainer>
         ))
       }
     </ItemContainer>

diff --git a/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx b/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx
@@ -83,11 +83,10 @@ const Container = styled.div`
   }
 
   .rowBgColor{
-    background-color: ${({ theme }) => theme.token.colorBorder};
     /* 去除鼠标经过默认的背景颜色 */
     td {
       background: none !important;
-  }
+    }
   }
 `;
 

diff --git a/apps/portal-web/src/pageComponents/dashboard/PieChartCom.tsx b/apps/portal-web/src/pageComponents/dashboard/PieChartCom.tsx
@@ -71,8 +71,6 @@ export const PieChartCom: React.FC<Props> = ({ pieData, display, total }) => {
     return null;
   }
 
-  console.log(pieData);
-
   // 鼠标激活index的value
   const [hoveredValue, setHoveredValue] = useState<number>(pieData[1].value);
 

diff --git a/libs/web/src/layouts/base/header/BigScreenMenu.tsx b/libs/web/src/layouts/base/header/BigScreenMenu.tsx
@@ -27,10 +27,18 @@ const Container = styled.div`
   }
 
   width: 100%;
+  .ant-menu-item-icon svg{
+    font-size:1.42em
+  }
 
   .ant-menu-item {
     padding-left: 16px !important;
   }
+
+  .ant-menu-title-content{
+    position:relative;
+    bottom:0.2em;
+  }
 `;
 
 interface Props {