docs: add dashboard image

README.md

@@ -30,6 +30,8 @@
 
 ### 管理后台
 
+![ChatGPT admin](docs/imgs/admin_dashboard.png)
+
 ![ChatGPT admin](docs/imgs/admin_config.png)
 
 ![ChatGPT admin](docs/imgs/admin_user.png)
@@ -100,7 +102,8 @@ ChatGPT 的服务。
 
 ## Docker 快速部署
 
-> 鉴于最新不少网友反馈在部署的时候遇到一些问题，大部分问题都是相同的，所以我这边做了一个视频教程 [五分钟部署自己的 ChatGPT 服务](https://www.bilibili.com/video/BV1H14y1B7Qw/)。
+>
+鉴于最新不少网友反馈在部署的时候遇到一些问题，大部分问题都是相同的，所以我这边做了一个视频教程 [五分钟部署自己的 ChatGPT 服务](https://www.bilibili.com/video/BV1H14y1B7Qw/)。
 > 习惯看视频教程的朋友可以去看视频教程，视频的语速比较慢，建议 2 倍速观看。
 
 V3.0.0 版本以后已经支持使用容器部署了，跳过所有的繁琐的环境准备，一条命令就可以轻松部署上线。

web/src/views/admin/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard">
+  <div class="dashboard" v-loading="loading">
     <el-row class="mgb20" :gutter="20">
       <el-col :span="6">
         <el-card shadow="hover" :body-style="{ padding: '0px' }">
@@ -64,12 +64,14 @@ import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 
 const stats = ref({users: 0, chats: 0, tokens: 0, rewards: 0})
+const loading = ref(true)
 
 httpGet('/api/admin/dashboard/stats').then((res) => {
   stats.value.users = res.data.users
   stats.value.chats = res.data.chats
   stats.value.tokens = res.data.tokens
   stats.value.rewards = res.data.rewards
+  loading.value = false
 }).catch((e) => {
   ElMessage.error("获取统计数据失败：" + e.message)
 })

web/src/views/admin/RoleList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container role-list">
+  <div class="container role-list" v-loading="loading">
     <div class="handle-box">
       <el-button type="primary" :icon="Plus" @click="addRole">新增</el-button>
     </div>
@@ -158,6 +158,7 @@ const sortedTableData = ref([])
 const role = ref({context: []})
 const formRef = ref(null)
 const editRow = ref({})
+const loading = ref(true)
 
 const rules = reactive({
   name: [{required: true, message: '请输入用户名', trigger: 'blur',}],
@@ -174,6 +175,7 @@ const rules = reactive({
 httpGet('/api/admin/role/list').then((res) => {
   tableData.value = res.data
   sortedTableData.value = copyObj(tableData.value)
+  loading.value = false
 }).catch(() => {
   ElMessage.error("获取聊天角色失败");
 })

web/src/views/admin/SysConfig.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {Plus} from "@element-plus/icons-vue";
@@ -118,13 +118,11 @@ onMounted(() => {
   // 加载聊天配置
   httpGet('/api/admin/config/get?key=chat').then(res => {
     chat.value = res.data
+    loading.value = false
   }).catch(e => {
     ElMessage.error("加载聊天配置失败: " + e.message)
   })
 
-  nextTick(() => {
-    loading.value = false
-  })
 })
 
 const rules = reactive({

web/src/views/admin/UserList.vue

@@ -149,7 +149,7 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {dateFormat, disabledDate, removeArrayItem} from "@/utils/libs";
@@ -189,10 +189,6 @@ onMounted(() => {
   }).catch(() => {
     ElMessage.error("获取聊天角色失败");
   })
-
-  nextTick(() => {
-    loading.value = false
-  })
 })
 
 const fetchUserList = function (page, pageSize) {
@@ -210,6 +206,7 @@ const fetchUserList = function (page, pageSize) {
       users.value.page = res.data.page
       user.value.page_size = res.data.page_size
     }
+    loading.value = false
   }).catch(() => {
     ElMessage.error('加载用户列表失败')
   })