init

build/monacoEditor/index.ts

@@ -0,0 +1,4 @@
+import i18n from './main.i18n.json';
+import nlsPlugin, { Languages, esbuildPluginMonacoEditorNls } from './nls';
+
+export default { i18n, nlsPlugin, Languages, esbuildPluginMonacoEditorNls }

build/monacoEditor/nls/index.ts

@@ -0,0 +1,392 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Plugin } from 'vite'
+import MagicString from 'magic-string'
+
+export enum Languages {
+    bg = 'bg',
+    cs = 'cs',
+    de = 'de',
+    en_gb = 'en-gb',
+    es = 'es',
+    fr = 'fr',
+    hu = 'hu',
+    id = 'id',
+    it = 'it',
+    ja = 'ja',
+    ko = 'ko',
+    nl = 'nl',
+    pl = 'pl',
+    ps = 'ps',
+    pt_br = 'pt-br',
+    ru = 'ru',
+    tr = 'tr',
+    uk = 'uk',
+    zh_hans = 'zh-hans',
+    zh_hant = 'zh-hant',
+}
+
+export interface Options {
+    locale: Languages;
+    localeData?: Record<string, any>
+}
+
+/**
+ * 在vite中dev模式下会使用esbuild对node_modules进行预编译，导致找不到映射表中的filepath，
+ * 需要在预编译之前进行替换
+ * @param options 替换语言包
+ * @returns
+ */
+export function esbuildPluginMonacoEditorNls(options: Options): any {
+    options = Object.assign({ locale: Languages.en_gb }, options)
+    const CURRENT_LOCALE_DATA = getLocalizeMapping(options.locale, options.localeData)
+
+    return {
+        name: 'esbuild-plugin-monaco-editor-nls',
+        setup(build) {
+            build.onLoad({ filter: /esm[/\\]vs[/\\]nls\.js/ }, async () => {
+                return {
+                    contents: getLocalizeCode(CURRENT_LOCALE_DATA),
+                    loader: 'js',
+                }
+            })
+
+            build.onLoad(
+                { filter: /monaco-editor[/\\]esm[/\\]vs.+\.js/ },
+                async args => {
+                    return {
+                        contents: transformLocalizeFuncCode(
+                            args.path,
+                            CURRENT_LOCALE_DATA,
+                        ),
+                        loader: 'js',
+                    }
+                },
+            )
+        },
+    }
+}
+
+/**
+ * 使用了monaco-editor-nls的语言映射包，把原始localize(data, message)的方法，替换成了localize(path, data, defaultMessage)
+ * vite build 模式下，使用rollup处理
+ * @param options 替换语言包
+ * @returns
+ */
+export default function (options: Options): Plugin {
+    options = Object.assign({ locale: Languages.en_gb }, options)
+    const CURRENT_LOCALE_DATA = getLocalizeMapping(options.locale, options.localeData)
+
+    return {
+        name: 'rollup-plugin-monaco-editor-nls',
+
+        enforce: 'pre',
+
+        load(filepath) {
+            if (/esm[/\\]vs[/\\]nls\.js/.test(filepath)) {
+
+                return getLocalizeCode(CURRENT_LOCALE_DATA)
+            }
+        },
+        transform(code, filepath) {
+            if (
+                /monaco-editor[/\\]esm[/\\]vs.+\.js/.test(filepath)
+                && !/esm[/\\]vs[/\\].*nls\.js/.test(filepath)
+            ) {
+                const re = /monaco-editor[/\\]esm[/\\](.+)(?=\.js)/
+                if (re.exec(filepath) && code.includes('localize(')) {
+                    let path = RegExp.$1
+                    path = path.replaceAll('\\', '/')
+                    code = code.replace(/localize\(/g, `localize('${path}', `)
+
+                    return {
+                        code: code,
+
+                        /** 使用magic-string 生成 source map */
+                        map: new MagicString(code).generateMap({
+                            includeContent: true,
+                            hires: true,
+                            source: filepath,
+                        }),
+                    }
+                }
+            }
+        },
+    }
+}
+
+/**
+ * 替换调用方法接口参数，替换成相应语言包语言
+ * @param filepath 路径
+ * @param CURRENT_LOCALE_DATA 替换规则
+ * @returns
+ */
+function transformLocalizeFuncCode(
+    filepath: string,
+    _CURRENT_LOCALE_DATA: string,
+) {
+    let code = fs.readFileSync(filepath, 'utf8')
+    const re = /monaco-editor[/\\]esm[/\\](.+)(?=\.js)/
+    if (re.exec(filepath)) {
+        let path = RegExp.$1
+        path = path.replaceAll('\\', '/')
+        code = code.replace(/localize\(/g, `localize('${path}', `)
+    }
+
+    return code
+}
+
+/**
+ * 获取语言包
+ * @param locale 语言
+ * @param localeData
+ * @returns
+ */
+function getLocalizeMapping(locale: Languages, localeData: Record<string, any> | undefined = undefined) {
+    if (localeData) return JSON.stringify(localeData)
+    const locale_data_path = path.join(__dirname, `./locale/${locale}.json`)
+
+    return fs.readFileSync(locale_data_path) as unknown as string
+}
+
+/**
+ * 替换代码
+ * @param CURRENT_LOCALE_DATA 语言包
+ * @returns
+ */
+function getLocalizeCode(CURRENT_LOCALE_DATA: string) {
+    return `
+    /* ---------------------------------------------------------------------------------------------
+    *  Copyright (c) Microsoft Corporation. All rights reserved.
+    *  Licensed under the MIT License. See License.txt in the project root for license information.
+    *--------------------------------------------------------------------------------------------*/
+   let isPseudo = typeof document !== 'undefined' && document.location && document.location.hash.indexOf('pseudo=true') >= 0
+   const DEFAULT_TAG = 'i-default'
+   function _format(message, args) {
+       let result
+       if (args.length === 0) {
+           result = message
+       } else {
+           result = message.replace(/{(\\d+)}/g, (match, rest) => {
+               const index = rest[0]
+               const arg = args[index]
+               let result = match
+               if (typeof arg === 'string') {
+                   result = arg
+               } else if (typeof arg === 'number' || typeof arg === 'boolean' || arg === void 0 || arg === null) {
+                   result = String(arg)
+               }
+   
+               return result
+           })
+       }
+       if (isPseudo) {
+   
+           // FF3B and FF3D is the Unicode zenkaku representation for [ and ]
+           result = \`\uFF3B\${result.replace(/[aeiou]/g, '$&$&')}\uFF3D\`
+       }
+   
+       return result
+   }
+   function findLanguageForModule(config, name) {
+       let result = config[name]
+       if (result) {
+           return result
+       }
+       result = config['*']
+       if (result) {
+           return result
+       }
+   
+       return null
+   }
+   function endWithSlash(path) {
+       if (path.charAt(path.length - 1) === '/') {
+           return path
+       }
+   
+       return \`\${path}/\`
+   }
+   async function getMessagesFromTranslationsService(translationServiceUrl, language, name) {
+       const url = \`\${endWithSlash(translationServiceUrl) + endWithSlash(language)}vscode/\${endWithSlash(name)}\`
+       const res = await fetch(url)
+       if (res.ok) {
+           const messages = await res.json()
+   
+           return messages
+       }
+       throw new Error(\`\${res.status} - \${res.statusText}\`)
+   }
+   function createScopedLocalize(scope) {
+       return function(idx, defaultValue) {
+           const restArgs = Array.prototype.slice.call(arguments, 2)
+   
+           return _format(scope[idx], restArgs)
+       }
+   }
+   function createScopedLocalize2(scope) {
+       return (idx, defaultValue, ...args) => ({
+           value: _format(scope[idx], args),
+           original: _format(defaultValue, args),
+       })
+   }
+   
+   // export function localize(data, message, ...args) {
+   //     return _format(message, args);
+   // }
+
+// ------------------------invoke----------------------------------------
+    export function localize(path, data, defaultMessage, ...args) {
+        var key = typeof data === 'object' ? data.key : data;
+        var data = ${CURRENT_LOCALE_DATA} || {};
+        var message = (data[path] || data?.contents?.[path] || {})[key];
+        if (!message) {
+            message = defaultMessage;
+        }
+        return _format(message, args);
+    }
+// ------------------------invoke----------------------------------------
+
+   /**
+    * @skipMangle
+    */
+   export function localize2(data, message, ...args) {
+       const original = _format(message, args)
+   
+       return {
+           value: original,
+           original,
+       }
+   }
+   
+   /**
+    * @skipMangle
+    */
+   export function getConfiguredDefaultLocale(_) {
+   
+       // This returns undefined because this implementation isn't used and is overwritten by the loader
+       // when loaded.
+       return undefined
+   }
+   
+   /**
+    * @skipMangle
+    */
+   export function setPseudoTranslation(value) {
+       isPseudo = value
+   }
+   
+   /**
+    * Invoked in a built product at run-time
+    * @skipMangle
+    */
+   export function create(key, data) {
+       var _a
+   
+       return {
+           localize: createScopedLocalize(data[key]),
+           localize2: createScopedLocalize2(data[key]),
+           getConfiguredDefaultLocale: (_a = data.getConfiguredDefaultLocale) !== null && _a !== void 0 ? _a : _ => undefined,
+       }
+   }
+   
+   /**
+    * Invoked by the loader at run-time
+    * @skipMangle
+    */
+   export function load(name, req, load, config) {
+       var _a
+       const pluginConfig = (_a = config['vs/nls']) !== null && _a !== void 0 ? _a : {}
+       if (!name || name.length === 0) {
+   
+           // TODO: We need to give back the mangled names here
+           return load({
+               localize: localize,
+               localize2: localize2,
+               getConfiguredDefaultLocale: () => {
+                   var _a
+   
+                   return (_a = pluginConfig.availableLanguages) === null || _a === void 0 ? void 0 : _a['*'] 
+               },
+           })
+       }
+       const language = pluginConfig.availableLanguages ? findLanguageForModule(pluginConfig.availableLanguages, name) : null
+       const useDefaultLanguage = language === null || language === DEFAULT_TAG
+       let suffix = '.nls'
+       if (!useDefaultLanguage) {
+           suffix = \`\${suffix}.\${language}\`
+       }
+       const messagesLoaded = messages => {
+           if (Array.isArray(messages)) {
+               messages.localize = createScopedLocalize(messages)
+               messages.localize2 = createScopedLocalize2(messages)
+           } else {
+               messages.localize = createScopedLocalize(messages[name])
+               messages.localize2 = createScopedLocalize2(messages[name])
+           }
+           messages.getConfiguredDefaultLocale = () => {
+               var _a
+   
+               return (_a = pluginConfig.availableLanguages) === null || _a === void 0 ? void 0 : _a['*'] 
+           }
+           load(messages)
+       }
+       if (typeof pluginConfig.loadBundle === 'function') {
+           pluginConfig.loadBundle(name, language, (err, messages) => {
+   
+               // We have an error. Load the English default strings to not fail
+               if (err) {
+                   req([\`\${name}.nls\`], messagesLoaded)
+               } else {
+                   messagesLoaded(messages)
+               }
+           })
+       } else if (pluginConfig.translationServiceUrl && !useDefaultLanguage) {
+           (async() => {
+               var _a
+               try {
+                   const messages = await getMessagesFromTranslationsService(pluginConfig.translationServiceUrl, language, name)
+   
+                   return messagesLoaded(messages)
+               } catch (err) {
+   
+                   // Language is already as generic as it gets, so require default messages
+                   if (!language.includes('-')) {
+                       console.error(err)
+   
+                       return req([\`\${name}.nls\`], messagesLoaded)
+                   }
+                   try {
+   
+                       // Since there is a dash, the language configured is a specific sub-language of the same generic language.
+                       // Since we were unable to load the specific language, try to load the generic language. Ex. we failed to find a
+                       // Swiss German (de-CH), so try to load the generic German (de) messages instead.
+                       const genericLanguage = language.split('-')[0]
+                       const messages = await getMessagesFromTranslationsService(pluginConfig.translationServiceUrl, genericLanguage, name);
+   
+                       // We got some messages, so we configure the configuration to use the generic language for this session.
+                       (_a = pluginConfig.availableLanguages) !== null && _a !== void 0 ? _a : pluginConfig.availableLanguages = {}
+                       pluginConfig.availableLanguages['*'] = genericLanguage
+   
+                       return messagesLoaded(messages)
+                   } catch (err) {
+                       console.error(err)
+   
+                       return req([\`\${name}.nls\`], messagesLoaded)
+                   }
+               }
+           })()
+       } else {
+           req([name + suffix], messagesLoaded, err => {
+               if (suffix === '.nls') {
+                   console.error('Failed trying to load default language strings', err)
+   
+                   return
+               }
+               console.error(\`Failed to load message bundle for language \${language}. Falling back to the default language:\`, err)
+               req([\`\${name}.nls\`], messagesLoaded)
+           })
+       }
+   }  
+    `
+}

build/vite/index.ts

@@ -0,0 +1,124 @@
+import { resolve } from 'path'
+import Vue from '@vitejs/plugin-vue'
+import VueJsx from '@vitejs/plugin-vue-jsx'
+import progress from 'vite-plugin-progress'
+import EslintPlugin from 'vite-plugin-eslint'
+import PurgeIcons from 'vite-plugin-purge-icons'
+import { ViteEjsPlugin } from 'vite-plugin-ejs'
+// @ts-ignore
+import ElementPlus from 'unplugin-element-plus/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import viteCompression from 'vite-plugin-compression'
+import topLevelAwait from 'vite-plugin-top-level-await'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import UnoCSS from 'unocss/vite'
+
+// vs code 编辑器配置
+import monacoEditorPlugin from 'vite-plugin-monaco-editor'
+import MEditor from '../monacoEditor';
+
+import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'
+
+export function createVitePlugins() {
+  const root = process.cwd()
+
+  // 路径查找
+  function pathResolve(dir: string) {
+    return resolve(root, '.', dir)
+  }
+
+  return [
+    Vue(),
+    VueJsx(),
+    UnoCSS(),
+    progress(),
+    PurgeIcons(),
+    ElementPlus({}),
+    AutoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/,
+        /\.vue\?vue/, // .vue
+        /\.md$/ // .md
+      ],
+      imports: [
+        'vue',
+        'vue-router',
+        // 可额外添加需要 autoImport 的组件
+        {
+          '@/hooks/web/useI18n': ['useI18n'],
+          '@/hooks/web/useMessage': ['useMessage'],
+          '@/utils/formRules': ['required'],
+          '@/utils/dict': ['DICT_TYPE'],
+          '@/hooks/design/useCrudHeight': ['useCrudHeight'],
+          '@/hooks/design/useCrudPermi': ['useCrudPermi'],
+        }
+      ],
+      dts: 'src/types/auto-imports.d.ts',
+      resolvers: [ElementPlusResolver(), IconsResolver({ prefix: 'Icon', })],
+      eslintrc: {
+        enabled: false, // Default `false`
+        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+      }
+    }),
+    Components({
+      // 生成自定义 `auto-components.d.ts` 全局声明
+      dts: 'src/types/auto-components.d.ts',
+      // 自定义组件的解析器
+      resolvers: [ElementPlusResolver(), IconsResolver({ enabledCollections: ['ep'] })],
+      globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**', '!src/components/LowFormDesign/components']
+    }),
+    Icons({
+      autoInstall: true,
+    }),
+    EslintPlugin({
+      cache: false,
+      include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
+    }),
+    VueI18nPlugin({
+      runtimeOnly: true,
+      compositionOnly: true,
+      include: [resolve(__dirname, 'src/locales/**')]
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [pathResolve('src/assets/svgs')],
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: true
+    }),
+    viteCompression({
+      verbose: true, // 是否在控制台输出压缩结果
+      disable: false, // 是否禁用
+      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
+      algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
+      ext: '.gz', // 生成的压缩包后缀
+      deleteOriginFile: false //压缩后是否删除源文件
+    }),
+    ViteEjsPlugin(),
+    topLevelAwait({
+      // https://juejin.cn/post/7152191742513512485
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: (i) => `__tla_${i}`
+    }),
+    monacoEditorPlugin({
+      languageWorkers: ['editorWorkerService', 'typescript', 'json', 'css']
+    }),
+    lazyImport({
+      resolvers: [
+        VxeResolver({ libraryName: 'vxe-table' }),
+        VxeResolver({ libraryName: 'vxe-pc-ui' })
+      ]
+    }),
+    MEditor.nlsPlugin({ //monacoEditor汉化
+      locale: MEditor.Languages.zh_hans,
+      localeData: MEditor.i18n,
+    }),
+  ]
+}

