feat: init

src/components/breadcrumb/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <a-breadcrumb class="container-breadcrumb">
+    <a-breadcrumb-item>
+      <icon-apps />
+    </a-breadcrumb-item>
+    <a-breadcrumb-item v-for="item in items" :key="item">
+      {{ $t(item) }}
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+
+defineProps({
+  items: {
+    type: Array as PropType<string[]>,
+    default() {
+      return []
+    },
+  },
+})
+</script>
+
+<style scoped lang="less">
+.container-breadcrumb {
+  margin: 16px 0;
+  :deep(.arco-breadcrumb-item) {
+    color: rgb(var(--gray-6));
+    &:last-child {
+      color: rgb(var(--gray-8));
+    }
+  }
+}
+</style>

src/components/chart/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <VCharts v-if="renderChart" :option="options" :autoresize="autoResize" :style="{ width, height }" />
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue'
+import VCharts from 'vue-echarts'
+// import { useAppStore } from '@/store';
+
+defineProps({
+  options: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  autoResize: {
+    type: Boolean,
+    default: true,
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+})
+// const appStore = useAppStore();
+// const theme = computed(() => {
+//   if (appStore.theme === 'dark') return 'dark';
+//   return '';
+// });
+const renderChart = ref(false)
+// wait container expand
+nextTick(() => {
+  renderChart.value = true
+})
+</script>
+
+<style scoped lang="less"></style>

src/components/footer/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <a-layout-footer class="footer">
+    智能运维管理系统
+    <span style="margin-left: 3px">© {{ currentYear }}</span>
+    <p style="margin-left: 10px">
+      Powered by
+      <!-- <a  target="_blank" style="color: #4d8af0; text-decoration: none">xx</a> -->
+    </p>
+  </a-layout-footer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const currentYear = ref(new Date().getFullYear())
+</script>
+
+<style lang="less" scoped>
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  color: var(--color-text-2);
+  text-align: center;
+}
+</style>

src/components/global-setting/block.vue

@@ -0,0 +1,68 @@
+<template>
+  <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>
+      <form-wrapper :type="option.type || 'switch'" :name="option.key" :default-value="option.defaultVal" @input-change="handleChange" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store'
+import { PropType } from 'vue'
+import FormWrapper from './form-wrapper.vue'
+
+interface OptionsProps {
+  name: string
+  key: string
+  type?: string
+  defaultVal?: boolean | string | number
+}
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array as PropType<OptionsProps[]>,
+    default() {
+      return []
+    },
+  },
+})
+const appStore = useAppStore()
+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,
+    })
+  }
+  appStore.updateSettings({ [key]: value })
+}
+</script>
+
+<style scoped lang="less">
+.block {
+  margin-bottom: 24px;
+}
+
+.title {
+  margin: 10px 0;
+  padding: 0;
+  font-size: 14px;
+}
+
+.switch-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+}
+</style>

src/components/global-setting/form-wrapper.vue

@@ -0,0 +1,34 @@
+<template>
+  <a-input-number
+    v-if="type === 'number'"
+    :style="{ width: '80px' }"
+    size="small"
+    :default-value="defaultValue as number"
+    @change="handleChange"
+  />
+  <a-switch v-else :default-checked="defaultValue as boolean" size="small" @change="handleChange" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  defaultValue: {
+    type: [String, Boolean, Number],
+    default: '',
+  },
+})
+const emit = defineEmits(['inputChange'])
+const handleChange = (value: unknown) => {
+  emit('inputChange', {
+    value,
+    key: props.name,
+  })
+}
+</script>

