提交 d67bd496 作者: Vben

chore: improve icon-picker logic

上级 e5b2cc1e
......@@ -7,7 +7,7 @@
### ✨ Features
- axios 支持 form-data 格式请求
- 新增图标选择器组件
- 新增图标选择器组件(支持本地和在线方式)
- 新增修改密码界面
- 新增部门管理示例界面
- 新增 WebSocket 示例和服务脚本
......
......@@ -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}]`
);
......
......@@ -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",
......
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 };
......
......@@ -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 },
......
......@@ -46,7 +46,6 @@
const icon = unref(getIconRef);
if (!icon) return;
const svg = Iconify.renderSVG(icon, {});
if (svg) {
el.textContent = '';
el.appendChild(svg);
......
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'),
......
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'),
......
......@@ -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,
......
......@@ -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;
......
......@@ -52,6 +52,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
},
build: {
// minify: 'esbuild',
outDir: OUTPUT_DIR,
polyfillDynamicImport: VITE_LEGACY,
terserOptions: {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论