feat：【antd】【ai】write 的代码优化

apps/web-antd/src/views/ai/write/index/index.vue

@@ -3,28 +3,30 @@ import type { AiWriteApi } from '#/api/ai/write';
 
 import { nextTick, ref } from 'vue';
 
-import { alert, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { WriteExample } from '@vben/constants';
 
+import { message } from 'ant-design-vue';
+
 import { writeStream } from '#/api/ai/write';
 
-import Left from './components/Left.vue';
+import Left from './modules/left.vue';
-import Right from './components/Right.vue';
+import Right from './modules/right.vue';
 
 const writeResult = ref(''); // 写作结果
 const isWriting = ref(false); // 是否正在写作中
 const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
 
+const rightRef = ref<InstanceType<typeof Right>>(); // 写作面板
+
 /** 停止 stream 生成 */
-function stopStream() {
+function handleStopStream() {
   abortController.value?.abort();
   isWriting.value = false;
 }
 
-/** 执行写作 */
+/** 提交写作 */
-const rightRef = ref<InstanceType<typeof Right>>();
+function handleSubmit(data: Partial<AiWriteApi.Write>) {
-
-function submit(data: Partial<AiWriteApi.Write>) {
   abortController.value = new AbortController();
   writeResult.value = '';
   isWriting.value = true;
@@ -33,8 +35,8 @@ function submit(data: Partial<AiWriteApi.Write>) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        alert(`写作异常! ${msg}`);
+        message.error(`写作异常! ${msg}`);
-        stopStream();
+        handleStopStream();
         return;
       }
       writeResult.value = writeResult.value + data;
@@ -43,10 +45,10 @@ function submit(data: Partial<AiWriteApi.Write>) {
       rightRef.value?.scrollToBottom();
     },
     ctrl: abortController.value,
-    onClose: stopStream,
+    onClose: handleStopStream,
     onError: (error: any) => {
       console.error('写作异常', error);
-      stopStream();
+      handleStopStream();
       // 需要抛出异常，禁止重试
       throw error;
     },
@@ -59,7 +61,7 @@ function handleExampleClick(type: keyof typeof WriteExample) {
 }
 
 /** 点击重置的时候清空写作的结果*/
-function reset() {
+function handleReset() {
   writeResult.value = '';
 }
 </script>
@@ -70,13 +72,13 @@ function reset() {
       <Left
         :is-writing="isWriting"
         class="mr-4 h-full rounded-lg"
-        @submit="submit"
+        @submit="handleSubmit"
-        @reset="reset"
+        @reset="handleReset"
         @example="handleExampleClick"
       />
       <Right
         :is-writing="isWriting"
-        @stop-stream="stopStream"
+        @stop-stream="handleStopStream"
         ref="rightRef"
         class="flex-grow"
         v-model:content="writeResult"

apps/web-antd/src/views/ai/write/index/modules/left.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import type { AiWriteApi } from '#/api/ai/write';
 
 import { ref } from 'vue';
@@ -11,7 +10,7 @@ import { IconifyIcon } from '@vben/icons';
 import { createReusableTemplate } from '@vueuse/core';
 import { Button, message, Textarea } from 'ant-design-vue';
 
-import Tag from './Tag.vue';
+import Tag from './tag.vue';
 
 type TabType = AiWriteApi.Write['type'];
 
@@ -34,6 +33,7 @@ function omit(obj: Record<string, any>, keysToOmit: string[]) {
   }
   return result;
 }
+
 /** 点击示例的时候，将定义好的文章作为示例展示出来 */
 function example(type: 'reply' | 'write') {
   formData.value = {
@@ -79,13 +79,11 @@ const initData: AiWriteApi.Write = {
   length: 1,
   format: 1,
 };
-
 const formData = ref<AiWriteApi.Write>({ ...initData });
+const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>; // 用来记录切换之前所填写的数据，切换的时候给赋值回来
 
-/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 */
+/** 切换 tab */
-const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>;
+function handleSwitchTab(value: TabType) {
-/** 切换tab */
-function switchTab(value: TabType) {
   if (value !== selectedTab.value) {
     // 保存之前的久数据
     recordFormData[selectedTab.value] = formData.value;
@@ -96,8 +94,11 @@ function switchTab(value: TabType) {
 }
 
 /** 提交写作 */
-function submit() {
+function handleSubmit() {
-  if (selectedTab.value === 2 && !formData.value.originalContent) {
+  if (
+    selectedTab.value === AiWriteTypeEnum.REPLY &&
+    !formData.value.originalContent
+  ) {
     message.warning('请输入原文');
     return;
   }
@@ -105,12 +106,13 @@ function submit() {
     message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
     return;
   }
+
   emit('submit', {
-    /** 撰写的时候没有 originalContent 字段*/
+    // 撰写的时候没有 originalContent 字段
     ...(selectedTab.value === 1
       ? omit(formData.value, ['originalContent'])
       : formData.value),
-    /** 使用选中 tab 值覆盖当前的 type 类型 */
+    // 使用选中 tab 值覆盖当前的 type 类型
     type: selectedTab.value,
   });
 }
@@ -156,7 +158,7 @@ function submit() {
             v-for="tab in tabs"
             :key="tab.value"
             :active="tab.value === selectedTab"
-            :item-click="() => switchTab(tab.value)"
+            :item-click="() => handleSwitchTab(tab.value)"
             :text="tab.text"
             class="relative z-20"
           />
@@ -167,7 +169,7 @@ function submit() {
       class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
     >
       <div>
-        <template v-if="selectedTab === 1">
+        <template v-if="selectedTab === AiWriteTypeEnum.WRITING">
           <ReuseLabel
             :hint-click="() => example('write')"
             hint="示例"
@@ -181,7 +183,6 @@ function submit() {
             show-count
           />
         </template>
-
         <template v-else>
           <ReuseLabel
             :hint-click="() => example('reply')"
@@ -195,7 +196,6 @@ function submit() {
             placeholder="请输入原文"
             show-count
           />
-
           <ReuseLabel label="回复内容" />
           <Textarea
             v-model:value="formData.prompt"
@@ -231,7 +231,7 @@ function submit() {
           <Button :disabled="isWriting" class="mr-2" @click="reset">
             重置
           </Button>
-          <Button type="primary" :loading="isWriting" @click="submit">
+          <Button type="primary" :loading="isWriting" @click="handleSubmit">
             生成
           </Button>
         </div>

apps/web-antd/src/views/ai/write/index/modules/right.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import { computed, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -9,16 +8,15 @@ import { Button, Card, message, Textarea } from 'ant-design-vue';
 
 const props = defineProps({
   content: {
-    // 生成的结果
     type: String,
     default: '',
-  },
+  }, // 生成的结果
   isWriting: {
-    // 是否正在生成文章
     type: Boolean,
     default: false,
-  },
+  }, // 是否正在生成文章
 });
+
 const emits = defineEmits(['update:content', 'stopStream']);
 const { copied, copy } = useClipboard();
 
@@ -58,7 +56,6 @@ watch(copied, (val) => {
     <template #title>
       <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
         <span>预览</span>
-        <!-- 展示在右上角 -->
         <Button
           type="primary"
           v-show="showCopy"
@@ -75,12 +72,11 @@ watch(copied, (val) => {
       class="hide-scroll-bar box-border h-full overflow-y-auto"
     >
       <div
-        class="bg-card relative box-border min-h-full w-full flex-grow p-3 sm:p-7"
+        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
       >
-        <!-- 终止生成内容的按钮 -->
         <Button
           v-show="isWriting"
-          class="absolute bottom-2 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-5"
+          class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
           @click="emits('stopStream')"
           size="small"
         >
@@ -94,7 +90,7 @@ watch(copied, (val) => {
         <Textarea
           id="inputId"
           v-model:value="compContent"
-          auto-size
+          :auto-size="true"
           :bordered="false"
           placeholder="生成的内容……"
         />
@@ -130,7 +126,7 @@ watch(copied, (val) => {
   }
 }
 
-// markmap的tool样式覆盖
+// markmap 的 tool 样式覆盖
 :deep(.markmap) {
   width: 100%;
 }

apps/web-antd/src/views/ai/write/index/modules/tag.vue

@@ -1,6 +1,5 @@
 <!-- 标签选项 -->
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 const props = withDefaults(
   defineProps<{
     [k: string]: any;