将 menu 从 appstore 提出.

orion-ops-ui/src/components/global-setting/block.vue

@@ -2,7 +2,7 @@
   <div class="block">
     <h5 class="title">{{ title }}</h5>
     <div v-for="option in options" :key="option.name" class="switch-wrapper">
-      <span>{{ $t(option.name) }}</span>
+      <span>{{ option.name }}</span>
       <form-wrapper
         :type="option.type || 'switch'"
         :name="option.key"

orion-ops-ui/src/components/global-setting/form-wrapper.vue

@@ -1,18 +1,15 @@
 <template>
-  <a-input-number
-    v-if="type === 'number'"
-    :style="{ width: '80px' }"
-    size="small"
-    :default-value="defaultValue as number"
-    @change="handleChange"
-    hide-button
-  />
-  <a-switch
-    v-else
-    :default-checked="defaultValue"
-    size="small"
-    @change="handleChange"
+  <a-input-number v-if="type === 'number'"
+                  :style="{ width: '80px' }"
+                  size="small"
+                  :default-value="defaultValue as number"
+                  @change="handleChange"
+                  hide-button
   />
+  <a-switch v-else
+            :default-checked="defaultValue"
+            size="small"
+            @change="handleChange" />
 </template>
 
 <script lang="ts" setup>

orion-ops-ui/src/components/global-setting/index.vue

@@ -6,35 +6,27 @@
       </template>
     </a-button>
   </div>
-  <a-drawer
-    :width="300"
-    unmount-on-close
-    :visible="visible"
-    :cancel-text="$t('settings.close')"
-    :ok-text="$t('settings.copySettings')"
-    @ok="copySettings"
-    @cancel="cancel"
-  >
-    <template #title> {{ $t('settings.title') }}</template>
-    <Block :options="contentOpts" :title="$t('settings.content')" />
-    <Block :options="othersOpts" :title="$t('settings.otherSettings')" />
-    <a-alert>{{ $t('settings.alertContent') }}</a-alert>
+  <a-drawer title="偏好设置"
+            :width="300"
+            unmount-on-close
+            :visible="visible"
+            ok-text="保存"
+            cancel-text="关闭"
+            @ok="saveConfig"
+            @cancel="cancel">
+    <Block :options="contentOpts" title="内容区域" />
+    <Block :options="othersOpts" title="其他设置" />
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { Message } from '@arco-design/web-vue';
-  import { useI18n } from 'vue-i18n';
-  import { useClipboard } from '@vueuse/core';
   import { useAppStore } from '@/store';
   import Block from './block.vue';
 
   const emit = defineEmits(['cancel']);
 
   const appStore = useAppStore();
