diff --git a/deploy/openubmc/Dockerfile b/deploy/openubmc/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..2fa003bd8a7c09994d57985fa7592b4f2b54eea9
--- /dev/null
+++ b/deploy/openubmc/Dockerfile
@@ -0,0 +1,160 @@
+FROM swr.cn-north-4.myhuaweicloud.com/opensourceway/node:latest as Builder
+
+RUN mkdir -p /home/openubmc-datastat/web
+WORKDIR /home/openubmc-datastat/web
+COPY . /home/openubmc-datastat/web
+
+RUN npm install pnpm -g
+
+RUN pnpm install
+RUN pnpm build:openubmc
+
+FROM swr.cn-north-4.myhuaweicloud.com/opensourceway/openeuler/nginx:latest as NginxBuilder
+
+FROM swr.cn-north-4.myhuaweicloud.com/opensourceway/openeuler/base:latest
+
+ENV NGINX_CONFIG_FILE /etc/nginx/nginx.conf
+ENV NGINX_CONFIG_PATH /etc/nginx/
+ENV NGINX_PID /var/run/nginx.pid
+ENV NGINX_USER nginx
+ENV NGINX_GROUP nginx
+ENV NGINX_BIN /usr/share/nginx/sbin/
+ENV NGINX_HOME /usr/share/nginx/
+ENV NGINX_EXE_FILE /usr/share/nginx/sbin/nginx
+ENV DST_PATH /etc/nginx/cert
+
+COPY --from=NginxBuilder /usr/share/nginx /usr/share/nginx
+COPY --from=NginxBuilder /usr/share/nginx/sbin/nginx /usr/share/nginx/sbin/nginx
+COPY --from=NginxBuilder /etc/nginx/modules /etc/nginx/modules
+COPY --from=NginxBuilder /etc/nginx/geoip  /etc/nginx/geoip
+COPY --from=NginxBuilder /etc/nginx/mime.types  /etc/nginx/mime.types
+COPY --from=Builder /home/openubmc-datastat/web/dist/openubmc /usr/share/nginx/www/
+COPY ./deploy/monitor.sh ./deploy/entrypoint.sh /etc/nginx/
+COPY ./deploy/openubmc/nginx.conf /etc/nginx/nginx.conf.template
+
+RUN sed -i "s|repo.openeuler.org|mirrors.nju.edu.cn/openeuler|g" /etc/yum.repos.d/openEuler.repo \
+    && sed -i '/metalink/d' /etc/yum.repos.d/openEuler.repo \
+    && sed -i '/metadata_expire/d' /etc/yum.repos.d/openEuler.repo \
+    && yum update -y \
+    && yum install -y findutils passwd shadow pcre-devel net-tools libmaxminddb libmaxminddb-devel \
+    && find /usr/share/nginx/www -type d -print0| xargs -0 chmod 500 \
+    && find /usr/share/nginx/www -type f -print0| xargs -0 chmod 400 \
+    && touch /var/run/nginx.pid \
+    && groupadd -g 1000 nginx \
+    && useradd -u 1000 -g nginx -s /sbin/nologin nginx \
+    && sed -i '/^PATH="\$HOME\/\.local\/bin:\$HOME\/bin:\$PATH"/d; /^export PATH/d' /home/nginx/.bashrc \
+    && chmod 750 /usr \
+    && chmod 550 /usr/share \
+    && chown -R nginx:nginx /usr/share/nginx \
+    && find /usr/share/nginx -type d -print0 | xargs -0 chmod 500 \
+    && chmod 500 /usr/share/nginx/sbin/nginx \
+    && mkdir -p /var/log/nginx \
+    && mkdir -p /etc/nginx/cert \
+    && chown -R nginx:nginx /etc/nginx/cert \
+    && chmod -R 700 /etc/nginx/cert \
+    && chown -R nginx:nginx /var/log/nginx \
+    && chmod -R 640 /var/log/nginx \
+    && touch /var/log/nginx/error.log \
+    && touch /var/log/nginx/access.log \
+    && chmod 640 /var/log/nginx/error.log \
+    && chmod 640 /var/log/nginx/access.log \
+    && chmod 640 /var/log/dnf.librepo.log \
+    && chmod 640 /var/log/dnf.log \
+    && chmod 640 /var/log/dnf.rpm.log \
+    && chmod 640 /var/log/hawkey.log \
+    && chmod 640 /var/log/*.log \
+    && chmod 440 /etc/nginx/nginx*.conf* \
+    && chown -R nginx:nginx /var/log/nginx/* \
+    && mkdir -p /var/lib/nginx/tmp/client_body \
+    && chown -R nginx:nginx /var/lib/nginx/tmp/client_body \
+    && mkdir -p /var/lib/nginx/tmp/fastcgi \
+    && chown -R nginx:nginx /var/lib/nginx/tmp/fastcgi \
+    && mkdir -p /var/lib/nginx/tmp/proxy \
+    && chown -R nginx:nginx /var/lib/nginx/tmp/proxy \
+    && mkdir -p /var/lib/nginx/tmp/scgi \
+    && chown -R nginx:nginx /var/lib/nginx/tmp/scgi \
+    && mkdir -p /var/lib/nginx/tmp/uwsgi \
+    && chown -R nginx:nginx /var/lib/nginx/tmp/uwsgi \
+    && chmod -R 500 /var/lib/nginx/ \
+    && chmod -R 750 /var/lib/nginx/tmp/proxy \
+    && chown -R nginx:nginx /var/lib/nginx/ \
+    && chown -R nginx:nginx /var/run/nginx.pid \
+    && chmod 640 /var/run/nginx.pid \
+    && chown -R nginx:nginx /etc/nginx \
+    && chmod 550 /etc/nginx \
+    && chmod 550 /etc/nginx/geoip/ \
+    && chmod 440 /etc/nginx/geoip/* \
+    && chmod 550 /etc/nginx/modules \
+    && chmod 440 /etc/nginx/modules/* \
+    && touch /etc/nginx/nginx.conf \
+    && chown nginx:nginx /etc/nginx/nginx.conf \
+    && chmod 640 /etc/nginx/nginx.conf \
+    && chmod 640 /etc/nginx/nginx.conf.template \
+    && chmod 440 /etc/nginx/mime.types \
+    && chmod 700 /var/lib/nginx/tmp/client_body \
+    && lsd() { \
+      local v="$1"; \
+        ls -ld "$v"; \
+        while :; do \
+          v="${v%/*}"; \
+          [[ "$v" && ! -f "$v" ]] || break; \
+          chown root:root "$v"; \
+        done; \
+      }; lsd "$NGINX_HOME" \
+    && lsd() { \
+      local v="$1"; \
+        ls -ld $v; \
+        while :; do \
+        v="${v%/*}"; \
+        [[ "$v"  && ! -f "$v" ]] || break; \
+        chmod 550 "$v"; \
+        done; \
+      }; lsd $NGINX_HOME \
+    && lsd() { \
+      local v="$1"; \
+        ls -ld $v; \
+        while :; do \
+        v="${v%/*}"; \
+        [[ "$v"  && ! -f "$v" ]] || break; \
+        chown $NGINX_USER:$NGINX_GROUP "$v"; \
+        done; \
+      }; lsd $NGINX_HOME \
+    && rm -rf /usr/share/nginx/html/ \
+    && rm -rf /usr/share/nginx/logs/ \
+    && echo "umask 0027" >> /etc/bashrc \
+    && echo "set +o history" >> /etc/bashrc \
+    && sed -i "s|HISTSIZE=1000|HISTSIZE=0|" /etc/profile \
+    && sed -i "s/PASS_MAX_DAYS.*/PASS_MAX_DAYS 30/" /etc/login.defs \
+    && echo "ALWAYS_SET_PATH yes" >> /etc/login.defs \
+    && chage --maxdays 30 nginx \
+    && passwd -l $NGINX_USER \
+    && yum clean all \
+    && usermod -s /sbin/nologin sync \
+    && usermod -s /sbin/nologin shutdown \
+    && usermod -s /sbin/nologin halt \
+    && echo "export TMOUT=1800 readonly TMOUT" >> /etc/profile \
+    && rm -rf /usr/bin/gdb* \
+    && rm -rf /usr/share/gdb \
+    && rm -rf /usr/share/gcc* \
+    && rm -rf /usr/lib64/python3.11/bdb.py \
+    && rm -rf /usr/lib64/python3.11/pdb.py \
+    && rm -rf /usr/lib64/python3.11/timeit.py \
+    && rm -rf /usr/lib64/python3.11/trace.py \
+    && rm -rf /usr/lib64/python3.11/tracemalloc.py \
+    && rm -rf /usr/share/licenses/glibc \
+    && rm -rf /usr/share/locale/ar \
+    && rm -rf /usr/share/locale/cpp \
+    && yum remove gdb-gdbserver findutils passwd shadow -y
+
+RUN chmod 500 /etc/nginx/monitor.sh \
+    && chmod 500 /etc/nginx/entrypoint.sh \
+    && chown nginx:nginx /etc/nginx/monitor.sh \
+    && chown nginx:nginx /etc/nginx/entrypoint.sh \
+    && sed -i "/PATH=/d" /home/nginx/.bashrc \
+    && source /home/nginx/.bashrc
+
+EXPOSE 8080
+
+USER nginx
+
+ENTRYPOINT ["/etc/nginx/entrypoint.sh"]
\ No newline at end of file
diff --git a/deploy/openubmc/nginx.conf b/deploy/openubmc/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..4f81fe66b32f5a21583d468577133c0fab696769
--- /dev/null
+++ b/deploy/openubmc/nginx.conf
@@ -0,0 +1,152 @@
+user $NGINX_USER;
+error_log /dev/stdout info;
+pid /var/run/nginx.pid;
+worker_processes auto;
+worker_rlimit_nofile 65535;
+events {
+  use epoll;
+  worker_connections 65535;
+}
+
+http {
+  include /etc/nginx/mime.types;
+
+  log_format main '[$time_local] remote_addr: $http_x_real_ip, request: "$request", '
+  'status: $status, body_bytes_sent: $body_bytes_sent, http_referer: "$http_referer", '
+  'http_user_agent: "$http_user_agent"';
+
+  access_log /dev/stdout main;
+
+  server_tokens off;
+  autoindex off;
+
+  port_in_redirect off;
+  absolute_redirect off;
+
+  client_header_buffer_size 1k;
+  large_client_header_buffers 4 8k;
+  client_body_buffer_size 16k;
+  client_max_body_size 50m;
+
+  client_header_timeout 10;
+  client_body_timeout 10;
+  client_body_in_file_only off;
+  keepalive_timeout 10 30;
+  send_timeout 10;
+
+  proxy_hide_header X-Powered-By;
+
+  limit_conn_zone $http_x_real_ip zone=limitperip:10m;
+  limit_req_zone $http_x_real_ip zone=frontendratelimit:10m rate=2000r/s;
+  limit_req_zone $http_x_real_ip zone=ratelimit:10m rate=200r/s;
+  underscores_in_headers on;
+
+  gzip on;
+  gzip_min_length 1k;
+  gzip_buffers 4 16k;
+  gzip_comp_level 5;
+  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/javascript application/x-httpd-php application/json;
+  gzip_vary on;
+
+  server {
+    listen ${LOCAL_IP}:8080 ssl;
+    server_name datastat.openeuler.org;
+    charset utf-8;
+    limit_conn limitperip 10;
+    ssl_session_tickets off;
+    ssl_session_timeout 10s;
+    ssl_session_cache shared:SSL:10m;
+
+    ssl_certificate "cert/server.crt";
+    ssl_certificate_key "cert/server.key";
+    ssl_password_file "cert/abc.txt";
+    ssl_dhparam "cert/dhparam.pem";
+    ssl_ecdh_curve auto;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers "ECDHE-RSA-AES256-GCM-SHA384";
+    ssl_prefer_server_ciphers on;
+    ssl_stapling on;
+    ssl_stapling_verify on;
+    resolver 8.8.8.8 8.8.4.4 valid=60s;
+    resolver_timeout 5s;
+
+    if ($request_method !~ ^(GET|POST)$) {
+      return 444;
+    }
+
+    location ~ /\. {
+      deny all;
+      return 404;
+    }
+    location / {
+      proxy_set_header X-Forwarded-For $http_x_real_ip;
+      proxy_set_header Host $host;
+
+      add_header X-XSS-Protection "1;mode=block";
+      add_header X-Content-Type-Options nosniff;
+      add_header X-Frame-Options DENY;
+      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
+      add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'none'; frame-src 'none'";
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_header Pragma no-cache;
+      add_header Expires 0;
+
+      location /assets {
+        add_header X-XSS-Protection "1; mode=block";
+        add_header X-Frame-Options DENY;
+        add_header X-Content-Type-Options nosniff;
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
+        add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'none'; frame-src 'none'";
+        add_header Cache-Control "public,max-age=1209600";
+      }
+
+      root /usr/share/nginx/www;
+      index index.html;
+      try_files $uri /index.html;
+    }
+
+    location /api-id/ {
+      proxy_set_header X-Forwarded-For $http_x_real_ip;
+
+      add_header X-XSS-Protection "1;mode=block";
+      add_header X-Content-Type-Options nosniff;
+      add_header X-Frame-Options DENY;
+      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_header Pragma no-cache;
+      add_header Expires 0;
+
+      proxy_pass https://usercenter.openubmc.cn/;
+    }
+
+    location /query/ {
+      proxy_set_header X-Forwarded-For $http_x_real_ip;
+
+      proxy_pass https://dsapi.osinfra.cn/query/;
+    }
+
+    location /api-magic/ {
+      proxy_set_header X-Forwarded-For $http_x_real_ip;
+
+      proxy_pass https://magicapi-plus.osinfra.cn/;
+    }
+
+    location /api-dsapi/ {
+      proxy_set_header X-Forwarded-For $http_x_real_ip;
+
+      proxy_pass https://dsapi.osinfra.cn/;
+    }
+
+    error_page 401 402 403 405 406 407 413 414 /error.html;
+    error_page 500 501 502 503 504 505 /error.html;
+    error_page 404 /404.html;
+
+    location = /error.html {
+      root /usr/share/nginx/www;
+    }
+
+    location = /404.html {
+      root /usr/share/nginx/www;
+    }
+  }
+}
diff --git a/package.json b/package.json
index 0f4f8b5e04ef04b57593e351211c2e418b1cae60..356a2cb6a4eaf8d77a2a8d3fd8ea5def3d2730be 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,13 @@
     "dev:harmony": "pnpm --filter harmony dev",
     "dev:lookeng": "pnpm --filter lookeng dev",
     "dev:mindspore": "pnpm --filter mindspore dev",
+    "dev:openubmc": "pnpm --filter openubmc dev",
     "build:euler": "pnpm --filter euler build",
     "build:gauss": "pnpm --filter gauss build",
     "build:harmony": "pnpm --filter harmony build",
     "build:lookeng": "pnpm --filter lookeng build",
     "build:mindspore": "pnpm --filter mindspore build",
+    "build:openubmc": "pnpm --filter openubmc build",
     "build": "pnpm build:euler && pnpm build:gauss && pnpm build:lookeng && pnpm build:mindspore && pnpm build:harmony",
     "lint:euler": "eslint \"packages/euler/src/**/*.{js,ts,vue,jsx,tsx}\"",
     "fix:euler": "eslint --fix \"packages/euler/src/**/*.{js,ts,vue,jsx,tsx}\"",
@@ -24,8 +26,10 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.4",
     "@opensig/open-analytics": "^0.0.9",
+    "@opensig/opendesign": "^1.0.1",
     "@types/d3": "^7.4.0",
-    "axios": "^1.8.2",
+    "@vueuse/core": "^13.9.0",
+    "axios": "^1.12.0",
     "d3": "^7.4.4",
     "echarts": "^5.3.2",
     "element-plus": "^2.1.4",
@@ -35,15 +39,16 @@
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.11",
     "swiper": "^8.0.7",
-    "vue": "^3.2.25",
-    "vue-i18n": "^9.14.3",
-    "vue-router": "^4.0.13"
+    "unplugin-icons": "22.2.0",
+    "vue": "^3.5.20",
+    "vue-i18n": "^9.14.5",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.21",
+    "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^10.2.0",
diff --git a/packages/euler/package.json b/packages/euler/package.json
index 96bf8d278bdff83d324e119a0dc9544a1d8ea8f9..1b6e28a05a1779ac197947c3aed7ef1255e9a74a 100644
--- a/packages/euler/package.json
+++ b/packages/euler/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@opensig/opendesign": "0.0.65",
-    "shared": "workspace:^",
-    "unplugin-icons": "^0.14.0"
+    "shared": "workspace:^"
   }
 }
diff --git a/packages/gauss/package.json b/packages/gauss/package.json
index ae0b47168b6feec6613c78c6aee94e8c77ec188a..f46729221ce60a81f0b40ff09c4cfd23a02106db 100644
--- a/packages/gauss/package.json
+++ b/packages/gauss/package.json
@@ -7,7 +7,6 @@
     "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
-    "shared": "workspace:^",
-    "unplugin-icons": "^0.14.0"
+    "shared": "workspace:^"
   }
 }
diff --git a/packages/harmony/package.json b/packages/harmony/package.json
index c0bcbe2757ce510b4ae682725afdae917ce98d7a..a29ec0464bb19c6d5692e5cdf2d853a4b8fcd991 100644
--- a/packages/harmony/package.json
+++ b/packages/harmony/package.json
@@ -7,7 +7,6 @@
     "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
-    "shared": "workspace:^",
-    "unplugin-icons": "^0.14.0"
+    "shared": "workspace:^"
   }
 }
\ No newline at end of file
diff --git a/packages/mindspore/package.json b/packages/mindspore/package.json
index 9ccbf1351b879a8ca736e086fc809b46896bd9ab..8f2019bad0349cb21f417ff47849faf47f9b2a30 100644
--- a/packages/mindspore/package.json
+++ b/packages/mindspore/package.json
@@ -7,7 +7,6 @@
     "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
-    "shared": "workspace:^",
-    "unplugin-icons": "^0.14.0"
+    "shared": "workspace:^"
   }
 }
