diff --git a/web b/web
deleted file mode 160000
index d0a99dc..0000000
--- a/web
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit d0a99dcf123cefe5aed5b263ccde7acd4949da2a
diff --git a/web/.editorconfig b/web/.editorconfig
new file mode 100644
index 0000000..68cc827
--- /dev/null
+++ b/web/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = unset
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/web/.env.development b/web/.env.development
new file mode 100644
index 0000000..318c4cb
--- /dev/null
+++ b/web/.env.development
@@ -0,0 +1,12 @@
+# 是否使用Hash路由
+VITE_USE_HASH = 'true'
+
+# 资源公共路径,需要以 /开头和结尾
+VITE_PUBLIC_PATH = '/'
+
+# Axios 基础路径
+# VITE_AXIOS_BASE_URL = '/api'  # 用于代理
+VITE_AXIOS_BASE_URL = 'https://mock.apipark.cn/m1/3776410-0-default'  # apifox云端mock
+
+# 代理配置-target
+VITE_PROXY_TARGET = 'http://localhost:8085'
diff --git a/web/.env.production b/web/.env.production
new file mode 100644
index 0000000..1b309e4
--- /dev/null
+++ b/web/.env.production
@@ -0,0 +1,10 @@
+# 是否使用Hash路由
+VITE_USE_HASH = 'false'
+
+# 资源公共路径,需要以 /开头和结尾
+VITE_PUBLIC_PATH = '/'
+
+VITE_AXIOS_BASE_URL = '/api'  # 用于代理
+
+# 代理配置-target
+VITE_PROXY_TARGET = 'http://localhost:8085'
diff --git a/web/.eslint-global-variables.json b/web/.eslint-global-variables.json
new file mode 100644
index 0000000..4f9c397
--- /dev/null
+++ b/web/.eslint-global-variables.json
@@ -0,0 +1,63 @@
+{
+  "globals": {
+    "$loadingBar": true,
+    "$message": true,
+    "$dialog": true,
+    "$notification": true,
+    "$modal": true,
+    "defineOptions": true,
+    "EffectScope": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
diff --git a/web/.npmrc b/web/.npmrc
new file mode 100644
index 0000000..5cee373
--- /dev/null
+++ b/web/.npmrc
@@ -0,0 +1,3 @@
+registry=https://registry.npmmirror.com
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/web/LICENSE b/web/LICENSE
new file mode 100644
index 0000000..888e80f
--- /dev/null
+++ b/web/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ronnie Zhang(大脸怪)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/web/README.md b/web/README.md
new file mode 100644
index 0000000..53c2ff5
--- /dev/null
+++ b/web/README.md
@@ -0,0 +1,89 @@
+<p align="center">
+  <a href="https://github.com/zclzone/vue-naive-admin">
+    <img alt="Vue Naive Admin Logo" width="200" src="./src/assets/images/logo.png">
+  </a>
+</p>
+<p align="center">
+  <a href="./LICENSE"><img alt="MIT License" src="https://badgen.net/github/license/zclzone/vue-naive-admin"/></a>
+</p>
+
+## 简介
+
+Vue Naive Admin 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm + MySql，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！
+
+## 设计理念
+
+Vue Naive Admin 2022年2月开始开源，从 1.0 到现在的 2.0，一直秉持着`简单即正义`的理念，旨在帮助中小企业、在校大学生及个人开发者快速上手开发后台管理项目，为了降低使用者的学习成本，没有使用看似主流的 TypeScript（前端），这也使得 Vue Naive Admin 成为了市面上少有的 `使用 JavaScript 的 Vue3 后台管理模板`，而且还算优秀，得到了大量朋友的认可和喜爱。
+
+## 特性
+
+- 🆒 使用 **Vue3** 主流最新技术栈: `Vite + Vue3 + Pinia`
+- 🍇 使用 **原子CSS**框架: `Unocss`，优雅、轻量、易用
+- 🍍 集成 `Pinia` 状态管理，支持状态持久化
+- 🤹 使用主流的 `iconify + unocss` 图标方案，支持自定义图标，支持动态渲染
+- 🎨 使用 Naive UI，`极致简洁的代码风格和清爽的页面设计`，审美在线，主题轻松定制
+- 👏 先进且易于理解的文件结构设计，多个模块之间**零耦合**，单个业务模块删除不影响其他模块
+- 🚀 `扁平化路由`设计，每一个组件都可以是一个页面，告别多级路由 `KeepAlive` 难实现问题
+- 🍒 `基于权限动态生成路由`，无需额外定义路由，`403和404页面可区分`，而不是无权限也跳404
+- 🔐 基于Redis集成 `无感刷新`，用户登录态可控，安全与体验缺一不可
+- ✨ 基于 Naive UI 封装 `message` 全局工具方法，支持批量提醒，支持跨页面单例模式
+- ⚡️ 基于 Naive UI 封装常用的业务组件，包含`Page` 组件、`CRUD` 表格组件及 `Modal`组件等，简单易用，减少大量重复性工作
+
+## 极致的性能
+
+![](https://docs.isme.top/Public/Uploads/2023-11-18/6558568b2b476.png)
+![](https://docs.isme.top/Public/Uploads/2023-11-18/655853caa9ce8.png)
+
+## 2.0 和 1.0 区别
+
+- 2.0 是基于 1.0 风格从 0 到 1 重新设计的，所以 2.0 看似跟 1.0 很像，但其实代码机构差别还挺大的。
+- 1.0 只提供前端，后端使用 Mock 模拟的，而 2.0 是全栈版，提供真实的后端接口。
+- 2.0 虽然版本高于 1.0，但复杂度却远低于 1.0，虽然 1.0 也很简单。
+- 2.0 的灵活度远高于 1.0，只要你愿意，你可以为每个页面单独定制一个 layout
+
+[体验1.0 | template.isme.top](https://template.isme.top)
+
+[体验2.0 | admin.isme.top](https://admin.isme.top)
+
+## Nestjs 后端
+
+Vue Naive Admin 提供一套后端代码，技术栈使用 Nestjs + TypeOrm + MySql，内置 JWT、RABC及模板所需的一些基础接口。
+
+- 源码-github: [isme-nest-serve | github](https://github.com/zclzone/isme-nest-serve)
+- 源码-gitee: [isme-nest-serve | gitee](https://gitee.com/isme-admin/isme-nest-serve)
+
+## 文档
+
+- 项目文档: [docs | vue-naive-admin](https://docs.isme.top/web/#/624306705/188522224)
+- 接口文档: [apidoc | isme-nest-serve](https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a)
+
+> 注：有个比较常见的问题，就是如何添加菜单和修改菜单，由于项目是由后端控制菜单资源的，所以需要对接后端后在资源管理功能对菜单进行增删改，然后在角色管理功能给对应角色进行授权。具体如何对接后端，请参考 [项目文档](https://docs.isme.top/web/#/624306705/188522224)。当然，可能有些菜单你不想通过权限控制，那么你可以在 `/src/settings.js` 文件添加 basePermissions，只需对齐菜单资源的结构即可，结构可以参照 [接口文档](https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a/api-134536978)。
+
+## 使用这个模板开始你的项目
+
+[使用这个模板创建Github仓库](https://github.com/zclzone/vue-naive-admin/generate).
+
+或者使用 `degit` 克隆此仓库，这样将没有任何历史提交记录：
+
+```cmd
+npx degit zclzone/vue-naive-admin
+```
+
+## 版权说明
+
+本项目使用 `MIT协议`，默认授权给任何人，被授权人可免费地无限制的使用、复制、修改、合并、发布、发行、再许可、售卖本软件拷贝、并有权向被供应人授予同等的权利，但必须满足以下条件:
+
+- 复制、修改和发行本项目代码需包含原作者的版权及许可信息，包括但不限于文件头注释、协议等
+
+简单来说，作者只想保留版权，没有任何其他限制。
+
+## 其他已对接本项目的后端项目
+
+- [isme-java-serve](https://github.com/DHBin/isme-java-serve): 一个轻量级的Java后端服务，基于SpringBoot、MybatisPlus、SaToken、MapStruct等实现，已对接 Vue Naive Admin 2.0。
+- [naive-admin-go](https://github.com/ituserxxx/naive-admin-go): 一个 Go 后端服务，基于 gin、gorm、mysql、jwt和session，已对接 Vue Naive Admin 2.0。
+
+## 入群交流
+
+添加微信，拉你进群
+
+![](https://static.isme.top/image/coder_wx.jpg)
diff --git a/web/build/index.js b/web/build/index.js
new file mode 100644
index 0000000..985ced8
--- /dev/null
+++ b/web/build/index.js
@@ -0,0 +1,39 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:48:02
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import path from 'node:path'
+import { globSync } from 'glob'
+import dynamicIcons from '../src/assets/icons/dynamic-icons'
+
+/**
+ * @usage 生成icons, 用于 unocss safelist，以支持页面动态渲染自定义图标
+ */
+export function getIcons() {
+  const feFiles = globSync('src/assets/icons/feather/*.svg', { nodir: true, strict: true })
+  const meFiles = globSync('src/assets/icons/isme/*.svg', { nodir: true, strict: true })
+  const feIcons = feFiles.map((filePath) => {
+    const fileName = path.basename(filePath) // 获取文件名，包括后缀
+    const fileNameWithoutExt = path.parse(fileName).name // 获取去除后缀的文件名
+    return `i-fe:${fileNameWithoutExt}`
+  })
+  const meIcons = meFiles.map((filePath) => {
+    const fileName = path.basename(filePath) // 获取文件名，包括后缀
+    const fileNameWithoutExt = path.parse(fileName).name // 获取去除后缀的文件名
+    return `i-me:${fileNameWithoutExt}`
+  })
+
+  return [...dynamicIcons, ...feIcons, ...meIcons]
+}
+
+/**
+ * @usage 生成.vue文件路径列表，用于添加菜单时可下拉选择对应的.vue文件路径，防止手动输入报错
+ */
+export function getPagePathes() {
+  const files = globSync('src/views/**/*.vue')
+  return files.map(item => `/${path.normalize(item).replace(/\\/g, '/')}`)
+}
diff --git a/web/build/plugin-isme/icons.js b/web/build/plugin-isme/icons.js
new file mode 100644
index 0000000..4da9779
--- /dev/null
+++ b/web/build/plugin-isme/icons.js
@@ -0,0 +1,25 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:48:11
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { getIcons } from '..'
+
+const PLUGIN_ICONS_ID = 'isme:icons'
+export function pluginIcons() {
+  return {
+    name: 'isme:icons',
+    resolveId(id) {
+      if (id === PLUGIN_ICONS_ID)
+        return `\0${PLUGIN_ICONS_ID}`
+    },
+    load(id) {
+      if (id === `\0${PLUGIN_ICONS_ID}`) {
+        return `export default ${JSON.stringify(getIcons())}`
+      }
+    },
+  }
+}
diff --git a/web/build/plugin-isme/index.js b/web/build/plugin-isme/index.js
new file mode 100644
index 0000000..326b960
--- /dev/null
+++ b/web/build/plugin-isme/index.js
@@ -0,0 +1,10 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:48:17
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export { pluginPagePathes } from './page-pathes'
+export { pluginIcons } from './icons'
diff --git a/web/build/plugin-isme/page-pathes.js b/web/build/plugin-isme/page-pathes.js
new file mode 100644
index 0000000..a29d8e2
--- /dev/null
+++ b/web/build/plugin-isme/page-pathes.js
@@ -0,0 +1,25 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:37:43
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { getPagePathes } from '..'
+
+const PLUGIN_PAGE_PATHES_ID = 'isme:page-pathes'
+export function pluginPagePathes() {
+  return {
+    name: 'isme:page-pathes',
+    resolveId(id) {
+      if (id === PLUGIN_PAGE_PATHES_ID)
+        return `\0${PLUGIN_PAGE_PATHES_ID}`
+    },
+    load(id) {
+      if (id === `\0${PLUGIN_PAGE_PATHES_ID}`) {
+        return `export default ${JSON.stringify(getPagePathes())}`
+      }
+    },
+  }
+}
diff --git a/web/eslint.config.js b/web/eslint.config.js
new file mode 100644
index 0000000..b15d4e5
--- /dev/null
+++ b/web/eslint.config.js
@@ -0,0 +1,34 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  unocss: true,
+  formatters: true,
+  stylistic: true,
+  rules: {
+    'n/prefer-global/process': 'off',
+    'no-undef': 'error',
+    'no-fallthrough': 'off',
+    'vue/block-order': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    'prefer-promise-reject-errors': 'off',
+  },
+  languageOptions: {
+    globals: {
+      h: 'readonly',
+      unref: 'readonly',
+      provide: 'readonly',
+      inject: 'readonly',
+      markRaw: 'readonly',
+      defineAsyncComponent: 'readonly',
+      nextTick: 'readonly',
+      useRoute: 'readonly',
+      useRouter: 'readonly',
+      Message: 'readonly',
+      $loadingBar: 'readonly',
+      $message: 'readonly',
+      $dialog: 'readonly',
+      $notification: 'readonly',
+      $modal: 'readonly',
+    },
+  },
+})
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..ce02b2d
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" />
+    <title>%VITE_TITLE%</title>
+    <style>
+      .loading-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+      }
+      .dark .loading-container {
+        background-color: #232324;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .loading-container .loading {
+        --speed-of-animation: 0.9s;
+        --gap: 12px;
+        --first-color: #4c86f9;
+        --second-color: #49a84c;
+        --third-color: #f6bb02;
+        --fourth-color: #26a69a;
+        --fifth-color: #2196f3;
+
+        margin: auto;
+        width: 160px;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--gap);
+      }
+
+      .loading-container .loading span {
+        width: 6px;
+        height: 80px;
+        background: var(--first-color);
+        animation: scale var(--speed-of-animation) ease-in-out infinite;
+      }
+
+      .loading-container .loading span:nth-child(2) {
+        background: var(--second-color);
+        animation-delay: -0.8s;
+      }
+
+      .loading-container .loading span:nth-child(3) {
+        background: var(--third-color);
+        animation-delay: -0.7s;
+      }
+
+      .loading-container .loading span:nth-child(4) {
+        background: var(--fourth-color);
+        animation-delay: -0.6s;
+      }
+
+      .loading-container .loading span:nth-child(5) {
+        background: var(--fifth-color);
+        animation-delay: -0.5s;
+      }
+
+      @keyframes scale {
+        0%,
+        40%,
+        100% {
+          transform: scaleY(0.25);
+        }
+
+        20% {
+          transform: scaleY(1);
+        }
+      }
+    </style>
+  </head>
+  <body class="dark:text-#e9e9e9 auto-bg">
+    <div id="app">
+      <div class="loading-container">
+        <div class="loading">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/web/jsconfig.json b/web/jsconfig.json
new file mode 100644
index 0000000..270b986
--- /dev/null
+++ b/web/jsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["src/*"],
+      "~/*": ["./*"]
+    },
+    "jsx": "preserve",
+    "allowJs": true
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 0000000..fd9d2dc
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "vue-naive-admin",
+  "type": "module",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint:fix": "eslint --fix",
+    "postinstall": "npx simple-git-hooks",
+    "up": "taze major -I"
+  },
+  "dependencies": {
+    "@arco-design/color": "^0.4.0",
+    "@vueuse/core": "^10.11.0",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.1",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.38.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.4.31",
+    "vue-echarts": "^6.7.3",
+    "vue-router": "^4.4.0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.21.2",
+    "@iconify/json": "^2.2.223",
+    "@iconify/utils": "^2.1.25",
+    "@unocss/eslint-config": "^0.61.0",
+    "@unocss/eslint-plugin": "^0.61.0",
+    "@unocss/preset-rem-to-px": "^0.61.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "eslint": "^9.6.0",
+    "eslint-plugin-format": "^0.1.2",
+    "esno": "^4.7.0",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.4.2",
+    "lint-staged": "^15.2.7",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.77.6",
+    "simple-git-hooks": "^2.11.1",
+    "taze": "^0.13.9",
+    "unocss": "^0.61.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-components": "^0.27.2",
+    "vite": "^5.3.2",
+    "vite-plugin-router-warn": "^1.0.0",
+    "vite-plugin-vue-devtools": "^7.3.5"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}
diff --git a/web/public/favicon.png b/web/public/favicon.png
new file mode 100644
index 0000000..929c58a
Binary files /dev/null and b/web/public/favicon.png differ
diff --git a/web/src/App.vue b/web/src/App.vue
new file mode 100644
index 0000000..ccad917
--- /dev/null
+++ b/web/src/App.vue
@@ -0,0 +1,63 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:49:42
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-config-provider
+    class="wh-full"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="appStore.isDark ? darkTheme : undefined"
+    :theme-overrides="appStore.naiveThemeOverrides"
+  >
+    <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
+      <component :is="Layout">
+        <KeepAlive :include="keepAliveNames">
+          <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
+        </KeepAlive>
+      </component>
+
+      <LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" />
+    </router-view>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
+import { layoutSettingVisible } from './settings'
+import { LayoutSetting } from '@/components'
+import { useAppStore, useTabStore } from '@/store'
+
+const layouts = new Map()
+function getLayout(name) {
+  // 利用map将加载过的layout缓存起来，防止重新加载layout导致页面闪烁
+  if (layouts.get(name))
+    return layouts.get(name)
+  const layout = markRaw(defineAsyncComponent(() => import(`@/layouts/${name}/index.vue`)))
+  layouts.set(name, layout)
+  return layout
+}
+
+const route = useRoute()
+const appStore = useAppStore()
+if (appStore.layout === 'default')
+  appStore.setLayout('')
+const Layout = computed(() => {
+  if (!route.matched?.length)
+    return null
+  return getLayout(route.meta?.layout || appStore.layout)
+})
+
+const tabStore = useTabStore()
+const keepAliveNames = computed(() => {
+  return tabStore.tabs.filter(item => item.keepAlive).map(item => item.name)
+})
+
+watchEffect(() => {
+  appStore.setThemeColor(appStore.primaryColor, appStore.isDark)
+})
+</script>
diff --git a/web/src/api/index.js b/web/src/api/index.js
new file mode 100644
index 0000000..23cbe93
--- /dev/null
+++ b/web/src/api/index.js
@@ -0,0 +1,24 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:50:38
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { request } from '@/utils'
+
+export default {
+  // 获取用户信息
+  getUser: () => request.get('/user/detail'),
+  // 刷新token
+  refreshToken: () => request.get('/auth/refresh/token'),
+  // 登出
+  logout: () => request.post('/auth/logout', {}, { needTip: false }),
+  // 切换当前角色
+  switchCurrentRole: role => request.post(`/auth/current-role/switch/${role}`),
+  // 获取角色权限
+  getRolePermissions: () => request.get('/role/permissions/tree'),
+  // 验证菜单路径
+  validateMenuPath: path => request.get(`/permission/menu/validate?path=${path}`),
+}
diff --git a/web/src/assets/icons/dynamic-icons.js b/web/src/assets/icons/dynamic-icons.js
new file mode 100644
index 0000000..5326f66
--- /dev/null
+++ b/web/src/assets/icons/dynamic-icons.js
@@ -0,0 +1,10 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:50:49
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+// 需要动态渲染的iconify图标，以i-开头
+export default ['i-simple-icons:juejin']
diff --git a/web/src/assets/icons/feather/activity.svg b/web/src/assets/icons/feather/activity.svg
new file mode 100644
index 0000000..669a57a
--- /dev/null
+++ b/web/src/assets/icons/feather/activity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/airplay.svg b/web/src/assets/icons/feather/airplay.svg
new file mode 100644
index 0000000..7ce7302
--- /dev/null
+++ b/web/src/assets/icons/feather/airplay.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/alert-circle.svg b/web/src/assets/icons/feather/alert-circle.svg
new file mode 100644
index 0000000..8d02b7d
--- /dev/null
+++ b/web/src/assets/icons/feather/alert-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/alert-octagon.svg b/web/src/assets/icons/feather/alert-octagon.svg
new file mode 100644
index 0000000..de9b03f
--- /dev/null
+++ b/web/src/assets/icons/feather/alert-octagon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/alert-triangle.svg b/web/src/assets/icons/feather/alert-triangle.svg
new file mode 100644
index 0000000..6dcb096
--- /dev/null
+++ b/web/src/assets/icons/feather/alert-triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/align-center.svg b/web/src/assets/icons/feather/align-center.svg
new file mode 100644
index 0000000..5b8842e
--- /dev/null
+++ b/web/src/assets/icons/feather/align-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-center"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/align-justify.svg b/web/src/assets/icons/feather/align-justify.svg
new file mode 100644
index 0000000..0539876
--- /dev/null
+++ b/web/src/assets/icons/feather/align-justify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/align-left.svg b/web/src/assets/icons/feather/align-left.svg
new file mode 100644
index 0000000..9ac852a
--- /dev/null
+++ b/web/src/assets/icons/feather/align-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/align-right.svg b/web/src/assets/icons/feather/align-right.svg
new file mode 100644
index 0000000..ef139ff
--- /dev/null
+++ b/web/src/assets/icons/feather/align-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-right"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/anchor.svg b/web/src/assets/icons/feather/anchor.svg
new file mode 100644
index 0000000..e01627a
--- /dev/null
+++ b/web/src/assets/icons/feather/anchor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-anchor"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/aperture.svg b/web/src/assets/icons/feather/aperture.svg
new file mode 100644
index 0000000..9936e86
--- /dev/null
+++ b/web/src/assets/icons/feather/aperture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/archive.svg b/web/src/assets/icons/feather/archive.svg
new file mode 100644
index 0000000..428882c
--- /dev/null
+++ b/web/src/assets/icons/feather/archive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-down-circle.svg b/web/src/assets/icons/feather/arrow-down-circle.svg
new file mode 100644
index 0000000..3238091
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-down-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-down-left.svg b/web/src/assets/icons/feather/arrow-down-left.svg
new file mode 100644
index 0000000..7248358
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-down-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-left"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-down-right.svg b/web/src/assets/icons/feather/arrow-down-right.svg
new file mode 100644
index 0000000..81d9822
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-down-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-right"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-down.svg b/web/src/assets/icons/feather/arrow-down.svg
new file mode 100644
index 0000000..4f84f62
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-left-circle.svg b/web/src/assets/icons/feather/arrow-left-circle.svg
new file mode 100644
index 0000000..3b19ff8
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-left-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-left.svg b/web/src/assets/icons/feather/arrow-left.svg
new file mode 100644
index 0000000..a5058fc
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-right-circle.svg b/web/src/assets/icons/feather/arrow-right-circle.svg
new file mode 100644
index 0000000..ff01dd5
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-right-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-right.svg b/web/src/assets/icons/feather/arrow-right.svg
new file mode 100644
index 0000000..939b57c
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-up-circle.svg b/web/src/assets/icons/feather/arrow-up-circle.svg
new file mode 100644
index 0000000..044a75d
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-up-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-up-left.svg b/web/src/assets/icons/feather/arrow-up-left.svg
new file mode 100644
index 0000000..cea55e8
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-up-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-left"><line x1="17" y1="17" x2="7" y2="7"></line><polyline points="7 17 7 7 17 7"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-up-right.svg b/web/src/assets/icons/feather/arrow-up-right.svg
new file mode 100644
index 0000000..95678e0
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-up-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/arrow-up.svg b/web/src/assets/icons/feather/arrow-up.svg
new file mode 100644
index 0000000..16b13ab
--- /dev/null
+++ b/web/src/assets/icons/feather/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/at-sign.svg b/web/src/assets/icons/feather/at-sign.svg
new file mode 100644
index 0000000..5a5e5d0
--- /dev/null
+++ b/web/src/assets/icons/feather/at-sign.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/award.svg b/web/src/assets/icons/feather/award.svg
new file mode 100644
index 0000000..be70d5a
--- /dev/null
+++ b/web/src/assets/icons/feather/award.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bar-chart-2.svg b/web/src/assets/icons/feather/bar-chart-2.svg
new file mode 100644
index 0000000..864167a
--- /dev/null
+++ b/web/src/assets/icons/feather/bar-chart-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bar-chart.svg b/web/src/assets/icons/feather/bar-chart.svg
new file mode 100644
index 0000000..074d7c1
--- /dev/null
+++ b/web/src/assets/icons/feather/bar-chart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/battery-charging.svg b/web/src/assets/icons/feather/battery-charging.svg
new file mode 100644
index 0000000..644cb59
--- /dev/null
+++ b/web/src/assets/icons/feather/battery-charging.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-battery-charging"><path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19"></path><line x1="23" y1="13" x2="23" y2="11"></line><polyline points="11 6 7 12 13 12 9 18"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/battery.svg b/web/src/assets/icons/feather/battery.svg
new file mode 100644
index 0000000..7fe8771
--- /dev/null
+++ b/web/src/assets/icons/feather/battery.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-battery"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"></rect><line x1="23" y1="13" x2="23" y2="11"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bell-off.svg b/web/src/assets/icons/feather/bell-off.svg
new file mode 100644
index 0000000..4b07c84
--- /dev/null
+++ b/web/src/assets/icons/feather/bell-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell-off"><path d="M13.73 21a2 2 0 0 1-3.46 0"></path><path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path><path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path><path d="M18 8a6 6 0 0 0-9.33-5"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bell.svg b/web/src/assets/icons/feather/bell.svg
new file mode 100644
index 0000000..bba561c
--- /dev/null
+++ b/web/src/assets/icons/feather/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bluetooth.svg b/web/src/assets/icons/feather/bluetooth.svg
new file mode 100644
index 0000000..cebed7b
--- /dev/null
+++ b/web/src/assets/icons/feather/bluetooth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bluetooth"><polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bold.svg b/web/src/assets/icons/feather/bold.svg
new file mode 100644
index 0000000..d1a4efd
--- /dev/null
+++ b/web/src/assets/icons/feather/bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bold"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/book-open.svg b/web/src/assets/icons/feather/book-open.svg
new file mode 100644
index 0000000..5e0ca0a
--- /dev/null
+++ b/web/src/assets/icons/feather/book-open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/book.svg b/web/src/assets/icons/feather/book.svg
new file mode 100644
index 0000000..12ffcbc
--- /dev/null
+++ b/web/src/assets/icons/feather/book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/bookmark.svg b/web/src/assets/icons/feather/bookmark.svg
new file mode 100644
index 0000000..2239cc5
--- /dev/null
+++ b/web/src/assets/icons/feather/bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/box.svg b/web/src/assets/icons/feather/box.svg
new file mode 100644
index 0000000..d89be30
--- /dev/null
+++ b/web/src/assets/icons/feather/box.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/briefcase.svg b/web/src/assets/icons/feather/briefcase.svg
new file mode 100644
index 0000000..e3af050
--- /dev/null
+++ b/web/src/assets/icons/feather/briefcase.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/calendar.svg b/web/src/assets/icons/feather/calendar.svg
new file mode 100644
index 0000000..6c7fd87
--- /dev/null
+++ b/web/src/assets/icons/feather/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/camera-off.svg b/web/src/assets/icons/feather/camera-off.svg
new file mode 100644
index 0000000..daa3e25
--- /dev/null
+++ b/web/src/assets/icons/feather/camera-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera-off"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/camera.svg b/web/src/assets/icons/feather/camera.svg
new file mode 100644
index 0000000..0e7f060
--- /dev/null
+++ b/web/src/assets/icons/feather/camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cast.svg b/web/src/assets/icons/feather/cast.svg
new file mode 100644
index 0000000..63c954d
--- /dev/null
+++ b/web/src/assets/icons/feather/cast.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cast"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2.01" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/check-circle.svg b/web/src/assets/icons/feather/check-circle.svg
new file mode 100644
index 0000000..f2f4fd1
--- /dev/null
+++ b/web/src/assets/icons/feather/check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/check-square.svg b/web/src/assets/icons/feather/check-square.svg
new file mode 100644
index 0000000..72ab7a8
--- /dev/null
+++ b/web/src/assets/icons/feather/check-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/check.svg b/web/src/assets/icons/feather/check.svg
new file mode 100644
index 0000000..1c20989
--- /dev/null
+++ b/web/src/assets/icons/feather/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevron-down.svg b/web/src/assets/icons/feather/chevron-down.svg
new file mode 100644
index 0000000..278c6a3
--- /dev/null
+++ b/web/src/assets/icons/feather/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevron-left.svg b/web/src/assets/icons/feather/chevron-left.svg
new file mode 100644
index 0000000..747d46d
--- /dev/null
+++ b/web/src/assets/icons/feather/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevron-right.svg b/web/src/assets/icons/feather/chevron-right.svg
new file mode 100644
index 0000000..258de41
--- /dev/null
+++ b/web/src/assets/icons/feather/chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevron-up.svg b/web/src/assets/icons/feather/chevron-up.svg
new file mode 100644
index 0000000..4eb5ecc
--- /dev/null
+++ b/web/src/assets/icons/feather/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevrons-down.svg b/web/src/assets/icons/feather/chevrons-down.svg
new file mode 100644
index 0000000..e67ef2f
--- /dev/null
+++ b/web/src/assets/icons/feather/chevrons-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevrons-left.svg b/web/src/assets/icons/feather/chevrons-left.svg
new file mode 100644
index 0000000..c32e398
--- /dev/null
+++ b/web/src/assets/icons/feather/chevrons-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-left"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevrons-right.svg b/web/src/assets/icons/feather/chevrons-right.svg
new file mode 100644
index 0000000..f506814
--- /dev/null
+++ b/web/src/assets/icons/feather/chevrons-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chevrons-up.svg b/web/src/assets/icons/feather/chevrons-up.svg
new file mode 100644
index 0000000..0eaf518
--- /dev/null
+++ b/web/src/assets/icons/feather/chevrons-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/chrome.svg b/web/src/assets/icons/feather/chrome.svg
new file mode 100644
index 0000000..9189815
--- /dev/null
+++ b/web/src/assets/icons/feather/chrome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/circle.svg b/web/src/assets/icons/feather/circle.svg
new file mode 100644
index 0000000..b009088
--- /dev/null
+++ b/web/src/assets/icons/feather/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/clipboard.svg b/web/src/assets/icons/feather/clipboard.svg
new file mode 100644
index 0000000..ccee454
--- /dev/null
+++ b/web/src/assets/icons/feather/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/clock.svg b/web/src/assets/icons/feather/clock.svg
new file mode 100644
index 0000000..ea3f5e5
--- /dev/null
+++ b/web/src/assets/icons/feather/clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud-drizzle.svg b/web/src/assets/icons/feather/cloud-drizzle.svg
new file mode 100644
index 0000000..13af6bb
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud-drizzle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-drizzle"><line x1="8" y1="19" x2="8" y2="21"></line><line x1="8" y1="13" x2="8" y2="15"></line><line x1="16" y1="19" x2="16" y2="21"></line><line x1="16" y1="13" x2="16" y2="15"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="12" y1="15" x2="12" y2="17"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud-lightning.svg b/web/src/assets/icons/feather/cloud-lightning.svg
new file mode 100644
index 0000000..32d154c
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud-lightning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-lightning"><path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"></path><polyline points="13 11 9 17 15 17 11 23"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud-off.svg b/web/src/assets/icons/feather/cloud-off.svg
new file mode 100644
index 0000000..1e1e7d6
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-off"><path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud-rain.svg b/web/src/assets/icons/feather/cloud-rain.svg
new file mode 100644
index 0000000..3e0b85b
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud-rain.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-rain"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud-snow.svg b/web/src/assets/icons/feather/cloud-snow.svg
new file mode 100644
index 0000000..e4eb820
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud-snow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-snow"><path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"></path><line x1="8" y1="16" x2="8.01" y2="16"></line><line x1="8" y1="20" x2="8.01" y2="20"></line><line x1="12" y1="18" x2="12.01" y2="18"></line><line x1="12" y1="22" x2="12.01" y2="22"></line><line x1="16" y1="16" x2="16.01" y2="16"></line><line x1="16" y1="20" x2="16.01" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cloud.svg b/web/src/assets/icons/feather/cloud.svg
new file mode 100644
index 0000000..0ee0c63
--- /dev/null
+++ b/web/src/assets/icons/feather/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/code.svg b/web/src/assets/icons/feather/code.svg
new file mode 100644
index 0000000..c4954b5
--- /dev/null
+++ b/web/src/assets/icons/feather/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/codepen.svg b/web/src/assets/icons/feather/codepen.svg
new file mode 100644
index 0000000..ab2a815
--- /dev/null
+++ b/web/src/assets/icons/feather/codepen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-codepen"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/codesandbox.svg b/web/src/assets/icons/feather/codesandbox.svg
new file mode 100644
index 0000000..49848f5
--- /dev/null
+++ b/web/src/assets/icons/feather/codesandbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-codesandbox"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/coffee.svg b/web/src/assets/icons/feather/coffee.svg
new file mode 100644
index 0000000..32905e5
--- /dev/null
+++ b/web/src/assets/icons/feather/coffee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/columns.svg b/web/src/assets/icons/feather/columns.svg
new file mode 100644
index 0000000..d264b55
--- /dev/null
+++ b/web/src/assets/icons/feather/columns.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-columns"><path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/command.svg b/web/src/assets/icons/feather/command.svg
new file mode 100644
index 0000000..93f554c
--- /dev/null
+++ b/web/src/assets/icons/feather/command.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/compass.svg b/web/src/assets/icons/feather/compass.svg
new file mode 100644
index 0000000..3296260
--- /dev/null
+++ b/web/src/assets/icons/feather/compass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/copy.svg b/web/src/assets/icons/feather/copy.svg
new file mode 100644
index 0000000..4e0b09f
--- /dev/null
+++ b/web/src/assets/icons/feather/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-down-left.svg b/web/src/assets/icons/feather/corner-down-left.svg
new file mode 100644
index 0000000..9fffb3e
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-down-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-left"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-down-right.svg b/web/src/assets/icons/feather/corner-down-right.svg
new file mode 100644
index 0000000..b27d408
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-down-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right"><polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-left-down.svg b/web/src/assets/icons/feather/corner-left-down.svg
new file mode 100644
index 0000000..24b8375
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-left-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-left-down"><polyline points="14 15 9 20 4 15"></polyline><path d="M20 4h-7a4 4 0 0 0-4 4v12"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-left-up.svg b/web/src/assets/icons/feather/corner-left-up.svg
new file mode 100644
index 0000000..e54527c
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-left-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-left-up"><polyline points="14 9 9 4 4 9"></polyline><path d="M20 20h-7a4 4 0 0 1-4-4V4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-right-down.svg b/web/src/assets/icons/feather/corner-right-down.svg
new file mode 100644
index 0000000..a49e6d6
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-right-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-down"><polyline points="10 15 15 20 20 15"></polyline><path d="M4 4h7a4 4 0 0 1 4 4v12"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-right-up.svg b/web/src/assets/icons/feather/corner-right-up.svg
new file mode 100644
index 0000000..a5c5dce
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-right-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-right-up"><polyline points="10 9 15 4 20 9"></polyline><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-up-left.svg b/web/src/assets/icons/feather/corner-up-left.svg
new file mode 100644
index 0000000..0a1ffd6
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-up-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/corner-up-right.svg b/web/src/assets/icons/feather/corner-up-right.svg
new file mode 100644
index 0000000..0b8f961
--- /dev/null
+++ b/web/src/assets/icons/feather/corner-up-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/cpu.svg b/web/src/assets/icons/feather/cpu.svg
new file mode 100644
index 0000000..2ed16ef
--- /dev/null
+++ b/web/src/assets/icons/feather/cpu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/credit-card.svg b/web/src/assets/icons/feather/credit-card.svg
new file mode 100644
index 0000000..1b7fd02
--- /dev/null
+++ b/web/src/assets/icons/feather/credit-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/crop.svg b/web/src/assets/icons/feather/crop.svg
new file mode 100644
index 0000000..ffbfd04
--- /dev/null
+++ b/web/src/assets/icons/feather/crop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/crosshair.svg b/web/src/assets/icons/feather/crosshair.svg
new file mode 100644
index 0000000..ba39401
--- /dev/null
+++ b/web/src/assets/icons/feather/crosshair.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crosshair"><circle cx="12" cy="12" r="10"></circle><line x1="22" y1="12" x2="18" y2="12"></line><line x1="6" y1="12" x2="2" y2="12"></line><line x1="12" y1="6" x2="12" y2="2"></line><line x1="12" y1="22" x2="12" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/database.svg b/web/src/assets/icons/feather/database.svg
new file mode 100644
index 0000000..c296fbc
--- /dev/null
+++ b/web/src/assets/icons/feather/database.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/delete.svg b/web/src/assets/icons/feather/delete.svg
new file mode 100644
index 0000000..8c6074b
--- /dev/null
+++ b/web/src/assets/icons/feather/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-delete"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path><line x1="18" y1="9" x2="12" y2="15"></line><line x1="12" y1="9" x2="18" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/disc.svg b/web/src/assets/icons/feather/disc.svg
new file mode 100644
index 0000000..2595b44
--- /dev/null
+++ b/web/src/assets/icons/feather/disc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/divide.svg b/web/src/assets/icons/feather/divide.svg
new file mode 100644
index 0000000..3cbff3a
--- /dev/null
+++ b/web/src/assets/icons/feather/divide.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-divide"><circle cx="12" cy="6" r="2"></circle><line x1="5" y1="12" x2="19" y2="12"></line><circle cx="12" cy="18" r="2"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/dollar-sign.svg b/web/src/assets/icons/feather/dollar-sign.svg
new file mode 100644
index 0000000..1a124d2
--- /dev/null
+++ b/web/src/assets/icons/feather/dollar-sign.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/download-cloud.svg b/web/src/assets/icons/feather/download-cloud.svg
new file mode 100644
index 0000000..f3126fc
--- /dev/null
+++ b/web/src/assets/icons/feather/download-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/download.svg b/web/src/assets/icons/feather/download.svg
new file mode 100644
index 0000000..76767a9
--- /dev/null
+++ b/web/src/assets/icons/feather/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/dribbble.svg b/web/src/assets/icons/feather/dribbble.svg
new file mode 100644
index 0000000..bb8577d
--- /dev/null
+++ b/web/src/assets/icons/feather/dribbble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dribbble"><circle cx="12" cy="12" r="10"></circle><path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/droplet.svg b/web/src/assets/icons/feather/droplet.svg
new file mode 100644
index 0000000..ca09301
--- /dev/null
+++ b/web/src/assets/icons/feather/droplet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-droplet"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/edit-2.svg b/web/src/assets/icons/feather/edit-2.svg
new file mode 100644
index 0000000..06830c9
--- /dev/null
+++ b/web/src/assets/icons/feather/edit-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/edit-3.svg b/web/src/assets/icons/feather/edit-3.svg
new file mode 100644
index 0000000..d728efc
--- /dev/null
+++ b/web/src/assets/icons/feather/edit-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/edit.svg b/web/src/assets/icons/feather/edit.svg
new file mode 100644
index 0000000..ec7b4ca
--- /dev/null
+++ b/web/src/assets/icons/feather/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/external-link.svg b/web/src/assets/icons/feather/external-link.svg
new file mode 100644
index 0000000..6236df3
--- /dev/null
+++ b/web/src/assets/icons/feather/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/eye-off.svg b/web/src/assets/icons/feather/eye-off.svg
new file mode 100644
index 0000000..77c54cb
--- /dev/null
+++ b/web/src/assets/icons/feather/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/eye.svg b/web/src/assets/icons/feather/eye.svg
new file mode 100644
index 0000000..9cde243
--- /dev/null
+++ b/web/src/assets/icons/feather/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/facebook.svg b/web/src/assets/icons/feather/facebook.svg
new file mode 100644
index 0000000..2570f56
--- /dev/null
+++ b/web/src/assets/icons/feather/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/fast-forward.svg b/web/src/assets/icons/feather/fast-forward.svg
new file mode 100644
index 0000000..fa39877
--- /dev/null
+++ b/web/src/assets/icons/feather/fast-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-fast-forward"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/feather.svg b/web/src/assets/icons/feather/feather.svg
new file mode 100644
index 0000000..ac3b868
--- /dev/null
+++ b/web/src/assets/icons/feather/feather.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/figma.svg b/web/src/assets/icons/feather/figma.svg
new file mode 100644
index 0000000..66fd217
--- /dev/null
+++ b/web/src/assets/icons/feather/figma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-figma"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/file-minus.svg b/web/src/assets/icons/feather/file-minus.svg
new file mode 100644
index 0000000..345756e
--- /dev/null
+++ b/web/src/assets/icons/feather/file-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-minus"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/file-plus.svg b/web/src/assets/icons/feather/file-plus.svg
new file mode 100644
index 0000000..eed1200
--- /dev/null
+++ b/web/src/assets/icons/feather/file-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-plus"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/file-text.svg b/web/src/assets/icons/feather/file-text.svg
new file mode 100644
index 0000000..4197ddd
--- /dev/null
+++ b/web/src/assets/icons/feather/file-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/file.svg b/web/src/assets/icons/feather/file.svg
new file mode 100644
index 0000000..378519a
--- /dev/null
+++ b/web/src/assets/icons/feather/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/film.svg b/web/src/assets/icons/feather/film.svg
new file mode 100644
index 0000000..ac46360
--- /dev/null
+++ b/web/src/assets/icons/feather/film.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-film"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/filter.svg b/web/src/assets/icons/feather/filter.svg
new file mode 100644
index 0000000..38a47e0
--- /dev/null
+++ b/web/src/assets/icons/feather/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/flag.svg b/web/src/assets/icons/feather/flag.svg
new file mode 100644
index 0000000..037737c
--- /dev/null
+++ b/web/src/assets/icons/feather/flag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/folder-minus.svg b/web/src/assets/icons/feather/folder-minus.svg
new file mode 100644
index 0000000..d5b7af6
--- /dev/null
+++ b/web/src/assets/icons/feather/folder-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-minus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="9" y1="14" x2="15" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/folder-plus.svg b/web/src/assets/icons/feather/folder-plus.svg
new file mode 100644
index 0000000..898f2fc
--- /dev/null
+++ b/web/src/assets/icons/feather/folder-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/folder.svg b/web/src/assets/icons/feather/folder.svg
new file mode 100644
index 0000000..134458b
--- /dev/null
+++ b/web/src/assets/icons/feather/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/framer.svg b/web/src/assets/icons/feather/framer.svg
new file mode 100644
index 0000000..3e66347
--- /dev/null
+++ b/web/src/assets/icons/feather/framer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-framer"><path d="M5 16V9h14V2H5l14 14h-7m-7 0l7 7v-7m-7 0h7"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/frown.svg b/web/src/assets/icons/feather/frown.svg
new file mode 100644
index 0000000..f312254
--- /dev/null
+++ b/web/src/assets/icons/feather/frown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-frown"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/gift.svg b/web/src/assets/icons/feather/gift.svg
new file mode 100644
index 0000000..d2c14bd
--- /dev/null
+++ b/web/src/assets/icons/feather/gift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gift"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/git-branch.svg b/web/src/assets/icons/feather/git-branch.svg
new file mode 100644
index 0000000..4400372
--- /dev/null
+++ b/web/src/assets/icons/feather/git-branch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-branch"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/git-commit.svg b/web/src/assets/icons/feather/git-commit.svg
new file mode 100644
index 0000000..e959d72
--- /dev/null
+++ b/web/src/assets/icons/feather/git-commit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/git-merge.svg b/web/src/assets/icons/feather/git-merge.svg
new file mode 100644
index 0000000..c65fffd
--- /dev/null
+++ b/web/src/assets/icons/feather/git-merge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-merge"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/git-pull-request.svg b/web/src/assets/icons/feather/git-pull-request.svg
new file mode 100644
index 0000000..fc80bdf
--- /dev/null
+++ b/web/src/assets/icons/feather/git-pull-request.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-pull-request"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M13 6h3a2 2 0 0 1 2 2v7"></path><line x1="6" y1="9" x2="6" y2="21"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/github.svg b/web/src/assets/icons/feather/github.svg
new file mode 100644
index 0000000..ff0af48
--- /dev/null
+++ b/web/src/assets/icons/feather/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/gitlab.svg b/web/src/assets/icons/feather/gitlab.svg
new file mode 100644
index 0000000..85d54a1
--- /dev/null
+++ b/web/src/assets/icons/feather/gitlab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gitlab"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/globe.svg b/web/src/assets/icons/feather/globe.svg
new file mode 100644
index 0000000..0a0586d
--- /dev/null
+++ b/web/src/assets/icons/feather/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/grid.svg b/web/src/assets/icons/feather/grid.svg
new file mode 100644
index 0000000..8ef2e9d
--- /dev/null
+++ b/web/src/assets/icons/feather/grid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/hard-drive.svg b/web/src/assets/icons/feather/hard-drive.svg
new file mode 100644
index 0000000..8e90fa1
--- /dev/null
+++ b/web/src/assets/icons/feather/hard-drive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/hash.svg b/web/src/assets/icons/feather/hash.svg
new file mode 100644
index 0000000..c9c8d41
--- /dev/null
+++ b/web/src/assets/icons/feather/hash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/headphones.svg b/web/src/assets/icons/feather/headphones.svg
new file mode 100644
index 0000000..fd8915b
--- /dev/null
+++ b/web/src/assets/icons/feather/headphones.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/heart.svg b/web/src/assets/icons/feather/heart.svg
new file mode 100644
index 0000000..a083b7e
--- /dev/null
+++ b/web/src/assets/icons/feather/heart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/help-circle.svg b/web/src/assets/icons/feather/help-circle.svg
new file mode 100644
index 0000000..51fddd8
--- /dev/null
+++ b/web/src/assets/icons/feather/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/hexagon.svg b/web/src/assets/icons/feather/hexagon.svg
new file mode 100644
index 0000000..eae7f25
--- /dev/null
+++ b/web/src/assets/icons/feather/hexagon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hexagon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/home.svg b/web/src/assets/icons/feather/home.svg
new file mode 100644
index 0000000..7bb31b2
--- /dev/null
+++ b/web/src/assets/icons/feather/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/image.svg b/web/src/assets/icons/feather/image.svg
new file mode 100644
index 0000000..a7d84b9
--- /dev/null
+++ b/web/src/assets/icons/feather/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/inbox.svg b/web/src/assets/icons/feather/inbox.svg
new file mode 100644
index 0000000..03a13b4
--- /dev/null
+++ b/web/src/assets/icons/feather/inbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/info.svg b/web/src/assets/icons/feather/info.svg
new file mode 100644
index 0000000..a09fa5f
--- /dev/null
+++ b/web/src/assets/icons/feather/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/instagram.svg b/web/src/assets/icons/feather/instagram.svg
new file mode 100644
index 0000000..9fdb8e3
--- /dev/null
+++ b/web/src/assets/icons/feather/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/italic.svg b/web/src/assets/icons/feather/italic.svg
new file mode 100644
index 0000000..a123d37
--- /dev/null
+++ b/web/src/assets/icons/feather/italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-italic"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/key.svg b/web/src/assets/icons/feather/key.svg
new file mode 100644
index 0000000..e778e74
--- /dev/null
+++ b/web/src/assets/icons/feather/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/layers.svg b/web/src/assets/icons/feather/layers.svg
new file mode 100644
index 0000000..ea788c2
--- /dev/null
+++ b/web/src/assets/icons/feather/layers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/layout.svg b/web/src/assets/icons/feather/layout.svg
new file mode 100644
index 0000000..28743d9
--- /dev/null
+++ b/web/src/assets/icons/feather/layout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/life-buoy.svg b/web/src/assets/icons/feather/life-buoy.svg
new file mode 100644
index 0000000..54c2bd7
--- /dev/null
+++ b/web/src/assets/icons/feather/life-buoy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-life-buoy"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/link-2.svg b/web/src/assets/icons/feather/link-2.svg
new file mode 100644
index 0000000..8cc7f6d
--- /dev/null
+++ b/web/src/assets/icons/feather/link-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/link.svg b/web/src/assets/icons/feather/link.svg
new file mode 100644
index 0000000..c89dd41
--- /dev/null
+++ b/web/src/assets/icons/feather/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/linkedin.svg b/web/src/assets/icons/feather/linkedin.svg
new file mode 100644
index 0000000..3953109
--- /dev/null
+++ b/web/src/assets/icons/feather/linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/list.svg b/web/src/assets/icons/feather/list.svg
new file mode 100644
index 0000000..5ce38ea
--- /dev/null
+++ b/web/src/assets/icons/feather/list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/loader.svg b/web/src/assets/icons/feather/loader.svg
new file mode 100644
index 0000000..e1a70c1
--- /dev/null
+++ b/web/src/assets/icons/feather/loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/lock.svg b/web/src/assets/icons/feather/lock.svg
new file mode 100644
index 0000000..de09d9d
--- /dev/null
+++ b/web/src/assets/icons/feather/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/log-in.svg b/web/src/assets/icons/feather/log-in.svg
new file mode 100644
index 0000000..ba0da59
--- /dev/null
+++ b/web/src/assets/icons/feather/log-in.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/log-out.svg b/web/src/assets/icons/feather/log-out.svg
new file mode 100644
index 0000000..c9002c9
--- /dev/null
+++ b/web/src/assets/icons/feather/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/mail.svg b/web/src/assets/icons/feather/mail.svg
new file mode 100644
index 0000000..2af169e
--- /dev/null
+++ b/web/src/assets/icons/feather/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/map-pin.svg b/web/src/assets/icons/feather/map-pin.svg
new file mode 100644
index 0000000..d5548e9
--- /dev/null
+++ b/web/src/assets/icons/feather/map-pin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/map.svg b/web/src/assets/icons/feather/map.svg
new file mode 100644
index 0000000..ecebd7b
--- /dev/null
+++ b/web/src/assets/icons/feather/map.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/maximize-2.svg b/web/src/assets/icons/feather/maximize-2.svg
new file mode 100644
index 0000000..e41fc0b
--- /dev/null
+++ b/web/src/assets/icons/feather/maximize-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/maximize.svg b/web/src/assets/icons/feather/maximize.svg
new file mode 100644
index 0000000..fc30518
--- /dev/null
+++ b/web/src/assets/icons/feather/maximize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/meh.svg b/web/src/assets/icons/feather/meh.svg
new file mode 100644
index 0000000..6f57fff
--- /dev/null
+++ b/web/src/assets/icons/feather/meh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-meh"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="15" x2="16" y2="15"></line><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/menu.svg b/web/src/assets/icons/feather/menu.svg
new file mode 100644
index 0000000..e8a84a9
--- /dev/null
+++ b/web/src/assets/icons/feather/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/message-circle.svg b/web/src/assets/icons/feather/message-circle.svg
new file mode 100644
index 0000000..4b21b32
--- /dev/null
+++ b/web/src/assets/icons/feather/message-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/message-square.svg b/web/src/assets/icons/feather/message-square.svg
new file mode 100644
index 0000000..6a2e4e5
--- /dev/null
+++ b/web/src/assets/icons/feather/message-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/mic-off.svg b/web/src/assets/icons/feather/mic-off.svg
new file mode 100644
index 0000000..0786219
--- /dev/null
+++ b/web/src/assets/icons/feather/mic-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic-off"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/mic.svg b/web/src/assets/icons/feather/mic.svg
new file mode 100644
index 0000000..dc5f780
--- /dev/null
+++ b/web/src/assets/icons/feather/mic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/minimize-2.svg b/web/src/assets/icons/feather/minimize-2.svg
new file mode 100644
index 0000000..a720fa6
--- /dev/null
+++ b/web/src/assets/icons/feather/minimize-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/minimize.svg b/web/src/assets/icons/feather/minimize.svg
new file mode 100644
index 0000000..46d6119
--- /dev/null
+++ b/web/src/assets/icons/feather/minimize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/minus-circle.svg b/web/src/assets/icons/feather/minus-circle.svg
new file mode 100644
index 0000000..80c0de1
--- /dev/null
+++ b/web/src/assets/icons/feather/minus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/minus-square.svg b/web/src/assets/icons/feather/minus-square.svg
new file mode 100644
index 0000000..4862832
--- /dev/null
+++ b/web/src/assets/icons/feather/minus-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/minus.svg b/web/src/assets/icons/feather/minus.svg
new file mode 100644
index 0000000..93cc734
--- /dev/null
+++ b/web/src/assets/icons/feather/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/monitor.svg b/web/src/assets/icons/feather/monitor.svg
new file mode 100644
index 0000000..6c3556d
--- /dev/null
+++ b/web/src/assets/icons/feather/monitor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/moon.svg b/web/src/assets/icons/feather/moon.svg
new file mode 100644
index 0000000..dbf7c6c
--- /dev/null
+++ b/web/src/assets/icons/feather/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/more-horizontal.svg b/web/src/assets/icons/feather/more-horizontal.svg
new file mode 100644
index 0000000..dc6a855
--- /dev/null
+++ b/web/src/assets/icons/feather/more-horizontal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/more-vertical.svg b/web/src/assets/icons/feather/more-vertical.svg
new file mode 100644
index 0000000..cba6958
--- /dev/null
+++ b/web/src/assets/icons/feather/more-vertical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/mouse-pointer.svg b/web/src/assets/icons/feather/mouse-pointer.svg
new file mode 100644
index 0000000..f5af559
--- /dev/null
+++ b/web/src/assets/icons/feather/mouse-pointer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mouse-pointer"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/move.svg b/web/src/assets/icons/feather/move.svg
new file mode 100644
index 0000000..4e251b5
--- /dev/null
+++ b/web/src/assets/icons/feather/move.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-move"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/music.svg b/web/src/assets/icons/feather/music.svg
new file mode 100644
index 0000000..7bee2f7
--- /dev/null
+++ b/web/src/assets/icons/feather/music.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/navigation-2.svg b/web/src/assets/icons/feather/navigation-2.svg
new file mode 100644
index 0000000..ae31db9
--- /dev/null
+++ b/web/src/assets/icons/feather/navigation-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation-2"><polygon points="12 2 19 21 12 17 5 21 12 2"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/navigation.svg b/web/src/assets/icons/feather/navigation.svg
new file mode 100644
index 0000000..f600a41
--- /dev/null
+++ b/web/src/assets/icons/feather/navigation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/octagon.svg b/web/src/assets/icons/feather/octagon.svg
new file mode 100644
index 0000000..124c548
--- /dev/null
+++ b/web/src/assets/icons/feather/octagon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/package.svg b/web/src/assets/icons/feather/package.svg
new file mode 100644
index 0000000..f1e09ee
--- /dev/null
+++ b/web/src/assets/icons/feather/package.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/paperclip.svg b/web/src/assets/icons/feather/paperclip.svg
new file mode 100644
index 0000000..b1f69b7
--- /dev/null
+++ b/web/src/assets/icons/feather/paperclip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/pause-circle.svg b/web/src/assets/icons/feather/pause-circle.svg
new file mode 100644
index 0000000..f6b1a8d
--- /dev/null
+++ b/web/src/assets/icons/feather/pause-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause-circle"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/pause.svg b/web/src/assets/icons/feather/pause.svg
new file mode 100644
index 0000000..4e78038
--- /dev/null
+++ b/web/src/assets/icons/feather/pause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/pen-tool.svg b/web/src/assets/icons/feather/pen-tool.svg
new file mode 100644
index 0000000..0d26fa1
--- /dev/null
+++ b/web/src/assets/icons/feather/pen-tool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/percent.svg b/web/src/assets/icons/feather/percent.svg
new file mode 100644
index 0000000..2cb9719
--- /dev/null
+++ b/web/src/assets/icons/feather/percent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-percent"><line x1="19" y1="5" x2="5" y2="19"></line><circle cx="6.5" cy="6.5" r="2.5"></circle><circle cx="17.5" cy="17.5" r="2.5"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-call.svg b/web/src/assets/icons/feather/phone-call.svg
new file mode 100644
index 0000000..8b86660
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-call.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-call"><path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-forwarded.svg b/web/src/assets/icons/feather/phone-forwarded.svg
new file mode 100644
index 0000000..aa21bef
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-forwarded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-forwarded"><polyline points="19 1 23 5 19 9"></polyline><line x1="15" y1="5" x2="23" y2="5"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-incoming.svg b/web/src/assets/icons/feather/phone-incoming.svg
new file mode 100644
index 0000000..b2d523a
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-incoming.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-incoming"><polyline points="16 2 16 8 22 8"></polyline><line x1="23" y1="1" x2="16" y2="8"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-missed.svg b/web/src/assets/icons/feather/phone-missed.svg
new file mode 100644
index 0000000..4950f09
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-missed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-missed"><line x1="23" y1="1" x2="17" y2="7"></line><line x1="17" y1="1" x2="23" y2="7"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-off.svg b/web/src/assets/icons/feather/phone-off.svg
new file mode 100644
index 0000000..4d00fb3
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-off"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"></path><line x1="23" y1="1" x2="1" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone-outgoing.svg b/web/src/assets/icons/feather/phone-outgoing.svg
new file mode 100644
index 0000000..fea27a3
--- /dev/null
+++ b/web/src/assets/icons/feather/phone-outgoing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone-outgoing"><polyline points="23 7 23 1 17 1"></polyline><line x1="16" y1="8" x2="23" y2="1"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/phone.svg b/web/src/assets/icons/feather/phone.svg
new file mode 100644
index 0000000..2a35154
--- /dev/null
+++ b/web/src/assets/icons/feather/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/pie-chart.svg b/web/src/assets/icons/feather/pie-chart.svg
new file mode 100644
index 0000000..b5bbe67
--- /dev/null
+++ b/web/src/assets/icons/feather/pie-chart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/play-circle.svg b/web/src/assets/icons/feather/play-circle.svg
new file mode 100644
index 0000000..8766dc7
--- /dev/null
+++ b/web/src/assets/icons/feather/play-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/play.svg b/web/src/assets/icons/feather/play.svg
new file mode 100644
index 0000000..fd76e30
--- /dev/null
+++ b/web/src/assets/icons/feather/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/plus-circle.svg b/web/src/assets/icons/feather/plus-circle.svg
new file mode 100644
index 0000000..4291ff0
--- /dev/null
+++ b/web/src/assets/icons/feather/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/plus-square.svg b/web/src/assets/icons/feather/plus-square.svg
new file mode 100644
index 0000000..c380e24
--- /dev/null
+++ b/web/src/assets/icons/feather/plus-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/plus.svg b/web/src/assets/icons/feather/plus.svg
new file mode 100644
index 0000000..703c5b7
--- /dev/null
+++ b/web/src/assets/icons/feather/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/pocket.svg b/web/src/assets/icons/feather/pocket.svg
new file mode 100644
index 0000000..a3b2561
--- /dev/null
+++ b/web/src/assets/icons/feather/pocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pocket"><path d="M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z"></path><polyline points="8 10 12 14 16 10"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/power.svg b/web/src/assets/icons/feather/power.svg
new file mode 100644
index 0000000..598308f
--- /dev/null
+++ b/web/src/assets/icons/feather/power.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-power"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/printer.svg b/web/src/assets/icons/feather/printer.svg
new file mode 100644
index 0000000..8a9a7ac
--- /dev/null
+++ b/web/src/assets/icons/feather/printer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/radio.svg b/web/src/assets/icons/feather/radio.svg
new file mode 100644
index 0000000..5abfcd1
--- /dev/null
+++ b/web/src/assets/icons/feather/radio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/refresh-ccw.svg b/web/src/assets/icons/feather/refresh-ccw.svg
new file mode 100644
index 0000000..10cff0e
--- /dev/null
+++ b/web/src/assets/icons/feather/refresh-ccw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-ccw"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/refresh-cw.svg b/web/src/assets/icons/feather/refresh-cw.svg
new file mode 100644
index 0000000..06c358d
--- /dev/null
+++ b/web/src/assets/icons/feather/refresh-cw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/repeat.svg b/web/src/assets/icons/feather/repeat.svg
new file mode 100644
index 0000000..c7657b0
--- /dev/null
+++ b/web/src/assets/icons/feather/repeat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/rewind.svg b/web/src/assets/icons/feather/rewind.svg
new file mode 100644
index 0000000..7b0fa3d
--- /dev/null
+++ b/web/src/assets/icons/feather/rewind.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rewind"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/rotate-ccw.svg b/web/src/assets/icons/feather/rotate-ccw.svg
new file mode 100644
index 0000000..ade5dc4
--- /dev/null
+++ b/web/src/assets/icons/feather/rotate-ccw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/rotate-cw.svg b/web/src/assets/icons/feather/rotate-cw.svg
new file mode 100644
index 0000000..83dca35
--- /dev/null
+++ b/web/src/assets/icons/feather/rotate-cw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/rss.svg b/web/src/assets/icons/feather/rss.svg
new file mode 100644
index 0000000..c9a1368
--- /dev/null
+++ b/web/src/assets/icons/feather/rss.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/save.svg b/web/src/assets/icons/feather/save.svg
new file mode 100644
index 0000000..46c7299
--- /dev/null
+++ b/web/src/assets/icons/feather/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/scissors.svg b/web/src/assets/icons/feather/scissors.svg
new file mode 100644
index 0000000..fd0647f
--- /dev/null
+++ b/web/src/assets/icons/feather/scissors.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-scissors"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/search.svg b/web/src/assets/icons/feather/search.svg
new file mode 100644
index 0000000..8710306
--- /dev/null
+++ b/web/src/assets/icons/feather/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/send.svg b/web/src/assets/icons/feather/send.svg
new file mode 100644
index 0000000..42ef2a2
--- /dev/null
+++ b/web/src/assets/icons/feather/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/server.svg b/web/src/assets/icons/feather/server.svg
new file mode 100644
index 0000000..54ce094
--- /dev/null
+++ b/web/src/assets/icons/feather/server.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-server"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/settings.svg b/web/src/assets/icons/feather/settings.svg
new file mode 100644
index 0000000..19c2726
--- /dev/null
+++ b/web/src/assets/icons/feather/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/share-2.svg b/web/src/assets/icons/feather/share-2.svg
new file mode 100644
index 0000000..09b1c7b
--- /dev/null
+++ b/web/src/assets/icons/feather/share-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/share.svg b/web/src/assets/icons/feather/share.svg
new file mode 100644
index 0000000..df38c14
--- /dev/null
+++ b/web/src/assets/icons/feather/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/shield-off.svg b/web/src/assets/icons/feather/shield-off.svg
new file mode 100644
index 0000000..18692dd
--- /dev/null
+++ b/web/src/assets/icons/feather/shield-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield-off"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"></path><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/shield.svg b/web/src/assets/icons/feather/shield.svg
new file mode 100644
index 0000000..c7c4841
--- /dev/null
+++ b/web/src/assets/icons/feather/shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/shopping-bag.svg b/web/src/assets/icons/feather/shopping-bag.svg
new file mode 100644
index 0000000..eaa39e8
--- /dev/null
+++ b/web/src/assets/icons/feather/shopping-bag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/shopping-cart.svg b/web/src/assets/icons/feather/shopping-cart.svg
new file mode 100644
index 0000000..17a40bf
--- /dev/null
+++ b/web/src/assets/icons/feather/shopping-cart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/shuffle.svg b/web/src/assets/icons/feather/shuffle.svg
new file mode 100644
index 0000000..8cfb5db
--- /dev/null
+++ b/web/src/assets/icons/feather/shuffle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/sidebar.svg b/web/src/assets/icons/feather/sidebar.svg
new file mode 100644
index 0000000..8ba817e
--- /dev/null
+++ b/web/src/assets/icons/feather/sidebar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/skip-back.svg b/web/src/assets/icons/feather/skip-back.svg
new file mode 100644
index 0000000..88d024e
--- /dev/null
+++ b/web/src/assets/icons/feather/skip-back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5" y1="19" x2="5" y2="5"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/skip-forward.svg b/web/src/assets/icons/feather/skip-forward.svg
new file mode 100644
index 0000000..f3fdac3
--- /dev/null
+++ b/web/src/assets/icons/feather/skip-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/slack.svg b/web/src/assets/icons/feather/slack.svg
new file mode 100644
index 0000000..5d97346
--- /dev/null
+++ b/web/src/assets/icons/feather/slack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/slash.svg b/web/src/assets/icons/feather/slash.svg
new file mode 100644
index 0000000..f4131b8
--- /dev/null
+++ b/web/src/assets/icons/feather/slash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slash"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/sliders.svg b/web/src/assets/icons/feather/sliders.svg
new file mode 100644
index 0000000..19c9385
--- /dev/null
+++ b/web/src/assets/icons/feather/sliders.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/smartphone.svg b/web/src/assets/icons/feather/smartphone.svg
new file mode 100644
index 0000000..0171a95
--- /dev/null
+++ b/web/src/assets/icons/feather/smartphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/smile.svg b/web/src/assets/icons/feather/smile.svg
new file mode 100644
index 0000000..24dc8a2
--- /dev/null
+++ b/web/src/assets/icons/feather/smile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/speaker.svg b/web/src/assets/icons/feather/speaker.svg
new file mode 100644
index 0000000..75d5ff9
--- /dev/null
+++ b/web/src/assets/icons/feather/speaker.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-speaker"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><circle cx="12" cy="14" r="4"></circle><line x1="12" y1="6" x2="12.01" y2="6"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/square.svg b/web/src/assets/icons/feather/square.svg
new file mode 100644
index 0000000..6eabc77
--- /dev/null
+++ b/web/src/assets/icons/feather/square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/star.svg b/web/src/assets/icons/feather/star.svg
new file mode 100644
index 0000000..bcdc31a
--- /dev/null
+++ b/web/src/assets/icons/feather/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/stop-circle.svg b/web/src/assets/icons/feather/stop-circle.svg
new file mode 100644
index 0000000..c10d9d4
--- /dev/null
+++ b/web/src/assets/icons/feather/stop-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-stop-circle"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/sun.svg b/web/src/assets/icons/feather/sun.svg
new file mode 100644
index 0000000..7f51b94
--- /dev/null
+++ b/web/src/assets/icons/feather/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/sunrise.svg b/web/src/assets/icons/feather/sunrise.svg
new file mode 100644
index 0000000..eff4b1e
--- /dev/null
+++ b/web/src/assets/icons/feather/sunrise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sunrise"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/sunset.svg b/web/src/assets/icons/feather/sunset.svg
new file mode 100644
index 0000000..a5a2221
--- /dev/null
+++ b/web/src/assets/icons/feather/sunset.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sunset"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="16 5 12 9 8 5"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/table.svg b/web/src/assets/icons/feather/table.svg
new file mode 100644
index 0000000..679bd57
--- /dev/null
+++ b/web/src/assets/icons/feather/table.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-table"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/tablet.svg b/web/src/assets/icons/feather/tablet.svg
new file mode 100644
index 0000000..9c80b40
--- /dev/null
+++ b/web/src/assets/icons/feather/tablet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tablet"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/tag.svg b/web/src/assets/icons/feather/tag.svg
new file mode 100644
index 0000000..7219b15
--- /dev/null
+++ b/web/src/assets/icons/feather/tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/target.svg b/web/src/assets/icons/feather/target.svg
new file mode 100644
index 0000000..be84b17
--- /dev/null
+++ b/web/src/assets/icons/feather/target.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/terminal.svg b/web/src/assets/icons/feather/terminal.svg
new file mode 100644
index 0000000..af459c0
--- /dev/null
+++ b/web/src/assets/icons/feather/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/thermometer.svg b/web/src/assets/icons/feather/thermometer.svg
new file mode 100644
index 0000000..33142cc
--- /dev/null
+++ b/web/src/assets/icons/feather/thermometer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thermometer"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/thumbs-down.svg b/web/src/assets/icons/feather/thumbs-down.svg
new file mode 100644
index 0000000..3e7bcd6
--- /dev/null
+++ b/web/src/assets/icons/feather/thumbs-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/thumbs-up.svg b/web/src/assets/icons/feather/thumbs-up.svg
new file mode 100644
index 0000000..226c44d
--- /dev/null
+++ b/web/src/assets/icons/feather/thumbs-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/toggle-left.svg b/web/src/assets/icons/feather/toggle-left.svg
new file mode 100644
index 0000000..240be29
--- /dev/null
+++ b/web/src/assets/icons/feather/toggle-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-left"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/toggle-right.svg b/web/src/assets/icons/feather/toggle-right.svg
new file mode 100644
index 0000000..fc6e81c
--- /dev/null
+++ b/web/src/assets/icons/feather/toggle-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-right"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/tool.svg b/web/src/assets/icons/feather/tool.svg
new file mode 100644
index 0000000..f3cbf3d
--- /dev/null
+++ b/web/src/assets/icons/feather/tool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/trash-2.svg b/web/src/assets/icons/feather/trash-2.svg
new file mode 100644
index 0000000..f24d55b
--- /dev/null
+++ b/web/src/assets/icons/feather/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/trash.svg b/web/src/assets/icons/feather/trash.svg
new file mode 100644
index 0000000..55650bd
--- /dev/null
+++ b/web/src/assets/icons/feather/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/trello.svg b/web/src/assets/icons/feather/trello.svg
new file mode 100644
index 0000000..b2f599b
--- /dev/null
+++ b/web/src/assets/icons/feather/trello.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trello"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><rect x="7" y="7" width="3" height="9"></rect><rect x="14" y="7" width="3" height="5"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/trending-down.svg b/web/src/assets/icons/feather/trending-down.svg
new file mode 100644
index 0000000..a9d4cfa
--- /dev/null
+++ b/web/src/assets/icons/feather/trending-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/trending-up.svg b/web/src/assets/icons/feather/trending-up.svg
new file mode 100644
index 0000000..52026a4
--- /dev/null
+++ b/web/src/assets/icons/feather/trending-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/triangle.svg b/web/src/assets/icons/feather/triangle.svg
new file mode 100644
index 0000000..274b652
--- /dev/null
+++ b/web/src/assets/icons/feather/triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/truck.svg b/web/src/assets/icons/feather/truck.svg
new file mode 100644
index 0000000..3389837
--- /dev/null
+++ b/web/src/assets/icons/feather/truck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/tv.svg b/web/src/assets/icons/feather/tv.svg
new file mode 100644
index 0000000..955bbff
--- /dev/null
+++ b/web/src/assets/icons/feather/tv.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tv"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/twitch.svg b/web/src/assets/icons/feather/twitch.svg
new file mode 100644
index 0000000..1706249
--- /dev/null
+++ b/web/src/assets/icons/feather/twitch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitch"><path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/twitter.svg b/web/src/assets/icons/feather/twitter.svg
new file mode 100644
index 0000000..f8886ec
--- /dev/null
+++ b/web/src/assets/icons/feather/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/type.svg b/web/src/assets/icons/feather/type.svg
new file mode 100644
index 0000000..c6b2de3
--- /dev/null
+++ b/web/src/assets/icons/feather/type.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/umbrella.svg b/web/src/assets/icons/feather/umbrella.svg
new file mode 100644
index 0000000..dc77c0c
--- /dev/null
+++ b/web/src/assets/icons/feather/umbrella.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-umbrella"><path d="M23 12a11.05 11.05 0 0 0-22 0zm-5 7a3 3 0 0 1-6 0v-7"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/underline.svg b/web/src/assets/icons/feather/underline.svg
new file mode 100644
index 0000000..044945d
--- /dev/null
+++ b/web/src/assets/icons/feather/underline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-underline"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/unlock.svg b/web/src/assets/icons/feather/unlock.svg
new file mode 100644
index 0000000..01dc359
--- /dev/null
+++ b/web/src/assets/icons/feather/unlock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/upload-cloud.svg b/web/src/assets/icons/feather/upload-cloud.svg
new file mode 100644
index 0000000..a1db297
--- /dev/null
+++ b/web/src/assets/icons/feather/upload-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/upload.svg b/web/src/assets/icons/feather/upload.svg
new file mode 100644
index 0000000..91eaff7
--- /dev/null
+++ b/web/src/assets/icons/feather/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/user-check.svg b/web/src/assets/icons/feather/user-check.svg
new file mode 100644
index 0000000..42f91b2
--- /dev/null
+++ b/web/src/assets/icons/feather/user-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-check"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/user-minus.svg b/web/src/assets/icons/feather/user-minus.svg
new file mode 100644
index 0000000..44b75f5
--- /dev/null
+++ b/web/src/assets/icons/feather/user-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/user-plus.svg b/web/src/assets/icons/feather/user-plus.svg
new file mode 100644
index 0000000..21460f6
--- /dev/null
+++ b/web/src/assets/icons/feather/user-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/user-x.svg b/web/src/assets/icons/feather/user-x.svg
new file mode 100644
index 0000000..0c41a48
--- /dev/null
+++ b/web/src/assets/icons/feather/user-x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-x"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/user.svg b/web/src/assets/icons/feather/user.svg
new file mode 100644
index 0000000..7bb5f29
--- /dev/null
+++ b/web/src/assets/icons/feather/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/users.svg b/web/src/assets/icons/feather/users.svg
new file mode 100644
index 0000000..aacf6b0
--- /dev/null
+++ b/web/src/assets/icons/feather/users.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/video-off.svg b/web/src/assets/icons/feather/video-off.svg
new file mode 100644
index 0000000..08ec697
--- /dev/null
+++ b/web/src/assets/icons/feather/video-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video-off"><path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/video.svg b/web/src/assets/icons/feather/video.svg
new file mode 100644
index 0000000..8ff156a
--- /dev/null
+++ b/web/src/assets/icons/feather/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/voicemail.svg b/web/src/assets/icons/feather/voicemail.svg
new file mode 100644
index 0000000..5d78a8e
--- /dev/null
+++ b/web/src/assets/icons/feather/voicemail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-voicemail"><circle cx="5.5" cy="11.5" r="4.5"></circle><circle cx="18.5" cy="11.5" r="4.5"></circle><line x1="5.5" y1="16" x2="18.5" y2="16"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/volume-1.svg b/web/src/assets/icons/feather/volume-1.svg
new file mode 100644
index 0000000..150e875
--- /dev/null
+++ b/web/src/assets/icons/feather/volume-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-1"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/volume-2.svg b/web/src/assets/icons/feather/volume-2.svg
new file mode 100644
index 0000000..03d521c
--- /dev/null
+++ b/web/src/assets/icons/feather/volume-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/volume-x.svg b/web/src/assets/icons/feather/volume-x.svg
new file mode 100644
index 0000000..be44240
--- /dev/null
+++ b/web/src/assets/icons/feather/volume-x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/volume.svg b/web/src/assets/icons/feather/volume.svg
new file mode 100644
index 0000000..53bfe15
--- /dev/null
+++ b/web/src/assets/icons/feather/volume.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/watch.svg b/web/src/assets/icons/feather/watch.svg
new file mode 100644
index 0000000..a1099da
--- /dev/null
+++ b/web/src/assets/icons/feather/watch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-watch"><circle cx="12" cy="12" r="7"></circle><polyline points="12 9 12 12 13.5 13.5"></polyline><path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/wifi-off.svg b/web/src/assets/icons/feather/wifi-off.svg
new file mode 100644
index 0000000..35eae43
--- /dev/null
+++ b/web/src/assets/icons/feather/wifi-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi-off"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/wifi.svg b/web/src/assets/icons/feather/wifi.svg
new file mode 100644
index 0000000..748c285
--- /dev/null
+++ b/web/src/assets/icons/feather/wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/wind.svg b/web/src/assets/icons/feather/wind.svg
new file mode 100644
index 0000000..82b3646
--- /dev/null
+++ b/web/src/assets/icons/feather/wind.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/x-circle.svg b/web/src/assets/icons/feather/x-circle.svg
new file mode 100644
index 0000000..94aad5e
--- /dev/null
+++ b/web/src/assets/icons/feather/x-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/x-octagon.svg b/web/src/assets/icons/feather/x-octagon.svg
new file mode 100644
index 0000000..8543198
--- /dev/null
+++ b/web/src/assets/icons/feather/x-octagon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/x-square.svg b/web/src/assets/icons/feather/x-square.svg
new file mode 100644
index 0000000..7677c38
--- /dev/null
+++ b/web/src/assets/icons/feather/x-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/x.svg b/web/src/assets/icons/feather/x.svg
new file mode 100644
index 0000000..7d5875c
--- /dev/null
+++ b/web/src/assets/icons/feather/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/youtube.svg b/web/src/assets/icons/feather/youtube.svg
new file mode 100644
index 0000000..c482438
--- /dev/null
+++ b/web/src/assets/icons/feather/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/zap-off.svg b/web/src/assets/icons/feather/zap-off.svg
new file mode 100644
index 0000000..c636f8b
--- /dev/null
+++ b/web/src/assets/icons/feather/zap-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap-off"><polyline points="12.41 6.75 13 2 10.57 4.92"></polyline><polyline points="18.57 12.91 21 10 15.66 10"></polyline><polyline points="8 8 3 14 12 14 11 22 16 16"></polyline><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/zap.svg b/web/src/assets/icons/feather/zap.svg
new file mode 100644
index 0000000..8fdafa9
--- /dev/null
+++ b/web/src/assets/icons/feather/zap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/zoom-in.svg b/web/src/assets/icons/feather/zoom-in.svg
new file mode 100644
index 0000000..da4572d
--- /dev/null
+++ b/web/src/assets/icons/feather/zoom-in.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/feather/zoom-out.svg b/web/src/assets/icons/feather/zoom-out.svg
new file mode 100644
index 0000000..fd678d7
--- /dev/null
+++ b/web/src/assets/icons/feather/zoom-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-out"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
\ No newline at end of file
diff --git a/web/src/assets/icons/isme/apifox.svg b/web/src/assets/icons/isme/apifox.svg
new file mode 100644
index 0000000..009cdf5
--- /dev/null
+++ b/web/src/assets/icons/isme/apifox.svg
@@ -0,0 +1,16 @@
+<svg
+  t="1710490574771"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="4141"
+  width="200"
+  height="200"
+>
+  <path
+    d="M1022.934187 429.44a446.122667 446.122667 0 0 0-19.456-100.437333 175.786667 175.786667 0 0 1-15.530667 31.701333 401.92 401.92 0 0 0-164.224-267.264A399.701333 399.701333 0 0 0 724.566187 41.770667a313.6 313.6 0 0 0-14.421334-4.778667 300.458667 300.458667 0 0 1 60.8 148.096c0.256 1.877333 0.469333 3.754667 0.64 5.674667a2.56 2.56 0 0 1 0 0.426666c0.213333 1.92 0.426667 3.882667 0.554667 5.845334v1.024a223.957333 223.957333 0 0 1 0.426667 5.845333 246.357333 246.357333 0 0 1 0.426666 10.026667 8.277333 8.277333 0 0 0 0 0.682666v6.997334a300.672 300.672 0 0 1-54.101333 172.458666 270.293333 270.293333 0 0 1 3.2 93.653334 263.552 263.552 0 0 0 49.664-17.109334 263.850667 263.850667 0 0 0 34.133333-18.773333 268.074667 268.074667 0 0 1 10.368 74.410667 269.525333 269.525333 0 0 1-2.986666 40.362666 266.197333 266.197333 0 0 0 68.906666-16.64c11.605333-4.522667 22.869333-9.813333 33.706667-15.914666a266.410667 266.410667 0 0 1 4.266667 47.701333 269.141333 269.141333 0 0 1-5.76 55.381333 266.752 266.752 0 0 0 81.322666-16.213333A446.165333 446.165333 0 0 0 1024.000853 464.213333a366.933333 366.933333 0 0 0-1.024-34.816z m-119.808 247.210667a242.56 242.56 0 0 1-16.64 0.512h-5.504a266.666667 266.666667 0 0 0 8.448-66.858667 269.653333 269.653333 0 0 0-1.706667-30.08 265.813333 265.813333 0 0 1-82.944 25.344 257.152 257.152 0 0 1-24.448 2.133333 264.618667 264.618667 0 0 0 4.906667-39.594666 276.352 276.352 0 0 0 0.341333-13.312 268.373333 268.373333 0 0 0-6.058667-56.832 265.984 265.984 0 0 1-90.453333 33.109333l-0.213333-0.298667a263.594667 263.594667 0 0 0 4.736-37.802666 239.658667 239.658667 0 0 0 0.426666-14.506667c0-16.128-1.450667-32.256-4.352-48.128a301.098667 301.098667 0 0 1-218.325333 93.354667 300.501333 300.501333 0 0 1-138.538667-33.621334 267.221333 267.221333 0 0 0 55.210667-29.226666 268.8 268.8 0 0 1-152.448-242.346667 268.629333 268.629333 0 0 1 4.352-48.426667 264.362667 264.362667 0 0 1 12.885333-46.421333 264.832 264.832 0 0 1 20.650667-42.752A267.221333 267.221333 0 0 1 305.664853 37.546667 521.045333 521.045333 0 0 0 191.14752 108.8 520.832 520.832 0 0 0 13.99552 391.722667 520.362667 520.362667 0 0 0 0.000853 512.042667a518.528 518.528 0 0 0 63.573334 249.642666 266.709333 266.709333 0 0 1 18.986666-73.088 497.450667 497.450667 0 0 0 366.293334 298.410667 266.069333 266.069333 0 0 1-34.304-59.050667 469.674667 469.674667 0 0 0 133.376 22.784c4.010667 0 8.021333 0.128 12.074666 0.128a468.650667 468.650667 0 0 0 207.658667-48.170666 263.509333 263.509333 0 0 1-30.890667-20.394667 448.298667 448.298667 0 0 0 184.32-132.010667 446.677333 446.677333 0 0 0 57.856-89.301333 267.008 267.008 0 0 1-75.818666 15.616z"
+    fill="#F44A53"
+    p-id="4142"
+  ></path>
+</svg>
diff --git a/web/src/assets/icons/isme/awesome.svg b/web/src/assets/icons/isme/awesome.svg
new file mode 100644
index 0000000..cfaab8b
--- /dev/null
+++ b/web/src/assets/icons/isme/awesome.svg
@@ -0,0 +1 @@
+<svg t="1697877684615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19414" width="200" height="200"><path d="M810.6496 384l-53.3504-117.3504L640 213.3504l117.2992-53.3504L810.6496 42.6496l53.3504 117.3504 117.2992 53.3504-117.2992 53.2992L810.6496 384z m0 597.3504l-53.3504-117.3504-117.2992-53.3504 117.2992-53.2992 53.3504-117.3504 53.3504 117.3504 117.2992 53.2992-117.2992 53.3504-53.3504 117.3504z m-426.6496-128l-106.7008-234.7008L42.6496 512l234.6496-106.6496L384 170.6496l106.6496 234.7008L725.2992 512l-234.6496 106.6496L384 853.3504z m0-206.9504l42.6496-91.7504L518.4 512l-91.7504-42.6496L384 377.6l-42.7008 91.7504L249.6 512l91.6992 42.6496 42.7008 91.7504z" p-id="19415"></path></svg>
diff --git a/web/src/assets/icons/isme/dialog.svg b/web/src/assets/icons/isme/dialog.svg
new file mode 100644
index 0000000..809330d
--- /dev/null
+++ b/web/src/assets/icons/isme/dialog.svg
@@ -0,0 +1 @@
+<svg t="1699366856026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12522" width="32" height="32"><path d="M213.333333 256h85.333334v85.333333H213.333333zM384 256h85.333333v85.333333H384z" fill="#09121F" p-id="12523"></path><path d="M896 128H128c-25.6 0-42.666667 17.066667-42.666667 42.666667v640c0 25.6 17.066667 42.666667 42.666667 42.666666h768c25.6 0 42.666667-17.066667 42.666667-42.666666V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667z m-42.666667 640H170.666667v-298.666667h682.666666v298.666667z m0-384H170.666667V213.333333h682.666666v170.666667z" fill="#09121F" p-id="12524"></path></svg>
diff --git a/web/src/assets/icons/isme/docs.svg b/web/src/assets/icons/isme/docs.svg
new file mode 100644
index 0000000..907ac11
--- /dev/null
+++ b/web/src/assets/icons/isme/docs.svg
@@ -0,0 +1,15 @@
+<svg
+  t="1710490291582"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="3145"
+  width="200"
+  height="200"
+>
+  <path
+    d="M476.811454 234.638085S575.875862 38.761663 627.148553 9.152912A275.775 275.775 0 0 1 707.702374 0.204763c22.66728 0.839529 111.186386 4.218121 152.753304 63.804195a84.403367 84.403367 0 0 1 4.914315 7.719571 189.938291 189.938291 0 0 1-16.196764 145.996121 204.517427 204.517427 0 0 1-131.048411 98.900597l-179.822992 34.154493a62.616569 62.616569 0 0 0 51.190785 47.83267l163.953849-2.313824a443.353156 443.353156 0 0 1-66.302306 69.373753c-65.524206 55.081285-131.048411 85.242896-177.77536 91.140075-34.400208 2.3343-68.00184-1.474295-102.012998-2.190966 0 0 17.077246 96.812014 172.00104 79.734768a152.978544 152.978544 0 0 1-17.363915 47.382191 166.861485 166.861485 0 0 1-111.432102 79.243336c-52.624128 4.607171-103.917295 2.047631-155.88618 3.173829 0 0-52.378412 189.037333-84.260034 259.639665H176.956308s14.988662-92.143414 47.976004-262.956828A311.731408 311.731408 0 0 1 170.567698 423.634466s28.032074 159.838109 124.905517 181.481573c-7.350997-129.881261-43.55312-267.420664-15.930573-385.568997a382.907077 382.907077 0 0 1 50.105541-76.294747 400.844328 400.844328 0 0 1 166.533864-115.875463s-87.679578 63.763243-66.05659 214.100342z"
+    p-id="3146"
+  ></path>
+</svg>
diff --git a/web/src/assets/icons/isme/gitee.svg b/web/src/assets/icons/isme/gitee.svg
new file mode 100644
index 0000000..5896c65
--- /dev/null
+++ b/web/src/assets/icons/isme/gitee.svg
@@ -0,0 +1 @@
+<svg t="1697982393842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3088" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="3089"></path></svg>
diff --git a/web/src/assets/icons/isme/naiveui.svg b/web/src/assets/icons/isme/naiveui.svg
new file mode 100644
index 0000000..c236f7f
--- /dev/null
+++ b/web/src/assets/icons/isme/naiveui.svg
@@ -0,0 +1,37 @@
+<svg
+  t="1710898099143"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="2321"
+  width="200"
+  height="200"
+>
+  <path
+    d="M335.657769 831.865977c0 10.134611 0 20.269222 0.202692 30.403833 0 2.189076 0 4.337614-0.202692 6.405074zM688.017924 152.765964v345.387543c-0.243231-110.426721-0.77023-220.893981-0.891846-331.320703a117.561487 117.561487 0 0 1 0.891846-14.06684z"
+    fill="#93CEAA"
+    p-id="2322"
+  ></path>
+  <path
+    d="M687.085539 508.49081a68.50997 68.50997 0 0 0 0.932385-10.337303v322.929244l-169.207465-154.73524-85.130733-77.631121-51.240593-47.105671-22.782605-20.796222-8.391458-7.661766-0.608077-0.527c-2.067461-1.662076-4.053844-3.405229-5.959151-4.986228s-3.567383-2.959306-5.837536-2.270153a5.067305 5.067305 0 0 0-3.202537 3.64846v-304.03833l1.743153 1.580999 34.741446 31.417294c18.282838 16.215378 36.72783 32.430755 54.97013 48.646133q38.916906 34.863062 77.590582 70.131508 30.606525 27.809373 61.131974 55.699822c24.323066 22.174529 48.321825 44.592288 72.644891 66.604664 10.94538 9.89138 21.971837 19.580068 33.038832 29.309295 2.35123 2.067461 4.661921 4.053844 7.053689 6.161843a5.959151 5.959151 0 0 0 5.675382 0.729692 4.702459 4.702459 0 0 0 2.270153-2.918768c0.324308-1.540461 0.324308-2.59446 0.567538-3.851152z"
+    fill="#4C9717"
+    p-id="2323"
+  ></path>
+  <path
+    d="M335.292923 510.801501a63.523742 63.523742 0 0 0-0.405385 11.107534c0 103.373032 0 206.746064 0.770231 310.078558v36.808907a60.199589 60.199589 0 0 1-23.796067 44.957134c-27.60668 23.066375-53.348592 48.281287-79.98235 72.523276-11.148072 10.134611-22.215067 20.269222-33.687447 30.160603s-40.984367 11.107534-57.321359-2.553922a318.145708 318.145708 0 0 1-34.619832-35.106293 51.727054 51.727054 0 0 1-15.120839-35.227908c0-2.918768-0.243231-6.121305 0-9.648149 0-6.080767 0-12.161533 0.202692-18.282838 0.202692-17.431531 0-34.9036 0-52.335132V294.772133a51.240593 51.240593 0 0 1 1.540461-12.891225 74.671814 74.671814 0 0 1 4.053844-10.702149 89.833192 89.833192 0 0 1 8.188766-14.512763l64.86151-64.86151 41.308675-41.268136a31.78214 31.78214 0 0 1 7.459073-5.594306 32.633447 32.633447 0 0 1 13.012841-4.053844 56.145745 56.145745 0 0 1 39.362829 7.256381 55.091745 55.091745 0 0 1 8.472535 6.364536l56.064668 50.348748v304.038329a13.701994 13.701994 0 0 0-0.364846 1.905307z"
+    fill="#5FBC21"
+    p-id="2324"
+  ></path>
+  <path
+    d="M335.292923 510.801501a13.701994 13.701994 0 0 1 0.364846-1.662076v322.726552c-0.608077-103.373032-0.567538-206.746064-0.770231-310.078558a63.523742 63.523742 0 0 1 0.405385-10.985918z"
+    fill="#E8CEAA"
+    opacity=".6"
+    p-id="2325"
+  ></path>
+  <path
+    d="M924.357052 758.937317l-119.142487 109.453798a15.201916 15.201916 0 0 1-1.459384 0.972923l-0.445923 0.324308-0.810769 0.486461a56.753822 56.753822 0 0 1-67.942432-6.688843l-7.175304-6.283459-39.524983-36.119754V152.765964c0.648615-5.634844 1.621538-11.269687 2.716076-16.782916 2.837691-14.391148 15.485686-21.525914 25.133835-30.525448 20.958376-19.458453 42.565366-38.187214 63.929126-57.240283 14.715455-13.134456 29.390372-26.30945 44.227442-39.362829 12.931764-11.391303 37.984522-10.823765 50.146056-3.770075a40.984367 40.984367 0 0 1 8.431996 6.526689l13.701994 13.215533 11.066995 10.580534 10.094073 9.769765a46.416518 46.416518 0 0 1 7.215843 8.472535 47.551595 47.551595 0 0 1 6.891535 26.187834c-0.202692 59.429359 0.243231 118.858718 0.364846 178.369154q0.364846 151.411088 0.648615 302.822176 0 77.590582 0.283769 155.140625v7.094228c0.608077 15.404609 0.283769 25.579758-8.350919 35.673831z"
+    fill="#5FBC21"
+    p-id="2326"
+  ></path>
+</svg>
diff --git a/web/src/assets/images/404.webp b/web/src/assets/images/404.webp
new file mode 100644
index 0000000..3482bf9
Binary files /dev/null and b/web/src/assets/images/404.webp differ
diff --git a/web/src/assets/images/isme.png b/web/src/assets/images/isme.png
new file mode 100644
index 0000000..6a2acca
Binary files /dev/null and b/web/src/assets/images/isme.png differ
diff --git a/web/src/assets/images/login_banner.webp b/web/src/assets/images/login_banner.webp
new file mode 100644
index 0000000..2bc7cad
Binary files /dev/null and b/web/src/assets/images/login_banner.webp differ
diff --git a/web/src/assets/images/login_bg.webp b/web/src/assets/images/login_bg.webp
new file mode 100644
index 0000000..2a9df19
Binary files /dev/null and b/web/src/assets/images/login_bg.webp differ
diff --git a/web/src/assets/images/logo.png b/web/src/assets/images/logo.png
new file mode 100644
index 0000000..187ff0b
Binary files /dev/null and b/web/src/assets/images/logo.png differ
diff --git a/web/src/components/common/AppCard.vue b/web/src/components/common/AppCard.vue
new file mode 100644
index 0000000..358cf4c
--- /dev/null
+++ b/web/src/components/common/AppCard.vue
@@ -0,0 +1,19 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:04
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="auto-bg" :class="{ 'card-border': bordered }">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  bordered: Boolean,
+})
+</script>
diff --git a/web/src/components/common/AppPage.vue b/web/src/components/common/AppPage.vue
new file mode 100644
index 0000000..31881b8
--- /dev/null
+++ b/web/src/components/common/AppPage.vue
@@ -0,0 +1,33 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:12
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
+    <transition name="fade-slide" mode="out-in" appear>
+      <main :class="{ 'flex-1': full }" class="m-12">
+        <slot />
+      </main>
+    </transition>
+    <slot v-if="$slots.footer" name="footer" />
+    <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <n-back-top :bottom="20" />
+  </main>
+</template>
+
+<script setup>
+defineProps({
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
diff --git a/web/src/components/common/CommonPage.vue b/web/src/components/common/CommonPage.vue
new file mode 100644
index 0000000..1e3c423
--- /dev/null
+++ b/web/src/components/common/CommonPage.vue
@@ -0,0 +1,76 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:21
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
+    <div class="h-full flex-col">
+      <AppCard
+        v-if="showHeader"
+        class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
+        border-b="1px solid light_border dark:dark_border"
+      >
+        <slot v-if="$slots.header" name="header" />
+        <template v-else>
+          <div class="flex items-center">
+            <slot v-if="$slots['title-prefix']" name="title-prefix" />
+            <template v-else-if="back">
+              <div
+                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
+                @click="router.back()"
+              >
+                <i class="i-material-symbols:arrow-left-alt" />
+                <span class="ml-4">返回</span>
+              </div>
+            </template>
+            <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
+            <h2 class="font-normal">
+              {{ title ?? route.meta?.title }}
+            </h2>
+            <slot name="title-suffix" />
+          </div>
+          <slot name="action" />
+        </template>
+      </AppCard>
+      <transition name="fade-slide" mode="out-in" appear>
+        <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
+          <slot />
+        </AppCard>
+      </transition>
+    </div>
+  </main>
+
+  <footer class="bg-#f5f6fb dark:bg-#121212">
+    <slot v-if="$slots.footer" name="footer" />
+    <AppCard v-else-if="showFooter" class="py-12">
+      <TheFooter />
+    </AppCard>
+  </footer>
+</template>
+
+<script setup>
+defineProps({
+  back: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: undefined,
+  },
+})
+const route = useRoute()
+const router = useRouter()
+</script>
diff --git a/web/src/components/common/LayoutSetting.vue b/web/src/components/common/LayoutSetting.vue
new file mode 100644
index 0000000..137493b
--- /dev/null
+++ b/web/src/components/common/LayoutSetting.vue
@@ -0,0 +1,102 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:49:53
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div>
+    <n-tooltip trigger="hover" placement="left">
+      <template #trigger>
+        <div class="f-c-c rounded-4 bg-primary p-8" @click="modalRef.open()">
+          <i class="i-fe:settings cursor-pointer bg-white text-20" />
+        </div>
+      </template>
+      布局设置
+    </n-tooltip>
+
+    <MeModal ref="modalRef" title="布局设置" :show-footer="false" width="600px">
+      <n-space justify="space-between">
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('simple')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="60" />
+            </div>
+          </div>
+          <n-button
+            class="mt-12"
+            size="small"
+            :type="appStore.layout === 'simple' ? 'primary' : ''"
+            ghost
+          >
+            简约
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('normal')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="10" />
+              <n-skeleton class="mt-4" :width="80" :height="46" />
+            </div>
+          </div>
+          <n-button
+            class="mt-12"
+            size="small"
+            :type="appStore.layout === 'normal' ? 'primary' : ''"
+            ghost
+          >
+            通用
+          </n-button>
+        </div>
+
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('full')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="6" />
+              <n-skeleton class="mt-4" :width="80" :height="4" />
+              <n-skeleton class="mt-4" :width="80" :height="42" />
+            </div>
+          </div>
+          <n-button
+            class="mt-12"
+            size="small"
+            :type="appStore.layout === 'full' ? 'primary' : ''"
+            ghost
+          >
+            全面
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('empty')">
+          <div class="flex">
+            <n-skeleton :width="104" :height="60" />
+          </div>
+          <n-button
+            class="mt-12"
+            size="small"
+            :type="appStore.layout === 'empty' ? 'primary' : ''"
+            ghost
+          >
+            空白
+          </n-button>
+        </div>
+      </n-space>
+      <p class="mt-16 opacity-50">
+        注: 此设置仅对未设置layout或者设置成跟随系统的页面有效，菜单设置的layout优先级最高
+      </p>
+    </MeModal>
+  </div>
+</template>
+
+<script setup>
+import { MeModal } from '@/components'
+import { useAppStore } from '@/store'
+import { useModal } from '@/composables'
+
+const appStore = useAppStore()
+const [modalRef] = useModal()
+</script>
diff --git a/web/src/components/common/TheFooter.vue b/web/src/components/common/TheFooter.vue
new file mode 100644
index 0000000..e2cf27e
--- /dev/null
+++ b/web/src/components/common/TheFooter.vue
@@ -0,0 +1,24 @@
+<!--------------------------------
+ - @Description: 底部
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:42:33
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <footer class="f-c-c text-14 text-gray-500">
+    <p>
+      Copyright © 2023
+      <a
+        href="https://github.com/zclzone"
+        target="__blank"
+        class="transition"
+        hover="decoration-underline color-primary"
+      >
+        Ronnie Zhang(大脸怪)
+      </a>
+    </p>
+  </footer>
+</template>
diff --git a/web/src/components/common/TheLogo.vue b/web/src/components/common/TheLogo.vue
new file mode 100644
index 0000000..e5a8420
--- /dev/null
+++ b/web/src/components/common/TheLogo.vue
@@ -0,0 +1,12 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/03/04 16:09:47
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+<template>
+  <div class="h-40 w-40 rounded-4 bg-primary p-1/100">
+    <img src="@/assets/images/isme.png" alt="Logo">
+  </div>
+</template>
diff --git a/web/src/components/common/ThemeSetting.vue b/web/src/components/common/ThemeSetting.vue
new file mode 100644
index 0000000..55c5cd1
--- /dev/null
+++ b/web/src/components/common/ThemeSetting.vue
@@ -0,0 +1,23 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <n-color-picker
+        class="mr-16 h-32 w-32"
+        :value="appStore.primaryColor"
+        :swatches="primaryColors"
+        :on-update:value="(v) => appStore.setPrimaryColor(v)"
+        :render-label="() => ''"
+      />
+    </template>
+    设置主题色
+  </n-tooltip>
+</template>
+
+<script setup>
+import { getPresetColors } from '@arco-design/color'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+
+const primaryColors = Object.entries(getPresetColors()).map(([, value]) => value.primary)
+</script>
diff --git a/web/src/components/common/ToggleTheme.vue b/web/src/components/common/ToggleTheme.vue
new file mode 100644
index 0000000..ca97e19
--- /dev/null
+++ b/web/src/components/common/ToggleTheme.vue
@@ -0,0 +1,44 @@
+<template>
+  <i
+    class="mr-16 cursor-pointer"
+    :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
+    @click="toggleDark"
+  />
+</template>
+
+<script setup>
+import { useDark, useToggle } from '@vueuse/core'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+const isDark = useDark()
+async function toggleDark({ clientX, clientY }) {
+  function handler() {
+    appStore.toggleDark()
+    useToggle(isDark)()
+  }
+
+  if (!document.startViewTransition) {
+    return handler()
+  }
+
+  const clipPath = [
+    `circle(0px at ${clientX}px ${clientY}px)`,
+    `circle(${Math.hypot(
+      Math.max(clientX, window.innerWidth - clientX),
+      Math.max(clientY, window.innerHeight - clientY),
+    )}px at ${clientX}px ${clientY}px)`,
+  ]
+
+  await document.startViewTransition(handler).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 500,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
+    },
+  )
+}
+</script>
diff --git a/web/src/components/common/index.js b/web/src/components/common/index.js
new file mode 100644
index 0000000..14e66b2
--- /dev/null
+++ b/web/src/components/common/index.js
@@ -0,0 +1,6 @@
+export { default as AppCard } from './AppCard.vue'
+export { default as TheFooter } from './TheFooter.vue'
+export { default as AppPage } from './AppPage.vue'
+export { default as CommonPage } from './CommonPage.vue'
+export { default as LayoutSetting } from './LayoutSetting.vue'
+export { default as ToggleTheme } from './ToggleTheme.vue'
diff --git a/web/src/components/index.js b/web/src/components/index.js
new file mode 100644
index 0000000..8621d75
--- /dev/null
+++ b/web/src/components/index.js
@@ -0,0 +1,2 @@
+export * from './common'
+export * from './me'
diff --git a/web/src/components/me/crud/QueryItem.vue b/web/src/components/me/crud/QueryItem.vue
new file mode 100644
index 0000000..01ba98f
--- /dev/null
+++ b/web/src/components/me/crud/QueryItem.vue
@@ -0,0 +1,35 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:48
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="flex items-center">
+    <label v-if="label || label === 0" class="flex-shrink-0" :style="{ width: `${labelWidth}px` }">
+      {{ label }}
+    </label>
+    <div :style="{ width: `${contentWidth}px` }" class="flex-shrink-0">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  labelWidth: {
+    type: Number,
+    default: 80,
+  },
+  contentWidth: {
+    type: Number,
+    default: 220,
+  },
+})
+</script>
diff --git a/web/src/components/me/crud/index.vue b/web/src/components/me/crud/index.vue
new file mode 100644
index 0000000..ae2e60a
--- /dev/null
+++ b/web/src/components/me/crud/index.vue
@@ -0,0 +1,204 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:42
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
+    <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
+      <n-scrollbar x-scrollable>
+        <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
+          <slot />
+        </n-space>
+      </n-scrollbar>
+      <div class="flex-shrink-0 p-10">
+        <n-button ghost type="primary" @click="handleReset">
+          <i class="i-fe:rotate-ccw mr-4" />
+          重置
+        </n-button>
+        <n-button attr-type="submit" class="ml-20" type="primary">
+          <i class="i-fe:search mr-4" />
+          搜索
+        </n-button>
+
+        <template v-if="expand">
+          <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
+            <i class="i-fe:chevrons-down ml-4" />
+            展开
+          </n-button>
+          <n-button v-else text type="primary" @click="toggleExpand">
+            <i class="i-fe:chevrons-up ml-4" />
+            收起
+          </n-button>
+        </template>
+      </div>
+    </form>
+  </AppCard>
+
+  <NDataTable
+    :remote="remote"
+    :loading="loading"
+    :scroll-x="scrollX"
+    :columns="columns"
+    :data="tableData"
+    :row-key="(row) => row[rowKey]"
+    :pagination="isPagination ? pagination : false"
+    @update:checked-row-keys="onChecked"
+    @update:page="onPageChange"
+  />
+</template>
+
+<script setup>
+import { NDataTable } from 'naive-ui'
+import { utils, writeFile } from 'xlsx'
+
+const props = defineProps({
+  /**
+   * @remote true: 后端分页  false： 前端分页
+   */
+  remote: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @isPagination 是否分页
+   */
+  isPagination: {
+    type: Boolean,
+    default: true,
+  },
+  scrollX: {
+    type: Number,
+    default: 1200,
+  },
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  /** queryBar中的参数 */
+  queryItems: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /**
+   * ! 约定接口入参出参
+   * 分页模式需约定分页接口入参
+   *    @pageSize 分页参数：一页展示多少条，默认10
+   *    @pageNo   分页参数：页码，默认1
+   * 需约定接口出参
+   *    @pageData 分页模式必须,非分页模式如果没有pageData则取上一层data
+   *    @total    分页模式必须，非分页模式如果没有total则取上一层data.length
+   */
+  getData: {
+    type: Function,
+    required: true,
+  },
+  /** 是否支持展开 */
+  expand: Boolean,
+})
+
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const loading = ref(false)
+const initQuery = { ...props.queryItems }
+const tableData = ref([])
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  prefix({ itemCount }) {
+    return `共 ${itemCount} 条数据`
+  },
+})
+
+// 是否展开
+const isExpanded = ref(false)
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+
+async function handleQuery() {
+  try {
+    loading.value = true
+    let paginationParams = {}
+    // 如果非分页模式或者使用前端分页,则无需传分页参数
+    if (props.isPagination && props.remote) {
+      paginationParams = { pageNo: pagination.page, pageSize: pagination.pageSize }
+    }
+    const { data } = await props.getData({
+      ...props.queryItems,
+      ...paginationParams,
+    })
+    tableData.value = data?.pageData || data
+    pagination.itemCount = data.total ?? data.length
+    if (pagination.itemCount && !tableData.value.length && pagination.page > 1) {
+      // 如果当前页数据为空，且总条数不为0，则返回上一页数据
+      onPageChange(pagination.page - 1)
+    }
+  }
+  catch (error) {
+    tableData.value = []
+    pagination.itemCount = 0
+  }
+  finally {
+    emit('onDataChange', tableData.value)
+    loading.value = false
+  }
+}
+
+function handleSearch(keepCurrentPage = false) {
+  if (keepCurrentPage) {
+    handleQuery()
+  }
+  else {
+    onPageChange(1)
+  }
+}
+async function handleReset() {
+  const queryItems = { ...props.queryItems }
+  for (const key in queryItems) {
+    queryItems[key] = null
+  }
+  emit('update:queryItems', { ...queryItems, ...initQuery })
+  await nextTick()
+  pagination.page = 1
+  handleQuery()
+}
+function onPageChange(currentPage) {
+  pagination.page = currentPage
+  if (props.remote) {
+    handleQuery()
+  }
+}
+function onChecked(rowKeys) {
+  if (props.columns.some(item => item.type === 'selection')) {
+    emit('onChecked', rowKeys)
+  }
+}
+function handleExport(columns = props.columns, data = tableData.value) {
+  if (!data?.length)
+    return $message.warning('没有数据')
+  const columnsData = columns.filter(item => !!item.title && !item.hideInExcel)
+  const thKeys = columnsData.map(item => item.key)
+  const thData = columnsData.map(item => item.title)
+  const trData = data.map(item => thKeys.map(key => item[key]))
+  const sheet = utils.aoa_to_sheet([thData, ...trData])
+  const workBook = utils.book_new()
+  utils.book_append_sheet(workBook, sheet, '数据报表')
+  writeFile(workBook, '数据报表.xlsx')
+}
+
+defineExpose({
+  handleSearch,
+  handleReset,
+  handleExport,
+})
+</script>
diff --git a/web/src/components/me/index.js b/web/src/components/me/index.js
new file mode 100644
index 0000000..795b613
--- /dev/null
+++ b/web/src/components/me/index.js
@@ -0,0 +1,3 @@
+export { default as MeModal } from './modal/index.vue'
+export { default as MeCrud } from './crud/index.vue'
+export { default as MeQueryItem } from './crud/QueryItem.vue'
diff --git a/web/src/components/me/modal/index.vue b/web/src/components/me/modal/index.vue
new file mode 100644
index 0000000..40b2585
--- /dev/null
+++ b/web/src/components/me/modal/index.vue
@@ -0,0 +1,191 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/01/13 17:41:38
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-modal
+    v-model:show="show"
+    class="modal-box"
+    :style="{ width: modalOptions.width, ...modalOptions.modalStyle }"
+    :preset="undefined"
+    size="huge"
+    :bordered="false"
+    @after-leave="onAfterLeave"
+  >
+    <n-card :style="modalOptions.contentStyle" :closable="modalOptions.closable" @close="close()">
+      <template #header>
+        <header class="modal-header">
+          {{ modalOptions.title }}
+        </header>
+      </template>
+      <slot />
+
+      <!-- 底部按钮 -->
+      <template #footer>
+        <slot v-if="$slots.footer" name="footer" />
+        <footer v-else-if="modalOptions.showFooter" class="flex justify-end">
+          <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
+            {{ modalOptions.cancelText }}
+          </n-button>
+          <n-button
+            v-if="modalOptions.showOk"
+            type="primary"
+            :loading="modalOptions.okLoading"
+            class="ml-20"
+            @click="handleOk()"
+          >
+            {{ modalOptions.okText }}
+          </n-button>
+        </footer>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+import { initDrag } from './utils'
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '800px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  okText: {
+    type: String,
+    default: '确定',
+  },
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  showOk: {
+    type: Boolean,
+    default: true,
+  },
+  modalStyle: {
+    type: Object,
+    default: () => {},
+  },
+  contentStyle: {
+    type: Object,
+    default: () => {},
+  },
+  onOk: {
+    type: Function,
+    default: () => {},
+  },
+  onCancel: {
+    type: Function,
+    default: () => {},
+  },
+})
+// 声明一个show变量，用于控制模态框的显示与隐藏
+const show = ref(false)
+// 声明一个modalOptions变量，用于存储模态框的配置信息
+const modalOptions = ref({})
+
+const okLoading = computed({
+  get() {
+    return !!modalOptions.value?.okLoading
+  },
+  set(v) {
+    if (modalOptions.value) {
+      modalOptions.value.okLoading = v
+    }
+  },
+})
+
+// 打开模态框
+async function open(options = {}) {
+  // 将props和options合并赋值给modalOptions
+  modalOptions.value = { ...props, ...options }
+
+  // 将show的值设置为true
+  show.value = true
+  await nextTick()
+  initDrag(
+    Array.prototype.at.call(document.querySelectorAll('.modal-header'), -1),
+    Array.prototype.at.call(document.querySelectorAll('.modal-box'), -1),
+  )
+}
+
+// 定义一个close函数，用于关闭模态框
+function close() {
+  show.value = false
+}
+
+// 定义一个handleOk函数，用于处理模态框确定操作
+async function handleOk(data) {
+  // 如果modalOptions中没有onOk函数，则直接关闭模态框
+  if (typeof modalOptions.value.onOk !== 'function') {
+    return close()
+  }
+  try {
+    // 调用onOk函数，传入data参数
+    const res = await modalOptions.value.onOk(data)
+    // 如果onOk函数的返回值不为false，则关闭模态框
+    res !== false && close()
+  }
+  catch (error) {
+    okLoading.value = false
+    console.error(error)
+  }
+}
+
+// 定义一个handleCancel函数，用于处理模态框取消操作
+async function handleCancel(data) {
+  // 如果modalOptions中没有onCancel函数，则直接关闭模态框
+  if (typeof modalOptions.value.onCancel !== 'function') {
+    return close()
+  }
+  try {
+    // 调用onCancel函数，传入data参数
+    const res = await modalOptions.value.onCancel(data)
+
+    // 如果onCancel函数的返回值不为false，则关闭模态框
+    res !== false && close()
+  }
+  catch (error) {
+    okLoading.value = false
+    console.error(error)
+  }
+}
+
+async function onAfterLeave() {
+  await nextTick()
+  initDrag(
+    Array.prototype.at.call(document.querySelectorAll('.modal-header'), -1),
+    Array.prototype.at.call(document.querySelectorAll('.modal-box'), -1),
+  )
+}
+
+// 定义一个defineExpose函数，用于暴露open、close、handleOk、handleCancel函数
+defineExpose({
+  open,
+  close,
+  handleOk,
+  handleCancel,
+  okLoading,
+  options: modalOptions,
+})
+</script>
diff --git a/web/src/components/me/modal/utils.js b/web/src/components/me/modal/utils.js
new file mode 100644
index 0000000..dcba865
--- /dev/null
+++ b/web/src/components/me/modal/utils.js
@@ -0,0 +1,72 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2024/01/13 17:41:26
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+// 获取元素的CSS样式
+function getCss(element, key) {
+  return element.currentStyle
+    ? element.currentStyle[key]
+    : window.getComputedStyle(element, null)[key]
+}
+
+// 初始化拖拽
+export function initDrag(bar, box) {
+  if (!bar || !box)
+    return
+  const params = {
+    left: 0,
+    top: 0,
+    currentX: 0,
+    currentY: 0,
+    flag: false,
+  }
+
+  if (getCss(box, 'left') !== 'auto') {
+    params.left = getCss(box, 'left')
+  }
+  if (getCss(box, 'top') !== 'auto') {
+    params.top = getCss(box, 'top')
+  }
+
+  // 设置触发拖动元素的鼠标样式为移动图标
+  bar.style.cursor = 'move'
+  // 鼠标按下事件处理函数
+  bar.onmousedown = function (e) {
+    params.flag = true // 设置拖拽标志为true
+    e.preventDefault() // 阻止默认事件
+    params.currentX = e.clientX // 鼠标当前位置的X坐标
+    params.currentY = e.clientY // 鼠标当前位置的Y坐标
+  }
+  document.onmouseup = function () {
+    params.flag = false // 设置拖拽标志为false
+    if (getCss(box, 'left') !== 'auto') {
+      params.left = getCss(box, 'left')
+    }
+    if (getCss(box, 'top') !== 'auto') {
+      params.top = getCss(box, 'top')
+    }
+  }
+  document.onmousemove = function (e) {
+    if (e.target !== bar && !params.flag)
+      return
+
+    e.preventDefault() // 阻止默认事件
+    // 如果拖拽标志为true
+    if (params.flag) {
+      const nowX = e.clientX // 鼠标当前位置的X坐标
+      const nowY = e.clientY // 鼠标当前位置的Y坐标
+      const disX = nowX - params.currentX // 鼠标移动的X距离
+      const disY = nowY - params.currentY // 鼠标移动的Y距离
+
+      const left = Number.parseInt(params.left) + disX // 盒子元素的新left值
+      const top = Number.parseInt(params.top) + disY // 盒子元素的新top值
+
+      box.style.left = `${left}px`
+      box.style.top = `${top}px`
+    }
+  }
+}
diff --git a/web/src/composables/index.js b/web/src/composables/index.js
new file mode 100644
index 0000000..2e9b5a1
--- /dev/null
+++ b/web/src/composables/index.js
@@ -0,0 +1,4 @@
+export * from './useCrud'
+export * from './useForm'
+export * from './useModal'
+export * from './useAliveData'
diff --git a/web/src/composables/useAliveData.js b/web/src/composables/useAliveData.js
new file mode 100644
index 0000000..bcc2f06
--- /dev/null
+++ b/web/src/composables/useAliveData.js
@@ -0,0 +1,30 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:28
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+const lastDataMap = new Map()
+export function useAliveData(initData = {}, key) {
+  key = key ?? useRoute().name
+  const lastData = lastDataMap.get(key)
+  const aliveData = ref(lastData || { ...initData })
+
+  watch(
+    aliveData,
+    (v) => {
+      lastDataMap.set(key, v)
+    },
+    { deep: true },
+  )
+
+  return {
+    aliveData,
+    reset() {
+      aliveData.value = { ...initData }
+      lastDataMap.delete(key)
+    },
+  }
+}
diff --git a/web/src/composables/useCrud.js b/web/src/composables/useCrud.js
new file mode 100644
index 0000000..d3c4425
--- /dev/null
+++ b/web/src/composables/useCrud.js
@@ -0,0 +1,127 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/12 09:03:00
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useForm, useModal } from '.'
+
+const ACTIONS = {
+  view: '查看',
+  edit: '编辑',
+  add: '新增',
+}
+
+export function useCrud({ name, initForm = {}, doCreate, doDelete, doUpdate, refresh }) {
+  const modalAction = ref('')
+  const [modalRef, okLoading] = useModal()
+  const [modalFormRef, modalForm, validation] = useForm(initForm)
+
+  /** 新增 */
+  function handleAdd(row = {}, title) {
+    handleOpen({ action: 'add', title, row: { ...initForm, ...row } })
+  }
+
+  /** 修改 */
+  function handleEdit(row, title) {
+    handleOpen({ action: 'edit', title, row })
+  }
+
+  /** 查看 */
+  function handleView(row, title) {
+    handleOpen({ action: 'view', title, row })
+  }
+
+  /** 打开modal */
+  function handleOpen(options = {}) {
+    const { action, row, title, onOk } = options
+    modalAction.value = action
+    modalForm.value = { ...row }
+    modalRef.value?.open({
+      ...options,
+      async onOk() {
+        if (typeof onOk === 'function') {
+          return await onOk()
+        }
+        else {
+          return await handleSave()
+        }
+      },
+      title: title ?? (ACTIONS[modalAction.value] || '') + name,
+    })
+  }
+
+  /** 保存 */
+  async function handleSave(action) {
+    if (!action && !['edit', 'add'].includes(modalAction.value)) {
+      return false
+    }
+    await validation()
+    const actions = {
+      add: {
+        api: () => doCreate(modalForm.value),
+        cb: () => $message.success('新增成功'),
+      },
+      edit: {
+        api: () => doUpdate(modalForm.value),
+        cb: () => $message.success('保存成功'),
+      },
+    }
+
+    action = action || actions[modalAction.value]
+
+    try {
+      okLoading.value = true
+      const data = await action.api()
+      action.cb()
+      okLoading.value = false
+      data && refresh(data)
+    }
+    catch (error) {
+      okLoading.value = false
+      return false
+    }
+  }
+
+  /** 删除 */
+  function handleDelete(id, confirmOptions) {
+    if (!id && id !== 0)
+      return
+    const d = $dialog.warning({
+      content: '确定删除？',
+      title: '提示',
+      positiveText: '确定',
+      negativeText: '取消',
+      async onPositiveClick() {
+        try {
+          d.loading = true
+          const data = await doDelete(id)
+          $message.success('删除成功')
+          d.loading = false
+          refresh(data, true)
+        }
+        catch (error) {
+          d.loading = false
+        }
+      },
+      ...confirmOptions,
+    })
+  }
+
+  return {
+    modalRef,
+    modalFormRef,
+    modalAction,
+    modalForm,
+    okLoading,
+    validation,
+    handleAdd,
+    handleDelete,
+    handleEdit,
+    handleView,
+    handleOpen,
+    handleSave,
+  }
+}
diff --git a/web/src/composables/useForm.js b/web/src/composables/useForm.js
new file mode 100644
index 0000000..69f9d50
--- /dev/null
+++ b/web/src/composables/useForm.js
@@ -0,0 +1,23 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:43
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export function useForm(initFormData = {}) {
+  const formRef = ref(null)
+  const formModel = ref({ ...initFormData })
+  const rules = {
+    required: {
+      required: true,
+      message: '此为必填项',
+      trigger: ['blur', 'change'],
+    },
+  }
+  const validation = () => {
+    return formRef.value?.validate()
+  }
+  return [formRef, formModel, validation, rules]
+}
diff --git a/web/src/composables/useModal.js b/web/src/composables/useModal.js
new file mode 100644
index 0000000..dc08216
--- /dev/null
+++ b/web/src/composables/useModal.js
@@ -0,0 +1,20 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:22:49
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export function useModal() {
+  const modalRef = ref(null)
+  const okLoading = computed({
+    get() {
+      return modalRef.value?.okLoading
+    },
+    set(v) {
+      modalRef.value.okLoading = v
+    },
+  })
+  return [modalRef, okLoading]
+}
diff --git a/web/src/directives/index.js b/web/src/directives/index.js
new file mode 100644
index 0000000..f27a036
--- /dev/null
+++ b/web/src/directives/index.js
@@ -0,0 +1,23 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:23:01
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { router } from '@/router'
+
+const permission = {
+  mounted(el, binding) {
+    const currentRoute = unref(router.currentRoute)
+    const btns = currentRoute.meta?.btns?.map(item => item.code) || []
+    if (!btns.includes(binding.value)) {
+      el.remove()
+    }
+  },
+}
+
+export function setupDirectives(app) {
+  app.directive('permission', permission)
+}
diff --git a/web/src/layouts/components/BreadCrumb.vue b/web/src/layouts/components/BreadCrumb.vue
new file mode 100644
index 0000000..dadc9ad
--- /dev/null
+++ b/web/src/layouts/components/BreadCrumb.vue
@@ -0,0 +1,86 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:10
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-if="!breadItems?.length" :clickable="false">
+      {{ route.meta.title }}
+    </n-breadcrumb-item>
+    <n-breadcrumb-item
+      v-for="(item, index) of breadItems"
+      v-else
+      :key="item.code"
+      :clickable="!!item.path"
+      @click="handleItemClick(item)"
+    >
+      <n-dropdown
+        :options="index < breadItems.length - 1 ? getDropOptions(item.children) : []"
+        @select="handleDropSelect"
+      >
+        <div class="flex items-center">
+          <i :class="item.icon" class="mr-8" />
+          {{ item.name }}
+        </div>
+      </n-dropdown>
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
+<script setup>
+import { usePermissionStore } from '@/store'
+
+const router = useRouter()
+const route = useRoute()
+const permissionStore = usePermissionStore()
+
+const breadItems = ref([])
+watch(
+  () => route.name,
+  (v) => {
+    breadItems.value = findMatchs(permissionStore.permissions, v)
+  },
+  { immediate: true },
+)
+
+function findMatchs(tree, code, parents = []) {
+  for (const item of tree) {
+    if (item.code === code) {
+      return [...parents, item]
+    }
+    if (item.children?.length) {
+      const found = findMatchs(item.children, code, [...parents, item])
+      if (found) {
+        return found
+      }
+    }
+  }
+  return null
+}
+
+function handleItemClick(item) {
+  if (item.path && item.code !== route.name) {
+    router.push(item.path)
+  }
+}
+
+function getDropOptions(list = []) {
+  return list
+    .filter(item => item.show)
+    .map(child => ({
+      label: child.name,
+      key: child.code,
+      icon: () => h('i', { class: child.icon }),
+    }))
+}
+
+function handleDropSelect(code) {
+  if (code && code !== route.name) {
+    router.push({ name: code })
+  }
+}
+</script>
diff --git a/web/src/layouts/components/Fullscreen.vue b/web/src/layouts/components/Fullscreen.vue
new file mode 100644
index 0000000..7ccc3d4
--- /dev/null
+++ b/web/src/layouts/components/Fullscreen.vue
@@ -0,0 +1,13 @@
+<template>
+  <i
+    class="mr-16 cursor-pointer"
+    :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
+    @click="toggle"
+  />
+</template>
+
+<script setup>
+import { useFullscreen } from '@vueuse/core'
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>
diff --git a/web/src/layouts/components/MenuCollapse.vue b/web/src/layouts/components/MenuCollapse.vue
new file mode 100644
index 0000000..1ec6d30
--- /dev/null
+++ b/web/src/layouts/components/MenuCollapse.vue
@@ -0,0 +1,22 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:18
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div
+    class="f-c-c cursor-pointer rounded-4 p-6 text-22 transition-all-300 auto-bg-hover"
+    @click="appStore.switchCollapsed"
+  >
+    <i :class="appStore.collapsed ? 'i-line-md-menu-unfold-left' : 'i-line-md-menu-fold-left'" />
+  </div>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
diff --git a/web/src/layouts/components/RoleSelect.vue b/web/src/layouts/components/RoleSelect.vue
new file mode 100644
index 0000000..b839df4
--- /dev/null
+++ b/web/src/layouts/components/RoleSelect.vue
@@ -0,0 +1,90 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/12 09:03:32
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <MeModal ref="modalRef" title="请选择角色" width="360px" class="p-12">
+    <n-radio-group v-model:value="roleCode" class="cus-scroll-y max-h-420 w-full py-16">
+      <n-space vertical :size="24" class="mx-12">
+        <n-radio-button
+          v-for="role in roles"
+          :key="role.id"
+          class="h-36 w-full text-center text-16 leading-36"
+          :class="{ 'bg-primary! color-white!': role.code === roleCode }"
+          :value="role.code"
+        >
+          {{ role.name }}
+        </n-radio-button>
+      </n-space>
+    </n-radio-group>
+
+    <template #footer>
+      <div class="flex">
+        <n-button class="flex-1" size="large" @click="logout()">
+          退出登录
+        </n-button>
+        <n-button
+          :loading="okLoading"
+          class="ml-20 flex-1"
+          type="primary"
+          size="large"
+          :disabled="userStore.currentRole?.code === roleCode"
+          @click="setCurrentRole"
+        >
+          确认
+        </n-button>
+      </div>
+    </template>
+  </MeModal>
+</template>
+
+<script setup>
+import api from '@/api'
+import { MeModal } from '@/components'
+import { useModal } from '@/composables'
+import { useAuthStore, useUserStore } from '@/store'
+
+const userStore = useUserStore()
+const authStore = useAuthStore()
+
+const roles = ref(userStore.roles || [])
+const roleCode = ref(userStore.currentRole?.code ?? roles.value[0]?.code ?? '')
+
+const [modalRef, okLoading] = useModal()
+function open(options) {
+  modalRef.value?.open({
+    ...options,
+  })
+}
+
+async function setCurrentRole() {
+  try {
+    okLoading.value = true
+    const { data } = await api.switchCurrentRole(roleCode.value)
+    await authStore.switchCurrentRole(data)
+    okLoading.value = false
+    $message.success('切换成功')
+    modalRef.value?.handleOk()
+  }
+  catch (error) {
+    console.error(error)
+    okLoading.value = false
+    return false
+  }
+}
+
+async function logout() {
+  await api.logout()
+  authStore.logout()
+  modalRef.value?.close()
+  $message.success('已退出登录')
+}
+
+defineExpose({
+  open,
+})
+</script>
diff --git a/web/src/layouts/components/SideLogo.vue b/web/src/layouts/components/SideLogo.vue
new file mode 100644
index 0000000..a9cfba0
--- /dev/null
+++ b/web/src/layouts/components/SideLogo.vue
@@ -0,0 +1,27 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:28
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <router-link class="h-60 f-c-c" to="/">
+    <TheLogo />
+    <h2
+      v-show="!appStore.collapsed"
+      class="ml-10 max-w-140 flex-shrink-0 text-16 color-primary font-bold"
+    >
+      {{ title }}
+    </h2>
+  </router-link>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+
+const title = import.meta.env.VITE_TITLE
+
+const appStore = useAppStore()
+</script>
diff --git a/web/src/layouts/components/SideMenu.vue b/web/src/layouts/components/SideMenu.vue
new file mode 100644
index 0000000..a369658
--- /dev/null
+++ b/web/src/layouts/components/SideMenu.vue
@@ -0,0 +1,74 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:35
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-menu
+    ref="menu"
+    class="side-menu"
+    accordion
+    :indent="18"
+    :collapsed-icon-size="22"
+    :collapsed-width="64"
+    :collapsed="appStore.collapsed"
+    :options="permissionStore.menus"
+    :value="activeKey"
+    @update:value="handleMenuSelect"
+  />
+</template>
+
+<script setup>
+import { useAppStore, usePermissionStore } from '@/store'
+import { isExternal } from '@/utils'
+
+const router = useRouter()
+const route = useRoute()
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
+
+const activeKey = computed(() => route.meta?.parentKey || route.name)
+
+const menu = ref(null)
+watch(route, async () => {
+  await nextTick()
+  menu.value?.showOption()
+})
+
+function handleMenuSelect(key, item) {
+  if (isExternal(item.originPath)) {
+    $dialog.confirm({
+      type: 'info',
+      title: `请选择打开方式`,
+      positiveText: '外链打开',
+      negativeText: '在本站内嵌打开',
+      confirm() {
+        window.open(item.originPath)
+      },
+      cancel: () => {
+        router.push(item.path)
+      },
+    })
+  }
+  else {
+    router.push(item.path)
+  }
+}
+</script>
+
+<style lang="scss">
+.side-menu:not(.n-menu--collapsed) {
+  .n-menu-item-content {
+    &::before {
+      left: 8px;
+      right: 8px;
+    }
+    &.n-menu-item-content--selected::before {
+      border-left: 4px solid rgb(var(--primary-color));
+    }
+  }
+}
+</style>
diff --git a/web/src/layouts/components/UserAvatar.vue b/web/src/layouts/components/UserAvatar.vue
new file mode 100644
index 0000000..84bf105
--- /dev/null
+++ b/web/src/layouts/components/UserAvatar.vue
@@ -0,0 +1,85 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:42
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-dropdown :options="options" @select="handleSelect">
+    <div class="flex cursor-pointer items-center">
+      <n-avatar round :size="36" :src="userStore.avatar" />
+      <div v-if="userStore.userInfo" class="ml-12 flex-col flex-shrink-0 items-center">
+        <span class="text-14">{{ userStore.nickName ?? userStore.username }}</span>
+        <span class="text-12 opacity-50">[{{ userStore.currentRole?.name }}]</span>
+      </div>
+    </div>
+  </n-dropdown>
+
+  <RoleSelect ref="roleSelectRef" />
+</template>
+
+<script setup>
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
+import { RoleSelect } from '@/layouts/components'
+import api from '@/api'
+
+const router = useRouter()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const permissionStore = usePermissionStore()
+
+const options = reactive([
+  {
+    label: '个人资料',
+    key: 'profile',
+    icon: () => h('i', { class: 'i-material-symbols:person-outline text-14' }),
+    show: computed(() => permissionStore.accessRoutes?.some(item => item.path === '/profile')),
+  },
+  {
+    label: '切换角色',
+    key: 'toggleRole',
+    icon: () => h('i', { class: 'i-basil:exchange-solid text-14' }),
+    show: computed(() => userStore.roles.length > 1),
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: () => h('i', { class: 'i-mdi:exit-to-app text-14' }),
+  },
+])
+
+const roleSelectRef = ref(null)
+function handleSelect(key) {
+  switch (key) {
+    case 'profile':
+      router.push('/profile')
+      break
+    case 'toggleRole':
+      roleSelectRef.value?.open({
+        onOk() {
+          location.reload()
+        },
+      })
+      break
+    case 'logout':
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: '确认退出？',
+        async confirm() {
+          try {
+            await api.logout()
+          }
+          catch (error) {
+            console.error(error)
+          }
+          authStore.logout()
+          $message.success('已退出登录')
+        },
+      })
+      break
+  }
+}
+</script>
diff --git a/web/src/layouts/components/index.js b/web/src/layouts/components/index.js
new file mode 100644
index 0000000..a9d0280
--- /dev/null
+++ b/web/src/layouts/components/index.js
@@ -0,0 +1,8 @@
+export { default as RoleSelect } from './RoleSelect.vue'
+export { default as UserAvatar } from './UserAvatar.vue'
+export { default as MenuCollapse } from './MenuCollapse.vue'
+export { default as BreadCrumb } from './BreadCrumb.vue'
+export { default as AppTab } from './tab/index.vue'
+export { default as SideLogo } from './SideLogo.vue'
+export { default as SideMenu } from './SideMenu.vue'
+export { default as Fullscreen } from './Fullscreen.vue'
diff --git a/web/src/layouts/components/tab/ContextMenu.vue b/web/src/layouts/components/tab/ContextMenu.vue
new file mode 100644
index 0000000..ceaaae9
--- /dev/null
+++ b/web/src/layouts/components/tab/ContextMenu.vue
@@ -0,0 +1,125 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:48
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-dropdown
+    :show="show"
+    :options="options"
+    :x="x"
+    :y="y"
+    placement="bottom-start"
+    @clickoutside="handleHideDropdown"
+    @select="handleSelect"
+  />
+</template>
+
+<script setup>
+import { useTabStore } from '@/store'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  currentPath: {
+    type: String,
+    default: '',
+  },
+  x: {
+    type: Number,
+    default: 0,
+  },
+  y: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:show'])
+
+const tabStore = useTabStore()
+
+const options = computed(() => [
+  {
+    label: '重新加载',
+    key: 'reload',
+    disabled: props.currentPath !== tabStore.activeTab,
+    icon: () => h('i', { class: 'i-mdi:refresh text-14' }),
+  },
+  {
+    label: '关闭',
+    key: 'close',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h('i', { class: 'i-mdi:close text-14' }),
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-horizontal text-14' }),
+  },
+  {
+    label: '关闭左侧',
+    key: 'close-left',
+    disabled: tabStore.tabs.length <= 1 || props.currentPath === tabStore.tabs[0].path,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-left text-14' }),
+  },
+  {
+    label: '关闭右侧',
+    key: 'close-right',
+    disabled:
+      tabStore.tabs.length <= 1
+      || props.currentPath === tabStore.tabs[tabStore.tabs.length - 1].path,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-right text-14' }),
+  },
+])
+
+const route = useRoute()
+const actionMap = new Map([
+  [
+    'reload',
+    () => {
+      tabStore.reloadTab(route.fullPath, route.meta?.keepAlive)
+    },
+  ],
+  [
+    'close',
+    () => {
+      tabStore.removeTab(props.currentPath)
+    },
+  ],
+  [
+    'close-other',
+    () => {
+      tabStore.removeOther(props.currentPath)
+    },
+  ],
+  [
+    'close-left',
+    () => {
+      tabStore.removeLeft(props.currentPath)
+    },
+  ],
+  [
+    'close-right',
+    () => {
+      tabStore.removeRight(props.currentPath)
+    },
+  ],
+])
+
+function handleHideDropdown() {
+  emit('update:show', false)
+}
+
+function handleSelect(key) {
+  const actionFn = actionMap.get(key)
+  actionFn && actionFn()
+  handleHideDropdown()
+}
+</script>
diff --git a/web/src/layouts/components/tab/index.vue b/web/src/layouts/components/tab/index.vue
new file mode 100644
index 0000000..0936732
--- /dev/null
+++ b/web/src/layouts/components/tab/index.vue
@@ -0,0 +1,99 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:50:54
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div>
+    <n-tabs
+      :value="tabStore.activeTab"
+      :closable="tabStore.tabs.length > 1"
+      type="card"
+      @close="(path) => tabStore.removeTab(path)"
+    >
+      <n-tab
+        v-for="item in tabStore.tabs"
+        :key="item.path"
+        :name="item.path"
+        @click="handleItemClick(item.path)"
+        @contextmenu.prevent="handleContextMenu($event, item)"
+      >
+        {{ item.title }}
+      </n-tab>
+    </n-tabs>
+
+    <ContextMenu
+      v-if="contextMenuOption.show"
+      v-model:show="contextMenuOption.show"
+      :current-path="contextMenuOption.currentPath"
+      :x="contextMenuOption.x"
+      :y="contextMenuOption.y"
+    />
+  </div>
+</template>
+
+<script setup>
+import ContextMenu from './ContextMenu.vue'
+import { useTabStore } from '@/store'
+
+const router = useRouter()
+const tabStore = useTabStore()
+
+const contextMenuOption = reactive({
+  show: false,
+  x: 0,
+  y: 0,
+  currentPath: '',
+})
+
+function handleItemClick(path) {
+  tabStore.setActiveTab(path)
+  router.push(path)
+}
+
+function showContextMenu() {
+  contextMenuOption.show = true
+}
+function hideContextMenu() {
+  contextMenuOption.show = false
+}
+function setContextMenu(x, y, currentPath) {
+  Object.assign(contextMenuOption, { x, y, currentPath })
+}
+
+// 右击菜单
+async function handleContextMenu(e, tagItem) {
+  const { clientX, clientY } = e
+  hideContextMenu()
+  setContextMenu(clientX, clientY, tagItem.path)
+  await nextTick()
+  showContextMenu()
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.n-tabs) {
+  .n-tabs-tab {
+    padding-left: 16px;
+    height: 36px;
+    background: transparent !important;
+    border-radius: 4px !important;
+    margin-right: 4px;
+    &:hover {
+      border: 1px solid rgb(var(--primary-color)) !important;
+    }
+  }
+  .n-tabs-tab--active {
+    border: 1px solid rgb(var(--primary-color)) !important;
+    background-color: rgba(var(--primary-color), 0.1) !important;
+  }
+  .n-tabs-pad,
+  .n-tabs-tab-pad,
+  .n-tabs-scroll-padding {
+    border: none !important;
+  }
+}
+</style>
diff --git a/web/src/layouts/empty/index.vue b/web/src/layouts/empty/index.vue
new file mode 100644
index 0000000..31d7e98
--- /dev/null
+++ b/web/src/layouts/empty/index.vue
@@ -0,0 +1,11 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:32
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <slot />
+</template>
diff --git a/web/src/layouts/full/header/index.vue b/web/src/layouts/full/header/index.vue
new file mode 100644
index 0000000..45850d7
--- /dev/null
+++ b/web/src/layouts/full/header/index.vue
@@ -0,0 +1,43 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:51:10
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
+    <MenuCollapse />
+
+    <BreadCrumb />
+
+    <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18">
+      <ToggleTheme />
+
+      <Fullscreen />
+
+      <i
+        class="i-fe:github mr-16 cursor-pointer"
+        @click="handleLinkClick('https://github.com/zclzone/vue-naive-admin/tree/2.x')"
+      />
+      <i
+        class="i-me:gitee mr-16 cursor-pointer"
+        @click="handleLinkClick('https://gitee.com/isme-admin/vue-naive-admin/tree/2.x')"
+      />
+
+      <ThemeSetting class="mr-16" />
+
+      <UserAvatar />
+    </div>
+  </AppCard>
+</template>
+
+<script setup>
+import { ToggleTheme } from '@/components'
+import { BreadCrumb, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+
+function handleLinkClick(link) {
+  window.open(link)
+}
+</script>
diff --git a/web/src/layouts/full/index.vue b/web/src/layouts/full/index.vue
new file mode 100644
index 0000000..24d8d86
--- /dev/null
+++ b/web/src/layouts/full/index.vue
@@ -0,0 +1,42 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:51:02
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="wh-full flex">
+    <aside
+      class="flex-col flex-shrink-0 transition-width-300"
+      :class="appStore.collapsed ? 'w-64' : 'w-220'"
+      border-r="1px solid light_border dark:dark_border"
+    >
+      <SideBar />
+    </aside>
+
+    <article class="w-0 flex-col flex-1">
+      <AppHeader class="h-60 flex-shrink-0" />
+      <div class="p-12" border-b="1px solid light_border dark:dark_border">
+        <AppTab class="flex-shrink-0" />
+      </div>
+      <slot />
+    </article>
+  </div>
+</template>
+
+<script setup>
+import SideBar from './sidebar/index.vue'
+import AppHeader from './header/index.vue'
+import { useAppStore } from '@/store'
+import { AppTab } from '@/layouts/components'
+
+const appStore = useAppStore()
+</script>
+
+<style>
+.collapsed {
+  width: 64px;
+}
+</style>
diff --git a/web/src/layouts/full/sidebar/index.vue b/web/src/layouts/full/sidebar/index.vue
new file mode 100644
index 0000000..030938e
--- /dev/null
+++ b/web/src/layouts/full/sidebar/index.vue
@@ -0,0 +1,16 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:51:25
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <SideLogo border-b="1px solid light_border dark:dark_border" />
+  <SideMenu class="cus-scroll-y mt-4 h-0 flex-1" />
+</template>
+
+<script setup>
+import { SideLogo, SideMenu } from '@/layouts/components'
+</script>
diff --git a/web/src/layouts/normal/header/index.vue b/web/src/layouts/normal/header/index.vue
new file mode 100644
index 0000000..9590e8f
--- /dev/null
+++ b/web/src/layouts/normal/header/index.vue
@@ -0,0 +1,45 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:52:48
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
+    <MenuCollapse />
+
+    <AppTab class="w-0 flex-1 px-12" />
+
+    <span class="mx-6 opacity-20">|</span>
+
+    <div class="flex flex-shrink-0 items-center px-12 text-18">
+      <ToggleTheme />
+
+      <Fullscreen />
+
+      <i
+        class="i-fe:github mr-16 cursor-pointer"
+        @click="handleLinkClick('https://github.com/zclzone/vue-naive-admin/tree/2.x')"
+      />
+      <i
+        class="i-me:gitee mr-16 cursor-pointer"
+        @click="handleLinkClick('https://gitee.com/isme-admin/vue-naive-admin/tree/2.x')"
+      />
+
+      <ThemeSetting class="mr-16" />
+
+      <UserAvatar />
+    </div>
+  </AppCard>
+</template>
+
+<script setup>
+import { ToggleTheme } from '@/components'
+import { AppTab, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+
+function handleLinkClick(link) {
+  window.open(link)
+}
+</script>
diff --git a/web/src/layouts/normal/index.vue b/web/src/layouts/normal/index.vue
new file mode 100644
index 0000000..12fb6de
--- /dev/null
+++ b/web/src/layouts/normal/index.vue
@@ -0,0 +1,38 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/13 20:54:55
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="wh-full flex">
+    <aside
+      class="flex-col flex-shrink-0 transition-width-300"
+      :class="appStore.collapsed ? 'w-64' : 'w-220'"
+      border-r="1px solid light_border dark:dark_border"
+    >
+      <SideBar />
+    </aside>
+
+    <article class="w-0 flex-col flex-1">
+      <AppHeader class="h-60 flex-shrink-0" />
+      <slot />
+    </article>
+  </div>
+</template>
+
+<script setup>
+import SideBar from './sidebar/index.vue'
+import AppHeader from './header/index.vue'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
+
+<style>
+.collapsed {
+  width: 64px;
+}
+</style>
diff --git a/web/src/layouts/normal/sidebar/index.vue b/web/src/layouts/normal/sidebar/index.vue
new file mode 100644
index 0000000..f6b71fb
--- /dev/null
+++ b/web/src/layouts/normal/sidebar/index.vue
@@ -0,0 +1,16 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:46:06
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <SideLogo border-b="1px solid light_border dark:dark_border" />
+  <SideMenu class="cus-scroll-y mt-4 h-0 flex-1" />
+</template>
+
+<script setup>
+import { SideLogo, SideMenu } from '@/layouts/components'
+</script>
diff --git a/web/src/layouts/simple/index.vue b/web/src/layouts/simple/index.vue
new file mode 100644
index 0000000..ef192dd
--- /dev/null
+++ b/web/src/layouts/simple/index.vue
@@ -0,0 +1,36 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:51:47
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="wh-full flex">
+    <aside
+      class="flex-col flex-shrink-0 transition-width-300"
+      :class="appStore.collapsed ? 'w-64' : 'w-220'"
+      border-r="1px solid light_border dark:dark_border"
+    >
+      <SideBar />
+    </aside>
+
+    <article class="w-0 flex-col flex-1">
+      <slot />
+    </article>
+  </div>
+</template>
+
+<script setup>
+import SideBar from './sidebar/index.vue'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
+
+<style>
+.collapsed {
+  width: 64px;
+}
+</style>
diff --git a/web/src/layouts/simple/sidebar/index.vue b/web/src/layouts/simple/sidebar/index.vue
new file mode 100644
index 0000000..27a7e6f
--- /dev/null
+++ b/web/src/layouts/simple/sidebar/index.vue
@@ -0,0 +1,23 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:09
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <SideLogo border-b="1px solid light_border dark:dark_border" />
+  <SideMenu class="cus-scroll-y mt-4 h-0 flex-1" />
+  <div class="my-12 flex items-center justify-around px-12">
+    <UserAvatar v-if="!appStore.collapsed" />
+    <MenuCollapse />
+  </div>
+</template>
+
+<script setup>
+import { MenuCollapse, SideLogo, SideMenu, UserAvatar } from '@/layouts/components'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
diff --git a/web/src/main.js b/web/src/main.js
new file mode 100644
index 0000000..ce2e92f
--- /dev/null
+++ b/web/src/main.js
@@ -0,0 +1,31 @@
+/**********************************
+ * @Description: 入口文件
+ * @FilePath: main.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:41:32
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import '@/styles/reset.css'
+import '@/styles/global.scss'
+import 'uno.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import { setupRouter } from './router'
+import { setupStore } from './store'
+import { setupNaiveDiscreteApi } from './utils'
+import { setupDirectives } from './directives'
+
+async function bootstrap() {
+  const app = createApp(App)
+  setupStore(app)
+  setupDirectives(app)
+  await setupRouter(app)
+  app.mount('#app')
+  setupNaiveDiscreteApi()
+}
+
+bootstrap()
diff --git a/web/src/router/basic-routes.js b/web/src/router/basic-routes.js
new file mode 100644
index 0000000..e8321ab
--- /dev/null
+++ b/web/src/router/basic-routes.js
@@ -0,0 +1,40 @@
+export const basicRoutes = [
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      title: '登录页',
+      layout: 'empty',
+    },
+  },
+
+  {
+    name: 'Home',
+    path: '/',
+    component: () => import('@/views/home/index.vue'),
+    meta: {
+      title: '首页',
+    },
+  },
+
+  {
+    name: '404',
+    path: '/404',
+    component: () => import('@/views/error-page/404.vue'),
+    meta: {
+      title: '页面飞走了',
+      layout: 'empty',
+    },
+  },
+
+  {
+    name: '403',
+    path: '/403',
+    component: () => import('@/views/error-page/403.vue'),
+    meta: {
+      title: '没有权限',
+      layout: 'empty',
+    },
+  },
+]
diff --git a/web/src/router/guards/index.js b/web/src/router/guards/index.js
new file mode 100644
index 0000000..35f274b
--- /dev/null
+++ b/web/src/router/guards/index.js
@@ -0,0 +1,19 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:24:46
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createPageLoadingGuard } from './page-loading-guard'
+import { createPageTitleGuard } from './page-title-guard'
+import { createPermissionGuard } from './permission-guard'
+import { createTabGuard } from './tab-guard'
+
+export function setupRouterGuards(router) {
+  createPageLoadingGuard(router)
+  createPermissionGuard(router)
+  createPageTitleGuard(router)
+  createTabGuard(router)
+}
diff --git a/web/src/router/guards/page-loading-guard.js b/web/src/router/guards/page-loading-guard.js
new file mode 100644
index 0000000..ba145fa
--- /dev/null
+++ b/web/src/router/guards/page-loading-guard.js
@@ -0,0 +1,23 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:24:53
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export function createPageLoadingGuard(router) {
+  router.beforeEach(() => {
+    $loadingBar.start()
+  })
+
+  router.afterEach(() => {
+    setTimeout(() => {
+      $loadingBar.finish()
+    }, 200)
+  })
+
+  router.onError(() => {
+    $loadingBar.error()
+  })
+}
diff --git a/web/src/router/guards/page-title-guard.js b/web/src/router/guards/page-title-guard.js
new file mode 100644
index 0000000..96042f6
--- /dev/null
+++ b/web/src/router/guards/page-title-guard.js
@@ -0,0 +1,21 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:00
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+const baseTitle = import.meta.env.VITE_TITLE
+
+export function createPageTitleGuard(router) {
+  router.afterEach((to) => {
+    const pageTitle = to.meta?.title
+    if (pageTitle) {
+      document.title = `${pageTitle} | ${baseTitle}`
+    }
+    else {
+      document.title = baseTitle
+    }
+  })
+}
diff --git a/web/src/router/guards/permission-guard.js b/web/src/router/guards/permission-guard.js
new file mode 100644
index 0000000..b317a08
--- /dev/null
+++ b/web/src/router/guards/permission-guard.js
@@ -0,0 +1,56 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:07
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
+import api from '@/api'
+import { getPermissions, getUserInfo } from '@/store/helper'
+
+const WHITE_LIST = ['/login', '/404']
+export function createPermissionGuard(router) {
+  router.beforeEach(async (to) => {
+    const authStore = useAuthStore()
+    const token = authStore.accessToken
+
+    /** 没有token */
+    if (!token) {
+      if (WHITE_LIST.includes(to.path))
+        return true
+      return { path: 'login', query: { ...to.query, redirect: to.path } }
+    }
+
+    // 有token的情况
+    if (to.path === '/login')
+      return { path: '/' }
+    if (WHITE_LIST.includes(to.path))
+      return true
+
+    const userStore = useUserStore()
+    const permissionStore = usePermissionStore()
+    if (!userStore.userInfo) {
+      const [user, permissions] = await Promise.all([getUserInfo(), getPermissions()])
+      userStore.setUser(user)
+      permissionStore.setPermissions(permissions)
+      const routeComponents = import.meta.glob('@/views/**/*.vue')
+      permissionStore.accessRoutes.forEach((route) => {
+        route.component = routeComponents[route.component] || undefined
+        !router.hasRoute(route.name) && router.addRoute(route)
+      })
+      return { ...to, replace: true }
+    }
+
+    const routes = router.getRoutes()
+    if (routes.find(route => route.name === to.name))
+      return true
+
+    // 判断是无权限还是404
+    const { data: hasMenu } = await api.validateMenuPath(to.path)
+    return hasMenu
+      ? { name: '403', query: { path: to.fullPath }, state: { from: 'permission-guard' } }
+      : { name: '404', query: { path: to.fullPath } }
+  })
+}
diff --git a/web/src/router/guards/tab-guard.js b/web/src/router/guards/tab-guard.js
new file mode 100644
index 0000000..e74b652
--- /dev/null
+++ b/web/src/router/guards/tab-guard.js
@@ -0,0 +1,24 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:17
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useTabStore } from '@/store'
+
+export const EXCLUDE_TAB = ['/404', '/403', '/login']
+
+export function createTabGuard(router) {
+  router.afterEach((to) => {
+    if (EXCLUDE_TAB.includes(to.path))
+      return
+    const tabStore = useTabStore()
+    const { name, fullPath: path } = to
+    const title = to.meta?.title
+    const icon = to.meta?.icon
+    const keepAlive = to.meta?.keepAlive
+    tabStore.addTab({ name, path, title, icon, keepAlive })
+  })
+}
diff --git a/web/src/router/index.js b/web/src/router/index.js
new file mode 100644
index 0000000..994157b
--- /dev/null
+++ b/web/src/router/index.js
@@ -0,0 +1,25 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:23
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { setupRouterGuards } from './guards'
+import { basicRoutes } from './basic-routes'
+
+export const router = createRouter({
+  history:
+    import.meta.env.VITE_USE_HASH === 'true'
+      ? createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH || '/')
+      : createWebHistory(import.meta.env.VITE_PUBLIC_PATH || '/'),
+  routes: basicRoutes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export async function setupRouter(app) {
+  app.use(router)
+  setupRouterGuards(router)
+}
diff --git a/web/src/settings.js b/web/src/settings.js
new file mode 100644
index 0000000..b337449
--- /dev/null
+++ b/web/src/settings.js
@@ -0,0 +1,77 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/13 20:54:36
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export const defaultLayout = 'normal'
+
+export const defaultPrimaryColor = '#316C72'
+
+// 控制 LayoutSetting 组件是否可见
+export const layoutSettingVisible = true
+
+export const naiveThemeOverrides = {
+  common: {
+    primaryColor: '#316C72FF',
+    primaryColorHover: '#316C72E3',
+    primaryColorPressed: '#2B4C59FF',
+    primaryColorSuppl: '#316C72E3',
+  },
+}
+
+export const basePermissions = [
+  {
+    code: 'ExternalLink',
+    name: '外链(可内嵌打开)',
+    type: 'MENU',
+    icon: 'i-fe:external-link',
+    order: 98,
+    enable: true,
+    show: true,
+    children: [
+      {
+        code: 'ShowDocs',
+        name: '项目文档',
+        type: 'MENU',
+        path: 'https://docs.isme.top/web/#/624306705/188522224',
+        icon: 'i-me:docs',
+        order: 1,
+        enable: true,
+        show: true,
+      },
+      {
+        code: 'ApiFoxDocs',
+        name: '接口文档',
+        type: 'MENU',
+        path: 'https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a',
+        icon: 'i-me:apifox',
+        order: 2,
+        enable: true,
+        show: true,
+      },
+      {
+        code: 'NaiveUI',
+        name: 'Naive UI',
+        type: 'MENU',
+        path: 'https://www.naiveui.com/zh-CN/os-theme',
+        icon: 'i-me:naiveui',
+        order: 3,
+        enable: true,
+        show: true,
+      },
+      {
+        code: 'MyBlog',
+        name: '博客-掘金',
+        type: 'MENU',
+        path: 'https://juejin.cn/user/1961184475483255/posts',
+        icon: 'i-simple-icons:juejin',
+        order: 4,
+        enable: true,
+        show: true,
+      },
+    ],
+  },
+]
diff --git a/web/src/store/helper.js b/web/src/store/helper.js
new file mode 100644
index 0000000..dd8fd26
--- /dev/null
+++ b/web/src/store/helper.js
@@ -0,0 +1,30 @@
+import { basePermissions } from '@/settings'
+import api from '@/api'
+
+export async function getUserInfo() {
+  const res = await api.getUser()
+  const { id, username, profile, roles, currentRole } = res.data || {}
+  return {
+    id,
+    username,
+    avatar: profile?.avatar,
+    nickName: profile?.nickName,
+    gender: profile?.gender,
+    address: profile?.address,
+    email: profile?.email,
+    roles,
+    currentRole,
+  }
+}
+
+export async function getPermissions() {
+  let asyncPermissions = []
+  try {
+    const res = await api.getRolePermissions()
+    asyncPermissions = res?.data || []
+  }
+  catch (error) {
+    console.error(error)
+  }
+  return basePermissions.concat(asyncPermissions)
+}
diff --git a/web/src/store/index.js b/web/src/store/index.js
new file mode 100644
index 0000000..a193337
--- /dev/null
+++ b/web/src/store/index.js
@@ -0,0 +1,18 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:26:15
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export function setupStore(app) {
+  const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
+  app.use(pinia)
+}
+
+export * from './modules'
diff --git a/web/src/store/modules/app.js b/web/src/store/modules/app.js
new file mode 100644
index 0000000..d16aca3
--- /dev/null
+++ b/web/src/store/modules/app.js
@@ -0,0 +1,56 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:31
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'
+import { generate, getRgbStr } from '@arco-design/color'
+import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/settings'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    collapsed: false,
+    isDark: useDark(),
+    layout: defaultLayout,
+    primaryColor: defaultPrimaryColor,
+    naiveThemeOverrides,
+  }),
+  actions: {
+    switchCollapsed() {
+      this.collapsed = !this.collapsed
+    },
+    setCollapsed(b) {
+      this.collapsed = b
+    },
+    toggleDark() {
+      this.isDark = !this.isDark
+    },
+    setLayout(v) {
+      this.layout = v
+    },
+    setPrimaryColor(color) {
+      this.primaryColor = color
+    },
+    setThemeColor(color = this.primaryColor, isDark = this.isDark) {
+      const colors = generate(color, {
+        list: true,
+        dark: isDark,
+      })
+      document.body.style.setProperty('--primary-color', getRgbStr(colors[5]))
+      this.naiveThemeOverrides.common = Object.assign(this.naiveThemeOverrides.common || {}, {
+        primaryColor: colors[5],
+        primaryColorHover: colors[4],
+        primaryColorSuppl: colors[4],
+        primaryColorPressed: colors[6],
+      })
+    },
+  },
+  persist: {
+    paths: ['collapsed', 'layout', 'primaryColor', 'naiveThemeOverrides'],
+    storage: sessionStorage,
+  },
+})
diff --git a/web/src/store/modules/auth.js b/web/src/store/modules/auth.js
new file mode 100644
index 0000000..aea8f0e
--- /dev/null
+++ b/web/src/store/modules/auth.js
@@ -0,0 +1,59 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:39
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { usePermissionStore, useRouterStore, useTabStore, useUserStore } from '@/store'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    accessToken: undefined,
+  }),
+  actions: {
+    setToken({ accessToken }) {
+      this.accessToken = accessToken
+    },
+    resetToken() {
+      this.$reset()
+    },
+    toLogin() {
+      const { router, route } = useRouterStore()
+      router.replace({
+        path: '/login',
+        query: route.query,
+      })
+    },
+    async switchCurrentRole(data) {
+      this.resetLoginState()
+      await nextTick()
+      this.setToken(data)
+    },
+    resetLoginState() {
+      const { resetUser } = useUserStore()
+      const { resetRouter } = useRouterStore()
+      const { resetPermission, accessRoutes } = usePermissionStore()
+      const { resetTabs } = useTabStore()
+      // 重置路由
+      resetRouter(accessRoutes)
+      // 重置用户
+      resetUser()
+      // 重置权限
+      resetPermission()
+      // 重置Tabs
+      resetTabs()
+      // 重置token
+      this.resetToken()
+    },
+    async logout() {
+      this.resetLoginState()
+      this.toLogin()
+    },
+  },
+  persist: {
+    key: 'vue-naivue-admin_auth',
+  },
+})
diff --git a/web/src/store/modules/index.js b/web/src/store/modules/index.js
new file mode 100644
index 0000000..9672b79
--- /dev/null
+++ b/web/src/store/modules/index.js
@@ -0,0 +1,6 @@
+export * from './app'
+export * from './auth'
+export * from './permission'
+export * from './tab'
+export * from './user'
+export * from './router'
diff --git a/web/src/store/modules/permission.js b/web/src/store/modules/permission.js
new file mode 100644
index 0000000..b61a039
--- /dev/null
+++ b/web/src/store/modules/permission.js
@@ -0,0 +1,82 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:47
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { hyphenate } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { isExternal } from '@/utils'
+
+export const usePermissionStore = defineStore('permission', {
+  state: () => ({
+    accessRoutes: [],
+    permissions: [],
+    menus: [],
+  }),
+  actions: {
+    setPermissions(permissions) {
+      this.permissions = permissions
+      this.menus = this.permissions
+        .filter(item => item.type === 'MENU')
+        .map(item => this.getMenuItem(item))
+        .filter(item => !!item)
+        .sort((a, b) => a.order - b.order)
+    },
+    getMenuItem(item, parent) {
+      const route = this.generateRoute(item, item.show ? null : parent?.key)
+      if (item.enable && route.path && !route.path.startsWith('http'))
+        this.accessRoutes.push(route)
+      if (!item.show)
+        return null
+      const menuItem = {
+        label: route.meta.title,
+        key: route.name,
+        path: route.path,
+        originPath: route.meta.originPath,
+        icon: () => h('i', { class: `${route.meta.icon} text-16` }),
+        order: item.order ?? 0,
+      }
+      const children = item.children?.filter(item => item.type === 'MENU') || []
+      if (children.length) {
+        menuItem.children = children
+          .map(child => this.getMenuItem(child, menuItem))
+          .filter(item => !!item)
+          .sort((a, b) => a.order - b.order)
+        if (!menuItem.children.length)
+          delete menuItem.children
+      }
+      return menuItem
+    },
+    generateRoute(item, parentKey) {
+      let originPath
+      if (isExternal(item.path)) {
+        originPath = item.path
+        item.component = '/src/views/iframe/index.vue'
+        item.path = `/iframe/${hyphenate(item.code)}`
+      }
+      return {
+        name: item.code,
+        path: item.path,
+        redirect: item.redirect,
+        component: item.component,
+        meta: {
+          originPath,
+          icon: `${item.icon}?mask`,
+          title: item.name,
+          layout: item.layout,
+          keepAlive: !!item.keepAlive,
+          parentKey,
+          btns: item.children
+            ?.filter(item => item.type === 'BUTTON')
+            .map(item => ({ code: item.code, name: item.name })),
+        },
+      }
+    },
+    resetPermission() {
+      this.$reset()
+    },
+  },
+})
diff --git a/web/src/store/modules/router.js b/web/src/store/modules/router.js
new file mode 100644
index 0000000..51a5b59
--- /dev/null
+++ b/web/src/store/modules/router.js
@@ -0,0 +1,26 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2024/01/06 17:18:40
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+
+export const useRouterStore = defineStore('router', () => {
+  const router = useRouter()
+  const route = useRoute()
+
+  function resetRouter(accessRoutes) {
+    accessRoutes.forEach((item) => {
+      router.hasRoute(item.name) && router.removeRoute(item.name)
+    })
+  }
+
+  return {
+    router,
+    route,
+    resetRouter,
+  }
+})
diff --git a/web/src/store/modules/tab.js b/web/src/store/modules/tab.js
new file mode 100644
index 0000000..12c5e46
--- /dev/null
+++ b/web/src/store/modules/tab.js
@@ -0,0 +1,94 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:52
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { useRouterStore } from './router'
+
+export const useTabStore = defineStore('tab', {
+  state: () => ({
+    tabs: [],
+    activeTab: '',
+    reloading: false,
+  }),
+  getters: {
+    activeIndex() {
+      return this.tabs.findIndex(item => item.path === this.activeTab)
+    },
+  },
+  actions: {
+    async setActiveTab(path) {
+      await nextTick() // tab栏dom更新完再设置激活，让tab栏定位到新增的tab上生效
+      this.activeTab = path
+    },
+    setTabs(tabs) {
+      this.tabs = tabs
+    },
+    addTab(tab = {}) {
+      const findIndex = this.tabs.findIndex(item => item.path === tab.path)
+      if (findIndex !== -1) {
+        this.tabs.splice(findIndex, 1, tab)
+      }
+      else {
+        this.setTabs([...this.tabs, tab])
+      }
+      this.setActiveTab(tab.path)
+    },
+    async reloadTab(path, keepAlive) {
+      const findItem = this.tabs.find(item => item.path === path)
+      if (!findItem)
+        return
+      // 更新key可让keepAlive失效
+      if (keepAlive)
+        findItem.keepAlive = false
+      $loadingBar.start()
+      this.reloading = true
+      await nextTick()
+      this.reloading = false
+      findItem.keepAlive = !!keepAlive
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 })
+        $loadingBar.finish()
+      }, 100)
+    },
+    async removeTab(path) {
+      this.setTabs(this.tabs.filter(tab => tab.path !== path))
+      if (path === this.activeTab) {
+        useRouterStore().router?.push(this.tabs[this.tabs.length - 1].path)
+      }
+    },
+    removeOther(curPath = this.activeTab) {
+      this.setTabs(this.tabs.filter(tab => tab.path === curPath))
+      if (curPath !== this.activeTab) {
+        useRouterStore().router?.push(this.tabs[this.tabs.length - 1].path)
+      }
+    },
+    removeLeft(curPath) {
+      const curIndex = this.tabs.findIndex(item => item.path === curPath)
+      const filterTabs = this.tabs.filter((item, index) => index >= curIndex)
+      this.setTabs(filterTabs)
+      if (!filterTabs.find(item => item.path === this.activeTab)) {
+        useRouterStore().router?.push(filterTabs[filterTabs.length - 1].path)
+      }
+    },
+    removeRight(curPath) {
+      const curIndex = this.tabs.findIndex(item => item.path === curPath)
+      const filterTabs = this.tabs.filter((item, index) => index <= curIndex)
+      this.setTabs(filterTabs)
+      if (!filterTabs.find(item => item.path === this.activeTab.value)) {
+        useRouterStore().router?.push(filterTabs[filterTabs.length - 1].path)
+      }
+    },
+    resetTabs() {
+      this.$reset()
+    },
+  },
+  persist: {
+    paths: ['tabs'],
+    storage: sessionStorage,
+  },
+})
diff --git a/web/src/store/modules/user.js b/web/src/store/modules/user.js
new file mode 100644
index 0000000..c434737
--- /dev/null
+++ b/web/src/store/modules/user.js
@@ -0,0 +1,43 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:59
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    userInfo: null,
+  }),
+  getters: {
+    userId() {
+      return this.userInfo?.id
+    },
+    username() {
+      return this.userInfo?.username
+    },
+    nickName() {
+      return this.userInfo?.nickName
+    },
+    avatar() {
+      return this.userInfo?.avatar
+    },
+    currentRole() {
+      return this.userInfo?.currentRole || {}
+    },
+    roles() {
+      return this.userInfo?.roles || []
+    },
+  },
+  actions: {
+    setUser(user) {
+      this.userInfo = user
+    },
+    resetUser() {
+      this.$reset()
+    },
+  },
+})
diff --git a/web/src/styles/global.scss b/web/src/styles/global.scss
new file mode 100644
index 0000000..857043c
--- /dev/null
+++ b/web/src/styles/global.scss
@@ -0,0 +1,91 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:26:28
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+/* transition fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* 自定义滚动条样式 */
+.cus-scroll {
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+}
+.cus-scroll-x {
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 8px;
+  }
+}
+.cus-scroll-y {
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 0;
+  }
+}
+.cus-scroll,
+.cus-scroll-x,
+.cus-scroll-y {
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background: #bfbfbf;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgb(var(--primary-color));
+    }
+  }
+}
+
+/* 切换主题的动画效果 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
diff --git a/web/src/styles/reset.css b/web/src/styles/reset.css
new file mode 100644
index 0000000..71447a2
--- /dev/null
+++ b/web/src/styles/reset.css
@@ -0,0 +1,49 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:26:38
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+::before,
+::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover,
+a:link,
+a:visited,
+a:active {
+  text-decoration: none;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+input,
+textarea {
+  outline: none;
+  border: none;
+  resize: none;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/web/src/utils/common.js b/web/src/utils/common.js
new file mode 100644
index 0000000..eccf9e9
--- /dev/null
+++ b/web/src/utils/common.js
@@ -0,0 +1,106 @@
+/**********************************
+ * @FilePath: common.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:45:46
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import dayjs from 'dayjs'
+
+/**
+ * @param {(object | string | number)} time
+ * @param {string} format
+ * @returns {string | null} 格式化后的时间字符串
+ *
+ */
+export function formatDateTime(time = undefined, format = 'YYYY-MM-DD HH:mm:ss') {
+  return dayjs(time).format(format)
+}
+
+export function formatDate(date = undefined, format = 'YYYY-MM-DD') {
+  return formatDateTime(date, format)
+}
+
+/**
+ * @param {Function} fn
+ * @param {number} wait
+ * @returns {Function}  节流函数
+ *
+ */
+export function throttle(fn, wait) {
+  let context, args
+  let previous = 0
+
+  return function (...argArr) {
+    const now = +new Date()
+    context = this
+    args = argArr
+    if (now - previous > wait) {
+      fn.apply(context, args)
+      previous = now
+    }
+  }
+}
+
+/**
+ * @param {Function} method
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*} 防抖函数
+ */
+export function debounce(method, wait, immediate) {
+  let timeout
+  return function (...args) {
+    const context = this
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    // 立即执行需要两个条件，一是immediate为true，二是timeout未被赋值或被置为null
+    if (immediate) {
+      /**
+       * 如果定时器不存在，则立即执行，并设置一个定时器，wait毫秒后将定时器置为null
+       * 这样确保立即执行后wait毫秒内不会被再次触发
+       */
+      const callNow = !timeout
+      timeout = setTimeout(() => {
+        timeout = null
+      }, wait)
+      if (callNow) {
+        method.apply(context, args)
+      }
+    }
+    else {
+      // 如果immediate为false，则函数wait毫秒后执行
+      timeout = setTimeout(() => {
+        /**
+         * args是一个类数组对象，所以使用fn.apply
+         * 也可写作method.call(context, ...args)
+         */
+        method.apply(context, args)
+      }, wait)
+    }
+  }
+}
+
+/**
+ * @param {number} time 毫秒数
+ * @returns 睡一会儿，让子弹暂停一下
+ */
+export function sleep(time) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {Function} cb
+ * @return {ResizeObserver}
+ */
+export function useResize(el, cb) {
+  const observer = new ResizeObserver((entries) => {
+    cb(entries[0].contentRect)
+  })
+  observer.observe(el)
+  return observer
+}
diff --git a/web/src/utils/http/helpers.js b/web/src/utils/http/helpers.js
new file mode 100644
index 0000000..b7de8bb
--- /dev/null
+++ b/web/src/utils/http/helpers.js
@@ -0,0 +1,67 @@
+/**********************************
+ * @FilePath: helpers.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:22
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useAuthStore } from '@/store'
+
+let isConfirming = false
+export function resolveResError(code, message, needTip = true) {
+  switch (code) {
+    case 401:
+      if (isConfirming || !needTip)
+        return
+      isConfirming = true
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: '登录已过期，是否重新登录？',
+        confirm() {
+          useAuthStore().logout()
+          window.$message?.success('已退出登录')
+          isConfirming = false
+        },
+        cancel() {
+          isConfirming = false
+        },
+      })
+      return false
+    case 11007:
+    case 11008:
+      if (isConfirming || !needTip)
+        return
+      isConfirming = true
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: `${message}，是否重新登录？`,
+        confirm() {
+          useAuthStore().logout()
+          window.$message?.success('已退出登录')
+          isConfirming = false
+        },
+        cancel() {
+          isConfirming = false
+        },
+      })
+      return false
+    case 403:
+      message = '请求被拒绝'
+      break
+    case 404:
+      message = '请求资源或接口不存在'
+      break
+    case 500:
+      message = '服务器发生异常'
+      break
+    default:
+      message = message ?? `【${code}】: 未知异常!`
+      break
+  }
+  needTip && window.$message?.error(message)
+  return message
+}
diff --git a/web/src/utils/http/index.js b/web/src/utils/http/index.js
new file mode 100644
index 0000000..b0d5ca0
--- /dev/null
+++ b/web/src/utils/http/index.js
@@ -0,0 +1,30 @@
+/**********************************
+ * @FilePath: index.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:28
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import axios from 'axios'
+import { setupInterceptors } from './interceptors'
+
+export function createAxios(options = {}) {
+  const defaultOptions = {
+    baseURL: import.meta.env.VITE_AXIOS_BASE_URL,
+    timeout: 12000,
+  }
+  const service = axios.create({
+    ...defaultOptions,
+    ...options,
+  })
+  setupInterceptors(service)
+  return service
+}
+
+export const request = createAxios()
+
+export const mockRequest = createAxios({
+  baseURL: '/mock-api',
+})
diff --git a/web/src/utils/http/interceptors.js b/web/src/utils/http/interceptors.js
new file mode 100644
index 0000000..d048d3d
--- /dev/null
+++ b/web/src/utils/http/interceptors.js
@@ -0,0 +1,70 @@
+/**********************************
+ * @FilePath: interceptors.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:40
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { resolveResError } from './helpers'
+import { useAuthStore } from '@/store'
+
+export function setupInterceptors(axiosInstance) {
+  function reqResolve(config) {
+    // 处理不需要token的请求
+    if (config.needToken === false) {
+      return config
+    }
+
+    const { accessToken } = useAuthStore()
+    if (accessToken) {
+      // token: Bearer + xxx
+      config.headers.Authorization = `Bearer ${accessToken}`
+    }
+
+    return config
+  }
+
+  function reqReject(error) {
+    return Promise.reject(error)
+  }
+
+  const SUCCESS_CODES = [0, 200]
+  function resResolve(response) {
+    const { data, status, config, statusText, headers } = response
+    if (headers['content-type']?.includes('json')) {
+      if (SUCCESS_CODES.includes(data?.code)) {
+        return Promise.resolve(data)
+      }
+      const code = data?.code ?? status
+
+      const needTip = config?.needTip !== false
+
+      // 根据code处理对应的操作，并返回处理后的message
+      const message = resolveResError(code, data?.message ?? statusText, needTip)
+
+      return Promise.reject({ code, message, error: data ?? response })
+    }
+    return Promise.resolve(data ?? response)
+  }
+
+  async function resReject(error) {
+    if (!error || !error.response) {
+      const code = error?.code
+      /** 根据code处理对应的操作，并返回处理后的message */
+      const message = resolveResError(code, error.message)
+      return Promise.reject({ code, message, error })
+    }
+
+    const { data, status, config } = error.response
+    const code = data?.code ?? status
+
+    const needTip = config?.needTip !== false
+    const message = resolveResError(code, data?.message ?? error.message, needTip)
+    return Promise.reject({ code, message, error: error.response?.data || error.response })
+  }
+
+  axiosInstance.interceptors.request.use(reqResolve, reqReject)
+  axiosInstance.interceptors.response.use(resResolve, resReject)
+}
diff --git a/web/src/utils/index.js b/web/src/utils/index.js
new file mode 100644
index 0000000..a18642a
--- /dev/null
+++ b/web/src/utils/index.js
@@ -0,0 +1,14 @@
+/**********************************
+ * @FilePath: index.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:45:53
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+export * from './common'
+export * from './http'
+export * from './is'
+export * from './naiveTools'
+export * from './storage'
diff --git a/web/src/utils/is.js b/web/src/utils/is.js
new file mode 100644
index 0000000..6b9a814
--- /dev/null
+++ b/web/src/utils/is.js
@@ -0,0 +1,127 @@
+/**********************************
+ * @FilePath: is.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:45:32
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+const toString = Object.prototype.toString
+
+export function is(val, type) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isDef(val) {
+  return typeof val !== 'undefined'
+}
+
+export function isUndef(val) {
+  return typeof val === 'undefined'
+}
+
+export function isNull(val) {
+  return val === null
+}
+
+export function isWhitespace(val) {
+  return val === ''
+}
+
+export function isObject(val) {
+  return !isNull(val) && is(val, 'Object')
+}
+
+export function isArray(val) {
+  return val && Array.isArray(val)
+}
+
+export function isString(val) {
+  return is(val, 'String')
+}
+
+export function isNumber(val) {
+  return is(val, 'Number')
+}
+
+export function isBoolean(val) {
+  return is(val, 'Boolean')
+}
+
+export function isDate(val) {
+  return is(val, 'Date')
+}
+
+export function isRegExp(val) {
+  return is(val, 'RegExp')
+}
+
+export function isFunction(val) {
+  return typeof val === 'function'
+}
+
+export function isPromise(val) {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+export function isElement(val) {
+  return isObject(val) && !!val.tagName
+}
+
+export function isWindow(val) {
+  return typeof window !== 'undefined' && isDef(window) && is(val, 'Window')
+}
+
+export function isNullOrUndef(val) {
+  return isNull(val) || isUndef(val)
+}
+
+export function isNullOrWhitespace(val) {
+  return isNullOrUndef(val) || isWhitespace(val)
+}
+
+/** 空数组 | 空字符串 | 空对象 | 空Map | 空Set */
+export function isEmpty(val) {
+  if (isArray(val) || isString(val)) {
+    return val.length === 0
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0
+  }
+
+  return false
+}
+
+/**
+ * 类似mysql的IFNULL函数
+ *
+ * @param {number | boolean | string} val
+ * @param {number | boolean | string} def
+ * @returns 第一个参数为null | undefined | '' 则返回第二个参数作为备用值，否则返回第一个参数
+ */
+export function ifNull(val, def = '') {
+  return isNullOrWhitespace(val) ? def : val
+}
+
+export function isUrl(path) {
+  const reg = /^https?:\/\/[-\w+&@#/%?=~|!:,.;]+[-\w+&@#/%=~|]$/
+  return reg.test(path)
+}
+
+/**
+ * @param {string} path
+ * @returns {boolean} 是否是外部链接
+ */
+export function isExternal(path) {
+  return /^https?:|mailto:|tel:/.test(path)
+}
+
+export const isServer = typeof window === 'undefined'
+
+export const isClient = !isServer
diff --git a/web/src/utils/naiveTools.js b/web/src/utils/naiveTools.js
new file mode 100644
index 0000000..20efe5e
--- /dev/null
+++ b/web/src/utils/naiveTools.js
@@ -0,0 +1,121 @@
+/**********************************
+ * @FilePath: naiveTools.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:45:20
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import * as NaiveUI from 'naive-ui'
+import { isNullOrUndef } from '@/utils'
+import { useAppStore } from '@/store'
+
+export function setupMessage(NMessage) {
+  class Message {
+    static instance
+    constructor() {
+      // 单例模式
+      if (Message.instance)
+        return Message.instance
+      Message.instance = this
+      this.message = {}
+      this.removeTimer = {}
+    }
+
+    removeMessage(key, duration = 5000) {
+      this.removeTimer[key] && clearTimeout(this.removeTimer[key])
+      this.removeTimer[key] = setTimeout(() => {
+        this.message[key]?.destroy()
+      }, duration)
+    }
+
+    destroy(key, duration = 200) {
+      setTimeout(() => {
+        this.message[key]?.destroy()
+      }, duration)
+    }
+
+    showMessage(type, content, option = {}) {
+      if (Array.isArray(content)) {
+        return content.forEach(msg => NMessage[type](msg, option))
+      }
+
+      if (!option.key) {
+        return NMessage[type](content, option)
+      }
+
+      const currentMessage = this.message[option.key]
+      if (currentMessage) {
+        currentMessage.type = type
+        currentMessage.content = content
+      }
+      else {
+        this.message[option.key] = NMessage[type](content, {
+          ...option,
+          duration: 0,
+          onAfterLeave: () => {
+            delete this.message[option.key]
+          },
+        })
+      }
+      this.removeMessage(option.key, option.duration)
+    }
+
+    loading(content, option) {
+      this.showMessage('loading', content, option)
+    }
+
+    success(content, option) {
+      this.showMessage('success', content, option)
+    }
+
+    error(content, option) {
+      this.showMessage('error', content, option)
+    }
+
+    info(content, option) {
+      this.showMessage('info', content, option)
+    }
+
+    warning(content, option) {
+      this.showMessage('warning', content, option)
+    }
+  }
+
+  return new Message()
+}
+
+export function setupDialog(NDialog) {
+  NDialog.confirm = function (option = {}) {
+    const showIcon = !isNullOrUndef(option.title)
+    return NDialog[option.type || 'warning']({
+      showIcon,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: option.confirm,
+      onNegativeClick: option.cancel,
+      onMaskClick: option.cancel,
+      ...option,
+    })
+  }
+
+  return NDialog
+}
+
+export function setupNaiveDiscreteApi() {
+  const appStore = useAppStore()
+  const configProviderProps = computed(() => ({
+    theme: appStore.isDark ? NaiveUI.darkTheme : undefined,
+    themeOverrides: useAppStore().naiveThemeOverrides,
+  }))
+  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    { configProviderProps },
+  )
+
+  window.$loadingBar = loadingBar
+  window.$notification = notification
+  window.$message = setupMessage(message)
+  window.$dialog = setupDialog(dialog)
+}
diff --git a/web/src/utils/storage/index.js b/web/src/utils/storage/index.js
new file mode 100644
index 0000000..f173867
--- /dev/null
+++ b/web/src/utils/storage/index.js
@@ -0,0 +1,30 @@
+/**********************************
+ * @FilePath: index.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:07
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createStorage } from './storage'
+
+const prefixKey = 'vue-naive-admin_'
+
+export const createLocalStorage = function (option = {}) {
+  return createStorage({
+    prefixKey: option.prefixKey || '',
+    storage: localStorage,
+  })
+}
+
+export const createSessionStorage = function (option = {}) {
+  return createStorage({
+    prefixKey: option.prefixKey || '',
+    storage: sessionStorage,
+  })
+}
+
+export const lStorage = createLocalStorage({ prefixKey })
+
+export const sStorage = createSessionStorage({ prefixKey })
diff --git a/web/src/utils/storage/storage.js b/web/src/utils/storage/storage.js
new file mode 100644
index 0000000..6741e07
--- /dev/null
+++ b/web/src/utils/storage/storage.js
@@ -0,0 +1,66 @@
+/**********************************
+ * @FilePath: storage.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:13
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { isNullOrUndef } from '@/utils'
+
+class Storage {
+  constructor(option) {
+    this.storage = option.storage
+    this.prefixKey = option.prefixKey
+  }
+
+  getKey(key) {
+    return `${this.prefixKey}${key}`.toLowerCase()
+  }
+
+  set(key, value, expire) {
+    const stringData = JSON.stringify({
+      value,
+      time: Date.now(),
+      expire: !isNullOrUndef(expire) ? new Date().getTime() + expire * 1000 : null,
+    })
+    this.storage.setItem(this.getKey(key), stringData)
+  }
+
+  get(key) {
+    const { value } = this.getItem(key, {})
+    return value
+  }
+
+  getItem(key, def = null) {
+    const val = this.storage.getItem(this.getKey(key))
+    if (!val)
+      return def
+    try {
+      const data = JSON.parse(val)
+      const { value, time, expire } = data
+      if (isNullOrUndef(expire) || expire > new Date().getTime()) {
+        return { value, time }
+      }
+      this.remove(key)
+      return def
+    }
+    catch (error) {
+      this.remove(key)
+      return def
+    }
+  }
+
+  remove(key) {
+    this.storage.removeItem(this.getKey(key))
+  }
+
+  clear() {
+    this.storage.clear()
+  }
+}
+
+export function createStorage({ prefixKey = '', storage = sessionStorage }) {
+  return new Storage({ prefixKey, storage })
+}
diff --git a/web/src/views/base/index.vue b/web/src/views/base/index.vue
new file mode 100644
index 0000000..d768f38
--- /dev/null
+++ b/web/src/views/base/index.vue
@@ -0,0 +1,138 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:46:57
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage show-footer>
+    <n-space size="large">
+      <n-card title="按钮 Button">
+        <n-space>
+          <n-button>Default</n-button>
+          <n-button type="tertiary">
+            Tertiary
+          </n-button>
+          <n-button type="primary">
+            Primary
+          </n-button>
+          <n-button type="info">
+            Info
+          </n-button>
+          <n-button type="success">
+            Success
+          </n-button>
+          <n-button type="warning">
+            Warning
+          </n-button>
+          <n-button type="error">
+            Error
+          </n-button>
+        </n-space>
+      </n-card>
+
+      <n-card title="带 Icon 的按钮">
+        <n-space>
+          <n-button type="info">
+            <i class="i-material-symbols:add mr-4 text-18" />
+            新增
+          </n-button>
+          <n-button type="error">
+            <i class="i-material-symbols:delete-outline mr-4 text-18" />
+            删除
+          </n-button>
+          <n-button type="warning">
+            <i class="i-material-symbols:edit-outline mr-4 text-18" />
+            编辑
+          </n-button>
+          <n-button type="primary">
+            <i class="i-majesticons:eye-line mr-4 text-18" />
+            查看
+          </n-button>
+        </n-space>
+      </n-card>
+    </n-space>
+
+    <n-space size="large" mt-30>
+      <n-card min-w-340 title="通知 Notification">
+        <n-space>
+          <n-button @click="notify('info')">
+            信息
+          </n-button>
+          <n-button @click="notify('success')">
+            成功
+          </n-button>
+          <n-button @click="notify('warning')">
+            警告
+          </n-button>
+          <n-button @click="notify('error')">
+            错误
+          </n-button>
+        </n-space>
+      </n-card>
+
+      <n-card min-w-340 title="确认弹窗 Dialog">
+        <n-button type="error" @click="handleDelete">
+          <i class="i-mi:delete mr-4" />
+          删除
+        </n-button>
+      </n-card>
+
+      <n-card min-w-340 title="消息提醒 Message">
+        <n-space>
+          <n-button :loading="loading" type="primary" @click="handleLogin">
+            <i v-show="!loading" class="i-mdi:login mr-4" />
+            登录
+          </n-button>
+          <n-button type="error" @click="handleMultiMessage">
+            多个错误提醒
+          </n-button>
+        </n-space>
+      </n-card>
+    </n-space>
+  </CommonPage>
+</template>
+
+<script setup>
+import { sleep } from '@/utils'
+
+const handleDelete = function () {
+  $dialog.confirm({
+    content: '确认删除？',
+    confirm() {
+      $message.success('删除成功')
+    },
+    cancel() {
+      $message.warning('已取消')
+    },
+  })
+}
+
+const loading = ref(false)
+async function handleLogin() {
+  loading.value = true
+  $message.loading('登录中...', { key: 'login' })
+  await sleep(2000)
+  $message.error('登录失败', { key: 'login' })
+  await sleep(500)
+  $message.loading('正在尝试重新登录...', { key: 'login' })
+  await sleep(2000)
+  $message.success('登录成功', { key: 'login' })
+  loading.value = false
+}
+
+function handleMultiMessage() {
+  $message.error(['用户名不能为空！', '密码不能为空！', '密码必须大于6位！'])
+}
+
+function notify(type) {
+  $notification[type]({
+    content: '说点啥呢',
+    meta: '想不出来',
+    duration: 2500,
+    keepAliveOnHover: true,
+  })
+}
+</script>
diff --git a/web/src/views/base/keep-alive.vue b/web/src/views/base/keep-alive.vue
new file mode 100644
index 0000000..b268b7b
--- /dev/null
+++ b/web/src/views/base/keep-alive.vue
@@ -0,0 +1,26 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:27:37
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage show-footer>
+    <div w-350>
+      <n-input v-model:value="inputVal" />
+      <n-input-number v-model:value="number" mt-30 />
+      <p mt-20 text-center text-14 color-gray>
+        注：右击标签重新加载可重置keep-alive
+      </p>
+    </div>
+  </CommonPage>
+</template>
+
+<script setup>
+defineOptions({ name: 'KeepAlive' })
+
+const inputVal = ref('')
+const number = ref(0)
+</script>
diff --git a/web/src/views/base/test-modal.vue b/web/src/views/base/test-modal.vue
new file mode 100644
index 0000000..2013550
--- /dev/null
+++ b/web/src/views/base/test-modal.vue
@@ -0,0 +1,73 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/01/13 17:41:47
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage show-footer>
+    <n-button type="primary" @click="openModal1">
+      打开第一个弹个窗
+    </n-button>
+    <MeModal ref="$modal1">
+      <n-input v-model:value="text" />
+    </MeModal>
+    <MeModal ref="$modal2" title="上一个弹窗提交的内容">
+      <h2>{{ text }}</h2>
+    </MeModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { MeModal } from '@/components'
+import { sleep } from '@/utils'
+import { useModal } from '@/composables'
+
+const text = ref('')
+const [$modal1, okLoading1] = useModal()
+function openModal1() {
+  $modal1.value?.open({
+    title: '第一个弹窗',
+    width: '600px',
+    okText: '再弹个窗',
+    cancelText: '关闭',
+    async onOk() {
+      if (!text.value) {
+        $message.warning('请输入内容')
+        return false // 阻止弹窗关闭
+      }
+      okLoading1.value = true
+      $message.loading('正在提交...', { key: 'modal1' })
+      await sleep(1000)
+      okLoading1.value = false
+      $message.success('提交成功', { key: 'modal1' })
+      openModal2()
+      return false // 默认关闭弹窗，返回false可让弹窗不关闭
+    },
+    onCancel(message) {
+      $message.info(message ?? '已取消')
+    },
+  })
+}
+
+const [$modal2, okLoading2] = useModal()
+function openModal2() {
+  $modal2.value?.open({
+    cancelText: '关闭当前',
+    okText: '关闭所有弹窗',
+    width: '400px',
+    async onOk() {
+      okLoading2.value = true
+      $message.loading('正在关闭...', { key: 'modal2' })
+      await sleep(1000)
+      okLoading2.value = false
+
+      // 把modal1也关了
+      $modal1.value?.close()
+      $message.success('已关闭', { key: 'modal2' })
+    },
+  })
+}
+</script>
diff --git a/web/src/views/base/unocss-icon.vue b/web/src/views/base/unocss-icon.vue
new file mode 100644
index 0000000..8960d8d
--- /dev/null
+++ b/web/src/views/base/unocss-icon.vue
@@ -0,0 +1,44 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:27:49
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage show-footer>
+    <template #title-suffix>
+      <n-tag class="ml-12" type="primary">
+        feather图标集 + isme自定义图标
+      </n-tag>
+    </template>
+    <ul class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] justify-items-center gap-16">
+      <li
+        v-for="item in icons"
+        :key="item"
+        class="w-160 f-c-c flex-col cursor-pointer rounded-12 px-12 py-24 card-border auto-bg"
+        @click="copy(`&lt;i class=&quot;${item}&quot; /&gt;`)"
+      >
+        <i :class="`${item}?mask`" class="text-28 text-gray-600 hover:bg-primary" />
+        <span
+          class="mt-16 text-center text-14 text-gray-400 hover:color-primary"
+          @click.stop="copy(item)"
+        >
+          {{ item }}
+        </span>
+      </li>
+    </ul>
+  </CommonPage>
+</template>
+
+<script setup>
+import { useClipboard } from '@vueuse/core'
+import icons from 'isme:icons'
+
+const { copy, copied } = useClipboard()
+
+watch(copied, (val) => {
+  val && $message.success('已复制到剪切板')
+})
+</script>
diff --git a/web/src/views/base/unocss.vue b/web/src/views/base/unocss.vue
new file mode 100644
index 0000000..980d2f3
--- /dev/null
+++ b/web/src/views/base/unocss.vue
@@ -0,0 +1,76 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:27:55
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage show-footer>
+    <p>
+      文档：
+      <a c-blue hover-decoration-underline href="https://uno.antfu.me/" target="_blank">
+        https://uno.antfu.me/
+      </a>
+    </p>
+    <p>
+      playground：
+      <a c-blue hover-decoration-underline href="https://unocss.antfu.me/play/" target="_blank">
+        https://unocss.antfu.me/play/
+      </a>
+    </p>
+
+    <div mt-20 w-350 f-c-c flex-col>
+      <div flex flex-wrap justify-around rounded-10 p-10 card-border>
+        <div m-20 h-50 w-50 f-c-c rounded-5 p-10 border="1 solid">
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+        </div>
+        <div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
+        </div>
+        <div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-center rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
+        </div>
+        <div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
+          <div flex-col justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+          <div flex-col justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+        </div>
+        <div m-20 h-50 w-50 flex-col items-center justify-between rounded-5 p-10 border="1 solid">
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+          <div h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+        </div>
+        <div m-20 h-50 w-50 flex-col justify-between rounded-5 p-10 border="1 solid">
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          </div>
+        </div>
+      </div>
+    </div>
+  </CommonPage>
+</template>
diff --git a/web/src/views/demo/upload/index.vue b/web/src/views/demo/upload/index.vue
new file mode 100644
index 0000000..9145dd7
--- /dev/null
+++ b/web/src/views/demo/upload/index.vue
@@ -0,0 +1,97 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:02
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage>
+    <n-upload
+      class="mx-auto w-[75%] p-20 text-center"
+      :custom-request="handleUpload"
+      :show-file-list="false"
+      accept=".png,.jpg,.jpeg"
+      @before-upload="onBeforeUpload"
+    >
+      <n-upload-dragger>
+        <div class="h-150 f-c-c flex-col">
+          <i class="i-mdi:upload mb-12 text-68 color-primary" />
+          <n-text class="text-14 color-gray">
+            点击或者拖动文件到该区域来上传
+          </n-text>
+        </div>
+      </n-upload-dragger>
+    </n-upload>
+
+    <n-card v-if="imgList && imgList.length" class="mt-16 items-center">
+      <n-image-group>
+        <n-space justify="space-between" align="center">
+          <n-card v-for="(item, index) in imgList" :key="index" class="w-280 hover:card-shadow">
+            <div class="h-160 f-c-c">
+              <n-image width="200" :src="item.url" />
+            </div>
+            <n-space class="mt-16" justify="space-evenly">
+              <n-button dashed type="primary" @click="copy(item.url)">
+                url
+              </n-button>
+              <n-button dashed type="primary" @click="copy(`![${item.fileName}](${item.url})`)">
+                MD
+              </n-button>
+              <n-button
+                dashed
+                type="primary"
+                @click="copy(`&lt;img src=&quot;${item.url}&quot; /&gt;`)"
+              >
+                img
+              </n-button>
+            </n-space>
+          </n-card>
+          <div v-for="i in 4" :key="i" class="w-280" />
+        </n-space>
+      </n-image-group>
+    </n-card>
+  </CommonPage>
+</template>
+
+<script setup>
+import { useClipboard } from '@vueuse/core'
+
+defineOptions({ name: 'ImgUpload' })
+
+const { copy, copied } = useClipboard()
+
+const imgList = reactive([
+  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+  { url: 'https://cdn.isme.top/images/5c23d52f880511ebb6edd017c2d2eca2.jpg' },
+])
+
+watch(copied, (val) => {
+  val && $message.success('已复制到剪切板')
+})
+
+function onBeforeUpload({ file }) {
+  if (!file.file?.type.startsWith('image/')) {
+    $message.error('只能上传图片')
+    return false
+  }
+  return true
+}
+
+async function handleUpload({ file, onFinish }) {
+  if (!file || !file.type) {
+    $message.error('请选择文件')
+  }
+
+  // 模拟上传
+  $message.loading('上传中...')
+  setTimeout(() => {
+    $message.success('上传成功')
+    imgList.push({ fileName: file.name, url: URL.createObjectURL(file.file) })
+    onFinish()
+  }, 1500)
+}
+</script>
diff --git a/web/src/views/error-page/403.vue b/web/src/views/error-page/403.vue
new file mode 100644
index 0000000..880c3de
--- /dev/null
+++ b/web/src/views/error-page/403.vue
@@ -0,0 +1,44 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:09
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage :show-header="false">
+    <div class="wh-full flex">
+      <n-result
+        class="m-auto"
+        status="403"
+        title="403 禁止访问"
+        description="抱歉，您暂无权限访问，请联系管理员开通权限。"
+        size="large"
+      >
+        <template #footer>
+          <n-button v-if="back" type="primary" ghost @click="router.replace(back)">
+            返回上一页
+          </n-button>
+          <n-button type="primary" class="ml-20" @click="router.replace('/')">
+            返回首页
+          </n-button>
+        </template>
+      </n-result>
+    </div>
+  </CommonPage>
+</template>
+
+<script setup>
+const router = useRouter()
+const route = useRoute()
+
+const back = history.state.back
+
+if (history.state.from === 'permission-guard') {
+  delete history.state.from
+}
+else if (route.query.path) {
+  router.replace(route.query.path)
+}
+</script>
diff --git a/web/src/views/error-page/404.vue b/web/src/views/error-page/404.vue
new file mode 100644
index 0000000..322aeeb
--- /dev/null
+++ b/web/src/views/error-page/404.vue
@@ -0,0 +1,31 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:15
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage :show-header="false">
+    <div class="wh-full flex">
+      <n-result
+        m-auto
+        status="404"
+        title="404 您访问的页面不存在"
+        description="生活总归带点荒谬"
+        size="large"
+      >
+        <template #footer>
+          <n-button type="primary" ghost @click="replace('/')">
+            返回首页
+          </n-button>
+        </template>
+      </n-result>
+    </div>
+  </CommonPage>
+</template>
+
+<script setup>
+const { replace } = useRouter()
+</script>
diff --git a/web/src/views/home/index.vue b/web/src/views/home/index.vue
new file mode 100644
index 0000000..3b5211d
--- /dev/null
+++ b/web/src/views/home/index.vue
@@ -0,0 +1,289 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:22
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppPage show-footer>
+    <div class="flex">
+      <n-card class="min-w-200 w-30%">
+        <div class="flex items-center">
+          <n-avatar round :size="60" :src="userStore.avatar" class="flex-shrink-0" />
+          <div class="ml-20 flex-col">
+            <span class="text-20 opacity-80">
+              Hello, {{ userStore.nickName ?? userStore.username }}
+            </span>
+            <span class="mt-4 opacity-50">当前角色：{{ userStore.currentRole?.name }}</span>
+          </div>
+        </div>
+
+        <p class="mt-28 text-14 opacity-60">
+          一个人几乎可以在任何他怀有无限热忱的事情上成功。
+        </p>
+        <p class="mt-12 text-right text-12 opacity-40">
+          —— 查尔斯·史考伯
+        </p>
+      </n-card>
+      <n-card class="ml-12 w-70%" title="✨ 欢迎使用 Vue Naive Admin 2.0">
+        <template #header-extra>
+          <a
+            class="text-14 text-primary text-highlight hover:underline hover:opacity-80"
+            href="https://isme.top"
+            target="_blank"
+            @click.prevent="message?.info('官网正在火速开发中...')"
+          >
+            isme.top
+          </a>
+        </template>
+
+        <p class="opacity-60">
+          这是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia +
+          Unocss，后端使用 Nestjs + TypeOrm +
+          MySql，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！
+        </p>
+        <footer class="mt-12 flex items-center justify-end">
+          <n-button
+            type="primary"
+            ghost
+            tag="a"
+            href="https://docs.isme.top/web/#/624306705/188522224"
+            target="__blank"
+          >
+            开发文档
+          </n-button>
+          <n-button
+            type="primary"
+            class="ml-12"
+            tag="a"
+            href="https://github.com/zclzone/vue-naive-admin/tree/2.x"
+            target="__blank"
+          >
+            代码仓库
+          </n-button>
+        </footer>
+      </n-card>
+    </div>
+    <div class="mt-12 flex">
+      <n-card class="w-50%" title="💯 特性" segmented>
+        <template #header-extra>
+          <span class="opacity-90 text-highlight">👏 历经十几次重构和细节打磨</span>
+        </template>
+
+        <ul class="opacity-90">
+          <li class="py-4">
+            🆒 使用
+            <b>Vue3</b>
+            主流技术栈:
+            <span class="text-highlight">Vite + Vue3 + Pinia</span>
+          </li>
+          <li class="py-4">
+            🍇 使用
+            <b>原子CSS</b>
+            框架:
+            <span class="text-highlight">Unocss</span>
+            ，优雅、轻量、易用
+          </li>
+          <li class="py-4">
+            🤹 使用主流的
+            <span class="text-highlight">iconify + unocss</span>
+            图标方案，支持自定义图标，支持动态渲染
+          </li>
+          <li class="py-4">
+            🎨 使用 Naive UI，
+            <span class="text-highlight">极致简洁的代码风格和清爽的页面设计</span>
+            ，审美在线，主题轻松定制
+          </li>
+          <li class="py-4">
+            👏 先进且易于理解的文件结构设计，多个模块之间
+            <b>零耦合</b>
+            ，单个业务模块删除不影响其他模块
+          </li>
+          <li class="py-4">
+            🚀
+            <span class="text-highlight">扁平化路由</span>
+            设计，每一个组件都可以是一个页面，告别多级路由 KeepAlive 难实现问题
+          </li>
+
+          <li class="py-4">
+            🍒
+            <span class="text-highlight">基于权限动态生成路由</span>
+            ，无需额外定义路由，
+            <span class="text-highlight">403和404可区分</span>
+            ，而不是无权限也跳404
+          </li>
+          <li class="py-4">
+            🔐 基于Redis集成
+            <span class="text-highlight">无感刷新</span>
+            ，用户登录态可控，安全与体验缺一不可
+          </li>
+          <li class="py-4">
+            ✨ 基于 Naive UI 封装
+            <span class="text-highlight">message</span>
+            全局工具方法，支持批量提醒，支持跨页面共享实例
+          </li>
+          <li class="py-4">
+            ⚡️ 基于 Naive UI 封装常用的业务组件，包含
+            <span class="text-highlight">Page</span>
+            组件、
+            <span class="text-highlight">CRUD</span>
+            表格组件及
+            <span class="text-highlight">Modal</span>
+            组件，减少大量重复性工作
+          </li>
+        </ul>
+
+        <n-divider class="mb-0! mt-12!">
+          <p class="text-14 opacity-60">
+            👉点击
+            <b class="mx-2 transition hover:text-primary">
+              <a href="https://isme.top" target="_blank">更多</a>
+            </b>
+            查看更多实用功能，持续开发中...
+          </p>
+        </n-divider>
+      </n-card>
+
+      <n-card class="ml-12 w-50%" title="🛠️ 技术栈" segmented>
+        <VChart :option="skillOption" autoresize />
+      </n-card>
+    </div>
+
+    <n-card class="mt-12" title="⚡️ 趋势" segmented>
+      <div class="h-400">
+        <VChart :option="trendOption" autoresize />
+      </div>
+    </n-card>
+  </AppPage>
+</template>
+
+<script setup>
+import * as echarts from 'echarts/core'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { useUserStore } from '@/store'
+
+const userStore = useUserStore()
+
+echarts.use([
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  PieChart,
+])
+
+const trendOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      crossStyle: {
+        color: '#999',
+      },
+    },
+  },
+  legend: {
+    top: '5%',
+    data: ['star', 'fork'],
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      min: 0,
+      max: 3000,
+      interval: 500,
+      axisLabel: {
+        formatter: '{value}',
+      },
+    },
+    {
+      type: 'value',
+      min: 0,
+      max: 500,
+      interval: 100,
+      axisLabel: {
+        formatter: '{value}',
+      },
+    },
+  ],
+  series: [
+    {
+      name: 'star',
+      type: 'line',
+      data: [200, 320, 520, 550, 600, 805, 888, 950, 1300, 2503, 2702, 2712],
+    },
+    {
+      name: 'fork',
+      yAxisIndex: 1,
+      type: 'bar',
+      data: [40, 72, 110, 115, 121, 175, 180, 201, 260, 398, 423, 455],
+    },
+  ],
+}
+
+const skillOption = {
+  tooltip: {
+    trigger: 'item',
+    formatter({ name, value }) {
+      return `${name} ${value}%`
+    },
+  },
+  legend: {
+    left: 'center',
+  },
+  series: [
+    {
+      top: '12%',
+      type: 'pie',
+      radius: ['35%', '90%'],
+      avoidLabelOverlap: true,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2,
+      },
+      label: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 36,
+          fontWeight: 'bold',
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        { value: 38.5, name: 'Vue' },
+        { value: 37.0, name: 'JavaScript' },
+        { value: 6.5, name: 'CSS' },
+        { value: 6.2, name: 'HTML' },
+        { value: 1.8, name: 'Other' },
+      ],
+    },
+  ],
+}
+
+const message = $message
+</script>
diff --git a/web/src/views/iframe/index.vue b/web/src/views/iframe/index.vue
new file mode 100644
index 0000000..8768865
--- /dev/null
+++ b/web/src/views/iframe/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <AppPage full>
+    <iframe :src="route.meta.originPath" frameborder="0" class="wh-full" />
+  </AppPage>
+</template>
+
+<script setup>
+const route = useRoute()
+</script>
diff --git a/web/src/views/login/api.js b/web/src/views/login/api.js
new file mode 100644
index 0000000..9c4f939
--- /dev/null
+++ b/web/src/views/login/api.js
@@ -0,0 +1,15 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:28:30
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { request } from '@/utils'
+
+export default {
+  toggleRole: data => request.post('/auth/role/toggle', data),
+  login: data => request.post('/auth/login', data, { needToken: false }),
+  getUser: () => request.get('/user/detail'),
+}
diff --git a/web/src/views/login/index.vue b/web/src/views/login/index.vue
new file mode 100644
index 0000000..b1ef364
--- /dev/null
+++ b/web/src/views/login/index.vue
@@ -0,0 +1,188 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:36
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="wh-full flex-col bg-[url(@/assets/images/login_bg.webp)] bg-cover">
+    <div
+      class="m-auto max-w-700 min-w-345 f-c-c rounded-8 bg-opacity-20 bg-cover p-12 card-shadow auto-bg"
+    >
+      <div class="hidden w-380 px-20 py-35 md:block">
+        <img src="@/assets/images/login_banner.webp" class="w-full" alt="login_banner">
+      </div>
+
+      <div class="w-320 flex-col px-20 py-32">
+        <h2 class="f-c-c text-24 text-#6a6a6a font-normal">
+          <img src="@/assets/images/logo.png" class="mr-12 h-50">
+          {{ title }}
+        </h2>
+        <n-input
+          v-model:value="loginInfo.username"
+          autofocus
+          class="mt-32 h-40 items-center"
+          placeholder="请输入用户名"
+          :maxlength="20"
+        >
+          <template #prefix>
+            <i class="i-fe:user mr-12 opacity-20" />
+          </template>
+        </n-input>
+        <n-input
+          v-model:value="loginInfo.password"
+          class="mt-20 h-40 items-center"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="请输入密码"
+          :maxlength="20"
+          @keydown.enter="handleLogin()"
+        >
+          <template #prefix>
+            <i class="i-fe:lock mr-12 opacity-20" />
+          </template>
+        </n-input>
+
+        <div class="mt-20 flex items-center">
+          <n-input
+            v-model:value="loginInfo.captcha"
+            class="h-40 items-center"
+            palceholder="请输入验证码"
+            :maxlength="4"
+            @keydown.enter="handleLogin()"
+          >
+            <template #prefix>
+              <i class="i-fe:key mr-12 opacity-20" />
+            </template>
+          </n-input>
+          <img
+            v-if="captchaUrl"
+            :src="captchaUrl"
+            alt="验证码"
+            height="40"
+            class="ml-12 w-80 cursor-pointer"
+            @click="initCaptcha"
+          >
+        </div>
+
+        <n-checkbox
+          class="mt-20"
+          :checked="isRemember"
+          label="记住我"
+          :on-update:checked="(val) => (isRemember = val)"
+        />
+
+        <div class="mt-20 flex items-center">
+          <n-button
+            class="h-40 flex-1 rounded-5 text-16"
+            type="primary"
+            ghost
+            @click="quickLogin()"
+          >
+            一键体验
+          </n-button>
+
+          <n-button
+            class="ml-32 h-40 flex-1 rounded-5 text-16"
+            type="primary"
+            :loading="loading"
+            @click="handleLogin()"
+          >
+            登录
+          </n-button>
+        </div>
+      </div>
+    </div>
+
+    <TheFooter class="py-12" />
+  </div>
+</template>
+
+<script setup>
+import { useStorage } from '@vueuse/core'
+import api from './api'
+import { lStorage, throttle } from '@/utils'
+import { useAuthStore } from '@/store'
+
+const authStore = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+const title = import.meta.env.VITE_TITLE
+
+const loginInfo = ref({
+  username: '',
+  password: '',
+})
+
+const captchaUrl = ref('')
+const initCaptcha = throttle(() => {
+  captchaUrl.value = `${import.meta.env.VITE_AXIOS_BASE_URL}/auth/captcha?${Date.now()}`
+}, 500)
+
+const localLoginInfo = lStorage.get('loginInfo')
+if (localLoginInfo) {
+  loginInfo.value.username = localLoginInfo.username || ''
+  loginInfo.value.password = localLoginInfo.password || ''
+}
+initCaptcha()
+
+function quickLogin() {
+  loginInfo.value.username = 'admin'
+  loginInfo.value.password = '123456'
+  handleLogin(true)
+}
+
+const isRemember = useStorage('isRemember', true)
+const loading = ref(false)
+async function handleLogin(isQuick) {
+  const { username, password, captcha } = loginInfo.value
+  if (!username || !password)
+    return $message.warning('请输入用户名和密码')
+  if (!isQuick && !captcha)
+    return $message.warning('请输入验证码')
+  try {
+    loading.value = true
+    $message.loading('正在验证，请稍后...', { key: 'login' })
+    const { data } = await api.login({ username, password: password.toString(), captcha, isQuick })
+    if (isRemember.value) {
+      lStorage.set('loginInfo', { username, password })
+    }
+    else {
+      lStorage.remove('loginInfo')
+    }
+    onLoginSuccess(data)
+  }
+  catch (error) {
+    // 10003为验证码错误专属业务码
+    if (error?.code === 10003) {
+      // 为防止爆破，验证码错误则刷新验证码
+      initCaptcha()
+    }
+    $message.destroy('login')
+    console.error(error)
+  }
+  loading.value = false
+}
+
+async function onLoginSuccess(data = {}) {
+  authStore.setToken(data)
+  $message.loading('登录中...', { key: 'login' })
+  try {
+    $message.success('登录成功', { key: 'login' })
+    if (route.query.redirect) {
+      const path = route.query.redirect
+      delete route.query.redirect
+      router.push({ path, query: route.query })
+    }
+    else {
+      router.push('/')
+    }
+  }
+  catch (error) {
+    console.error(error)
+    $message.destroy('login')
+  }
+}
+</script>
diff --git a/web/src/views/pms/resource/api.js b/web/src/views/pms/resource/api.js
new file mode 100644
index 0000000..4b60272
--- /dev/null
+++ b/web/src/views/pms/resource/api.js
@@ -0,0 +1,19 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2024/04/01 15:52:04
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import axios from 'axios'
+import { request } from '@/utils'
+
+export default {
+  getMenuTree: () => request.get('/permission/menu/tree'),
+  getButtons: ({ parentId }) => request.get(`/permission/button/${parentId}`),
+  getComponents: () => axios.get(`${import.meta.env.VITE_PUBLIC_PATH}components.json`),
+  addPermission: data => request.post('/permission', data),
+  savePermission: (id, data) => request.patch(`/permission/${id}`, data),
+  deletePermission: id => request.delete(`permission/${id}`),
+}
diff --git a/web/src/views/pms/resource/components/MenuTree.vue b/web/src/views/pms/resource/components/MenuTree.vue
new file mode 100644
index 0000000..1a2f74f
--- /dev/null
+++ b/web/src/views/pms/resource/components/MenuTree.vue
@@ -0,0 +1,123 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/04/01 15:51:34
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div>
+    <n-space vertical :size="12">
+      <h3>菜单</h3>
+      <div class="flex">
+        <n-input v-model:value="pattern" placeholder="搜索" clearable />
+        <NButton class="ml-12" type="primary" @click="handleAdd()">
+          <i class="i-material-symbols:add mr-4 text-14" />
+          新增
+        </NButton>
+      </div>
+
+      <n-tree
+        :show-irrelevant-nodes="false"
+        :pattern="pattern"
+        :data="treeData"
+        :selected-keys="[currentMenu?.code]"
+        :render-prefix="renderPrefix"
+        :render-suffix="renderSuffix"
+        :on-update:selected-keys="onSelect"
+        key-field="code"
+        label-field="name"
+        default-expand-all
+        block-line
+      />
+    </n-space>
+
+    <ResAddOrEdit ref="modalRef" :menus="treeData" @refresh="(data) => emit('refresh', data)" />
+  </div>
+</template>
+
+<script setup>
+import { withModifiers } from 'vue'
+import { NButton } from 'naive-ui'
+import api from '../api'
+import ResAddOrEdit from './ResAddOrEdit.vue'
+
+defineProps({
+  treeData: {
+    type: Array,
+    default: () => [],
+  },
+  currentMenu: {
+    type: Object,
+    default: () => null,
+  },
+})
+const emit = defineEmits(['refresh', 'update:currentMenu'])
+
+const pattern = ref('')
+
+const modalRef = ref(null)
+async function handleAdd(data = {}) {
+  modalRef.value?.handleOpen({
+    action: 'add',
+    title: '新增菜单',
+    row: { type: 'MENU', ...data },
+    okText: '保存',
+  })
+}
+
+function onSelect(keys, option, { action, node }) {
+  emit('update:currentMenu', action === 'select' ? node : null)
+}
+
+function renderPrefix({ option }) {
+  return h('i', { class: `${option.icon}?mask text-16` })
+}
+
+function renderSuffix({ option }) {
+  return [
+    h(
+      NButton,
+      {
+        text: true,
+        type: 'primary',
+        title: '新增下级菜单',
+        size: 'tiny',
+        onClick: withModifiers(() => handleAdd({ parentId: option.id }), ['stop']),
+      },
+      { default: () => '新增' },
+    ),
+
+    h(
+      NButton,
+      {
+        text: true,
+        type: 'error',
+        size: 'tiny',
+        style: 'margin-left: 12px;',
+        onClick: withModifiers(() => handleDelete(option), ['stop']),
+      },
+      { default: () => '删除' },
+    ),
+  ]
+}
+
+function handleDelete(item) {
+  $dialog.confirm({
+    content: `确认删除【${item.name}】？`,
+    async confirm() {
+      try {
+        $message.loading('正在删除', { key: 'deleteMenu' })
+        await api.deletePermission(item.id)
+        $message.success('删除成功', { key: 'deleteMenu' })
+        emit('refresh')
+        emit('update:currentMenu', null)
+      }
+      catch (error) {
+        $message.destroy('deleteMenu')
+      }
+    },
+  })
+}
+</script>
diff --git a/web/src/views/pms/resource/components/QuestionLabel.vue b/web/src/views/pms/resource/components/QuestionLabel.vue
new file mode 100644
index 0000000..cc2285d
--- /dev/null
+++ b/web/src/views/pms/resource/components/QuestionLabel.vue
@@ -0,0 +1,32 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:29:05
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <span class="flex items-center">
+    <n-popover v-if="content" trigger="hover">
+      <template #trigger>
+        <i class="i-material-symbols:help mr-4" />
+      </template>
+      <span>{{ content }}</span>
+    </n-popover>
+    {{ label }}
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: String,
+    default: '',
+  },
+})
+</script>
diff --git a/web/src/views/pms/resource/components/ResAddOrEdit.vue b/web/src/views/pms/resource/components/ResAddOrEdit.vue
new file mode 100644
index 0000000..937de7e
--- /dev/null
+++ b/web/src/views/pms/resource/components/ResAddOrEdit.vue
@@ -0,0 +1,241 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/04/01 15:52:31
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <MeModal ref="modalRef">
+    <n-form
+      ref="modalFormRef"
+      label-placement="left"
+      require-mark-placement="left"
+      :label-width="100"
+      :model="modalForm"
+    >
+      <n-grid :cols="24" :x-gap="24">
+        <n-form-item-gi :span="12" label="所属菜单" path="parentId">
+          <n-tree-select
+            v-model:value="modalForm.parentId"
+            :options="menuOptions"
+            :disabled="parentIdDisabled"
+            label-field="name"
+            key-field="id"
+            placeholder="根菜单"
+            clearable
+          />
+        </n-form-item-gi>
+        <n-form-item-gi :span="12" path="name" :rule="required">
+          <template #label>
+            <QuestionLabel label="名称" content="标题" />
+          </template>
+          <n-input v-model:value="modalForm.name" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="12" path="code" :rule="required">
+          <template #label>
+            <QuestionLabel label="编码" content="如果是菜单则对应前端路由的name，使用大驼峰" />
+          </template>
+          <n-input v-model:value="modalForm.code" />
+        </n-form-item-gi>
+        <n-form-item-gi
+          v-if="modalForm.type === 'MENU'"
+          :span="12"
+          path="path"
+          :rule="{
+            trigger: ['blur', 'change'],
+            type: 'string',
+            message: '必须是/、http、https开头',
+            validator(rule, value) {
+              if (value) {
+                return /\/|http|https/.test(value)
+              }
+              return true
+            },
+          }"
+        >
+          <template #label>
+            <QuestionLabel label="路由地址" content="父级菜单可不填" />
+          </template>
+          <n-input v-model:value="modalForm.path" />
+        </n-form-item-gi>
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="icon">
+          <template #label>
+            <QuestionLabel
+              label="菜单图标"
+              content="如material-symbols:help，图标库地址: https://icones.js.org/collection/all"
+            />
+          </template>
+          <n-select v-model:value="modalForm.icon" :options="iconOptions" clearable filterable />
+        </n-form-item-gi>
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="layout">
+          <template #label>
+            <QuestionLabel
+              label="layout"
+              content="对应layouts文件夹下的目录名, 为空则默认为 default"
+            />
+          </template>
+          <n-select v-model:value="modalForm.layout" :options="layoutOptions" clearable />
+        </n-form-item-gi>
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="24" path="component">
+          <template #label>
+            <QuestionLabel
+              label="组件路径"
+              content="前端组件的路径，以 /src 开头，父级菜单可不填"
+            />
+          </template>
+          <n-select
+            v-model:value="modalForm.component"
+            :options="componentOptions"
+            clearable
+            filterable
+            tag
+          />
+        </n-form-item-gi>
+
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="show">
+          <template #label>
+            <QuestionLabel label="显示状态" content="控制是否在菜单栏显示，不影响路由注册" />
+          </template>
+          <n-switch v-model:value="modalForm.show">
+            <template #checked>
+              显示
+            </template>
+            <template #unchecked>
+              隐藏
+            </template>
+          </n-switch>
+        </n-form-item-gi>
+        <n-form-item-gi :span="12" path="enable">
+          <template #label>
+            <QuestionLabel
+              label="状态"
+              content="如果是菜单，禁用后将不添加到路由表，无法进入此页面"
+            />
+          </template>
+          <n-switch v-model:value="modalForm.enable">
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              禁用
+            </template>
+          </n-switch>
+        </n-form-item-gi>
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="keepAlive">
+          <template #label>
+            <QuestionLabel
+              label="KeepAlive"
+              content="设置keepAlive需将组件的name设置成当前菜单的code"
+            />
+          </template>
+          <n-switch v-model:value="modalForm.keepAlive">
+            <template #checked>
+              是
+            </template>
+            <template #unchecked>
+              否
+            </template>
+          </n-switch>
+        </n-form-item-gi>
+        <n-form-item-gi
+          v-if="modalForm.type === 'MENU'"
+          :span="12"
+          label="排序"
+          path="order"
+          :rule="{
+            type: 'number',
+            required: true,
+            message: '此为必填项',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <n-input-number v-model:value="modalForm.order" />
+        </n-form-item-gi>
+      </n-grid>
+    </n-form>
+  </MeModal>
+</template>
+
+<script setup>
+import pagePathes from 'isme:page-pathes'
+import icons from 'isme:icons'
+import api from '../api'
+import QuestionLabel from './QuestionLabel.vue'
+import { MeModal } from '@/components'
+import { useForm, useModal } from '@/composables'
+
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true,
+  },
+})
+const emit = defineEmits(['refresh'])
+
+const menuOptions = computed(() => {
+  return [{ name: '根菜单', id: '', children: props.menus || [] }]
+})
+const componentOptions = pagePathes.map(path => ({ label: path, value: path }))
+const iconOptions = icons.map(item => ({
+  label: () =>
+    h('span', { class: 'flex items-center' }, [h('i', { class: `${item} text-18 mr-8` }), item]),
+  value: item,
+}))
+const layoutOptions = [
+  { label: '跟随系统', value: '' },
+  { label: '简约-simple', value: 'simple' },
+  { label: '通用-normal', value: 'normal' },
+  { label: '全面-full', value: 'full' },
+  { label: '空白-empty', value: 'empty' },
+]
+const required = {
+  required: true,
+  message: '此为必填项',
+  trigger: ['blur', 'change'],
+}
+
+const defaultForm = { enable: true, show: true, layout: '' }
+const [modalFormRef, modalForm, validation] = useForm()
+const [modalRef, okLoading] = useModal()
+
+const modalAction = ref('')
+const parentIdDisabled = ref(false)
+function handleOpen(options = {}) {
+  const { action, row = {}, ...rest } = options
+  modalAction.value = action
+  modalForm.value = { ...defaultForm, ...row }
+  parentIdDisabled.value = !!row.parentId && row.type === 'BUTTON'
+  modalRef.value.open({ ...rest, onOk: onSave })
+}
+
+async function onSave() {
+  await validation()
+  okLoading.value = true
+  try {
+    let newFormData
+    if (!modalForm.value.parentId)
+      modalForm.value.parentId = null
+    if (modalAction.value === 'add') {
+      const res = await api.addPermission(modalForm.value)
+      newFormData = res.data
+    }
+    else if (modalAction.value === 'edit') {
+      await api.savePermission(modalForm.value.id, modalForm.value)
+    }
+    okLoading.value = false
+    $message.success('保存成功')
+    emit('refresh', modalAction.value === 'add' ? newFormData : modalForm.value)
+  }
+  catch (error) {
+    console.error(error)
+    okLoading.value = false
+    return false
+  }
+}
+
+defineExpose({
+  handleOpen,
+})
+</script>
diff --git a/web/src/views/pms/resource/index.vue b/web/src/views/pms/resource/index.vue
new file mode 100644
index 0000000..084b6ff
--- /dev/null
+++ b/web/src/views/pms/resource/index.vue
@@ -0,0 +1,254 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:28:53
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage>
+    <div class="flex">
+      <n-spin size="small" :show="treeLoading">
+        <MenuTree
+          v-model:currentMenu="currentMenu"
+          class="w-320 shrink-0"
+          :tree-data="treeData"
+          @refresh="initData"
+        />
+      </n-spin>
+
+      <div class="ml-40 w-0 flex-1">
+        <template v-if="currentMenu">
+          <div class="flex justify-between">
+            <h3 class="mb-12">
+              {{ currentMenu.name }}
+            </h3>
+            <NButton size="small" type="primary" @click="handleEdit(currentMenu)">
+              <i class="i-material-symbols:edit-outline mr-4 text-14" />
+              编辑
+            </NButton>
+          </div>
+          <n-descriptions label-placement="left" bordered :column="2">
+            <n-descriptions-item label="编码">
+              {{ currentMenu.code }}
+            </n-descriptions-item>
+            <n-descriptions-item label="名称">
+              {{ currentMenu.name }}
+            </n-descriptions-item>
+            <n-descriptions-item label="路由地址">
+              {{ currentMenu.path ?? '--' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="组件路径">
+              {{ currentMenu.component ?? '--' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="菜单图标">
+              <span v-if="currentMenu.icon" class="flex items-center">
+                <i :class="`${currentMenu.icon}?mask text-22 mr-8`" />
+                <span class="opacity-50">{{ currentMenu.icon }}</span>
+              </span>
+              <span v-else>无</span>
+            </n-descriptions-item>
+            <n-descriptions-item label="layout">
+              {{ currentMenu.layout || '跟随系统' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="是否显示">
+              {{ currentMenu.show ? '是' : '否' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="是否启用">
+              {{ currentMenu.enable ? '是' : '否' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="KeepAlive">
+              {{ currentMenu.keepAlive ? '是' : '否' }}
+            </n-descriptions-item>
+            <n-descriptions-item label="排序">
+              {{ currentMenu.order ?? '--' }}
+            </n-descriptions-item>
+          </n-descriptions>
+
+          <div class="mt-32 flex justify-between">
+            <h3 class="mb-12">
+              按钮
+            </h3>
+            <NButton size="small" type="primary" @click="handleAddBtn">
+              <i class="i-fe:plus mr-4 text-14" />
+              新增
+            </NButton>
+          </div>
+
+          <MeCrud
+            ref="$table"
+            :columns="btnsColumns"
+            :scroll-x="-1"
+            :get-data="api.getButtons"
+            :query-items="{ parentId: currentMenu.id }"
+          />
+        </template>
+        <n-empty v-else class="h-450 f-c-c" size="large" description="请选择菜单查看详情" />
+      </div>
+    </div>
+    <ResAddOrEdit ref="modalRef" :menus="treeData" @refresh="initData" />
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import MenuTree from './components/MenuTree.vue'
+import ResAddOrEdit from './components/ResAddOrEdit.vue'
+import api from './api'
+import { MeCrud } from '@/components'
+
+const treeData = ref([])
+const treeLoading = ref(false)
+const $table = ref(null)
+const currentMenu = ref(null)
+async function initData(data) {
+  if (data?.type === 'BUTTON') {
+    $table.value.handleSearch()
+    return
+  }
+  treeLoading.value = true
+  const res = await api.getMenuTree()
+  treeData.value = res?.data || []
+  treeLoading.value = false
+
+  if (data)
+    currentMenu.value = data
+}
+initData()
+
+const modalRef = ref(null)
+function handleEdit(item = {}) {
+  modalRef.value?.handleOpen({
+    action: 'edit',
+    title: `编辑菜单 - ${item.name}`,
+    row: item,
+    okText: '保存',
+  })
+}
+
+const btnsColumns = [
+  { title: '名称', key: 'name' },
+  { title: '编码', key: 'code' },
+  {
+    title: '状态',
+    key: 'enable',
+    render: row =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+          loading: !!row.enableLoading,
+          onUpdateValue: () => handleEnable(row),
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        },
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'right',
+    fixed: 'right',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 12px;',
+            onClick: () => handleEditBtn(row),
+          },
+          {
+            default: () => '编辑',
+            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
+          },
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 12px;',
+            onClick: () => handleDeleteBtn(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          },
+        ),
+      ]
+    },
+  },
+]
+
+watch(
+  () => currentMenu.value,
+  async (v) => {
+    await nextTick()
+    if (v)
+      $table.value.handleSearch()
+  },
+)
+
+function handleAddBtn() {
+  modalRef.value?.handleOpen({
+    action: 'add',
+    title: '新增按钮',
+    row: { type: 'BUTTON', parentId: currentMenu.value.id },
+    okText: '保存',
+  })
+}
+
+function handleEditBtn(row) {
+  modalRef.value?.handleOpen({
+    action: 'edit',
+    title: `编辑按钮 - ${row.name}`,
+    row,
+    okText: '保存',
+  })
+}
+
+function handleDeleteBtn(id) {
+  const d = $dialog.warning({
+    content: '确定删除？',
+    title: '提示',
+    positiveText: '确定',
+    negativeText: '取消',
+    async onPositiveClick() {
+      try {
+        d.loading = true
+        await api.deletePermission(id)
+        $message.success('删除成功')
+        $table.value.handleSearch()
+        d.loading = false
+      }
+      catch (error) {
+        d.loading = false
+      }
+    },
+  })
+}
+
+async function handleEnable(item) {
+  try {
+    item.enableLoading = true
+    await api.savePermission(item.id, {
+      enable: !item.enable,
+    })
+    $message.success('操作成功')
+    $table.value?.handleSearch()
+    item.enableLoading = false
+  }
+  catch (error) {
+    item.enableLoading = false
+  }
+}
+</script>
diff --git a/web/src/views/pms/role/api.js b/web/src/views/pms/role/api.js
new file mode 100644
index 0000000..d18d97c
--- /dev/null
+++ b/web/src/views/pms/role/api.js
@@ -0,0 +1,21 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:29:27
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { request } from '@/utils'
+
+export default {
+  create: data => request.post('/role', data),
+  read: (params = {}) => request.get('/role/page', { params }),
+  update: data => request.patch(`/role/${data.id}`, data),
+  delete: id => request.delete(`/role/${id}`),
+
+  getAllPermissionTree: () => request.get('/permission/tree'),
+  getAllUsers: (params = {}) => request.get('/user', { params }),
+  addRoleUsers: (roleId, data) => request.patch(`/role/users/add/${roleId}`, data),
+  removeRoleUsers: (roleId, data) => request.patch(`/role/users/remove/${roleId}`, data),
+}
diff --git a/web/src/views/pms/role/index.vue b/web/src/views/pms/role/index.vue
new file mode 100644
index 0000000..36b85b1
--- /dev/null
+++ b/web/src/views/pms/role/index.vue
@@ -0,0 +1,220 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2024/04/01 15:52:40
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage>
+    <template #action>
+      <NButton type="primary" @click="handleAdd()">
+        <i class="i-material-symbols:add mr-4 text-18" />
+        新增角色
+      </NButton>
+    </template>
+
+    <MeCrud
+      ref="$table"
+      v-model:query-items="queryItems"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.read"
+    >
+      <MeQueryItem label="角色名" :label-width="50">
+        <n-input v-model:value="queryItems.name" type="text" placeholder="请输入角色名" clearable />
+      </MeQueryItem>
+      <MeQueryItem label="状态" :label-width="50">
+        <n-select
+          v-model:value="queryItems.enable"
+          clearable
+          :options="[
+            { label: '启用', value: 1 },
+            { label: '停用', value: 0 },
+          ]"
+        />
+      </MeQueryItem>
+    </MeCrud>
+    <MeModal ref="modalRef" width="520px">
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+      >
+        <n-form-item
+          label="角色名"
+          path="name"
+          :rule="{
+            required: true,
+            message: '请输入角色名',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.name" />
+        </n-form-item>
+        <n-form-item
+          label="角色编码"
+          path="code"
+          :rule="{
+            required: true,
+            message: '请输入角色编码',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.code" :disabled="modalAction !== 'add'" />
+        </n-form-item>
+        <n-form-item label="权限" path="permissionIds">
+          <n-tree
+            key-field="id"
+            label-field="name"
+            :selectable="false"
+            :data="permissionTree"
+            :checked-keys="modalForm.permissionIds"
+            :on-update:checked-keys="(keys) => (modalForm.permissionIds = keys)"
+            checkable
+            check-on-click
+            default-expand-all
+            class="cus-scroll max-h-200 w-full"
+          />
+        </n-form-item>
+        <n-form-item label="状态" path="enable">
+          <NSwitch v-model:value="modalForm.enable">
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              停用
+            </template>
+          </NSwitch>
+        </n-form-item>
+      </n-form>
+    </MeModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import api from './api'
+import { MeCrud, MeModal, MeQueryItem } from '@/components'
+import { useCrud } from '@/composables'
+
+defineOptions({ name: 'RoleMgt' })
+
+const router = useRouter()
+
+const $table = ref(null)
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit }
+  = useCrud({
+    name: '角色',
+    doCreate: api.create,
+    doDelete: api.delete,
+    doUpdate: api.update,
+    initForm: { enable: true },
+    refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
+  })
+
+const columns = [
+  { title: '角色名', key: 'name' },
+  { title: '角色编码', key: 'code' },
+  {
+    title: '状态',
+    key: 'enable',
+    render: row =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+          loading: !!row.enableLoading,
+          disabled: row.code === 'SUPER_ADMIN',
+          onUpdateValue: () => handleEnable(row),
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        },
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'right',
+    fixed: 'right',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () =>
+              router.push({ path: `/pms/role/user/${row.id}`, query: { roleName: row.name } }),
+          },
+          {
+            default: () => '分配用户',
+            icon: () => h('i', { class: 'i-fe:user-plus text-14' }),
+          },
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 12px;',
+            disabled: row.code === 'SUPER_ADMIN',
+            onClick: () => handleEdit(row),
+          },
+          {
+            default: () => '编辑',
+            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
+          },
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 12px;',
+            disabled: row.code === 'SUPER_ADMIN',
+            onClick: () => handleDelete(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          },
+        ),
+      ]
+    },
+  },
+]
+
+async function handleEnable(row) {
+  row.enableLoading = true
+  try {
+    await api.update({ id: row.id, enable: !row.enable })
+    row.enableLoading = false
+    $message.success('操作成功')
+    $table.value?.handleSearch()
+  }
+  catch (error) {
+    row.enableLoading = false
+  }
+}
+
+const permissionTree = ref([])
+api.getAllPermissionTree().then(({ data = [] }) => (permissionTree.value = data))
+</script>
diff --git a/web/src/views/pms/role/role-user.vue b/web/src/views/pms/role/role-user.vue
new file mode 100644
index 0000000..1773b5d
--- /dev/null
+++ b/web/src/views/pms/role/role-user.vue
@@ -0,0 +1,228 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:29:43
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage back>
+    <template #title-suffix>
+      <NTag class="ml-12" type="warning">
+        {{ route.query.roleName }}
+      </NTag>
+    </template>
+    <template #action>
+      <div class="flex items-center">
+        <NButton :disabled="!userIds.length" type="error" @click="handleBatchRemove()">
+          <i v-if="userIds.length" class="i-material-symbols:delete-outline mr-4 text-18" />
+          批量取消授权
+        </NButton>
+        <NButton
+          class="ml-12"
+          :disabled="!userIds.length"
+          type="primary"
+          @click="handleBatchAdd()"
+        >
+          <i v-if="userIds.length" class="i-line-md:confirm-circle mr-4 text-18" />
+          批量授权
+        </NButton>
+      </div>
+    </template>
+
+    <MeCrud
+      ref="$table"
+      v-model:query-items="queryItems"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.getAllUsers"
+      @on-checked="onChecked"
+    >
+      <MeQueryItem label="用户名" :label-width="50">
+        <n-input
+          v-model:value="queryItems.username"
+          type="text"
+          placeholder="请输入用户名"
+          clearable
+        />
+      </MeQueryItem>
+
+      <MeQueryItem label="性别" :label-width="50">
+        <n-select v-model:value="queryItems.gender" clearable :options="genders" />
+      </MeQueryItem>
+
+      <MeQueryItem label="状态" :label-width="50">
+        <n-select
+          v-model:value="queryItems.enable"
+          clearable
+          :options="[
+            { label: '启用', value: 1 },
+            { label: '停用', value: 0 },
+          ]"
+        />
+      </MeQueryItem>
+    </MeCrud>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
+import { h } from 'vue'
+import api from './api'
+import { MeCrud, MeQueryItem } from '@/components'
+import { formatDateTime } from '@/utils'
+
+defineOptions({ name: 'RoleUser' })
+const route = useRoute()
+
+const $table = ref(null)
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+const genders = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+]
+
+const columns = [
+  { type: 'selection', fixed: 'left' },
+  {
+    title: '头像',
+    key: 'avatar',
+    width: 80,
+    render: ({ avatar }) =>
+      h(NAvatar, {
+        size: 'medium',
+        src: avatar,
+      }),
+  },
+  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  {
+    title: '角色',
+    key: 'roles',
+    width: 200,
+    ellipsis: { tooltip: true },
+    render: ({ roles }) => {
+      if (roles?.length) {
+        return roles.map((item, index) =>
+          h(
+            NTag,
+            { type: 'success', style: index > 0 ? 'margin-left: 8px;' : '' },
+            { default: () => item.name },
+          ),
+        )
+      }
+      return '暂无角色'
+    },
+  },
+  {
+    title: '性别',
+    key: 'gender',
+    width: 80,
+    render: ({ gender }) => genders.find(item => gender === item.value)?.label ?? '',
+  },
+  {
+    title: '创建时间',
+    key: 'createDate',
+    width: 180,
+    render(row) {
+      return h('span', formatDateTime(row.createTime))
+    },
+  },
+  {
+    title: '状态',
+    key: 'enable',
+    width: 100,
+
+    render: row =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        },
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 100,
+    align: 'right',
+    fixed: 'right',
+    hideInExcel: true,
+    render(row) {
+      return row.roles?.some(item => item.id === +route.params.roleId)
+        ? h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            secondary: true,
+            onClick: () => handleBatchRemove([row.id]),
+          },
+          {
+            default: () => '取消授权',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          },
+        )
+        : h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () => handleBatchAdd([row.id]),
+          },
+          {
+            default: () => '授权',
+            icon: () => h('i', { class: 'i-line-md:confirm-circle text-14' }),
+          },
+        )
+    },
+  },
+]
+
+const userIds = ref([])
+function onChecked(rowKeys) {
+  userIds.value = rowKeys || []
+}
+
+function handleBatchAdd(ids = userIds.value) {
+  const roleId = route.params.roleId
+  if (!roleId)
+    return $message.error('角色异常，请重新选择角色')
+  if (!ids.length)
+    return $message.error('请先选择用户')
+  $dialog.confirm({
+    content: `确认分配【${route.query.roleName}】？`,
+    async confirm() {
+      await api.addRoleUsers(roleId, { userIds: ids })
+      $table.value?.handleSearch()
+    },
+  })
+}
+function handleBatchRemove(ids = userIds.value) {
+  const roleId = route.params.roleId
+  if (!roleId)
+    return $message.error('角色异常，请重新选择角色')
+  if (!ids.length)
+    return $message.error('请先选择用户')
+  $dialog.confirm({
+    content: `确认取消分配【${route.query.roleName}】？`,
+    async confirm() {
+      await api.removeRoleUsers(roleId, { userIds: ids })
+      $table.value?.handleSearch()
+    },
+  })
+}
+</script>
diff --git a/web/src/views/pms/user/api.js b/web/src/views/pms/user/api.js
new file mode 100644
index 0000000..70a0630
--- /dev/null
+++ b/web/src/views/pms/user/api.js
@@ -0,0 +1,19 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:29:51
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { request } from '@/utils'
+
+export default {
+  create: data => request.post('/user', data),
+  read: (params = {}) => request.get('/user', { params }),
+  update: data => request.patch(`/user/${data.id}`, data),
+  delete: id => request.delete(`/user/${id}`),
+  resetPwd: (id, data) => request.patch(`/user/password/reset/${id}`, data),
+
+  getAllRoles: () => request.get('/role?enable=1'),
+}
diff --git a/web/src/views/pms/user/index.vue b/web/src/views/pms/user/index.vue
new file mode 100644
index 0000000..d09e82b
--- /dev/null
+++ b/web/src/views/pms/user/index.vue
@@ -0,0 +1,311 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:29:56
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <CommonPage>
+    <template #action>
+      <NButton v-permission="'AddUser'" type="primary" @click="handleAdd()">
+        <i class="i-material-symbols:add mr-4 text-18" />
+        创建新用户
+      </NButton>
+    </template>
+
+    <MeCrud
+      ref="$table"
+      v-model:query-items="queryItems"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.read"
+    >
+      <MeQueryItem label="用户名" :label-width="50">
+        <n-input
+          v-model:value="queryItems.username"
+          type="text"
+          placeholder="请输入用户名"
+          clearable
+        />
+      </MeQueryItem>
+
+      <MeQueryItem label="性别" :label-width="50">
+        <n-select v-model:value="queryItems.gender" clearable :options="genders" />
+      </MeQueryItem>
+
+      <MeQueryItem label="状态" :label-width="50">
+        <n-select
+          v-model:value="queryItems.enable"
+          clearable
+          :options="[
+            { label: '启用', value: 1 },
+            { label: '停用', value: 0 },
+          ]"
+        />
+      </MeQueryItem>
+    </MeCrud>
+
+    <MeModal ref="modalRef" width="520px">
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+        :disabled="modalAction === 'view'"
+      >
+        <n-form-item
+          label="用户名"
+          path="username"
+          :rule="{
+            required: true,
+            message: '请输入用户名',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.username" :disabled="modalAction !== 'add'" />
+        </n-form-item>
+        <n-form-item
+          v-if="['add', 'reset'].includes(modalAction)"
+          :label="modalAction === 'reset' ? '重置密码' : '初始密码'"
+          path="password"
+          :rule="{
+            required: true,
+            message: '请输入密码',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.password" />
+        </n-form-item>
+
+        <n-form-item v-if="['add', 'setRole'].includes(modalAction)" label="角色" path="roleIds">
+          <n-select
+            v-model:value="modalForm.roleIds"
+            :options="roles"
+            label-field="name"
+            value-field="id"
+            clearable
+            filterable
+            multiple
+          />
+        </n-form-item>
+        <n-form-item v-if="modalAction === 'add'" label="状态" path="enable">
+          <NSwitch v-model:value="modalForm.enable">
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              停用
+            </template>
+          </NSwitch>
+        </n-form-item>
+      </n-form>
+      <n-alert v-if="modalAction === 'add'" type="warning" closable>
+        详细信息需由用户本人补充修改
+      </n-alert>
+    </MeModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NAvatar, NButton, NSwitch, NTag } from 'naive-ui'
+import api from './api'
+import { formatDateTime } from '@/utils'
+import { MeCrud, MeModal, MeQueryItem } from '@/components'
+import { useCrud } from '@/composables'
+
+defineOptions({ name: 'UserMgt' })
+
+const $table = ref(null)
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+const genders = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+]
+const roles = ref([])
+api.getAllRoles().then(({ data = [] }) => (roles.value = data))
+
+const {
+  modalRef,
+  modalFormRef,
+  modalForm,
+  modalAction,
+  handleAdd,
+  handleDelete,
+  handleOpen,
+  handleSave,
+} = useCrud({
+  name: '用户',
+  initForm: { enable: true },
+  doCreate: api.create,
+  doDelete: api.delete,
+  doUpdate: api.update,
+  refresh: () => $table.value?.handleSearch(),
+})
+
+const columns = [
+  {
+    title: '头像',
+    key: 'avatar',
+    width: 80,
+    render: ({ avatar }) =>
+      h(NAvatar, {
+        size: 'medium',
+        src: avatar,
+      }),
+  },
+  { title: '用户名', key: 'username', width: 150, ellipsis: { tooltip: true } },
+  {
+    title: '角色',
+    key: 'roles',
+    width: 200,
+    ellipsis: { tooltip: true },
+    render: ({ roles }) => {
+      if (roles?.length) {
+        return roles.map((item, index) =>
+          h(
+            NTag,
+            { type: 'success', style: index > 0 ? 'margin-left: 8px;' : '' },
+            { default: () => item.name },
+          ),
+        )
+      }
+      return '暂无角色'
+    },
+  },
+  {
+    title: '性别',
+    key: 'gender',
+    width: 80,
+    render: ({ gender }) => genders.find(item => gender === item.value)?.label ?? '',
+  },
+  { title: '邮箱', key: 'email', width: 150, ellipsis: { tooltip: true } },
+  {
+    title: '创建时间',
+    key: 'createDate',
+    width: 180,
+    render(row) {
+      return h('span', formatDateTime(row.createTime))
+    },
+  },
+  {
+    title: '状态',
+    key: 'enable',
+    width: 120,
+    render: row =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+          loading: !!row.enableLoading,
+          onUpdateValue: () => handleEnable(row),
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        },
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'right',
+    fixed: 'right',
+    hideInExcel: true,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () => handleOpenRolesSet(row),
+          },
+          {
+            default: () => '分配角色',
+            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
+          },
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 12px;',
+            onClick: () => handleOpen({ action: 'reset', title: '重置密码', row, onOk: onSave }),
+          },
+          {
+            default: () => '重置密码',
+            icon: () => h('i', { class: 'i-radix-icons:reset text-14' }),
+          },
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 12px;',
+            onClick: () => handleDelete(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          },
+        ),
+      ]
+    },
+  },
+]
+
+async function handleEnable(row) {
+  row.enableLoading = true
+  try {
+    await api.update({ id: row.id, enable: !row.enable })
+    row.enableLoading = false
+    $message.success('操作成功')
+    $table.value?.handleSearch()
+  }
+  catch (error) {
+    row.enableLoading = false
+  }
+}
+
+function handleOpenRolesSet(row) {
+  const roleIds = row.roles.map(item => item.id)
+  handleOpen({
+    action: 'setRole',
+    title: '分配角色',
+    row: { id: row.id, username: row.username, roleIds },
+    onOk: onSave,
+  })
+}
+
+function onSave() {
+  if (modalAction.value === 'setRole') {
+    return handleSave({
+      api: () => api.update(modalForm.value),
+      cb: () => $message.success('分配成功'),
+    })
+  }
+  else if (modalAction.value === 'reset') {
+    return handleSave({
+      api: () => api.resetPwd(modalForm.value.id, modalForm.value),
+      cb: () => $message.success('密码重置成功'),
+    })
+  }
+  handleSave()
+}
+</script>
diff --git a/web/src/views/profile/api.js b/web/src/views/profile/api.js
new file mode 100644
index 0000000..f091b8e
--- /dev/null
+++ b/web/src/views/profile/api.js
@@ -0,0 +1,14 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:30:03
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { request } from '@/utils'
+
+export default {
+  changePassword: data => request.post('/auth/password', data),
+  updateProfile: data => request.patch(`/user/profile/${data.id}`, data),
+}
diff --git a/web/src/views/profile/index.vue b/web/src/views/profile/index.vue
new file mode 100644
index 0000000..23d6b2a
--- /dev/null
+++ b/web/src/views/profile/index.vue
@@ -0,0 +1,167 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:30:11
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppPage show-footer>
+    <n-card>
+      <n-space align="center">
+        <n-avatar round :size="100" :src="userStore.avatar" />
+        <div class="ml-20">
+          <div class="flex items-center text-16">
+            <span>用户名:</span>
+            <span class="ml-12 opacity-80">{{ userStore.username }}</span>
+            <n-button class="ml-32" type="primary" text @click="pwdModalRef.open()">
+              <i class="i-fe:edit mr-4" />
+              修改密码
+            </n-button>
+          </div>
+          <div class="mt-16 flex items-center">
+            <n-button type="primary" ghost @click="avatarModalRef.open()">
+              更改头像
+            </n-button>
+            <span class="ml-12 opacity-60">
+              修改头像只支持在线链接，不提供上传图片功能，如有需要可自行对接！
+            </span>
+          </div>
+        </div>
+      </n-space>
+    </n-card>
+
+    <n-card class="mt-20" title="个人资料信息">
+      <template #header-extra>
+        <n-button type="primary" text @click="profileModalRef.open()">
+          <i class="i-fe:edit mr-4" />
+          修改资料
+        </n-button>
+      </template>
+
+      <n-descriptions
+        label-placement="left"
+        :label-style="{ width: '200px', textAlign: 'center' }"
+        :column="1"
+        bordered
+      >
+        <n-descriptions-item label="昵称">
+          {{ userStore.nickName }}
+        </n-descriptions-item>
+        <n-descriptions-item label="性别">
+          {{ genders.find((item) => item.value === userStore.userInfo?.gender)?.label ?? '未知' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="地址">
+          {{ userStore.userInfo?.address }}
+        </n-descriptions-item>
+        <n-descriptions-item label="邮箱">
+          {{ userStore.userInfo?.email }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <MeModal ref="avatarModalRef" width="420px" title="更改头像" @ok="handleAvatarSave()">
+      <n-input v-model:value="newAvatar" />
+    </MeModal>
+
+    <MeModal ref="pwdModalRef" title="修改密码" width="420px" @ok="handlePwdSave()">
+      <n-form
+        ref="pwdFormRef"
+        :model="pwdForm"
+        label-placement="left"
+        require-mark-placement="left"
+      >
+        <n-form-item label="原密码" path="oldPassword" :rule="required">
+          <n-input v-model:value="pwdForm.oldPassword" type="password" placeholder="请输入原密码" />
+        </n-form-item>
+        <n-form-item label="新密码" path="newPassword" :rule="required">
+          <n-input v-model:value="pwdForm.newPassword" type="password" placeholder="请输入新密码" />
+        </n-form-item>
+      </n-form>
+    </MeModal>
+
+    <MeModal ref="profileModalRef" title="修改资料" width="420px" @ok="handleProfileSave()">
+      <n-form ref="profileFormRef" :model="profileForm" label-placement="left">
+        <n-form-item label="昵称" path="nickName">
+          <n-input v-model:value="profileForm.nickName" placeholder="请输入昵称" />
+        </n-form-item>
+        <n-form-item label="性别" path="gender">
+          <n-select
+            v-model:value="profileForm.gender"
+            :options="genders"
+            placeholder="请选择性别"
+          />
+        </n-form-item>
+        <n-form-item label="地址" path="address">
+          <n-input v-model:value="profileForm.address" placeholder="请输入地址" />
+        </n-form-item>
+        <n-form-item label="邮箱" path="email">
+          <n-input v-model:value="profileForm.email" placeholder="请输入邮箱" />
+        </n-form-item>
+      </n-form>
+    </MeModal>
+  </AppPage>
+</template>
+
+<script setup>
+import api from './api'
+import { MeModal } from '@/components'
+import { useForm, useModal } from '@/composables'
+import { useUserStore } from '@/store'
+import { getUserInfo } from '@/store/helper'
+
+const userStore = useUserStore()
+const required = {
+  required: true,
+  message: '此为必填项',
+  trigger: ['blur', 'change'],
+}
+
+const [pwdModalRef] = useModal()
+const [pwdFormRef, pwdForm, pwdValidation] = useForm()
+
+async function handlePwdSave() {
+  await pwdValidation()
+  await api.changePassword(pwdForm.value)
+  $message.success('密码修改成功')
+  refreshUserInfo()
+}
+
+const newAvatar = ref(userStore.avatar)
+const [avatarModalRef] = useModal()
+async function handleAvatarSave() {
+  if (!newAvatar.value) {
+    $message.error('请输入头像地址')
+    return false
+  }
+  await api.updateProfile({ id: userStore.userId, avatar: newAvatar.value })
+  $message.success('头像修改成功')
+  refreshUserInfo()
+}
+
+const genders = [
+  { label: '保密', value: 0 },
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+]
+const [profileModalRef] = useModal()
+const [profileFormRef, profileForm, profileValidation] = useForm({
+  id: userStore.userId,
+  nickName: userStore.nickName,
+  gender: userStore.userInfo?.gender ?? 0,
+  address: userStore.userInfo?.address,
+  email: userStore.userInfo?.email,
+})
+async function handleProfileSave() {
+  await profileValidation()
+  await api.updateProfile(profileForm.value)
+  $message.success('资料修改成功')
+  refreshUserInfo()
+}
+
+async function refreshUserInfo() {
+  const user = await getUserInfo()
+  userStore.setUser(user)
+}
+</script>
diff --git a/web/uno.config.js b/web/uno.config.js
new file mode 100644
index 0000000..177883b
--- /dev/null
+++ b/web/uno.config.js
@@ -0,0 +1,57 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:30:57
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import { getIcons } from './build'
+
+const icons = getIcons()
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      warn: true,
+      prefix: ['i-'],
+      extraProperties: {
+        display: 'inline-block',
+      },
+      collections: {
+        me: FileSystemIconLoader('./src/assets/icons/isme'),
+        fe: FileSystemIconLoader('./src/assets/icons/feather'),
+      },
+    }),
+    presetRemToPx({ baseFontSize: 4 }),
+  ],
+  safelist: icons.map(icon => `${icon} ${icon}?mask`.split(' ')).flat(),
+  shortcuts: [
+    ['wh-full', 'w-full h-full'],
+    ['f-c-c', 'flex justify-center items-center'],
+    ['flex-col', 'flex flex-col'],
+    ['card-border', 'border border-solid border-light_border dark:border-dark_border'],
+    ['auto-bg', 'bg-white dark:bg-dark'],
+    ['auto-bg-hover', 'hover:bg-#eaf0f1 hover:dark:bg-#1b2429'],
+    ['auto-bg-highlight', 'bg-#eaf0f1 dark:bg-#1b2429'],
+    ['text-highlight', 'rounded-4 px-8 py-2 auto-bg-highlight'],
+  ],
+  rules: [
+    [
+      'card-shadow',
+      { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' },
+    ],
+  ],
+  theme: {
+    colors: {
+      primary: 'rgba(var(--primary-color))',
+      dark: '#18181c',
+      light_border: '#efeff5',
+      dark_border: '#2d2d30',
+    },
+  },
+})
diff --git a/web/vite.config.js b/web/vite.config.js
new file mode 100644
index 0000000..d847e83
--- /dev/null
+++ b/web/vite.config.js
@@ -0,0 +1,74 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:31:02
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import path from 'node:path'
+import { defineConfig, loadEnv } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import Unocss from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import removeNoMatch from 'vite-plugin-router-warn'
+import { pluginIcons, pluginPagePathes } from './build/plugin-isme'
+
+export default defineConfig(({ mode }) => {
+  const viteEnv = loadEnv(mode, process.cwd())
+  const { VITE_PUBLIC_PATH, VITE_PROXY_TARGET } = viteEnv
+
+  return {
+    base: VITE_PUBLIC_PATH || '/',
+    plugins: [
+      Vue(),
+      VueDevTools(),
+      Unocss(),
+      AutoImport({
+        imports: ['vue', 'vue-router'],
+        dts: false,
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()],
+        dts: false,
+      }),
+      // 自定义插件，用于生成页面文件的path，并添加到虚拟模块
+      pluginPagePathes(),
+      // 自定义插件，用于生成自定义icon，并添加到虚拟模块
+      pluginIcons(),
+      // 移除非必要的vue-router动态路由警告: No match found for location with path
+      removeNoMatch(),
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(process.cwd(), 'src'),
+        '~': path.resolve(process.cwd()),
+      },
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 3200,
+      open: false,
+      proxy: {
+        '/api': {
+          target: VITE_PROXY_TARGET,
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''),
+          secure: false,
+          configure: (proxy, options) => {
+            // 配置此项可在响应头中看到请求的真实地址
+            proxy.on('proxyRes', (proxyRes, req) => {
+              proxyRes.headers['x-real-url'] = new URL(req.url || '', options.target)?.href || ''
+            })
+          },
+        },
+      },
+    },
+    build: {
+      chunkSizeWarningLimit: 1024, // chunk 大小警告的限制（单位kb）
+    },
+  }
+})