|
@@ -1,48 +1,63 @@
|
|
|
<template>
|
|
|
<div class="navbar">
|
|
|
- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
|
+ <hamburger
|
|
|
+ id="hamburger-container"
|
|
|
+ :is-active="sidebar.opened"
|
|
|
+ class="hamburger-container"
|
|
|
+ @toggleClick="toggleSideBar"
|
|
|
+ />
|
|
|
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
|
|
|
<div class="right-menu">
|
|
|
- <template v-if="device!=='mobile'">
|
|
|
- <search id="header-search" class="right-menu-item" />
|
|
|
- <error-log class="errLog-container right-menu-item hover-effect" />
|
|
|
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
- <el-tooltip content="字号" effect="dark" placement="bottom">
|
|
|
- <size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
- </el-tooltip>
|
|
|
+ <template v-if="device !== 'mobile'">
|
|
|
+ <div class="right-menu-item">
|
|
|
+ <svg-icon className="svg-style" size="120" icon-class="AI模块" @click="openChatDialog" />
|
|
|
+ </div>
|
|
|
+ <search id="header-search" class="right-menu-item" />
|
|
|
+ <error-log class="errLog-container right-menu-item hover-effect" />
|
|
|
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
+ <el-tooltip content="字号" effect="dark" placement="bottom">
|
|
|
+ <size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
+ </el-tooltip>
|
|
|
</template>
|
|
|
|
|
|
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
+ <el-dropdown
|
|
|
+ class="avatar-container right-menu-item hover-effect"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
<div class="avatar-wrapper">
|
|
|
- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
|
|
|
+ <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
|
|
|
<i class="el-icon-caret-bottom" />
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <router-link to="/profile/index">
|
|
|
+ <router-link to="/profile/index">
|
|
|
<el-dropdown-item>用户资料</el-dropdown-item>
|
|
|
</router-link>
|
|
|
- <!-- <router-link to="/">
|
|
|
+ <!-- <router-link to="/">
|
|
|
<el-dropdown-item>用户首页</el-dropdown-item>
|
|
|
</router-link> -->
|
|
|
<el-dropdown-item divided @click.native="logout">
|
|
|
- <span style="display:block;">退出登录</span>
|
|
|
+ <span style="display: block">退出登录</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
+ <el-dialog title="ai" :close-on-click-modal="false" top="20px" :visible.sync="chatDialogVisible" append-to-body v-el-drag-dialog>
|
|
|
+ <ChatBox />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import Breadcrumb from '@/components/Breadcrumb'
|
|
|
-import Hamburger from '@/components/Hamburger'
|
|
|
-import ErrorLog from '@/components/ErrorLog'
|
|
|
-import Screenfull from '@/components/Screenfull'
|
|
|
-import SizeSelect from '@/components/SizeSelect'
|
|
|
-import Search from '@/components/HeaderSearch'
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import Breadcrumb from "@/components/Breadcrumb";
|
|
|
+import Hamburger from "@/components/Hamburger";
|
|
|
+import ErrorLog from "@/components/ErrorLog";
|
|
|
+import Screenfull from "@/components/Screenfull";
|
|
|
+import SizeSelect from "@/components/SizeSelect";
|
|
|
+import Search from "@/components/HeaderSearch";
|
|
|
+import ChatBox from "@/components/webAi/index.vue";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
@@ -51,25 +66,30 @@ export default {
|
|
|
ErrorLog,
|
|
|
Screenfull,
|
|
|
SizeSelect,
|
|
|
- Search
|
|
|
+ Search,
|
|
|
+ ChatBox,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chatDialogVisible: false, // 控制聊天对话框的显示
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'sidebar',
|
|
|
- 'avatar',
|
|
|
- 'device'
|
|
|
- ])
|
|
|
+ ...mapGetters(["sidebar", "avatar", "device"]),
|
|
|
},
|
|
|
methods: {
|
|
|
+ openChatDialog() {
|
|
|
+ this.chatDialogVisible = true;
|
|
|
+ },
|
|
|
toggleSideBar() {
|
|
|
- this.$store.dispatch('app/toggleSideBar')
|
|
|
+ this.$store.dispatch("app/toggleSideBar");
|
|
|
},
|
|
|
async logout() {
|
|
|
- await this.$store.dispatch('user/logout')
|
|
|
- this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ await this.$store.dispatch("user/logout");
|
|
|
+ this.$router.push(`/login?redirect=${this.$route.fullPath}`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -78,18 +98,18 @@ export default {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
background: #fff;
|
|
|
-/* box-shadow: 0 1px 4px rgba(0,21,41,.08); */
|
|
|
+ /* box-shadow: 0 1px 4px rgba(0,21,41,.08); */
|
|
|
|
|
|
.hamburger-container {
|
|
|
line-height: 46px;
|
|
|
height: 100%;
|
|
|
float: left;
|
|
|
cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
- -webkit-tap-highlight-color:transparent;
|
|
|
+ transition: background 0.3s;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(0, 0, 0, .025)
|
|
|
+ background: rgba(0, 0, 0, 0.025);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -118,13 +138,17 @@ export default {
|
|
|
font-size: 18px;
|
|
|
color: #5a5e66;
|
|
|
vertical-align: text-bottom;
|
|
|
+ .svg-style {
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
&.hover-effect {
|
|
|
cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(0, 0, 0, .025)
|
|
|
+ background: rgba(0, 0, 0, 0.025);
|
|
|
}
|
|
|
}
|
|
|
}
|