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

添加 Lucide Vue 图标库依赖,创建 AppIcon 基础组件用于统一管理图标
移除 .npmrc 文件并更新 pre-commit 钩子使用 npm 替代 pnpm
This commit is contained in:
houakang
2026-04-10 15:19:12 +08:00
parent 2d1fe95be0
commit 0b11680aea
6 changed files with 99 additions and 53 deletions

View File

@@ -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>