feat：【ele】【ai】write 的代码迁移

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

@@ -6,7 +6,7 @@ import { nextTick, ref } from 'vue';
 import { Page } from '@vben/common-ui';
 import { WriteExample } from '@vben/constants';
 
-import { ElMessage as message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
 import { writeStream } from '#/api/ai/write';
 
@@ -35,7 +35,7 @@ function handleSubmit(data: Partial<AiWriteApi.Write>) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        message.error(`写作异常! ${msg}`);
+        ElMessage.error(`写作异常! ${msg}`);
         handleStopStream();
         return;
       }

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

@@ -8,7 +8,7 @@ import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
 import { createReusableTemplate } from '@vueuse/core';
-import { ElButton as Button, ElMessage as message } from 'element-plus';
+import { ElButton, ElInput, ElMessage } from 'element-plus';
 
 import Tag from './tag.vue';
 
@@ -99,11 +99,11 @@ function handleSubmit() {
     selectedTab.value === AiWriteTypeEnum.REPLY &&
     !formData.value.originalContent
   ) {
-    message.warning('请输入原文');
+    ElMessage.warning('请输入原文');
     return;
   }
   if (!formData.value.prompt) {
-    message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
+    ElMessage.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
     return;
   }
 
@@ -175,11 +175,13 @@ function handleSubmit() {
             hint="示例"
             label="写作内容"
           />
-          <el-input
+          <ElInput
             v-model="formData.prompt"
             type="textarea"
             :maxlength="500"
             :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
             placeholder="请输入写作内容"
             show-word-limit
           />
@@ -190,20 +192,24 @@ function handleSubmit() {
             hint="示例"
             label="原文"
           />
-          <el-input
+          <ElInput
             v-model="formData.originalContent"
             type="textarea"
             :maxlength="500"
             :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
             placeholder="请输入原文"
             show-word-limit
           />
           <ReuseLabel label="回复内容" />
-          <el-input
+          <ElInput
             v-model="formData.prompt"
             type="textarea"
             :maxlength="500"
             :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
             placeholder="请输入回复内容"
             show-word-limit
           />
@@ -231,12 +237,12 @@ function handleSubmit() {
         />
 
         <div class="mt-3 flex items-center justify-center">
-          <Button :disabled="isWriting" class="mr-2" @click="reset">
+          <ElButton :disabled="isWriting" class="mr-2" @click="reset">
             重置
-          </Button>
-          <Button type="primary" :loading="isWriting" @click="handleSubmit">
+          </ElButton>
+          <ElButton type="primary" :loading="isWriting" @click="handleSubmit">
             生成
-          </Button>
+          </ElButton>
         </div>
       </div>
     </div>

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

@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
-import { ElButton as Button, ElCard as Card, ElMessage as message } from 'element-plus';
+import { ElButton, ElCard, ElInput, ElMessage } from 'element-plus';
 
 const props = defineProps({
   content: {
@@ -47,16 +47,16 @@ function copyContent() {
 /** 复制成功的时候 copied.value 为 true */
 watch(copied, (val) => {
   if (val) {
-    message.success('复制成功');
+    ElMessage.success('复制成功');
   }
 });
 </script>
 <template>
-  <Card class="flex h-full flex-col">
+  <ElCard class="flex h-full flex-col">
     <template #header>
       <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
         <span>预览</span>
-        <Button
+        <ElButton
           type="primary"
           v-show="showCopy"
           @click="copyContent"
@@ -64,7 +64,7 @@ watch(copied, (val) => {
         >
           <IconifyIcon icon="lucide:copy" />
           复制
-        </Button>
+        </ElButton>
       </h3>
     </template>
     <div
@@ -74,7 +74,7 @@ watch(copied, (val) => {
       <div
         class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
       >
-        <Button
+        <ElButton
           v-show="isWriting"
           class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
           @click="emits('stopStream')"
@@ -86,17 +86,19 @@ watch(copied, (val) => {
             </div>
           </template>
           终止生成
-        </Button>
-        <el-input
+        </ElButton>
+        <ElInput
           id="inputId"
           v-model="compContent"
           type="textarea"
-          :autosize="{ minRows: 4, maxRows: 25 }"
+          autosize
+          :input-style="{ boxShadow: 'none' }"
+          resize="none"
           placeholder="生成的内容……"
         />
       </div>
     </div>
-  </Card>
+  </ElCard>
 </template>
 
 <style lang="scss" scoped>

apps/web-ele/src/views/ai/write/manager/index.vue

@@ -4,7 +4,7 @@ import type { AiWriteApi } from '#/api/ai/write';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { ElMessage as message } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteWrite, getWritePage } from '#/api/ai/write';
@@ -17,20 +17,20 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
-async function handleDelete(row: AiWriteApi.AiWritePageReq) {
-  const hideLoading = message.loading({
-    message: $t('ui.actionMessage.deleting', [row.id]),
-    duration: 0,
+/** 删除写作记录 */
+async function handleDelete(row: AiWriteApi.Write) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
   });
   try {
-    await deleteWrite(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await deleteWrite(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
-    hideLoading();
+    loadingInstance.close();
   }
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -58,7 +58,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AiWriteApi.AiWritePageReq>,
+  } as VxeTableGridOptions<AiWriteApi.Write>,
 });
 </script>