feat: 用户账户系统

web/src/App.vue

@@ -1,104 +1,123 @@
 <template>
   <v-app>
-    <v-snackbar v-model="snackbar" :color="color" :timeout="timeout" :location="location">
-      {{ text }}
-    </v-snackbar>
+      <v-snackbar v-model="snackbar" :color="color" :timeout="timeout" :location="location">
+        {{ text }}
+      </v-snackbar>
 
-    <v-layout>
-      <v-navigation-drawer id="navigation-drawer" :width="160" app permanent rail>
-        <v-list-item id="logo-list-item">
-          <template v-slot:prepend>
-            <div id="logo-container">
-              <v-img id="logo-img" src="@/assets/langbot-logo-block.png" height="32" width="32"></v-img>
+    <div id="app-container" v-if="proxy.$store.state.user.tokenChecked && proxy.$store.state.user.tokenValid">
+      <v-layout>
+        <v-navigation-drawer id="navigation-drawer" :width="160" app permanent rail>
+          <v-list-item id="logo-list-item">
+            <template v-slot:prepend>
+              <div id="logo-container">
+                <v-img id="logo-img" src="@/assets/langbot-logo-block.png" height="32" width="32"></v-img>
 
-              <div id="version-chip"
-                v-tooltip="proxy.$store.state.version + (proxy.$store.state.debug ? ' (调试模式已启用)' : '')"
-                :style="{ 'background-color': proxy.$store.state.debug ? '#27aa27' : '#1e9ae2' }">
-                {{ proxy.$store.state.version }}
+                <div id="version-chip"
+                  v-tooltip="proxy.$store.state.version + (proxy.$store.state.debug ? ' (调试模式已启用)' : '')"
+                  :style="{ 'background-color': proxy.$store.state.debug ? '#27aa27' : '#1e9ae2' }">
+                  {{ proxy.$store.state.version }}
+                </div>
               </div>
+            </template>
+          </v-list-item>
+          <v-divider></v-divider>
+          <v-list density="compact" nav>
+            <v-list-item to="/" title="仪表盘" value="dashboard" prepend-icon="mdi-speedometer" v-tooltip="仪表盘">
+            </v-list-item>
+            <v-list-item to="/settings" title="设置" value="settings" prepend-icon="mdi-toggle-switch-outline"
+              v-tooltip="设置">
+            </v-list-item>
+            <v-list-item to="/logs" title="日志" value="logs" prepend-icon="mdi-file-outline" v-tooltip="日志">
+            </v-list-item>
+            <v-list-item to="/plugins" title="插件" value="plugins" prepend-icon="mdi-puzzle-outline" v-tooltip="插件">
+            </v-list-item>
+          </v-list>
+          <template v-slot:append>
+            <div>
+              <v-list density="compact" nav>
+                <v-dialog max-width="500" persistent v-model="taskDialogShow">
+                  <template v-slot:activator="{ props: activatorProps }">
+                    <v-list-item id="system-tasks-list-item" title="任务列表" prepend-icon="mdi-align-horizontal-left"
+                      v-tooltip="任务列表" v-bind="activatorProps">
+                    </v-list-item>
+                  </template>
+
+                  <template v-slot:default="{ isActive }">
+                    <TaskDialog :dialog="{ show: isActive }" @close="closeTaskDialog" />
+                  </template>
+                </v-dialog>
+
+                <v-list-item id="about-list-item" title="系统信息" prepend-icon="mdi-cog-outline" v-tooltip="系统信息">
+                  <v-menu activator="parent" :close-on-content-click="false" location="end">
+                    <v-list>
+                      <v-list-item @click="showAboutDialog">
+                        <v-list-item-title>
+                          关于 LangBot
+
+                          <v-dialog max-width="400" persistent v-model="aboutDialogShow">
+                            <template v-slot:default="{ isActive }">
+                              <AboutDialog :dialog="{ show: isActive }" @close="closeAboutDialog" />
+                            </template>
+                          </v-dialog>
+                        </v-list-item-title>
+                      </v-list-item>
+
+                      <v-list-item @click="openDocs">
+                        <v-list-item-title>
+                          查看文档
+                        </v-list-item-title>
+                      </v-list-item>
+
+                      <v-list-item @click="reload('platform')">
+                        <v-list-item-title>
+                          重载消息平台
+                        </v-list-item-title>
+                      </v-list-item>
+
+                      <v-list-item @click="reload('plugin')">
+                        <v-list-item-title>
+                          重载插件
+                        </v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </v-list-item>
+              </v-list>
             </div>
           </template>
-        </v-list-item>
-        <v-divider></v-divider>
-        <v-list density="compact" nav>
-          <v-list-item to="/" title="仪表盘" value="dashboard" prepend-icon="mdi-speedometer" v-tooltip="仪表盘">
-          </v-list-item>
-          <v-list-item to="/settings" title="设置" value="settings" prepend-icon="mdi-toggle-switch-outline"
-            v-tooltip="设置">
-          </v-list-item>
-          <v-list-item to="/logs" title="日志" value="logs" prepend-icon="mdi-file-outline" v-tooltip="日志">
-          </v-list-item>
-          <v-list-item to="/plugins" title="插件" value="plugins" prepend-icon="mdi-puzzle-outline" v-tooltip="插件">
-          </v-list-item>
-        </v-list>
-        <template v-slot:append>
-          <div>
-            <v-list density="compact" nav>
-              <v-dialog max-width="500" persistent v-model="taskDialogShow">
-                <template v-slot:activator="{ props: activatorProps }">
-                  <v-list-item id="system-tasks-list-item" title="任务列表" prepend-icon="mdi-align-horizontal-left"
-                    v-tooltip="任务列表" v-bind="activatorProps">
-                  </v-list-item>
-                </template>
+        </v-navigation-drawer>
 
