feat: 会话列表的交互

src/renderer/views/home/ChatHistory.vue

@@ -21,11 +21,54 @@
 					<div class="flex-1 min-w-0">
 						<div class="truncate text-sm">{{ item.conversationTitle }}</div>
 					</div>
-					<button v-if="item.conversationId === selectedConversationId"
+
-						class="bg-transparent border-0 text-gray-500 text-lg px-1 py-0">…</button>
+					<el-dropdown v-if="item.conversationId === selectedConversationId" placement="bottom-end">
+						<el-icon class="el-icon--right">
+							...
+						</el-icon>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item @click="renameHistoryMessage(item.conversationId)">重命名</el-dropdown-item>
+								<el-dropdown-item @click="deleteHistoryMessage(item.conversationId)">删除</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
 				</li>
 			</ul>
 		</div>
+
+		<!-- 重命名对话框 -->
+		<el-dialog v-model="renameDialogFormVisible" title="重命名对话" width="500">
+			<el-form :model="newMessageName">
+				<el-form-item label="对话名称" :label-width="formLabelWidth">
+					<el-input v-model="newMessageName" autocomplete="off" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="renameDialogFormVisible = false">取消</el-button>
+					<el-button type="primary" @click="submitNameChange">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+		<!-- 删除确认对话框 -->
+		<el-dialog v-model="deleteDialogVisible" title="温馨提示" width="500" center>
+			<span>
+				您确定删除该会话吗？删除后将无法恢复！<br />
+			</span>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="deleteDialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="submitDelete">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
 	</aside>
 </template>
 
@@ -34,6 +77,11 @@ import { ref, onMounted, defineEmits } from 'vue'
 import { RiAddLine, RiArrowRightSLine, RiArrowDownSLine } from '@remixicon/vue'
 import { getSessionList } from '../../api/SessionsApi';
 
+const deleteDialogVisible = ref(false)
+const renameDialogFormVisible = ref(false)
+const newMessageName = ref('')
+const formLabelWidth = '100px'
+
 interface HistoryMessage {
 	conversationId: string;
 	conversationTitle: string;
@@ -65,6 +113,30 @@ const selectedHistoryMessage = (conversationId: string) => {
 	emit('select-chat', conversationId)
 }
 
+/// 重命名历史消息
+const renameHistoryMessage = (conversationId: string) => {
+	console.log('rename message', conversationId)
+	renameDialogFormVisible.value = true
+}
+
+/// 删除历史消息
+const deleteHistoryMessage = (conversationId: string) => {
+	console.log('delete message', conversationId)
+	deleteDialogVisible.value = true
+}
+
+/// 提交重命名
+const submitNameChange = () => {
+	console.log('submit name change', newMessageName.value)
+	renameDialogFormVisible.value = false
+}
+
+/// 提交删除
+const submitDelete = () => {
+	console.log('submit delete')
+	deleteDialogVisible.value = false
+}
+
 /// 页面加载时获取历史会话列表
 onMounted(() => {
 	getHistoryConversationList()