首页优化

2026-05-26 17:58:23 +08:00
parent 7fe519df28
commit 95f020047d
6 changed files with 413 additions and 279 deletions
--- a/src/views/home/components/InputBar.vue
+++ b/src/views/home/components/InputBar.vue
@@ -26,7 +26,6 @@
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
-
 					<el-dropdown trigger="click" @command="handleReplySelect">
 						<el-button class="pill-btn">快捷回复</el-button>
 						<template #dropdown>
@@ -37,10 +36,33 @@
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
+					<el-dropdown trigger="click" @command="handleSkillSelect">
+						<el-button class="pill-btn">
+							{{ currentSkillDisplay }}
+						</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="default">默认对话</el-dropdown-item>
+								<el-dropdown-item command="code-review">代码审查</el-dropdown-item>
+								<el-dropdown-item command="refactor">代码重构</el-dropdown-item>
+								<el-dropdown-item command="writing">内容写作</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+					<el-dropdown trigger="click" @command="handleWorkflowSelect">
+						<el-button class="pill-btn">
+							{{ currentWorkflowDisplay }}
+						</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="none">无</el-dropdown-item>
+								<el-dropdown-item command="review-test">审查+测试</el-dropdown-item>
+								<el-dropdown-item command="doc-then-code">文档再编码</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
 				</div>
-
 				<div class="toolbar-right">
-					<el-button class="mode-btn">启动</el-button>
 					<el-button circle class="send-btn" :disabled="!message.trim()" @click="handleSend">
 						<el-icon><Top /></el-icon>
 					</el-button>
@@ -51,7 +73,7 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { Top, Plus } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';

@@ -61,6 +83,33 @@ interface Emits {

 const emit = defineEmits<Emits>();
 const message = ref('');
+const selectedSkill = ref('default');
+const selectedWorkflow = ref('none');
+
+const skillLabels: Record<string, string> = {
+	default: '选择技能',
+	'code-review': '代码审查',
+	refactor: '代码重构',
+	writing: '内容写作',
+};
+
+const workflowLabels: Record<string, string> = {
+	none: '选择工作流',
+	'review-test': '审查+测试',
+	'doc-then-code': '文档再编码',
+};
+
+const currentSkillDisplay = computed(() => {
+	return selectedSkill.value === 'default'
+		? '选择技能'
+		: skillLabels[selectedSkill.value];
+});
+
+const currentWorkflowDisplay = computed(() => {
+	return selectedWorkflow.value === 'none'
+		? '选择工作流'
+		: workflowLabels[selectedWorkflow.value];
+});

 const quickCommands: Record<string, string> = {
 	rewrite: '请帮我润色下面这段内容，保持原意并提升表达质感：',
@@ -74,11 +123,27 @@ const quickReplies: Record<string, string> = {
 	adjust: '这个比例还要再调一下。',
 };

+const skills: Record<string, string> = {
+	default: '',
+	'code-review': '[技能：代码审查] 请帮我审查下面这段代码，找出潜在问题并给出改进建议：\n',
+	refactor: '[技能：代码重构] 请帮我重构下面这段代码，提升可读性和可维护性：\n',
+	writing: '[技能：内容写作] 请根据下面的需求帮我创作内容：\n',
+};
+
+const workflows: Record<string, string> = {
+	none: '',
+	'review-test': '[工作流：审查+测试] 完成后请自动生成单元测试：\n',
+	'doc-then-code': '[工作流：文档再编码] 请先编写接口文档，再实现代码：\n',
+};
+
 const handleSend = (event?: KeyboardEvent) => {
 	if (event) event.preventDefault();
 	const msg = message.value.trim();
 	if (!msg) return;
-	emit('send', msg);
+	const skillPrefix = skills[selectedSkill.value] || '';
+	const workflowPrefix = workflows[selectedWorkflow.value] || '';
+	const finalMessage = (skillPrefix + workflowPrefix + msg).trim();
+	emit('send', finalMessage);
 	message.value = '';
 };

@@ -95,6 +160,20 @@ const handleReplySelect = (key: string | number | object) => {
 	const k = String(key);
 	message.value = quickReplies[k] || message.value;
 };
+
+const handleSkillSelect = (key: string | number | object) => {
+	selectedSkill.value = String(key);
+	if (selectedSkill.value !== 'default') {
+		ElMessage.success(`已选择技能：${skillLabels[selectedSkill.value]}`);
+	}
+};
+
+const handleWorkflowSelect = (key: string | number | object) => {
+	selectedWorkflow.value = String(key);
+	if (selectedWorkflow.value !== 'none') {
+		ElMessage.success(`已选择工作流：${workflowLabels[selectedWorkflow.value]}`);
+	}
+};
 </script>

 <style scoped lang="scss">
@@ -110,16 +189,17 @@ const handleReplySelect = (key: string | number | object) => {
 	width: min(1060px, 82%);
 	margin: 0 auto;
 	background:
-		linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 100%),
-		radial-gradient(120% 180% at 0% 0%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 38%);
-	border: 1px solid rgba(191, 219, 254, 0.62);
-	border-radius: 18px;
+		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%),
+		radial-gradient(120% 180% at 0% 0%, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 38%),
+		radial-gradient(80% 120% at 100% 100%, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0) 38%);
+	border: 1px solid rgba(59, 130, 246, 0.28);
+	border-radius: 20px;
 	box-shadow:
