Skip to content

Commit

Permalink
Merge pull request #23 from idoknow/feat/management-panel
Browse files Browse the repository at this point in the history 
Feat: 账号管理面板
  • Loading branch information
@RockChinQ
RockChinQ authored Jun 26, 2024
2 parents eae97b2 + 2fc2bff commit 1abc47c
Show file tree
Hide file tree
Showing 7 changed files with 708 additions and 17 deletions.
146 changes: 146 additions & 0 deletions frontend/src/components/AccountCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<template>
<v-card class="mx-auto postcard" :color="backgrouldColor" max-width="400" style="border-radius: 10px; color: #fff">
<div style="width: 100%; padding: 8px 8px 0px 8px">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<v-avatar color="grey-darken-3" :size="60" :image="avatarBaseUrl + account.uin + '&s=100'"></v-avatar>
<div style="margin-left: 8px;display: flex;flex-direction: column;">
<h3 style="margin-left: 8px;margin: 6px">{{ account.uin }}</h3>
<!--创建时间-->
<div style="display: flex;flex-direction: row;">
<v-chip class="accountChips" variant="elevated" size="small" label
:color="userGroupColor[account.user_group]" @click="showGroupDialog()">{{ userGroup[account.user_group]
}}</v-chip>
<v-chip class="accountChips" variant="elevated" size="small" label color="white">{{ account.created_at
}}</v-chip>

</div>
</div>
</div>
<!-- 取消投稿 -->
</div>

</div>
<!--右对齐-->
<v-card-options class="d-flex justify-end">
<!--红色封禁-->
<v-btn @click="showBanningDialog()" small color="red" text style="margin: 10px;">
封禁
</v-btn>
</v-card-options>

</v-card>

<v-dialog v-model="groupDialog" variant="outlined" persistent>
<v-card title="修改用户组">
<v-card-text>
<v-select v-model="newGroup" :items="userGroups" label="用户组" outlined></v-select>
</v-card-text>
<template v-slot:actions>
<v-btn text="取消" @click="groupDialog = false"></v-btn>
<v-btn class="ms-auto" text="OK" @click="groupDialog = false; emitChangeGroup()"></v-btn>
</template>
</v-card>
</v-dialog>

<v-dialog v-model="dialog" variant="outlined" persistent>
<v-card title="封禁用户">
<v-card-text>
<v-text-field v-model="reason" label="封禁原因" outlined></v-text-field>
<!--封禁结束时间-->
<v-date-picker v-model="date" show-adjacent-months title="封禁结束时间"></v-date-picker>
</v-card-text>
<template v-slot:actions>
<v-btn text="取消" @click="dialog = false"></v-btn>
<v-btn class="ms-auto" text="OK" @click="emitBanAccount()"></v-btn>
</template>
</v-card>
</v-dialog>
</template>

<script>
export default {
name: 'AccountCard',
props: ['account'],
data() {
return {
dialog: false,
groupDialog: false,
reason: "",
userGroup: {
'user': '普通用户',
'member': '成员',
'admin': '管理员',
},
userGroups: [
'user',
'member',
'admin',
],
userGroupColor: {
'user': '#fff',
'member': '#66BB6A',
'admin': '#ee7023',
},
backgrouldColor: "",
avatarBaseUrl: "http://q1.qlogo.cn/g?b=qq&nk=",
newGroup: "",
date: null,
}
},
mounted() {
this.backgrouldColor = '#42A5F5'
this.newGroup = this.account.user_group
},
methods: {
showGroupDialog() {
this.groupDialog = true
},
showBanningDialog() {
this.dialog = true
},
emitChangeGroup() {
this.$emit('changeGroup', this.account, this.newGroup)
},
emitBanAccount() {
if (this.reason === "") {
this.toast('请填写封禁原因')
return
}
if (this.date === null) {
this.toast('请选择封禁结束时间')
return
} else if (this.date < new Date()) {
this.toast('封禁结束时间不能早于当前时间')
return
}
this.$emit('banAccount', this.account, this.reason, this.date)
this.dialog = false
},
toast(msg, color = 'error') {
this.$emit('toast', msg, color)
}
},
}
</script>

