From b166786a3384708ffde159ff492a9808ce1d28ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Mon, 13 May 2024 17:08:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E5=A4=A7=E5=86=99?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bavbar/index.vue               |  320 ++++
 src/components/Breadcrumb/index.vue           |   37 +
 .../CountryCodeSelect/country-code.json       | 1394 +++++++++++++++++
 src/components/CountryCodeSelect/index.vue    |   37 +
 src/components/Footer/index.vue               |   26 +
 src/components/GlobalSetting/block.vue        |   76 +
 src/components/GlobalSetting/form-wrapper.vue |   39 +
 src/components/GlobalSetting/index.vue        |  100 ++
 src/components/Menu/index.vue                 |  162 ++
 src/components/Menu/useMenuTree.ts            |   70 +
 src/components/MessageBox/index.vue           |  130 ++
 src/components/MessageBox/list.vue            |  162 ++
 src/components/TabBar/index.vue               |  105 ++
 src/components/TabBar/tab-item.vue            |  206 +++
 src/components/VChart/index.vue               |   71 +
 src/components/index.ts                       |    5 +
 16 files changed, 2940 insertions(+)
 create mode 100644 src/components/Bavbar/index.vue
 create mode 100644 src/components/Breadcrumb/index.vue
 create mode 100644 src/components/CountryCodeSelect/country-code.json
 create mode 100644 src/components/CountryCodeSelect/index.vue
 create mode 100644 src/components/Footer/index.vue
 create mode 100644 src/components/GlobalSetting/block.vue
 create mode 100644 src/components/GlobalSetting/form-wrapper.vue
 create mode 100644 src/components/GlobalSetting/index.vue
 create mode 100644 src/components/Menu/index.vue
 create mode 100644 src/components/Menu/useMenuTree.ts
 create mode 100644 src/components/MessageBox/index.vue
 create mode 100644 src/components/MessageBox/list.vue
 create mode 100644 src/components/TabBar/index.vue
 create mode 100644 src/components/TabBar/tab-item.vue
 create mode 100644 src/components/VChart/index.vue
 create mode 100644 src/components/index.ts

