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

2025-11-19 20:16:31 +08:00
parent 241471f17a
commit ca04195846
8 changed files with 70 additions and 81 deletions
--- a/apps/web-antd/src/views/ai/chat/index/data.ts
+++ b/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,
      },
--- a/apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue
@@ -230,31 +230,28 @@ async function updateConversationTitle(
 async function deleteChatConversation(
  conversation: AiChatConversationApi.ChatConversation,
 ) {
-  try {
-    // 删除的二次确认
-    await confirm(`是否确认删除对话 - ${conversation.title}?`);
-    // 发起删除
-    await deleteChatConversationMy(conversation.id);
-    message.success('对话已删除');
-    // 刷新列表
-    await getChatConversationList();
-    // 回调
-    emits('onConversationDelete', conversation);
-  } catch {}
+  // 删除的二次确认
+  await confirm(`是否确认删除对话 - ${conversation.title}?`);
+  // 发起删除
+  await deleteChatConversationMy(conversation.id);
+  message.success('对话已删除');
+  // 刷新列表
+  await getChatConversationList();
+  // 回调
+  emits('onConversationDelete', conversation);
 }

+/** 清空未置顶的对话 */
 async function handleClearConversation() {
-  try {
-    await confirm('确认后对话会全部清空，置顶的对话除外。');
-    await deleteChatConversationMyByUnpinned();
-    message.success($t('ui.actionMessage.operationSuccess'));
-    // 清空对话、对话内容
-    activeConversationId.value = null;
-    // 获取对话列表
-    await getChatConversationList();
-    // 回调 方法
-    emits('onConversationClear');
-  } catch {}
+  await confirm('确认后对话会全部清空，置顶的对话除外。');
+  await deleteChatConversationMyByUnpinned();
+  message.success($t('ui.actionMessage.operationSuccess'));
+  // 清空对话、对话内容
+  activeConversationId.value = null;
+  // 获取对话列表
+  await getChatConversationList();
+  // 回调 方法
+  emits('onConversationClear');
 }

 /** 对话置顶 */
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.vue
+++ b/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
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/list.vue
+++ b/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
--- a/apps/web-ele/src/views/ai/chat/index/index.vue
+++ b/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"
--- a/apps/web-ele/src/views/ai/chat/index/modules/conversation/list.vue
+++ b/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
--- a/apps/web-ele/src/views/ai/chat/index/modules/message/list-empty.vue
+++ b/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
--- a/apps/web-ele/src/views/ai/chat/index/modules/message/list.vue
+++ b/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