feat(ai): 添加 AI 写作、知识库、思维导图和工作流功能
- 新增 AI 写作功能，包括示例点击、重置和停止流等功能 - 实现 AI 知识库管理，支持创建、编辑和删除知识库 - 添加 AI 思维导图功能，支持预览和管理思维导图 - 实现 AI 工作流管理，支持创建、编辑和删除工作流 - 优化 API 调用，使用 Vben 组件库和 Vue 3 相关特性
This commit is contained in:
gjd
241
apps/web-antd/src/views/ai/write/index/components/Left.vue
Normal file
241
apps/web-antd/src/views/ai/write/index/components/Left.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import type { AiWriteApi } from '#/api/ai/write';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { createReusableTemplate } from '@vueuse/core';
|
||||
import { Button, message, Textarea } from 'ant-design-vue';
|
||||
|
||||
import { DICT_TYPE, getIntDictOptions } from '#/utils';
|
||||
import { AiWriteTypeEnum, WriteExample } from '#/utils/constants';
|
||||
|
||||
import Tag from './Tag.vue';
|
||||
|
||||
type TabType = AiWriteApi.WriteVO['type'];
|
||||
|
||||
defineProps<{
|
||||
isWriting: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'example', param: 'reply' | 'write'): void;
|
||||
(e: 'reset'): void;
|
||||
(e: 'submit', params: Partial<AiWriteApi.WriteVO>): void;
|
||||
}>();
|
||||
|
||||
function omit(obj: Record<string, any>, keysToOmit: string[]) {
|
||||
const result: Record<string, any> = {};
|
||||
for (const key in obj) {
|
||||
if (!keysToOmit.includes(key)) {
|
||||
result[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
/** 点击示例的时候，将定义好的文章作为示例展示出来 */
|
||||
const example = (type: 'reply' | 'write') => {
|
||||
formData.value = {
|
||||
...initData,
|
||||
...omit(WriteExample[type], ['data']),
|
||||
};
|
||||
emit('example', type);
|
||||
};
|
||||
|
||||
/** 重置，将表单值作为初选值 */
|
||||
const reset = () => {
|
||||
formData.value = { ...initData };
|
||||
emit('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;
|
||||
itemClick: () => void;
|
||||
text: string;
|
||||
}>();
|
||||
|
||||
const [DefineLabel, ReuseLabel] = createReusableTemplate<{
|
||||
class?: string;
|
||||
hint?: string;
|
||||
hintClick?: () => void;
|
||||
label: string;
|
||||
}>();
|
||||
|
||||
const initData: AiWriteApi.WriteVO = {
|
||||
type: 1,
|
||||
prompt: '',
|
||||
originalContent: '',
|
||||
tone: 1,
|
||||
language: 1,
|
||||
length: 1,
|
||||
format: 1,
|
||||
};
|
||||
|
||||
const formData = ref<AiWriteApi.WriteVO>({ ...initData });
|
||||
|
||||
/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 */
|
||||
const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.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;
|
||||
}
|
||||
emit('submit', {
|
||||
/** 撰写的时候没有 originalContent 字段*/
|
||||
...(selectedTab.value === 1
|
||||
? omit(formData.value, ['originalContent'])
|
||||
: formData.value),
|
||||
/** 使用选中 tab 值覆盖当前的 type 类型 */
|
||||
type: selectedTab.value,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefineTab v-slot="{ active, text, itemClick }">
|
||||
<span
|
||||
:class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
|
||||
class="z-1 relative inline-block w-1/2 cursor-pointer rounded-full text-center leading-[30px] text-[5C6370] hover:text-black"
|
||||
@click="itemClick"
|
||||
>
|
||||
{{ text }}
|
||||
</span>
|
||||
</DefineTab>
|
||||
<!-- 定义 label 组件：长度/格式/语气/语言等 -->
|
||||
<DefineLabel v-slot="{ label, hint, hintClick }">
|
||||
<h3 class="mb-3 mt-5 flex items-center justify-between text-[14px]">
|
||||
<span>{{ label }}</span>
|
||||
<span
|
||||
v-if="hint"
|
||||
class="flex cursor-pointer select-none items-center text-[12px] text-[#846af7]"
|
||||
@click="hintClick"
|
||||
>
|
||||
<span class="icon-[ant-design--question-circle-outlined]"> </span>
|
||||
{{ hint }}
|
||||
</span>
|
||||
</h3>
|
||||
</DefineLabel>
|
||||
<div class="flex flex-col" v-bind="$attrs">
|
||||
<div class="flex w-full justify-center bg-[#f5f7f9] pt-2">
|
||||
<div class="z-10 w-[303px] rounded-full bg-[#DDDFE3] p-1">
|
||||
<div
|
||||
:class="
|
||||
selectedTab === AiWriteTypeEnum.REPLY &&
|
||||
'after:translate-x-[100%] after:transform'
|
||||
"
|
||||
class="relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-[30px] after:w-1/2 after:rounded-full after:bg-white after:transition-transform after:content-['']"
|
||||
>
|
||||
<ReuseTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
:active="tab.value === selectedTab"
|
||||
:item-click="() => switchTab(tab.value)"
|
||||
:text="tab.text"
|
||||
class="relative z-20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border h-full w-[380px] flex-grow overflow-y-auto bg-[#f5f7f9] px-7 pb-2 lg:block"
|
||||
>
|
||||
<div>
|
||||
<template v-if="selectedTab === 1">
|
||||
<ReuseLabel
|
||||
:hint-click="() => example('write')"
|
||||
hint="示例"
|
||||
label="写作内容"
|
||||
/>
|
||||
<Textarea
|
||||
v-model:value="formData.prompt"
|
||||
:maxlength="500"
|
||||
:rows="5"
|
||||
placeholder="请输入写作内容"
|
||||
show-count
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<ReuseLabel
|
||||
:hint-click="() => example('reply')"
|
||||
hint="示例"
|
||||
label="原文"
|
||||
/>
|
||||
<Textarea
|
||||
v-model:value="formData.originalContent"
|
||||
:maxlength="500"
|
||||
:rows="5"
|
||||
placeholder="请输入原文"
|
||||
show-count
|
||||
/>
|
||||
|
||||
<ReuseLabel label="回复内容" />
|
||||
<Textarea
|
||||
v-model:value="formData.prompt"
|
||||
:maxlength="500"
|
||||
:rows="5"
|
||||
placeholder="请输入回复内容"
|
||||
show-count
|
||||
/>
|
||||
</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="mt-3 flex items-center justify-center">
|
||||
<Button :disabled="isWriting" class="mr-2" @click="reset">
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
:loading="isWriting"
|
||||
style="color: white; background-color: #846af7"
|
||||
@click="submit"
|
||||
>
|
||||
生成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
152
apps/web-antd/src/views/ai/write/index/components/Right.vue
Normal file
152
apps/web-antd/src/views/ai/write/index/components/Right.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { Button, Card, message, Textarea } from 'ant-design-vue';
|
||||
// 粘贴板
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
// 生成的结果
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isWriting: {
|
||||
// 是否正在生成文章
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:content', 'stopStream']);
|
||||
const { copied, copy } = useClipboard();
|
||||
|
||||
/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */
|
||||
const compContent = computed({
|
||||
get() {
|
||||
return props.content;
|
||||
},
|
||||
set(val) {
|
||||
emits('update:content', val);
|
||||
},
|
||||
});
|
||||
|
||||
/** 滚动 */
|
||||
const contentRef = ref<HTMLDivElement>();
|
||||
defineExpose({
|
||||
scrollToBottom() {
|
||||
contentRef.value?.scrollTo(0, contentRef.value?.scrollHeight);
|
||||
},
|
||||
});
|
||||
|
||||
/** 点击复制的时候复制内容 */
|
||||
const showCopy = computed(() => props.content && !props.isWriting); // 是否展示复制按钮，在生成内容完成的时候展示
|
||||
const copyContent = () => {
|
||||
copy(props.content);
|
||||
};
|
||||
|
||||
/** 复制成功的时候 copied.value 为 true */
|
||||
watch(copied, (val) => {
|
||||
if (val) {
|
||||
message.success('复制成功');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Card class="my-card h-full">
|
||||
<template #title>
|
||||
<h3 class="m-0 flex shrink-0 items-center justify-between px-7">
|
||||
<span>预览</span>
|
||||
<!-- 展示在右上角 -->
|
||||
<Button
|
||||
style="color: white; background-color: #846af7"
|
||||
v-show="showCopy"
|
||||
@click="copyContent"
|
||||
size="small"
|
||||
class="flex"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--copy-twotone]"></span>
|
||||
</div>
|
||||
</template>
|
||||
复制
|
||||
</Button>
|
||||
</h3>
|
||||
</template>
|
||||
<div
|
||||
ref="contentRef"
|
||||
class="hide-scroll-bar box-border h-full overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class="relative box-border min-h-full w-full flex-grow bg-white p-3 sm:p-7"
|
||||
>
|
||||
<!-- 终止生成内容的按钮 -->
|
||||
<Button
|
||||
v-show="isWriting"
|
||||
class="z-36 absolute bottom-2 left-1/2 flex -translate-x-1/2 sm:bottom-5"
|
||||
@click="emits('stopStream')"
|
||||
size="small"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--stop-twotone]"></span>
|
||||
</div>
|
||||
</template>
|
||||
终止生成
|
||||
</Button>
|
||||
<Textarea
|
||||
id="inputId"
|
||||
v-model:value="compContent"
|
||||
autosize
|
||||
:bordered="false"
|
||||
placeholder="生成的内容……"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 定义一个 mixin 替代 extend
|
||||
@mixin hide-scroll-bar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scroll-bar {
|
||||
@include hide-scroll-bar;
|
||||
}
|
||||
|
||||
.my-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
@include hide-scroll-bar;
|
||||
}
|
||||
}
|
||||
|
||||
// markmap的tool样式覆盖
|
||||
:deep(.markmap) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.mm-toolbar-brand) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.mm-toolbar) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
32
apps/web-antd/src/views/ai/write/index/components/Tag.vue
Normal file
32
apps/web-antd/src/views/ai/write/index/components/Tag.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<!-- 标签选项 -->
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
[k: string]: any;
|
||||
modelValue: string;
|
||||
tags: { label: string; value: string }[];
|
||||
}>(),
|
||||
{
|
||||
tags: () => [],
|
||||
},
|
||||
);
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap gap-[8px]">
|
||||
<span
|
||||
v-for="tag in props.tags"
|
||||
:key="tag.value"
|
||||
class="tag mb-2 cursor-pointer rounded-[4px] border-[2px] border-solid border-[#DDDFE3] bg-[#DDDFE3] px-2 text-[12px] leading-6"
|
||||
:class="modelValue === tag.value && '!border-[#846af7] text-[#846af7]'"
|
||||
@click="emits('update:modelValue', tag.value)"
|
||||
>
|
||||
{{ tag.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
@@ -1,28 +1,86 @@
|
||||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
import type { AiWriteApi } from '#/api/ai/write';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { nextTick, ref } from 'vue';
|
||||
|
||||
import { alert, Page } from '@vben/common-ui';
|
||||
|
||||
import { writeStream } from '#/api/ai/write';
|
||||
import { WriteExample } from '#/utils/constants';
|
||||
|
||||
import Left from './components/Left.vue';
|
||||
import Right from './components/Right.vue';
|
||||
|
||||
const writeResult = ref(''); // 写作结果
|
||||
const isWriting = ref(false); // 是否正在写作中
|
||||
const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
|
||||
|
||||
/** 停止 stream 生成 */
|
||||
const stopStream = () => {
|
||||
abortController.value?.abort();
|
||||
isWriting.value = false;
|
||||
};
|
||||
|
||||
/** 执行写作 */
|
||||
const rightRef = ref<InstanceType<typeof Right>>();
|
||||
|
||||
const submit = (data: Partial<AiWriteApi.WriteVO>) => {
|
||||
abortController.value = new AbortController();
|
||||
writeResult.value = '';
|
||||
isWriting.value = true;
|
||||
writeStream({
|
||||
data,
|
||||
onMessage: async (res: any) => {
|
||||
const { code, data, msg } = JSON.parse(res.data);
|
||||
if (code !== 0) {
|
||||
alert(`写作异常! ${msg}`);
|
||||
stopStream();
|
||||
return;
|
||||
}
|
||||
writeResult.value = writeResult.value + data;
|
||||
// 滚动到底部
|
||||
await nextTick();
|
||||
rightRef.value?.scrollToBottom();
|
||||
},
|
||||
ctrl: abortController.value,
|
||||
onClose: stopStream,
|
||||
onError: (error: any) => {
|
||||
console.error('写作异常', error);
|
||||
stopStream();
|
||||
// 需要抛出异常，禁止重试
|
||||
throw error;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** 点击示例触发 */
|
||||
const handleExampleClick = (type: keyof typeof WriteExample) => {
|
||||
writeResult.value = WriteExample[type].data;
|
||||
};
|
||||
|
||||
/** 点击重置的时候清空写作的结果*/
|
||||
const reset = () => {
|
||||
writeResult.value = '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/write/index/index.vue"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/write/index/index.vue
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<Page auto-content-height>
|
||||
<div class="absolute bottom-0 left-0 right-0 top-0 flex">
|
||||
<Left
|
||||
:is-writing="isWriting"
|
||||
class="h-full"
|
||||
@submit="submit"
|
||||
@reset="reset"
|
||||
@example="handleExampleClick"
|
||||
/>
|
||||
<Right
|
||||
:is-writing="isWriting"
|
||||
@stop-stream="stopStream"
|
||||
ref="rightRef"
|
||||
class="flex-grow"
|
||||
v-model:content="writeResult"
|
||||
/>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user