mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-09 02:46:50 +08:00
feat(component): 添加后退按钮组件并应用到多个页面
- 新增 BackButton 组件,用于实现后退功能 - 在 agent、knowledge、intelligent-agent 等模块的多个页面中集成后退按钮 - 优化后退按钮的样式和交互效果
This commit is contained in:
38
src/components/BackButton/backButton.vue
Normal file
38
src/components/BackButton/backButton.vue
Normal 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>
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user