优化前端界面,新增注销功能

This commit is contained in:
RockYang 2023-04-09 23:34:16 +08:00
parent 5acd0290fa
commit 117f928b56
3 changed files with 58 additions and 24 deletions

View File

@ -156,9 +156,11 @@ export default defineComponent({
mounted() { mounted() {
// //
const data = getLoginUser(); const data = getLoginUser();
this.user = data.user; if (data !== null) {
this.user['active_time'] = dateFormat(this.user['active_time']); this.user = data["user"];
this.user['expired_time'] = dateFormat(this.user['expired_time']); this.user['active_time'] = dateFormat(this.user['active_time']);
this.user['expired_time'] = dateFormat(this.user['expired_time']);
}
}, },
methods: { methods: {
save: function () { save: function () {

View File

@ -20,6 +20,6 @@ export function getLoginUser() {
} }
} }
export function setLoginUser(value) { export function setLoginUser(user) {
sessionStorage.setItem(SessionUserKey, JSON.stringify(value)) sessionStorage.setItem(SessionUserKey, JSON.stringify(user))
} }

View File

@ -12,18 +12,36 @@
<el-col :span="12"> <el-col :span="12">
<div class="tool-box"> <div class="tool-box">
<el-button type="danger" class="clear-history" size="small" circle @click="clearChatHistory"> <el-dropdown :hide-on-click="true" class="user-info" trigger="click">
<el-icon> <span class="el-dropdown-link">
<Delete/> <el-image src="images/avatar/user.png"/>
</el-icon> <el-icon><ArrowDown/></el-icon>
</el-button> </span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="showConnectDialog = true">
<el-icon>
<Tools/>
</el-icon>
<span>聊天设置</span>
</el-dropdown-item>
<el-button type="info" size="small" class="config" ref="send-btn" circle <el-dropdown-item @click="clearChatHistory">
@click="showConnectDialog = true"> <el-icon>
<el-icon> <Delete/>
<Tools/> </el-icon>
</el-icon> <span>删除记录</span>
</el-button> </el-dropdown-item>
<el-dropdown-item>
<el-icon>
<Monitor/>
</el-icon>
<span>注销</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -141,7 +159,7 @@ import ChatPrompt from "@/components/plus/ChatPrompt.vue";
import ChatReply from "@/components/plus/ChatReply.vue"; import ChatReply from "@/components/plus/ChatReply.vue";
import {isMobile, randString} from "@/utils/libs"; import {isMobile, randString} from "@/utils/libs";
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import {Tools, Lock, Delete, Picture, Search} from '@element-plus/icons-vue' import {Tools, Lock, Delete, Picture, Search, ArrowDown, Monitor} from '@element-plus/icons-vue'
import ConfigDialog from '@/components/ConfigDialog.vue' import ConfigDialog from '@/components/ConfigDialog.vue'
import {httpPost, httpGet} from "@/utils/http"; import {httpPost, httpGet} from "@/utils/http";
import {getSessionId, setLoginUser} from "@/utils/storage"; import {getSessionId, setLoginUser} from "@/utils/storage";
@ -150,7 +168,7 @@ import 'highlight.js/styles/a11y-dark.css'
export default defineComponent({ export default defineComponent({
name: "ChatPlus", name: "ChatPlus",
components: {Search, ChatPrompt, ChatReply, Tools, Lock, Delete, Picture, ConfigDialog}, components: {ArrowDown, Search, ChatPrompt, ChatReply, Tools, Lock, Delete, Picture, Monitor, ConfigDialog},
data() { data() {
return { return {
title: 'ChatGPT 控制台', title: 'ChatGPT 控制台',
@ -372,8 +390,10 @@ export default defineComponent({
target.blur(); target.blur();
} }
if (this.sending || this.inputValue.trim().length === 0) { if (this.inputValue.trim().length === 0) {
return false; return false;
} else if (this.sending) {
ElMessage.warning("AI 正在作答中请稍后...")
} }
// //
@ -509,12 +529,24 @@ export default defineComponent({
justify-content flex-end; justify-content flex-end;
align-items center; align-items center;
.el-image { .user-info {
margin-right 5px; margin-left 20px;
}
.clear-history, .config { .el-dropdown-link {
margin-left 5px; cursor pointer
img {
width 30px;
height 30px;
border-radius 50%;
}
.el-icon {
bottom 8px
color #cccccc
margin-left 5px;
}
}
} }
} }