新增：新增前端项目模块（基于 Vue3、TypeScript、Arco Design Pro Vue 技术栈），已对接现有 API

continew-admin-ui/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>

continew-admin-ui/src/components/chart/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <VCharts
+    v-if="renderChart"
+    :option="options"
+    :autoresize="autoResize"
+    :style="{ width, height }"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } 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>

continew-admin-ui/src/components/footer/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <a-layout-footer class="footer">
+    {{ `Copyright © 2022-${new Date().getFullYear()} Charles7c` }}
+    <span>&nbsp;⋅&nbsp;</span>
+    <a href="https://beian.miit.gov.cn" target="_blank">津ICP备2022005864号-2</a>
+  </a-layout-footer>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    color: var(--color-text-2);
+    text-align: center;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--color-text-2);
+  }
+
+  a:hover {
+    color: rgb(var(--gray-6));
+  }
+</style>

continew-admin-ui/src/components/global-setting/block.vue

@@ -0,0 +1,74 @@
+<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 { PropType } from 'vue';
+  import { useAppStore } from '@/store';
+  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();
+    }
+    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>

continew-admin-ui/src/components/global-setting/form-wrapper.vue

@@ -0,0 +1,39 @@
+<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>

continew-admin-ui/src/components/global-setting/index.vue

@@ -0,0 +1,93 @@
+<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 { 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);
+  const contentOpts = computed(() => [
+    { name: 'settings.navbar', key: 'navbar', defaultVal: appStore.navbar },
+    {
+      name: 'settings.menu',
+      key: 'menu',
+      defaultVal: appStore.menu,
+    },
+    { 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>

continew-admin-ui/src/components/index.ts

@@ -0,0 +1,35 @@
+import { App } from 'vue';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  GraphicComponent,
+} from 'echarts/components';
+import Chart from './chart/index.vue';
+import Breadcrumb from './breadcrumb/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);
+  },
+};

continew-admin-ui/src/components/menu/index.vue

@@ -0,0 +1,158 @@
+<script lang="tsx">
+  import { defineComponent, ref, h, compile, computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter, RouteRecordRaw } from 'vue-router';
+  import type { RouteMeta } from 'vue-router';
+  import { useAppStore } from '@/store';
+  import { listenerRouteChange } from '@/utils/route-listener';
+  import { openWindow, regexUrl } from '@/utils';
+  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 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
+          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%"
+          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>

continew-admin-ui/src/components/menu/use-menu-tree.ts

@@ -0,0 +1,69 @@
+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;
+  });
+  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,
+  };
+}

continew-admin-ui/src/components/message-box/index.vue

@@ -0,0 +1,129 @@
+<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 { ref, reactive, toRefs, computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import {
+    queryMessageList,
+    setMessageStatus,
+    MessageRecord,
+    MessageListType,
+  } from '@/api/message';
+  import useLoading from '@/hooks/loading';
+  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>

continew-admin-ui/src/components/message-box/list.vue

@@ -0,0 +1,149 @@
+<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 { 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 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>

continew-admin-ui/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',
+};

continew-admin-ui/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': '退出登录',
+};

continew-admin-ui/src/components/navbar/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="navbar">
+    <div class="left-side">
+      <a-space>
+        <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"
+        >
+          ContiNew Admin
+        </a-typography-title>
+        <icon-menu-fold
+          v-if="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"
+            >
+              {{ 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', cursor: 'pointer' }"
+          >
+            <img alt="avatar" :src="avatar" />
+          </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 />
+                <span>
+                  {{ $t('messageBox.userCenter') }}
+                </span>
+              </a-space>
+            </a-doption>
+            <a-doption>
+              <a-space @click="$router.push({ name: 'Setting' })">
+                <icon-settings />
+                <span>
+                  {{ $t('messageBox.userSettings') }}
+                </span>
+              </a-space>
+            </a-doption>
+            <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 { computed, ref, inject } from 'vue';
+  import { Message } from '@arco-design/web-vue';
+  import { useDark, useToggle, useFullscreen } from '@vueuse/core';
+  import { useAppStore, useLoginStore } from '@/store';
+  import { LOCALE_OPTIONS } from '@/locale';
+  import useLocale from '@/hooks/locale';
+  import useUser from '@/hooks/user';
+  import MessageBox from '../message-box/index.vue';
+
+  const appStore = useAppStore();
+  const loginStore = useLoginStore();
+  const { logout } = useUser();
+  const { changeLocale } = useLocale();
+  const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
+  const locales = [...LOCALE_OPTIONS];
+  const avatar = computed(() => {
+    return loginStore.avatar;
+  });
+  const theme = computed(() => {
+    return appStore.theme;
+  });
+  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 switchRoles = async () => {
+    const res = await loginStore.switchRoles();
+    Message.success(res as string);
+  };
+  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);
+  }
+
+  .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;
+    }
+  }
+</style>

continew-admin-ui/src/components/tab-bar/index.vue

@@ -0,0 +1,101 @@
+<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 { ref, computed, watch, onUnmounted } from 'vue';
+  import type { RouteLocationNormalized } from 'vue-router';
+  import {
+    listenerRouteChange,
+    removeRouteListener,
+  } from '@/utils/route-listener';
+  import { useAppStore, useTabBarStore } from '@/store';
+  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>

continew-admin-ui/src/components/tab-bar/readme.md

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

continew-admin-ui/src/components/tab-bar/tab-item.vue

@@ -0,0 +1,200 @@
+<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 { PropType, computed } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { useTabBarStore } from '@/store';
+  import type { TagProps } from '@/store/modules/tab-bar/types';
+  import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';
+
+  // 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>