diff --git a/src/api/ai/writer/index.ts b/src/api/ai/writer/index.ts index 57c23b4f..9402d9a2 100644 --- a/src/api/ai/writer/index.ts +++ b/src/api/ai/writer/index.ts @@ -3,37 +3,14 @@ import { fetchEventSource } from '@microsoft/fetch-event-source' import { getAccessToken } from '@/utils/auth' import { config } from '@/config/axios/config' -// TODO @hhhero：可以改成 WriteVO 哈，主要是保持一致 -export interface WriteParams { - // TODO @hhhero：注释。每个属性的后面哈。会更简洁一点 - /** - * 1:撰写 2:回复 - */ - type: 1 | 2 - /** - * 写作内容提示 1。撰写 2回复 - */ - prompt: string - /** - * 原文 - */ - originalContent: string - /** - * 长度 - */ - length: number - /** - * 格式 - */ - format: number - /** - * 语气 - */ - tone: number - /** - * 语言 - */ - language: number +export interface WriteVO { + type: 1 | 2 // 1:撰写 2:回复 + prompt: string // 写作内容提示 1。撰写 2回复 + originalContent: string // 原文 + length: number // 长度 + format: number // 格式 + tone: number // 语气 + language: number // 语言 } export const writeStream = ({ @@ -43,7 +20,7 @@ export const writeStream = ({ onError, ctrl }: { - data: WriteParams + data: WriteVO onMessage?: (res: any) => void onError?: (...args: any[]) => void onClose?: (...args: any[]) => void diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts index 337cfda3..442f83b5 100644 --- a/src/views/ai/utils/constants.ts +++ b/src/views/ai/utils/constants.ts @@ -40,3 +40,11 @@ export const AiMusicStatusEnum = { SUCCESS: 20, // 已完成 FAIL: 30 // 已失败 } + +/** + * AI 写作类型的枚举 + */ +export enum AiWriteTypeEnum { + WRITING = 1, // 撰写 + REPLY // 回复 +} diff --git a/src/views/ai/utils/utils.ts b/src/views/ai/utils/utils.ts index fc4f8e6c..d79e7609 100644 --- a/src/views/ai/utils/utils.ts +++ b/src/views/ai/utils/utils.ts @@ -11,3 +11,16 @@ export const hasChinese = async (str) => { return /[\u4e00-\u9fa5]/.test(str) } + +/** 写作点击示例时的数据 **/ +export const WriteExampleDataJson = { + write: { + prompt: 'vue', + data: 'Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，易于上手，同时也便于与其他库或已有项目整合。\n\nVue.js 的特点包括：\n- 响应式的数据绑定：Vue.js 会自动将数据与 DOM 同步，使得状态管理变得更加简单。\n- 组件化：Vue.js 允许开发者通过小型、独立和通常可复用的组件构建大型应用。\n- 虚拟 DOM：Vue.js 使用虚拟 DOM 实现快速渲染，提高了性能。\n\n在 Vue.js 中，一个典型的应用结构可能包括：\n1. 根实例：每个 Vue 应用都需要一个根实例作为入口点。\n2. 组件系统：可以创建自定义的可复用组件。\n3. 指令：特殊的带有前缀 v- 的属性，为 DOM 元素提供特殊的行为。\n4. 插值：用于文本内容，将数据动态地插入到 HTML。\n5. 计算属性和侦听器：用于处理数据的复杂逻辑和响应数据变化。\n6. 条件渲染：根据条件决定元素的渲染。\n7. 列表渲染：用于显示列表数据。\n8. 事件处理：响应用户交互。\n9. 表单输入绑定：处理表单输入和验证。\n10. 组件生命周期钩子：在组件的不同阶段执行特定的函数。\n\nVue.js 还提供了官方的路由器 Vue Router 和状态管理库 Vuex，以支持构建复杂的单页应用（SPA）。\n\n在开发过程中，开发者通常会使用 Vue CLI，这是一个强大的命令行工具，用于快速生成 Vue 项目脚手架，集成了诸如 Babel、Webpack 等现代前端工具，以及热重载、代码检测等开发体验优化功能。\n\nVue.js 的生态系统还包括大量的第三方库和插件，如 Vuetify（UI 组件库）、Vue Test Utils（测试工具）等，这些都极大地丰富了 Vue.js 的开发生态。\n\n总的来说，Vue.js 是一个灵活、高效的前端框架，适合从小型项目到大型企业级应用的开发。它的易用性、灵活性和强大的社区支持使其成为许多开发者的首选框架之一。' + }, + reply: { + originalContent: '领导，我想请假', + prompt: '不批', + data: '您的请假申请已收悉，经核实和考虑，暂时无法批准您的请假申请。\n\n如有特殊情况或紧急事务，请及时与我联系。\n\n祝工作顺利。\n\n谢谢。' + } +} diff --git a/src/views/ai/writer/components/Left.vue b/src/views/ai/writer/components/Left.vue index 0369d9df..e7851649 100644 --- a/src/views/ai/writer/components/Left.vue +++ b/src/views/ai/writer/components/Left.vue @@ -24,7 +24,7 @@ - +
@@ -65,7 +65,7 @@ type="textarea" :rows="5" :maxlength="500" - v-model="writeForm.originalContent" + v-model="formData.originalContent" placeholder="请输入原文" showWordLimit /> @@ -75,20 +75,20 @@ type="textarea" :rows="5" :maxlength="500" - v-model="writeForm.prompt" + v-model="formData.prompt" placeholder="请输入回复内容" showWordLimit /> - + - + - + - +
重置 @@ -103,12 +103,13 @@ import { createReusableTemplate } from '@vueuse/core' import { ref } from 'vue' import Tag from './Tag.vue' -import { WriteParams } from '@/api/ai/writer' +import { WriteVO } from '@/api/ai/writer' import { omit } from 'lodash-es' import { getIntDictOptions } from '@/utils/dict' -import dataJson from '../data.json' +import { WriteExampleDataJson } from '@/views/ai/utils/utils' +import { AiWriteTypeEnum } from "@/views/ai/utils/constants"; -type TabType = WriteParams['type'] +type TabType = WriteVO['type'] const message = useMessage() @@ -117,25 +118,25 @@ defineProps<{ }>() const emits = defineEmits<{ - (e: 'submit', params: Partial) + (e: 'submit', params: Partial) (e: 'example', param: 'write' | 'reply') }>() const example = (type: 'write' | 'reply') => { - writeForm.value = { + formData.value = { ...initData, - ...omit(dataJson[type], ['data']) + ...omit(WriteExampleDataJson[type], ['data']) } emits('example', type) } -const selectedTab = ref(1) +const selectedTab = ref(AiWriteTypeEnum.WRITING) const tabs: { text: string value: TabType }[] = [ - { text: '撰写', value: 1 }, // TODO @hhhero：1、2 这个枚举到 constants 里。方便后续万一要调整 - { text: '回复', value: 2 } + { text: '撰写', value: AiWriteTypeEnum.WRITING }, + { text: '回复', value: AiWriteTypeEnum.REPLY } ] const [DefineTab, ReuseTab] = createReusableTemplate<{ active?: boolean @@ -143,7 +144,21 @@ const [DefineTab, ReuseTab] = createReusableTemplate<{ itemClick: () => void }>() -const initData: WriteParams = { +/** + * 可以在template里边定义可复用的组件，DefineLabel，ReuseLabel是采用的解构赋值，都是Vue组件 + * 直接通过组件的形式使用，中间是需要复用的组件代码，通过来使用定义的组件 + * DefineLabel里边的v-slot="{ label, hint, hintClick }“相当于是解构了组件的prop，需要注意的是boolean类型，需要显式的赋值比如 + * 事件也得以prop形式传入，不能是@event的形式，比如下面的hintClick需要 + * @see https://vueuse.org/createReusableTemplate + */ +const [DefineLabel, ReuseLabel] = createReusableTemplate<{ + label: string + class?: string + hint?: string + hintClick?: () => void +}>() + +const initData: WriteVO = { type: 1, prompt: '', originalContent: '', @@ -152,49 +167,26 @@ const initData: WriteParams = { length: 1, format: 1 } -// TODO @hhhero：这个字段，要不叫 formData，和其他模块保持一致。然后 initData 和它也更好对应上 -const writeForm = ref({ ...initData }) - -// TODO @hhhero：这种一次性的变量，要不直接 vue template 直接调用。目的是：让 ts 这块，更专注逻辑哈。 -const writeTags = { - // 长度 TODO @hhhero：注释放在和面哈； - // TODO @hhhero：一般 length 不用缩写哈。更完整会更容易阅读； - lenTags: getIntDictOptions('ai_write_length'), - // 格式 - - formatTags: getIntDictOptions('ai_write_format'), - // 语气 - - toneTags: getIntDictOptions('ai_write_tone'), - // 语言 - langTags: getIntDictOptions('ai_write_language') - // -} - -// TODO @hhhero：这个写法不错。要不写个简单的注释，我怕很多人不懂哈。 -const [DefineLabel, ReuseLabel] = createReusableTemplate<{ - label: string - class?: string - hint?: string - hintClick?: () => void -}>() - +const formData = ref({ ...initData }) +/** 切换tab **/ const switchTab = (value: TabType) => { selectedTab.value = value - writeForm.value = { ...initData } + formData.value = { ...initData } } const submit = () => { - if (selectedTab.value === 2 && !writeForm.value.originalContent) { + if (selectedTab.value === 2 && !formData.value.originalContent) { message.warning('请输入原文') return } - if (!writeForm.value.prompt) { + if (!formData.value.prompt) { message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`) return } emits('submit', { - ...(selectedTab.value === 1 ? omit(writeForm.value, ['originalContent']) : writeForm.value), + /** 撰写的时候没有 originalContent 字段**/ + ...(selectedTab.value === 1 ? omit(formData.value, ['originalContent']) : formData.value), + /** 使用选中tab值覆盖当前的type类型 **/ type: selectedTab.value }) } diff --git a/src/views/ai/writer/components/Right.vue b/src/views/ai/writer/components/Right.vue index 94140011..4b27ef8c 100644 --- a/src/views/ai/writer/components/Right.vue +++ b/src/views/ai/writer/components/Right.vue @@ -5,9 +5,8 @@ 复制 @@ -23,7 +22,7 @@ props.msg && !props.isWriting) // 是否展示拷贝 -const inputId = computed(() => getCurrentInstance()?.uid) // TODO @hhhero：这个可以写个注释哈 -const copyMsg = () => { - copy(props.msg) +const showCopy = computed(() => props.content && !props.isWriting) // 是否展示复制按钮，在生成内容完成的时候展示 +const copyContent = () => { + copy(props.content) } +// 复制成功的时候copied.value为true watch(copied, (val) => { if (val) { message.success('复制成功') diff --git a/src/views/ai/writer/data.json b/src/views/ai/writer/data.json deleted file mode 100644 index 3f20951b..00000000 --- a/src/views/ai/writer/data.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "write": { - "prompt": "vue", - "data": "Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，易于上手，同时也便于与其他库或已有项目整合。\n\nVue.js 的特点包括：\n- 响应式的数据绑定：Vue.js 会自动将数据与 DOM 同步，使得状态管理变得更加简单。\n- 组件化：Vue.js 允许开发者通过小型、独立和通常可复用的组件构建大型应用。\n- 虚拟 DOM：Vue.js 使用虚拟 DOM 实现快速渲染，提高了性能。\n\n在 Vue.js 中，一个典型的应用结构可能包括：\n1. 根实例：每个 Vue 应用都需要一个根实例作为入口点。\n2. 组件系统：可以创建自定义的可复用组件。\n3. 指令：特殊的带有前缀 v- 的属性，为 DOM 元素提供特殊的行为。\n4. 插值：用于文本内容，将数据动态地插入到 HTML。\n5. 计算属性和侦听器：用于处理数据的复杂逻辑和响应数据变化。\n6. 条件渲染：根据条件决定元素的渲染。\n7. 列表渲染：用于显示列表数据。\n8. 事件处理：响应用户交互。\n9. 表单输入绑定：处理表单输入和验证。\n10. 组件生命周期钩子：在组件的不同阶段执行特定的函数。\n\nVue.js 还提供了官方的路由器 Vue Router 和状态管理库 Vuex，以支持构建复杂的单页应用（SPA）。\n\n在开发过程中，开发者通常会使用 Vue CLI，这是一个强大的命令行工具，用于快速生成 Vue 项目脚手架，集成了诸如 Babel、Webpack 等现代前端工具，以及热重载、代码检测等开发体验优化功能。\n\nVue.js 的生态系统还包括大量的第三方库和插件，如 Vuetify（UI 组件库）、Vue Test Utils（测试工具）等，这些都极大地丰富了 Vue.js 的开发生态。\n\n总的来说，Vue.js 是一个灵活、高效的前端框架，适合从小型项目到大型企业级应用的开发。它的易用性、灵活性和强大的社区支持使其成为许多开发者的首选框架之一。" - }, - "reply": { - "originalContent": "领导，我想请假", - "prompt": "不批", - "data": "您的请假申请已收悉，经核实和考虑，暂时无法批准您的请假申请。\n\n如有特殊情况或紧急事务，请及时与我联系。\n\n祝工作顺利。\n\n谢谢。" - } -} diff --git a/src/views/ai/writer/index.vue b/src/views/ai/writer/index.vue deleted file mode 100644 index 27276431..00000000 --- a/src/views/ai/writer/index.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - - diff --git a/src/views/ai/writer/index/index.vue b/src/views/ai/writer/index/index.vue new file mode 100644 index 00000000..655e806a --- /dev/null +++ b/src/views/ai/writer/index/index.vue @@ -0,0 +1,67 @@ + + +