Merge pull request #2106 from Azir-11/dev-286

添加开发环境启动脚本、更新 SvgIcon 组件，支持本地图标和 Iconify 图标、移除未使用的 unocss 依赖

Author: pixelmaxQm

web/package.json

@@ -3,6 +3,7 @@
   "version": "2.8.5",
   "private": true,
   "scripts": {
+    "dev": "node openDocument.js && vite --host --mode development",
     "serve": "node openDocument.js && vite --host --mode development",
     "build": "vite build --mode production",
     "limit-build": "npm install increase-memory-limit-fixbug cross-env -g && npm run fix-memory-limit && node ./limit && npm run build",
@@ -14,6 +15,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.10",
+    "@iconify/vue": "^5.0.0",
     "@unocss/transformer-directives": "^66.4.2",
     "@vue-office/docx": "^1.6.2",
     "@vue-office/excel": "^1.7.11",
@@ -76,7 +78,6 @@
     "globals": "^16.3.0",
     "sass": "^1.78.0",
     "terser": "^5.31.6",
-    "unocss": "^66.4.2",
     "vite": "^6.2.3",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-importer": "^0.2.5",

web/src/components/svgIcon/svgIcon.vue

@@ -1,32 +1,44 @@
 <template>
-  <svg :class="svgClass" v-bind="$attrs" :color="color">
-    <use :xlink:href="'#' + name" rel="external nofollow" />
-  </svg>
+  <template v-if="localIcon">
+    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+      <use :xlink:href="'#' + localIcon" rel="external nofollow" />
+    </svg>
+  </template>
+  <template v-else-if="icon">
+    <Icon :icon="icon" v-bind="bindAttrs" />
+  </template>
 </template>
+
 <script setup>
-  import { computed } from 'vue'
-  const props = defineProps({
-    name: {
-      type: String,
-      required: true
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
-  })
+import { computed, useAttrs } from 'vue';
+import { Icon } from '@iconify/vue'
 
-  const svgClass = computed(() => {
-    if (props.name) {
-      return `svg-icon ${props.name}`
-    }
-    return 'svg-icon'
-  })
-</script>
-<style scoped>
-  .svg-icon {
-    @apply w-4 h-4;
-    fill: currentColor;
-    vertical-align: middle;
+/**
+ * 使用示例：
+ * 本地图标（所有可用的本地图标见控制台输出）：
+ * <SvgIcon localIcon="lock" class="text-red-500 text-3xl" />
+ * 
+ * 在线图标（相关查询网站：https://icones.js.org/ 或是：https://icon-sets.iconify.design/）：
+ * <SvgIcon icon="mingcute:love-fill" class="text-red-500 text-3xl" />
+ */
+defineProps({
+  // 通过 symbol id 使用本地注册的 svg 图标
+  localIcon: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // Iconify 图标名称, 例如: 'mdi:home'
+  icon: {
+    type: String,
+    required: false,
+    default: ''
   }
-</style>
+})
+const attrs = useAttrs();
+
+const bindAttrs = computed(() => ({
+  class: (attrs.class) || '',
+  style: (attrs.style) || ''
+}))
+</script>

web/src/core/global.js

@@ -10,7 +10,7 @@ const createIconComponent = (name) => ({
   name: 'SvgIcon',
   render() {
     return h(svgIcon, {
-      name: name
+      localIcon: name
     })
   }
 })
@@ -21,6 +21,7 @@ const registerIcons = async (app) => {
     '@/plugin/**/assets/icons/**/*.svg'
   ) // 插件目录 svg 图标
   const mergedIconModules = Object.assign({}, iconModules, pluginIconModules) // 合并所有 svg 图标
+  let allKeys = []
   for (const path in mergedIconModules) {
     let pluginName = ''
     if (path.startsWith('/src/plugin/')) {
@@ -36,16 +37,19 @@ const registerIcons = async (app) => {
       continue
     }
     const key = `${pluginName}${iconName}`
-    // 开发模式下列出所有 svg 图标，方便开发者直接查找复制使用
-    import.meta.env.MODE == 'development' &&
-      console.log(`svg-icon-component: <${key} />`)
     const iconComponent = createIconComponent(key)
     config.logs.push({
       key: key,
       label: key
     })
     app.component(key, iconComponent)
+
+    // 开发模式下列出所有 svg 图标，方便开发者直接查找复制使用
+    allKeys.push(key)
   }
+
+  import.meta.env.MODE == 'development' &&
+    console.log(`所有可用的本地图标: ${allKeys.join(', ')}`)
 }
 
 export const register = (app) => {