chore: improve icon-picker logic

CHANGELOG.zh_CN.md

@@ -7,7 +7,7 @@
 ### ✨ Features
 
 - axios 支持 form-data 格式请求
-- 新增图标选择器组件
+- 新增图标选择器组件(支持本地和在线方式)
 - 新增修改密码界面
 - 新增部门管理示例界面
 - 新增 WebSocket 示例和服务脚本

build/gen/generateIconJson.ts

@@ -19,34 +19,50 @@ async function generateIcon() {
   inquirer
     .prompt([
       {
-        type: 'checkbox',
+        type: 'list',
+        name: 'useType',
+        choices: [
+          { key: 'local', value: 'local', name: 'Local' },
+          { key: 'onLine', value: 'onLine', name: 'OnLine' },
+        ],
+        message: 'How to use icons?',
+      },
+      {
+        type: 'list',
         name: 'iconSet',
         choices: choices,
         message: 'Select the icon set that needs to be generated?',
-        default: true,
       },
       {
         type: 'input',
         name: 'output',
         message: 'Select the icon set that needs to be generated?',
-        default: 'src/components/Icon/json',
+        default: 'src/components/Icon/data',
       },
     ])
     .then(async (answers) => {
-      const { iconSet, output } = answers;
+      const { iconSet, output, useType } = answers;
       const outputDir = path.resolve(process.cwd(), output);
       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 icons = Object.keys(data.icons).map((item) => `${prefix}:${item}`);
-          await fs.writeJSON(path.join(output, `${prefix}-info.json`), icons);
+          const isLocal = useType === 'local';
+          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 })}`
+          );
           prefixSet.push(prefix);
         }
       }
+      fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
       console.log(
         `✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`
       );

package.json

@@ -41,7 +41,7 @@
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
-    "vditor": "^3.8.1",
+    "vditor": "^3.8.2",
     "vue": "^3.0.7",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.4",
@@ -82,11 +82,11 @@
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.6.0",
+    "eslint-plugin-vue": "^7.7.0",
     "esno": "^0.4.5",
     "fs-extra": "^9.1.0",
     "http-server": "^0.12.3",
-    "husky": "^5.1.2",
+    "husky": "^5.1.3",
     "inquirer": "^8.0.0",
     "is-ci": "^3.0.0",
     "less": "^4.1.1",
@@ -105,19 +105,18 @@
     "vite-plugin-compression": "^0.2.3",
     "vite-plugin-html": "^2.0.3",
     "vite-plugin-imagemin": "^0.2.9",
-    "vite-plugin-mock": "^2.1.5",
+    "vite-plugin-mock": "^2.2.0",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.7.6",
     "vite-plugin-theme": "^0.4.8",
     "vite-plugin-windicss": "0.6.2",
-    "vue-eslint-parser": "^7.5.0",
+    "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
-    "bin-wrapper": "npm:bin-wrapper-china",
-    "ecstatic": "4.1.4"
+    "bin-wrapper": "npm:bin-wrapper-china"
   },
   "repository": {
     "type": "git",

src/components/Icon/index.ts

 import Icon from './src/index.vue';
-import IconPicker from './src/IconPicker.vue';
+// import IconPicker from './src/IconPicker.vue';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+const IconPicker = createAsyncComponent(() => import('./src/IconPicker.vue'));
 
 export { Icon, IconPicker };
 

src/components/Icon/src/IconPicker.vue

@@ -34,6 +34,7 @@
                   class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:bg-primary hover:text-white"
                   @click="handleClick(icon)"
                 >
+                  <!-- <Icon :icon="icon" :prefix="prefix" /> -->
                   <Icon :icon="icon" />
                 </li>
               </ul>
@@ -66,14 +67,28 @@
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
   import Icon from './index.vue';
 
-  import icons from '../json/ion-info.json';
+  import iconsData from '../data/icons.data';
   import { propTypes } from '/@/utils/propTypes';
   import { usePagination } from '/@/hooks/web/usePagination';
   import { useDebounce } from '/@/hooks/core/useDebounce';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
+  // import '@iconify/iconify';
+
+  function getIcons() {
+    const data = iconsData as any;
+    const prefix: string = data?.prefix ?? '';
+    let result: string[] = [];
+    if (prefix) {
+      result = (data?.icons ?? []).map((item) => `${prefix}:${item}`);
+    } else if (Array.isArray(iconsData)) {
+      result = iconsData as string[];
+    }
+    return result;
+  }
 
+  const icons = getIcons();
   export default defineComponent({
     name: 'IconPicker',
     components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty },

src/components/Icon/src/index.vue

@@ -46,7 +46,6 @@
           const icon = unref(getIconRef);
           if (!icon) return;
           const svg = Iconify.renderSVG(icon, {});
-
           if (svg) {
             el.textContent = '';
             el.appendChild(svg);

src/locales/lang/en.ts

 import { genMessage } from '../helper';
-const modules = import.meta.globEager('./en/**/*.ts');
 import antdLocale from 'ant-design-vue/es/locale/en_US';
 import momentLocale from 'moment/dist/locale/eu';
 
+const modules = import.meta.globEager('./en/**/*.ts');
 export default {
   message: {
     ...genMessage(modules, 'en'),

src/locales/lang/zh_CN.ts

 import { genMessage } from '../helper';
-const modules = import.meta.globEager('./zh_CN/**/*.ts');
 import antdLocale from 'ant-design-vue/es/locale/zh_CN';
 import momentLocale from 'moment/dist/locale/zh-cn';
 
+const modules = import.meta.globEager('./zh_CN/**/*.ts');
 export default {
   message: {
     ...genMessage(modules, 'zh_CN'),

src/locales/setupI18n.ts

@@ -13,7 +13,7 @@ export let i18n: ReturnType<typeof createI18n>;
 async function createI18nOptions(): Promise<I18nOptions> {
   const locale = localeStore.getLocale;
   const defaultLocal = await import(`./lang/${locale}.ts`);
-  const message = defaultLocal.default?.message;
+  const message = defaultLocal.default?.message ?? {};
 
   return {
     legacy: false,

src/router/helper/routeHelper.ts

@@ -19,7 +19,6 @@ let dynamicViewsModules: Record<
 // 动态引入
 function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
   dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
-
   if (!routes) return;
   routes.forEach((item) => {
     const { component, name } = item;

vite.config.ts

@@ -52,6 +52,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
 
     build: {
+      // minify: 'esbuild',
       outDir: OUTPUT_DIR,
       polyfillDynamicImport: VITE_LEGACY,
       terserOptions: {