feat：【ele】【ai】chat/index：关键组件的 review

apps/web-antd/src/views/ai/chat/index/data.ts

@@ -42,7 +42,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入温度参数',
-        class: 'w-full',
         precision: 2,
         min: 0,
         max: 2,
@@ -55,7 +54,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入回复数 Token 数',
-        class: 'w-full',
         min: 0,
         max: 8192,
       },
@@ -67,7 +65,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入上下文数量',
-        class: 'w-full',
         min: 0,
         max: 20,
       },

apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue

@@ -230,7 +230,6 @@ async function updateConversationTitle(
 async function deleteChatConversation(
   conversation: AiChatConversationApi.ChatConversation,
 ) {
-  try {
   // 删除的二次确认
   await confirm(`是否确认删除对话 - ${conversation.title}?`);
   // 发起删除
@@ -240,11 +239,10 @@ async function deleteChatConversation(
   await getChatConversationList();
   // 回调
   emits('onConversationDelete', conversation);
-  } catch {}
 }
 
+/** 清空未置顶的对话 */
 async function handleClearConversation() {
-  try {
   await confirm('确认后对话会全部清空，置顶的对话除外。');
   await deleteChatConversationMyByUnpinned();
   message.success($t('ui.actionMessage.operationSuccess'));
@@ -254,7 +252,6 @@ async function handleClearConversation() {
   await getChatConversationList();
   // 回调 方法
   emits('onConversationClear');
-  } catch {}
 }
 
 /** 对话置顶 */

apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.vue

@@ -18,11 +18,9 @@ async function handlerPromptClick(prompt: any) {
 </script>
 <template>
   <div class="relative flex h-full w-full flex-row justify-center">
-    <!-- center-container -->
     <div class="flex flex-col justify-center">
       <!-- title -->
       <div class="text-center text-3xl font-bold">芋道 AI</div>
-
       <!-- role-list -->
       <div class="mt-5 flex w-96 flex-wrap items-center justify-center">
         <div

apps/web-antd/src/views/ai/chat/index/modules/message/list.vue

@@ -88,6 +88,7 @@ async function copyContent(content: string) {
   await copy(content);
   message.success('复制成功！');
 }
+
 /** 删除 */
 async function handleDelete(id: number) {
   // 删除 message

apps/web-ele/src/views/ai/chat/index/index.vue

@@ -547,6 +547,7 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
+    <!-- TODO @AI：高度暂时没占满 -->
     <ElContainer
       direction="horizontal"
       class="absolute left-0 top-0 m-4 h-[calc(100%-2rem)] w-[calc(100%-2rem)]"
@@ -574,6 +575,7 @@ onMounted(async () => {
             </span>
           </div>
 
+          <!-- TODO @AI：间隙太大 -->
           <div class="flex w-72 justify-end" v-if="activeConversation">
             <ElButton
               type="primary"

apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue

@@ -179,47 +179,6 @@ async function createConversation() {
   emits('onConversationCreate');
 }
 
-/** 清空未置顶的对话 */
-async function handleClearConversation() {
-  try {
-    await confirm('确认后对话会全部清空，置顶的对话除外。');
-    await deleteChatConversationMyByUnpinned();
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    // 清空对话、对话内容
-    activeConversationId.value = null;
-    // 获取对话列表
-    await getChatConversationList();
-    // 回调 方法
-    emits('onConversationClear');
-  } catch {}
-}
-
-/** 删除聊天对话 */
-async function deleteChatConversation(
-  conversation: AiChatConversationApi.ChatConversation,
-) {
-  try {
-    // 删除的二次确认
-    await confirm(`是否确认删除对话 - ${conversation.title}?`);
-    // 发起删除
-    await deleteChatConversationMy(conversation.id);
-    ElMessage.success('对话已删除');
-    // 刷新列表
-    await getChatConversationList();
-    // 回调
-    emits('onConversationDelete', conversation);
-  } catch {}
-}
-
-/** 对话置顶 */
-async function handleTop(conversation: AiChatConversationApi.ChatConversation) {
-  // 更新对话置顶
-  conversation.pinned = !conversation.pinned;
-  await updateChatConversationMy(conversation);
-  // 刷新对话
-  await getChatConversationList();
-}
-
 /** 修改对话的标题 */
 async function updateConversationTitle(
   conversation: AiChatConversationApi.ChatConversation,
@@ -273,6 +232,43 @@ async function updateConversationTitle(
   });
 }
 
+/** 删除聊天对话 */
+async function deleteChatConversation(
+  conversation: AiChatConversationApi.ChatConversation,
+) {
+  // 删除的二次确认
+  await confirm(`是否确认删除对话 - ${conversation.title}?`);
+  // 发起删除
+  await deleteChatConversationMy(conversation.id);
+  ElMessage.success('对话已删除');
+  // 刷新列表
+  await getChatConversationList();
+  // 回调
+  emits('onConversationDelete', conversation);
+}
+
+/** 清空未置顶的对话 */
+async function handleClearConversation() {
+  await confirm('确认后对话会全部清空，置顶的对话除外。');
+  await deleteChatConversationMyByUnpinned();
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  // 清空对话、对话内容
+  activeConversationId.value = null;
+  // 获取对话列表
+  await getChatConversationList();
+  // 回调 方法
+  emits('onConversationClear');
+}
+
+/** 对话置顶 */
+async function handleTop(conversation: AiChatConversationApi.ChatConversation) {
+  // 更新对话置顶
+  conversation.pinned = !conversation.pinned;
+  await updateChatConversationMy(conversation);
+  // 刷新对话
+  await getChatConversationList();
+}
+
 // ============ 角色仓库 ============
 
 /** 角色仓库抽屉 */
@@ -280,15 +276,13 @@ const handleRoleRepository = async () => {
   drawerApi.open();
 };
 
-/** 监听 activeId 变化 */
+/** 监听选中的对话 */
-watch(
-  () => props.activeId,
-  (newValue) => {
-    activeConversationId.value = newValue;
-  },
-);
-
 const { activeId } = toRefs(props);
+watch(activeId, async (newValue) => {
+  activeConversationId.value = newValue;
+});
+
+defineExpose({ createConversation });
 
 /** 初始化 */
 onMounted(async () => {
@@ -306,8 +300,6 @@ onMounted(async () => {
     }
   }
 });
-
-defineExpose({ createConversation });
 </script>
 
 <template>
@@ -388,6 +380,7 @@ defineExpose({ createConversation });
                 v-show="hoverConversationId === conversation.id"
                 class="relative right-0.5 flex items-center text-gray-400"
               >
+                <!-- TODO @AI：三个按钮之间，间隙太大了。 -->
                 <ElButton
                   class="mr-0 px-1"
                   link

apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue

@@ -18,11 +18,9 @@ async function handlerPromptClick(prompt: any) {
 </script>
 <template>
   <div class="relative flex h-full w-full flex-row justify-center">
-    <!-- center-container -->
     <div class="flex flex-col justify-center">
       <!-- title -->
       <div class="text-center text-3xl font-bold">芋道 AI</div>
-
       <!-- role-list -->
       <div class="mt-5 flex w-96 flex-wrap items-center justify-center">
         <div

apps/web-ele/src/views/ai/chat/index/modules/message/list.vue

@@ -37,7 +37,7 @@ const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']);
 const { copy } = useClipboard(); // 初始化 copy 到粘贴板
 const userStore = useUserStore();
 
-// 判断"消息列表"滚动的位置(用于判断是否需要滚动到消息最下方)
+// 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)
 const messageContainer: any = ref(null);
 const isScrolling = ref(false); // 用于判断用户是否在滚动
 
@@ -88,6 +88,7 @@ async function copyContent(content: string) {
   await copy(content);
   ElMessage.success('复制成功！');
 }
+
 /** 删除 */
 async function handleDelete(id: number) {
   // 删除 message
@@ -152,6 +153,7 @@ onMounted(async () => {
             />
           </div>
           <div class="mt-2 flex flex-row">
+            <!-- TODO @AI：按钮之间，空隙太大 -->
             <ElButton
               class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
               text
@@ -195,6 +197,7 @@ onMounted(async () => {
             </div>
           </div>
           <div class="mt-2 flex flex-row-reverse">
+            <!-- TODO @AI：按钮之间，空隙太大 -->
             <ElButton
               class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
               text