diff --git a/package.json b/package.json
index 9c8fc8603e77cc98f1f567cff26ff722edff06bd..c6ddcf9c0e534a55a310e0bfee314e9f6a7ae406 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,12 @@
     "@element-plus/icons-vue": "^2.0.4",
     "@opensig/open-analytics": "^0.0.9",
     "@types/d3": "^7.4.0",
-    "axios": "^0.26.0",
+    "axios": "^1.7.4",
     "d3": "^7.4.4",
     "echarts": "^5.3.2",
     "element-plus": "^2.1.4",
     "html2canvas": "^1.4.1",
+    "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.11",
@@ -33,11 +34,13 @@
     "vue-router": "^4.0.13"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-vue": "^4.6.2",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "eslint": "^8.9.0",
@@ -47,7 +50,7 @@
     "typescript": "^4.5.4",
     "unplugin-auto-import": "^0.11.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^4.5.3",
+    "vite": "^4.5.6",
     "vue-tsc": "^1.8.25"
   }
 }
diff --git a/packages/euler/.env.development b/packages/euler/.env.development
index d5a75c74803f55f386b0b745dada3e7367c07696..a4fe0c34fdee6116dc6e9bbf6b24db7374fac8e1 100644
--- a/packages/euler/.env.development
+++ b/packages/euler/.env.development
@@ -1,3 +1,3 @@
 VITE_COOKIE_DOMAIN = localhost
-
+VITE_COOKIE_VER = "20240830"
 VITE_LOGIN_ORIGIN = https://id.openeuler.org
diff --git a/packages/euler/.env.production b/packages/euler/.env.production
index 79e379e6cfc388457ae92c706e79625c7ed410a8..709ca2dc8d65f6e1c9a18574e055b16794271e54 100644
--- a/packages/euler/.env.production
+++ b/packages/euler/.env.production
@@ -1,3 +1,3 @@
+VITE_COOKIE_VER = "20240830"
 VITE_COOKIE_DOMAIN = .openeuler.org
-
 VITE_LOGIN_ORIGIN = https://id.openeuler.org
diff --git a/packages/euler/components.d.ts b/packages/euler/components.d.ts
index 6ffaf080bc321b9f7025ef01ab816688e0eda63d..9d0d9de7f20ec0369a490ae62b3142395ef099f4 100644
--- a/packages/euler/components.d.ts
+++ b/packages/euler/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
     AppHeaderMobile: typeof import('./src/components/AppHeaderMobile.vue')['default']
     AppMobileMenu: typeof import('./src/components/AppMobileMenu.vue')['default']
+    CookieNotice: typeof import('./src/components/CookieNotice.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
diff --git a/packages/euler/src/App.vue b/packages/euler/src/App.vue
index df9bcaf8cbddc1165093a32e8d479a936d31f01a..29f4124cbbd3dd34245176b937d844b4fe83493e 100644
--- a/packages/euler/src/App.vue
+++ b/packages/euler/src/App.vue
@@ -2,6 +2,7 @@
 import AppHeader from '@/components/AppHeader.vue';
 import { setStoreData, useStoreData } from 'shared/utils/login';
 import { openCommunityInfo } from './api';
+import CookieNotice from './components/CookieNotice.vue';
 
 setStoreData(openCommunityInfo.name);
 const { loginIframeSrc } = useStoreData();
@@ -15,6 +16,7 @@ const { loginIframeSrc } = useStoreData();
         <component :is="Component" />
       </transition>
     </router-view>
+    <CookieNotice />
   </div>
   <iframe
     v-else
@@ -30,6 +32,22 @@ const { loginIframeSrc } = useStoreData();
   height: 100vh;
 }
 #app {
