feat(icons): 添加 Lucide 图标组件并集成到首页

添加 Lucide Vue 图标库依赖，创建 AppIcon 基础组件用于统一管理图标
移除 .npmrc 文件并更新 pre-commit 钩子使用 npm 替代 pnpm

.husky/pre-commit

@@ -1 +1 @@
-pnpm exec lint-staged
+npm exec lint-staged

package-lock.json

@@ -14,6 +14,7 @@
         "bonjour-service": "^1.3.0",
         "electron-squirrel-startup": "^1.0.1",
         "element-plus": "^2.13.6",
+        "lucide-vue-next": "^1.0.0",
         "pinia": "^3.0.4",
         "vue": "^3.5.32",
         "vue-router": "^4.6.4"
@@ -8522,6 +8523,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

package.json

@@ -47,6 +47,7 @@
     "bonjour-service": "^1.3.0",
     "electron-squirrel-startup": "^1.0.1",
     "element-plus": "^2.13.6",
+    "lucide-vue-next": "^1.0.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.32",
     "vue-router": "^4.6.4"

src/renderer/components/base/AppIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth"
+    class="lucide-icon"
+  />
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: Object, // 注意：这里接收的是 Lucide 图标组件对象
+    required: true,
+  },
+  size: {
+    type: [Number, String],
+    default: 24,
+  },
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+  strokeWidth: {
+    type: [Number, String],
+    default: 2,
+  },
+});
+</script>

src/renderer/main.js

@@ -6,14 +6,16 @@ import 'element-plus/dist/index.css';
 import router from './router';
 import App from './App.vue';
 import './style.css';
+import AppIcon from './components/base/AppIcon.vue';
 
 const app = createApp(App);
-
 // 注册所有 Element Plus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 
+// 注册自定义图标组件
+app.component('AppIcon', AppIcon);
 app.use(createPinia());
 app.use(router);
 app.use(ElementPlus);

src/renderer/views/home/HomeView.vue

@@ -8,6 +8,8 @@
           <span class="emoji">👋</span>
         </h1>
         <p class="welcome-subtitle">准备好开始今天的创作了吗？</p>
+        <AppIcon :icon="User" color="red" />
+        <AppIcon :icon="Rocket" :size="30" class="hover:text-red-500" />
       </div>
     </div>
 
@@ -98,7 +100,8 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router';
+import { User, Rocket } from 'lucide-vue-next';
 import {
   Document,
   Plus,
@@ -110,10 +113,10 @@ import {
   Grid,
   Clock,
   Timer,
-  VideoCamera
+  VideoCamera,
-} from '@element-plus/icons-vue'
+} from '@element-plus/icons-vue';
 
-const router = useRouter()
+const router = useRouter();
 
 const stats = [
   {
@@ -121,50 +124,50 @@ const stats = [
     value: '128',
     trend: 12,
     icon: Document,
-    color: '#409EFF'
+    color: '#409EFF',
   },
   {
     label: '今日编辑',
     value: '24',
     trend: -3,
     icon: Timer,
-    color: '#67C23A'
+    color: '#67C23A',
   },
   {
     label: '运行次数',
     value: '56',
     trend: 8,
     icon: VideoCamera,
-    color: '#E6A23C'
+    color: '#E6A23C',
   },
-]
+];
 
 const actions = [
   {
     label: '新建文件',
     icon: Plus,
     color: '#409EFF',
-    onClick: () => router.push('/editor') 
+    onClick: () => router.push('/editor'),
   },
   {
     label: '打开文件',
     icon: FolderOpened,
     color: '#67C23A',
-    onClick: () => {} 
+    onClick: () => {},
   },
   {
     label: '导入项目',
     icon: Upload,
     color: '#E6A23C',
-    onClick: () => {} 
+    onClick: () => {},
   },
   {
     label: '系统设置',
     icon: Setting,
     color: '#F56C6C',
-    onClick: () => {} 
+    onClick: () => {},
   },
-]
+];
 
 const recents = [
   { name: 'main.js', path: '/src/main', time: '2 分钟前' },
@@ -172,11 +175,11 @@ const recents = [
   { name: 'index.css', path: '/src/renderer', time: '昨天' },
   { name: 'forge.config.js', path: '/', time: '3 天前' },
   { name: 'package.json', path: '/', time: '5 天前' },
-]
+];
 
 const handleFileClick = (item) => {
-  console.log('点击文件:', item)
+  console.log('点击文件:', item);
-}
+};
 </script>
 
 <style scoped>
@@ -209,7 +212,7 @@ const handleFileClick = (item) => {
 }
 
 .greeting {
-  background: linear-gradient(90deg, #409EFF 0%, #67C23A 100%);
+  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -285,11 +288,11 @@ const handleFileClick = (item) => {
 }
 
 .stat-trend.up {
-  color: #67C23A;
+  color: #67c23a;
 }
 
 .stat-trend.down {
-  color: #F56C6C;
+  color: #f56c6c;
 }
 
 /* 主要内容区 */
@@ -390,7 +393,7 @@ const handleFileClick = (item) => {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: #409EFF;
+  color: #409eff;
 }
 
 .file-info {
@@ -419,7 +422,7 @@ const handleFileClick = (item) => {
 
 .file-time {
   font-size: 12px;
-  color: #C0C4CC;
+  color: #c0c4cc;
   flex-shrink: 0;
 }
 </style>