diff --git a/src/api/ai/writer/index.ts b/src/api/ai/writer/index.ts index 9402d9a2..db876161 100644 --- a/src/api/ai/writer/index.ts +++ b/src/api/ai/writer/index.ts @@ -2,9 +2,10 @@ import { fetchEventSource } from '@microsoft/fetch-event-source' import { getAccessToken } from '@/utils/auth' import { config } from '@/config/axios/config' +import { AiWriteTypeEnum } from '@/views/ai/utils/constants' export interface WriteVO { - type: 1 | 2 // 1:撰写 2:回复 + type: AiWriteTypeEnum.WRITING | AiWriteTypeEnum.REPLY // 1:撰写 2:回复 prompt: string // 写作内容提示 1。撰写 2回复 originalContent: string // 原文 length: number // 长度 @@ -13,6 +14,7 @@ export interface WriteVO { language: number // 语言 } +// TODO @hhero：搞成 WriteApi，类似 ConversationApi 一样。这样更有类的概念，后续引入某个 Api，然后调用它的方法就可以了。 export const writeStream = ({ data, onClose, diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts index aa2a71f5..3fadb8bb 100644 --- a/src/views/ai/utils/constants.ts +++ b/src/views/ai/utils/constants.ts @@ -353,3 +353,18 @@ export const NijiVersionList = [ label: 'v5' } ] + +// ========== 【写作 UI】相关的枚举 ========== + +/** 写作点击示例时的数据 **/ +export const WriteExample = { + 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/utils/utils.ts b/src/views/ai/utils/utils.ts index be20852e..ab45ae18 100644 --- a/src/views/ai/utils/utils.ts +++ b/src/views/ai/utils/utils.ts @@ -11,16 +11,3 @@ export const hasChinese = (str: string) => { 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/index/components/Left.vue similarity index 85% rename from src/views/ai/writer/components/Left.vue rename to src/views/ai/writer/index/components/Left.vue index b09982b0..7f63d68e 100644 --- a/src/views/ai/writer/components/Left.vue +++ b/src/views/ai/writer/index/components/Left.vue @@ -24,7 +24,6 @@ -
{ formData.value = { ...initData, - ...omit(WriteExampleDataJson[type], ['data']) + ...omit(WriteExample[type], ['data']) } emits('example', type) } + /** 重置，将表单值作为初选值 **/ const reset = () => { - formData.value = {...initData} + formData.value = { ...initData } emits('reset') } + const selectedTab = ref(AiWriteTypeEnum.WRITING) const tabs: { text: string @@ -151,10 +151,12 @@ const [DefineTab, ReuseTab] = createReusableTemplate<{ }>() /** - * 可以在template里边定义可复用的组件，DefineLabel，ReuseLabel是采用的解构赋值，都是Vue组件 - * 直接通过组件的形式使用，中间是需要复用的组件代码，通过来使用定义的组件 - * DefineLabel里边的v-slot="{ label, hint, hintClick }“相当于是解构了组件的prop，需要注意的是boolean类型，需要显式的赋值比如 - * 事件也得以prop形式传入，不能是@event的形式，比如下面的hintClick需要 + * 可以在 template 里边定义可复用的组件，DefineLabel，ReuseLabel 是采用的解构赋值，都是 Vue 组件 + * + * 直接通过组件的形式使用， 中间是需要复用的组件代码 ，通过 来使用定义的组件 + * DefineLabel 里边的 v-slot="{ label, hint, hintClick }"相当于是解构了组件的 prop，需要注意的是 boolean 类型，需要显式的赋值比如 + * 事件也得以 prop 形式传入，不能是 @event的形式，比如下面的 hintClick 需要 + * * @see https://vueuse.org/createReusableTemplate */ const [DefineLabel, ReuseLabel] = createReusableTemplate<{ @@ -174,12 +176,14 @@ const initData: WriteVO = { format: 1 } const formData = ref({ ...initData }) + /** 切换tab **/ const switchTab = (value: TabType) => { selectedTab.value = value formData.value = { ...initData } } +/** 提交写作 */ const submit = () => { if (selectedTab.value === 2 && !formData.value.originalContent) { message.warning('请输入原文') @@ -192,7 +196,7 @@ const submit = () => { emits('submit', { /** 撰写的时候没有 originalContent 字段**/ ...(selectedTab.value === 1 ? omit(formData.value, ['originalContent']) : formData.value), - /** 使用选中tab值覆盖当前的type类型 **/ + /** 使用选中 tab 值覆盖当前的 type 类型 **/ type: selectedTab.value }) } diff --git a/src/views/ai/writer/components/Right.vue b/src/views/ai/writer/index/components/Right.vue similarity index 85% rename from src/views/ai/writer/components/Right.vue rename to src/views/ai/writer/index/components/Right.vue index 393a055b..00380a7e 100644 --- a/src/views/ai/writer/components/Right.vue +++ b/src/views/ai/writer/index/components/Right.vue @@ -3,22 +3,15 @@

预览 - + 复制 - -

-
+
import { useClipboard } from '@vueuse/core' -const message = useMessage() -const { copied, copy } = useClipboard() +const message = useMessage() // 消息弹窗 +const { copied, copy } = useClipboard() // 粘贴板 const props = defineProps({ content: { @@ -67,7 +60,7 @@ const props = defineProps({ const emits = defineEmits(['update:content', 'stopStream']) -// 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 +/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */ const compContent = computed({ get() { return props.content @@ -91,7 +84,7 @@ const copyContent = () => { copy(props.content) } -// 复制成功的时候copied.value为true +/** 复制成功的时候 copied.value 为 true */ watch(copied, (val) => { if (val) { message.success('复制成功') diff --git a/src/views/ai/writer/components/Tag.vue b/src/views/ai/writer/index/components/Tag.vue similarity index 100% rename from src/views/ai/writer/components/Tag.vue rename to src/views/ai/writer/index/components/Tag.vue diff --git a/src/views/ai/writer/index/index.vue b/src/views/ai/writer/index/index.vue index 58d7d4cf..9510e059 100644 --- a/src/views/ai/writer/index/index.vue +++ b/src/views/ai/writer/index/index.vue @@ -1,4 +1,5 @@