src/components/global-setting/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
+    <a-button type="primary">
+      <template #icon>
+        <icon-settings />
+      </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>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store'
+import { Message } from '@arco-design/web-vue'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Block from './block.vue'
+
+const emit = defineEmits(['cancel'])
+
+const appStore = useAppStore()
+const { t } = useI18n()
+const { copy } = useClipboard()
+const visible = computed(() => appStore.globalSettings)
+const contentOpts = computed(() => [
+  { name: 'settings.navbar', key: 'navbar', defaultVal: appStore.navbar },
+  // {
+  //   name: 'settings.menu',
+  //   key: 'menu',
+  //   defaultVal: appStore.menu,
+  // },
+  // {
+  //   name: 'settings.topMenu',
+  //   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.menuWidth',
+    key: 'menuWidth',
+    defaultVal: appStore.menuWidth,
+    type: 'number',
+  },
+])
+const othersOpts = computed(() => [
+  {
+    name: 'settings.colorWeak',
+    key: 'colorWeak',
+    defaultVal: appStore.colorWeak,
+  },
+])
+
+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 })
+}
+</script>
+
+<style scoped lang="less">
+.fixed-settings {
+  position: fixed;
+  top: 280px;
+  right: 0;
+
+  svg {
+    font-size: 18px;
+    vertical-align: -4px;
+  }
+}
+</style>

src/components/index.ts

@@ -0,0 +1,29 @@
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
+import { DataZoomComponent, GraphicComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { App } from 'vue'
+import Breadcrumb from './breadcrumb/index.vue'
+import Chart from './chart/index.vue'
+
+// Manually introduce ECharts modules to reduce packing size
+
+use([
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  GraphicComponent,
+])
+
+export default {
+  install(Vue: App) {
+    Vue.component('Chart', Chart)
+    Vue.component('Breadcrumb', Breadcrumb)
+  },
+}

src/components/menu/index.vue

@@ -0,0 +1,151 @@
+<script lang="tsx">
+// @ts-nocheck
+import { useAppStore } from '@/store'
+import { openWindow, regexUrl } from '@/utils'
+import { listenerRouteChange } from '@/utils/route-listener'
+import { compile, computed, defineComponent, h, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { RouteMeta } from 'vue-router'
+import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
+import useMenuTree from './use-menu-tree'
+
+export default defineComponent({
+  emit: ['collapse'],
+  setup() {
+    const { t } = useI18n()
+    const appStore = useAppStore()
+    const router = useRouter()
+    const route = useRoute()
+    const { menuTree } = useMenuTree()
+    const collapsed = computed({
+      get() {
+        if (appStore.device === 'desktop') return appStore.menuCollapse
+        return false
+      },
+      set(value: boolean) {
+        appStore.updateSettings({ menuCollapse: value })
+      },
+    })
+
+    const topMenu = computed(() => appStore.topMenu)
+    const openKeys = ref<string[]>([])
+    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
+      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,
+      })
+    }
+    const findMenuOpenKeys = (target: string) => {
+      const result: string[] = []
+      let isFind = false
+      const backtrack = (item: RouteRecordRaw, keys: string[]) => {
+        if (item.name === target) {
+          isFind = true
+          result.push(...keys)
+          return
+        }
+        if (item.children?.length) {
+          item.children.forEach((el) => {
+            backtrack(el, [...keys, el.name as string])
+          })
+        }
+      }
+      menuTree.value.forEach((el: RouteRecordRaw) => {
+        if (isFind) return // Performance optimization
+        backtrack(el, [el.name as string])
+      })
+      return result
+    }
+    listenerRouteChange((newRoute) => {
+      const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta
+      if (requiresAuth && (!hideInMenu || activeMenu)) {
+        const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string)
+
+        const keySet = new Set([...menuOpenKeys, ...openKeys.value])
+        openKeys.value = [...keySet]
+
+        selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]]
+      }
+    }, true)
+    const setCollapse = (val: boolean) => {
+      if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val })
+    }
+
+    const renderSubMenu = () => {
+      function travel(_route: RouteRecordRaw[], nodes = []) {
+        if (_route) {
+          _route.forEach((element) => {
+            // This is demo, modify nodes as needed
+            const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null
+            const node =
+              element?.children && element?.children.length !== 0 ? (
+                <a-sub-menu
+                  key={element?.name}
+                  v-slots={{
+                    icon,
+                    title: () => h(compile(t(element?.meta?.locale || ''))),
+                  }}
+                >
+                  {travel(element?.children)}
+                </a-sub-menu>
+              ) : (
+                <a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
+                  {t(element?.meta?.locale || '')}
+                </a-menu-item>
+              )
+            nodes.push(node as never)
+          })
+        }
+        return nodes
+      }
+      return travel(menuTree.value)
+    }
+
+    return () => (
+      <a-menu
+        theme='dark'
+        mode={topMenu.value ? 'horizontal' : 'vertical'}
+        v-model:collapsed={collapsed.value}
+        v-model:open-keys={openKeys.value}
+        show-collapse-button={appStore.device !== 'mobile'}
+        auto-open={false}
+        selected-keys={selectedKey.value}
+        auto-open-selected={true}
+        level-indent={34}
+        style='height: 100%;width:100%;'
+        onCollapse={setCollapse}
+      >
+        {renderSubMenu()}
+      </a-menu>
+    )
+  },
+})
+</script>
+
+<style lang="less" scoped>
+:deep(.arco-menu-inner) {
+  .arco-menu-inline-header {
+    display: flex;
+    align-items: center;
+  }
+  .arco-icon {
+    &:not(.arco-icon-down) {
+      font-size: 18px;
+    }
+  }
+}
+</style>

