中看不中用的ai界面

Front/vue-unilife/src/views/AiManager.vue

@@ -55,33 +55,44 @@
   
   // 定义 HistoryItem 接口
   interface HistoryItem {
-    text: string;
-  }
-  
-  const message = ref('');
-  const historyItems = ref<HistoryItem[]>([
-    { text: '这是一个历史对话' },
-    { text: '这是一个历史对话' },
-  ]);
-  
-  const sendMessage = () => {
-    const msg = message.value.trim();
-    if (msg) {
-      console.log('发送消息:', msg);
-      // 这里可以添加实际的发送逻辑
-      message.value = '';
-    }
-  };
+  id: number; // 唯一标识符
+  text: string; // 对话内容
+}
   
+// 历史对话列表
+const historyItems = ref<HistoryItem[]>([
+  { id: 1, text: '这是一个历史对话' },
+  { id: 2, text: '这是另一个历史对话' },
+]);
+
+// 当前输入的消息
+const message = ref('');
+  
+// 发送消息
+const sendMessage = () => {
+  const msg = message.value.trim();
+  if (msg) {
+    const newItem: HistoryItem = {
+      id: Date.now(), // 使用时间戳作为唯一标识符
+      text: msg,
+    };
+    historyItems.value.push(newItem); // 添加到历史对话列表
+    message.value = ''; // 清空输入框
+  }
+};
+
+  // 编辑历史对话
   const editItem = (item: HistoryItem) => {
-    console.log('编辑历史对话:', item.text);
-    // 这里可以添加编辑逻辑
-  };
-  
-  const deleteItem = (item: HistoryItem) => {
-    console.log('删除历史对话:', item.text);
-    // 这里可以添加删除逻辑
-  };
+  const newText = prompt('编辑对话内容：', item.text);
+  if (newText !== null) {
+    item.text = newText.trim();
+  }
+};
+
+// 删除历史对话
+const deleteItem = (item: HistoryItem) => {
+  historyItems.value = historyItems.value.filter((history) => history.id !== item.id);
+};
   </script>
   
   <style scoped>
@@ -114,18 +125,23 @@
     height: 100%;
   }
   
-  /* 侧边栏 */
+  /* 历史对话栏 */
   .sidebar {
     width: 300px;
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
-    border-right: 1px solid rgba(200, 180, 255, 0.3);
+    border: 2px solid rgba(133, 88, 207, 0.5);
     padding: 20px;
+    margin-left: 150px;
     overflow-y: auto;
-  }
+    height: 80%; /* 设置高度与 .chat-area 的高度一致 */
+    margin-top: 5%; /* 确保与 .chat-area 的顶部对齐 */
+    border-radius:10px;
+    transform: translateX(100px);
+}
   
   .sidebar-title {
-    font-size: 18px;
+    font-size: 26px;
     font-weight: bold;
     color: #333;
     margin-bottom: 20px;
@@ -138,7 +154,7 @@
   
   .history-item {
     background: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(200, 180, 255, 0.3);
+    border: 2px solid rgba(133, 88, 207, 0.5);
     border-radius: 8px;
     padding: 12px 16px;
     margin-bottom: 12px;
@@ -155,7 +171,7 @@
   }
   
   .history-text {
-    font-size: 14px;
+    font-size: 18px;
     color: #666;
     flex: 1;
   }
@@ -184,6 +200,7 @@
     display: flex;
     flex-direction: column;
     background: rgba(255, 255, 255, 0.5);
+    border: 2px solid rgba(133, 88, 207, 0.5);
     margin-top: 5%;
     margin-left: 7%;
     width: 60%;
@@ -193,7 +210,7 @@
   
   .chat-content {
     flex: 1;
-    padding: 20px;
+    padding: 40px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -230,33 +247,39 @@
   }
   
   .welcome-text {
-    font-size: 16px;
+    font-size: 20px;
     color: #333;
   }
   
   /* 输入区域 */
   .input-area {
-    padding: 20px;
+    padding: 30px;
     border-top: 1px solid rgba(200, 180, 255, 0.3);
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
-  }
-  
-  .input-container {
+    height: 300px;
+    display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平方向居中 */
+    align-items: center; /* 垂直方向居中 */
+    border-radius: 0 0 10px 10px; /* 设置下两个角为圆角，值为 20px */
+}
+
+.input-container {
     display: flex;
-    gap: 12px;
-    align-items: flex-end;
-  }
+    width: 100%;
+    gap: 16px;
+    align-items: flex-end; /* 子元素在垂直方向底部对齐 */
+    position: relative; /* 设置相对定位以便按钮可以绝对定位 */
+}
   
   .message-input {
     flex: 1;
-    min-height: 100px;
-    max-height: 200px;
+    height: 230px;
     padding: 16px;
     border: 1px solid rgba(200, 180, 255, 0.5);
     border-radius: 12px;
     resize: none;
-    font-size: 14px;
+    font-size: 20px;
     font-family: inherit;
     outline: none;
     background: rgba(255, 255, 255, 0.9);
@@ -268,16 +291,19 @@
   }
   
   .send-button {
+    position: absolute; 
+    bottom: 20px; 
+    right: 20px; 
     padding: 12px 24px;
     background: linear-gradient(45deg, #9c88ff, #ff6b9d);
     color: white;
     border: none;
     border-radius: 8px;
-    font-size: 14px;
+    font-size: 20px;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
     white-space: nowrap;
-  }
+}
   
   .send-button:hover {
     transform: translateY(-2px);