feat(component): 添加后退按钮组件并应用到多个页面

- 新增 BackButton 组件,用于实现后退功能
- 在 agent、knowledge、intelligent-agent 等模块的多个页面中集成后退按钮
- 优化后退按钮的样式和交互效果
This commit is contained in:
陈昱达
2025-05-08 18:20:02 +08:00
parent 5d69a36f7d
commit 4cfe4d42eb
7 changed files with 94 additions and 17 deletions

View File

@@ -0,0 +1,38 @@
<template>
<el-button
size="medium"
class="hover-button mb10"
@click="$router.history.go(-1)"
icon="el-icon-arrow-left"
>返回</el-button
>
</template>
<script>
export default {
name: 'backButton',
data() {
return {}
},
props: {},
watch: {},
components: {},
filters: {},
methods: {},
created() {},
mounted() {},
computed: {}
}
</script>
<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';
.hover-button {
border: none !important;
padding: 8px 2px;
&:hover {
background: $--color-primary-button-gradient;
color: #fff;
padding: 8px 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
}
</style>

View File

@@ -19,6 +19,8 @@ import generatedFormat from '@/assets/js/generatedFormat'
import generatedComponents from './generatedComponents'
import RenderDialog from '@/components/RenderDialog/index.vue'
import RenderCropper from '@/components/RenderCropper/index.vue'
import BackButton from '@/components/BackButton/backButton.vue'
Vue.prototype.$generatedFormat = generatedFormat
Vue.prototype.$utils = utils
Vue.prototype.$generatedDictList = generatedFormat.formatList
@@ -62,6 +64,7 @@ Vue.prototype.$echarts = echarts
Vue.use(ElementUI, { locale })
//二次封装的el-table
Vue.component('RTable', RenderTable)
Vue.component('BackButton', BackButton)
Vue.component('RCropper', RenderCropper)
Vue.component('RDialog', RenderDialog)
Vue.component('RSwiper', RenderSwiper)

View File

@@ -118,13 +118,19 @@ export default {
</script>
<template>
<div class="render-container" v-loading="isLoading">
<iframe
@load="handleAgentLoad"
ref="agent"
:src="agent.src"
frameborder="0"
style="width: 100%; height: 100%;border-radius: 50px"
/>
<div class="render-container">
<BackButton></BackButton>
<div
v-loading="isLoading"
style="width: 100%; height: calc(100% - 42px);border-radius: 8px"
>
<iframe
@load="handleAgentLoad"
ref="agent"
:src="agent.src"
frameborder="0"
style="width: 100%; height:100%;"
/>
</div>
</div>
</template>

View File

@@ -1,6 +1,6 @@
<template>
<div class="render-container">
<div class="title"></div>
<back-button style="margin:0 10px"></back-button>
<div class="flex tabs">
<div
@click="chooseTab = item.name"

View File

@@ -1,6 +1,13 @@
<template>
<div class="render-container">
<div slot="header" class="clearfix">
<div slot="header" class="clearfix flex">
<div class="hover-back mr5">
<el-icon
class="el-icon-arrow-left"
style="font-size: 24px;cursor: pointer"
@click.native="$router.history.go(-1)"
></el-icon>
</div>
<h3>上传知识</h3>
</div>
<div class="card-body mt20">
@@ -271,4 +278,11 @@ export default {
-webkit-transform: translateX(0);
}
}
.hover-back {
padding: 1.5px 3px;
&:hover {
background: rgba(87, 104, 161, 0.2);
border-radius: 5px;
}
}
</style>

View File

@@ -1,6 +1,14 @@
<template>
<div class=" render-container">
<div class="clearfix flex align-items-c justify-content-b ">
<div class="hover-back mr5">
<el-icon
class="el-icon-arrow-left"
style="font-size: 24px;cursor: pointer"
@click.native="$router.history.go(-1)"
></el-icon>
</div>
<img
:src="knowledgeImage ? knowledgeImage : knowledgePng_1"
class="header-icon"
@@ -990,4 +998,12 @@ export default {
font-style: normal;
}
}
.hover-back {
padding: 10px 5px;
&:hover {
background: rgba(87, 104, 161, 0.2);
border-radius: 5px;
}
}
</style>

View File

@@ -38,13 +38,13 @@
<p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">
同时也可以通过修改和删除操作对系统内知识体系进行修正和优化
</p>
<el-button
type="primary"
class="mt20 render-button pv8 ph10"
plain
icon="el-icon-document-remove"
>操作文档</el-button
>
<!-- <el-button-->
<!-- type="primary"-->
<!-- class="mt20 render-button pv8 ph10"-->
<!-- plain-->
<!-- icon="el-icon-document-remove"-->
<!-- >操作文档</el-button-->
<!-- >-->
</div>
</div>