src/components/menu/use-menu-tree.ts

@@ -0,0 +1,67 @@
+import usePermission from '@/hooks/permission'
+import appClientMenus from '@/router/app-menus'
+import { useAppStore } from '@/store'
+import { cloneDeep } from 'lodash'
+import { computed } from 'vue'
+import { RouteRecordNormalized, RouteRecordRaw } from 'vue-router'
+
+export default function useMenuTree() {
+  const permission = usePermission()
+  const appStore = useAppStore()
+  const appRoute = computed(() => {
+    if (appStore.menuFromServer) {
+      return appStore.appAsyncMenus
+    }
+    return appClientMenus
+  })
+  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
+
+      const collector: any = _routes.map((element) => {
+        // no access
+        if (!permission.accessRouter(element)) {
+          return null
+        }
+
+        // leaf node
+        if (element.meta?.hideChildrenInMenu || !element.children) {
+          element.children = []
+          return element
+        }
+
+        // route filter hideInMenu true
+        element.children = element.children.filter((x) => x.meta?.hideInMenu !== true)
+
+        // Associated child node
+        const subItem = travel(element.children, layer + 1)
+
+        if (subItem.length) {
+          element.children = subItem
+          return element
+        }
+        // the else logic
+        if (layer > 1) {
+          element.children = subItem
+          return element
+        }
+
+        if (element.meta?.hideInMenu === false) {
+          return element
+        }
+
+        return null
+      })
+      return collector.filter(Boolean)
+    }
+    return travel(copyRouter, 0)
+  })
+
+  return {
+    menuTree,
+  }
+}

