165 lines
3.5 KiB
Vue
165 lines
3.5 KiB
Vue
<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>
|