@@ -33,11 +38,13 @@ import { ImageVO } from '@/api/ai/image'
import Dall3 from './components/dall3/index.vue'
import Midjourney from './components/midjourney/index.vue'
import StableDiffusion from './components/stableDiffusion/index.vue'
+import Other from './components/other/index.vue'
const imageListRef = ref
() // image 列表 ref
const dall3Ref = ref() // dall3(openai) ref
const midjourneyRef = ref() // midjourney ref
const stableDiffusionRef = ref() // stable diffusion ref
+const otherRef = ref() // stable diffusion ref
// 定义属性
const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
@@ -53,6 +60,10 @@ const platformOptions = [
{
label: 'Stable Diffusion',
value: AiPlatformEnum.STABLE_DIFFUSION
+ },
+ {
+ label: '其它',
+ value: 'other'
}
]
@@ -77,6 +88,7 @@ const handleRegeneration = async (image: ImageVO) => {
} else if (image.platform === AiPlatformEnum.STABLE_DIFFUSION) {
stableDiffusionRef.value.settingValues(image)
}
+ // TODO @fan:貌似 other 重新设置不行?
}
diff --git a/src/views/ai/image/square/index.vue b/src/views/ai/image/square/index.vue
new file mode 100644
index 00000000..4b89985c
--- /dev/null
+++ b/src/views/ai/image/square/index.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/ai/music/components/index.vue b/src/views/ai/music/components/index.vue
index 21272522..e1395b56 100644
--- a/src/views/ai/music/components/index.vue
+++ b/src/views/ai/music/components/index.vue
@@ -1,5 +1,5 @@
-
+
@@ -13,7 +13,7 @@ import List from './list/index.vue'
defineOptions({ name: 'Index' })
-const listRef = ref<{generateMusic: (...args) => void} | null>(null)
+const listRef = ref
void}>>(null)
function generateMusic (args: {formData: Recordable}) {
unref(listRef)?.generateMusic(args.formData)
diff --git a/src/views/ai/music/components/list/audioBar/index.vue b/src/views/ai/music/components/list/audioBar/index.vue
index 2b25e40f..412d7fef 100644
--- a/src/views/ai/music/components/list/audioBar/index.vue
+++ b/src/views/ai/music/components/list/audioBar/index.vue
@@ -1,9 +1,68 @@
- 播放器
+
+
+
+
+
+
+
+
+
+
+ {{audioProps.currentTime}}
+
+ {{ audioProps.duration }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/ai/music/components/list/index.vue b/src/views/ai/music/components/list/index.vue
index 6dce9b8c..1b8a46e5 100644
--- a/src/views/ai/music/components/list/index.vue
+++ b/src/views/ai/music/components/list/index.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/src/views/ai/music/components/mode/index.vue b/src/views/ai/music/components/mode/index.vue
index bb6cf116..61cf238e 100644
--- a/src/views/ai/music/components/mode/index.vue
+++ b/src/views/ai/music/components/mode/index.vue
@@ -1,5 +1,5 @@
-
+
描述模式
@@ -28,10 +28,7 @@ const emits = defineEmits(['generate-music'])
const generateMode = ref('lyric')
-interface ModeRef {
- formData: Recordable
-}
-const modeRef = ref(null)
+const modeRef = ref>(null)
/*
*@Description: 根据信息生成音乐
diff --git a/src/views/ai/music/manager/index.vue b/src/views/ai/music/manager/index.vue
index 342f8dd8..462a88d2 100644
--- a/src/views/ai/music/manager/index.vue
+++ b/src/views/ai/music/manager/index.vue
@@ -9,13 +9,19 @@
label-width="68px"
>
-
+ >
+
+
{
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/write/index/components/Left.vue
similarity index 65%
rename from src/views/ai/writer/components/Left.vue
rename to src/views/ai/write/index/components/Left.vue
index b09982b0..05cc04a5 100644
--- a/src/views/ai/writer/components/Left.vue
+++ b/src/views/ai/write/index/components/Left.vue
@@ -24,27 +24,28 @@
-
-
+
-
-
-
+
@@ -82,13 +83,13 @@
-
+
-
+
-
+
-
+
重置
@@ -103,15 +104,14 @@
import { createReusableTemplate } from '@vueuse/core'
import { ref } from 'vue'
import Tag from './Tag.vue'
-import { WriteVO } from '@/api/ai/writer'
+import { WriteVO } from 'src/api/ai/write'
import { omit } from 'lodash-es'
-import { getIntDictOptions } from '@/utils/dict'
-import { WriteExampleDataJson } from '@/views/ai/utils/utils'
-import { AiWriteTypeEnum } from "@/views/ai/utils/constants";
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants'
type TabType = WriteVO['type']
-const message = useMessage()
+const message = useMessage() // 消息弹窗
defineProps<{
isWriting: boolean
@@ -127,15 +127,17 @@ const emits = defineEmits<{
const example = (type: 'write' | 'reply') => {
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 +153,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 +178,22 @@ const initData: WriteVO = {
format: 1
}
const formData = ref({ ...initData })
+
+/** 用来记录切换之前所填写的数据,切换的时候给赋值回来 **/
+const recordFormData = {} as Record
+
/** 切换tab **/
const switchTab = (value: TabType) => {
- selectedTab.value = value
- formData.value = { ...initData }
+ 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('请输入原文')
@@ -192,7 +206,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/write/index/components/Right.vue
similarity index 65%
rename from src/views/ai/writer/components/Right.vue
rename to src/views/ai/write/index/components/Right.vue
index 393a055b..d0aada5d 100644
--- a/src/views/ai/writer/components/Right.vue
+++ b/src/views/ai/write/index/components/Right.vue
@@ -1,24 +1,19 @@
-
-
- 预览
-
-
-
-
-
- 复制
-
+
+
+
+ 预览
+
+
+
+
+
+ 复制
+
+
+
-
-
-
-
+
diff --git a/types/global.d.ts b/types/global.d.ts
index e91e1fe4..eebe9bb8 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -50,4 +50,9 @@ declare global {
name: string
children?: Tree[] | any[]
}
+ // 分页数据公共返回
+ interface PageResult
{
+ list: T // 数据
+ total: number // 总量
+ }
}