feat(components): [ProjectSetting] config project style online

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)

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,22 +69,24 @@
     "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",
     "stylelint": "^14.6.1",
     "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",

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;

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');

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;

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';

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';