update 优化 !pr850 相关代码用法与问题

src/views/ai/chat/index.vue

@@ -93,6 +93,14 @@ async function onSelectAgent(agent: AgentItem) {
   await loadConversations(agent.id);
 }
 
+async function handleNewChat() {
+  if (!currentAgent.value && agents.value.length) {
+    currentAgent.value = agents.value[0];
+    await loadConversations(currentAgent.value.id);
+  }
+  currentConversationId.value = '';
+}
+
 async function onDeleteConversation(conversationId: string) {
   if (!currentAgent.value) return;
   try {
@@ -140,7 +148,7 @@ onMounted(() => {
         @select-agent="onSelectAgent"
         @select-conversation="currentConversationId = $event"
         @delete-conversation="onDeleteConversation"
-        @new-chat="currentConversationId = ''"
+        @new-chat="handleNewChat"
       />
       <ChatMain
         :agent="currentAgent"
@@ -155,16 +163,20 @@ onMounted(() => {
 .ai-chat-page {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 84px);
+  height: calc(100vh - 123px);
   min-height: 0;
   background: var(--el-bg-color-page);
+  border-radius: var(--app-radius-base);
   overflow: hidden;
 }
 
 .chat-header {
-  height: 46px;
+  flex: 0 0 38px;
-  padding: 0 14px;
+  height: 38px;
+  padding: 0 12px;
   border-bottom: 1px solid var(--app-surface-border);
+  border-top-left-radius: var(--app-radius-base);
+  border-top-right-radius: var(--app-radius-base);
   background: var(--app-surface-bg);
   display: flex;
   align-items: center;
@@ -175,14 +187,14 @@ onMounted(() => {
   align-items: center;
   gap: 8px;
   color: var(--app-text-title);
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
 }
 
 .brand-dot {
-  width: 16px;
+  width: 12px;
-  height: 16px;
+  height: 12px;
-  border-radius: 50%;
+  border-radius: var(--app-radius-sm);
   background: var(--el-color-primary);
 }
 
@@ -195,7 +207,7 @@ onMounted(() => {
 
 @media (max-width: 768px) {
   .ai-chat-page {
-    height: calc(100vh - 64px);
+    height: calc(100vh - 88px);
   }
 
   .chat-body {

src/views/ai/chat/modules/chat-input.vue

@@ -39,16 +39,16 @@ function submit() {
 
 <style scoped lang="scss">
 .chat-input-wrap {
-  padding: 10px 18px 14px;
+  padding: 8px 14px 10px;
 }
 
 .chat-input-box {
   max-width: 920px;
   margin: 0 auto;
-  border-radius: 8px;
+  border-radius: var(--app-radius-base);
   border: 1px solid var(--app-surface-border);
   background: var(--app-surface-bg);
-  padding: 12px;
+  padding: 10px;
   box-shadow: var(--app-shadow-sm);
 }
 

src/views/ai/chat/modules/chat-main.vue

@@ -319,7 +319,7 @@ onBeforeUnmount(() => {
 
 .chat-scroll {
   flex: 1;
-  padding: 16px 18px 0;
+  padding: 10px 14px 0;
   min-height: 0;
 }
 
@@ -332,9 +332,9 @@ onBeforeUnmount(() => {
 .welcome-card {
   background: var(--app-surface-bg);
   border: 1px solid var(--app-surface-border);
-  border-radius: 8px;
+  border-radius: var(--app-radius-base);
-  padding: 16px;
+  padding: 12px;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
   box-shadow: var(--app-shadow-sm);
 }
 
@@ -349,43 +349,43 @@ onBeforeUnmount(() => {
 }
 
 .agent-name {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--app-text-title);
 }
 
 .agent-desc {
-  margin-top: 4px;
+  margin-top: 2px;
   color: var(--app-text-muted);
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
 .greeting {
-  margin-top: 12px;
+  margin-top: 8px;
   color: var(--app-text-title);
 }
 
 .question-title {
-  margin-top: 14px;
+  margin-top: 10px;
-  padding-top: 10px;
+  padding-top: 8px;
   border-top: 1px solid var(--app-surface-border);
   color: var(--app-text-muted);
   font-size: 13px;
 }
 
 .question-list {
-  margin-top: 8px;
+  margin-top: 6px;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 6px;
 }
 
 .question-pill {
   border: 1px solid var(--app-surface-border);
   background: var(--app-surface-bg);
   color: var(--app-text-title);
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
-  padding: 6px 12px;
+  padding: 5px 10px;
   cursor: pointer;
 }
 
@@ -396,7 +396,7 @@ onBeforeUnmount(() => {
 
 .msg-row {
   display: flex;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .msg-row.user {
@@ -406,11 +406,11 @@ onBeforeUnmount(() => {
 .msg-bubble {
   max-width: 80%;
   white-space: pre-wrap;
-  line-height: 1.7;
+  line-height: 1.6;
   background: var(--app-surface-bg);
   border: 1px solid var(--app-surface-border);
-  border-radius: 8px;
+  border-radius: var(--app-radius-base);
-  padding: 10px 12px;
+  padding: 8px 10px;
   color: var(--app-text-title);
   box-shadow: var(--app-shadow-sm);
 }

src/views/ai/chat/modules/chat-sidebar.vue

@@ -35,7 +35,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 <template>
   <aside class="chat-sidebar">
     <div class="sidebar-block sidebar-head">
-      <el-button class="new-btn" type="primary" plain :disabled="!currentAgent" @click="emit('newChat')">
+      <el-button class="new-btn" type="primary" plain :disabled="!agents.length" @click="emit('newChat')">
         <el-icon><Plus /></el-icon>
         <span>新对话</span>
       </el-button>
@@ -96,7 +96,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 }
 
 .sidebar-head {
-  padding-bottom: 8px;
+  padding-bottom: 6px;
 }
 
 .new-btn {
@@ -108,19 +108,19 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 }
 
 .sidebar-block {
-  padding: 12px;
+  padding: 10px 12px;
 }
 
 .block-title {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   color: var(--app-text-muted);
   font-size: 12px;
 }
 
 .agent-item,
 .conv-item {
-  height: 36px;
+  height: 32px;
-  border-radius: 8px;
+  border-radius: var(--app-radius-md);
   padding: 0 10px;
   display: flex;
   align-items: center;
@@ -143,7 +143,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 .avatar-dot {
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--el-border-radius-round);
   background: var(--el-color-primary);
 }
 
@@ -179,7 +179,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 
 .sidebar-foot {
   border-top: 1px solid var(--app-surface-border);
-  padding: 10px 12px;
+  padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -189,7 +189,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 .user-avatar {
   width: 30px;
   height: 30px;
-  border-radius: 50%;
+  border-radius: var(--el-border-radius-round);
   background: var(--el-color-success);
   color: var(--el-color-white);
   display: flex;