Skip to content

Commit

Permalink
Merge pull request #25 from idoknow/perf/simplify-fe
Browse files Browse the repository at this point in the history 
Perf: 简化前端代码
  • Loading branch information
@RockChinQ
RockChinQ authored Jul 6, 2024
2 parents 2eac239 + 891b73b commit 3ceedaf
Show file tree
Hide file tree
Showing 12 changed files with 721 additions and 766 deletions.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@
"unplugin-vue-router": "^0.8.4",
"vite": "^5.1.5",
"vite-plugin-vuetify": "^2.0.3",
"vue-router": "^4.3.0"
"vue-router": "^4.4.0"
}
}
4 changes: 2 additions & 2 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<v-app>
<v-main>
<router-view />
<index />
</v-main>
</v-app>
</template>

<script setup>
//
import index from './pages/index.vue';
</script>
Empty file removed frontend/src/components/Auth.vue
View file
Empty file.
1 change: 1 addition & 0 deletions frontend/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import VueCookies from 'vue-cookies'


const app = createApp(App)

app.use(store)
app.use(VueCookies)

Expand Down
207 changes: 70 additions & 137 deletions frontend/src/pages/admin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,125 +2,82 @@

<BottomNavBar id="bnb" v-model="value" @input="go" />

<div id="container-wrap" style="height: calc(100vh - 64px)">
<div id="pctabs">
<h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
<div
style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
<div>
<div id="pctab-btn" @click="$router.push('/');">
<span>📝 投稿</span>
</div>
<div id="pctab-btn" @click="$router.push('/world');">
<span>🌏 稿件</span>
</div>
<div id="pctab-btn" @click="$router.push('/service');">
<span>🛠 服务</span>
</div>
<div id="pctab-btn" @click="$router.push('/service');">
<span style="font-weight: 1000">🔐 管理</span>
<div>
<h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
<span>{{ $store.state.metadata.brand }}</span>
</div>
<v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
<v-tab value="1">🪪 账号</v-tab>
<v-tab value="2">🚫 封禁记录</v-tab>
</v-tabs>

<v-divider id="hdivider"></v-divider>

<v-window v-model="tab" disabled>
<v-window-item value="1">
<div style="padding: 16px;">
<!--UIN搜索框-->
<div id="accountFilter">
<div style="display: flex;flex-direction: row;">

<v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"
style="margin-bottom: 0px"></v-text-field>
<v-select v-model="filter.user_group" label="按用户组筛选" style="margin-inline: 10px;width: 30px"
:items="['any', 'user', 'member', 'admin']" variant="solo"></v-select>

<v-btn @click="getAccounts" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
</div>
</div>
<v-pagination :length="accountPages" v-model="filter.page" style="margin-top: -10px"
@update:model-value="getAccounts"></v-pagination>
<div
style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
<!-- <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px"
@recall="recallPost" /> -->

<div style="display: flex;">
<img :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
<div>
<p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ uin }}</p>
<p style="margin-left: 16px; font-size: 12px; color: #666;">{{ userGroup }}</p>
</div>
<AccountCard v-for="a in accounts" :key="a.id" :account="a" style="margin-top: 16px"
@changeGroup="changeGroup" @banAccount="banAccount" @toast="toast" />
</div>
</div>
</v-window-item>
<v-window-item value="2">
<div style="padding: 16px;">
<!--UIN搜索框-->
<div id="accountFilter">
<div style="display: flex;flex-direction: row;">

<v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"></v-text-field>

<v-checkbox v-model="banListFilter.only_valid" label="仅生效中的" style="margin-inline: 10px;"
@change="getBanList"></v-checkbox>
<v-btn @click="getBanList" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
</div>
</div>

</div>

<!-- 纵向分割线 -->
<div id="vdivider" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
</div>

<div id="container">
<div>
<h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
<span>{{ $store.state.metadata.brand }}</span>
<v-pagination :length="banPages" v-model="banListFilter.page" style="margin-top: -10px"
@update:model-value="getBanList"></v-pagination>
<div
style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
<BanRecordCard v-for="b in banRecords" :key="b.id" :banRecord="b" style="margin-top: 16px"
@unban="unban" @toast="toast" />
</div>
</div>
<v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
<v-tab value="1">🪪 账号</v-tab>
<v-tab value="2">🚫 封禁记录</v-tab>
</v-tabs>

<v-divider id="hdivider"></v-divider>

<v-window v-model="tab" disabled>
<v-window-item value="1">
<div style="padding: 16px;">
<!--UIN搜索框-->
<div id="accountFilter">
<div style="display: flex;flex-direction: row;">

