|
@@ -4,7 +4,7 @@ import echartsPlugin, { EchartsPluginOptions } from '/@/components/markdown/plug
|
|
import Markdown from '/@/components/markdown/index.vue'
|
|
import Markdown from '/@/components/markdown/index.vue'
|
|
import { ref, nextTick, onMounted, computed } from 'vue'
|
|
import { ref, nextTick, onMounted, computed } from 'vue'
|
|
import { Local } from '/@/utils/storage'
|
|
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>> = [
|
|
const plugins: Array<MarkdownPlugin<any>> = [
|
|
defineMarkdownPlugin<EchartsPluginOptions>(echartsPlugin, () => {
|
|
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[]>([
|
|
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(() => {
|
|
onMounted(() => {
|
|
scrollToBottom()
|
|
scrollToBottom()
|
|
})
|
|
})
|
|
@@ -231,16 +246,36 @@ onMounted(() => {
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-header">
|
|
<h3>对话历史</h3>
|
|
<h3>对话历史</h3>
|
|
</div>
|
|
</div>
|
|
- <div class="conversation-list">
|
|
|
|
|
|
+ <el-scrollbar class="conversation-list">
|
|
<div
|
|
<div
|
|
v-for="conv in conversations"
|
|
v-for="conv in conversations"
|
|
:key="conv.id"
|
|
:key="conv.id"
|
|
:class="['conversation-item', { active: conv.active }]"
|
|
: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>
|
|
- </div>
|
|
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ <el-button type="primary" size="large" class="create-conversation-btn">创建对话</el-button>
|
|
</el-aside>
|
|
</el-aside>
|
|
|
|
|
|
<!-- 右侧聊天区域 -->
|
|
<!-- 右侧聊天区域 -->
|
|
@@ -361,6 +396,9 @@ onMounted(() => {
|
|
height: 100%;
|
|
height: 100%;
|
|
background: var(--el-bg-color-page);
|
|
background: var(--el-bg-color-page);
|
|
}
|
|
}
|
|
|
|
+.create-conversation-btn {
|
|
|
|
+ margin: 16px;
|
|
|
|
+}
|
|
/* 左侧边栏样式 */
|
|
/* 左侧边栏样式 */
|
|
.chat-sidebar {
|
|
.chat-sidebar {
|
|
background: var(--el-bg-color);
|
|
background: var(--el-bg-color);
|
|
@@ -387,23 +425,79 @@ onMounted(() => {
|
|
}
|
|
}
|
|
|
|
|
|
.conversation-item {
|
|
.conversation-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
padding: 12px 16px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
- cursor: pointer;
|
|
|
|
transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
color: var(--el-text-color-regular);
|
|
color: var(--el-text-color-regular);
|
|
border: 1px solid transparent;
|
|
border: 1px solid transparent;
|
|
|
|
+ position: relative;
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
background: var(--el-fill-color-light);
|
|
background: var(--el-fill-color-light);
|
|
color: var(--el-text-color-primary);
|
|
color: var(--el-text-color-primary);
|
|
|
|
+
|
|
|
|
+ .conversation-actions {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
&.active {
|
|
&.active {
|
|
background: var(--el-color-primary-light-9);
|
|
background: var(--el-color-primary-light-9);
|
|
color: var(--el-color-primary);
|
|
color: var(--el-color-primary);
|
|
border-color: var(--el-color-primary-light-7);
|
|
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;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|