Skip to content

Commit 18e87cf

Browse files
ChronosForkChronosFork
committed
[新增]ai写作页面完成
1 parent efcf64e commit 18e87cf

File tree

5 files changed

+305
-0
lines changed

5 files changed

+305
-0
lines changed

‎src/api/ai/writer/index.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import request from '@/config/axios'
2+
import { fetchEventSource } from '@microsoft/fetch-event-source'
3+
4+
import { getAccessToken } from '@/utils/auth'
5+
import { config } from '@/config/axios/config'
6+
7+
export interface WriteParams {
8+
/**
9+
* 1:撰写 2:回复
10+
*/
11+
type: 1 | 2
12+
/**
13+
* 写作内容提示 1。撰写 2回复
14+
*/
15+
prompt: string
16+
/**
17+
* 原文
18+
*/
19+
originalContent: string
20+
/**
21+
* 长度
22+
*/
23+
length: number
24+
/**
25+
* 格式
26+
*/
27+
format: number
28+
/**
29+
* 语气
30+
*/
31+
tone: number
32+
/**
33+
* 语言
34+
*/
35+
language: number
36+
}
37+
export const writeStream = (data: WriteParams, onMessage, onError, onClose, ctrl) => {
38+
// return request.post({ url: '/ai/write/generate-stream', data })
39+
const token = getAccessToken()
40+
return fetchEventSource(`${config.base_url}/ai/write/generate-stream`, {
41+
method: 'post',
42+
headers: {
43+
'Content-Type': 'application/json',
44+
Authorization: `Bearer ${token}`
45+
},
46+
openWhenHidden: true,
47+
body: JSON.stringify(data),
48+
onmessage: onMessage,
49+
onerror: onError,
50+
onclose: onClose,
51+
signal: ctrl.signal
52+
})
53+
}