-		0 20px 44px rgba(15, 23, 42, 0.14),
-		0 0 0 1px rgba(59, 130, 246, 0.09) inset,
-		0 10px 24px rgba(37, 99, 235, 0.16);
-	padding: 14px 16px 12px;
-	backdrop-filter: blur(14px);
+		0 24px 48px rgba(15, 23, 42, 0.12),
+		0 0 0 1px rgba(59, 130, 246, 0.08) inset,
+		0 8px 16px rgba(37, 99, 235, 0.1);
+	padding: 16px 18px 14px;
+	backdrop-filter: blur(16px);
 }

 .message-input {
@@ -158,59 +238,60 @@ const handleReplySelect = (key: string | number | object) => {
 }

 .tool-btn {
-	width: 30px;
-	height: 30px;
+	width: 32px;
+	height: 32px;
 	border: 1px solid #d9e4f5;
 	color: #5b6b84;
 	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
-	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
+	transition: all 0.2s ease;

 	&:hover {
 		color: #2b4d8f;
-		background: #f3f8ff;
+		background: linear-gradient(135deg, #f0f7ff 0%, #e0edff 100%);
+		border-color: #bfdbfe;
+		transform: translateY(-1px);
+		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
 	}
 }

 .pill-btn {
-	height: 30px;
-	padding: 0 12px;
+	height: 32px;
+	padding: 0 14px;
 	border-radius: 999px;
 	border: 1px solid #dbe7f7;
 	color: #30435f;
 	background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
 	font-size: 12px;
 	font-weight: 600;
-}
+	transition: all 0.2s ease;

-.mode-btn {
-	height: 30px;
-	padding: 0 13px;
-	border-radius: 999px;
-	border: 1px solid #dbe7f7;
-	color: #30435f;
-	background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
-	font-size: 12px;
-	font-weight: 600;
-	letter-spacing: 0.2px;
+	&:hover {
+		background: linear-gradient(135deg, #f0f7ff 0%, #e0edff 100%);
+		border-color: #bfdbfe;
+		color: #1d4ed8;
+	}
 }

 .send-btn {
-	width: 30px;
-	height: 30px;
+	width: 32px;
+	height: 32px;
 	border: none;
-	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
+	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
 	color: #fff;
-	box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
+	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+	transition: all 0.2s ease;

 	&:hover:not(:disabled) {
-		filter: brightness(1.06);
+		filter: brightness(1.08);
 		transform: translateY(-1px);
+		box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
 	}

 	&:disabled {
-		opacity: 0.55;
+		opacity: 0.5;
 		box-shadow: none;
-		background: #cbd5e1;
+		background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
 	}
 }
 </style>