Merge pull request #1718 from Kwicxy/webui_enhancement

feat: webUI优化

dashboard/src/config.ts

@@ -8,10 +8,10 @@ export type ConfigProps = {
 };
 
 function checkUITheme() {
+  /* 检查localStorage有无记忆的主题选项，如有则使用，否则使用默认值 */
   const theme = localStorage.getItem("uiTheme");
-  console.log('memorized theme: ', theme);
   if (!theme || !(['PurpleTheme', 'PurpleThemeDark'].includes(theme))) {
-    localStorage.setItem("uiTheme", "PurpleTheme");
+    localStorage.setItem("uiTheme", "PurpleTheme");   // todo: 这部分可以根据vuetify.ts的默认主题动态调整
     return 'PurpleTheme';
   } else return theme;
 }

dashboard/src/layouts/full/FullLayout.vue

@@ -2,14 +2,13 @@
 import { RouterView } from 'vue-router';
 import VerticalSidebarVue from './vertical-sidebar/VerticalSidebar.vue';
 import VerticalHeaderVue from './vertical-header/VerticalHeader.vue';
-import { useCustomizerStore } from '../../stores/customizer';
+import { useCustomizerStore } from '@/stores/customizer';
 const customizer = useCustomizerStore();
 </script>
 
 <template>
   <v-locale-provider>
-    <v-app
-        :theme="useCustomizerStore().uiTheme"
+    <v-app :theme="useCustomizerStore().uiTheme"
       :class="[customizer.fontTheme, customizer.mini_sidebar ? 'mini-sidebar' : '', customizer.inputBg ? 'inputWithbg' : '']"
     >
       <VerticalHeaderVue />

dashboard/src/layouts/full/vertical-header/VerticalHeader.vue

@@ -11,6 +11,7 @@ const customizer = useCustomizerStore();
 let dialog = ref(false);
 let accountWarning = ref(false)
 let updateStatusDialog = ref(false);
+const username = localStorage.getItem('user');
 let password = ref('');
 let newPassword = ref('');
 let newUsername = ref('');
