【代码评审】写作：生成部分

2025-08-09 15:41:53 +08:00 · 2024-07-10 12:49:54 +08:00
parent e53786e8bd
commit ece1533436
7 changed files with 47 additions and 45 deletions
--- a/src/views/ai/writer/index/components/Left.vue
+++ b/src/views/ai/writer/index/components/Left.vue
@@ -0,0 +1,203 @@
+<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="relative" v-bind="$attrs">
+    <!-- tab -->
+    <div
+      class="absolute left-1/2 top-2 -translate-x-1/2 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
+      class="px-7 pb-2 pt-[46px] overflow-y-auto lg:block w-[380px] box-border bg-[#ECEDEF] 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('ai_write_length')" />
+        <ReuseLabel label="格式" />
+        <Tag v-model="formData.format" :tags="getIntDictOptions('ai_write_format')" />
+        <ReuseLabel label="语气" />
+        <Tag v-model="formData.tone" :tags="getIntDictOptions('ai_write_tone')" />
+        <ReuseLabel label="语言" />
+        <Tag v-model="formData.language" :tags="getIntDictOptions('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 '@/api/ai/writer'
+import { omit } from 'lodash-es'
+import { 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 })
+
+/** 切换tab **/
+const switchTab = (value: TabType) => {
+  selectedTab.value = value
+  formData.value = { ...initData }
+}
+
+/** 提交写作 */
+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>
--- a/src/views/ai/writer/index/components/Right.vue
+++ b/src/views/ai/writer/index/components/Right.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="h-full box-border flex flex-col px-7">
+    <h3 class="m-0 h-14 -mx-7 px-7 shrink-0 flex items-center justify-between bg-[#ecedef]">
+      <span>预览</span>
+      <!-- 展示在右上角 -->
+      <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
+        <template #icon>
+          <Icon icon="ph:copy-bold" />
+        </template>
+        复制
+      </el-button>
+    </h3>
+
+    <div ref="contentRef" class="hide-scroll-bar flex-grow 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>
+  </div>
+</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;
+  }
+}
+</style>
--- a/src/views/ai/writer/index/components/Tag.vue
+++ b/src/views/ai/writer/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>
--- a/src/views/ai/writer/index/index.vue
+++ b/src/views/ai/writer/index/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO @hhhero：整体没啥问题了。感觉整体框框的样子可以优化下，可以参考下绘图界面。例如说：1）写作的“预览”和绘图的“绘图任务”的 header；2）左右的边界，有个竖线之类的。 -->
  <div class="h-[calc(100vh-var(--top-tool-height)-var(--app-footer-height)-40px)] -m-5 flex">
    <Left
      :is-writing="isWriting"
@@ -18,10 +19,10 @@
 </template>

 <script setup lang="ts">
-import Left from '../components/Left.vue'
-import Right from '../components/Right.vue'
+import Left from './components/Left.vue'
+import Right from './components/Right.vue'
 import * as WriteApi from '@/api/ai/writer'
-import { WriteExampleDataJson } from '@/views/ai/utils/utils'
+import { WriteExample } from '@/views/ai/utils/constants'

 const message = useMessage()

@@ -51,9 +52,9 @@ const submit = (data) => {
        return
      }
      writeResult.value = writeResult.value + data
-      nextTick(() => {
-        rightRef.value?.scrollToBottom()
-      })
+      // 滚动到底部
+      await nextTick()
+      rightRef.value?.scrollToBottom()
    },
    ctrl: abortController.value,
    onClose: stopStream,
@@ -66,7 +67,7 @@ const submit = (data) => {

 /** 点击示例触发 */
 const handleExampleClick = (type: keyof typeof WriteExampleDataJson) => {
-  writeResult.value = WriteExampleDataJson[type].data
+  writeResult.value = WriteExample[type].data
 }

 /** 点击重置的时候清空写作的结果**/