perf: 样式调整
This commit is contained in:
@ -61,7 +61,7 @@ provide('toggleDrawerMenu', () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a-layout :class="['layout', { mobile: appStore.hideMenu }]">
|
<a-layout :class="['layout', { mobile: appStore.hideMenu }]" class="h-100vh flex flex-col w-full">
|
||||||
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
|
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
|
||||||
<div v-if="navbar" class="layout-navbar">
|
<div v-if="navbar" class="layout-navbar">
|
||||||
<base-navbar />
|
<base-navbar />
|
||||||
@ -98,7 +98,7 @@ provide('toggleDrawerMenu', () => {
|
|||||||
<a-layout class="layout-content" :style="paddingStyle">
|
<a-layout class="layout-content" :style="paddingStyle">
|
||||||
<base-tab-bar v-if="appStore.tabBar" />
|
<base-tab-bar v-if="appStore.tabBar" />
|
||||||
<a-layout-content class="px-5 py-5">
|
<a-layout-content class="px-5 py-5">
|
||||||
<base-breadcrumb />
|
<!-- <base-breadcrumb /> -->
|
||||||
<layout-page />
|
<layout-page />
|
||||||
</a-layout-content>
|
</a-layout-content>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
@ -111,15 +111,11 @@ provide('toggleDrawerMenu', () => {
|
|||||||
$nav-size-height: 72px;
|
$nav-size-height: 72px;
|
||||||
$layout-max-width: 1100px;
|
$layout-max-width: 1100px;
|
||||||
|
|
||||||
.layout {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.layout-navbar {
|
.layout-navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 100;
|
z-index: 9999;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $nav-size-height;
|
height: $nav-size-height;
|
||||||
}
|
}
|
||||||
@ -168,7 +164,7 @@ $layout-max-width: 1100px;
|
|||||||
}
|
}
|
||||||
.layout-content {
|
.layout-content {
|
||||||
min-width: 1366px;
|
min-width: 1366px;
|
||||||
min-height: 100vh;
|
height: 100%;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
background-color: $color-background;
|
background-color: $color-background;
|
||||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="px-4px">
|
<div class="px-4px h-full overflow-hidden">
|
||||||
<div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
|
<div class="back-wap cursor-pointer mb-17px mt--3px !w-fit" @click="goChatIndex">
|
||||||
<icon-left size="16" class="color-#737478 mr-4px" />
|
<icon-left size="16" class="color-#737478 mr-4px" />
|
||||||
<span class="cs">返回空间</span>
|
<span class="cs">返回空间</span>
|
||||||
</div>
|
</div>
|
||||||
@ -29,7 +29,6 @@
|
|||||||
{{ cozeInfo?.description }}
|
{{ cozeInfo?.description }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right-wap">
|
<div class="right-wap">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -55,7 +54,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 { formatNumberShow } from "@/utils/tools"
|
import { formatNumberShow } from '@/utils/tools';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -142,6 +141,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
|
|||||||
height: '100%',
|
height: '100%',
|
||||||
title: name,
|
title: name,
|
||||||
isNeedFunctionCallMessage: true,
|
isNeedFunctionCallMessage: true,
|
||||||
|
isNeedAudio: false,
|
||||||
feedback: {
|
feedback: {
|
||||||
isNeedFeedback: true,
|
isNeedFeedback: true,
|
||||||
feedbackPanel: {
|
feedbackPanel: {
|
||||||
@ -168,7 +168,8 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
|
|||||||
expressionText: '内容由AI生成,无法确保真实准确,仅供参考。',
|
expressionText: '内容由AI生成,无法确保真实准确,仅供参考。',
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
isShow: true,
|
isShow: false,
|
||||||
|
isNeedClose: false,
|
||||||
},
|
},
|
||||||
conversations: {
|
conversations: {
|
||||||
isNeed: true,
|
isNeed: true,
|
||||||
@ -179,7 +180,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
|
|||||||
auth: auth,
|
auth: auth,
|
||||||
userInfo: userInfo,
|
userInfo: userInfo,
|
||||||
header: {
|
header: {
|
||||||
isShow: true,
|
isShow: false,
|
||||||
isNeedClose: false,
|
isNeedClose: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -67,7 +67,7 @@
|
|||||||
.title-body {
|
.title-body {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
// gap: 4px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
|
|||||||
@ -6,29 +6,29 @@
|
|||||||
placeholder="搜索智能体"
|
placeholder="搜索智能体"
|
||||||
size="large"
|
size="large"
|
||||||
allow-clear
|
allow-clear
|
||||||
class="absolute right-0 top-0 !w-400px"
|
class="absolute right-0 top--10px !w-400px"
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<icon-search @click="getData()" />
|
<icon-search @click="getData()" />
|
||||||
</template>
|
</template>
|
||||||
</a-input>
|
</a-input>
|
||||||
<div v-for="(item, index) in list" :key="index">
|
<div v-for="(item, index) in list" :key="index">
|
||||||
<p class="span-title ">{{ item.name }}</p>
|
<p class="span-title w-fit 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="[20, 16]" v-if="item.agent_products.length > 0">
|
||||||
<a-col :xs="24"
|
<a-col :xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="8"
|
:md="8"
|
||||||
:lg="5"
|
:lg="5"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
:xxl="4"
|
:xxl="4"
|
||||||
v-for="(product, k) in item.agent_products">
|
v-for="(product, k) in item.agent_products" :key="k">
|
||||||
<div class="card-container cursor-pointer !h-252px mt-25px" @click="goDetail(product?.type, product?.id)">
|
<div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
|
||||||
<div class="card-image h-120px w-100% bg-cover bg-center bg-#E6E6E8 mb-8px" v-image-main-color="product.image_url">
|
<div class="card-image h-120px w-100% bg-cover bg-center bg-#E6E6E8 mb-8px" v-image-main-color="product.image_url">
|
||||||
<img class="object-contain h-full w-100% " :src="product?.image_url"/>
|
<img class="object-contain h-full w-100% " :src="product?.image_url"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-content w-full">
|
<div class="card-content w-full">
|
||||||
<TextoverTips :context="product.name" class="card-title mb-4px"/>
|
<TextoverTips :context="product.name" class="card-title mb-4px !text-16px"/>
|
||||||
<TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
|
<TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -52,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.card-title {
|
:deep(.card-title) {
|
||||||
color: var(--Text-1, #211f24);
|
color: var(--Text-1, #211f24);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: $font-family-medium;
|
font-family: $font-family-medium;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-description {
|
:deep(.card-description) {
|
||||||
color: var(--Text-3, #737478);
|
color: var(--Text-3, #737478);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: $font-family-regular;
|
font-family: $font-family-regular;
|
||||||
@ -93,7 +93,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
// gap: 4px;
|
||||||
|
|
||||||
|
|
||||||
.status-text {
|
.status-text {
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="h-full overflow-hidden flex flex-col">
|
||||||
<div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
|
<div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
|
||||||
<icon-left size="16" class="color-#737478 mr-4px" />
|
<icon-left size="16" class="color-#737478 mr-4px" />
|
||||||
<span class="cs">返回空间</span>
|
<span class="cs">返回空间</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="workflow-container">
|
<div class="workflow-container flex-1">
|
||||||
<div class="left-wap mr-24px" v-if="isCollapsed == false">
|
<div class="left-wap mr-24px" v-if="isCollapsed == false">
|
||||||
<div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
|
<div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
|
||||||
<img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
|
<img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
|
||||||
@ -84,11 +84,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content flex-1">
|
||||||
<div class="form">
|
<div class="form !h-full">
|
||||||
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
|
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
|
||||||
</div>
|
</div>
|
||||||
<div class="res">
|
<div class="res h-full">
|
||||||
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||||
<div class="markdown-container" v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
|
<div class="markdown-container" v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
|
||||||
<NoData v-if="workFlowRes.output == '' && loading === false" />
|
<NoData v-if="workFlowRes.output == '' && loading === false" />
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
.workflow-container {
|
.workflow-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user