xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-12 12:13:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: 调整后台管理框架样式

Browse Source
This commit is contained in:
RockYang
2023-06-21 18:44:18 +08:00
parent be3380aaf3
commit a7d5a6ccb9
24 changed files with 566 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/views/admin/ApiKey.vue
View File

@@ -1,13 +1,9 @@
<template>
<div class="list" v-loading="loading">
<el-row class="opt-box">
<el-button type="primary" @click="add" size="small">
<el-icon>
<Plus/>
</el-icon>
新增
</el-button>
</el-row>
<div class="container list" v-loading="loading">
<div class="handle-box">
<el-button type="primary" :icon="Plus" @click="add">新增</el-button>
</div>
<el-row>
<el-table :data="items" :row-key="row => row.id">
@@ -158,13 +154,6 @@ const remove = function (row) {
}
}
.pagination {
padding-top 20px;
display flex
justify-content center
width 100%
}
.el-select {
width: 100%
}

4
web/src/views/admin/Home.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="admin-home">
<admin-header/>
<admin-sidebar/>
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
@@ -27,7 +27,7 @@ const sidebar = useSidebarStore();
const tags = useTagsStore();
</script>
<style lang="stylus">
<style scoped lang="stylus">
@import '@/assets/css/main.css';
@import '@/assets/css/color-dark.css';
@import '@/assets/iconfont/iconfont.css';

147
web/src/views/admin/Login.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="admin-login">
<div class="bg"></div>
<div class="main">
<div class="contain">
@@ -85,91 +85,98 @@ const login = function () {
</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 {
.admin-login {
.bg {
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)
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); /* 调整模糊程度，可以根据需要修改值 */
}
.logo {
text-align center
.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)
.el-image {
width 120px;
}
}
.logo {
text-align center
.header {
width 100%
margin-bottom 24px
font-size 24px
color $white_v1
letter-space 2px
text-align center
}
.el-image {
width 120px;
.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
.el-image__inner {
height 100%
}
}
}
.btn-row {
padding-top 10px;
.header {
width 100%
margin-bottom 24px
font-size 24px
color $white_v1
letter-space 2px
text-align center
}
.login-btn {
width 100%
font-size 16px
letter-spacing 2px
.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;
}
}
.text-line {
justify-content center
padding-top 10px;
font-size 14px;
}
}
}
.footer {
color #ffffff;
.footer {
color #ffffff;
.container {
padding 20px;
.container {
padding 20px;
}
}
}
}
</style>

6
web/src/views/admin/LoginLog.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="list" v-loading="loading">
<div class="container list" v-loading="loading">
<el-row>
<el-table :data="items" :row-key="row => row.id">
<el-table :data="items" border :row-key="row => row.id">
<el-table-column label="用户名" prop="username"/>
<el-table-column label="登录IP" prop="login_ip"/>
<el-table-column label="登录地址" prop="login_address"/>
@@ -15,7 +15,7 @@
<div class="pagination">
<el-pagination v-if="total > 0" background
layout="prev, pager, next"
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="page"
v-model:page-size="pageSize"

16
web/src/views/admin/RoleList.vue
View File

@@ -1,14 +1,8 @@
<template>
<div class="role-list">
<el-row class="opt-box">
<el-button type="primary" @click="addRole" size="small">
<el-icon>
<Plus/>
</el-icon>
新增
</el-button>
</el-row>
<div class="container role-list">
<div class="handle-box">
<el-button type="primary" :icon="Plus" @click="addRole">新增</el-button>
</div>
<el-row>
<el-table :data="tableData" :border="parentBorder" style="width: 100%">
<el-table-column type="expand">
@@ -157,7 +151,7 @@ import {copyObj, removeArrayItem} from "@/utils/libs";
import {Sortable} from "sortablejs"
const showDialog = ref(false)
const parentBorder = ref(false)
const parentBorder = ref(true)
const childBorder = ref(true)
const tableData = ref([])
const sortedTableData = ref([])

23
web/src/views/admin/UserList.vue
View File