-                <template v-slot:default="{ isActive }">
-                  <TaskDialog :dialog="{ show: isActive }" @close="closeTaskDialog" />
-                </template>
-              </v-dialog>
+        <v-main style="background-color: #f6f6f6;">
+          <router-view />
+        </v-main>
+      </v-layout>
+    </div>
 
-              <v-list-item id="about-list-item" title="系统信息" prepend-icon="mdi-cog-outline" v-tooltip="系统信息">
-                <v-menu activator="parent" :close-on-content-click="false" location="end">
-                  <v-list>
-                    <v-list-item @click="showAboutDialog">
-                      <v-list-item-title>
-                        关于 LangBot
+    <div id="loading-container" v-if="!proxy.$store.state.user.tokenChecked">
+      <div id="loading-text">
+        <img src="@/assets/langbot-logo.png" height="32" width="32" />
+        <span id="loading-text-span">正在加载...</span>
+      </div>
+    </div>
 
-                        <v-dialog max-width="400" persistent v-model="aboutDialogShow">
-                          <template v-slot:default="{ isActive }">
-                            <AboutDialog :dialog="{ show: isActive }" @close="closeAboutDialog" />
-                          </template>
-                        </v-dialog>
-                      </v-list-item-title>
-                    </v-list-item>
+    <div id="login-container" v-if="proxy.$store.state.user.tokenChecked && !proxy.$store.state.user.tokenValid && proxy.$store.state.user.systemInitialized">
+      <LoginDialog @error="error" @success="success" @checkToken="checkToken" />
+    </div>
 
-                    <v-list-item @click="openDocs">
-                      <v-list-item-title>
-                        查看文档
-                      </v-list-item-title>
-                    </v-list-item>
-
-                    <v-list-item @click="reload('platform')">
-                      <v-list-item-title>
-                        重载消息平台
-                      </v-list-item-title>
-                    </v-list-item>
-
-                    <v-list-item @click="reload('plugin')">
-                      <v-list-item-title>
-                        重载插件
-                      </v-list-item-title>
-                    </v-list-item>
-                  </v-list>
-                </v-menu>
-              </v-list-item>
-            </v-list>
-          </div>
-        </template>
-      </v-navigation-drawer>
-
-      <v-main style="background-color: #f6f6f6;">
-        <router-view />
-      </v-main>
-    </v-layout>
+    <div id="uninitialized-container" v-if="proxy.$store.state.user.tokenChecked && !proxy.$store.state.user.systemInitialized">
+      <InitDialog @error="error" @success="success" @checkSystemInitialized="checkSystemInitialized" />
+    </div>
   </v-app>
 </template>
 
 <script setup>
 import { getCurrentInstance } from 'vue'
-import { provide, ref, watch } from 'vue';
+import { provide, ref, watch, onMounted } from 'vue';
 
 import TaskDialog from '@/components/TaskListDialog.vue'
 import AboutDialog from '@/components/AboutDialog.vue'
+import InitDialog from '@/components/InitDialog.vue'
+import LoginDialog from '@/components/LoginDialog.vue'
 
 const { proxy } = getCurrentInstance()
 
@@ -160,14 +179,14 @@ function reload(scope) {
     { headers: { 'Content-Type': 'application/json' } }
   ).then(response => {
     if (response.data.code === 0) {
-      success(label+'已重载')
+      success(label + '已重载')
 
       // 关闭菜单
     } else {
-      error(label+'重载失败：' + response.data.message)
+      error(label + '重载失败：' + response.data.message)
     }
   }).catch(err => {
-    error(label+'重载失败：' + err)
+    error(label + '重载失败：' + err)
   })
 
 }
@@ -181,9 +200,68 @@ function showAboutDialog() {
 function closeAboutDialog() {
   aboutDialogShow.value = false
 }
+
+function checkSystemInitialized() {
+  proxy.$axios.get('/user/init').then(response => {
+    if (response.data.code === 0) {
+      proxy.$store.state.user.systemInitialized = response.data.data.initialized
+    } else {
+      error('系统初始化状态检查失败：' + response.data.message)
+      proxy.$store.state.user.systemInitialized = true
+    }
+
+    checkToken()
+  }).catch(err => {
+    error('系统初始化状态检查失败：' + err)
+    proxy.$store.state.user.systemInitialized = true
+  })
+}
+
+function checkToken() {
+  proxy.$axios.get('/user/check-token').then(response => {
+    if (response.data.code === 0) {
+      proxy.$store.state.user.tokenValid = true
+    } else {
+      proxy.$store.state.user.tokenValid = false
+    }
+  }).catch(err => {
+    proxy.$store.state.user.tokenValid = false
+  }).finally(() => {
+    proxy.$store.state.user.tokenChecked = true
+  })
+}
+
+onMounted(() => {
+  checkSystemInitialized()
+})
 </script>
 
 <style scoped>
+#app-container {
+  display: flex;
+  height: 100vh;
+}
+
+#loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  user-select: none;
+}
+
+#loading-text {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#loading-text-span {
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding-top: 0.2rem;
+}
+
 #navigation-drawer {
   display: flex;
   flex-direction: column;