From ece15334364eedb8adf0f8462379315439cdfa0a Mon Sep 17 00:00:00 2001 From: YunaiV Date: Wed, 10 Jul 2024 12:49:54 +0800 Subject: [PATCH 01/21] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?= =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=86=99=E4=BD=9C=EF=BC=9A=E7=94=9F=E6=88=90?= =?UTF-8?q?=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/ai/writer/index.ts | 4 ++- src/views/ai/utils/constants.ts | 15 +++++++++++ src/views/ai/utils/utils.ts | 13 ---------- .../ai/writer/{ => index}/components/Left.vue | 26 +++++++++++-------- .../writer/{ => index}/components/Right.vue | 19 +++++--------- .../ai/writer/{ => index}/components/Tag.vue | 0 src/views/ai/writer/index/index.vue | 15 ++++++----- 7 files changed, 47 insertions(+), 45 deletions(-) rename src/views/ai/writer/{ => index}/components/Left.vue (85%) rename src/views/ai/writer/{ => index}/components/Right.vue (85%) rename src/views/ai/writer/{ => index}/components/Tag.vue (100%) 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 @@ diff --git a/src/views/ai/writer/index/components/Left.vue b/src/views/ai/writer/index/components/Left.vue index 7f63d68e..2261afc0 100644 --- a/src/views/ai/writer/index/components/Left.vue +++ b/src/views/ai/writer/index/components/Left.vue @@ -81,13 +81,13 @@ - + - + - + - +
重置 From b98f1220acbc7230e9594811cf87ca8c55e024fa Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 11 Jul 2024 08:48:08 +0800 Subject: [PATCH 06/21] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E3=80=91AI=EF=BC=9A=E5=86=99=E4=BD=9C=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ai/writer/index/components/Left.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/ai/writer/index/components/Left.vue b/src/views/ai/writer/index/components/Left.vue index 2261afc0..7e7744c7 100644 --- a/src/views/ai/writer/index/components/Left.vue +++ b/src/views/ai/writer/index/components/Left.vue @@ -104,7 +104,7 @@ 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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants' type TabType = WriteVO['type'] From 12c0f36bb82c7f01cff442f8b55420efe29612e0 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 11 Jul 2024 08:51:58 +0800 Subject: [PATCH 07/21] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E3=80=91=E5=85=A8=E5=B1=80=EF=BC=9AAppView=20min-h=20?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=9C=89=E5=B0=8F=E6=96=B9=E5=9D=97=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E6=8D=A2=E5=9B=9E=20h?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/AppView.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue index 88d5f0cc..44341873 100644 --- a/src/layout/components/AppView.vue +++ b/src/layout/components/AppView.vue @@ -38,24 +38,24 @@ provide('reload', reload) :class="[ 'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]', { - '!h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]': + '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]': (fixedHeader && (layout === 'classic' || layout === 'topLeft' || layout === 'top') && footer) || (!tagsView && layout === 'top' && footer), - '!h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]': + '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]': tagsView && layout === 'top' && footer, - '!h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]': + '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]': !fixedHeader && layout === 'classic' && footer, - '!h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]': + '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]': !fixedHeader && layout === 'topLeft' && footer, - '!h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]': + '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]': fixedHeader && layout === 'cutMenu' && footer, - '!h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]': + '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]': !fixedHeader && layout === 'cutMenu' && footer } ]" From 925d356e413f1bceb3cb845689189da995835e69 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 11 Jul 2024 09:29:15 +0800 Subject: [PATCH 08/21] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=B3=A8?= =?UTF-8?q?=E9=87=8A=E3=80=91AI=EF=BC=9A=E4=B8=B4=E6=97=B6=E6=B3=A8?= =?UTF-8?q?=E9=87=8A=20AI=20=E9=9F=B3=E4=B9=90=E7=9A=84=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=EF=BC=8C=E5=BC=80=E5=8F=91=E4=B8=AD...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/modules/remaining.ts | 40 ++++++++++++++++----------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 6da3b0a4..db23bb1f 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -70,26 +70,26 @@ const remainingRouter: AppRouteRecordRaw[] = [ } ] }, - { - path: '/ai/music', - component: Layout, - redirect: '/index', - name: 'AIMusic', - meta: {}, - children: [ - { - path: 'index', - component: () => import('@/views/ai/music/components/index.vue'), - name: 'AIMusicIndex', - meta: { - title: 'AI 音乐', - icon: 'ep:home-filled', - noCache: false, - affix: true - } - } - ] - }, + // { + // path: '/ai/music', + // component: Layout, + // redirect: '/index', + // name: 'AIMusic', + // meta: {}, + // children: [ + // { + // path: 'index', + // component: () => import('@/views/ai/music/components/index.vue'), + // name: 'AIMusicIndex', + // meta: { + // title: 'AI 音乐', + // icon: 'ep:home-filled', + // noCache: false, + // affix: true + // } + // } + // ] + // }, { path: '/user', component: Layout, From 933628050bf82f256fd5f8d71dda95561d5b6357 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 11 Jul 2024 09:36:56 +0800 Subject: [PATCH 09/21] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E3=80=91=E5=85=A8=E5=B1=80=EF=BC=9A=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20Markdown=20=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MarkdownView/index.vue | 58 +++++++++++---------------- 1 file changed, 23 insertions(+), 35 deletions(-) diff --git a/src/components/MarkdownView/index.vue b/src/components/MarkdownView/index.vue index bf9ddd60..55166ff4 100644 --- a/src/components/MarkdownView/index.vue +++ b/src/components/MarkdownView/index.vue @@ -1,28 +1,36 @@ - - diff --git a/src/views/ai/writer/index/index.vue b/src/views/ai/writer/index/index.vue index 9510e059..526cd27c 100644 --- a/src/views/ai/writer/index/index.vue +++ b/src/views/ai/writer/index/index.vue @@ -1,6 +1,5 @@