diff --git a/packages/openubmc/.env.development b/packages/openubmc/.env.development
new file mode 100644
index 0000000000000000000000000000000000000000..e4eb1492369acac287ec096d61000a9030593a3e
--- /dev/null
+++ b/packages/openubmc/.env.development
@@ -0,0 +1,4 @@
+VITE_COOKIE_DOMAIN = localhost
+VITE_LOGIN_ORIGIN = https://usercenter.openubmc.test.osinfra.cn
+VITE_MAIN_DOMAIN_URL = https://www.openubmc.cn
+VITE_FORUM_URL = https://discuss.openubmc.cn/
diff --git a/packages/openubmc/.env.production b/packages/openubmc/.env.production
new file mode 100644
index 0000000000000000000000000000000000000000..7c65a51b277e9aa5474bbc560bce3a7ef8b584ec
--- /dev/null
+++ b/packages/openubmc/.env.production
@@ -0,0 +1,4 @@
+VITE_COOKIE_DOMAIN = .openubmc.cn
+VITE_LOGIN_ORIGIN = https://usercenter.openubmc.cn
+VITE_MAIN_DOMAIN_URL = https://www.openubmc.cn
+VITE_FORUM_URL = https://discuss.openubmc.cn/
\ No newline at end of file
diff --git a/packages/openubmc/auto-imports.d.ts b/packages/openubmc/auto-imports.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08908edd6a4136cad144e7a483f291f9d9618be2
--- /dev/null
+++ b/packages/openubmc/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}
diff --git a/packages/openubmc/components.d.ts b/packages/openubmc/components.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f596a2017b09ceac9bca356985d7277184b9fc72
--- /dev/null
+++ b/packages/openubmc/components.d.ts
@@ -0,0 +1,40 @@
+/* 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']
+    CommonLayout: typeof import('./src/components/CommonLayout.vue')['default']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    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']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
+    LoadingArc: typeof import('./src/components/LoadingArc.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SectionCard: typeof import('./src/components/SectionCard.vue')['default']
+    ToggleRadios: typeof import('./src/components/ToggleRadios.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
diff --git a/packages/openubmc/index.html b/packages/openubmc/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..960ab56279a301a3bd19fd4fe8d73e74b4f24e20
--- /dev/null
+++ b/packages/openubmc/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=1440, user-scalable=no" />
+  <title>openUBMC 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>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/openubmc/package.json b/packages/openubmc/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..ff981f948218f496e644e22b6c52d44ee8d27c58
--- /dev/null
+++ b/packages/openubmc/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "openubmc",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "shared": "workspace:^"
+  }
+}
diff --git a/packages/openubmc/public/favicon.ico b/packages/openubmc/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..cdbaf4775beb766fd60d2c1fefda4a63e9a82fb0
Binary files /dev/null and b/packages/openubmc/public/favicon.ico differ
diff --git a/packages/openubmc/public/footer-bg.png b/packages/openubmc/public/footer-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..88098672605e6b5a302bff4662e3ee322428d27b
Binary files /dev/null and b/packages/openubmc/public/footer-bg.png differ
diff --git a/packages/openubmc/src/App.vue b/packages/openubmc/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f21fb39607bcee1a5a6219a1e83686fbad29ca5a
--- /dev/null
+++ b/packages/openubmc/src/App.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import AppHeader from './components/AppHeader.vue';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import en from 'element-plus/es/locale/lang/en';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import useLoginStore from './stores/login';
+
+const { locale } = useI18n();
+
+const elLocale = computed(() => (locale.value === 'en' ? en : zhCn));
+
+const loginStore = useLoginStore();
+onMounted(() => {
+  loginStore.getUserInfo();
+});
+</script>
+
+<template>
+  <AppHeader />
+  <ElConfigProvider :locale="elLocale">
+    <router-view v-slot="{ Component, route }">
+      <transition :name="(route.meta.transition as string)">
+        <component :is="Component" />
+      </transition>
+    </router-view>
+  </ElConfigProvider>
+</template>
+
+<style lang="scss">
+@use '@/assets/style/grid.scss' as *;
+.ly-footer {
+  height: var(--layout-footer-height);
+  background-color: #121417;
+}
+#app {
+  --header-height: 72px;
+  --layout-content-max-width: 1416px;
+  --layout-content-padding: 40px;
+  --layout-header-zIndex: 101;
+
+  --layout-max-width: calc(var(--layout-content-max-width) + var(--layout-content-padding) * 2);
+
+  --layout-footer-height: 361px;
+
+  --layout-content-height: calc(100vh - var(--layout-footer-height));
+  --layout-content-height-main: calc(100vh - var(--layout-footer-height) - var(--layout-header-height));
+
+  .content-width {
+    width: var(--grid-content-width);
+  }
+
+  @include respond-to('laptop') {
+    --layout-footer-height: 359px;
+  }
+  @include respond-to('pad_h') {
+    --layout-footer-height: 329px;
+  }
+  @include respond-to('pad_v') {
+    --layout-header-height: 48px;
+    --layout-footer-height: 339px;
+  }
+  @media screen and (max-width: 638px) {
+    --layout-footer-height: 351px;
+  }
+  @media screen and (max-width: 558px) {
+    --layout-footer-height: 375px;
+  }
+}
+.wrap {
+  max-width: 1416px;
+  padding: 0 24px;
+}
+@media screen and (min-width: 1900px) {
+  .wrap {
+    margin: 0 auto;
+  }
+}
+@media screen and (min-width: 1700px) and (max-width: 1900px) {
+  .wrap {
+    margin: 0 240px 0 auto;
+  }
+}
+@media screen and (max-width: 1700px) {
+  .wrap {
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/packages/openubmc/src/assets/bg.png b/packages/openubmc/src/assets/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dfb42fe111972e1fef04774bef33d6c330a4bd9
Binary files /dev/null and b/packages/openubmc/src/assets/bg.png differ
diff --git a/packages/openubmc/src/assets/category/home/recordal.png b/packages/openubmc/src/assets/category/home/recordal.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4fc2f2c936e1fcf21e807d0a4fdc0cf49f59e51
Binary files /dev/null and b/packages/openubmc/src/assets/category/home/recordal.png differ
diff --git a/packages/openubmc/src/assets/category/home/wechat-qr.jpg b/packages/openubmc/src/assets/category/home/wechat-qr.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a9c36940930dae423887dab0a7792b3d0a7e41e
Binary files /dev/null and b/packages/openubmc/src/assets/category/home/wechat-qr.jpg differ
diff --git a/packages/openubmc/src/assets/category/home/wechat.svg b/packages/openubmc/src/assets/category/home/wechat.svg
new file mode 100644
index 0000000000000000000000000000000000000000..350f46da1f8d939cda6dc7fc4983637ef6a6404b
--- /dev/null
+++ b/packages/openubmc/src/assets/category/home/wechat.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="39" height="32" viewBox="0 0 39 32">
+<path fill="#848484" d="M11.204 0.232c-11.421 2.045-15.233 14.969-6.136 20.873 0.496 0.325 0.496 0.294-0.263 2.526l-0.635 1.906 2.309-1.224 2.293-1.24 1.224 0.294c1.286 0.325 2.929 0.542 4.013 0.542h0.651l-0.217-0.868c-1.798-6.601 4.401-13.141 12.459-13.141h1.1l-0.232-0.775c-1.767-6.198-9.236-10.196-16.565-8.895zM10.212 6.028c1.209 0.806 1.286 2.588 0.124 3.347-1.89 1.224-4.106-0.945-2.836-2.789 0.558-0.837 1.906-1.116 2.712-0.558zM19.943 6.028c1.999 1.333 0.511 4.432-1.736 3.58-1.612-0.62-1.798-2.836-0.294-3.626 0.604-0.325 1.519-0.31 2.030 0.046zM24.36 10.909c-5.672 1.038-9.592 5.331-9.375 10.274 0.294 6.617 8.058 11.173 15.496 9.127l0.883-0.232 1.844 0.992c1.023 0.558 1.875 0.961 1.906 0.914 0.016-0.062-0.186-0.759-0.449-1.581-0.589-1.829-0.604-1.705 0.201-2.278 8.941-6.415 1.085-19.308-10.506-17.216zM24.127 16.24c0.496 0.341 0.759 1.162 0.542 1.767-0.449 1.302-2.386 1.395-2.898 0.155-0.604-1.441 1.038-2.774 2.355-1.921zM32.061 16.395c0.775 0.744 0.651 2.014-0.263 2.479-1.395 0.713-2.867-0.713-2.154-2.076 0.48-0.868 1.705-1.085 2.417-0.403z"></path>
+</svg>
diff --git a/packages/openubmc/src/assets/cose.png b/packages/openubmc/src/assets/cose.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f73e16a97315914c40d41ec860474649ec501d5
Binary files /dev/null and b/packages/openubmc/src/assets/cose.png differ
diff --git a/packages/openubmc/src/assets/style/base.scss b/packages/openubmc/src/assets/style/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..272889167d507fee8a11c0e4b9a4b93310fa3482
--- /dev/null
+++ b/packages/openubmc/src/assets/style/base.scss
@@ -0,0 +1,124 @@
+/*
+ * base
+ */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
+  width: 100%;
+  height: 100%;
+  @include text1;
+  @include scrollbar;
+}
+html {
+  overflow: auto;
+  @include respond-to('phone') {
+    background-color: var(--o-color-ubmc-bg);
+  }
+}
+
+*,
+:after,
+:before {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  vertical-align: top;
+}
+
+[tabindex] {
+  outline: none;
+}
+
+a {
+  cursor: pointer;
+  color: var(--o-color-link1);
+  text-decoration: none;
+  &:hover {
+    @include respond-to('>phone') {
+      color: var(--o-color-ubmc-hover);
+    }
+  }
+  &:active {
+    @include respond-to('>phone') {
+      color: var(--o-color-ubmc-hover);
+    }
+  }
+}
+
+blockquote,
+figure,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+dd,
+dl,
+li,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none outside none;
+}
+
+button,
+input,
+optgroup,
+section,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+.highlight {
+  color: var(--o-color-ubmc);
+}
+
+svg {
+  &:not(.initial-fill) {
+    &:not(.o-svg-icon) {
+      path {
+        fill: currentColor;
+      }
+    }
+  }
+  &.o-svg-icon {
+    fill: currentColor;
+  }
+}
+@keyframes o-rotating {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.o-rotating {
+  animation: o-rotating var(--o-rotate-duration, 1s) var(--o-easing-linear) infinite;
+}
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/style/element/index.scss b/packages/openubmc/src/assets/style/element/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..adbfc9185685f71823fd3c4b1b667ad2cf62c3ab
--- /dev/null
+++ b/packages/openubmc/src/assets/style/element/index.scss
@@ -0,0 +1,7 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': var(--o-color-primary1),
+    ),
+  )
+);
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/style/grid.scss b/packages/openubmc/src/assets/style/grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5cd419305f31a5018cb5d73753ef7b17e3754eea
--- /dev/null
+++ b/packages/openubmc/src/assets/style/grid.scss
@@ -0,0 +1,67 @@
+@use './mixin/screen.scss' as *;
+
+@mixin inject-var($width, $padding, $gutter, $columns, $contentColumns) {
+  :root {
+    --grid-layout-width: #{$width}; // 栅格布局总宽度
+    --grid--layout-padding: #{$padding}; // 栅格布局左右的padding
+    --grid-column-gutter: #{$gutter}; // 栅格水槽宽度
+    --grid-column-total: #{$columns}; // 栅格总数
+    --grid-content-columns: #{$contentColumns}; // 内容区域所占栅格数量
+    --grid-full-width: calc(var(--grid-layout-width) - var(--grid--layout-padding) * 2); // 栅格布局内容宽度
+    --grid-column-width: calc((var(--grid-full-width) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total)); // 一个栅格的宽度
+    --grid-content-width: calc(var(--grid-column-width) * var(--grid-content-columns) + var(--grid-column-gutter) * (var(--grid-content-columns) - 1)); // 内容区域站栅格个数
+  }
+}
+
+// 1921px <= 屏幕宽度
+@include respond-to('>pc_l') {
+  @include inject-var(1920px, 64px, 32px, 24, 20);
+}
+
+// 1681px <= 屏幕宽度 <= 1920px
+@include respond-to('pc_l') {
+  @include inject-var(100vw, 64px, 32px, 24, 20);
+}
+
+// 1441px <= 屏幕宽度 <= 1680px
+@include respond-to('pc') {
+  @include inject-var(100vw, 64px, 32px, 24, 22);
+}
+
+// 1201px <= 屏幕宽度 <= 1440px
+@include respond-to('laptop') {
+  @include inject-var(100vw, 40px, 24px, 24, 22);
+}
+
+// 841px <= 屏幕宽度 <= 1200px
+@include respond-to('pad_h') {
+  @include inject-var(100vw, 32px, 16px, 12, 12);
+}
+
+// 601px <= 屏幕宽度 <= 840px
+@include respond-to('pad_v') {
+  @include inject-var(100vw, 32px, 16px, 8, 8);
+}
+
+// 屏幕宽度 <= 600px
+@include respond-to('phone') {
+  @include inject-var(100vw, 24px, 12px, 4, 4);
+}
+
+:root {
+  // --grid-<number>: <number>个栅格的宽度
+  --grid-1: var(--grid-column-width);
+  @for $cnt from 2 to 24 {
+    $gutterCnt: $cnt - 1;
+    --grid-#{$cnt}: calc(var(--grid-column-width) * #{$cnt} + var(--grid-column-gutter) * #{$gutterCnt});
+  }
+}
+
+.grid-container {
+  display: flex;
+  width: 100vw;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding-left: var(--grid--layout-padding);
+  padding-right: var(--grid--layout-padding);
+}
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/style/mixin/common.scss b/packages/openubmc/src/assets/style/mixin/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dbc2d5a1868cb5ee95350b9e7138f999c38a566a
--- /dev/null
+++ b/packages/openubmc/src/assets/style/mixin/common.scss
@@ -0,0 +1,45 @@
+@use './screen.scss' as *;
+
+@mixin in-dark {
+  [data-o-theme='dark'] {
+    @content;
+  }
+}
+
+@mixin img-in-dark {
+  filter: brightness(80%) grayscale(20%) contrast(1.2);
+}
+
+@mixin scrollbar {
+  &::-webkit-scrollbar-track {
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: var(--o-color-control1);
+  }
+}
+
+@mixin text-truncate($line-clamp: 1) {
+  overflow: hidden; // 公共属性：超出隐藏
+
+  @if $line-clamp == 1 {
+    /* 单行截断模式 */
+    white-space: nowrap;    // 禁止换行
+    text-overflow: ellipsis; // 省略号
+  } @else {
+    /* 多行截断模式 */
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line-clamp; // 控制行数
+    word-break: break-all;           // 允许单词断行（根据需求可选）
+  }
+}
+
diff --git a/packages/openubmc/src/assets/style/mixin/font.scss b/packages/openubmc/src/assets/style/mixin/font.scss
new file mode 100644
index 0000000000000000000000000000000000000000..537da0a54a6a34c759336e098a7a292db56c9383
--- /dev/null
+++ b/packages/openubmc/src/assets/style/mixin/font.scss
@@ -0,0 +1,233 @@
+@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: 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: 22px;
+    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: 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;
+  }
+}
+
+// 二级标题
+@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: 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;
+  }
+}
+
+// 常规正文
+@mixin text1 {
+  font-size: 16px;
+  line-height: 24px;
+  --line-height: 24px;
+  @include respond-to('laptop') {
+    font-size: 14px;
+    line-height: 22px;
+    --line-height: 22px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 14px;
+    line-height: 22px;
+    --line-height: 22px;
+  }
+  @include respond-to('<=pad_v') {
+    font-size: 14px;
+    line-height: 22px;
+    --line-height: 22px;
+  }
+}
+
+// 大号正文
+@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;
+  }
+}
+
+// 提示文本1
+@mixin tip1 {
+  font-size: 14px;
+  line-height: 22px;
+  @include respond-to('laptop') {
+    font-size: 14px;
+    line-height: 22px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  @include respond-to('<=pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+
+// 提示文本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: 10px;
+    line-height: 16px;
+  }
+}
+// 提示文本1
+@mixin tip1-response-max-height {
+  font-size: 14px;
+  line-height: 22px;
+  max-height: 44px;
+  @include respond-to('laptop-pc') {
+    font-size: 12px;
+    line-height: 18px;
+    max-height: 36px;
+  }
+  @include respond-to('pad_h') {
+    font-size: 12px;
+    line-height: 18px;
+    max-height: 36px;
+  }
+  @include respond-to('pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+    max-height: 36px;
+  }
+  @include respond-to('phone') {
+    font-size: 10px;
+    line-height: 16px;
+    max-height: 32px;
+  }
+}
diff --git a/packages/openubmc/src/assets/style/mixin/screen.scss b/packages/openubmc/src/assets/style/mixin/screen.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7ce92d66c3109e79e827f1059e486177690b056f
--- /dev/null
+++ b/packages/openubmc/src/assets/style/mixin/screen.scss
@@ -0,0 +1,94 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+// 断点定义
+$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),
+  'laptop-pc': (1201px, 1680px),
+  '<=pc': (0, 1680px),
+  'pc': (1441px, 1680px),
+  'pc_l': (1681px, 1920px),
+  '>pc_l': 1921px
+);
+
+@mixin respond-to($breakname) {
+  $bp: map.get($breakpoints, $breakname);
+  @if meta.type-of($bp) == 'list' {
+    $min: list.nth($bp, 1);
+    $max: list.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);
+  }
+}
+
+@mixin x-svg-hover() {
+  overflow: hidden;
+  svg {
+    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  }
+  @include hover {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/packages/openubmc/src/assets/style/theme/dark.token.css b/packages/openubmc/src/assets/style/theme/dark.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..c9d31003a3ad54e5cf8d1a6230970a1c8bdd20d8
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/dark.token.css
@@ -0,0 +1,2064 @@
+/* theme: dark */
+[data-o-theme="dark"] {
+  /**
+   * @name
+   * @type palette
+   * @group white
+   * @description
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name
+   * @type palette
+   * @group black
+   * @description
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-1: 0, 4, 77;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-2: 6, 15, 120;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-3: 20, 37, 163;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-4: 40, 65, 207;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-5: 66, 99, 250;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-6: 84, 120, 251;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-7: 122, 154, 252;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-8: 160, 186, 253;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-9: 199, 217, 254;
+  /**
+   * @name
+   * @type palette
+   * @group deepblue
+   * @description
+   */
+  --o-deepblue-10: 238, 244, 255;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-1: 0, 77, 42;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-2: 2, 102, 53;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-3: 10, 127, 66;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-4: 22, 152, 80;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-5: 36, 177, 95;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-6: 51, 193, 104;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-7: 90, 208, 131;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-8: 135, 224, 163;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-9: 185, 239, 200;
+  /**
+   * @name
+   * @type palette
+   * @group green
+   * @description
+   */
+  --o-green-10: 240, 255, 244;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-1: 77, 24, 0;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-2: 120, 42, 1;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-3: 163, 68, 8;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-4: 207, 97, 19;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-5: 250, 130, 33;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-6: 251, 143, 32;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-7: 252, 174, 91;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-8: 253, 202, 139;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-9: 254, 227, 188;
+  /**
+   * @name
+   * @type palette
+   * @group orange
+   * @description
+   */
+  --o-orange-10: 255, 248, 237;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-1: 77, 0, 17;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-2: 115, 3, 24;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-3: 153, 9, 31;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-4: 192, 17, 37;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-5: 230, 28, 43;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-6: 235, 35, 45;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-7: 240, 82, 85;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-8: 245, 132, 130;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-9: 250, 183, 180;
+  /**
+   * @name
+   * @type palette
+   * @group red
+   * @description
+   */
+  --o-red-10: 255, 234, 232;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-1: 0, 0, 0;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-2: 20, 20, 20;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-3: 28, 28, 28;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-4: 39, 39, 39;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-5: 47, 47, 47;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-6: 57, 57, 57;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-7: 67, 67, 67;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-8: 88, 88, 88;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-9: 122, 122, 122;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-10: 159, 159, 159;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-11: 185, 185, 185;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-12: 210, 210, 210;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-13: 238, 238, 238;
+  /**
+   * @name
+   * @type palette
+   * @group gray
+   * @description
+   */
+  --o-gray-14: 255, 255, 255;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-1: 0, 0, 0;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-2: 16, 28, 20;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-3: 23, 25, 28;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-4: 36, 36, 39;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-5: 40, 42, 47;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-6: 50, 53, 57;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-7: 61, 63, 67;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-8: 80, 84, 88;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-9: 113, 117, 122;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-10: 147, 152, 159;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-11: 172, 177, 185;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-12: 198, 202, 210;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-13: 231, 234, 238;
+  /**
+   * @name
+   * @type palette
+   * @group mixedgray
+   * @description
+   */
+  --o-mixedgray-14: 255, 255, 255;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-1: 77, 54, 0;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-2: 119, 87, 2;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-3: 161, 126, 11;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-4: 203, 167, 24;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-5: 245, 211, 42;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-6: 247, 222, 54;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-7: 249, 234, 100;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-8: 251, 244, 146;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-9: 253, 251, 192;
+  /**
+   * @name
+   * @type palette
+   * @group yellow
+   * @description
+   */
+  --o-yellow-10: 255, 255, 240;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-1: 41, 77, 0;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-2: 63, 109, 3;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-3: 91, 142, 14;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-4: 121, 174, 30;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-5: 155, 207, 50;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-6: 172, 217, 68;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-7: 194, 226, 104;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-8: 214, 236, 144;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-9: 233, 245, 186;
+  /**
+   * @name
+   * @type palette
+   * @group lime
+   * @description
+   */
+  --o-lime-10: 251, 255, 232;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-1: 0, 73, 77;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-2: 2, 101, 103;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-3: 9, 129, 127;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-4: 18, 155, 148;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-5: 30, 181, 167;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-6: 42, 196, 178;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-7: 84, 211, 192;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-8: 130, 255, 208;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-9: 182, 240, 227;
+  /**
+   * @name
+   * @type palette
+   * @group cyan
+   * @description
+   */
+  --o-cyan-10: 239, 255, 251;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-1: 0, 34, 77;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-2: 1, 57, 117;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-3: 8, 86, 158;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-4: 18, 118, 199;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-5: 31, 153, 240;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-6: 42, 166, 243;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-7: 89, 191, 246;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-8: 137, 214, 249;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-9: 187, 233, 252;
+  /**
+   * @name
+   * @type palette
+   * @group blue
+   * @description
+   */
+  --o-blue-10: 237, 250, 255;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-1: 22, 0, 77;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-2: 40, 3, 118;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-3: 66, 15, 160;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-4: 98, 33, 202;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-5: 134, 57, 244;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-6: 152, 74, 246;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-7: 179, 114, 248;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-8: 205, 156, 251;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-9: 228, 198, 253;
+  /**
+   * @name
+   * @type palette
+   * @group purple
+   * @description
+   */
+  --o-purple-10: 249, 240, 255;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-1: 61, 0, 77;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-2: 93, 5, 110;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-3: 127, 16, 144;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-4: 164, 33, 178;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-5: 200, 54, 212;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-6: 216, 72, 221;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-7: 229, 109, 229;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-8: 238, 149, 235;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-9: 246, 191, 243;
+  /**
+   * @name
+   * @type palette
+   * @group pink
+   * @description
+   */
+  --o-pink-10: 255, 236, 253;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-1: 77, 0, 48;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-2: 114, 3, 70;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-3: 151, 12, 91;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-4: 189, 25, 112;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-5: 226, 41, 133;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-6: 232, 53, 137;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-7: 238, 97, 158;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-8: 243, 143, 183;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-9: 249, 192, 213;
+  /**
+   * @name
+   * @type palette
+   * @group rosyred
+   * @description
+   */
+  --o-rosyred-10: 255, 242, 247;
+  /**
+   * @name
+   * @type color
+   * @group base
+   * @description
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name
+   * @type color
+   * @group base
+   * @description
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-mixedgray-14));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-mixedgray-13));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-mixedgray-12));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-mixedgray-8));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-mixedgray-7));
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-mixedgray-3));
+  /**
+   * @name
+   * @type color
+   * @group fill
+   * @description 二级填充：区块/卡片
+   */
+  --o-color-fill2: rgb(var(--o-mixedgray-4));
+  /**
+   * @name
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-mixedgray-5));
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-mixedgray-14), 0.25);
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-mixedgray-14), 0.15);
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-7));
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 禁用-浅，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-mixedgray-14), 1.0);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1.0);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  /**
+   * @name
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-mixedgray-4), 0.2);
+  /**
+   * @name
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1.0);
+  /**
+   * @name
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-mixedgray-1), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26x;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 4px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 4px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+  /**
+ * @name openUBMC主题色
+ * @type color
+ * @group ubmc
+ * @description openUBMC主题色
+ */
+  --o-ubmc-color: 0, 113, 243;
+  --o-ubmc-color2: 4, 86, 209;
+  --o-ubmc-color3: 0, 128, 255;
+  --o-ubmc-color4: 10, 59, 128;
+  /**
+   * 先在这里覆盖一下使用蓝色
+   */
+  --o-color-ubmc: rgb(var(--o-ubmc-color));
+  /**
+   * @name openUBMC主题色hover态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-hover: rgba(var(--o-ubmc-color2), 1);
+  /**
+   * @name openUBMC主题色激活态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-focus: rgba(var(--o-ubmc-color3), 1);
+  /**
+   * @name openUBMC主题色禁用态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-disabled: rgba(var(--o-ubmc-color4), 1);
+  /**
+   * @name openUBMC主题背景色
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题背景色
+   */
+  --o-color-ubmc-bg: rgba(26, 26, 28, 1);
+  --o-color-ubmc-bg2: rgba(26, 26, 28, 1);
+  /**
+    * @name openUBMC主题背景色悬浮态
+    * @type color
+    * @group ubmc
+    * @description openUBMC主题背景色悬浮态
+    */
+  --o-color-ubmc-bg-hover: rgba(26, 26, 28, 0.4);
+  /**
+    * @name openUBMC主题背景色悬浮态2
+    * @type color
+    * @group ubmc
+    * @description openUBMC主题背景色悬浮态2
+    */
+  --o-color-ubmc-bg-hover2: rgba(103, 163, 250, 0.4);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: var(--o-color-ubmc);
+  --o-color-link1: var(--o-color-primary1);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: var(--o-color-ubmc-hover);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: var(--o-color-ubmc-focus);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: var(--o-color-ubmc-disabled);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: var(--o-color-ubmc);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: var(--o-color-ubmc-hover);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: var(--o-color-ubmc-focus);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: var(--o-color-ubmc-disabled);
+
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-ubmc-color), 1);
+}
diff --git a/packages/openubmc/src/assets/style/theme/default-light.token.css b/packages/openubmc/src/assets/style/theme/default-light.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..92e17c870ae1a458971864402681fcda93a60de4
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/default-light.token.css
@@ -0,0 +1,2065 @@
+/* theme: default|light */
+:root,
+[data-o-theme='light'] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-1: 232, 240, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-2: 194, 213, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-3: 157, 184, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-4: 120, 153, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-5: 83, 119, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-6: 46, 83, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-7: 29, 55, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-8: 15, 32, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-9: 6, 15, 120;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-10: 0, 4, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 232, 255, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 177, 239, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 128, 224, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 84, 208, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 45, 193, 101;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 11, 177, 81;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 7, 152, 72;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 4, 127, 63;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 255, 246, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 254, 226, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 253, 202, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 252, 176, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 251, 147, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 250, 115, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 207, 88, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 163, 64, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 250, 185, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 245, 136, 134;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 240, 87, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 235, 43, 52;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 230, 0, 18;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 192, 0, 22;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 153, 0, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 115, 0, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 247, 247, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 242, 242, 242;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 237, 237, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 227, 227, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 214, 214, 214;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 186, 186, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 148, 148, 148;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 110, 110, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 79, 79, 79;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 48, 48, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 36, 36, 36;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 18, 18, 18;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-2: 244, 245, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-3: 237, 239, 242;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-4: 232, 234, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-5: 224, 226, 230;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-6: 209, 214, 219;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-7: 179, 185, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-8: 144, 150, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-9: 104, 109, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-10: 79, 84, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-11: 55, 59, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-12: 32, 35, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-13: 18, 20, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 255, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 253, 251, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 251, 244, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 249, 233, 94;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 247, 221, 49;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 245, 205, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 203, 163, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 161, 124, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 119, 87, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 77, 54, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 251, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 233, 245, 184;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 213, 236, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 192, 226, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 169, 217, 59;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 146, 207, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 116, 174, 15;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 88, 142, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 63, 109, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 41, 77, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 232, 255, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 176, 240, 226;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 125, 225, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 79, 221, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 38, 196, 177;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 3, 181, 165;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 2, 155, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 1, 129, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 0, 101, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 0, 73, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 232, 249, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 185, 233, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 138, 214, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 93, 192, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 48, 168, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 5, 142, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 3, 111, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 2, 83, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 1, 57, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 0, 34, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 245, 232, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 225, 192, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 203, 152, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 178, 113, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 152, 75, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 123, 37, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 92, 23, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 64, 12, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 41, 4, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 255, 232, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 246, 188, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 238, 146, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 229, 107, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 216, 71, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 199, 37, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 163, 23, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 127, 13, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 61, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-1: 255, 232, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-2: 249, 185, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-3: 243, 141, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-4: 238, 98, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-5: 232, 57, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-6: 226, 18, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-7: 189, 11, 106;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-8: 151, 6, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-9: 114, 2, 69;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-10: 77, 0, 48;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-mixedgray-12));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-mixedgray-11));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-mixedgray-13));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-mixedgray-2));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块/卡片
+   */
+  --o-color-fill2: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-mixedgray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-mixedgray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用-浅，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-mixedgray-14), 1);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-mixedgray-1), 0.2);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-13), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-mixedgray-13), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-13), 0.1);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 4px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 4px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+  /**
+ * @name openUBMC主题色
+ * @type color
+ * @group ubmc
+ * @description openUBMC主题色
+ */
+  --o-ubmc-color: 0, 113, 243;
+  --o-ubmc-color2: 51, 141, 245;
+  --o-ubmc-color3: 0, 84, 230;
+  --o-ubmc-color4: 153, 198, 250;
+  /**
+   * 先在这里覆盖一下使用蓝色
+   */
+  --o-color-ubmc: rgb(var(--o-ubmc-color));
+  /**
+   * @name openUBMC主题色hover态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-hover: rgba(var(--o-ubmc-color2), 1);
+  /**
+   * @name openUBMC主题色激活态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-focus: rgba(var(--o-ubmc-color3), 1);
+  /**
+   * @name openUBMC主题色禁用态
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题色hover态
+   */
+  --o-color-ubmc-disabled: rgba(var(--o-ubmc-color4), 1);
+  /**
+   * @name openUBMC主题背景色
+   * @type color
+   * @group ubmc
+   * @description openUBMC主题背景色
+   */
+  --o-color-ubmc-bg: rgba(247, 248, 250, 1);
+  --o-color-ubmc-bg2: rgba(235, 241, 250, 1);
+  /**
+    * @name openUBMC主题背景色悬浮态
+    * @type color
+    * @group ubmc
+    * @description openUBMC主题背景色悬浮态
+    */
+  --o-color-ubmc-bg-hover: rgba(247, 248, 250, 0.4);
+  /**
+    * @name openUBMC主题背景色悬浮态2
+    * @type color
+    * @group ubmc
+    * @description openUBMC主题背景色悬浮态2
+    */
+  --o-color-ubmc-bg-hover2: rgba(103, 163, 250, 0.4);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: var(--o-color-ubmc);
+  --o-color-link1: var(--o-color-primary1);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: var(--o-color-ubmc-hover);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: var(--o-color-ubmc-focus);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: var(--o-color-ubmc-disabled);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: var(--o-color-ubmc);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: var(--o-color-ubmc-hover);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: var(--o-color-ubmc-focus);
+  /**
+   * @name
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: var(--o-color-ubmc-disabled);
+
+  /**
+   * @name
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-ubmc-color), 1);
+}
diff --git a/packages/openubmc/src/assets/style/theme/element-plus.scss b/packages/openubmc/src/assets/style/theme/element-plus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a3ceb7d17b810b0069c6afd4a424d0fb526081ee
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/element-plus.scss
@@ -0,0 +1,43 @@
+:root {
+  --el-color-primary: var(--o-color-primary3) !important;
+  --el-border-radius-base: var(--o-radius_control-m) !important;
+  --el-border-color: var(--o-color-control1) !important;
+  --el-border-color-hover: var(--o-color-control2) !important;
+  --el-border-color-disabled: var(--o-color-control4) !important;
+  @include respond-to('phone') {
+    --el-border-radius-base: var(--o-radius_control-xs) !important;
+  }
+}
+.el-input {
+  .el-input__wrapper {
+    background-color: var(--o-color-fill2);
+  }
+}
+.el-input--large {
+  font-size: 16px;
+}
+
+.el-select__wrapper {
+  .el-select__selection {
+    font-size: 16px;
+  }
+}
+.el-message {
+  &.mobile-message {
+    top: initial !important;
+    bottom: 80px;
+    border: none;
+    border-radius: 4px;
+    background-color: rgba(var(--o-mixedgray-14), 0.6);
+    padding: 9px 16px;
+    .el-icon {
+      display: none;
+    }
+    .el-message__content {
+      font-size: 14px;
+      line-height: 22px;
+      color: var(--o-color-info1-inverse);
+    }
+
+  }
+}
diff --git a/packages/openubmc/src/assets/style/theme/index.scss b/packages/openubmc/src/assets/style/theme/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..14d2aa491dcc29f2fbb6b2bc0b59d35059de5ef3
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/index.scss
@@ -0,0 +1,61 @@
+@use "./media.token.scss" as *;
+
+@use "./o-theme/index.scss" as *;
+
+
+
+.hover-stress {
+  color: var(--o-color-info2);
+  @include hover {
+    color: var(--o-color-info1) !important;
+  }
+}
+
+.hover-info1-to-info3 {
+  color: var(--o-color-info1);
+  @include hover {
+    color: var(--o-color-info3);
+  }
+}
+
+.hover-underline {
+  --link-color-hover: var(--o-color-ubmc-hover);
+  --link-underline-x: 100%;
+  background: linear-gradient(0deg, var(--link-color-hover), var(--link-color-hover)) no-repeat var(--link-underline-x) bottom;
+  background-size: 0 1px;
+  transition: background-size var(--o-easing-standard) var(--o-duration-m2);
+
+  @include hover {
+    background-size: var(--link-underline-x) 1px;
+    background-position-x: left;
+  }
+}
+a.hover-underline {
+  color: var(--o-color-ubmc);
+}
+
+.hover-icon-rotate {
+  .o-icon {
+    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  }
+
+  @include hover {
+    .o-icon {
+      transform: rotate(-180deg);
+    }
+  }
+}
+.personal-wrapper {
+  display: flex;
+  .personal-left {
+    background-color: transparent;
+    width: 264px;
+    margin-right: var(--grid-column-gutter);
+  }
+  .personal-right {
+    flex-grow: 1;
+    @include respond-to('laptop-pc') {
+      width: var(--grid-17);
+    }
+  }
+}
diff --git a/packages/openubmc/src/assets/style/theme/media.token.scss b/packages/openubmc/src/assets/style/theme/media.token.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fee386e28ba15bbeb085e0a359531771ed9d8fd7
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/media.token.scss
@@ -0,0 +1,157 @@
+@use '../mixin/screen.scss' as *;
+
+:root,
+[data-o-theme='light'],
+[data-o-theme='dark'] {
+  --layout-border-radius: 8px;
+  @include respond-to('pad_v') {
+    --layout-border-radius: 4px;
+  }
+
+  @include respond-to('phone') {
+    --layout-border-radius: 4px;
+  }
+}
+
+@include respond-to('laptop') {
+  :root,
+  [data-o-theme='light'],
+  [data-o-theme='dark'] {
+    /**
+    * @name 中尺寸
+    * @type size
+    * @group control_size
+    * @description 尺寸
+    */
+    --o-control_size-m: 28px;
+    /**
+    * @name 大尺寸
+    * @type size
+    * @group control_size
+    * @description 尺寸
+    */
+    --o-control_size-l: 36px;
+  }
+}
+
+@include respond-to('<=pad') {
+  :root,
+  [data-o-theme='light'],
+  [data-o-theme='dark'] {
+    /**
+    * @name 中尺寸
+    * @type size
+    * @group control_size
+    * @description 尺寸
+    */
+    --o-control_size-m: 28px;
+  }
+}
+
+:root,
+[data-o-theme='light'],
+[data-o-theme='dark'] {
+  --o-gap-t2c: 40px;
+  --o-gap-section: 72px;
+  --o-gap-section-3: 12px;
+  --o-gap-section-4: 16px;
+  --o-gap-section-5: 24px;
+  --o-gap-section-6: 32px;
+  --o-gap-section-7: 40px;
+  --o-gap-section-8: 48px;
+  --layout-header-height: 72px;
+
+  @include respond-to('laptop') {
+    --o-gap-t2c: 24px;
+    --o-gap-section: 56px;
+    --o-gap-section-3: 8px;
+    --o-gap-section-4: 12px;
+    --o-gap-section-5: 16px;
+    --o-gap-section-6: 24px;
+    --o-gap-section-7: 24px;
+    --o-gap-section-8: 40px;
+    --layout-header-height: 64px;
+  }
+
+  @include respond-to('pad_h') {
+    --o-gap-t2c: 16px;
+    --o-gap-section: 40px;
+    --o-gap-section-3: 8px;
+    --o-gap-section-4: 8px;
+    --o-gap-section-5: 12px;
+    --o-gap-section-6: 16px;
+    --o-gap-section-7: 16px;
+    --o-gap-section-8: 24px;
+    --layout-header-height: 56px;
+  }
+
+  @include respond-to('pad_v') {
+    --o-gap-t2c: 16px;
+    --o-gap-section: 32px;
+    --o-gap-section-3: 12px;
+    --o-gap-section-4: 16px;
+    --o-gap-section-5: 24px;
+    --o-gap-section-6: 28px;
+    --o-gap-section-7: 12px;
+    --layout-header-height: 48px;
+  }
+
+  @include respond-to('phone') {
+    --o-gap-t2c: 12px;
+    --o-gap-section: 32px;
+    --o-gap-section-3: 8px;
+    --o-gap-section-4: 12px;
+    --o-gap-section-5: 16px;
+    --o-gap-section-6: 24px;
+    --o-gap-section-7: 12px;
+    --layout-header-height: 48px;
+  }
+}
+
+:root,
+[data-o-theme='light'],
+[data-o-theme='dark'] {
+  @include respond-to('laptop') {
+    --o-icon_size-xs: 16px;
+    --o-icon_size-s: 20px;
+    --o-icon_size-m: 24px;
+    --o-icon_size-l: 32px;
+    --o-icon_size-xl: 40px;
+    --o-icon_size-2xl: 48px;
+    --o-icon_size-3xl: 48px;
+    --o-icon_size-4xl: 56px;
+  }
+
+  @include respond-to('pad_h') {
+    --o-icon_size-xs: 16px;
+    --o-icon_size-s: 20px;
+    --o-icon_size-m: 24px;
+    --o-icon_size-l: 24px;
+    --o-icon_size-xl: 32px;
+    --o-icon_size-2xl: 40px;
+    --o-icon_size-3xl: 40px;
+    --o-icon_size-4xl: 48px;
+  }
+
+  @include respond-to('pad_v') {
+    --o-icon_size-xs: 16px;
+    --o-icon_size-s: 20px;
+    --o-icon_size-m: 24px;
+    --o-icon_size-l: 24px;
+    --o-icon_size-xl: 32px;
+    --o-icon_size-2xl: 32px;
+    --o-icon_size-3xl: 40px;
+    --o-icon_size-4xl: 40px;
+  }
+
+  @include respond-to('phone') {
+    --o-icon_size-xs: 16px;
+    --o-icon_size-s: 24px;
+    --o-icon_size-m: 24px;
+    --o-icon_size-l: 24px;
+    --o-icon_size-xl: 32px;
+    --o-icon_size-2xl: 32px;
+    --o-icon_size-3xl: 40px;
+    --o-icon_size-4xl: 40px;
+  }
+}
diff --git a/packages/openubmc/src/assets/style/theme/mixin.scss b/packages/openubmc/src/assets/style/theme/mixin.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c606c0048ad0d6d5c60a223040b935447d31833
--- /dev/null
+++ b/packages/openubmc/src/assets/style/theme/mixin.scss
@@ -0,0 +1,89 @@
+// 断点定义
+$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),
+  'laptop-pc': (1201px, 1680px),
+  'pc': (1441px, 1680px),
+  'pc_l': (1681px, 1920px),
+  '>pc_l': 1921px
+);
+
+@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);
+  }
+}
+
+@mixin x-svg-hover() {
+  overflow: hidden;
+  svg {
+    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  }
+  @include hover {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/packages/openubmc/src/assets/svg-icons/empty.svg b/packages/openubmc/src/assets/svg-icons/empty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3d5fb18b481f16f72226d869539a6756c682bccb
--- /dev/null
+++ b/packages/openubmc/src/assets/svg-icons/empty.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="33.7879238%" y1="100%" x2="33.7879238%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#93ACD8" offset="67.1944225%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2" points="55.6223176 39.8503818 113.304721 27.7437126 113.304721 130.498204 59.6070557 115.618373"></polygon>
+        <linearGradient x1="33.7879238%" y1="124.914444%" x2="33.7879238%" y2="-14.9207842%" id="linearGradient-3">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-4" points="112.274678 49.2758152 112.274678 27.7437126 181.287554 34.92297 123.979895 51.3772455"></polygon>
+        <filter x="-1.4%" y="-4.2%" width="102.9%" height="116.9%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.247420715   0 0 0 0 0.339189888   0 0 0 0 0.519198653  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="33.7879238%" y1="154.422046%" x2="33.7879238%" y2="0%" id="linearGradient-6">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M121.543192,50.3497006 L121.196857,137.691018 L53.5622318,120.25555 L53.5622318,65.8826774 L121.545064,50.3497006 L121.543192,50.3497006 Z M75.931755,79.5206161 C74.5464135,79.3491869 73.1573276,80.2100596 72.9813517,81.5908102 C72.807248,82.9696972 73.6740225,84.3523111 75.0612363,84.5256037 L97.2585278,88.4926991 C98.6438693,88.6659916 100.034827,87.8032556 100.207059,86.4243684 C100.379291,85.0417546 99.5143882,83.6610041 98.1290466,83.4914382 L75.931755,79.5206161 L75.931755,79.5206161 Z" id="path-7"></path>
+        <linearGradient x1="43.0345206%" y1="113.090249%" x2="43.0345206%" y2="-16.6761594%" id="linearGradient-8">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-9" points="183.347639 116.629 183.347639 63.2928818 121.545064 50.3497006 121.545064 137.691018"></polygon>
+        <linearGradient x1="33.7879238%" y1="100%" x2="33.7879238%" y2="0%" id="linearGradient-10">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M54.4693674,40.0742515 L39.6540784,60.829428 C38.3706068,62.6274813 38.7877577,65.1255508 40.585811,66.4090224 C41.0487584,66.7394797 41.5768589,66.9674046 42.1348748,67.0775888 L100.455166,78.5933461 C102.067393,78.9116918 103.710286,78.2115677 104.597306,76.8281603 L121.545064,50.3962184 L121.545064,50.3962184 L54.4693674,40.0742515 Z" id="path-11"></path>
+        <filter x="-1.2%" y="-2.6%" width="103.5%" height="110.2%" filterUnits="objectBoundingBox" id="filter-12">
+            <feOffset dx="1" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.895200955   0 0 0 0 0.915633914   0 0 0 0 0.947742849  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="33.7879238%" y1="100%" x2="33.7879238%" y2="0%" id="linearGradient-13">
+            <stop stop-color="#92ABD7" offset="0%"></stop>
+            <stop stop-color="#DDE6F4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M195.583113,53.9457597 L181.249118,34.9365269 L181.249118,34.9365269 L121.545064,50.5788488 L138.752197,75.2519633 C139.763571,76.7021617 141.607048,77.3163517 143.286103,76.7625221 L193.642321,60.1527275 C195.740279,59.4607247 196.880031,57.1990146 196.188028,55.1010568 C196.050945,54.6854601 195.846591,54.2951755 195.583113,53.9457597 Z" id="path-14"></path>
+        <filter x="-2.7%" y="-2.4%" width="104.0%" height="109.6%" filterUnits="objectBoundingBox" id="filter-15">
+            <feOffset dx="-1" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.895200955   0 0 0 0 0.915633914   0 0 0 0 0.947742849  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M145.236052,92.2570967 C145.236052,91.5381629 145.712732,90.906369 146.404051,90.7090263 L165.276916,85.3216088 C165.762737,85.1829269 166.268997,85.4643393 166.407679,85.950161 C166.430991,86.031826 166.442817,86.1163395 166.442817,86.2012667 C166.442817,86.9199989 165.969037,87.5527142 165.279363,87.755015 L151.251368,91.8698207 C150.139479,92.1959689 149.022005,92.5027668 147.899453,92.7900752 L146.412777,93.1705784 C145.908275,93.2997018 145.39462,92.9953972 145.265496,92.4908952 C145.245944,92.4145002 145.236052,92.3359542 145.236052,92.2570967 Z M145.236052,101.52751 C145.236052,100.770508 145.732728,100.103184 146.457874,99.885895 L160.984029,95.5331473 C161.484462,95.3831931 162.011705,95.6673122 162.161659,96.1677451 C162.188055,96.2558344 162.201464,96.3473021 162.201464,96.4392612 C162.201464,97.195514 161.710377,97.864168 160.988769,98.0904416 L149.844731,101.584861 C148.833709,101.901885 147.812173,102.184353 146.781904,102.431772 L146.476287,102.505166 C145.936343,102.634833 145.393515,102.302238 145.263848,101.762294 C145.245381,101.685398 145.236052,101.606592 145.236052,101.52751 Z M145.236052,110.060651 C145.236052,109.333742 145.713781,108.69326 146.410531,108.486051 L172.902774,100.607403 C173.386594,100.463518 173.895449,100.739089 174.039334,101.222909 C174.064481,101.307466 174.077253,101.395219 174.077253,101.483436 C174.077253,102.210345 173.599524,102.850827 172.902774,103.058036 L146.410531,110.936684 C145.926711,111.080569 145.417856,110.804998 145.273971,110.321178 C145.248824,110.236621 145.236052,110.148868 145.236052,110.060651 Z" id="path-16"></path>
+        <filter x="-6.9%" y="-3.9%" width="113.9%" height="115.6%" filterUnits="objectBoundingBox" id="filter-17">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.199292163 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="空状态-404" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="状态" transform="translate(-170.000000, -249.000000)">
+            <g id="空状态" transform="translate(170.000000, 249.000000)">
+                <rect id="矩形" x="0" y="0" width="240" height="240"></rect>
+                <g id="编组-9" transform="translate(0.000000, 24.000000)" fill-rule="nonzero">
+                    <path d="M46.219693,144.512854 C43.8651873,143.875755 40.9997552,141.226051 41.6132143,137.58398 C41.9174593,135.777719 43.0851846,134.608473 44.2959797,133.852419 C45.9707555,132.806651 47.8781343,132.412572 49.7162517,132.313015 C51.8363987,132.198177 53.95418,132.487727 56.058489,132.793933 C58.1358852,133.096229 60.2134475,133.366904 62.3001249,133.532166 C70.4653254,134.173785 78.6804501,133.562695 86.6615222,131.720019 C88.6313336,131.264619 90.5893352,130.730361 92.5355271,130.117245 C94.3797712,129.573441 96.1828683,128.898305 97.9310424,128.096994 C100.244882,126.984111 104.00776,124.818527 103.700936,120.807855 C103.538244,118.681287 102.288172,116.982838 101.027263,115.799546 C99.5026606,114.368792 97.7384942,113.427435 96.0106141,112.513301 C87.9735208,108.261211 79.9207387,104.059602 71.875818,99.8331176 C69.9982235,98.8467081 68.1081459,97.8867191 66.2859288,96.730765 C64.5798848,95.6485064 62.8818249,94.3913487 61.5088794,92.6530883 C60.3097197,91.1348493 59.2381685,89.0966474 59.2759747,86.8182524 C59.307326,84.9287275 60.1656352,83.3253087 61.2168476,82.126967 C63.8194431,79.1600954 67.5010473,77.957171 70.8284816,77.3270677 C74.9624631,76.5442285 79.156287,76.5482779 83.2929684,75.792353 C86.6330859,75.1819824 90.2019795,74.0036817 92.9184505,71.2425347 C94.0675619,70.1194561 94.8803263,68.6968643 95.2649494,67.1354282 C95.6118075,65.5000126 95.4432054,63.7970485 94.782431,62.2617558 C94.0465817,60.5009521 92.8728018,59.0982892 91.6385828,57.949719 C90.2208014,56.648696 88.6128073,55.5724684 86.8703294,54.7583358 C83.2014934,53.0068697 79.3435245,52.0949405 75.5854621,50.7508497 C73.7424227,50.091676 71.880738,49.368852 70.1693605,48.2366214 C68.7194622,47.2773777 67.1400354,45.9844031 66.3333805,44.0616411 C64.6690508,40.0945264 68.6395755,37.730178 70.8893925,36.8346036 C72.418579,36.2535626 73.9936525,35.8018411 75.5981,35.4841747 C75.9373476,35.4112037 75.7934046,34.7328099 75.4557486,34.805431 C73.7668801,35.1352874 72.1117289,35.6194603 70.5110474,36.2518792 C69.154342,36.8165882 67.7544971,37.5587232 66.6888116,38.8357857 C65.7075754,40.0018775 65.26663,41.5304747 65.4757076,43.0411755 C65.757975,44.9446341 66.9849762,46.4113029 68.1373393,47.4736416 C69.6612132,48.8784682 71.3986915,49.7959164 73.1603244,50.5437803 C75.0156486,51.3314179 76.9103422,51.9452535 78.8044015,52.5473607 C82.5891388,53.7504932 86.5436745,54.8226822 89.9602596,57.3828633 C92.3502739,59.1738041 95.5970568,62.5317228 94.8020487,66.6939212 C94.4491398,68.5415428 93.3774602,69.9860863 92.2209587,71.0485612 C90.8628364,72.2595227 89.2966479,73.2135506 87.5985023,73.8642838 C80.0273192,76.9167854 71.6947202,74.7338878 64.3186643,78.8798261 C61.8107588,80.2894662 58.7645555,82.8560061 58.7400348,86.8942383 C58.7273043,88.9920128 59.5666642,90.9159721 60.6043683,92.4366812 C61.8472435,94.2580732 63.456683,95.6049651 65.0941925,96.7306648 C66.8184117,97.8725745 68.6087313,98.9110076 70.4557172,99.8404921 C72.4734032,100.902214 74.4915323,101.9625 76.5101044,103.02135 L88.7598784,109.456903 L94.8462456,112.654414 C96.7038297,113.630313 98.6091185,114.566444 100.298078,115.999016 C101.680975,117.171996 103.314834,119.096341 103.173734,121.485852 C103.061684,123.383517 101.80332,124.752964 100.653449,125.668543 C99.1644835,126.854126 97.491875,127.620957 95.8276869,128.258185 C93.9081535,128.993172 91.9570573,129.602871 90.0021796,130.151053 C85.9978193,131.272296 81.9110136,132.073664 77.7801887,132.547623 C73.6596261,133.022913 69.5085186,133.177922 65.3640712,133.011259 C63.2700327,132.926837 61.1792453,132.759037 59.0917089,132.507857 C56.9399029,132.248208 54.7973063,131.848216 52.6399536,131.670754 C50.6885856,131.510234 48.7184211,131.547437 46.796709,132.063356 C45.1921272,132.494137 43.4969295,133.261985 42.2789148,134.760246 C41.3811568,135.904048 40.9315935,137.337102 41.0148153,138.789764 C41.0972805,140.23945 41.6132108,141.630745 42.4955231,142.782749 C43.39173,143.959358 44.6509883,144.806234 46.0773831,145.191621 C46.4137327,145.28263 46.5575813,144.604285 46.2197346,144.512877 L46.219693,144.512854 Z" id="路径" fill="#B6C7E5" transform="translate(72.361809, 90.000000) scale(-1, 1) translate(-72.361809, -90.000000) "></path>
+                    <g id="空状态" transform="translate(0.000000, 20.400000)">
+                        <g id="编组-16" transform="translate(0.000000, 102.754491)" opacity="0.5">
+                            <path d="M0,34.4199679 C0,53.4321412 53.7246742,68.845509 120.001877,68.845509 C186.275326,68.845509 240,53.4339993 240,34.4218258 C240,15.4133682 186.271571,0 120.001877,0 C53.728429,-0.00371517983 0,15.4115103 0,34.4199679 Z" id="路径" fill="#D7E1F2"></path>
+                            <path d="M41.2017167,25.6886227 C41.2017167,38.1748552 76.4798802,48.2946108 119.999062,48.2946108 C163.52012,48.2946108 198.798283,38.1748554 198.798283,25.6886227 C198.798283,13.2061051 163.52012,3.08263473 120.000938,3.08263473 C76.4780034,3.08263473 41.2017167,13.2023901 41.2017167,25.6886227 Z" id="路径" fill="#BFCEE8"></path>
+                        </g>
+                        <g id="路径">
+                            <use fill="#D1DBF2" xlink:href="#path-2"></use>
+                            <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        </g>
+                        <g id="路径">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="#D1DBF2" xlink:href="#path-4"></use>
+                            <use fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
+                        </g>
+                        <g id="形状">
+                            <use fill="#D1DBF2" xlink:href="#path-7"></use>
+                            <use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
+                        </g>
+                        <g id="路径">
+                            <use fill="#D1DBF2" xlink:href="#path-9"></use>
+                            <use fill="url(#linearGradient-8)" xlink:href="#path-9"></use>
+                        </g>
+                        <g id="路径">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                            <use fill="#D1DBF2" xlink:href="#path-11"></use>
+                            <use fill="url(#linearGradient-10)" xlink:href="#path-11"></use>
+                        </g>
+                        <g id="形状">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
+                            <use fill="#D1DBF2" xlink:href="#path-14"></use>
+                            <use fill="url(#linearGradient-13)" xlink:href="#path-14"></use>
+                        </g>
+                        <g id="形状">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-17)" xlink:href="#path-16"></use>
+                            <use fill="#FFFFFF" xlink:href="#path-16"></use>
+                        </g>
+                        <path d="M101.97425,2.5716331 C101.975268,3.48873855 102.478643,4.33565097 103.29476,4.79334662 C104.110876,5.25104226 105.115747,5.24998629 105.930848,4.79057646 C106.745948,4.33116663 107.247444,3.48319824 107.246429,2.56609279 C107.244857,1.14837067 106.063366,0.000320089271 104.607495,0.00184847637 C103.151624,0.00337991811 101.972681,1.15391098 101.97425,2.5716331 Z M114.272833,2.5716331 C114.274406,3.9893553 115.455896,5.13740599 116.911768,5.1358776 C118.367639,5.13434616 119.546582,3.98381499 119.545013,2.56609279 C119.54344,1.14837059 118.361949,0.000319905061 116.906078,0.00184829221 C115.450207,0.00337973399 114.271264,1.1539109 114.272833,2.5716331 Z M126.56952,2.5716331 C126.570538,3.4893984 127.074274,4.33692055 127.890977,4.79494613 C128.707681,5.25297171 129.713275,5.25191573 130.528962,4.79217597 C131.344649,4.33243622 131.846507,3.48385809 131.845492,2.56609279 C131.843919,1.14735065 130.66158,-0.00152686506 129.204661,1.5231798e-06 C127.747743,0.00153296386 126.56795,1.15289096 126.56952,2.5716331 L126.56952,2.5716331 Z" id="形状" fill="#C2D1E9"></path>
+                    </g>
+                    <g id="编组-26" transform="translate(41.005025, 0.000000)">
+                        <path d="M39.9333552,8.3909613 L2.13955655,0.1384045 L1.64839085,0.0314077222 C1.13797211,-0.0808076536 0.609165859,0.112840647 0.287816734,0.529648557 C-0.03353239,0.946456467 -0.0906216577,1.51274764 0.140930837,1.98666825 L15.1466157,32.8327456 C15.3436846,33.2349175 15.7215958,33.5150135 16.1598655,33.5837345 C16.5996806,33.6529912 17.0449661,33.4984395 17.3502585,33.1705676 L27.7728519,22.0462762 C27.9227397,21.8822564 28.133506,21.78908 28.3542365,21.7892555 C28.6566466,21.7849358 28.9367582,21.949792 29.0826561,22.2179581 L31.2175032,26.2150341 C31.4979219,26.7634226 32.1113126,27.0479573 32.7047496,26.904926 L32.7153756,26.9025459 C33.3162169,26.7737223 33.7517952,26.2452237 33.7693053,25.6237851 L34.1969598,16.3971105 C34.2020568,16.2819901 34.2304615,16.1691567 34.2804128,16.0656062 C34.3340354,15.9631269 34.4068141,15.8721677 34.4947048,15.7977827 L40.5075824,10.8015243 C40.9108744,10.4664417 41.0893686,9.92743593 40.9670637,9.41401136 C40.8447587,8.90058679 40.4431939,8.50316352 39.9333525,8.3909613 L39.9333552,8.3909613 Z M40.1642019,10.3767896 L34.1513406,15.37307 C34.0729911,15.4369572 34.0019926,15.5095661 33.9396853,15.5895262 L2.07124471,0.959664277 C2.0431371,0.94642694 2.01381441,0.93601263 1.9836979,0.928570961 C1.73009901,0.862407026 1.46590052,0.988411243 1.35484583,1.22848945 C1.24379115,1.46856766 1.31736082,1.75466512 1.52995828,1.90946602 L27.7329494,21.3929836 C27.5999797,21.4629625 27.4799268,21.5556272 27.3780676,21.6669047 L16.9555965,32.7911356 C16.7720395,32.9866416 16.505715,33.0790659 16.2422658,33.0386874 C15.9788166,32.9983089 15.7514608,32.8302189 15.6333097,32.5884705 L0.627633024,1.74239311 C0.490765036,1.45803722 0.525983152,1.11958255 0.718375873,0.870332207 C0.910768595,0.621081865 1.22668471,0.504631975 1.53236401,0.570287908 L2.0351941,0.68027845 L39.8171979,8.92986901 C40.1233035,8.99695333 40.3646184,9.23520564 40.438504,9.54328994 C40.5123895,9.85137425 40.4058508,10.175105 40.1642019,10.3767896 L40.1642019,10.3767896 Z" id="形状" fill="#A5BADE"></path>
+                        <path d="M39.9333552,8.3909613 L2.13955655,0.1384045 L1.64839085,0.0314077222 C1.13797211,-0.0808076536 0.609165859,0.112840647 0.287816734,0.529648557 C-0.03353239,0.946456467 -0.0906216577,1.51274764 0.140930837,1.98666825 L15.1466157,32.8327456 C15.3436846,33.2349175 15.7215958,33.5150135 16.1598655,33.5837345 C16.5996806,33.6529912 17.0449661,33.4984395 17.3502585,33.1705676 L27.7728519,22.0462762 C27.9227397,21.8822564 28.133506,21.78908 28.3542365,21.7892555 C28.6566466,21.7849358 28.9367582,21.949792 29.0826561,22.2179581 L31.2175032,26.2150341 C31.4979219,26.7634226 32.1113126,27.0479573 32.7047496,26.904926 L32.7153756,26.9025459 C33.3162169,26.7737223 33.7517952,26.2452237 33.7693053,25.6237851 L34.1969598,16.3971105 C34.2020568,16.2819901 34.2304615,16.1691567 34.2804128,16.0656062 C34.3340354,15.9631269 34.4068141,15.8721677 34.4947048,15.7977827 L40.5075824,10.8015243 C40.9108744,10.4664417 41.0893686,9.92743593 40.9670637,9.41401136 C40.8447587,8.90058679 40.4431939,8.50316352 39.9333525,8.3909613 L39.9333552,8.3909613 Z M40.1642019,10.3767896 L34.1513406,15.37307 C34.0729911,15.4369572 34.0019926,15.5095661 33.9396853,15.5895262 C33.8834978,15.6606595 33.8349792,15.7376659 33.7949556,15.8192343 C33.7530162,15.9026554 33.7199627,15.990356 33.6963533,16.0808557 L33.6969432,16.083544 C33.6720302,16.1778112 33.6576678,16.2746151 33.6541266,16.3721312 L33.2265972,25.5987756 C33.219206,25.9724469 32.9569592,26.2910332 32.5952006,26.3658174 L32.5898862,26.3670089 C32.2335763,26.4566016 31.8631863,26.2863353 31.6953626,25.9558012 L29.5599284,21.956045 C29.3362376,21.5377519 28.9145925,21.2664624 28.445483,21.2390029 L28.4428897,21.2395835 C28.4118436,21.2381086 28.3809116,21.2365732 28.3505858,21.2377262 C28.1352942,21.2378262 27.9232809,21.2911212 27.7329548,21.3929836 C27.5999851,21.4629625 27.4799323,21.5556272 27.378073,21.6669047 L16.9556019,32.7911356 C16.7720449,32.9866416 16.5057205,33.0790659 16.2422713,33.0386874 C15.978822,32.9983089 15.7514662,32.8302189 15.6333151,32.5884705 L0.627633024,1.74239311 C0.490765036,1.45803722 0.525983152,1.11958255 0.718375873,0.870332207 C0.910768595,0.621081865 1.22668471,0.504631975 1.53236401,0.570287908 L2.0351941,0.68027845 L39.8171979,8.92986901 C40.1233035,8.99695333 40.3646184,9.23520564 40.438504,9.54328994 C40.5123895,9.85137425 40.4058508,10.175105 40.1642019,10.3767896 L40.1642019,10.3767896 Z" id="形状" fill="#3F3D56"></path>
+                        <path d="M33.8291457,15.4239965 L33.6042412,15.9140938 L33.4653001,15.8535231 L33.4647094,15.8508945 L1.5756457,1.55990975 L28.2036781,20.8949871 L28.2062751,20.8944195 L28.2767815,20.94789 L27.9557134,21.3818182 L27.4927178,21.0449705 L1.25198056,1.99439755 C1.03907685,1.8430365 0.965401187,1.56329643 1.07661585,1.32855301 C1.18783052,1.0938096 1.45240959,0.970605332 1.7063738,1.03529903 C1.73653369,1.04257534 1.76589862,1.05275823 1.79404672,1.06570142 L33.7083947,15.3704722 L33.8291457,15.4239965 Z" id="路径" fill="#3F3D56"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/svg-icons/gitcode.svg b/packages/openubmc/src/assets/svg-icons/gitcode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f5ce3889c6b6d57e560d09f9c17d54d8f3f714f3
--- /dev/null
+++ b/packages/openubmc/src/assets/svg-icons/gitcode.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="账号设置" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号设置-账号绑定" transform="translate(-772.000000, -495.000000)"><g id="右侧内容" transform="translate(612.000000, 104.000000)"><g id="已绑定账号" transform="translate(32.000000, 383.000000)"><g id="绑定账号1" transform="translate(112.000000, 0.000000)"><image id="账号设置-账号绑定-第三方登入icon" x="16" y="8" width="24" height="24" xlink:href="data:image/png;base64,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"></image></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/svg-icons/logo-white.svg b/packages/openubmc/src/assets/svg-icons/logo-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9e07b88155b2484267aec03f95e9567bac72e8af
--- /dev/null
+++ b/packages/openubmc/src/assets/svg-icons/logo-white.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="133" height="32" viewBox="0 0 133 32">
+<path fill="#fff" d="M51.336 16.064c-1.152 0-2.273 0.374-3.197 1.066v-0.897c0-0.093-0.075-0.168-0.168-0.168h-2.069c-0.093 0-0.168 0.075-0.168 0.168v13.827c0 0.093 0.075 0.168 0.168 0.168h2.069c0.093 0 0.168-0.075 0.168-0.168v-4.327c1.867 1.398 4.421 1.425 6.317 0.068s2.7-3.787 1.987-6.011c-0.713-2.224-2.778-3.73-5.108-3.726v0zM51.336 24.322c-1.593-0.002-2.883-1.298-2.881-2.894s1.293-2.89 2.886-2.889c1.593 0.001 2.884 1.295 2.884 2.892-0.001 0.767-0.305 1.503-0.847 2.046s-1.276 0.847-2.042 0.846v0z"></path>
+<path fill="#fff" d="M65.102 23.452c-0.017 0.020-0.035 0.042-0.055 0.063-0.54 0.53-1.271 0.817-2.027 0.796-0.754 0.026-1.487-0.258-2.027-0.787-0.231-0.229-0.416-0.5-0.544-0.8-0.058-0.133-0.105-0.271-0.14-0.412-0.008-0.020-0.008-0.043 0-0.063 0.011-0.019 0.030-0.031 0.052-0.035h7.823c0 0 0.153 0 0.168-0.127 0 0 0.035-0.307 0.035-0.619-0.004-0.486-0.066-0.969-0.184-1.44-0.121-0.434-0.297-0.851-0.523-1.241-0.472-0.825-1.159-1.506-1.988-1.968-0.83-0.477-1.77-0.727-2.727-0.724-2.928 0.054-5.273 2.449-5.273 5.384s2.345 5.329 5.273 5.384c0.959 0.009 1.904-0.236 2.738-0.711 0.702-0.404 1.3-0.967 1.745-1.645 0.007-0.010 0.009-0.024 0.005-0.035s-0.013-0.021-0.025-0.026c-0.24-0.116-0.485-0.22-0.728-0.329l-1.468-0.659c-0.029-0.018-0.083-0.057-0.129-0.006zM61.004 19.443c1.145-1.053 2.903-1.057 4.053-0.009 0.179 0.17 0.328 0.368 0.442 0.587 0.021 0.036 0.039 0.074 0.055 0.113 0.024 0.079-0.035 0.079-0.035 0.079h-4.974c0 0-0.072 0-0.037-0.072s0.074-0.14 0.114-0.207c0.106-0.179 0.234-0.344 0.381-0.491v0z"></path>
+<path fill="#fff" d="M73.997 16.102c-1.185-0.001-2.322 0.47-3.16 1.309s-1.31 1.978-1.311 3.165v6.053c0 0.102 0.082 0.185 0.184 0.185h2.224c0.102 0 0.184-0.083 0.184-0.185v-6.053c0-1.044 0.845-1.891 1.887-1.891s1.887 0.847 1.887 1.891v6.053c0 0.102 0.082 0.185 0.184 0.185h2.224c0.102 0 0.184-0.083 0.184-0.185v-6.053c-0.001-1.19-0.475-2.331-1.316-3.171s-1.982-1.309-3.17-1.304v0z"></path>
+<path fill="#fff" d="M85.357 26.903c-1.411 0.001-2.765-0.56-3.763-1.559s-1.56-2.356-1.561-3.77v-8.125c0.001-0.119 0.097-0.214 0.216-0.214h2.647c0.118 0 0.215 0.096 0.216 0.214v8.125c0 1.243 1.005 2.251 2.246 2.251s2.246-1.008 2.246-2.251v-8.125c0.001-0.119 0.097-0.214 0.216-0.214h2.647c0.118 0 0.215 0.096 0.216 0.214v8.125c-0.001 1.414-0.563 2.771-1.561 3.77s-2.352 1.56-3.763 1.559z"></path>
+<path fill="#fff" d="M39.086 16.099c-2.172 0-4.13 1.312-4.96 3.323s-0.37 4.326 1.166 5.865c1.537 1.539 3.847 1.998 5.853 1.163s3.313-2.798 3.31-4.975c-0.002-2.97-2.405-5.377-5.369-5.375v0zM39.086 24.185c-1.491 0-2.7-1.211-2.701-2.706s1.207-2.707 2.698-2.708c1.491-0.001 2.701 1.209 2.703 2.703 0.001 0.719-0.282 1.409-0.789 1.917s-1.195 0.794-1.912 0.794v0z"></path>
+<path fill="#fff" d="M103.209 17.329c0 1.269-0.63 2.013-1.551 2.438 1.73 0.432 2.522 1.45 2.522 3.052 0 2.709-1.999 4.085-4.862 4.085h-6.474c-0.159 0-0.287-0.129-0.287-0.288v-13.081c0.001-0.16 0.13-0.289 0.289-0.29h5.501c2.863 0.002 4.862 1.376 4.862 4.085zM95.346 16.289v2.079c0 0.159 0.129 0.288 0.287 0.288 1.38 0 1.677 0 2.751 0 1.734 0 2.047-0.75 2.045-1.33s-0.311-1.333-2.082-1.333h-2.712c-0.078 0-0.152 0.031-0.207 0.087s-0.084 0.131-0.083 0.209zM95.346 21.572v2.286c0 0.159 0.129 0.288 0.287 0.288h3.793c1.772 0 1.973-0.752 1.973-1.331s-0.203-1.538-1.934-1.538c-1.142 0-1.899 0-3.832 0-0.077 0.001-0.151 0.033-0.205 0.088s-0.084 0.13-0.083 0.207v0z"></path>
+<path fill="#fff" d="M108.313 13.37l4.269 7.53 4.269-7.53c0.042-0.075 0.121-0.121 0.206-0.122h2.415c0.131 0 0.238 0.107 0.238 0.238v13.179c0 0.132-0.106 0.238-0.238 0.238h-2.316c-0.131 0-0.238-0.107-0.238-0.238v-7.776l-3.583 6.321c-0.041 0.074-0.12 0.12-0.204 0.12h-1.105c-0.085 0-0.164-0.046-0.206-0.12l-3.574-6.321v7.774c0 0.132-0.106 0.238-0.238 0.238h-2.316c-0.063 0-0.123-0.025-0.167-0.070s-0.069-0.105-0.068-0.168v-13.177c-0-0.063 0.024-0.124 0.068-0.168s0.105-0.070 0.167-0.070h2.412c0.087-0.001 0.168 0.046 0.21 0.122v0z"></path>
+<path fill="#fff" d="M128.341 13.303c1.57 0 3.629 0.864 4.845 1.991 0.094 0.090 0.147 0.214 0.147 0.344s-0.053 0.255-0.147 0.344l-1.153 1.126c-0.178 0.175-0.461 0.181-0.647 0.015-0.781-0.728-2.056-1.274-3.053-1.274h-0.017c-1.516 0.003-2.916 0.816-3.671 2.134s-0.752 2.939 0.008 4.254c0.761 1.315 2.163 2.123 3.679 2.12 0.997 0 2.273-0.554 3.053-1.274 0.185-0.167 0.469-0.161 0.647 0.015l1.153 1.126c0.094 0.090 0.147 0.214 0.147 0.344s-0.053 0.255-0.147 0.344c-1.216 1.126-3.276 1.991-4.845 1.991-3.795 0-6.874-3.047-6.874-6.801s3.079-6.799 6.87-6.799h0.004z"></path>
+<path fill="#fff" d="M0.293 19.157v-5.887c0-1.86 1.505-3.368 3.36-3.368s3.36 1.508 3.36 3.368v5.92c0 3.3 2.629 6.038 5.923 6.072 1.597 0.014 3.134-0.613 4.268-1.74s1.772-2.662 1.771-4.263v-5.989c0-1.86 1.505-3.368 3.36-3.368s3.36 1.508 3.36 3.368v5.989c0 7.036-5.689 12.74-12.709 12.742-6.983 0-12.696-5.843-12.696-12.843z"></path>
+<path fill="#fff" d="M22.37 0c1.874 0 3.394 1.519 3.394 3.394v0.016c0 1.874-1.519 3.394-3.394 3.394s-3.394-1.519-3.394-3.394v-0.016c0-1.874 1.519-3.394 3.394-3.394z"></path>
+<path fill="#fff" d="M3.84 0.024c-2.124 0.004-3.842 1.732-3.84 3.861s1.726 3.852 3.849 3.851c2.124-0.001 3.844-1.727 3.844-3.856 0-1.024-0.406-2.006-1.129-2.729s-1.703-1.129-2.725-1.127v0zM3.84 5.819c-1.068 0-1.934-0.868-1.934-1.939s0.866-1.939 1.934-1.939c1.068 0 1.934 0.868 1.934 1.939s-0.866 1.939-1.934 1.939v0z"></path>
+</svg>
diff --git a/packages/openubmc/src/assets/svg-icons/logo.svg b/packages/openubmc/src/assets/svg-icons/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87f55108845cf7ff9a4443269c278a2d5758e741
--- /dev/null
+++ b/packages/openubmc/src/assets/svg-icons/logo.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="120" height="30" viewBox="0 0 100 24">
+<path fill="#000" d="M38.502 12.048c-0.864 0-1.705 0.281-2.397 0.799v-0.673c0-0.070-0.056-0.126-0.126-0.126h-1.552c-0.069 0-0.126 0.056-0.126 0.126v10.371c0 0.070 0.056 0.126 0.126 0.126h1.552c0.069 0 0.126-0.056 0.126-0.126v-3.245c1.4 1.048 3.316 1.069 4.738 0.051s2.025-2.84 1.49-4.508c-0.534-1.668-2.083-2.798-3.831-2.795v0zM38.502 18.241c-1.195-0.002-2.162-0.973-2.161-2.171s0.97-2.168 2.165-2.167c1.195 0.001 2.163 0.971 2.163 2.169-0 0.576-0.229 1.127-0.635 1.534s-0.957 0.635-1.531 0.635v0z"></path>
+<path fill="#000" d="M48.826 17.589c-0.012 0.015-0.026 0.032-0.041 0.047-0.405 0.397-0.954 0.613-1.52 0.597-0.566 0.020-1.115-0.194-1.52-0.59-0.173-0.172-0.312-0.375-0.408-0.6-0.043-0.1-0.079-0.203-0.105-0.309-0.006-0.015-0.006-0.032 0-0.047 0.009-0.014 0.023-0.024 0.039-0.026h5.867c0 0 0.115 0 0.126-0.096 0 0 0.026-0.23 0.026-0.464-0.003-0.364-0.049-0.727-0.138-1.080-0.091-0.326-0.223-0.638-0.392-0.931-0.354-0.619-0.869-1.129-1.491-1.476-0.622-0.358-1.328-0.545-2.045-0.543-2.196 0.041-3.955 1.837-3.955 4.038s1.759 3.997 3.955 4.038c0.719 0.007 1.428-0.177 2.053-0.533 0.527-0.303 0.975-0.725 1.309-1.234 0.005-0.008 0.007-0.018 0.004-0.027s-0.010-0.016-0.019-0.019c-0.18-0.087-0.363-0.165-0.546-0.247l-1.101-0.494c-0.022-0.014-0.062-0.043-0.097-0.004zM45.753 14.582c0.859-0.79 2.177-0.793 3.040-0.007 0.134 0.127 0.246 0.276 0.332 0.44 0.016 0.027 0.030 0.055 0.041 0.084 0.018 0.060-0.026 0.060-0.026 0.060h-3.731c0 0-0.054 0-0.028-0.054s0.055-0.105 0.086-0.155c0.079-0.134 0.175-0.258 0.286-0.368v0z"></path>
+<path fill="#000" d="M55.498 12.077c-0.889-0.001-1.741 0.352-2.37 0.982s-0.983 1.483-0.983 2.374v4.54c0 0.076 0.062 0.138 0.138 0.138h1.668c0.076 0 0.138-0.062 0.138-0.138v-4.54c0-0.783 0.633-1.418 1.415-1.418s1.415 0.635 1.415 1.418v4.54c0 0.076 0.062 0.138 0.138 0.138h1.668c0.076 0 0.138-0.062 0.138-0.138v-4.54c-0.001-0.893-0.356-1.748-0.987-2.378s-1.487-0.981-2.377-0.978v0z"></path>
+<path fill="#000" d="M64.018 20.178c-1.058 0.001-2.074-0.42-2.823-1.17s-1.17-1.767-1.171-2.827v-6.094c0.001-0.089 0.073-0.161 0.162-0.161h1.986c0.089 0 0.161 0.072 0.162 0.161v6.094c0 0.932 0.754 1.688 1.684 1.688s1.684-0.756 1.684-1.688v-6.094c0.001-0.089 0.073-0.161 0.162-0.161h1.986c0.089 0 0.161 0.072 0.162 0.161v6.094c-0.001 1.061-0.422 2.078-1.171 2.827s-1.764 1.17-2.823 1.17z"></path>
+<path fill="#000" d="M29.314 12.074c-1.629 0-3.097 0.984-3.72 2.492s-0.278 3.245 0.875 4.399c1.152 1.154 2.885 1.498 4.389 0.872s2.484-2.099 2.483-3.732c-0.002-2.228-1.804-4.032-4.026-4.032v0zM29.314 18.139c-1.118 0-2.025-0.908-2.026-2.029s0.905-2.030 2.024-2.031c1.118-0.001 2.026 0.907 2.028 2.028 0.001 0.539-0.212 1.056-0.592 1.438s-0.896 0.596-1.434 0.595v0z"></path>
+<path fill="#000" d="M77.407 12.996c0 0.951-0.473 1.51-1.163 1.828 1.297 0.324 1.892 1.087 1.892 2.289 0 2.032-1.499 3.064-3.647 3.064h-4.856c-0.119 0-0.216-0.097-0.216-0.216v-9.811c0.001-0.12 0.097-0.217 0.217-0.217h4.126c2.147 0.001 3.646 1.032 3.646 3.064zM71.51 12.217v1.559c0 0.119 0.097 0.216 0.216 0.216 1.035 0 1.257 0 2.063 0 1.3 0 1.535-0.562 1.534-0.997s-0.234-1-1.561-1h-2.034c-0.058 0-0.114 0.023-0.155 0.065s-0.063 0.098-0.062 0.156zM71.51 16.179v1.715c0 0.119 0.097 0.216 0.216 0.216h2.845c1.329 0 1.48-0.564 1.48-0.999s-0.152-1.154-1.451-1.154c-0.857 0-1.425 0-2.874 0-0.058 0.001-0.113 0.024-0.154 0.066s-0.063 0.098-0.062 0.156v0z"></path>
+<path fill="#000" d="M81.235 10.027l3.202 5.648 3.202-5.648c0.031-0.056 0.091-0.091 0.155-0.091h1.812c0.098 0 0.178 0.080 0.178 0.179v9.884c0 0.099-0.080 0.179-0.178 0.179h-1.737c-0.098 0-0.178-0.080-0.178-0.179v-5.832l-2.688 4.741c-0.031 0.056-0.090 0.090-0.153 0.090h-0.829c-0.064 0-0.123-0.034-0.155-0.090l-2.681-4.741v5.831c0 0.099-0.080 0.179-0.178 0.179h-1.737c-0.047 0-0.092-0.019-0.126-0.052s-0.052-0.079-0.051-0.126v-9.883c-0-0.047 0.018-0.093 0.051-0.126s0.078-0.052 0.126-0.052h1.809c0.065-0.001 0.126 0.034 0.158 0.091v0z"></path>
+<path fill="#000" d="M96.256 9.977c1.177 0 2.722 0.648 3.634 1.493 0.070 0.067 0.11 0.161 0.11 0.258s-0.040 0.191-0.11 0.258l-0.865 0.845c-0.134 0.131-0.346 0.136-0.485 0.011-0.586-0.546-1.542-0.956-2.29-0.956h-0.012c-1.137 0.002-2.187 0.612-2.753 1.601s-0.564 2.204 0.006 3.19c0.57 0.986 1.622 1.592 2.76 1.59 0.748 0 1.705-0.415 2.29-0.956 0.139-0.126 0.352-0.121 0.485 0.011l0.865 0.845c0.070 0.067 0.11 0.161 0.11 0.258s-0.040 0.191-0.11 0.258c-0.912 0.845-2.457 1.493-3.634 1.493-2.846 0-5.155-2.285-5.155-5.101s2.309-5.099 5.153-5.099h0.003z"></path>
+<path fill="#418cff" d="M0.22 14.368v-4.415c0-1.395 1.128-2.526 2.52-2.526s2.52 1.131 2.52 2.526v4.44c0 2.475 1.972 4.529 4.442 4.554 1.198 0.010 2.35-0.459 3.201-1.305s1.329-1.997 1.328-3.197v-4.491c0-1.395 1.128-2.526 2.52-2.526s2.52 1.131 2.52 2.526v4.491c0 5.277-4.267 9.555-9.531 9.556-5.237 0-9.522-4.382-9.522-9.632z"></path>
+<path fill="#418cff" d="M16.777 0c1.406 0 2.545 1.14 2.545 2.545v0.012c0 1.406-1.14 2.545-2.545 2.545s-2.545-1.14-2.545-2.545v-0.012c0-1.406 1.14-2.545 2.545-2.545z"></path>
+<path fill="#418cff" d="M2.88 0.018c-1.593 0.003-2.882 1.299-2.88 2.895s1.294 2.889 2.887 2.888c1.593-0.001 2.883-1.295 2.883-2.892 0-0.768-0.305-1.504-0.847-2.047s-1.278-0.846-2.044-0.845v0zM2.88 4.364c-0.801 0-1.451-0.651-1.451-1.454s0.65-1.454 1.451-1.454c0.801 0 1.451 0.651 1.451 1.454s-0.65 1.454-1.451 1.454v0z"></path>
+</svg>
diff --git a/packages/openubmc/src/assets/svg-icons/mail.svg b/packages/openubmc/src/assets/svg-icons/mail.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a5905d9d9f205dbb433f96d2e6105e48351c119f
--- /dev/null
+++ b/packages/openubmc/src/assets/svg-icons/mail.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path opacity="0.8" fill="#000" d="M26.307 5.012c1.473 0 2.667 1.193 2.667 2.667v7.32c0 0.516-0.417 0.933-0.933 0.933s-0.933-0.417-0.933-0.933l-0.001-6.997-9.461 7.828c-0.999 0.825-2.445 0.815-3.431-0.025l-9.465-8.075v16.671c0 0.441 0.359 0.8 0.8 0.8h20.759c0.441 0 0.8-0.359 0.8-0.8v-5.395c0-0.516 0.417-0.933 0.933-0.933s0.933 0.417 0.933 0.933v5.395c0 1.473-1.193 2.667-2.667 2.667h-20.759c-1.473 0-2.667-1.193-2.667-2.667v-16.721c0-1.473 1.193-2.667 2.667-2.667h20.759zM25.533 6.879h-18.907l8.799 7.505c0.296 0.252 0.729 0.256 1.029 0.008l9.079-7.513z"></path></svg>
\ No newline at end of file
diff --git a/packages/openubmc/src/assets/title-bg.png b/packages/openubmc/src/assets/title-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a0338c7cadf145c1ef346758bac79ae376adb3f
Binary files /dev/null and b/packages/openubmc/src/assets/title-bg.png differ
diff --git a/packages/openubmc/src/components/AppFooter.vue b/packages/openubmc/src/components/AppFooter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25f0abb56310d32ef2dc646e5bc1e726cf45ff68
--- /dev/null
+++ b/packages/openubmc/src/components/AppFooter.vue
@@ -0,0 +1,294 @@
+<script setup lang="tsx">
+import { FOOTER_LINK, FRIEND_LINK } from '@/config/home';
+import { getYearByOffset } from '@/shared/utils';
+import { RECORDAL_URL, BEIAN_URL } from '@/config/url-config';
+import { useScreen } from 'shared/hooks/useScreen';
+import { ODivider } from '@opensig/opendesign';
+import { useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import IconLogoWhite from '~icons/app/logo-white.svg';
+
+const { lePadV } = useScreen();
+const wechatRef = useTemplateRef('wechatRef');
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <footer class="app-footer">
+    <div class="app-footer-wrap content-width">
+      <div class="footer-content">
+        <div v-for="item in FOOTER_LINK" :key="item.title">
+          <p class="content-title">{{ item.title }}</p>
+          <div v-for="link in item.children" :key="link.title" class="link">
+            <a v-if="link.link" :href="link.link" target="_blank" rel="noopener noreferrer">{{ link.title }}</a>
+            <p v-else class="link-disabled">
+              <span>{{ link.title }}</span>
+              <span class="disabled-tag">{{ t('header.notOnline') }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="friend-link">
+        <span>友情链接</span>
+        <div class="link-wrapper">
+          <a v-for="item in FRIEND_LINK" :key="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>
+        </div>
+      </div>
+      <ODivider></ODivider>
+
+      <div class="footer-attach">
+        <div class="footer-attach-logo">
+          <IconLogoWhite />
+          <a href="mailto:contact@openubmc.cn">contact@openubmc.cn</a>
+        </div>
+        <div class="footer-attach-center">
+          <p class="about-p">
+            <a href="/privacy">{{ t('footer.privacyPolicy') }}</a>
+            <span>&nbsp;|&nbsp;</span>
+            <a href="/legal">{{ t('footer.legalStatement') }}</a>
+            <span>&nbsp;|&nbsp;</span>
+            <a href="/cookies">{{ t('footer.aboutCookies') }}</a>
+          </p>
+          <p class="copyright-p">
+            <span>{{ t('footer.copyright', { year: getYearByOffset() }) }}</span>
+            <span>&nbsp;</span>
+            <a :href="RECORDAL_URL" target="_blank" rel="noopener noreferrer">{{ t('footer.recordal') }}</a>
+          </p>
+          <p>
+            <img src="@/assets/category/home/recordal.png" />
+            <a :href="BEIAN_URL" target="_blank" rel="noopener noreferrer">{{ t('footer.beian') }}</a>
+          </p>
+          <p class="mulan-p">
+            <span>遵循&nbsp;</span>
+            <span>木兰宽松许可证第2版（MulanPSL2）</span>
+          </p>
+        </div>
+        <div class="footer-attach-wechat" ref="wechatRef">
+          <ElPopover v-if="!lePadV" :wrapper="wechatRef" popper-class="qr-code-popover" placement="top">
+            <template #reference>
+              <div class="qr-popover">
+                <img src="@/assets/category/home/wechat.svg" alt="" />
+                <span>openUBMC公众号</span>
+              </div>
+            </template>
+            <img class="qr-code" src="@/assets/category/home/wechat-qr.jpg" alt="" />
+          </ElPopover>
+          <template v-else>
+            <img class="qr-code" src="@/assets/category/home/wechat-qr.jpg" alt="" />
+            <span>openUBMC公众号</span>
+          </template>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.app-footer {
+  // height: 100%;
+  color: rgb(var(--o-white));
+  padding: 32px 0 16px;
+  background-image: url('/footer-bg.png');
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  @include respond-to('<=pad_v') {
+    padding-top: 16px;
+  }
+  @include tip2;
+
+  --bottom-padding-top: var(--o-gap-4);
+  @include respond-to('<=pad_v') {
+    --bottom-padding-top: var(--o-gap-2);
+  }
+  a {
+    color: rgba(255, 255, 255, 0.8);
+
+    @include hover {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+}
+
+.app-footer-wrap {
+  height: 100%;
+  margin: auto;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: center;
+  gap: 80px;
+  margin-bottom: 48px;
+  @include respond-to('pad') {
+    gap: 50px;
+  }
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+  .content-title {
+    @include h4;
+    padding-bottom: 10px;
+  }
+
+  .link {
+    @include tip1;
+  }
+
+  a {
+    @include tip1;
+    display: block;
+  }
+
+  .link + .link {
+    margin-top: var(--o-gap-2);
+  }
+
+  .link-disabled {
+    line-height: 16px;
+    display: flex;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: not-allowed;
+
+    .disabled-tag {
+      margin-left: var(--o-gap-1);
+      border: 1px solid rgba(61, 63, 67, 1);
+      border-radius: var(--o-radius-xs);
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.6);
+      height: 16px;
+      width: 38px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.friend-link {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px 24px;
+  flex-wrap: wrap;
+  span {
+    color: #fff;
+    @include tip2;
+    @include respond-to('phone') {
+      @include tip1;
+    }
+  }
+  .link-wrapper {
+    display: flex;
+    gap: 8px 24px;
+    flex-wrap: wrap;
+  }
+  a {
+    display: block;
+    color: rgba(255, 255, 255, 0.8);
+    @include tip2;
+
+    @include hover {
+      color: rgba(255, 255, 255, 1);
+    }
+    @include respond-to('phone') {
+      @include tip1;
+    }
+  }
+}
+.o-divider {
+  --o-divider-bd-color: rgba(255, 255, 255, 0.15);
+}
+
+.footer-attach {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+  @include tip1;
+  .footer-attach-logo {
+    display: flex;
+    flex-direction: column;
+    order: 2;
+    a {
+      color: #fff;
+    }
+    @include respond-to('<=pad_v') {
+      align-items: center;
+      margin: 16px 0;
+      img {
+        width: 100px;
+      }
+    }
+  }
+  .footer-attach-center {
+    order: 2;
+    color: rgba(255, 255, 255, 0.8);
+    p + p {
+      margin-top: 4px;
+    }
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      row-gap: 4px;
+      &.about-p {
+        margin-bottom: 6px;
+        a {
+          color: #fff;
+        }
+      }
+      &.copyright-p {
+        flex-wrap: wrap;
+      }
+      &.mulan-p {
+        span:last-child {
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+    }
+    @include respond-to('<=pad_v') {
+      order: 1;
+    }
+  }
+  .footer-attach-wechat {
+    order: 2;
+    color: rgba(255, 255, 255, 0.8);
+    .qr-popover {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      img {
+        width: 25px;
+        height: 20px;
+      }
+    }
+    .o-popup {
+      min-width: 96px !important;
+    }
+
+    @include respond-to('<=pad_v') {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+  @include respond-to('<=pad_v') {
+    flex-direction: column;
+  }
+}
+</style>
+<style lang="scss">
+.qr-code {
+  width: 80px;
+  height: 80px;
+}
+.qr-code-popover {
+  padding: 7px !important;
+  min-width: 96px !important;
+  width: 96px !important;
+}
+</style>
diff --git a/packages/openubmc/src/components/AppHeader.vue b/packages/openubmc/src/components/AppHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..62af07bf18cff531e640012838e54d33b9a6738b
--- /dev/null
+++ b/packages/openubmc/src/components/AppHeader.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import { showGuard, logout } from 'shared/utils/login';
+
+import Logo from '~icons/app/logo.svg';
+import LogoWhite from '~icons/app/logo-white.svg';
+import IconLocale from '~icons/shared/icon-locale.svg';
+import { openCommunityInfo } from '@/shared/common';
+import { OIcon, OIconChevronDown } from '@opensig/opendesign';
+import HeaderNav from './HeaderNav.vue';
+import useLoginStore from '@/stores/login';
+import LoadingArc from './LoadingArc.vue';
+
+const loginStore = useLoginStore();
+const dialogVisible = ref(false);
+const router = useRouter();
+const route = useRoute();
+const { t, locale } = useI18n();
+
+const navList = computed(() => [
+  {
+    name: 'overview',
+    label: t('common.nav.overview'),
+  },
+  {
+    name: 'detail',
+    label: t('common.nav.contributors'),
+  },
+]);
+
+const isOverview = computed(() => {
+  return route.name === 'overview' || route.name === 'detail';
+});
+
+const backgroundColor = computed(() => {
+  return isOverview.value ? 'transparent' : '#fff';
+});
+
+const headerTextColor = computed(() => {
+  return isOverview.value ? '#fff' : '#000';
+});
+
+const language = computed(() => locale.value ?? 'zh')
+
+// 选择语言;
+const options = reactive([
+  { value: 'zh', label: '中文' },
+  { value: 'en', label: 'English' },
+]);
+
+// 选择语言
+const changeLanguage = (command: string) => {
+  locale.value = command;
+  router.push({ name: route.name, params: { lang: command }});
+};
+
+const goHome = () => {
+  router.push({ name: 'overview', params: { lang: locale.value ?? 'zh' }});
+};
+
+watch(
+  locale,
+  () => {
+    document.title = language.value === 'zh' ? 'openUBMC 贡献看板' : 'openUBMC DATASTAT';
+  },
+  { immediate: true }
+);
+
+const isAbout = computed(() => {
+  const p = route.path.split('/').slice(-1).toString();
+  return p === 'about';
+});
+
+const jumpToUserZone = () => {
+  window.open('https://www.openubmc.cn/my/collections', '_blank');
+};
+
+const logoutConfirm = () => {
+  dialogVisible.value = false;
+  logout();
+}
+</script>
+
+<template>
+  <header class="app-header" :class="{ isabout: isAbout }">
+    <div class="wrap">
+      <div class="header-logo">
+        <p class="header-title" @click="goHome">{{ t('common.datastat') }}</p>
+        <span class="line"></span>
+        <a target="_blank" :href="openCommunityInfo.link">
+          <OIcon style="width: 120px;">
+            <LogoWhite v-if="isOverview" />
+            <Logo v-else />
+          </OIcon>
+        </a>
+      </div>
+      <HeaderNav :lang="language" :navs="navList" style="--color: var(--o-color-primary1);"></HeaderNav>
+      <!-- <div class="language">
+        <el-dropdown popper-class="language-change" @command="changeLanguage">
+          <div class="lang-change-icon-wrapper">
+            <OIcon class="lang-change-icon">
+              <IconLocale />
+              <div class="lang-icon-label">{{ language === 'zh' ? '中' : 'EN' }}</div>
+            </OIcon>
+            <OIcon style="margin-left: 4px;"><OIconChevronDown /></OIcon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="(item, key) in options" :key="key" :class="{ active: language === item.value }" :command="item.value">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div> -->
+
+      <div class="opt-user">
+        <LoadingArc v-if="loginStore.logining" />
+        <el-dropdown v-else-if="loginStore.logined">
+          <div class="user-info">
+            <el-avatar v-if="loginStore.photo" :src="loginStore.photo" :alt="loginStore.nickname || 'LogOut'" class="user-avatar" />
+            <span class="user-name">{{ loginStore.username }}</span>
+            <OIcon style="margin-left: 4px;"><OIconChevronDown /></OIcon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="jumpToUserZone">{{ t('common.personalCenter') }}</el-dropdown-item>
+              <el-dropdown-item @click="dialogVisible = true">{{ t('common.logout') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <div v-else class="login" @click="showGuard">
+          {{ t('common.login') }}
+        </div>
+      </div>
+      <el-dialog v-model="dialogVisible" :title="t('common.pleaseConfirm')" width="30%">
+        <span>{{ t('common.titleConfirm') }}</span>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="dialogVisible = false">{{ t('common.Cancel') }}</el-button>
+            <el-button type="primary" @click="logoutConfirm">{{ t('common.Confirm') }}</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+:deep(.o-badge-content) {
+  top: 10px !important;
+  right: 10px !important;
+}
+.app-header {
+  background-color: v-bind(backgroundColor);
+  position: absolute;
+  min-width: 1024px;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  top: 0;
+  box-shadow: 0 3px 9px rgba(0, 18, 85, 0.08);
+  .wrap {
+    display: flex;
+    height: var(--header-height);
+    align-items: center;
+  }
+
+  transition: background-color 0.3s;
+}
+
+:deep(.nav-list .nav-item) {
+  color: v-bind(headerTextColor);
+}
+
+:deep(.el-dropdown-menu__item) {
+  justify-content: center;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  .header-title {
+    cursor: pointer;
+    font-size: 28px;
+    font-weight: 600;
+    white-space: nowrap;
+    color: v-bind(headerTextColor);
+  }
+  .line {
+    height: 16px;
+    background: rgb(196,196,196);
+    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 {
+  text-align: right;
+  .el-dropdown {
+    color: #000;
+    cursor: pointer;
+
+    .o-icon {
+      margin-left: 5px;
+    }
+  }
+
+  .lang-change-icon-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .lang-change-icon {
+    font-size: 24px;
+    position: relative;
+    color: v-bind(headerTextColor);
+    transition: color 0.3s;
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+    .lang-icon-label {
+      position: absolute;
+      right: 0px;
+      bottom: 2px;
+      font-size: 10px;
+      line-height: 10px;
+      background-color: var(--e-color-bg2);
+    }
+  }
+}
+.el-dropdown-menu__item {
+  justify-content: center;
+}
+.opt-user {
+  margin-left: 20px;
+  
+  .user-info {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    .user-name {
+      @include text1;
+      color: v-bind(headerTextColor);
+      display: inline-block;
+      margin-left: 8px;
+      max-width: 90px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.login {
+  // width: 96px;
+  white-space: nowrap;
+  height: 32px;
+  color: v-bind(headerTextColor);
+  line-height: 30px;
+  // border: 1px solid #fff;
+  text-align: center;
+  // color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+}
+</style>
diff --git a/packages/openubmc/src/components/CommonLayout.vue b/packages/openubmc/src/components/CommonLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2c09545b76452158e8aa9a64d5fc89a90548e23
--- /dev/null
+++ b/packages/openubmc/src/components/CommonLayout.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import AppFooter from './AppFooter.vue';
+
+</script>
+
+<template>
+  <div class="common-layout">
+    <div class="wrap">
+      <slot></slot>
+    </div>
+    <AppFooter class="ly-footer" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrap {
+  padding-top: 32px;
+  min-width: 1024px;
+  padding-bottom: 72px;
+  min-height: var(--layout-content-height);
+}
+
+.common-layout {
+  padding-top: var(--header-height);
+  background-color: rgb(243, 243, 245);
+  min-width: fit-content;
+  min-height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/packages/openubmc/src/components/HeaderNav.vue b/packages/openubmc/src/components/HeaderNav.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f1474e60ddb24ee66105a39061a2e92f351434e
--- /dev/null
+++ b/packages/openubmc/src/components/HeaderNav.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+const props = defineProps<{
+  navs: { name: string; label: string; }[];
+}>();
+
+const emits = defineEmits(['navClick']);
+const navClick = (item: (typeof props.navs)[number]) => {
+  emits('navClick', item.name);
+  router.push({ name: item.name });
+};
+</script>
+
+<template>
+  <div class="nav-list">
+    <div v-for="item in navs" :key="item.name" :class="[route.name === item.name ? 'active' : '']" class="nav-item" @click="navClick(item)">
+      {{ item.label }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.nav-list {
+  display: flex;
+  width: 100%;
+  padding: 0 48px;
+  height: 100%;
+  .nav-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    margin: 0 24px;
+    font-size: 16px;
+    line-height: 24px;
+    font-family: HarmonyOS_Sans_SC_Medium;
+    color: #979797;
+    cursor: pointer;
+
+    &.active {
+      color: var(--o-color-primary1) !important;
+    }
+
+    &:hover {
+      color: var(--o-color-primary1);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: 2px;
+      background-color: transparent;
+      border-radius: 1px;
+      transition: background-color 0.3s;
+    }
+
+    &.active::after {
+      background-color: var(--o-color-primary1);
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/components/LoadingArc.vue b/packages/openubmc/src/components/LoadingArc.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d6e9868af68782e521d6b823a66d361c34569d6
--- /dev/null
+++ b/packages/openubmc/src/components/LoadingArc.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="loading-arc">
+    <div class="loading-arc-wrap">
+      <div></div>
+      <div><div></div></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+@keyframes ani-loading-arc-wrap {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-arc {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  overflow: hidden;
+  background: #ffffff;
+}
+.loading-arc-wrap div {
+  box-sizing: border-box !important;
+}
+.loading-arc-wrap > div {
+  position: absolute;
+  width: 0.72em;
+  height: 0.72em;
+  top: 0.14em;
+  left: 0.14em;
+  border-radius: 50%;
+  border: 0.08em solid #000;
+  border-color: currentColor transparent currentColor transparent;
+  animation: ani-loading-arc-wrap 1s linear infinite;
+}
+.loading-arc-wrap > div:nth-child(2) {
+  border-color: transparent;
+}
+.loading-arc-wrap > div:nth-child(2) div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: rotate(45deg);
+}
+
+.loading-arc-wrap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(1);
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+}
+.loading-arc-wrap div {
+  box-sizing: content-box;
+}
+</style>
\ No newline at end of file
diff --git a/packages/openubmc/src/components/SectionCard.vue b/packages/openubmc/src/components/SectionCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c908ca765ca5efb588668726e390b7aaae3a875
--- /dev/null
+++ b/packages/openubmc/src/components/SectionCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <section class="section-card">
+    <header class="section-header" v-if="$slots.header">
+      <slot name="header"></slot>
+    </header>
+    <main class="section-main">
+      <slot></slot>
+    </main>
+  </section>
+</template>
+<style lang="scss" scoped>
+.section-card {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 32px;
+  .section-header {
+    margin-bottom: 32px;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 44px;
+  }
+}
+.section-main {
+  min-height: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/openubmc/src/components/ToggleRadios.vue b/packages/openubmc/src/components/ToggleRadios.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0a69ffce4138d81d9c6c33a516cb265081cf804
--- /dev/null
+++ b/packages/openubmc/src/components/ToggleRadios.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ORadio, ORadioGroup, OToggle } from '@opensig/opendesign';
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  modelValue: string | number;
+  options: { label: string; value: string | number; }[]
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const vmodelValue = useVModel(props, 'modelValue', emit);
+
+const onChange = (...args: any[]) => emit('change', ...args)
+</script>
+
+<template>
+  <ORadioGroup v-model="vmodelValue" style="--radio-group-gap: 8px" @change="onChange">
+    <ORadio v-for="item in options" :key="item.value" :value="item.value">
+      <template #radio="{ checked }">
+        <OToggle :checked="checked">{{ item.label }}</OToggle>
+      </template>
+    </ORadio>
+  </ORadioGroup>
+</template>
\ No newline at end of file
diff --git a/packages/openubmc/src/composables/useCommonFilters.ts b/packages/openubmc/src/composables/useCommonFilters.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c36d3b42f53bfc095bc2fb1c78a36a93928721ee
--- /dev/null
+++ b/packages/openubmc/src/composables/useCommonFilters.ts
@@ -0,0 +1,43 @@
+import i18n from '@/i18n';
+import { computed, ref } from 'vue';
+
+const contributionTypeLabelMap = {
+  pr: 'PR',
+  issue: 'Issue',
+  comment: 'Comment',
+} as Record<string, string>;
+
+export default function useCommonFilters(_i18n = i18n.global) {
+  const contributionTypeOptions = computed(() => [
+    { label: _i18n.t('common.home.prs'), value: 'pr' },
+    { label: _i18n.t('common.home.issues'), value: 'issue' },
+    { label: _i18n.t('common.home.comments'), value: 'comment' },
+  ]);
+  const contributionType = ref(contributionTypeOptions.value[0].value);
+  const contributionTypeLabel = computed(() => contributionTypeLabelMap[contributionType.value]);
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const initialTimeRange = [new Date(2024, 10, 1), today];
+  const timeRange = ref<Date[]>([]);
+  const disabledTimeRange = (date: Date) => {
+    return date < initialTimeRange[0] || date > initialTimeRange[1];
+  };
+
+  const commentTypeOptions = computed(() => [
+    { label: _i18n.t('common.from.all'), value: '' },
+    { label: _i18n.t('common.General'), value: 'normal' },
+    { label: _i18n.t('common.Order'), value: 'command' },
+  ]);
+  const commentType = ref('');
+
+  return {
+    contributionTypeOptions,
+    contributionType,
+    contributionTypeLabel,
+    timeRange,
+    disabledTimeRange,
+    commentTypeOptions,
+    commentType,
+  };
+}
diff --git a/packages/openubmc/src/config/home.ts b/packages/openubmc/src/config/home.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cdec25d41f90283c080718bc4f0bf61e50caac83
--- /dev/null
+++ b/packages/openubmc/src/config/home.ts
@@ -0,0 +1,123 @@
+export const FOOTER_LINK = [
+  {
+    title: '关于openUBMC',
+    children: [
+      {
+        title: '社区组织',
+        link: 'https://www.openubmc.cn/organizations',
+      },
+      {
+        title: '政策规则',
+        link: 'https://www.openubmc.cn/charter',
+      },
+    ],
+  },
+  {
+    title: '新闻和资讯',
+    children: [
+      {
+        title: '新闻资讯',
+        link: 'https://www.openubmc.cn/news',
+      },
+      {
+        title: '博客',
+        link: 'https://www.openubmc.cn/blogs',
+      },
+      {
+        title: '技术白皮书',
+        link: 'https://www.openubmc.cn/whitepaper',
+      },
+    ],
+  },
+  {
+    title: '获取与下载',
+    children: [
+      {
+        title: '社区发行版',
+        link: 'https://www.openubmc.cn/download',
+      },
+      {
+        title: '应用市场',
+        link: 'https://www.openubmc.cn/marketplace',
+      },
+    ],
+  },
+  {
+    title: '支持与服务',
+    children: [
+      {
+        title: '文档中心',
+        link: 'https://www.openubmc.cn/docs',
+      },
+      {
+        title: '常见FAQ',
+        link: 'https://www.openubmc.cn/docs/zh/development/faq/general.html',
+      },
+      {
+        title: '漏洞管理',
+        link: 'https://www.openubmc.cn/security-advisories',
+      },
+    ],
+  },
+  {
+    title: '互动与交流',
+    children: [
+      {
+        title: '社区论坛',
+        link: import.meta.env.VITE_FORUM_URL,
+      },
+      {
+        title: '邮件列表',
+        link: 'https://www.openubmc.cn/maillist',
+      },
+    ],
+  },
+  {
+    title: '贡献与成长',
+    children: [
+      {
+        title: 'SIG中心',
+        link: 'https://www.openubmc.cn/sig',
+      },
+      {
+        title: '贡献攻略',
+        link: 'https://www.openubmc.cn/contribution',
+      },
+      {
+        title: 'CLA签署',
+        link: 'https://clasign.osinfra.cn/sign/gitee_openubmc-1732941016829438030?lang=zh',
+      },
+    ],
+  },
+];
+
+export const FRIEND_LINK = [
+  {
+    title: '全球计算联盟',
+    link: 'https://gccorg.com/',
+  },
+  {
+    title: '鲲鹏社区',
+    link: 'https://www.hikunpeng.com/zh/',
+  },
+  {
+    title: '昇腾社区',
+    link: 'https://www.hiascend.com/zh/',
+  },
+  {
+    title: 'openEuler',
+    link: 'https://www.openeuler.org/zh/',
+  },
+  {
+    title: 'openGauss',
+    link: 'https://opengauss.org/zh/',
+  },
+  {
+    title: '昇思MindSpore',
+    link: 'https://www.mindspore.cn/',
+  },
+  {
+    title: 'openFuyao',
+    link: 'https://www.openfuyao.cn/',
+  },
+];
diff --git a/packages/openubmc/src/config/url-config.ts b/packages/openubmc/src/config/url-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..081e9478255f3e229c8c06cfd7a6119c3c73b98f
--- /dev/null
+++ b/packages/openubmc/src/config/url-config.ts
@@ -0,0 +1,7 @@
+const RECORDAL_URL = 'https://beian.miit.gov.cn/#/Integrated/index';
+const GITCODE_URL = 'https://gitcode.com/';
+const MAILWEB_URL = 'https://mailweb.openubmc.cn/';
+
+const BEIAN_URL = 'https://beian.mps.gov.cn/#/query/webSearch'
+
+export { RECORDAL_URL, GITCODE_URL, MAILWEB_URL, BEIAN_URL };
diff --git a/packages/openubmc/src/i18n/footer/index.ts b/packages/openubmc/src/i18n/footer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00407a0561867e04b833ba2e9a1aef4b9424b916
--- /dev/null
+++ b/packages/openubmc/src/i18n/footer/index.ts
@@ -0,0 +1,5 @@
+import zh from './zh';
+
+export default {
+  zh,
+};
diff --git a/packages/openubmc/src/i18n/footer/zh.ts b/packages/openubmc/src/i18n/footer/zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e3ba6d09927d01520eef5079dc1c064289c83c4
--- /dev/null
+++ b/packages/openubmc/src/i18n/footer/zh.ts
@@ -0,0 +1,18 @@
+export default {
+  learn: '学习',
+  documentCenter: '文档中心',
+  videoTeaching: '视频教学',
+  community: '社区',
+  sigCenter: 'SIG中心',
+  forums: '论坛',
+  support: '支持',
+  FAQs: '常见FAQ',
+  problemFeedback: '问题反馈',
+  friendlyLink: '友情链接',
+  copyright: '版权所有 © {year} openUBMC 保留一切权利',
+  recordal: '粤A2-20044005号-293',
+  beian: '粤公网安备 44030002006086号',
+  privacyPolicy: '隐私政策',
+  legalStatement: '法律声明',
+  aboutCookies: '关于cookies',
+};
diff --git a/packages/openubmc/src/i18n/header/index.ts b/packages/openubmc/src/i18n/header/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d6aa3c91005bd6265267e50859b22566eacdd4f
--- /dev/null
+++ b/packages/openubmc/src/i18n/header/index.ts
@@ -0,0 +1,5 @@
+import zh from "./zh";
+
+export default {
+  zh,
+}
\ No newline at end of file
diff --git a/packages/openubmc/src/i18n/header/zh.ts b/packages/openubmc/src/i18n/header/zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3267bccb1c3db58d0d5a95405bf02e47321aeff5
--- /dev/null
+++ b/packages/openubmc/src/i18n/header/zh.ts
@@ -0,0 +1,38 @@
+export default {
+  home: '首页',
+  development: '开发',
+  softwareCenter: '软件中心',
+  code: '代码仓',
+  testPlatform: '测试平台',
+  learn: '学习',
+  docsCenter: '文档中心',
+  videoTeach: '视频教学',
+  community: '社区',
+  orgStructure: '组织架构',
+  policyRules: '政策规则',
+  sig: 'SIG中心',
+  maillist: '邮件列表',
+  contributionGuide: '贡献攻略',
+  forum: '社区论坛',
+  growth: '开发者成长',
+  cla: 'CLA签署',
+  trends: '动态',
+  news: '新闻资讯',
+  blogs: '博客',
+  support: '支持',
+  faq: '常见FAQ',
+  feedback: '问题反馈',
+  security: '漏洞管理',
+  search: '搜索API、文档、教程、动态...',
+  search2: '搜索',
+  recentSearch: '最近搜索',
+  hotSearch: '热门搜索',
+  minisite: '活动大赛',
+  notOnline: '待上线',
+  releasePlatform: '发布平台',
+  communityReleases: '社区发行版',
+  download: '下载',
+  marketplace: '应用市场',
+  docs: '文档',
+  resourceCenter: '资源中心',
+};
diff --git a/packages/openubmc/src/i18n/index.ts b/packages/openubmc/src/i18n/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd4f88dc019b0612305e6da959c472b79796ae65
--- /dev/null
+++ b/packages/openubmc/src/i18n/index.ts
@@ -0,0 +1,20 @@
+import { createI18n } from 'vue-i18n';
+import zhLanguage from './lang/zhLanguage';
+import enLanguage from './lang/enLanguage';
+import header from './header'
+import footer from './footer'
+
+export default createI18n({
+  legacy: false,
+  locale: 'zh',
+  messages: {
+    zh: {
+      common: zhLanguage,
+      header: header.zh,
+      footer: footer.zh
+    },
+    en: {
+      common: enLanguage,
+    },
+  },
+});
diff --git a/packages/openubmc/src/i18n/lang/enLanguage.ts b/packages/openubmc/src/i18n/lang/enLanguage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a90963dbefa5f5e5702ce6e7fd508dfb7651835e
--- /dev/null
+++ b/packages/openubmc/src/i18n/lang/enLanguage.ts
@@ -0,0 +1,157 @@
+export default {
+  languageName: 'English',
+  datastat: 'DATASTAT',
+  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',
+    isv: 'ISV',
+  },
+  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',
+    version: 'Version statistics',
+    LOC: 'LOC',
+  },
+  startDate: 'Start date',
+  endDate: 'End date',
+  products: 'SIG Output',
+  productQuality: 'Output Quality',
+  processQuality: 'Process Quality',
+  tissueRobustness: 'Organizational Robustness',
+  influence: 'Influence',
+  vitalIndex: 'Activeness Index',
+  communityAverage: 'Community Average',
+  PRMerged: 'PR meraged',
+  IssueResolve: 'Issue resolve',
+  PREfficiency: 'PR efficiency',
+  toHome: 'Go to home page',
+  MailingList: 'Mailing List',
+  DynamicContribute: 'DynamicContribute',
+  channel: 'IRC Channel',
+  warehouse: 'Warehouse',
+  SIGContribution: 'SIG Contribution',
+  D1Number: 'D1',
+  SIGNumber: 'SIGNumber',
+  contribute: 'Contribute',
+  Maintainer: 'Maintainer',
+  communityRankings: 'Ranking',
+  combinedActivity: 'Overall Activeness',
+  contributionsTitle: 'Community Contribution data',
+  userContributor: 'Contribution by Individuals',
+  companyContributor: 'Contribution by Organizations',
+  groupActive: 'SIG Activity Overview',
+  Currentcontributionranking: 'Total Contributions',
+  Pleaseenterunitnameforsearch: 'Please enter an organization name',
+  Numbercontributors: 'Number of Contributors',
+  Contributordistribution: 'Contributor Distribution',
+  Commitcontribution: 'Submit Contributions',
+  participation: 'participation',
+  review: 'review',
+  Mergerequest: 'Merge request',
+  NeedsProblems: 'Needs & Problems',
+  slogan:
+    'Related technology exploration in tuning field; Ai-assisted performance analysis',
+  ecological: 'Technology Ecosystem',
+  staffContributor: 'Employee Contributors',
+  active: 'Activeness',
+  groupRelations: 'Relationship Between TC Members and SIGs',
+  companyRelations: 'Relationship Between Organizations and SIGs',
+  currentVitalityIndex: 'Current Activeness Index',
+  historicalVitalityIndicators: 'Activeness Index Trends',
+  Note: 'Note: Members are sorted by last names alphabetically',
+  Committee: 'TC Member',
+  company: 'Organization',
+  interestGroup: 'SIG',
+  ranking: 'Rank',
+  Number: 'Number',
+  backVitality: 'Back to Overview',
+  searchTips:
+    'The organization you are  searching for has no contributions under the current search criteria. Try  different search criteria.   ',
+  de: 'in',
+  viewDetail: 'View Detail',
+  Participated1: 'participated in',
+  Participated2: 'special interest groups',
+  Participated3: 'a total of',
+  Participated4: 'unit members participated',
+  footer: {
+    about: 'About Data',
+    privacy: 'Privacy Policy',
+    privacyLink: `${import.meta.env.VITE_MAIN_DOMAIN_URL}/en/other/privacy/`,
+    legal: 'Legal Notice',
+    legalLink: `${import.meta.env.VITE_MAIN_DOMAIN_URL}/en/other/legal/`,
+    atom: 'openEuler, an open source OS incubated by the OpenAtom Foundation for digital infrastructure in server, cloud, edge, embedded scenarios, across Arm, x86, RISC-V, LoongArch, PowerPC, and SW-64 architectures.',
+    copyright: 'Copyright © {year} openEuler. All rights reserved.',
+    filingText1: 'J. ICP B. No. 2020036654-1',
+    filingText2: 'J.G.W.A.B. No. 11030102011597',
+  },
+  about: {
+    explain: 'Data Indicator Interpretation ',
+    definition: 'Data definition ',
+    name: 'Name',
+  },
+  prevPage: 'Prev',
+  nextPage: 'Next',
+  repositoryTechnology: 'Repository Management/Technology Innovation',
+  numberofsigs: 'Number of SIGs',
+  averageActiveness: 'Average Activeness',
+  governanceAndOperation: 'Community Governance and Operations',
+  viewOrganizationDetail: 'View Organization Contribution Details',
+  viewSIGDetail: 'View SIG Contribution Details',
+  contributors: 'Contributors',
+  SIGParticipation: 'SIG Participation',
+  noData: 'No data available',
+  noContributor: 'No contributor',
+  noSIGPart: 'No SIG participation',
+  enterGitee: 'Please enter a GitCode ID',
+  enterSIG: 'Please enter a SIG',
+  enterWord: 'Please enter a keyword search',
+  noMentor: 'No mentor',
+  CurrentSIG: 'Current SIG',
+  enterName: 'Please enter a name',
+  ViewOnPC1: 'View on PC for more details',
+  ViewOnPC2: 'and better experience',
+  introduction: 'Introduction',
+  individual: 'individual resume',
+  community: 'Community roles',
+  filtrate: 'Filtrate',
+  general: 'General',
+  key: 'Key',
+  display: 'Display Per Page',
+  bar: 'bar',
+  total: 'Total',
+  result: 'Bar Result',
+  create: 'Create',
+  task: 'task',
+  comment: 'Comment',
+  In: 'In',
+  login: 'Login',
+  personalCenter: 'Personal Center',
+  logout: 'Logout',
+  Confirm: 'Confirm',
+  Cancel: 'Cancel',
+  titleConfirm:
+    'Are you sure you want to exit? The page is refreshed after you exit.',
+  pleaseConfirm: 'Confirm',
+  General: 'General Comment',
+  Order: 'Order Comment',
+  Goto: 'Go to',
+  page: '',
+  zhcontribut: '',
+};
diff --git a/packages/openubmc/src/i18n/lang/zhLanguage.ts b/packages/openubmc/src/i18n/lang/zhLanguage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50ca2e997ff9dce8745a90c50eb6ff6f343c8553
--- /dev/null
+++ b/packages/openubmc/src/i18n/lang/zhLanguage.ts
@@ -0,0 +1,154 @@
+export default {
+  languageName: '中文',
+  datastat: '贡献看板',
+  nav: {
+    overview: '数据总览',
+    contributors: '社区贡献',
+  },
+  home: {
+    moreData: '更多贡献数据',
+    user: '下载量 Download ',
+    contributors: '贡献者 Contributor',
+    partners: '单位成员 Organization Member',
+    prs: '合并请求 PR',
+    issues: '需求&问题 Issue',
+    comments: '评审 Comment',
+    sigs: '特别兴趣小组 SIG',
+    repos: '代码仓库 Repository',
+    isv: '满足兼容 ISV',
+  },
+  from: {
+    type: '度量指标',
+    timeRange: '统计周期',
+    lastonemonth: '最近一个月内',
+    lasthalfyear: '最近半年内',
+    lastoneyear: '最近一年内',
+    displayRange: '显示范围',
+    pleasePartner: '请输入单位名称搜索',
+    all: '全部',
+    version: '版本统计',
+    LOC: '代码行数 LOC',
+  },
+  startDate: 'Start date',
+  endDate: 'End date',
+  products: 'sig输出件',
+  productQuality: 'sig输出质量',
+  processQuality: '过程质量',
+  tissueRobustness: '组织稳健性',
+  influence: '影响力',
+  vitalIndex: '活力指数',
+  communityAverage: '社区平均',
+  PRMerged: '合并PR',
+  IssueResolve: 'Issue解决率',
+  PREfficiency: 'PR 效率',
+  D1Number: 'D1贡献者数量',
+  Maintainer: 'Maintainer数量',
+  communityRankings: '社区排名',
+  combinedActivity: '综合活跃度',
+  contributionsTitle: '社区贡献数据',
+  userContributor: '个人成员贡献',
+  companyContributor: '单位成员贡献',
+  currentVitalityIndex: '当前活力指数',
+  historicalVitalityIndicators: '活力指标历史趋势',
+  groupActive: '特别兴趣小组活跃度全景图',
+  Contributordistribution: '贡献者分布',
+  Commitcontribution: '提交贡献',
+  participation: '参与的',
+  ecological: '技术生态',
+  NeedsProblems: '需求&问题',
+  staffContributor: '员工贡献',
+  SIGContribution: 'SIG贡献',
+  SIGNumber: 'SIG数量',
+  review: '评审',
+  Currentcontributionranking: '累计贡献',
+  Pleaseenterunitnameforsearch: '请输入单位名称搜索',
+  Numbercontributors: '贡献者数量',
+  contribute: '贡献',
+  DynamicContribute: '贡献动态',
+  toHome: '前往主页',
+  MailingList: '邮件列表',
+  channel: 'IRC频道',
+  warehouse: '仓库',
+  slogan: '调优领域相关技术探索；AI辅助性能分析',
+  active: '活跃度',
+  Mergerequest: '合并请求',
+  groupRelations: '技术委员会委员与特别兴趣小组关系',
+  companyRelations: '单位成员与特别兴趣小组关系',
+  Note: '注：以下按姓氏拼音排序',
+  Committee: '技术委员会委员',
+  company: '单位成员',
+  interestGroup: '特别兴趣小组',
+  ranking: '排名',
+  backVitality: '回到数据总览',
+  searchTips: '您搜索的组织在当前条件下暂无贡献，请尝试其他搜索条件',
+  de: '的',
+  viewDetail: '查看详情',
+  Participated1: '共参与',
+  Participated2: '个特别兴趣小组',
+  Participated3: '共有',
+  Participated4: '个单位成员参与',
+  Number: '序号',
+  footer: {
+    about: '关于数据',
+    privacy: '隐私政策',
+    privacyLink: `${import.meta.env.VITE_MAIN_DOMAIN_URL}/zh/other/privacy/`,
+    legal: '法律声明',
+    legalLink: `${import.meta.env.VITE_MAIN_DOMAIN_URL}/zh/other/legal/`,
+    atom: 'openEuler是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持ARM、x86、RISC-V、loongArch、PowerPC、SW-64等多样性计算架构',
+    copyright: '版权所有 © {year} openEuler 保留一切权利',
+    filingText1: '京ICP备2020036654号-1',
+    filingText2: '京公网安备 11030102011597 号',
+  },
+  about: {
+    explain: '数据指标解释 ',
+    definition: '数据定义  ',
+    name: '指标名称',
+  },
+  prevPage: '上一页',
+  nextPage: '下一页',
+  repositoryTechnology: '代码仓管理/技术创新',
+  numberofsigs: '特别兴趣小组数量',
+  averageActiveness: '平均活跃度',
+  governanceAndOperation: '社区治理运营',
+  viewOrganizationDetail: '查看单位成员贡献详情',
+  viewSIGDetail: '查看特别兴趣小组贡献详情',
+  contributors: '贡献者',
+  SIGParticipation: '参与的SIG',
+  noData: '暂无数据',
+  noContributor: '暂无贡献者',
+  noSIGPart: '暂未参与SIG',
+  enterGitee: '请输入GitCode ID搜索',
+  enterSIG: '请输入SIG名称搜索',
+  enterWord: '请输入关键词搜索',
+  noMentor: '暂无Mentor',
+  CurrentSIG: '当前SIG',
+  enterName: '请输入名称搜索',
+  ViewOnPC1: '该图表更适合在PC浏览',
+  ViewOnPC2: '建议在PC查看更多信息',
+  introduction: '简介',
+  individual: '个人简介',
+  community: '社区角色',
+  filtrate: '筛选',
+  general: '一般特性',
+  key: '关键特性',
+  display: '每页显示',
+  bar: '条',
+  total: '共',
+  result: '条结果',
+  create: '创建了',
+  task: '任务',
+  comment: '评论了',
+  In: '在',
+  login: '登录',
+  personalCenter: '个人中心',
+  logout: '退出登录',
+  Confirm: '确认',
+  Cancel: '取消',
+  titleConfirm: '您确定要退出吗? 退出后，页面会自动刷新',
+  pleaseConfirm: '请确认',
+  General: '常规评论',
+  Order: '命令型评论',
+  Goto: '前往',
+  page: '页',
+  zhcontribut: '贡献',
+};
diff --git a/packages/openubmc/src/main.ts b/packages/openubmc/src/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9286898098d11abd30c5446a54c0b0b7358aca60
--- /dev/null
+++ b/packages/openubmc/src/main.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { createPinia } from 'pinia';
+import '@opensig/opendesign/es/index.css';
+import i18n from './i18n';
+
+import 'shared/styles/base.scss';
+import 'shared/styles/index.scss';
+import '@/assets/style/theme/default-light.token.css';
+import '@/assets/style/theme/dark.token.css';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(i18n);
+
+app.mount('#app');
diff --git a/packages/openubmc/src/router/index.ts b/packages/openubmc/src/router/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc9d4616de40fdaf99687263b2fd24f1256f8c39
--- /dev/null
+++ b/packages/openubmc/src/router/index.ts
@@ -0,0 +1,58 @@
+import i18n from '@/i18n';
+import { createRouter, createWebHistory } from 'vue-router';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/:lang(zh|en)',
+      children: [
+        {
+          path: '',
+          redirect() {
+            return `/${i18n.global.locale.value ?? 'zh'}/overview`;
+          },
+        },
+        {
+          path: 'overview',
+          name: 'overview',
+          component: () => import('@/views/overview/Index.vue'),
+          beforeEnter(to, from) {
+            if (from.name === 'detail') {
+              to.meta.transition = 'slide-up';
+            }
+          },
+        },
+        {
+          path: 'detail',
+          name: 'detail',
+          component: () => import('@/views/detail/Index.vue'),
+          beforeEnter(to, from) {
+            if (from.name === 'overview') {
+              to.meta.transition = 'slide-down';
+            }
+          },
+        },
+        {
+          path: 'sig/:id',
+          name: 'sig-detail',
+          component: () => import('@/views/sig/Index.vue'),
+        },
+        {
+          path: 'user/:id',
+          name: 'user-detail',
+          component: () => import('@/views/user/Index.vue'),
+        },
+      ],
+    },
+    { path: '/:pathMatch(.*)*', redirect: '/zh/overview' }
+  ],
+});
+
+router.beforeEach((to) => {
+  if (to.fullPath.startsWith('/en')) {
+    return to.fullPath.replace(/^\/en/, '/zh');
+  }
+});
+
+export default router;
diff --git a/packages/openubmc/src/shared/common.ts b/packages/openubmc/src/shared/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c9ad73fa6a1ae6c9cfa2123e51266dea679a09d0
--- /dev/null
+++ b/packages/openubmc/src/shared/common.ts
@@ -0,0 +1,12 @@
+/**
+ * 获取授权的相关回调链接
+ */
+/**
+ * 开源社区信息
+ */
+
+export const openCommunityInfo = {
+  name: 'openubmc',
+  link: import.meta.env.VITE_MAIN_DOMAIN_URL,
+  email: 'contact@openeuler.io',
+};
diff --git a/packages/openubmc/src/shared/utils/index.ts b/packages/openubmc/src/shared/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48674b0213df89a94539e0dc43e2a0febcf6d4ad
--- /dev/null
+++ b/packages/openubmc/src/shared/utils/index.ts
@@ -0,0 +1,35 @@
+/**
+ * @param arr 数组
+ * @param target 目标
+ * @param compareFn 比较函数，返回负数则target大于当前值，返回正数则target小于当前值
+ * @returns -1: 没找到，否则返回index
+ */
+export function binarySearch<D, T>(arr: D[], target: T, compareFn: (current: D, target: T) => number) {
+  if (!arr.length) return -1;
+  if (arr.length === 1) return compareFn(arr[0], target) === 0 ? 0 : -1;
+  let left = 0, right = arr.length - 1;
+  while (left <= right) {
+    const mid = left + ((right - left) >> 1);
+    const cmp = compareFn(arr[mid], target);
+    if (cmp === 0) return mid;
+    if (cmp < 0) left = mid + 1;
+    else right = mid - 1;
+  }
+  return -1;
+}
+
+/**
+ * 获取指定时区偏移量的年份
+ * @param {number} offset - 时区偏移量（单位：小时）。例如，UTC+8 时区，传入 8。
+ * @returns {number} - 指定时区偏移量对应的年份
+ */
+export function getYearByOffset(offset = 8) {
+  // 获取当前时间的 UTC 时间
+  const now = new Date();
+  const utcTime = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+
+  // 设置偏移
+  utcTime.setHours(utcTime.getHours() + offset);
+
+  return utcTime.getFullYear();
+}
\ No newline at end of file
diff --git a/packages/openubmc/src/stores/common.ts b/packages/openubmc/src/stores/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c382fb40c27269e94ccdf21503445e1e908e17e
--- /dev/null
+++ b/packages/openubmc/src/stores/common.ts
@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+import { IObject } from 'shared/@types/interface';
+import { getOveriewAllUsersCount } from 'shared/api/api-new';
+import { request } from 'shared/plugins/axios';
+import { getNowFormatDate } from 'shared/utils/helper';
+
+interface stateTypes {
+  language: string;
+  ISPC: boolean;
+  isBlackHeader: boolean;
+  moNav: number;
+  companyNav: number;
+  sigNav: number;
+  time: string;
+  allData: IObject;
+  personNav: number;
+}
+export const useCommonStore = defineStore('common', {
+  state: (): stateTypes => ({
+    language: 'zh',
+    // 判断是否是PC
+    ISPC: false,
+    // 判断移动端header主题颜色
+    isBlackHeader: true,
+    moNav: 0,
+    companyNav: 0,
+    sigNav: 0,
+    personNav: 0,
+    // 时间
+    time: '--',
+    allData: {},
+  }),
+  actions: {
+    setLanguage(lang: string) {
+      this.language = lang;
+    },
+    setDevice(device: boolean) {
+      this.ISPC = device;
+    },
+    getAllData() {
+      this.time = getNowFormatDate();
+      request.get('/api-magic/stat_new/overview/count?community=openubmc').then((res) => {
+        if (res.data?.data) {
+          Object.assign(this.allData, res.data.data);
+        }
+      });
+      // 社区用户
+      getOveriewAllUsersCount('openubmc').then((res) => {
+        if (res.data) {
+          this.allData.users = res.data.total_count;
+        }
+      });
+    },
+  },
+});
diff --git a/packages/openubmc/src/stores/company.ts b/packages/openubmc/src/stores/company.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26f06a15d870a4a1b978d7333ff3cbf457b388b9
--- /dev/null
+++ b/packages/openubmc/src/stores/company.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia';
+import { ceil } from 'lodash-es';
+import { request } from 'shared/plugins/axios';
+import { openCommunityInfo } from '@/shared/common';
+import i18n from '@/i18n';
+
+interface Company {
+  company_zh: string;
+  company_en: string;
+  contribute: number;
+}
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    rawData: [] as Company[],
+    companyData: [] as Company[],
+    // 显示排行数
+    displayCount: 10,
+    searchVal: '',
+    // 获取最大值
+    companyMaxNum: 0,
+    defaultNum: '',
+    companyForm: {
+      contributeType: 'pr',
+      timeRange: [] as Date[] | [Date, Date],
+    },
+  }),
+  getters: {
+    companyData(state) {
+      let res = state.rawData ?? [];
+      if (state.searchVal) {
+        const upperCaseSearchVal = state.searchVal.toUpperCase();
+        const lang = i18n.global.locale ?? 'zh';
+        res = res.filter((i) => i[lang.value === 'zh' ? 'company_zh' : 'company_en'].toUpperCase().includes(upperCaseSearchVal));
+      }
+      if (state.displayCount) {
+        return res.slice(0, state.displayCount);
+      }
+      return res;
+    },
+  },
+  actions: {
+    async getCompanyData() {
+      const params = {
+        community: openCommunityInfo.name,
+        contributeType: this.companyForm.contributeType,
+      } as Record<string, string | number>;
+      if (this.companyForm.timeRange?.length === 2) {
+        params.start = this.companyForm.timeRange[0].getTime();
+        params.end = this.companyForm.timeRange[1].getTime();
+      }
+      try {
+        const res = await request.get('/api-magic/stat_new/company/contribute', { params }).then((res) => res.data);
+        if (res.code !== 1 || !res.data?.length) {
+          this.companyMaxNum = 0;
+          this.rawData = [];
+          return;
+        }
+        const { data } = res;
+        this.companyMaxNum = ceil(data[0]?.contribute ?? 0, -2);
+        this.rawData = data;
+      } catch (error) {
+        this.companyMaxNum = 0;
+        this.rawData = [];
+        console.log(error);
+      }
+    },
+  },
+});
diff --git a/packages/openubmc/src/stores/login.ts b/packages/openubmc/src/stores/login.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aca4c8e091570e7e25425862417433265da63d30
--- /dev/null
+++ b/packages/openubmc/src/stores/login.ts
@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia';
+import { request } from 'shared/plugins/axios';
+
+const useLoginStore = defineStore('login', {
+  state: () => ({
+    logining: false,
+    logined: false,
+    data: null as null | Record<string, any>,
+  }),
+  getters: {
+    username(state) {
+      return state.data?.username as string ?? '';
+    },
+    photo(state) {
+      return state.data?.photo as string ?? '';
+    },
+    nickname(state) {
+      return state.data?.nickname as string ?? '';
+    },
+  },
+  actions: {
+    tokenExists() {
+      return Boolean(document.cookie.match(/\b_U_T_=[^;]+/)?.[0]);
+    },
+    getUserInfo(force?: boolean) {
+      if (!this.tokenExists()) return;
+      if (!force && this.logined) return;
+      this.logining = true;
+      request
+        .get('/api-id/oneid/personal/center/user?community=openubmc')
+        .then((res) => res.data)
+        .then((res) => {
+          if (res.code !== 200 || !res.data) return;
+          this.data = res.data;
+          this.logining = false;
+          this.logined = true;
+        })
+        .catch(() => (this.logining = false));
+    },
+  },
+});
+
+export default useLoginStore;
diff --git a/packages/openubmc/src/stores/person.ts b/packages/openubmc/src/stores/person.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df74a96edb522f48f68fd39c2c1d79e50d065947
--- /dev/null
+++ b/packages/openubmc/src/stores/person.ts
@@ -0,0 +1,56 @@
+import { openCommunityInfo } from '@/shared/common';
+import { defineStore } from 'pinia';
+import { request } from 'shared/plugins/axios';
+
+export const usePersonalStore = defineStore('personal', {
+  state: () => ({
+    personalData: [],
+    personalMaxNum: 0, // 个人数据最大参数
+    // 筛选参数
+    personalForm: {
+      contributeType: 'pr',
+      timeRange: [] as Date[] | [Date, Date],
+    },
+    allUsers: [] as string[],
+    commentType: '',
+  }),
+  actions: {
+    async getPersonalData() {
+      const params = {
+        community: openCommunityInfo.name,
+        contributeType: this.personalForm.contributeType,
+        comment_type: this.commentType
+      } as Record<string, any>;
+      if (this.personalForm.timeRange?.length === 2) {
+        params.start = this.personalForm.timeRange[0].getTime();
+        params.end = this.personalForm.timeRange[1].getTime();
+      }
+      try {
+        const res = await request.get('/api-magic/stat_new/user/contribute', { params }).then((res) => res.data);
+        if (res.code !== 1 || !res.data?.length) {
+          this.personalData = [];
+          this.personalMaxNum = 0;
+          return;
+        }
+        const { data } = res;
+        const userList = data;
+        this.personalData = userList.slice(0, 20);
+        this.personalMaxNum = userList[0].contribute;
+      } catch (error) {
+        this.personalData = [];
+        this.personalMaxNum = 0;
+        console.log(error);
+      }
+    },
+  },
+  getters: {
+    // top10
+    highRanking: (state) => {
+      return state.personalData.slice(0, 10);
+    },
+    // top10-20
+    lowRanking: (state) => {
+      return state.personalData.slice(10, 20);
+    },
+  },
+});
diff --git a/packages/openubmc/src/views/detail/CompanyContribution.vue b/packages/openubmc/src/views/detail/CompanyContribution.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4eb252b09d412b4fcf87477463e4601a5112241
--- /dev/null
+++ b/packages/openubmc/src/views/detail/CompanyContribution.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import CompanyDataBarChart from '@/views/detail/CompanyDataBarChart.vue';
+import SectionCard from '@/components/SectionCard.vue';
+import { useCompanyStore } from '@/stores/company';
+import { ODivider, OIcon, OIconSearch, OInput, ORadio, ORadioGroup, OToggle } from '@opensig/opendesign';
+import { computed, onMounted, ref } from 'vue';
+import ToggleRadios from '@/components/ToggleRadios.vue';
+import { useI18n } from 'vue-i18n';
+import useCommonFilters from '@/composables/useCommonFilters';
+
+const companyStore = useCompanyStore();
+const { t } = useI18n();
+
+const versionChecked = ref(true);
+const contributionTypeOptions = computed(() => [
+  { label: t('common.home.prs'), value: 'pr' },
+  { label: t('common.home.issues'), value: 'issue' },
+  { label: t('common.home.comments'), value: 'comment' },
+]);
+
+const displayRangeOptions = computed(() => [
+  { label: t('common.from.all'), value: 0 },
+  { label: 'Top10', value: 10 },
+  { label: 'Top20', value: 20 },
+]);
+
+onMounted(() => {
+  companyStore.getCompanyData();
+});
+
+const { disabledTimeRange } = useCommonFilters();
+</script>
+
+<template>
+  <SectionCard>
+    <template #header>{{ t('common.companyContributor') }}</template>
+    <div class="unit-member-contribution">
+      <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+        <!-- <ElFormItem :label="t('common.from.version')">
+          <OToggle v-model:checked="versionChecked">{{ t('common.from.all') }}</OToggle>
+        </ElFormItem> -->
+        <ElFormItem :label="t('common.from.type')">
+          <ToggleRadios v-model="companyStore.companyForm.contributeType" :options="contributionTypeOptions" @change="companyStore.getCompanyData" />
+        </ElFormItem>
+        <ElFormItem :label="t('common.from.timeRange')">
+          <ElDatePicker
+            v-model="companyStore.companyForm.timeRange"
+            unlink-panels
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="companyStore.getCompanyData"
+            :disabled-date="disabledTimeRange"
+          />
+        </ElFormItem>
+      </ElForm>
+
+      <ODivider direction="h" style="--o-divider-gap: 24px" />
+
+      <div class="search-range-select">
+        <OInput v-model="companyStore.searchVal" :placeholder="t('common.Pleaseenterunitnameforsearch')">
+          <template #prefix
+            ><OIcon style="font-size: 16px"><OIconSearch /></OIcon
+          ></template>
+        </OInput>
+        <div class="range-select">
+          <p class="title">{{ t('common.from.displayRange') }}</p>
+          <ORadioGroup v-model="companyStore.displayCount" style="--radio-group-gap: 8px">
+            <ORadio v-for="item in displayRangeOptions" :key="item.value" :value="item.value">
+              <template #radio="{ checked }">
+                <OToggle :checked="checked">{{ item.label }}</OToggle>
+              </template>
+            </ORadio>
+          </ORadioGroup>
+        </div>
+      </div>
+
+      <CompanyDataBarChart />
+    </div>
+  </SectionCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  padding-right: 40px;
+  @include text1;
+  line-height: var(--o-control_size-m) !important;
+}
+
+.search-range-select {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 28px;
+
+  .range-select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      margin-right: 16px;
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/detail/CompanyDataBarChart.vue b/packages/openubmc/src/views/detail/CompanyDataBarChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2771d912de723fa1357de7bc64fe60f518e2f3c
--- /dev/null
+++ b/packages/openubmc/src/views/detail/CompanyDataBarChart.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useCommonStore } from '@/stores/common';
+import { useCompanyStore } from '@/stores/company';
+import { formatNumber } from 'shared/utils/helper';
+import { IObject } from 'shared/@types/interface';
+import { useRouter } from 'vue-router';
+import { hasPermission, hasPermissions } from 'shared/utils/login';
+import { OIcon } from '@opensig/opendesign';
+import IconEmpty from '~icons/app/empty.svg';
+
+const router = useRouter();
+const useCompany = useCompanyStore();
+const useCommon = useCommonStore();
+const { t, locale } = useI18n();
+
+// 个人信息
+const progressFormat = (item: number) => {
+  return (100 / useCompany.companyMaxNum) * item;
+};
+
+/* const typeLable = ref('');
+const switchType = () => {
+  switch (useCompany.companyForm.contributeType) {
+    case 'pr':
+      typeLable.value = t('common.home.prs');
+      break;
+    case 'issue':
+      typeLable.value = t('common.home.issues');
+      break;
+    case 'comment':
+      typeLable.value = t('common.home.comments');
+      break;
+    case 'cloc':
+      typeLable.value = t('common.from.LOC');
+      break;
+  }
+};
+switchType();
+watch(
+  () => [useCompany.companyForm.contributeType, useCommon.language],
+  () => {
+    switchType();
+  }
+); */
+
+// el-tooltip
+const showAfter = 200;
+
+// 跳转社区详情
+const goToCompany = (data: IObject) => {
+  if (hasPermissions(data.company_zh) || (hasPermission('companyread_all') && data.company_zh !== '个人贡献者' && data.company_en !== 'independent')) {
+    const routeData: any = router.resolve(`/${useCommon.language}/company/${data.company_zh}`);
+    window.open(routeData.href, '_blank');
+  }
+};
+</script>
+
+<template>
+  <div class="bar-panel">
+    <template v-if="useCompany.companyData.length">
+      <ul class="bar-content">
+        <li v-for="(item, index) in useCompany.companyData" :key="'com' + index" class="bar-content-item">
+          <p class="infos">
+            <template v-if="item.company_zh === '个人贡献者' || item.company_en === 'independent'">
+              <span class="index" v-if="item.company_zh === '个人贡献者' || item.company_en === 'independent'">*</span>
+              <span
+                class="name"
+                style="color: #555555"
+                >{{ (locale === 'en' && item.company_en) || item.company_zh }}</span
+              >
+            </template>
+            <template v-else>
+              <span class="index" >{{ index + 1 }}</span>
+              <span
+                class="name"
+                :title="(locale === 'en' && item.company_en) || item.company_zh"
+                :style="{
+                  cursor: hasPermissions(item.company_zh) || hasPermission('companyread_all') ? 'pointer' : 'auto',
+                  color: hasPermissions(item.company_zh) || hasPermission('companyread_all') ? '#002FA7' : '#555555',
+                }"
+                @click="goToCompany(item)"
+                >{{ (locale === 'en' && item.company_en) || item.company_zh }}</span
+              >
+            </template>
+          </p>
+  
+          <el-tooltip placement="bottom-start" effect="light" :show-after="showAfter" popper-class="bar-tooltip" :show-arrow="false">
+            <template #content>
+              <!-- <div class="lable">
+                {{ timeRangeText }} <span class="text">{{ t('de') }}</span>
+                {{ typeLable }}
+              </div> -->
+              <div class="info">
+                <p>
+                  <span class="index" v-if="item.company_zh === '个人贡献者' || item.company_en === 'independent'">*</span>
+                  <span class="index" v-else>{{ index + 1 }}</span>
+                  {{ (locale === 'en' && item.company_en) || item.company_zh }}
+                </p>
+                <span class="num"
+                  >{{ item.contribute }}
+                </span>
+              </div>
+            </template>
+            <div class="progress">
+              <div
+                class="progress-inner"
+                :style="{ width: progressFormat(item.contribute) + '%' }"
+              >
+                <template v-if="progressFormat(item.contribute) > 80">
+                  <span >{{ formatNumber(item.contribute) }}</span>
+                </template>
+              </div>
+              <template v-if="progressFormat(item.contribute) <= 80">
+                <span class="val">{{ formatNumber(item.contribute) }}</span>
+              </template>
+            </div>
+          </el-tooltip>
+        </li>
+      </ul>
+      <div class="bar-columns">
+        <div class="num"><span>0</span></div>
+        <div class="num">
+          <span>{{ formatNumber(useCompany.companyMaxNum / 2) }}</span>
+        </div>
+        <div class="num">
+          <span>{{ formatNumber(useCompany.companyMaxNum) }}</span>
+        </div>
+      </div>
+    </template>
+    <div v-else class="empty-pic">
+      <OIcon>
+        <IconEmpty />
+      </OIcon>
+      <p>{{ t('common.searchTips') }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-pic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.bar-panel {
+  position: relative;
+  height: 100%;
+  padding-bottom: 12px;
+
+  .bar-columns {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 324px;
+    display: flex;
+    justify-content: space-between;
+    right: 0;
+    .num {
+      color: #9097a3;
+      font-size: 12px;
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+      min-width: 8px;
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 48%;
+        width: 1px;
+        border-left: 1px solid #ccc;
+        bottom: 20px;
+        content: '';
+      }
+      &:last-child {
+        &::after {
+          left: inherit;
+          right: 0;
+        }
+      }
+    }
+  }
+}
+.bar-content {
+  position: relative;
+  z-index: 2;
+  &-item {
+    margin: 16px 0;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    .infos {
+      font-size: 16px;
+      color: #000000;
+      line-height: 22px;
+
+      display: flex;
+      .index {
+        width: 16px;
+        margin-right: 8px;
+        font-size: 16px;
+        color: #9097a3;
+        text-align: center;
+      }
+      .name {
+        width: 304px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        // cursor: pointer;
+      }
+    }
+  }
+}
+.progress {
+  height: 16px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  .progress-inner {
+    background: var(--o-color-primary1);
+    box-shadow: 4px 8px 12px 0px rgba(0, 92, 219, 0.25);
+    font-size: 12px;
+    color: #fff;
+    height: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    transition: all 0.3s ease-in-out;
+    span {
+      padding-right: 1rem;
+    }
+  }
+  .val {
+    color: #000;
+    font-size: 12px;
+    margin-left: 8px;
+  }
+}
+.bar-tooltip {
+  padding: 12px 16px;
+  box-shadow:
+    4px 8px 16px 0px rgba(10, 11, 13, 0.05),
+    0px 0px 32px 0px rgba(10, 11, 13, 0.1);
+
+  .lable {
+    color: #9097a3;
+    font-weight: bold;
+    .text {
+      font-weight: 100;
+    }
+  }
+  .info {
+    color: #4e5865;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    min-width: 280px;
+    .index {
+      color: #9097a3;
+    }
+    .num {
+      font-size: 16px;
+      color: #000000;
+      margin-left: 40px;
+      .percentage {
+        margin-left: 10px;
+        font-size: 12px;
+        color: #4e5865;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/detail/Index.vue b/packages/openubmc/src/views/detail/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b50aa37370b5576e2b3e2a79bb57ba9e8aba765
--- /dev/null
+++ b/packages/openubmc/src/views/detail/Index.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import CommonLayout from '@/components/CommonLayout.vue';
+import CompanyContribution from './CompanyContribution.vue';
+import UserContribution from './UserContribution.vue';
+import SigOverview from './SigOverview.vue';
+import useScroll from 'shared/hooks/useScroll';
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import OBanner from 'shared/components/OBanner.vue';
+import titleBg from '@/assets/title-bg.png';
+import ChevronsUp from '~icons/shared/chevrons-up';
+
+const { t, locale } = useI18n();
+const { isScrollUp } = useScroll('up');
+const router = useRouter();
+
+watch(
+  () => isScrollUp.value,
+  () => {
+    if (isScrollUp.value) {
+      toOverview();
+    }
+  }
+);
+
+const toOverview = () => {
+  router.push({ name: 'overview', params: { lang: locale.value } });
+};
+</script>
+
+<template>
+  <div>
+    <OBanner :style="{ backgroundImage: 'url(' + titleBg + ')' }">
+      <div class="banner-title" @click="toOverview">
+        <div class="o-icon"><ChevronsUp></ChevronsUp></div>
+        <h3 class="title">{{ t('common.backVitality') }}</h3>
+      </div>
+    </OBanner>
+    <CommonLayout>
+      <CompanyContribution />
+      <UserContribution style="margin-top: 32px" />
+      <SigOverview style="margin-top: 32px" />
+    </CommonLayout>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.common-layout {
+  padding-top: 28px;
+}
+.o-banner {
+  height: 224px;
+  padding-top: 80px;
+  min-width: 1024px;
+}
+.banner-title {
+  cursor: pointer;
+  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;
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/detail/SigOverview.vue b/packages/openubmc/src/views/detail/SigOverview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bda0e0df8a1a2f0ad87b101f063f69ec4862a6d3
--- /dev/null
+++ b/packages/openubmc/src/views/detail/SigOverview.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import SectionCard from '@/components/SectionCard.vue';
+import { request } from 'shared/plugins/axios';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+const list = ref<any[]>([]);
+const { t } = useI18n();
+const route = useRoute();
+
+const querySigs = () => {
+  request
+    .get('/api-magic/sig/scoreAll', { params: { community: 'openubmc' } })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code === 1 && res.data) {
+        list.value = res.data;
+      } else {
+        list.value = [];
+      }
+    });
+};
+
+onMounted(querySigs);
+</script>
+
+<template>
+  <SectionCard>
+    <template #header>{{ t('common.groupActive') }}</template>
+    <div class="activeness">
+      <p class="title">{{ t('common.active') }}</p>
+      <p>0</p>
+      <p class="bar"></p>
+      <p>1</p>
+    </div>
+
+    <div class="sig-overview-content">
+      <a
+        class="item"
+        v-for="item in list"
+        :key="item.sig_name"
+        :href="`/${route.params.lang}/sig/${item.sig_name}`"
+        :style="{ background: `rgba(var(--o-ubmc-color), ${Math.floor(item.score * 100)}%)` }"
+        target="_blank"
+        rel="noopener noreferrer"
+      > 
+        <p :style="{ color: item.score >= 0.4 ? '#fff' : 'rgba(0, 0, 0, 0.8)' }">
+          {{ item.sig_name }}
+        </p>
+      </a>
+    </div>
+  </SectionCard>
+</template>
+<style lang="scss" scoped>
+.activeness {
+  display: flex;
+  align-items: center;
+  .title {
+    margin-right: 16px;
+  }
+  p:not(.title):not(:last-child) {
+    margin-right: 8px;
+  }
+  .bar {
+    width: 100px;
+    height: 8px;
+    background: linear-gradient(90deg, rgba(var(--o-ubmc-color), 0.1) 0%, var(--o-color-primary1) 100%);
+  }
+}
+
+.sig-overview-content {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  column-gap: 16px;
+  row-gap: 16px;
+  margin-top: 16px;
+
+  .item {
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+
+    p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 150px;
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/detail/UserContribution.vue b/packages/openubmc/src/views/detail/UserContribution.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92e7a2be2254fb201fa8583d298ee9657ee1afa1
--- /dev/null
+++ b/packages/openubmc/src/views/detail/UserContribution.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import SectionCard from '@/components/SectionCard.vue';
+import ToggleRadios from '@/components/ToggleRadios.vue';
+import useCommonFilters from '@/composables/useCommonFilters';
+import { usePersonalStore } from '@/stores/person';
+import { ODivider, OLink, ORadio, ORadioGroup } from '@opensig/opendesign';
+import { createReusableTemplate } from '@vueuse/core';
+import { useScreen } from 'shared/hooks/useScreen';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+const { lePad } = useScreen()
+const route = useRoute();
+const personStore = usePersonalStore();
+const { t } = useI18n();
+
+const contributionTypeOptions = computed(() => [
+  { label: t('common.home.prs'), value: 'pr' },
+  { label: t('common.home.issues'), value: 'issue' },
+  { label: t('common.home.comments'), value: 'comment' },
+]);
+const contributionTypeLabelMap = computed(
+  () =>
+    ({
+      pr: t('common.home.prs'),
+      issue: t('common.home.issues'),
+      comment: t('common.home.comments'),
+    }) as Record<string, string>
+);
+
+const commentTypeOptions = computed(() => [
+  { label: t('common.from.all'), value: '' },
+  { label: t('common.General'), value: 'normal' },
+  { label: t('common.Order'), value: 'command' },
+]);
+
+onMounted(() => {
+  personStore.getPersonalData();
+});
+
+const [Define, Reuse] = createReusableTemplate();
+
+const { disabledTimeRange } = useCommonFilters();
+</script>
+
+<template>
+  <SectionCard>
+    <template #header>{{ t('common.userContributor') }}</template>
+    <div>
+      <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+        <ElFormItem :label="t('common.from.type')">
+          <div>
+            <ToggleRadios v-model="personStore.personalForm.contributeType" :options="contributionTypeOptions" @change="personStore.getPersonalData" />
+            <div v-if="personStore.personalForm.contributeType === 'comment'" style="margin-top: 16px">
+              <ORadioGroup v-model="personStore.commentType" @change="personStore.getPersonalData">
+                <ORadio v-for="item in commentTypeOptions" :key="item.value" :value="item.value">
+                  {{ item.label }}
+                </ORadio>
+              </ORadioGroup>
+            </div>
+          </div>
+        </ElFormItem>
+        <ElFormItem :label="t('common.from.timeRange')">
+          <ElDatePicker
+            v-model="personStore.personalForm.timeRange"
+            unlink-panels
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="personStore.getPersonalData"
+            :disabled-date="disabledTimeRange"
+          />
+        </ElFormItem>
+      </ElForm>
+
+      <ODivider direction="h" style="--o-divider-gap: 24px" />
+
+      <div class="ranking-list">
+        <Define v-slot="{ data, title, index }">
+          <div class="ranking-list-item">
+            <p class="caption">{{ title }}</p>
+            <el-table
+              v-loading="false"
+              :data="data"
+              style="width: 100%"
+              :header-cell-style="{ backgroundColor: 'rgb(232, 232, 235)', color: '#000', fontWeight: '500px' }"
+            >
+              <el-table-column type="index" align="center" :index="index ?? 1" :label="t('common.Number')" width="100" />
+              <el-table-column prop="user_login" align="left" label="GitCode ID" show-overflow-tooltip width="180"
+                ><template #default="scope">
+                  <OLink color="primary" :href="`/${route.params.lang}/user/${scope.row.user_login}`" target="_blank" rel="noreferrer noopener">
+                    {{ scope.row.user_login }}
+                  </OLink>
+                </template>
+              </el-table-column>
+              <el-table-column :label="contributionTypeLabelMap[personStore.personalForm.contributeType]">
+                <template #header>
+                  <p class="bar-column-header">{{ contributionTypeLabelMap[personStore.personalForm.contributeType] }}</p>
+                </template>
+                <template #default="{ row }">
+                  <div class="box">
+                    <span class="num">{{ row.contribute }}</span>
+                    <ElProgress
+                      style="width: 280px"
+                      :show-text="false"
+                      :stroke-width="8"
+                      :percentage="personStore.personalMaxNum ? (100 / personStore.personalMaxNum) * row.contribute : 0"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </Define>
+
+        <Reuse :data="personStore.highRanking" :title="lePad ? 'Top 1-20' : 'Top 1-10'" />
+        <Reuse :data="personStore.lowRanking" title="Top 11-20" :index="11" />
+      </div>
+    </div>
+  </SectionCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  padding-right: 40px;
+  @include text1;
+  line-height: var(--o-control_size-m) !important;
+}
+
+.custom-header {
+  padding-left: 62px;
+}
+
+:deep(.el-progress) {
+  margin-left: 10px;
+
+  .el-progress-bar__outer {
+    background: none;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .ranking-list-item {
+    margin-right: 0;
+  }
+}
+
+.ranking-list {
+  --el-color-primary: var(--o-color-primary1);
+  display: flex;
+  .ranking-list-item {
+    flex: 1;
+    &:first-child {
+      margin-right: 32px;
+    }
+  }
+  .bar-column-header {
+    padding-left: 50px;
+  }
+  .caption {
+    font-size: 16px;
+    color: #000;
+    line-height: 24px;
+    margin-bottom: 8px;
+  }
+  .box {
+    display: flex;
+    .num {
+      width: 50px;
+      text-align: right;
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/overview/Index.vue b/packages/openubmc/src/views/overview/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff535474e5cf2d8dc9b4af556bcd922be2f4f78c
--- /dev/null
+++ b/packages/openubmc/src/views/overview/Index.vue
@@ -0,0 +1,183 @@
+<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 useScroll from 'shared/hooks/useScroll';
+
+import homeBanner from '@/assets/bg.png';
+import arrowDown from '~icons/shared/chevrons-down';
+import { useCommonStore } from '@/stores/common';
+import { OIcon } from '@opensig/opendesign';
+
+const router = useRouter();
+const useCommon = useCommonStore();
+const { t, locale } = useI18n();
+
+const { isScrollDown } = useScroll('down');
+
+watch(isScrollDown, () => {
+  if (isScrollDown.value) {
+    router.push({ name: 'detail', params: { lang: locale.value } });
+  }
+});
+
+const goContributors = () => {
+  isScrollDown.value = true;
+};
+
+// 获取数据
+onMounted(() => {
+  useCommon.getAllData();
+});
+</script>
+
+<template>
+  <o-banner class="home-banner">
+    <div class="banner-content">
+      <div class="community-content">
+        <div class="community-info">
+          <p class="title">{{ t('common.home.user') }}</p>
+          <p class="num">{{ toThousands(useCommon.allData.users) }}</p>
+        </div>
+        <div class="community-info">
+          <p class="title">{{ t('common.home.contributors') }}</p>
+          <p class="num">
+            {{ toThousands(useCommon.allData.contributor_all) }}
+          </p>
+        </div>
+        <div class="community-info">
+          <p class="title">{{ t('common.home.partners') }}</p>
+          <p class="num">{{ toThousands(useCommon.allData.company_all) }}</p>
+        </div>
+        <div class="community-panel">
+          <div class="community-info">
+            <p class="title">{{ t('common.home.prs') }}</p>
+            <p class="num">{{ formatNumber(useCommon.allData.merged_pr_all) }}</p>
+          </div>
+          <div class="community-info">
+            <p class="title">{{ t('common.home.issues') }}</p>
+            <p class="num">{{ formatNumber(useCommon.allData.issue_all) }}</p>
+          </div>
+          <div class="community-info">
+            <p class="title">{{ t('common.home.comments') }}</p>
+            <p class="num">{{ formatNumber(useCommon.allData.comment_all) }}</p>
+          </div>
+          <div class="community-info">
+            <p class="title">{{ t('common.home.sigs') }}</p>
+            <p class="num">{{ formatNumber(useCommon.allData.sig_all) }}</p>
+          </div>
+          <div class="community-info">
+            <p class="title">{{ t('common.home.repos') }}</p>
+            <p class="num">{{ toThousands(useCommon.allData.repo_all) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <p class="time">{{ useCommon.time }}</p>
+      <div class="more" @click="goContributors">
+        <p>{{ t('common.home.moreData') }}</p>
+        <OIcon class="icon"><arrow-down></arrow-down></OIcon>
+      </div>
+    </div>
+    <template #video>
+      <video
+        class="bg-video"
+        src="https://datastat.obs.cn-north-4.myhuaweicloud.com/datastat-openubmc-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>
+.home-banner {
+  min-width: fit-content;
+}
+.bg-video {
+  height: 100vh;
+}
+.banner-content {
+  min-width: 1024px;
+  padding: 100px 0;
+  color: #ffffff;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  .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;
+      font-style: normal;
+    }
+    .community-info {
+      text-align: left;
+    }
+    .community-panel {
+      display: flex;
+      .community-info {
+        margin-bottom: 0;
+        margin-right: 64px;
+        text-align: left;
+      }
+      .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;
+      // opacity: 0.6;
+      font-weight: 100;
+    }
+    .icon {
+      animation: chevronsDown 2s infinite;
+      display: inline-block;
+      // opacity: 0.6;
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/sig/Index.vue b/packages/openubmc/src/views/sig/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53168e427343fd4bca0a63e2e5c850e2afa75ab8
--- /dev/null
+++ b/packages/openubmc/src/views/sig/Index.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import CommonLayout from '@/components/CommonLayout.vue';
+import ToggleRadios from '@/components/ToggleRadios.vue';
+import { OBreadcrumb, OBreadcrumbItem, OCheckbox, OCheckboxGroup, ODivider, OIcon, OIconSearch, OInput, OLink, OPagination } from '@opensig/opendesign';
+import { refDebounced } from '@vueuse/core';
+import { request } from 'shared/plugins/axios';
+import { computed, onMounted, ref, shallowRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import Sidebar from './Sidebar.vue';
+import useCommonFilters from '@/composables/useCommonFilters';
+import SectionCard from '@/components/SectionCard.vue';
+
+const { t } = useI18n();
+const { locale } = useI18n();
+const route = useRoute();
+
+const sigName = computed(() => route.params.id as string);
+
+watch(
+  () => route.params.id as string,
+  (val) => {
+    if (val && typeof val === 'string') {
+      getContributionData();
+    }
+  }
+);
+
+const { contributionTypeOptions, contributionType, contributionTypeLabel, timeRange } = useCommonFilters();
+
+const searchGitcodeId = ref('');
+const debouncedSearchGitCodeId = refDebounced(searchGitcodeId, 400);
+
+const userTypeOptions = ref([
+  { label: 'Maintainer', value: 'maintainer', color: 'rgb(0, 98, 220)' },
+  { label: 'Committer', value: 'committer', color: 'rgb(240, 188, 0)' },
+  { label: 'Contributor', value: 'contributor', color: 'rgb(0, 167, 179)' },
+]);
+const userType = ref(userTypeOptions.value.map((d) => d.value));
+const userTypeColorMap = userTypeOptions.value.reduce(
+  (acc, { value, color }) => {
+    acc[value] = color;
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+const contributionData = shallowRef<
+  {
+    contribute: number;
+    user_login: string;
+    usertype: string;
+  }[]
+>([]);
+const maxContributionNum = computed(() => {
+  if (contributionData.value.length === 0) return 0;
+  return Math.max(...contributionData.value.map((d) => d.contribute));
+});
+
+const filteredDataList = computed(() => {
+  let res = contributionData.value;
+  if (userType.value.length) {
+    res = res.filter((d) => userType.value.includes(d.usertype));
+  }
+  if (debouncedSearchGitCodeId.value) {
+    const lowercase = debouncedSearchGitCodeId.value;
+    res = res.filter((d) => d.user_login.toLocaleLowerCase().includes(lowercase));
+  }
+  return res;
+});
+
+const page = ref(1);
+const pageSize = ref(10);
+const pageSizes = [10, 15, 30, 50];
+const displayContributionData = computed(() => {
+  const start = (page.value - 1) * 10;
+  return filteredDataList.value.slice(start, start + pageSize.value);
+});
+
+const onUserTypeChange = () => {
+  page.value = 1;
+};
+
+const getContributionData = () => {
+  const params = {
+    community: 'openubmc',
+    contributeType: contributionType.value,
+    sig: sigName.value,
+  } as Record<string, any>;
+  if (timeRange.value?.length === 2) {
+    params.start = timeRange.value[0].getTime();
+    params.end = timeRange.value[1].getTime();
+  }
+  request
+    .get('/api-magic/stat_new/sig/user/contribute', { params })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code === 1 && res.data) {
+        contributionData.value = res.data;
+      }
+    });
+};
+
+onMounted(() => {
+  getContributionData();
+});
+
+const router = useRouter();
+const toUserDetail = (id: string) => {
+  router.push({ name: 'user-detail', params: { id, lang: locale.value ?? 'zh' } });
+};
+
+const now = new Date();
+now.setHours(0, 0, 0, 0);
+const start = new Date(2024, 10, 1);
+const disabledDate = (time: Date) => {
+  return time < start || time > now;
+}
+</script>
+
+<template>
+  <CommonLayout>
+    <OBreadcrumb>
+      <OBreadcrumbItem :to="`/${locale}/detail`">{{ t('common.nav.contributors') }}</OBreadcrumbItem>
+      <OBreadcrumbItem style="color: var(--o-color-primary1)">{{ route.params.id }}</OBreadcrumbItem>
+    </OBreadcrumb>
+
+    <ElRow style="margin-top: 24px" :gutter="24">
+      <ElCol :span="7">
+        <Sidebar />
+      </ElCol>
+      <ElCol :span="17">
+        <SectionCard>
+          <template #header> {{ sigName }}{{ t('common.userContributor') }} </template>
+          <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+            <ElFormItem :label="t('common.from.type')">
+              <ToggleRadios v-model="contributionType" :options="contributionTypeOptions" @change="getContributionData" />
+            </ElFormItem>
+            <ElFormItem :label="t('common.from.timeRange')">
+              <ElDatePicker
+                v-model="timeRange"
+                unlink-panels
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                @change="getContributionData"
+                :disabled-date="disabledDate"
+              />
+            </ElFormItem>
+          </ElForm>
+
+          <ODivider />
+
+          <div class="search-toggle">
+            <OInput v-model="searchGitcodeId" :placeholder="t('common.enterGitee')">
+              <template #prefix
+                ><OIcon style="font-size: 16px"><OIconSearch /></OIcon
+              ></template>
+            </OInput>
+
+            <OCheckboxGroup v-model="userType" @change="onUserTypeChange">
+              <OCheckbox v-for="item in userTypeOptions" :key="item.value" :value="item.value">
+                <template #checkbox="{ checked }">
+                  <div class="user-type-radio">
+                    <div class="dot" :style="{ backgroundColor: checked ? item.color : 'rgb(204, 204, 204)' }"></div>
+                    <p class="desc">{{ item.label }}</p>
+                  </div>
+                </template>
+              </OCheckbox>
+            </OCheckboxGroup>
+          </div>
+
+          <div style="border-radius: 4px; overflow: hidden">
+            <ElTable :data="displayContributionData" :header-cell-style="{ backgroundColor: 'rgb(232, 232, 235)', color: '#000', fontWeight: '500' }">
+              <ElTableColumn :label="t('common.Number')" width="60">
+                <template #default="{ $index }">
+                  <span>{{ $index + 1 }}</span>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="GitCode ID" width="180">
+                <template #default="{ row }">
+                  <OLink color="primary" hover-underline style="--link-gap: 4px" @click="toUserDetail(row.user_login)">
+                    <template #icon><div class="dot" :style="{ backgroundColor: userTypeColorMap[row.usertype as string] }"></div></template>
+                    {{ row.user_login }}
+                  </OLink>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn :label="contributionTypeLabel">
+                <template #default="{ row }">
+                  <div class="data-column-cell">
+                    <span class="contribution-data">{{ row.contribute }}</span>
+                    <ElProgress
+                      v-if="row.contribute > 0"
+                      :show-text="false"
+                      :color="userTypeColorMap[row.usertype as string]"
+                      :percentage="Math.floor((row.contribute * 100) / maxContributionNum)"
+                    />
+                  </div>
+                </template>
+              </ElTableColumn>
+            </ElTable>
+          </div>
+          <OPagination
+            v-if="contributionData.length"
+            :total="filteredDataList.length"
+            :page-sizes="pageSizes"
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            show-total
+            style="margin-top: 24px"
+          />
+        </SectionCard>
+      </ElCol>
+    </ElRow>
+  </CommonLayout>
+</template>
+
+<style lang="scss" scoped>
+.o-divider {
+  --o-divider-gap: 24px;
+}
+
+.section-card {
+  height: 100%;
+}
+
+:deep(.el-form-item__label) {
+  padding-right: 40px;
+  @include text1;
+  line-height: var(--o-control_size-m) !important;
+}
+.o-pagination {
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: #fff;
+}
+:deep(.o-pagination-wrap) {
+  justify-content: flex-end;
+}
+
+.el-progress {
+  width: 550px;
+  :deep(.el-progress-bar__outer) {
+    background-color: transparent;
+  }
+}
+
+.data-column-cell {
+  display: flex;
+  align-items: center;
+
+  .contribution-data {
+    width: 50px;
+    margin-right: 8px;
+  }
+}
+
+.dot {
+  display: inline-block;
+  margin-right: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
+
+.user-type-radio {
+  display: flex;
+  align-items: center;
+  .desc {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+
+.search-toggle {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/packages/openubmc/src/views/sig/Sidebar.vue b/packages/openubmc/src/views/sig/Sidebar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5d23e747222a5125f7ea08ed21fd3610a9903f1
--- /dev/null
+++ b/packages/openubmc/src/views/sig/Sidebar.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import SectionCard from '@/components/SectionCard.vue';
+import { binarySearch } from '@/shared/utils';
+import { ODivider, OIcon, OIconSearch, OInput, OLink, OOption, OSelect } from '@opensig/opendesign';
+import { createReusableTemplate, refDebounced } from '@vueuse/core';
+import { request } from 'shared/plugins/axios';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import IconGitCode from '~icons/app/gitcode.svg';
+import IconMail from '~icons/app/mail.svg';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const allSigs = ref<string[]>([]);
+const { locale } = useI18n()
+const sigName = computed({
+  get() {
+    return route.params.id as string;
+  },
+  set(id) {
+    router.push({ name: 'sig-detail', params: { id, lang: locale.value ?? 'zh' } });
+  }
+});
+
+const sigSearchInput = ref('')
+const sigSearchInputDebounced = refDebounced(sigSearchInput, 300)
+const filteredAllSigs = computed(() => {
+  if (sigSearchInputDebounced.value) {
+    return allSigs.value.filter((item) => item.toUpperCase().includes(sigSearchInputDebounced.value.toUpperCase()));
+  }
+  return allSigs.value;
+});
+
+watch(
+  sigName,
+  () => {
+    getSigInfo()
+  }
+);
+
+const currentSigIndex = computed(() => {
+  return binarySearch(allSigs.value, sigName.value, (current, target) => current.localeCompare(target, 'en'));
+});
+
+const onAllSigsSelectVisible = async (val: boolean) => {
+  if (!val) return;
+  await nextTick();
+  const sigsWrap = document.querySelector('.sigs-options-wrap')!;
+  const sigOption = sigsWrap.querySelector('.o-option')!;
+  const height = sigOption.getBoundingClientRect().height;
+  sigsWrap.scrollTop = height * currentSigIndex.value;
+};
+
+const [SigInfo, ReusableSigInfo] = createReusableTemplate();
+
+const sigInfo = ref<any>();
+const getSigInfo = () => {
+  request
+    .get('/api-magic/stat_new/sig/info', { params: { community: 'openubmc', sig: sigName.value } })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code === 1 && res.data) {
+        sigInfo.value = res.data;
+      }
+    });
+};
+
+onMounted(() => {
+  request
+    .get('/api-magic/stat/sig/list?community=openubmc')
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code === 1 && res.data) {
+        allSigs.value = res.data.sort(new Intl.Collator('en').compare);
+      }
+    });
+  getSigInfo();
+});
+</script>
+<template>
+  <SectionCard>
+    <OSelect v-model="sigName" option-wrap-class="sigs-options-wrap" @options-visible-change="onAllSigsSelectVisible" style="width: 100%">
+      <OInput clearable style="width: 100%; position: sticky; top: 0;" v-model="sigSearchInput">
+        <template #prefix
+          ><OIcon><OIconSearch /></OIcon
+        ></template>
+      </OInput>
+      <OOption v-for="sig in filteredAllSigs" :key="sig" :value="sig" :label="sig" />
+    </OSelect>
+    <p style="margin-top: 14px">
+      <OLink color="primary" hover-underline style="--link-gap: 10px" :href="`https://www.openubmc.cn/sig/${sigName}`" target="_blank" rel="noopener noreferrer">
+        <template #icon
+          ><OIcon style="font-size: 24px"><IconGitCode /></OIcon
+        ></template>
+        {{ t('common.toHome') }}
+      </OLink>
+    </p>
+    <template v-if="sigInfo">
+      <p style="margin-top: 14px">
+        <OLink color="primary" hover-underline style="--link-gap: 10px" :href="`mailto:${sigInfo.mailing_list}`">
+          <template #icon
+            ><OIcon style="font-size: 24px"><IconMail /></OIcon
+          ></template>
+          {{ sigInfo.mailing_list }}
+        </OLink>
+      </p>
+      <p class="sig-desc">
+        {{ sigInfo.description }}
+      </p>
+    </template>
+    <ODivider />
+    <SigInfo v-slot="{ title, data, linkPrefix }">
+      <div class="member-repo-info">
+        <p class="title">{{ title }} ({{ data.length }})</p>
+        <ul class="member-repo-info-list">
+          <li class="member-repo-info-list-item" v-for="item in data" :key="item">
+            <OLink color="primary" hover-underline :href="`${linkPrefix}/${item}`" target="_blank" rel="noopener noreferrer">@{{ item }}</OLink>
+          </li>
+        </ul>
+      </div>
+    </SigInfo>
+
+    <template v-if="sigInfo">
+      <ReusableSigInfo :data="sigInfo.maintainers" title="Maintainer" link-prefix="https://gitcode.com" />
+      <ReusableSigInfo :data="sigInfo.repositories" :title="t('common.warehouse')" link-prefix="https://gitcode.com" />
+    </template>
+  </SectionCard>
+</template>
+<style lang="scss" scoped>
+:deep(.o-icon svg) {
+  width: 1em;
+  height: 1em;
+}
+
+.sig-desc {
+  margin-top: 16px;
+  @include text1;
+  color: var(--o-color-info2);
+}
+
+.member-repo-info {
+  .title {
+    @include text2;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  .member-repo-info-list {
+    margin-top: 16px;
+    padding-left: 32px;
+
+    .member-repo-info-list-item {
+      &:not(:last-child) {
+        margin-bottom: 12px;
+      }
+      &::marker {
+        content: '';
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/openubmc/src/views/user/ContributeDynamic.vue b/packages/openubmc/src/views/user/ContributeDynamic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3cf9dd31333a953d75323d1d18e73241338019f5
--- /dev/null
+++ b/packages/openubmc/src/views/user/ContributeDynamic.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import SectionCard from '@/components/SectionCard.vue';
+import ToggleRadios from '@/components/ToggleRadios.vue';
+import useCommonFilters from '@/composables/useCommonFilters';
+import { ODivider, OIcon, OIconSearch, OInput, OLink, OOption, OPagination, ORadio, ORadioGroup, OSelect } from '@opensig/opendesign';
+import { refDebounced } from '@vueuse/core';
+import { request } from 'shared/plugins/axios';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import IconEmpty from '~icons/app/empty.svg';
+
+const { t } = useI18n();
+const route = useRoute();
+const userName = computed(() => route.params.id as string);
+
+const defaultSigOption = { label: '全部', value: '' };
+const sigs = ref<{ label: string; value: string }[]>([defaultSigOption]);
+const selectedSig = ref('');
+const onClearSigs = () => {
+  nextTick(() => {
+    selectedSig.value = '';
+  });
+};
+
+const { contributionTypeOptions, contributionType, contributionTypeLabel, timeRange, commentType, commentTypeOptions, disabledTimeRange } = useCommonFilters();
+
+const searchInput = ref('');
+const searchInputDebounced = refDebounced(searchInput, 300);
+
+const total = ref(0);
+const listData = ref<
+  {
+    info: string;
+    repo: string;
+    time: string;
+    url: string;
+    no: string;
+  }[]
+>([]);
+const page = ref(1);
+const pageSize = ref(10);
+
+const commonParams = computed(() => {
+  const res = {
+    community: 'openubmc',
+    contributeType: contributionType.value,
+    user: userName.value,
+    sig: selectedSig.value,
+    filter: searchInput.value,
+    comment_type: contributionType.value === 'comment' ? commentType.value : null,
+  };
+  if (timeRange.value?.length === 2) {
+    const end = new Date(timeRange.value[1]);
+    end.setDate(end.getDate() + 1);
+    Object.assign(res, {
+      start: timeRange.value[0].getTime(),
+      end: end.getTime(),
+    });
+  }
+  return res;
+});
+
+const queryTotal = () => {
+  request
+    .get(`/api-magic/stat_new/${contributionType.value}/count`, { params: commonParams.value })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) {
+        total.value = 0;
+        return;
+      }
+      total.value = res.data[contributionType.value];
+    })
+    .catch(() => (total.value = 0));
+};
+
+const queryData = () => {
+  request
+    .get(`/api-magic/stat_new/${contributionType.value}/detail`, {
+      params: {
+        ...commonParams.value,
+        page: page.value,
+        pageSize: pageSize.value,
+      },
+    })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) {
+        listData.value = [];
+        return;
+      }
+      listData.value = res.data;
+    })
+    .catch(() => (listData.value = []));
+};
+
+const updateData = async () => {
+  await nextTick();
+  page.value = 1;
+  queryTotal();
+  queryData();
+};
+
+watch([userName, searchInputDebounced], updateData);
+onMounted(() => {
+  updateData();
+  const commonParams = {
+    community: 'openubmc',
+    user: userName.value,
+  } as Record<string, any>;
+  if (timeRange.value?.length === 2) {
+    const end = new Date(timeRange.value[1]);
+    end.setDate(end.getDate() + 1);
+    commonParams.start = timeRange.value[0].getTime();
+    commonParams.end = end.getTime();
+  }
+  sigs.value = [defaultSigOption];
+
+  const set = new Set<string>();
+  ['pr', 'issue', 'comment']
+    .map((type) => {
+      const params = { ...commonParams, contributeType: type };
+      return request.get('/api-magic/stat_new/sigcontribute', { params }).then((res) => res.data ?? {});
+    })
+    .forEach((res) => {
+      res.then((res) => {
+        if (res.code !== 1 || !res.data) return;
+        sigs.value.push(
+          ...res.data
+            .filter((item: any) => {
+              if (set.has(item.sig_name)) return false;
+              set.add(item.sig_name);
+              return true;
+            })
+            .map((item: any) => ({ label: item.sig_name, value: item.sig_name }))
+        );
+      });
+    });
+});
+
+const onPageChange = () => {
+  queryData();
+};
+</script>
+
+<template>
+  <SectionCard>
+    <template #header> {{ userName }} {{ t('common.DynamicContribute') }} </template>
+
+    <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+      <ElFormItem :label="`SIG${t('common.filtrate')}`">
+        <OSelect v-model="selectedSig" clearable @change="updateData" @clear="onClearSigs">
+          <OOption v-for="item in sigs" :key="item.value" :value="item.value" :label="item.label" />
+        </OSelect>
+      </ElFormItem>
+      <ElFormItem :label="t('common.from.type')">
+        <ToggleRadios v-model="contributionType" :options="contributionTypeOptions" @change="updateData" />
+      </ElFormItem>
+      <ElFormItem v-if="contributionType === 'comment'" label=" ">
+        <div v-if="contributionType === 'comment'">
+          <ORadioGroup v-model="commentType" @change="updateData">
+            <ORadio v-for="item in commentTypeOptions" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </ORadio>
+          </ORadioGroup>
+        </div>
+      </ElFormItem>
+      <ElFormItem :label="t('common.from.timeRange')">
+        <ElDatePicker
+          unlink-panels
+          v-model="timeRange"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="updateData"
+          :disabled-date="disabledTimeRange"
+        />
+      </ElFormItem>
+    </ElForm>
+
+    <ODivider style="--o-divider-gap: 24px" />
+
+    <OInput v-model="searchInput" :placeholder="t('common.enterWord')" clearable>
+      <template #prefix
+        ><OIcon style="font-size: 16px"><OIconSearch /></OIcon
+      ></template>
+    </OInput>
+
+    <p class="result-desc">{{ contributionTypeLabel }} {{ t('common.total') }}（{{ total }}）{{ t('common.bar') }}</p>
+
+    <template v-if="listData.length">
+      <template v-for="(item, index) in listData" :key="`${contributionType}_${item.no}_${page}_${index}`">
+        <p class="list-data-item-time">{{ item.time }}</p>
+        <div class="list-data-item" v-if="contributionType !== 'comment'">
+          在
+          <OLink hover-underline color="primary" :href="`https://gitcode.com/${item.repo}`" rel="noopener noreferrer" target="_blank">{{ item.repo }}</OLink>
+          创建了<OLink hover-underline color="primary" :href="item.url" rel="noopener noreferrer" target="_blank"
+            >{{ contributionType === 'pr' ? 'Pull Request' : 'Issue' }} {{ item.info }}</OLink
+          >
+        </div>
+        <div class="list-data-item" v-else>
+          评论了
+          <OLink hover-underline color="primary" :href="`https://gitcode.com/${item.repo}`" rel="noopener noreferrer" target="_blank">{{ item.repo }}</OLink>
+          的Pull Request<OLink hover-underline color="primary" :href="item.url" rel="noopener noreferrer" target="_blank">{{ item.info }}</OLink>
+        </div>
+      </template>
+    </template>
+    <div v-else class="empty-pic">
+      <OIcon style="margin-bottom: 16px"><IconEmpty /></OIcon>
+      暂无数据
+    </div>
+
+    <OPagination
+      v-if="total > 0"
+      v-model:page="page"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 50]"
+      :total="total"
+      show-total
+      style="margin-top: 24px"
+      @change="onPageChange"
+    />
+  </SectionCard>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  padding-right: 40px;
+  @include text1;
+  line-height: var(--o-control_size-m) !important;
+}
+.o-pagination {
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: #fff;
+}
+:deep(.o-pagination-wrap) {
+  justify-content: flex-end;
+}
+
+.empty-pic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.list-data-item {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 8px;
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+
+.result-desc {
+  @include text1;
+  margin: 24px 0;
+}
+
+.content-card {
+  padding: 24px;
+  background: #fff;
+  border-radius: 4px;
+
+  .card-title {
+    @include h1;
+    margin-bottom: 32px;
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/user/ContributionData.vue b/packages/openubmc/src/views/user/ContributionData.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c48e59937a167d5e996f87a73ebf1632a0d5259
--- /dev/null
+++ b/packages/openubmc/src/views/user/ContributionData.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import SectionCard from '@/components/SectionCard.vue';
+import ToggleRadios from '@/components/ToggleRadios.vue';
+import useCommonFilters from '@/composables/useCommonFilters';
+import { ODivider, OIcon, OIconSearch, OInput } from '@opensig/opendesign';
+import { refDebounced } from '@vueuse/core';
+import { request } from 'shared/plugins/axios';
+import { formatNumber } from 'shared/utils/helper';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import IconEmpty from '~icons/app/empty.svg';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const userName = computed(() => route.params.id as string);
+
+const { contributionTypeOptions, contributionType, timeRange, disabledTimeRange } = useCommonFilters();
+
+const displayCountOptions = [
+  { label: '全部', value: 0 },
+  { label: 'Top10', value: 10 },
+];
+
+const contributionData = ref<{ contribute: number; sig_name: string; rank: number; percent: number }[]>([]);
+const displayCount = ref(10);
+const searchSigName = ref('');
+const searchSigNameDebounced = refDebounced(searchSigName);
+const displayData = computed(() => {
+  let res = contributionData.value;
+  if (displayCount.value) {
+    res = res.slice(0, displayCount.value);
+  }
+  let search = searchSigNameDebounced.value.trim()
+  console.log(search)
+  if (search) {
+    search = search.toLowerCase();
+    res = res.filter(item => item.sig_name.toLowerCase().includes(search));
+  }
+  return res;
+});
+
+const max = computed(() => contributionData.value?.[0]?.contribute ?? 0);
+const queryData = () => {
+  const params = {
+    community: 'openubmc',
+    contributeType: contributionType.value,
+    user: userName.value,
+  } as Record<string, any>;
+  if (timeRange.value?.length === 2) {
+    params.start = timeRange.value[0].getTime();
+    params.end = timeRange.value[1].getTime();
+  }
+  request
+    .get('/api-magic/stat_new/sigcontribute', { params })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) {
+        contributionData.value = [];
+        return;
+      }
+      const max = res.data[0].contribute;
+      contributionData.value = res.data.map((item: any) => ({
+        ...item,
+        percent: Math.floor(item.contribute * 100 / max)
+      }));
+    })
+    .catch(() => (contributionData.value = []));
+};
+
+onMounted(queryData);
+watch(userName, queryData);
+
+const router = useRouter();
+const toSigDetail = (id: string) => router.push({ name: 'sig-detail', params: { id } });
+</script>
+
+<template>
+  <SectionCard>
+    <template #header> {{ userName }} SIG {{ t('common.contribute') }} </template>
+
+    <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+      <ElFormItem :label="t('common.from.type')">
+        <ToggleRadios v-model="contributionType" :options="contributionTypeOptions" @change="queryData" />
+      </ElFormItem>
+      <ElFormItem :label="t('common.from.timeRange')">
+        <ElDatePicker
+          v-model="timeRange"
+          unlink-panels
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="queryData"
+          :disabled-date="disabledTimeRange"
+        />
+      </ElFormItem>
+    </ElForm>
+
+    <ODivider />
+
+    <ElForm label-width="auto" label-position="right" style="--el-text-color-regular: #000">
+      <ElFormItem label="显示范围">
+        <ToggleRadios v-model="displayCount" :options="displayCountOptions" @change="queryData" />
+      </ElFormItem>
+    </ElForm>
+
+    <OInput v-model="searchSigName" placeholder="请输入SIG名称搜索">
+      <template #prefix><OIcon style="font-size: 16px"><OIconSearch /></OIcon></template>
+    </OInput>
+
+    <div class="bar-panel">
+      <template v-if="displayData.length">
+        <ul class="bar-content">
+          <li v-for="(item, index) in displayData" :key="item.sig_name" class="bar-content-item">
+            <p class="infos">
+              <span class="index">{{ index + 1 }}</span>
+              <span class="name" @click="toSigDetail(item.sig_name)">{{ item.sig_name }}</span>
+            </p>
+  
+            <ElTooltip placement="bottom-start" effect="light" popper-class="bar-tooltip" :show-arrow="false">
+              <template #content>
+                <div class="info">
+                  <p>
+                    <span class="index">{{ item.rank }}</span>
+                    {{ item.sig_name }}
+                  </p>
+                  <span class="num">{{ item.contribute }} </span>
+                  <span>{{ item.percent + '%' }} </span>
+                </div>
+              </template>
+              <div class="progress">
+                <div class="progress-inner" :style="{ width: item.percent + '%' }">
+                  <span v-if="item.percent >= 80">{{ formatNumber(item.contribute) }}</span>
+                </div>
+                <span v-if="item.percent < 80" class="val">{{ formatNumber(item.contribute) }}</span>
+              </div>
+            </ElTooltip>
+          </li>
+        </ul>
+        <div v-if="displayData.length" class="bar-columns">
+          <div class="num"><span>0</span></div>
+          <div class="num">
+            <span>{{ formatNumber(Math.floor(max / 2)) }}</span>
+          </div>
+          <div class="num">
+            <span>{{ max }}</span>
+          </div>
+        </div>
+      </template>
+      <div v-else class="empty-pic">
+        <OIcon>
+          <IconEmpty />
+        </OIcon>
+        <p>暂无数据</p>
+      </div>
+    </div>
+  </SectionCard>
+</template>
+<style lang="scss" scoped>
+.o-divider {
+  --o-divider-gap: 24px;
+}
+
+.empty-pic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+:deep(.el-form-item__label) {
+  padding-right: 40px;
+  @include text1;
+  line-height: var(--o-control_size-m) !important;
+}
+
+.bar-panel {
+  position: relative;
+  padding-bottom: 12px;
+  .bar-columns {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 324px;
+    display: flex;
+    justify-content: space-between;
+    right: 0;
+    .num {
+      color: #9097a3;
+      font-size: 12px;
+      position: relative;
+      display: flex;
+      align-items: end;
+      min-width: 8px;
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 48%;
+        width: 1px;
+        border-left: 1px dashed #ccc;
+        bottom: 20px;
+        content: '';
+      }
+      &:last-child {
+        &::after {
+          left: inherit;
+          right: 0;
+        }
+      }
+    }
+  }
+}
+.bar-content {
+  position: relative;
+  z-index: 2;
+  .bar-content-item {
+    margin: 16px 0;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    .infos {
+      font-size: 16px;
+      line-height: 22px;
+
+      display: flex;
+      .index {
+        width: 16px;
+        margin-right: 8px;
+        font-size: 16px;
+        color: #9097a3;
+        text-align: center;
+      }
+      .name {
+        cursor: pointer;
+        color: var(--o-color-primary1);
+        width: 304px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+.progress {
+  height: 24px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  .progress-inner {
+    background: var(--o-color-primary1);
+    box-shadow: 4px 8px 12px 0px rgba(0, 92, 219, 0.25);
+    font-size: 12px;
+    color: #fff;
+    height: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding-right: 0px;
+    transition: all 0.3s ease-in-out;
+    span {
+      padding-right: 4px;
+    }
+  }
+  .val {
+    color: #000;
+    font-size: 12px;
+    margin-left: 8px;
+  }
+}
+.bar-tooltip {
+  padding: 12px 16px;
+  box-shadow:
+    4px 8px 16px 0px rgba(10, 11, 13, 0.05),
+    0px 0px 32px 0px rgba(10, 11, 13, 0.1);
+
+  .lable {
+    color: #9097a3;
+    font-weight: bold;
+    .text {
+      font-weight: 100;
+    }
+  }
+  .info {
+    color: #4e5865;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    .index {
+      color: #9097a3;
+    }
+    .num {
+      font-size: 16px;
+      color: #000000;
+      margin-right: 8px;
+      margin-left: 16px;
+      .percentage {
+        margin-left: 10px;
+        font-size: 12px;
+        color: #4e5865;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/openubmc/src/views/user/Index.vue b/packages/openubmc/src/views/user/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27bde0b82777af40c1da49c89e5fe41430c2a274
--- /dev/null
+++ b/packages/openubmc/src/views/user/Index.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import CommonLayout from '@/components/CommonLayout.vue';
+import { OBreadcrumb, OBreadcrumbItem } from '@opensig/opendesign';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import Sidebar from './Sidebar.vue';
+import ContributionData from './ContributionData.vue';
+import ContributeDynamic from './ContributeDynamic.vue';
+
+const { locale, t } = useI18n();
+const route = useRoute();
+</script>
+
+<template>
+  <CommonLayout>
+    <OBreadcrumb>
+      <OBreadcrumbItem :to="`/${locale}/detail`">{{ t('common.nav.contributors') }}</OBreadcrumbItem>
+      <OBreadcrumbItem style="color: var(--o-color-primary1)">{{ route.params.id }}</OBreadcrumbItem>
+    </OBreadcrumb>
+
+    <ElRow style="margin-top: 26px" :gutter="32">
+      <ElCol :span="7">
+        <Sidebar />
+      </ElCol>
+      <ElCol :span="17">
+        <ContributionData />
+        <ContributeDynamic style="margin-top: 32px;" />
+      </ElCol>
+    </ElRow>
+  </CommonLayout>
+</template>
diff --git a/packages/openubmc/src/views/user/Sidebar.vue b/packages/openubmc/src/views/user/Sidebar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4084abd9e40a74347487522a163d7e422f5bdc4a
--- /dev/null
+++ b/packages/openubmc/src/views/user/Sidebar.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ODivider, OIcon, OIconSearch, OInput, OLink, OOption, OSelect, OVirtualList } from '@opensig/opendesign';
+import { request } from 'shared/plugins/axios';
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import IconGitCode from '~icons/app/gitcode.svg';
+import cosePng from '@/assets/cose.png';
+import { binarySearch } from '@/shared/utils';
+import { usePersonalStore } from '@/stores/person';
+import { useI18n } from 'vue-i18n';
+import SectionCard from '@/components/SectionCard.vue';
+import { refDebounced } from '@vueuse/core';
+import useCommonFilters from '@/composables/useCommonFilters';
+
+const route = useRoute();
+const router = useRouter();
+const userStore = usePersonalStore();
+
+const { locale } = useI18n();
+const userName = computed({
+  get() {
+    return route.params.id as string;
+  },
+  set(id) {
+    router.push({ name: 'user-detail', params: { id, lang: locale.value ?? 'zh' } });
+  },
+});
+
+const userSearchInput = ref('');
+const userSearchInputDebounced = refDebounced(userSearchInput, 300);
+const allUsers = computed(() => {
+  if (userSearchInputDebounced.value) {
+    return userStore.allUsers.filter((item) => item.toUpperCase().includes(userSearchInputDebounced.value.toUpperCase()));
+  }
+  return userStore.allUsers;
+});
+
+const currentUserIndex = computed(() => binarySearch(allUsers.value, userName.value, (current, target) => current.localeCompare(target, 'en')));
+
+const getAllUsers = () => {
+  if (userStore.allUsers?.length) return;
+  request
+    .get('/api-magic/stat_new/userlist?community=openubmc')
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) return;
+      const collator = Intl.Collator('en');
+      userStore.allUsers = Object.keys(res.data).sort((a, b) => collator.compare(a, b));
+    });
+};
+
+const userInfo = ref<{ user_login: string; html_url: string } | null>();
+
+const getUserInfo = () => {
+  userInfo.value = null;
+  request
+    .get('/api-magic/stat_new/user/info', { params: { community: 'openubmc', user: userName.value } })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) return;
+      userInfo.value = res.data;
+    });
+};
+
+const vListRef = useTemplateRef('virtualList');
+const onSelectOptionsVisibleChange = (visible: boolean) => {
+  if (visible) {
+    setTimeout(() => {
+      vListRef.value?.scrollToView(currentUserIndex.value);
+    }, 50);
+  }
+};
+
+const userRoleInfo = ref<
+  {
+    sig_name: string;
+    role: string[];
+  }[]
+>([]);
+
+const getUserRoleInfo = () => {
+  userRoleInfo.value = [];
+  request
+    .get('/api-magic/sig/user/ownertype', { params: { community: 'openubmc', user: userName.value } })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) return;
+      userRoleInfo.value = res.data;
+      userStore;
+    });
+};
+const userRoleLabelMap = {
+  maintainer: 'Maintainer',
+  committer: 'Committer',
+  contributor: 'Contributor',
+};
+
+const timeRange = ref<Date[]>([]);
+
+const contributeData = ref<{ sig: number; pr: number; comment: number; issue: number }>();
+const getContributeData = () => {
+  const params = {
+    community: 'openubmc',
+    user: userName.value,
+  } as Record<string, any>;
+  if (timeRange.value?.length === 2) {
+    params.start = timeRange.value[0].getTime();
+    params.end = timeRange.value[1].getTime();
+  }
+  request
+    .get('/api-magic/stat_new/count', { params })
+    .then((res) => res.data ?? {})
+    .then((res) => {
+      if (res.code !== 1 || !res.data) return;
+      contributeData.value = res.data;
+    });
+};
+
+const onUserChange = () => {
+  getUserInfo();
+  getUserRoleInfo();
+  getContributeData();
+};
+
+watch(userName, onUserChange);
+
+onMounted(() => {
+  getAllUsers();
+  onUserChange();
+});
+
+const toSigDetail = (sig: string) => {
+  router.push({ name: 'sig-detail', params: { id: sig, lang: locale.value ?? 'zh' } });
+};
+
+const { disabledTimeRange } = useCommonFilters()
+</script>
+
+<template>
+  <SectionCard class="content-card">
+    <OSelect v-model="userName" @change="onUserChange" style="width: 100%" @options-visible-change="onSelectOptionsVisibleChange">
+      <OInput style="width: 100%" v-model="userSearchInput">
+        <template #prefix
+          ><OIcon><OIconSearch /></OIcon
+        ></template>
+      </OInput>
+      <OVirtualList
+        v-if="allUsers.length"
+        ref="virtualList"
+        :list="allUsers"
+        style="max-height: inherit; margin-top: 4px"
+        :item-size="40"
+        :default-start-index="currentUserIndex"
+      >
+        <template #default="{ item }">
+          <OOption :key="item" :label="item" :value="item" />
+        </template>
+      </OVirtualList>
+    </OSelect>
+
+    <p style="margin-top: 18px">
+      <OLink color="primary" hover-underline style="--link-gap: 10px" :href="userInfo?.html_url ?? ''" target="_blank" rel="noopener noreferrer">
+        <template #icon
+          ><OIcon style="font-size: 24px"><IconGitCode /></OIcon
+        ></template>
+        gitcode主页
+      </OLink>
+    </p>
+
+    <ODivider style="--o-divider-gap: 16px" />
+
+    <template v-if="userRoleInfo.length">
+      <p class="user-role-title title">
+        <img :src="cosePng" />
+        <span class="user-role-text">社区角色</span>
+      </p>
+
+      <div class="user-role-content">
+        <div class="user-role-item" v-for="item in userRoleInfo" :key="item.sig_name" @click="toSigDetail(item.sig_name)">
+          {{ item.sig_name }}
+          <span v-for="role in item.role" :key="role" :data-role="role" class="user-role-tag">{{
+            userRoleLabelMap[role as keyof typeof userRoleLabelMap]
+          }}</span>
+        </div>
+      </div>
+
+      <ODivider style="--o-divider-gap: 16px" />
+    </template>
+
+    <p class="title">贡献</p>
+    <ElDatePicker
+      style="margin-top: 24px; --el-date-editor-daterange-width: 100%"
+      unlink-panels
+      v-model="timeRange"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      @change="getContributeData"
+      :disabled-date="disabledTimeRange"
+    />
+    <ElRow v-if="contributeData" style="margin-top: 24px">
+      <ElCol :span="12">
+        <p class="contribute-detail-title">合并请求PR</p>
+        <p class="contribute-detail">{{ contributeData.pr.toLocaleString('en-US') }}</p>
+        <p class="contribute-detail-title">评审Comment</p>
+        <p class="contribute-detail">{{ contributeData.comment.toLocaleString('en-US') }}</p>
+      </ElCol>
+      <ElCol :span="12">
+        <p class="contribute-detail-title">需求&问题 Issue</p>
+        <p class="contribute-detail">{{ contributeData.issue.toLocaleString('en-US') }}</p>
+        <p class="contribute-detail-title">SIG数量</p>
+        <p class="contribute-detail">{{ contributeData.sig.toLocaleString('en-US') }}</p>
+      </ElCol>
+    </ElRow>
+  </SectionCard>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  font-weight: bold;
+}
+.contribute-detail {
+  @include h4;
+  margin-top: 4px;
+  font-weight: bold;
+}
+.contribute-detail-title {
+  &:not(:first-child) {
+    margin-top: 24px;
+  }
+  @include text1;
+  color: rgb(78, 88, 110);
+}
+.user-role-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  .user-role-text {
+    margin-left: 8px;
+  }
+}
+.user-role-content {
+  padding-left: 32px;
+  .user-role-item {
+    color: var(--o-color-primary1);
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+    @include text1;
+    .user-role-tag {
+      @include tip2;
+      display: inline-block;
+      padding: 3px 8px;
+      border-radius: 4px;
+      color: #fff;
+      margin-left: 8px;
+
+      &[data-role='maintainer'] {
+        background-color: rgb(0, 98, 220);
+      }
+      &[data-role='committer'] {
+        background-color: rgb(240, 188, 0);
+      }
+      &[data-role='contributor'] {
+        background-color: rgb(0, 167, 179);
+      }
+    }
+  }
+}
+.user-desc {
+  @include text2;
+}
+
+.content-card {
+  padding: 24px;
+  height: 100%;
+}
+</style>
diff --git a/packages/openubmc/tsconfig.json b/packages/openubmc/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..774b21dcea5481ded08cc4624c45d95d443a8c39
--- /dev/null
+++ b/packages/openubmc/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "lib": ["esnext", "dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["unplugin-icons/types/vue", "element-plus/global","vite/client"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "env.d.ts"
+, "../shared/hooks/useVirtualList.ts"  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/openubmc/tsconfig.node.json b/packages/openubmc/tsconfig.node.json
new file mode 100644
index 0000000000000000000000000000000000000000..a0c7a49609d40b6cc0ca339c4ad74b694a24c7be
--- /dev/null
+++ b/packages/openubmc/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/openubmc/vite.config.js b/packages/openubmc/vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce4c3875693a368e1cbb21e5c6efa7dfd84ebf03
--- /dev/null
+++ b/packages/openubmc/vite.config.js
@@ -0,0 +1,78 @@
+/* 
+* 版权所有(c)华为技术有限公司2025-2025
+*/
+import nodePath 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';
+import vueJsxPlugin from '@vitejs/plugin-vue-jsx';
+
+export default defineConfig({
+  base: '/',
+  build: {
+    outDir: '../../dist/openubmc',
+  },
+  resolve: {
+    alias: {
+      '@/': `${nodePath.resolve(__dirname, './src')}/`,
+      'shared/': `${nodePath.resolve(__dirname, '../', 'shared')}/`,
+      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+    },
+  },
+  plugins: [
+    vue(),
+    vueJsxPlugin(),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        shared: FileSystemIconLoader('../shared/svg-icons'),
+        app: FileSystemIconLoader('./src/assets/svg-icons'),
+      },
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+        @use "@/assets/style/mixin/common.scss" as *;
+        @use "@/assets/style/mixin/font.scss" as *;
+        @use "shared/styles/mixin/screen.scss" as *;
+        `,
+      },
+    },
+  },
+  server: {
+    proxy: {
+      '/query': {
+        target: 'https://dsapi.osinfra.cn/',
+        changeOrigin: true,
+      },
+      '/api-magic': {
+        target: 'https://magicapi.osinfra.cn/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api-magic/, ''),
+      },
+      '/api-id': {
+        target: 'https://omapi.test.osinfra.cn/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api-id/, ''),
+      },
+      '/ip-api/': {
+        target: 'http://ip-api.com/json/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/ip-api/, ''),
+      },
+    },
+  },
+});
diff --git a/packages/shared/hooks/useScreen.ts b/packages/shared/hooks/useScreen.ts
index 25e579d49a6f92af6db52e67f175b31907bbb724..b68ba970717a8f8aa0d83997d8c9aad4e85d8001 100644
--- a/packages/shared/hooks/useScreen.ts
+++ b/packages/shared/hooks/useScreen.ts
@@ -1,3 +1,4 @@
+import { createSharedComposable } from '@vueuse/core';
 import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
 
 export enum Size {
@@ -39,7 +40,7 @@ const CompareHandler = {
   gt: (a: number, b: number) => a > b,
 };
 
-export const useScreen = () => {
+export const useScreen = createSharedComposable(() => {
   const screenSize = reactive({
     width: 1440,
     height: 0,
@@ -156,4 +157,4 @@ export const useScreen = () => {
     isPadToLaptop, // [601, 1440]
     isPadVToLaptop, // [841, 1440]
   };
-};
+});
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 523e0c27433f9f0c1cae61e9be8c8043874f709a..dd9242ec22403515c7e7ebe8f626dadd6f1d5129 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -2,8 +2,5 @@
   "name": "shared",
   "private": true,
   "version": "0.0.1",
-  "scripts": {},
-  "dependencies": {
-    "unplugin-icons": "^0.14.0"
-  }
+  "scripts": {}
 }
diff --git a/packages/shared/utils/login.ts b/packages/shared/utils/login.ts
index 9c50750f8313ddeb536b2938bcaf747ad260b6c0..b80e2157af64c7f11876d0d02007688e7731d1c9 100644
--- a/packages/shared/utils/login.ts
+++ b/packages/shared/utils/login.ts
@@ -77,7 +77,7 @@ export function getUserAuth() {
 }
 
 // 退出登录
-export function logout(community: string) {
+export function logout() {
   location.href = `${import.meta.env.VITE_LOGIN_ORIGIN}/logout?redirect_uri=${
     window?.location?.origin
   }`;
@@ -92,7 +92,7 @@ export function goToHome() {
     window.location.href = `/${lang}/mobile`;
   }
 }
-export function showGuard(community: string) {
+export function showGuard() {
   const origin = import.meta.env.VITE_LOGIN_ORIGIN;
   const lang = window.localStorage.getItem('lang');
   location.href = `${origin}/login?redirect_uri=${location.href}&lang=${lang}`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbe3133e63298b6a5d0eab84b592c4a4514cfaa4..7cb59c722978fe71a25d35a5b53391c384b3b9f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,16 +10,22 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.2.25)
+        version: 2.0.4(vue@3.5.20(typescript@4.6.2))
       '@opensig/open-analytics':
         specifier: ^0.0.9
         version: 0.0.9
+      '@opensig/opendesign':
+        specifier: ^1.0.1
+        version: 1.0.1(vue@3.5.20(typescript@4.6.2))
       '@types/d3':
         specifier: ^7.4.0
         version: 7.4.0
+      '@vueuse/core':
+        specifier: ^13.9.0
+        version: 13.9.0(vue@3.5.20(typescript@4.6.2))
       axios:
-        specifier: ^1.8.2
-        version: 1.8.2
+        specifier: ^1.12.0
+        version: 1.12.0
       d3:
         specifier: ^7.4.4
         version: 7.4.4
@@ -28,7 +34,7 @@ importers:
         version: 5.3.2
       element-plus:
         specifier: ^2.1.4
-        version: 2.1.4(@types/lodash-es@4.17.6)(vue@3.2.25)
+        version: 2.1.4(@types/lodash-es@4.17.6)(vue@3.5.20(typescript@4.6.2))
       html2canvas:
         specifier: ^1.4.1
         version: 1.4.1
@@ -43,19 +49,22 @@ importers:
         version: 8.0.1
       pinia:
         specifier: ^2.0.11
-        version: 2.0.12(typescript@4.6.2)(vue@3.2.25)
+        version: 2.0.12(typescript@4.6.2)(vue@3.5.20(typescript@4.6.2))
       swiper:
         specifier: ^8.0.7
         version: 8.0.7
+      unplugin-icons:
+        specifier: 22.2.0
+        version: 22.2.0(@vue/compiler-sfc@3.5.20)(vue-template-compiler@2.7.16)
       vue:
-        specifier: ^3.2.25
-        version: 3.2.25
+        specifier: ^3.5.20
+        version: 3.5.20(typescript@4.6.2)
       vue-i18n:
-        specifier: ^9.14.3
-        version: 9.14.3(vue@3.2.25)
+        specifier: ^9.14.5
+        version: 9.14.5(vue@3.5.20(typescript@4.6.2))
       vue-router:
-        specifier: ^4.0.13
-        version: 4.0.14(vue@3.2.25)
+        specifier: ^4.5.1
+        version: 4.5.1(vue@3.5.20(typescript@4.6.2))
     devDependencies:
       '@rushstack/eslint-patch':
         specifier: ^1.10.5
@@ -67,14 +76,14 @@ importers:
         specifier: ^4.17.6
         version: 4.17.6
       '@types/node':
-        specifier: ^17.0.21
-        version: 17.0.22
+        specifier: ^22.0.0
+        version: 22.0.0
       '@vitejs/plugin-vue':
         specifier: ^4.6.2
-        version: 4.6.2(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)
+        version: 4.6.2(vite@6.3.4(@types/node@22.0.0)(sass@1.49.9))(vue@3.5.20(typescript@4.6.2))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.1.1
-        version: 4.1.1(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)
+        version: 4.1.1(vite@6.3.4(@types/node@22.0.0)(sass@1.49.9))(vue@3.5.20(typescript@4.6.2))
       '@vue/eslint-config-prettier':
         specifier: ^10.2.0
         version: 10.2.0(eslint@8.56.0)(prettier@3.2.5)
@@ -95,13 +104,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.25))(rollup@4.40.0)
+        version: 0.11.5(@vueuse/core@13.9.0(vue@3.5.20(typescript@4.6.2)))(rollup@4.40.0)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.26.8)(rollup@4.40.0)(vue@3.2.25)
+        version: 0.26.0(@babel/parser@7.28.3)(rollup@4.40.0)(vue@3.5.20(typescript@4.6.2))
       vite:
         specifier: 6.3.4
-        version: 6.3.4(@types/node@17.0.22)(sass@1.49.9)
+        version: 6.3.4(@types/node@22.0.0)(sass@1.49.9)
       vue-tsc:
         specifier: ^1.8.25
         version: 1.8.27(typescript@4.6.2)
@@ -110,46 +119,36 @@ importers:
     dependencies:
       '@opensig/opendesign':
         specifier: 0.0.65
-        version: 0.0.65(vue@3.2.25)
+        version: 0.0.65(vue@3.5.20(typescript@4.6.2))
       shared:
         specifier: workspace:^
         version: link:../shared
-      unplugin-icons:
-        specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/gauss:
     dependencies:
       shared:
         specifier: workspace:^
         version: link:../shared
-      unplugin-icons:
-        specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/harmony:
     dependencies:
       shared:
         specifier: workspace:^
         version: link:../shared
-      unplugin-icons:
-        specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
   packages/mindspore:
     dependencies:
       shared:
         specifier: workspace:^
         version: link:../shared
-      unplugin-icons:
-        specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
 
-  packages/shared:
+  packages/openubmc:
     dependencies:
-      unplugin-icons:
-        specifier: ^0.14.0
-        version: 0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16)
+      shared:
+        specifier: workspace:^
+        version: link:../shared
+
+  packages/shared: {}
 
 packages:
 
@@ -157,18 +156,15 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/install-pkg@0.1.0':
-    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
-
-  '@antfu/utils@0.3.0':
-    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
-
-  '@antfu/utils@0.5.0':
-    resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==}
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
   '@antfu/utils@0.7.8':
     resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
 
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -235,14 +231,18 @@ packages:
     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==}
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.25.9':
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
@@ -251,13 +251,13 @@ packages:
     resolution: {integrity: sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.24.7':
-    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
+  '@babel/parser@7.26.8':
+    resolution: {integrity: sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.26.8':
-    resolution: {integrity: sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==}
+  '@babel/parser@7.28.3':
+    resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -291,14 +291,14 @@ packages:
     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'}
 
+  '@babel/types@7.28.2':
+    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
+    engines: {node: '>=6.9.0'}
+
   '@ctrl/tinycolor@3.4.0':
     resolution: {integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==}
     engines: {node: '>=10'}
@@ -494,28 +494,31 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@iconify/types@1.0.13':
-    resolution: {integrity: sha512-jrJJVPnRM1HsMDnuHRTzMfgiSG6Z1U/2IYI7s8spFu9c7n1q3jcXa+3/YQz4tJVNgAhzm1dbnMxfIAyLDpCaWg==}
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@1.0.28':
-    resolution: {integrity: sha512-hmSS50Q6qoOcq/TKhSV0VaI5+NFwQicJLk1MBLGDUQsGtOWdIagiYBz9ricpsw6dSu0cLW2a4ZAFg9V556yH8Q==}
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
-  '@intlify/core-base@9.14.3':
-    resolution: {integrity: sha512-nbJ7pKTlXFnaXPblyfiH6awAx1C0PWNNuqXAR74yRwgi5A/Re/8/5fErLY0pv4R8+EHj3ZaThMHdnuC/5OBa6g==}
+  '@intlify/core-base@9.14.5':
+    resolution: {integrity: sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@9.14.3':
-    resolution: {integrity: sha512-ANwC226BQdd+MpJ36rOYkChSESfPwu3Ss2Faw0RHTOknYLoHTX6V6e/JjIKVDMbzs0/H/df/rO6yU0SPiWHqNg==}
+  '@intlify/message-compiler@9.14.5':
+    resolution: {integrity: sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@9.14.3':
-    resolution: {integrity: sha512-hJXz9LA5VG7qNE00t50bdzDv8Z4q9fpcL81wj4y4duKavrv0KM8YNLTwXNEFINHjTsfrG9TXvPuEjVaAvZ7yWg==}
+  '@intlify/shared@9.14.5':
+    resolution: {integrity: sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==}
     engines: {node: '>= 16'}
 
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -553,6 +556,11 @@ packages:
     peerDependencies:
       vue: ^3.1.0
 
+  '@opensig/opendesign@1.0.1':
+    resolution: {integrity: sha512-aF5sCbNoqYfM89VS+u4RbB75M067EbvYJBbCjkigttVsXG2a/tDQKGgSoxCT4UnQq6SffOWY8o1Ks9JcXqel1Q==}
+    peerDependencies:
+      vue: ^3.3.0
+
   '@pkgr/core@0.1.1':
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -800,14 +808,14 @@ packages:
   '@types/lodash@4.14.180':
     resolution: {integrity: sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==}
 
-  '@types/node@17.0.22':
-    resolution: {integrity: sha512-8FwbVoG4fy+ykY86XCAclKZDORttqE5/s7dyWZKLXTdv3vRy5HozBEinG5IqhvPXXzIZEcTVbuHlQEI6iuwcmw==}
+  '@types/node@22.0.0':
+    resolution: {integrity: sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==}
 
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
-  '@types/throttle-debounce@2.1.0':
-    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
   '@typescript-eslint/eslint-plugin@6.21.0':
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
@@ -909,17 +917,14 @@ packages:
     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-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
-  '@vue/compiler-dom@3.2.25':
-    resolution: {integrity: sha512-4JrburkRg4VWbc8AKpzKFWbNY4MDXshqjFl53+vINq7zaw3Z7aSqnLv0EkKh8B8ynf/MYsAdygGutyVbEWYxOw==}
+  '@vue/compiler-core@3.5.20':
+    resolution: {integrity: sha512-8TWXUyiqFd3GmP4JTX9hbiTFRwYHgVL/vr3cqhr4YQ258+9FADwvj7golk2sWNGHR67QgmCZ8gz80nQcMokhwg==}
 
   '@vue/compiler-dom@3.4.27':
     resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
@@ -927,18 +932,21 @@ packages:
   '@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-dom@3.5.20':
+    resolution: {integrity: sha512-whB44M59XKjqUEYOMPYU0ijUV0G+4fdrHVKDe32abNdX/kJe1NUEMqsi4cwzXa9kyM9w5S8WqFsrfo1ogtBZGQ==}
 
   '@vue/compiler-sfc@3.5.13':
     resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
-  '@vue/compiler-ssr@3.2.25':
-    resolution: {integrity: sha512-+BAl8U5D3JkGR6086PFx1BQQ5km3z9fT88hy/7lzf8i3vEDdPQodadnX2t6tndFjIux05MEKg43DeocOojT0mw==}
+  '@vue/compiler-sfc@3.5.20':
+    resolution: {integrity: sha512-SFcxapQc0/feWiSBfkGsa1v4DOrnMAQSYuvDMpEaxbpH5dKbnEM5KobSNSgU+1MbHCl+9ftm7oQWxvwDB6iBfw==}
 
   '@vue/compiler-ssr@3.5.13':
     resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
+  '@vue/compiler-ssr@3.5.20':
+    resolution: {integrity: sha512-RSl5XAMc5YFUXpDQi+UQDdVjH9FnEpLDHIALg5J0ITHxkEzJ8uQLlo7CIbjPYqmZtt6w0TsIPbo1izYXwDG7JA==}
+
   '@vue/devtools-api@6.1.3':
     resolution: {integrity: sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==}
 
@@ -970,25 +978,19 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity-transform@3.2.25':
-    resolution: {integrity: sha512-fOiW67PUalicMfMr4Sc9l8mUtkN7ZD+G1/zJV8blzQ8GEZSeRcJm11gqve6Ps623ju5YORu7V/Q1gZoOJ9WO4g==}
-
-  '@vue/reactivity@3.2.25':
-    resolution: {integrity: sha512-Dxc/u/dxoneIDqyfmuwPVBR0G3OQJqe3Dtz4z3NGt+CGj4UuOZQfN5raJPmp6xGYgrtC6PAWoCgHhyrgr1qCtg==}
+  '@vue/reactivity@3.5.20':
+    resolution: {integrity: sha512-hS8l8x4cl1fmZpSQX/NXlqWKARqEsNmfkwOIYqtR2F616NGfsLUm0G6FQBK6uDKUCVyi1YOL8Xmt/RkZcd/jYQ==}
 
-  '@vue/runtime-core@3.2.25':
-    resolution: {integrity: sha512-2+fo5+lofT4xr8W2rtjyz+AM+UB1U/UNLH6ISFdHWNWuveSWxF+vkCQaATmhp6O3XA7QJAbHoRqIZor20EWSfQ==}
+  '@vue/runtime-core@3.5.20':
+    resolution: {integrity: sha512-vyQRiH5uSZlOa+4I/t4Qw/SsD/gbth0SW2J7oMeVlMFMAmsG1rwDD6ok0VMmjXY3eI0iHNSSOBilEDW98PLRKw==}
 
-  '@vue/runtime-dom@3.2.25':
-    resolution: {integrity: sha512-3gGeyHnygn4yG6bssRKhQIxnE8vgB8FtYUUwoYoA/Pm0vZ+bGPoZax4TbtZD9eW9rvs8CY8boNp4t/sJaPJrRQ==}
+  '@vue/runtime-dom@3.5.20':
+    resolution: {integrity: sha512-KBHzPld/Djw3im0CQ7tGCpgRedryIn4CcAl047EhFTCCPT2xFf4e8j6WeKLgEEoqPSl9TYqShc3Q6tpWpz/Xgw==}
 
-  '@vue/server-renderer@3.2.25':
-    resolution: {integrity: sha512-qFRmcyeyyhWbnTPn6cbCZ4bjeuPLSkUpFa98p4LEJtFBFbxjGnrHXHOjYxCY3Lznmxe0kMM3qG4t3GnjcXP12w==}
+  '@vue/server-renderer@3.5.20':
+    resolution: {integrity: sha512-HthAS0lZJDH21HFJBVNTtx+ULcIbJQRpjSVomVjfyPkFSpCwvsPTA+jIzOaUm3Hrqx36ozBHePztQFg6pj5aKg==}
     peerDependencies:
-      vue: 3.2.25
-
-  '@vue/shared@3.2.25':
-    resolution: {integrity: sha512-DkHJFV2gw9WBRmUCa21eyG0WvlF0l1QFOgTkWj29O4mt2Tv3BSE5PQOKhUruZIym4bBYCqx9ZGtoD1WohDprow==}
+      vue: 3.5.20
 
   '@vue/shared@3.4.27':
     resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
@@ -996,6 +998,14 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vue/shared@3.5.20':
+    resolution: {integrity: sha512-SoRGP596KU/ig6TfgkCMbXkr4YJ91n/QSdMuqeP5r3hVIYA3CPHUBCc7Skak0EAKV+5lL4KyIh61VA/pK1CIAA==}
+
+  '@vueuse/core@13.9.0':
+    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/core@8.1.2':
     resolution: {integrity: sha512-prI2GzigBUtJNTcwRjJPzUPLFoRZM1RZFR464DFdwgU8TxRFf7dRvuvWFDNbCATzLExHFnGI3zTp9GkXTTZxgQ==}
     peerDependencies:
@@ -1007,9 +1017,17 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/metadata@13.9.0':
+    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
+
   '@vueuse/metadata@8.1.2':
     resolution: {integrity: sha512-LrPtdiYMleygnGmz8mEmYI9h4Eyo+/igxZWNrwuPnqvL9pIO+8eUpBgPLH5GowKv3Nu0LPZSXSIuaWVJBSU1Cg==}
 
+  '@vueuse/shared@13.9.0':
+    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/shared@8.1.2':
     resolution: {integrity: sha512-4Hb9iPUhAz7ghO4hgvB2GV2FOy12qQGdhmQ+9HC6QN/J66DELhmxAvkZAtK5FBqZOSwzKszPqNqoyhRKQrrWGQ==}
     peerDependencies:
@@ -1036,6 +1054,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -1064,8 +1087,8 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  axios@1.8.2:
-    resolution: {integrity: sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==}
+  axios@1.12.0:
+    resolution: {integrity: sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1137,6 +1160,12 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1147,8 +1176,8 @@ packages:
   css-line-break@2.1.0:
     resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
 
-  csstype@2.6.21:
-    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   d3-array@3.1.6:
     resolution: {integrity: sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==}
@@ -1296,6 +1325,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1461,9 +1499,8 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
+  exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -1520,8 +1557,8 @@ packages:
       debug:
         optional: true
 
-  form-data@4.0.2:
-    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+  form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
   fs.realpath@1.0.0:
@@ -1547,10 +1584,6 @@ packages:
     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'}
-
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1571,6 +1604,10 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1610,10 +1647,6 @@ packages:
     resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
     engines: {node: '>=8.0.0'}
 
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -1670,10 +1703,6 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1707,21 +1736,21 @@ packages:
   jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
-  kolorist@1.5.1:
-    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  local-pkg@0.4.1:
-    resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
-    engines: {node: '>=14'}
-
   local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
 
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1745,9 +1774,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  magic-string@0.25.9:
-    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
-
   magic-string@0.26.7:
     resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
     engines: {node: '>=12'}
@@ -1770,9 +1796,6 @@ packages:
   memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1789,10 +1812,6 @@ packages:
     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'}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1807,12 +1826,23 @@ packages:
   mlly@1.4.2:
     resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
 
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   muggle-string@0.3.1:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
 
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    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}
@@ -1834,17 +1864,9 @@ packages:
   normalize.css@8.0.1:
     resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
 
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1857,6 +1879,9 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1886,6 +1911,9 @@ packages:
   pathe@1.1.1:
     resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1897,6 +1925,10 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
   pinia@2.0.12:
     resolution: {integrity: sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==}
     peerDependencies:
@@ -1912,10 +1944,20 @@ packages:
   pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -1936,6 +1978,9 @@ packages:
     resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
     engines: {node: '>=6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2002,9 +2047,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -2017,10 +2059,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-
   sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
@@ -2032,10 +2070,6 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -2068,14 +2102,13 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
   tinyglobby@0.2.13:
     resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
     engines: {node: '>=12.0.0'}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2112,6 +2145,12 @@ packages:
   ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
 
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  undici-types@6.11.1:
+    resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==}
+
   unimport@1.3.0:
     resolution: {integrity: sha512-fOkrdxglsHd428yegH0wPH/6IfaSdDeMXtdRGn6en/ccyzc2aaoxiUTMrJyc6Bu+xoa18RJRPMfLUHEzjz8atw==}
 
@@ -2124,18 +2163,24 @@ packages:
       '@vueuse/core':
         optional: true
 
-  unplugin-icons@0.14.0:
-    resolution: {integrity: sha512-VznBG8Jl9D4jtsAIY8hycyQZEDB8KVjnk19MzMlifLLs4QoIUPx8TILDoy6U46yDeYViqZu4hvb5fYI5OarekQ==}
+  unplugin-icons@22.2.0:
+    resolution: {integrity: sha512-OdrXCiXexC1rFd0QpliAgcd4cMEEEQtoCf2WIrRIGu4iW6auBPpQKMCBeWxoe55phYdRyZLUWNOtzyTX+HOFSA==}
     peerDependencies:
-      '@svgr/core': '>=5.5.0'
-      '@vue/compiler-sfc': ^3.0.2
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
       vue-template-compiler: ^2.6.12
       vue-template-es2015-compiler: ^1.9.0
     peerDependenciesMeta:
       '@svgr/core':
         optional: true
+      '@svgx/core':
+        optional: true
       '@vue/compiler-sfc':
         optional: true
+      svelte:
+        optional: true
       vue-template-compiler:
         optional: true
       vue-template-es2015-compiler:
@@ -2154,27 +2199,14 @@ packages:
       '@nuxt/kit':
         optional: true
 
-  unplugin@0.5.2:
-    resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-
   unplugin@1.10.1:
     resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.3.10:
+    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
+    engines: {node: '>=18.12.0'}
+
   update-browserslist-db@1.1.2:
     resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
     hasBin: true
@@ -2254,14 +2286,14 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@9.14.3:
-    resolution: {integrity: sha512-C+E0KE8ihKjdYCQx8oUkXX+8tBItrYNMnGJuzEPevBARQFUN2tKez6ZVOvBrWH0+KT5wEk3vOWjNk7ygb2u9ig==}
+  vue-i18n@9.14.5:
+    resolution: {integrity: sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
 
-  vue-router@4.0.14:
-    resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
+  vue-router@4.5.1:
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -2274,8 +2306,13 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  vue@3.2.25:
-    resolution: {integrity: sha512-jU3t7fyQDHoCWCqhmRrnSmYZvHC35tOJTP704di7HGfq5EcFA1cU/1ZPjUV1eCxJev65Khjyfni+vk9oa+eTtw==}
+  vue@3.5.20:
+    resolution: {integrity: sha512-2sBz0x/wis5TkF1XZ2vH25zWq3G1bFEPOfkBcx2ikowmphoQsPH6X0V3mmPCXA2K1N/XGTnifVyDQP4GfDDeQw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
   web-vitals@4.2.4:
     resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
@@ -2284,9 +2321,6 @@ packages:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
 
-  webpack-virtual-modules@0.4.3:
-    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
-
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -2319,19 +2353,15 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/install-pkg@0.1.0':
-    dependencies:
-      execa: 5.1.1
-      find-up: 5.0.0
-
-  '@antfu/utils@0.3.0':
+  '@antfu/install-pkg@1.1.0':
     dependencies:
-      '@types/throttle-debounce': 2.1.0
-
-  '@antfu/utils@0.5.0': {}
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
 
   '@antfu/utils@0.7.8': {}
 
+  '@antfu/utils@8.1.1': {}
+
   '@babel/code-frame@7.26.2':
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
@@ -2441,10 +2471,12 @@ snapshots:
 
   '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-validator-identifier@7.16.7': {}
+  '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.25.9': {}
 
+  '@babel/helper-validator-identifier@7.27.1': {}
+
   '@babel/helper-validator-option@7.25.9': {}
 
   '@babel/helpers@7.26.7':
@@ -2452,14 +2484,14 @@ snapshots:
       '@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/parser@7.28.3':
+    dependencies:
+      '@babel/types': 7.28.2
+
   '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.8)':
     dependencies:
       '@babel/core': 7.26.8
@@ -2496,30 +2528,30 @@ snapshots:
       '@babel/parser': 7.26.8
       '@babel/template': 7.26.8
       '@babel/types': 7.26.8
-      debug: 4.3.4
+      debug: 4.4.1
       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
 
+  '@babel/types@7.28.2':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
   '@ctrl/tinycolor@3.4.0': {}
 
-  '@element-plus/icons-vue@1.1.4(vue@3.2.25)':
+  '@element-plus/icons-vue@1.1.4(vue@3.5.20(typescript@4.6.2))':
     dependencies:
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
 
-  '@element-plus/icons-vue@2.0.4(vue@3.2.25)':
+  '@element-plus/icons-vue@2.0.4(vue@3.5.20(typescript@4.6.2))':
     dependencies:
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
 
   '@esbuild/aix-ppc64@0.25.2':
     optional: true
@@ -2631,30 +2663,32 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@iconify/types@1.0.13': {}
+  '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@1.0.28':
+  '@iconify/utils@2.3.0':
     dependencies:
-      '@antfu/install-pkg': 0.1.0
-      '@antfu/utils': 0.3.0
-      '@iconify/types': 1.0.13
-      debug: 4.3.4
-      kolorist: 1.5.1
-      local-pkg: 0.4.1
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.1
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
     transitivePeerDependencies:
       - supports-color
 
-  '@intlify/core-base@9.14.3':
+  '@intlify/core-base@9.14.5':
     dependencies:
-      '@intlify/message-compiler': 9.14.3
-      '@intlify/shared': 9.14.3
+      '@intlify/message-compiler': 9.14.5
+      '@intlify/shared': 9.14.5
 
-  '@intlify/message-compiler@9.14.3':
+  '@intlify/message-compiler@9.14.5':
     dependencies:
-      '@intlify/shared': 9.14.3
+      '@intlify/shared': 9.14.5
       source-map-js: 1.2.1
 
-  '@intlify/shared@9.14.3': {}
+  '@intlify/shared@9.14.5': {}
 
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
@@ -2662,6 +2696,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
@@ -2693,10 +2732,14 @@ snapshots:
       uuid: 10.0.0
       web-vitals: 4.2.4
 
-  '@opensig/opendesign@0.0.65(vue@3.2.25)':
+  '@opensig/opendesign@0.0.65(vue@3.5.20(typescript@4.6.2))':
     dependencies:
       date-fns: 2.30.0
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
+
+  '@opensig/opendesign@1.0.1(vue@3.5.20(typescript@4.6.2))':
+    dependencies:
+      vue: 3.5.20(typescript@4.6.2)
 
   '@pkgr/core@0.1.1': {}
 
@@ -2907,11 +2950,13 @@ snapshots:
 
   '@types/lodash@4.14.180': {}
 
-  '@types/node@17.0.22': {}
+  '@types/node@22.0.0':
+    dependencies:
+      undici-types: 6.11.1
 
   '@types/semver@7.5.8': {}
 
-  '@types/throttle-debounce@2.1.0': {}
+  '@types/web-bluetooth@0.0.21': {}
 
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@4.6.2))(eslint@8.56.0)(typescript@4.6.2)':
     dependencies:
@@ -2955,7 +3000,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@4.6.2)
       '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@4.6.2)
-      debug: 4.3.4
+      debug: 4.4.1
       eslint: 8.56.0
       ts-api-utils: 1.4.3(typescript@4.6.2)
     optionalDependencies:
@@ -2969,7 +3014,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.4
+      debug: 4.4.1
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -3001,20 +3046,20 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.3.4(@types/node@22.0.0)(sass@1.49.9))(vue@3.5.20(typescript@4.6.2))':
     dependencies:
       '@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: 6.3.4(@types/node@17.0.22)(sass@1.49.9)
-      vue: 3.2.25
+      vite: 6.3.4(@types/node@22.0.0)(sass@1.49.9)
+      vue: 3.5.20(typescript@4.6.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.6.2(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue@3.2.25)':
+  '@vitejs/plugin-vue@4.6.2(vite@6.3.4(@types/node@22.0.0)(sass@1.49.9))(vue@3.5.20(typescript@4.6.2))':
     dependencies:
-      vite: 6.3.4(@types/node@17.0.22)(sass@1.49.9)
-      vue: 3.2.25
+      vite: 6.3.4(@types/node@22.0.0)(sass@1.49.9)
+      vue: 3.5.20(typescript@4.6.2)
 
   '@volar/language-core@1.11.1':
     dependencies:
@@ -3059,16 +3104,9 @@ snapshots:
     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
-
   '@vue/compiler-core@3.4.27':
     dependencies:
-      '@babel/parser': 7.24.7
+      '@babel/parser': 7.26.8
       '@vue/shared': 3.4.27
       entities: 4.5.0
       estree-walker: 2.0.2
@@ -3082,10 +3120,13 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.2.25':
+  '@vue/compiler-core@3.5.20':
     dependencies:
-      '@vue/compiler-core': 3.2.25
-      '@vue/shared': 3.2.25
+      '@babel/parser': 7.28.3
+      '@vue/shared': 3.5.20
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
 
   '@vue/compiler-dom@3.4.27':
     dependencies:
@@ -3097,18 +3138,10 @@ snapshots:
       '@vue/compiler-core': 3.5.13
       '@vue/shared': 3.5.13
 
-  '@vue/compiler-sfc@3.2.25':
+  '@vue/compiler-dom@3.5.20':
     dependencies:
-      '@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.5.3
-      source-map: 0.6.1
+      '@vue/compiler-core': 3.5.20
+      '@vue/shared': 3.5.20
 
   '@vue/compiler-sfc@3.5.13':
     dependencies:
@@ -3119,19 +3152,31 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.17
-      postcss: 8.5.3
+      postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.2.25':
+  '@vue/compiler-sfc@3.5.20':
     dependencies:
-      '@vue/compiler-dom': 3.2.25
-      '@vue/shared': 3.2.25
+      '@babel/parser': 7.28.3
+      '@vue/compiler-core': 3.5.20
+      '@vue/compiler-dom': 3.5.20
+      '@vue/compiler-ssr': 3.5.20
+      '@vue/shared': 3.5.20
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.6
+      source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
     dependencies:
       '@vue/compiler-dom': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/compiler-ssr@3.5.20':
+    dependencies:
+      '@vue/compiler-dom': 3.5.20
+      '@vue/shared': 3.5.20
+
   '@vue/devtools-api@6.1.3': {}
 
   '@vue/devtools-api@6.6.4': {}
@@ -3171,56 +3216,62 @@ snapshots:
     optionalDependencies:
       typescript: 4.6.2
 
-  '@vue/reactivity-transform@3.2.25':
+  '@vue/reactivity@3.5.20':
     dependencies:
-      '@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.25':
-    dependencies:
-      '@vue/shared': 3.2.25
+      '@vue/shared': 3.5.20
 
-  '@vue/runtime-core@3.2.25':
+  '@vue/runtime-core@3.5.20':
     dependencies:
-      '@vue/reactivity': 3.2.25
-      '@vue/shared': 3.2.25
+      '@vue/reactivity': 3.5.20
+      '@vue/shared': 3.5.20
 
-  '@vue/runtime-dom@3.2.25':
+  '@vue/runtime-dom@3.5.20':
     dependencies:
-      '@vue/runtime-core': 3.2.25
-      '@vue/shared': 3.2.25
-      csstype: 2.6.21
+      '@vue/reactivity': 3.5.20
+      '@vue/runtime-core': 3.5.20
+      '@vue/shared': 3.5.20
+      csstype: 3.1.3
 
-  '@vue/server-renderer@3.2.25(vue@3.2.25)':
+  '@vue/server-renderer@3.5.20(vue@3.5.20(typescript@4.6.2))':
     dependencies:
-      '@vue/compiler-ssr': 3.2.25
-      '@vue/shared': 3.2.25
-      vue: 3.2.25
-
-  '@vue/shared@3.2.25': {}
+      '@vue/compiler-ssr': 3.5.20
+      '@vue/shared': 3.5.20
+      vue: 3.5.20(typescript@4.6.2)
 
   '@vue/shared@3.4.27': {}
 
   '@vue/shared@3.5.13': {}
 
-  '@vueuse/core@8.1.2(vue@3.2.25)':
+  '@vue/shared@3.5.20': {}
+
+  '@vueuse/core@13.9.0(vue@3.5.20(typescript@4.6.2))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.20(typescript@4.6.2))
+      vue: 3.5.20(typescript@4.6.2)
+
+  '@vueuse/core@8.1.2(vue@3.5.20(typescript@4.6.2))':
     dependencies:
       '@vueuse/metadata': 8.1.2
-      '@vueuse/shared': 8.1.2(vue@3.2.25)
-      vue-demi: 0.12.4(vue@3.2.25)
+      '@vueuse/shared': 8.1.2(vue@3.5.20(typescript@4.6.2))
+      vue-demi: 0.12.4(vue@3.5.20(typescript@4.6.2))
     optionalDependencies:
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
+
+  '@vueuse/metadata@13.9.0': {}
 
   '@vueuse/metadata@8.1.2': {}
 
-  '@vueuse/shared@8.1.2(vue@3.2.25)':
+  '@vueuse/shared@13.9.0(vue@3.5.20(typescript@4.6.2))':
+    dependencies:
+      vue: 3.5.20(typescript@4.6.2)
+
+  '@vueuse/shared@8.1.2(vue@3.5.20(typescript@4.6.2))':
     dependencies:
-      vue-demi: 0.12.4(vue@3.2.25)
+      vue-demi: 0.12.4(vue@3.5.20(typescript@4.6.2))
     optionalDependencies:
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
 
   acorn-jsx@5.3.2(acorn@8.11.3):
     dependencies:
@@ -3230,6 +3281,8 @@ snapshots:
 
   acorn@8.11.3: {}
 
+  acorn@8.15.0: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -3256,10 +3309,10 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.8.2:
+  axios@1.12.0:
     dependencies:
       follow-redirects: 1.15.6
-      form-data: 4.0.2
+      form-data: 4.0.4
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
@@ -3344,6 +3397,10 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
   convert-source-map@2.0.0: {}
 
   cross-spawn@7.0.3:
@@ -3356,7 +3413,7 @@ snapshots:
     dependencies:
       utrie: 1.0.2
 
-  csstype@2.6.21: {}
+  csstype@3.1.3: {}
 
   d3-array@3.1.6:
     dependencies:
@@ -3522,6 +3579,10 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
   deep-is@0.1.4: {}
 
   delaunator@5.0.0:
@@ -3555,12 +3616,12 @@ snapshots:
 
   electron-to-chromium@1.5.98: {}
 
-  element-plus@2.1.4(@types/lodash-es@4.17.6)(vue@3.2.25):
+  element-plus@2.1.4(@types/lodash-es@4.17.6)(vue@3.5.20(typescript@4.6.2)):
     dependencies:
       '@ctrl/tinycolor': 3.4.0
-      '@element-plus/icons-vue': 1.1.4(vue@3.2.25)
+      '@element-plus/icons-vue': 1.1.4(vue@3.5.20(typescript@4.6.2))
       '@popperjs/core': 2.11.4
-      '@vueuse/core': 8.1.2(vue@3.2.25)
+      '@vueuse/core': 8.1.2(vue@3.5.20(typescript@4.6.2))
       async-validator: 4.0.7
       dayjs: 1.11.0
       escape-html: 1.0.3
@@ -3569,7 +3630,7 @@ 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.25
+      vue: 3.5.20(typescript@4.6.2)
     transitivePeerDependencies:
       - '@types/lodash-es'
       - '@vue/composition-api'
@@ -3744,17 +3805,7 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
+  exsolve@1.0.7: {}
 
   fast-deep-equal@3.1.3: {}
 
@@ -3802,11 +3853,12 @@ snapshots:
 
   follow-redirects@1.15.6: {}
 
-  form-data@4.0.2:
+  form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
       mime-types: 2.1.35
 
   fs.realpath@1.0.0: {}
@@ -3836,8 +3888,6 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-stream@6.0.1: {}
-
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -3861,6 +3911,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@15.15.0: {}
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -3895,8 +3947,6 @@ snapshots:
       css-line-break: 2.1.0
       text-segmentation: 1.0.3
 
-  human-signals@2.1.0: {}
-
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -3941,8 +3991,6 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
-  is-stream@2.0.1: {}
-
   isexe@2.0.0: {}
 
   js-cookie@3.0.5: {}
@@ -3963,17 +4011,21 @@ snapshots:
 
   jsonc-parser@3.2.0: {}
 
-  kolorist@1.5.1: {}
+  kolorist@1.8.0: {}
 
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  local-pkg@0.4.1: {}
-
   local-pkg@0.4.3: {}
 
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -3994,10 +4046,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  magic-string@0.25.9:
-    dependencies:
-      sourcemap-codec: 1.4.8
-
   magic-string@0.26.7:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -4018,8 +4066,6 @@ snapshots:
 
   memoize-one@6.0.0: {}
 
-  merge-stream@2.0.0: {}
-
   merge2@1.4.1: {}
 
   micromatch@4.0.4:
@@ -4033,8 +4079,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-fn@2.1.0: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -4054,10 +4098,21 @@ snapshots:
       pkg-types: 1.0.3
       ufo: 1.3.2
 
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
   ms@2.1.2: {}
 
+  ms@2.1.3: {}
+
   muggle-string@0.3.1: {}
 
+  nanoid@3.3.11: {}
+
   nanoid@3.3.8: {}
 
   natural-compare@1.4.0: {}
@@ -4070,18 +4125,10 @@ snapshots:
 
   normalize.css@8.0.1: {}
 
-  npm-run-path@4.0.1:
-    dependencies:
-      path-key: 3.1.1
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
 
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -4099,6 +4146,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  package-manager-detector@1.3.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -4117,17 +4166,21 @@ snapshots:
 
   pathe@1.1.1: {}
 
+  pathe@2.0.3: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
   picomatch@4.0.2: {}
 
-  pinia@2.0.12(typescript@4.6.2)(vue@3.2.25):
+  picomatch@4.0.3: {}
+
+  pinia@2.0.12(typescript@4.6.2)(vue@3.5.20(typescript@4.6.2)):
     dependencies:
       '@vue/devtools-api': 6.1.3
-      vue: 3.2.25
-      vue-demi: 0.12.4(vue@3.2.25)
+      vue: 3.5.20(typescript@4.6.2)
+      vue-demi: 0.12.4(vue@3.5.20(typescript@4.6.2))
     optionalDependencies:
       typescript: 4.6.2
 
@@ -4137,12 +4190,30 @@ snapshots:
       mlly: 1.4.2
       pathe: 1.1.1
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.8
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -4155,6 +4226,8 @@ snapshots:
 
   punycode@2.1.1: {}
 
+  quansync@0.2.11: {}
+
   queue-microtask@1.2.3: {}
 
   readdirp@3.6.0:
@@ -4229,16 +4302,12 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  signal-exit@3.0.7: {}
-
   slash@3.0.0: {}
 
   source-map-js@1.0.2: {}
 
   source-map-js@1.2.1: {}
 
-  source-map@0.6.1: {}
-
   sourcemap-codec@1.4.8: {}
 
   ssr-window@4.0.2: {}
@@ -4247,8 +4316,6 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-final-newline@2.0.0: {}
-
   strip-json-comments@3.1.1: {}
 
   strip-literal@1.3.0:
@@ -4279,13 +4346,13 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  tinyexec@1.0.1: {}
+
   tinyglobby@0.2.13:
     dependencies:
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
 
-  to-fast-properties@2.0.0: {}
-
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -4310,6 +4377,10 @@ snapshots:
 
   ufo@1.3.2: {}
 
+  ufo@1.6.1: {}
+
+  undici-types@6.11.1: {}
+
   unimport@1.3.0(rollup@4.40.0):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.40.0)
@@ -4326,7 +4397,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-auto-import@0.11.5(@vueuse/core@8.1.2(vue@3.2.25))(rollup@4.40.0):
+  unplugin-auto-import@0.11.5(@vueuse/core@13.9.0(vue@3.5.20(typescript@4.6.2)))(rollup@4.40.0):
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@4.40.0)
@@ -4335,30 +4406,24 @@ snapshots:
       unimport: 1.3.0(rollup@4.40.0)
       unplugin: 1.10.1
     optionalDependencies:
-      '@vueuse/core': 8.1.2(vue@3.2.25)
+      '@vueuse/core': 13.9.0(vue@3.5.20(typescript@4.6.2))
     transitivePeerDependencies:
       - rollup
 
-  unplugin-icons@0.14.0(@vue/compiler-sfc@3.5.13)(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))(vue-template-compiler@2.7.16):
+  unplugin-icons@22.2.0(@vue/compiler-sfc@3.5.20)(vue-template-compiler@2.7.16):
     dependencies:
-      '@antfu/install-pkg': 0.1.0
-      '@antfu/utils': 0.5.0
-      '@iconify/utils': 1.0.28
-      debug: 4.3.4
-      kolorist: 1.5.1
-      local-pkg: 0.4.1
-      unplugin: 0.5.2(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9))
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/utils': 2.3.0
+      debug: 4.4.1
+      local-pkg: 1.1.2
+      unplugin: 2.3.10
     optionalDependencies:
-      '@vue/compiler-sfc': 3.5.13
+      '@vue/compiler-sfc': 3.5.20
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
-      - esbuild
-      - rollup
       - supports-color
-      - vite
-      - webpack
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.26.8)(rollup@4.40.0)(vue@3.2.25):
+  unplugin-vue-components@0.26.0(@babel/parser@7.28.3)(rollup@4.40.0)(vue@3.5.20(typescript@4.6.2)):
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@4.40.0)
@@ -4370,23 +4435,13 @@ snapshots:
       minimatch: 9.0.4
       resolve: 1.22.8
       unplugin: 1.10.1
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
     optionalDependencies:
-      '@babel/parser': 7.26.8
+      '@babel/parser': 7.28.3
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  unplugin@0.5.2(esbuild@0.25.2)(rollup@4.40.0)(vite@6.3.4(@types/node@17.0.22)(sass@1.49.9)):
-    dependencies:
-      chokidar: 3.5.3
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.3
-    optionalDependencies:
-      esbuild: 0.25.2
-      rollup: 4.40.0
-      vite: 6.3.4(@types/node@17.0.22)(sass@1.49.9)
-
   unplugin@1.10.1:
     dependencies:
       acorn: 8.11.3
@@ -4394,6 +4449,13 @@ snapshots:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.3.10:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
   update-browserslist-db@1.1.2(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
@@ -4410,7 +4472,7 @@ snapshots:
 
   uuid@10.0.0: {}
 
-  vite@6.3.4(@types/node@17.0.22)(sass@1.49.9):
+  vite@6.3.4(@types/node@22.0.0)(sass@1.49.9):
     dependencies:
       esbuild: 0.25.2
       fdir: 6.4.4(picomatch@4.0.2)
@@ -4419,17 +4481,17 @@ snapshots:
       rollup: 4.40.0
       tinyglobby: 0.2.13
     optionalDependencies:
-      '@types/node': 17.0.22
+      '@types/node': 22.0.0
       fsevents: 2.3.3
       sass: 1.49.9
 
-  vue-demi@0.12.4(vue@3.2.25):
+  vue-demi@0.12.4(vue@3.5.20(typescript@4.6.2)):
     dependencies:
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
 
   vue-eslint-parser@8.3.0(eslint@8.56.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.4.1
       eslint: 8.56.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -4453,17 +4515,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.3(vue@3.2.25):
+  vue-i18n@9.14.5(vue@3.5.20(typescript@4.6.2)):
     dependencies:
-      '@intlify/core-base': 9.14.3
-      '@intlify/shared': 9.14.3
+      '@intlify/core-base': 9.14.5
+      '@intlify/shared': 9.14.5
       '@vue/devtools-api': 6.6.4
-      vue: 3.2.25
+      vue: 3.5.20(typescript@4.6.2)
 
-  vue-router@4.0.14(vue@3.2.25):
+  vue-router@4.5.1(vue@3.5.20(typescript@4.6.2)):
     dependencies:
-      '@vue/devtools-api': 6.1.3
-      vue: 3.2.25
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.20(typescript@4.6.2)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -4477,20 +4539,20 @@ snapshots:
       semver: 7.6.2
       typescript: 4.6.2
 
-  vue@3.2.25:
+  vue@3.5.20(typescript@4.6.2):
     dependencies:
-      '@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
+      '@vue/compiler-dom': 3.5.20
+      '@vue/compiler-sfc': 3.5.20
+      '@vue/runtime-dom': 3.5.20
+      '@vue/server-renderer': 3.5.20(vue@3.5.20(typescript@4.6.2))
+      '@vue/shared': 3.5.20
+    optionalDependencies:
+      typescript: 4.6.2
 
   web-vitals@4.2.4: {}
 
   webpack-sources@3.2.3: {}
 
-  webpack-virtual-modules@0.4.3: {}
-
   webpack-virtual-modules@0.6.2: {}
 
   which@2.0.2: