kagg886 3 月之前
父節點
當前提交
fecf22245c
共有 1 個文件被更改,包括 104 次插入10 次删除
  1. 104 10
      src/views/assistant/index.vue

+ 104 - 10
src/views/assistant/index.vue

@@ -4,7 +4,7 @@ import echartsPlugin, { EchartsPluginOptions } from '/@/components/markdown/plug
 import Markdown from '/@/components/markdown/index.vue'
 import { ref, nextTick, onMounted, computed } from 'vue'
 import { Local } from '/@/utils/storage'
-import { User, ChatDotRound } from '@element-plus/icons-vue'
+import { User, ChatDotRound, Delete, Edit } from '@element-plus/icons-vue'
 
 const plugins: Array<MarkdownPlugin<any>> = [
 	defineMarkdownPlugin<EchartsPluginOptions>(echartsPlugin, () => {
@@ -26,10 +26,13 @@ interface Message {
 }
 
 // 会话列表
-const conversations = ref([
-	{ id: 1, title: 'Summary 1', active: true },
-	{ id: 2, title: 'Summary 2', active: false }
-])
+const conversations = ref<{id: number,title: string,active: boolean}[]>([])
+
+for (let i = 0; i < 100; i++) {
+	conversations.value.push(
+		{ id: i, title: `Summary ${i}`, active: false }
+	)
+}
 
 // 消息列表
 const messages = ref<Message[]>([
@@ -218,6 +221,18 @@ const selectConversation = (id: number) => {
 	})
 }
 
+// 删除对话
+const deleteConversation = (id: number) => {
+	console.log('删除对话:', id)
+	// TODO: 实现删除对话逻辑
+}
+
+// 编辑摘要
+const editSummary = (id: number) => {
+	console.log('编辑摘要:', id)
+	// TODO: 实现编辑摘要逻辑
+}
+
 onMounted(() => {
 	scrollToBottom()
 })
@@ -231,16 +246,36 @@ onMounted(() => {
 			<div class="sidebar-header">
 				<h3>对话历史</h3>
 			</div>
-			<div class="conversation-list">
+			<el-scrollbar class="conversation-list">
 				<div
 					v-for="conv in conversations"
 					:key="conv.id"
 					:class="['conversation-item', { active: conv.active }]"
-					@click="selectConversation(conv.id)"
 				>
-					{{ conv.title }}
+					<div class="conversation-content" @click="selectConversation(conv.id)">
+						<span class="conversation-title">{{ conv.title }}</span>
+					</div>
+					<div class="conversation-actions">
+						<el-button
+							type="text"
+							size="small"
+							:icon="Edit"
+							@click.stop="editSummary(conv.id)"
+							class="action-btn edit-btn"
+							title="编辑摘要"
+						/>
+						<el-button
+							type="text"
+							size="small"
+							:icon="Delete"
+							@click.stop="deleteConversation(conv.id)"
+							class="action-btn delete-btn"
+							title="删除对话"
+						/>
+					</div>
 				</div>
-			</div>
+			</el-scrollbar>
+			<el-button type="primary" size="large" class="create-conversation-btn">创建对话</el-button>
 		</el-aside>
 
 		<!-- 右侧聊天区域 -->
@@ -361,6 +396,9 @@ onMounted(() => {
 	height: 100%;
 	background: var(--el-bg-color-page);
 }
+.create-conversation-btn {
+	margin: 16px;
+}
 /* 左侧边栏样式 */
 .chat-sidebar {
 	background: var(--el-bg-color);
@@ -387,23 +425,79 @@ onMounted(() => {
 }
 
 .conversation-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	padding: 12px 16px;
 	margin-bottom: 8px;
 	border-radius: 8px;
-	cursor: pointer;
 	transition: all 0.2s;
 	color: var(--el-text-color-regular);
 	border: 1px solid transparent;
+	position: relative;
 
 	&:hover {
 		background: var(--el-fill-color-light);
 		color: var(--el-text-color-primary);
+
+		.conversation-actions {
+			opacity: 1;
+		}
 	}
 
 	&.active {
 		background: var(--el-color-primary-light-9);
 		color: var(--el-color-primary);
 		border-color: var(--el-color-primary-light-7);
+
+		.conversation-actions {
+			opacity: 1;
+		}
+	}
+}
+
+.conversation-content {
+	flex: 1;
+	cursor: pointer;
+	min-width: 0;
+}
+
+.conversation-title {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.conversation-actions {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	opacity: 0;
+	transition: opacity 0.2s;
+	flex-shrink: 0;
+}
+
+.action-btn {
+	padding: 4px !important;
+	min-height: auto !important;
+	width: 24px !important;
+	height: 24px !important;
+
+	&.edit-btn {
+		color: var(--el-color-primary) !important;
+
+		&:hover {
+			background: var(--el-color-primary-light-9) !important;
+		}
+	}
+
+	&.delete-btn {
+		color: var(--el-color-danger) !important;
+
+		&:hover {
+			background: var(--el-color-danger-light-9) !important;
+		}
 	}
 }