mula
/
dashboard-nanobot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v0.1.4-p4

main
mula.liu 2026-03-28 10:17:11 +08:00
parent 1ef72df0b1
commit d0e6171120
4 changed files with 84 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/App.css
View File

@ -1349,6 +1349,9 @@ body {
.platform-bot-list-panel { .platform-bot-list-panel {
min-height: 0; min-height: 0;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 10px;
} }
.platform-list-actions { .platform-list-actions {
@ -1383,6 +1386,9 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
min-height: 0;
overflow: auto;
padding-right: 2px;
} }
.platform-bot-card { .platform-bot-card {
@ -1611,6 +1617,12 @@ body {
.platform-selected-bot-card { .platform-selected-bot-card {
min-height: 240px; 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 { .platform-selected-bot-head {
@ -1622,9 +1634,26 @@ body {
.platform-selected-bot-headline { .platform-selected-bot-headline {
display: flex; display: flex;
align-items: baseline; align-items: flex-start;
gap: 14px; justify-content: space-between;
gap: 16px;
flex-wrap: wrap; 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 { .platform-selected-bot-name-row {
@ -1639,6 +1668,10 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; 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 { .platform-more-menu-anchor {
@ -1679,8 +1712,8 @@ body {
min-width: 0; min-width: 0;
padding: 12px 14px; padding: 12px 14px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(97, 174, 255, 0.14); border: 1px solid color-mix(in oklab, var(--line) 72%, var(--brand-soft) 28%);
background: rgba(255, 255, 255, 0.03); background: color-mix(in oklab, var(--panel-soft) 78%, transparent);
} }
.platform-selected-bot-info-label { .platform-selected-bot-info-label {
@ -1729,8 +1762,8 @@ body {
margin-top: 10px; margin-top: 10px;
padding: 14px; padding: 14px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid color-mix(in oklab, var(--line) 72%, transparent);
background: rgba(255, 255, 255, 0.03); background: color-mix(in oklab, var(--panel-soft) 76%, transparent);
color: var(--muted); color: var(--muted);
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
@ -1761,10 +1794,10 @@ body {
max-height: min(84vh, 760px); max-height: min(84vh, 760px);
overflow: hidden; overflow: hidden;
border-radius: 28px 28px 0 0; 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; border-bottom: 0;
background: 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: box-shadow:
0 -24px 60px rgba(8, 17, 34, 0.28), 0 -24px 60px rgba(8, 17, 34, 0.28),
0 0 0 1px rgba(255, 255, 255, 0.04) inset; 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
@ -1813,9 +1846,13 @@ body {
.platform-selected-bot-card-compact { .platform-selected-bot-card-compact {
border-radius: 22px; border-radius: 22px;
border-color: color-mix(in oklab, var(--line) 72%, #ffffff 28%); border-color: color-mix(in oklab, var(--line) 72%, var(--brand-soft) 28%);
background: color-mix(in oklab, var(--panel-soft) 88%, #ffffff 12%); background:
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); 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 { @keyframes platform-sheet-up {

18
frontend/src/App.h5.css
View File

@ -247,6 +247,17 @@
} }
@media (max-width: 980px) { @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-ops.grid-ops-compact {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
@ -271,6 +282,8 @@
} }
.platform-selected-bot-headline { .platform-selected-bot-headline {
flex-direction: column;
align-items: flex-start;
gap: 8px; gap: 8px;
} }
@ -279,6 +292,11 @@
align-items: stretch; align-items: stretch;
} }
.platform-selected-bot-title-block,
.platform-selected-bot-statuses {
width: 100%;
}
.platform-selected-bot-actions { .platform-selected-bot-actions {
justify-content: flex-start; justify-content: flex-start;
} }

4
frontend/src/modules/dashboard/BotDashboardModule.tsx
View File

@ -1099,9 +1099,7 @@ export function BotDashboardModule({
const [uploadMaxMb, setUploadMaxMb] = useState(100); const [uploadMaxMb, setUploadMaxMb] = useState(100);
const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState<string[]>([]); const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState<string[]>([]);
const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10)); const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10));
const [botListPageSizeReady, setBotListPageSizeReady] = useState( const [botListPageSizeReady, setBotListPageSizeReady] = useState(true);
() => readCachedPlatformPageSize(0) > 0,
);
const [chatPullPageSize, setChatPullPageSize] = useState(60); const [chatPullPageSize, setChatPullPageSize] = useState(60);
const [commandAutoUnlockSeconds, setCommandAutoUnlockSeconds] = useState(10); const [commandAutoUnlockSeconds, setCommandAutoUnlockSeconds] = useState(10);
const [chatHasMore, setChatHasMore] = useState(false); const [chatHasMore, setChatHasMore] = useState(false);

29
frontend/src/modules/platform/PlatformDashboardPage.tsx
View File

@ -160,7 +160,7 @@ export function PlatformDashboardPage({ compactMode }: PlatformDashboardPageProp
const [usageLoading, setUsageLoading] = useState(false); const [usageLoading, setUsageLoading] = useState(false);
const [usagePage, setUsagePage] = useState(1); const [usagePage, setUsagePage] = useState(1);
const [usagePageSize, setUsagePageSize] = useState(() => readCachedPlatformPageSize(10)); const [usagePageSize, setUsagePageSize] = useState(() => readCachedPlatformPageSize(10));
const [pageSizeReady, setPageSizeReady] = useState(() => readCachedPlatformPageSize(0) > 0); const [pageSizeReady, setPageSizeReady] = useState(true);
const [botListPage, setBotListPage] = useState(1); const [botListPage, setBotListPage] = useState(1);
const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10)); const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10));
const [showCompactBotSheet, setShowCompactBotSheet] = useState(false); const [showCompactBotSheet, setShowCompactBotSheet] = useState(false);
@ -538,15 +538,23 @@ export function PlatformDashboardPage({ compactMode }: PlatformDashboardPageProp
<> <>
<div className="platform-selected-bot-head"> <div className="platform-selected-bot-head">
<div className="platform-selected-bot-headline"> <div className="platform-selected-bot-headline">
<div className="platform-selected-bot-name-row"> <div className="platform-selected-bot-title-block">
{selectedBotInfo.has_access_password ? ( <div className="platform-selected-bot-name-row">
<span className="ops-bot-lock" title={isZh ? '已设置访问密码' : 'Access password enabled'} aria-label={isZh ? '已设置访问密码' : 'Access password enabled'}> {selectedBotInfo.has_access_password ? (
<Lock size={13} /> <span className="ops-bot-lock" title={isZh ? '已设置访问密码' : 'Access password enabled'} aria-label={isZh ? '已设置访问密码' : 'Access password enabled'}>
</span> <Lock size={13} />
) : null} </span>
<div className="platform-selected-bot-name">{selectedBotInfo.name}</div> ) : null}
<div className="platform-selected-bot-name">{selectedBotInfo.name}</div>
</div>
<div className="mono platform-selected-bot-id">{selectedBotInfo.id}</div>
</div>
<div className="platform-selected-bot-statuses">
{selectedBotInfo.enabled === false ? <span className="badge badge-err">{isZh ? '停用' : 'Disabled'}</span> : null}
<span className={selectedBotInfo.docker_status === 'RUNNING' ? 'badge badge-ok' : 'badge badge-unknown'}>
{selectedBotInfo.docker_status || '-'}
</span>
</div> </div>
<div className="mono platform-selected-bot-id">{selectedBotInfo.id}</div>
</div> </div>
<div className="platform-selected-bot-actions"> <div className="platform-selected-bot-actions">
<LucentIconButton <LucentIconButton
@ -824,9 +832,6 @@ export function PlatformDashboardPage({ compactMode }: PlatformDashboardPageProp
/> />
<div className="list-scroll platform-bot-list-scroll"> <div className="list-scroll platform-bot-list-scroll">
{!pageSizeReady ? (
<div className="ops-bot-list-empty">{isZh ? '正在同步分页设置...' : 'Syncing page size...'}</div>
) : null}
{pageSizeReady ? pagedBots.map((bot) => { {pageSizeReady ? pagedBots.map((bot) => {
const enabled = bot.enabled !== false; const enabled = bot.enabled !== false;
const running = bot.docker_status === 'RUNNING'; const running = bot.docker_status === 'RUNNING';