+  --layout-content-max-width: 1544px;
+  --layout-content-padding: 64px;
+  --layout-header-height: 80px;
+
+  @include screen.respond-to('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include screen.respond-to('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include screen.respond-to('phone') {
+    --layout-content-padding: 24px;
+  }
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/euler/src/components/CookieNotice.vue b/packages/euler/src/components/CookieNotice.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4974e441303f1f0fc66a573b57f76d81fbf98481
--- /dev/null
+++ b/packages/euler/src/components/CookieNotice.vue
@@ -0,0 +1,394 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, computed } from 'vue';
+import { setCookie, removeCookie } from 'shared/utils/cookies';
+import {
+  useCookieStore,
+  COOKIE_AGREED_STATUS,
+  COOKIE_KEY,
+} from 'shared/stores/cookies';
+import { useScreen } from 'shared/hooks/useScreen';
+import { useI18n } from 'vue-i18n';
+
+import IconClose from '~icons/app/icon-close.svg';
+import { useRoute, useRouter } from 'vue-router';
+import oa from '@/shared/analytics';
+
+const { lePadV } = useScreen();
+const { locale } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+
+const cookieStore = useCookieStore();
+const router = useRouter();
+
+const route = useRoute();
+const aboutCookiesUrl = computed(
+  () => `https://www.openeuler.org/${locale.value}/other/cookies/`
+);
+
+const COOKIE_DOMAIN = import.meta.env.VITE_COOKIE_DOMAIN;
+
+// 是否允许分析cookie
+const analysisAllowed = ref(false);
+
+// cookie提示是否显示
+const isNoticeVisible = ref(false);
+
+// 显示/隐藏cookie提示
+const toggleNoticeVisible = (val: boolean) => {
+  if (typeof val === 'boolean') {
+    isNoticeVisible.value = val;
+  } else {
+    isNoticeVisible.value = !isNoticeVisible.value;
+  }
+};
+
+// 弹出框是否显示
+const isDlgVisible = ref(false);
+
+// 显示/隐藏弹出框
+const toggleDlgVisible = (val: boolean) => {
+  if (typeof val === 'boolean') {
+    isDlgVisible.value = val;
+  } else {
+    isDlgVisible.value = !isNoticeVisible.value;
+  }
+};
+
+// 是否未签署
+const isNotSigned = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.NOT_SIGNED;
+};
+
+// 是否全部同意
+const isAllAgreed = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.ALL_AGREED;
+};
+
+onMounted(() => {
+  // 未签署，展示cookie notice
+  if (isNotSigned()) {
+    toggleNoticeVisible(true);
+  }
+
+  if (cookieStore.isAllAgreed) {
+    analysisAllowed.value = true;
+    oa.enable(router);
+  } else {
+    oa.disable();
+  }
+});
+
+// 用户同意所有cookie
+const acceptAll = () => {
+  analysisAllowed.value = true;
+  cookieStore.status = COOKIE_AGREED_STATUS.ALL_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.ALL_AGREED}${cookieStore.version}`,
+    180,
+    COOKIE_DOMAIN
+  );
+  toggleNoticeVisible(false);
+  oa.enable(router);
+};
+
+// 用户拒绝所有cookie，即仅同意必要cookie
+const rejectAll = () => {
+  analysisAllowed.value = false;
+  cookieStore.status = COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.NECCESSARY_AGREED}${cookieStore.version}`,
+    180,
+    COOKIE_DOMAIN
+  );
+  toggleNoticeVisible(false);
+  oa.disable();
+};
+
+const handleSave = () => {
+  if (analysisAllowed.value) {
+    acceptAll();
+  } else {
+    rejectAll();
+  }
+
+  toggleDlgVisible(false);
+};
+
+const handleAllowAll = () => {
+  analysisAllowed.value = true;
+  acceptAll();
+  toggleDlgVisible(false);
+};
+
+const onDlgChange = () => {
+  if (!isAllAgreed()) {
+    setTimeout(() => {
+      analysisAllowed.value = false;
+    }, 800);
+  }
+  toggleDlgVisible(false);
+};
+
+watch(
+  () => route.path,
+  () => {
+    if (isNotSigned()) {
+      toggleNoticeVisible(true);
+    }
+  }
+);
+</script>
+
+<template>
+  <div v-if="isNoticeVisible" class="cookie-notice">
+    <div class="cookie-notice-content">
+      <div class="cookie-notice-wrap">
+        <div class="cookie-notice-left">
+          <p class="cookie-title">{{ $t('cookie.title') }}</p>
+          <p class="cookie-desc">
+            {{ $t('cookie.desc') }}
+            <a
+              :href="aboutCookiesUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ $t('cookie.link') }} </a
+            >{{ isZh ? '。' : '.' }}
+          </p>
+        </div>
+        <div class="cookie-notice-right">
+          <OButton type="outline" size="mini" @click="acceptAll">{{
+            $t('cookie.acceptAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="rejectAll">{{
+            $t('cookie.rejectAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="toggleDlgVisible(true)">
+            {{ $t('cookie.manage') }}
+          </OButton>
+        </div>
+
+        <IconClose
+          class="cookie-notice-close"
+          @click="toggleNoticeVisible(false)"
+        />
+      </div>
+    </div>
+    <ElDialog
+      v-model="isDlgVisible"
+      :width="lePadV ? '90%' : '50%'"
+      :title="$t('cookie.manage')"
+      destroy-on-close
+      :before-close="onDlgChange"
+    >
+      <div class="cookie-dlg-content">
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.necessaryCookie') }}</span>
+            <span class="item-extra">{{
+              $t('cookie.necessaryCookieTip')
+            }}</span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.necessaryCookieDetail') }}
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.analyticalCookie') }}</span>
+            <span class="item-extra">
+              <ElSwitch v-model="analysisAllowed"></ElSwitch>
+            </span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.analyticalCookieDetail') }}
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <OButton type="outline" size="mini" @click="handleSave">{{
+            $t('cookie.saveSetting')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="handleAllowAll">
+            {{ $t('cookie.acceptAll') }}
+          </OButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  .o-button {
+    --e-button-font-size-mini: 14px;
+  }
+  .o-button + .o-button {
+    margin-left: 16px;
+
+    @media (max-width: 840px) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
+}
+
+.cookie-notice-content {
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--e-shadow-l1);
+}
+.dark .cookie-notice-content {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.cookie-notice-wrap {
+  padding: 24px 44px;
+  max-width: 1504px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0 auto;
+  @media (max-width: 840px) {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.cookie-notice-left {
+  width: 60%;
+
+  @media (max-width: 1100px) {
+    width: 58%;
+  }
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  .cookie-title {
+    font-size: 16px;
+    line-height: 28px;
+    color: var(--e-color-text1);
+    font-weight: 500;
+    @media (max-width: 840px) {
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  .cookie-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--e-color-text3);
+    margin-top: 8px;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  @media (max-width: 840px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .o-button {
+    @media (max-width: 840px) {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
+
+.cookie-notice-close {
+  position: absolute;
+  top: 12px;
+  right: 24px;
+  cursor: pointer;
+  transform-origin: center;
+  color: var(--e-color-text1);
+  &:hover {
+    color: var(--e-color-brand1);
+  }
+}
+
+:deep(.el-dialog) {
+  .el-dialog__header {
+    text-align: center;
+    padding: 24px;
+  }
+  .el-dialog__title {
+    font-size: 32px;
+    color: var(--e-color-text1);
+    @media (max-width: 840px) {
+      font-size: 22px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0 24px;
+    .content-item + .content-item {
+      margin-top: 24px;
+    }
+
+    .content-item {
+      .item-header {
+        display: flex;
+        align-items: center;
+        .item-title {
+          font-size: 18px;
+          line-height: 32px;
+          color: var(--e-color-text1);
+          font-weight: 500;
+        }
+
+        .item-extra {
+          font-size: 14px;
+          line-height: 22px;
+          color: var(--e-color-text4);
+          margin-left: 24px;
+        }
+      }
+
+      .item-detail {
+        font-size: 16px;
+        line-height: 28px;
+        color: var(--e-color-text3);
+        margin-top: 12px;
+        @media (max-width: 840px) {
+          font-size: 14px;
+          line-height: 21px;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    text-align: center;
+    padding: 24px;
+    @media (max-width: 840px) {
+      .o-button {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/euler/src/i18n/cookie/cookie-en.ts b/packages/euler/src/i18n/cookie/cookie-en.ts
new file mode 100644
index 0000000000000000000000000000000000000000..716aceb422cc1276c18c942ab5d1456c9896f8e5
--- /dev/null
+++ b/packages/euler/src/i18n/cookie/cookie-en.ts
@@ -0,0 +1,17 @@
+export default {
+  title: 'openEuler Community Respects Your Privacy.',
+  desc: 'his site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our ',
+  link: 'About Cookies',
+  acceptAll: 'Accept All',
+  rejectAll: 'Reject All',
+  manage: 'Manage Cookies',
+  necessaryCookie: 'Strictly Necessary Cookies',
+  necessaryCookieTip: 'Always active',
+  necessaryCookieDetail:
+    'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
+  analyticalCookie: 'Analytics Cookies',
+  analyticalCookieDetail:
+    'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
+  saveSetting: 'Save and Accept',
+  allowAll: 'Accept All',
+};
diff --git a/packages/euler/src/i18n/cookie/cookie-zh.ts b/packages/euler/src/i18n/cookie/cookie-zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d9d1c58582e7ee0a242465873b0e406e07b608bc
--- /dev/null
+++ b/packages/euler/src/i18n/cookie/cookie-zh.ts
@@ -0,0 +1,17 @@
+export default {
+  title: 'openEuler社区重视您的隐私',
+  desc: '我们在本网站上使用Cookie，包括第三方Cookie，以便网站正常运行和提升浏览体验。单击“全部接受”即表示您同意这些目的；单击“全部拒绝”即表示您拒绝非必要的Cookie；单击“管理Cookie”以选择接受或拒绝某些Cookie。需要了解更多信息或随时更改您的Cookie首选项，请参阅我们的',
+  link: '《关于cookies》',
+  acceptAll: '全部接受',
+  rejectAll: '全部拒绝',
+  manage: '管理Cookie',
+  necessaryCookie: '必要Cookie',
+  necessaryCookieTip: '始终启用',
+  necessaryCookieDetail:
+    '这些Cookie是网站正常工作所必需的，不能在我们的系统中关闭。它们通常仅是为了响应您的服务请求而设置的，例如登录或填写表单。您可以将浏览器设置为阻止Cookie来拒绝这些Cookie，但网站的某些部分将无法正常工作。这些Cookie不存储任何个人身份信息。',
+  analyticalCookie: '统计分析Cookie',
+  analyticalCookieDetail:
+    '我们将根据您的同意使用和处理这些非必要Cookie。这些Cookie允许我们获得摘要统计数据，例如，统计访问量和访问者来源，便于我们改进我们的网站。',
+  saveSetting: '保存并接受',
+  allowAll: '全部接受',
+};
diff --git a/packages/euler/src/i18n/cookie/index.ts b/packages/euler/src/i18n/cookie/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1fad8cfc8c4da654029416e0f36de65ba1f2b1e
--- /dev/null
+++ b/packages/euler/src/i18n/cookie/index.ts
@@ -0,0 +1,7 @@
+import zh from './cookie-zh';
+import en from './cookie-en';
+
+export default (messages: { zh: any; en: any }) => {
+  messages.zh.cookie = zh;
+  messages.en.cookie = en;
+};
diff --git a/packages/euler/src/i18n/index.ts b/packages/euler/src/i18n/index.ts
index 91f7b5ab660bc904eca6071356ee8125817bd9b8..67aeae812b7e5be59439d90bdfdb262efe79aacb 100644
--- a/packages/euler/src/i18n/index.ts
+++ b/packages/euler/src/i18n/index.ts
@@ -2,6 +2,7 @@ import { createI18n } from 'vue-i18n';
 
 import zhLanguage from './lang/zhLanguage';
 import enLanguage from './lang/enLanguage';
+import cookie from './cookie';
 
 const messages = {
   zh: {
@@ -11,6 +12,8 @@ const messages = {
     ...enLanguage,
   },
 };
+
+cookie(messages);
 const i18n = createI18n({
   locale: localStorage.getItem('lang') || 'zh',
   allowComposition: true,
diff --git a/packages/euler/src/main.ts b/packages/euler/src/main.ts
index 4809bd64770ad0af894b6c0bc82ad8522ba5217a..965c5f41af961c38aeefee7164e0eb40ff3eb670 100644
--- a/packages/euler/src/main.ts
+++ b/packages/euler/src/main.ts
@@ -1,5 +1,6 @@
 import 'shared/styles/base.scss';
 import '@/shared/styles/style.scss';
+import '@/shared/opendesign-styles/variable.scss';
 // import '@authing/native-js-ui-components/lib/index.min.css';
 import '@/views/mobile/sig/styles/style.scss';
 import { createApp } from 'vue';
@@ -12,7 +13,7 @@ import locale from './assets/locale/cn'; // 引入自己的
 import ElementPlus from 'element-plus';
 import 'element-plus/theme-chalk/el-message.css';
 import 'shared/styles/index.scss';
-import oa from '@/shared/analytics';
+import opendesign from 'shared/components/Opendesign';
 
 // 国际化
 import i18n from './i18n';
@@ -24,10 +25,7 @@ app.use(ElementPlus, {
 app.use(router);
 app.use(createPinia());
 app.component('OIcon', OIcon);
-
-oa.enable(router);
-oa.reportPerformance();
-
+app.use(opendesign);
 app.mount('#app');
 
 router.afterEach(() => {
diff --git a/packages/euler/src/router.ts b/packages/euler/src/router.ts
index 82ba9e3910649a17fc85b76e51150accefe71256..0e764eddb40669173d2b5b8d65e902b5f59a9012 100644
--- a/packages/euler/src/router.ts
+++ b/packages/euler/src/router.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import { useCommonStore } from './stores/common';
 import { querySigInfo, queryUserList } from 'shared/api';
-import { isTest, testIsPhone } from 'shared/utils/helper';
+import { testIsPhone } from 'shared/utils/helper';
 export const routes = [
   { path: '/', redirect: '/zh/overview' },
   {
diff --git a/packages/euler/src/shared/analytics.ts b/packages/euler/src/shared/analytics.ts
index e1a35d83d868a0c24904489ce26928034d5d7cbc..ef3b57876ff371fec025a5045411bcd2a0ec6e3c 100644
--- a/packages/euler/src/shared/analytics.ts
+++ b/packages/euler/src/shared/analytics.ts
@@ -1,22 +1,3 @@
-import { OpenAnalytics } from '@opensig/open-analytics';
 import { OAUtil } from 'shared/analytics';
-import { reportAnalytics } from 'shared/api/api-analytics';
 
-class EulerOa extends OAUtil {
-  oa?: OpenAnalytics;
-
-  getInstance(): OpenAnalytics {
-    if (!this.oa) {
-      this.oa = new OpenAnalytics({
-        appKey: 'openEuler',
-        request: (data) => {
-          reportAnalytics('openeuler', data);
-        },
-      });
-    }
-    return this.oa;
-  }
-}
-
-const oa = new EulerOa();
-export default oa;
+export default new OAUtil('openEuler', 'openeuler');
diff --git a/packages/euler/src/shared/opendesign-styles/_color.scss b/packages/euler/src/shared/opendesign-styles/_color.scss
new file mode 100644
index 0000000000000000000000000000000000000000..924c296729df675cb164de372b20bbacaf098f4a
--- /dev/null
+++ b/packages/euler/src/shared/opendesign-styles/_color.scss
@@ -0,0 +1,181 @@
+// 颜色
+:root {
+  /**
+   * 基础色盘
+   */
+
+  // 克莱因蓝
+  --o-color-kleinblue1: #000412;
+  --o-color-kleinblue2: #000827;
+  --o-color-kleinblue3: #0c2360;
+  --o-color-kleinblue4: #00288d;
+  --o-color-kleinblue5: #002fa7;
+  --o-color-kleinblue6: #0d3cb4;
+  --o-color-kleinblue7: #2555cd;
+  --o-color-kleinblue8: #406fe7;
+  --o-color-kleinblue9: #5988ff;
+  --o-color-kleinblue10: #b2c0e4;
+
+  // 中性色
+  --o-color-neutral1: #121212;
+  --o-color-neutral2: #151515;
+  --o-color-neutral3: #2d2d2d;
+  --o-color-neutral4: #3f3f3f;
+  --o-color-neutral5: #555555;
+  --o-color-neutral6: #707070;
+  --o-color-neutral7: #848484;
+  --o-color-neutral8: #999999;
+  --o-color-neutral9: #b2b2b2;
+  --o-color-neutral10: #cccccc;
+  --o-color-neutral11: #e5e5e5;
+
+  // 红色
+  --o-color-red1: #850d09;
+  --o-color-red2: #b4110c;
+  --o-color-red3: #e4160f;
+  --o-color-red4: #f13b35;
+  --o-color-red5: #f3524d;
+  --o-color-red6: #ff5f5a;
+  --o-color-red7: #ff7873;
+  --o-color-red8: #ff928d;
+  --o-color-red9: #ffaba6;
+  --o-color-red10: #ffd2af;
+
+  // 黄色
+  --o-color-yellow1: #754c01;
+  --o-color-yellow2: #a86d01;
+  --o-color-yellow3: #dabe01;
+  --o-color-yellow4: #feaa11;
+  --o-color-yellow5: #feb32a;
+  --o-color-yellow6: #ffc037;
+  --o-color-yellow7: #ffd950;
+  --o-color-yellow8: #fff36a;
+  --o-color-yellow9: #ffff83;
+  --o-color-yellow10: #ffe1aa;
+
+  // 绿色
+  --o-color-green1: #1f370f;
+  --o-color-green2: #355f1a;
+  --o-color-green3: #4b8725;
+  --o-color-green4: #62af30;
+  --o-color-green5: #6dc335;
+  --o-color-green6: #7ad042;
+  --o-color-green7: #93e95b;
+  --o-color-green8: #adff75;
+  --o-color-green9: #c6ff8e;
+  --o-color-green10: #c5e7ae;
+
+  // 橙色
+  --o-color-orange1: #9b370e;
+  --o-color-orange2: #b54f00;
+  --o-color-orange3: #e86600;
+  --o-color-orange4: #ff801c;
+  --o-color-orange5: #ff8e36;
+  --o-color-orange6: #ff9b43;
+  --o-color-orange7: #ffb45c;
+  --o-color-orange8: #ffce76;
+  --o-color-orange9: #ffcf8f;
+  --o-color-orange10: #ffd2af;
+
+  // 灰蓝色
+  --o-color-greyblue1: #e5e8f0;
+  --o-color-greyblue2: #f7f8fa;
+  --o-color-greyblue3: #f5f6f8;
+
+  // 灰黑色
+  --o-color-greyblack1: #1e1e1e;
+  --o-color-greyblack2: #242424;
+  --o-color-greyblack3: #2e2e2e;
+  --o-color-greyblack4: #383838;
+
+  // 白色
+  --o-color-white: #ffffff;
+
+  // 黑色
+  --o-color-black: #000000;
+
+  // 透明
+  --o-color-transparent: transparent;
+
+  /**
+   * 状态颜色 && 功能颜色
+   */
+
+  // 成功色
+  --o-color-success1: var(--o-color-green5); // normal
+  --o-color-success2: var(--o-color-green7); // hover
+  --o-color-success3: var(--o-color-green10); // disabled
+
+  // 告警色
+  --o-color-warning1: var(--o-color-orange5); // normal
+  --o-color-warning2: var(--o-color-orange7); // hover
+  --o-color-warning3: var(--o-color-orange10); // disabled
+
+  // 错误色
+  --o-color-error1: var(--o-color-red5); // normal
+  --o-color-error2: var(--o-color-red7); // hover
+  --o-color-error3: var(--o-color-red10); // disabled
+
+  // 品牌色
+  --o-color-brand1: var(--o-color-kleinblue5); // 常规、文字
+  --o-color-brand2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-brand3: var(--o-color-kleinblue4); // 确认
+  --o-color-brand4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-brand5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-brand6: var(
+    --o-color-kleinblue10
+  ); // 文字禁用，暂和一般禁用保持一致
+
+  // 文字颜色
+  --o-color-text1: var(--o-color-black); // 强调/正文标题 黑色
+  --o-color-text2: var(--o-color-white); // 强调/正文标题 白色
+  --o-color-text3: var(--o-color-neutral4); // 次强调/正文标题
+  --o-color-text4: var(--o-color-neutral6); // 次要信息/正文
+  --o-color-text5: var(--o-color-neutral11); // 置灰信息
+  --o-color-text-secondary: var(--o-color-neutral6); // 次级文字颜色
+
+  // 背景色
+  --o-color-bg1: var(--o-color-greyblue3); // 整体背景色
+  --o-color-bg2: var(--o-color-white); // 一级容器背景色
+  --o-color-bg3: var(--o-color-greyblue2); // 二级容器背景色
+  --o-color-bg4: var(--o-color-greyblue1); // 三级容器背景色
+  --o-color-bg5: var(--o-color-white); // 弹出框、tooltip背景色
+  --o-color-bg6: rgba(0, 0, 0, 0.5); // 蒙层
+  --o-color-bg-secondary: var(--o-color-neutral11); // 次级颜色背景颜色
+
+  // 链接色
+  --o-color-link1: var(--o-color-kleinblue5); // 常规
+  --o-color-link2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-link3: var(--o-color-kleinblue4); // 点击
+  --o-color-link4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-link5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-link6: var(--o-color-kleinblue10); // 文字禁用，暂和一般禁用保持一致
+
+  // 边框颜色
+  --o-color-border1: var(--o-color-neutral6);
+  --o-color-border2: var(--o-color-neutral11);
+  --o-color-border3: var(--o-color-kleinblue5);
+
+  // 分割线颜色
+  --o-color-division1: var(--o-color-neutral11);
+
+  // 填充色，用于阴影容器背景
+  --o-color-fill1: var(
+    --o-color-white
+  ); // SL1 一级投影容器背景，应用于默认状态的卡片、楼层、导航栏、组件里局部投影背景等
+  --o-color-fill2: var(
+    --o-color-white
+  ); // SL2 二级投影容器背景，应用于卡片、组件里局部投影等
+  --o-color-fill2_hover: var(
+    --o-color-white
+  ); // SL2-hover 升起投影容器背景，应用于悬停状态的卡片等，是SL2的激活态
+  --o-color-fill3: var(
+    --o-color-white
+  ); // SL3 三级投影容器背景，应用于一级投影上的卡片、组件等
+  --o-color-fill4: var(
+    --o-color-white
+  ); // SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器
+  --o-color-fill5: var(
+    --o-color-white
+  ); // SL5 弹出阴影容器背景，应用于模态弹窗投影
+}
diff --git a/packages/euler/src/shared/opendesign-styles/_font.scss b/packages/euler/src/shared/opendesign-styles/_font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..56116fef4f7959919bfd44ce074a6761428aaa17
--- /dev/null
+++ b/packages/euler/src/shared/opendesign-styles/_font.scss
@@ -0,0 +1,26 @@
+// 字体
+:root {
+  // 字体font-size
+  --o-font-size-h1: 64px;
+  --o-font-size-h2: 54px;
+  --o-font-size-h3: 36px;
+  --o-font-size-h4: 28px;
+  --o-font-size-h5: 24px;
+  --o-font-size-h6: 20px;
+  --o-font-size-h7: 18px;
+  --o-font-size-h8: 16px;
+  --o-font-size-text: 14px;
+  --o-font-size-tip: 12px;
+
+  // 字体line-height
+  --o-line-height-h1: 84px;
+  --o-line-height-h2: 76px;
+  --o-line-height-h3: 48px;
+  --o-line-height-h4: 36px;
+  --o-line-height-h5: 32px;
+  --o-line-height-h6: 28px;
+  --o-line-height-h7: 26px;
+  --o-line-height-h8: 24px;
+  --o-line-height-text: 22px;
+  --o-line-height-tip: 18px;
+}
diff --git a/packages/euler/src/shared/opendesign-styles/_shadow.scss b/packages/euler/src/shared/opendesign-styles/_shadow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..78dcd8d96a0a483060378c3cdb1dd4e6b7e80178
--- /dev/null
+++ b/packages/euler/src/shared/opendesign-styles/_shadow.scss
@@ -0,0 +1,9 @@
+// 阴影，注：SL2有hover投影
+:root {
+  --o-shadow-l1: 0 1px 5px rgba(45, 47, 51, 0.1); // SL1 一级投影，应用于楼层、导航栏、组件里局部投影等，
+  --o-shadow-l2: 0 1px 5px rgba(45, 47, 51, 0.1); // SL2-normal 二级投影，应用于卡片、组件里局部投影等
+  --o-shadow-l2_hover: 0 6px 18px rgba(0, 47, 167, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
+  --o-shadow-l3: 0 6px 18px rgba(45, 47, 51, 0.14); // SL3 三级投影，应用于一级投影上的卡片、组件等
+  --o-shadow-l4: 0 10px 32px rgba(45, 47, 51, 0.18); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
+  --o-shadow-l5: 0 12px 42px rgba(45, 47, 51, 0.24); // SL5 弹出阴影，应用于模态弹窗投影
+}
diff --git a/packages/euler/src/shared/opendesign-styles/_spacing.scss b/packages/euler/src/shared/opendesign-styles/_spacing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3dcd5bfbe1370420420c90af1683fed7df3393f
--- /dev/null
+++ b/packages/euler/src/shared/opendesign-styles/_spacing.scss
@@ -0,0 +1,13 @@
+// 间距
+:root {
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
+}
diff --git a/packages/euler/src/shared/opendesign-styles/variable.scss b/packages/euler/src/shared/opendesign-styles/variable.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c7242722c856dd379092fd4ea79825a664a01b7b
--- /dev/null
+++ b/packages/euler/src/shared/opendesign-styles/variable.scss
@@ -0,0 +1,4 @@
+@import './_color.scss';
+@import './_shadow.scss';
+@import './_font.scss';
+@import './_spacing.scss';
diff --git a/packages/euler/vite.config.js b/packages/euler/vite.config.js
index 0d7e6d0e5215f5ed37953e35351d24471d249b1f..4e29c98e44e01c942b77bfde28e343706db16ede 100644
--- a/packages/euler/vite.config.js
+++ b/packages/euler/vite.config.js
@@ -7,6 +7,8 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import vueJsxPlugin from '@vitejs/plugin-vue-jsx';
+
 export default defineConfig({
   base: '/',
   build: {
@@ -20,6 +22,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueJsxPlugin(),
     Icons({
       compiler: 'vue3',
       customCollections: {
@@ -36,7 +39,10 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@use "@/shared/styles/element-plus/index.scss" as *;`,
+        additionalData: `
+        @use "@/shared/styles/element-plus/index.scss" as *;
+        @use "shared/styles/mixin/screen.scss" as screen;
+        `,
       },
     },
   },
diff --git a/packages/gauss/.env.development b/packages/gauss/.env.development
index ad64f353e894d0cc22ea2acc64ead55fe08f00ec..f4e8ce46926bcfcd3b9cd431b89dfc45b9824b52 100644
--- a/packages/gauss/.env.development
+++ b/packages/gauss/.env.development
@@ -1,3 +1,3 @@
 VITE_COOKIE_DOMAIN = localhost
-
+VITE_COOKIE_VER = "20241230"
 VITE_LOGIN_ORIGIN = https://id.opengauss.org
diff --git a/packages/gauss/.env.production b/packages/gauss/.env.production
index 28b680c78b15f1d98040a774d862c366daed2431..6505bf37b2ac74144c502c889fc95108281a58f8 100644
--- a/packages/gauss/.env.production
+++ b/packages/gauss/.env.production
@@ -1,3 +1,2 @@
 VITE_COOKIE_DOMAIN = .opengauss.org
-
-VITE_LOGIN_ORIGIN = https://id.opengauss.org
+VITE_COOKIE_VER = "20241230"
diff --git a/packages/gauss/components.d.ts b/packages/gauss/components.d.ts
index 5f19a9a5836f6a6d36010c5ecd61e8a7aabe67a6..51645d827fe158555b6c6620d30024e8c424a7c7 100644
--- a/packages/gauss/components.d.ts
+++ b/packages/gauss/components.d.ts
@@ -11,8 +11,10 @@ declare module 'vue' {
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
     AppHeaderMobile: typeof import('./src/components/AppHeaderMobile.vue')['default']
     AppMobileMenu: typeof import('./src/components/AppMobileMenu.vue')['default']
+    CookieNotice: typeof import('./src/components/CookieNotice.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
diff --git a/packages/gauss/src/.env.production b/packages/gauss/src/.env.production
deleted file mode 100644
index 5d271abd82c77b93ee2382546916694487a3919c..0000000000000000000000000000000000000000
--- a/packages/gauss/src/.env.production
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_COOKIE_DOMAIN = .test.osinfra.cn
-
-VITE_LOGIN_ORIGIN = https://opengauss-usercenter.test.osinfra.cn
diff --git a/packages/gauss/src/App.vue b/packages/gauss/src/App.vue
index 0b13d091d235fed8296e3481241bfd28e340ef3a..4961adca330e875301e8352008289f41fca1eb0a 100644
--- a/packages/gauss/src/App.vue
+++ b/packages/gauss/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppHeader from '@/components/AppHeader.vue';
+import CookieNotice from './components/CookieNotice.vue';
 </script>
 
 <template>
@@ -9,10 +10,29 @@ import AppHeader from '@/components/AppHeader.vue';
       <component :is="Component" />
     </transition>
   </router-view>
+  <CookieNotice />
 </template>
 
 <style lang="scss">
 #app {
+  --layout-content-max-width: 1544px;
+  --layout-content-padding: 64px;
+  --layout-header-height: 80px;
+
+  @include screen.respond-to('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include screen.respond-to('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include screen.respond-to('phone') {
+    --layout-content-padding: 24px;
+  }
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/gauss/src/components/CookieNotice.vue b/packages/gauss/src/components/CookieNotice.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4054f26e51f8b43484c2b019ad644658311db03e
--- /dev/null
+++ b/packages/gauss/src/components/CookieNotice.vue
@@ -0,0 +1,379 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, computed } from 'vue';
+
+import { setCookie, removeCookie } from 'shared/utils/cookies';
+import {
+  useCookieStore,
+  COOKIE_AGREED_STATUS,
+  COOKIE_KEY,
+} from 'shared/stores/cookies';
+import { useScreen } from 'shared/hooks/useScreen';
+import { useI18n } from 'vue-i18n';
+
+import IconClose from '~icons/app/icon-close.svg';
+import { useRoute, useRouter } from 'vue-router';
+import oa from '@/shared/analytics';
+
+const { lePadV } = useScreen();
+const { locale } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+const aboutCookiesUrl = computed(
+  () => `https://opengauss.org/${locale.value}/cookies/`
+);
+const cookieStore = useCookieStore();
+
+const route = useRoute();
+const router = useRouter();
+const COOKIE_DOMAIN = import.meta.env.VITE_COOKIE_DOMAIN;
+
+// 是否允许分析cookie
+const analysisAllowed = ref(false);
+const isBoolean = (val: unknown) => typeof val === 'boolean';
+
+const isNoticeVisible = ref(false);
+
+// 显示/隐藏cookie提示
+const toggleNoticeVisible = (val: boolean) => {
+  if (isBoolean(val)) {
+    isNoticeVisible.value = val;
+  } else {
+    isNoticeVisible.value = !isNoticeVisible.value;
+  }
+};
+
+// 弹出框是否显示
+const isDlgVisible = ref(false);
+
+// 显示/隐藏弹出框
+const toggleDlgVisible = (val: boolean) => {
+  if (isBoolean(val)) {
+    isDlgVisible.value = val;
+  } else {
+    isDlgVisible.value = !isDlgVisible.value;
+  }
+};
+
+// 是否未签署
+const isNotSigned = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.NOT_SIGNED;
+};
+
+// 是否全部同意
+const isAllAgreed = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.ALL_AGREED;
+};
+
+onMounted(() => {
+  // 未签署，展示cookie notice
+  if (isNotSigned()) {
+    toggleNoticeVisible(true);
+  }
+
+  if (isAllAgreed()) {
+    analysisAllowed.value = true;
+    oa.enable(router);
+  }
+});
+
+// 用户同意所有cookie
+const acceptAll = () => {
+  analysisAllowed.value = true;
+  cookieStore.status = COOKIE_AGREED_STATUS.ALL_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.ALL_AGREED}${cookieStore.version}`,
+    180,
+    COOKIE_DOMAIN
+  );
+  toggleNoticeVisible(false);
+  oa.enable(router);
+};
+
+// 用户拒绝所有cookie，即仅同意必要cookie
+const rejectAll = () => {
+  analysisAllowed.value = false;
+  cookieStore.status = COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.NECCESSARY_AGREED}${cookieStore.version}`,
+    180,
+    COOKIE_DOMAIN
+  );
+  toggleNoticeVisible(false);
+  oa.disable();
+};
+
+const handleSave = () => {
+  if (analysisAllowed.value) {
+    acceptAll();
+  } else {
+    rejectAll();
+  }
+
+  toggleDlgVisible(false);
+};
+
+const handleAllowAll = () => {
+  acceptAll();
+  toggleDlgVisible(false);
+};
+
+const onDlgChange = () => {
+  if (!isAllAgreed()) {
+    setTimeout(() => {
+      analysisAllowed.value = false;
+    }, 800);
+  }
+  toggleDlgVisible(false);
+};
+
+watch(
+  () => route.path,
+  () => {
+    if (isNotSigned()) {
+      toggleNoticeVisible(true);
+    }
+  }
+);
+</script>
+
+<template>
+  <div v-if="isNoticeVisible" class="cookie-notice">
+    <div class="cookie-notice-content">
+      <div class="cookie-notice-wrap">
+        <div class="cookie-notice-left">
+          <p class="cookie-title">{{ $t('cookie.title') }}</p>
+          <p class="cookie-desc">
+            {{ $t('cookie.desc') }}
+            <a :href="aboutCookiesUrl" target="_blank">
+              {{ $t('cookie.link') }} </a
+            >{{ isZh ? '。' : '.' }}
+          </p>
+        </div>
+        <div class="cookie-notice-right">
+          <OButton type="outline" size="mini" @click="acceptAll">{{
+            $t('cookie.acceptAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="rejectAll">{{
+            $t('cookie.rejectAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="toggleDlgVisible(true)">
+            {{ $t('cookie.manage') }}
+          </OButton>
+        </div>
+
+        <IconClose
+          class="cookie-notice-close"
+          @click="toggleNoticeVisible(false)"
+        />
+      </div>
+    </div>
+    <ElDialog
+      v-model="isDlgVisible"
+      :width="lePadV ? '90%' : '50%'"
+      :title="$t('cookie.manage')"
+      destroy-on-close
+      :before-close="onDlgChange"
+    >
+      <div class="cookie-dlg-content">
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.necessaryCookie') }}</span>
+            <span class="item-extra">{{
+              $t('cookie.necessaryCookieTip')
+            }}</span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.necessaryCookieDetail') }}
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.analyticalCookie') }}</span>
+            <span class="item-extra">
+              <ElSwitch v-model="analysisAllowed"></ElSwitch>
+            </span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.analyticalCookieDetail') }}
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <OButton type="outline" size="mini" @click="handleSave">{{
+            $t('cookie.saveSetting')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="handleAllowAll">
+            {{ $t('cookie.acceptAll') }}
+          </OButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  .o-button {
+    --o-button-font-size-mini: 14px;
+  }
+  .o-button + .o-button {
+    margin-left: 16px;
+
+    @media (max-width: 840px) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
+}
+
+.cookie-notice-content {
+  background-color: rgba(var(--o-color-fill6), 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--o-shadow-l1);
+}
+
+.cookie-notice-wrap {
+  padding: 24px 44px;
+  max-width: 1504px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0 auto;
+  @media (max-width: 840px) {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.cookie-notice-left {
+  width: 60%;
+
+  @media (max-width: 1100px) {
+    width: 58%;
+  }
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  .cookie-title {
+    font-size: 16px;
+    line-height: 28px;
+    color: var(--o-color-text1);
+    font-weight: 500;
+    @media (max-width: 840px) {
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  .cookie-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--o-color-text3);
+    margin-top: 8px;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  @media (max-width: 840px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .o-button {
+    @media (max-width: 840px) {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
+
+.cookie-notice-close {
+  position: absolute;
+  top: 12px;
+  right: 24px;
+  cursor: pointer;
+  transform-origin: center;
+  color: var(--o-color-text1);
+  &:hover {
+    color: var(--o-color-brand1);
+  }
+}
+
+.cookie-dlg-content {
+  .content-item + .content-item {
+    margin-top: 24px;
+  }
+
+  .content-item {
+    .item-header {
+      display: flex;
+      align-items: center;
+      .item-title {
+        font-size: 18px;
+        line-height: 32px;
+        color: var(--o-color-text1);
+        font-weight: 500;
+      }
+
+      .item-extra {
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--o-color-text4);
+        margin-left: 24px;
+      }
+    }
+
+    .item-detail {
+      font-size: 16px;
+      line-height: 28px;
+      color: var(--o-color-text3);
+      margin-top: 12px;
+      @media (max-width: 840px) {
+        font-size: 14px;
+        line-height: 21px;
+        margin-top: 8px;
+      }
+    }
+  }
+}
+:deep(.el-dialog) {
+  .el-dialog__header {
+    text-align: center;
+  }
+  .el-dialog__title {
+    font-size: 32px;
+    @media (max-width: 840px) {
+      font-size: 22px;
+    }
+  }
+  .el-dialog__footer {
+    text-align: center;
+    @media (max-width: 840px) {
+      .o-button {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/gauss/src/i18n/cookie.ts b/packages/gauss/src/i18n/cookie.ts
new file mode 100644
index 0000000000000000000000000000000000000000..549abd1b34409cb9d75dab72113aa9d35145385d
--- /dev/null
+++ b/packages/gauss/src/i18n/cookie.ts
@@ -0,0 +1,41 @@
+const messages = {
+  zh: {
+    title: 'openGauss社区重视您的隐私',
+    desc: '我们在本网站上使用Cookie，包括第三方Cookie，以便网站正常运行和提升浏览体验。单击“全部接受”即表示您同意这些目的；单击“全部拒绝”即表示您拒绝非必要的Cookie；单击“管理Cookie”以选择接受或拒绝某些Cookie。需要了解更多信息或随时更改您的Cookie首选项，请参阅我们的',
+    link: '《关于cookies》',
+    acceptAll: '全部接受',
+    rejectAll: '全部拒绝',
+    manage: '管理Cookie',
+    necessaryCookie: '必要Cookie',
+    necessaryCookieTip: '始终启用',
+    necessaryCookieDetail:
+      '这些Cookie是网站正常工作所必需的，不能在我们的系统中关闭。它们通常仅是为了响应您的服务请求而设置的，例如登录或填写表单。您可以将浏览器设置为阻止Cookie来拒绝这些Cookie，但网站的某些部分将无法正常工作。这些Cookie不存储任何个人身份信息。',
+    analyticalCookie: '统计分析Cookie',
+    analyticalCookieDetail:
+      '我们将根据您的同意使用和处理这些非必要Cookie。这些Cookie允许我们获得摘要统计数据，例如，统计访问量和访问者来源，便于我们改进我们的网站。',
+    saveSetting: '保存设置',
+    setting: ' Cookie 设置',
+  },
+  en: {
+    title: 'openGauss Community Respects Your Privacy',
+    desc: 'This site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our',
+    link: 'About Cookies',
+    acceptAll: 'Accept All',
+    rejectAll: 'Reject All',
+    manage: 'Manage Cookies',
+    necessaryCookie: 'Strictly Necessary Cookies',
+    necessaryCookieTip: 'Always active',
+    necessaryCookieDetail:
+      'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
+    analyticalCookie: 'Analytics Cookies',
+    analyticalCookieDetail:
+      'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
+    saveSetting: 'Save Settings',
+    setting: 'Cookie settings',
+  },
+};
+
+export default (params: { zh: any; en: any }) => {
+  params.zh.cookie = messages.zh;
+  params.en.cookie = messages.en;
+};
diff --git a/packages/gauss/src/i18n/index.ts b/packages/gauss/src/i18n/index.ts
index 12c4b8c98034058a866b0c5dc924471cb4c320eb..8b3ca1e3b87697e3cea6692049dcd4eae115e5b2 100644
--- a/packages/gauss/src/i18n/index.ts
+++ b/packages/gauss/src/i18n/index.ts
@@ -2,6 +2,7 @@ import { createI18n } from 'vue-i18n';
 
 import zhLanguage from './lang/zhLanguage';
 import enLanguage from './lang/enLanguage';
+import cookie from './cookie';
 
 const messages = {
   zh: {
@@ -11,6 +12,7 @@ const messages = {
     ...enLanguage,
   },
 };
+cookie(messages);
 const setI18nLang = () => {
   const lang = localStorage.getItem('lang');
   if (lang === null) {
diff --git a/packages/gauss/src/main.ts b/packages/gauss/src/main.ts
index a19389a62c08c9e872c5f46066729af3a8cc81cc..509c2b7d435c827d742c43bbf187565db89a2e4d 100644
--- a/packages/gauss/src/main.ts
+++ b/packages/gauss/src/main.ts
@@ -1,5 +1,6 @@
 import 'shared/styles/base.scss';
 import '@/shared/styles/style.scss';
+import '@/shared/styles/opendesign-style/variable.scss';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
@@ -8,7 +9,7 @@ import OIcon from 'shared/components/OIcon.vue';
 import zhLang from 'element-plus/lib/locale/lang/zh-cn'; // 引入官方的中文国际化
 import locale from './assets/locale/cn'; // 引入自己的
 import ElementPlus from 'element-plus';
-import oa from '@/shared/analytics';
+import opendesign from 'shared/components/Opendesign';
 
 // 国际化
 import i18n from './i18n';
@@ -18,13 +19,11 @@ app.use(ElementPlus, {
   locale: { ...zhLang, ...locale }, // 使用本地的 locale 去覆盖官方的 zhLang
 });
 app.use(router);
+app.use(opendesign);
 app.use(createPinia());
 app.component('OIcon', OIcon);
 app.mount('#app');
 
-oa.enable(router);
-oa.reportPerformance();
-
 router.afterEach(() => {
   window.scrollTo(0, 0);
 });
diff --git a/packages/gauss/src/shared/analytics.ts b/packages/gauss/src/shared/analytics.ts
index 3d67c726c45330227c0ca970e78a6fd743fcefc0..5855b4aee06b2384d46c43906d95e88020863bbf 100644
--- a/packages/gauss/src/shared/analytics.ts
+++ b/packages/gauss/src/shared/analytics.ts
@@ -1,23 +1,3 @@
-import { OpenAnalytics } from '@opensig/open-analytics';
 import { OAUtil } from 'shared/analytics';
-import { reportAnalytics } from 'shared/api/api-analytics';
 
-class GaussOa extends OAUtil {
-  oa?: OpenAnalytics;
-
-  getInstance(): OpenAnalytics {
-    if (!this.oa) {
-      this.oa = new OpenAnalytics({
-        appKey: 'openGauss',
-        request: (data) => {
-          reportAnalytics('opengauss', data);
-        },
-      });
-      this.oa.setHeader({ service: 'datastat' });
-    }
-    return this.oa;
-  }
-}
-
-const oa = new GaussOa();
-export default oa;
+export default new OAUtil('openGauss', 'opengauss');
diff --git a/packages/gauss/src/shared/styles/opendesign-style/_color.scss b/packages/gauss/src/shared/styles/opendesign-style/_color.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b8a9959e1185d61885f9f70e6e22e09eba10e8b
--- /dev/null
+++ b/packages/gauss/src/shared/styles/opendesign-style/_color.scss
@@ -0,0 +1,169 @@
+// 颜色
+:root {
+  /**
+   * 基础色盘
+   */
+
+  // 交通紫
+  --o-color-trafficpurple1: #2d0a60;
+  --o-color-trafficpurple2: #420f8e;
+  --o-color-trafficpurple3: #5813bc;
+  --o-color-trafficpurple4: #6e1be8;
+  --o-color-trafficpurple5: #7d32ea;
+  --o-color-trafficpurple6: #ba3ff7;
+  --o-color-trafficpurple7: #a358ff;
+  --o-color-trafficpurple8: #bd72ff;
+  --o-color-trafficpurple9: #d68bff;
+  --o-color-trafficpurple10: #e1abff;
+
+  // 中性色
+  --o-color-neutral1: #121212;
+  --o-color-neutral2: #151515;
+  --o-color-neutral3: #2d2d2d;
+  --o-color-neutral4: #3f3f3f;
+  --o-color-neutral5: #555555;
+  --o-color-neutral6: #707070;
+  --o-color-neutral7: #848484;
+  --o-color-neutral8: #999999;
+  --o-color-neutral9: #b2b2b2;
+  --o-color-neutral10: #cccccc;
+  --o-color-neutral11: #e5e5e5;
+
+  // 红色
+  --o-color-red1: #850d09;
+  --o-color-red2: #b4110c;
+  --o-color-red3: #e4160f;
+  --o-color-red4: #f13b35;
+  --o-color-red5: #f3524d;
+  --o-color-red6: #ff5f5a;
+  --o-color-red7: #ff7873;
+  --o-color-red8: #ff928d;
+  --o-color-red9: #ffaba6;
+  --o-color-red10: #fabab8;
+
+  // 黄色
+  --o-color-yellow1: #754c01;
+  --o-color-yellow2: #a86d01;
+  --o-color-yellow3: #dabe01;
+  --o-color-yellow4: #feaa11;
+  --o-color-yellow5: #feb32a;
+  --o-color-yellow6: #ffc037;
+  --o-color-yellow7: #ffd950;
+  --o-color-yellow8: #fff36a;
+  --o-color-yellow9: #ffff83;
+  --o-color-yellow10: #ffe1aa;
+
+  // 绿色
+  --o-color-green1: #1f370f;
+  --o-color-green2: #355f1a;
+  --o-color-green3: #4b8725;
+  --o-color-green4: #62af30;
+  --o-color-green5: #6dc335;
+  --o-color-green6: #7ad042;
+  --o-color-green7: #93e95b;
+  --o-color-green8: #adff75;
+  --o-color-green9: #c6ff8e;
+  --o-color-green10: #c5e7ae;
+
+  // 橙色
+  --o-color-orange1: #9b370e;
+  --o-color-orange2: #b54f00;
+  --o-color-orange3: #e86600;
+  --o-color-orange4: #ff801c;
+  --o-color-orange5: #ff8e36;
+  --o-color-orange6: #ff9b43;
+  --o-color-orange7: #ffb45c;
+  --o-color-orange8: #ffce76;
+  --o-color-orange9: #ffcf8f;
+  --o-color-orange10: #ffd2af;
+
+  // 灰蓝色
+  --o-color-greyblue1: #e5e8f0;
+  --o-color-greyblue2: #f7f8fa;
+  --o-color-greyblue3: #f5f6f8;
+
+  // 灰黑色
+  --o-color-greyblack1: #1e1e1e;
+  --o-color-greyblack2: #242424;
+  --o-color-greyblack3: #2e2e2e;
+  --o-color-greyblack4: #383838;
+
+  // 白色
+  --o-color-white: #ffffff;
+
+  // 黑色
+  --o-color-black: #000000;
+
+  // 透明
+  --o-color-transparent: transparent;
+
+  /**
+   * 状态颜色 && 功能颜色
+   */
+
+  // 成功色
+  --o-color-success1: var(--o-color-green5); // normal
+  --o-color-success2: var(--o-color-green7); // hover
+  --o-color-success3: var(--o-color-green10); // disabled
+
+  // 告警色
+  --o-color-warning1: var(--o-color-orange5); // normal
+  --o-color-warning2: var(--o-color-orange7); // hover
+  --o-color-warning3: var(--o-color-orange10); // disabled
+
+  // 错误色
+  --o-color-error1: var(--o-color-red5); // normal
+  --o-color-error2: var(--o-color-red7); // hover
+  --o-color-error3: var(--o-color-red10); // disabled
+
+  // 品牌色
+  --o-color-brand1: var(--o-color-trafficpurple5); // 常规、文字
+  --o-color-brand2: var(--o-color-trafficpurple8); // 悬浮
+  --o-color-brand3: var(--o-color-trafficpurple4); // 确认
+  --o-color-brand4: var(--o-color-trafficpurple6); // 特殊场景
+  --o-color-brand5: var(--o-color-trafficpurple10); // 一般禁用
+  --o-color-brand6: var(--o-color-trafficpurple10); // 文字禁用，暂和一般禁用保持一致
+
+  // 文字颜色
+  --o-color-text1: var(--o-color-black); // 强调/正文标题 黑色
+  --o-color-text2: var(--o-color-white); // 强调/正文标题 白色
+  --o-color-text3: var(--o-color-neutral4); // 次强调/正文标题
+  --o-color-text4: var(--o-color-neutral6); // 次要信息/正文
+  --o-color-text5: var(--o-color-neutral11); // 置灰信息
+  --o-color-text-secondary: var(--o-color-neutral5); // 次级文字颜色
+
+  // 背景色
+  --o-color-bg1: var(--o-color-greyblue3); // 整体背景色
+  --o-color-bg2: var(--o-color-white); // 一级容器背景色
+  --o-color-bg3: var(--o-color-greyblue2); // 二级容器背景色
+  --o-color-bg4: var(--o-color-greyblue1); // 三级容器背景色
+  --o-color-bg5: var(--o-color-white); // 弹出框、tooltip背景色
+  --o-color-bg6: rgba(0, 0, 0, 0.5); // 蒙层
+  --o-color-bg-secondary: var(--o-color-neutral11); // 次级颜色背景颜色
+
+  // 链接色
+  --o-color-link1: var(--o-color-trafficpurple5); // 常规
+  --o-color-link2: var(--o-color-trafficpurple8); // 悬浮
+  --o-color-link3: var(--o-color-trafficpurple4); // 点击
+  --o-color-link4: var(--o-color-trafficpurple6); // 特殊场景
+  --o-color-link5: var(--o-color-trafficpurple10); // 一般禁用
+  --o-color-link6: var(--o-color-trafficpurple10); // 文字禁用，暂和一般禁用保持一致
+
+  // 边框颜色
+  --o-color-border1: var(--o-color-neutral6);
+  --o-color-border2: var(--o-color-neutral11);
+  --o-color-border3: var(--o-color-trafficpurple5);
+
+  // 分割线颜色
+  --o-color-division1: var(--o-color-neutral11);
+
+  // 填充色，用于阴影容器背景
+  --o-color-fill1: var(--o-color-white); // SL1 一级投影容器背景，应用于默认状态的卡片、楼层、导航栏、组件里局部投影背景等
+  --o-color-fill2: var(--o-color-white); // SL2 二级投影容器背景，应用于卡片、组件里局部投影等
+  --o-color-fill2_hover: var(--o-color-white); // SL2-hover 升起投影容器背景，应用于悬停状态的卡片等，是SL2的激活态
+  --o-color-fill3: var(--o-color-white); // SL3 三级投影容器背景，应用于一级投影上的卡片、组件等
+  --o-color-fill4: var(--o-color-white); // SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器
+  --o-color-fill5: var(--o-color-white); // SL5 弹出阴影容器背景，应用于模态弹窗投影
+
+  --o-color-fill6:255,255,255;
+}
diff --git a/packages/gauss/src/shared/styles/opendesign-style/_font.scss b/packages/gauss/src/shared/styles/opendesign-style/_font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..56116fef4f7959919bfd44ce074a6761428aaa17
--- /dev/null
+++ b/packages/gauss/src/shared/styles/opendesign-style/_font.scss
@@ -0,0 +1,26 @@
+// 字体
+:root {
+  // 字体font-size
+  --o-font-size-h1: 64px;
+  --o-font-size-h2: 54px;
+  --o-font-size-h3: 36px;
+  --o-font-size-h4: 28px;
+  --o-font-size-h5: 24px;
+  --o-font-size-h6: 20px;
+  --o-font-size-h7: 18px;
+  --o-font-size-h8: 16px;
+  --o-font-size-text: 14px;
+  --o-font-size-tip: 12px;
+
+  // 字体line-height
+  --o-line-height-h1: 84px;
+  --o-line-height-h2: 76px;
+  --o-line-height-h3: 48px;
+  --o-line-height-h4: 36px;
+  --o-line-height-h5: 32px;
+  --o-line-height-h6: 28px;
+  --o-line-height-h7: 26px;
+  --o-line-height-h8: 24px;
+  --o-line-height-text: 22px;
+  --o-line-height-tip: 18px;
+}
diff --git a/packages/gauss/src/shared/styles/opendesign-style/_shadow.scss b/packages/gauss/src/shared/styles/opendesign-style/_shadow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..31c21c71a49cbf0ed7a68f998a6b0cdadf53c42e
--- /dev/null
+++ b/packages/gauss/src/shared/styles/opendesign-style/_shadow.scss
@@ -0,0 +1,9 @@
+// 阴影，注：SL2有hover投影
+:root {
+  --o-shadow-l1: 0 1px 5px rgba(45, 47, 51, 0.1); // SL1 一级投影，应用于楼层、导航栏、组件里局部投影等，
+  --o-shadow-l2: 0 1px 5px rgba(45, 47, 51, 0.1); // SL2-normal 二级投影，应用于卡片、组件里局部投影等
+  --o-shadow-l2_hover: 0 6px 18px rgba(125, 50, 234, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
+  --o-shadow-l3: 0 6px 18px rgba(45, 47, 51, 0.14); // SL3 三级投影，应用于一级投影上的卡片、组件等
+  --o-shadow-l4: 0 10px 32px rgba(45, 47, 51, 0.18); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
+  --o-shadow-l5: 0 12px 42px rgba(45, 47, 51, 0.24); // SL5 弹出阴影，应用于模态弹窗投影
+}
diff --git a/packages/gauss/src/shared/styles/opendesign-style/_spacing.scss b/packages/gauss/src/shared/styles/opendesign-style/_spacing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3dcd5bfbe1370420420c90af1683fed7df3393f
--- /dev/null
+++ b/packages/gauss/src/shared/styles/opendesign-style/_spacing.scss
@@ -0,0 +1,13 @@
+// 间距
+:root {
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
+}
diff --git a/packages/gauss/src/shared/styles/opendesign-style/variable.scss b/packages/gauss/src/shared/styles/opendesign-style/variable.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c7242722c856dd379092fd4ea79825a664a01b7b
--- /dev/null
+++ b/packages/gauss/src/shared/styles/opendesign-style/variable.scss
@@ -0,0 +1,4 @@
+@import './_color.scss';
+@import './_shadow.scss';
+@import './_font.scss';
+@import './_spacing.scss';
diff --git a/packages/gauss/src/views/mobile/current/SpecialInterestGroupDiagram.vue b/packages/gauss/src/views/mobile/current/SpecialInterestGroupDiagram.vue
index 1d9d47175e3d2d439a2f53fb5d836ac5cd9c0441..37ae9995410fd96cc491fde9c5077d7f628d51c2 100644
--- a/packages/gauss/src/views/mobile/current/SpecialInterestGroupDiagram.vue
+++ b/packages/gauss/src/views/mobile/current/SpecialInterestGroupDiagram.vue
@@ -49,7 +49,9 @@
               } as any)"
             @click="goTo(val)"
           >
-            <span class="detail-menu-span" @click="goTo(val)"> {{ val.sig_names }}</span>
+            <span class="detail-menu-span" @click="goTo(val)">
+              {{ val.sig_names }}</span
+            >
           </div>
         </div>
       </div>
@@ -94,23 +96,23 @@
   </div>
 </template>
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useCommonStore } from "@/stores/common";
-import { querySigScoreAll } from "shared/api";
-import { useI18n } from "vue-i18n";
-import { IObject } from "shared/@types/interface";
-import { useStaffStore } from "@/stores/staff";
+import { nextTick, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCommonStore } from '@/stores/common';
+import { querySigScoreAll } from 'shared/api';
+import { useI18n } from 'vue-i18n';
+import { IObject } from 'shared/@types/interface';
+import { useStaffStore } from '@/stores/staff';
 const useStaff = useStaffStore();
 const { t } = useI18n();
 const useCommon = useCommonStore();
 const router = useRouter();
 const showAfter = 200;
 const listData = ref([]);
-const listArry = ref([{ feature: "", arry: [] }] as IObject[]);
+const listArry = ref([{ feature: '', arry: [] }] as IObject[]);
 const getList = () => {
   const query = {
-    community: "opengauss",
+    community: 'opengauss',
   };
   querySigScoreAll(query).then((data) => {
     listData.value = data?.data || [];
@@ -119,7 +121,7 @@ const getList = () => {
         const findOne: any = pre.find((it: any) => it.feature === next.feature);
         if (findOne) {
           findOne.arry.push(next);
-        } else if (next.feature !== "") {
+        } else if (next.feature !== '') {
           pre.push({
             feature: next.feature,
             arry: [next],
@@ -128,7 +130,7 @@ const getList = () => {
         }
         return pre;
       }, [])
-      .sort((a: any, b: any) => b["arry"].length - a["arry"].length);
+      .sort((a: any, b: any) => b['arry'].length - a['arry'].length);
     listArry.value = arry;
   });
 };
@@ -139,7 +141,7 @@ const getInnovationValue = () => {
 };
 const getCommunityValue = () => {
   return listArry.value.filter((item) => {
-    return item.group === "社区治理运营";
+    return item.group === '社区治理运营';
   });
 };
 getList();
@@ -206,7 +208,7 @@ const goTo = (item: Form) => {
   justify-content: center;
   align-items: center;
   // background-color: rgba(0, 47, 167, var(--diaphaneity));
-  background: #7D32EA;
+  background: #7d32ea;
   font-size: 8px;
   font-family: HarmonyOS_Sans_SC;
   line-height: 16px;
@@ -261,7 +263,7 @@ const goTo = (item: Form) => {
   }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scoped>
 .el-dialog__header {
   padding: 0px !important;
 }
diff --git a/packages/gauss/vite.config.js b/packages/gauss/vite.config.js
index 7cff62708d37820ee964a4c85dff45b9feeab578..1f99b8073a2d90a4128712fcb6c6a83a9d0245c9 100644
--- a/packages/gauss/vite.config.js
+++ b/packages/gauss/vite.config.js
@@ -1,6 +1,7 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import Icons from 'unplugin-icons/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
@@ -21,6 +22,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueJsx(),
     Icons({
       compiler: 'vue3',
       customCollections: {
@@ -37,7 +39,10 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@use "@/shared/styles/element-plus/index.scss" as *;`,
+        additionalData: `
+        @use "@/shared/styles/element-plus/index.scss" as *;
+        @use "shared/styles/mixin/screen.scss" as screen;
+        `,
       },
     },
   },
diff --git a/packages/lookeng/.env.development b/packages/lookeng/.env.development
deleted file mode 100644
index d5a75c74803f55f386b0b745dada3e7367c07696..0000000000000000000000000000000000000000
--- a/packages/lookeng/.env.development
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_COOKIE_DOMAIN = localhost
-
-VITE_LOGIN_ORIGIN = https://id.openeuler.org
diff --git a/packages/lookeng/.env.production b/packages/lookeng/.env.production
deleted file mode 100644
index 79e379e6cfc388457ae92c706e79625c7ed410a8..0000000000000000000000000000000000000000
--- a/packages/lookeng/.env.production
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_COOKIE_DOMAIN = .openeuler.org
-
-VITE_LOGIN_ORIGIN = https://id.openeuler.org
diff --git a/packages/lookeng/auto-imports.d.ts b/packages/lookeng/auto-imports.d.ts
deleted file mode 100644
index 08908edd6a4136cad144e7a483f291f9d9618be2..0000000000000000000000000000000000000000
--- a/packages/lookeng/auto-imports.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Generated by 'unplugin-auto-import'
-export {}
-declare global {
-
-}
diff --git a/packages/lookeng/components.d.ts b/packages/lookeng/components.d.ts
deleted file mode 100644
index 951f37acf47321f13781b77da9ac97fa5676e27d..0000000000000000000000000000000000000000
--- a/packages/lookeng/components.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    AppFooter: typeof import('./src/components/AppFooter.vue')['default']
-    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
-    AppHeaderMobile: typeof import('./src/components/AppHeaderMobile.vue')['default']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    TheForm: typeof import('./src/components/TheForm.vue')['default']
-    TheProgress: typeof import('./src/components/TheProgress.vue')['default']
-  }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
-}
diff --git a/packages/lookeng/env.d.ts b/packages/lookeng/env.d.ts
deleted file mode 100644
index 6d17945a5815aee1d6db1687f99d761aea32021e..0000000000000000000000000000000000000000
--- a/packages/lookeng/env.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// / <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-
-declare module '*.svg';
-declare module '*.png';
-declare module '*.jpg';
-declare module '*.jpeg';
-declare module '*.gif';
-declare module '*.bmp';
-declare module '*.tiff';
diff --git a/packages/lookeng/favicon.ico b/packages/lookeng/favicon.ico
deleted file mode 100644
index d5e302ea3282731cee7324ebb6169f1e16ab4ed7..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/favicon.ico and /dev/null differ
diff --git a/packages/lookeng/index.html b/packages/lookeng/index.html
deleted file mode 100644
index b57ac4821212b8757f9171117947c102fcbe5622..0000000000000000000000000000000000000000
--- a/packages/lookeng/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="./favicon.ico" />
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
-    <title>openLooKeng DATASTAT</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <div id="ieTips" style="text-align: center;padding:20px 0;display: none;">
-      <p>不支持IE，请使用其他浏览器访问！</p>
-      <p>IE is not supported, please use another browser to visit!</p>
-    </div>
-    <script type="module" src="./src/main.ts"></script>
-    <script>
-     function isIE() { 
-        if (!!window.ActiveXObject || "ActiveXObject" in window)
-          return true;
-          else
-          return false;
-        } 
-        if(isIE()){ 
-          document.querySelector('#ieTips').style.display= 'block'
-        } 
-    </script>
-    <script>
-      var _hmt = _hmt || [];
-      (function() {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?0f2023d05716710fab4f4d4352f4c9ce";
-        var s = document.getElementsByTagName("script")[0]; 
-        s.parentNode.insertBefore(hm, s);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/packages/lookeng/package.json b/packages/lookeng/package.json
deleted file mode 100644
index 6a050600eb1deef497250ef6fbeb06f12ed073c3..0000000000000000000000000000000000000000
--- a/packages/lookeng/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "lookeng",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build"
-  },
-  "dependencies": {
-    "shared": "workspace:^",
-    "unplugin-icons": "^0.14.0"
-  }
-}
diff --git a/packages/lookeng/src/App.vue b/packages/lookeng/src/App.vue
deleted file mode 100644
index cccde6004c909237c4bf3bf1f48ceaf5d6a3e176..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/App.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import AppHeader from '@/components/AppHeader.vue';
-</script>
-
-<template>
-  <header><app-header></app-header></header>
-  <!-- <router-view></router-view> -->
-  <router-view v-slot="{ Component, route }">
-    <transition :name="route.meta.transition">
-      <component :is="Component" />
-    </transition>
-  </router-view>
-</template>
-
-<style lang="scss">
-#app {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.wrap {
-  max-width: 1416px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-footer {
-  background: #060612;
-  margin-top: 60px;
-}
-body {
-  background: #000;
-  overflow-y: scroll;
-}
-</style>
diff --git a/packages/lookeng/src/api/index.ts b/packages/lookeng/src/api/index.ts
deleted file mode 100644
index 0b965561608a190cd88cb57f5e556f80cbf96c3c..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/api/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 开源社区信息
- */
-
-export const openCommunityInfo = {
-  name: 'openlookeng',
-  link: 'https://openlookeng.io/zh-cn/',
-  link_en: 'https://openlookeng.io/',
-  email: 'contact@openlookeng.io',
-};
diff --git a/packages/lookeng/src/assets/404.png b/packages/lookeng/src/assets/404.png
deleted file mode 100644
index b058c2c903892b1fbd1ed2a5e537dea4744df1be..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/404.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/bg.png b/packages/lookeng/src/assets/bg.png
deleted file mode 100644
index 55ca0fcac91f177837ab1e7e644ebcc84957197d..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/bg.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/bg_mo.png b/packages/lookeng/src/assets/bg_mo.png
deleted file mode 100644
index f374ca64bf55d8e0cd6fd95de5ac8ecf849ec98b..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/bg_mo.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datapertus.png b/packages/lookeng/src/assets/datapertus.png
deleted file mode 100644
index d6dbb6b6c70d691c0d4a2af50a58d51d7a7bc7a9..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datapertus.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datapertus.svg b/packages/lookeng/src/assets/datapertus.svg
deleted file mode 100644
index 09af7bcd9beba5434072ee0107a2def58107316d..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/assets/datapertus.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="152px" height="32px" viewBox="0 0 152 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>DATAPERTUS</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="openEuler_Contributors" transform="translate(-252.000000, -2140.000000)" fill="#FFFFFF">
-            <g id="FOOTER/zh" transform="translate(0.000000, 2084.000000)">
-                <g id="DATAPERTUS" transform="translate(252.000000, 56.000000)">
-                    <text font-family="Arial-Black, Arial Black" font-size="20" font-weight="700" line-spacing="20">
-                        <tspan x="0" y="22">DATAPERTUS</tspan>
-                    </text>
-                    <g id="OPEN-COMMUNITY" transform="translate(23.000000, 24.000000)">
-                        <text font-family="HarmonyOS_Sans_SC_Medium, HarmonyOS Sans SC" font-size="8" font-weight="400" line-spacing="8">
-                            <tspan x="16" y="9">OPEN COMMUNITY</tspan>
-                        </text>
-                        <rect id="矩形" opacity="0.804937318" x="0" y="4" width="8" height="1" rx="0.5"></rect>
-                        <rect id="矩形备份-134" opacity="0.804937318" x="98" y="4" width="8" height="1" rx="0.5"></rect>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/lookeng/src/assets/datastat-black.png b/packages/lookeng/src/assets/datastat-black.png
deleted file mode 100644
index c5f1a9b8e94deb7a4990703a0b6c88cb87aba29b..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datastat-black.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datastat-zh-black.png b/packages/lookeng/src/assets/datastat-zh-black.png
deleted file mode 100644
index 84f5d5218c95ffc93344c4fbf016e30b35a97ea2..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datastat-zh-black.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datastat-zh-mo.png b/packages/lookeng/src/assets/datastat-zh-mo.png
deleted file mode 100644
index 1c96b7f61cc16757aa0f3df64d138c314bf71367..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datastat-zh-mo.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datastat-zh.png b/packages/lookeng/src/assets/datastat-zh.png
deleted file mode 100644
index d9cd52db2e8826d707e074188a6d267de8fabbee..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datastat-zh.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/datastat.png b/packages/lookeng/src/assets/datastat.png
deleted file mode 100644
index 4f96fc3abca276f0714e501dbc13fbcb28fa3966..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/datastat.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/atom.png b/packages/lookeng/src/assets/mobile/atom.png
deleted file mode 100644
index c8aaae1f6f31fb89e72025302008c9c11f02c3b4..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/atom.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/bg1.png b/packages/lookeng/src/assets/mobile/bg1.png
deleted file mode 100644
index b69c126e5db677c8fa51ddf5ed234579b43d377b..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/bg1.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/datastat.png b/packages/lookeng/src/assets/mobile/datastat.png
deleted file mode 100644
index 849298e921d76a5cb06c41499d9547808cfaf8db..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/datastat.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/datastat1.png b/packages/lookeng/src/assets/mobile/datastat1.png
deleted file mode 100644
index c5f1a9b8e94deb7a4990703a0b6c88cb87aba29b..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/datastat1.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/openeuler-white.png b/packages/lookeng/src/assets/mobile/openeuler-white.png
deleted file mode 100644
index 484011ed89613d7834f69bbe825fb869638b3c63..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/openeuler-white.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/openeuler.png b/packages/lookeng/src/assets/mobile/openeuler.png
deleted file mode 100644
index bebfdf6b372c84fe18593ff26799d46c4e187eef..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/openeuler.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/mobile/openeuler1.png b/packages/lookeng/src/assets/mobile/openeuler1.png
deleted file mode 100644
index 0cf78d3f63f3cbcc46bac4e808e4771c0523d553..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/mobile/openeuler1.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/openlook-logo.png b/packages/lookeng/src/assets/openlook-logo.png
deleted file mode 100644
index 723942643c0fdb811f237410bec669202f3c4a4c..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/openlook-logo.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/openlookeng-logo.png b/packages/lookeng/src/assets/openlookeng-logo.png
deleted file mode 100644
index 723942643c0fdb811f237410bec669202f3c4a4c..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/openlookeng-logo.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/openlookeng-small-white.png b/packages/lookeng/src/assets/openlookeng-small-white.png
deleted file mode 100644
index 3aedf74fe263437fbc0fa34e58a69df1ad66a3f9..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/openlookeng-small-white.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/openlookeng-small.png b/packages/lookeng/src/assets/openlookeng-small.png
deleted file mode 100644
index 1c7a35c97900654fbca002d367ecf7f9bd4d2db0..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/openlookeng-small.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/openlookeng.png b/packages/lookeng/src/assets/openlookeng.png
deleted file mode 100644
index 405dbeea369b1c0abb2944a7051767c92414eb00..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/openlookeng.png and /dev/null differ
diff --git a/packages/lookeng/src/assets/title-bg.png b/packages/lookeng/src/assets/title-bg.png
deleted file mode 100644
index 613c0a7c767e3521492e649b9c369872d7404ae5..0000000000000000000000000000000000000000
Binary files a/packages/lookeng/src/assets/title-bg.png and /dev/null differ
diff --git a/packages/lookeng/src/components/AppFooter.vue b/packages/lookeng/src/components/AppFooter.vue
deleted file mode 100644
index 84f3844bfa4b7881e100ef99b59f432917279857..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/components/AppFooter.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { openCommunityInfo } from '@/api/index';
-import { useI18n } from 'vue-i18n';
-import { useCommonStore } from '@/stores/common';
-
-import logo from '@/assets/datastat.png';
-import logoZh from '@/assets/datastat-zh.png';
-import communityLogo from '@/assets/openlookeng-logo.png';
-import { getYearByOffset } from 'shared/utils/helper';
-
-const { t, locale } = useI18n();
-const useCommon = useCommonStore();
-const language = computed(() => useCommon.language);
-
-locale.value = localStorage.getItem('lang') || 'zh';
-</script>
-
-<template>
-  <div class="footer wrap">
-    <div class="footer-info">
-      <div class="footer-logo">
-        <img class="logo" alt="logo" :src="language == 'zh' ? logoZh : logo" />
-        <span class="line"></span>
-        <a target="_blank" :href="openCommunityInfo.link"
-          ><img class="community-logo" :src="communityLogo"
-        /></a>
-      </div>
-      <a
-        class="footer-email"
-        target="_blank"
-        :href="`mailto:${openCommunityInfo.email}`"
-        >{{ openCommunityInfo.email }}</a
-      >
-      <p class="copyright">
-        {{ t('footer.copyright', { year: getYearByOffset() }) }}
-      </p>
-    </div>
-    <ul class="footer-about">
-      <li>
-        <router-link
-          target="_blank"
-          :to="language === 'zh' ? '/zh/about' : '/en/about'"
-          >{{ t('footer.about') }}</router-link
-        >
-      </li>
-      <li>
-        <a :href="t('footer.privacyLink')" target="_blank">{{
-          t('footer.privacy')
-        }}</a>
-      </li>
-      <li>
-        <a :href="t('footer.legalLink')" target="_blank">{{
-          t('footer.legal')
-        }}</a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.footer {
-  height: 200px;
-  padding: 60px 24px;
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto auto;
-  .footer-logo {
-    display: flex;
-    align-items: center;
-    .line {
-      height: 24px;
-      background: #fff;
-      margin: 0 16px;
-      display: block;
-      width: 1px;
-      opacity: 0.8;
-    }
-    .logo,
-    .community-logo {
-      height: 32px;
-    }
-  }
-  .footer-email {
-    display: block;
-    line-height: inherit;
-    font-size: 12px;
-    color: #fff;
-    margin-top: 16px;
-  }
-
-  .copyright {
-    font-size: 12px;
-    color: #fff;
-    opacity: 0.8;
-    margin-top: 8px;
-  }
-  .footer-option {
-    width: 340px;
-    text-align: center;
-    .atom-pc {
-      width: 190px;
-    }
-    .text {
-      font-size: 12px;
-      line-height: 20px;
-      color: #fff;
-      margin-top: 8px;
-    }
-  }
-  .footer-about {
-    display: grid;
-    justify-content: end;
-    a {
-      font-size: 14px;
-      color: #ffffff;
-      line-height: 26px;
-    }
-  }
-}
-</style>
diff --git a/packages/lookeng/src/components/AppHeader.vue b/packages/lookeng/src/components/AppHeader.vue
deleted file mode 100644
index 6e4daf3decae39ce2cdd717188745bc83109de03..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/components/AppHeader.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useCommonStore } from '@/stores/common';
-import { openCommunityInfo } from '@/api/index';
-import { useI18n } from 'vue-i18n';
-import ONav from 'shared/components/ONav.vue';
-import AppHeaderMobile from './AppHeaderMobile.vue';
-import { useRouter, useRoute } from 'vue-router';
-import { IObject } from 'shared/@types/interface';
-
-import logoWhite from '@/assets/datastat.png';
-import logoWhiteZh from '@/assets/datastat-zh.png';
-import communityLogoWhite from '@/assets/openlookeng-logo.png';
-import chevronDown from '~icons/app/chevron-down';
-
-const useCommon = useCommonStore();
-const router = useRouter();
-const route = useRoute();
-const { t, locale } = useI18n();
-
-const navList = computed(() => {
-  return [
-    {
-      id: 'overview',
-      label: t('nav.overview'),
-      zh: 'zh_overview',
-      en: 'en_overview',
-    },
-    {
-      id: 'detail',
-      label: t('nav.contributors'),
-      zh: 'zh_detail',
-      en: 'en_detail',
-    },
-  ];
-});
-
-const language = computed(() => useCommon.language);
-const ISPC = computed(() => useCommon.ISPC);
-
-watch(
-  () => {
-    return locale.value;
-  },
-  (val) => {
-    useCommon.language = val;
-    webSiteTitle();
-  }
-);
-const webSiteTitle = () => {
-  document.title =
-    language.value === 'zh' ? 'openLooKeng 贡献看板' : 'openLooKeng DATASTAT';
-};
-webSiteTitle();
-
-// 判断移动端
-const isMobile = () => {
-  const device = ref(true);
-  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
-    device.value = false;
-    const lang = language.value === 'zh' ? '/zh/mobile' : '/en/mobile';
-    router.push(lang);
-  }
-  useCommon.setDevice(device.value);
-};
-isMobile();
-
-// 选择语言
-const options = ref([
-  { value: 'zh', label: '中文' },
-  { value: 'en', label: 'English' },
-]);
-const langAttr = ref<string>('中文');
-// 选择语言
-const handleCommand = (command: IObject): void => {
-  langAttr.value = command.label;
-  localStorage.setItem('lang', command.value);
-  locale.value = command.value;
-  const { href } = window.location;
-  const newHref = href.split('/').slice(-1).toString();
-  useCommon.setLanguage(command.value);
-  router.push(`/${command.value}/${newHref}`);
-};
-
-const goHome = () => {
-  const lang = language.value === 'zh' ? '/zh/overview' : '/en/overview';
-  router.push(lang);
-};
-
-const isAbout = ref(false);
-watch(
-  () => {
-    return route.path;
-  },
-  (path) => {
-    const p = path.split('/').slice(-1).toString();
-    isAbout.value = p === 'about' ? true : false;
-  }
-);
-</script>
-
-<template>
-  <div v-if="ISPC" class="app-header" :class="{ isabout: isAbout }">
-    <div class="wrap">
-      <div class="header-logo">
-        <img
-          class="logo"
-          alt="logo"
-          :src="language == 'zh' ? logoWhiteZh : logoWhite"
-          @click="goHome"
-        />
-        <span class="line"></span>
-        <a
-          target="_blank"
-          :href="
-            language == 'zh'
-              ? openCommunityInfo.link
-              : openCommunityInfo.link_en
-          "
-          ><img class="community-logo" :src="communityLogoWhite"
-        /></a>
-      </div>
-      <ONav :lang="language" :nav-items="navList"></ONav>
-      <div class="language">
-        <el-dropdown popper-class="language-change" @command="handleCommand">
-          <span class="el-dropdown-link">
-            {{ language == 'zh' ? '中文' : 'English' }}</span
-          >
-          <o-icon><chevron-down></chevron-down></o-icon>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                v-for="(item, key) in options"
-                :key="key"
-                :class="{ active: language === item.value }"
-                :command="item"
-                >{{ item.label }}</el-dropdown-item
-              >
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
-    </div>
-  </div>
-  <div v-else class="app-header-mo">
-    <app-header-mobile></app-header-mobile>
-  </div>
-</template>
-
-<style lang="scss">
-$color: #ffffff;
-.app-header {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  right: 0;
-  z-index: 99;
-  .wrap {
-    display: flex;
-    height: 80px;
-    align-items: center;
-  }
-  &.isabout {
-    background: #000;
-  }
-}
-
-.app-header-mo {
-  height: 48px;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  .menu-bar {
-    position: absolute;
-    left: 16px;
-    top: 12px;
-    &.white svg {
-      color: #fff;
-    }
-  }
-  :deep(.svg-icon) {
-    color: #fff;
-  }
-}
-
-.header-logo {
-  display: flex;
-  align-items: center;
-  .line {
-    height: 16px;
-    background: #fff;
-    margin: 0 16px;
-    display: block;
-    width: 1px;
-    opacity: 0.8;
-  }
-  .logo,
-  .community-logo {
-    height: 32px;
-  }
-}
-@media screen and (max-width: 700px) {
-  .header-logo .logo,
-  .header-logo .community-logo {
-    height: 24px;
-  }
-}
-.language {
-  width: 100px;
-  text-align: right;
-  .el-dropdown {
-    color: #fff;
-    cursor: pointer;
-    &-link {
-      color: #fff;
-    }
-
-    .o-icon {
-      margin-left: 5px;
-    }
-  }
-}
-.el-dropdown-menu__item {
-  justify-content: center;
-}
-</style>
diff --git a/packages/lookeng/src/components/AppHeaderMobile.vue b/packages/lookeng/src/components/AppHeaderMobile.vue
deleted file mode 100644
index 1400a23a47271b084a4bd19570b355770bd744c7..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/components/AppHeaderMobile.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script lang="ts" setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useCommonStore } from '@/stores/common';
-import { openCommunityInfo } from '@/api/index';
-import { useRoute, useRouter } from 'vue-router';
-
-import logoWhite from '@/assets/datastat.png';
-import logoWhiteZh from '@/assets/datastat-zh-mo.png';
-import logoBlack from '@/assets/datastat-black.png';
-import logoBlackZh from '@/assets/datastat-zh-black.png';
-import communityLogoSmall from '@/assets/openlookeng-small.png';
-import communityLogoSmallWhite from '@/assets/openlookeng-small-white.png';
-import menuIcons from '~icons/app/menu';
-import xIcons from '~icons/app/x';
-
-const useCommon = useCommonStore();
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-const navList = computed(() => {
-  return [
-    {
-      id: 'overview',
-      label: t('nav.overview'),
-      zh: 'zh_overview',
-      en: 'en_overview',
-    },
-    {
-      id: 'detail',
-      label: t('nav.contributors'),
-      zh: 'zh_detail',
-      en: 'en_detail',
-    },
-  ];
-});
-
-const drawer = ref(false);
-const menuIcon = ref('menu');
-const isblack = computed(() => (useCommon.swiperIndex < 2 ? true : false));
-const drawerBlack = computed(() => (isblack.value ? 'black' : ''));
-const navActive = ref('overview');
-watch(
-  () => {
-    return useCommon.swiperIndex;
-  },
-  (val) => {
-    navActive.value = val < 2 ? 'overview' : 'detail';
-  }
-);
-
-// 移动端菜单事件
-const changeMenu = () => {
-  if (!drawer.value) {
-    menuIcon.value = 'x';
-    drawer.value = true;
-  } else {
-    drawer.value = false;
-    menuIcon.value = 'menu';
-  }
-};
-// 关闭drawer
-const handleClose = () => {
-  changeMenu();
-};
-// mo导航事件
-const moNavClick = (id: string) => {
-  changeMenu();
-  setTimeout(() => {
-    if (id === 'overview') {
-      useCommon.moNav = 0;
-    } else {
-      useCommon.moNav = 2;
-    }
-  }, 200);
-};
-
-const language = computed(() => (useCommon.language === 'zh' ? false : true));
-const languageRadio = ref(language.value);
-const chaneLanguage = () => {
-  let lang = languageRadio.value ? 'en' : 'zh';
-  localStorage.setItem('lang', lang);
-  locale.value = lang;
-  const { href } = window.location;
-  const newHref = href.split('/').slice(-1).toString();
-  useCommon.setLanguage(lang);
-  router.push(`/${lang}/${newHref}`);
-  webSiteTitle();
-  drawer.value = false;
-};
-
-const webSiteTitle = () => {
-  document.title =
-    useCommon.language === 'zh'
-      ? 'openLooKeng 贡献看板'
-      : 'openLooKeng DATASTAT';
-};
-webSiteTitle();
-
-// 判断是否是关于我们
-const isAbout = ref(false);
-watch(
-  () => {
-    return route.path;
-  },
-  (path) => {
-    const p = path.split('/').slice(-1).toString();
-    isAbout.value = p === 'about' ? true : false;
-  }
-);
-// 点击logo回首页
-const goMobileHome = () => {
-  if (isAbout.value) {
-    const lang = useCommon.language === 'zh' ? '/zh/mobile' : '/en/mobile';
-    router.push(lang);
-    locale.value = useCommon.language;
-    window.location.reload();
-  }
-  useCommon.moNav = 0;
-  useCommon.swiperIndex = 0;
-};
-</script>
-
-<template>
-  <div
-    v-if="!isAbout"
-    class="menu-bar"
-    :class="{ white: isblack }"
-    @click="changeMenu"
-  >
-    <o-icon
-      ><menu-icons v-if="!drawer"></menu-icons><x-icons v-else></x-icons
-    ></o-icon>
-  </div>
-  <div class="header-logo">
-    <template v-if="isblack">
-      <img
-        class="logo"
-        alt="logo"
-        :src="!language ? logoWhiteZh : logoWhite"
-        @click="goMobileHome"
-      />
-      <span class="line"></span>
-      <a target="_blank" :href="openCommunityInfo.link"
-        ><img class="community-logo" :src="communityLogoSmallWhite"
-      /></a>
-    </template>
-    <template v-else>
-      <img
-        class="logo"
-        alt="logo"
-        :src="!language ? logoBlackZh : logoBlack"
-        @click="goMobileHome"
-      />
-      <span class="line" style="background: #000"></span>
-      <a target="_blank" :href="openCommunityInfo.link"
-        ><img class="community-logo" :src="communityLogoSmall"
-      /></a>
-    </template>
-  </div>
-  <el-drawer
-    v-model="drawer"
-    append-to-body
-    title=""
-    :modal-class="drawerBlack"
-    :size="'45%'"
-    :with-header="false"
-    direction="ltr"
-    :before-close="handleClose"
-  >
-    <div class="drawer-panel">
-      <div class="drawer-nav">
-        <a
-          v-for="item in navList"
-          :key="item.id"
-          class="link"
-          :class="{ active: navActive === item.id }"
-          href="javascript:;"
-          @click="moNavClick(item.id)"
-          >{{ item.label }}</a
-        >
-      </div>
-      <div class="action">
-        <el-switch
-          v-model="languageRadio"
-          size="large"
-          active-text="English"
-          inactive-text="中文"
-          active-color="#00685A"
-          @click="chaneLanguage"
-        />
-      </div>
-    </div>
-  </el-drawer>
-</template>
-
-<style lang="scss">
-.el-overlay {
-  top: 48px !important;
-  height: calc(100% - 48px) !important;
-  width: 100%;
-  &.black {
-    background-color: rgba(255, 255, 255, 0.5) !important;
-    .el-drawer {
-      background: #191e27;
-      &__body {
-        .drawer-nav {
-          .link {
-            color: #fff;
-          }
-          .active {
-            color: #fff;
-            background: #000;
-            &::after {
-              display: block;
-            }
-          }
-        }
-      }
-    }
-  }
-  .el-drawer {
-    background: #f5f6f8;
-    &__body {
-      padding: 0;
-      overflow: hidden;
-      .drawer-panel {
-        position: relative;
-        height: 100%;
-        .action {
-          position: absolute;
-          bottom: 20px;
-          left: 16px;
-        }
-      }
-      .drawer-nav {
-        .link {
-          display: block;
-          line-height: 48px;
-          padding: 0 16px;
-          color: #000;
-          font-size: 12px;
-          position: relative;
-          &::after {
-            width: 36px;
-            height: 2px;
-            background: #00685a;
-            position: absolute;
-            bottom: 0;
-            left: 16px;
-            content: '';
-            display: none;
-          }
-        }
-        .active {
-          color: #000;
-          background: #fff;
-          &::after {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/lookeng/src/components/TheForm.vue b/packages/lookeng/src/components/TheForm.vue
deleted file mode 100644
index 769a13a369b6c7f270b0e67dfc95356bd5b4c691..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/components/TheForm.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { toRefs, computed } from 'vue';
-import { useCompanyStore } from '@/stores/company';
-import { usePersonalStore } from '@/stores/personal';
-import { IObject } from 'shared/@types/interface';
-const useCompany = useCompanyStore();
-const usePersonal = usePersonalStore();
-const props = defineProps({
-  option: {
-    type: Object,
-    default() {
-      return null;
-    },
-  },
-  componentName: {
-    type: String,
-    default() {
-      return 'company';
-    },
-  },
-});
-const { option, componentName } = toRefs(props);
-
-const changeRadio = (item: IObject, list: IObject) => {
-  item.active = list.value;
-  emits('get-contribute-info', item);
-};
-const emits = defineEmits(['get-contribute-info']);
-
-// 动态计算参数赋值
-let form = computed(() => {
-  return componentName.value === 'company'
-    ? useCompany.companyForm
-    : usePersonal.personalForm;
-});
-</script>
-
-<template>
-  <el-form
-    ref="formRef"
-    class="theForm"
-    label-position="left"
-    :model="form"
-    label-width="110px"
-  >
-    <el-form-item v-for="item in option" :key="item.id" :label="item.label">
-      <el-radio-group v-model="form[item.id]">
-        <el-radio
-          v-for="list in item.list"
-          :key="list.id"
-          border
-          :label="list.value"
-          @change="changeRadio(item, list)"
-          >{{ list.label }}</el-radio
-        >
-      </el-radio-group>
-    </el-form-item>
-  </el-form>
-  <slot name="searchInput"></slot>
-</template>
-
-<style lang="scss" scoped>
-@import '@/shared/styles/style.scss';
-</style>
diff --git a/packages/lookeng/src/components/TheProgress.vue b/packages/lookeng/src/components/TheProgress.vue
deleted file mode 100644
index 24e3fc2b15802891133e4274229cdb84b07a66f8..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/components/TheProgress.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { usePersonalStore } from '@/stores/personal';
-const props = defineProps({
-  item: {
-    type: Number,
-    default() {
-      return 0;
-    },
-  },
-});
-
-const usePersonal = usePersonalStore();
-const progressColor = ref('#00685A');
-const progressFormat = (item: number) => {
-  return (100 / usePersonal.personalMaxNum) * item;
-};
-</script>
-
-<template>
-  <el-progress
-    :show-text="false"
-    :stroke-width="8"
-    :color="progressColor"
-    :percentage="progressFormat(props.item)"
-  />
-</template>
-
-<style lang="scss" scoped>
-.el-progress {
-  width: 240px;
-  margin-left: 10px;
-  :deep(.el-progress-bar__outer) {
-    background: none;
-  }
-}
-</style>
diff --git a/packages/lookeng/src/i18n/index.ts b/packages/lookeng/src/i18n/index.ts
deleted file mode 100644
index 12c4b8c98034058a866b0c5dc924471cb4c320eb..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/i18n/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createI18n } from 'vue-i18n';
-
-import zhLanguage from './lang/zhLanguage';
-import enLanguage from './lang/enLanguage';
-
-const messages = {
-  zh: {
-    ...zhLanguage,
-  },
-  en: {
-    ...enLanguage,
-  },
-};
-const setI18nLang = () => {
-  const lang = localStorage.getItem('lang');
-  if (lang === null) {
-    localStorage.setItem('lang', 'zh');
-    return 'zh';
-  } else if (lang === 'en') {
-    return 'en';
-  } else if (lang === 'zh') {
-    return 'zh';
-  }
-};
-const i18n = createI18n({
-  locale: setI18nLang(),
-  allowComposition: true,
-  messages,
-});
-export default i18n;
diff --git a/packages/lookeng/src/i18n/lang/enLanguage.ts b/packages/lookeng/src/i18n/lang/enLanguage.ts
deleted file mode 100644
index c31029f2c289627d0f393294eec6df374d065cad..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/i18n/lang/enLanguage.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-  languageName: 'English',
-  nav: {
-    overview: 'Overview',
-    contributors: 'Detail',
-  },
-  home: {
-    moreData: 'Explore more details',
-    user: 'User',
-    contributors: 'Contributor',
-    partners: 'Organization Member',
-    prs: 'PR',
-    issues: 'Issue',
-    comments: 'Comment',
-    sigs: 'SIG',
-    repos: 'Repository',
-  },
-  from: {
-    type: 'Metric',
-    timeRange: 'Time Range',
-    lastonemonth: 'Last Month',
-    lasthalfyear: 'Last 6 Months',
-    lastoneyear: 'Last Year',
-    all: 'All',
-    displayRange: 'Display Range',
-    pleasePartner: 'Please enter an organization name',
-  },
-  contributionsTitle: 'Community Contribution data',
-  userContributor: 'Contribution by Individuals',
-  companyContributor: 'Contribution by Organizations',
-  ranking: 'Rank',
-  backVitality: 'Back to Overview',
-  searchTips:
-    'The organization you are  searching for has no contributions under the current search criteria. Try  different search criteria.   ',
-  footer: {
-    about: 'About Data',
-    privacy: 'Privacy Policy',
-    privacyLink: 'https://openlookeng.io/privacypolicy.html',
-    legal: 'Legal Notice',
-    legalLink: 'https://openlookeng.io/legalnotice.html',
-    copyright: 'Copyright © {year} openEuler. All rights reserved.',
-  },
-  about: {
-    explain: 'Data Indicator Interpretation ',
-    definition: 'Data definition ',
-    name: 'Name',
-  },
-};
diff --git a/packages/lookeng/src/i18n/lang/zhLanguage.ts b/packages/lookeng/src/i18n/lang/zhLanguage.ts
deleted file mode 100644
index a2f940dbf781fa61709a1f8c1785b85fd17dba92..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/i18n/lang/zhLanguage.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export default {
-  languageName: '中文',
-  nav: {
-    overview: '数据总览',
-    contributors: '社区贡献',
-  },
-  home: {
-    moreData: '更多贡献数据',
-    user: '社区用户 User ',
-    contributors: '贡献者 Contributor',
-    partners: '单位会员 Organization Member',
-    prs: '合并请求 PR',
-    issues: '需求&问题 Issue',
-    comments: '评审 Comment',
-    sigs: '特别兴趣小组 SIG',
-    repos: '代码仓库 Repository',
-  },
-  from: {
-    type: '度量指标',
-    timeRange: '统计周期',
-    lastonemonth: '最近一个月内',
-    lasthalfyear: '最近半年内',
-    lastoneyear: '最近一年内',
-    displayRange: '显示范围',
-    pleasePartner: '请输入单位名称搜索',
-    all: '全部',
-  },
-  contributionsTitle: '社区贡献数据',
-  userContributor: '个人会员贡献',
-  companyContributor: '单位会员贡献',
-  backVitality: '回到数据总览',
-  ranking: '排名',
-  footer: {
-    about: '关于数据',
-    privacy: '隐私政策',
-    privacyLink: 'https://openlookeng.io/zh-cn/privacypolicy.html',
-    legal: '法律声明',
-    legalLink: 'https://openlookeng.io/zh-cn/legalnotice.html',
-    copyright: '版权所有 © {year} openLooKeng 保留一切权利',
-  },
-  about: {
-    explain: '数据指标解释 ',
-    definition: '数据定义  ',
-    name: '指标名称',
-  },
-};
diff --git a/packages/lookeng/src/main.ts b/packages/lookeng/src/main.ts
deleted file mode 100644
index 86ccef4886b19a2c54418b740822150e710fd288..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/main.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import 'shared/styles/base.scss';
-import '@/shared/styles/style.scss';
-
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import App from './App.vue';
-import { router } from './router';
-import OIcon from 'shared/components/OIcon.vue';
-
-
-// 国际化
-import i18n from './i18n';
-const app = createApp(App);
-app.use(i18n);
-
-app.use(router);
-app.use(createPinia());
-app.component('OIcon', OIcon);
-
-app.mount('#app');
-
-router.afterEach(() => {
-  window.scrollTo(0, 0);
-});
diff --git a/packages/lookeng/src/router.ts b/packages/lookeng/src/router.ts
deleted file mode 100644
index 1487e5912b3bfcc4d542b24932d4b5211e1db600..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/router.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-
-export const routes = [
-  { path: '/', redirect: '/zh/overview' },
-  // zh
-  {
-    path: '/zh',
-    redirect: '/zh/overview',
-  },
-  {
-    path: '/zh/overview',
-    name: 'zh_overview',
-    component: () => {
-      return import('@/views/overview/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'zh');
-    },
-    meta: { transition: 'slide-down' },
-  },
-  {
-    path: '/zh/detail',
-    name: 'zh_detail',
-    component: () => {
-      return import('@/views/contributors/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'zh');
-    },
-    meta: { transition: 'slide-up' },
-  },
-  {
-    path: '/zh/mobile',
-    name: 'zh_mobile',
-    component: () => {
-      return import('@/views/mobile/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'zh');
-    },
-  },
-  {
-    path: '/zh/about',
-    name: 'zh_about',
-    component: () => {
-      return import('@/views/about/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'zh');
-    },
-  },
-  // en
-  {
-    path: '/en',
-    redirect: '/en/overview',
-  },
-  {
-    path: '/en/overview',
-    name: 'en_overview',
-    component: () => {
-      return import('@/views/overview/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'en');
-    },
-    meta: { transition: 'slide-down' },
-  },
-  {
-    path: '/en/detail',
-    name: 'en_detail',
-    component: () => {
-      return import('@/views/contributors/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'en');
-    },
-    meta: { transition: 'slide-up' },
-  },
-  {
-    path: '/en/mobile',
-    name: 'en_mobile',
-    component: () => {
-      return import('@/views/mobile/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'en');
-    },
-  },
-  {
-    path: '/en/about',
-    name: 'en_about',
-    component: () => {
-      return import('@/views/about/Index.vue');
-    },
-    beforeEnter: () => {
-      localStorage.setItem('lang', 'en');
-    },
-  },
-];
-
-export const router = createRouter({
-  history: createWebHistory(),
-  routes,
-});
diff --git a/packages/lookeng/src/shared/styles/style.scss b/packages/lookeng/src/shared/styles/style.scss
deleted file mode 100644
index 10a6ea544fe8f328de56586a26b7a5efaca7198b..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/shared/styles/style.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-$color: #00685A;
-body{background: #F5F6F8;}
-:deep(.el-form-item__label) {
-  color: #000;
-  line-height: 28px;
-}
-
-.el-radio {
-  border-radius: 0;
-  margin-right: 12px;
-  border: 1px solid transparent;
-  height: 28px;
-  padding: 0 12px;
-  :deep(.el-radio__label) {
-    color: #555;
-    font-weight: normal;
-    padding: 0;
-  }
-  &.is-checked:deep(.el-radio__label) {
-    color: $color;
-  }
-  &.is-checked {
-    border-color:  $color;
-  }
-
-  :deep(.el-radio__input) {
-    display: none;
-  }
-}
-.el-switch {
-  &__label {
-    color:  #666 !important;
-  }
-  &__label.is-active {
-    color:  $color !important;
-  }
- 
-}
-.el-form {
-  &-item {
-    border-bottom: 1px solid #dfe1e8;
-    padding-bottom: 12px;
-    &:last-child {
-      border-bottom: 0;
-    }
-    :deep(.el-input__inner) {
-      border-radius: 0;
-    }
-  }
-}
-
-.el-table {
-  :deep(.el-table__cell) {
-    height: 56px;
-    font-size: 14px;
-    color: #555;
-    .cell{
-      padding: 0 5px;
-    }
-  }
-  :deep(th.el-table__cell) {
-    background: #e5e8f0;
-    font-size: 16px;
-    color: #000;
-    font-weight: normal;
-    text-transform: capitalize;
-  }
-  :deep(th.type-label .cell) {
-    padding-left: 62px;
-  }
-}
diff --git a/packages/lookeng/src/stores/common.ts b/packages/lookeng/src/stores/common.ts
deleted file mode 100644
index cf81eb1564a3e128a7a615243614d574c546d077..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/stores/common.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { defineStore } from 'pinia';
-import { queryAll } from 'shared/api/index';
-import { IObject } from 'shared/@types/interface';
-import { getNowFormatDate } from 'shared/utils/helper';
-
-interface stateTypes {
-  language: string;
-  ISPC: boolean;
-  swiperIndex: number;
-  lang: string;
-  time: string;
-  moNav: number;
-  allData: IObject;
-}
-export const useCommonStore = defineStore('common', {
-  state: (): stateTypes => ({
-    language: localStorage.getItem('lang') || 'zh',
-    // 判断是否是PC
-    ISPC: false,
-    // 移动端滑动页数
-    swiperIndex: 0,
-    moNav: 0,
-    // 语言
-    lang: '',
-    // 时间
-    time: '--',
-    allData: [],
-  }),
-  actions: {
-    setLanguage(language: string) {
-      this.language = language;
-    },
-    setDevice(device: boolean) {
-      this.ISPC = device;
-    },
-    async getAllData() {
-      try {
-        const res = await queryAll('openlookeng');
-        if (res.code === 200) {
-          this.allData = res.data;
-          this.time = getNowFormatDate();
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-});
diff --git a/packages/lookeng/src/stores/company.ts b/packages/lookeng/src/stores/company.ts
deleted file mode 100644
index 17352f3ecb351cd1664cf6138e62805dc089d785..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/stores/company.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { defineStore } from 'pinia';
-import { openCommunityInfo } from '@/api/index';
-import { sortExp } from 'shared/utils/helper';
-import { queryCompanyContribute } from 'shared/api/index';
-import { IObject } from 'shared/@types/interface';
-import { ceil } from 'lodash-es';
-
-interface layoutStateTypes {
-  rawData: IObject;
-  companyData: IObject;
-  ranking: number;
-  totalLength: number;
-  total: number;
-  companyMaxNum: number;
-  companyForm: IObject;
-}
-
-export const useCompanyStore = defineStore('company', {
-  state: (): layoutStateTypes => ({
-    rawData: [],
-    companyData: [],
-    // 显示排行数
-    ranking: 10,
-    // 总长度
-    totalLength: 0,
-    // 总和 计算百分比 只有gauss需要
-    total: 0,
-    // 获取最大值
-    companyMaxNum: 0,
-    // 筛选参数
-    companyForm: {
-      contributeType: 'PR',
-      timeRange: 'lastonemonth',
-      displayRange: '10',
-    },
-  }),
-  actions: {
-    async getCompanyData() {
-      const params = {
-        community: openCommunityInfo.name,
-        contributeType: this.companyForm.contributeType,
-        timeRange: this.companyForm.timeRange,
-      };
-      try {
-        const res = await queryCompanyContribute(params);
-        if (res.code === 200) {
-          const { data } = res;
-          const userList = data.sort(sortExp('contribute', false));
-          this.companyMaxNum = ceil(userList[0].contribute, -2);
-          this.rawData = data;
-
-          // 筛选
-          const newData = data.filter((i: IObject) => i.contribute > 0);
-          const initVal = 0;
-          this.total = newData.reduce((acc: number, cur: IObject) => {
-            return acc + cur.contribute;
-          }, initVal);
-          this.totalLength = newData.length;
-          this.companyData = newData.slice(0, this.ranking);
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-  getters: {
-    rankingFilter: (state) => {
-      return state.ranking > 2
-        ? state.companyData.slice(0, state.ranking)
-        : state.companyData;
-    },
-  },
-});
diff --git a/packages/lookeng/src/stores/personal.ts b/packages/lookeng/src/stores/personal.ts
deleted file mode 100644
index 1053d791250ae4019e1521b529cba3deb156193e..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/stores/personal.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { defineStore } from 'pinia';
-import { openCommunityInfo } from '@/api/index';
-import { queryUserContribute } from 'shared/api/index';
-import { sortExp } from 'shared/utils/helper';
-interface Form {
-  contributeType: string;
-  timeRange: string;
-}
-export const usePersonalStore = defineStore('personal', {
-  state: () => ({
-    personalData: [],
-    personalMaxNum: 0, // 个人数据最大参数
-    // 筛选参数
-    personalForm: {
-      contributeType: 'PR',
-      timeRange: 'lastonemonth',
-    } as Form,
-  }),
-  actions: {
-    async getPersonalData() {
-      const params = {
-        community: openCommunityInfo.name,
-        contributeType: this.personalForm.contributeType,
-        timeRange: this.personalForm.timeRange,
-      };
-      try {
-        const res = await queryUserContribute(params);
-        if (res.code === 200) {
-          const { data } = res;
-          const userList = data.sort(sortExp('contribute', false));
-          this.personalData = userList.slice(0, 20);
-          this.personalMaxNum = userList[0].contribute;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-  getters: {
-    // top10
-    hightRanking: (state) => {
-      return state.personalData.slice(0, 10);
-    },
-    // top10-20
-    lowRanking: (state) => {
-      return state.personalData.slice(10, 20);
-    },
-  },
-});
diff --git a/packages/lookeng/src/views/about/Index.vue b/packages/lookeng/src/views/about/Index.vue
deleted file mode 100644
index 42843662c795599a609e526f3c86d81e0a084a91..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/views/about/Index.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import AppFooter from '@/components/AppFooter.vue';
-import { useCommonStore } from '@/stores/common';
-import { useI18n } from 'vue-i18n';
-
-const { t, locale } = useI18n();
-const useCommon = useCommonStore();
-const language = computed(() => useCommon.language);
-
-locale.value = localStorage.getItem('lang') || 'zh';
-
-const dataList = [
-  { label: '社区用户 User', value: '使用开源社区软件包的用户（下载用户）' },
-  {
-    label: '贡献者 Contributor',
-    value:
-      '参与了社区开源项目的开发者。包括在开源社区代码仓库参与如下贡献的开发者：star、watch、fork、issue提交、代码提交、评论等贡献',
-  },
-  {
-    label: '单位会员 Organization Member',
-    value: '包括签署了CLA的组织等',
-  },
-  {
-    label: '合并请求 PR',
-    value:
-      '合并请求（Pull Request），是指提交一次代码 ，包括因新的需求编写的新代码或者程序运行异常而进行的修复代码，即通常意义的Bug修复或者特性开发',
-  },
-  {
-    label: '需求&问题 Issue',
-    value:
-      '指对现有仓库提交的议题（Issue）。对代码仓库提交的问题，或者是一个新的任务，新的功能特性需求',
-  },
-  {
-    label: '评审 Comment',
-    value:
-      '是指提交的Issue、PR的评论、也就是评审当前PR中的代码，或者对现有的Issue进行回复或者评论',
-  },
-  {
-    label: 'CLA',
-    value:
-      'Contributor License Agreement, 贡献者许可协议。开源社区需要将所有参与开发的开发者进行正式的认证',
-  },
-];
-const dataListEN = [
-  {
-    label: 'User',
-    value:
-      'A user who uses (downloads) the software packages of the open source community',
-  },
-  {
-    label: 'Contributor',
-    value:
-      'A developer who participates in open source projects in the community. Contributors include developers who star, watch, or fork the community Repository, submit issue or comment, code contributors',
-  },
-  {
-    label: 'Organization Member',
-    value: 'An organization that has signed the CLA, etc',
-  },
-  {
-    label: 'PR (Pull Request)',
-    value:
-      'A pull request (PR) is a submission of code, including new code written for new requirements or code for bug fixes or feature development',
-  },
-  {
-    label: 'Issue',
-    value:
-      'An issue is an inquiry, task, or feature request submitted to a code repository',
-  },
-  {
-    label: 'Comment',
-    value:
-      'A comment can be submitted to an issue or PR to reply to or comment on the issue or to review the code in the PR',
-  },
-  {
-    label: 'CLA',
-    value:
-      'Contributor License Agreement. An open source community needs to authenticate all developers who participate in the development',
-  },
-];
-</script>
-
-<template>
-  <div class="about-panel">
-    <div class="about-data">
-      <h1>{{ t('footer.about') }}</h1>
-      <div class="about-data-content">
-        <p class="title">1. {{ t('about.explain') }}</p>
-        <ul class="about-list">
-          <li class="head">
-            <span class="lable"> {{ t('about.name') }}</span>
-            <div class="value">{{ t('about.definition') }}</div>
-          </li>
-          <li
-            v-for="(item, index) in language === 'zh' ? dataList : dataListEN"
-            :key="index"
-          >
-            <span class="lable">{{ item.label }}</span>
-            <div class="value">{{ item.value }}</div>
-          </li>
-        </ul>
-        <div v-if="language === 'zh'" class="info">
-          <p class="title">2. 不承诺责任声明</p>
-          <p class="text">
-            openLooKeng网站所载的材料和信息，包括但不限于文本、图片、数据、观点、建议、网页或链接，openLooKeng社区力图在网站上提供准确的材料和信息，但openLooKeng社区并不保证这些材料和内容的准确、完整、充分和可靠性，并且明确声明不对这些材料和内容的错误或遗漏承担责任，也不对这些材料和内容作出任何明示或默示的、包括但不限于有关所有权担保、没有侵犯第三方权利、质量和没有计算机病毒的保证。
-            openLooKeng社区可以在没有任何通知或提示的情况下随时对openLooKeng网站上的内容进行修改，为了得到最新版本的信息，请您定时访问openLooKeng网站。openLooKeng社区在openLooKeng网站上所提及的非openLooKeng产品或服务仅仅是为了提供相关信息，并不构成对这些产品、服务的认可或推荐。openLooKeng社区并不就网址上提供的任何产品、服务或信息做出任何声明、保证或认可。
-            鉴于<a href="https://openlookeng.io">https://openlookeng.io</a
-            >提供的部分服务属于电子公告牌（BBS）服务，<a
-              href="https://openlookeng.io"
-              >https://openlookeng.io</a
-            >上关于其会员或其会员发布的相关信息（包括但不限于用户名称、公司名称、
-            联系人及联络信息，相关图片、视讯等）的信息均是由会员自行提供，会员依法应对其提供的任何信息承担全部责任。
-            任何企业或个人认为<a href="https://openlookeng.io"
-              >https://openlookeng.io</a
-            >网页内容（包括但不限于<a href="https://openlookeng.io"
-              >https://openlookeng.io</a
-            >会员发布的商品信息）可能涉嫌侵犯其合法权益，应该及时向openLooKeng社区<a
-              href="mailto:contact@openlookeng.io"
-              >contact@openlookeng.io</a
-            >提出书面权利通知，并提供身份证明、权属证明、具体链接（URL）及详细侵权情况证明。openLooKeng社区在收到上述法律文件后，将会依法尽快移除相关涉嫌侵权的内容。
-          </p>
-        </div>
-        <div v-else class="info">
-          <p class="title">2. General Disclaimer</p>
-          <p class="text">
-            Although openLooKeng community has attempted to provide accurate
-            information on this website, including but not limited to text,
-            pictures, data, opinions, advice, web pages, and links, openLooKeng
-            community assumes no responsibility for the accuracy, completeness,
-            adequacy, and reliability of such information, or incorrectness or
-            loss of such information. openLooKeng community disclaims all
-            warranties, expressed or implied, including, without limitation,
-            those of ownership, proprietorship, quality, and the absence of
-            viruses. openLooKeng community may change the information on this
-            website at any time without notice. To obtain the latest version
-            information, you shall periodically visit this website. The mention
-            of non- openLooKeng community products or services is for
-            information purposes only and constitutes neither an endorsement nor
-            a recommendation. openLooKeng community does not provide any
-            statement, guarantee or authorization for any of the products or
-            services appearing on the website. The BBS service on this website,
-            including but not limited to the user names, company names,
-            contacts, pictures, and other information, is provided by the
-            community members, who shall assume full responsibility for such
-            information. Any entity or individual who suspects that the content
-            on this website (including but not limited to the commodity
-            information posted by community members on this website) infringes
-            upon legal rights or interests shall notify openLooKeng community
-            <a href="mailto:contact@openlookeng.io">contact@openlookeng.io</a>
-            in written form and provide the identity, ownership certification,
-            associated link (URL), and proof of infringement. openLooKeng
-            community will remove the content related to the alleged
-            infringement by law upon receiving the foregoing legal documents.
-          </p>
-        </div>
-      </div>
-    </div>
-    <footer>
-      <app-footer></app-footer>
-    </footer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-a {
-  color: #00685a;
-}
-.about-panel {
-  padding: 80px 0 0;
-  background: no-repeat top center;
-  background: #f5f6f8;
-}
-.about-data {
-  width: 880px;
-  margin: 0px auto 60px;
-  h1 {
-    font-size: 36px;
-    font-weight: 300;
-    color: #000;
-    line-height: 48px;
-    text-align: center;
-    margin-top: 40px;
-  }
-  &-content {
-    margin-top: 40px;
-    .title {
-      font-size: 24px;
-      font-weight: 500;
-      color: #000000;
-      line-height: 32px;
-      margin-bottom: 24px;
-    }
-    .info {
-      .text {
-        margin-bottom: 12px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #000000;
-        line-height: 22px;
-        text-align: justify;
-      }
-    }
-
-    .about-list {
-      margin-bottom: 40px;
-      list-style: none;
-      background: #fff;
-      .head {
-        background: #e5e8f0;
-        font-size: 16px;
-        color: #000;
-        font-weight: normal;
-        text-transform: capitalize;
-        line-height: 56px;
-        padding: 0 40px;
-      }
-      li {
-        line-height: 22px;
-        font-size: 14px;
-        color: #555;
-        padding: 10px 40px;
-        display: grid;
-        min-height: 56px;
-        grid-template-columns: 220px auto;
-        border-bottom: 1px solid #e5e5e5;
-        align-items: center;
-        .value {
-          text-align: justify;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/lookeng/src/views/contributors/Index.vue b/packages/lookeng/src/views/contributors/Index.vue
deleted file mode 100644
index 8644c9fcafe5507b8968e80cec0f51421a4331d4..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/views/contributors/Index.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { usePersonalStore } from '@/stores/personal';
-import { useCommonStore } from '@/stores/common';
-import OBanner from 'shared/components/OBanner.vue';
-import TheProgress from '@/components/TheProgress.vue';
-import AppFooter from '@/components/AppFooter.vue';
-import TheForm from '@/components/TheForm.vue';
-import useScroll from 'shared/hooks/useScroll';
-
-import titleBg from '@/assets/title-bg.png';
-import chevronsUp from '~icons/app/chevrons-up';
-
-const { t, locale } = useI18n();
-const usePersonal = usePersonalStore();
-const router = useRouter();
-const useCommon = useCommonStore();
-
-locale.value = localStorage.getItem('lang') || 'zh';
-
-const formOption = computed(() => {
-  return [
-    {
-      label: t('from.type'),
-      id: 'contributeType',
-      active: 'pr',
-      list: [
-        { label: t('home.prs'), value: 'PR' },
-        { label: t('home.issues'), value: 'Issue' },
-        { label: t('home.comments'), value: 'Comment' },
-      ],
-    },
-    {
-      label: t('from.timeRange'),
-      id: 'timeRange',
-      active: 'mother',
-      list: [
-        { label: t('from.lastonemonth'), value: 'lastonemonth' },
-        { label: t('from.lasthalfyear'), value: 'lasthalfyear' },
-        { label: t('from.lastoneyear'), value: 'lastoneyear' },
-        { label: t('from.all'), value: 'all' },
-      ],
-    },
-  ];
-});
-
-// theform组件调用
-const componentName = 'personal';
-const loading = ref(true);
-
-const getContributeInfo = () => {
-  usePersonal.getPersonalData();
-};
-onMounted(() => {
-  usePersonal.getPersonalData();
-  loading.value = false;
-});
-
-const hightRanking = computed(() => usePersonal.hightRanking);
-const lowRanking = computed(() => usePersonal.lowRanking);
-
-const typeLable = ref('');
-const switchType = () => {
-  switch (usePersonal.personalForm.contributeType) {
-    case 'PR':
-      typeLable.value = t('home.prs');
-      break;
-    case 'Issue':
-      typeLable.value = t('home.issues');
-      break;
-    case 'Comment':
-      typeLable.value = t('home.comments');
-      break;
-  }
-};
-switchType();
-watch(
-  () => usePersonal.personalForm.contributeType,
-  () => {
-    switchType();
-  }
-);
-
-// TOP20 index修改
-const indexMethod = (index: number) => {
-  return index + 11;
-};
-
-const { isScrollUp } = useScroll('up');
-watch(
-  () => isScrollUp.value,
-  () => {
-    if (isScrollUp.value) {
-      const lang =
-        useCommon.language === 'zh' ? '/zh/overview' : '/en/overview';
-      router.push(lang);
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="container">
-    <o-banner :style="{ backgroundImage: 'url(' + titleBg + ')' }">
-      <div class="banner-title">
-        <o-icon class="icon"><chevrons-up></chevrons-up></o-icon>
-        <h3 class="title">{{ t('backVitality') }}</h3>
-      </div>
-    </o-banner>
-    <div class="area">
-      <div class="wrap">
-        <div class="contributors-panel">
-          <h3 class="title">{{ t('userContributor') }}</h3>
-          <the-form
-            :option="formOption"
-            :component-name="componentName"
-            @get-contribute-info="getContributeInfo"
-          ></the-form>
-
-          <div class="ranking-list">
-            <div class="ranking-list-item">
-              <p class="caption">Top 1-10</p>
-              <el-table
-                v-loading="loading"
-                :data="hightRanking"
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index"
-                  align="center"
-                  :label="t('ranking')"
-                  width="100"
-                />
-                <el-table-column
-                  prop="gitee_id"
-                  align="left"
-                  label="Gitee ID"
-                  show-overflow-tooltip
-                  width="180"
-                />
-                <el-table-column
-                  align="left"
-                  class-name="type-label"
-                  :label="typeLable"
-                >
-                  <template #default="scope">
-                    <div class="box">
-                      <span class="num">{{ scope.row.contribute }}</span>
-                      <the-progress :item="scope.row.contribute"></the-progress>
-                    </div>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-            <div class="ranking-list-item">
-              <p class="caption">Top 11-20</p>
-              <el-table
-                v-loading="loading"
-                :data="lowRanking"
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index"
-                  :index="indexMethod"
-                  align="center"
-                  :label="t('ranking')"
-                  width="100"
-                />
-                <el-table-column
-                  prop="gitee_id"
-                  align="left"
-                  show-overflow-tooltip
-                  label="Gitee ID"
-                  width="180"
-                />
-                <el-table-column
-                  align="left"
-                  class-name="type-label"
-                  :label="typeLable"
-                >
-                  <template #default="scope">
-                    <div class="box">
-                      <span class="num">{{ scope.row.contribute }}</span>
-                      <the-progress :item="scope.row.contribute"></the-progress>
-                    </div>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <app-footer></app-footer>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/shared/styles/style.scss';
-.o-banner {
-  height: 224px;
-  padding-top: 80px;
-}
-.contributors-panel {
-  padding: 24px;
-  background: #fff;
-  margin-top: 60px;
-  .title {
-    font-size: 24px;
-    color: #000;
-    font-weight: normal;
-    margin-bottom: 20px;
-  }
-}
-.ranking-list {
-  display: grid;
-  grid-template-columns: 46% 46%;
-  grid-column-gap: 8%;
-  .caption {
-    font-size: 16px;
-    color: #000;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-  .box {
-    display: flex;
-    .num {
-      width: 50px;
-      text-align: right;
-    }
-  }
-}
-.banner-title {
-  height: 144px;
-  text-align: center;
-  padding-top: 80px;
-  .title {
-    font-size: 16px;
-    font-weight: 100;
-    color: #fff;
-    line-height: 24px;
-  }
-  .o-icon {
-    color: #fff;
-    animation: chevronsUp 2s infinite;
-    display: inline-block;
-  }
-}
-
-.search404 {
-  text-align: center;
-  margin-bottom: 40px;
-  .cover {
-    width: 360px;
-    margin-bottom: 15px;
-  }
-  .text {
-    font-size: 14px;
-    color: #555;
-  }
-}
-</style>
diff --git a/packages/lookeng/src/views/mobile/Index.vue b/packages/lookeng/src/views/mobile/Index.vue
deleted file mode 100644
index 9da51c636a05b954c4af2ad389ed02f0391a6916..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/views/mobile/Index.vue
+++ /dev/null
@@ -1,530 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, computed, nextTick } from 'vue';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Pagination } from 'swiper';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import { useI18n } from 'vue-i18n';
-import { openCommunityInfo } from '@/api/index';
-import { usePersonalStore } from '@/stores/personal';
-import { useCommonStore } from '@/stores/common';
-import TheForm from '@/components/TheForm.vue';
-import {
-  formatNumber,
-  getYearByOffset,
-  toThousands,
-} from 'shared/utils/helper';
-
-import logo from '@/assets/datastat-black.png';
-import logoZh from '@/assets/datastat-zh-black.png';
-import communityLogo from '@/assets/openlookeng.png';
-import bg_mo from '@/assets/bg_mo.png';
-
-const usePersonal = usePersonalStore();
-const useCommon = useCommonStore();
-const { t, locale } = useI18n();
-
-const swiperRef: any = ref(null);
-const onSwiper = (swiper: any) => {
-  swiperRef.value = swiper;
-};
-const onSlideChange = (swiper: any) => {
-  useCommon.swiperIndex = swiper.activeIndex;
-  useCommon.moNav = swiper.activeIndex;
-};
-// 监听导航跳转
-watch(
-  () => useCommon.moNav,
-  () => {
-    swiperRef.value.slideTo(useCommon.moNav);
-  }
-);
-
-const formOption = computed(() => {
-  return [
-    {
-      label: t('from.type'),
-      id: 'contributeType',
-      active: 'pr',
-      list: [
-        { label: t('home.prs'), value: 'PR' },
-        { label: t('home.issues'), value: 'Issue' },
-        { label: t('home.comments'), value: 'Comment' },
-      ],
-    },
-    {
-      label: t('from.timeRange'),
-      id: 'timeRange',
-      active: 'mother',
-      list: [
-        { label: t('from.lastonemonth'), value: 'lastonemonth' },
-        { label: t('from.lasthalfyear'), value: 'lasthalfyear' },
-        { label: t('from.lastoneyear'), value: 'lastoneyear' },
-        { label: t('from.all'), value: 'all' },
-      ],
-    },
-  ];
-});
-// theform组件调用
-const componentName = 'personal';
-const getContributeInfo = () => {
-  usePersonal.getPersonalData();
-};
-const loading = ref(true);
-
-const progressColor = ref('#00685A');
-const personalFormat = (item: number) => {
-  return (100 / usePersonal.personalMaxNum) * item;
-};
-onMounted(() => {
-  usePersonal.getPersonalData();
-  useCommon.getAllData();
-  loading.value = false;
-});
-
-// footerinfo
-
-const modules = [Pagination];
-const isblack = computed(() => (useCommon.swiperIndex < 2 ? true : false));
-
-locale.value = localStorage.getItem('lang') || 'zh';
-
-const contributeType = ref('');
-const switchType = () => {
-  switch (usePersonal.personalForm.contributeType) {
-    case 'PR':
-      contributeType.value = t('home.prs');
-      break;
-    case 'Issue':
-      contributeType.value = t('home.issues');
-      break;
-    case 'Comment':
-      contributeType.value = t('home.comments');
-      break;
-  }
-};
-switchType();
-watch(
-  () => usePersonal.personalForm.contributeType,
-  () => {
-    switchType();
-  }
-);
-
-watch(
-  () => locale.value,
-  () => {
-    usePersonal.getPersonalData();
-    useCommon.getAllData();
-    switchType();
-  }
-);
-
-// 滚动事件
-const isScroll = ref(false);
-const slideRef = ref<any>(null);
-onMounted(() => {
-  slideRef.value?.addEventListener(
-    'scroll',
-    () => {
-      nextTick(() => {
-        isScroll.value = slideRef.value?.scrollTop > 200 ? true : false;
-      });
-    },
-    true
-  );
-});
-
-const backtop = () => {
-  slideRef.value.scrollTop = 0;
-};
-</script>
-<template>
-  <!-- :direction="'vertical'" -->
-  <swiper
-    :class="{ black: isblack }"
-    :pagination="true"
-    :modules="modules"
-    @swiper="onSwiper"
-    @slide-change="onSlideChange"
-  >
-    <swiper-slide
-      class="slide-page1"
-      :style="'background-image:url(' + bg_mo + ')'"
-    >
-      <div class="overview-page">
-        <p class="overview-page-item">
-          {{ t('home.user') }}
-          <span class="num">{{ toThousands(useCommon.allData.users) }}</span>
-        </p>
-        <p class="overview-page-item">
-          {{ t('home.contributors') }}
-          <span class="num">{{
-            toThousands(useCommon.allData.contributors)
-          }}</span>
-        </p>
-        <p class="overview-page-item">
-          {{ t('home.partners') }}
-          <span class="num">{{ toThousands(useCommon.allData.partners) }}</span>
-        </p>
-      </div>
-
-      <p class="time">{{ useCommon.time }}</p>
-    </swiper-slide>
-    <swiper-slide
-      class="slide-page2"
-      :style="'background-image:url(' + bg_mo + ')'"
-    >
-      <div class="overview-page2">
-        <p class="overview-page2-item">
-          {{ t('home.prs') }}
-          <span class="num">{{ formatNumber(useCommon.allData.prs) }}</span>
-        </p>
-        <p class="overview-page2-item">
-          {{ t('home.issues') }}
-          <span class="num">{{ formatNumber(useCommon.allData.issues) }}</span>
-        </p>
-        <p class="overview-page2-item">
-          {{ t('home.comments') }}
-          <span class="num">{{
-            formatNumber(useCommon.allData.comments)
-          }}</span>
-        </p>
-      </div>
-
-      <p class="time">{{ useCommon.time }}</p>
-    </swiper-slide>
-
-    <swiper-slide class="slide-page3">
-      <div ref="slideRef" class="slide-panel">
-        <div v-if="isScroll" class="backtop" @click="backtop">
-          {{ useCommon.language === 'zh' ? '点击回到顶部' : 'Back to Top' }}
-        </div>
-        <h3 class="title">{{ t('userContributor') }}</h3>
-        <div class="slide-panel-content">
-          <the-form
-            :option="formOption"
-            :component-name="componentName"
-            @get-contribute-info="getContributeInfo"
-          ></the-form>
-          <el-table
-            v-loading="loading"
-            :data="usePersonal.personalData"
-            style="width: 100%"
-          >
-            <el-table-column
-              type="index"
-              width="48"
-              align="center"
-              :label="t('ranking')"
-            />
-            <el-table-column
-              prop="gitee_id"
-              align="left"
-              label="Gitee ID"
-              show-overflow-tooltip
-              width="110"
-            />
-            <el-table-column :label="contributeType">
-              <template #default="scope">
-                <div class="box">
-                  <span class="num">{{
-                    toThousands(scope.row.contribute)
-                  }}</span>
-                  <el-progress
-                    :show-text="false"
-                    :stroke-width="8"
-                    :color="progressColor"
-                    :percentage="personalFormat(scope.row.contribute)"
-                  />
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </swiper-slide>
-    <swiper-slide class="slide-page3">
-      <div class="slide-panel foot-panel">
-        <div class="foot-item-logo">
-          <img :src="useCommon.language === 'zh' ? logoZh : logo" alt="" />
-          <span class="line">|</span>
-          <img :src="communityLogo" alt="" />
-        </div>
-        <div class="foot-item-link">
-          <router-link
-            :to="useCommon.language === 'zh' ? '/zh/about' : '/en/about'"
-            >{{ t('footer.about') }}</router-link
-          >
-          <a :href="t('footer.privacyLink')" target="_blank">{{
-            t('footer.privacy')
-          }}</a>
-          <a :href="t('footer.legalLink')" target="_blank">{{
-            t('footer.legal')
-          }}</a>
-        </div>
-        <div class="foot-item-cy">
-          <p class="mail">
-            <a :href="`mailto:${openCommunityInfo.email}`">{{
-              openCommunityInfo.email
-            }}</a>
-          </p>
-          <p class="cy">
-            {{ t('footer.copyright', { year: getYearByOffset() }) }}
-          </p>
-        </div>
-      </div>
-    </swiper-slide>
-  </swiper>
-</template>
-<style lang="scss" scoped>
-$color: #00685a;
-.swiper {
-  height: 100vh;
-  background: #f5f6f8;
-  &.black {
-    :deep(.swiper-pagination) {
-      .swiper-pagination-bullet {
-        background: #f5f6f8;
-      }
-      .swiper-pagination-bullet-active {
-        background: $color;
-      }
-    }
-  }
-
-  .time {
-    position: absolute;
-    bottom: 64px;
-    left: 16px;
-    display: inline-block;
-    height: 14px;
-    font-size: 10px;
-    color: #ffffff;
-    line-height: 14px;
-    opacity: 0.8;
-  }
-
-  .slide-page1,
-  .slide-page2 {
-    background: #000 no-repeat top center/cover;
-    height: 100%;
-    padding: 0 16px 114px;
-    box-sizing: border-box;
-  }
-  .slide-page1 {
-    .overview-page {
-      display: grid;
-      align-items: end;
-      height: 100%;
-      grid-template-rows: 60%;
-      &-item {
-        color: #d3dce9;
-        font-size: 16px;
-        .num {
-          display: block;
-          font-size: 40px;
-          color: #fff;
-        }
-      }
-    }
-  }
-  .slide-page2 {
-    .overview-page2 {
-      display: grid;
-      align-items: end;
-      height: 100%;
-      grid-template-rows: 60%;
-      &-item {
-        color: #d3dce9;
-        font-size: 16px;
-        .num {
-          display: block;
-          font-size: 40px;
-          color: #fff;
-        }
-      }
-    }
-  }
-  .slide-page3 {
-    padding: 48px 16px 62px;
-    box-sizing: border-box;
-    .slide-panel {
-      background: #fff;
-      height: 100%;
-      overflow: hidden auto;
-      scroll-behavior: smooth;
-      &-content {
-        padding: 16px;
-        .title {
-          font-size: 18px;
-          margin-bottom: 24px;
-        }
-        :deep(.contributions-statistical) {
-          margin: 0;
-
-          .searchInput {
-            padding-left: 0;
-          }
-        }
-        :deep(.el-form) {
-          .el-form-item {
-            display: block;
-            padding: 0;
-            margin-bottom: 16px;
-            &__label {
-              font-size: 12px;
-              margin-bottom: 5px;
-              line-height: 20px;
-              display: block;
-            }
-            .el-radio {
-              height: 24px;
-              padding: 0 6px;
-              margin: 0 5px 12px 0;
-              &__label {
-                font-size: 12px;
-              }
-            }
-          }
-        }
-      }
-    }
-    .foot-panel {
-      display: grid;
-      place-content: center;
-      height: 100%;
-      padding: 0;
-      background: none;
-      .foot-item-logo {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img {
-          height: 32px;
-        }
-        .line {
-          margin: 0 16px;
-        }
-      }
-      .foot-item-link {
-        display: flex;
-        justify-content: center;
-        margin: 40px 0;
-        a {
-          color: #555;
-          font-size: 12px;
-          padding: 0 8px;
-          border-right: 1px solid #555;
-          &:last-child {
-            border: 0 none;
-          }
-        }
-      }
-      .foot-item-cy {
-        text-align: center;
-        p {
-          font-size: 12px;
-          color: #555;
-          a {
-            color: inherit;
-          }
-        }
-        .cy {
-          color: #999;
-          margin-top: 8px;
-        }
-      }
-      .atom-item {
-        text-align: center;
-        margin-bottom: 60px;
-        img {
-          height: 40px;
-        }
-        p {
-          font-size: 12px;
-          color: #999;
-          margin-top: 8px;
-          width: 325px;
-        }
-      }
-    }
-    :deep(.el-table) {
-      .cell {
-        font-size: 12px;
-        padding: 0 5px;
-        .box {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-      .el-progress {
-        flex: 1;
-        display: inline-block;
-        margin-left: 5px;
-        &-bar__outer {
-          background: none !important;
-        }
-      }
-    }
-  }
-}
-.company-content {
-  &-item {
-    padding: 16px 0;
-    list-style: none;
-    border-bottom: 1px solid #dfe1e8;
-    .name {
-      font-size: 14px;
-      color: #000;
-      line-height: 22px;
-      .index {
-        color: #9097a3;
-        font-size: 14px;
-        margin-right: 10px;
-      }
-    }
-  }
-}
-.progress {
-  height: 24px;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  margin-top: 10px;
-  &-inner {
-    background: $color;
-    box-shadow: 4px 8px 12px 0px rgba(0, 92, 219, 0.25);
-    font-size: 12px;
-    color: #fff;
-    height: 100%;
-    display: flex;
-    justify-content: right;
-    align-items: center;
-    padding-right: 8px;
-    transition: all 0.3s ease-in;
-  }
-  .val {
-    color: #000;
-    font-size: 12px;
-    margin-left: 8px;
-  }
-}
-:deep(.swiper-pagination) {
-  left: 14px;
-  bottom: 30px;
-  text-align: left;
-  .swiper-pagination-bullet {
-    width: 20px;
-    height: 2px;
-    background: #000;
-    opacity: 0.3;
-    border-radius: 0;
-    &-active {
-      background: $color;
-      opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/packages/lookeng/src/views/overview/Index.vue b/packages/lookeng/src/views/overview/Index.vue
deleted file mode 100644
index e213767fea45fa242a50d97b2a9fbd2f07034b40..0000000000000000000000000000000000000000
--- a/packages/lookeng/src/views/overview/Index.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { watch, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import OBanner from 'shared/components/OBanner.vue';
-import { toThousands, formatNumber } from 'shared/utils/helper';
-import { useCommonStore } from '@/stores/common';
-import useScroll from 'shared/hooks/useScroll';
-
-import homeBanner from '@/assets/bg.png';
-import arrowDown from '~icons/app/chevrons-down';
-
-const router = useRouter();
-const useCommon = useCommonStore();
-const { t, locale } = useI18n();
-
-locale.value = localStorage.getItem('lang') || 'zh';
-
-// 获取数据
-onMounted(() => {
-  useCommon.getAllData();
-});
-
-const { isScrollDown } = useScroll('down');
-watch(
-  () => isScrollDown.value,
-  () => {
-    if (isScrollDown.value) {
-      const lang = useCommon.language === 'zh' ? '/zh/detail' : '/en/detail';
-      router.push(lang);
-    }
-  }
-);
-
-const goContributors = () => {
-  isScrollDown.value = true;
-};
-</script>
-
-<template>
-  <o-banner class="home-banner">
-    <div class="banner-content">
-      <div class="community-content">
-        <div class="community-info">
-          <p class="title">{{ t('home.user') }}</p>
-          <p class="num">{{ toThousands(useCommon.allData.users) }}</p>
-        </div>
-        <div class="community-info">
-          <p class="title">{{ t('home.contributors') }}</p>
-          <p class="num">
-            {{ toThousands(useCommon.allData.contributors) }}
-          </p>
-        </div>
-        <div class="community-info">
-          <p class="title">{{ t('home.partners') }}</p>
-          <p class="num">{{ toThousands(useCommon.allData.partners) }}</p>
-        </div>
-        <div class="community-panel">
-          <div class="community-info">
-            <p class="title">{{ t('home.prs') }}</p>
-            <p class="num">{{ formatNumber(useCommon.allData.prs) }}</p>
-          </div>
-          <div class="community-info">
-            <p class="title">{{ t('home.issues') }}</p>
-            <p class="num">{{ formatNumber(useCommon.allData.issues) }}</p>
-          </div>
-          <div class="community-info">
-            <p class="title">{{ t('home.comments') }}</p>
-            <p class="num">{{ formatNumber(useCommon.allData.comments) }}</p>
-          </div>
-        </div>
-      </div>
-
-      <p class="time">{{ useCommon.time }}</p>
-      <div class="more" @click="goContributors">
-        <p>{{ t('home.moreData') }}</p>
-        <o-icon class="icon"><arrow-down></arrow-down></o-icon>
-      </div>
-    </div>
-    <template #video>
-      <video
-        class="bg-video"
-        src="https://datastat.obs.cn-north-4.myhuaweicloud.com/datastat-openlookeng-home.mp4"
-        :poster="homeBanner"
-        autoplay
-        loop
-        muted
-        controlslist="nodownload nofullscreen"
-        x5-playsinline="true"
-        playsinline="true"
-        webkit-playsinline="true"
-      ></video>
-    </template>
-  </o-banner>
-</template>
-
-<style lang="scss" scoped>
-.bg-video {
-  height: 100vh;
-}
-.banner-content {
-  padding: 100px 0;
-  color: #ffffff;
-  height: calc(100vh);
-  position: relative;
-  overflow: hidden;
-  z-index: 2;
-  .community-content {
-    display: grid;
-    height: 100%;
-    align-items: center;
-
-    .title {
-      font-size: 24px;
-      line-height: 24px;
-      color: #fff;
-    }
-    .num {
-      font-size: 64px;
-      color: #fff;
-      line-height: 84px;
-      font-weight: 400;
-    }
-    .community-info {
-      text-align: left;
-    }
-    .community-panel {
-      display: flex;
-      .community-info {
-        margin-bottom: 0;
-        margin-right: 64px;
-      }
-      .title {
-        font-size: 16px;
-        color: #d3dce9;
-      }
-      .num {
-        font-size: 40px;
-        line-height: 48px;
-      }
-    }
-  }
-
-  .time {
-    display: inline-block;
-    font-size: 12px;
-    color: #ffffff;
-    line-height: 16px;
-    opacity: 0.8;
-  }
-
-  .more {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    text-align: center;
-    transform: translateX(-50%);
-    cursor: pointer;
-    color: #fff;
-    p {
-      font-size: 16px;
-      color: #fff;
-      line-height: 24px;
-      font-weight: 100;
-    }
-    .icon {
-      animation: loadingtd 2s infinite;
-      display: inline-block;
-    }
-  }
-}
-@keyframes loadingtd {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(12px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>
diff --git a/packages/lookeng/tsconfig.json b/packages/lookeng/tsconfig.json
deleted file mode 100644
index dbf12ff0df53f0cda250bd525002dae70df65cdb..0000000000000000000000000000000000000000
--- a/packages/lookeng/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "types": ["unplugin-icons/types/vue","vite/client"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/packages/lookeng/tsconfig.node.json b/packages/lookeng/tsconfig.node.json
deleted file mode 100644
index a0c7a49609d40b6cc0ca339c4ad74b694a24c7be..0000000000000000000000000000000000000000
--- a/packages/lookeng/tsconfig.node.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "types": ["node"]
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/packages/lookeng/vite.config.js b/packages/lookeng/vite.config.js
deleted file mode 100644
index 0cb0e7acef28763e8c772db23789966771f5d6f5..0000000000000000000000000000000000000000
--- a/packages/lookeng/vite.config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import path from 'path';
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import Icons from 'unplugin-icons/vite';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
-
-import AutoImport from 'unplugin-auto-import/vite';
-import Components from 'unplugin-vue-components/vite';
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
-
-export default defineConfig({
-  base: '/',
-  build: {
-    outDir: '../../dist/openlookeng',
-  },
-  resolve: {
-    alias: {
-      '@/': `${path.resolve(__dirname, './src')}/`,
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
-    },
-  },
-  plugins: [
-    vue(),
-    Icons({
-      compiler: 'vue3',
-      customCollections: {
-        app: FileSystemIconLoader('../shared/svg-icons'),
-      },
-    }),
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
-  ],
-  server: {
-    proxy: {
-      '/query': {
-        target: 'https://dsapi.osinfra.cn/',
-        changeOrigin: true,
-      },
-    },
-  },
-});
diff --git a/packages/mindspore/.env.development b/packages/mindspore/.env.development
index d5a75c74803f55f386b0b745dada3e7367c07696..903fb38fcee1e3c87f70540947fb83b8cedf6070 100644
--- a/packages/mindspore/.env.development
+++ b/packages/mindspore/.env.development
@@ -1,3 +1,3 @@
 VITE_COOKIE_DOMAIN = localhost
-
+VITE_COOKIE_VER = "20241205"
 VITE_LOGIN_ORIGIN = https://id.openeuler.org
diff --git a/packages/mindspore/.env.production b/packages/mindspore/.env.production
index 79e379e6cfc388457ae92c706e79625c7ed410a8..902e2df17df92a3994e1fe4e9a3262267335731a 100644
--- a/packages/mindspore/.env.production
+++ b/packages/mindspore/.env.production
@@ -1,3 +1 @@
-VITE_COOKIE_DOMAIN = .openeuler.org
-
-VITE_LOGIN_ORIGIN = https://id.openeuler.org
+VITE_COOKIE_VER = "20241205"
diff --git a/packages/mindspore/components.d.ts b/packages/mindspore/components.d.ts
index e9e1bbd258d90389fffb3d7854bc1855d64f0185..689269fea90897b6b14f304ef8e174c641808dd9 100644
--- a/packages/mindspore/components.d.ts
+++ b/packages/mindspore/components.d.ts
@@ -10,9 +10,13 @@ declare module 'vue' {
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
     AppHeaderMobile: typeof import('./src/components/AppHeaderMobile.vue')['default']
+    ContentWrapper: typeof import('./src/components/ContentWrapper.vue')['default']
+    CookieNotice: typeof import('./src/components/CookieNotice.vue')['default']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     NotFound: typeof import('./src/components/NotFound.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/packages/mindspore/src/App.vue b/packages/mindspore/src/App.vue
index 6f2d757084eaae32c6d8fd64a3f1894819520790..fe31076129f95b9d669e1e258474f2ad20c5a7ae 100644
--- a/packages/mindspore/src/App.vue
+++ b/packages/mindspore/src/App.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
 import AppHeader from '@/components/AppHeader.vue';
+import CookieNotice from './components/CookieNotice.vue';
 </script>
 
 <template>
   <header><app-header></app-header></header>
   <router-view></router-view>
+  <CookieNotice />
 </template>
 
 <style lang="scss">
 #app {
+  --layout-content-max-width: 1544px;
+  --layout-content-padding: 64px;
+  --layout-header-height: 80px;
+
+  @include respond-to('<=laptop') {
+    --layout-content-max-width: 100%;
+    --layout-content-padding: 40px;
+  }
+
+  @include respond-to('<=pad') {
+    --layout-content-padding: 32px;
+  }
+
+  @include respond-to('phone') {
+    --layout-content-padding: 24px;
+  }
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/mindspore/src/components/ContentWrapper.vue b/packages/mindspore/src/components/ContentWrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b327a9d0d0dc8b4c3bb9a977bc2df5b9d9cb99c
--- /dev/null
+++ b/packages/mindspore/src/components/ContentWrapper.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="content-wrapper"><slot></slot></div>
+</template>
+
+<style lang="scss" scoped>
+.content-wrapper {
+  max-width: var(--layout-content-max-width);
+  padding-left: var(--layout-content-padding);
+  padding-right: var(--layout-content-padding);
+  margin: 0 auto;
+}
+</style>
diff --git a/packages/mindspore/src/components/CookieNotice.vue b/packages/mindspore/src/components/CookieNotice.vue
new file mode 100644
index 0000000000000000000000000000000000000000..622fa6e55ac2ffa4c8a332af14fa063dac34991a
--- /dev/null
+++ b/packages/mindspore/src/components/CookieNotice.vue
@@ -0,0 +1,390 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, computed } from 'vue';
+import { setCookie, removeCookie } from 'shared/utils/cookies';
+import {
+  useCookieStore,
+  COOKIE_AGREED_STATUS,
+  COOKIE_KEY,
+} from 'shared/stores/cookies';
+import { useScreen } from 'shared/hooks/useScreen';
+import { useI18n } from 'vue-i18n';
+
+import IconClose from '~icons/app/icon-close.svg';
+import { useRoute, useRouter } from 'vue-router';
+import oa from '@/shared/analytics';
+
+const { lePadV } = useScreen();
+const { locale } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+
+const cookieStore = useCookieStore();
+const router = useRouter();
+
+const route = useRoute();
+const aboutCookiesUrl = computed(
+  () => `https://www.mindspore.cn/cookies/${isZh.value ? '' : 'en'}`
+);
+
+// 是否允许分析cookie
+const analysisAllowed = ref(false);
+
+// cookie提示是否显示
+const isNoticeVisible = ref(false);
+
+// 显示/隐藏cookie提示
+const toggleNoticeVisible = (val: boolean) => {
+  if (typeof val === 'boolean') {
+    isNoticeVisible.value = val;
+  } else {
+    isNoticeVisible.value = !isNoticeVisible.value;
+  }
+};
+
+// 弹出框是否显示
+const isDlgVisible = ref(false);
+
+// 显示/隐藏弹出框
+const toggleDlgVisible = (val: boolean) => {
+  if (typeof val === 'boolean') {
+    isDlgVisible.value = val;
+  } else {
+    isDlgVisible.value = !isNoticeVisible.value;
+  }
+};
+
+// 是否未签署
+const isNotSigned = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.NOT_SIGNED;
+};
+
+// 是否全部同意
+const isAllAgreed = () => {
+  return cookieStore.getUserCookieStatus() === COOKIE_AGREED_STATUS.ALL_AGREED;
+};
+
+onMounted(() => {
+  // 未签署，展示cookie notice
+  if (isNotSigned()) {
+    toggleNoticeVisible(true);
+  }
+
+  if (isAllAgreed()) {
+    analysisAllowed.value = true;
+    oa.enable(router);
+  } else {
+    oa.disable();
+  }
+});
+
+// 用户同意所有cookie
+const acceptAll = () => {
+  analysisAllowed.value = true;
+  cookieStore.status = COOKIE_AGREED_STATUS.ALL_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.ALL_AGREED}${cookieStore.version}`,
+    180
+  );
+  toggleNoticeVisible(false);
+  oa.enable(router);
+};
+
+// 用户拒绝所有cookie，即仅同意必要cookie
+const rejectAll = () => {
+  analysisAllowed.value = false;
+  cookieStore.status = COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+  removeCookie(COOKIE_KEY);
+  setCookie(
+    COOKIE_KEY,
+    `${COOKIE_AGREED_STATUS.NECCESSARY_AGREED}${cookieStore.version}`,
+    180
+  );
+  toggleNoticeVisible(false);
+  oa.disable();
+};
+
+const handleSave = () => {
+  if (analysisAllowed.value) {
+    acceptAll();
+  } else {
+    rejectAll();
+  }
+
+  toggleDlgVisible(false);
+};
+
+const handleAllowAll = () => {
+  analysisAllowed.value = true;
+  acceptAll();
+  toggleDlgVisible(false);
+};
+
+const onDlgChange = () => {
+  if (!isAllAgreed()) {
+    setTimeout(() => {
+      analysisAllowed.value = false;
+    }, 800);
+  }
+  toggleDlgVisible(false);
+};
+
+watch(
+  () => route.path,
+  () => {
+    if (isNotSigned()) {
+      toggleNoticeVisible(true);
+    }
+  }
+);
+</script>
+
+<template>
+  <div v-if="isNoticeVisible" class="cookie-notice">
+    <div class="cookie-notice-content">
+      <div class="cookie-notice-wrap">
+        <div class="cookie-notice-left">
+          <p class="cookie-title">{{ $t('cookie.title') }}</p>
+          <p class="cookie-desc">
+            {{ $t('cookie.desc') }}
+            <a
+              :href="aboutCookiesUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ $t('cookie.link') }} </a
+            >{{ isZh ? '。' : '.' }}
+          </p>
+        </div>
+        <div class="cookie-notice-right">
+          <OButton type="outline" size="mini" @click="acceptAll">{{
+            $t('cookie.acceptAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="rejectAll">{{
+            $t('cookie.rejectAll')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="toggleDlgVisible(true)">
+            {{ $t('cookie.manage') }}
+          </OButton>
+        </div>
+
+        <IconClose
+          class="cookie-notice-close"
+          @click="toggleNoticeVisible(false)"
+        />
+      </div>
+    </div>
+    <ElDialog
+      v-model="isDlgVisible"
+      :width="lePadV ? '90%' : '50%'"
+      :title="$t('cookie.manage')"
+      destroy-on-close
+      :before-close="onDlgChange"
+    >
+      <div class="cookie-dlg-content">
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.necessaryCookie') }}</span>
+            <span class="item-extra">{{
+              $t('cookie.necessaryCookieTip')
+            }}</span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.necessaryCookieDetail') }}
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="item-header">
+            <span class="item-title">{{ $t('cookie.analyticalCookie') }}</span>
+            <span class="item-extra">
+              <ElSwitch v-model="analysisAllowed"></ElSwitch>
+            </span>
+          </div>
+          <div class="item-detail">
+            {{ $t('cookie.analyticalCookieDetail') }}
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <OButton type="outline" size="mini" @click="handleSave">{{
+            $t('cookie.saveSetting')
+          }}</OButton>
+          <OButton type="outline" size="mini" @click="handleAllowAll">
+            {{ $t('cookie.acceptAll') }}
+          </OButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  .o-button {
+    --e-button-font-size-mini: 14px;
+  }
+  .o-button + .o-button {
+    margin-left: 16px;
+
+    @media (max-width: 840px) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
+}
+
+.cookie-notice-content {
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--e-shadow-l1);
+}
+.dark .cookie-notice-content {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.cookie-notice-wrap {
+  padding: 24px 44px;
+  max-width: 1504px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0 auto;
+  @media (max-width: 840px) {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.cookie-notice-left {
+  width: 60%;
+
+  @media (max-width: 1100px) {
+    width: 58%;
+  }
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  .cookie-title {
+    font-size: 16px;
+    line-height: 28px;
+    color: var(--e-color-text1);
+    font-weight: 500;
+    @media (max-width: 840px) {
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+
+  .cookie-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--e-color-text3);
+    margin-top: 8px;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+
+  @media (max-width: 840px) {
+    width: 100%;
+  }
+
+  @media (max-width: 840px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .o-button {
+    @media (max-width: 840px) {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
+
+.cookie-notice-close {
+  position: absolute;
+  top: 12px;
+  right: 24px;
+  cursor: pointer;
+  transform-origin: center;
+  color: var(--e-color-text1);
+  &:hover {
+    color: var(--e-color-brand1);
+  }
+}
+
+:deep(.el-dialog) {
+  .el-dialog__header {
+    text-align: center;
+    padding: 24px;
+  }
+  .el-dialog__title {
+    font-size: 32px;
+    color: var(--e-color-text1);
+    @media (max-width: 840px) {
+      font-size: 22px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0 24px;
+    .content-item + .content-item {
+      margin-top: 24px;
+    }
+
+    .content-item {
+      .item-header {
+        display: flex;
+        align-items: center;
+        .item-title {
+          font-size: 18px;
+          line-height: 32px;
+          color: var(--e-color-text1);
+          font-weight: 500;
+        }
+
+        .item-extra {
+          font-size: 14px;
+          line-height: 22px;
+          color: var(--e-color-text4);
+          margin-left: 24px;
+        }
+      }
+
+      .item-detail {
+        font-size: 16px;
+        line-height: 28px;
+        color: var(--e-color-text3);
+        margin-top: 12px;
+        @media (max-width: 840px) {
+          font-size: 14px;
+          line-height: 21px;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    text-align: center;
+    padding: 24px;
+    @media (max-width: 840px) {
+      .o-button {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/mindspore/src/i18n/cookie/cookie-en.ts b/packages/mindspore/src/i18n/cookie/cookie-en.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6706c722be3787865b3c31cc015b9f7d182f338b
--- /dev/null
+++ b/packages/mindspore/src/i18n/cookie/cookie-en.ts
@@ -0,0 +1,17 @@
+export default {
+  title: 'MindSpore Community Respects Your Privacy.',
+  desc: 'his site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our ',
+  link: 'About Cookies',
+  acceptAll: 'Accept All',
+  rejectAll: 'Reject All',
+  manage: 'Manage Cookies',
+  necessaryCookie: 'Strictly Necessary Cookies',
+  necessaryCookieTip: 'Always active',
+  necessaryCookieDetail:
+    'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
+  analyticalCookie: 'Analytics Cookies',
+  analyticalCookieDetail:
+    'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
+  saveSetting: 'Save Settings',
+  allowAll: 'Accept All',
+};
diff --git a/packages/mindspore/src/i18n/cookie/cookie-zh.ts b/packages/mindspore/src/i18n/cookie/cookie-zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec75a9dc51b5af73362e85cc95f1ac743948a9f9
--- /dev/null
+++ b/packages/mindspore/src/i18n/cookie/cookie-zh.ts
@@ -0,0 +1,17 @@
+export default {
+  title: 'MindSpore社区重视您的隐私',
+  desc: '我们在本网站上使用Cookie，包括第三方Cookie，以便网站正常运行和提升浏览体验。单击“全部接受”即表示您同意这些目的；单击“全部拒绝”即表示您拒绝非必要的Cookie；单击“管理Cookie”以选择接受或拒绝某些Cookie。需要了解更多信息或随时更改您的Cookie首选项，请参阅我们的',
+  link: '《关于cookies》',
+  acceptAll: '全部接受',
+  rejectAll: '全部拒绝',
+  manage: '管理Cookie',
+  necessaryCookie: '必要Cookie',
+  necessaryCookieTip: '始终启用',
+  necessaryCookieDetail:
+    '这些Cookie是网站正常工作所必需的，不能在我们的系统中关闭。它们通常仅是为了响应您的服务请求而设置的，例如登录或填写表单。您可以将浏览器设置为阻止Cookie来拒绝这些Cookie，但网站的某些部分将无法正常工作。这些Cookie不存储任何个人身份信息。',
+  analyticalCookie: '统计分析Cookie',
+  analyticalCookieDetail:
+    '我们将根据您的同意使用和处理这些非必要Cookie。这些Cookie允许我们获得摘要统计数据，例如，统计访问量和访问者来源，便于我们改进我们的网站。',
+  saveSetting: '保存设置',
+  allowAll: '全部接受',
+};
diff --git a/packages/mindspore/src/i18n/cookie/index.ts b/packages/mindspore/src/i18n/cookie/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7673507aeb440916cab1c63efe6017ad508ea6b2
--- /dev/null
+++ b/packages/mindspore/src/i18n/cookie/index.ts
@@ -0,0 +1,7 @@
+import zh from './cookie-zh';
+import en from './cookie-en';
+
+export default (message: Record<string, any>) => {
+  message.zh.cookie = zh;
+  message.en.cookie = en;
+};
diff --git a/packages/mindspore/src/i18n/index.ts b/packages/mindspore/src/i18n/index.ts
index 91f7b5ab660bc904eca6071356ee8125817bd9b8..804099cf849e97e46baf07055d7fd1f4b3df2460 100644
--- a/packages/mindspore/src/i18n/index.ts
+++ b/packages/mindspore/src/i18n/index.ts
@@ -2,7 +2,7 @@ import { createI18n } from 'vue-i18n';
 
 import zhLanguage from './lang/zhLanguage';
 import enLanguage from './lang/enLanguage';
-
+import cookie from './cookie';
 const messages = {
   zh: {
     ...zhLanguage,
@@ -11,6 +11,7 @@ const messages = {
     ...enLanguage,
   },
 };
+cookie(messages);
 const i18n = createI18n({
   locale: localStorage.getItem('lang') || 'zh',
   allowComposition: true,
diff --git a/packages/mindspore/src/main.ts b/packages/mindspore/src/main.ts
index ef8dfabdabc352fe563b1f3beea0f8009cd9f484..52803d709234644d1d019d3a6014cd7cfd5ef086 100644
--- a/packages/mindspore/src/main.ts
+++ b/packages/mindspore/src/main.ts
@@ -1,27 +1,25 @@
 import 'shared/styles/base.scss';
 import '@/shared/styles/style.scss';
+import '@/shared/styles/opendesign-styles/variable.scss';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
 import { router } from './router';
 import OIcon from 'shared/components/OIcon.vue';
-
+import opendesign from 'shared/components/Opendesign';
 // 国际化
 import i18n from './i18n';
-import oa from './shared/analytics';
 const app = createApp(App);
 app.use(i18n);
 
 app.use(router);
 app.use(createPinia());
+app.use(opendesign);
 app.component('OIcon', OIcon);
 
 app.mount('#app');
 
-oa.enable(router);
-oa.reportPerformance();
-
 router.afterEach(() => {
   window.scrollTo(0, 0);
 });
diff --git a/packages/mindspore/src/shared/analytics.ts b/packages/mindspore/src/shared/analytics.ts
index 97d6e7be54ad2a7c46db802f20041f482ce4a8a7..fe9e5c9ecbcc2f353f2c9279cee4b864fdb22022 100644
--- a/packages/mindspore/src/shared/analytics.ts
+++ b/packages/mindspore/src/shared/analytics.ts
@@ -1,23 +1,3 @@
-import { OpenAnalytics } from '@opensig/open-analytics';
 import { OAUtil } from 'shared/analytics';
-import { reportAnalytics } from 'shared/api/api-analytics';
 
-class MindSporeOa extends OAUtil {
-  oa?: OpenAnalytics;
-
-  getInstance(): OpenAnalytics {
-    if (!this.oa) {
-      this.oa = new OpenAnalytics({
-        appKey: 'MindSpore',
-        request: (data) => {
-          reportAnalytics('mindspore', data);
-        },
-      });
-      this.oa.setHeader({ service: 'datastat' });
-    }
-    return this.oa;
-  }
-}
-
-const oa = new MindSporeOa();
-export default oa;
+export default new OAUtil('MindSpore', 'mindspore');
diff --git a/packages/mindspore/src/shared/styles/mixin/font.scss b/packages/mindspore/src/shared/styles/mixin/font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fb02cc054983d248be8a42176bcb9f6c8d8d36a3
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/mixin/font.scss
@@ -0,0 +1,243 @@
+@use './screen.scss' as *;
+
+// 一级数据展示
+@mixin display1 {
+  font-size: 56px;
+  line-height: 80px;
+  @include respond-to('laptop') {
+    font-size: 48px;
+    line-height: 64px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 40px;
+    line-height: 56px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 40px;
+    line-height: 56px;
+  }
+  @include respond-to('phone') {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+// 二级数据展示
+@mixin display2 {
+  font-size: 48px;
+  line-height: 64px;
+  @include respond-to('laptop') {
+    font-size: 40px;
+    line-height: 56px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 32px;
+    line-height: 44px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 32px;
+    line-height: 44px;
+  }
+  @include respond-to('phone') {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+// 三级数据展示
+@mixin display3 {
+  font-size: 40px;
+  line-height: 56px;
+  @include respond-to('laptop') {
+    font-size: 32px;
+    line-height: 44px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 24px;
+    line-height: 32px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 22px;
+    line-height: 30px;
+  }
+  @include respond-to('phone') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+// 一级标题
+@mixin h1 {
+  font-size: 32px;
+  line-height: 44px;
+  @include respond-to('laptop') {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  @include respond-to('phone') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+// 二级标题
+@mixin h2 {
+  font-size: 24px;
+  line-height: 32px;
+  @include respond-to('laptop') {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  @include respond-to('phone') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+// 三级标题
+@mixin h3 {
+  font-size: 22px;
+  line-height: 30px;
+  @include respond-to('laptop') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  @include respond-to('phone') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+// 四级标题
+@mixin h4 {
+  font-size: 20px;
+  line-height: 28px;
+  @include respond-to('laptop') {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  @include respond-to('phone') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+// 常规正文
+@mixin text1 {
+  font-size: 16px;
+  line-height: 24px;
+  @include respond-to('laptop') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('phone') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+
+// 大号正文
+@mixin text2 {
+  font-size: 18px;
+  line-height: 26px;
+  @include respond-to('laptop') {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('phone') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+// 提示文本1
+@mixin tip1 {
+  font-size: 14px;
+  line-height: 22px;
+  @include respond-to('laptop') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('phone') {
+    font-size: 10px;
+    line-height: 16px;
+  }
+}
+
+// 提示文本2
+@mixin tip2 {
+  font-size: 12px;
+  line-height: 18px;
+  @include respond-to('laptop') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('phone') {
+    font-size: 10px;
+    line-height: 16px;
+  }
+}
diff --git a/packages/mindspore/src/shared/styles/mixin/screen.scss b/packages/mindspore/src/shared/styles/mixin/screen.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4ae3eddaa5eac6bdad0251f31e87f70f5f6d76ac
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/mixin/screen.scss
@@ -0,0 +1,73 @@
+// 断点定义
+$breakpoints: (
+  // phone
+  'phone': (0, 600px),
+  '>phone': 601px,
+  // pad
+  'pad': (601px, 1200px),
+  '<=pad': (0, 1200px),
+  '>pad': 1201px,
+  // pad-v
+  'pad_v': (601px, 840px),
+  '<=pad_v': (0, 840px),
+  '>pad_v': 841px,
+  // pad-h
+  'pad_h': (841px, 1200px),
+  // laptop
+  'laptop': (1201px, 1440px),
+  '<=laptop': (0, 1440px),
+  '>laptop': 1441px,
+  'pad-laptop': (601px, 1440px),
+  'pad_v-laptop': (841px, 1440px)
+);
+
+@mixin respond-to($breakname) {
+  $bp: map-get($breakpoints, $breakname);
+  @if type-of($bp) == 'list' {
+    $min: nth($bp, 1);
+    $max: nth($bp, 2);
+    @if $min == 0 {
+      @media (max-width: $max) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $min) and (max-width: $max) {
+        @content;
+      }
+    }
+  } @else {
+    @media (min-width: $bp) {
+      @content;
+    }
+  }
+}
+
+@mixin hoverable($hover: hover) {
+  @media (hover: $hover) {
+    @content;
+  }
+}
+
+@mixin hover() {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+@mixin me-hover() {
+  @content;
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+@mixin x-hover() {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  @include hover {
+    transform: rotate(180deg);
+  }
+}
diff --git a/packages/lookeng/src/shared/utils.ts b/packages/mindspore/src/shared/styles/opendesign-styles/_animation.scss
similarity index 100%
rename from packages/lookeng/src/shared/utils.ts
rename to packages/mindspore/src/shared/styles/opendesign-styles/_animation.scss
diff --git a/packages/mindspore/src/shared/styles/opendesign-styles/_color.scss b/packages/mindspore/src/shared/styles/opendesign-styles/_color.scss
new file mode 100644
index 0000000000000000000000000000000000000000..924c296729df675cb164de372b20bbacaf098f4a
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/opendesign-styles/_color.scss
@@ -0,0 +1,181 @@
+// 颜色
+:root {
+  /**
+   * 基础色盘
+   */
+
+  // 克莱因蓝
+  --o-color-kleinblue1: #000412;
+  --o-color-kleinblue2: #000827;
+  --o-color-kleinblue3: #0c2360;
+  --o-color-kleinblue4: #00288d;
+  --o-color-kleinblue5: #002fa7;
+  --o-color-kleinblue6: #0d3cb4;
+  --o-color-kleinblue7: #2555cd;
+  --o-color-kleinblue8: #406fe7;
+  --o-color-kleinblue9: #5988ff;
+  --o-color-kleinblue10: #b2c0e4;
+
+  // 中性色
+  --o-color-neutral1: #121212;
+  --o-color-neutral2: #151515;
+  --o-color-neutral3: #2d2d2d;
+  --o-color-neutral4: #3f3f3f;
+  --o-color-neutral5: #555555;
+  --o-color-neutral6: #707070;
+  --o-color-neutral7: #848484;
+  --o-color-neutral8: #999999;
+  --o-color-neutral9: #b2b2b2;
+  --o-color-neutral10: #cccccc;
+  --o-color-neutral11: #e5e5e5;
+
+  // 红色
+  --o-color-red1: #850d09;
+  --o-color-red2: #b4110c;
+  --o-color-red3: #e4160f;
+  --o-color-red4: #f13b35;
+  --o-color-red5: #f3524d;
+  --o-color-red6: #ff5f5a;
+  --o-color-red7: #ff7873;
+  --o-color-red8: #ff928d;
+  --o-color-red9: #ffaba6;
+  --o-color-red10: #ffd2af;
+
+  // 黄色
+  --o-color-yellow1: #754c01;
+  --o-color-yellow2: #a86d01;
+  --o-color-yellow3: #dabe01;
+  --o-color-yellow4: #feaa11;
+  --o-color-yellow5: #feb32a;
+  --o-color-yellow6: #ffc037;
+  --o-color-yellow7: #ffd950;
+  --o-color-yellow8: #fff36a;
+  --o-color-yellow9: #ffff83;
+  --o-color-yellow10: #ffe1aa;
+
+  // 绿色
+  --o-color-green1: #1f370f;
+  --o-color-green2: #355f1a;
+  --o-color-green3: #4b8725;
+  --o-color-green4: #62af30;
+  --o-color-green5: #6dc335;
+  --o-color-green6: #7ad042;
+  --o-color-green7: #93e95b;
+  --o-color-green8: #adff75;
+  --o-color-green9: #c6ff8e;
+  --o-color-green10: #c5e7ae;
+
+  // 橙色
+  --o-color-orange1: #9b370e;
+  --o-color-orange2: #b54f00;
+  --o-color-orange3: #e86600;
+  --o-color-orange4: #ff801c;
+  --o-color-orange5: #ff8e36;
+  --o-color-orange6: #ff9b43;
+  --o-color-orange7: #ffb45c;
+  --o-color-orange8: #ffce76;
+  --o-color-orange9: #ffcf8f;
+  --o-color-orange10: #ffd2af;
+
+  // 灰蓝色
+  --o-color-greyblue1: #e5e8f0;
+  --o-color-greyblue2: #f7f8fa;
+  --o-color-greyblue3: #f5f6f8;
+
+  // 灰黑色
+  --o-color-greyblack1: #1e1e1e;
+  --o-color-greyblack2: #242424;
+  --o-color-greyblack3: #2e2e2e;
+  --o-color-greyblack4: #383838;
+
+  // 白色
+  --o-color-white: #ffffff;
+
+  // 黑色
+  --o-color-black: #000000;
+
+  // 透明
+  --o-color-transparent: transparent;
+
+  /**
+   * 状态颜色 && 功能颜色
+   */
+
+  // 成功色
+  --o-color-success1: var(--o-color-green5); // normal
+  --o-color-success2: var(--o-color-green7); // hover
+  --o-color-success3: var(--o-color-green10); // disabled
+
+  // 告警色
+  --o-color-warning1: var(--o-color-orange5); // normal
+  --o-color-warning2: var(--o-color-orange7); // hover
+  --o-color-warning3: var(--o-color-orange10); // disabled
+
+  // 错误色
+  --o-color-error1: var(--o-color-red5); // normal
+  --o-color-error2: var(--o-color-red7); // hover
+  --o-color-error3: var(--o-color-red10); // disabled
+
+  // 品牌色
+  --o-color-brand1: var(--o-color-kleinblue5); // 常规、文字
+  --o-color-brand2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-brand3: var(--o-color-kleinblue4); // 确认
+  --o-color-brand4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-brand5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-brand6: var(
+    --o-color-kleinblue10
+  ); // 文字禁用，暂和一般禁用保持一致
+
+  // 文字颜色
+  --o-color-text1: var(--o-color-black); // 强调/正文标题 黑色
+  --o-color-text2: var(--o-color-white); // 强调/正文标题 白色
+  --o-color-text3: var(--o-color-neutral4); // 次强调/正文标题
+  --o-color-text4: var(--o-color-neutral6); // 次要信息/正文
+  --o-color-text5: var(--o-color-neutral11); // 置灰信息
+  --o-color-text-secondary: var(--o-color-neutral6); // 次级文字颜色
+
+  // 背景色
+  --o-color-bg1: var(--o-color-greyblue3); // 整体背景色
+  --o-color-bg2: var(--o-color-white); // 一级容器背景色
+  --o-color-bg3: var(--o-color-greyblue2); // 二级容器背景色
+  --o-color-bg4: var(--o-color-greyblue1); // 三级容器背景色
+  --o-color-bg5: var(--o-color-white); // 弹出框、tooltip背景色
+  --o-color-bg6: rgba(0, 0, 0, 0.5); // 蒙层
+  --o-color-bg-secondary: var(--o-color-neutral11); // 次级颜色背景颜色
+
+  // 链接色
+  --o-color-link1: var(--o-color-kleinblue5); // 常规
+  --o-color-link2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-link3: var(--o-color-kleinblue4); // 点击
+  --o-color-link4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-link5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-link6: var(--o-color-kleinblue10); // 文字禁用，暂和一般禁用保持一致
+
+  // 边框颜色
+  --o-color-border1: var(--o-color-neutral6);
+  --o-color-border2: var(--o-color-neutral11);
+  --o-color-border3: var(--o-color-kleinblue5);
+
+  // 分割线颜色
+  --o-color-division1: var(--o-color-neutral11);
+
+  // 填充色，用于阴影容器背景
+  --o-color-fill1: var(
+    --o-color-white
+  ); // SL1 一级投影容器背景，应用于默认状态的卡片、楼层、导航栏、组件里局部投影背景等
+  --o-color-fill2: var(
+    --o-color-white
+  ); // SL2 二级投影容器背景，应用于卡片、组件里局部投影等
+  --o-color-fill2_hover: var(
+    --o-color-white
+  ); // SL2-hover 升起投影容器背景，应用于悬停状态的卡片等，是SL2的激活态
+  --o-color-fill3: var(
+    --o-color-white
+  ); // SL3 三级投影容器背景，应用于一级投影上的卡片、组件等
+  --o-color-fill4: var(
+    --o-color-white
+  ); // SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器
+  --o-color-fill5: var(
+    --o-color-white
+  ); // SL5 弹出阴影容器背景，应用于模态弹窗投影
+}
diff --git a/packages/mindspore/src/shared/styles/opendesign-styles/_font.scss b/packages/mindspore/src/shared/styles/opendesign-styles/_font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..56116fef4f7959919bfd44ce074a6761428aaa17
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/opendesign-styles/_font.scss
@@ -0,0 +1,26 @@
+// 字体
+:root {
+  // 字体font-size
+  --o-font-size-h1: 64px;
+  --o-font-size-h2: 54px;
+  --o-font-size-h3: 36px;
+  --o-font-size-h4: 28px;
+  --o-font-size-h5: 24px;
+  --o-font-size-h6: 20px;
+  --o-font-size-h7: 18px;
+  --o-font-size-h8: 16px;
+  --o-font-size-text: 14px;
+  --o-font-size-tip: 12px;
+
+  // 字体line-height
+  --o-line-height-h1: 84px;
+  --o-line-height-h2: 76px;
+  --o-line-height-h3: 48px;
+  --o-line-height-h4: 36px;
+  --o-line-height-h5: 32px;
+  --o-line-height-h6: 28px;
+  --o-line-height-h7: 26px;
+  --o-line-height-h8: 24px;
+  --o-line-height-text: 22px;
+  --o-line-height-tip: 18px;
+}
diff --git a/packages/mindspore/src/shared/styles/opendesign-styles/_shadow.scss b/packages/mindspore/src/shared/styles/opendesign-styles/_shadow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..78dcd8d96a0a483060378c3cdb1dd4e6b7e80178
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/opendesign-styles/_shadow.scss
@@ -0,0 +1,9 @@
+// 阴影，注：SL2有hover投影
+:root {
+  --o-shadow-l1: 0 1px 5px rgba(45, 47, 51, 0.1); // SL1 一级投影，应用于楼层、导航栏、组件里局部投影等，
+  --o-shadow-l2: 0 1px 5px rgba(45, 47, 51, 0.1); // SL2-normal 二级投影，应用于卡片、组件里局部投影等
+  --o-shadow-l2_hover: 0 6px 18px rgba(0, 47, 167, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
+  --o-shadow-l3: 0 6px 18px rgba(45, 47, 51, 0.14); // SL3 三级投影，应用于一级投影上的卡片、组件等
+  --o-shadow-l4: 0 10px 32px rgba(45, 47, 51, 0.18); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
+  --o-shadow-l5: 0 12px 42px rgba(45, 47, 51, 0.24); // SL5 弹出阴影，应用于模态弹窗投影
+}
diff --git a/packages/mindspore/src/shared/styles/opendesign-styles/_spacing.scss b/packages/mindspore/src/shared/styles/opendesign-styles/_spacing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3dcd5bfbe1370420420c90af1683fed7df3393f
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/opendesign-styles/_spacing.scss
@@ -0,0 +1,13 @@
+// 间距
+:root {
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
+}
diff --git a/packages/mindspore/src/shared/styles/opendesign-styles/variable.scss b/packages/mindspore/src/shared/styles/opendesign-styles/variable.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c7242722c856dd379092fd4ea79825a664a01b7b
--- /dev/null
+++ b/packages/mindspore/src/shared/styles/opendesign-styles/variable.scss
@@ -0,0 +1,4 @@
+@import './_color.scss';
+@import './_shadow.scss';
+@import './_font.scss';
+@import './_spacing.scss';
diff --git a/packages/mindspore/vite.config.js b/packages/mindspore/vite.config.js
index d9607b3fd466933832c6feb657cf53ddc10a35f3..5d0fb2ad80308a6d9c3a0108a55bf0c13d7a2414 100644
--- a/packages/mindspore/vite.config.js
+++ b/packages/mindspore/vite.config.js
@@ -1,6 +1,7 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import Icons from 'unplugin-icons/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
@@ -21,6 +22,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueJsx(),
     Icons({
       compiler: 'vue3',
       customCollections: {
@@ -34,6 +36,16 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()],
     }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+        @use "@/shared/styles/mixin/screen.scss" as *;
+        @use "@/shared/styles/mixin/font.scss" as *;
+        `,
+      },
+    },
+  },
   server: {
     proxy: {
       '/query': {
diff --git a/packages/shared/analytics/index.ts b/packages/shared/analytics/index.ts
index d8ccb30f512e5854d3ca1f16b7f1bae0b8ae1c36..93c27845451e6ff7966e19318efcba1317aaae8a 100644
--- a/packages/shared/analytics/index.ts
+++ b/packages/shared/analytics/index.ts
@@ -3,34 +3,77 @@ import {
   OpenAnalytics,
   OpenEventKeys,
 } from '@opensig/open-analytics';
+import { reportAnalytics } from '../api/api-analytics';
+import { COOKIE_AGREED_STATUS, useCookieStore } from '../stores/cookies';
 import { Router } from 'vue-router';
 
-export abstract class OAUtil {
+export class OAUtil {
   service = 'datastat';
-  abstract getInstance(): OpenAnalytics;
+  appKey: string;
+  routerGuards?: (() => void)[];
+  oa: OpenAnalytics;
+  reportPerfCount = 0;
 
-  async enable(router: Router) {
-    const oa = this.getInstance();
-    oa.setHeader(getClientInfo());
-    oa.enableReporting(true);
+  constructor(appKey: string, reportUrlSuffix: string) {
+    this.appKey = appKey;
+    this.oa = new OpenAnalytics({
+      appKey: this.appKey,
+      request: (data) => {
+        if (
+          useCookieStore().getUserCookieStatus() !==
+          COOKIE_AGREED_STATUS.ALL_AGREED
+        ) {
+          this.disable();
+          return;
+        }
+        reportAnalytics(reportUrlSuffix, data);
+      },
+    });
+  }
+
+  enable(router: Router) {
+    this.oa.setHeader(getClientInfo());
+    this.oa.enableReporting(true);
+    this.setupRouterGuards(router);
+    if (this.reportPerfCount >= 1) {
+      return;
+    }
+    this.reportPerfCount++;
+    this.reportPerformance();
+  }
+
+  async setupRouterGuards(router: Router) {
     await router.isReady();
     this.reportPV();
-    router.beforeEach((to, from) => {
-      if (from.path === '/' || to.path === from.path) {
-        return;
-      }
-      to.meta.$referrer = window.location.href;
-    });
-    router.afterEach((to, from) => {
-      if (to.path === from.path) {
-        return;
-      }
-      this.reportPV(to.meta.$referrer as string);
-    });
+    (this.routerGuards ??= []).push(
+      router.beforeEach((to, from) => {
+        if (from.path === '/' || to.path === from.path) {
+          return;
+        }
+        to.meta.$referrer = window.location.href;
+      }),
+      router.afterEach((to, from) => {
+        if (to.path === from.path) {
+          return;
+        }
+        this.reportPV(to.meta.$referrer as string);
+      })
+    );
   }
 
   disable() {
-    this.getInstance().enableReporting(false);
+    this.oa.enableReporting(false);
+    if (this.routerGuards) {
+      this.routerGuards.forEach((item) => item());
+      this.routerGuards = [];
+    }
+    [
+      `oa-${this.appKey}-client`,
+      `oa-${this.appKey}-events`,
+      `oa-${this.appKey}-session`,
+    ].forEach((key) => {
+      localStorage.removeItem(key);
+    });
   }
 
   reportPV($referrer?: string) {
@@ -46,7 +89,10 @@ export abstract class OAUtil {
       eventOptions?: any;
     }
   ) {
-    return this.getInstance().report(
+    if (!this.oa.enabled) {
+      return;
+    }
+    return this.oa.report(
       event,
       async () => ({
         $service,
diff --git a/packages/shared/components/OAnchor.vue b/packages/shared/components/OAnchor.vue
index 85da0927b282f095553c808a508b23d6ce3afc97..fae66f99e52e219d2915a02fa82dd2b770cd5bc7 100644
--- a/packages/shared/components/OAnchor.vue
+++ b/packages/shared/components/OAnchor.vue
@@ -116,12 +116,12 @@ const btnInfo = () => {
   </div>
   <div class="box">
     <div class="box-show" @click="btnInfo">
-      <div class="title"><sapn>意反</sapn><sapn>见馈</sapn></div>
+      <div class="title"><span>意反</span><span>见馈</span></div>
     </div>
   </div>
   <div class="box-down">
     <div class="box-show" @click="scrollToTop">
-      <div class="title"><sapn>回顶</sapn><sapn>到部</sapn></div>
+      <div class="title"><span>回顶</span><span>到部</span></div>
     </div>
   </div>
 </template>
diff --git a/packages/shared/components/ONav.vue b/packages/shared/components/ONav.vue
index aa27f037a921a8f0efe088a8c94a2673f4a44e58..3194c672dc204aa7bb03d28faf5f923e176e513c 100644
--- a/packages/shared/components/ONav.vue
+++ b/packages/shared/components/ONav.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { watch, ref, toRefs } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { NavItem } from 'shared/@types/interface';
+import { NavItem } from '../@types/interface';
 const router = useRouter();
 const route = useRoute();
 const props = defineProps({
diff --git a/packages/shared/components/Opendesign/button/index.ts b/packages/shared/components/Opendesign/button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d9d74a947276d852e3806b613f21e1593f84dc4b
--- /dev/null
+++ b/packages/shared/components/Opendesign/button/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Button from './src/button';
+
+Button.install = function (app: App) {
+  app.component(Button.name as string, Button);
+};
+
+export { Button };
diff --git a/packages/shared/components/Opendesign/button/src/button-types.ts b/packages/shared/components/Opendesign/button/src/button-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f72ca2d472bd6c59d4f2d96cfcba5aef2df6c30c
--- /dev/null
+++ b/packages/shared/components/Opendesign/button/src/button-types.ts
@@ -0,0 +1,35 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+
+type ButtonType = 'outline' | 'primary' | 'secondary' | 'text';
+// TODO:status颜色规范待补充
+type ButtonStatus = 'normal';
+type ButtonNativeType = 'button' | 'submit' | 'reset';
+
+export const buttonProps = {
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'outline',
+  },
+  status: {
+    type: String as PropType<ButtonStatus>,
+    default: 'nomral',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+  nativeType: {
+    type: String as PropType<ButtonNativeType>,
+    default: 'button',
+  },
+};
+
+export type ButtonProps = ExtractDefaultPropTypes<typeof buttonProps>;
diff --git a/packages/shared/components/Opendesign/button/src/button.scss b/packages/shared/components/Opendesign/button/src/button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2eb0a2e8f47ff8f181f2567c7ee72e48a8e99f81
--- /dev/null
+++ b/packages/shared/components/Opendesign/button/src/button.scss
@@ -0,0 +1,187 @@
+@import './var.scss';
+
+.o-button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--o-button-padding);
+  font-size: var(--o-button-font-size);
+  line-height: var(--o-button-line-height);
+  color: var(--o-button-font-color);
+  background-color: var(--o-button-bg-color);
+  border: var(--o-button-border);
+  outline: none;
+  user-select: none;
+  cursor: pointer;
+
+  &.with-prefix {
+    padding-left: var(--o-button-icon-paddding);
+  }
+
+  &.with-suffix {
+    padding-right: var(--o-button-icon-paddding);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    @media screen and (min-width: 1100px) {
+      color: var(--o-button-font-color_hover);
+      border: var(--o-button-border_hover);
+      background-color: var(--o-button-bg-color_hover);
+    }
+  }
+  &:active {
+    @media screen and (min-width: 1100px) {
+      color: var(--o-button-font-color_active);
+      background-color: var(--o-button-bg-color_active);
+      border: var(--o-button-border_active);
+    }
+  }
+  &.is-disabled {
+    color: var(--o-button-font-color_disabled);
+    border: var(--o-button-border_disabled);
+    background-color: var(--o-button-bg-color_disabled);
+  }
+
+  //primary
+  &.o-button-type-primary {
+    color: var(--o-button-font-color-primary);
+    border: var(--o-button-border-primary);
+    background-color: var(--o-button-bg-color-primary);
+
+    &:hover {
+      @media screen and (min-width: 1100px) {
+        border: var(--o-button-border-primary_hover);
+        background-color: var(--o-button-bg-color-primary_hover);
+      }
+    }
+    &:active {
+      @media screen and (min-width: 1100px) {
+        border: var(--o-button-border-primary_active);
+        background-color: var(--o-button-bg-color-primary_active);
+      }
+    }
+  }
+  &.o-button-type-primary.is-disabled {
+    color: var(--o-button-font-color-primary_disabled);
+    border: var(--o-button-border-primary_disabled);
+    background-color: var(--o-button-bg-color-primary_disabled);
+  }
+
+  // secondary
+  &.o-button-type-secondary {
+    color: var(--o-button-font-color-secondary);
+    border: var(--o-button-border-secondary);
+    background-color: var(--o-button-bg-color-secondary);
+    &:hover {
+      border: var(--o-button-border-secondary_hover);
+      background-color: var(--o-button-bg-color-secondary_hover);
+    }
+    &:active {
+      border: var(--o-button-border-secondary_active);
+      background-color: var(--o-button-bg-color-secondary_active);
+    }
+  }
+  &.o-button-type-secondary.is-disabled {
+    color: var(--o-button-font-color-secondary_disabled);
+    border: var(--o-button-border-secondary_disabled);
+    background-color: var(--o-button-bg-color-secondary_disabled);
+  }
+
+  // text
+  &.o-button-type-text {
+    color: var(--o-button-font-color-text);
+    border: var(--o-button-border-text);
+    background-color: var(--o-button-bg-color-text);
+    &:hover {
+      // border: var(--o-button-border-text_hover);
+      // background-color: var(--o-button-bg-color-text_hover);
+    }
+    &:active {
+      // border: var(--o-button-border-text_active);
+      // background-color: var(--o-button-bg-color-text_active);
+    }
+  }
+  &.o-button-type-text.is-disabled {
+    color: var(--o-button-font-color-text_disabled);
+    border: var(--o-button-border-text_disabled);
+    background-color: var(--o-button-bg-color-text_disabled);
+  }
+
+  .prefix-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-right: var(--o-button-icon-margin);
+    font-size: var(--o-button-icon-font-size);
+    transition: all 0.2s linear;
+  }
+
+  .suffix-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--o-button-icon-margin);
+    font-size: var(--o-button-icon-font-size);
+    transition: all 0.2s linear;
+  }
+
+  &.animation:hover .prefix-icon {
+    @media screen and (min-width: 1100px) {
+      transform: translate(-4px);
+    }
+  }
+
+  &.animation:hover .suffix-icon {
+    @media screen and (min-width: 1100px) {
+      transform: translate(4px);
+    }
+  }
+
+  &.o-button-size-small {
+    padding: var(--o-button-padding-small);
+    font-size: var(--o-button-font-size-small);
+    line-height: var(--o-button-line-height-small);
+    &.with-prefix {
+      padding-left: var(--o-button-icon-paddding-small);
+    }
+
+    &.with-suffix {
+      padding-right: var(--o-button-icon-paddding-small);
+    }
+
+    .prefix-icon {
+      margin-right: var(--o-button-icon-margin-small);
+      font-size: var(--o-button-icon-font-size-small);
+    }
+
+    .suffix-icon {
+      margin-left: var(--o-button-icon-margin-small);
+      font-size: var(--o-button-icon-font-size-small);
+    }
+  }
+
+  &.o-button-size-mini {
+    padding: var(--o-button-padding-mini);
+    font-size: var(--o-button-font-size-mini);
+    line-height: var(--o-button-line-height-mini);
+
+    &.with-prefix {
+      padding-left: var(--o-button-icon-paddding-mini);
+    }
+
+    &.with-suffix {
+      padding-right: var(--o-button-icon-paddding-mini);
+    }
+
+    .prefix-icon {
+      margin-right: var(--o-button-icon-margin-mini);
+      font-size: var(--o-button-icon-font-size-mini);
+    }
+
+    .suffix-icon {
+      margin-left: var(--o-button-icon-margin-mini);
+      font-size: var(--o-button-icon-font-size-mini);
+    }
+  }
+}
diff --git a/packages/shared/components/Opendesign/button/src/button.tsx b/packages/shared/components/Opendesign/button/src/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..116b113634e9c4d8da7aa149b1f0b4d0ebc15705
--- /dev/null
+++ b/packages/shared/components/Opendesign/button/src/button.tsx
@@ -0,0 +1,46 @@
+import { computed, defineComponent, toRefs } from 'vue';
+import { buttonProps, ButtonProps } from './button-types';
+import './button.scss';
+
+export default defineComponent({
+  name: 'OButton',
+  props: buttonProps,
+  emits: ['click'],
+  setup(props: ButtonProps, { emit, slots }) {
+    const { size, type, status, disabled, animation, nativeType } =
+      toRefs(props);
+
+    const classNames = computed(() => ({
+      'o-button': true,
+      [`o-button-size-${size.value}`]: true,
+      [`o-button-type-${type.value}`]: true,
+      [`o-button-status-${status.value}`]: true,
+      'with-prefix': slots.prefixIcon,
+      'with-suffix': slots.suffix,
+      animation: animation.value,
+      'is-disabled': disabled.value,
+    }));
+
+    const onClick = (e: MouseEvent) => {
+      emit('click', e);
+    };
+
+    return () => {
+      return (
+        <button
+          class={classNames.value}
+          onClick={onClick}
+          type={nativeType.value}
+        >
+          {slots.prefixIcon && (
+            <span class="prefix-icon">{slots.prefixIcon()}</span>
+          )}
+          {slots.default?.()}
+          {slots.suffixIcon && (
+            <span class="suffix-icon">{slots.suffixIcon()}</span>
+          )}
+        </button>
+      );
+    };
+  },
+});
diff --git a/packages/shared/components/Opendesign/button/src/var.scss b/packages/shared/components/Opendesign/button/src/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..280b5094b6353b9c49d072ebe45f64954eed0634
--- /dev/null
+++ b/packages/shared/components/Opendesign/button/src/var.scss
@@ -0,0 +1,90 @@
+.o-button {
+  // 文字颜色
+  --o-button-font-color: var(--o-color-brand1);
+  --o-button-font-color-primary: var(--o-color-white);
+  --o-button-font-color-secondary: var(--o-color-text1);
+  --o-button-font-color-text: var(--o-color-text1);
+  // 文字颜色 hover态，注：只有类型为outline的按钮hover时有文字颜色变化
+  --o-button-font-color_hover: var(--o-color-brand2);
+  // 文字颜色 avtive态，注：只有类型为outline的按钮active时有文字颜色变化
+  --o-button-font-color_active: var(--o-color-brand3);
+  // 文字颜色 disabled态
+  --o-button-font-color_disabled: var(--o-color-brand5);
+  --o-button-font-color-primary_disabled: var(--o-color-text2);
+  --o-button-font-color-secondary_disabled: var(--o-color-text1);
+  --o-button-font-color-text_disabled: var(--o-color-text5);
+
+  // 背景颜色
+  --o-button-bg-color: var(--o-color-transparent);
+  --o-button-bg-color-primary: var(--o-color-brand1);
+  --o-button-bg-color-secondary: var(--o-color-secondary);
+  --o-button-bg-color-text: var(--o-color-transparent);
+  // 背景颜色 hover态
+  --o-button-bg-color_hover: var(--o-color-transparent);
+  --o-button-bg-color-primary_hover: var(--o-color-brand2);
+  --o-button-bg-color-secondary_hover: var(--o-color-secondary_hover);
+  --o-button-bg-color-text_hover: var(--o-color-secondary_hover);
+  // 背景颜色 active态
+  --o-button-bg-color_active: var(--o-color-transparent);
+  --o-button-bg-color-primary_active: var(--o-color-brand3);
+  --o-button-bg-color-secondary_active: var(--o-color-secondary_active);
+  --o-button-bg-color-text_active: var(--o-color-secondary_active);
+  // 背景颜色 disabled态
+  --o-button-bg-color_disabled: var(--o-color-transparent);
+  --o-button-bg-color-primary_disabled: var(--o-color-brand5);
+  --o-button-bg-color-secondary_disabled: var(--o-color-secondary_disabled);
+  --o-button-bg-color-text_disabled: var(--o-color-secondary_disabled);
+
+  // border
+  --o-button-border: 1px solid var(--o-color-brand1);
+  --o-button-border-primary: 1px solid var(--o-color-brand1);
+  --o-button-border-secondary: 1px solid var(--o-color-secondary);
+  --o-button-border-text: 1px solid var(--o-color-transparent);
+  // border hover态
+  --o-button-border_hover: 1px solid var(--o-color-brand2);
+  --o-button-border-primary_hover: 1px solid var(--o-color-brand2);
+  --o-button-border-secondary_hover: 1px solid var(--o-color-secondary_hover);
+  --o-button-border-text_hover: 1px solid var(--o-color-secondary_hover);
+  // border active态
+  --o-button-border_active: 1px solid var(--o-color-brand3);
+  --o-button-border-primary_active: 1px solid var(--o-color-brand3);
+  --o-button-border-secondary_active: 1px solid var(--o-color-secondary_active);
+  --o-button-border-text_active: 1px solid var(--o-color-secondary_active);
+  // border disabled态
+  --o-button-border_disabled: 1px solid var(--o-color-brand5);
+  --o-button-border-primary_disabled: 1px solid var(--o-color-brand5);
+  --o-button-border-secondary_disabled: 1px solid
+    var(--o-color-secondary_disabled);
+  --o-button-border-text_disabled: 1px solid var(--o-color-transparent);
+
+  // font-size
+  --o-button-font-size: var(--o-font-size-h8);
+  --o-button-font-size-small: var(--o-font-size-text);
+  --o-button-font-size-mini: var(--o-font-size-tip);
+
+  // line-height
+  --o-button-line-height: var(--o-line-height-h8);
+  --o-button-line-height-small: var(--o-line-height-text);
+  --o-button-line-height-mini: var(--o-line-height-tip);
+
+  // padding
+  --o-button-padding: 11px 28px;
+  --o-button-padding-small: 9px 28px;
+  --o-button-padding-mini: 6px 16px;
+
+  // icon margin
+  --o-button-icon-margin: 8px;
+  --o-button-icon-margin-small: 8px;
+  --o-button-icon-margin-mini: 4px;
+  // icon font-size
+  --o-button-icon-font-size: var(--o-font-size-h5);
+  --o-button-icon-font-size-small: var(--o-font-size-h8);
+  --o-button-icon-font-size-mini: var(--o-font-size-tip);
+  // icon padding
+  --o-button-icon-paddding: 20px;
+  --o-button-icon-paddding-small: 14px;
+  --o-button-icon-paddding-mini: 6x;
+
+  // animation
+  -o-button-transition: color 0.2s, background-color 0.3s, border 0.3s;
+}
diff --git a/packages/shared/components/Opendesign/index.ts b/packages/shared/components/Opendesign/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ffbb9b41e78d29c90137122faabe84e82ab76f9
--- /dev/null
+++ b/packages/shared/components/Opendesign/index.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+
+// import './style/variable.scss';
+
+import { Button } from './button';
+
+const components = [Button];
+export default {
+  install(app: App): void {
+    components.forEach((component) => {
+      app.use(component as any);
+    });
+  },
+};
diff --git a/packages/shared/components/Opendesign/style/_color.scss b/packages/shared/components/Opendesign/style/_color.scss
new file mode 100644
index 0000000000000000000000000000000000000000..924c296729df675cb164de372b20bbacaf098f4a
--- /dev/null
+++ b/packages/shared/components/Opendesign/style/_color.scss
@@ -0,0 +1,181 @@
+// 颜色
+:root {
+  /**
+   * 基础色盘
+   */
+
+  // 克莱因蓝
+  --o-color-kleinblue1: #000412;
+  --o-color-kleinblue2: #000827;
+  --o-color-kleinblue3: #0c2360;
+  --o-color-kleinblue4: #00288d;
+  --o-color-kleinblue5: #002fa7;
+  --o-color-kleinblue6: #0d3cb4;
+  --o-color-kleinblue7: #2555cd;
+  --o-color-kleinblue8: #406fe7;
+  --o-color-kleinblue9: #5988ff;
+  --o-color-kleinblue10: #b2c0e4;
+
+  // 中性色
+  --o-color-neutral1: #121212;
+  --o-color-neutral2: #151515;
+  --o-color-neutral3: #2d2d2d;
+  --o-color-neutral4: #3f3f3f;
+  --o-color-neutral5: #555555;
+  --o-color-neutral6: #707070;
+  --o-color-neutral7: #848484;
+  --o-color-neutral8: #999999;
+  --o-color-neutral9: #b2b2b2;
+  --o-color-neutral10: #cccccc;
+  --o-color-neutral11: #e5e5e5;
+
+  // 红色
+  --o-color-red1: #850d09;
+  --o-color-red2: #b4110c;
+  --o-color-red3: #e4160f;
+  --o-color-red4: #f13b35;
+  --o-color-red5: #f3524d;
+  --o-color-red6: #ff5f5a;
+  --o-color-red7: #ff7873;
+  --o-color-red8: #ff928d;
+  --o-color-red9: #ffaba6;
+  --o-color-red10: #ffd2af;
+
+  // 黄色
+  --o-color-yellow1: #754c01;
+  --o-color-yellow2: #a86d01;
+  --o-color-yellow3: #dabe01;
+  --o-color-yellow4: #feaa11;
+  --o-color-yellow5: #feb32a;
+  --o-color-yellow6: #ffc037;
+  --o-color-yellow7: #ffd950;
+  --o-color-yellow8: #fff36a;
+  --o-color-yellow9: #ffff83;
+  --o-color-yellow10: #ffe1aa;
+
+  // 绿色
+  --o-color-green1: #1f370f;
+  --o-color-green2: #355f1a;
+  --o-color-green3: #4b8725;
+  --o-color-green4: #62af30;
+  --o-color-green5: #6dc335;
+  --o-color-green6: #7ad042;
+  --o-color-green7: #93e95b;
+  --o-color-green8: #adff75;
+  --o-color-green9: #c6ff8e;
+  --o-color-green10: #c5e7ae;
+
+  // 橙色
+  --o-color-orange1: #9b370e;
+  --o-color-orange2: #b54f00;
+  --o-color-orange3: #e86600;
+  --o-color-orange4: #ff801c;
+  --o-color-orange5: #ff8e36;
+  --o-color-orange6: #ff9b43;
+  --o-color-orange7: #ffb45c;
+  --o-color-orange8: #ffce76;
+  --o-color-orange9: #ffcf8f;
+  --o-color-orange10: #ffd2af;
+
+  // 灰蓝色
+  --o-color-greyblue1: #e5e8f0;
+  --o-color-greyblue2: #f7f8fa;
+  --o-color-greyblue3: #f5f6f8;
+
+  // 灰黑色
+  --o-color-greyblack1: #1e1e1e;
+  --o-color-greyblack2: #242424;
+  --o-color-greyblack3: #2e2e2e;
+  --o-color-greyblack4: #383838;
+
+  // 白色
+  --o-color-white: #ffffff;
+
+  // 黑色
+  --o-color-black: #000000;
+
+  // 透明
+  --o-color-transparent: transparent;
+
+  /**
+   * 状态颜色 && 功能颜色
+   */
+
+  // 成功色
+  --o-color-success1: var(--o-color-green5); // normal
+  --o-color-success2: var(--o-color-green7); // hover
+  --o-color-success3: var(--o-color-green10); // disabled
+
+  // 告警色
+  --o-color-warning1: var(--o-color-orange5); // normal
+  --o-color-warning2: var(--o-color-orange7); // hover
+  --o-color-warning3: var(--o-color-orange10); // disabled
+
+  // 错误色
+  --o-color-error1: var(--o-color-red5); // normal
+  --o-color-error2: var(--o-color-red7); // hover
+  --o-color-error3: var(--o-color-red10); // disabled
+
+  // 品牌色
+  --o-color-brand1: var(--o-color-kleinblue5); // 常规、文字
+  --o-color-brand2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-brand3: var(--o-color-kleinblue4); // 确认
+  --o-color-brand4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-brand5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-brand6: var(
+    --o-color-kleinblue10
+  ); // 文字禁用，暂和一般禁用保持一致
+
+  // 文字颜色
+  --o-color-text1: var(--o-color-black); // 强调/正文标题 黑色
+  --o-color-text2: var(--o-color-white); // 强调/正文标题 白色
+  --o-color-text3: var(--o-color-neutral4); // 次强调/正文标题
+  --o-color-text4: var(--o-color-neutral6); // 次要信息/正文
+  --o-color-text5: var(--o-color-neutral11); // 置灰信息
+  --o-color-text-secondary: var(--o-color-neutral6); // 次级文字颜色
+
+  // 背景色
+  --o-color-bg1: var(--o-color-greyblue3); // 整体背景色
+  --o-color-bg2: var(--o-color-white); // 一级容器背景色
+  --o-color-bg3: var(--o-color-greyblue2); // 二级容器背景色
+  --o-color-bg4: var(--o-color-greyblue1); // 三级容器背景色
+  --o-color-bg5: var(--o-color-white); // 弹出框、tooltip背景色
+  --o-color-bg6: rgba(0, 0, 0, 0.5); // 蒙层
+  --o-color-bg-secondary: var(--o-color-neutral11); // 次级颜色背景颜色
+
+  // 链接色
+  --o-color-link1: var(--o-color-kleinblue5); // 常规
+  --o-color-link2: var(--o-color-kleinblue8); // 悬浮
+  --o-color-link3: var(--o-color-kleinblue4); // 点击
+  --o-color-link4: var(--o-color-kleinblue6); // 特殊场景
+  --o-color-link5: var(--o-color-kleinblue10); // 一般禁用
+  --o-color-link6: var(--o-color-kleinblue10); // 文字禁用，暂和一般禁用保持一致
+
+  // 边框颜色
+  --o-color-border1: var(--o-color-neutral6);
+  --o-color-border2: var(--o-color-neutral11);
+  --o-color-border3: var(--o-color-kleinblue5);
+
+  // 分割线颜色
+  --o-color-division1: var(--o-color-neutral11);
+
+  // 填充色，用于阴影容器背景
+  --o-color-fill1: var(
+    --o-color-white
+  ); // SL1 一级投影容器背景，应用于默认状态的卡片、楼层、导航栏、组件里局部投影背景等
+  --o-color-fill2: var(
+    --o-color-white
+  ); // SL2 二级投影容器背景，应用于卡片、组件里局部投影等
+  --o-color-fill2_hover: var(
+    --o-color-white
+  ); // SL2-hover 升起投影容器背景，应用于悬停状态的卡片等，是SL2的激活态
+  --o-color-fill3: var(
+    --o-color-white
+  ); // SL3 三级投影容器背景，应用于一级投影上的卡片、组件等
+  --o-color-fill4: var(
+    --o-color-white
+  ); // SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器
+  --o-color-fill5: var(
+    --o-color-white
+  ); // SL5 弹出阴影容器背景，应用于模态弹窗投影
+}
diff --git a/packages/shared/components/Opendesign/style/_font.scss b/packages/shared/components/Opendesign/style/_font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..56116fef4f7959919bfd44ce074a6761428aaa17
--- /dev/null
+++ b/packages/shared/components/Opendesign/style/_font.scss
@@ -0,0 +1,26 @@
+// 字体
+:root {
+  // 字体font-size
+  --o-font-size-h1: 64px;
+  --o-font-size-h2: 54px;
+  --o-font-size-h3: 36px;
+  --o-font-size-h4: 28px;
+  --o-font-size-h5: 24px;
+  --o-font-size-h6: 20px;
+  --o-font-size-h7: 18px;
+  --o-font-size-h8: 16px;
+  --o-font-size-text: 14px;
+  --o-font-size-tip: 12px;
+
+  // 字体line-height
+  --o-line-height-h1: 84px;
+  --o-line-height-h2: 76px;
+  --o-line-height-h3: 48px;
+  --o-line-height-h4: 36px;
+  --o-line-height-h5: 32px;
+  --o-line-height-h6: 28px;
+  --o-line-height-h7: 26px;
+  --o-line-height-h8: 24px;
+  --o-line-height-text: 22px;
+  --o-line-height-tip: 18px;
+}
diff --git a/packages/shared/components/Opendesign/style/_shadow.scss b/packages/shared/components/Opendesign/style/_shadow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..78dcd8d96a0a483060378c3cdb1dd4e6b7e80178
--- /dev/null
+++ b/packages/shared/components/Opendesign/style/_shadow.scss
@@ -0,0 +1,9 @@
+// 阴影，注：SL2有hover投影
+:root {
+  --o-shadow-l1: 0 1px 5px rgba(45, 47, 51, 0.1); // SL1 一级投影，应用于楼层、导航栏、组件里局部投影等，
+  --o-shadow-l2: 0 1px 5px rgba(45, 47, 51, 0.1); // SL2-normal 二级投影，应用于卡片、组件里局部投影等
+  --o-shadow-l2_hover: 0 6px 18px rgba(0, 47, 167, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
+  --o-shadow-l3: 0 6px 18px rgba(45, 47, 51, 0.14); // SL3 三级投影，应用于一级投影上的卡片、组件等
+  --o-shadow-l4: 0 10px 32px rgba(45, 47, 51, 0.18); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
+  --o-shadow-l5: 0 12px 42px rgba(45, 47, 51, 0.24); // SL5 弹出阴影，应用于模态弹窗投影
+}
diff --git a/packages/shared/components/Opendesign/style/_spacing.scss b/packages/shared/components/Opendesign/style/_spacing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3dcd5bfbe1370420420c90af1683fed7df3393f
--- /dev/null
+++ b/packages/shared/components/Opendesign/style/_spacing.scss
@@ -0,0 +1,13 @@
+// 间距
+:root {
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
+}
diff --git a/packages/shared/components/Opendesign/style/variable.scss b/packages/shared/components/Opendesign/style/variable.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c7242722c856dd379092fd4ea79825a664a01b7b
--- /dev/null
+++ b/packages/shared/components/Opendesign/style/variable.scss
@@ -0,0 +1,4 @@
+@import './_color.scss';
+@import './_shadow.scss';
+@import './_font.scss';
+@import './_spacing.scss';
diff --git a/packages/shared/hooks/useScreen.ts b/packages/shared/hooks/useScreen.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25e579d49a6f92af6db52e67f175b31907bbb724
--- /dev/null
+++ b/packages/shared/hooks/useScreen.ts
@@ -0,0 +1,159 @@
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
+
+export enum Size {
+  Phone = 'phone',
+  PadV = 'pad_v',
+  PadH = 'pad_h',
+  Laptop = 'laptop',
+}
+
+export type ScreenSizeT =
+  | typeof Size.Phone
+  | Size.PadV
+  | Size.PadH
+  | Size.Laptop;
+
+export const ScreenConfig = {
+  [Size.Phone]: 600,
+  [Size.PadV]: 840,
+  [Size.PadH]: 1200,
+  [Size.Laptop]: 1440,
+};
+
+/**
+ * lt: less than, 小于 <
+ * le: less than or equal to, 小于等于 <=
+ * eq: equal to, 等于 =
+ * ne: never equal to, 不等于 !=
+ * ge: greater than or equal to, 大于等于 >=
+ * gt: greater than, 大于 >
+ */
+export type CompareT = 'lt' | 'le' | 'eq' | 'ne' | 'ge' | 'gt';
+
+const CompareHandler = {
+  lt: (a: number, b: number) => a < b,
+  le: (a: number, b: number) => a <= b,
+  eq: (a: number, b: number) => a === b,
+  ne: (a: number, b: number) => a !== b,
+  ge: (a: number, b: number) => a >= b,
+  gt: (a: number, b: number) => a > b,
+};
+
+export const useScreen = () => {
+  const screenSize = reactive({
+    width: 1440,
+    height: 0,
+  });
+
+  const current = ref<ScreenSizeT>(Size.Laptop);
+
+  const getSize = (width = screenSize.width) => {
+    if (width < ScreenConfig[Size.Phone]) {
+      return Size.Phone;
+    } else if (width < ScreenConfig[Size.PadV]) {
+      return Size.PadV;
+    } else if (width < ScreenConfig[Size.PadH]) {
+      return Size.PadH;
+    } else {
+      return Size.Laptop;
+    }
+  };
+
+  const compare = (type: CompareT = 'eq', size: ScreenSizeT) => {
+    const w1 = screenSize.width;
+    const w2 = ScreenConfig[size];
+    const handler = CompareHandler[type];
+    return handler(w1, w2);
+  };
+
+  /**
+   * phone
+   */
+  const isPhone = computed(() => compare('le', Size.Phone)); // [0, 600]
+  const gtPhone = computed(() => compare('gt', Size.Phone)); // [601, -]
+
+  /**
+   * pad
+   */
+  const isPad = computed(
+    () => compare('gt', Size.Phone) && compare('le', Size.PadH)
+  ); // [601, 1200]
+  const lePad = computed(() => compare('le', Size.PadH)); // [0, 1200]
+  const gtPad = computed(() => compare('gt', Size.PadH)); // [1201, -]
+
+  /**
+   * pad_v
+   */
+  const isPadV = computed(
+    () => compare('gt', Size.Phone) && compare('le', Size.PadV)
+  ); // [601, 840]
+  const lePadV = computed(() => compare('le', Size.PadV)); // [0, 840]
+  const gtPadV = computed(() => compare('gt', Size.PadV)); // [841, -]
+
+  /**
+   * pad_h
+   */
+  const isPadH = computed(
+    () => compare('gt', Size.PadV) && compare('le', Size.PadH)
+  ); // [841, 1200]
+
+  /**
+   * laptop
+   */
+  const isLaptop = computed(
+    () => compare('gt', Size.PadH) && compare('le', Size.Laptop)
+  ); // [1201, 1440]
+  const leLaptop = computed(() => compare('le', Size.Laptop)); // [0, 1440]
+  const gtLaptop = computed(() => compare('gt', Size.Laptop)); // [1441, -]
+  const isPadToLaptop = computed(
+    () => compare('gt', Size.Phone) && compare('le', Size.Laptop)
+  ); // [601, 1440]
+  const isPadVToLaptop = computed(
+    () => compare('gt', Size.PadV) && compare('le', Size.Laptop)
+  ); // [841, 1440]
+
+  const onWindowResize = () => {
+    const { innerWidth, innerHeight } = window;
+    screenSize.width = innerWidth;
+    screenSize.height = innerHeight;
+    current.value = getSize();
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', onWindowResize);
+    onWindowResize();
+    nextTick(() => onWindowResize());
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onWindowResize);
+  });
+
+  return {
+    // 获取屏幕宽度分级
+    getSize,
+    // 当前屏幕分级
+    current,
+    // 当前屏幕宽度
+    size: screenSize,
+
+    isPhone, // [0, 600]
+    gtPhone, // [601, -]
+
+    isPad, // [601, 1200]
+    lePad, // [0, 1200]
+    gtPad, // [1201, -]
+
+    isPadV, // [601, 840]
+    lePadV, // [0, 840]
+    gtPadV, // [841, -]
+
+    isPadH, // [841, 1200]
+
+    isLaptop, // [1201, 1440]
+    leLaptop, // [0, 1440]
+    gtLaptop, // [1441, -]
+    isPadToLaptop, // [601, 1440]
+    isPadVToLaptop, // [841, 1440]
+  };
+};
diff --git a/packages/shared/plugins/axios/handleResponse.ts b/packages/shared/plugins/axios/handleResponse.ts
index 693c2d5911cdb08551fd81299682498da36a42cf..316d50b5e9d0606a9d69be723ccba724adafa4fd 100644
--- a/packages/shared/plugins/axios/handleResponse.ts
+++ b/packages/shared/plugins/axios/handleResponse.ts
@@ -14,26 +14,25 @@ export default (response: AxiosResponse) => {
     let message = (response.data || {}).msg;
 
     switch (code) {
-    case 400:
-      break;
-    case 4001:
-      message = message || '登录设备数量超出限制';
-      break;
-    case 403:
-      message = message || '未登录';
-      break;
-    case 404:
-      message = message || '请求地址错误';
-      break;
-    case 412:
-      message = message || '未找到有效session';
-      break;
-    default:
-      break;
+      case 400:
+        break;
+      case 4001:
+        message = message || '登录设备数量超出限制';
+        break;
+      case 403:
+        message = message || '未登录';
+        break;
+      case 404:
+        message = message || '请求地址错误';
+        break;
+      case 412:
+        message = message || '未找到有效session';
+        break;
+      default:
+        break;
     }
-    return {
-      code,
-      message,
-    };
+    response.data.code = code;
+    response.data.message = message;
+    return response;
   }
 };
diff --git a/packages/shared/plugins/axios/index.ts b/packages/shared/plugins/axios/index.ts
index 6bdd465fbb3b342642c61c0475913520a009749d..2dd42d087a61f8701c9e0209d394227b9b508db0 100644
--- a/packages/shared/plugins/axios/index.ts
+++ b/packages/shared/plugins/axios/index.ts
@@ -75,7 +75,7 @@ const pendingPool: Map<string, any> = new Map();
  * 请求拦截
  */
 const requestInterceptorId = request.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
+  (config) => {
     // 定义取消请求
     config.cancelToken = new axios.CancelToken((cancelFn) => {
       if (!config.url) {
@@ -106,7 +106,7 @@ const requestInterceptorId = request.interceptors.request.use(
  * 响应拦截
  */
 const responseInterceptorId = request.interceptors.response.use(
-  (response: AxiosResponse) => {
+  (response) => {
     const { config } = response;
     // 请求完成，移除请求池
     if (config.url) {
@@ -115,12 +115,12 @@ const responseInterceptorId = request.interceptors.response.use(
 
     return Promise.resolve(handleResponse(response));
   },
-  (err: AxiosError) => {
+  (err: AxiosError<any>) => {
     const { config } = err;
 
     // 非取消请求发生异常，同样将请求移除请求池
-    if (!axios.isCancel(err) && config.url) {
-      pendingPool.delete(config.url);
+    if (!axios.isCancel(err) && config?.url) {
+      pendingPool.delete(config?.url);
     }
 
     if (err.response) {
@@ -155,11 +155,11 @@ const responseInterceptorId = request.interceptors.response.use(
     else {
       // 被取消的请求
       if (axios.isCancel(err)) {
-        throw new axios.Cancel(err.message || `请求'${config.url}'被取消`);
-      } else if (err.stack && err.stack.includes('timeout')) {
-        err.message = '请求超时!';
+        throw new axios.Cancel(err.message || `请求'${config?.url}'被取消`);
+      } else if ((err as any).stack && (err as any).stack.includes('timeout')) {
+        (err as any).message = '请求超时!';
       } else {
-        err.message = '连接服务器失败!';
+        (err as any).message = '连接服务器失败!';
       }
     }
     return Promise.reject(err);
diff --git a/packages/shared/stores/cookies.ts b/packages/shared/stores/cookies.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f0f04f06be42f2b0548aae034b04b4515030015
--- /dev/null
+++ b/packages/shared/stores/cookies.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { getCookie } from '../utils/cookies';
+
+export const COOKIE_AGREED_STATUS = {
+  NOT_SIGNED: '0', // 未签署
+  ALL_AGREED: '1', // 同意所有cookie
+  NECCESSARY_AGREED: '2', // 仅同意必要cookie
+};
+
+export const COOKIE_KEY = 'agreed-cookiepolicy';
+
+/**
+ * cookie版本
+ */
+export const useCookieStore = defineStore('cookie', {
+  state: () => ({
+    status: '0',
+    version: import.meta.env.VITE_COOKIE_VER,
+  }),
+  getters: {
+    // 是否全部同意
+    isAllAgreed: (state) => state.status === '1',
+  },
+  actions: {
+    getUserCookieStatus() {
+      const cookieVal = getCookie(COOKIE_KEY) ?? '0';
+      const cookieStatusVal = cookieVal[0];
+      const privacyVersionVal = cookieVal.slice(1);
+      if (privacyVersionVal !== this.version) {
+        this.status = COOKIE_AGREED_STATUS.NOT_SIGNED;
+        return COOKIE_AGREED_STATUS.NOT_SIGNED;
+      }
+
+      if (cookieStatusVal === COOKIE_AGREED_STATUS.ALL_AGREED) {
+        this.status = COOKIE_AGREED_STATUS.ALL_AGREED;
+        return COOKIE_AGREED_STATUS.ALL_AGREED;
+      } else if (cookieStatusVal === COOKIE_AGREED_STATUS.NECCESSARY_AGREED) {
+        this.status = COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+        return COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+      } else {
+        this.status = COOKIE_AGREED_STATUS.NOT_SIGNED;
+        return COOKIE_AGREED_STATUS.NOT_SIGNED;
+      }
+    },
+  },
+});
diff --git a/packages/shared/styles/mixin/screen.scss b/packages/shared/styles/mixin/screen.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4e8c8ef1bcd69bed60c73a5357abc26046ee0217
--- /dev/null
+++ b/packages/shared/styles/mixin/screen.scss
@@ -0,0 +1,43 @@
+// 断点定义
+$breakpoints: (
+  // phone
+  'phone': (0, 600px),
+  '>phone': 601px,
+  // pad
+  'pad': (601px, 1200px),
+  '<=pad': (0, 1200px),
+  '>pad': 1201px,
+  // pad-v
+  'pad_v': (601px, 840px),
+  '<=pad_v': (0, 840px),
+  '>pad_v': 841px,
+  // pad-h
+  'pad_h': (841px, 1200px),
+  // laptop
+  'laptop': (1201px, 1440px),
+  '<=laptop': (0, 1440px),
+  '>laptop': 1441px,
+  'pad-laptop': (601px, 1440px),
+  'pad_v-laptop': (841px, 1440px)
+);
+
+@mixin respond-to($breakname) {
+  $bp: map-get($breakpoints, $breakname);
+  @if type-of($bp) == 'list' {
+    $min: nth($bp, 1);
+    $max: nth($bp, 2);
+    @if $min == 0 {
+      @media (max-width: $max) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $min) and (max-width: $max) {
+        @content;
+      }
+    }
+  } @else {
+    @media (min-width: $bp) {
+      @content;
+    }
+  }
+}
diff --git a/packages/shared/svg-icons/icon-close.svg b/packages/shared/svg-icons/icon-close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2a02c9a61a54817db345e79a34661a38b967e82b
--- /dev/null
+++ b/packages/shared/svg-icons/icon-close.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M18.528 5.472c0.246 0.246 0.271 0.63 0.074 0.903l-0.074 0.087-5.54 5.538 0.006 0.006-0.989 0.989-0.006-0.006-5.538 5.54c-0.273 0.273-0.717 0.273-0.99 0-0.246-0.246-0.271-0.63-0.074-0.903l0.074-0.087 5.538-5.539-5.538-5.538-0.074-0.087c-0.197-0.274-0.172-0.657 0.074-0.903s0.63-0.271 0.903-0.074l0.087 0.074 5.538 5.539 5.539-5.539c0.273-0.273 0.717-0.273 0.99 0zM14.551 13.561l3.978 3.978 0.074 0.087c0.197 0.274 0.172 0.657-0.074 0.903s-0.63 0.271-0.903 0.074l-0.087-0.074-3.978-3.978c-0.273-0.273-0.273-0.717 0-0.99v0c0.273-0.273 0.717-0.273 0.99 0z"></path>
+</svg>
diff --git a/packages/shared/utils/cookies.ts b/packages/shared/utils/cookies.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25db62ca9773bc917ae8bec2596ab5e528f09bea
--- /dev/null
+++ b/packages/shared/utils/cookies.ts
@@ -0,0 +1,33 @@
+import Cookies from 'js-cookie';
+
+/**
+ * 获取指定key的cookie值
+ * @param key
+ * @returns 值
+ */
+export function getCookie(key: string) {
+  return Cookies.get(key);
+}
+
+/**
+ * 设置cookie
+ * @param key cookie的key
+ * @param value cookie的值
+ * @param day cookie的过期时间 默认1天
+ */
+export function setCookie(
+  key: string,
+  value: string,
+  day = 1,
+  domain: string = location.hostname
+) {
+  Cookies.set(key, value, { expires: day, domain });
+}
+
+/**
+ * 删除cookie
+ * @param key cookie的key
+ */
+export function removeCookie(key: string) {
+  Cookies.remove(key);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51fcc24644764c9149711e0ba43f5b9f1e81d6b5..51e6f92402aec6bc5cf0f06b05ea6b7f3870aeb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.2.31)
+        version: 2.0.4(vue@3.2.25)
       '@opensig/open-analytics':
         specifier: ^0.0.9
         version: 0.0.9
@@ -18,8 +18,8 @@ importers:
         specifier: ^7.4.0
         version: 7.4.0
       axios:
-        specifier: ^0.26.0
-        version: 0.26.1
+        specifier: ^1.7.4
+        version: 1.7.4
       d3:
         specifier: ^7.4.4
         version: 7.4.4
@@ -28,10 +28,13 @@ importers:
         version: 5.3.2
       element-plus:
         specifier: ^2.1.4
-        version: 2.1.4(@types/lodash-es@4.17.6)(vue@3.2.31)
+        version: 2.1.4(@types/lodash-es@4.17.6)(vue@3.2.25)
       html2canvas:
         specifier: ^1.4.1
         version: 1.4.1
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -40,20 +43,23 @@ importers:
         version: 8.0.1
       pinia:
         specifier: ^2.0.11
-        version: 2.0.12(typescript@4.6.2)(vue@3.2.31)
+        version: 2.0.12(typescript@4.6.2)(vue@3.2.25)
       swiper:
         specifier: ^8.0.7
         version: 8.0.7
       vue:
         specifier: ^3.2.25
-        version: 3.2.31
+        version: 3.2.25
       vue-i18n:
         specifier: ^9.1.9
-        version: 9.1.9(vue@3.2.31)
+        version: 9.1.9(vue@3.2.25)
       vue-router:
         specifier: ^4.0.13
-        version: 4.0.14(vue@3.2.31)
+        version: 4.0.14(vue@3.2.25)
     devDependencies:
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
       '@types/lodash-es':
         specifier: ^4.17.6
         version: 4.17.6
@@ -68,7 +74,10 @@ importers:
         version: 5.16.0(eslint@8.11.0)(typescript@4.6.2)
       '@vitejs/plugin-vue':
         specifier: ^4.6.2
-        version: 4.6.2(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.31)
+        version: 4.6.2(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.1.1
+        version: 4.1.1(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)
       '@vue/eslint-config-prettier':
         specifier: ^7.0.0
         version: 7.0.0(eslint@8.11.0)(prettier@2.6.0)
@@ -92,13 +101,13 @@ importers:
         version: 4.6.2
       unplugin-auto-import:
         specifier: ^0.11.5
-        version: 0.11.5(@vueuse/core@8.1.2(vue@3.2.31))(rollup@3.29.4)
+        version: 0.11.5(@vueuse/core@8.1.2(vue@3.2.25))(rollup@3.29.4)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.24.7)(rollup@3.29.4)(vue@3.2.31)
+        version: 0.26.0(@babel/parser@7.26.8)(rollup@3.29.4)(vue@3.2.25)
       vite:
-        specifier: ^4.5.3
-        version: 4.5.3(@types/node@17.0.22)(sass@1.49.9)
+        specifier: ^4.5.6
+        version: 4.5.6(@types/node@17.0.22)(sass@1.49.9)
       vue-tsc:
         specifier: ^1.8.25
         version: 1.8.27(typescript@4.6.2)
@@ -110,7 +119,7 @@ importers:
         version: link:../shared
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/gauss:
     dependencies:
@@ -119,7 +128,7 @@ importers:
         version: link:../shared
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/harmony:
     dependencies:
@@ -128,7 +137,7 @@ importers:
         version: link:../shared
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/lookeng:
     dependencies:
@@ -137,7 +146,7 @@ importers:
         version: link:../shared
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/mindspore:
     dependencies:
@@ -146,16 +155,20 @@ importers:
         version: link:../shared
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/shared:
     dependencies:
       unplugin-icons:
         specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
 packages:
 
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
   '@antfu/install-pkg@0.1.0':
     resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
 
@@ -168,24 +181,132 @@ packages:
   '@antfu/utils@0.7.8':
     resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.26.8':
+    resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.26.8':
+    resolution: {integrity: sha512-l+lkXCHS6tQEc5oUpK28xBOZ6+HwaH7YwoYQbLFiYb4nS2/l1tKnZEtEWkD0GuiYdvArf9qBS0XlQGXzPMsNqQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.26.8':
+    resolution: {integrity: sha512-ef383X5++iZHWAXX0SXQR6ZyQhw/0KtTkrTz61WXRhFM6dhpHulO/RJz79L8S6ugZHJkOOkUrUdxgdF2YiPFnA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.25.9':
+    resolution: {integrity: sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.26.5':
+    resolution: {integrity: sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.26.5':
+    resolution: {integrity: sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.16.7':
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.17.8':
-    resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.26.7':
+    resolution: {integrity: sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/parser@7.24.7':
     resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.8':
+    resolution: {integrity: sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.26.8':
+    resolution: {integrity: sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.26.8':
+    resolution: {integrity: sha512-iNKaX3ZebKIsCvJ+0jd6embf+Aulaa3vNBqZ41kM7iTWjx5qzWKXGHiJUW3+nTpQ18SG11hdF8OAzKrpXkb96Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.26.8':
+    resolution: {integrity: sha512-nic9tRkjYH0oB2dzr/JoGIm+4Q6SuYeLEiIiZDwBscRMYFJ+tMAz98fuel9ZnbXViA2I0HVSSRRK8DW5fjXStA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.17.0':
     resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.8':
+    resolution: {integrity: sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==}
+    engines: {node: '>=6.9.0'}
+
   '@ctrl/tinycolor@3.4.0':
     resolution: {integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==}
     engines: {node: '>=10'}
@@ -379,9 +500,27 @@ packages:
     resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
     engines: {node: '>= 10'}
 
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -505,9 +644,15 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/gensync@1.0.4':
+    resolution: {integrity: sha512-C3YYeRQWp2fmq9OryX+FoDy8nXS6scQ7dPptD8LnFDAUNcKWJjXQKDNJD3HVm+kOUsXhTOkpi69vI4EuAr95bA==}
+
   '@types/geojson@7946.0.8':
     resolution: {integrity: sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==}
 
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
   '@types/json-schema@7.0.10':
     resolution: {integrity: sha512-BLO9bBq59vW3fxCpD4o0N4U+DXsvwvIcl+jofw0frQo/GrBFC+/jRZj1E7kgp6dvTyNmA4y6JCV5Id/r3mNP5A==}
 
@@ -581,6 +726,13 @@ packages:
     resolution: {integrity: sha512-jqxO8msp5vZDhikTwq9ubyMHqZ67UIvawohr4qF3KhlpL7gzSjOd+8471H3nh5LyABkaI85laEKKU8SnGUK5/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@vitejs/plugin-vue-jsx@4.1.1':
+    resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.0.0
+
   '@vitejs/plugin-vue@4.6.2':
     resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -597,23 +749,51 @@ packages:
   '@volar/typescript@1.11.1':
     resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
 
-  '@vue/compiler-core@3.2.31':
-    resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
+  '@vue/babel-helper-vue-transform-on@1.2.5':
+    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
+
+  '@vue/babel-plugin-jsx@1.2.5':
+    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.5':
+    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/compiler-core@3.2.25':
+    resolution: {integrity: sha512-FlffKezIqztTCTyG0klkYRwhdyL6b1PTTCIerPb4p2R9qQaczccTX5g9ysi9w6tpLQ48a1WiXnFDJhWD7XoqwA==}
 
   '@vue/compiler-core@3.4.27':
     resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==}
 
-  '@vue/compiler-dom@3.2.31':
-    resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
+  '@vue/compiler-dom@3.2.25':
+    resolution: {integrity: sha512-4JrburkRg4VWbc8AKpzKFWbNY4MDXshqjFl53+vINq7zaw3Z7aSqnLv0EkKh8B8ynf/MYsAdygGutyVbEWYxOw==}
 
   '@vue/compiler-dom@3.4.27':
     resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
 
-  '@vue/compiler-sfc@3.2.31':
-    resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
+  '@vue/compiler-sfc@3.2.25':
+    resolution: {integrity: sha512-PminuOYIcFI7UZn+mdy2OPbogyAb0IHkVuqwmLDJiSRFhc/QAXQnO9KdS4nez3bQ9XlQmoAveQzcZuekHzdb5w==}
+
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
-  '@vue/compiler-ssr@3.2.31':
-    resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
+  '@vue/compiler-ssr@3.2.25':
+    resolution: {integrity: sha512-+BAl8U5D3JkGR6086PFx1BQQ5km3z9fT88hy/7lzf8i3vEDdPQodadnX2t6tndFjIux05MEKg43DeocOojT0mw==}
+
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
   '@vue/devtools-api@6.1.3':
     resolution: {integrity: sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==}
@@ -643,29 +823,32 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity-transform@3.2.31':
-    resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
+  '@vue/reactivity-transform@3.2.25':
+    resolution: {integrity: sha512-fOiW67PUalicMfMr4Sc9l8mUtkN7ZD+G1/zJV8blzQ8GEZSeRcJm11gqve6Ps623ju5YORu7V/Q1gZoOJ9WO4g==}
 
-  '@vue/reactivity@3.2.31':
-    resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
+  '@vue/reactivity@3.2.25':
+    resolution: {integrity: sha512-Dxc/u/dxoneIDqyfmuwPVBR0G3OQJqe3Dtz4z3NGt+CGj4UuOZQfN5raJPmp6xGYgrtC6PAWoCgHhyrgr1qCtg==}
 
-  '@vue/runtime-core@3.2.31':
-    resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
+  '@vue/runtime-core@3.2.25':
+    resolution: {integrity: sha512-2+fo5+lofT4xr8W2rtjyz+AM+UB1U/UNLH6ISFdHWNWuveSWxF+vkCQaATmhp6O3XA7QJAbHoRqIZor20EWSfQ==}
 
-  '@vue/runtime-dom@3.2.31':
-    resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
+  '@vue/runtime-dom@3.2.25':
+    resolution: {integrity: sha512-3gGeyHnygn4yG6bssRKhQIxnE8vgB8FtYUUwoYoA/Pm0vZ+bGPoZax4TbtZD9eW9rvs8CY8boNp4t/sJaPJrRQ==}
 
-  '@vue/server-renderer@3.2.31':
-    resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
+  '@vue/server-renderer@3.2.25':
+    resolution: {integrity: sha512-qFRmcyeyyhWbnTPn6cbCZ4bjeuPLSkUpFa98p4LEJtFBFbxjGnrHXHOjYxCY3Lznmxe0kMM3qG4t3GnjcXP12w==}
     peerDependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
-  '@vue/shared@3.2.31':
-    resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
+  '@vue/shared@3.2.25':
+    resolution: {integrity: sha512-DkHJFV2gw9WBRmUCa21eyG0WvlF0l1QFOgTkWj29O4mt2Tv3BSE5PQOKhUruZIym4bBYCqx9ZGtoD1WohDprow==}
 
   '@vue/shared@3.4.27':
     resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
 
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
   '@vueuse/core@8.1.2':
     resolution: {integrity: sha512-prI2GzigBUtJNTcwRjJPzUPLFoRZM1RZFR464DFdwgU8TxRFf7dRvuvWFDNbCATzLExHFnGI3zTp9GkXTTZxgQ==}
     peerDependencies:
@@ -731,8 +914,11 @@ packages:
   async-validator@4.0.7:
     resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==}
 
-  axios@0.26.1:
-    resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.7.4:
+    resolution: {integrity: sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -755,10 +941,22 @@ packages:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
 
+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  caniuse-lite@1.0.30001699:
+    resolution: {integrity: sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -778,6 +976,10 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -788,6 +990,9 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -795,8 +1000,8 @@ packages:
   css-line-break@2.1.0:
     resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
 
-  csstype@2.6.20:
-    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
+  csstype@2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
 
   d3-array@3.1.6:
     resolution: {integrity: sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==}
@@ -946,6 +1151,10 @@ packages:
   delaunator@5.0.0:
     resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -957,9 +1166,16 @@ packages:
   dom7@4.0.4:
     resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   echarts@5.3.2:
     resolution: {integrity: sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==}
 
+  electron-to-chromium@1.5.98:
+    resolution: {integrity: sha512-bI/LbtRBxU2GzK7KK5xxFd2y9Lf9XguHooPYbcXWy6wUoT8NMnffsvRhPmSeUHLSDKAEtKuTaEtK4Ms15zkIEA==}
+
   element-plus@2.1.4:
     resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==}
     peerDependencies:
@@ -969,11 +1185,31 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
     hasBin: true
 
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
@@ -1118,6 +1354,10 @@ packages:
       debug:
         optional: true
 
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1132,6 +1372,18 @@ packages:
   functional-red-black-tree@1.0.1:
     resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-intrinsic@1.2.7:
+    resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
   get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -1148,6 +1400,10 @@ packages:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
   globals@13.13.0:
     resolution: {integrity: sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==}
     engines: {node: '>=8'}
@@ -1156,10 +1412,22 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -1168,6 +1436,10 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
   html2canvas@1.4.1:
     resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
     engines: {node: '>=8.0.0'}
@@ -1231,16 +1503,33 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
@@ -1279,6 +1568,9 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -1294,10 +1586,17 @@ packages:
     resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
     engines: {node: '>=12'}
 
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
   magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
@@ -1312,6 +1611,14 @@ packages:
     resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -1337,9 +1644,17 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -1405,6 +1720,9 @@ packages:
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -1428,6 +1746,10 @@ packages:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.2:
+    resolution: {integrity: sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -1441,6 +1763,9 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.1.1:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
@@ -1498,6 +1823,10 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
   semver@7.3.5:
     resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==}
     engines: {node: '>=10'}
@@ -1527,8 +1856,8 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
   source-map@0.6.1:
@@ -1565,6 +1894,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
   swiper@8.0.7:
     resolution: {integrity: sha512-GHjDfxSZdupfU7LrSVOpaNaT7R1D2zxopPGBFz1UOXOtsYvVJLg0k6NvkTAD7qn0ASl5pTti82qoYwvYvIkg4g==}
     engines: {node: '>= 4.7.0'}
@@ -1678,6 +2010,12 @@ packages:
     resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
     engines: {node: '>=14.0.0'}
 
+  update-browserslist-db@1.1.2:
+    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -1691,8 +2029,8 @@ packages:
   v8-compile-cache@2.3.0:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
 
-  vite@4.5.3:
-    resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
+  vite@4.5.6:
+    resolution: {integrity: sha512-ElBNuVvJKslxcfY2gMmae5IjaKGqCYGicCNZ+8R56sAznobeE3pI9ctzI17cBS/6OJh5YuQNMSN4BP4dRjugBg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -1756,8 +2094,8 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  vue@3.2.31:
-    resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
+  vue@3.2.25:
+    resolution: {integrity: sha512-jU3t7fyQDHoCWCqhmRrnSmYZvHC35tOJTP704di7HGfq5EcFA1cU/1ZPjUV1eCxJev65Khjyfni+vk9oa+eTtw==}
 
   web-vitals@4.2.4:
     resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
@@ -1784,6 +2122,9 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -1796,6 +2137,11 @@ packages:
 
 snapshots:
 
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@antfu/install-pkg@0.1.0':
     dependencies:
       execa: 5.1.1
@@ -1809,30 +2155,192 @@ snapshots:
 
   '@antfu/utils@0.7.8': {}
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.0.0
+
+  '@babel/compat-data@7.26.8': {}
+
+  '@babel/core@7.26.8':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.8
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.8)
+      '@babel/helpers': 7.26.7
+      '@babel/parser': 7.26.8
+      '@babel/template': 7.26.8
+      '@babel/traverse': 7.26.8
+      '@babel/types': 7.26.8
+      '@types/gensync': 1.0.4
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.26.8':
+    dependencies:
+      '@babel/parser': 7.26.8
+      '@babel/types': 7.26.8
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.8
+
+  '@babel/helper-compilation-targets@7.26.5':
+    dependencies:
+      '@babel/compat-data': 7.26.8
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.8)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.26.8
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.8
+      '@babel/types': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.8
+      '@babel/types': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.8
+
+  '@babel/helper-plugin-utils@7.26.5': {}
+
+  '@babel/helper-replace-supers@7.26.5(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.8
+      '@babel/types': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.16.7': {}
 
-  '@babel/parser@7.17.8':
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helpers@7.26.7':
     dependencies:
-      '@babel/types': 7.17.0
+      '@babel/template': 7.26.8
+      '@babel/types': 7.26.8
 
   '@babel/parser@7.24.7':
     dependencies:
       '@babel/types': 7.17.0
 
+  '@babel/parser@7.26.8':
+    dependencies:
+      '@babel/types': 7.26.8
+
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-typescript@7.26.8(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.8)
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.8)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/template@7.26.8':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.8
+      '@babel/types': 7.26.8
+
+  '@babel/traverse@7.26.8':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.8
+      '@babel/parser': 7.26.8
+      '@babel/template': 7.26.8
+      '@babel/types': 7.26.8
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.17.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.16.7
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.8':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@ctrl/tinycolor@3.4.0': {}
 
-  '@element-plus/icons-vue@1.1.4(vue@3.2.31)':
+  '@element-plus/icons-vue@1.1.4(vue@3.2.25)':
     dependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
-  '@element-plus/icons-vue@2.0.4(vue@3.2.31)':
+  '@element-plus/icons-vue@2.0.4(vue@3.2.25)':
     dependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
   '@esbuild/android-arm64@0.18.20':
     optional: true
@@ -1972,8 +2480,25 @@ snapshots:
       '@intlify/runtime': 9.1.9
       '@intlify/shared': 9.1.9
 
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2121,8 +2646,12 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
+  '@types/gensync@1.0.4': {}
+
   '@types/geojson@7946.0.8': {}
 
+  '@types/js-cookie@3.0.6': {}
+
   '@types/json-schema@7.0.10': {}
 
   '@types/lodash-es@4.17.6':
@@ -2215,10 +2744,20 @@ snapshots:
       '@typescript-eslint/types': 5.16.0
       eslint-visitor-keys: 3.3.0
 
-  '@vitejs/plugin-vue@4.6.2(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.31)':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)':
     dependencies:
-      vite: 4.5.3(@types/node@17.0.22)(sass@1.49.9)
-      vue: 3.2.31
+      '@babel/core': 7.26.8
+      '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.8)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.8)
+      vite: 4.5.6(@types/node@17.0.22)(sass@1.49.9)
+      vue: 3.2.25
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@4.6.2(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)':
+    dependencies:
+      vite: 4.5.6(@types/node@17.0.22)(sass@1.49.9)
+      vue: 3.2.25
 
   '@volar/language-core@1.11.1':
     dependencies:
@@ -2233,10 +2772,40 @@ snapshots:
       '@volar/language-core': 1.11.1
       path-browserify: 1.0.1
 
-  '@vue/compiler-core@3.2.31':
+  '@vue/babel-helper-vue-transform-on@1.2.5': {}
+
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.26.8)':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.8)
+      '@babel/template': 7.26.8
+      '@babel/traverse': 7.26.8
+      '@babel/types': 7.26.8
+      '@vue/babel-helper-vue-transform-on': 1.2.5
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.26.8)
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.26.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.26.8)':
     dependencies:
-      '@babel/parser': 7.17.8
-      '@vue/shared': 3.2.31
+      '@babel/code-frame': 7.26.2
+      '@babel/core': 7.26.8
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/parser': 7.26.8
+      '@vue/compiler-sfc': 3.5.13
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.2.25':
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.2.25
       estree-walker: 2.0.2
       source-map: 0.6.1
 
@@ -2246,35 +2815,65 @@ snapshots:
       '@vue/shared': 3.4.27
       entities: 4.5.0
       estree-walker: 2.0.2
-      source-map-js: 1.2.0
+      source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.2.31':
+  '@vue/compiler-core@3.5.13':
     dependencies:
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.26.8
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.2.25':
+    dependencies:
+      '@vue/compiler-core': 3.2.25
+      '@vue/shared': 3.2.25
 
   '@vue/compiler-dom@3.4.27':
     dependencies:
       '@vue/compiler-core': 3.4.27
       '@vue/shared': 3.4.27
 
-  '@vue/compiler-sfc@3.2.31':
+  '@vue/compiler-dom@3.5.13':
+    dependencies:
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
+
+  '@vue/compiler-sfc@3.2.25':
     dependencies:
-      '@babel/parser': 7.17.8
-      '@vue/compiler-core': 3.2.31
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/reactivity-transform': 3.2.31
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.2.25
+      '@vue/compiler-dom': 3.2.25
+      '@vue/compiler-ssr': 3.2.25
+      '@vue/reactivity-transform': 3.2.25
+      '@vue/shared': 3.2.25
       estree-walker: 2.0.2
       magic-string: 0.25.9
       postcss: 8.4.33
       source-map: 0.6.1
 
-  '@vue/compiler-ssr@3.2.31':
+  '@vue/compiler-sfc@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.8
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.2.25':
+    dependencies:
+      '@vue/compiler-dom': 3.2.25
+      '@vue/shared': 3.2.25
+
+  '@vue/compiler-ssr@3.5.13':
     dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
 
   '@vue/devtools-api@6.1.3': {}
 
@@ -2311,54 +2910,56 @@ snapshots:
     optionalDependencies:
       typescript: 4.6.2
 
-  '@vue/reactivity-transform@3.2.31':
+  '@vue/reactivity-transform@3.2.25':
     dependencies:
-      '@babel/parser': 7.17.8
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.2.25
+      '@vue/shared': 3.2.25
       estree-walker: 2.0.2
       magic-string: 0.25.9
 
-  '@vue/reactivity@3.2.31':
+  '@vue/reactivity@3.2.25':
     dependencies:
-      '@vue/shared': 3.2.31
+      '@vue/shared': 3.2.25
 
-  '@vue/runtime-core@3.2.31':
+  '@vue/runtime-core@3.2.25':
     dependencies:
-      '@vue/reactivity': 3.2.31
-      '@vue/shared': 3.2.31
+      '@vue/reactivity': 3.2.25
+      '@vue/shared': 3.2.25
 
-  '@vue/runtime-dom@3.2.31':
+  '@vue/runtime-dom@3.2.25':
     dependencies:
-      '@vue/runtime-core': 3.2.31
-      '@vue/shared': 3.2.31
-      csstype: 2.6.20
+      '@vue/runtime-core': 3.2.25
+      '@vue/shared': 3.2.25
+      csstype: 2.6.21
 
-  '@vue/server-renderer@3.2.31(vue@3.2.31)':
+  '@vue/server-renderer@3.2.25(vue@3.2.25)':
     dependencies:
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/shared': 3.2.31
-      vue: 3.2.31
+      '@vue/compiler-ssr': 3.2.25
+      '@vue/shared': 3.2.25
+      vue: 3.2.25
 
-  '@vue/shared@3.2.31': {}
+  '@vue/shared@3.2.25': {}
 
   '@vue/shared@3.4.27': {}
 
-  '@vueuse/core@8.1.2(vue@3.2.31)':
+  '@vue/shared@3.5.13': {}
+
+  '@vueuse/core@8.1.2(vue@3.2.25)':
     dependencies:
       '@vueuse/metadata': 8.1.2
-      '@vueuse/shared': 8.1.2(vue@3.2.31)
-      vue-demi: 0.12.4(vue@3.2.31)
+      '@vueuse/shared': 8.1.2(vue@3.2.25)
+      vue-demi: 0.12.4(vue@3.2.25)
     optionalDependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
   '@vueuse/metadata@8.1.2': {}
 
-  '@vueuse/shared@8.1.2(vue@3.2.31)':
+  '@vueuse/shared@8.1.2(vue@3.2.25)':
     dependencies:
-      vue-demi: 0.12.4(vue@3.2.31)
+      vue-demi: 0.12.4(vue@3.2.25)
     optionalDependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
   acorn-jsx@5.3.2(acorn@8.11.2):
     dependencies:
@@ -2392,9 +2993,13 @@ snapshots:
 
   async-validator@4.0.7: {}
 
-  axios@0.26.1:
+  asynckit@0.4.0: {}
+
+  axios@1.7.4:
     dependencies:
       follow-redirects: 1.15.6
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
 
@@ -2417,8 +3022,22 @@ snapshots:
     dependencies:
       fill-range: 7.0.1
 
+  browserslist@4.24.4:
+    dependencies:
+      caniuse-lite: 1.0.30001699
+      electron-to-chromium: 1.5.98
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.2(browserslist@4.24.4)
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
   callsites@3.1.0: {}
 
+  caniuse-lite@1.0.30001699: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -2454,12 +3073,18 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@7.2.0: {}
 
   computeds@0.0.1: {}
 
   concat-map@0.0.1: {}
 
+  convert-source-map@2.0.0: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -2470,7 +3095,7 @@ snapshots:
     dependencies:
       utrie: 1.0.2
 
-  csstype@2.6.20: {}
+  csstype@2.6.21: {}
 
   d3-array@3.1.6:
     dependencies:
@@ -2638,6 +3263,8 @@ snapshots:
     dependencies:
       robust-predicates: 3.0.1
 
+  delayed-stream@1.0.0: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -2650,17 +3277,25 @@ snapshots:
     dependencies:
       ssr-window: 4.0.2
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   echarts@5.3.2:
     dependencies:
       tslib: 2.3.0
       zrender: 5.3.1
 
-  element-plus@2.1.4(@types/lodash-es@4.17.6)(vue@3.2.31):
+  electron-to-chromium@1.5.98: {}
+
+  element-plus@2.1.4(@types/lodash-es@4.17.6)(vue@3.2.25):
     dependencies:
       '@ctrl/tinycolor': 3.4.0
-      '@element-plus/icons-vue': 1.1.4(vue@3.2.31)
+      '@element-plus/icons-vue': 1.1.4(vue@3.2.25)
       '@popperjs/core': 2.11.4
-      '@vueuse/core': 8.1.2(vue@3.2.31)
+      '@vueuse/core': 8.1.2(vue@3.2.25)
       async-validator: 4.0.7
       dayjs: 1.11.0
       escape-html: 1.0.3
@@ -2669,13 +3304,28 @@ snapshots:
       lodash-unified: 1.0.2(@types/lodash-es@4.17.6)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.1.1
-      vue: 3.2.31
+      vue: 3.2.25
     transitivePeerDependencies:
       - '@types/lodash-es'
       - '@vue/composition-api'
 
   entities@4.5.0: {}
 
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.7
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   esbuild@0.18.20:
     optionalDependencies:
       '@esbuild/android-arm': 0.18.20
@@ -2701,6 +3351,8 @@ snapshots:
       '@esbuild/win32-ia32': 0.18.20
       '@esbuild/win32-x64': 0.18.20
 
+  escalade@3.2.0: {}
+
   escape-html@1.0.3: {}
 
   escape-string-regexp@4.0.0: {}
@@ -2872,6 +3524,13 @@ snapshots:
 
   follow-redirects@1.15.6: {}
 
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.2:
@@ -2881,6 +3540,26 @@ snapshots:
 
   functional-red-black-tree@1.0.1: {}
 
+  gensync@1.0.0-beta.2: {}
+
+  get-intrinsic@1.2.7:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
   get-stream@6.0.1: {}
 
   glob-parent@5.1.2:
@@ -2900,6 +3579,8 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  globals@11.12.0: {}
+
   globals@13.13.0:
     dependencies:
       type-fest: 0.20.2
@@ -2913,14 +3594,24 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  gopd@1.2.0: {}
+
   has-flag@4.0.0: {}
 
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
   he@1.2.0: {}
 
+  html-tags@3.3.1: {}
+
   html2canvas@1.4.1:
     dependencies:
       css-line-break: 2.1.0
@@ -2972,14 +3663,22 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  js-cookie@3.0.5: {}
+
+  js-tokens@4.0.0: {}
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
 
+  jsesc@3.1.0: {}
+
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3: {}
+
   jsonc-parser@3.2.0: {}
 
   kolorist@1.5.1: {}
@@ -3009,6 +3708,10 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -3025,10 +3728,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magic-string@0.30.5:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  math-intrinsics@1.1.0: {}
+
   memoize-one@6.0.0: {}
 
   merge-stream@2.0.0: {}
@@ -3040,6 +3749,12 @@ snapshots:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mimic-fn@2.1.0: {}
 
   minimatch@3.1.2:
@@ -3063,8 +3778,12 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@3.3.8: {}
+
   natural-compare@1.4.0: {}
 
+  node-releases@2.0.19: {}
+
   normalize-path@3.0.0: {}
 
   normalize-wheel-es@1.1.1: {}
@@ -3120,13 +3839,15 @@ snapshots:
 
   picocolors@1.0.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
-  pinia@2.0.12(typescript@4.6.2)(vue@3.2.31):
+  pinia@2.0.12(typescript@4.6.2)(vue@3.2.25):
     dependencies:
       '@vue/devtools-api': 6.1.3
-      vue: 3.2.31
-      vue-demi: 0.12.4(vue@3.2.31)
+      vue: 3.2.25
+      vue-demi: 0.12.4(vue@3.2.25)
     optionalDependencies:
       typescript: 4.6.2
 
@@ -3142,6 +3863,12 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  postcss@8.5.2:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -3150,6 +3877,8 @@ snapshots:
 
   prettier@2.6.0: {}
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.1.1: {}
 
   queue-microtask@1.2.3: {}
@@ -3196,6 +3925,8 @@ snapshots:
 
   scule@1.3.0: {}
 
+  semver@6.3.1: {}
+
   semver@7.3.5:
     dependencies:
       lru-cache: 6.0.0
@@ -3214,7 +3945,7 @@ snapshots:
 
   source-map-js@1.0.2: {}
 
-  source-map-js@1.2.0: {}
+  source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
 
@@ -3240,6 +3971,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg-tags@1.0.0: {}
+
   swiper@8.0.7:
     dependencies:
       dom7: 4.0.4
@@ -3294,7 +4027,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-auto-import@0.11.5(@vueuse/core@8.1.2(vue@3.2.31))(rollup@3.29.4):
+  unplugin-auto-import@0.11.5(@vueuse/core@8.1.2(vue@3.2.25))(rollup@3.29.4):
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
@@ -3303,11 +4036,11 @@ snapshots:
       unimport: 1.3.0(rollup@3.29.4)
       unplugin: 1.10.1
     optionalDependencies:
-      '@vueuse/core': 8.1.2(vue@3.2.31)
+      '@vueuse/core': 8.1.2(vue@3.2.25)
     transitivePeerDependencies:
       - rollup
 
-  unplugin-icons@0.14.0(@vue/compiler-sfc@3.2.31)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16):
+  unplugin-icons@0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16):
     dependencies:
       '@antfu/install-pkg': 0.1.0
       '@antfu/utils': 0.5.0
@@ -3315,9 +4048,9 @@ snapshots:
       debug: 4.3.4
       kolorist: 1.5.1
       local-pkg: 0.4.1
-      unplugin: 0.5.2(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9))
+      unplugin: 0.5.2(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9))
     optionalDependencies:
-      '@vue/compiler-sfc': 3.2.31
+      '@vue/compiler-sfc': 3.5.13
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
       - esbuild
@@ -3326,7 +4059,7 @@ snapshots:
       - vite
       - webpack
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.24.7)(rollup@3.29.4)(vue@3.2.31):
+  unplugin-vue-components@0.26.0(@babel/parser@7.26.8)(rollup@3.29.4)(vue@3.2.25):
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
@@ -3338,14 +4071,14 @@ snapshots:
       minimatch: 9.0.4
       resolve: 1.22.8
       unplugin: 1.10.1
-      vue: 3.2.31
+      vue: 3.2.25
     optionalDependencies:
-      '@babel/parser': 7.24.7
+      '@babel/parser': 7.26.8
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  unplugin@0.5.2(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.3(@types/node@17.0.22)(sass@1.49.9)):
+  unplugin@0.5.2(esbuild@0.18.20)(rollup@3.29.4)(vite@4.5.6(@types/node@17.0.22)(sass@1.49.9)):
     dependencies:
       chokidar: 3.5.3
       webpack-sources: 3.2.3
@@ -3353,7 +4086,7 @@ snapshots:
     optionalDependencies:
       esbuild: 0.18.20
       rollup: 3.29.4
-      vite: 4.5.3(@types/node@17.0.22)(sass@1.49.9)
+      vite: 4.5.6(@types/node@17.0.22)(sass@1.49.9)
 
   unplugin@1.10.1:
     dependencies:
@@ -3362,6 +4095,12 @@ snapshots:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.2
 
+  update-browserslist-db@1.1.2(browserslist@4.24.4):
+    dependencies:
+      browserslist: 4.24.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.1.1
@@ -3374,19 +4113,19 @@ snapshots:
 
   v8-compile-cache@2.3.0: {}
 
-  vite@4.5.3(@types/node@17.0.22)(sass@1.49.9):
+  vite@4.5.6(@types/node@17.0.22)(sass@1.49.9):
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.33
+      postcss: 8.5.2
       rollup: 3.29.4
     optionalDependencies:
       '@types/node': 17.0.22
       fsevents: 2.3.2
       sass: 1.49.9
 
-  vue-demi@0.12.4(vue@3.2.31):
+  vue-demi@0.12.4(vue@3.2.25):
     dependencies:
-      vue: 3.2.31
+      vue: 3.2.25
 
   vue-eslint-parser@8.3.0(eslint@8.11.0):
     dependencies:
@@ -3401,18 +4140,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.1.9(vue@3.2.31):
+  vue-i18n@9.1.9(vue@3.2.25):
     dependencies:
       '@intlify/core-base': 9.1.9
       '@intlify/shared': 9.1.9
       '@intlify/vue-devtools': 9.1.9
       '@vue/devtools-api': 6.1.3
-      vue: 3.2.31
+      vue: 3.2.25
 
-  vue-router@4.0.14(vue@3.2.31):
+  vue-router@4.0.14(vue@3.2.25):
     dependencies:
       '@vue/devtools-api': 6.1.3
-      vue: 3.2.31
+      vue: 3.2.25
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -3426,13 +4165,13 @@ snapshots:
       semver: 7.6.2
       typescript: 4.6.2
 
-  vue@3.2.31:
+  vue@3.2.25:
     dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-sfc': 3.2.31
-      '@vue/runtime-dom': 3.2.31
-      '@vue/server-renderer': 3.2.31(vue@3.2.31)
-      '@vue/shared': 3.2.31
+      '@vue/compiler-dom': 3.2.25
+      '@vue/compiler-sfc': 3.2.25
+      '@vue/runtime-dom': 3.2.25
+      '@vue/server-renderer': 3.2.25(vue@3.2.25)
+      '@vue/shared': 3.2.25
 
   web-vitals@4.2.4: {}
 
@@ -3450,6 +4189,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  yallist@3.1.1: {}
+
   yallist@4.0.0: {}
 
   yocto-queue@0.1.0: {}