mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 12:43:43 +08:00
refactor: refactor controller handler module and admin module
This commit is contained in:
RockYang
396
web/src/views/admin/Admin.vue
Normal file
396
web/src/views/admin/Admin.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-container>
|
||||
<el-aside
|
||||
:style="{
|
||||
height: winHeight + 'px',
|
||||
width: sideWidth + 'px',
|
||||
}"
|
||||
>
|
||||
<div :class="showSidebar?'title':'title hide'">
|
||||
<el-image :src="logo" class="logo"/>
|
||||
<span class="text">{{ title }}</span>
|
||||
<span
|
||||
class="fold"
|
||||
@click="hideSidebar()"
|
||||
:style="{ right: foldIconRight + 'px' }"
|
||||
>
|
||||
<el-icon>
|
||||
<Fold/>
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="nav-list">
|
||||
<li
|
||||
v-for="nav in navs"
|
||||
:key="nav.id"
|
||||
:style="{ paddingLeft: nodeListPaddingLeft + 'px' }"
|
||||
:class="nav.active?'active':''"
|
||||
@click="addTab(nav)"
|
||||
>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
:content="nav.title"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<Menu/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<span v-if="showSidebar">{{ nav.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-row class="tool-box">
|
||||
<el-button type="primary" plain @click="logout" v-show="isLogin">退出登录</el-button>
|
||||
</el-row>
|
||||
</el-aside>
|
||||
|
||||
<el-main>
|
||||
<div
|
||||
class="main-container"
|
||||
:style="{ height: winHeight + 'px' }"
|
||||
>
|
||||
<x-welcome v-if="curTab==='welcome'"/>
|
||||
|
||||
<div v-else>
|
||||
<el-tabs
|
||||
v-model="curTab"
|
||||
class="content-tabs"
|
||||
type="card"
|
||||
closable
|
||||
@tab-remove="removeTab"
|
||||
@tab-change="changeTab"
|
||||
>
|
||||
<el-tab-pane label="系统配置" name="config" v-if="arrayContains(tabs, 'config')">
|
||||
<sys-config v-if="curTab==='config'"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="口令管理" name="user" v-if="arrayContains(tabs, 'user')">
|
||||
<user-list v-if="curTab==='user'"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="角色管理" name="role" v-if="arrayContains(tabs, 'role')">
|
||||
<role-list v-if="curTab==='role'"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
title="管理后台登录"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-form :model="user" label-width="80px">
|
||||
<el-form-item label="用户名：">
|
||||
<el-input
|
||||
v-model.trim="user.username"
|
||||
autocomplete="off"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码：">
|
||||
<el-input
|
||||
v-model.trim="user.password"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
@keyup="loginInputKeyup"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="login">提交</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineComponent} from 'vue'
|
||||
import {Fold, Menu} from "@element-plus/icons-vue"
|
||||
import XWelcome from "@/views/admin/Welcome.vue";
|
||||
import SysConfig from "@/views/admin/SysConfig.vue";
|
||||
import {arrayContains, removeArrayItem} from "@/utils/libs";
|
||||
import UserList from "@/views/admin/UserList.vue";
|
||||
import RoleList from "@/views/admin/RoleList.vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {setLoginUser} from "@/utils/storage";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: "XAdmin",
|
||||
components: {RoleList, UserList, SysConfig, XWelcome, Fold, Menu},
|
||||
data() {
|
||||
return {
|
||||
title: "Chat-Plus 控制台",
|
||||
logo: 'images/logo.png',
|
||||
user: {},
|
||||
navs: [
|
||||
{
|
||||
id: 1,
|
||||
title: '系统配置',
|
||||
tab: 'config',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '口令管理',
|
||||
tab: 'user',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '角色管理',
|
||||
tab: 'role',
|
||||
active: false,
|
||||
}
|
||||
],
|
||||
|
||||
curNav: null,
|
||||
curTab: 'welcome',
|
||||
tabs: [],
|
||||
isLogin: false,
|
||||
|
||||
showDialog: false,
|
||||
|
||||
// window height
|
||||
winHeight: window.innerHeight,
|
||||
showSidebar: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
sideWidth: function () {
|
||||
return this.showSidebar ? 250 : 30
|
||||
},
|
||||
|
||||
foldIconRight: function () {
|
||||
return this.showSidebar ? 3 : 0
|
||||
},
|
||||
|
||||
nodeListPaddingLeft: function () {
|
||||
return this.showSidebar ? 20 : 5
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
// bind window resize event
|
||||
window.addEventListener("resize", function () {
|
||||
this.winHeight = window.innerHeight
|
||||
})
|
||||
this.checkSession()
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkSession: function () {
|
||||
httpGet("/api/session/get").then(() => {
|
||||
this.isLogin = true
|
||||
}).catch(() => {
|
||||
this.showDialog = true
|
||||
})
|
||||
},
|
||||
|
||||
// 登录输入框输入事件处理
|
||||
loginInputKeyup: function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.login();
|
||||
}
|
||||
},
|
||||
|
||||
// 登录
|
||||
login: function () {
|
||||
if (!this.user.username || !this.user.password) {
|
||||
ElMessage.error('请输入用户名和密码')
|
||||
return
|
||||
}
|
||||
httpPost('/api/admin/login', this.user).then((res) => {
|
||||
setLoginUser(res.data)
|
||||
this.showDialog = false
|
||||
this.isLogin = true
|
||||
this.user = {}
|
||||
}).catch((e) => {
|
||||
ElMessage.error('登录失败，' + e.message)
|
||||
})
|
||||
},
|
||||
|
||||
logout: function () {
|
||||
httpPost("/api/logout", {opt: "logout"}).then(() => {
|
||||
this.checkSession();
|
||||
this.isLogin = false
|
||||
}).catch(() => {
|
||||
ElMessage.error("注销失败");
|
||||
})
|
||||
},
|
||||
|
||||
arrayContains(array, value, compare) {
|
||||
return arrayContains(array, value, compare);
|
||||
},
|
||||
|
||||
hideSidebar: function () {
|
||||
this.showSidebar = !this.showSidebar
|
||||
},
|
||||
|
||||
// 添加 tab 窗口
|
||||
addTab: function (nav) {
|
||||
if (this.curNav) {
|
||||
this.curNav.active = false
|
||||
}
|
||||
this.curNav = nav;
|
||||
this.curNav.active = true;
|
||||
this.curTab = nav.tab;
|
||||
if (!arrayContains(this.tabs, nav.tab)) {
|
||||
this.tabs.push(nav.tab);
|
||||
}
|
||||
},
|
||||
|
||||
changeTab: function (name) {
|
||||
for (let i = 0; i < this.navs.length; i++) {
|
||||
if (this.navs[i].tab === name) {
|
||||
this.curNav.active = false
|
||||
this.curNav = this.navs[i];
|
||||
this.curNav.active = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 删除 tab 窗口
|
||||
removeTab: function (name) {
|
||||
this.tabs = removeArrayItem(this.tabs, name);
|
||||
if (this.tabs.length === 0) {
|
||||
this.curTab = 'welcome';
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.navs.length; i++) {
|
||||
if (this.navs[i].tab === this.tabs[this.tabs.length - 1]) {
|
||||
this.addTab(this.navs[i]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
$sideBgColor = #252526;
|
||||
$borderColor = #4676d0;
|
||||
.el-aside {
|
||||
background-color: $sideBgColor;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
border-bottom: 2px solid #333841;
|
||||
display flex
|
||||
flex-direction row
|
||||
|
||||
.logo {
|
||||
background-color #ffffff
|
||||
border-radius 50%;
|
||||
width 32px;
|
||||
height 32px;
|
||||
margin: 12px 5px 0 5px;
|
||||
}
|
||||
|
||||
.fold {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-left 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title.hide {
|
||||
.text {
|
||||
display none
|
||||
}
|
||||
|
||||
.logo {
|
||||
display none
|
||||
}
|
||||
|
||||
.fold {
|
||||
margin-left 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
line-height: 40px;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0 10px 0 10px;
|
||||
border-bottom: 1px dashed #333841;
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.delete {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color: #363535
|
||||
}
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
display flex
|
||||
justify-content center
|
||||
padding 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
--el-main-padding: 0;
|
||||
margin: 0;
|
||||
background-image url("~@/assets/img/bg_01.jpeg")
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.content-tabs {
|
||||
background: #ffffff;
|
||||
padding 10px 20px;
|
||||
|
||||
.el-tabs__item {
|
||||
height 35px
|
||||
line-height 35px
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
175
web/src/views/admin/Login.vue
Normal file
175
web/src/views/admin/Login.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg"></div>
|
||||
<div class="main">
|
||||
<div class="contain">
|
||||
<div class="logo">
|
||||
<el-image src="../images/logo.png" fit="cover"/>
|
||||
</div>
|
||||
<div class="header">{{ title }}</div>
|
||||
<div class="content">
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入用户名" size="large" v-model="username" autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<UserFilled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码" size="large" v-model="password" show-password autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row">
|
||||
<el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {onMounted, ref} from "vue";
|
||||
import {Lock, UserFilled} from "@element-plus/icons-vue";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {setLoginUser} from "@/utils/storage";
|
||||
import {useRouter} from "vue-router";
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('ChatGPT-PLUS 控制台登录');
|
||||
const username = ref(process.env.VUE_APP_ADMIN_USER);
|
||||
const password = ref(process.env.VUE_APP_ADMIN_PASS);
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
login();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const login = function () {
|
||||
if (username.value === '') {
|
||||
return ElMessage.error('请输入用户名');
|
||||
}
|
||||
if (password.value.trim() === '') {
|
||||
return ElMessage.error('请输入密码');
|
||||
}
|
||||
|
||||
httpPost('/api/admin/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
|
||||
setLoginUser(res.data)
|
||||
router.push("admin")
|
||||
}).catch((e) => {
|
||||
ElMessage.error('登录失败，' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.bg {
|
||||
position fixed
|
||||
left 0
|
||||
right 0
|
||||
top 0
|
||||
bottom 0
|
||||
background-color #313237
|
||||
background-image url("~@/assets/img/admin-login-bg.jpg")
|
||||
background-size cover
|
||||
background-position center
|
||||
background-repeat no-repeat
|
||||
filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
|
||||
}
|
||||
|
||||
.main {
|
||||
.contain {
|
||||
position fixed
|
||||
left 50%
|
||||
top 40%
|
||||
width 90%
|
||||
max-width 400px;
|
||||
transform translate(-50%, -50%)
|
||||
padding 20px 40px;
|
||||
color #ffffff
|
||||
border-radius 10px;
|
||||
background rgba(255, 255, 255, 0.3)
|
||||
|
||||
.logo {
|
||||
text-align center
|
||||
|
||||
.el-image {
|
||||
width 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width 100%
|
||||
margin-bottom 24px
|
||||
font-size 24px
|
||||
color $white_v1
|
||||
letter-space 2px
|
||||
text-align center
|
||||
}
|
||||
|
||||
.content {
|
||||
width 100%
|
||||
height: auto
|
||||
border-radius 3px
|
||||
|
||||
.block {
|
||||
margin-bottom 16px
|
||||
|
||||
.el-input__inner {
|
||||
border 1px solid $gray-v6 !important
|
||||
|
||||
.el-icon-user, .el-icon-lock {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
padding-top 10px;
|
||||
|
||||
.login-btn {
|
||||
width 100%
|
||||
font-size 16px
|
||||
letter-spacing 2px
|
||||
}
|
||||
}
|
||||
|
||||
.text-line {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
color #ffffff;
|
||||
|
||||
.container {
|
||||
padding 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user