94 lines
3.5 KiB
HTML
Executable File
94 lines
3.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Sidebar</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.14/dist/index.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.14/dist/index.full.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.1.0/dist/index.iife.js"></script>
|
|
<link rel="stylesheet" href="conversation-sidebar.css">
|
|
<style>
|
|
body { margin: 0; font-family: Arial, sans-serif; }
|
|
.main-container { display: flex; height: 100vh; }
|
|
.content { flex: 1; padding: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="main-container">
|
|
<!-- 简化版侧边栏 -->
|
|
<div class="conversation-sidebar">
|
|
<div class="sidebar-header">
|
|
<button class="new-chat-btn" @click="createConversation">
|
|
<el-icon><plus /></el-icon>
|
|
<span>New Chat</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="conversation-list">
|
|
<div class="list-section">
|
|
<div class="section-title">会话列表</div>
|
|
<div v-for="conv in conversations" :key="conv.id"
|
|
class="conversation-item"
|
|
@click="selectConv(conv)">
|
|
<div class="item-icon">
|
|
<el-icon><chat-dot-round /></el-icon>
|
|
</div>
|
|
<div class="item-content">
|
|
<div class="item-title">{{ conv.title }}</div>
|
|
<div class="item-meta">
|
|
<span class="message-count">{{ conv.message_count }}条消息</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h1>主内容区</h1>
|
|
<p>当前会话: {{ currentConv?.title || '未选择' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref } = Vue;
|
|
|
|
const app = createApp({
|
|
setup() {
|
|
const conversations = ref([
|
|
{ id: 1, title: 'SPL分析', message_count: 5 },
|
|
{ id: 2, title: 'TCP进化', message_count: 3 },
|
|
]);
|
|
const currentConv = ref(null);
|
|
|
|
const createConversation = () => {
|
|
conversations.value.unshift({
|
|
id: Date.now(),
|
|
title: '新会话',
|
|
message_count: 0
|
|
});
|
|
};
|
|
|
|
const selectConv = (conv) => {
|
|
currentConv.value = conv;
|
|
};
|
|
|
|
return {
|
|
conversations,
|
|
currentConv,
|
|
createConversation,
|
|
selectConv
|
|
};
|
|
}
|
|
});
|
|
|
|
app.use(ElementPlus);
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|