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

feat(agent): 重构智能体页面样式和路由配置，优化历史对话组件

Browse Source
This commit is contained in:
林志军
2025-07-25 13:48:49 +08:00
parent 149831ebc9
commit 11579a647a
11 changed files with 607 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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([]);

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

@ -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;
}
}
}
}