fix: use a compact single-column application center

This commit is contained in:
mesalogo
2026-09-18 16:31:13 +08:00
parent 9bd0dae865
commit 5aad0cf5f7
10 changed files with 64 additions and 49 deletions
+6 -2
View File
@@ -156,9 +156,11 @@ describe('Application Center', () => {
expect(screen.queryByRole('button', { name: /上移|下移/ })).not.toBeInTheDocument()
})
it('orders all apps on cards, disables full-order boundaries, and waits for confirmed settings', async () => {
it('orders all app rows, disables full-order boundaries, and waits for confirmed settings', async () => {
const handlers = props()
const { rerender } = render(<ApplicationCenter {...handlers} settings={pinnedSettings} />)
const displayedOrder = () => screen.getAllByRole('article').map((row) => row.querySelector('strong')?.textContent)
expect(displayedOrder()).toEqual(['知识库', '智能心跳', '魔法笔记', '本机推理监控'])
expect(screen.getByRole('button', { name: '上移 知识库' })).toBeDisabled()
expect(screen.getByRole('button', { name: '下移 本机推理监控' })).toBeDisabled()
const moveUp = screen.getByRole('button', { name: '上移 本机推理监控' })
@@ -173,10 +175,12 @@ describe('Application Center', () => {
})
expect(screen.getByRole('button', { name: '下移 本机推理监控' })).toBeDisabled()
expect(await screen.findByRole('status')).not.toBeEmptyDOMElement()
expect(displayedOrder()).toEqual(['知识库', '智能心跳', '魔法笔记', '本机推理监控'])
rerender(<ApplicationCenter {...handlers} settings={{
...pinnedSettings,
applicationNavigation: { ...pinnedSettings.applicationNavigation, order: ['knowledge', 'heartbeat', 'local-inference', 'magic-notes'] },
}} />)
expect(displayedOrder()).toEqual(['知识库', '智能心跳', '本机推理监控', '魔法笔记'])
expect(screen.getByRole('button', { name: '下移 魔法笔记' })).toBeDisabled()
fireEvent.click(screen.getByRole('button', { name: '下移 本机推理监控' }))
expect(handlers.onUpdate).toHaveBeenLastCalledWith({ applicationNavigation: pinnedSettings.applicationNavigation })
@@ -222,7 +226,7 @@ describe('Application Center', () => {
expect(handlers.onRetry).toHaveBeenCalledOnce()
})
it.each(['pending', 'locked'] as const)('disables card sorting when %s', (state) => {
it.each(['pending', 'locked'] as const)('disables row sorting when %s', (state) => {
const handlers = props()
render(<ApplicationCenter {...handlers} settings={pinnedSettings} {...{ [state]: true }} />)
for (const button of screen.getAllByRole('button', { name: /上移|下移/ }))
+16 -15
View File
@@ -1,12 +1,9 @@
.settings-backdrop .settings-panel.application-center {
width: min(960px, calc(100vw - 2 * var(--space-4)));
width: min(640px, calc(100vw - 2 * var(--space-4)));
height: auto;
max-height: calc(100vh - 2 * var(--space-4));
}
.settings-backdrop .settings-panel.application-center--detail {
width: min(640px, calc(100vw - 2 * var(--space-4)));
}
.application-center .settings-panel__header {
gap: var(--space-3);
flex: 0 0 auto;
@@ -56,24 +53,24 @@
}
.application-center__item {
display: flex;
flex-direction: column;
gap: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
background: var(--surface-raised);
padding: var(--space-4);
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-4);
padding: var(--space-3) 0;
min-width: 0;
}
.application-center__item + .application-center__item {
border-top: 1px solid var(--border-subtle);
}
.application-center__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-4);
grid-template-columns: minmax(0, 1fr);
}
.application-center__summary {
display: flex;
align-items: flex-start;
gap: var(--space-3);
flex: 1;
flex: 1 1 260px;
min-width: 0;
overflow-wrap: anywhere;
}
@@ -81,6 +78,9 @@
flex-shrink: 0;
color: var(--text-secondary);
}
.application-center__summary > div {
min-width: 0;
}
.application-center__title {
display: flex;
flex-wrap: wrap;
@@ -103,14 +103,15 @@
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
margin-top: auto;
margin-left: auto;
max-width: 100%;
}
.application-center__order {
display: flex;
flex: 0 0 auto;
gap: var(--space-1);
margin-left: auto;
}
.application-settings {
display: grid;