初始化 ui.

2023-07-27 18:48:15 +08:00
parent ee53ec6486
commit 5be2c7fda2
185 changed files with 1107 additions and 17815 deletions
--- a/orion-ops-ui/src/components/footer/index.vue
+++ b/orion-ops-ui/src/components/footer/index.vue
@@ -1,8 +1,9 @@
 <template>
-  <a-layout-footer class="footer">Arco Pro</a-layout-footer>
+  <a-layout-footer class="footer">Orion Ops Pro</a-layout-footer>
 </template>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+</script>

 <style lang="less" scoped>
  .footer {
--- a/orion-ops-ui/src/components/global-setting/block.vue
+++ b/orion-ops-ui/src/components/global-setting/block.vue
@@ -24,6 +24,7 @@
    type?: string;
    defaultVal?: boolean | string | number;
  }
+
  defineProps({
    title: {
      type: String,
@@ -37,19 +38,19 @@
    },
  });
  const appStore = useAppStore();
-  const handleChange = async ({
-    key,
-    value,
-  }: {
+
+  /**
+   * 修改配置
+   */
+  const handleChange = async ({ key, value, }: {
    key: string;
    value: unknown;
  }) => {
+    // 色弱模式
    if (key === 'colorWeak') {
      document.body.style.filter = value ? 'invert(80%)' : 'none';
    }
-    if (key === 'menuFromServer' && value) {
-      await appStore.fetchServerMenuConfig();
-    }
+    // 顶部菜单
    if (key === 'topMenu') {
      appStore.updateSettings({
        menuCollapse: false,
--- a/orion-ops-ui/src/components/global-setting/form-wrapper.vue
+++ b/orion-ops-ui/src/components/global-setting/form-wrapper.vue
@@ -3,12 +3,12 @@
    v-if="type === 'number'"
    :style="{ width: '80px' }"
    size="small"
-    :default-value="(defaultValue as number)"
+    :default-value="defaultValue"
    @change="handleChange"
  />
  <a-switch
    v-else
-    :default-checked="(defaultValue as boolean)"
+    :default-checked="defaultValue"
    size="small"
    @change="handleChange"
  />
--- a/orion-ops-ui/src/components/global-setting/index.vue
+++ b/orion-ops-ui/src/components/global-setting/index.vue
@@ -15,7 +15,7 @@
    @ok="copySettings"
    @cancel="cancel"
  >
-    <template #title> {{ $t('settings.title') }} </template>
+    <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>
@@ -36,8 +36,16 @@
  const { t } = useI18n();
  const { copy } = useClipboard();
  const visible = computed(() => appStore.globalSettings);
+
+  /**
+   * 内容配置
+   */
  const contentOpts = computed(() => [
-    { name: 'settings.navbar', key: 'navbar', defaultVal: appStore.navbar },
+    {
+      name: 'settings.navbar',
+      key: 'navbar',
+      defaultVal: appStore.navbar
+    },
    {
      name: 'settings.menu',
      key: 'menu',
@@ -48,12 +56,16 @@
      key: 'topMenu',
      defaultVal: appStore.topMenu,
    },
-    { name: 'settings.footer', key: 'footer', defaultVal: appStore.footer },
-    { name: 'settings.tabBar', key: 'tabBar', defaultVal: appStore.tabBar },
    {
-      name: 'settings.menuFromServer',
-      key: 'menuFromServer',
-      defaultVal: appStore.menuFromServer,
+      name: 'settings.footer',
+      key: 'footer',
+      defaultVal:
+      appStore.footer
+    },
+    {
+      name: 'settings.tabBar',
+      key: 'tabBar',
+      defaultVal: appStore.tabBar
    },
    {
      name: 'settings.menuWidth',
@@ -62,6 +74,10 @@
      type: 'number',
    },
  ]);
+
+  /**
+   * 其他配置
+   */
  const othersOpts = computed(() => [
    {
      name: 'settings.colorWeak',
@@ -70,15 +86,26 @@
    },
  ]);

+  /**
+   * 取消配置
+   */
  const cancel = () => {
    appStore.updateSettings({ globalSettings: false });
    emit('cancel');
  };
+
+  /**
+   * 复制配置
+   */
  const copySettings = async () => {
    const text = JSON.stringify(appStore.$state, null, 2);
    await copy(text);
    Message.success(t('settings.copySettings.message'));
  };
+
+  /**
+   * 显示菜单
+   */
  const setVisible = () => {
    appStore.updateSettings({ globalSettings: true });
  };
--- a/orion-ops-ui/src/components/index.ts
+++ b/orion-ops-ui/src/components/index.ts
@@ -12,8 +12,6 @@ import {
 import Chart from './chart/index.vue';
 import Breadcrumb from './breadcrumb/index.vue';

-// Manually introduce ECharts modules to reduce packing size
-
 use([
  CanvasRenderer,
  BarChart,
--- a/orion-ops-ui/src/components/menu/index.vue
+++ b/orion-ops-ui/src/components/menu/index.vue
@@ -31,19 +31,19 @@
      const selectedKey = ref<string[]>([]);

      const goto = (item: RouteRecordRaw) => {
-        // Open external link
+        // 打开外链
        if (regexUrl.test(item.path)) {
          openWindow(item.path);
          selectedKey.value = [item.name as string];
          return;
        }
-        // Eliminate external link side effects
+        // 设置 selectedKey
        const { hideInMenu, activeMenu } = item.meta as RouteMeta;
        if (route.name === item.name && !hideInMenu && !activeMenu) {
          selectedKey.value = [item.name as string];
          return;
        }
-        // Trigger router change
+        // 触发跳转
        router.push({
          name: item.name,
        });
@@ -64,7 +64,7 @@
          }
        };
        menuTree.value.forEach((el: RouteRecordRaw) => {
-          if (isFind) return; // Performance optimization
+          if (isFind) return;
          backtrack(el, [el.name as string]);
        });
        return result;
--- a/orion-ops-ui/src/components/menu/use-menu-tree.ts
+++ b/orion-ops-ui/src/components/menu/use-menu-tree.ts
@@ -2,23 +2,20 @@ import { computed } from 'vue';
 import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
 import usePermission from '@/hooks/permission';
 import { useAppStore } from '@/store';
-import appClientMenus from '@/router/app-menus';
 import { cloneDeep } from 'lodash';

 export default function useMenuTree() {
  const permission = usePermission();
  const appStore = useAppStore();
  const appRoute = computed(() => {
-    if (appStore.menuFromServer) {
-      return appStore.appAsyncMenus;
-    }
-    return appClientMenus;
+    return appStore.appAsyncMenus;
  });
  const menuTree = computed(() => {
    const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
    copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
      return (a.meta.order || 0) - (b.meta.order || 0);
    });
+
    function travel(_routes: RouteRecordRaw[], layer: number) {
      if (!_routes) return null;

@@ -60,6 +57,7 @@ export default function useMenuTree() {
      });
      return collector.filter(Boolean);
    }
+
    return travel(copyRouter, 0);
  });

--- a/orion-ops-ui/src/components/message-box/list.vue
+++ b/orion-ops-ui/src/components/message-box/list.vue
@@ -1,31 +1,31 @@
 <template>
-  <a-list :bordered='false'>
+  <a-list :bordered="false">
    <a-list-item
-      v-for='item in renderList'
-      :key='item.id'
-      action-layout='vertical'
-      :style='{
+      v-for="item in renderList"
+      :key="item.id"
+      action-layout="vertical"
+      :style="{
        opacity: item.status ? 0.5 : 1,
-      }'
+      }"
    >
      <template #extra>
-        <a-tag v-if='item.messageType === 0' color='gray'>未开始</a-tag>
-        <a-tag v-else-if='item.messageType === 1' color='green'>已开通</a-tag>
-        <a-tag v-else-if='item.messageType === 2' color='blue'>进行中</a-tag>
-        <a-tag v-else-if='item.messageType === 3' color='red'>即将到期</a-tag>
+        <a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
+        <a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
+        <a-tag v-else-if="item.messageType === 2" color="blue">进行中</a-tag>
+        <a-tag v-else-if="item.messageType === 3" color="red">即将到期</a-tag>
      </template>
-      <div class='item-wrap' @click='onItemClick(item)'>
+      <div class="item-wrap" @click="onItemClick(item)">
        <a-list-item-meta>
-          <template v-if='item.avatar' #avatar>
-            <a-avatar shape='circle'>
-              <img v-if='item.avatar' :src='item.avatar' />
+          <template v-if="item.avatar" #avatar>
+            <a-avatar shape="circle">
+              <img v-if="item.avatar" :src="item.avatar" />
              <icon-desktop v-else />
            </a-avatar>
          </template>
          <template #title>
-            <a-space :size='4'>
+            <a-space :size="4">
              <span>{{ item.title }}</span>
-              <a-typography-text type='secondary'>
+              <a-typography-text type="secondary">
                {{ item.subTitle }}
              </a-typography-text>
            </a-space>
@@ -33,14 +33,14 @@
          <template #description>
            <div>
              <a-typography-paragraph
-                :ellipsis='{
+                :ellipsis="{
                  rows: 1,
-                }'
-              >{{ item.content }}
-              </a-typography-paragraph>
+                }"
+                >{{ item.content }}</a-typography-paragraph
+              >
              <a-typography-text
                v-if="item.type === 'message'"
-                class='time-text'
+                class="time-text"
              >
                {{ item.time }}
              </a-typography-text>
@@ -52,110 +52,98 @@
    <template #footer>
      <a-space
        fill
-        :size='0'
+        :size="0"
        :class="{ 'add-border-top': renderList.length < showMax }"
      >
-        <div class='footer-wrap'>
-          <a-link @click='allRead'>{{ $t('messageBox.allRead') }}</a-link>
+        <div class="footer-wrap">
+          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
        </div>
-        <div class='footer-wrap'>
+        <div class="footer-wrap">
          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
        </div>
      </a-space>
    </template>
    <div
-      v-if='renderList.length && renderList.length < 3'
+      v-if="renderList.length && renderList.length < 3"
      :style="{ height: (showMax - renderList.length) * 86 + 'px' }"
    ></div>
  </a-list>
 </template>

-<script lang='ts' setup>
-import { PropType } from 'vue';
-import { MessageRecord, MessageListType } from '@/api/message';
+<script lang="ts" setup>
+  import { PropType } from 'vue';
+  import { MessageRecord, MessageListType } from '@/api/message';

-const props = defineProps({
-  renderList: {
-    type: Array as PropType<MessageListType>,
-    required: true
-  },
-  unreadCount: {
-    type: Number,
-    default: 0
-  }
-});
-const emit = defineEmits(['itemClick']);
-const allRead = () => {
-  emit('itemClick', [...props.renderList]);
-};
+  const props = defineProps({
+    renderList: {
+      type: Array as PropType<MessageListType>,
+      required: true,
+    },
+    unreadCount: {
+      type: Number,
+      default: 0,
+    },
+  });
+  const emit = defineEmits(['itemClick']);
+  const allRead = () => {
+    emit('itemClick', [...props.renderList]);
+  };

-const onItemClick = (item: MessageRecord) => {
-  if (!item.status) {
-    emit('itemClick', [item]);
-  }
-};
-const showMax = 3;
+  const onItemClick = (item: MessageRecord) => {
+    if (!item.status) {
+      emit('itemClick', [item]);
+    }
+  };
+  const showMax = 3;
 </script>

-<style scoped lang='less'>
-:deep(.arco-list) {
-  .arco-list-item {
-    min-height: 86px;
-    border-bottom: 1px solid rgb(var(--gray-3));
-  }
-
-  .arco-list-item-extra {
-    position: absolute;
-    right: 20px;
-  }
-
-  .arco-list-item-meta-content {
-    flex: 1;
-  }
-
-  .item-wrap {
-    cursor: pointer;
-  }
-
-  .time-text {
-    font-size: 12px;
-    color: rgb(var(--gray-6));
-  }
-
-  .arco-empty {
-    display: none;
-  }
-
-  .arco-list-footer {
-    padding: 0;
-    height: 50px;
-    line-height: 50px;
-    border-top: none;
-
-    .arco-space-item {
-      width: 100%;
-      border-right: 1px solid rgb(var(--gray-3));
-
-      &:last-child {
-        border-right: none;
+<style scoped lang="less">
+  :deep(.arco-list) {
+    .arco-list-item {
+      min-height: 86px;
+      border-bottom: 1px solid rgb(var(--gray-3));
+    }
+    .arco-list-item-extra {
+      position: absolute;
+      right: 20px;
+    }
+    .arco-list-item-meta-content {
+      flex: 1;
+    }
+    .item-wrap {
+      cursor: pointer;
+    }
+    .time-text {
+      font-size: 12px;
+      color: rgb(var(--gray-6));
+    }
+    .arco-empty {
+      display: none;
+    }
+    .arco-list-footer {
+      padding: 0;
+      height: 50px;
+      line-height: 50px;
+      border-top: none;
+      .arco-space-item {
+        width: 100%;
+        border-right: 1px solid rgb(var(--gray-3));
+        &:last-child {
+          border-right: none;
+        }
+      }
+      .add-border-top {
+        border-top: 1px solid rgb(var(--gray-3));
      }
    }
-
-    .add-border-top {
+    .footer-wrap {
+      text-align: center;
+    }
+    .arco-typography {
+      margin-bottom: 0;
+    }
+    .add-border {
      border-top: 1px solid rgb(var(--gray-3));
    }
  }
-
-  .footer-wrap {
-    text-align: center;
-  }
-
-  .arco-typography {
-    margin-bottom: 0;
-  }
-
-  .add-border {
-    border-top: 1px solid rgb(var(--gray-3));
-  }
-}
 </style>
--- a/orion-ops-ui/src/components/message-box/locale/en-US.ts
+++ b/orion-ops-ui/src/components/message-box/locale/en-US.ts
@@ -1,13 +0,0 @@
-export default {
-  'messageBox.tab.title.message': 'Message',
-  'messageBox.tab.title.notice': 'Notice',
-  'messageBox.tab.title.todo': 'Todo',
-  'messageBox.tab.button': 'empty',
-  'messageBox.allRead': 'All Read',
-  'messageBox.viewMore': 'View More',
-  'messageBox.noContent': 'No Content',
-  'messageBox.switchRoles': 'Switch Roles',
-  'messageBox.userCenter': 'User Center',
-  'messageBox.userSettings': 'User Settings',
-  'messageBox.logout': 'Logout',
-};
--- a/orion-ops-ui/src/components/message-box/locale/zh-CN.ts
+++ b/orion-ops-ui/src/components/message-box/locale/zh-CN.ts
@@ -6,7 +6,6 @@ export default {
  'messageBox.allRead': '全部已读',
  'messageBox.viewMore': '查看更多',
  'messageBox.noContent': '暂无内容',
-  'messageBox.switchRoles': '切换角色',
  'messageBox.userCenter': '用户中心',
  'messageBox.userSettings': '用户设置',
  'messageBox.logout': '登出登录',
--- a/orion-ops-ui/src/components/navbar/index.vue
+++ b/orion-ops-ui/src/components/navbar/index.vue
@@ -1,17 +1,21 @@
 <template>
  <div class="navbar">
+    <!-- 左侧按钮 -->
    <div class="left-side">
      <a-space>
+        <!-- FIXME -->
+        <!-- LOGO -->
        <img
          alt="logo"
          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
        />
+        <!-- 标头 -->
        <a-typography-title
          :style="{ margin: 0, fontSize: '18px' }"
-          :heading="5"
-        >
-          Arco Pro
+          :heading="5">
+          Orion Ops Pro
        </a-typography-title>
+        <!-- 收缩菜单 -->
        <icon-menu-fold
          v-if="!topMenu && appStore.device === 'mobile'"
          style="font-size: 22px; cursor: pointer"
@@ -19,40 +23,41 @@
        />
      </a-space>
    </div>
+    <!-- 顶部菜单 -->
    <div class="center-side">
      <Menu v-if="topMenu" />
    </div>
+    <!-- 右侧按钮 -->
    <ul class="right-side">
-      <li>
+      <!-- 搜索 -->
+      <li v-if="false">
        <a-tooltip :content="$t('settings.search')">
-          <a-button class="nav-btn" type="outline" :shape="'circle'">
+          <a-button class="nav-btn" type="outline" shape="circle">
            <template #icon>
              <icon-search />
            </template>
          </a-button>
        </a-tooltip>
      </li>
-      <li>
+      <!-- 切换语言 -->
+      <li v-if="false">
        <a-tooltip :content="$t('settings.language')">
          <a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
-            @click="setDropDownVisible"
-          >
+            @click="setUserInfoVisible">
            <template #icon>
              <icon-language />
            </template>
          </a-button>
        </a-tooltip>
-        <a-dropdown trigger="click" @select="changeLocale as any">
-          <div ref="triggerBtn" class="trigger-btn"></div>
+        <a-dropdown trigger="click" @select="changeLocale">
+          <div ref="refUserInfoTrigger" class="trigger-btn"></div>
          <template #content>
-            <a-doption
-              v-for="item in locales"
-              :key="item.value"
-              :value="item.value"
-            >
+            <a-doption v-for="item in locales"
+                       :key="item.value"
+                       :value="item.value">
              <template #icon>
                <icon-check v-show="item.value === currentLocale" />
              </template>
@@ -61,20 +66,16 @@
          </template>
        </a-dropdown>
      </li>
+      <!-- 暗色模式 -->
      <li>
-        <a-tooltip
-          :content="
-            theme === 'light'
+        <a-tooltip :content="theme === 'light'
              ? $t('settings.navbar.theme.toDark')
-              : $t('settings.navbar.theme.toLight')
-          "
-        >
+              : $t('settings.navbar.theme.toLight')">
          <a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
-            @click="handleToggleTheme"
-          >
+            @click="handleToggleTheme">
            <template #icon>
              <icon-moon-fill v-if="theme === 'dark'" />
              <icon-sun-fill v-else />
@@ -82,7 +83,8 @@
          </a-button>
        </a-tooltip>
      </li>
-      <li>
+      <!-- 消息列表 -->
+      <li v-if="false">
        <a-tooltip :content="$t('settings.navbar.alerts')">
          <div class="message-box-trigger">
            <a-badge :count="9" dot>
@@ -90,8 +92,7 @@
                class="nav-btn"
                type="outline"
                :shape="'circle'"
-                @click="setPopoverVisible"
-              >
+                @click="setMessageBoxVisible">
                <icon-notification />
              </a-button>
            </a-badge>
@@ -101,28 +102,23 @@
          trigger="click"
          :arrow-style="{ display: 'none' }"
          :content-style="{ padding: 0, minWidth: '400px' }"
-          content-class="message-popover"
-        >
-          <div ref="refBtn" class="ref-btn"></div>
+          content-class="message-popover">
+          <div ref="refMessageBoxTrigger" class="ref-btn"></div>
          <template #content>
            <message-box />
          </template>
        </a-popover>
      </li>
+      <!-- 全屏模式 -->
      <li>
-        <a-tooltip
-          :content="
-            isFullscreen
+        <a-tooltip :content="isFullscreen
              ? $t('settings.navbar.screen.toExit')
-              : $t('settings.navbar.screen.toFull')
-          "
-        >
+              : $t('settings.navbar.screen.toFull')">
          <a-button
            class="nav-btn"
            type="outline"
-            :shape="'circle'"
-            @click="toggleFullScreen"
-          >
+            shape="circle"
+            @click="toggleFullScreen">
            <template #icon>
              <icon-fullscreen-exit v-if="isFullscreen" />
              <icon-fullscreen v-else />
@@ -130,37 +126,31 @@
          </a-button>
        </a-tooltip>
      </li>
-      <li>
+      <!-- 页面配置 -->
+      <li v-if="false">
        <a-tooltip :content="$t('settings.title')">
          <a-button
            class="nav-btn"
            type="outline"
-            :shape="'circle'"
-            @click="setVisible"
-          >
+            shape="circle"
+            @click="setSettingVisible">
            <template #icon>
              <icon-settings />
            </template>
          </a-button>
        </a-tooltip>
      </li>
+      <!-- 用户信息 -->
      <li>
        <a-dropdown trigger="click">
+          <!-- 头像 -->
          <a-avatar
            :size="32"
-            :style="{ marginRight: '8px', cursor: 'pointer' }"
-          >
-            <img alt="avatar" :src="avatar" />
+            :style="{ cursor: 'pointer', backgroundColor: '#3370ff' }">
+            {{ nickname }}
          </a-avatar>
          <template #content>
-            <a-doption>
-              <a-space @click="switchRoles">
-                <icon-tag />
-                <span>
-                  {{ $t('messageBox.switchRoles') }}
-                </span>
-              </a-space>
-            </a-doption>
+            <!-- 用户信息 -->
            <a-doption>
              <a-space @click="$router.push({ name: 'Info' })">
                <icon-user />
@@ -169,6 +159,7 @@
                </span>
              </a-space>
            </a-doption>
+            <!-- 用户设置 -->
            <a-doption>
              <a-space @click="$router.push({ name: 'Setting' })">
                <icon-settings />
@@ -177,6 +168,7 @@
                </span>
              </a-space>
            </a-doption>
+            <!-- 退出登录 -->
            <a-doption>
              <a-space @click="handleLogout">
                <icon-export />
@@ -200,6 +192,7 @@
  import { LOCALE_OPTIONS } from '@/locale';
  import useLocale from '@/hooks/locale';
  import useUser from '@/hooks/user';
+  import { triggerMouseEvent } from '@/utils';
  import Menu from '@/components/menu/index.vue';
  import MessageBox from '../message-box/index.vue';

@@ -209,56 +202,56 @@
  const { changeLocale, currentLocale } = useLocale();
  const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
  const locales = [...LOCALE_OPTIONS];
-  const avatar = computed(() => {
-    return userStore.avatar;
+  const nickname = computed(() => {
+    return userStore.nickname?.substring(0, 1);
  });
+  const topMenu = computed(() => appStore.topMenu && appStore.menu);
+
+  // 当前主题
  const theme = computed(() => {
    return appStore.theme;
  });
-  const topMenu = computed(() => appStore.topMenu && appStore.menu);
-  const isDark = useDark({
+
+  // 主题
+  const darkTheme = useDark({
    selector: 'body',
    attribute: 'arco-theme',
    valueDark: 'dark',
    valueLight: 'light',
    storageKey: 'arco-theme',
    onChanged(dark: boolean) {
-      // overridden default behavior
      appStore.toggleTheme(dark);
    },
  });
-  const toggleTheme = useToggle(isDark);
+
+  // 切换主题
  const handleToggleTheme = () => {
-    toggleTheme();
+    useToggle(darkTheme)();
  };
-  const setVisible = () => {
+
+  // 打开系统设置
+  const setSettingVisible = () => {
    appStore.updateSettings({ globalSettings: true });
  };
-  const refBtn = ref();
-  const triggerBtn = ref();
-  const setPopoverVisible = () => {
-    const event = new MouseEvent('click', {
-      view: window,
-      bubbles: true,
-      cancelable: true,
-    });
-    refBtn.value.dispatchEvent(event);
+
+  // 消息触发器 ref
+  const refMessageBoxTrigger = ref();
+  const setMessageBoxVisible = () => {
+    triggerMouseEvent(refMessageBoxTrigger);
  };
+
+  // 个人信息触发器 ref
+  const refUserInfoTrigger = ref();
+  const setUserInfoVisible = () => {
+    triggerMouseEvent(refUserInfoTrigger);
+  };
+
+  // 退出登录
  const handleLogout = () => {
    logout();
  };
-  const setDropDownVisible = () => {
-    const event = new MouseEvent('click', {
-      view: window,
-      bubbles: true,
-      cancelable: true,
-    });
-    triggerBtn.value.dispatchEvent(event);
-  };
-  const switchRoles = async () => {
-    const res = await userStore.switchRoles();
-    Message.success(res as string);
-  };
+
+  // 注入收缩菜单
  const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
 </script>

@@ -283,7 +276,6 @@

  .right-side {
    display: flex;
-    padding-right: 20px;
    list-style: none;

    :deep(.locale-select) {
--- a/orion-ops-ui/src/components/tab-bar/index.vue
+++ b/orion-ops-ui/src/components/tab-bar/index.vue
@@ -63,15 +63,18 @@
  .tab-bar-container {
    position: relative;
    background-color: var(--color-bg-2);
+
    .tab-bar-box {
      display: flex;
      padding: 0 0 0 20px;
      background-color: var(--color-bg-2);
      border-bottom: 1px solid var(--color-border);
+
      .tab-bar-scroll {
        height: 32px;
        flex: 1;
        overflow: hidden;
+
        .tags-wrap {
          padding: 4px 0;
          height: 48px;
@@ -83,6 +86,7 @@
            align-items: center;
            margin-right: 6px;
            cursor: pointer;
+
            &:first-child {
              .arco-tag-close-btn {
                display: none;
--- a/orion-ops-ui/src/components/tab-bar/readme.md
+++ b/orion-ops-ui/src/components/tab-bar/readme.md
@@ -1,12 +0,0 @@
-## 组件说明
-
-该组件非官方最终设计规范，以单独组件存在。
-
-同时仅仅提供最基本的功能，后续进行优化及更改。
-
-
-## Component description
-
-The component unofficial final design specification exists as a separate component.
-
-At the same time, only the most basic functions are provided, and subsequent optimizations and changes will be made.
--- a/orion-ops-ui/src/components/tab-bar/tab-item.vue
+++ b/orion-ops-ui/src/components/tab-bar/tab-item.vue
@@ -114,7 +114,7 @@
  });

  const tagClose = (tag: TagProps, idx: number) => {
-    tabBarStore.deleteTag(idx, tag);
+    tabBarStore.deleteTab(idx, tag);
    if (props.itemData.fullPath === route.fullPath) {
      const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
      router.push({ name: latest.name });
@@ -153,6 +153,7 @@
      router.push({ name: itemData.name });
    } else if (value === Eaction.reload) {
      tabBarStore.deleteCache(itemData);
+      console.log(route.fullPath);
      await router.push({
        name: REDIRECT_ROUTE_NAME,
        params: {
@@ -172,28 +173,35 @@
    color: var(--color-text-2);
    text-decoration: none;
  }
+
  .link-activated {
    color: rgb(var(--link-6));
+
    .tag-link {
      color: rgb(var(--link-6));
    }
+
    & + .arco-tag-close-btn {
      color: rgb(var(--link-6));
    }
  }
+
  :deep(.arco-dropdown-option-content) {
    span {
      margin-left: 10px;
    }
  }
+
  .arco-dropdown-open {
    .tag-link {
      color: rgb(var(--danger-6));
    }
+
    .arco-tag-close-btn {
      color: rgb(var(--danger-6));
    }
  }
+
  .sperate-line {
    border-bottom: 1px solid var(--color-neutral-3);
  }