Optimize: phone ui

frontend/src/components/AppHeader.vue

@@ -14,14 +14,12 @@ import {
   UserOutlined,
   MenuUnfoldOutlined,
   FormatPainterOutlined,
-  TranslationOutlined,
-  PicLeftOutlined,
   RedoOutlined,
   CloseCircleOutlined
 } from "@ant-design/icons-vue";
 import { useScreen } from "@/hooks/useScreen";
 import CardPanel from "./CardPanel.vue";
-import { $t, setLanguage, $t as t } from "@/lang/i18n";
+import { $t, $t as t } from "@/lang/i18n";
 import { THEME, useAppConfigStore } from "@/stores/useAppConfigStore";
 import { logoutUser } from "@/services/apis/index";
 import { message } from "ant-design-vue";
@@ -329,6 +327,7 @@ const openPhoneMenu = (b = false) => {
             <div v-for="(item, index) in appMenus" :key="index">
               <a-button
                 v-if="item.conditions && !item.onlyPC && !item.menus"
+                class="phone-nav-button"
                 type="text"
                 :icon="h(item.icon)"
                 size="small"
@@ -396,6 +395,10 @@ const openPhoneMenu = (b = false) => {
       color: var(--color-gray-4);
     }
   }
+
+  .phone-nav-button {
+    margin: 0px 6px;
+  }
 }
 
 .breadcrumbs {

frontend/src/components/NewCardList/index.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { useCardPool } from "@/stores/useCardPool";
 import LayoutCardComponent from "@/components//LayoutCard.vue";
-import { ref, computed, type Ref } from "vue";
-import { type LayoutCard, NEW_CARD_TYPE } from "@/types";
+import { ref, computed } from "vue";
+import { NEW_CARD_TYPE } from "@/types";
 import { useLayoutConfigStore } from "@/stores/useLayoutConfig";
 import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
 import { useRoute } from "vue-router";
 import Params from "./params.vue";
-import CardPanel from "../CardPanel.vue";
 import { t } from "@/lang/i18n";
 import { ROLE } from "@/config/router";
 import type { NewCardItem } from "../../config/index";
@@ -177,7 +176,7 @@ const handleTabClick = (value: string) => {
   position: fixed;
   right: 0px;
   bottom: 0px;
-  top: 0px;
+  top: 60px;
   left: 0px;
   padding: 24px;
 

frontend/src/views/Login.vue

@@ -115,8 +115,8 @@ defineProps<{
   overflow-x: hidden;
 
   .login-page-body {
-    padding-top: 24px;
     padding: 12px;
+    padding-top: 84px;
     max-width: 1260px !important;
     margin: 0 auto;
     height: 100%;

frontend/src/widgets/LoginCard.vue

@@ -158,13 +158,13 @@ const loginSuccess = () => {
 .login-panel {
   margin: 0 auto;
   transition: all 0.6s;
-  min-width: 356px;
+  min-width: 346px;
   width: 100%;
-  background-color: var(--login-panel-bg);
   // backdrop-filter: saturate(120%) blur(12px);
+  background-color: var(--login-panel-bg);
 
   .login-panel-body {
-    padding: 32px 24px;
+    padding: 28px 24px;
     min-height: 322px;
   }
 }

frontend/src/widgets/NodeOverview.vue

@@ -67,7 +67,12 @@ const dataSource = computed(() => {
   <CardPanel class="NodeOverview" style="height: 100%">
     <template #title>{{ card.title }}</template>
     <template #body>
-      <a-table :columns="columns" :data-source="dataSource" :pagination="false"></a-table>
+      <a-table
+        :scroll="{ x: 1360 }"
+        :columns="columns"
+        :data-source="dataSource"
+        :pagination="false"
+      ></a-table>
     </template>
   </CardPanel>
 </template>

frontend/src/widgets/imageManager/index.vue

@@ -225,6 +225,7 @@ onMounted(async () => {
               </a-typography-text>
             </a-typography-paragraph>
             <a-table
+              :scroll="{ x: 960 }"
               :data-source="imageDataSource"
               :columns="imageColumns"
               :pagination="{
@@ -267,6 +268,7 @@ onMounted(async () => {
               </a-typography-text>
             </a-typography-paragraph>
             <a-table
+              :scroll="{ x: 960 }"
               :data-source="containerDataSource"
               :columns="containerColumns"
               :pagination="{

frontend/src/widgets/user/AccessSettings.vue

@@ -96,7 +96,8 @@ const columns = computed(() => {
       title: t("TXT_CODE_b26a0528"),
       dataIndex: "daemonId",
       key: "daemon",
-      minWidth: "200px"
+      minWidth: "200px",
+      condition: () => !screen.isPhone.value
     },
     {
       align: "center",
@@ -162,7 +163,7 @@ const columns = computed(() => {
       <a-col :span="24">
         <CardPanel class="h-100">
           <template #body>
-            <a-table :data-source="dataSource" :columns="columns">
+            <a-table :scroll="{ x: 'max-content' }" :data-source="dataSource" :columns="columns">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'operation'">
                   <a-button danger size="" @click="handleDelete(record)">