‎src/views/ai/writer/components/Left.vue

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<!-- 定义tab组件 -->
3+
<DefineTab v-slot="{ active, text, itemClick }">
4+
<span
5+
class="inline-block w-1/2 rounded-full cursor-pointer text-center leading-[30px] relative z-1 text-[5C6370] hover:text-black"
6+
:class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
7+
@click="itemClick"
8+
>
9+
{{ text }}
10+
</span>
11+
</DefineTab>
12+
<!-- 定义label组件 -->
13+
<DefineLabel v-slot="{ label, hint, hintClick }">
14+
<h3 class="mt-5 mb-3 flex items-center justify-between text-[14px]">
15+
<span>{{ label }}</span>
16+
<span @click="hintClick" v-if="hint" class="flex items-center text-[12px] text-[#846af7]">
17+
<Icon icon="ep:question-filled" />
18+
{{ hint }}
19+
</span>
20+
</h3>
21+
</DefineLabel>
22+
<!-- TODO 小屏幕的时候是定位在左边的，大屏是分开的 -->
23+
<div class="relative" v-bind="$attrs">
24+
<!-- tab -->
25+
<div
26+
class="absolute left-1/2 top-2 -translate-x-1/2 w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10"
27+
>
28+
<div
29+
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"
30+
:class="selectedTab === 2 && 'after:transform after:translate-x-[100%]'"
31+
>
32+
<ReuseTab
33+
v-for="tab in tabs"
34+
:key="tab.value"
35+
:text="tab.text"
36+
:active="tab.value === selectedTab"
37+
:itemClick="() => switchTab(tab.value)"
38+
/>
39+
</div>
40+
</div>
41+
<div
42+
class="px-7 pb-2 pt-[46px] overflow-y-auto lg:block w-[380px] box-border bg-[#ECEDEF] h-full"
43+
>
44+
<div>
45+
<template v-if="selectedTab === 1">
46+
<ReuseLabel label="写作内容" hint="示例" />
47+
<el-input
48+
type="textarea"
49+
:rows="5"
50+
:maxlength="500"
51+
v-model="writeForm.prompt"
52+
placeholder="请输入写作内容"
53+
showWordLimit
54+
/>
55+
</template>
56+
57+
<template v-else>
58+
<ReuseLabel label="原文" hint="示例" />
59+
<el-input
60+
type="textarea"
61+
:rows="5"
62+
:maxlength="500"
63+
v-model="writeForm.originalContent"
64+
placeholder="请输入原文"
65+
showWordLimit
66+
/>
67+
68+
<ReuseLabel label="回复内容" />
69+
<el-input
70+
type="textarea"
71+
:rows="5"
72+
:maxlength="500"
73+
v-model="writeForm.prompt"
74+
placeholder="请输入回复内容"
75+
showWordLimit
76+
/>
77+
</template>
78+
79+
<ReuseLabel label="长度" />
80+
<Tag v-model="writeForm.length" :tags="writeTags.lenTags" />
81+
<ReuseLabel label="格式" />
82+
<Tag v-model="writeForm.format" :tags="writeTags.formatTags" />
83+
<ReuseLabel label="语气" />
84+
<Tag v-model="writeForm.tone" :tags="writeTags.toneTags" />
85+
<ReuseLabel label="语言" />
86+
<Tag v-model="writeForm.language" :tags="writeTags.langTags" />
87+
88+
<div class="flex items-center justify-center mt-3">
89+
<el-button>重置</el-button>
90+
<el-button @click="submit" color="#846af7">生成</el-button>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</template>
96+
97+
<script setup lang="ts">
98+
import { createReusableTemplate } from '@vueuse/core'
99+
import { ref } from 'vue'
100+
import { ElMessage } from 'element-plus'
101+
import Tag from './Tag.vue'
102+
import { WriteParams } from '@/api/ai/writer'
103+
import { omit } from 'lodash-es'
104+
import { getIntDictOptions } from '@/utils/dict'
105+
106+
type TabType = WriteParams['type']
107+
108+
const emits = defineEmits<{
109+
(e: 'submit', params: Partial<WriteParams>)
110+
}>()
111+
112+
const selectedTab = ref<TabType>(1)
113+
const tabs: {
114+
text: string
115+
value: TabType
116+
}[] = [
117+
{ text: '撰写', value: 1 },
118+
{ text: '回复', value: 2 }
119+
]
120+
const [DefineTab, ReuseTab] = createReusableTemplate<{
121+
active?: boolean
122+
text: string
123+
itemClick: () => void
124+
}>()
125+
126+
const initData: WriteParams = {
127+
type: 1,
128+
prompt: '',
129+
originalContent: '',
130+
tone: 1,
131+
language: 1,
132+
length: 100,
133+
format: 1
134+
}
135+
const writeForm = ref<WriteParams>({ ...initData })
136+
137+
const writeTags = {
138+
lenTags: getIntDictOptions('ai_write_length'),
139+
// 格式
140+
141+
formatTags: getIntDictOptions('ai_write_format'),
142+
// 语气
143+
144+
toneTags: getIntDictOptions('ai_write_tone'),
145+
// 语言
146+
langTags: getIntDictOptions('ai_write_language')
147+
//
148+
}
149+
150+
const [DefineLabel, ReuseLabel] = createReusableTemplate<{
151+
label: string
152+
class?: string
153+
hint?: string
154+
hintClick?: () => void
155+
}>()
156+
157+
const switchTab = (value: TabType) => {
158+
selectedTab.value = value
159+
writeForm.value = { ...initData }
160+
}
161+
162+
const submit = () => {
163+
if (selectedTab.value === 2 && !writeForm.value.originalContent) {
164+
ElMessage.warning('请输入原文')
165+
return
166+
} else if (!writeForm.value.prompt) {
167+
ElMessage.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`)
168+
return
169+
}
170+
emits('submit', {
171+
...(selectedTab.value === 1 ? omit(writeForm.value, ['originalContent']) : writeForm.value),
172+
type: selectedTab.value
173+
})
174+
}
175+
</script>

‎src/views/ai/writer/components/Right.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="h-full box-border py-6 px-7">
3+
<div class="w-full h-full bg-white box-border p-3 sm:p-16 overflow-y-auto">
4+
<el-input
5+
type="textarea"
6+
:value="msg"
7+
autosize
8+
:input-style="{ boxShadow: 'none' }"
9+
resize="none"
10+
placeholder="生成的内容……"
11+
/>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
defineProps({
18+
msg: {
19+
type: String,
20+
default: ''
21+
}
22+
})
23+
</script>
24+
25+
<style scoped></style>

‎src/views/ai/writer/components/Tag.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div class="flex flex-wrap gap-[8px]">
3+
<span
4+
v-for="tag in props.tags"
5+
:key="tag.value"
6+
class="tag mb-2 border-[2px] border-solid border-[#DDDFE3] px-2 leading-6 text-[12px] bg-[#DDDFE3] rounded-[4px] cursor-pointer"
7+
:class="modelValue === tag.value && '!border-[#846af7] text-[#846af7]'"
8+
@click="emits('update:modelValue', tag.value)"
9+
>
10+
{{ tag.label }}
11+
</span>
12+
</div>
13+
</template>
14+
15+
<script setup lang="ts">
16+
const props = withDefaults(
17+
defineProps<{
18+
tags: { label: string; value: string }[]
19+
modelValue: string
20+
[k: string]: any
21+
}>(),
22+
{
23+
tags: () => []
24+
}
25+
)
26+
27+
const emits = defineEmits<{
28+
(e: 'update:modelValue', value: string): void
29+
}>()
30+
</script>
31+
32+
<style scoped></style>

‎src/views/ai/writer/index.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="h-[calc(100vh-var(--top-tool-height)-var(--app-footer-height)-40px)] -m-5 flex">
3+
<Left class="h-full" @submit="submit" />
4+
<Right class="flex-grow" :msg="msg" />
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import Left from './components/Left.vue'
10+
import Right from './components/Right.vue'
11+
import { writeStream } from '@/api/ai/writer'
12+
13+
const msg = ref('')
14+
15+
const submit = async (params) => {
16+
const res = await writeStream(params)
17+
}
18+
</script>
19+
20+
<style scoped></style>

0 commit comments

Comments
 (0)