feat: bubble 组件调整
This commit is contained in:
rd
@ -1,13 +1,15 @@
|
||||
<script lang="tsx">
|
||||
import { message, Tooltip } from 'ant-design-vue';
|
||||
import { BubbleList } from '@/components/xt-chat/xt-bubble';
|
||||
import type { BubbleListProps } from 'ant-design-x-vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import SenderInput from '../sender-input/index.vue';
|
||||
import markdownit from 'markdown-it';
|
||||
import { Typography } from 'ant-design-vue';
|
||||
import RightView from './rightView.vue';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import markdownit from 'markdown-it';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { genRandomId } from '@/utils/tools';
|
||||
import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
|
||||
|
||||
const QUESTION_ROLE = 'question';
|
||||
const ANSWER_ROLE = 'text';
|
||||
@ -15,13 +17,25 @@ const ANSWER_ROLE = 'text';
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const route = useRoute();
|
||||
const { copy, copied, isSupported } = useClipboard();
|
||||
const { copy } = useClipboard();
|
||||
|
||||
const senderRef = ref(null);
|
||||
const rightViewRef = ref(null);
|
||||
const bubbleListRef = ref<any>(null);
|
||||
const searchValue = ref('');
|
||||
const generateLoading = ref(false);
|
||||
const conversationList = ref([]);
|
||||
const md = markdownit({ html: true, breaks: true });
|
||||
const currentAnswerId = ref<string | null>(null);
|
||||
|
||||
const showRightView = ref(false);
|
||||
const rightViewContent = ref('');
|
||||
|
||||
const md = markdownit({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
});
|
||||
|
||||
const conversationId = computed(() => {
|
||||
return route.params.conversationId;
|
||||
@ -60,9 +74,49 @@ export default {
|
||||
loading: true,
|
||||
role: ANSWER_ROLE,
|
||||
});
|
||||
currentAnswerId.value = tempId;
|
||||
|
||||
setTimeout(() => {
|
||||
const content = `> Render as markdown content to show rich text!`;
|
||||
const content = `# 测试数据表格
|
||||
## 用户信息表
|
||||
|
||||
| 表头1 | 表头2 |
|
||||
|---|---|
|
||||
| 内容1 | 内容2 |
|
||||
|
||||
## 项目统计表
|
||||
|
||||
| 项目名称 | 负责人 | 进度 | 状态 | 预算(万元) | 完成度 |
|
||||
|----------|--------|------|------|------------|--------|
|
||||
| 电商平台重构 | 张三 | 75% | 进行中 | 50 | 🟡 |
|
||||
| 移动端APP | 李四 | 90% | 测试中 | 30 | 🟢 |
|
||||
| 数据分析系统 | 王五 | 45% | 开发中 | 80 | 🟡 |
|
||||
| 客户管理系统 | 赵六 | 100% | 已完成 | 25 | 🟢 |
|
||||
| 营销自动化 | 钱七 | 30% | 规划中 | 60 | 🔴 |
|
||||
|
||||
## 销售数据
|
||||
|
||||
| 月份 | 销售额(万) | 订单数 | 客户数 | 增长率 | 备注 |
|
||||
|------|------------|--------|--------|--------|------|
|
||||
| 1月 | 120.5 | 156 | 89 | +12% | 春节促销 |
|
||||
| 2月 | 98.3 | 134 | 76 | -18% | 淡季 |
|
||||
| 3月 | 145.2 | 189 | 102 | +48% | 新品上市 |
|
||||
| 4月 | 167.8 | 203 | 115 | +16% | 稳定增长 |
|
||||
| 5月 | 189.6 | 234 | 128 | +13% | 持续增长 |
|
||||
|
||||
> 以上数据仅供参考，实际数据请以系统为准。
|
||||
|
||||
**注意事项：**
|
||||
- 所有数据均为测试数据
|
||||
- 表格支持Markdown格式渲染
|
||||
- 可以包含表情符号和特殊字符`;
|
||||
|
||||
showRightView.value = true;
|
||||
rightViewContent.value = '';
|
||||
nextTick(() => {
|
||||
rightViewContent.value = content;
|
||||
});
|
||||
|
||||
searchValue.value = '';
|
||||
conversationList.value.splice(tempIndex, 1, {
|
||||
id: tempId,
|
||||
@ -98,6 +152,13 @@ export default {
|
||||
|
||||
const handleCancel = () => {
|
||||
generateLoading.value = false;
|
||||
// 中止当前正在输出的回答
|
||||
if (currentAnswerId.value && bubbleListRef.value?.abortTypingByKey) {
|
||||
bubbleListRef.value.abortTypingByKey(currentAnswerId.value);
|
||||
}
|
||||
if (showRightView.value) {
|
||||
rightViewRef.value?.abortTyping?.();
|
||||
}
|
||||
message.info('取消生成');
|
||||
};
|
||||
|
||||
@ -109,33 +170,55 @@ export default {
|
||||
onTypingComplete: () => {
|
||||
console.log('onTypingComplete');
|
||||
generateLoading.value = false;
|
||||
currentAnswerId.value = null;
|
||||
},
|
||||
style: {
|
||||
width: '600px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
},
|
||||
[QUESTION_ROLE]: {
|
||||
placement: 'end',
|
||||
shape: 'round',
|
||||
style: {
|
||||
width: '600px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return () => (
|
||||
<div class="conversation-detail-wrap w-full h-full flex">
|
||||
<div class="flex-1 flex justify-center">
|
||||
<section class="main w-600px h-full relative flex flex-col pt-20px">
|
||||
<BubbleList class="flex-1" roles={roles} items={conversationList.value} />
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
<SenderInput
|
||||
class="w-full"
|
||||
ref={senderRef}
|
||||
placeholder="继续追问..."
|
||||
loading={generateLoading.value}
|
||||
v-model={searchValue.value}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
<p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="flex-1 flex flex-col pt-20px justify-center relative px-16px">
|
||||
{/* <div class="w-full h-full flex "> */}
|
||||
<div class="flex-1 overflow-hidden pb-20px">
|
||||
<BubbleList ref={bubbleListRef} roles={roles} items={conversationList.value} />
|
||||
</div>
|
||||
<div class="w-full flex flex-col justify-center items-center">
|
||||
<SenderInput
|
||||
class="w-600px"
|
||||
ref={senderRef}
|
||||
placeholder="继续追问..."
|
||||
loading={generateLoading.value}
|
||||
v-model={searchValue.value}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
data-ne='123'
|
||||
/>
|
||||
<p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</section>
|
||||
|
||||
{/* 右侧展示区域 */}
|
||||
{showRightView.value && (
|
||||
<RightView
|
||||
ref={rightViewRef}
|
||||
rightViewContent={rightViewContent.value}
|
||||
showRightView={showRightView.value}
|
||||
onClose={() => (showRightView.value = false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
102
src/views/home/components/conversation-detail/rightView.vue
Normal file
102
src/views/home/components/conversation-detail/rightView.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<script lang="tsx">
|
||||
import { Button } from '@arco-design/web-vue';
|
||||
import { Bubble } from '@/components/xt-chat/xt-bubble';
|
||||
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
import markdownit from 'markdown-it';
|
||||
|
||||
export default {
|
||||
emits: ['close'],
|
||||
props: {
|
||||
showRightView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rightViewContent: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props, { emit, expose }) {
|
||||
const bubbleRef = ref(null);
|
||||
|
||||
const md = markdownit({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
});
|
||||
|
||||
const onDownload = () => {
|
||||
// downloadByUrl('');
|
||||
};
|
||||
const abortTyping = () => {
|
||||
bubbleRef.value?.abortTyping?.();
|
||||
};
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<header class="header flex justify-end items-center mb-16px px-32px">
|
||||
<Button type="outline" size="medium" class="mr-16px" v-slots={{ icon: () => <icon-plus size="14" /> }}>
|
||||
素材中心
|
||||
</Button>
|
||||
<Button type="outline" size="medium" class="mr-16px" v-slots={{ icon: () => <icon-plus size="14" /> }}>
|
||||
任务管理
|
||||
</Button>
|
||||
<Button
|
||||
type="outline"
|
||||
size="medium"
|
||||
class="mr-16px"
|
||||
v-slots={{ icon: () => <icon-download size="14" /> }}
|
||||
onClick={onDownload}
|
||||
>
|
||||
下载
|
||||
</Button>
|
||||
<div class="line mr-24px w-1px h-16px bg-#B1B2B5"></div>
|
||||
<icon-close size={20} class="color-#737478 cursor-pointer" onClick={() => emit('close')} />
|
||||
</header>
|
||||
);
|
||||
};
|
||||
const renderContainer = () => {
|
||||
return (
|
||||
<section class="flex-1 overflow-y-auto content flex justify-center px-32px">
|
||||
<Bubble
|
||||
ref={bubbleRef}
|
||||
placement="start"
|
||||
variant="borderless"
|
||||
style={{ width: '100%' }}
|
||||
typing={{ step: 2, interval: 100 }}
|
||||
content={props.rightViewContent}
|
||||
onTypingComplete={() => {
|
||||
console.log('onTypingComplete');
|
||||
}}
|
||||
messageRender={(content) => <div v-html={md.render(content)}></div>}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
expose({
|
||||
abortTyping,
|
||||
});
|
||||
return () => (
|
||||
<div class="right-view-wrap flex-1 flex flex-col overflow-hidden py-20px">
|
||||
{renderHeader()}
|
||||
{renderContainer()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-view-wrap {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
@media (max-width: 900px) {
|
||||
.header,
|
||||
.content {
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user