fix(portal-web): 改进门户快捷方式的UI (#1137)

![shortcuts-redesign](https://github.com/PKUHPC/SCOW/assets/8363856/c7d81ba8-12e8-4b6a-9712-75f704e8f5d2) 1. 在黑色主题下显示更清晰 2. shell和app类型显示更明确的集群和节点信息 3. 改进一些小的CSS
PKUHPC · Mar 1, 2024 · e581639 · e581639
2 parents d822db7 + 087db33
commit e581639
Show file tree

Hide file tree

Showing 14 changed files with 238 additions and 377 deletions.
diff --git a/.changeset/spotty-onions-notice.md b/.changeset/spotty-onions-notice.md
@@ -0,0 +1,5 @@
+---
+"@scow/portal-web": patch
+---
+
+改进门户快捷方式的 UI
diff --git a/apps/portal-web/public/public/apps/VSCode.svg b/apps/portal-web/public/public/apps/VSCode.svg
diff --git a/apps/portal-web/src/apis/api.mock.ts b/apps/portal-web/src/apis/api.mock.ts
@@ -65,7 +65,7 @@ export const mockApi: MockApi<typeof api> = {
   getQuickEntries:async () => ({ quickEntries: [
     {
       id:"submitJob",
-      name:"提交作业",
+      name:"submitJob",
       entry:{
         $case:"pageLink",
         pageLink:{
@@ -76,7 +76,7 @@ export const mockApi: MockApi<typeof api> = {
     },
     {
       id:"runningJob",
-      name:"未结束的作业",
+      name:"runningJobs",
       entry:{
         $case:"pageLink",
         pageLink:{
@@ -87,7 +87,7 @@ export const mockApi: MockApi<typeof api> = {
     },
     {
       id:"allJobs",
-      name:"所有作业",
+      name:"allJobs",
       entry:{
         $case:"pageLink",
         pageLink:{

diff --git a/apps/portal-web/src/components/Icon.tsx b/apps/portal-web/src/components/Icon.tsx
@@ -51,7 +51,7 @@ const withColor = <P extends IconProps>(
     const { color, style, ...restProps } = props;
 
     const modifiedStyle: CSSProperties = {
-      color: color || "black",
+      color: color,
       ...style,
     };
 

diff --git a/apps/portal-web/src/pageComponents/dashboard/AddEntryModal.tsx b/apps/portal-web/src/pageComponents/dashboard/AddEntryModal.tsx
@@ -12,12 +12,11 @@
 
 import { Entry } from "@scow/protos/build/portal/dashboard";
 import { Button, Modal } from "antd";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { prefix, useI18nTranslateToString } from "src/i18n";
-import { ChangeClusterModal } from "src/pageComponents/dashboard/ChangeClusterModal";
 import { SelectClusterModal } from "src/pageComponents/dashboard/SelectClusterModal";
 import { Cluster, publicConfig } from "src/utils/config";
-import { getEntryIcon, getEntryName } from "src/utils/dashboard";
+import { getEntryBaseName, getEntryIcon } from "src/utils/dashboard";
 import { styled } from "styled-components";
 
 import { EntryItem } from "./EntryItem";
@@ -37,15 +36,21 @@ export interface Props {
   onClose: () => void;
   addItem: (item: Entry) => void;
   apps: AppWithCluster;
-  editItem: (clusterId: string, loginNode?: string) => void;
-  changeClusterOpen: boolean;
-  onChangeClusterClose: () => void;
-  changeClusterItem: Entry | null;
 }
 
 const ItemsContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
+  gap: 12px;
+`;
+
+const ItemContainer = styled.div`
+  cursor: pointer;
+  height: 120px;
+  min-width: 120px;
+  padding: 12px;
+
+  background-color: ${(p) => p.theme.token.colorBgBlur};
 `;
 
 const p = prefix("pageComp.dashboard.addEntryModal.");
@@ -55,14 +60,10 @@ export const AddEntryModal: React.FC<Props> = ({
   onClose,
   addItem,
   apps,
-  editItem,
-  changeClusterOpen,
-  onChangeClusterClose,
-  changeClusterItem,
 }) => {
   const t = useI18nTranslateToString();
 
-  const staticEntry: Entry[] = defaultEntry.concat([
+  const staticEntries: Entry[] = defaultEntry.concat([
     {
       id:"desktop",
       name:"desktop",
@@ -115,19 +116,6 @@ export const AddEntryModal: React.FC<Props> = ({
   // 新建快捷方式的部分信息
   const [incompleteEntryInfo, setIncompleteEntryInfo] = useState<IncompleteEntryInfo | null>(null);
 
-  // 设置要修改信息的快捷方式的 是否需要登录节点 和 可用的集群
-  useEffect(() => {
-    if (changeClusterItem?.entry?.$case === "shell") {
-      setNeedLoginNode(true);
-      setClustersToSelectedApp(clusters);
-    }
-    else if (changeClusterItem?.entry?.$case === "app") {
-      setNeedLoginNode(false);
-      setClustersToSelectedApp(apps![changeClusterItem.id.split("-")[0]].clusters);
-    }
-  }, [changeClusterItem]);
-
-
   const handleClick = (item: Entry | IncompleteEntryInfo) => {
 
     if ((item as Entry).entry?.$case === "shell") {
@@ -174,34 +162,27 @@ export const AddEntryModal: React.FC<Props> = ({
       >
         <ItemsContainer>
           {
-            staticEntry.map((item, idx) => (
-              <div
-                key={idx}
-                onClick={() => { handleClick(item);
-                }}
-              >
+            staticEntries.map((item, idx) => (
+              <ItemContainer key={idx} onClick={() => { handleClick(item); }}>
                 <EntryItem
-                  name={getEntryName(item)}
+                  entryBaseName={getEntryBaseName(item, t)}
                   icon={getEntryIcon(item)}
-                  style={{ padding:"10px" }}
                 />
-              </div>
+              </ItemContainer>
             ),
             )
           }
           {
             appInfo.map((item, idx) => (
-              <div
+              <ItemContainer
                 key={idx}
-                onClick={() => { handleClick(item);
-                }}
+                onClick={() => { handleClick(item); }}
               >
                 <EntryItem
-                  name={item.name}
+                  entryBaseName={item.name}
                   logoPath={apps[item.id].app.logoPath}
-                  style={{ padding:"10px" }}
                 />
-              </div>
+              </ItemContainer>
             ),
             )
           }
@@ -216,16 +197,7 @@ export const AddEntryModal: React.FC<Props> = ({
         addItem={addItem}
         closeAddEntryModal={onClose}
       />
-
-      <ChangeClusterModal
-        open={changeClusterOpen}
-        onClose={onChangeClusterClose}
-        needLoginNode={needLoginNode}
-        clusters={clustersToSelectedApp}
-        editItem={editItem}
-      />
     </>
-
   );
 };
 

diff --git a/apps/portal-web/src/pageComponents/dashboard/CardItem.tsx b/apps/portal-web/src/pageComponents/dashboard/CardItem.tsx
@@ -10,48 +10,66 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { Card } from "antd";
-import { CSSProperties, forwardRef, HTMLAttributes } from "react";
-import { Cluster } from "src/utils/config";
+import { forwardRef, HTMLAttributes } from "react";
 import { styled } from "styled-components";
 
 import { EntryItem } from "./EntryItem";
 
-const Container = styled.div`
-`;
+export type CardItemProps = HTMLAttributes<HTMLDivElement> & {
+  draggable: boolean;
+  transparent?: boolean;
+  isDragging?: boolean;
+};
 
-export type ItemProps = HTMLAttributes<HTMLDivElement> & {
-    draggable: boolean,
-    name: string,
-    id: string,
-    cluster?: Cluster,
-    icon?: string,
-    logoPath?: string;
-    withOpacity?: boolean;
-    isDragging?: boolean;
+
+export type EntryCardItemProps = CardItemProps & {
+  entryBaseName: string,
+  entryExtraInfo?: string[];
+  id: string,
+  icon?: string,
+  logoPath?: string;
 };
 
-export const CardItem = forwardRef<HTMLDivElement, ItemProps>
-(({ draggable, withOpacity, isDragging, style, ...props }, ref) => {
-  const inlineStyles: CSSProperties = {
-    cursor:draggable ?
-      isDragging ? "grabbing" : "grab" :
-      "pointer",
-    opacity: withOpacity ? "0.5" : "1",
-    boxShadow: isDragging ?
-      "rgb(63 63 68 / 5%) 0px 2px 0px 2px, rgb(34 33 81 / 15%) 0px 2px 3px 2px" :
-      "rgb(63 63 68 / 5%) 0px 0px 0px 1px, rgb(34 33 81 / 15%) 0px 1px 3px 0px",
-    transform: isDragging ? "scale(1.05)" : "scale(1)",
-    margin:"20px 30px",
-    ...style,
-  };
+export const EntryCardItem = forwardRef<HTMLDivElement, EntryCardItemProps>
+(({ entryBaseName, entryExtraInfo, icon, logoPath, children, ...props }, ref) => {
+
+  return (
+    <CardItem ref={ref} {...props}>
+      <EntryItem
+        entryBaseName={entryBaseName}
+        icon={icon}
+        logoPath={logoPath}
+        entryExtraInfo={entryExtraInfo}
+      />
+
+    </CardItem>
+  );
+});
+
+const CardItemContainer = styled.div<{
+  draggable?: boolean;
+  isDragging?: boolean;
+  transparent?: boolean;
+}>`
+  cursor: ${(props) => props.draggable ? (props.isDragging ? "grabbing" : "grab") : "pointer"};
+  opacity: ${((props) => props.transparent ? "0.5" : "1")};
+  transform: ${(props) => props.isDragging ? "scale(1.05)" : "scale(1)"};
+  box-shadow: ${(p) => p.theme.token.boxShadowSecondary};
+
+  background-color: ${(p) => p.theme.token.colorBgElevated};
+
+  padding: 8px;
+  height: 172px;
+  min-width: 148px;
+`;
+
+export const CardItem = forwardRef<HTMLDivElement, CardItemProps>
+(({ children, ...props }, ref) => {
 
   return (
-    <Container ref={ref} {...props}>
-      <Card style={inlineStyles}>
-        <EntryItem {...props}></EntryItem>
-      </Card>
-    </Container>
+    <CardItemContainer ref={ref} {...props}>
+      {children}
+    </CardItemContainer>
   );
 });
 
diff --git a/apps/portal-web/src/pageComponents/dashboard/ChangeClusterModal.tsx b/apps/portal-web/src/pageComponents/dashboard/ChangeClusterModal.tsx