@@ -1,8 +1,9 @@
<template>
<div class="user-list" v-loading="loading">
<div class="container user-list" v-loading="loading">
<el-row>
<el-table :data="users.items" :row-key="row => row.id" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table :data="users.items" border class="table" :row-key="row => row.id"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="38"/>
<el-table-column prop="username" label="用户名"/>
<el-table-column prop="nickname" label="昵称"/>
<el-table-column prop="calls" label="提问次数" width="100"/>
@@ -34,13 +35,14 @@
</el-table>
<div class="pagination">
<el-pagination v-if="users.total > 0" background
layout="prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="users.page"
v-model:page-size="users.page_size"
<el-pagination v-if="users.total > 0"
background
layout="total, prev, pager, next"
:current-page="users.page"
:page-size="users.page_size"
:total="users.total"
@current-change="fetchUserList(users.page, users.page_size)"
:total="users.total"/>
/>
</div>
</el-row>
@@ -148,6 +150,9 @@ const fetchUserList = function (page, pageSize) {
arr[i].expired_time = dateFormat(arr[i].expired_time)
}
users.value.items = arr
users.value.total = res.data.total
users.value.page = res.data.page
user.value.page_size = res.data.page_size
}
}).catch(() => {
ElMessage.error('加载用户列表失败')

75
web/src/views/admin/demo/Table.vue
View File

@@ -2,20 +2,18 @@
<div>
<div class="container">
<div class="handle-box">
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option>
<el-select v-model="query.address" placeholder="模型" class="handle-select mr10">
<el-option key="1" label="GPT-3.5" value="GPT-3.5"></el-option>
<el-option key="2" label="GPT-4.0" value="GPT-4.0"></el-option>
<el-option key="2" label="GPT-5.0" value="GPT-5.0"></el-option>
</el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-input v-model="query.name" placeholder="姓名" class="handle-input mr10"></el-input>
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<el-button type="primary" :icon="Plus">新增</el-button>
</div>
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额">
<template #default="scope">￥{{ scope.row.money }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="头像(查看大图)" align="center">
<template #default="scope">
<el-image
@@ -28,11 +26,11 @@
</el-image>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="info" label="简介"></el-table-column>
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag
:type="scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : ''"
:type="scope.row.state === '启用' ? 'success' : scope.row.state === '禁用' ? 'danger' : ''"
>
{{ scope.row.state }}
</el-tag>
@@ -66,11 +64,11 @@
<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form label-width="70px">
<el-form-item label="用户名">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
<el-form-item label="简介">
<el-input v-model="form.info"></el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -89,7 +87,6 @@ import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Plus, Search} from '@element-plus/icons-vue';
const query = reactive({
address: '',
name: '',
pageIndex: 1,
pageSize: 10
@@ -100,39 +97,35 @@ const pageTotal = ref(0);
const getData = () => {
tableData.value = [{
"id": 1,
"name": "张三",
"money": 123,
"address": "广东省东莞市长安镇",
"state": "成功",
"date": "2019-11-1",
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
"name": "孔子",
"info": "有朋自远方来，不亦说乎？",
"state": "禁用",
"date": "2023-06-21",
"thumb": "/images/avatar/kong_zi.jpg"
},
{
"id": 2,
"name": "李四",
"money": 456,
"address": "广东省广州市白云区",
"state": "成功",
"date": "2019-10-11",
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
"name": "乔布斯",
"info": "活着就是为了改变世界！难道还有其他原因吗？",
"state": "禁用",
"date": "2023-06-21",
"thumb": "/images/avatar/steve_jobs.jpg"
},
{
"id": 3,
"name": "王五",
"money": 789,
"address": "湖南省长沙市",
"state": "失败",
"date": "2019-11-11",
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
"name": "马斯克",
"info": "梦想要远大，如果你的梦想没有吓到你，说明你做得不对。",
"state": "启用",
"date": "2023-06-21",
"thumb": "/images/avatar/elon_musk.jpg"
},
{
"id": 4,
"name": "赵六",
"money": 1011,
"address": "福建省厦门市鼓浪屿",
"state": "成功",
"date": "2019-10-20",
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
"name": "鲁迅",
"info": "自由之歌，永不过时，横眉冷对千夫指，俯首甘为孺子牛。",
"state": "启用",
"date": "2023-06-21",
"thumb": "/images/avatar/lu_xun.jpg"
}
]
pageTotal.value = 5
@@ -168,20 +161,20 @@ const handleDelete = (index) => {
const editVisible = ref(false);
let form = reactive({
name: '',
address: ''
info: ''
});
let idx = -1;
const handleEdit = (index, row) => {
idx = index;
form.name = row.name;
form.address = row.address;
form.info = row.info;
editVisible.value = true;
};
const saveEdit = () => {
editVisible.value = false;
ElMessage.success(`修改第 ${idx + 1} 行成功`);
tableData.value[idx].name = form.name;
tableData.value[idx].address = form.address;
tableData.value[idx].info = form.info;
};
</script>