fix: build style error

.env.front

@@ -13,7 +13,6 @@ VITE_PROXY = [["/dev-api","http://api-dashboard.yudao.iocoder.cn"],["/upload","h
 # 是否删除Console.log
 VITE_DROP_CONSOLE = false
 
-# 接口地址
 # 接口地址
 VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn"
 # 如果没有跨域问题，直接在这里配置即可

.env.test

@@ -1,5 +1,3 @@
-NODE_ENV=production
-
 # 资源公共路径,需要以 / 开头和结尾
 VITE_PUBLIC_PATH = /
 
@@ -9,14 +7,15 @@ VITE_DROP_CONSOLE = true
 # 打包是否输出gz｜br文件
 # 可选: gzip | brotli | none
 # 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
-VITE_BUILD_COMPRESS = 'none'
+VITE_BUILD_COMPRESS = 'gzip'
 
 # 使用compress时是否删除源文件，默认false
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
-# 接口地址 可以由nginx做转发或者直接写实际地址
+# 接口地址
-VITE_GLOB_BASE_URL = "http://localhost:48080"
+VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn"
-VITE_GLOB_API_URL = /admin-ap
+# 如果没有跨域问题，直接在这里配置即可
+VITE_GLOB_API_URL = /admin-api
 
 # 文件上传地址 可以由nginx做转发或者直接写实际地址
 VITE_GLOB_UPLOAD_URL = /upload

build/vite/plugin/index.ts

@@ -13,9 +13,8 @@ import { configStyleImportPlugin } from './styleImport'
 import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
-import { isProdFn } from '../../utils'
 
-export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boolean) {
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
 
   const vitePlugins: (PluginOption | PluginOption[])[] = [
@@ -44,11 +43,6 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
   // vite-plugin-purge-icons
   vitePlugins.push(purgeIcons())
 
-  // vite-plugin-style-import
-  if (isProdFn(mode)) {
-    vitePlugins.push(configStyleImportPlugin(isBuild))
-  }
-
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig())
 
@@ -57,6 +51,8 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
 
   // The following plugins only work in the production environment
   if (isBuild) {
+    // vite-plugin-style-import
+    vitePlugins.push(configStyleImportPlugin(isBuild))
     // rollup-plugin-gzip
     vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
 

package.json

@@ -82,6 +82,7 @@
     "@types/sortablejs": "^1.15.1",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
+    "@unocss/preset-wind": "^0.50.6",
     "@unocss/transformer-directives": "^0.50.6",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ specifiers:
   '@types/sortablejs': ^1.15.1
   '@typescript-eslint/eslint-plugin': ^5.56.0
   '@typescript-eslint/parser': ^5.56.0
+  '@unocss/preset-wind': ^0.50.6
   '@unocss/transformer-directives': ^0.50.6
   '@vitejs/plugin-vue': ^4.1.0
   '@vitejs/plugin-vue-jsx': ^3.0.1
@@ -150,6 +151,7 @@ devDependencies:
   '@types/sortablejs': 1.15.1
   '@typescript-eslint/eslint-plugin': 5.56.0_2hcjazgfnbtq42tcc73br2vup4
   '@typescript-eslint/parser': 5.56.0_j4766f7ecgqbon3u7zlxn5zszu
+  '@unocss/preset-wind': 0.50.6
   '@unocss/transformer-directives': 0.50.6
   '@vitejs/plugin-vue': 4.1.0_vite@4.2.1+vue@3.2.47
   '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.2.1+vue@3.2.47

unocss.config.ts

@@ -1,10 +1,36 @@
 import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
 import transformerDirectives from '@unocss/transformer-directives'
+import presetWind from '@unocss/preset-wind'
 import { primaryColor } from './build/config/themeConfig'
 
 export default defineConfig({
   exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build'],
-  presets: [presetMini({ dark: 'class' }), presetAttributify(), presetUno()],
+  presets: [
+    presetMini({ dark: 'class' }),
+    presetAttributify(),
+    presetUno(),
+    presetWind({
+      darkMode: 'class',
+      plugins: [createEnterPlugin()],
+      theme: {
+        extend: {
+          zIndex: {
+            '-1': '-1'
+          },
+          colors: {
+            primary: primaryColor
+          },
+          screens: {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            '2xl': '1600px'
+          }
+        }
+      }
+    })
+  ],
   transformers: [transformerDirectives()],
   theme: {
     extend: {
@@ -29,48 +55,48 @@ export default defineConfig({
  * Used for animation when the element is displayed.
  * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
  */
-// function createEnterPlugin(maxOutput = 6) {
+function createEnterPlugin(maxOutput = 6) {
-//   const createCss = (index: number, d = 'x') => {
+  const createCss = (index: number, d = 'x') => {
-//     const upd = d.toUpperCase()
+    const upd = d.toUpperCase()
-//     return {
+    return {
-//       [`*> .enter-${d}:nth-child(${index})`]: {
+      [`*> .enter-${d}:nth-child(${index})`]: {
-//         transform: `translate${upd}(50px)`
+        transform: `translate${upd}(50px)`
-//       },
+      },
-//       [`*> .-enter-${d}:nth-child(${index})`]: {
+      [`*> .-enter-${d}:nth-child(${index})`]: {
-//         transform: `translate${upd}(-50px)`
+        transform: `translate${upd}(-50px)`
-//       },
+      },
-//       [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-//         'z-index': `${10 - index}`,
+        'z-index': `${10 - index}`,
-//         opacity: '0',
+        opacity: '0',
-//         animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-//         'animation-fill-mode': 'forwards',
+        'animation-fill-mode': 'forwards',
-//         'animation-delay': `${(index * 1) / 10}s`
+        'animation-delay': `${(index * 1) / 10}s`
-//       }
+      }
-//     }
+    }
-//   }
+  }
-//   const handler = ({ addBase }) => {
+  const handler = ({ addBase }) => {
-//     const addRawCss = {}
+    const addRawCss = {}
-//     for (let index = 1; index < maxOutput; index++) {
+    for (let index = 1; index < maxOutput; index++) {
-//       Object.assign(addRawCss, {
+      Object.assign(addRawCss, {
-//         ...createCss(index, 'x'),
+        ...createCss(index, 'x'),
-//         ...createCss(index, 'y')
+        ...createCss(index, 'y')
-//       })
+      })
-//     }
+    }
-//     addBase({
+    addBase({
-//       ...addRawCss,
+      ...addRawCss,
-//       [`@keyframes enter-x-animation`]: {
+      [`@keyframes enter-x-animation`]: {
-//         to: {
+        to: {
-//           opacity: '1',
+          opacity: '1',
-//           transform: 'translateX(0)'
+          transform: 'translateX(0)'
-//         }
+        }
-//       },
+      },
-//       [`@keyframes enter-y-animation`]: {
+      [`@keyframes enter-y-animation`]: {
-//         to: {
+        to: {
-//           opacity: '1',
+          opacity: '1',
-//           transform: 'translateY(0)'
+          transform: 'translateY(0)'
-//         }
+        }
-//       }
+      }
-//     })
+    })
-//   }
+  }
-//   return { handler }
+  return { handler }
-// }
+}

vite.config.ts

@@ -92,7 +92,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
 
     // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
-    plugins: createVitePlugins(mode, viteEnv, isBuild),
+    plugins: createVitePlugins(viteEnv, isBuild),
 
     optimizeDeps: { include, exclude }
   }