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

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

@ -1,25 +1,24 @@
<template>
<div>
<span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
<div class="px-4px">
<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="left-wap" v-if="isCollapsed == false">
<div class="header">
<div class="image-body">
<img :src="cozeInfo?.image_url" />
</div>
</div>
<div class="content">
<div class="left-wap mr-24px" v-if="isCollapsed == false">
<img :src="cozeInfo?.image_url" class="w-full h-160px rounded-8px object-contain w-100% mb-15px bg-#F0EDFF" />
<div class="content mb-15px">
<div class="title-body">
<div class="text">{{ cozeInfo?.name }}</div>
<div class="tag-body">
<div class="text mr-4px">{{ cozeInfo?.name }}</div>
<div class="tag-body">
<div class="">
<img class="status-icon" :src="chatbotIcon" />
<SvgIcon size="12" name="svg-chatbot" class="color-#6D4CFE" />
</div>
<div class="text">对话式</div>
</div>
</div>
<div class="use-body">
<div class="num">{{ cozeInfo?.views }}</div>
<div class="use-body flex items-center">
<div class="num mr-2px">{{ formatNumberShow({ value: cozeInfo?.views, showExactValue: true }) }}</div>
<div class="text">次使用</div>
</div>
</div>
@ -34,7 +33,7 @@
<div class="header">
<div class="body">
<div class="">
<div class="toggle-btn" @click="toggleCollapse">
<div class="toggle-btn cursor-pointer" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
@ -54,8 +53,7 @@ import { getChatAgent } from '@/api/all/agent';
import { useRouter } from 'vue-router';
import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg';
import workflow from '@/assets/svg/workflow.svg';
import chatbotIcon from '@/assets/svg/chatbot.svg';
import { formatNumberShow } from "@/utils/tools"
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 {
width: 100%;
height: 100%;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start;
align-items: center;
gap: 4px;
display: inline-flex;
}
.workflow-container {
width: 100%;
height: 100%;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start;
align-items: center;
gap: 24px;
display: inline-flex;
.left-wap {
width: 360px;
align-self: stretch;
background: var(--BG-100, #F7F8FA);
overflow: hidden;
border-radius: 8px;
flex-direction: column;
@ -31,37 +30,35 @@
align-items: flex-start;
display: inline-flex;
.header {
align-self: stretch;
height: 160px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
display: flex;
// .header {
// align-self: stretch;
// height: 160px;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// gap: 10px;
// display: flex;
.image-body {
align-self: stretch;
flex: 1 1 0;
position: relative;
background: #FFEDED;
overflow: hidden;
border-radius: 8px;
// .image-body {
// align-self: stretch;
// flex: 1 1 0;
// position: relative;
// background: #FFEDED;
// overflow: hidden;
// border-radius: 8px;
img {
width: 408.90px;
height: 218px;
left: -24.45px;
top: -29px;
position: absolute
}
}
}
// img {
// width: 408.90px;
// height: 218px;
// left: -24.45px;
// top: -29px;
// position: absolute
// }
// }
// }
.content {
align-self: stretch;
padding-top: 15px;
padding-bottom: 15px;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
@ -78,7 +75,7 @@
flex-direction: column;
color: var(--Text-1, #211F24);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-medium;
font-weight: 400;
line-height: 26px;
word-wrap: break-word;
@ -99,7 +96,7 @@
.text {
color: var(--Functional-Red-6, #6D4CFE);
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-medium;
font-weight: 400;
line-height: 20px;
word-wrap: break-word
@ -109,29 +106,20 @@
}
.use-body {
width: 79px;
height: 24px;
position: relative;
.num {
left: 20px;
top: 0px;
position: absolute;
color: var(--Text-2, #3C4043);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-manrope-medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word
}
.text {
left: 43px;
top: 3px;
position: absolute;
color: var(--Text-3, #737478);
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-regular;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
@ -152,7 +140,7 @@
align-self: stretch;
color: var(--Text-2, #3C4043);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-regular;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;

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

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

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

@ -1,20 +1,22 @@
.agent-wrap {
padding: 24px;
border-radius: 4px;
.ant-card-cover img {
height: 150px;
object-fit: cover;
}
.grid-demo {
&:not(:last-child) {
margin-bottom: 16px;
}
}
.span-title {
color: var(--Text-2, #3C4043);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-medium;
font-weight: 400;
line-height: 44px;
line-height: 24px;
word-wrap: break-word;
padding-bottom: 20px;
}
.card-container {
@ -30,24 +32,12 @@
flex-direction: column;
justify-content: 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 {
width: 100%;
height: 100%;
border-radius: 7px;
object-fit: cover;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.card-content {
@ -74,7 +64,7 @@
.card-title {
color: var(--Text-1, #211f24);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
@ -83,24 +73,12 @@
.card-description {
color: var(--Text-3, #737478);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: $font-family-regular;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
}
: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;
@ -123,13 +101,10 @@
align-items: center;
gap: 4px;
.status-icon {
height: 12px;
}
.status-text {
font-size: 12px;
font-family: 'Alibaba PuHuiTi', sans-serif;
font-family: $font-family-medium;
font-weight: 400;
line-height: 20px;
}
@ -151,16 +126,18 @@
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-family: $font-family-regular;
font-weight: 400;
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>
import { defineProps } from 'vue';
import workflow from '@/assets/svg/workflow.svg';
import workflow from '@/assets/svg/svg-workflow.svg';
const props = defineProps({
cozeInfo: {

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

@ -78,7 +78,7 @@ import { marked } from 'marked';
import DOMPurify from 'dompurify';
import menuFold from '@/assets/svg/menu-fold.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 history = ref([]);