diff --git a/.eslintrc.js b/.eslintrc.js index af4a0fdc..bb13e17e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,74 +1,20 @@ +const process = require('node:process') + +process.env.ESLINT_TSCONFIG = 'tsconfig.json' + module.exports = { - root: true, - env: { - browser: true, - node: true, - es6: true - }, - parser: 'vue-eslint-parser', - plugins: ['vue'], - parserOptions: { - parser: '@typescript-eslint/parser', - ecmaVersion: 2020, - sourceType: 'module', - jsxPragma: 'React', - ecmaFeatures: { - jsx: true - } - }, - extends: ['plugin:vue/vue3-recommended', 'prettier', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'], + extends: '@antfu', rules: { 'max-len': ['error', { code: 140, tabWidth: 2, ignoreComments: true }], - 'vue/script-setup-uses-vars': 'error', - '@typescript-eslint/ban-ts-ignore': 'off', - '@typescript-eslint/explicit-function-return-type': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/no-var-requires': 'off', - '@typescript-eslint/no-empty-function': 'off', - 'vue/custom-event-name-casing': 'off', - 'no-use-before-define': 'off', - '@typescript-eslint/no-use-before-define': 'off', - '@typescript-eslint/ban-ts-comment': 'off', - '@typescript-eslint/ban-types': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-unused-vars': [ - 'error', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^_' - } - ], - 'no-unused-vars': [ - 'error', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^_' - } - ], - 'space-before-function-paren': 'off', - - 'vue/attributes-order': 'off', - 'vue/one-component-per-file': 'off', - 'vue/html-closing-bracket-newline': 'off', - 'vue/max-attributes-per-line': 'off', - 'vue/multiline-html-element-content-newline': 'off', - 'vue/singleline-html-element-content-newline': 'off', - 'vue/attribute-hyphenation': 'off', - 'vue/require-default-prop': 'off', - 'vue/require-explicit-emits': 'off', - 'vue/html-self-closing': [ - 'error', - { - html: { - void: 'always', - normal: 'never', - component: 'always' - }, - svg: 'always', - math: 'always' - } - ], - 'vue/multi-word-component-names': 'off' - } + '@typescript-eslint/no-floating-promises': 'off', + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-argument': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/no-unsafe-return': 'off', + '@typescript-eslint/no-unsafe-call': 'off', + 'prefer-promise-reject-errors': 'off', + 'no-case-declarations': 'off', + 'no-console': 'off', + 'n/prefer-global/process': 'off', + }, } diff --git a/.lintstagedrc.js b/.lintstagedrc.js deleted file mode 100644 index b8b6c4cb..00000000 --- a/.lintstagedrc.js +++ /dev/null @@ -1,8 +0,0 @@ -// .lintstagedrc.js -module.exports = { - '*.js': ['prettier --config prettier.config.js --write', 'eslint --fix --ext .js'], - '*.ts': ['prettier --config prettier.config.js --write', 'eslint --fix --ext .ts'], - '*.vue': ['prettier --config prettier.config.js --write', 'eslint --fix --ext .vue'], - '*.tsx': ['prettier --config prettier.config.js --write', 'eslint --fix --ext .tsx'], - '*.json': 'prettier --config prettier.config.js --write' -} diff --git a/.vscode/settings.json b/.vscode/settings.json index c4647826..c427feaa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,5 @@ { "typescript.tsdk": "./node_modules/typescript/lib", - "volar.tsPlugin": true, - "volar.tsPluginStatus": false, "npm.packageManager": "pnpm", "editor.tabSize": 2, "prettier.printWidth": 140, // 超过最大值换行 @@ -60,6 +58,24 @@ "path-intellisense.mappings": { "@/": "${workspaceRoot}/src" }, + "prettier.enable": false, + "editor.formatOnSave": false, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + "source.organizeImports": false + }, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "markdown", + "json", + "jsonc", + "yaml" + ], "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, @@ -84,9 +100,6 @@ "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, "[vue]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true, @@ -103,7 +116,9 @@ "i18n-ally.displayLanguage": "zh-CN", "i18n-ally.enabledFrameworks": ["vue", "react"], "cSpell.words": [ + "antfu", "vben", + "unref", "unocss", "tailwind", "browserslist", @@ -136,27 +151,6 @@ "pnpm", "antd" ], - "vetur.format.scriptInitialIndent": true, - "vetur.format.styleInitialIndent": true, - "vetur.validation.script": false, - "MicroPython.executeButton": [ - { - "text": "▶", - "tooltip": "运行", - "alignment": "left", - "command": "extension.executeFile", - "priority": 3.5 - } - ], - "MicroPython.syncButton": [ - { - "text": "$(sync)", - "tooltip": "同步", - "alignment": "left", - "command": "extension.execute", - "priority": 4 - } - ], // 控制相关文件嵌套展示 "explorer.fileNesting.enabled": true, "explorer.fileNesting.expand": false, diff --git a/README.md b/README.md index 88a195b4..f1ee30b2 100644 --- a/README.md +++ b/README.md @@ -15,11 +15,13 @@ - [启动文档](https://doc.iocoder.cn/quick-start/) - [视频教程](https://doc.iocoder.cn/video/) -## 交流群 && 外包项目请联系 [ xinyu370 ] +## 外包项目请联系 [ xinyu370 ] -- [Star 点击查看](https://gitee.com/yudaocode/yudao-ui-admin-vben/issues/I6R8J0) +- ![alt 定制开发](./public/resource/img/wx2.png) -- ![alt 微信](./public/resource/img/wx.png) +## 交流群 + +- ![alt 交流群](./public/resource/img/wx.png) ## 开发进度 @@ -35,14 +37,14 @@ | 框架 | 说明 | 版本 | | --- | --- | --- | | [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.3.4 | -| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.4.7 | -| [ant-design-vue](https://antdv.com/) | ant-design-vue | 3.2.20 | +| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 4.4.8 | +| [ant-design-vue](https://antdv.com/) | ant-design-vue | 4.0.0 | | [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 5.1.6 | | [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.1.6 | | [vueuse](https://vueuse.org/) | 常用工具集 | 10.2.1 | | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 | | [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.2.4 | -| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 | +| [unocss](https://uno.antfu.me/) | 原子 css | 0.54.1 | | [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.1.1 | - ![alt VbenAdmin](https://anncwb.github.io/anncwb/images/preview1.png) diff --git a/build/config/themeConfig.ts b/build/config/themeConfig.ts index 0d539967..b1b5bdd0 100644 --- a/build/config/themeConfig.ts +++ b/build/config/themeConfig.ts @@ -17,7 +17,7 @@ export interface GenerateColorsParams { export function generateAntColors(color: string, theme: GenerateTheme = 'default') { return generate(color, { - theme + theme, }) } @@ -31,7 +31,7 @@ export function getThemeColors(color?: string) { } export function generateColors({ color = primaryColor, mixLighten, mixDarken, tinycolor }: GenerateColorsParams) { - const arr = new Array(19).fill(0) + const arr = Array.from({ length: 19 }).fill(0) const lightens = arr.map((_t, i) => { return mixLighten(color, i / 5) }) @@ -46,7 +46,7 @@ export function generateColors({ color = primaryColor, mixLighten, mixDarken, ti .toRgbString() }) - const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.')) + const shortAlphaColors = alphaColors.map(item => item.replace(/\s/g, '').replace(/0\./g, '.')) const tinycolorLightens = arr .map((_t, i) => { @@ -54,7 +54,7 @@ export function generateColors({ color = primaryColor, mixLighten, mixDarken, ti .lighten(i * 5) .toHexString() }) - .filter((item) => item !== '#ffffff') + .filter(item => item !== '#ffffff') const tinycolorDarkens = arr .map((_t, i) => { @@ -62,8 +62,8 @@ export function generateColors({ color = primaryColor, mixLighten, mixDarken, ti .darken(i * 5) .toHexString() }) - .filter((item) => item !== '#000000') + .filter(item => item !== '#000000') return [...lightens, ...darkens, ...alphaColors, ...shortAlphaColors, ...tinycolorDarkens, ...tinycolorLightens].filter( - (item) => !item.includes('-') + item => !item.includes('-'), ) } diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts index db206309..b27d33d6 100644 --- a/build/generate/generateModifyVars.ts +++ b/build/generate/generateModifyVars.ts @@ -1,37 +1,18 @@ +import { resolve } from 'node:path' import { generateAntColors, primaryColor } from '../config/themeConfig' -import { getThemeVariables } from 'ant-design-vue/dist/theme' -import { resolve } from 'path' /** * less global variable */ -export function generateModifyVars(dark = false) { +export function generateModifyVars() { const palettes = generateAntColors(primaryColor) - const primary = palettes[5] const primaryColorObj: Record = {} - for (let index = 0; index < 10; index++) { + for (let index = 0; index < 10; index++) primaryColorObj[`primary-${index + 1}`] = palettes[index] - } - const modifyVars = getThemeVariables({ dark }) return { - ...modifyVars, - // Used for global import to avoid the need to import each style file separately - // reference: Avoid repeated references - hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`, - 'primary-color': primary, - ...primaryColorObj, - 'info-color': primary, - 'processing-color': primary, - 'success-color': '#55D187', // Success color - 'error-color': '#ED6F6F', // False color - 'warning-color': '#EFBD47', // Warning color - //'border-color-base': '#EEEEEE', - 'font-size-base': '14px', // Main font size - 'border-radius-base': '2px', // Component/float fillet - 'link-color': primary, // Link color - 'app-content-background': '#fafafa' // Link color + hack: `true; @import (reference) "${resolve('src/design/config.less')}";`, } } diff --git a/build/generate/icon/index.ts b/build/generate/icon/index.ts index a3be71b9..8d7ced56 100644 --- a/build/generate/icon/index.ts +++ b/build/generate/icon/index.ts @@ -1,4 +1,4 @@ -import path from 'path' +import path from 'node:path' import fs from 'fs-extra' import inquirer from 'inquirer' import colors from 'picocolors' @@ -11,10 +11,10 @@ async function generateIcon() { const collections = Object.entries(raw).map(([id, v]) => ({ ...(v as any), - id + id, })) - const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name })) + const choices = collections.map(item => ({ key: item.id, value: item.id, name: item.name })) inquirer .prompt([ @@ -23,39 +23,39 @@ async function generateIcon() { name: 'useType', choices: [ { key: 'local', value: 'local', name: 'Local' }, - { key: 'onLine', value: 'onLine', name: 'OnLine' } + { key: 'onLine', value: 'onLine', name: 'OnLine' }, ], - message: 'How to use icons?' + message: 'How to use icons?', }, { type: 'list', name: 'iconSet', - choices: choices, - message: 'Select the icon set that needs to be generated?' + choices, + message: 'Select the icon set that needs to be generated?', }, { type: 'input', name: 'output', message: 'Select the icon set that needs to be generated?', - default: 'src/components/Icon/data' - } + default: 'src/components/Icon/data', + }, ]) .then(async (answers) => { const { iconSet, output, useType } = answers const outputDir = path.resolve(process.cwd(), output) await fs.ensureDir(outputDir) - const genCollections = collections.filter((item) => [iconSet].includes(item.id)) + const genCollections = collections.filter(item => [iconSet].includes(item.id)) const prefixSet: string[] = [] for (const info of genCollections) { const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`)) if (data) { const { prefix } = data const isLocal = useType === 'local' - const icons = Object.keys(data.icons).map((item) => `${isLocal ? prefix + ':' : ''}${item}`) + const icons = Object.keys(data.icons).map(item => `${isLocal ? `${prefix}:` : ''}${item}`) - await fs.writeFileSync( - path.join(output, `icons.data.ts`), - `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}` + fs.writeFileSync( + path.join(output, 'icons.data.ts'), + `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`, ) prefixSet.push(prefix) } diff --git a/build/getConfigFileName.ts b/build/getConfigFileName.ts index 4db6b708..510c537b 100644 --- a/build/getConfigFileName.ts +++ b/build/getConfigFileName.ts @@ -2,6 +2,6 @@ * Get the configuration file variable name * @param env */ -export const getConfigFileName = (env: Record) => { +export function getConfigFileName(env: Record) { return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '') } diff --git a/build/script/buildConf.ts b/build/script/buildConf.ts index 73df033b..c971d846 100644 --- a/build/script/buildConf.ts +++ b/build/script/buildConf.ts @@ -1,9 +1,9 @@ /** * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging */ -import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant' import fs, { writeFileSync } from 'fs-extra' import colors from 'picocolors' +import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant' import { getEnvConfig, getRootPath } from '../utils' import { getConfigFileName } from '../getConfigFileName' @@ -33,10 +33,11 @@ function createConfig(params: CreateConfigParams) { fs.mkdirp(getRootPath(OUTPUT_DIR)) writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr) - console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`) - console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n') - } catch (error) { - console.log(colors.red('configuration file configuration file failed to package:\n' + error)) + console.log(`${colors.cyan(`✨ [${pkg.name}]`)} - configuration file is build successfully:`) + console.log(`${colors.gray(`${OUTPUT_DIR}/${colors.green(configFileName)}`)}\n`) + } + catch (error: any) { + console.log(colors.red(`configuration file configuration file failed to package:\n${error}`)) } } diff --git a/build/script/postBuild.ts b/build/script/postBuild.ts index bbe05ed1..6f16456b 100644 --- a/build/script/postBuild.ts +++ b/build/script/postBuild.ts @@ -1,22 +1,22 @@ // #!/usr/bin/env node -import { runBuildConfig } from './buildConf' import colors from 'picocolors' import pkg from '../../package.json' +import { runBuildConfig } from './buildConf' -export const runBuild = async () => { +export function runBuild() { try { const argvList = process.argv.splice(2) // Generate configuration file - if (!argvList.includes('disabled-config')) { + if (!argvList.includes('disabled-config')) runBuildConfig() - } console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!') - } catch (error) { - console.log(colors.red('vite build error:\n' + error)) + } + catch (error: any) { + console.log(colors.red(`vite build error:\n${error}`)) process.exit(1) } } diff --git a/build/utils.ts b/build/utils.ts index 6550b637..ba7768c1 100644 --- a/build/utils.ts +++ b/build/utils.ts @@ -1,5 +1,5 @@ -import fs from 'fs' -import path from 'path' +import fs from 'node:fs' +import path from 'node:path' import dotenv from 'dotenv' export function isDevFn(mode: string): boolean { @@ -25,13 +25,14 @@ export function wrapperEnv(envConf: Recordable): ViteEnv { let realName = envConf[envName].replace(/\\n/g, '\n') realName = realName === 'true' ? true : realName === 'false' ? false : realName - if (envName === 'VITE_PORT') { + if (envName === 'VITE_PORT') realName = Number(realName) - } + if (envName === 'VITE_PROXY' && realName) { try { realName = JSON.parse(realName.replace(/'/g, '"')) - } catch (error) { + } + catch (error) { realName = '' } } @@ -50,7 +51,7 @@ export function wrapperEnv(envConf: Recordable): ViteEnv { */ function getConfFiles() { const script = process.env.npm_lifecycle_script - const reg = new RegExp('--mode ([a-z_\\d]+)') + const reg = /--mode ([a-z_\d]+)/ const result = reg.exec(script as string) as any if (result) { const mode = result[1] as string @@ -70,15 +71,15 @@ export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) { try { const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item))) envConfig = { ...envConfig, ...env } - } catch (e) { + } + catch (e) { console.error(`Error in parsing ${item}`, e) } }) const reg = new RegExp(`^(${match})`) Object.keys(envConfig).forEach((key) => { - if (!reg.test(key)) { + if (!reg.test(key)) Reflect.deleteProperty(envConfig, key) - } }) return envConfig } diff --git a/build/vite/optimize.ts b/build/vite/optimize.ts index f3c81daf..7310ddbf 100644 --- a/build/vite/optimize.ts +++ b/build/vite/optimize.ts @@ -28,7 +28,7 @@ const include = [ 'ant-design-vue', 'ant-design-vue/es/style', 'ant-design-vue/es/locale/zh_CN', - 'ant-design-vue/es/locale/en_US' + 'ant-design-vue/es/locale/en_US', ] const exclude = ['@iconify/json'] diff --git a/build/vite/plugin/compress.ts b/build/vite/plugin/compress.ts index 3dc0b4eb..2cf006e9 100644 --- a/build/vite/plugin/compress.ts +++ b/build/vite/plugin/compress.ts @@ -7,7 +7,7 @@ import compressPlugin from 'vite-plugin-compression' export function configCompressPlugin( compress: 'gzip' | 'brotli' | 'none' = 'none', - deleteOriginFile = false + deleteOriginFile = false, ): PluginOption | PluginOption[] { const compressList = compress.split(',') @@ -17,8 +17,8 @@ export function configCompressPlugin( plugins.push( compressPlugin({ ext: '.gz', - deleteOriginFile - }) + deleteOriginFile, + }), ) } @@ -27,8 +27,8 @@ export function configCompressPlugin( compressPlugin({ ext: '.br', algorithm: 'brotliCompress', - deleteOriginFile - }) + deleteOriginFile, + }), ) } return plugins diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts index 6ea129c4..d35937f4 100644 --- a/build/vite/plugin/html.ts +++ b/build/vite/plugin/html.ts @@ -21,7 +21,7 @@ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) { inject: { // Inject data into ejs template data: { - title: VITE_GLOB_APP_TITLE + title: VITE_GLOB_APP_TITLE, }, // Embed the generated app.config.js file tags: isBuild @@ -29,12 +29,12 @@ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) { { tag: 'script', attrs: { - src: getAppConfigSrc() - } - } + src: getAppConfigSrc(), + }, + }, ] - : [] - } + : [], + }, }) return htmlPlugin } diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 5838adc6..ebcfa24d 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -1,20 +1,18 @@ -import { PluginOption } from 'vite' +import type { PluginOption } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import progress from 'vite-plugin-progress' import purgeIcons from 'vite-plugin-purge-icons' import VitePluginCertificate from 'vite-plugin-mkcert' +import UnoCSS from 'unocss/vite' +import { presetTypography, presetUno } from 'unocss' import { configPwaConfig } from './pwa' import { configHtmlPlugin } from './html' import { configCompressPlugin } from './compress' -import { configStyleImportPlugin } from './styleImport' import { configVisualizerConfig } from './visualizer' -import { configThemePlugin } from './theme' import { configSvgIconsPlugin } from './svgSprite' -import UnoCSS from 'unocss/vite' -import { presetTypography, presetUno } from 'unocss' -export async function createVitePlugins(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[] = [ @@ -24,13 +22,13 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { vueJsx(), // UnoCSS UnoCSS({ - presets: [presetUno(), presetTypography()] + presets: [presetUno(), presetTypography()], }), // 打包进度条 progress(), VitePluginCertificate({ - source: 'coding' - }) + source: 'coding', + }), ] // vite-vue-plugin-html @@ -45,13 +43,8 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { // rollup-plugin-visualizer vitePlugins.push(configVisualizerConfig()) - // vite-plugin-vben-theme - vitePlugins.push(configThemePlugin(isBuild)) - // 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/build/vite/plugin/pwa.ts b/build/vite/plugin/pwa.ts index a0970af6..b131c333 100644 --- a/build/vite/plugin/pwa.ts +++ b/build/vite/plugin/pwa.ts @@ -17,15 +17,15 @@ export function configPwaConfig(env: ViteEnv) { { src: './resource/img/pwa-192x192.png', sizes: '192x192', - type: 'image/png' + type: 'image/png', }, { src: './resource/img/pwa-512x512.png', sizes: '512x512', - type: 'image/png' - } - ] - } + type: 'image/png', + }, + ], + }, }) return pwaPlugin } diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts deleted file mode 100644 index 27b784f8..00000000 --- a/build/vite/plugin/styleImport.ts +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Introduces component library styles on demand. - * https://github.com/xingyuv/vite-plugin-style-import - */ -import { createStyleImportPlugin } from 'vite-plugin-style-import' - -export function configStyleImportPlugin(_isBuild: boolean) { - if (!_isBuild) { - return [] - } - const styleImportPlugin = createStyleImportPlugin({ - libs: [ - { - libraryName: 'ant-design-vue', - esModule: true, - resolveStyle: (name) => { - // 这里是无需额外引入样式文件的“子组件”列表 - const ignoreList = [ - 'anchor-link', - 'sub-menu', - 'menu-item', - 'menu-divider', - 'menu-item-group', - 'breadcrumb-item', - 'breadcrumb-separator', - 'form-item', - 'step', - 'select-option', - 'select-opt-group', - 'card-grid', - 'card-meta', - 'collapse-panel', - 'descriptions-item', - 'list-item', - 'list-item-meta', - 'table-column', - 'table-column-group', - 'tab-pane', - 'tab-content', - 'timeline-item', - 'tree-node', - 'skeleton-input', - 'skeleton-avatar', - 'skeleton-title', - 'skeleton-paragraph', - 'skeleton-image', - 'skeleton-button' - ] - // 这里是需要额外引入样式的子组件列表 - // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失 - const replaceList = { - textarea: 'input', - 'typography-text': 'typography', - 'typography-title': 'typography', - 'typography-paragraph': 'typography', - 'typography-link': 'typography', - 'dropdown-button': 'dropdown', - 'input-password': 'input', - 'input-search': 'input', - 'input-group': 'input', - 'radio-group': 'radio', - 'checkbox-group': 'checkbox', - 'layout-sider': 'layout', - 'layout-content': 'layout', - 'layout-footer': 'layout', - 'layout-header': 'layout', - 'month-picker': 'date-picker', - 'range-picker': 'date-picker', - 'image-preview-group': 'image' - } - - return ignoreList.includes(name) - ? '' - : replaceList.hasOwnProperty(name) - ? `ant-design-vue/es/${replaceList[name]}/style/index` - : `ant-design-vue/es/${name}/style/index` - } - } - ] - }) - return styleImportPlugin -} diff --git a/build/vite/plugin/svgSprite.ts b/build/vite/plugin/svgSprite.ts index f4d29b59..5b396800 100644 --- a/build/vite/plugin/svgSprite.ts +++ b/build/vite/plugin/svgSprite.ts @@ -3,16 +3,16 @@ * https://github.com/anncwb/vite-plugin-svg-icons */ +import path from 'node:path' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' -import path from 'path' -import { PluginOption } from 'vite' +import type { PluginOption } from 'vite' export function configSvgIconsPlugin(isBuild: boolean) { const svgIconsPlugin = createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], svgoOptions: isBuild, // default - symbolId: 'icon-[dir]-[name]' + symbolId: 'icon-[dir]-[name]', }) return svgIconsPlugin as PluginOption } diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts deleted file mode 100644 index e882efbe..00000000 --- a/build/vite/plugin/theme.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** - * Vite plugin for website theme color switching - * https://github.com/xingyuv/vite-vue-plugin-theme - */ -import type { PluginOption } from 'vite' -import path from 'path' -import { viteThemePlugin, antdDarkThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-vue-plugin-theme' -import { getThemeColors, generateColors } from '../../config/themeConfig' -import { generateModifyVars } from '../../generate/generateModifyVars' - -export function configThemePlugin(isBuild: boolean): PluginOption[] { - const colors = generateColors({ - mixDarken, - mixLighten, - tinycolor - }) - const plugin = [ - viteThemePlugin({ - resolveSelector: (s) => { - s = s.trim() - switch (s) { - case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon': - return '.ant-steps-item-icon > .ant-steps-icon' - case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)': - case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover': - case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active': - return s - case '.ant-steps-item-icon > .ant-steps-icon': - return s - case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)': - return s - default: - if (s.indexOf('.ant-btn') >= -1) { - // 按钮被重新定制过，需要过滤掉class防止覆盖 - return s - } - } - return s.startsWith('[data-theme') ? s : `[data-theme] ${s}` - }, - colorVariables: [...getThemeColors(), ...colors] - }), - antdDarkThemePlugin({ - preloadFiles: [ - path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'), - //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'), - path.resolve(process.cwd(), 'src/design/index.less') - ], - filter: (id) => (isBuild ? !id.endsWith('antd.less') : true), - // extractCss: false, - darkModifyVars: { - ...generateModifyVars(true), - 'text-color': '#c9d1d9', - 'primary-1': 'rgb(255 255 255 / 8%)', - 'text-color-base': '#c9d1d9', - 'component-background': '#151515', - 'heading-color': 'rgb(255 255 255 / 65%)', - // black: '#0e1117', - // #8b949e - 'text-color-secondary': '#8b949e', - 'border-color-base': '#303030', - // 'border-color-split': '#30363d', - 'item-active-bg': '#111b26', - 'app-content-background': '#1e1e1e', - 'tree-node-selected-bg': '#11263c', - - 'alert-success-border-color': '#274916', - 'alert-success-bg-color': '#162312', - 'alert-success-icon-color': '#49aa19', - 'alert-info-border-color': '#153450', - 'alert-info-bg-color': '#111b26', - 'alert-info-icon-color': '#177ddc', - 'alert-warning-border-color': '#594214', - 'alert-warning-bg-color': '#2b2111', - 'alert-warning-icon-color': '#d89614', - 'alert-error-border-color': '#58181c', - 'alert-error-bg-color': '#2a1215', - 'alert-error-icon-color': '#a61d24' - } - }) - ] - - return plugin as unknown as PluginOption[] -} diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts index f97b0121..eb392a52 100644 --- a/build/vite/plugin/visualizer.ts +++ b/build/vite/plugin/visualizer.ts @@ -2,8 +2,8 @@ * Package file volume analysis */ import visualizer from 'rollup-plugin-visualizer' +import type { PluginOption } from 'vite' import { isReportMode } from '../../utils' -import { PluginOption } from 'vite' export function configVisualizerConfig() { if (isReportMode()) { @@ -11,7 +11,7 @@ export function configVisualizerConfig() { filename: './node_modules/.cache/visualizer/stats.html', open: true, gzipSize: true, - brotliSize: true + brotliSize: true, }) as PluginOption } return [] diff --git a/build/vite/proxy.ts b/build/vite/proxy.ts index c12f12c7..4559b98e 100644 --- a/build/vite/proxy.ts +++ b/build/vite/proxy.ts @@ -22,12 +22,12 @@ export function createProxy(list: ProxyList = []) { // https://github.com/http-party/node-http-proxy#options ret[prefix] = { - target: target, + target, changeOrigin: true, ws: true, - rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), + rewrite: path => path.replace(new RegExp(`^${prefix}`), ''), // https is require secure=false - ...(isHttps ? { secure: false } : {}) + ...(isHttps ? { secure: false } : {}), } } return ret diff --git a/commitlint.config.js b/commitlint.config.js index 27b7a886..906d79e9 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -1,25 +1,25 @@ -const fs = require('fs') -const path = require('path') -const { execSync } = require('child_process') +const fs = require('node:fs') +const path = require('node:path') +const { execSync } = require('node:child_process') const scopes = fs .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true }) - .filter((dirent) => dirent.isDirectory()) - .map((dirent) => dirent.name.replace(/s$/, '')) + .filter(dirent => dirent.isDirectory()) + .map(dirent => dirent.name.replace(/s$/, '')) // precomputed scope const scopeComplete = execSync('git status --porcelain || true') .toString() .trim() .split('\n') - .find((r) => ~r.indexOf('M src')) + .find(r => ~r.indexOf('M src')) ?.replace(/(\/)/g, '%%') ?.match(/src%%((\w|-)*)/)?.[1] ?.replace(/s$/, '') /** @type {import('cz-git').UserConfig} */ module.exports = { - ignores: [(commit) => commit.includes('init')], + ignores: [commit => commit.includes('init')], extends: ['@commitlint/config-conventional'], rules: { 'body-leading-blank': [2, 'always'], @@ -31,8 +31,8 @@ module.exports = { 'type-enum': [ 2, 'always', - ['feat', 'fix', 'perf', 'style', 'docs', 'test', 'refactor', 'build', 'ci', 'chore', 'revert', 'wip', 'workflow', 'types', 'release'] - ] + ['feat', 'fix', 'perf', 'style', 'docs', 'test', 'refactor', 'build', 'ci', 'chore', 'revert', 'wip', 'workflow', 'types', 'release'], + ], }, prompt: { /** @use `yarn commit :f` */ @@ -41,7 +41,7 @@ module.exports = { r: 'docs: update README', s: 'style: update code format', b: 'build: bump dependencies', - c: 'chore: update config' + c: 'chore: update config', }, customScopesAlign: !scopeComplete ? 'top' : 'bottom', defaultScope: scopeComplete, @@ -53,7 +53,7 @@ module.exports = { typesAppend: [ { value: 'wip', name: 'wip: work in process' }, { value: 'workflow', name: 'workflow: workflow improvements' }, - { value: 'types', name: 'types: type definition file changes' } + { value: 'types', name: 'types: type definition file changes' }, ], // 中英文对照版 @@ -67,7 +67,7 @@ module.exports = { footerPrefixsSelect: '选择关联issue前缀 (可选):', customFooterPrefixs: '输入自定义issue前缀 :', footer: '列举关联issue (可选) 例如: #31, #I3244 :\n', - confirmCommit: '是否提交或修改commit ?' + confirmCommit: '是否提交或修改commit ?', }, types: [ { value: 'feat', name: 'feat: 新增功能' }, @@ -83,9 +83,9 @@ module.exports = { { value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' }, { value: 'wip', name: 'wip: 正在开发中' }, { value: 'workflow', name: 'workflow: 工作流程改进' }, - { value: 'types', name: 'types: 类型定义文件修改' } + { value: 'types', name: 'types: 类型定义文件修改' }, ], emptyScopesAlias: 'empty: 不填写', - customScopesAlias: 'custom: 自定义' - } + customScopesAlias: 'custom: 自定义', + }, } diff --git a/index.html b/index.html index 09e0d2c7..b8d6c2d9 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,13 @@
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue index 3b0fb23e..f3b3caef 100644 --- a/src/components/Application/src/AppProvider.vue +++ b/src/components/Application/src/AppProvider.vue @@ -1,5 +1,5 @@ diff --git a/src/components/Application/src/AppSizePicker.vue b/src/components/Application/src/AppSizePicker.vue index 6dd7ca02..ce9b3d9f 100644 --- a/src/components/Application/src/AppSizePicker.vue +++ b/src/components/Application/src/AppSizePicker.vue @@ -1,44 +1,29 @@ - + + diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 147ab705..005b2108 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,8 +1,8 @@ -import { withInstall } from '@/utils' import type { ExtractPropTypes } from 'vue' import button from './src/BasicButton.vue' import popConfirmButton from './src/PopConfirmButton.vue' -import { buttonProps } from './src/props' +import type { buttonProps } from './src/props' +import { withInstall } from '@/utils' export const Button = withInstall(button) export const PopConfirmButton = withInstall(popConfirmButton) diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue index d8e9ebde..d3521d4d 100644 --- a/src/components/Button/src/BasicButton.vue +++ b/src/components/Button/src/BasicButton.vue @@ -1,17 +1,8 @@ - + + diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue index d35b5318..22879ad5 100644 --- a/src/components/Button/src/PopConfirmButton.vue +++ b/src/components/Button/src/PopConfirmButton.vue @@ -1,9 +1,9 @@ diff --git a/src/components/Button/src/props.ts b/src/components/Button/src/props.ts index 448ce1d2..cdd74a3a 100644 --- a/src/components/Button/src/props.ts +++ b/src/components/Button/src/props.ts @@ -4,8 +4,8 @@ type ButtonColorType = (typeof validColors)[number] export const buttonProps = { color: { type: String as PropType, - validator: (v) => validColors.includes(v), - default: '' + validator: v => validColors.includes(v), + default: '', }, loading: { type: Boolean }, disabled: { type: Boolean }, @@ -22,5 +22,5 @@ export const buttonProps = { * @default: 14 */ iconSize: { type: Number, default: 14 }, - onClick: { type: Function as PropType<(...args) => any>, default: null } + onClick: { type: Function as PropType<(...args) => any>, default: null }, } diff --git a/src/components/CardList/index.ts b/src/components/CardList/index.ts index f87a1b9e..76166393 100644 --- a/src/components/CardList/index.ts +++ b/src/components/CardList/index.ts @@ -1,4 +1,4 @@ -import { withInstall } from '@/utils' import cardList from './src/CardList.vue' +import { withInstall } from '@/utils' export const CardList = withInstall(cardList) diff --git a/src/components/CardList/src/CardList.vue b/src/components/CardList/src/CardList.vue index 893daf4e..ccaa125f 100644 --- a/src/components/CardList/src/CardList.vue +++ b/src/components/CardList/src/CardList.vue @@ -1,22 +1,129 @@ + +