From d0e617112072b93735e3f5656d4c846d1fae2a8d Mon Sep 17 00:00:00 2001 From: "mula.liu" Date: Sat, 28 Mar 2026 10:17:11 +0800 Subject: [PATCH] v0.1.4-p4 --- frontend/src/App.css | 59 +++++++++++++++---- frontend/src/App.h5.css | 18 ++++++ .../modules/dashboard/BotDashboardModule.tsx | 4 +- .../platform/PlatformDashboardPage.tsx | 29 +++++---- 4 files changed, 84 insertions(+), 26 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index a0def59..922fba2 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1349,6 +1349,9 @@ body { .platform-bot-list-panel { min-height: 0; + display: grid; + grid-template-rows: auto auto minmax(0, 1fr) auto; + gap: 10px; } .platform-list-actions { @@ -1383,6 +1386,9 @@ body { display: flex; flex-direction: column; gap: 10px; + min-height: 0; + overflow: auto; + padding-right: 2px; } .platform-bot-card { @@ -1611,6 +1617,12 @@ body { .platform-selected-bot-card { min-height: 240px; + border-radius: 18px; + border-color: color-mix(in oklab, var(--line) 74%, var(--brand-soft) 26%); + background: + linear-gradient(180deg, color-mix(in oklab, var(--panel-soft) 82%, transparent), color-mix(in oklab, var(--panel) 90%, transparent)), + var(--panel); + box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line) 72%, transparent); } .platform-selected-bot-head { @@ -1622,9 +1634,26 @@ body { .platform-selected-bot-headline { display: flex; - align-items: baseline; - gap: 14px; + align-items: flex-start; + justify-content: space-between; + gap: 16px; flex-wrap: wrap; + min-width: 0; + flex: 1 1 auto; +} + +.platform-selected-bot-title-block { + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; +} + +.platform-selected-bot-statuses { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; } .platform-selected-bot-name-row { @@ -1639,6 +1668,10 @@ body { flex-wrap: wrap; justify-content: flex-end; gap: 10px; + padding: 4px; + border-radius: 999px; + border: 1px solid color-mix(in oklab, var(--line) 76%, transparent); + background: color-mix(in oklab, var(--panel-soft) 72%, transparent); } .platform-more-menu-anchor { @@ -1679,8 +1712,8 @@ body { min-width: 0; padding: 12px 14px; border-radius: 14px; - border: 1px solid rgba(97, 174, 255, 0.14); - background: rgba(255, 255, 255, 0.03); + border: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand-soft) 28%); + background: color-mix(in oklab, var(--panel-soft) 78%, transparent); } .platform-selected-bot-info-label { @@ -1729,8 +1762,8 @@ body { margin-top: 10px; padding: 14px; border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(255, 255, 255, 0.03); + border: 1px solid color-mix(in oklab, var(--line) 72%, transparent); + background: color-mix(in oklab, var(--panel-soft) 76%, transparent); color: var(--muted); line-height: 1.6; white-space: pre-wrap; @@ -1761,10 +1794,10 @@ body { max-height: min(84vh, 760px); overflow: hidden; border-radius: 28px 28px 0 0; - border: 1px solid color-mix(in oklab, var(--line) 78%, #ffffff 22%); + border: 1px solid color-mix(in oklab, var(--line) 78%, var(--brand-soft) 22%); border-bottom: 0; background: - linear-gradient(180deg, color-mix(in oklab, var(--panel) 94%, #ffffff 6%) 0%, var(--panel) 100%); + linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, var(--brand-soft) 8%) 0%, var(--panel) 100%); box-shadow: 0 -24px 60px rgba(8, 17, 34, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; @@ -1813,9 +1846,13 @@ body { .platform-selected-bot-card-compact { border-radius: 22px; - border-color: color-mix(in oklab, var(--line) 72%, #ffffff 28%); - background: color-mix(in oklab, var(--panel-soft) 88%, #ffffff 12%); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); + border-color: color-mix(in oklab, var(--line) 72%, var(--brand-soft) 28%); + background: + linear-gradient(180deg, color-mix(in oklab, var(--panel-soft) 82%, transparent), color-mix(in oklab, var(--panel) 92%, transparent)), + var(--panel); + box-shadow: + inset 0 0 0 1px color-mix(in oklab, var(--line) 76%, transparent), + 0 10px 28px rgba(8, 17, 34, 0.12); } @keyframes platform-sheet-up { diff --git a/frontend/src/App.h5.css b/frontend/src/App.h5.css index d6e5a09..5c96841 100644 --- a/frontend/src/App.h5.css +++ b/frontend/src/App.h5.css @@ -247,6 +247,17 @@ } @media (max-width: 980px) { + .app-shell-compact .platform-grid.is-compact { + height: 100%; + min-height: 0; + grid-template-rows: minmax(0, 1fr); + } + + .app-shell-compact .platform-bot-list-panel { + height: 100%; + min-height: 0; + } + .grid-ops.grid-ops-compact { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); @@ -271,6 +282,8 @@ } .platform-selected-bot-headline { + flex-direction: column; + align-items: flex-start; gap: 8px; } @@ -279,6 +292,11 @@ align-items: stretch; } + .platform-selected-bot-title-block, + .platform-selected-bot-statuses { + width: 100%; + } + .platform-selected-bot-actions { justify-content: flex-start; } diff --git a/frontend/src/modules/dashboard/BotDashboardModule.tsx b/frontend/src/modules/dashboard/BotDashboardModule.tsx index d9c9a7f..3018392 100644 --- a/frontend/src/modules/dashboard/BotDashboardModule.tsx +++ b/frontend/src/modules/dashboard/BotDashboardModule.tsx @@ -1099,9 +1099,7 @@ export function BotDashboardModule({ const [uploadMaxMb, setUploadMaxMb] = useState(100); const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState([]); const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10)); - const [botListPageSizeReady, setBotListPageSizeReady] = useState( - () => readCachedPlatformPageSize(0) > 0, - ); + const [botListPageSizeReady, setBotListPageSizeReady] = useState(true); const [chatPullPageSize, setChatPullPageSize] = useState(60); const [commandAutoUnlockSeconds, setCommandAutoUnlockSeconds] = useState(10); const [chatHasMore, setChatHasMore] = useState(false); diff --git a/frontend/src/modules/platform/PlatformDashboardPage.tsx b/frontend/src/modules/platform/PlatformDashboardPage.tsx index e96be1c..4edc474 100644 --- a/frontend/src/modules/platform/PlatformDashboardPage.tsx +++ b/frontend/src/modules/platform/PlatformDashboardPage.tsx @@ -160,7 +160,7 @@ export function PlatformDashboardPage({ compactMode }: PlatformDashboardPageProp const [usageLoading, setUsageLoading] = useState(false); const [usagePage, setUsagePage] = useState(1); const [usagePageSize, setUsagePageSize] = useState(() => readCachedPlatformPageSize(10)); - const [pageSizeReady, setPageSizeReady] = useState(() => readCachedPlatformPageSize(0) > 0); + const [pageSizeReady, setPageSizeReady] = useState(true); const [botListPage, setBotListPage] = useState(1); const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10)); const [showCompactBotSheet, setShowCompactBotSheet] = useState(false); @@ -538,15 +538,23 @@ export function PlatformDashboardPage({ compactMode }: PlatformDashboardPageProp <>
-
- {selectedBotInfo.has_access_password ? ( - - - - ) : null} -
{selectedBotInfo.name}
+
+
+ {selectedBotInfo.has_access_password ? ( + + + + ) : null} +
{selectedBotInfo.name}
+
+
{selectedBotInfo.id}
+
+
+ {selectedBotInfo.enabled === false ? {isZh ? '停用' : 'Disabled'} : null} + + {selectedBotInfo.docker_status || '-'} +
-
{selectedBotInfo.id}
- {!pageSizeReady ? ( -
{isZh ? '正在同步分页设置...' : 'Syncing page size...'}
- ) : null} {pageSizeReady ? pagedBots.map((bot) => { const enabled = bot.enabled !== false; const running = bot.docker_status === 'RUNNING';