fz-mirrors/AstrBot
1
0
Fork 0
mirror of https://github.com/AstrBotDevs/AstrBot synced 2026-07-16 01:40:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update dashboard sidebar styles and enhance chat routing

Browse Source
This commit is contained in:
Fridemn
2026-07-07 15:53:46 +08:00
parent 99bca230e6
commit 19962523ac
12 changed files with 65 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
View File

@@ -1,4 +1,4 @@
/* Auto-generated MDI subset – 272 icons */
/* Auto-generated MDI subset – 273 icons */
/* Do not edit manually. Run: pnpm run subset-icons */
@font-face {
@@ -160,6 +160,10 @@
content: "\F0B79";
}
.mdi-chat-outline::before {
content: "\F0EDE";
}
.mdi-chat-processing::before {
content: "\F0B7B";
}

BIN
dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
View File

Binary file not shown.

BIN
dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
View File

Binary file not shown.

15
dashboard/src/components/chat/Chat.vue
View File

@@ -2,7 +2,11 @@
<div
v-if="props.active"
class="chat-ui"
:class="{ 'is-dark': isDark, 'sidebar-collapsed': isSidebarCollapsed }"
:class="{
'is-dark': isDark,
'sidebar-collapsed': isSidebarCollapsed,
'dashboard-layout': !props.chatboxMode,
}"
>
<v-navigation-drawer
v-model="chatSidebarDrawer"
@@ -1701,6 +1705,10 @@ function toggleTheme() {
--chat-section-label: rgba(255, 255, 255, 0.5);
}
.chat-ui.dashboard-layout .chat-main {
padding-top: 0;
}
.chat-sidebar {
top: 0 !important;
height: 100vh !important;
@@ -2307,4 +2315,9 @@ kbd {
padding: 0;
}
}
.chat-ui.dashboard-layout .chat-sidebar {
top: 0 !important;
height: 100% !important;
}
</style>

2
dashboard/src/components/chat/ProviderModelMenu.vue
View File

