diff --git a/README.md b/README.md
index f2ffa3a86..81493f8f9 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 基于 vue-cli5.x / vite2.x + vue3.x + antd-design-vue3.x + typescript4.x 的后台管理系统模板
 
 - 账号：rootadmin，密码：123456
-- [在线预览](http://buqiyuan.gitee.io/vue3-antd-admin/)
+- 在线预览（ [gitee](http://buqiyuan.gitee.io/vue3-antd-admin/) / [vercel](https://vue3-antd-admin.vercel.app/) ）
 - [swagger 文档](https://nest-api.buqiyuan.site/swagger-api/static/index.html)
 - [后台地址](https://github.com/buqiyuan/nest-admin)
 - [react 版 coding](https://github.com/buqiyuan/react-antd-admin)
diff --git a/package.json b/package.json
index c4729b607..7b3d64c6b 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@vueuse/core": "^8.2.4",
-    "ant-design-vue": "3.1.0-rc.6",
+    "@vueuse/core": "^8.2.5",
+    "ant-design-vue": "3.1.1",
     "axios": "^0.26.1",
     "core-js": "^3.21.1",
     "dayjs": "^1.11.0",
@@ -69,15 +69,16 @@
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "^8.6.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
     "lint-staged": "^12.3.7",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
+    "postcss-less": "^6.0.0",
     "prettier": "^2.6.2",
     "regenerator-runtime": "^0.13.9",
     "speed-measure-webpack-plugin": "^1.5.0",
@@ -85,6 +86,7 @@
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "svg-sprite-loader": "^6.0.11",
diff --git a/src/assets/icons/dark.svg b/src/assets/icons/dark.svg
new file mode 100644
index 000000000..f646bd7ea
--- /dev/null
+++ b/src/assets/icons/dark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/light.svg b/src/assets/icons/light.svg
new file mode 100644
index 000000000..ab7cc088f
--- /dev/null
+++ b/src/assets/icons/light.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/realDark.svg b/src/assets/icons/realDark.svg
new file mode 100644
index 000000000..e0b83c870
--- /dev/null
+++ b/src/assets/icons/realDark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#001529d9" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#001529d9" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#001529a6" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/sidemenu.svg b/src/assets/icons/sidemenu.svg
new file mode 100644
index 000000000..f646bd7ea
--- /dev/null
+++ b/src/assets/icons/sidemenu.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/topmenu.svg b/src/assets/icons/topmenu.svg
new file mode 100644
index 000000000..c107d5252
--- /dev/null
+++ b/src/assets/icons/topmenu.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="white" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#f0f2f5" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#001529" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/basic/split-panel/index.vue b/src/components/basic/split-panel/index.vue
index 4b8c69790..0d34adc7f 100644
--- a/src/components/basic/split-panel/index.vue
+++ b/src/components/basic/split-panel/index.vue
@@ -47,11 +47,15 @@
 </script>
 
 <style lang="less">
+  @import '@/styles/theme.less';
+
+  @classNames: split-wrapper, separator;
+  .themeBgColor(@classNames);
+
   .split-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
-    background-color: white;
 
     .scalable {
       position: relative;
@@ -73,7 +77,6 @@
         width: 14px;
         height: 100%;
         cursor: col-resize;
-        background-color: white;
         box-shadow: -4px -2px 4px -5px rgba(0, 0, 0, 0.35), 4px 3px 4px -5px rgba(0, 0, 0, 0.35);
         align-items: center;
         justify-content: center;
diff --git a/src/components/basic/svg-icon/svg-icon.vue b/src/components/basic/svg-icon/svg-icon.vue
index b63b4d710..02f1e34ca 100644
--- a/src/components/basic/svg-icon/svg-icon.vue
+++ b/src/components/basic/svg-icon/svg-icon.vue
@@ -7,10 +7,6 @@
 <script lang="ts" setup>
   import { computed, type CSSProperties } from 'vue';
 
-  defineOptions({
-    name: 'svg-icon',
-  });
-
   const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
     requireContext.keys().forEach(requireContext);
   try {
@@ -19,10 +15,14 @@
     console.log(error);
   }
 
+  defineOptions({
+    name: 'svg-icon',
+  });
+
   const props = defineProps({
     prefix: {
       type: String,
-      default: 'icon',
+      default: 'svg-icon',
     },
     name: {
       type: String,
@@ -33,9 +33,7 @@
       default: 16,
     },
   });
-
   const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-
   const getStyle = computed((): CSSProperties => {
     const { size } = props;
     const s = `${size}`.replace('px', '').concat('px');
diff --git a/src/components/core/dynamic-table/src/dynamic-table.vue b/src/components/core/dynamic-table/src/dynamic-table.vue
index 64b4b1b1d..a8728d5ee 100644
--- a/src/components/core/dynamic-table/src/dynamic-table.vue
+++ b/src/components/core/dynamic-table/src/dynamic-table.vue
@@ -3,7 +3,7 @@
     <SchemaForm
       v-if="search"
       ref="queryFormRef"
-      class="bg-white mb-16px pt-24px pr-24px"
+      class="bg-white dark:bg-black mb-16px pt-24px pr-24px"
       submit-on-reset
       v-bind="getFormProps"
       :table-instance="tableAction"
@@ -14,7 +14,7 @@
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
     </SchemaForm>
-    <div class="bg-white">
+    <div class="bg-white dark:bg-black">
       <ToolBar
         v-if="showToolBar"
         :title="headerTitle"
@@ -144,6 +144,7 @@
 <style lang="less" scoped>
   :deep(.ant-table-wrapper) {
     padding: 0 6px 6px 6px;
+
     .ant-table {
       .ant-table-title {
         display: flex;
diff --git a/src/enums/cacheEnum.ts b/src/enums/cacheEnum.ts
index adc7fc5ec..bfce2a57c 100644
--- a/src/enums/cacheEnum.ts
+++ b/src/enums/cacheEnum.ts
@@ -1,14 +1,18 @@
-// 用户token
+/** 用户token */
 export const ACCESS_TOKEN_KEY = 'ACCESS_TOKEN';
 
-// 国际化
+/** 国际化 */
 export const LOCALE_KEY = 'LOCALE__';
 
-// 用户信息
+/** 主题色 */
+export const THEME_KEY = 'THEME__';
+
+/** 用户信息 */
 export const USER_INFO_KEY = 'USER__INFO__';
 
 // role info key
 export const ROLES_KEY = 'ROLES__KEY__';
-
-export const IS_LOCKSCREEN = 'IS_LOCKSCREEN'; // 是否锁屏
-export const TABS_ROUTES = 'TABS_ROUTES'; // 标签页
+/** 是否锁屏 */
+export const IS_LOCKSCREEN = 'IS_LOCKSCREEN';
+/** 标签页 */
+export const TABS_ROUTES = 'TABS_ROUTES';
diff --git a/src/layout/header/components/index.ts b/src/layout/header/components/index.ts
index 2ad0d7e0f..940e35d23 100644
--- a/src/layout/header/components/index.ts
+++ b/src/layout/header/components/index.ts
@@ -1,2 +1,3 @@
 export { default as Search } from './search/index.vue';
 export { default as FullScreen } from './fullscreen/index.vue';
+export { default as ProjectSetting } from './setting/index.vue';
diff --git a/src/layout/header/components/setting/constant.ts b/src/layout/header/components/setting/constant.ts
new file mode 100644
index 000000000..3dc5d561a
--- /dev/null
+++ b/src/layout/header/components/setting/constant.ts
@@ -0,0 +1,70 @@
+export const themeStyle = [
+  {
+    label: '亮色主题风格',
+    value: 'light',
+  },
+  {
+    label: '暗色主题风格',
+    value: 'dark',
+  },
+  {
+    label: '暗黑模式',
+    value: 'realDark',
+  },
+] as const;
+
+/** 主题色 */
+export const themeColors = [
+  {
+    title: '拂晓蓝（默认）',
+    key: 'daybreak',
+    value: 'rgb(24, 144, 255)',
+  },
+  {
+    title: '薄暮',
+    key: 'dust',
+    value: 'rgb(245, 34, 45)',
+  },
+  {
+    title: '火山',
+    key: 'volcano',
+    value: 'rgb(250, 84, 28)',
+  },
+  {
+    title: '日暮',
+    key: 'sunset',
+    value: 'rgb(250, 173, 20)',
+  },
+  {
+    title: '明青',
+    key: 'cyan',
+    value: 'rgb(19, 194, 194)',
+  },
+  {
+    title: '极光绿',
+    key: 'green',
+    value: 'rgb(82, 196, 26)',
+  },
+  {
+    title: '极客蓝',
+    key: 'geekblue',
+    value: 'rgb(47, 84, 235)',
+  },
+  {
+    title: '酱紫',
+    key: 'purple',
+    value: 'rgb(114, 46, 209)',
+  },
+] as const;
+
+/** 导航模式（布局方式） */
+export const layouts = [
+  {
+    label: '侧边菜单布局',
+    value: 'sidemenu',
+  },
+  {
+    label: '顶部菜单布局',
+    value: 'topmenu',
+  },
+] as const;
diff --git a/src/layout/header/components/setting/index.vue b/src/layout/header/components/setting/index.vue
new file mode 100644
index 000000000..d831d13ab
--- /dev/null
+++ b/src/layout/header/components/setting/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <SettingOutlined @click="showDrawer" />
+  <Drawer v-model:visible="visible" placement="right" :closable="false">
+    <Descriptions title="整体风格" :column="5">
+      <Descriptions.Item v-for="theme in themeStyle" :key="theme.value">
+        <Tooltip :title="theme.label">
+          <div
+            class="style-checbox-item"
+            :class="{ active: themeStore.navTheme === theme.value }"
+            @click="setNavTheme(theme.value)"
+          >
+            <svg-icon :name="theme.value" size="50"></svg-icon>
+          </div>
+        </Tooltip>
+      </Descriptions.Item>
+    </Descriptions>
+    <Descriptions title="主题色" :column="9">
+      <Descriptions.Item v-for="item in themeColors" :key="item.key">
+        <div class="style-checbox-item">
+          <Tooltip :title="item.title">
+            <Tag :color="item.value" @click="setThemeColor({ primaryColor: item.value })">
+              <span :style="{ visibility: getThemeColorVisible(item.value) }"> ✔ </span>
+            </Tag>
+          </Tooltip>
+        </div>
+      </Descriptions.Item>
+      <Descriptions.Item key="custom">
+        <div class="style-checbox-item">
+          <Tooltip title="自定义">
+            <Tag :color="customColor" class="relative overflow-hidden">
+              <input
+                v-model="customColor"
+                type="color"
+                class="absolute inset-0"
+                :style="colorPickerStyle"
+                @input="setThemeColor({ primaryColor: customColor })"
+              />
+              <span :style="{ visibility: getThemeColorVisible(customColor) }"> ✔ </span>
+            </Tag>
+          </Tooltip>
+        </div>
+      </Descriptions.Item>
+    </Descriptions>
+    <Descriptions title="导航模式" :column="5">
+      <Descriptions.Item v-for="item in layouts" :key="item.value">
+        <div
+          class="style-checbox-item"
+          :class="{ active: themeStore.layout === item.value }"
+          @click="setLayout(item.value)"
+        >
+          <svg-icon :name="item.value" size="50"></svg-icon>
+        </div>
+      </Descriptions.Item>
+    </Descriptions>
+  </Drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, type StyleValue } from 'vue';
+  import { SettingOutlined } from '@ant-design/icons-vue';
+  import { Drawer, Descriptions, Tag, Tooltip } from 'ant-design-vue';
+  import { layouts, themeColors, themeStyle } from './constant';
+  import type { ThemeName, Theme, ThemeState } from '@/store/modules/projectConfig';
+  import { useThemeStore } from '@/store/modules/projectConfig';
+
+  defineOptions({
+    name: 'ProjectSetting',
+  });
+
+  const themeStore = useThemeStore();
+  const customColor = ref(themeStore.primaryColor);
+  const visible = ref(false);
+
+  const colorPickerStyle = computed(() => ({ '--custom-color': customColor.value } as StyleValue));
+
+  const setNavTheme = (theme: ThemeName) => {
+    themeStore.setTheme({ navTheme: theme });
+  };
+  const setLayout = (layout: ThemeState['layout']) => {
+    themeStore.setTheme({ layout });
+  };
+
+  const setThemeColor = ({ primaryColor }: Theme) => {
+    themeStore.fillColor({ primaryColor });
+  };
+
+  const getThemeColorVisible = (color) =>
+    themeStore.primaryColor === color ? 'visible' : 'hidden';
+
+  // const getImageUrl = (theme: ThemeName) => {
+  //   return new URL(`/src/assets/icons/${theme}.svg`, import.meta.url).href;
+  // };
+
+  const showDrawer = () => {
+    visible.value = true;
+  };
+</script>
+
+<style lang="less" scoped>
+  .style-checbox-item {
+    position: relative;
+    cursor: pointer;
+
+    &.active:after {
+      content: '✔';
+      position: absolute;
+      bottom: 10px;
+      right: 12px;
+      color: @primary-color;
+    }
+  }
+
+  input[type='color'] {
+    width: 40px;
+    height: 40px;
+    border: 0;
+    padding: 0;
+    outline: none;
+    -webkit-appearance: none;
+
+    &::-webkit-color-swatch-wrapper {
+      background: var(--custom-color);
+    }
+
+    &::-webkit-color-swatch {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/layout/header/index.vue b/src/layout/header/index.vue
index f70d95e04..e35c104f9 100644
--- a/src/layout/header/index.vue
+++ b/src/layout/header/index.vue
@@ -1,29 +1,33 @@
 <template>
-  <Layout.Header class="layout-header">
+  <Layout.Header :style="headerStyle" class="layout-header">
     <Space :size="20">
-      <span class="menu-fold" @click="() => emit('update:collapsed', !collapsed)">
-        <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
-      </span>
-      <Breadcrumb>
-        <template v-for="(routeItem, rotueIndex) in menus" :key="routeItem?.name">
-          <Breadcrumb.Item>
-            <TitleI18n :title="routeItem?.meta?.title" />
-            <template v-if="routeItem?.children?.length" #overlay>
-              <Menu :selected-keys="getSelectKeys(rotueIndex)">
-                <template v-for="childItem in routeItem?.children" :key="childItem.name">
-                  <Menu.Item
-                    v-if="!childItem.meta?.hideInMenu && !childItem.meta?.hideInBreadcrumb"
-                    :key="childItem.name"
-                    @click="clickMenuItem(childItem)"
-                  >
-                    <TitleI18n :title="childItem.meta?.title" />
-                  </Menu.Item>
+      <slot>
+        <Space :size="20">
+          <span class="menu-fold" @click="() => emit('update:collapsed', !collapsed)">
+            <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
+          </span>
+          <Breadcrumb>
+            <template v-for="(routeItem, rotueIndex) in menus" :key="routeItem?.name">
+              <Breadcrumb.Item>
+                <TitleI18n :title="routeItem?.meta?.title" />
+                <template v-if="routeItem?.children?.length" #overlay>
+                  <Menu :selected-keys="getSelectKeys(rotueIndex)">
+                    <template v-for="childItem in routeItem?.children" :key="childItem.name">
+                      <Menu.Item
+                        v-if="!childItem.meta?.hideInMenu && !childItem.meta?.hideInBreadcrumb"
+                        :key="childItem.name"
+                        @click="clickMenuItem(childItem)"
+                      >
+                        <TitleI18n :title="childItem.meta?.title" />
+                      </Menu.Item>
+                    </template>
+                  </Menu>
                 </template>
-              </Menu>
+              </Breadcrumb.Item>
             </template>
-          </Breadcrumb.Item>
-        </template>
-      </Breadcrumb>
+          </Breadcrumb>
+        </Space>
+      </slot>
     </Space>
     <Space :size="20">
       <Search />
@@ -31,7 +35,6 @@
         <LockOutlined @click="lockscreenStore.setLock(true)" />
       </Tooltip>
       <FullScreen />
-      <svg-icon :name="isDark ? 'sun' : 'moon'" @click="toggleDark" />
       <LocalePicker />
       <Dropdown placement="bottomRight">
         <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
@@ -52,23 +55,21 @@
           </Menu>
         </template>
       </Dropdown>
-      <SettingOutlined />
+      <ProjectSetting />
     </Space>
   </Layout.Header>
 </template>
 
 <script lang="tsx" setup>
-  import { computed } from 'vue';
+  import { computed, type CSSProperties } from 'vue';
   import { useRouter, useRoute, RouteRecordRaw } from 'vue-router';
   import {
     QuestionCircleOutlined,
-    SettingOutlined,
     MenuFoldOutlined,
     MenuUnfoldOutlined,
     PoweroffOutlined,
     LockOutlined,
   } from '@ant-design/icons-vue';
-  import { useDark, useToggle } from '@vueuse/core';
   import {
     Layout,
     message,
@@ -79,28 +80,40 @@
     Breadcrumb,
     Avatar,
     Tooltip,
+    type MenuTheme,
   } from 'ant-design-vue';
-  import { Search, FullScreen } from './components';
+  import { Search, FullScreen, ProjectSetting } from './components/';
   import { LocalePicker } from '@/components/basic/locale-picker';
   import { useUserStore } from '@/store/modules/user';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { LOGIN_NAME } from '@/router/constant';
   import { TitleI18n } from '@/components/basic/title-i18n';
+  import { useThemeStore } from '@/store/modules/projectConfig';
 
   defineProps({
     collapsed: {
       type: Boolean,
     },
+    theme: {
+      type: String as PropType<MenuTheme>,
+    },
   });
   const emit = defineEmits(['update:collapsed']);
   const userStore = useUserStore();
+  const themeStore = useThemeStore();
   const lockscreenStore = useLockscreenStore();
 
   const router = useRouter();
   const route = useRoute();
-  const isDark = useDark();
-  const toggleDark = useToggle(isDark);
   const userInfo = computed(() => userStore.userInfo);
+  const headerStyle = computed<CSSProperties>(() => {
+    const { navTheme, layout } = themeStore;
+    const isDark = navTheme === 'dark' && layout === 'topmenu';
+    return {
+      backgroundColor: navTheme === 'realDark' || isDark ? '' : 'rgba(255, 255, 255, 0.85)',
+      color: isDark ? 'rgba(255, 255, 255, 0.85)' : '',
+    };
+  });
 
   const menus = computed(() => {
     if (route.meta?.namePath) {
@@ -197,9 +210,9 @@
     display: flex;
     height: @header-height;
     padding: 0 20px;
-    background-color: #fff;
     justify-content: space-between;
     align-items: center;
+
     * {
       cursor: pointer;
     }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c4057b1d5..fc86f1d13 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,31 +1,28 @@
 <template>
   <Layout class="layout">
     <Layout.Sider
+      v-if="themeStore.layout === 'sidemenu'"
       v-model:collapsed="collapsed"
       :width="asiderWidth"
       :trigger="null"
       collapsible
+      :theme="getTheme"
       class="layout-sider"
     >
-      <!--      网站logo start-->
-      <logo :collapsed="collapsed" />
-      <!--      网站logo end-->
-      <!--      侧边菜单栏start-->
-      <aside-menu :collapsed="collapsed" />
-      <!--      侧边菜单栏end-->
+      <Logo :collapsed="collapsed" />
+      <AsideMenu :collapsed="collapsed" :theme="getTheme" />
     </Layout.Sider>
     <Layout>
-      <!--      页头 start-->
-      <page-header v-model:collapsed="collapsed" />
-      <!--      页头end-->
-      <!--      内容区域start-->
+      <PageHeader v-model:collapsed="collapsed" :theme="getTheme">
+        <template v-if="themeStore.layout === 'topmenu'" #default>
+          <Logo :collapsed="collapsed" />
+          <AsideMenu :collapsed="collapsed" :theme="getTheme" />
+        </template>
+      </PageHeader>
       <Layout.Content class="layout-content">
         <tabs-view />
       </Layout.Content>
-      <!--      内容区域end-->
-      <!--      页脚start-->
-      <page-footer />
-      <!--      页脚end-->
+      <PageFooter />
     </Layout>
   </Layout>
 </template>
@@ -38,10 +35,13 @@
   import AsideMenu from './menu/menu.vue';
   import PageHeader from './header/index.vue';
   import PageFooter from './footer';
+  import { useThemeStore } from '@/store/modules/projectConfig';
 
+  const themeStore = useThemeStore();
   const collapsed = ref<boolean>(false);
   // 自定义侧边栏菜单收缩和展开时的宽度
   const asiderWidth = computed(() => (collapsed.value ? 80 : 220));
+  const getTheme = computed(() => (themeStore.navTheme === 'light' ? 'light' : 'dark'));
 </script>
 
 <style lang="less" scoped>
diff --git a/src/layout/logo/index.vue b/src/layout/logo/index.vue
index 2bff39782..f86ec2d30 100644
--- a/src/layout/logo/index.vue
+++ b/src/layout/logo/index.vue
@@ -27,7 +27,8 @@
     }
 
     .title {
-      @apply mb-0 text-white text-xl;
+      @apply mb-0 text-xl;
+      color: @primary-color;
     }
   }
 </style>
diff --git a/src/layout/menu/menu.vue b/src/layout/menu/menu.vue
index 7903c7f67..2514bba95 100644
--- a/src/layout/menu/menu.vue
+++ b/src/layout/menu/menu.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="menu-container">
+  <div class="menu-container" :style="{ height: isSideMenu ? 'calc(100vh - 64px)' : '' }">
     <Menu
-      v-model:open-keys="state.openKeys"
       v-model:selected-keys="state.selectedKeys"
-      mode="inline"
-      theme="dark"
+      :open-keys="isSideMenu ? state.openKeys : []"
+      :mode="isSideMenu ? 'inline' : 'horizontal'"
+      :theme="theme"
       :collapsed="props.collapsed"
       collapsible
       @click="clickMenuItem"
@@ -17,11 +17,12 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, computed, watch } from 'vue';
+  import { reactive, computed, watch, type PropType } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
-  import { Menu } from 'ant-design-vue';
+  import { Menu, type MenuTheme } from 'ant-design-vue';
   import MenuItem from './menu-item.vue';
   import { useUserStore } from '@/store/modules/user';
+  import { useThemeStore } from '@/store/modules/projectConfig';
   import { LOGIN_NAME } from '@/router/constant';
 
   const props = defineProps({
@@ -29,8 +30,12 @@
       // 侧边栏菜单是否收起
       type: Boolean,
     },
+    theme: {
+      type: String as PropType<MenuTheme>,
+    },
   });
   const userStore = useUserStore();
+  const themeStore = useThemeStore();
   // 当前路由
   const currentRoute = useRoute();
   const router = useRouter();
@@ -45,7 +50,8 @@
       .sort((a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0));
   });
   console.log('menus', menus.value);
-
+  /** 侧边栏布局 */
+  const isSideMenu = computed(() => themeStore.layout === 'sidemenu');
   // 根据activeMenu获取指定的menu
   const getTargetMenuByActiveMenuName = (activeMenu: string) => {
     return router.getRoutes().find((n) => [n.name, n.path].includes(activeMenu));
@@ -107,7 +113,6 @@
 
 <style lang="less" scoped>
   .menu-container {
-    height: calc(100vh - 64px);
     overflow: auto;
 
     &::-webkit-scrollbar {
diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
index 2edebe64a..9b85dbe66 100644
--- a/src/layout/tabs/tabs-view.vue
+++ b/src/layout/tabs/tabs-view.vue
@@ -227,14 +227,18 @@
 </script>
 
 <style lang="less" scoped>
+  .dark .tabs-view {
+    border-top: 1px solid black;
+  }
+
   .tabs-view {
     border-top: 1px solid #eee;
 
     :deep(.tabs) {
       .ant-tabs-nav {
+        @apply bg-white dark:bg-black;
         padding: 4px 20px 0 10px;
         margin: 0;
-        background-color: white;
         user-select: none;
       }
 
@@ -246,6 +250,7 @@
         display: flex;
         padding: 0;
         margin: 0;
+
         .anticon-close {
           padding-left: 6px;
         }
@@ -255,6 +260,7 @@
         .ant-tabs-tab-remove {
           width: 0;
         }
+
         .anticon-close {
           width: 0;
           visibility: hidden;
@@ -267,6 +273,7 @@
             visibility: visible;
             padding-left: 6px;
           }
+
           .ant-tabs-tab-remove {
             width: unset;
           }
diff --git a/src/plugins/antd.ts b/src/plugins/antd.ts
index 9e2bebc9d..4329d3250 100644
--- a/src/plugins/antd.ts
+++ b/src/plugins/antd.ts
@@ -17,6 +17,7 @@ import type { App } from 'vue';
 import { AButton } from '@/components/basic/button/index';
 
 // import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/antd.variable.min.css';
 import 'dayjs/locale/zh-cn';
 
 export function setupAntd(app: App<Element>) {
diff --git a/src/store/modules/projectConfig.ts b/src/store/modules/projectConfig.ts
new file mode 100644
index 000000000..5647eb90b
--- /dev/null
+++ b/src/store/modules/projectConfig.ts
@@ -0,0 +1,121 @@
+import { defineStore } from 'pinia';
+import darkThemeCss from 'ant-design-vue/dist/antd.dark.css?raw';
+import { ConfigProvider } from 'ant-design-vue';
+import type { Theme } from 'ant-design-vue/es/config-provider/';
+import { store } from '@/store';
+import { THEME_KEY } from '@/enums/cacheEnum';
+import { Storage } from '@/utils/Storage';
+
+const styleDom = document.createElement('style');
+styleDom.dataset.type = 'theme-dark';
+document.head.appendChild(styleDom);
+
+/**
+ * 项目默认配置项
+ * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
+ * navTheme - sidebar theme ['dark', 'light'] 两种主题
+ * colorWeak - 色盲模式
+ * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * fixedHeader - 固定 Header : boolean
+ * fixSiderbar - 固定左侧菜单栏 ： boolean
+ * contentWidth - 内容区布局： 流式 |  固定
+ */
+
+/** 主题色 */
+export type ThemeName = 'light' | 'dark' | 'realDark';
+export type { Theme };
+
+export type ThemeState = {
+  navTheme: ThemeName; // theme for nav menu
+  primaryColor: string; // '#F5222D', // primary color of ant design
+  layout: 'sidemenu' | 'topmenu'; // nav menu position: `sidemenu` or `topmenu`
+  contentWidth: 'Fluid' | 'Fixed'; // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+  fixedHeader: false; // sticky header
+  fixSiderbar: false; // sticky siderbar
+  colorWeak: false;
+  menu: {
+    locale: true;
+  };
+  title: string;
+  pwa: false;
+  iconfontUrl: string;
+  // production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
+};
+
+export const defaultConfig: ThemeState = {
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: 'rgb(24, 144, 255)', // '#F5222D', // primary color of ant design
+  layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
+  contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  fixSiderbar: false, // sticky siderbar
+  colorWeak: false,
+  menu: {
+    locale: true,
+  },
+  title: 'vite-antdv-admin',
+  pwa: false,
+  iconfontUrl: '',
+  // production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
+};
+
+const setRealDarkTheme = (navTheme?: ThemeName) => {
+  if (navTheme === 'realDark') {
+    document.documentElement.classList.add('dark');
+    styleDom.textContent = darkThemeCss;
+  } else {
+    document.documentElement.classList.remove('dark');
+    styleDom.textContent = '';
+  }
+};
+
+let localThemeConfig: Partial<ThemeState> = {};
+try {
+  localThemeConfig = JSON.parse(Storage.get(THEME_KEY, '{}'));
+  const { primaryColor, navTheme } = localThemeConfig;
+  navTheme && setRealDarkTheme(navTheme);
+  primaryColor &&
+    ConfigProvider.config({
+      theme: {
+        primaryColor,
+      },
+    });
+} catch {
+  localThemeConfig = {};
+}
+
+export const useThemeStore = defineStore({
+  id: 'theme',
+  state: (): ThemeState => ({
+    ...defaultConfig,
+    ...localThemeConfig,
+  }),
+  getters: {
+    getNavTheme(): ThemeName {
+      return this.navTheme;
+    },
+  },
+  actions: {
+    setTheme(theme: Partial<ThemeState>) {
+      for (const key in theme) {
+        this[key] = theme[key];
+      }
+      // document.documentElement.style.setProperty(key, nextTheme[key]);
+      setRealDarkTheme(theme.navTheme);
+      Storage.set(THEME_KEY, JSON.stringify(this.$state));
+    },
+    /** antdv自带的改变主题颜色方法，但可以配置的颜色很有限，仅6种 */
+    fillColor(theme: Theme) {
+      this.primaryColor = theme.primaryColor ?? this.primaryColor;
+      ConfigProvider.config({
+        theme,
+      });
+      Storage.set(THEME_KEY, JSON.stringify(this.$state));
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useThemeStoreWithOut() {
+  return useThemeStore(store);
+}
diff --git a/src/styles/index.less b/src/styles/index.less
index 9615ea232..fdd261cd8 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,4 +1,4 @@
-@import './global.less';
+@import './theme.less';
 @import './transition.less';
 @import './common.less';
 @import './antdv.override.less';
diff --git a/src/styles/theme.less b/src/styles/theme.less
new file mode 100644
index 000000000..8b2bc0ab8
--- /dev/null
+++ b/src/styles/theme.less
@@ -0,0 +1,47 @@
+@import 'ant-design-vue/lib/style/themes/default.less';
+// @root-entry-name: variable;
+// @import 'ant-design-vue/dist/antd.dark.less';
+
+html:not(.dark) {
+  @component-background: @white;
+}
+
+// html.dark {
+// }
+
+.setStyle(@className, @propName) {
+  html {
+    &.dark {
+      .@{className} {
+        @{propName}: @black;
+      }
+    }
+
+    &:not(.dark) {
+      .@{className} {
+        @{propName}: @white;
+      }
+    }
+  }
+}
+
+.themeColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
+  @className: extract(@classNames, @i);
+
+  .setStyle(@className, background-color);
+  .setStyle(@className, color);
+
+  .themeColor(@classNames, (@i + 1));
+}
+
+.themeTextColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
+  @className: extract(@classNames, @i);
+  .setStyle(@className, color);
+  .themeColor(@classNames, (@i + 1));
+}
+
+.themeBgColor(@classNames, @i: 1) when(@i =< length(@classNames)) {
+  @className: extract(@classNames, @i);
+  .setStyle(@className, background-color);
+  .themeColor(@classNames, (@i + 1));
+}
diff --git a/src/views/dashboard/welcome/index.vue b/src/views/dashboard/welcome/index.vue
index 15dbc36d3..a704aa905 100644
--- a/src/views/dashboard/welcome/index.vue
+++ b/src/views/dashboard/welcome/index.vue
@@ -82,13 +82,16 @@
 </script>
 
 <style lang="less" scoped>
+  @import '@/styles/theme.less';
+
+  .themeBgColor(box);
+
   .box {
     display: flex;
     padding: 12px;
     width: 100%;
     height: calc(100vh - 280px);
     flex-direction: column;
-    background-color: white;
 
     img {
       min-height: 0;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 7812aded4..ad4f49be3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="login-box">
     <div class="login-logo">
-      <svg-icon name="logo" :size="45" />
-      <!--      <img src="~@/assets/images/logo.png" alt="">-->
+      <!-- <svg-icon name="logo" :size="45" /> -->
+      <img src="~@/assets/images/logo.png" width="45" />
       <h1 class="mb-0 ml-2 text-3xl font-bold">Antd Admin</h1>
     </div>
     <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
@@ -55,7 +55,6 @@
   import { message, Modal } from 'ant-design-vue';
   import { useUserStore } from '@/store/modules/user';
   import { getImageCaptcha } from '@/api/login';
-  import { SvgIcon } from '@/components/basic/svg-icon';
 
   const state = reactive({
     loading: false,
diff --git a/src/views/system/permission/user/columns.tsx b/src/views/system/permission/user/columns.tsx
index 446472a11..b7ea08a6c 100644
--- a/src/views/system/permission/user/columns.tsx
+++ b/src/views/system/permission/user/columns.tsx
@@ -100,10 +100,22 @@ export const baseColumns: TableColumnItem[] = [
     title: '创建时间',
     dataIndex: 'createdAt',
     width: 120,
+    formItemProps: {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+      },
+    },
   },
   {
     title: '修改时间',
     dataIndex: 'updatedAt',
     width: 120,
+    formItemProps: {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+      },
+    },
   },
 ];
diff --git a/stylelint.config.js b/stylelint.config.js
index 7f9eadd2b..bb203f6f7 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -4,6 +4,7 @@ module.exports = {
   customSyntax: 'postcss-html',
   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
   rules: {
+    'function-no-unknown': null,
     'selector-class-pattern': null,
     'selector-pseudo-class-no-unknown': [
       true,
@@ -35,6 +36,7 @@ module.exports = {
       },
     ],
     'no-empty-source': null,
+    'string-quotes': null,
     'named-grid-areas-no-invalid': null,
     'unicode-bom': 'never',
     'no-descending-specificity': null,
@@ -89,5 +91,10 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['*.less', '**/*.less'],
+      customSyntax: 'postcss-less',
+      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
+    },
   ],
 };
diff --git a/types/shims/shims-app.d.ts b/types/shims/shims-app.d.ts
index d41125479..1075c77ea 100644
--- a/types/shims/shims-app.d.ts
+++ b/types/shims/shims-app.d.ts
@@ -28,6 +28,8 @@ declare module '*.webp' {
   export default src;
 }
 
+declare module '*.css?raw';
+
 declare module '*.module.css' {
   const classes: { readonly [key: string]: string };
   export default classes;
diff --git a/vue.config.js b/vue.config.js
index f77614f74..686fb7026 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,6 +21,7 @@ const __APP_INFO__ = {
   lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 };
 
+// https://next.cli.vuejs.org/
 module.exports = defineConfig({
   // lintOnSave: false, //关闭eslint检查
   // publicPath: isDev ? '' : querystring.unescape('<%=request.getContextPath()%>'),
@@ -28,14 +29,23 @@ module.exports = defineConfig({
   // filenameHashing: false,
   productionSourceMap: false,
   css: {
-    // requireModuleExtension: true, // 是否开启CSSmodule并保留xxx.module.css后缀
     loaderOptions: {
+      // css: {
+      //   modules: {
+      //     auto: (path) => {
+      //       return path.includes('ant-design-vue/dist/antd.dark.css');
+      //     },
+      //   },
+      // },
       less: {
         lessOptions: {
           javascriptEnabled: true,
           modifyVars: {},
         },
-        additionalData: `@import "~@/styles/variables.less";`,
+        additionalData: `
+          @import "ant-design-vue/lib/style/themes/default.less";
+          @import "~@/styles/variables.less";
+      `,
       },
       // sass: {
       //   additionalData: `
@@ -63,6 +73,12 @@ module.exports = defineConfig({
       return args;
     });
 
+    config.module
+      .rule('css')
+      .exclude.add(resolve('node_modules/ant-design-vue/dist/antd.dark.css'))
+      .end();
+    config.module.rule('raw-css').resourceQuery(/raw/).type('asset/source');
+
     // 忽略解析markdown文件
     config.module.noParse(/\.md$/);
     if (IS_PROD) {
@@ -79,6 +95,7 @@ module.exports = defineConfig({
         });
     }
 
+    // config.module.rule('css').test(/\.ts$/).resourceQuery(/raw/).type('asset/source').end();
     // svg rule loader
     config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
 
@@ -90,7 +107,7 @@ module.exports = defineConfig({
       .use('svg-sprite-loader')
       .loader('svg-sprite-loader')
       .options({
-        symbolId: 'icon-[name]',
+        symbolId: 'svg-icon-[name]',
       });
     config.when(IS_PROD, (config) => {
       // split
diff --git a/yarn.lock b/yarn.lock
index 343621d07..660bf3d33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2102,24 +2102,24 @@
   resolved "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
-"@vueuse/core@^8.2.4":
-  version "8.2.4"
-  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-8.2.4.tgz#04159d28267e56fd27488de116e465d0b12b48ac"
-  integrity sha512-K8DbVLErlHMnEOqy67BrRbDmWCd4Z9X0a1dL6fQdhABLXBydy69Tm7uF5ZUotAqib9sskItYFsAnLhvGSue6bg==
+"@vueuse/core@^8.2.5":
+  version "8.2.5"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-8.2.5.tgz#ca6a59091ecf16e6739c53f3d857b11967a5eb06"
+  integrity sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==
   dependencies:
-    "@vueuse/metadata" "8.2.4"
-    "@vueuse/shared" "8.2.4"
+    "@vueuse/metadata" "8.2.5"
+    "@vueuse/shared" "8.2.5"
     vue-demi "*"
 
-"@vueuse/metadata@8.2.4":
-  version "8.2.4"
-  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.2.4.tgz#a880aa1ba1e30850983a85de8e1a6295d798250e"
-  integrity sha512-mn4FLULZAHd6r6vo5hLz+99xzwlVDP9qeVtZGV2Ik40m0zETe2okUr3O1Yoz6FReUoc7KAPrf0/GFpWEXVDAnQ==
+"@vueuse/metadata@8.2.5":
+  version "8.2.5"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.2.5.tgz#51c7d95e04284ea378a5242a2e88b77494e2c117"
+  integrity sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA==
 
-"@vueuse/shared@8.2.4":
-  version "8.2.4"
-  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.2.4.tgz#a5b3bb53596c802df2181a3a0095e9782383be32"
-  integrity sha512-sLkuZMEumsmEDYie3m6/nrk7SrLGlyUgtVn/0EJZ8Chaj1YfSmBQuLxNE0ruQ/6VZlqkx44jEZxcgbU7qPyAiw==
+"@vueuse/shared@8.2.5":
+  version "8.2.5"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-8.2.5.tgz#1ae200a240c4b8d42d41723b64d8f917aa57ff16"
+  integrity sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==
   dependencies:
     vue-demi "*"
 
@@ -2442,10 +2442,10 @@ ansi-styles@^6.0.0:
   resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
-ant-design-vue@3.1.0-rc.6:
-  version "3.1.0-rc.6"
-  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.1.0-rc.6.tgz#e508904eb7f6d4d29b104c07768b1c2c1a4f81a3"
-  integrity sha512-gnJiN2nRFRbCAl+zCnvZSiIFVoXHGHbbLuGuOi5ZHc0QDGLoglQmsqL7s3oYBWS0i2+0e6MsYQMhVR1pyfUyGA==
+ant-design-vue@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.1.1.tgz#429368057bc445975b3e6ee498915d5bd66e0e87"
+  integrity sha512-QcnESmPllfyPy4SavOlf1jml/bdmzCIcCgYWRwl0WKG5jbuuOQ0vhgfUCC2rI6R+84gb/qf4/0qoZnWcEyQziA==
   dependencies:
     "@ant-design/colors" "^6.0.0"
     "@ant-design/icons-vue" "^6.1.0"
@@ -4223,7 +4223,7 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-module-utils@^2.7.2:
+eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.npmmirror.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
   integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
@@ -4231,24 +4231,24 @@ eslint-module-utils@^2.7.2:
     debug "^3.2.7"
     find-up "^2.1.0"
 
-eslint-plugin-import@2.25.4:
-  version "2.25.4"
-  resolved "https://registry.npmmirror.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
-  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
+eslint-plugin-import@2.26.0:
+  version "2.26.0"
+  resolved "https://registry.npmmirror.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
   dependencies:
     array-includes "^3.1.4"
     array.prototype.flat "^1.2.5"
     debug "^2.6.9"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.2"
+    eslint-module-utils "^2.7.3"
     has "^1.0.3"
-    is-core-module "^2.8.0"
+    is-core-module "^2.8.1"
     is-glob "^4.0.3"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     object.values "^1.1.5"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.12.0"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
 
 eslint-plugin-prettier@^4.0.0:
   version "4.0.0"
@@ -4257,10 +4257,10 @@ eslint-plugin-prettier@^4.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^8.5.0:
-  version "8.5.0"
-  resolved "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz#65832bba43ca713fa5da16bdfcf55d0095677f6f"
-  integrity sha512-i1uHCTAKOoEj12RDvdtONWrGzjFm/djkzqfhmQ0d6M/W8KM81mhswd/z+iTZ0jCpdUedW3YRgcVfQ37/J4zoYQ==
+eslint-plugin-vue@^8.6.0:
+  version "8.6.0"
+  resolved "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-8.6.0.tgz#fbdf0f13f8d208a4cba752bf54042661a1aec5c3"
+  integrity sha512-abXiF2J18n/7ZPy9foSlJyouKf54IqpKlNvNmzhM93N0zs3QUxZG/oBd3tVPOJTKg7SlhBUtPxugpqzNbgGpQQ==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
@@ -5530,7 +5530,7 @@ is-ci@^1.0.10:
   dependencies:
     ci-info "^1.5.0"
 
-is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
+is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -6447,7 +6447,7 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@^3.0.4:
+minimatch@^3.0.4, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -6468,6 +6468,11 @@ minimist@1.2.5, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
 minipass@^3.1.1:
   version "3.1.6"
   resolved "https://registry.npmmirror.com/minipass/-/minipass-3.1.6.tgz#3b8150aa688a711a1521af5e8779c1d3bb4f45ee"
@@ -7200,6 +7205,11 @@ postcss-html@^1.3.0:
     postcss "^8.4.0"
     postcss-safe-parser "^6.0.0"
 
+postcss-less@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/postcss-less/-/postcss-less-6.0.0.tgz#463b34c60f53b648c237f569aeb2e09149d85af4"
+  integrity sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==
+
 postcss-loader@^6.1.1:
   version "6.2.1"
   resolved "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
@@ -7851,7 +7861,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.npmmirror.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -8586,7 +8596,7 @@ stylehacks@^*:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
-stylelint-config-html@^1.0.0:
+stylelint-config-html@>=1.0.0, stylelint-config-html@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/stylelint-config-html/-/stylelint-config-html-1.0.0.tgz#172acb996ee4c854e8c670fcff77ff0d98d3bec2"
   integrity sha512-rKQUUWDpaYC7ybsS6tLxddjn6DxhjSIXybElSmcTyVQj3ExhmU3q+l41ktrlwHRyY0M5SkTkZiwngvYPYmsgSQ==
@@ -8596,7 +8606,16 @@ stylelint-config-prettier@^9.0.3:
   resolved "https://registry.npmmirror.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"
   integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==
 
-stylelint-config-recommended@^7.0.0:
+stylelint-config-recommended-vue@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/stylelint-config-recommended-vue/-/stylelint-config-recommended-vue-1.4.0.tgz#0a182da17dc9e846e4bec65a7676ccf882b35964"
+  integrity sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==
+  dependencies:
+    semver "^7.3.5"
+    stylelint-config-html ">=1.0.0"
+    stylelint-config-recommended ">=6.0.0"
+
+stylelint-config-recommended@>=6.0.0, stylelint-config-recommended@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmmirror.com/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz#7497372ae83ab7a6fffc18d7d7b424c6480ae15e"
   integrity sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==
@@ -8992,14 +9011,14 @@ ts-node@^10.6.0:
     v8-compile-cache-lib "^3.0.0"
     yn "3.1.1"
 
-tsconfig-paths@^3.12.0:
-  version "3.14.0"
-  resolved "https://registry.npmmirror.com/tsconfig-paths/-/tsconfig-paths-3.14.0.tgz#4fcc48f9ccea8826c41b9ca093479de7f5018976"
-  integrity sha512-cg/1jAZoL57R39+wiw4u/SCC6Ic9Q5NqjBOb+9xISedOYurfog9ZNmKJSxAnb2m/5Bq4lE9lhUcau33Ml8DM0g==
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmmirror.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.1"
-    minimist "^1.2.0"
+    minimist "^1.2.6"
     strip-bom "^3.0.0"
 
 tslib@^1.8.1, tslib@^1.9.0: