feat: 代码生成预览 图标改为本地

This commit is contained in:
dap 2024-11-07 07:57:45 +08:00
parent 2cc82a0c05
commit 09b9569ce3
3 changed files with 47 additions and 12 deletions

View File

@ -2,14 +2,22 @@
import type { Recordable } from '@vben/types'; import type { Recordable } from '@vben/types';
import type { Key } from 'ant-design-vue/es/vc-tree/interface'; import type { Key } from 'ant-design-vue/es/vc-tree/interface';
import { ref } from 'vue'; import { type Component, ref } from 'vue';
import { import {
CodeMirror, CodeMirror,
type LanguageSupport, type LanguageSupport,
useVbenModal, useVbenModal,
} from '@vben/common-ui'; } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons'; import {
DefaultFileIcon,
FolderIcon,
JavaIcon,
SqlIcon,
TsIcon,
VueIcon,
XmlIcon,
} from '@vben/icons';
import { useClipboard } from '@vueuse/core'; import { useClipboard } from '@vueuse/core';
import { Skeleton, Tree } from 'ant-design-vue'; import { Skeleton, Tree } from 'ant-design-vue';
@ -20,7 +28,7 @@ interface TreeNode {
children: TreeNode[]; children: TreeNode[];
title: string; title: string;
key: string; key: string;
icon: string; // icon: Component; //
} }
const treeData = ref<TreeNode[]>([]); const treeData = ref<TreeNode[]>([]);
@ -90,16 +98,16 @@ function convertToTree(paths: string[]): TreeNode[] {
} }
const iconMap = [ const iconMap = [
{ key: 'java', value: 'skill-icons:java-light' }, { key: 'java', value: JavaIcon },
{ key: 'xml', value: 'tabler:file-type-xml' }, { key: 'xml', value: XmlIcon },
{ key: 'sql', value: 'carbon:sql' }, { key: 'sql', value: SqlIcon },
{ key: 'ts', value: 'skill-icons:typescript' }, { key: 'ts', value: TsIcon },
{ key: 'vue', value: 'logos:vue' }, { key: 'vue', value: VueIcon },
{ key: 'folder', value: 'flat-color-icons:folder' }, { key: 'folder', value: FolderIcon },
]; ];
function findIcon(path: string) { function findIcon(path: string) {
const defaultFileIcon = 'bx:file'; const defaultFileIcon = DefaultFileIcon;
const defaultFolderIcon = 'flat-color-icons:folder'; const defaultFolderIcon = FolderIcon;
if (path.endsWith('.vm')) { if (path.endsWith('.vm')) {
const realPath = path.slice(0, -3); const realPath = path.slice(0, -3);
// //
@ -172,7 +180,7 @@ const { copy } = useClipboard({ legacy: true });
> >
<template #title="{ title, icon }"> <template #title="{ title, icon }">
<div class="flex items-center gap-[16px]"> <div class="flex items-center gap-[16px]">
<IconifyIcon :icon="icon" /> <component :is="icon" />
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
</template> </template>

View File

@ -45,9 +45,11 @@
"@iconify/icons-material-symbols": "^1.2.58", "@iconify/icons-material-symbols": "^1.2.58",
"@iconify/icons-mdi": "^1.2.48", "@iconify/icons-mdi": "^1.2.48",
"@iconify/icons-mingcute": "^1.2.9", "@iconify/icons-mingcute": "^1.2.9",
"@iconify/icons-noto": "^1.2.10",
"@iconify/icons-ph": "^1.2.5", "@iconify/icons-ph": "^1.2.5",
"@iconify/icons-ri": "^1.2.10", "@iconify/icons-ri": "^1.2.10",
"@iconify/icons-simple-icons": "^1.2.74", "@iconify/icons-simple-icons": "^1.2.74",
"@iconify/icons-skill-icons": "^1.2.1",
"@iconify/icons-solar": "^1.2.3", "@iconify/icons-solar": "^1.2.3",
"@iconify/icons-streamline": "^1.2.3", "@iconify/icons-streamline": "^1.2.3",
"@iconify/icons-tabler": "^1.2.95", "@iconify/icons-tabler": "^1.2.95",

View File

@ -4,6 +4,8 @@ import githubOutlined from '@iconify/icons-ant-design/github-outlined';
import inboxIcon from '@iconify/icons-ant-design/inbox-outlined'; import inboxIcon from '@iconify/icons-ant-design/inbox-outlined';
import userOutlined from '@iconify/icons-ant-design/user-outlined'; import userOutlined from '@iconify/icons-ant-design/user-outlined';
import ucIcon from '@iconify/icons-arcticons/uc-browser'; import ucIcon from '@iconify/icons-arcticons/uc-browser';
import defaultFileIcon from '@iconify/icons-bx/file';
import sqlIcon from '@iconify/icons-carbon/sql';
import linuxIcon from '@iconify/icons-devicon/linux'; import linuxIcon from '@iconify/icons-devicon/linux';
import windowsIcon from '@iconify/icons-devicon/windows8'; import windowsIcon from '@iconify/icons-devicon/windows8';
import alipayIcon from '@iconify/icons-fa-brands/alipay'; import alipayIcon from '@iconify/icons-fa-brands/alipay';
@ -19,6 +21,7 @@ import operaIcon from '@iconify/icons-logos/opera';
import quarkIcon from '@iconify/icons-logos/quarkus-icon'; import quarkIcon from '@iconify/icons-logos/quarkus-icon';
import redisIcon from '@iconify/icons-logos/redis'; import redisIcon from '@iconify/icons-logos/redis';
import safariIcon from '@iconify/icons-logos/safari'; import safariIcon from '@iconify/icons-logos/safari';
import vueIcon from '@iconify/icons-logos/vue';
import iphoneIcon from '@iconify/icons-majesticons/iphone-x-apps-line'; import iphoneIcon from '@iconify/icons-majesticons/iphone-x-apps-line';
import menuIcon from '@iconify/icons-material-symbols/menu'; import menuIcon from '@iconify/icons-material-symbols/menu';
import okButtonIcon from '@iconify/icons-mdi/button-pointer'; import okButtonIcon from '@iconify/icons-mdi/button-pointer';
@ -30,6 +33,9 @@ import dingtalkIcon from '@iconify/icons-ri/dingding-line';
import taobaoIconFill from '@iconify/icons-ri/taobao-fill'; import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
import giteeIcon from '@iconify/icons-simple-icons/gitee'; import giteeIcon from '@iconify/icons-simple-icons/gitee';
import qqIcon from '@iconify/icons-simple-icons/tencentqq'; import qqIcon from '@iconify/icons-simple-icons/tencentqq';
import javaIcon from '@iconify/icons-skill-icons/java-light';
import tsIcon from '@iconify/icons-skill-icons/typescript';
import xmlIcon from '@iconify/icons-tabler/file-type-xml';
import githubOAuthIcon from '@iconify/icons-uiw/github'; import githubOAuthIcon from '@iconify/icons-uiw/github';
import excelIcon from '@iconify/icons-vscode-icons/file-type-excel'; import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
import osxIcon from '@iconify/icons-wpf/macos'; import osxIcon from '@iconify/icons-wpf/macos';
@ -159,3 +165,22 @@ export const MenuIcon = createIconifyOfflineIcon(
'material-symbols:menu', 'material-symbols:menu',
menuIcon, menuIcon,
); );
export const JavaIcon = createIconifyOfflineIcon(
'skill-icons:java-light',
javaIcon,
);
export const XmlIcon = createIconifyOfflineIcon(
'tabler:file-type-xml',
xmlIcon,
);
export const SqlIcon = createIconifyOfflineIcon('carbon:sql', sqlIcon);
export const TsIcon = createIconifyOfflineIcon(
'skill-icons:typescript',
tsIcon,
);
export const VueIcon = createIconifyOfflineIcon('logos:vue', vueIcon);
export const DefaultFileIcon = createIconifyOfflineIcon(
'flat-color-icons:folder',
defaultFileIcon,
);