重构首页

src/views/home/components/CommandList.vue

@@ -0,0 +1,164 @@
+<template>
+	<div class="command-list">
+		<div v-for="command in commandList" :key="command.id" class="command-card" @click="handleCommandClick(command)">
+			<div class="command-icon">
+				<el-icon :size="32" color="#3b82f6">
+					<Lightning />
+				</el-icon>
+			</div>
+			<div class="command-content">
+				<h3 class="command-name">{{ command.name }}</h3>
+				<p class="command-desc">{{ command.description }}</p>
+				<div class="command-trigger">
+					<el-tag size="small" type="info">{{ command.trigger }}</el-tag>
+				</div>
+			</div>
+			<div class="command-actions">
+				<el-button text size="small" @click.stop="handleEdit(command)">
+					<el-icon><Edit /></el-icon>
+				</el-button>
+				<el-button text size="small" type="danger" @click.stop="handleDelete(command)">
+					<el-icon><Delete /></el-icon>
+				</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Lightning, Edit, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Command {
+	id: number;
+	name: string;
+	description: string;
+	trigger: string;
+	action: string;
+}
+
+const commandList = ref<Command[]>([
+	{
+		id: 1,
+		name: '快速创建组件',
+		description: '快速创建一个 Vue 组件模板，包含基础结构和样式',
+		trigger: '/component',
+		action: 'create_component',
+	},
+	{
+		id: 2,
+		name: '生成 API 接口',
+		description: '根据接口文档快速生成 API 请求函数',
+		trigger: '/api',
+		action: 'generate_api',
+	},
+	{
+		id: 3,
+		name: '代码格式化',
+		description: '格式化当前文件的代码，统一代码风格',
+		trigger: '/format',
+		action: 'format_code',
+	},
+	{
+		id: 4,
+		name: '添加类型定义',
+		description: '为 JavaScript 代码添加 TypeScript 类型定义',
+		trigger: '/types',
+		action: 'add_types',
+	},
+	{
+		id: 5,
+		name: '生成测试用例',
+		description: '为当前组件或函数生成单元测试代码',
+		trigger: '/test',
+		action: 'generate_test',
+	},
+	{
+		id: 6,
+		name: '优化性能',
+		description: '分析代码并提供性能优化建议',
+		trigger: '/optimize',
+		action: 'optimize_code',
+	},
+]);
+
+const handleCommandClick = (command: Command) => {
+	ElMessage.success(`执行指令: ${command.name}`);
+};
+
+const handleEdit = (command: Command) => {
+	ElMessage.info(`编辑指令: ${command.name}`);
+};
+
+const handleDelete = (command: Command) => {
+	ElMessage.warning(`删除指令: ${command.name}`);
+};
+</script>
+
+<style scoped lang="scss">
+.command-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+	gap: 16px;
+}
+
+.command-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: flex;
+	gap: 16px;
+	align-items: flex-start;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+		background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+	}
+}
+
+.command-icon {
+	flex-shrink: 0;
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+	border-radius: 12px;
+}
+
+.command-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.command-name {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 8px 0;
+}
+
+.command-desc {
+	font-size: 13px;
+	color: #6b7280;
+	line-height: 1.5;
+	margin: 0 0 12px 0;
+}
+
+.command-trigger {
+	display: inline-block;
+}
+
+.command-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+</style>