src/components/message-box/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <a-spin style="display: block" :loading="loading">
+    <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
+      <a-tab-pane v-for="item in tabList" :key="item.key">
+        <template #title>
+          <span>{{ item.title }}{{ formatUnreadLength(item.key) }}</span>
+        </template>
+        <a-result v-if="!renderList.length" status="404">
+          <template #subtitle>{{ $t('messageBox.noContent') }}</template>
+        </a-result>
+        <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>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { MessageListType, MessageRecord, queryMessageList, setMessageStatus } from '@/api/message'
+import useLoading from '@/hooks/loading'
+import { computed, reactive, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import List from './list.vue'
+
+interface TabItem {
+  key: string
+  title: string
+  avatar?: string
+}
+const { loading, setLoading } = useLoading(true)
+const messageType = ref('message')
+const { t } = useI18n()
+const messageData = reactive<{
+  renderList: MessageRecord[]
+  messageList: MessageRecord[]
+}>({
+  renderList: [],
+  messageList: [],
+})
+toRefs(messageData)
+const tabList: TabItem[] = [
+  {
+    key: 'message',
+    title: t('messageBox.tab.title.message'),
+  },
+  {
+    key: 'notice',
+    title: t('messageBox.tab.title.notice'),
+  },
+  {
+    key: 'todo',
+    title: t('messageBox.tab.title.todo'),
+  },
+]
+async function fetchSourceData() {
+  setLoading(true)
+  try {
+    const { data } = await queryMessageList()
+    messageData.messageList = data
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false)
+  }
+}
+async function readMessage(data: MessageListType) {
+  const ids = data.map((item) => item.id)
+  await setMessageStatus({ ids })
+  fetchSourceData()
+}
+const renderList = computed(() => {
+  return messageData.messageList.filter((item) => messageType.value === item.type)
+})
+const unreadCount = computed(() => {
+  return renderList.value.filter((item) => !item.status).length
+})
+const getUnreadList = (type: string) => {
+  const list = messageData.messageList.filter((item) => item.type === type && !item.status)
+  return list
+}
+const formatUnreadLength = (type: string) => {
+  const list = getUnreadList(type)
+  return list.length ? `(${list.length})` : ``
+}
+const handleItemClick = (items: MessageListType) => {
+  if (renderList.value.length) readMessage([...items])
+}
+const emptyList = () => {
+  messageData.messageList = []
+}
+fetchSourceData()
+</script>
+
+<style scoped lang="less">
+:deep(.arco-popover-popup-content) {
+  padding: 0;
+}
+
+:deep(.arco-list-item-meta) {
+  align-items: flex-start;
+}
+:deep(.arco-tabs-nav) {
+  padding: 14px 0 12px 16px;
+  border-bottom: 1px solid var(--color-neutral-3);
+}
+:deep(.arco-tabs-content) {
+  padding-top: 0;
+  .arco-result-subtitle {
+    color: rgb(var(--gray-6));
+  }
+}
+</style>

src/components/message-box/list.vue

@@ -0,0 +1,140 @@
+<template>
+  <a-list :bordered="false">
+    <a-list-item
+      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>
+      </template>
+      <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" />
+              <icon-desktop v-else />
+            </a-avatar>
+          </template>
+          <template #title>
+            <a-space :size="4">
+              <span>{{ item.title }}</span>
+              <a-typography-text type="secondary">
+                {{ item.subTitle }}
+              </a-typography-text>
+            </a-space>
+          </template>
+          <template #description>
+            <div>
+              <a-typography-paragraph
+                :ellipsis="{
+                  rows: 1,
+                }"
+              >
+                {{ item.content }}
+              </a-typography-paragraph>
+              <a-typography-text v-if="item.type === 'message'" class="time-text">
+                {{ item.time }}
+              </a-typography-text>
+            </div>
+          </template>
+        </a-list-item-meta>
+      </div>
+    </a-list-item>
+    <template #footer>
+      <a-space fill :size="0" :class="{ 'add-border-top': renderList.length < showMax }">
+        <div class="footer-wrap">
+          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
+        </div>
+        <div class="footer-wrap">
+          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
+        </div>
+      </a-space>
+    </template>
+    <div v-if="renderList.length && renderList.length < 3" :style="{ height: (showMax - renderList.length) * 86 + 'px' }"></div>
+  </a-list>
+</template>
+
+<script lang="ts" setup>
+import { MessageListType, MessageRecord } from '@/api/message'
+import { PropType } from 'vue'
+
+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
+</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;
+      }
+    }
+    .add-border-top {
+      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>

src/components/message-box/locale/en-US.ts

@@ -0,0 +1,13 @@
+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',
+}

