-
- {{ content }}
+
@@ -106,12 +156,42 @@ async function handleImitation() {
仿写
-
+
+
+
+
+ {{ message.content }}
+
+
+
+ 暂无AI对话记录
+
+
+
-
@@ -172,18 +252,78 @@ body {
padding: 20px;
color: #ecf0f1;
min-height: 400px;
+ display: flex;
+ flex-direction: column;
+}
+
+.content-wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.content-scrollable {
+ flex: 1;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ word-break: break-word;
+ padding-right: 20px;
+ text-align: left;
+ min-height: 0;
+}
+
+.content-footer {
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.7);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.token-info {
+ text-align: left;
+}
+
+.word-count {
+ text-align: right;
+}
+
+.content-scrollable::-webkit-scrollbar {
+ width: 8px;
+}
+
+.content-scrollable::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+}
+
+.content-scrollable::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 4px;
+}
+
+.content-scrollable::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.5);
}
.imitation-container {
- height: 100%;
- padding: 20px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ min-height: 0;
}
.imitation-button-container {
+ flex: 1;
display: flex;
justify-content: center;
align-items: center;
- height: 100%;
+ min-height: 0;
}
.imitation-button {
@@ -191,10 +331,42 @@ body {
font-size: 18px;
}
-.imitation-content {
- height: 100%;
- overflow-y: auto;
- white-space: pre-wrap;
+.ai-chat-container {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.ai-chat-message {
+ max-width: 80%;
+ padding: 10px 15px;
+ border-radius: 18px;
+ margin-bottom: 10px;
+}
+
+.user-message {
+ align-self: flex-end;
+ background-color: #3498db;
+ color: white;
+ border-bottom-right-radius: 4px;
+}
+
+.ai-message {
+ align-self: flex-start;
+ background-color: rgba(255, 255, 255, 0.1);
+ color: #ecf0f1;
+ border-bottom-left-radius: 4px;
+}
+
+.message-content {
word-break: break-word;
+ white-space: pre-wrap;
+}
+
+.empty-ai-messages {
+ text-align: center;
+ color: rgba(255, 255, 255, 0.5);
+ padding: 40px 0;
+ font-style: italic;
}
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 3cf943c..b1fcee2 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,7 +1,7 @@
@@ -55,7 +150,163 @@ onMounted(() => {
暂无小说文件
+
+
+
+
+
+
+ 加载中...
+
+
+
+
+
+
+
+ 删除
+
+
+
+
+
+ 添加
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载中...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+