<v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"
style="margin-bottom: 0px"></v-text-field>
<v-select v-model="filter.user_group" label="按用户组筛选"
style="margin-inline: 10px;width: 30px" :items="['any', 'user', 'member', 'admin']"
variant="solo"></v-select>

<v-btn @click="getAccounts" color="primary" style="margin-top: 8px; "
size="large">查找</v-btn>
</div>
</div>
<v-pagination :length="accountPages" v-model="filter.page" style="margin-top: -10px"
@update:model-value="getAccounts"></v-pagination>
<div
style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
<!-- <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px"
@recall="recallPost" /> -->

<AccountCard v-for="a in accounts" :key="a.id" :account="a" style="margin-top: 16px"
@changeGroup="changeGroup" @banAccount="banAccount" @toast="toast" />
</div>
</div>
</v-window-item>
<v-window-item value="2">
<div style="padding: 16px;">
<!--UIN搜索框-->
<div id="accountFilter">
<div style="display: flex;flex-direction: row;">

<v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"></v-text-field>

<v-checkbox v-model="banListFilter.only_valid" label="仅生效中的"
style="margin-inline: 10px;" @change="getBanList"></v-checkbox>
<v-btn @click="getBanList" color="primary" style="margin-top: 8px; "
size="large">查找</v-btn>
</div>
</div>

<v-pagination :length="banPages" v-model="banListFilter.page" style="margin-top: -10px"
@update:model-value="getBanList"></v-pagination>
<div
style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
<BanRecordCard v-for="b in banRecords" :key="b.id" :banRecord="b" style="margin-top: 16px"
@unban="unban" @toast="toast" />
</div>
</div>
</v-window-item>
</v-window>

<v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"
style="margin-bottom: 64px">
{{ snackbar.text }}
</v-snackbar>

<v-dialog v-model="showServiceHint" width="auto">
<v-card :text="services[selectedService].toast" title="提示">
<template v-slot:actions>
<v-btn text="取消" @click="showServiceHint = false;"></v-btn>
<v-btn class="ms-auto" text="确定"
@click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
</template>
</v-card>
</v-dialog>

</div>
</div>
</v-window-item>
</v-window>

<v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
{{ snackbar.text }}
</v-snackbar>

<v-dialog v-model="showServiceHint" width="auto">
<v-card :text="services[selectedService].toast" title="提示">
<template v-slot:actions>
<v-btn text="取消" @click="showServiceHint = false;"></v-btn>
<v-btn class="ms-auto" text="确定"
@click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
</template>
</v-card>
</v-dialog>

</template>

Expand All @@ -146,9 +103,6 @@ export default {
},
value: 2,
displayInnerWindow: '',
avatarUrl: '',
uin: '',
userGroup: 'user',
tab: null,
accounts: [],
filter: {
Expand Down Expand Up @@ -182,31 +136,10 @@ export default {
},
mounted() {
this.tokenLogin()
},
methods: {
tokenLogin() {
this.$axios.get('/v1/account/token-check')
.then(res => {
if (res.data.code === 0) {
this.uin = res.data.data.uin
this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
this.userGroup = res.data.data.user_group
} else {
this.toast('登录失败：' + res.data.msg)
}
})
.catch(err => {
if (err.response.data.code === -1) {
this.$router.push('/auth?hint=请先登录嗷')
return
}
this.toast('登录失败：' + err.response.data.msg)
console.error(err)
})
},
randomColor() {
let colors = ["#FFC107", "#42A5F5", "#9CCC65", "#F06292", "#76FF03", "#9E9E9E", "#8D6E63"]
return colors[Math.floor(Math.random() * 100) % colors.length]
Expand Down Expand Up @@ -254,7 +187,7 @@ export default {
if (res.data.code === 0) {
this.accounts = res.data.data.list
for (let i = 0; this.accounts!=null && i < this.accounts.length; i++) {
for (let i = 0; this.accounts != null && i < this.accounts.length; i++) {
let date = new Date(this.accounts[i].created_at)
this.accounts[i].created_at = date.toLocaleString()
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/pages/auth.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template style="">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #f8f8f8;">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #fff;">
<div class="auth-card">
<h2 style="margin-bottom: 32px;">{{ authTitle }}</h2>
<v-form v-if="!authMode">
Expand Down Expand Up @@ -118,6 +118,7 @@ export default {
.then(res => {
if (res.data.code === 0) {
this.toast('登录成功', 'success')
this.$store.commit('tokenCheck')
this.$router.push('/')
} else {
this.toast('登录失败：' + res.data.msg)
Expand Down Expand Up @@ -147,7 +148,7 @@ export default {
padding: 20px;
border-radius: 9px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cursor {
Expand Down
Loading

0 comments on commit 3ceedaf

Please sign in to comment.