src/components/message-box/locale/zh-CN.ts

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

src/components/navbar/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="navbar">
+    <div class="left-side">
+      <a-space>
+        <icon-menu-fold
+          v-if="!topMenu && appStore.device === 'mobile'"
+          style="font-size: 22px; cursor: pointer"
+          @click="toggleDrawerMenu"
+        />
+      </a-space>
+    </div>
+    <ul class="right-side">
+      <!-- <li>
+        <a-tooltip :content="$t('settings.search')">
+          <a-button class="nav-btn" type="outline" :shape="'circle'">
+            <template #icon>
+              <icon-search />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </li> -->
+      <li>
+        <a-tooltip :content="$t('settings.language')">
+          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setDropDownVisible">
+            <template #icon>
+              <icon-language />
+            </template>
+          </a-button>
+        </a-tooltip>
+        <a-dropdown trigger="click" @select="changeLocale as any">
+          <div ref="triggerBtn" class="trigger-btn"></div>
+          <template #content>
+            <a-doption v-for="item in locales" :key="item.value" :value="item.value">
+              <template #icon>
+                <icon-check v-show="item.value === currentLocale" />
+              </template>
+              {{ item.label }}
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </li>
+      <li>
+        <a-tooltip :content="theme === 'light' ? $t('settings.navbar.theme.toDark') : $t('settings.navbar.theme.toLight')">
+          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="handleToggleTheme">
+            <template #icon>
+              <icon-moon-fill v-if="theme === 'dark'" />
+              <icon-sun-fill v-else />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.navbar.alerts')">
+          <div class="message-box-trigger">
+            <a-badge :count="9" dot>
+              <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setPopoverVisible">
+                <icon-notification />
+              </a-button>
+            </a-badge>
+          </div>
+        </a-tooltip>
+        <a-popover
+          trigger="click"
+          :arrow-style="{ display: 'none' }"
+          :content-style="{ padding: 0, minWidth: '400px' }"
+          content-class="message-popover"
+        >
+          <div ref="refBtn" class="ref-btn"></div>
+          <template #content>
+            <message-box />
+          </template>
+        </a-popover>
+      </li>
+      <li>
+        <a-tooltip :content="isFullscreen ? t('settings.navbar.screen.toExit') : t('settings.navbar.screen.toFull')">
+          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="toggleFullScreen">
+            <template #icon>
+              <icon-fullscreen-exit v-if="isFullscreen" />
+              <icon-fullscreen v-else />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="t('settings.title')">
+          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setVisible">
+            <template #icon>
+              <icon-settings />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-dropdown trigger="click">
+          <a-avatar :size="32" :style="{ marginRight: '8px' }">
+            <img alt="avatar" :src="avatar" />
+          </a-avatar>
+          <template #content>
+            <a-doption>
+              <a-space @click="handleLogout">
+                <icon-export />
+                <span>
+                  {{ t('messageBox.logout') }}
+                </span>
+              </a-space>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useLocale from '@/hooks/locale'
+import useUser from '@/hooks/user'
+import { LOCALE_OPTIONS } from '@/locale'
+import { useAppStore, useUserStore } from '@/store'
+import { Message } from '@arco-design/web-vue'
+import { useDark, useFullscreen, useToggle } from '@vueuse/core'
+import { computed, inject, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MessageBox from '../message-box/index.vue'
+
+const { t } = useI18n()
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+const { logout } = useUser()
+const { changeLocale, currentLocale }: any = useLocale()
+const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
+const locales = [...LOCALE_OPTIONS]
+const avatar = computed(() => {
+  return userStore.avatar
+})
+const theme = computed(() => {
+  return appStore.theme
+})
+const topMenu = computed(() => appStore.topMenu && appStore.menu)
+const isDark = 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()
+}
+const setVisible = () => {
+  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)
+}
+const handleLogout = () => {
+  logout()
+}
+const setDropDownVisible = () => {
+  const event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  })
+  triggerBtn.value.dispatchEvent(event)
+}
+const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void
+
+</script>
+
+<style scoped lang="less">
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 60px;
+  z-index: 99;
+}
+
+.left-side {
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.right-side {
+  display: flex;
+  padding-right: 20px;
+  list-style: none;
+
+  :deep(.locale-select) {
+    border-radius: 20px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+  }
+
+  a {
+    color: var(--color-text-1);
+    text-decoration: none;
+  }
+
+  .nav-btn {
+    border-color: rgb(var(--gray-2));
+    color: rgb(var(--gray-8));
+    font-size: 16px;
+  }
+
+  .trigger-btn,
+  .ref-btn {
+    position: absolute;
+    bottom: 14px;
+  }
+
+  .trigger-btn {
+    margin-left: 14px;
+  }
+}
+</style>
+
+<style lang="less">
+.message-popover {
+  .arco-popover-content {
+    margin-top: 0;
+  }
+}
+
+.arco-dropdown-list-wrapper {
+  max-height: 100vh !important;
+}
+</style>

src/components/tab-bar/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="tab-bar-container">
+    <a-affix ref="affixRef" :offset-top="offsetTop">
+      <div class="tab-bar-box">
+        <div class="tab-bar-scroll">
+          <div class="tags-wrap">
+            <tab-item v-for="(tag, index) in tagList" :key="tag.fullPath" :index="index" :item-data="tag" />
+          </div>
+        </div>
+        <div class="tag-bar-operation"></div>
+      </div>
+    </a-affix>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore, useTabBarStore } from '@/store'
+import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import tabItem from './tab-item.vue'
+
+const appStore = useAppStore()
+const tabBarStore = useTabBarStore()
+
+const affixRef = ref()
+const tagList = computed(() => {
+  return tabBarStore.getTabList
+})
+const offsetTop = computed(() => {
+  return appStore.navbar ? 60 : 0
+})
+
+watch(
+  () => appStore.navbar,
+  () => {
+    affixRef.value.updatePosition()
+  }
+)
+listenerRouteChange((route: RouteLocationNormalized) => {
+  if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
+    tabBarStore.updateTabList(route)
+  }
+}, true)
+
+onUnmounted(() => {
+  removeRouteListener()
+})
+</script>
+
+<style scoped lang="less">
+.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;
+        white-space: nowrap;
+        overflow-x: auto;
+
+        :deep(.arco-tag) {
+          display: inline-flex;
+          align-items: center;
+          margin-right: 6px;
+          cursor: pointer;
+          &:first-child {
+            .arco-tag-close-btn {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tag-bar-operation {
+    width: 100px;
+    height: 32px;
+  }
+}
+</style>

src/components/tab-bar/readme.md

@@ -0,0 +1,11 @@
+## 组件说明
+
+该组件非官方最终设计规范，以单独组件存在。
+
+同时仅仅提供最基本的功能，后续进行优化及更改。
+
+## 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.

src/components/tab-bar/tab-item.vue

@@ -0,0 +1,188 @@
+<template>
+  <a-dropdown trigger="contextMenu" :popup-max-height="false" @select="actionSelect">
+    <span
+      class="arco-tag arco-tag-size-medium arco-tag-checked"
+      :class="{ 'link-activated': itemData.fullPath === $route.fullPath }"
+      @click="goto(itemData)"
+    >
+      <span class="tag-link">
+        {{ $t(itemData.title) }}
+      </span>
+      <span
+        class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
+        @click.stop="tagClose(itemData, index)"
+      >
+        <icon-close />
+      </span>
+    </span>
+    <template #content>
+      <a-doption :disabled="disabledReload" :value="Eaction.reload">
+        <icon-refresh />
+        <span>重新加载</span>
+      </a-doption>
+      <a-doption class="sperate-line" :disabled="disabledCurrent" :value="Eaction.current">
+        <icon-close />
+        <span>关闭当前标签页</span>
+      </a-doption>
+      <a-doption :disabled="disabledLeft" :value="Eaction.left">
+        <icon-to-left />
+        <span>关闭左侧标签页</span>
+      </a-doption>
+      <a-doption class="sperate-line" :disabled="disabledRight" :value="Eaction.right">
+        <icon-to-right />
+        <span>关闭右侧标签页</span>
+      </a-doption>
+      <a-doption :value="Eaction.others">
+        <icon-swap />
+        <span>关闭其它标签页</span>
+      </a-doption>
+      <a-doption :value="Eaction.all">
+        <icon-folder-delete />
+        <span>关闭全部标签页</span>
+      </a-doption>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants'
+import { useTabBarStore } from '@/store'
+import type { TagProps } from '@/store/modules/tab-bar/types'
+import { PropType, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// eslint-disable-next-line no-shadow
+enum Eaction {
+  reload = 'reload',
+  current = 'current',
+  left = 'left',
+  right = 'right',
+  others = 'others',
+  all = 'all',
+}
+
+const props = defineProps({
+  itemData: {
+    type: Object as PropType<TagProps>,
+    default() {
+      return []
+    },
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const router = useRouter()
+const route = useRoute()
+const tabBarStore = useTabBarStore()
+
+const goto = (tag: TagProps) => {
+  router.push({ ...tag })
+}
+const tagList = computed(() => {
+  return tabBarStore.getTabList
+})
+
+const disabledReload = computed(() => {
+  return props.itemData.fullPath !== route.fullPath
+})
+
+const disabledCurrent = computed(() => {
+  return props.index === 0
+})
+
+const disabledLeft = computed(() => {
+  return [0, 1].includes(props.index)
+})
+
+const disabledRight = computed(() => {
+  return props.index === tagList.value.length - 1
+})
+
+const tagClose = (tag: TagProps, idx: number) => {
+  tabBarStore.deleteTag(idx, tag)
+  if (props.itemData.fullPath === route.fullPath) {
+    const latest = tagList.value[idx - 1] // 获取队列的前一个tab
+    router.push({ name: latest.name })
+  }
+}
+
+const findCurrentRouteIndex = () => {
+  return tagList.value.findIndex((el) => el.fullPath === route.fullPath)
+}
+const actionSelect = async (value: any) => {
+  const { itemData, index } = props
+  const copyTagList = [...tagList.value]
+  if (value === Eaction.current) {
+    tagClose(itemData, index)
+  } else if (value === Eaction.left) {
+    const currentRouteIdx = findCurrentRouteIndex()
+    copyTagList.splice(1, props.index - 1)
+
+    tabBarStore.freshTabList(copyTagList)
+    if (currentRouteIdx < index) {
+      router.push({ name: itemData.name })
+    }
+  } else if (value === Eaction.right) {
+    const currentRouteIdx = findCurrentRouteIndex()
+    copyTagList.splice(props.index + 1)
+
+    tabBarStore.freshTabList(copyTagList)
+    if (currentRouteIdx > index) {
+      router.push({ name: itemData.name })
+    }
+  } else if (value === Eaction.others) {
+    const filterList = tagList.value.filter((el, idx) => {
+      return idx === 0 || idx === props.index
+    })
+    tabBarStore.freshTabList(filterList)
+    router.push({ name: itemData.name })
+  } else if (value === Eaction.reload) {
+    tabBarStore.deleteCache(itemData)
+    await router.push({
+      name: REDIRECT_ROUTE_NAME,
+      params: {
+        path: route.fullPath,
+      },
+    })
+    tabBarStore.addCache(itemData.name)
+  } else {
+    tabBarStore.resetTabList()
+    router.push({ name: DEFAULT_ROUTE_NAME })
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tag-link {
+  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);
+}
+</style>