build/vite/optimize.ts

@@ -0,0 +1,154 @@
+import MEditor from '../monacoEditor';
+
+const include = [
+  'qs',
+  'url',
+  'vue',
+  'sass',
+  'mitt',
+  'axios',
+  'pinia',
+  'dayjs',
+  'qrcode',
+  'unocss',
+  'vue-router',
+  'vue-types',
+  'vue-i18n',
+  'crypto-js',
+  'cropperjs',
+  'lodash-es',
+  'nprogress',
+  'web-storage-cache',
+  '@iconify/iconify',
+  '@vueuse/core',
+  '@zxcvbn-ts/core',
+  'echarts/core',
+  'echarts/charts',
+  'echarts/components',
+  'echarts/renderers',
+  'echarts-wordcloud',
+  '@wangeditor/editor',
+  '@wangeditor/editor-for-vue',
+  'element-plus',
+  'element-plus/es',
+  'element-plus/es/locale/lang/zh-cn',
+  'element-plus/es/locale/lang/en',
+  'element-plus/es/components/avatar/style/css',
+  'element-plus/es/components/space/style/css',
+  'element-plus/es/components/backtop/style/css',
+  'element-plus/es/components/form/style/css',
+  'element-plus/es/components/radio-group/style/css',
+  'element-plus/es/components/radio/style/css',
+  'element-plus/es/components/checkbox/style/css',
+  'element-plus/es/components/checkbox-group/style/css',
+  'element-plus/es/components/switch/style/css',
+  'element-plus/es/components/time-picker/style/css',
+  'element-plus/es/components/date-picker/style/css',
+  'element-plus/es/components/descriptions/style/css',
+  'element-plus/es/components/descriptions-item/style/css',
+  'element-plus/es/components/link/style/css',
+  'element-plus/es/components/tooltip/style/css',
+  'element-plus/es/components/drawer/style/css',
+  'element-plus/es/components/dialog/style/css',
+  'element-plus/es/components/checkbox-button/style/css',
+  'element-plus/es/components/option-group/style/css',
+  'element-plus/es/components/radio-button/style/css',
+  'element-plus/es/components/cascader/style/css',
+  'element-plus/es/components/color-picker/style/css',
+  'element-plus/es/components/input-number/style/css',
+  'element-plus/es/components/rate/style/css',
+  'element-plus/es/components/select-v2/style/css',
+  'element-plus/es/components/tree-select/style/css',
+  'element-plus/es/components/slider/style/css',
+  'element-plus/es/components/time-select/style/css',
+  'element-plus/es/components/autocomplete/style/css',
+  'element-plus/es/components/image-viewer/style/css',
+  'element-plus/es/components/upload/style/css',
+  'element-plus/es/components/col/style/css',
+  'element-plus/es/components/form-item/style/css',
+  'element-plus/es/components/alert/style/css',
+  'element-plus/es/components/select/style/css',
+  'element-plus/es/components/input/style/css',
+  'element-plus/es/components/breadcrumb-item/style/css',
+  'element-plus/es/components/tag/style/css',
+  'element-plus/es/components/pagination/style/css',
+  'element-plus/es/components/table/style/css',
+  'element-plus/es/components/table-v2/style/css',
+  'element-plus/es/components/table-column/style/css',
+  'element-plus/es/components/card/style/css',
+  'element-plus/es/components/row/style/css',
+  'element-plus/es/components/button/style/css',
+  'element-plus/es/components/menu/style/css',
+  'element-plus/es/components/sub-menu/style/css',
+  'element-plus/es/components/menu-item/style/css',
+  'element-plus/es/components/option/style/css',
+  'element-plus/es/components/dropdown/style/css',
+  'element-plus/es/components/dropdown-menu/style/css',
+  'element-plus/es/components/dropdown-item/style/css',
+  'element-plus/es/components/skeleton/style/css',
+  'element-plus/es/components/tree/style/css',
+  'element-plus/es/components/badge/style/css',
+  'element-plus/es/components/breadcrumb/style/css',
+  'element-plus/es/components/image/style/css',
+  'element-plus/es/components/collapse-transition/style/css',
+  'element-plus/es/components/timeline/style/css',
+  'element-plus/es/components/timeline-item/style/css',
+  'element-plus/es/components/collapse/style/css',
+  'element-plus/es/components/collapse-item/style/css',
+  'element-plus/es/components/button-group/style/css',
+  'element-plus/es/components/text/style/css',
+  'element-plus/es/components/header/style/css',
+  'element-plus/es/components/popconfirm/style/css',
+  'element-plus/es/components/empty/style/css',
+  'element-plus/es/components/loading/style/css',
+  'element-plus/es/components/container/style/css',
+  'element-plus/es/components/main/style/css',
+  'element-plus/es/components/aside/style/css',
+  'element-plus/es/components/progress/style/css',
+  'element-plus/es/components/steps/style/css',
+  'element-plus/es/components/step/style/css',
+  '@smallwei/avue',
+  '@smallwei/avue/lib/index.css',
+  'monaco-editor/esm/vs/editor/editor.main',
+  'vxe-table/es/vxe-ui/index.js',
+  '@kangc/v-md-editor',
+  '@kangc/v-md-editor/lib/preview',
+  '@kangc/v-md-editor/lib/style/preview.css',
+  '@kangc/v-md-editor/lib/theme/github.js',
+  '@kangc/v-md-editor/lib/theme/style/github.css',
+  'highlight',
+  '@kangc/v-md-editor/lib/codemirror-editor',
+  '@kangc/v-md-editor/lib/style/codemirror-editor.css',
+  '@kangc/v-md-editor/lib/plugins/todo-list/index',
+  '@kangc/v-md-editor/lib/plugins/todo-list/todo-list.css',
+  '@kangc/v-md-editor/lib/plugins/tip/index',
+  '@kangc/v-md-editor/lib/plugins/tip/tip.css',
+  'codemirror',
+  'codemirror/mode/markdown/markdown',
+  'codemirror/mode/javascript/javascript',
+  'codemirror/mode/css/css',
+  'codemirror/mode/htmlmixed/htmlmixed',
+  'codemirror/mode/vue/vue',
+  'codemirror/addon/edit/closebrackets',
+  'codemirror/addon/edit/closetag',
+  'codemirror/addon/edit/matchbrackets',
+  'codemirror/addon/display/placeholder',
+  'codemirror/addon/selection/active-line',
+  'codemirror/addon/scroll/simplescrollbars',
+  'codemirror/addon/scroll/simplescrollbars.css',
+  'codemirror/lib/codemirror.css',
+]
+
+const exclude = ['@iconify/json']
+
+const esbuildOptions = {
+  plugins: [
+    //monacoEditor汉化
+    MEditor.esbuildPluginMonacoEditorNls({
+      locale: MEditor.Languages.zh_hans,
+      localeData: MEditor.i18n,
+    }),
+  ],
+}
+
+export { include, exclude, esbuildOptions }