diff --git a/src/components/Bavbar/index.vue b/src/components/Bavbar/index.vue
new file mode 100644
index 0000000..a342ed0
--- /dev/null
+++ b/src/components/Bavbar/index.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="navbar">
+    <div class="left-side">
+      <a-space>
+        <logoSvg style="width: 36px; color: #165fdd" />
+        <a-typography-title
+          :style="{ margin: 0, fontSize: '18px' }"
+          :heading="5"
+        >
+          Arco Admin
+        </a-typography-title>
+        <icon-menu-fold
+          v-if="!topMenu && appStore.device === 'mobile'"
+          style="font-size: 22px; cursor: pointer"
+          @click="toggleDrawerMenu"
+        />
+      </a-space>
+    </div>
+    <div class="center-side">
+      <Menu v-if="topMenu" />
+    </div>
+    <ul class="right-side">
+      <li>
+        <a-input-search style="width: 135px" placeholder="搜索" />
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.reload')">
+          <div class="nav-btn" @click="handleReload">
+            <icon-sync />
+          </div>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.source')">
+          <a
+            class="nav-btn"
+            href="https://github.com/oljc/arco-admin"
+            target="_blank"
+          >
+            <icon-github />
+          </a>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.language')">
+          <div class="nav-btn" @click="setDropDownVisible">
+            <icon-language />
+          </div>
+        </a-tooltip>
+        <a-dropdown trigger="click" @select="changeLocale">
+          <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.themeToDark')
+              : $t('settings.themeToLight')
+          "
+        >
+          <div class="nav-btn" @click="handleToggleTheme">
+            <icon-moon-fill v-if="theme === 'dark'" />
+            <icon-sun-fill v-else />
+          </div>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.alerts')">
+          <a-badge :count="9">
+            <div class="nav-btn" @click="setPopoverVisible">
+              <icon-notification />
+            </div>
+          </a-badge>
+        </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.screenToExit')
+              : $t('settings.screenToFull')
+          "
+        >
+          <div class="nav-btn" @click="toggleFullScreen">
+            <icon-fullscreen-exit v-if="isFullscreen" />
+            <icon-fullscreen v-else />
+          </div>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-tooltip :content="$t('settings.title')">
+          <div class="nav-btn" @click="setVisible">
+            <icon-settings />
+          </div>
+        </a-tooltip>
+      </li>
+      <li>
+        <a-dropdown trigger="click">
+          <a-avatar style="margin-right: 8px; cursor: pointer" :size="32">
+            <IconUser />
+          </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, useUserStore } from '@/store';
+import useLocale from '@/hooks/useLocale';
+import useUser from '@/hooks/useUser';
+import Menu from '@/components/Menu/index.vue';
+import MessageBox from '../message-box/index.vue';
+import logoSvg from '@/assets/logo.svg';
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const { logout } = useUser();
+const { changeLocale, currentLocale } = useLocale();
+const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
+const locales = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' }
+];
+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 handleReload = () => {
+  window.location.reload();
+};
+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 userStore.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;
+}
+
+.center-side {
+  flex: 1;
+}
+
+.right-side {
+  display: flex;
+  padding-right: 20px;
+  list-style: none;
+
+  :deep(.locale-select) {
+    border-radius: 20px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+  }
+
+  a {
+    color: var(--color-text-1);
+    text-decoration: none;
+  }
+
+  .nav-btn {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    // transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.5715;
+    color: rgb(var(--gray-8));
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border-radius: var(--border-radius-circle);
+    outline: none;
+
+    &:hover {
+      border: 1px solid rgb(var(--gray-2));
+    }
+  }
+
+  .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>
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
new file mode 100644
index 0000000..c421064
--- /dev/null
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,37 @@
+<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>
diff --git a/src/components/CountryCodeSelect/country-code.json b/src/components/CountryCodeSelect/country-code.json
new file mode 100644
index 0000000..bdf3755
--- /dev/null
+++ b/src/components/CountryCodeSelect/country-code.json
@@ -0,0 +1,1394 @@
+[
+  {
+    "en": "Afghanistan",
+    "zh": "阿富汗",
+    "countryCode": "AF",
+    "code": "93"
+  },
+  {
+    "en": "Alaska",
+    "zh": "阿拉斯加",
+    "countryCode": "US",
+    "code": "1907"
+  },
+  {
+    "en": "Albania",
+    "zh": "阿尔巴尼亚",
+    "countryCode": "AL",
+    "code": "355"
+  },
+  {
+    "en": "Algeria",
+    "zh": "阿尔及利亚",
+    "countryCode": "DZ",
+    "code": "213"
+  },
+  {
+    "en": "American Samoa",
+    "zh": "美属萨摩亚",
+    "countryCode": "AS",
+    "code": "1684"
+  },
+  {
+    "en": "Andorra",
+    "zh": "安道尔",
+    "countryCode": "AD",
+    "code": "376"
+  },
+  {
+    "en": "Angola",
+    "zh": "安哥拉",
+    "countryCode": "AO",
+    "code": "244"
+  },
+  {
+    "en": "Anguilla",
+    "zh": "安圭拉",
+    "countryCode": "AI",
+    "code": "1264"
+  },
+  {
+    "en": "Antigua and Barbuda",
+    "zh": "安提瓜和巴布达",
+    "countryCode": "AG",
+    "code": "1268"
+  },
+  {
+    "en": "Argentina",
+    "zh": "阿根廷",
+    "countryCode": "AR",
+    "code": "54"
+  },
+  {
+    "en": "Armenia",
+    "zh": "亚美尼亚",
+    "countryCode": "AM",
+    "code": "374"
+  },
+  {
+    "en": "Aruba",
+    "zh": "阿鲁巴",
+    "countryCode": "AW",
+    "code": "297"
+  },
+  {
+    "en": "Ascension",
+    "zh": "阿森松",
+    "countryCode": "SH",
+    "code": "247"
+  },
+  {
+    "en": "Australia",
+    "zh": "澳大利亚",
+    "countryCode": "AU",
+    "code": "61"
+  },
+  {
+    "en": "Austria",
+    "zh": "奥地利",
+    "countryCode": "AT",
+    "code": "43"
+  },
+  {
+    "en": "Azerbaijan",
+    "zh": "阿塞拜疆",
+    "countryCode": "AZ",
+    "code": "994"
+  },
+  {
+    "en": "Bahamas",
+    "zh": "巴哈马",
+    "countryCode": "BS",
+    "code": "1242"
+  },
+  {
+    "en": "Bahrain",
+    "zh": "巴林",
+    "countryCode": "BH",
+    "code": "973"
+  },
+  {
+    "en": "Bangladesh",
+    "zh": "孟加拉国",
+    "countryCode": "BD",
+    "code": "880"
+  },
+  {
+    "en": "Barbados",
+    "zh": "巴巴多斯",
+    "countryCode": "BB",
+    "code": "1246"
+  },
+  {
+    "en": "Belarus",
+    "zh": "白俄罗斯",
+    "countryCode": "BY",
+    "code": "375"
+  },
+  {
+    "en": "Belgium",
+    "zh": "比利时",
+    "countryCode": "BE",
+    "code": "32"
+  },
+  {
+    "en": "Belize",
+    "zh": "伯利兹",
+    "countryCode": "BZ",
+    "code": "501"
+  },
+  {
+    "en": "Benin",
+    "zh": "贝宁",
+    "countryCode": "BJ",
+    "code": "229"
+  },
+  {
+    "en": "Bermuda",
+    "zh": "百慕大群岛",
+    "countryCode": "BM",
+    "code": "1441"
+  },
+  {
+    "en": "Bhutan",
+    "zh": "不丹",
+    "countryCode": "BT",
+    "code": "975"
+  },
+  {
+    "en": "Bolivia",
+    "zh": "玻利维亚",
+    "countryCode": "BO",
+    "code": "591"
+  },
+  {
+    "en": "Bosnia and Herzegovina",
+    "zh": "波斯尼亚和黑塞哥维那",
+    "countryCode": "BA",
+    "code": "387"
+  },
+  {
+    "en": "Botswana",
+    "zh": "博茨瓦纳",
+    "countryCode": "BW",
+    "code": "267"
+  },
+  {
+    "en": "Brazil",
+    "zh": "巴西",
+    "countryCode": "BR",
+    "code": "55"
+  },
+  {
+    "en": "Brunei",
+    "zh": "文莱",
+    "countryCode": "BN",
+    "code": "673"
+  },
+  {
+    "en": "Bulgaria",
+    "zh": "保加利亚",
+    "countryCode": "BG",
+    "code": "359"
+  },
+  {
+    "en": "Burkina Faso",
+    "zh": "布基纳法索",
+    "countryCode": "BF",
+    "code": "226"
+  },
+  {
+    "en": "Burundi",
+    "zh": "布隆迪",
+    "countryCode": "BI",
+    "code": "257"
+  },
+  {
+    "en": "Cambodia",
+    "zh": "柬埔寨",
+    "countryCode": "KH",
+    "code": "855"
+  },
+  {
+    "en": "Cameroon",
+    "zh": "喀麦隆",
+    "countryCode": "CM",
+    "code": "237"
+  },
+  {
+    "en": "Islas Canarias",
+    "zh": "加那利群岛",
+    "countryCode": "ES",
+    "code": "34"
+  },
+  {
+    "en": "Cape Verde",
+    "zh": "开普",
+    "countryCode": "CV",
+    "code": "238"
+  },
+  {
+    "en": "Cayman Islands",
+    "zh": "开曼群岛",
+    "countryCode": "KY",
+    "code": "1345"
+  },
+  {
+    "en": "Central African Republic",
+    "zh": "中非共和国",
+    "countryCode": "CF",
+    "code": "236"
+  },
+  {
+    "en": "Chad",
+    "zh": "乍得",
+    "countryCode": "TD",
+    "code": "235"
+  },
+  {
+    "en": "China",
+    "zh": "中国",
+    "countryCode": "CN",
+    "code": "86"
+  },
+  {
+    "en": "Chile",
+    "zh": "智利",
+    "countryCode": "CL",
+    "code": "56"
+  },
+  {
+    "en": "Christmas Island",
+    "zh": "圣诞岛",
+    "countryCode": "CX",
+    "code": "0061 9164"
+  },
+  {
+    "en": "Cocos Island",
+    "zh": "科科斯岛",
+    "countryCode": "CC",
+    "code": "0061 9162"
+  },
+  {
+    "en": "Colombia",
+    "zh": "哥伦比亚",
+    "countryCode": "CO",
+    "code": "57"
+  },
+  {
+    "en": "Dominican Republic",
+    "zh": "多米尼加共和国",
+    "countryCode": "DO",
+    "code": "1809"
+  },
+  {
+    "en": "Comoros",
+    "zh": "科摩罗",
+    "countryCode": "KM",
+    "code": "269"
+  },
+  {
+    "en": "Republic Of The Congo",
+    "zh": "刚果共和国",
+    "countryCode": "CG",
+    "code": "242"
+  },
+  {
+    "en": "Cook Islands",
+    "zh": "库克群岛",
+    "countryCode": "CK",
+    "code": "682"
+  },
+  {
+    "en": "Costa Rica",
+    "zh": "哥斯达黎加",
+    "countryCode": "CR",
+    "code": "506"
+  },
+  {
+    "en": "Croatia",
+    "zh": "克罗地亚",
+    "countryCode": "HR",
+    "code": "385"
+  },
+  {
+    "en": "Cuba",
+    "zh": "古巴",
+    "countryCode": "CU",
+    "code": "53"
+  },
+  {
+    "en": "Curacao",
+    "zh": "库拉索",
+    "countryCode": "CW",
+    "code": "599"
+  },
+  {
+    "en": "Cyprus",
+    "zh": "塞浦路斯",
+    "countryCode": "CY",
+    "code": "357"
+  },
+  {
+    "en": "Czech",
+    "zh": "捷克",
+    "countryCode": "CZ",
+    "code": "420"
+  },
+  {
+    "en": "Denmark",
+    "zh": "丹麦",
+    "countryCode": "DK",
+    "code": "45"
+  },
+  {
+    "en": "Djibouti",
+    "zh": "吉布提",
+    "countryCode": "DJ",
+    "code": "253"
+  },
+  {
+    "en": "Dominica",
+    "zh": "多米尼加",
+    "countryCode": "DM",
+    "code": "1767"
+  },
+  {
+    "en": "Dominican Republic",
+    "zh": "多米尼加共和国",
+    "countryCode": "DO",
+    "code": "1809"
+  },
+  {
+    "en": "Ecuador",
+    "zh": "厄瓜多尔",
+    "countryCode": "EC",
+    "code": "593"
+  },
+  {
+    "en": "Egypt",
+    "zh": "埃及",
+    "countryCode": "EG",
+    "code": "20"
+  },
+  {
+    "en": "El Salvador",
+    "zh": "萨尔瓦多",
+    "countryCode": "SV",
+    "code": "503"
+  },
+  {
+    "en": "Equatorial Guinea",
+    "zh": "赤道几内亚",
+    "countryCode": "GQ",
+    "code": "240"
+  },
+  {
+    "en": "Eritrea",
+    "zh": "厄立特里亚",
+    "countryCode": "ER",
+    "code": "291"
+  },
+  {
+    "en": "Estonia",
+    "zh": "爱沙尼亚",
+    "countryCode": "EE",
+    "code": "372"
+  },
+  {
+    "en": "Ethiopia",
+    "zh": "埃塞俄比亚",
+    "countryCode": "ET",
+    "code": "251"
+  },
+  {
+    "en": "Falkland Islands",
+    "zh": "福克兰群岛",
+    "countryCode": "FK",
+    "code": "500"
+  },
+  {
+    "en": "Faroe Islands",
+    "zh": "法罗群岛",
+    "countryCode": "FO",
+    "code": "298"
+  },
+  {
+    "en": "Fiji",
+    "zh": "斐济",
+    "countryCode": "FJ",
+    "code": "679"
+  },
+  {
+    "en": "Finland",
+    "zh": "芬兰",
+    "countryCode": "FI",
+    "code": "358"
+  },
+  {
+    "en": "France",
+    "zh": "法国",
+    "countryCode": "FR",
+    "code": "33"
+  },
+  {
+    "en": "French Guiana",
+    "zh": "法属圭亚那",
+    "countryCode": "GF",
+    "code": "594"
+  },
+  {
+    "en": "French Polynesia",
+    "zh": "法属波利尼西亚",
+    "countryCode": "PF",
+    "code": "689"
+  },
+  {
+    "en": "Gabon",
+    "zh": "加蓬",
+    "countryCode": "GA",
+    "code": "241"
+  },
+  {
+    "en": "Gambia",
+    "zh": "冈比亚",
+    "countryCode": "GM",
+    "code": "220"
+  },
+  {
+    "en": "Georgia",
+    "zh": "格鲁吉亚",
+    "countryCode": "GE",
+    "code": "995"
+  },
+  {
+    "en": "Germany",
+    "zh": "德国",
+    "countryCode": "DE",
+    "code": "49"
+  },
+  {
+    "en": "Ghana",
+    "zh": "加纳",
+    "countryCode": "GH",
+    "code": "233"
+  },
+  {
+    "en": "Gibraltar",
+    "zh": "直布罗陀",
+    "countryCode": "GI",
+    "code": "350"
+  },
+  {
+    "en": "Greece",
+    "zh": "希腊",
+    "countryCode": "GR",
+    "code": "30"
+  },
+  {
+    "en": "Greenland",
+    "zh": "格陵兰岛",
+    "countryCode": "GL",
+    "code": "299"
+  },
+  {
+    "en": "Grenada",
+    "zh": "格林纳达",
+    "countryCode": "GD",
+    "code": "1473"
+  },
+  {
+    "en": "Guadeloupe",
+    "zh": "瓜德罗普岛",
+    "countryCode": "GP",
+    "code": "590"
+  },
+  {
+    "en": "Guam",
+    "zh": "关岛",
+    "countryCode": "GU",
+    "code": "1671"
+  },
+  {
+    "en": "Guatemala",
+    "zh": "瓜地马拉",
+    "countryCode": "GT",
+    "code": "502"
+  },
+  {
+    "en": "Guinea",
+    "zh": "几内亚",
+    "countryCode": "GN",
+    "code": "224"
+  },
+  {
+    "en": "Guinea-Bissau",
+    "zh": "几内亚比绍共和国",
+    "countryCode": "GW",
+    "code": "245"
+  },
+  {
+    "en": "Guyana",
+    "zh": "圭亚那",
+    "countryCode": "GY",
+    "code": "592"
+  },
+  {
+    "en": "Haiti",
+    "zh": "海地",
+    "countryCode": "HT",
+    "code": "509"
+  },
+  {
+    "en": "Hawaii",
+    "zh": "夏威夷",
+    "countryCode": "US",
+    "code": "1808"
+  },
+  {
+    "en": "Honduras",
+    "zh": "洪都拉斯",
+    "countryCode": "HN",
+    "code": "504"
+  },
+  {
+    "en": "Hong Kong",
+    "zh": "中国香港",
+    "countryCode": "HK",
+    "code": "852"
+  },
+  {
+    "en": "Hungary",
+    "zh": "匈牙利",
+    "countryCode": "HU",
+    "code": "36"
+  },
+  {
+    "en": "Iceland",
+    "zh": "冰岛",
+    "countryCode": "IS",
+    "code": "354"
+  },
+  {
+    "en": "India",
+    "zh": "印度",
+    "countryCode": "IN",
+    "code": "91"
+  },
+  {
+    "en": "Indonesia",
+    "zh": "印度尼西亚",
+    "countryCode": "ID",
+    "code": "62"
+  },
+  {
+    "en": "Iran",
+    "zh": "伊朗",
+    "countryCode": "IR",
+    "code": "98"
+  },
+  {
+    "en": "Iraq",
+    "zh": "伊拉克",
+    "countryCode": "IQ",
+    "code": "964"
+  },
+  {
+    "en": "Ireland",
+    "zh": "爱尔兰",
+    "countryCode": "IE",
+    "code": "353"
+  },
+  {
+    "en": "Israel",
+    "zh": "以色列",
+    "countryCode": "IL",
+    "code": "972"
+  },
+  {
+    "en": "Italy",
+    "zh": "意大利",
+    "countryCode": "IT",
+    "code": "39"
+  },
+  {
+    "en": "Ivory Coast",
+    "zh": "象牙海岸",
+    "countryCode": "CI",
+    "code": "225"
+  },
+  {
+    "en": "Jamaica",
+    "zh": "牙买加",
+    "countryCode": "JM",
+    "code": "1876"
+  },
+  {
+    "en": "Japan",
+    "zh": "日本",
+    "countryCode": "JP",
+    "code": "81"
+  },
+  {
+    "en": "Jordan",
+    "zh": "约旦",
+    "countryCode": "JO",
+    "code": "962"
+  },
+  {
+    "en": "Kazakhstan",
+    "zh": "哈萨克斯坦",
+    "countryCode": "KZ",
+    "code": "7"
+  },
+  {
+    "en": "Kenya",
+    "zh": "肯尼亚",
+    "countryCode": "KE",
+    "code": "254"
+  },
+  {
+    "en": "Kiribati",
+    "zh": "基里巴斯",
+    "countryCode": "KI",
+    "code": "686"
+  },
+  {
+    "en": "Korea Democratic Rep.",
+    "zh": "朝鲜",
+    "countryCode": "KP",
+    "code": "85"
+  },
+  {
+    "en": "South Korea",
+    "zh": "韩国",
+    "countryCode": "KR",
+    "code": "82"
+  },
+  {
+    "en": "Kuwait",
+    "zh": "科威特",
+    "countryCode": "KW",
+    "code": "965"
+  },
+  {
+    "en": "Kyrgyzstan",
+    "zh": "吉尔吉斯斯坦",
+    "countryCode": "KG",
+    "code": "996"
+  },
+  {
+    "en": "Laos",
+    "zh": "老挝",
+    "countryCode": "LA",
+    "code": "856"
+  },
+  {
+    "en": "Latvia",
+    "zh": "拉脱维亚",
+    "countryCode": "LV",
+    "code": "371"
+  },
+  {
+    "en": "Lebanon",
+    "zh": "黎巴嫩",
+    "countryCode": "LB",
+    "code": "961"
+  },
+  {
+    "en": "Lesotho",
+    "zh": "莱索托",
+    "countryCode": "LS",
+    "code": "266"
+  },
+  {
+    "en": "Liberia",
+    "zh": "利比里亚",
+    "countryCode": "LR",
+    "code": "231"
+  },
+  {
+    "en": "Libya",
+    "zh": "利比亚",
+    "countryCode": "LY",
+    "code": "218"
+  },
+  {
+    "en": "Liechtenstein",
+    "zh": "列支敦士登",
+    "countryCode": "LI",
+    "code": "423"
+  },
+  {
+    "en": "Lithuania",
+    "zh": "立陶宛",
+    "countryCode": "LT",
+    "code": "370"
+  },
+  {
+    "en": "Luxembourg",
+    "zh": "卢森堡",
+    "countryCode": "LU",
+    "code": "352"
+  },
+  {
+    "en": "Macau",
+    "zh": "中国澳门",
+    "countryCode": "MO",
+    "code": "853"
+  },
+  {
+    "en": "Macedonia",
+    "zh": "马其顿",
+    "countryCode": "MK",
+    "code": "389"
+  },
+  {
+    "en": "Madagascar",
+    "zh": "马达加斯加",
+    "countryCode": "MG",
+    "code": "261"
+  },
+  {
+    "en": "Malawi",
+    "zh": "马拉维",
+    "countryCode": "MW",
+    "code": "265"
+  },
+  {
+    "en": "Malaysia",
+    "zh": "马来西亚",
+    "countryCode": "MY",
+    "code": "60"
+  },
+  {
+    "en": "Maldives",
+    "zh": "马尔代夫",
+    "countryCode": "MV",
+    "code": "960"
+  },
+  {
+    "en": "Mali",
+    "zh": "马里",
+    "countryCode": "ML",
+    "code": "223"
+  },
+  {
+    "en": "Malta",
+    "zh": "马耳他",
+    "countryCode": "MT",
+    "code": "356"
+  },
+  {
+    "en": "Marshall Islands",
+    "zh": "马绍尔群岛",
+    "countryCode": "MH",
+    "code": "692"
+  },
+  {
+    "en": "Martinique",
+    "zh": "马提尼克",
+    "countryCode": "MQ",
+    "code": "596"
+  },
+  {
+    "en": "Mauritania",
+    "zh": "毛里塔尼亚",
+    "countryCode": "MR",
+    "code": "222"
+  },
+  {
+    "en": "Mauritius",
+    "zh": "毛里求斯",
+    "countryCode": "MU",
+    "code": "230"
+  },
+  {
+    "en": "Mayotte",
+    "zh": "马约特",
+    "countryCode": "YT",
+    "code": "269"
+  },
+  {
+    "en": "Mexico",
+    "zh": "墨西哥",
+    "countryCode": "MX",
+    "code": "52"
+  },
+  {
+    "en": "Micronesia",
+    "zh": "密克罗尼西亚",
+    "countryCode": "FM",
+    "code": "691"
+  },
+  {
+    "en": "Moldova",
+    "zh": "摩尔多瓦",
+    "countryCode": "MD",
+    "code": "373"
+  },
+  {
+    "en": "Monaco",
+    "zh": "摩纳哥",
+    "countryCode": "MC",
+    "code": "377"
+  },
+  {
+    "en": "Mongolia",
+    "zh": "蒙古",
+    "countryCode": "MN",
+    "code": "976"
+  },
+  {
+    "en": "Montenegro",
+    "zh": "黑山",
+    "countryCode": "ME",
+    "code": "382"
+  },
+  {
+    "en": "Montserrat",
+    "zh": "蒙特塞拉特岛",
+    "countryCode": "MS",
+    "code": "1664"
+  },
+  {
+    "en": "Morocco",
+    "zh": "摩洛哥",
+    "countryCode": "MA",
+    "code": "212"
+  },
+  {
+    "en": "Mozambique",
+    "zh": "莫桑比克",
+    "countryCode": "MZ",
+    "code": "258"
+  },
+  {
+    "en": "Myanmar",
+    "zh": "缅甸",
+    "countryCode": "MM",
+    "code": "95"
+  },
+  {
+    "en": "Namibia",
+    "zh": "纳米比亚",
+    "countryCode": "NA",
+    "code": "264"
+  },
+  {
+    "en": "Nauru",
+    "zh": "拿鲁岛",
+    "countryCode": "NR",
+    "code": "674"
+  },
+  {
+    "en": "Nepal",
+    "zh": "尼泊尔",
+    "countryCode": "NP",
+    "code": "977"
+  },
+  {
+    "en": "Netherlands",
+    "zh": "荷兰",
+    "countryCode": "NL",
+    "code": "31"
+  },
+  {
+    "en": "New Caledonia",
+    "zh": "新喀里多尼亚",
+    "countryCode": "NC",
+    "code": "687"
+  },
+  {
+    "en": "New Zealand",
+    "zh": "新西兰",
+    "countryCode": "NZ",
+    "code": "64"
+  },
+  {
+    "en": "Nicaragua",
+    "zh": "尼加拉瓜",
+    "countryCode": "NI",
+    "code": "505"
+  },
+  {
+    "en": "Niger",
+    "zh": "尼日尔",
+    "countryCode": "NE",
+    "code": "227"
+  },
+  {
+    "en": "Nigeria",
+    "zh": "尼日利亚",
+    "countryCode": "NG",
+    "code": "234"
+  },
+  {
+    "en": "Niue Island",
+    "zh": "纽埃岛(新)",
+    "countryCode": "NU",
+    "code": "683"
+  },
+  {
+    "en": "Norfolk Island",
+    "zh": "诺福克岛(澳)",
+    "countryCode": "NF",
+    "code": "6723"
+  },
+  {
+    "en": "Norway",
+    "zh": "挪威",
+    "countryCode": "NO",
+    "code": "47"
+  },
+  {
+    "en": "Oman",
+    "zh": "阿曼",
+    "countryCode": "OM",
+    "code": "968"
+  },
+  {
+    "en": "Palau",
+    "zh": "帕劳",
+    "countryCode": "PW",
+    "code": "680"
+  },
+  {
+    "en": "Panama",
+    "zh": "巴拿马",
+    "countryCode": "PA",
+    "code": "507"
+  },
+  {
+    "en": "Papua New Guinea",
+    "zh": "巴布亚新几内亚",
+    "countryCode": "PG",
+    "code": "675"
+  },
+  {
+    "en": "Paraguay",
+    "zh": "巴拉圭",
+    "countryCode": "PY",
+    "code": "595"
+  },
+  {
+    "en": "Peru",
+    "zh": "秘鲁",
+    "countryCode": "PE",
+    "code": "51"
+  },
+  {
+    "en": "Philippines",
+    "zh": "菲律宾",
+    "countryCode": "PH",
+    "code": "63"
+  },
+  {
+    "en": "Poland",
+    "zh": "波兰",
+    "countryCode": "PL",
+    "code": "48"
+  },
+  {
+    "en": "Portugal",
+    "zh": "葡萄牙",
+    "countryCode": "PT",
+    "code": "351"
+  },
+  {
+    "en": "Pakistan",
+    "zh": "巴基斯坦",
+    "countryCode": "PK",
+    "code": "92"
+  },
+  {
+    "en": "Puerto Rico",
+    "zh": "波多黎各",
+    "countryCode": "PR",
+    "code": "1787"
+  },
+  {
+    "en": "Qatar",
+    "zh": "卡塔尔",
+    "countryCode": "QA",
+    "code": "974"
+  },
+  {
+    "en": "Réunion Island",
+    "zh": "留尼汪",
+    "countryCode": "RE",
+    "code": "262"
+  },
+  {
+    "en": "Romania",
+    "zh": "罗马尼亚",
+    "countryCode": "RO",
+    "code": "40"
+  },
+  {
+    "en": "Russia",
+    "zh": "俄罗斯",
+    "countryCode": "RU",
+    "code": "7"
+  },
+  {
+    "en": "Rwanda",
+    "zh": "卢旺达",
+    "countryCode": "RW",
+    "code": "250"
+  },
+  {
+    "en": "Samoa,Eastern",
+    "zh": "东萨摩亚(美)",
+    "countryCode": "AS",
+    "code": "684"
+  },
+  {
+    "en": "Samoa",
+    "zh": "萨摩亚",
+    "countryCode": "WS",
+    "code": "685"
+  },
+  {
+    "en": "San Marino",
+    "zh": "圣马力诺",
+    "countryCode": "SM",
+    "code": "378"
+  },
+  {
+    "en": "Saint Pierre and Miquelon",
+    "zh": "圣彼埃尔和密克隆岛",
+    "countryCode": "PM",
+    "code": "508"
+  },
+  {
+    "en": "Sao Tome and Principe",
+    "zh": "圣多美和普林西比",
+    "countryCode": "ST",
+    "code": "239"
+  },
+  {
+    "en": "Saudi Arabia",
+    "zh": "沙特阿拉伯",
+    "countryCode": "SA",
+    "code": "966"
+  },
+  {
+    "en": "Senegal",
+    "zh": "塞内加尔",
+    "countryCode": "SN",
+    "code": "221"
+  },
+  {
+    "en": "Serbia",
+    "zh": "塞尔维亚",
+    "countryCode": "RS",
+    "code": "381"
+  },
+  {
+    "en": "Seychelles",
+    "zh": "塞舌尔",
+    "countryCode": "SC",
+    "code": "248"
+  },
+  {
+    "en": "Sierra Leone",
+    "zh": "塞拉利昂",
+    "countryCode": "SL",
+    "code": "232"
+  },
+  {
+    "en": "Singapore",
+    "zh": "新加坡",
+    "countryCode": "SG",
+    "code": "65"
+  },
+  {
+    "en": "Saint Maarten (Dutch Part)",
+    "zh": "圣马丁岛（荷兰部分）",
+    "countryCode": "SX",
+    "code": "1721"
+  },
+  {
+    "en": "Slovakia",
+    "zh": "斯洛伐克",
+    "countryCode": "SK",
+    "code": "421"
+  },
+  {
+    "en": "Slovenia",
+    "zh": "斯洛文尼亚",
+    "countryCode": "SI",
+    "code": "386"
+  },
+  {
+    "en": "Solomon Islands",
+    "zh": "所罗门群岛",
+    "countryCode": "SB",
+    "code": "677"
+  },
+  {
+    "en": "Somalia",
+    "zh": "索马里",
+    "countryCode": "SO",
+    "code": "252"
+  },
+  {
+    "en": "South Africa",
+    "zh": "南非",
+    "countryCode": "ZA",
+    "code": "27"
+  },
+  {
+    "en": "Spain",
+    "zh": "西班牙",
+    "countryCode": "ES",
+    "code": "34"
+  },
+  {
+    "en": "Sri Lanka",
+    "zh": "斯里兰卡",
+    "countryCode": "LK",
+    "code": "94"
+  },
+  {
+    "en": "St.Helena",
+    "zh": "圣赫勒拿",
+    "countryCode": "SH",
+    "code": "290"
+  },
+  {
+    "en": "Saint Lucia",
+    "zh": "圣露西亚",
+    "countryCode": "LC",
+    "code": "1758"
+  },
+  {
+    "en": "Saint Vincent and The Grenadines",
+    "zh": "圣文森特和格林纳丁斯",
+    "countryCode": "VC",
+    "code": "1784"
+  },
+  {
+    "en": "Sudan",
+    "zh": "苏丹",
+    "countryCode": "SD",
+    "code": "249"
+  },
+  {
+    "en": "Suriname",
+    "zh": "苏里南",
+    "countryCode": "SR",
+    "code": "597"
+  },
+  {
+    "en": "Swaziland",
+    "zh": "斯威士兰",
+    "countryCode": "SZ",
+    "code": "268"
+  },
+  {
+    "en": "Sweden",
+    "zh": "瑞典",
+    "countryCode": "SE",
+    "code": "46"
+  },
+  {
+    "en": "Switzerland",
+    "zh": "瑞士",
+    "countryCode": "CH",
+    "code": "41"
+  },
+  {
+    "en": "Syria",
+    "zh": "叙利亚",
+    "countryCode": "SY",
+    "code": "963"
+  },
+  {
+    "en": "Taiwan",
+    "zh": "中国台湾",
+    "countryCode": "TW",
+    "code": "886"
+  },
+  {
+    "en": "Tajikistan",
+    "zh": "塔吉克斯坦",
+    "countryCode": "TJ",
+    "code": "992"
+  },
+  {
+    "en": "Tanzania",
+    "zh": "坦桑尼亚",
+    "countryCode": "TZ",
+    "code": "255"
+  },
+  {
+    "en": "Thailand",
+    "zh": "泰国",
+    "countryCode": "TH",
+    "code": "66"
+  },
+  {
+    "en": "Timor-Leste",
+    "zh": "东帝汶",
+    "countryCode": "TL",
+    "code": "670"
+  },
+  {
+    "en": "United Arab Emirates",
+    "zh": "阿拉伯联合酋长国",
+    "countryCode": "AE",
+    "code": "971"
+  },
+  {
+    "en": "Togo",
+    "zh": "多哥",
+    "countryCode": "TG",
+    "code": "228"
+  },
+  {
+    "en": "Tokelau Is.",
+    "zh": "托克劳群岛(新)",
+    "countryCode": "TK",
+    "code": "690"
+  },
+  {
+    "en": "Tonga",
+    "zh": "汤加",
+    "countryCode": "TO",
+    "code": "676"
+  },
+  {
+    "en": "Trinidad and Tobago",
+    "zh": "特立尼达和多巴哥",
+    "countryCode": "TT",
+    "code": "1868"
+  },
+  {
+    "en": "Tunisia",
+    "zh": "突尼斯",
+    "countryCode": "TN",
+    "code": "216"
+  },
+  {
+    "en": "Turkey",
+    "zh": "土耳其",
+    "countryCode": "TR",
+    "code": "90"
+  },
+  {
+    "en": "Turkmenistan",
+    "zh": "土库曼斯坦",
+    "countryCode": "TM",
+    "code": "993"
+  },
+  {
+    "en": "Turks and Caicos Islands",
+    "zh": "特克斯和凯科斯群岛",
+    "countryCode": "TC",
+    "code": "1649"
+  },
+  {
+    "en": "Tuvalu",
+    "zh": "图瓦卢",
+    "countryCode": "TK",
+    "code": "688"
+  },
+  {
+    "en": "United States/Canada",
+    "zh": "美国/加拿大",
+    "countryCode": "US/CA",
+    "code": "1"
+  },
+  {
+    "en": "Uganda",
+    "zh": "乌干达",
+    "countryCode": "UG",
+    "code": "256"
+  },
+  {
+    "en": "Ukraine",
+    "zh": "乌克兰",
+    "countryCode": "UA",
+    "code": "380"
+  },
+  {
+    "en": "United Kingdom",
+    "zh": "英国",
+    "countryCode": "GB",
+    "code": "44"
+  },
+  {
+    "en": "Uruguay",
+    "zh": "乌拉圭",
+    "countryCode": "UY",
+    "code": "598"
+  },
+  {
+    "en": "Uzbekistan",
+    "zh": "乌兹别克斯坦",
+    "countryCode": "UZ",
+    "code": "998"
+  },
+  {
+    "en": "Vanuatu",
+    "zh": "瓦努阿图",
+    "countryCode": "VU",
+    "code": "678"
+  },
+  {
+    "en": "Venezuela",
+    "zh": "委内瑞拉",
+    "countryCode": "VE",
+    "code": "58"
+  },
+  {
+    "en": "Vietnam",
+    "zh": "越南",
+    "countryCode": "VN",
+    "code": "84"
+  },
+  {
+    "en": "Virgin Islands, British",
+    "zh": "英属处女群岛",
+    "countryCode": "VG",
+    "code": "1340"
+  },
+  {
+    "en": "Virgin Islands, US",
+    "zh": "美属维尔京群岛",
+    "countryCode": "VI",
+    "code": "1284"
+  },
+  {
+    "en": "Wake I.",
+    "zh": "威克岛(美)",
+    "countryCode": "UM",
+    "code": "1808"
+  },
+  {
+    "en": "Yemen",
+    "zh": "也门",
+    "countryCode": "YE",
+    "code": "967"
+  },
+  {
+    "en": "Zambia",
+    "zh": "赞比亚",
+    "countryCode": "ZM",
+    "code": "260"
+  },
+  {
+    "en": "Zanzibar",
+    "zh": "桑给巴尔",
+    "countryCode": "TZ",
+    "code": "259"
+  },
+  {
+    "en": "Zimbabwe",
+    "zh": "津巴布韦",
+    "countryCode": "ZW",
+    "code": "263"
+  }
+]
diff --git a/src/components/CountryCodeSelect/index.vue b/src/components/CountryCodeSelect/index.vue
new file mode 100644
index 0000000..ab8b032
--- /dev/null
+++ b/src/components/CountryCodeSelect/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <a-select
+    v-model="value"
+    style="width: 85px; padding-right: 6px"
+    :options="countryCodes"
+    :field-names="fieldNames"
+    :triggerProps="{
+      contentStyle: { width: '200px' }
+    }"
+    unmount-on-close
+  >
+    <template #label="{ data }">
+      <span>+{{ data?.code }}</span>
+    </template>
+    <template #option="{ data }">+{{ data?.code }} {{ data?.zh }}</template>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import countryCodes from './country-code.json';
+
+// countryCodes排序
+countryCodes.sort((a, b) => Number(a.code) - Number(b.code));
+
+const value = ref('86');
+const fieldNames = {
+  label: 'zh',
+  value: 'code'
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.arco-select-view-suffix) {
+  padding-left: 6px;
+}
+</style>
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
new file mode 100644
index 0000000..97b2e85
--- /dev/null
+++ b/src/components/Footer/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <footer class="footer">
+    <slot>
+      Arco Admin 版权所有 © 2023 李江辰｜
+      <a-link
+        style="font-size: 12px"
+        href="https://github.com/oljc/arco-admin/blob/main/LICENSE"
+        target="_blank"
+      >
+        MIT 使用条款
+      </a-link>
+    </slot>
+  </footer>
+</template>
+
+<style lang="less" scoped>
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  font-size: @size-mini;
+  color: var(--color-text-2);
+  text-align: center;
+}
+</style>
diff --git a/src/components/GlobalSetting/block.vue b/src/components/GlobalSetting/block.vue
new file mode 100644
index 0000000..96ab793
--- /dev/null
+++ b/src/components/GlobalSetting/block.vue
@@ -0,0 +1,76 @@
+<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 === 'topMenu') {
+    appStore.updateSettings({
+      menuCollapse: false
+    });
+  }
+  appStore.updateSettings({ [key]: value });
+};
+</script>
+
+<style scoped lang="less">
+.block {
+  margin-bottom: 24px;
+}
+
+.title {
+  padding: 0;
+  margin: 10px 0;
+  font-size: 14px;
+}
+
+.switch-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+}
+</style>
diff --git a/src/components/GlobalSetting/form-wrapper.vue b/src/components/GlobalSetting/form-wrapper.vue
new file mode 100644
index 0000000..e9daf8d
--- /dev/null
+++ b/src/components/GlobalSetting/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>
diff --git a/src/components/GlobalSetting/index.vue b/src/components/GlobalSetting/index.vue
new file mode 100644
index 0000000..64ff4d2
--- /dev/null
+++ b/src/components/GlobalSetting/index.vue
@@ -0,0 +1,100 @@
+<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="410"
+    unmount-on-close
+    :visible="visible"
+    @ok="copySettings"
+    @cancel="cancel"
+  >
+    <template #title>{{ $t('settings.title') }}</template>
+    <a-alert type="warning">{{ $t('settings.alertContent') }}</a-alert>
+    <Block :options="contentOpts" :title="$t('settings.content')" />
+    <Block :options="othersOpts" :title="$t('settings.otherSettings')" />
+    <template #footer>
+      <a-button type="primary" style="margin: 0" shape="round" long>
+        {{ $t('settings.copySettings') }}
+      </a-button>
+    </template>
+  </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.topMenu',
+    key: 'topMenu',
+    defaultVal: appStore.topMenu
+  },
+  { name: 'settings.footer', key: 'footer', defaultVal: appStore.footer },
+  { name: 'settings.tabBar', key: 'tabBar', defaultVal: appStore.tabBar },
+  {
+    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;
+  }
+
+  .arco-drawer-footer > .arco-btn {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/src/components/Menu/index.vue b/src/components/Menu/index.vue
new file mode 100644
index 0000000..7552389
--- /dev/null
+++ b/src/components/Menu/index.vue
@@ -0,0 +1,162 @@
+<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 './useMenuTree';
+
+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
+        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>
+./useMenuTree
diff --git a/src/components/Menu/useMenuTree.ts b/src/components/Menu/useMenuTree.ts
new file mode 100644
index 0000000..4d0d92d
--- /dev/null
+++ b/src/components/Menu/useMenuTree.ts
@@ -0,0 +1,70 @@
+import { computed } from 'vue';
+import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
+import { appRoutes } from '@/router/routes';
+import usePermission from '@/hooks/usePermission';
+import { cloneDeep } from 'lodash';
+
+export default function useMenuTree() {
+  const permission = usePermission();
+  const appRoute = computed(() => {
+    return appRoutes.map(el => {
+      const { name, path, meta, redirect, children } = el;
+      return {
+        name,
+        path,
+        meta,
+        redirect,
+        children
+      };
+    });
+  });
+  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;
+        }
+        if (element.meta?.hideChildrenMenu || !element.children) {
+          element.children = [];
+          return element;
+        }
+        // 过滤掉 hideInMenu 的路由
+        element.children = element.children.filter(
+          x => x.meta?.hideInMenu !== true
+        );
+        // 关联子路由
+        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
+  };
+}
diff --git a/src/components/MessageBox/index.vue b/src/components/MessageBox/index.vue
new file mode 100644
index 0000000..c32f077
--- /dev/null
+++ b/src/components/MessageBox/index.vue
@@ -0,0 +1,130 @@
+<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>暂无内容</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('common.clear') }}
+        </a-button>
+      </template>
+    </a-tabs>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRefs, computed } from 'vue';
+import {
+  queryMessageList,
+  setMessageStatus,
+  MessageRecord,
+  MessageListType
+} from '@/api/message';
+import useLoading from '@/hooks/useLoading';
+import List from './list.vue';
+
+interface TabItem {
+  key: string;
+  title: string;
+  avatar?: string;
+}
+const { loading, setLoading } = useLoading(true);
+const messageType = ref('message');
+const messageData = reactive<{
+  renderList: MessageRecord[];
+  messageList: MessageRecord[];
+}>({
+  renderList: [],
+  messageList: []
+});
+toRefs(messageData);
+const tabList: TabItem[] = [
+  {
+    key: 'message',
+    title: '消息'
+  },
+  {
+    key: 'notice',
+    title: '通知'
+  },
+  {
+    key: 'todo',
+    title: '待办'
+  }
+];
+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>
diff --git a/src/components/MessageBox/list.vue b/src/components/MessageBox/list.vue
new file mode 100644
index 0000000..40dd86a
--- /dev/null
+++ b/src/components/MessageBox/list.vue
@@ -0,0 +1,162 @@
+<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">全部已读</a-link>
+        </div>
+        <div class="footer-wrap">
+          <a-link>查看更多</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 {
+    height: 50px;
+    padding: 0;
+    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>
diff --git a/src/components/TabBar/index.vue b/src/components/TabBar/index.vue
new file mode 100644
index 0000000..66f7f0b
--- /dev/null
+++ b/src/components/TabBar/index.vue
@@ -0,0 +1,105 @@
+<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 {
+      flex: 1;
+      height: 32px;
+      overflow: hidden;
+
+      .tags-wrap {
+        height: 48px;
+        padding: 4px 0;
+        overflow-x: auto;
+        white-space: nowrap;
+
+        :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>
diff --git a/src/components/TabBar/tab-item.vue b/src/components/TabBar/tab-item.vue
new file mode 100644
index 0000000..296387d
--- /dev/null
+++ b/src/components/TabBar/tab-item.vue
@@ -0,0 +1,206 @@
+<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';
+
+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>
diff --git a/src/components/VChart/index.vue b/src/components/VChart/index.vue
new file mode 100644
index 0000000..82c1bac
--- /dev/null
+++ b/src/components/VChart/index.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import {
+  PropType,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watch
+} from 'vue';
+import { VChart, ISpec } from '@visactor/vchart';
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<ISpec>,
+    default() {
+      return {};
+    }
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  }
+});
+
+let chart = null;
+const chartRef = ref(null);
+
+const initChart = () => {
+  if (chartRef.value && !chart && props.options) {
+    chart = new VChart(props.options, { dom: chartRef.value });
+    chart.renderSync();
+  } else {
+    releaseChart();
+  }
+};
+
+const updateChart = () => {
+  if (chart) {
+    chart.updateSpec(props.options);
+    chart.renderSync();
+  } else {
+    initChart();
+  }
+};
+
+const releaseChart = () => {
+  if (chart) {
+    chart.release();
+    chart = null;
+  }
+};
+
+watch(
+  () => props.options,
+  () => {
+    updateChart();
+  }
+);
+
+onMounted(() => initChart());
+onUpdated(() => updateChart());
+onBeforeUnmount(() => releaseChart());
+</script>
+
+<template>
+  <div ref="chartRef" :style="{ width, height }" />
+</template>
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..1211dfc
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+
+export default {
+  install(_Vue: App) {}
+};