@@ -54,7 +55,7 @@ function accountEdit() {
   axios.post('/api/auth/account/edit', {
     password: password.value,
     new_password: newPassword.value,
-    new_username: newUsername.value
+    new_username: newUsername.value ? newUsername.value : username
   })
       .then((res) => {
         if (res.data.status == 'error') {
@@ -408,13 +409,15 @@ if (localStorage.getItem('change_pwd_hint') != null && localStorage.getItem('cha
                   <div>为了安全，请务必修改默认密码。</div>
                 </v-alert>
 
-                <v-text-field label="原密码*" type="password" v-model="password" required
-                              variant="outlined"></v-text-field>
+                <v-text-field label="原密码(*)" type="password" v-model="password" required
+                              variant="outlined"/>
+
+                <v-text-field label="新密码(*)" type="password" v-model="newPassword" required
+                              variant="outlined"/>
+
+                <v-text-field label="新用户名(可选)" v-model="newUsername" variant="outlined"/>
 
-                <v-text-field label="新用户名" v-model="newUsername" required variant="outlined"></v-text-field>
 
-                <v-text-field label="新密码" type="password" v-model="newPassword" required
-                              variant="outlined"></v-text-field>
               </v-col>
             </v-row>
           </v-container>

dashboard/src/stores/auth.ts

@@ -32,7 +32,7 @@ export const useAuthStore = defineStore({
     },
     logout() {
       this.username = '';
-      localStorage.removeItem('username');
+      localStorage.removeItem('user');
       localStorage.removeItem('token');
       router.push('/auth/login');
     },

dashboard/src/views/ChatPage.vue

@@ -15,18 +15,15 @@ marked.setOptions({
                 <div class="sidebar-panel">
                     <div style="padding: 16px; padding-top: 8px;">
                         <v-btn variant="elevated" rounded="lg" class="new-chat-btn" @click="newC" :disabled="!currCid"
-                        prepend-icon="mdi-plus">
-                        创建对话
-                    </v-btn>
+                        prepend-icon="mdi-plus">创建对话</v-btn>
                     </div>
 
                     <div class="conversations-container">
-
                         <v-card class="conversation-list-card" v-if="conversations.length > 0" flat>
                             <v-list density="compact" nav class="conversation-list"
                                 @update:selected="getConversationMessages">
                                 <v-list-item v-for="(item, i) in conversations" :key="item.cid" :value="item.cid"
-                                    rounded="lg" class="conversation-item" active-color="primary">
+                                    rounded="lg" class="conversation-item" active-color="secondary">
                                     <template v-slot:prepend>
                                         <v-icon size="small" icon="mdi-message-text-outline"></v-icon>
                                     </template>
@@ -707,6 +704,7 @@ export default {
 }
 
 /* 聊天页面布局 */
+/* todo: 聊天页面背景颜色有问题 */
 .chat-page-card {
     margin-bottom: 16px;
     width: 100%;
@@ -735,7 +733,7 @@ export default {
     flex-direction: column;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, 0.05);
-    background-color: var(--v-theme-surface) !important;
+    background-color: var(--v-theme-containerBg);
     height: 100%;
     position: relative;
 }
@@ -783,9 +781,9 @@ export default {
 }
 
 .conversation-list-card {
-    border-radius: 12px;
+    border-radius: 8px;
     box-shadow: none !important;
-    background-color: transparent;
+    background-color: var(--v-theme-containerBg);
 }
 
 .conversation-list {
@@ -841,6 +839,7 @@ export default {
     text-transform: none;
     letter-spacing: 0.25px;
     font-size: 12px;
+    line-height: 1.2em;
 }
 
 .delete-chat-btn:hover {

dashboard/src/views/ExtensionMarketplace.vue

@@ -19,18 +19,15 @@ import 'highlight.js/styles/github.css';
 
         <v-col cols="12" md="12">
             <v-card>
-
                 <v-card-title>
                     <div class="pl-2 pt-2 d-flex align-center pe-2">
                         <h2>✨ 插件市场</h2>                    
                         <v-btn icon size="small" style="margin-left: 8px" variant="plain" @click="jumpToPluginMarket()">
                             <v-icon size="small">mdi-help</v-icon>
-                            <v-tooltip activator="parent" location="start">
+                            <v-tooltip activator="parent" location="start" max-width="500" open-delay="500">
                                 <span>
                                     如无法显示，请单击此按钮跳转至插件市场，复制想安装插件对应的
-                                    `repo`
-                                    链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。
-
+                                    repo链接然后点击右下角 + 号安装，或打开链接下载压缩包安装。<br/>
                                     如果因为网络问题安装失败，点击设置页选择 GitHub 加速地址。或前往仓库下载压缩包然后本地上传。
                                 </span>
                             </v-tooltip>
@@ -41,13 +38,12 @@ import 'highlight.js/styles/github.css';
                             <v-icon>{{ isListView ? 'mdi-view-grid' : 'mdi-view-list' }}</v-icon>
                         </v-btn>
 
-                        <v-spacer></v-spacer>
+                        <v-spacer/>
 
                         <v-text-field v-model="marketSearch" density="compact" label="Search"
                             prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details
                             single-line></v-text-field>
                     </div>
-
                 </v-card-title>
 
                 <v-card-text>
@@ -72,19 +68,25 @@ import 'highlight.js/styles/github.css';
 
                     <div v-if="isListView" class="mt-4">
                         <h2>📦 全部插件</h2>
+                        <v-switch
+                            v-model="showPluginFullName"
+                            label="显示完整名称"
+                            hide-details
+                            density="compact"
+                            style="margin-left: 12px"
+                        />
                         <v-col cols="12" md="12" style="padding: 0px;">
                             <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name"
                                 :loading="loading_" v-model:search="marketSearch" :filter-keys="filterKeys">
                                 <template v-slot:item.name="{ item }">
-                                    <div class="d-flex align-center" style="overflow-x: scroll;">
+                                    <div class="d-flex align-center" style="overflow-x: auto; scrollbar-width: thin; scrollbar-track-color: transparent;">
                                         <img v-if="item.logo" :src="item.logo"
                                             style="height: 80px; width: 80px; margin-right: 8px; border-radius: 8px; margin-top: 8px; margin-bottom: 8px;"
                                             alt="logo">
                                         <span v-if="item?.repo"><a :href="item?.repo"
                                                 style="color: var(--v-theme-primaryText, #000); text-decoration:none">{{
-                                                    item.name }}</a></span>
-                                        <span v-else>{{ item.name }}</span>
-
+                                                    showPluginFullName ? item.name : item.trimmedName }}</a></span>
+                                        <span v-else>{{ showPluginFullName ? item.name : item.trimmedName }}</span>
                                     </div>
 
                                 </template>
@@ -111,18 +113,18 @@ import 'highlight.js/styles/github.css';
                                 </template>
 
                                 <template v-slot:item.tags="{ item }">
-                                    <span v-if="item.tags.length === 0">无</span>
-                                    <v-chip v-for="tag in item.tags" :key="tag" color="primary" size="x-small">{{ tag
-                                        }}</v-chip>
+                                    <span v-if="item.tags.length === 0">-</span>
+                                    <v-chip v-for="tag in item.tags" :key="tag" color="primary" size="x-small">
+                                      {{ tag }}</v-chip>
                                 </template>
                                 <template v-slot:item.actions="{ item }">
-                                    <v-btn v-if="!item.installed" class="text-none mr-2" size="x-small" 
-                                        variant="flat" border
-                                        @click="extension_url = item.repo; newExtension()">安装</v-btn>
+                                    <v-btn v-if="!item.installed" class="text-none mr-2" size="x-small"
+                                        variant="flat" @click="extension_url = item.repo; newExtension()">
+                                      <v-icon>mdi-download</v-icon></v-btn>
                                     <v-btn v-else class="text-none mr-2" size="x-small" variant="flat" border
-                                        disabled>已安装</v-btn>
-                                    <v-btn class="text-none mr-2" size="x-small" variant="flat" border 
-                                        @click="open(item.repo)">帮助</v-btn>
+                                        disabled><v-icon>mdi-check</v-icon></v-btn>
+                                    <v-btn class="text-none mr-2" size="x-small" variant="flat" border
+                                        @click="open(item.repo)"><v-icon>mdi-help</v-icon></v-btn>
                                 </template>
                             </v-data-table>
                         </v-col>
@@ -265,6 +267,7 @@ export default {
             loading_: false,
             upload_file: null,
             pluginMarketData: [],
+            showPluginFullName: false,
             loadingDialog: {
                 show: false,
                 title: "加载中...",
@@ -283,8 +286,8 @@ export default {
             pluginMarketHeaders: [
                 { title: '名称', key: 'name', maxWidth: '200px' },
                 { title: '描述', key: 'desc', maxWidth: '250px' },
-                { title: '作者', key: 'author', maxWidth: '70px' },
-                { title: 'Star数', key: 'stars', maxWidth: '100px' },
+                { title: '作者', key: 'author', maxWidth: '90px' },
+                { title: 'Star数', key: 'stars', maxWidth: '80px' },
                 { title: '最近更新', key: 'updated_at', maxWidth: '100px' },
                 { title: '标签', key: 'tags', maxWidth: '100px' },
                 { title: '操作', key: 'actions', sortable: false }
@@ -319,6 +322,7 @@ export default {
         this.loading_ = true
         this.commonStore.getPluginCollections().then((data) => {
             this.pluginMarketData = data;
+            this.trimExtensionName();
             this.checkAlreadyInstalled();
             this.checkUpdate();
             this.loading_ = false
@@ -367,11 +371,23 @@ export default {
         getExtensions() {
             axios.get('/api/plugin/get').then((res) => {
                 this.extension_data = res.data;
+                this.trimExtensionName();
                 this.checkAlreadyInstalled();
                 this.checkUpdate()
             });
         },
-
+        trimExtensionName() {
+            this.pluginMarketData.forEach(plugin => {
+                if (plugin.name) {
+                  let name = plugin.name.trim().toLowerCase();
+                  if (name.startsWith("astrbot_plugin_")) {
+                    plugin.trimmedName = name.substring(15);
+                  } else if (name.startsWith("astrbot_") || name.startsWith("astrbot-")) {
+                    plugin.trimmedName = name.substring(8);
+                  } else plugin.trimmedName = plugin.name;
+                }
+            });
+        },
         checkUpdate() {
             // 创建在线插件的map
             const onlinePluginsMap = new Map();

dashboard/src/views/dashboards/default/components/MessageStat.vue

@@ -69,6 +69,7 @@
 
 <script>
 import axios from 'axios';
+import {useCustomizerStore} from "@/stores/customizer";
 
 export default {
   name: 'MessageStat',
@@ -129,7 +130,7 @@ export default {
         }
       },
       tooltip: {
-        theme: 'light',
+        theme: useCustomizerStore().uiTheme==='PurpleTheme' ? 'light' : 'dark',
         x: {
           format: 'yyyy-MM-dd HH:mm'
         },
@@ -343,7 +344,7 @@ export default {
 }
 
 .chart-container {
-  border-top: 1px solid #f0f0f0;
+  border-top: 1px solid var(--v-theme-border);
   padding-top: 20px;
   position: relative;
 }