Optimize: Card & UI

frontend/src/assets/base.scss

@@ -9,4 +9,6 @@
 
   --phone-width: 992px;
   --app-max-width: 1360px;
+
+  --color-always-white: #ffffff;
 }

frontend/src/assets/global.scss

@@ -68,14 +68,6 @@ html {
   position: absolute;
 }
 
-.global-text-white-border {
-  text-shadow:
-    -1px -1px 0 #ffffff75,
-    1px -1px 0 #ffffff75,
-    -1px 1px 0 #ffffff75,
-    1px 1px 0 #ffffff75;
-}
-
 .global-app-container {
   max-width: var(--app-max-width);
   margin: auto;

frontend/src/assets/variables-dark.scss

@@ -23,6 +23,11 @@
   .app-header-wrapper {
     border-bottom: 1px solid var(--color-gray-5);
   }
+
+  // Antdv for dark mode
+  .ant-btn-default {
+    background-color: var(--vscode-bg-color);
+  }
 }
 
 .app-dark-base-color {

frontend/src/components/AppHeader.vue

@@ -378,6 +378,7 @@ const openPhoneMenu = (b = false) => {
   .phone-menu-btn {
     padding: 16px 8px;
     border-bottom: 1px solid var(--color-gray-4);
+    color: var(--color-gray-12);
   }
 }
 
@@ -394,11 +395,12 @@ const openPhoneMenu = (b = false) => {
     margin-top: 8px;
 
     button {
-      color: var(--color-gray-4);
+      color: var(--color-always-white) !important;
     }
   }
 
-  .phone-nav-button {
+  .phone-nav-button,
+  .phone-nav-button * {
     margin: 0px 6px;
   }
 }

frontend/src/components/BetweenMenus.vue

@@ -18,21 +18,37 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: 12px;
 
   .menus-item-center {
     display: flex;
     justify-content: center;
     width: 30%;
+    flex: 1;
+  }
+  .menus-item-left {
+    flex: 1;
+  }
+  .menus-item-right {
+    text-align: right;
+    flex: 1;
   }
 }
 
 @media (max-width: 585px) {
+  .between-menus-container {
+    display: block;
+  }
+  .menus-item-center {
+    margin-bottom: 12px;
+  }
   .menus-item-left {
     display: none;
   }
-  .menus-item-center {
+  .menus-item-center,
+  .menus-item-right {
     width: 100% !important;
+    text-align: left !important;
   }
 }
 </style>

frontend/src/components/CardPanel.vue

@@ -42,9 +42,9 @@ const props = defineProps({
 @import "@/assets/global.scss";
 .padding {
   padding: 16px;
-  border: 1px solid var(--card-border-color);
 }
 .card-panel {
+  border: 1px solid var(--card-border-color);
   background-color: var(--background-color-white);
   display: flex;
   flex-direction: column;

frontend/src/components/NewCardList/index.vue

@@ -13,6 +13,7 @@ import type { NewCardItem } from "../../config/index";
 import { message } from "ant-design-vue";
 
 import { reportError } from "@/tools/validator";
+import { AppstoreOutlined, BarsOutlined } from "@ant-design/icons-vue";
 
 const { getCardPool } = useCardPool();
 const { insertLayoutItem } = useLayoutConfigStore();
@@ -60,10 +61,10 @@ const cardCategoryList = [
     label: t("TXT_CODE_d941eb89"),
     value: NEW_CARD_TYPE.INSTANCE
   },
-  {
+  // {
-    label: t("TXT_CODE_765d34e6"),
+  //   label: t("TXT_CODE_765d34e6"),
-    value: NEW_CARD_TYPE.USER
+  //   value: NEW_CARD_TYPE.USER
-  },
+  // },
   {
     label: t("TXT_CODE_76b2a495"),
     value: NEW_CARD_TYPE.OTHER
@@ -95,11 +96,12 @@ const handleTabClick = (value: string) => {
           </a-button>
         </div>
         <div v-for="card in cardPool" :key="card.id + currentCardCategory">
-          <a-row v-if="card.category === currentCardCategory" style="margin-bottom: 20px">
+          <a-row v-if="card.category === currentCardCategory" style="margin-bottom: 48px">
             <a-col span="24">
               <a-typography>
                 <a-typography-title :level="4">
-                  <span class="global-text-white-border">
+                  <AppstoreOutlined />
+                  <span class="ml-4">
                     {{ card.title }}
                   </span>
                 </a-typography-title>

frontend/src/views/LayoutContainer.vue

@@ -127,14 +127,6 @@ const showCardOperator = (card: ILayoutCard) => {
     display: none;
   }
 }
-.is-order-mode[data-card-type="EmptyCard"] {
-  .layout-card-container {
-    border: 1px dashed var(--gray-border-color);
-    background-color: var(--drag-background-color);
-    border-radius: 6px;
-    height: 100%;
-  }
-}
 </style>
 
 <style lang="scss" scoped>

frontend/src/widgets/EmptyCard.vue

@@ -10,3 +10,14 @@
   height: 100%;
 }
 </style>
+
+<style lang="less">
+.is-order-mode[data-card-type="EmptyCard"] {
+  .layout-card-container {
+    border: 1px dashed var(--gray-border-color);
+    background-color: var(--color-gray-3);
+    border-radius: 6px;
+    height: 100%;
+  }
+}
+</style>

frontend/src/widgets/InstanceChart.vue

@@ -21,7 +21,7 @@ watch(state, () => {
   const MAX_TIME = source.length - 1;
   for (const key in source) {
     const v = source[key] as JsonData;
-    v.time = `${MAX_TIME - Number(key) * 1} MIN`;
+    v.time = `${MAX_TIME - Number(key) * 1}s`;
   }
   chart.setOption({
     yAxis: {

frontend/src/widgets/InstanceList.vue

@@ -306,14 +306,17 @@ onMounted(async () => {
                   </a-menu-item>
                 </a-menu>
               </template>
-              <a-button class="mr-12">
+              <a-button class="mr-12" style="max-width: 200px; overflow: hidden">
-                {{
+                <a-typography-paragraph
-                  computeNodeName(
+                  :ellipsis="{ rows: 1, expandable: false }"
-                    currentRemoteNode?.ip || "",
+                  :content="
-                    currentRemoteNode?.available || true,
+                    computeNodeName(
-                    currentRemoteNode?.remarks
+                      currentRemoteNode?.ip || '',
-                  )
+                      currentRemoteNode?.available || true,
-                }}
+                      currentRemoteNode?.remarks
+                    )
+                  "
+                />
                 <DownOutlined />
               </a-button>
             </a-dropdown>
@@ -452,7 +455,7 @@ onMounted(async () => {
 .search-input {
   transition: all 0.6s;
   text-align: center;
-  width: 50%;
+  width: 80%;
 }
 
 @media (max-width: 992px) {

frontend/src/widgets/RequestChart.vue

@@ -21,7 +21,7 @@ watch(state, () => {
   const MAX_TIME = source.length - 1;
   for (const key in source) {
     const v = source[key] as JsonData;
-    v.time = `${MAX_TIME - Number(key) * 1} MIN`;
+    v.time = `${MAX_TIME - Number(key) * 1}s`;
   }
   const max = Math.max(...source.map((v) => v.value));
   chart.setOption({

frontend/src/widgets/instance/Terminal.vue

@@ -445,6 +445,7 @@ const innerTerminalType = viewType === "inner";
   }
 
   .terminal-wrapper {
+    border: 1px solid var(--card-border-color);
     position: relative;
     overflow: hidden;
     height: 100%;