feat: 关于 LangBot 对话框

web/src/App.vue

@@ -34,15 +34,10 @@
         <template v-slot:append>
           <div>
             <v-list density="compact" nav>
-              <!-- <v-list-item id="system-tasks-list-item" title="系统任务" prepend-icon="mdi-align-horizontal-left" v-tooltip="系统任务" @click="showTaskDialog" v-bind="props">
-                <v-dialog activator="parent" max-width="500" persistent v-model="taskDialogShow">
-                  <template v-slot:default="{ isActive }">
-                  </template>
-                </v-dialog>
-              </v-list-item> -->
               <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 id="system-tasks-list-item" title="任务列表" prepend-icon="mdi-align-horizontal-left"
+                    v-tooltip="任务列表" v-bind="activatorProps">
                   </v-list-item>
                 </template>
 
@@ -52,6 +47,28 @@
               </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>
+                </v-menu>
               </v-list-item>
             </v-list>
           </div>
@@ -67,9 +84,10 @@
 
 <script setup>
 import { getCurrentInstance } from 'vue'
-import {provide, ref, watch} from 'vue';
+import { provide, ref, watch } from 'vue';
 
 import TaskDialog from '@/components/TaskListDialog.vue'
+import AboutDialog from '@/components/AboutDialog.vue'
 
 const { proxy } = getCurrentInstance()
 
@@ -113,7 +131,21 @@ function closeTaskDialog() {
   taskDialogShow.value = false
 }
 
-provide('snackbar', {success, error, warning, info, location, timeout});
+provide('snackbar', { success, error, warning, info, location, timeout });
+
+function openDocs() {
+  window.open('https://docs.langbot.app', '_blank')
+}
+
+const aboutDialogShow = ref(false)
+
+function showAboutDialog() {
+  aboutDialogShow.value = true
+}
+
+function closeAboutDialog() {
+  aboutDialogShow.value = false
+}
 </script>
 
 <style scoped>

web/src/components/AboutDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <v-card class="about-dialog">
+
+        <div id="content-container">
+            <div id="logo-container">
+                <v-img id="logo-img" src="@/assets/langbot-logo.png" width="64" />
+
+                <div id="text-container">
+                    <div id="title">
+                        LangBot
+                    </div>
+
+                    <div id="subtitle">
+                        版本 {{ proxy.$store.state.version }}
+                    </div>
+
+                    <div id="copyright">
+                        版权所有 © 2024 RockChinQ
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <template v-slot:actions>
+            <v-btn id="open-source-btn" text="代码仓库" prepend-icon="mdi-github"
+                @click="openSource"></v-btn>
+            <v-btn class="ml-auto" text="关闭" prepend-icon="mdi-close" @click="close"></v-btn>
+        </template>
+    </v-card>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+    emit('close')
+}
+
+const openSource = () => {
+    window.open('https://github.com/RockChinQ/QChatGPT', '_blank')
+}
+</script>
+
+<style scoped>
+.about-dialog {
+    padding-top: 2rem;
+}
+
+#content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#logo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#logo-img {}
+
+#text-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#title {
+    font-size: 1.2rem;
+    margin-top: 0.5rem;
+}
+
+#subtitle {
+    font-size: 0.6rem;
+    color: #3c3c3c;
+    margin-top: 0.2rem;
+}
+
+#copyright {
+    font-size: 0.6rem;
+    color: #3c3c3c;
+    margin-top: 0.2rem;
+    margin-bottom: 0.5rem;
+}
+</style>

web/src/pages/DashBoard.vue

@@ -81,6 +81,7 @@ import { ref, onMounted } from 'vue'
 .content-card-title {
     font-size: 1rem;
     font-weight: 600;
+    user-select: none;
 }
 
 .content-card-title-icon {