mirror of
https://github.com/yudaocode/yudao-ui-admin-vue3.git
synced 2026-05-13 14:50:34 +00:00
[代码优化]AI: 目录更名writer => write，写作管理调整
This commit is contained in:
hhhero
213
src/views/ai/write/index/components/Left.vue
Normal file
213
src/views/ai/write/index/components/Left.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<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="flex flex-col" v-bind="$attrs">
|
||||
<!-- tab -->
|
||||
<div class="w-full pt-2 bg-[#f5f7f9] flex justify-center">
|
||||
<div class="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>
|
||||
<div
|
||||
class="px-7 pb-2 flex-grow overflow-y-auto lg:block w-[380px] box-border bg-[#f5f7f9] 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(DICT_TYPE.AI_WRITE_LENGTH)" />
|
||||
<ReuseLabel label="格式" />
|
||||
<Tag v-model="formData.format" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_FORMAT)" />
|
||||
<ReuseLabel label="语气" />
|
||||
<Tag v-model="formData.tone" :tags="getIntDictOptions(DICT_TYPE.AI_WRITE_TONE)" />
|
||||
<ReuseLabel label="语言" />
|
||||
<Tag v-model="formData.language" :tags="getIntDictOptions(DICT_TYPE.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 'src/api/ai/write'
|
||||
import { omit } from 'lodash-es'
|
||||
import { DICT_TYPE, 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 })
|
||||
|
||||
/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 **/
|
||||
const recordFormData = {} as Record<AiWriteTypeEnum, WriteVO>
|
||||
|
||||
/** 切换tab **/
|
||||
const switchTab = (value: TabType) => {
|
||||
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('请输入原文')
|
||||
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>
|
||||
Reference in New Issue
Block a user