From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/write/index/components/Left.vue | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 213 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/write/index/components/Left.vue b/src/views/ai/write/index/components/Left.vue
new file mode 100644
index 0000000..74e5d58
--- /dev/null
+++ b/src/views/ai/write/index/components/Left.vue
@@ -0,0 +1,213 @@
+<template>
+ <!-- 瀹氫箟 tab 缁勪欢锛氭挵鍐�/鍥炲绛� -->
+ <DefineTab v-slot="{ active, text, itemClick }">
+ <span
+ :class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
+ class="inline-block w-1/2 rounded-full cursor-pointer text-center leading-[30px] relative z-1 text-[5C6370] hover:text-black"
+ @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
+ v-if="hint"
+ class="flex items-center text-[12px] text-[#846af7] cursor-pointer select-none"
+ @click="hintClick"
+ >
+ <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="
+ selectedTab === AiWriteTypeEnum.REPLY && 'after:transform after:translate-x-[100%]'
+ "
+ 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"
+ >
+ <ReuseTab
+ v-for="tab in tabs"
+ :key="tab.value"
+ :active="tab.value === selectedTab"
+ :itemClick="() => switchTab(tab.value)"
+ :text="tab.text"
+ />
+ </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 :hint-click="() => example('write')" hint="绀轰緥" label="鍐欎綔鍐呭" />
+ <el-input
+ v-model="formData.prompt"
+ :maxlength="500"
+ :rows="5"
+ placeholder="璇疯緭鍏ュ啓浣滃唴瀹�"
+ showWordLimit
+ type="textarea"
+ />
+ </template>
+
+ <template v-else>
+ <ReuseLabel :hint-click="() => example('reply')" hint="绀轰緥" label="鍘熸枃" />
+ <el-input
+ v-model="formData.originalContent"
+ :maxlength="500"
+ :rows="5"
+ placeholder="璇疯緭鍏ュ師鏂�"
+ showWordLimit
+ type="textarea"
+ />
+
+ <ReuseLabel label="鍥炲鍐呭" />
+ <el-input
+ v-model="formData.prompt"
+ :maxlength="500"
+ :rows="5"
+ placeholder="璇疯緭鍏ュ洖澶嶅唴瀹�"
+ showWordLimit
+ type="textarea"
+ />
+ </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" color="#846af7" @click="submit">鐢熸垚</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { createReusableTemplate } from '@vueuse/core'
+import { ref } from 'vue'
+import Tag from './Tag.vue'
+import { WriteVO } from '@/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 閲岃竟瀹氫箟鍙鐢ㄧ殑缁勪欢锛孌efineLabel锛孯euseLabel 鏄噰鐢ㄧ殑瑙ｆ瀯璧嬪�硷紝閮芥槸 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>
--
Gitblit v1.8.0