feat: 搭建Multilingual Config页面

src/router/index.ts

@@ -184,6 +184,14 @@ const router = createRouter({
             activeMenu: '/system-settings'
           }
         },
+        {
+          path: '/multilingual-config',
+          name: 'Multilingual Config',
+          component: () => import('../views/MultilingualConfig'),
+          meta: {
+            activeMenu: '/system-settings'
+          }
+        },
         {
           path: '/destination-delivery',
           name: 'Destination Delivery',

src/views/Layout/src/components/Menu/MenuView.vue

@@ -18,92 +18,97 @@ watch(
   }
 )
 const getMenuList = () => {
-  $api.getMenuList().then((res) => {
-    if (res.code === 200) {
-      menuList.value = res.data
-    }
-  })
-  // menuList.value = [
-  //   {
-  //     index: '1',
-  //     label: 'Dashboard',
-  //     icon: 'icon_data_fill_b',
-  //     path: '/dashboard'
-  //   },
-  //   {
-  //     index: '2',
-  //     label: 'Booking',
-  //     icon: 'icon_booking__fill_b',
-  //     type: 'list',
-  //     children: [
-  //       {
-  //         index: '2-1',
-  //         label: 'Booking Management',
-  //         path: '/booking'
-  //       },
-  //       {
-  //         index: '2-2',
-  //         label: 'Destination Delivery',
-  //         path: '/destination-delivery'
-  //       }
-  //     ]
-  //   },
-  //   {
-  //     index: '3',
-  //     label: 'Tracking',
-  //     icon: 'icon_tracking__fill_b',
-  //     path: '/tracking'
-  //   },
-  //   {
-  //     index: '4',
-  //     label: 'Report',
-  //     icon: 'icon_report__fill_b',
-  //     path: '/report'
-  //   },
-  //   {
-  //     index: '5',
-  //     label: 'System Management',
-  //     icon: 'icon_system__management_fill_b',
-  //     type: 'list',
-  //     children: [
-  //       {
-  //         index: '5-7',
-  //         label: 'Template Management',
-  //         path: '/template-management'
-  //       },
-  //       {
-  //         index: '5-1',
-  //         label: 'System Message',
-  //         path: '/system-message'
-  //       },
-  //       {
-  //         index: '5-2',
-  //         label: 'System Settings',
-  //         path: '/system-settings'
-  //       },
-  //       {
-  //         index: '5-3',
-  //         label: 'Chat Log',
-  //         path: '/chat-log'
-  //       },
-  //       {
-  //         index: '5-4',
-  //         label: 'AI API Log',
-  //         path: '/ai-api-log'
-  //       },
-  //       {
-  //         index: '5-5',
-  //         label: 'Operation Log',
-  //         path: '/operation-log'
-  //       },
-  //       {
-  //         index: '5-6',
-  //         label: 'Prompt Configuration',
-  //         path: '/prompt-configuration'
-  //       }
-  //     ]
+  // $api.getMenuList().then((res) => {
+  //   if (res.code === 200) {
+  //     menuList.value = res.data
   //   }
-  // ]
+  // })
+  menuList.value = [
+    {
+      index: '1',
+      label: 'Dashboard',
+      icon: 'icon_data_fill_b',
+      path: '/dashboard'
+    },
+    {
+      index: '2',
+      label: 'Booking',
+      icon: 'icon_booking__fill_b',
+      type: 'list',
+      children: [
+        {
+          index: '2-1',
+          label: 'Booking Management',
+          path: '/booking'
+        },
+        {
+          index: '2-2',
+          label: 'Destination Delivery',
+          path: '/destination-delivery'
+        }
+      ]
+    },
+    {
+      index: '3',
+      label: 'Tracking',
+      icon: 'icon_tracking__fill_b',
+      path: '/tracking'
+    },
+    {
+      index: '4',
+      label: 'Report',
+      icon: 'icon_report__fill_b',
+      path: '/report'
+    },
+    {
+      index: '5',
+      label: 'System Management',
+      icon: 'icon_system__management_fill_b',
+      type: 'list',
+      children: [
+        {
+          index: '5-7',
+          label: 'Template Management',
+          path: '/template-management'
+        },
+        {
+          index: '5-1',
+          label: 'System Message',
+          path: '/system-message'
+        },
+        {
+          index: '5-2',
+          label: 'System Settings',
+          path: '/system-settings'
+        },
+        {
+          index: '5-3',
+          label: 'Multilingual Config',
+          path: '/multilingual-config'
+        },
+        {
+          index: '5-4',
+          label: 'Chat Log',
+          path: '/chat-log'
+        },
+        {
+          index: '5-5',
+          label: 'AI API Log',
+          path: '/ai-api-log'
+        },
+        {
+          index: '5-6',
+          label: 'Operation Log',
+          path: '/operation-log'
+        },
+        {
+          index: '5-7',
+          label: 'Prompt Configuration',
+          path: '/prompt-configuration'
+        }
+      ]
+    }
+  ]
 }
 getMenuList()
 //监听窗口大小

