refactor(Agent/Chat): 使用 cozeInfo 替代 botId 获取聊天记录
- 移除了 HistoryChat 组件中的 botId属性 - 使用 cozeInfo.bot_id 替代 botId 获取历史聊天数据
This commit is contained in:
林志军
83
src/views/agent/index/index.vue
Normal file
83
src/views/agent/index/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="agent-wrap">
|
||||
<a-input
|
||||
style="float: right; width: 300px"
|
||||
v-model="query.name"
|
||||
@blur="getData()"
|
||||
placeholder="搜索智能体"
|
||||
size="medium"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<span class="span-title">{{ item.name }}</span>
|
||||
<a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
|
||||
<a-col :span="3" v-for="(product, k) in item.agent_products">
|
||||
<div class="card-container" @click="goDetail(product?.type, product?.id)">
|
||||
<div class="card-image-container">
|
||||
<img class="card-image" :src="product?.icon_url" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">{{ product?.name }}</div>
|
||||
<div class="card-description">{{ product?.description }}</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]">
|
||||
<div :class="['tag-text', { red: product?.type === 1, blue: product?.type === 2 }]">
|
||||
{{ product?.type == 1 ? '对话式' : '工作流' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<span class="usage-count">{{ product?.views }}</span>
|
||||
<span class="usage-label">次使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<NoData v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getAgentList } from '@/api/all/agent';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const list = ref([]);
|
||||
const getData = async () => {
|
||||
const { code, data } = await getAgentList(query);
|
||||
list.value = data;
|
||||
};
|
||||
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const goDetail = (type: number, id: number) => {
|
||||
if (type === 1) {
|
||||
router.push({
|
||||
path: '/agent/chat',
|
||||
query: { id: id },
|
||||
});
|
||||
} else if (type === 2) {
|
||||
router.push({
|
||||
path: '/agent/workFlow',
|
||||
query: { id: id },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
169
src/views/agent/index/style.scss
Normal file
169
src/views/agent/index/style.scss
Normal file
@ -0,0 +1,169 @@
|
||||
.agent-wrap {
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
|
||||
.ant-card-cover img {
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.span-title {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 44px;
|
||||
word-wrap: break-word;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
background: var(--BG-White, white);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--BG-300, #e6e6e8);
|
||||
outline-offset: -1px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-image-container {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
height: 120px;
|
||||
background: #ffe9e7; /* 可以替换成变量 */
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
align-self: stretch;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
|
||||
&.red {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--Functional-Blue-6, #3366ff);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 11.5px;
|
||||
height: 10.75px;
|
||||
left: 0.25px;
|
||||
top: 0.63px;
|
||||
background: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.red {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--Functional-Blue-6, #3366ff);
|
||||
}
|
||||
}
|
||||
|
||||
.usage-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: HarmonyOS Sans SC, Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 35px;
|
||||
width: 400px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
|
||||
&.arco-textarea-wrapper {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user