diff --git a/.env.front b/.env.front index 1d697cb2..f67abbda 100644 --- a/.env.front +++ b/.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" # 如果没有跨域问题，直接在这里配置即可 diff --git a/.env.test b/.env.test index 23f0d53d..efb236e2 100644 --- a/.env.test +++ b/.env.test @@ -1,5 +1,3 @@ -NODE_ENV=production - # 资源公共路径,需要以 / 开头和结尾 VITE_PUBLIC_PATH = / @@ -9,20 +7,21 @@ 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_API_URL = /admin-ap +# 接口地址 +VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn" +# 如果没有跨域问题，直接在这里配置即可 +VITE_GLOB_API_URL = /admin-api # 文件上传地址 可以由nginx做转发或者直接写实际地址 VITE_GLOB_UPLOAD_URL = /upload # 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换 -VITE_GLOB_API_URL_PREFIX = +VITE_GLOB_API_URL_PREFIX = # 打包是否开启pwa功能 VITE_USE_PWA = false diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 313348ca..0eed3475 100644 --- a/build/vite/plugin/index.ts +++ b/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)) diff --git a/package.json b/package.json index f34a8a46..441c9129 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80aa5fb6..85e748ea 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/unocss.config.ts b/unocss.config.ts index cbc6fcec..e0ba5e42 100644 --- a/unocss.config.ts +++ b/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) { -// const createCss = (index: number, d = 'x') => { -// const upd = d.toUpperCase() -// return { -// [`*> .enter-${d}:nth-child(${index})`]: { -// transform: `translate${upd}(50px)` -// }, -// [`*> .-enter-${d}:nth-child(${index})`]: { -// transform: `translate${upd}(-50px)` -// }, -// [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { -// 'z-index': `${10 - index}`, -// opacity: '0', -// animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, -// 'animation-fill-mode': 'forwards', -// 'animation-delay': `${(index * 1) / 10}s` -// } -// } -// } -// const handler = ({ addBase }) => { -// const addRawCss = {} -// for (let index = 1; index < maxOutput; index++) { -// Object.assign(addRawCss, { -// ...createCss(index, 'x'), -// ...createCss(index, 'y') -// }) -// } -// addBase({ -// ...addRawCss, -// [`@keyframes enter-x-animation`]: { -// to: { -// opacity: '1', -// transform: 'translateX(0)' -// } -// }, -// [`@keyframes enter-y-animation`]: { -// to: { -// opacity: '1', -// transform: 'translateY(0)' -// } -// } -// }) -// } -// return { handler } -// } +function createEnterPlugin(maxOutput = 6) { + const createCss = (index: number, d = 'x') => { + const upd = d.toUpperCase() + return { + [`*> .enter-${d}:nth-child(${index})`]: { + transform: `translate${upd}(50px)` + }, + [`*> .-enter-${d}:nth-child(${index})`]: { + transform: `translate${upd}(-50px)` + }, + [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { + 'z-index': `${10 - index}`, + opacity: '0', + animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, + 'animation-fill-mode': 'forwards', + 'animation-delay': `${(index * 1) / 10}s` + } + } + } + const handler = ({ addBase }) => { + const addRawCss = {} + for (let index = 1; index < maxOutput; index++) { + Object.assign(addRawCss, { + ...createCss(index, 'x'), + ...createCss(index, 'y') + }) + } + addBase({ + ...addRawCss, + [`@keyframes enter-x-animation`]: { + to: { + opacity: '1', + transform: 'translateX(0)' + } + }, + [`@keyframes enter-y-animation`]: { + to: { + opacity: '1', + transform: 'translateY(0)' + } + } + }) + } + return { handler } +} diff --git a/vite.config.ts b/vite.config.ts index 05785a1e..48478d6f 100644 --- a/vite.config.ts +++ b/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 } }