feat: 生产、开发、测试环境打包测试，去掉颜色选择器

.env.development

@@ -3,3 +3,5 @@ VITE_USER_NODE_ENV = development
 
 # 开发环境地址前缀 (一般 '/' 或 './' 都可以)
 VITE_PUBLIC_PATH = '/'
+
+VITE_GLOB_APP_TITLE = SnowAdmin

.env.production

@@ -3,3 +3,5 @@ VITE_USER_NODE_ENV = production
 
 # 打包路径 (就是网站前缀, 例如部署到 http://dcodes.gitee.io/dc-admin/ 域名下, 就需要填写 /dc-admin/), 一般填一个斜杠 /
 VITE_PUBLIC_PATH = '/dc-admin/'
+
+VITE_GLOB_APP_TITLE = SnowAdmin

.env.test

@@ -3,3 +3,5 @@ VITE_USER_NODE_ENV = development
 
 # 开发环境地址前缀 (一般 '/' 或 './' 都可以)
 VITE_PUBLIC_PATH = '/'
+
+VITE_GLOB_APP_TITLE = SnowAdmin

package.json

@@ -6,6 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
+    "build:dev": "vue-tsc && vite build --mode development",
+    "build:prod": "vue-tsc && vite build --mode production",
+    "build:test": "vue-tsc && vite build --mode test",
     "preview": "vite preview",
     "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
     "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",

src/directives/index.ts

@@ -1,6 +1,7 @@
 import { App } from "vue";
 import antiShake from "@/directives/modules/anti-shake";
 import throttle from "@/directives/modules/throttle";
+import custom from "@/directives/modules/custom";
 
 // 定义安装函数
 // install 函数是一个对象中的方法，其作用是将一系列指令对象安装到 Vue 应用实例中，它自带两个参数：app 和 options
@@ -11,6 +12,7 @@ const directives = {
     // 将一系列自定义指令对象安装到 Vue 应用实例中
     app.directive("antiShake", antiShake);
     app.directive("throttle", throttle);
+    app.directive("custom", custom);
   }
 };
 

src/directives/modules/custom.ts

@@ -0,0 +1,9 @@
+import { Directive } from "vue";
+
+const custom: Directive = {
+  mounted(el, binding) {
+    el.style.color = binding.value;
+  }
+};
+
+export default custom;

src/lang/modules/enUS.ts

@@ -31,6 +31,7 @@ export default {
     ["custom-instruction"]: "custom instruction",
     ["anti-shake"]: "anti shake",
     ["throttle"]: "throttle",
+    ["test-instruction"]: "test instruction",
     ["personal-center"]: "personal center",
     ["userinfo"]: "userinfo",
     ["user-settings"]: "user settings",

src/lang/modules/zhCN.ts

@@ -31,6 +31,7 @@ export default {
     ["custom-instruction"]: "自定义指令",
     ["anti-shake"]: "防抖",
     ["throttle"]: "节流",
+    ["test-instruction"]: "测试指令",
     ["personal-center"]: "个人中心",
     ["userinfo"]: "用户信息",
     ["user-settings"]: "用户设置",

src/layout/components/Header/components/system-settings/index.vue

@@ -29,7 +29,7 @@
         <div class="title">水印设置</div>
         <div class="flex-row">
           <div>水印颜色</div>
-          <a-color-picker v-model="watermarkStyle.color" format="rgb" :history-colors="['#00000026']" />
+          <!-- <a-color-picker v-model="watermarkStyle.color" format="rgb" :history-colors="['#00000026']" /> -->
         </div>
         <div class="flex-row">
           <div>水印文案</div>

src/layout/components/Header/components/theme-settings/index.vue

@@ -18,13 +18,13 @@
       <div class="box-gap">
         <a-divider orientation="center">主题设置</a-divider>
         <div class="flex-center">
-          <a-color-picker
+          <!-- <a-color-picker
             v-model="themeColor"
             hide-trigger
             show-preset
             :preset-colors="presetColors"
             @change="themeColorChange"
-          />
+          /> -->
         </div>
       </div>
       <div class="box-gap">
@@ -57,8 +57,9 @@ import { useThemeConfig } from "@/store/modules/theme-config";
 import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 const themeStore = useThemeConfig();
-const { layoutType, themeColor, presetColors, colorWeakMode, grayMode, darkMode, asideDark, transitionPage } =
+// themeColor,
-  storeToRefs(themeStore);
+// presetColors,
+const { layoutType, colorWeakMode, grayMode, darkMode, asideDark, transitionPage } = storeToRefs(themeStore);
 
 const layoutList = reactive({
   layoutDefaults: {
@@ -83,11 +84,11 @@ const transitions = ref([
   { value: "cardInOut", label: "卡片" }
 ]);
 // 主题色设置
-const themeColorChange = (value: string) => {
+// const themeColorChange = (value: string) => {
-  themeColor.value = value;
+//   themeColor.value = value;
-  const { setThemeColor } = useThemeMethods();
+//   const { setThemeColor } = useThemeMethods();
-  setThemeColor();
+//   setThemeColor();
-};
+// };
 
 // 色弱模式
 const onColorWeak = () => {

src/router/route.ts

@@ -406,6 +406,23 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               sort: 2
             },
             children: []
+          },
+          {
+            path: "/custom-instruction/test-instruction",
+            name: "test-instruction",
+            component: () => import("@/views/custom-instruction/test-instruction/test-instruction.vue"),
+            meta: {
+              title: "test-instruction",
+              hide: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 3
+            },
+            children: []
           }
         ]
       },

src/views/custom-instruction/test-instruction/test-instruction.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="dc-page">
+    <div v-custom="'red'">文字变色</div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>

src/vite-env.d.ts

@@ -15,3 +15,4 @@ declare module "@codemirror/lang-javascript";
 declare module "@codemirror/lang-vue";
 declare module "nprogress";
 declare module "@wangeditor/editor-for-vue";
+declare module "@/directives/modules/custom";

vite.config.ts

@@ -91,18 +91,18 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
-      minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
+      // minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
-      // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
+      minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
-      // terserOptions: {
+      terserOptions: {
-      //   compress: {
+        compress: {
-      //     keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
-      //     drop_console: true, // 生产环境去除 console
+          drop_console: true, // 生产环境去除 console
-      //     drop_debugger: true // 生产环境去除 debugger
+          drop_debugger: true // 生产环境去除 debugger
-      //   },
+        },
-      //   format: {
+        format: {
-      //     comments: false // 删除注释
+          comments: false // 删除注释
-      //   }
+        }
-      // },
+      },
       assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
       chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
       // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储