提交 d67bd496 作者: Vben

chore: improve icon-picker logic

上级 e5b2cc1e
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
### ✨ Features ### ✨ Features
- axios 支持 form-data 格式请求 - axios 支持 form-data 格式请求
- 新增图标选择器组件 - 新增图标选择器组件(支持本地和在线方式)
- 新增修改密码界面 - 新增修改密码界面
- 新增部门管理示例界面 - 新增部门管理示例界面
- 新增 WebSocket 示例和服务脚本 - 新增 WebSocket 示例和服务脚本
......
...@@ -19,34 +19,50 @@ async function generateIcon() { ...@@ -19,34 +19,50 @@ async function generateIcon() {
inquirer inquirer
.prompt([ .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', name: 'iconSet',
choices: choices, choices: choices,
message: 'Select the icon set that needs to be generated?', message: 'Select the icon set that needs to be generated?',
default: true,
}, },
{ {
type: 'input', type: 'input',
name: 'output', name: 'output',
message: 'Select the icon set that needs to be generated?', message: 'Select the icon set that needs to be generated?',
default: 'src/components/Icon/json', default: 'src/components/Icon/data',
}, },
]) ])
.then(async (answers) => { .then(async (answers) => {
const { iconSet, output } = answers; const { iconSet, output, useType } = answers;
const outputDir = path.resolve(process.cwd(), output); const outputDir = path.resolve(process.cwd(), output);
fs.ensureDir(outputDir); fs.ensureDir(outputDir);
const genCollections = collections.filter((item) => iconSet.includes(item.id)); const genCollections = collections.filter((item) => [iconSet].includes(item.id));
const prefixSet: string[] = []; const prefixSet: string[] = [];
for (const info of genCollections) { for (const info of genCollections) {
const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`)); const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
if (data) { if (data) {
const { prefix } = data; const { prefix } = data;
const icons = Object.keys(data.icons).map((item) => `${prefix}:${item}`); const isLocal = useType === 'local';
await fs.writeJSON(path.join(output, `${prefix}-info.json`), icons); 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); prefixSet.push(prefix);
} }
} }
fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
console.log( console.log(
`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]` `✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`
); );
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"sortablejs": "^1.13.0", "sortablejs": "^1.13.0",
"vditor": "^3.8.1", "vditor": "^3.8.2",
"vue": "^3.0.7", "vue": "^3.0.7",
"vue-i18n": "^9.0.0", "vue-i18n": "^9.0.0",
"vue-router": "^4.0.4", "vue-router": "^4.0.4",
...@@ -82,11 +82,11 @@ ...@@ -82,11 +82,11 @@
"eslint": "^7.21.0", "eslint": "^7.21.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.3.1", "eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.6.0", "eslint-plugin-vue": "^7.7.0",
"esno": "^0.4.5", "esno": "^0.4.5",
"fs-extra": "^9.1.0", "fs-extra": "^9.1.0",
"http-server": "^0.12.3", "http-server": "^0.12.3",
"husky": "^5.1.2", "husky": "^5.1.3",
"inquirer": "^8.0.0", "inquirer": "^8.0.0",
"is-ci": "^3.0.0", "is-ci": "^3.0.0",
"less": "^4.1.1", "less": "^4.1.1",
...@@ -105,19 +105,18 @@ ...@@ -105,19 +105,18 @@
"vite-plugin-compression": "^0.2.3", "vite-plugin-compression": "^0.2.3",
"vite-plugin-html": "^2.0.3", "vite-plugin-html": "^2.0.3",
"vite-plugin-imagemin": "^0.2.9", "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-purge-icons": "^0.7.0",
"vite-plugin-pwa": "^0.5.6", "vite-plugin-pwa": "^0.5.6",
"vite-plugin-style-import": "^0.7.6", "vite-plugin-style-import": "^0.7.6",
"vite-plugin-theme": "^0.4.8", "vite-plugin-theme": "^0.4.8",
"vite-plugin-windicss": "0.6.2", "vite-plugin-windicss": "0.6.2",
"vue-eslint-parser": "^7.5.0", "vue-eslint-parser": "^7.6.0",
"yargs": "^16.2.0" "yargs": "^16.2.0"
}, },
"resolutions": { "resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it", "//": "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", "bin-wrapper": "npm:bin-wrapper-china"
"ecstatic": "4.1.4"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
import Icon from './src/index.vue'; 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 }; export { Icon, IconPicker };
......
...@@ -34,6 +34,7 @@ ...@@ -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" 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)" @click="handleClick(icon)"
> >
<!-- <Icon :icon="icon" :prefix="prefix" /> -->
<Icon :icon="icon" /> <Icon :icon="icon" />
</li> </li>
</ul> </ul>
...@@ -66,14 +67,28 @@ ...@@ -66,14 +67,28 @@
import { Input, Popover, Pagination, Empty } from 'ant-design-vue'; import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import Icon from './index.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 { propTypes } from '/@/utils/propTypes';
import { usePagination } from '/@/hooks/web/usePagination'; import { usePagination } from '/@/hooks/web/usePagination';
import { useDebounce } from '/@/hooks/core/useDebounce'; import { useDebounce } from '/@/hooks/core/useDebounce';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useMessage } from '/@/hooks/web/useMessage'; 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({ export default defineComponent({
name: 'IconPicker', name: 'IconPicker',
components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty }, components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty },
......
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
const icon = unref(getIconRef); const icon = unref(getIconRef);
if (!icon) return; if (!icon) return;
const svg = Iconify.renderSVG(icon, {}); const svg = Iconify.renderSVG(icon, {});
if (svg) { if (svg) {
el.textContent = ''; el.textContent = '';
el.appendChild(svg); el.appendChild(svg);
......
import { genMessage } from '../helper'; import { genMessage } from '../helper';
const modules = import.meta.globEager('./en/**/*.ts');
import antdLocale from 'ant-design-vue/es/locale/en_US'; import antdLocale from 'ant-design-vue/es/locale/en_US';
import momentLocale from 'moment/dist/locale/eu'; import momentLocale from 'moment/dist/locale/eu';
const modules = import.meta.globEager('./en/**/*.ts');
export default { export default {
message: { message: {
...genMessage(modules, 'en'), ...genMessage(modules, 'en'),
......
import { genMessage } from '../helper'; import { genMessage } from '../helper';
const modules = import.meta.globEager('./zh_CN/**/*.ts');
import antdLocale from 'ant-design-vue/es/locale/zh_CN'; import antdLocale from 'ant-design-vue/es/locale/zh_CN';
import momentLocale from 'moment/dist/locale/zh-cn'; import momentLocale from 'moment/dist/locale/zh-cn';
const modules = import.meta.globEager('./zh_CN/**/*.ts');
export default { export default {
message: { message: {
...genMessage(modules, 'zh_CN'), ...genMessage(modules, 'zh_CN'),
......
...@@ -13,7 +13,7 @@ export let i18n: ReturnType<typeof createI18n>; ...@@ -13,7 +13,7 @@ export let i18n: ReturnType<typeof createI18n>;
async function createI18nOptions(): Promise<I18nOptions> { async function createI18nOptions(): Promise<I18nOptions> {
const locale = localeStore.getLocale; const locale = localeStore.getLocale;
const defaultLocal = await import(`./lang/${locale}.ts`); const defaultLocal = await import(`./lang/${locale}.ts`);
const message = defaultLocal.default?.message; const message = defaultLocal.default?.message ?? {};
return { return {
legacy: false, legacy: false,
......
...@@ -19,7 +19,6 @@ let dynamicViewsModules: Record< ...@@ -19,7 +19,6 @@ let dynamicViewsModules: Record<
// 动态引入 // 动态引入
function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) { function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}'); dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
if (!routes) return; if (!routes) return;
routes.forEach((item) => { routes.forEach((item) => {
const { component, name } = item; const { component, name } = item;
......
...@@ -52,6 +52,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { ...@@ -52,6 +52,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
}, },
build: { build: {
// minify: 'esbuild',
outDir: OUTPUT_DIR, outDir: OUTPUT_DIR,
polyfillDynamicImport: VITE_LEGACY, polyfillDynamicImport: VITE_LEGACY,
terserOptions: { terserOptions: {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论