renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 样式调整

Browse Source
This commit is contained in:
rd
2025-07-30 12:00:14 +08:00
parent 9434149d60
commit 4a7efc2c9b
11 changed files with 94 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/svg/chatbot.svg
View File

@ -1,3 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

3
src/assets/svg/svg-agent.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.5059 0.831106C10.4088 0.831106 14.3176 1.24291 14.6778 6.00005C14.8856 9.07256 13.6609 9.81256 13.4991 10.5059C13.1986 11.3842 12.713 11.3843 12.7129 13.21V15.1739L5.7725 15.1739V13.6465C4.74907 13.7495 2.71435 12.1885 2.70218 10.8868C2.69615 10.2304 2.70079 10.0334 2.70218 10.0069C2.24176 9.87876 1.32525 9.71995 1.29984 9.01372C1.26463 8.03028 1.89527 7.32357 2.12015 7.0479C2.34503 6.77222 2.65685 6.24222 2.71488 6.03911C2.77317 5.83402 3.1725 3.14468 4.66996 2.08111C6.1682 1.01735 7.4787 0.785117 8.5059 0.831106ZM9.05863 3.20318C8.52988 3.20318 8.10062 3.63146 8.10062 4.16021C8.10063 4.2264 8.10736 4.29116 8.12015 4.35357L6.37308 5.86822C6.18682 5.7718 5.97522 5.71685 5.75101 5.71685C5.00285 5.717 4.39652 6.32412 4.39652 7.07232C4.39682 7.82026 5.00304 8.42666 5.75101 8.42681C6.32378 8.4268 6.81255 8.07073 7.01078 7.56841L10.1739 8.03228C10.308 8.51062 10.7474 8.86138 11.2686 8.86138C11.8963 8.86126 12.4053 8.35236 12.4053 7.72466C12.4053 7.09697 11.8963 6.58806 11.2686 6.58794C10.7682 6.58794 10.3433 6.91132 10.1914 7.3604L7.09476 6.9063C7.06827 6.68908 6.99181 6.48745 6.87504 6.3145L8.48148 4.92193C8.6421 5.04374 8.8415 5.11724 9.05863 5.11724C9.58722 5.1171 10.0156 4.68881 10.0157 4.16021C10.0157 3.63154 9.58726 3.20331 9.05863 3.20318Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
src/assets/svg/svg-chatbot.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<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="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

2
src/assets/svg/workflow.svg → src/assets/svg/svg-workflow.svg
View File

@ -1,3 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <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"/> <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="currentColor"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

2
src/router/routes/modules/agent.ts
View File