src/views/MultilingualConfig/index.ts

@@ -0,0 +1 @@
+export { default } from './src/MultilingualConfig.vue'

src/views/MultilingualConfig/src/MultilingualConfig.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+
+const containerHeight = useCalculatingHeight(document.documentElement, 456, [])
+
+const tableData = ref({
+  border: true,
+  round: true,
+  columns: [
+    {
+      title: 'Key',
+      field: 'key',
+      width: 300,
+      slots: {
+        default: 'key'
+      }
+    },
+    {
+      title: 'English',
+      field: 'english',
+      width: 300,
+      slots: {
+        default: 'english'
+      }
+    },
+    {
+      title: 'Chinese',
+      field: 'chinese',
+      width: 300,
+      slots: {
+        default: 'chinese'
+      }
+    }
+  ],
+  cellConfig: {
+    height: 68
+  },
+  data: [
+    {
+      key: 'Destination Delivery',
+      english: 'Destination Delivery',
+      chinese: '目的地交付'
+    },
+    {
+      key: 'Configurations',
+      english: 'Configurations',
+      chinese: '配置'
+    }
+  ],
+  scrollY: { enabled: true, oSize: 20, gt: 30 },
+  emptyText: ' ',
+  showHeaderOverflow: true,
+  showOverflow: true
+})
+const tableRef = ref<VxeGridInstance | null>(null)
+const tableLoadingTableData = ref(false)
+const tableLoadingColumn = ref(false)
+</script>
+
+<template>
+  <div class="multilingual-config">
+    <div class="header">
+      <span>Destination Delivery</span>
+    </div>
+    <el-divider style="width: calc(100% - 48px); margin: 8px auto" />
+    <div class="config-table">
+      <vxe-grid
+        ref="tableRef"
+        v-vloading="tableLoadingTableData || tableLoadingColumn"
+        :height="containerHeight"
+        :style="{ border: 'none' }"
+        v-bind="tableData"
+      >
+        <template #key="{ row }">
+          <span>{{ row.key }}</span>
+        </template>
+        <template #english="{ row }">
+          <span>{{ row.english }}</span>
+          <div class="unverified-tag">
+            <span class="font_family icon-icon_active" style="font-size: 9px"></span>
+            <span>Unverified</span>
+          </div>
+        </template>
+        <template #chinese="{ row }">
+          <span>{{ row.chinese }}</span>
+          <div class="verified-tag">
+            <span class="font_family icon-icon_delay_b" style="font-size: 14px"></span>
+            <span>Verified</span>
+          </div>
+        </template>
+      </vxe-grid>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.multilingual-config {
+  position: relative;
+  padding-bottom: 40px;
+  background-color: var(--color-mode);
+}
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 68px;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  background-color: var(--color-mode);
+}
+
+.config-table {
+  padding: 0 24px;
+  .unverified-tag,
+  .verified-tag {
+    display: flex;
+    height: 16px;
+    padding: 2px 4px;
+    font-size: 10px;
+  }
+  .unverified-tag {
+    background-color: var(--color-warning-tips-bg);
+  }
+  .verified-tag {
+    background-color: var(--color-tag-confirmed-bg);
+  }
+}
+</style>