From 0b11680aea9bddaa2df62ae694308bffd51e7ec6 Mon Sep 17 00:00:00 2001
From: houakang <houak@zhiju.ai>
Date: Fri, 10 Apr 2026 15:19:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(icons):=20=E6=B7=BB=E5=8A=A0=20Lucide=20?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6=E5=B9=B6=E9=9B=86=E6=88=90?=
 =?UTF-8?q?=E5=88=B0=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 Lucide Vue 图标库依赖，创建 AppIcon 基础组件用于统一管理图标
移除 .npmrc 文件并更新 pre-commit 钩子使用 npm 替代 pnpm
---
 .husky/pre-commit                        |   2 +-
 package-lock.json                        |  10 +++
 package.json                             |   1 +
 src/renderer/components/base/AppIcon.vue |  30 +++++++
 src/renderer/main.js                     |   4 +-
 src/renderer/views/home/HomeView.vue     | 105 ++++++++++++-----------
 6 files changed, 99 insertions(+), 53 deletions(-)
 create mode 100644 src/renderer/components/base/AppIcon.vue

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 5ee7abd..5c3e95f 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1 @@
-pnpm exec lint-staged
+npm exec lint-staged
diff --git a/package-lock.json b/package-lock.json
index 1cb4a9e..22cac9a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f2bb6ae..55ac5db 100644
--- a/package.json
+++ b/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"
diff --git a/src/renderer/components/base/AppIcon.vue b/src/renderer/components/base/AppIcon.vue
new file mode 100644
index 0000000..092267b
--- /dev/null
+++ b/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>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index b5d67c6..c3c3ec2 100644
--- a/src/renderer/main.js
+++ b/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);
diff --git a/src/renderer/views/home/HomeView.vue b/src/renderer/views/home/HomeView.vue
index 4b0d639..85602c0 100644
--- a/src/renderer/views/home/HomeView.vue
+++ b/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,73 +100,74 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import { 
-  Document, 
-  Plus, 
-  FolderOpened, 
-  Setting, 
-  Upload, 
-  Top, 
-  Bottom, 
-  Grid, 
+import { useRouter } from 'vue-router';
+import { User, Rocket } from 'lucide-vue-next';
+import {
+  Document,
+  Plus,
+  FolderOpened,
+  Setting,
+  Upload,
+  Top,
+  Bottom,
+  Grid,
   Clock,
   Timer,
-  VideoCamera
-} from '@element-plus/icons-vue'
+  VideoCamera,
+} from '@element-plus/icons-vue';
 
-const router = useRouter()
+const router = useRouter();
 
 const stats = [
-  { 
-    label: '文件总数', 
-    value: '128', 
+  {
+    label: '文件总数',
+    value: '128',
     trend: 12,
     icon: Document,
-    color: '#409EFF'
+    color: '#409EFF',
   },
-  { 
-    label: '今日编辑', 
-    value: '24', 
+  {
+    label: '今日编辑',
+    value: '24',
     trend: -3,
     icon: Timer,
-    color: '#67C23A'
+    color: '#67C23A',
   },
-  { 
-    label: '运行次数', 
-    value: '56', 
+  {
+    label: '运行次数',
+    value: '56',
     trend: 8,
     icon: VideoCamera,
-    color: '#E6A23C'
+    color: '#E6A23C',
   },
-]
+];
 
 const actions = [
-  { 
-    label: '新建文件', 
-    icon: Plus, 
+  {
+    label: '新建文件',
+    icon: Plus,
     color: '#409EFF',
-    onClick: () => router.push('/editor') 
+    onClick: () => router.push('/editor'),
   },
-  { 
-    label: '打开文件', 
-    icon: FolderOpened, 
+  {
+    label: '打开文件',
+    icon: FolderOpened,
     color: '#67C23A',
-    onClick: () => {} 
+    onClick: () => {},
   },
-  { 
-    label: '导入项目', 
-    icon: Upload, 
+  {
+    label: '导入项目',
+    icon: Upload,
     color: '#E6A23C',
-    onClick: () => {} 
+    onClick: () => {},
   },
-  { 
-    label: '系统设置', 
-    icon: Setting, 
+  {
+    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>