@ -1,7 +1,7 @@
import type { AppRouteRecordRaw } from '../types'; import type { AppRouteRecordRaw } from '../types';
import { MENU_GROUP_IDS } from '@/router/constants'; import { MENU_GROUP_IDS } from '@/router/constants';
import IconRepository from '@/assets/svg/chatbot.svg'; import IconRepository from '@/assets/svg/svg-agent.svg';
const COMPONENTS: AppRouteRecordRaw[] = [ const COMPONENTS: AppRouteRecordRaw[] = [
{ {

32
src/views/agent/chat/index.vue
View File

@ -1,25 +1,24 @@
<template> <template>
<div> <div class="px-4px">
<span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span> <div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
<icon-left size="16" class="color-#737478 mr-4px" />
<span class="cs">返回空间</span>
</div>
<div class="workflow-container"> <div class="workflow-container">
<div class="left-wap" v-if="isCollapsed == false"> <div class="left-wap mr-24px" v-if="isCollapsed == false">
<div class="header"> <img :src="cozeInfo?.image_url" class="w-full h-160px rounded-8px object-contain w-100% mb-15px bg-#F0EDFF" />
<div class="image-body"> <div class="content mb-15px">
<img :src="cozeInfo?.image_url" />
</div>
</div>
<div class="content">
<div class="title-body"> <div class="title-body">
<div class="text">{{ cozeInfo?.name }}</div> <div class="text mr-4px">{{ cozeInfo?.name }}</div>
<div class="tag-body"> <div class="tag-body">
<div class=""> <div class="">
<img class="status-icon" :src="chatbotIcon" /> <SvgIcon size="12" name="svg-chatbot" class="color-#6D4CFE" />
</div> </div>
<div class="text">对话式</div> <div class="text">对话式</div>
</div> </div>
</div> </div>
<div class="use-body"> <div class="use-body flex items-center">
<div class="num">{{ cozeInfo?.views }}</div> <div class="num mr-2px">{{ formatNumberShow({ value: cozeInfo?.views, showExactValue: true }) }}</div>
<div class="text">次使用</div> <div class="text">次使用</div>
</div> </div>
</div> </div>
@ -34,7 +33,7 @@
<div class="header"> <div class="header">
<div class="body"> <div class="body">
<div class=""> <div class="">
<div class="toggle-btn" @click="toggleCollapse"> <div class="toggle-btn cursor-pointer" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'"> <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" /> <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip> </a-tooltip>
@ -54,8 +53,7 @@ import { getChatAgent } from '@/api/all/agent';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import menuFold from '@/assets/svg/menu-fold.svg'; import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg'; import menuUnfold from '@/assets/svg/menu-unfold.svg';
import workflow from '@/assets/svg/workflow.svg'; import { formatNumberShow } from "@/utils/tools"
import chatbotIcon from '@/assets/svg/chatbot.svg';
const router = useRouter(); const router = useRouter();

86
src/views/agent/chat/style.scss
View File

@ -1,29 +1,28 @@
.cs {
color: #3C4043;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.back-wap { .back-wap {
width: 100%; width: 100%;
height: 100%;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 4px;
display: inline-flex; display: inline-flex;
} }
.workflow-container { .workflow-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 24px;
display: inline-flex; display: inline-flex;
.left-wap { .left-wap {
width: 360px; width: 360px;
align-self: stretch; align-self: stretch;
background: var(--BG-100, #F7F8FA);
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
flex-direction: column; flex-direction: column;
@ -31,37 +30,35 @@
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
.header { // .header {
align-self: stretch; // align-self: stretch;
height: 160px; // height: 160px;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
gap: 10px; // gap: 10px;
display: flex; // display: flex;
.image-body { // .image-body {
align-self: stretch; // align-self: stretch;
flex: 1 1 0; // flex: 1 1 0;
position: relative; // position: relative;
background: #FFEDED; // background: #FFEDED;
overflow: hidden; // overflow: hidden;
border-radius: 8px; // border-radius: 8px;
img { // img {
width: 408.90px; // width: 408.90px;
height: 218px; // height: 218px;
left: -24.45px; // left: -24.45px;
top: -29px; // top: -29px;
position: absolute // position: absolute
} // }
} // }
} // }
.content { .content {
align-self: stretch; align-self: stretch;
padding-top: 15px;
padding-bottom: 15px;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
@ -78,7 +75,7 @@
flex-direction: column; flex-direction: column;
color: var(--Text-1, #211F24); color: var(--Text-1, #211F24);
font-size: 18px; font-size: 18px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
word-wrap: break-word; word-wrap: break-word;
@ -99,7 +96,7 @@
.text { .text {
color: var(--Functional-Red-6, #6D4CFE); color: var(--Functional-Red-6, #6D4CFE);
font-size: 12px; font-size: 12px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
word-wrap: break-word word-wrap: break-word
@ -109,29 +106,20 @@
} }
.use-body { .use-body {
width: 79px;
height: 24px;
position: relative;
.num { .num {
left: 20px;
top: 0px;
position: absolute;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: $font-family-manrope-medium;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
word-wrap: break-word word-wrap: break-word
} }
.text { .text {
left: 43px;
top: 3px;
position: absolute;
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 12px; font-size: 12px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
@ -152,7 +140,7 @@
align-self: stretch; align-self: stretch;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;

33
src/views/agent/index/index.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div class="agent-wrap"> <div class="agent-wrap relative">
<a-input <a-input
style="float: right;"
v-model="query.name" v-model="query.name"
@blur="getData()" @blur="getData()"
placeholder="搜索智能体" placeholder="搜索智能体"
size="medium" size="large"
allow-clear allow-clear
class="absolute right-0 top-0 !w-400px"
> >
<template #prefix> <template #prefix>
<icon-search /> <icon-search />
</template> </template>
</a-input> </a-input>
<div v-for="(item, index) in list" :key="index"> <div v-for="(item, index) in list" :key="index">
<span class="span-title">{{ item.name }}</span> <p class="span-title mb-16px">{{ item.name }}</p>
<a-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0"> <a-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0">
<a-col :xs="24" <a-col :xs="24"
:sm="12" :sm="12"
@ -22,17 +22,14 @@
:xl="6" :xl="6"
:xxl="4" :xxl="4"
v-for="(product, k) in item.agent_products"> v-for="(product, k) in item.agent_products">
<div class="card-container" @click="goDetail(product?.type, product?.id)"> <div class="card-container cursor-pointer" @click="goDetail(product?.type, product?.id)">
<div class="card-image-container">
<img <img
class="card-image" class="card-image h-120px object-contain w-100% mb-8px bg-#F0EDFF"
:src="product?.icon_url" :src="product?.icon_url"
style="width: 100%; height: 100%; object-fit: cover;"
/> />
</div>
<div class="card-content"> <div class="card-content">
<div class="card-title">{{ product?.name }}</div> <div class="card-title mb-4px">{{ product?.name }}</div>
<div class="card-description">{{ product?.description }}</div> <div class="card-description mb-8px">{{ product?.description }}</div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -41,15 +38,17 @@
:style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }" :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
data-size="mini-20px" data-size="mini-20px"
> >
<img <SvgIcon
class="status-icon" size="12"
:src="product.type === 2 ? workflowIcon : chatbotIcon" :class="product.type === 2 ? 'color-#F64B31' : 'color-#6D4CFE'"
class="mr-4px"
:name="product.type === 2 ? 'svg-workflow' : 'svg-chatbot'"
alt="状态图标" alt="状态图标"
/> />
<div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div> <div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div>
</div> </div>
<div class="usage-info"> <div class="usage-info">
<div class="usage-count">{{ product.views }}</div> <div class="usage-count mr-2px">{{ formatNumberShow({ value: product?.views, showExactValue: true }) }}</div>
<div class="usage-label">次使用</div> <div class="usage-label">次使用</div>
</div> </div>
</div> </div>
@ -65,8 +64,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { getAgentList } from '@/api/all/agent'; import { getAgentList } from '@/api/all/agent';
import workflowIcon from '@/assets/svg/workflow.svg'; import { formatNumberShow } from "@/utils/tools"
import chatbotIcon from '@/assets/svg/chatbot.svg';
const router = useRouter(); const router = useRouter();
const list = ref([]); const list = ref([]);

55
src/views/agent/index/style.scss
View File

@ -1,20 +1,22 @@
.agent-wrap { .agent-wrap {
padding: 24px;
border-radius: 4px; border-radius: 4px;
.ant-card-cover img { .ant-card-cover img {
height: 150px; height: 150px;
object-fit: cover; object-fit: cover;
} }
.grid-demo {
&:not(:last-child) {
margin-bottom: 16px;
}
}
.span-title { .span-title {
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 44px; line-height: 24px;
word-wrap: break-word; word-wrap: break-word;
padding-bottom: 20px;
} }
.card-container { .card-container {
@ -30,24 +32,12 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 8px;
margin: 5px;
} }
.card-image-container {
width: 99%;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.card-image { .card-image {
width: 100%; border-top-left-radius: 8px;
height: 100%; border-top-right-radius: 8px;
border-radius: 7px;
object-fit: cover;
} }
.card-content { .card-content {
@ -74,7 +64,7 @@
.card-title { .card-title {
color: var(--Text-1, #211f24); color: var(--Text-1, #211f24);
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
word-wrap: break-word; word-wrap: break-word;
@ -83,24 +73,12 @@
.card-description { .card-description {
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;
} }
:deep(.arco-input-wrapper) { :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 { &.arco-textarea-wrapper {
height: 60px; height: 60px;
@ -123,13 +101,10 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
.status-icon {
height: 12px;
}
.status-text { .status-text {
font-size: 12px; font-size: 12px;
font-family: 'Alibaba PuHuiTi', sans-serif; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
} }
@ -151,16 +126,18 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 2px;
.usage-count, .usage-count,
.usage-label { .usage-label {
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 12px; font-size: 12px;
font-family: 'HarmonyOS Sans SC', sans-serif; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
} }
.usage-count {
font-family: $font-family-manrope-regular;
}
} }
} }

2
src/views/agent/work-flow/components/HistoryChat.vue
View File

@ -35,7 +35,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps } from 'vue'; import { defineProps } from 'vue';
import workflow from '@/assets/svg/workflow.svg'; import workflow from '@/assets/svg/svg-workflow.svg';
const props = defineProps({ const props = defineProps({
cozeInfo: { cozeInfo: {

2
src/views/agent/work-flow/index.vue
View File

@ -78,7 +78,7 @@ import { marked } from 'marked';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import menuFold from '@/assets/svg/menu-fold.svg'; import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg'; import menuUnfold from '@/assets/svg/menu-unfold.svg';
import workflow from '@/assets/svg/workflow.svg'; import workflow from '@/assets/svg/svg-workflow.svg';
const formFields = ref({}); const formFields = ref({});
const history = ref([]); const history = ref([]);