-  const { t } = useI18n();
-  const { copy } = useClipboard();
   const visible = computed(() => appStore.globalSettings);
 
   /**
@@ -42,33 +34,32 @@
    */
   const contentOpts = computed(() => [
     {
-      name: 'settings.navbar',
+      name: '导航栏',
       key: 'navbar',
       defaultVal: appStore.navbar
     },
     {
-      name: 'settings.menu',
+      name: '菜单栏',
       key: 'menu',
       defaultVal: appStore.menu,
     },
     {
-      name: 'settings.topMenu',
+      name: '顶部菜单栏',
       key: 'topMenu',
       defaultVal: appStore.topMenu,
     },
     {
-      name: 'settings.footer',
+      name: '底部',
       key: 'footer',
-      defaultVal:
-      appStore.footer
+      defaultVal: appStore.footer
     },
     {
-      name: 'settings.tabBar',
+      name: '多页签',
       key: 'tabBar',
       defaultVal: appStore.tabBar
     },
     {
-      name: 'settings.menuWidth',
+      name: '菜单宽度 (px)',
       key: 'menuWidth',
       defaultVal: appStore.menuWidth,
       type: 'number',
@@ -80,7 +71,7 @@
    */
   const othersOpts = computed(() => [
     {
-      name: 'settings.colorWeak',
+      name: '色弱模式',
       key: 'colorWeak',
       defaultVal: appStore.colorWeak,
     },
@@ -97,10 +88,7 @@
   /**
    * 复制配置
    */
-  const copySettings = async () => {
-    const text = JSON.stringify(appStore.$state, null, 2);
-    await copy(text);
-    Message.success(t('settings.copySettings.message'));
+  const saveConfig = async () => {
   };
 
   /**

orion-ops-ui/src/components/menu/tree/use-menu-tree.ts

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
 import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
-import { useAppStore } from '@/store';
+import { useMenuStore } from '@/store';
 import { cloneDeep } from 'lodash';
 
 export default function useMenuTree() {
-  const appStore = useAppStore();
+  const menuStore = useMenuStore();
   const appRoute = computed(() => {
-    return appStore.appAsyncMenus;
+    return menuStore.appMenus;
   });
   const menuTree = computed(() => {
     const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];

orion-ops-ui/src/components/message-box/index.vue

@@ -6,17 +6,15 @@
           <span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
         </template>
         <a-result v-if="!renderList.length" status="404">
-          <template #subtitle> {{ $t('messageBox.noContent') }}</template>
+          <template #subtitle>暂无内容</template>
         </a-result>
-        <List
-          :render-list="renderList"
-          :unread-count="unreadCount"
-          @item-click="handleItemClick"
-        />
+        <List :render-list="renderList"
+              :unread-count="unreadCount"
+              @item-click="handleItemClick" />
       </a-tab-pane>
       <template #extra>
         <a-button type="text" @click="emptyList">
-          {{ $t('messageBox.tab.button') }}
+          清空
         </a-button>
       </template>
     </a-tabs>
@@ -25,7 +23,6 @@
 
 <script lang="ts" setup>
   import { ref, reactive, toRefs, computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
   import {
     queryMessageList,
     setMessageStatus,
@@ -43,7 +40,6 @@
 
   const { loading, setLoading } = useLoading(true);
   const messageType = ref('message');
-  const { t } = useI18n();
   const messageData = reactive<{
     renderList: MessageRecord[];
     messageList: MessageRecord[];
@@ -55,15 +51,15 @@
   const tabList: TabItem[] = [
     {
       key: 'message',
-      title: t('messageBox.tab.title.message'),
+      title: '消息',
     },
     {
       key: 'notice',
-      title: t('messageBox.tab.title.notice'),
+      title: '通知',
     },
     {
       key: 'todo',
-      title: t('messageBox.tab.title.todo'),
+      title: '待办',
     },
   ];
 

orion-ops-ui/src/components/message-box/list.vue

@@ -57,10 +57,10 @@
         :class="{ 'add-border-top': renderList.length < showMax }"
       >
         <div class="footer-wrap">
-          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
+          <a-link @click="allRead">全部已读</a-link>
         </div>
         <div class="footer-wrap">
-          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
+          <a-link>查看更多</a-link>
         </div>
       </a-space>
     </template>

orion-ops-ui/src/components/message-box/locale/zh-CN.ts

@@ -1,12 +0,0 @@
-export default {
-  'messageBox.tab.title.message': '消息',
-  'messageBox.tab.title.notice': '通知',
-  'messageBox.tab.title.todo': '待办',
-  'messageBox.tab.button': '清空',
-  'messageBox.allRead': '全部已读',
-  'messageBox.viewMore': '查看更多',
-  'messageBox.noContent': '暂无内容',
-  'messageBox.userCenter': '用户中心',
-  'messageBox.userSettings': '用户设置',
-  'messageBox.logout': '登出登录',
-};

orion-ops-ui/src/components/navbar/index.vue

@@ -31,7 +31,7 @@
     <ul class="right-side">
       <!-- 搜索 -->
       <li v-if="false">
-        <a-tooltip :content="$t('settings.search')">
+        <a-tooltip content="搜索">
           <a-button class="nav-btn" type="outline" shape="circle">
             <template #icon>
               <icon-search />
@@ -41,7 +41,7 @@
       </li>
       <!-- 切换语言 -->
       <li v-if="false">
-        <a-tooltip :content="$t('settings.language')">
+        <a-tooltip content="语言">
           <a-button
             class="nav-btn"
             type="outline"
@@ -69,8 +69,8 @@
       <!-- 暗色模式 -->
       <li>
         <a-tooltip :content="theme === 'light'
-              ? $t('settings.navbar.theme.toDark')
-              : $t('settings.navbar.theme.toLight')">
+              ? '点击切换为暗黑模式'
+              : '点击切换为亮色模式'">
           <a-button
             class="nav-btn"
             type="outline"
@@ -85,7 +85,7 @@
       </li>
       <!-- 消息列表 -->
       <li v-if="false">
-        <a-tooltip :content="$t('settings.navbar.alerts')">
+        <a-tooltip content="消息通知">
           <div class="message-box-trigger">
             <a-badge :count="9" dot>
               <a-button
@@ -112,8 +112,8 @@
       <!-- 全屏模式 -->
       <li>
         <a-tooltip :content="isFullscreen
-              ? $t('settings.navbar.screen.toExit')
-              : $t('settings.navbar.screen.toFull')">
+              ? '点击退出全屏模式'
+              : '点击切换全屏模式'">
           <a-button
             class="nav-btn"
             type="outline"
@@ -126,9 +126,9 @@
           </a-button>
         </a-tooltip>
       </li>
-      <!-- 页面配置 -->
-      <li v-if="false">
-        <a-tooltip :content="$t('settings.title')">
+      <!-- 偏好设置 -->
+      <li>
+        <a-tooltip content="偏好设置">
           <a-button
             class="nav-btn"
             type="outline"
@@ -154,27 +154,21 @@
             <a-doption>
               <a-space @click="$router.push({ name: 'Info' })">
                 <icon-user />
-                <span>
-                  {{ $t('messageBox.userCenter') }}
-                </span>
+                <span>用户中心</span>
               </a-space>
             </a-doption>
             <!-- 用户设置 -->
             <a-doption>
               <a-space @click="$router.push({ name: 'Setting' })">
                 <icon-settings />
-                <span>
-                  {{ $t('messageBox.userSettings') }}
-                </span>
+                <span>用户设置</span>
               </a-space>
             </a-doption>
             <!-- 退出登录 -->
             <a-doption>
               <a-space @click="handleLogout">
                 <icon-export />
-                <span>
-                  {{ $t('messageBox.logout') }}
-                </span>
+                <span>退出登录</span>
               </a-space>
             </a-doption>
           </template>