@@ -180,7 +180,7 @@ const { success: toastSuccess, error: toastError } = useToast();
const variant = computed(() => props.variant);
const menuLocation = computed(() =>
props.variant === "header" ? "bottom start" : "top",
props.variant === "header" ? "bottom end" : "top",
);
const selectedProvider = computed(() =>

51
dashboard/src/layouts/full/FullLayout.vue
View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import { RouterView, useRoute } from "vue-router";
import { ref, onMounted, computed, watch } from "vue";
import { ref, onMounted, computed } from "vue";
import VerticalSidebarVue from "./vertical-sidebar/VerticalSidebar.vue";
import VerticalHeaderVue from "./vertical-header/VerticalHeader.vue";
import ReadmeDialog from "@/components/shared/ReadmeDialog.vue";
import Chat from "@/components/chat/Chat.vue";
import { useCustomizerStore } from "@/stores/customizer";
import { useRouterLoadingStore } from "@/stores/routerLoading";
import { useCommonStore } from "@/stores/common";
@@ -18,27 +17,13 @@ const commonStore = useCommonStore();
const { locale } = useI18n();
const route = useRoute();
const routerLoadingStore = useRouterLoadingStore();
const isCurrentChatRoute = computed(
() => route.path === "/chat" || route.path.startsWith("/chat/"),
);
const isPluginPageRoute = computed(
() => route.path.startsWith("/plugin-page/"),
);
const isFullScreenRoute = computed(
() => isCurrentChatRoute.value || isPluginPageRoute.value,
);
const shouldMountChat = ref(isCurrentChatRoute.value);
const showSidebar = computed(() => !isCurrentChatRoute.value);
const isFullScreenRoute = computed(() => isPluginPageRoute.value);
const showFirstNoticeDialog = ref(false);
watch(isCurrentChatRoute, (isChatRoute) => {
if (isChatRoute) {
shouldMountChat.value = true;
}
});
const maybeShowFirstNotice = async () => {
if (localStorage.getItem(FIRST_NOTICE_SEEN_KEY) === "1") {
return;
@@ -107,18 +92,11 @@ onMounted(() => {
style="z-index: 9999; position: absolute; opacity: 0.3"
/>
<VerticalHeaderVue />
<VerticalSidebarVue v-if="showSidebar" />
<v-main
:class="{ 'chat-main': isCurrentChatRoute }"
:style="{
height: isCurrentChatRoute ? '100vh' : undefined,
overflow: isCurrentChatRoute ? 'hidden' : undefined,
}"
>
<VerticalSidebarVue />
<v-main>
<v-container
fluid
class="page-wrapper"
:class="{ 'chat-mode-container': isCurrentChatRoute }"
:style="{
height: isFullScreenRoute ? '100%' : 'calc(100% - 8px)',
padding: isFullScreenRoute ? '0' : undefined,
@@ -129,18 +107,10 @@ onMounted(() => {
:style="{
height: '100%',
width: '100%',
overflow: isCurrentChatRoute ? 'hidden' : undefined,
position: isPluginPageRoute ? 'relative' : undefined,
}"
>
<div
v-if="shouldMountChat"
v-show="isCurrentChatRoute"
style="height: 100%; width: 100%; overflow: hidden"
>
<Chat :active="isCurrentChatRoute" />
</div>
<RouterView v-if="!isCurrentChatRoute" />
<RouterView />
</div>
</v-container>
</v-main>
@@ -154,14 +124,3 @@ onMounted(() => {
</v-locale-provider>
</template>
<style scoped>
.chat-mode-container {
min-height: unset !important;
height: 100% !important;
overflow: hidden !important;
}
.chat-main {
padding-top: 0 !important;
}
</style>

281
dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
View File

@@ -13,7 +13,7 @@ import "highlight.js/styles/github.css";
import { useI18n } from "@/i18n/composables";
import { router } from "@/router";
import { useRoute } from "vue-router";
import { useDisplay, useTheme } from "vuetify";
import { useTheme } from "vuetify";
import StyledMenu from "@/components/shared/StyledMenu.vue";
import { useLanguageSwitcher } from "@/i18n/composables";
import type { Locale } from "@/i18n/types";
@@ -29,11 +29,8 @@ const customizer = useCustomizerStore();
const commonStore = useCommonStore();
const chatHeader = useChatHeaderStore();
const theme = useTheme();
const { lgAndUp } = useDisplay();
const { t } = useI18n();
const route = useRoute();
const LAST_BOT_ROUTE_KEY = "astrbot:last_bot_route";
const LAST_CHAT_ROUTE_KEY = "astrbot:last_chat_route";
const SHOW_PRE_RELEASES_KEY = "astrbot:updateDialog:showPreReleases";
let dialog = ref(false);
let accountWarning = ref(false);
@@ -124,21 +121,6 @@ const desktopUpdateStatus = ref("");
const isChatPath = computed(
() => route.path === "/chat" || route.path.startsWith("/chat/"),
);
const isDarkTheme = computed(
() => theme.global.current.value.dark || customizer.uiTheme.includes("Dark"),
);
const chatHeaderStyle = computed(() => {
if (!isChatPath.value) return undefined;
const sidebarWidth = lgAndUp.value
? customizer.chatSidebarCollapsed
? 56
: 280
: 0;
return {
left: `${sidebarWidth}px`,
width: `calc(100% - ${sidebarWidth}px)`,
};
});
const chatHeaderSubtitleText = computed(() => {
const title = chatHeader.title.trim();
const subtitle = chatHeader.subtitle.trim();
@@ -891,11 +873,7 @@ function openReleaseNotesDialog(body: string, tag: string) {
}
function handleLogoClick() {
if (isChatPath.value) {
aboutDialog.value = true;
} else {
router.push("/about");
}
router.push("/about");
}
getVersion();
@@ -911,107 +889,12 @@ onUnmounted(() => {
stopRestartReloadTimer();
});
// 视图模式切换
onMounted(() => {
// 初次加載時保存當前路由
if (typeof window !== "undefined") {
if (isChatPath.value) {
// 保存 chat ID
const parts = route.fullPath.split("/");
const sessionId = parts[2];
if (sessionId) {
sessionStorage.setItem(LAST_CHAT_ROUTE_KEY, sessionId);
console.log("Initial save chat ID:", sessionId);
}
} else {
// 保存 bot 路由（非 chat 頁面）
sessionStorage.setItem(LAST_BOT_ROUTE_KEY, route.fullPath);
console.log("Initial save bot route:", route.fullPath);
}
}
});
// 监听 viewMode 变化，切换到 bot 模式时跳转到首页
// 保存 bot 模式的最後路由
// 監聽 route 變化，保存最後一次 bot 路由
watch(showPreReleases, (value) => {
if (typeof window === "undefined") return;
localStorage.setItem(SHOW_PRE_RELEASES_KEY, value ? "true" : "false");
});
watch(
() => route.fullPath,
(newPath) => {
if (typeof window === "undefined") return;
console.log("Route changed:", {
newPath,
isChat: isChatPath.value,
currentChatId: route.params.id,
});
try {
// 使用現有的 isChatPath 計算屬性來避免名稱衝突
const isChat = isChatPath.value; // 這裡使用已經計算好的 isChatPath
// ✅ bot：只存「非 chat 頁」
if (!isChat) {
sessionStorage.setItem(LAST_BOT_ROUTE_KEY, newPath);
}
// ✅ chat：只存 sessionId
if (isChat) {
const parts = newPath.split("/");
const sessionId = parts[2];
if (sessionId) {
sessionStorage.setItem(LAST_CHAT_ROUTE_KEY, sessionId);
}
}
} catch (e) {
console.error("Failed to save route:", e);
}
},
);
const currentMode = computed({
get: () => (isChatPath.value ? "chat" : "bot"),
set: (val: "chat" | "bot") => {
try {
// 檢查 window 和 sessionStorage 是否存在
if (
typeof window === "undefined" ||
typeof sessionStorage === "undefined"
) {
// 如果在非瀏覽器環境中，不做任何 sessionStorage 操作
console.warn("sessionStorage is not available in this environment");
return;
}
if (val === "chat") {
const lastSessionId = sessionStorage.getItem(LAST_CHAT_ROUTE_KEY);
router.push(lastSessionId ? `/chat/${lastSessionId}` : "/chat");
} else {
let lastBotRoute = sessionStorage.getItem(LAST_BOT_ROUTE_KEY) || "/";
if (lastBotRoute.startsWith("/chat")) {
lastBotRoute = "/";
}
router.push(lastBotRoute);
}
} catch (e) {
// 在受限隱私模式等環境中，sessionStorage 操作可能會拋出 SecurityError
console.warn("Failed to access sessionStorage in currentMode setter:", e);
}
},
});
const mainMenuOpen = ref(false);
const nextMode = computed<"chat" | "bot">(() =>
isChatPath.value ? "bot" : "chat",
);
function switchMode() {
currentMode.value = nextMode.value;
mainMenuOpen.value = false;
}
// Merry Christmas! 🎄
const isChristmas = computed(() => {
@@ -1051,16 +934,9 @@ onMounted(async () => {
elevation="0"
height="50"
class="top-header"
:class="{
'chat-mode-header': isChatPath,
'chat-mode-header--dark': isChatPath && isDarkTheme,
}"
:absolute="isChatPath"
:style="chatHeaderStyle"
>
<!-- 桌面端 menu 按钮 - 仅在 bot 模式下显示 -->
<!-- 桌面端 menu 按钮 -->
<v-btn
v-if="!isChatPath"
style="margin-left: 16px"
class="hidden-md-and-down"
icon
@@ -1073,7 +949,6 @@ onMounted(async () => {
<!-- 移动端 menu 按钮 -->
<v-btn
v-if="!isChatPath"
class="hidden-lg-and-up ms-3"
icon
rounded="sm"
@@ -1084,7 +959,6 @@ onMounted(async () => {
</v-btn>
<div
v-if="!isChatPath"
class="logo-container"
:class="{
'mobile-logo': $vuetify.display.xs,
@@ -1118,6 +992,9 @@ onMounted(async () => {
</v-icon>
</v-btn>
<v-spacer />
<!-- 版本提示信息 - 在手机上隐藏 -->
<div
v-if="isChatPath"
class="chat-header-context"
@@ -1128,10 +1005,7 @@ onMounted(async () => {
</div>
</div>
<v-spacer />
<!-- 版本提示信息 - 在手机上隐藏 -->
<div v-if="!isChatPath" class="mr-4 hidden-xs">
<div v-else class="mr-4 hidden-xs">
<small v-if="hasNewVersion">
{{ t("core.header.version.hasNewVersion") }}
</small>
@@ -1140,33 +1014,16 @@ onMounted(async () => {
</small>
</div>
<div class="header-actions" :class="{ 'chat-header-actions': isChatPath }">
<!-- Bot/Chat mode switch - single button, hidden in chat mobile menu -->
<v-btn
v-if="!isChatPath || !$vuetify.display.smAndDown"
class="mode-switch-btn"
:class="{ 'mr-4 hidden-xs': !isChatPath }"
variant="text"
size="small"
rounded="sm"
@click="switchMode"
>
<v-icon start>{{ nextMode === "bot" ? "mdi-robot" : "mdi-chat" }}</v-icon>
{{ nextMode === "bot" ? "Bot" : "Chat" }}
</v-btn>
<div class="header-actions">
<!-- 功能菜单 -->
<StyledMenu v-model="mainMenuOpen" offset="12" location="bottom end">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps"
size="small"
:class="[
'action-btn',
isChatPath ? 'chat-action-btn' : 'mr-4',
]"
:color="isChatPath ? undefined : 'var(--v-theme-surface)'"
:variant="isChatPath ? 'text' : 'flat'"
class="action-btn mr-4"
color="var(--v-theme-surface)"
variant="flat"
rounded="sm"
icon
>
@@ -1174,29 +1031,6 @@ onMounted(async () => {
</v-btn>
</template>
<!-- Bot/Chat 模式切换 - 仅在手机端显示 -->
<template
v-if="
(isChatPath && $vuetify.display.smAndDown) ||
(!isChatPath && $vuetify.display.xs)
"
>
<div class="mobile-mode-switch-wrapper">
<v-btn
class="mobile-mode-switch-btn"
variant="text"
block
@click="switchMode"
>
<v-icon start>{{
nextMode === "bot" ? "mdi-robot" : "mdi-chat"
}}</v-icon>
{{ nextMode === "bot" ? "Bot" : "Chat" }}
</v-btn>
</div>
<v-divider class="my-1" />
</template>
<!-- 语言切换分组 -->
<v-menu
open-on-click
@@ -2033,21 +1867,6 @@ onMounted(async () => {
flex: 0 1 auto;
}
.top-header.chat-mode-header {
background: #fdfcfc !important;
border-bottom: 0;
box-shadow: none !important;
}
.top-header.chat-mode-header.chat-mode-header--dark {
background: rgb(var(--v-theme-background)) !important;
}
.top-header.chat-mode-header .v-toolbar__content {
padding: 0 16px 0 20px;
background: transparent !important;
}
.chat-mobile-sidebar-toggle {
width: 32px !important;
height: 32px !important;
@@ -2071,13 +1890,15 @@ onMounted(async () => {
.chat-header-context {
min-width: 0;
max-width: clamp(180px, calc(100vw - 600px), 460px);
max-width: min(360px, 38vw);
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 5px 18px 5px 0;
padding: 5px 10px 5px 0;
overflow: hidden;
text-align: right;
}
.chat-header-context .provider-trigger--header {
@@ -2090,7 +1911,7 @@ onMounted(async () => {
.chat-header-context .provider-trigger-title {
min-width: 0;
max-width: min(300px, 52vw);
max-width: min(240px, 30vw);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -2117,41 +1938,6 @@ onMounted(async () => {
align-items: center;
}
.chat-header-actions {
gap: 4px;
margin-right: 0;
}
.mode-switch-btn {
margin: 0;
border: 0;
color: rgb(var(--v-theme-on-surface));
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
}
.mode-switch-btn {
min-width: 62px;
background: transparent !important;
padding: 0 6px;
}
.mode-switch-btn .v-btn__overlay {
opacity: 0 !important;
}
.mode-switch-btn .v-icon {
font-size: 19px;
}
.chat-action-btn {
margin-right: 0;
color: rgb(var(--v-theme-on-surface));
}
/* 响应式布局样式 */
.logo-container {
margin-left: 10px;
@@ -2240,30 +2026,6 @@ onMounted(async () => {
opacity: 0.85;
}
.mobile-mode-switch-wrapper {
display: flex;
justify-content: center;
padding: 8px 12px 4px;
}
.mobile-mode-switch-btn {
width: 100%;
justify-content: flex-start;
color: rgb(var(--v-theme-on-surface));
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.mobile-mode-switch-btn .v-icon {
font-size: 19px;
}
.mobile-mode-switch-btn .v-btn__overlay {
opacity: 0 !important;
}
/* 移动端对话框标题样式 */
.mobile-card-title {
display: flex;
@@ -2472,17 +2234,8 @@ onMounted(async () => {
font-size: 16px;
}
.chat-header-actions .chat-action-btn,
.chat-header-actions .mode-switch-btn {
margin-right: 0;
}
.top-header.chat-mode-header .v-toolbar__content {
padding: 0 12px 0 14px;
}
.chat-header-context {
max-width: calc(100vw - 92px);
max-width: calc(100vw - 210px);
padding-right: 8px;
}

6
dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
View File

@@ -20,7 +20,11 @@ const isItemActive = computed(() => {
const [path, hash] = props.item.to.split('#');
return route.path === path && route.hash === `#${hash}`;
}
return route.path === props.item.to;
const targetPath = props.item.to.replace(/\/$/, '') || '/';
if (targetPath === '/') {
return route.path === targetPath;
}
return route.path === targetPath || route.path.startsWith(`${targetPath}/`);
});
const itemTitle = computed(() => {

5
dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts
View File

@@ -26,6 +26,11 @@ const sidebarItem: menu[] = [
icon: 'mdi-hand-wave-outline',
to: '/welcome',
},
{
title: 'core.navigation.chat',
icon: 'mdi-star-outline',
to: '/chat',
},
{
title: 'core.navigation.platforms',
icon: 'mdi-robot',

16
dashboard/src/router/ChatBoxRoutes.ts
View File

@@ -4,16 +4,14 @@ const ChatBoxRoutes = {
children: [
{
name: 'ChatBox',
path: '/chatbox',
path: '',
component: () => import('@/views/ChatBoxPage.vue')
},
{
path: ':conversationId',
name: 'ChatBoxDetail',
component: () => import('@/views/ChatBoxPage.vue'),
children: [
{
path: ':conversationId',
name: 'ChatBoxDetail',
component: () => import('@/views/ChatBoxPage.vue'),
props: true
}
]
props: true
}
]
};

11
dashboard/src/router/MainRoutes.ts
View File

@@ -159,16 +159,9 @@ const MainRoutes = {
// },
{
name: 'Chat',
path: '/chat',
path: '/chat/:conversationId?',
component: () => import('@/views/ChatPage.vue'),
children: [
{
path: ':conversationId',
name: 'ChatDetail',
component: () => import('@/views/ChatPage.vue'),
props: true
}
]
props: true
},
{
name: 'Settings',

6
dashboard/src/views/ChatPage.vue
View File

@@ -10,6 +10,8 @@ import Chat from '@/components/chat/Chat.vue'
<style scoped>
.chat-container {
height: calc(100vh - 60px)
height: 100%;
min-height: calc(100vh - 66px);
overflow: hidden;
}
</style>
</style>