mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 11:27:24 +08:00
Dashboard
This commit is contained in:
+10
-4
@@ -47,9 +47,9 @@
|
||||
<el-container class="content">
|
||||
<Header :router-name="state.routerName"/>
|
||||
<div class="main">
|
||||
<router-view />
|
||||
<router-view @update-version="updateVersion" />
|
||||
</div>
|
||||
<Footer />
|
||||
<Footer :version="state.version"/>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container v-else class="container">
|
||||
@@ -80,7 +80,8 @@ export default {
|
||||
count: {
|
||||
number: 1
|
||||
},
|
||||
routerName: router.name
|
||||
routerName: router.name,
|
||||
version: '',
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
@@ -106,8 +107,13 @@ export default {
|
||||
state.currentPath = to.path
|
||||
document.title = pathMap[to.name]
|
||||
})
|
||||
const updateVersion = (val) => {
|
||||
// console.log('updateVersion', val)
|
||||
state.version = val.nexus_version.value
|
||||
}
|
||||
return {
|
||||
state
|
||||
state,
|
||||
updateVersion
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="left">Powered by <a target="_blank" href="https://nexusphp.org/">NexusPHP</a></div>
|
||||
<div class="right">
|
||||
Version: 1.6.0-beta6
|
||||
<div class="right" v-if="version">
|
||||
Version: {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer'
|
||||
name: 'Footer',
|
||||
props: {
|
||||
version: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Vendored
+13
@@ -90,6 +90,19 @@ const api = {
|
||||
listSetting: (params) => {
|
||||
return axios.get('settings', {params});
|
||||
},
|
||||
listStatData: () => {
|
||||
return axios.get('dashboard/stat-data')
|
||||
},
|
||||
listLatestUser: () => {
|
||||
return axios.get('dashboard/latest-user')
|
||||
},
|
||||
listLatestTorrent: () => {
|
||||
return axios.get('dashboard/latest-torrent')
|
||||
},
|
||||
listSystemInfo: () => {
|
||||
return axios.get('dashboard/system-info')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default api
|
||||
|
||||
@@ -1,3 +1,141 @@
|
||||
<template>
|
||||
<div>Dashboard</div>
|
||||
<el-row>
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-card>
|
||||
<template #header>{{latestUser.data.page_title}}</template>
|
||||
<el-table
|
||||
:data="latestUser.data.data"
|
||||
v-loading="latestUser.loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="username"
|
||||
label="Username"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="email"
|
||||
label="Email"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="Status"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="added"
|
||||
label="Added"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-card>
|
||||
<template #header>{{latestTorrent.data.page_title}}</template>
|
||||
<el-table
|
||||
:data="latestTorrent.data.data"
|
||||
v-loading="latestTorrent.loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
width="250"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="user.username"
|
||||
label="User"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="size_human"
|
||||
label="Size"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="added"
|
||||
label="Added"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-loading="statData.loading">
|
||||
<el-row class="row">
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-descriptions :title="statData.user.text" :column="2" border>
|
||||
<el-descriptions-item :label="item.text" v-for="item in statData.user.data">{{item.value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-descriptions :title="statData.user_class.text" :column="2" border>
|
||||
<el-descriptions-item :label="item.class_text" v-for="item in statData.user_class.data">{{item.counts}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="row">
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-descriptions :title="statData.torrent.text" :column="2" border>
|
||||
<el-descriptions-item :label="item.text" v-for="item in statData.torrent.data">{{item.value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="12" class="stat-box">
|
||||
<el-descriptions :title="statData.system_info.text" :column="2" border>
|
||||
<el-descriptions-item :label="item.text" v-for="item in statData.system_info.data">{{item.value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '../../utils/api'
|
||||
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
emits: ['updateVersion'],
|
||||
setup(props, context) {
|
||||
const router = useRouter()
|
||||
const state = reactive({
|
||||
statData: {
|
||||
loading: true,
|
||||
user: {},
|
||||
torrent: {},
|
||||
user_class: {},
|
||||
system_info: {}
|
||||
},
|
||||
latestUser: {
|
||||
loading: true,
|
||||
data: []
|
||||
},
|
||||
latestTorrent: {
|
||||
loading: true,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
api.listStatData().then(res => {
|
||||
state.statData = res.data
|
||||
state.statData.loading = false
|
||||
context.emit('updateVersion', res.data.system_info.data)
|
||||
})
|
||||
api.listLatestUser().then(res => {
|
||||
state.latestUser.data = res.data
|
||||
state.latestUser.loading = false
|
||||
})
|
||||
api.listLatestTorrent().then(res => {
|
||||
state.latestTorrent.data = res.data
|
||||
state.latestTorrent.loading = false
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stat-box {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user