<style>
.postcard {
margin-bottom: 16px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.logCard {
margin-bottom: 16px;
padding: 8px;
border-radius: 10px;
background-color: #f5f5f5;
}
.accountChips {
margin-right: 8px;
}
</style>
73 changes: 73 additions & 0 deletions frontend/src/components/BanRecordCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<v-card class="mx-auto postcard" :color="this.banRecord.valid ? '#ff7063' : 'grey'" max-width="400"
style="border-radius: 10px; color: #fff">
<div style="width: 100%; padding: 8px 8px 0px 8px">
<div style="display: flex;flex-direction: row;align-items: center;">
<div style="display: flex;flex-direction: column;align-items: flex-start;">
<v-avatar color="grey-darken-3" :size="50"
:image="avatarBaseUrl + banRecord.uin + '&s=100'"></v-avatar>
</div>
<div style="margin-left: 8px;margin-bottom: 6px;display: flex;flex-direction: column;">
<h3>{{ banRecord.uin }}</h3>
<p><strong>原因: </strong>{{ banRecord.comment }}
</p>
<p><strong>操作者: </strong>{{ banRecord.op }}</p>
<p><strong>结束时间: </strong>{{ banRecord.end_time }}</p>

</div>
<div style="position: absolute;right: 5px;">
<v-btn @click="unban()" v-if="banRecord.valid" small color="#44D492" text
style="margin: 10px;left: 5px;color: #fff;">
解封
</v-btn>
</div>
</div>

</div>

</v-card>
</template>

<script>
export default {
name: 'AccountCard',
props: ['banRecord'],
data() {
return {
dialog: false,
groupDialog: false,
reason: "",
avatarBaseUrl: "http://q1.qlogo.cn/g?b=qq&nk=",
date: null,
}
},
mounted() {
},
methods: {
toast(msg, color = 'error') {
this.$emit('toast', msg, color)
},
unban() {
this.$emit('unban', this.banRecord.uin)
},
},
}
</script>

<style>
.postcard {
margin-bottom: 16px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.logCard {
margin-bottom: 16px;
padding: 8px;
border-radius: 10px;
background-color: #f5f5f5;
}
.accountChips {
margin-right: 8px;
}
</style>
38 changes: 22 additions & 16 deletions frontend/src/components/BottomNavBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
<template>
<v-bottom-navigation v-bind:value="value" v-on:input="$emit('input', $event)" grow>
<v-btn @click="go('/')">
<!-- <v-icon>mdi-email-edit</v-icon> -->
<span style="display: block">📝</span>
投稿
</v-btn>
<v-btn @click="go('/')">
<!-- <v-icon>mdi-email-edit</v-icon> -->
<span style="display: block">📝</span>
投稿
</v-btn>

<v-btn @click="go('/world')">
<!-- <v-icon>mdi-earth</v-icon> -->
<span style="display: block">🌍</span>
稿件
</v-btn>
<v-btn @click="go('/world')">
<!-- <v-icon>mdi-earth</v-icon> -->
<span style="display: block">🌍</span>
稿件
</v-btn>

<v-btn @click="go('/service')">
<!-- <v-icon>mdi-apple-safari</v-icon> -->
<span style="display: block">🛠</span>
服务
</v-btn>
</v-bottom-navigation>
<v-btn @click="go('/service')">
<!-- <v-icon>mdi-apple-safari</v-icon> -->
<span style="display: block">🛠</span>
服务
</v-btn>

<v-btn @click="go('/admin')">
<!-- <v-icon>mdi-apple-safari</v-icon> -->
<span style="display: block">🔐</span>
管理
</v-btn>
</v-bottom-navigation>
</template>

<script>
Expand Down
Loading

0 comments on commit 1abc47c

Please sign in to comment.