[代码优化]AI: 目录更名writer => write，写作管理调整

src/views/ai/write/index/components/Left.vue

@@ -0,0 +1,213 @@
+<template>
+  <!-- 定义 tab 组件：撰写/回复等 -->
+  <DefineTab v-slot="{ active, text, itemClick }">
+    <span
+      class="inline-block w-1/2 rounded-full cursor-pointer text-center leading-[30px] relative z-1 text-[5C6370] hover:text-black"
+      :class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
+      @click="itemClick"
+    >
+      {{ text }}
+    </span>
+  </DefineTab>
+  <!-- 定义 label 组件：长度/格式/语气/语言等 -->
+  <DefineLabel v-slot="{ label, hint, hintClick }">
+    <h3 class="mt-5 mb-3 flex items-center justify-between text-[14px]">
+      <span>{{ label }}</span>
+      <span
+        @click="hintClick"
+        v-if="hint"
+        class="flex items-center text-[12px] text-[#846af7] cursor-pointer select-none"
+      >
+        <Icon icon="ep:question-filled" />
+        {{ hint }}
+      </span>
+    </h3>
+  </DefineLabel>
+
+  <div class="flex flex-col" v-bind="$attrs">
+    <!-- tab -->
+    <div class="w-full pt-2 bg-[#f5f7f9] flex justify-center">
+      <div class="w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10">
+        <div
+          class="flex items-center relative after:content-[''] after:block after:bg-white after:h-[30px] after:w-1/2 after:absolute after:top-0 after:left-0 after:transition-transform after:rounded-full"
+          :class="
+            selectedTab === AiWriteTypeEnum.REPLY && 'after:transform after:translate-x-[100%]'
+          "
+        >
+          <ReuseTab
+            v-for="tab in tabs"
+            :key="tab.value"
+            :text="tab.text"
+            :active="tab.value === selectedTab"
+            :itemClick="() => switchTab(tab.value)"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="px-7 pb-2 flex-grow overflow-y-auto lg:block w-[380px] box-border bg-[#f5f7f9] h-full"
+    >
+      <div>
+        <template v-if="selectedTab === 1">
+          <ReuseLabel label="写作内容" hint="示例" :hint-click="() => example('write')" />
+          <el-input
+            type="textarea"
+            :rows="5"
+            :maxlength="500"
+            v-model="formData.prompt"
+            placeholder="请输入写作内容"
+            showWordLimit
+          />
+        </template>
+
+        <template v-else>
+          <ReuseLabel label="原文" hint="示例" :hint-click="() => example('reply')" />
+          <el-input
+            type="textarea"
+            :rows="5"
+            :maxlength="500"
+            v-model="formData.originalContent"
+            placeholder="请输入原文"
+            showWordLimit
+          />
+
+          <ReuseLabel label="回复内容" />
+          <el-input
+            type="textarea"
+            :rows="5"
+            :maxlength="500"
+            v-model="formData.prompt"
+            placeholder="请输入回复内容"
+            showWordLimit
+          />
+        </template>
+
+        <ReuseLabel label="长度" />
+        <Tag v-model="formData.length" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_LENGTH)" />
+        <ReuseLabel label="格式" />
+        <Tag v-model="formData.format" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_FORMAT)" />
+        <ReuseLabel label="语气" />
+        <Tag v-model="formData.tone" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_TONE)" />
+        <ReuseLabel label="语言" />
+        <Tag v-model="formData.language" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_LANGUAGE)" />
+
+        <div class="flex items-center justify-center mt-3">
+          <el-button :disabled="isWriting" @click="reset">重置</el-button>
+          <el-button :loading="isWriting" @click="submit" color="#846af7">生成</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+import { ref } from 'vue'
+import Tag from './Tag.vue'
+import { WriteVO } from 'src/api/ai/write'
+import { omit } from 'lodash-es'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants'
+
+type TabType = WriteVO['type']
+
+const message = useMessage() // 消息弹窗
+
+defineProps<{
+  isWriting: boolean
+}>()
+
+const emits = defineEmits<{
+  (e: 'submit', params: Partial<WriteVO>)
+  (e: 'example', param: 'write' | 'reply')
+  (e: 'reset')
+}>()
+
+/** 点击示例的时候，将定义好的文章作为示例展示出来 **/
+const example = (type: 'write' | 'reply') => {
+  formData.value = {
+    ...initData,
+    ...omit(WriteExample[type], ['data'])
+  }
+  emits('example', type)
+}
+
+/** 重置，将表单值作为初选值 **/
+const reset = () => {
+  formData.value = { ...initData }
+  emits('reset')
+}
+
+const selectedTab = ref<TabType>(AiWriteTypeEnum.WRITING)
+const tabs: {
+  text: string
+  value: TabType
+}[] = [
+  { text: '撰写', value: AiWriteTypeEnum.WRITING },
+  { text: '回复', value: AiWriteTypeEnum.REPLY }
+]
+const [DefineTab, ReuseTab] = createReusableTemplate<{
+  active?: boolean
+  text: string
+  itemClick: () => void
+}>()
+
+/**
+ * 可以在 template 里边定义可复用的组件，DefineLabel，ReuseLabel 是采用的解构赋值，都是 Vue 组件
+ *
+ * 直接通过组件的形式使用，<DefineLabel v-slot="{ label, hint, hintClick }"> 中间是需要复用的组件代码 <DefineLabel />，通过 <ReuseLabel /> 来使用定义的组件
+ * DefineLabel 里边的 v-slot="{ label, hint, hintClick }"相当于是解构了组件的 prop，需要注意的是 boolean 类型，需要显式的赋值比如 <ReuseLabel :flag="true" />
+ * 事件也得以 prop 形式传入，不能是 @event的形式，比如下面的 hintClick 需要<ReuseLabel :hintClick="() => { doSomething }"/>
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ */
+const [DefineLabel, ReuseLabel] = createReusableTemplate<{
+  label: string
+  class?: string
+  hint?: string
+  hintClick?: () => void
+}>()
+
+const initData: WriteVO = {
+  type: 1,
+  prompt: '',
+  originalContent: '',
+  tone: 1,
+  language: 1,
+  length: 1,
+  format: 1
+}
+const formData = ref<WriteVO>({ ...initData })
+
+/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 **/
+const recordFormData = {} as Record<AiWriteTypeEnum, WriteVO>
+
+/** 切换tab **/
+const switchTab = (value: TabType) => {
+  if (value !== selectedTab.value) {
+    // 保存之前的久数据
+    recordFormData[selectedTab.value] = formData.value
+    selectedTab.value = value
+    // 将之前的旧数据赋值回来
+    formData.value = { ...initData, ...recordFormData[value] }
+  }
+}
+
+/** 提交写作 */
+const submit = () => {
+  if (selectedTab.value === 2 && !formData.value.originalContent) {
+    message.warning('请输入原文')
+    return
+  }
+  if (!formData.value.prompt) {
+    message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`)
+    return
+  }
+  emits('submit', {
+    /** 撰写的时候没有 originalContent 字段**/
+    ...(selectedTab.value === 1 ? omit(formData.value, ['originalContent']) : formData.value),
+    /** 使用选中 tab 值覆盖当前的 type 类型 **/
+    type: selectedTab.value
+  })
+}
+</script>

src/views/ai/write/index/components/Right.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-card class="my-card h-full">
+    <template #header
+      ><h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
+        <span>预览</span>
+        <!-- 展示在右上角 -->
+        <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
+          <template #icon>
+            <Icon icon="ph:copy-bold" />
+          </template>
+          复制
+        </el-button>
+      </h3></template
+    >
+
+    <div ref="contentRef" class="hide-scroll-bar h-full box-border overflow-y-auto">
+      <div class="w-full min-h-full relative flex-grow bg-white box-border p-3 sm:p-7">
+        <!-- 终止生成内容的按钮 -->
+        <el-button
+          v-show="isWriting"
+          class="absolute bottom-2 sm:bottom-5 left-1/2 -translate-x-1/2 z-36"
+          @click="emits('stopStream')"
+          size="small"
+        >
+          <template #icon>
+            <Icon icon="material-symbols:stop" />
+          </template>
+          终止生成
+        </el-button>
+        <el-input
+          id="inputId"
+          type="textarea"
+          v-model="compContent"
+          autosize
+          :input-style="{ boxShadow: 'none' }"
+          resize="none"
+          placeholder="生成的内容……"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const message = useMessage() // 消息弹窗
+const { copied, copy } = useClipboard() // 粘贴板
+
+const props = defineProps({
+  content: {
+    // 生成的结果
+    type: String,
+    default: ''
+  },
+  isWriting: {
+    // 是否正在生成文章
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['update:content', 'stopStream'])
+
+/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */
+const compContent = computed({
+  get() {
+    return props.content
+  },
+  set(val) {
+    emits('update:content', val)
+  }
+})
+
+/** 滚动 */
+const contentRef = ref<HTMLDivElement>()
+defineExpose({
+  scrollToBottom() {
+    contentRef.value?.scrollTo(0, contentRef.value?.scrollHeight)
+  }
+})
+
+/** 点击复制的时候复制内容 */
+const showCopy = computed(() => props.content && !props.isWriting) // 是否展示复制按钮，在生成内容完成的时候展示
+const copyContent = () => {
+  copy(props.content)
+}
+
+/** 复制成功的时候 copied.value 为 true */
+watch(copied, (val) => {
+  if (val) {
+    message.success('复制成功')
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.my-card{
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0;
+    @extend .hide-scroll-bar;
+  }
+}
+</style>

src/views/ai/write/index/components/Tag.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-wrap gap-[8px]">
+    <span
+      v-for="tag in props.tags"
+      :key="tag.value"
+      class="tag mb-2 border-[2px] border-solid border-[#DDDFE3] px-2 leading-6 text-[12px] bg-[#DDDFE3] rounded-[4px] cursor-pointer"
+      :class="modelValue === tag.value && '!border-[#846af7] text-[#846af7]'"
+      @click="emits('update:modelValue', tag.value)"
+    >
+      {{ tag.label }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    tags: { label: string; value: string }[]
+    modelValue: string
+    [k: string]: any
+  }>(),
+  {
+    tags: () => []
+  }
+)
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+</script>
+<style scoped></style>

src/views/ai/write/index/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="absolute top-0 left-0 right-0 bottom-0 flex">
+    <Left
+      :is-writing="isWriting"
+      class="h-full"
+      @submit="submit"
+      @reset="reset"
+      @example="handleExampleClick"
+    />
+    <Right
+      :is-writing="isWriting"
+      @stop-stream="stopStream"
+      ref="rightRef"
+      class="flex-grow"
+      v-model:content="writeResult"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Left from './components/Left.vue'
+import Right from './components/Right.vue'
+import { WriteApi } from '@/api/ai/write'
+import { WriteExample } from '@/views/ai/utils/constants'
+
+const message = useMessage()
+
+const writeResult = ref('') // 写作结果
+const isWriting = ref(false) // 是否正在写作中
+const abortController = ref<AbortController>() // // 写作进行中 abort 控制器(控制 stream 写作)
+
+/** 停止 stream 生成 */
+const stopStream = () => {
+  abortController.value?.abort()
+  isWriting.value = false
+}
+
+/** 执行写作 */
+const rightRef = ref<InstanceType<typeof Right>>()
+const submit = (data) => {
+  abortController.value = new AbortController()
+  writeResult.value = ''
+  isWriting.value = true
+  WriteApi.writeStream({
+    data,
+    onMessage: async (res) => {
+      const { code, data, msg } = JSON.parse(res.data)
+      if (code !== 0) {
+        message.alert(`写作异常! ${msg}`)
+        stopStream()
+        return
+      }
+      writeResult.value = writeResult.value + data
+      // 滚动到底部
+      await nextTick()
+      rightRef.value?.scrollToBottom()
+    },
+    ctrl: abortController.value,
+    onClose: stopStream,
+    onError: (...err) => {
+      console.error('写作异常', ...err)
+      stopStream()
+    }
+  })
+}
+
+/** 点击示例触发 */
+const handleExampleClick = (type: keyof typeof WriteExample) => {
+  writeResult.value = WriteExample[type].data
+}
+
+/** 点击重置的时候清空写作的结果**/
+const reset = () => {
+  writeResult.value = ''
+}
+</script>

src/views/ai/write/manager/index.vue

@@ -39,7 +39,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="平台" prop="platform">
-        <el-select v-model="queryParams.status" placeholder="请选择平台" clearable class="!w-240px">
+        <el-select v-model="queryParams.platform" placeholder="请选择平台" clearable class="!w-240px">
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
             :key="dict.value"
@@ -70,6 +70,7 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
+        <!-- TODO @YunaiV  目前没有导出接口，需要导出吗 -->
         <el-button
           type="success"
           plain
@@ -103,7 +104,13 @@
         </template>
       </el-table-column>
       <el-table-column label="模型" align="center" prop="model" width="180" />
-      <el-table-column label="生成内容提示" align="center" prop="prompt" width="180" />
+      <el-table-column
+        label="生成内容提示"
+        align="center"
+        prop="prompt"
+        width="180"
+        show-overflow-tooltip
+      />
       <el-table-column label="生成的内容" align="center" prop="generatedContent" width="180" />
       <el-table-column label="原文" align="center" prop="originalContent" width="180" />
       <el-table-column label="长度" align="center" prop="length">
@@ -136,6 +143,7 @@
       <el-table-column label="错误信息" align="center" prop="errorMessage" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
+<!--          TODO @YunaiV 目前没有修改接口，写作要可以更改吗-->
           <el-button
             link
             type="primary"
@@ -168,8 +176,8 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-// TODO 芋艿：这里应该是 write
-import { WriteApi, WriteVO } from '@/api/ai/writer'
+import { useRouter } from 'vue-router'
+import { WriteApi, AiWritePageReqVO, AiWriteRespVo } from '@/api/ai/write'
 import * as UserApi from '@/api/system/user'
 
 /** AI 写作列表 */
@@ -177,17 +185,18 @@ defineOptions({ name: 'AiWriteManager' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const router = useRouter() // 路由
 
 const loading = ref(true) // 列表的加载中
-const list = ref<WriteVO[]>([]) // 列表的数据
+const list = ref<AiWriteRespVo[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
-const queryParams = reactive({
+const queryParams = reactive<AiWritePageReqVO>({
   pageNo: 1,
   pageSize: 10,
   userId: undefined,
   type: undefined,
   platform: undefined,
-  createTime: []
+  createTime: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -216,6 +225,15 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 新增方法，跳转到写作页面 **/
+const openForm = (type: string, id?: number) => {
+  switch (type) {
+    case 'create':
+      router.push('/ai/write')
+      break
+  }
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {