fix: use a compact single-column application center
This commit is contained in:
@@ -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: /上移|下移/ }))
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user