bboysoul/dodo
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: add resizable desktop panes
ci / gitleaks (push) Successful in 6s
Details
ci / docker (push) Successful in 3m32s
Details

Browse Source
This commit is contained in:
bboysoul
2026-09-20 11:33:43 +08:00
parent 3a23c6cd44
commit 8ab5ad05a0
7 changed files with 259 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.test.ts
+21 -11
View File
@@ -389,8 +389,8 @@ describe('approved UI detail direction', () => {
})
it('matches the approved paper-flow geometry and material', () => {
expect(css).toContain('.shell.detail-open{grid-template-columns:236px minmax(430px,1fr) 350px}')
expect(css).toContain('@media(max-width:1050px) and (min-width:931px){.shell.detail-open{grid-template-columns:236px minmax(0,1fr) 350px}')
expect(css).toContain('.shell.detail-open{grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) var(--detail-width,350px)}')
expect(css).toContain('@media(max-width:1050px) and (min-width:931px){main{padding-inline:24px}')
expect(css).toContain('.detail{min-width:0;border-left:1px solid var(--line);background:#fffdf8;overflow:hidden;display:flex;flex-direction:column}')
expect(css).toContain('.detail-head{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;')
expect(css).toContain('.detail-form{min-width:0;border:0;margin:0;grid-template-columns:minmax(0,1fr);padding:18px;display:grid;gap:18px;overflow-y:auto;')
@@ -1467,6 +1467,15 @@ describe('unified floating add interaction', () => {
describe('desktop task and habit detail disclosure', () => {
it('gives the list the full remaining width until a task or habit is selected', () => {
expect(app).toContain("'detail-open': Boolean(selectedTask) || habitDetailOpen")
expect(app).toContain(':style="shellStyle"')
expect(app).toContain('aria-label="调整菜单栏宽度"')
expect(app).toContain(':aria-label="detailSeparatorLabel"')
expect(app).toContain(':aria-valuemax="sidebarMaxWidth"')
expect(app).toContain(':aria-valuemax="detailMaxWidth"')
expect(app).toContain('@lostpointercapture="handlePaneLostPointerCapture"')
expect(app).toContain("@pointerdown=\"startPaneResize('sidebar',$event)\"")
expect(app).toContain("@pointerdown=\"startPaneResize('detail',$event)\"")
expect(app).toContain("@keydown=\"resizePaneWithKeyboard('sidebar',$event)\"")
expect(app).toContain('<AppSheet v-if="selectedTask" :open="true" :modal="compactLayout"')
expect(app).toContain('panel-class="detail"')
expect(app).toContain(':compact-layout="compactLayout"')
@@ -1483,10 +1492,11 @@ describe('desktop task and habit detail disclosure', () => {
expect(app).toContain('@click="closeTaskDetail"')
expect(app).toContain('function closeTaskDetail()')
expect(app).not.toContain('<div v-else class="paper">')
expect(css).toContain('.shell{height:100vh;display:grid;grid-template-columns:236px minmax(430px,1fr) 0;')
expect(css).toContain('.shell.detail-open{grid-template-columns:236px minmax(430px,1fr) 350px}')
expect(css).toContain('.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(430px,1fr) 350px}')
expect(css).toContain('@media(min-width:931px){.habit-detail-sheet{width:350px;height:100vh;max-height:none;border-radius:0;')
expect(css).toContain('.shell{height:100vh;display:grid;grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) 0;')
expect(css).toContain('.shell.detail-open{grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) var(--detail-width,350px)}')
expect(css).toContain('.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(330px,1fr) var(--detail-width,350px)}')
expect(css).toContain('.pane-resizer{position:relative;z-index:12;width:9px;')
expect(css).toContain('@media(min-width:931px){.habit-detail-sheet{width:var(--detail-width,350px);height:100vh;')
expect(css).toContain('transition:grid-template-columns .22s ease')
})
})
@@ -1500,8 +1510,8 @@ describe('desktop sidebar collapse & folder scrollbar', () => {
it('lets the top menu collapse the desktop sidebar', () => {
expect(app).toContain('sidebar-collapsed')
expect(app).toContain('toggleSidebar')
expect(css).toContain('.shell.sidebar-collapsed{grid-template-columns:0 minmax(430px,1fr) 0}')
expect(css).toContain('.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(430px,1fr) 350px}')
expect(css).toContain('.shell.sidebar-collapsed{grid-template-columns:0 minmax(330px,1fr) 0}')
expect(css).toContain('.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(330px,1fr) var(--detail-width,350px)}')
})
it('hides the folders scrollbar while staying scrollable', () => {
@@ -1575,13 +1585,13 @@ describe('sidebar information hierarchy', () => {
describe('quiet index sidebar parity', () => {
it('matches the approved desktop and mobile sidebar geometry and material', () => {
expect(css).toContain('.shell{height:100vh;display:grid;grid-template-columns:236px minmax(430px,1fr) 0;')
expect(css).toContain('.shell.detail-open{grid-template-columns:236px minmax(430px,1fr) 350px}')
expect(css).toContain('.shell{height:100vh;display:grid;grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) 0;')
expect(css).toContain('.shell.detail-open{grid-template-columns:var(--sidebar-width,236px) minmax(330px,1fr) var(--detail-width,350px)}')
expect(css).toContain('.sidebar{border-right:1px solid #e4d5c3;background:#f7efe3;')
expect(css).toContain('.brand-row{height:68px;')
expect(css).toContain('border-bottom:1px solid rgba(222,205,185,.75)')
expect(css).toContain('.primary-nav{display:grid;padding:10px 11px 8px;gap:2px}')
expect(css).toContain('@media(max-width:1050px) and (min-width:931px){.shell.detail-open{grid-template-columns:236px minmax(0,1fr) 350px}')
expect(css).toContain('@media(max-width:1050px) and (min-width:931px){main{padding-inline:24px}')
expect(css).not.toContain('grid-template-columns:220px')
expect(css).toContain('@media(max-width:930px){.shell')
expect(css).toContain('left:0;width:236px;max-width:86vw;')