From 11579a647a1d69ce98d30af97e7d8533a5e01344 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com> Date: Fri, 25 Jul 2025 13:48:49 +0800 Subject: [PATCH] =?UTF-8?q?feat(agent):=20=E9=87=8D=E6=9E=84=E6=99=BA?= =?UTF-8?q?=E8=83=BD=E4=BD=93=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=92=8C?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E5=AF=B9=E8=AF=9D=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/chatbot.svg | 3 + src/assets/svg/workflow.svg | 3 + src/router/guard/index.ts | 67 ------ src/router/routes/modules/agent.ts | 33 ++- .../agent/chat/components/HistoryChat.vue | 91 ++++--- src/views/agent/chat/components/history.scss | 227 ++++++++++++++++++ src/views/agent/index/index.vue | 23 +- src/views/agent/index/style.scss | 128 +++++----- .../work-flow/components/HistoryChat.vue | 48 ++-- .../agent/work-flow/components/history.scss | 198 +++++++++++++++ src/views/agent/work-flow/index.vue | 4 +- 11 files changed, 607 insertions(+), 218 deletions(-) create mode 100644 src/assets/svg/chatbot.svg create mode 100644 src/assets/svg/workflow.svg create mode 100644 src/views/agent/chat/components/history.scss create mode 100644 src/views/agent/work-flow/components/history.scss diff --git a/src/assets/svg/chatbot.svg b/src/assets/svg/chatbot.svg new file mode 100644 index 0000000..d5bb383 --- /dev/null +++ b/src/assets/svg/chatbot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/workflow.svg b/src/assets/svg/workflow.svg new file mode 100644 index 0000000..d78eb5e --- /dev/null +++ b/src/assets/svg/workflow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts index 066be3b..983ba1a 100644 --- a/src/router/guard/index.ts +++ b/src/router/guard/index.ts @@ -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); diff --git a/src/router/routes/modules/agent.ts b/src/router/routes/modules/agent.ts index b964b38..6ec46b2 100644 --- a/src/router/routes/modules/agent.ts +++ b/src/router/routes/modules/agent.ts @@ -6,9 +6,36 @@ import IconRepository from '@/assets/svg/icon-repository.svg'; const COMPONENTS: AppRouteRecordRaw[] = [ { path: '/agent', - name: 'AgentPlaceholder', - component: () => Promise.resolve({ template: '' }), // 占位组件 - + 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, + }, + }, + ], }, ]; diff --git a/src/views/agent/chat/components/HistoryChat.vue b/src/views/agent/chat/components/HistoryChat.vue index abf5104..f3f43b8 100644 --- a/src/views/agent/chat/components/HistoryChat.vue +++ b/src/views/agent/chat/components/HistoryChat.vue @@ -1,45 +1,58 @@ diff --git a/src/views/agent/chat/components/history.scss b/src/views/agent/chat/components/history.scss new file mode 100644 index 0000000..d2b4103 --- /dev/null +++ b/src/views/agent/chat/components/history.scss @@ -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; + } + } + } +} diff --git a/src/views/agent/index/index.vue b/src/views/agent/index/index.vue index c81addc..01f81e0 100644 --- a/src/views/agent/index/index.vue +++ b/src/views/agent/index/index.vue @@ -24,15 +24,23 @@
{{ product?.name }}
{{ product?.description }}
+
-
-
- {{ product?.type == 1 ? '对话式' : '工作流' }} -
+
+ 状态图标 +
{{ product.type === 1 ? '对话式' : '工作流' }}
- {{ product?.views }} - 次使用 +
{{ product.views }}
+
次使用
@@ -47,7 +55,8 @@ diff --git a/src/views/agent/work-flow/components/history.scss b/src/views/agent/work-flow/components/history.scss new file mode 100644 index 0000000..b212e99 --- /dev/null +++ b/src/views/agent/work-flow/components/history.scss @@ -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; +} diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue index 4349dbd..c91b716 100644 --- a/src/views/agent/work-flow/index.vue +++ b/src/views/agent/work-flow/index.vue @@ -5,7 +5,7 @@
- + @@ -24,7 +24,7 @@