feat(agent): 重构智能体页面样式和路由配置，优化历史对话组件
This commit is contained in:
林志军
3
src/assets/svg/chatbot.svg
Normal file
3
src/assets/svg/chatbot.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.67236 1.43899C5.82421 1.44614 5.97452 1.46003 6.12256 1.48098L6.34229 1.51711L6.43994 1.54641C6.65484 1.63464 6.78543 1.86394 6.74072 2.1011C6.69562 2.33838 6.48983 2.50499 6.25732 2.50832L6.15674 2.49953L5.98193 2.47121C5.86457 2.45462 5.74526 2.4427 5.62451 2.43703L5.44287 2.43313C3.33645 2.43326 1.62842 4.14113 1.62842 6.24758L1.63623 6.49172C1.67189 7.05608 1.82941 7.58673 2.0835 8.05716L2.16943 8.21634L2.13428 8.39309L1.78369 10.1314L3.65576 9.73099L3.81006 9.69778L3.95557 9.76028C4.41203 9.95375 4.91465 10.061 5.44287 10.0611L5.63037 10.0562C7.55471 9.96281 9.10453 8.44288 9.24561 6.53176C9.26611 6.25665 9.50657 6.04968 9.78174 6.06985C10.0569 6.09036 10.2639 6.33072 10.2437 6.60598C10.0654 9.01938 8.10866 10.9376 5.6792 11.0552L5.44287 11.0611C4.83568 11.061 4.25415 10.9465 3.71826 10.7408L1.39697 11.2378C0.974828 11.328 0.598212 10.9559 0.683105 10.5327L1.12061 8.3638C0.849638 7.81142 0.67902 7.20063 0.638184 6.5552L0.628418 6.24758C0.628418 3.58885 2.78417 1.43326 5.44287 1.43313L5.67236 1.43899ZM7.68408 6.39602C7.95088 6.46634 8.11056 6.73948 8.04053 7.00637L7.97803 7.20852C7.62743 8.1978 6.6839 8.90667 5.57373 8.90677C4.3893 8.90666 3.39433 8.09977 3.10693 7.00637C3.03682 6.73942 3.1965 6.46632 3.46338 6.39602C3.73043 6.32589 4.00355 6.48542 4.07373 6.75247C4.24853 7.41727 4.85492 7.90665 5.57373 7.90677C6.29245 7.90666 6.89786 7.41715 7.07275 6.75247C7.14292 6.48545 7.41706 6.32595 7.68408 6.39602ZM9.11768 0.898947C9.22738 0.698405 9.5158 0.698391 9.62549 0.898947L10.1489 1.85598C10.1755 1.9045 10.2156 1.94468 10.2642 1.97121L11.2212 2.49465C11.4217 2.60434 11.4217 2.89276 11.2212 3.00246L10.2642 3.5259C10.2156 3.55244 10.1755 3.59261 10.1489 3.64114L9.62549 4.59817C9.5158 4.79873 9.22737 4.79873 9.11768 4.59817L8.59424 3.64114C8.5677 3.59261 8.52753 3.55244 8.479 3.5259L7.52197 3.00246C7.32141 2.89277 7.32141 2.60434 7.52197 2.49465L8.479 1.97121C8.52753 1.94468 8.5677 1.9045 8.59424 1.85598L9.11768 0.898947Z" fill="#6D4CFE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
3
src/assets/svg/workflow.svg
Normal file
3
src/assets/svg/workflow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.90151 8.07102C2.81319 8.07125 3.55217 8.81081 3.55217 9.72253C3.55177 10.6339 2.81294 11.373 1.90151 11.3732C0.99004 11.373 0.250403 10.634 0.25 9.72253C0.25 8.81077 0.989791 8.07119 1.90151 8.07102ZM6.00085 8.07102C6.91243 8.07137 7.65151 8.81088 7.65151 9.72253C7.65111 10.6338 6.91218 11.3728 6.00085 11.3732C5.08923 11.3732 4.34974 10.6341 4.34934 9.72253C4.34934 8.81066 5.08898 8.07102 6.00085 8.07102ZM10.0993 8.07102C11.0109 8.07142 11.75 8.81091 11.75 9.72253C11.7496 10.6338 11.0106 11.3728 10.0993 11.3732C9.18772 11.3732 8.44823 10.6341 8.44783 9.72253C8.44783 8.81066 9.18747 8.07102 10.0993 8.07102ZM1.90151 8.945C1.47248 8.94517 1.12398 9.29346 1.12398 9.72253C1.12438 10.1513 1.47272 10.499 1.90151 10.4992C2.33025 10.499 2.67779 10.1512 2.67819 9.72253C2.67819 9.29349 2.3305 8.94523 1.90151 8.945ZM6.00085 8.945C5.57167 8.945 5.22332 9.29335 5.22332 9.72253C5.22372 10.1514 5.57192 10.4992 6.00085 10.4992C6.4295 10.4989 6.77713 10.1512 6.77753 9.72253C6.77753 9.29356 6.42974 8.94534 6.00085 8.945ZM10.0993 8.945C9.67015 8.945 9.32181 9.29335 9.32181 9.72253C9.32221 10.1514 9.6704 10.4992 10.0993 10.4992C10.5279 10.4988 10.8756 10.1511 10.876 9.72253C10.876 9.2936 10.5282 8.9454 10.0993 8.945ZM6.3414 4.11848C6.38942 4.11866 6.4283 4.15751 6.42845 4.20554V5.31935H8.09448C9.30104 5.31952 10.2794 6.29769 10.2794 7.5043V7.67756H9.40545V7.5043C9.40545 6.78038 8.81836 6.1935 8.09448 6.19333H6.42845V7.82948C6.42845 7.87764 6.38952 7.91722 6.3414 7.91739H5.65946C5.61119 7.91739 5.5724 7.87775 5.5724 7.82948V6.19333H3.90638C3.18235 6.19333 2.59541 6.78027 2.59541 7.5043V7.67756H1.72143V7.5043C1.72143 6.29758 2.69966 5.31935 3.90638 5.31935H5.5724V4.20554C5.57255 4.1574 5.61128 4.11848 5.65946 4.11848H6.3414ZM6.00085 0.626831C6.91243 0.627177 7.65151 1.36669 7.65151 2.27834C7.65114 3.18968 6.9122 3.92866 6.00085 3.92901C5.08921 3.92901 4.34971 3.1899 4.34934 2.27834C4.34934 1.36647 5.08898 0.626831 6.00085 0.626831ZM6.00085 1.50081C5.57167 1.50081 5.22332 1.84916 5.22332 2.27834C5.22369 2.70721 5.5719 3.05503 6.00085 3.05503C6.42951 3.05468 6.77716 2.707 6.77753 2.27834C6.77753 1.84937 6.42974 1.50116 6.00085 1.50081Z" fill="#F64B31"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -18,75 +18,8 @@ function setupPageGuard(router: Router) {
|
||||
});
|
||||
}
|
||||
|
||||
// 动态加载 agent 路由
|
||||
let isAgentRouteLoaded = false; // 标志位
|
||||
|
||||
async function loadAgentRoute(router: Router) {
|
||||
if (isAgentRouteLoaded) return; // 防止重复加载
|
||||
try {
|
||||
const agentRouter = {
|
||||
path: '/agent',
|
||||
name: 'Agent',
|
||||
redirect: 'agent/index', // 默认重定向到第一个子路由
|
||||
meta: {
|
||||
locale: '扣子智能体',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.AGENT,
|
||||
roles: ['*'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'AgentIndex',
|
||||
component: () => import('@/views/agent/index'),
|
||||
meta: {
|
||||
title: '首页', // 菜单标题
|
||||
icon: 'home', // 菜单图标（可选）
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.AGENT,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'AgentSettings',
|
||||
component: () => import('@/views/agent/index'),
|
||||
meta: {
|
||||
title: '设置', // 菜单标题
|
||||
icon: 'settings', // 菜单图标（可选）
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.AGENT,
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'AgentDashboard',
|
||||
component: () => import('@/views/agent/index'),
|
||||
meta: {
|
||||
title: '仪表盘', // 菜单标题
|
||||
icon: 'dashboard', // 菜单图标（可选）
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
router.addRoute(agentRouter); // 使用传递进来的 router 实例
|
||||
isAgentRouteLoaded = true; // 标记路由已加载
|
||||
} catch (error) {
|
||||
console.error('Error loading agent route:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default function createRouteGuard(router: Router) {
|
||||
loadAgentRoute(router).then(() => {
|
||||
// 路由加载完成后通知菜单更新
|
||||
setRouteEmitter(router.currentRoute.value);
|
||||
});
|
||||
|
||||
setupPageGuard(router);
|
||||
setupUserLoginInfoGuard(router);
|
||||
|
||||
@ -6,9 +6,36 @@ import IconRepository from '@/assets/svg/icon-repository.svg';
|
||||
const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
{
|
||||
path: '/agent',
|
||||
name: 'AgentPlaceholder',
|
||||
component: () => Promise.resolve({ template: '<router-view />' }), // 占位组件
|
||||
|
||||
name: 'Agent',
|
||||
redirect: 'agent/index',
|
||||
meta: {
|
||||
locale: '扣子智能体',
|
||||
icon: IconRepository,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
id: MENU_GROUP_IDS.AGENT,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: 'AgentIndex',
|
||||
component: () => import('@/views/agent/index'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'index',
|
||||
name: 'AgentIndex',
|
||||
component: () => import('@/views/agent/index'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -1,45 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="logo">
|
||||
<img :src="cozeInfo?.icon_url" class="agent-img" />
|
||||
</div>
|
||||
|
||||
<a-menu mode="inline" theme="light">
|
||||
<a-menu-item key="1">
|
||||
<span class="menu-title">{{ cozeInfo.name }}</span>
|
||||
<span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
|
||||
<span style="float: right">{{ cozeInfo.views }}次使用</span>
|
||||
<p>{{ cozeInfo.description }}</p>
|
||||
</a-menu-item>
|
||||
|
||||
<div v-for="(item, index) in conversations" :key="index">
|
||||
<a-dropdown-button>
|
||||
<span> {{ item.content }} </span>
|
||||
<template #content>
|
||||
<a-doption>重命名</a-doption>
|
||||
<a-popconfirm
|
||||
content="确认删除对话吗？删除后，聊天记录将不可恢复。"
|
||||
@ok="delMessage(item.chat_id, item.conversation_id)"
|
||||
type="error"
|
||||
>
|
||||
<a-button>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
<div class="agent-card">
|
||||
<div class="header-section">
|
||||
<div class="image-container">
|
||||
<img :src="cozeInfo.icon_url" alt="" />
|
||||
</div>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="title-group">
|
||||
<div class="title">{{cozeInfo.name}}</div>
|
||||
<div class="tag">
|
||||
<div class="">
|
||||
<img
|
||||
class="status-icon"
|
||||
:src="chatbotIcon"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">对话式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<div class="count">{{cozeInfo.views}}</div>
|
||||
<div class="label">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description-section">
|
||||
<div class="description">
|
||||
{{cozeInfo.description}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="history-section">
|
||||
<div class="history-title">
|
||||
<div class="text">历史对话</div>
|
||||
</div>
|
||||
<!-- <div class="history-list">-->
|
||||
<!-- <div class="history-item">-->
|
||||
<!-- <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- -->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
|
||||
import chatbotIcon from '@/assets/svg/chatbot.svg';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
type: Object as () => any,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const delMessage = async (chatId, conversationId) => {
|
||||
@ -63,27 +76,9 @@ const truncateText = (text: string, maxLength = 30) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getHistoryChatData(props.cozeInfo.bot_id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.agent-img {
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@import './history.scss';
|
||||
</style>
|
||||
|
||||
227
src/views/agent/chat/components/history.scss
Normal file
227
src/views/agent/chat/components/history.scss
Normal file
@ -0,0 +1,227 @@
|
||||
|
||||
.agent-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-section {
|
||||
align-self: stretch;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.image-container {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
background: #FFEDED;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
img {
|
||||
width: 408.14px;
|
||||
height: 219px;
|
||||
left: -24.07px;
|
||||
top: -29px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
align-self: stretch;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.title {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
background: var(--Brand-1, #F0EDFF);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 10.74px;
|
||||
height: 10.50px;
|
||||
left: 0.63px;
|
||||
top: 0.75px;
|
||||
position: absolute;
|
||||
background: var(--Brand-6, #6D4CFE);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Brand-6, #6D4CFE);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usage-info {
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
|
||||
.count {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.label {
|
||||
left: 43px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description-section {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
align-self: stretch;
|
||||
height: 0px;
|
||||
outline: 1px var(--Border-2, #E6E6E8) solid;
|
||||
outline-offset: -0.50px;
|
||||
}
|
||||
|
||||
.history-section {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-title {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-item {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding: 8px 1px;
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,15 +24,23 @@
|
||||
<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
|
||||
:class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
|
||||
:style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #E6F3FF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
|
||||
data-size="mini-20px"
|
||||
>
|
||||
<img
|
||||
class="status-icon"
|
||||
:src="product.type === 2 ? workflowIcon : chatbotIcon"
|
||||
alt="状态图标"
|
||||
/>
|
||||
<div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<span class="usage-count">{{ product?.views }}</span>
|
||||
<span class="usage-label">次使用</span>
|
||||
<div class="usage-count">{{ product.views }}</div>
|
||||
<div class="usage-label">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,7 +55,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getAgentList } from '@/api/all/agent';
|
||||
|
||||
import workflowIcon from '@/assets/svg/workflow.svg';
|
||||
import chatbotIcon from '@/assets/svg/chatbot.svg';
|
||||
const router = useRouter();
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
@ -77,76 +77,6 @@
|
||||
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;
|
||||
@ -166,4 +96,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.status-tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.status-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-tag {
|
||||
.status-text {
|
||||
color: var(--Functional-Blue-6, #007BFF);
|
||||
}
|
||||
}
|
||||
|
||||
.red-tag {
|
||||
.status-text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
}
|
||||
}
|
||||
|
||||
.usage-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
.usage-count,
|
||||
.usage-label {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: 'HarmonyOS Sans SC', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,21 +1,35 @@
|
||||
<template>
|
||||
<a-layout-sider width="250" style="background: #fff">
|
||||
<div class="logo">
|
||||
<img :src="cozeInfo?.icon_url" class="agent-img" />
|
||||
<div class="container">
|
||||
<div class="header-image-container">
|
||||
<div class="header-image">
|
||||
<img :src="cozeInfo?.icon_url" alt="Header Image" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-container">
|
||||
<div class="title">{{cozeInfo?.name}}</div>
|
||||
<div class="tag">
|
||||
<div class="">
|
||||
<img
|
||||
class="status-icon"
|
||||
:src="workflow"
|
||||
/>
|
||||
</div>
|
||||
<div class="tag-text">工作流</div>
|
||||
</div>
|
||||
<div class="usage-stats">
|
||||
<div class="usage-count">{{cozeInfo?.views}}</div>
|
||||
<div class="usage-label">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{cozeInfo?.description}}
|
||||
</div>
|
||||
<a-menu mode="inline" theme="light">
|
||||
<a-menu-item key="1">
|
||||
<span>{{ cozeInfo.name }}</span>
|
||||
<span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
|
||||
<span style="float: right">{{ cozeInfo.views }}次使用 </span>
|
||||
</a-menu-item>
|
||||
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import workflow from '@/assets/svg/workflow.svg';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
@ -33,13 +47,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.agent-img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@import "./history.scss";
|
||||
</style>
|
||||
|
||||
198
src/views/agent/work-flow/components/history.scss
Normal file
198
src/views/agent/work-flow/components/history.scss
Normal file
@ -0,0 +1,198 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.header-image-container {
|
||||
align-self: stretch;
|
||||
height: 160px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
background: #FFEDED;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.header-image img {
|
||||
width: 408.90px;
|
||||
height: 218px;
|
||||
left: -24.45px;
|
||||
top: -29px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
align-self: stretch;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 20px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
background: var(--Functional-Red-1, #FFE9E7);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-icon-inner {
|
||||
width: 11.50px;
|
||||
height: 10.75px;
|
||||
left: 0.25px;
|
||||
top: 0.63px;
|
||||
position: absolute;
|
||||
background: var(--Functional-Red-6, #F64B31);
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.usage-stats {
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.usage-count {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.usage-label {
|
||||
left: 43px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
align-self: stretch;
|
||||
height: 0px;
|
||||
outline: 1px var(--Border-2, #E6E6E8) solid;
|
||||
outline-offset: -0.50px;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.history-item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
position: absolute;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.scroll-indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="chat-contain">
|
||||
<a-layout>
|
||||
<a-layout>
|
||||
<a-layout-sider width="20%">
|
||||
<a-layout-sider width="15%">
|
||||
<HistoryChat :cozeInfo="cozeInfo" />
|
||||
</a-layout-sider>
|
||||
<a-layout-sider class="layout-sider" width="17%">
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import HistoryChat from './components/historyChat.vue';
|
||||
import HistoryChat from './components/HistoryChat.vue';
|
||||
import DynamicForm from './components/DynamicForm.vue';
|
||||
import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
Reference in New Issue
Block a user