style: refine dense task views

frontend/src/visual-polish.test.ts

@@ -0,0 +1,57 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const app = readFileSync('src/App.vue', 'utf8')
+const countdown = readFileSync('src/CountdownPanel.vue', 'utf8')
+const habits = readFileSync('src/MvpPanel.vue', 'utf8')
+const css = readFileSync('src/style.css', 'utf8')
+const memoCss = readFileSync('src/memo.css', 'utf8')
+const memoPanel = readFileSync('src/MemoPanel.vue', 'utf8')
+const memoRow = readFileSync('src/components/MemoRow.vue', 'utf8')
+
+describe('approved five-detail polish', () => {
+  it('uses an independent accessible task-search panel toggle', () => {
+    expect(app).toContain(":aria-label=\"mobileSearchOpen ? '收起搜索任务' : '展开搜索任务'\"")
+    expect(app).toContain('aria-controls="task-search-panel"')
+    expect(app).toContain('@keydown="handleTaskSearchKeydown"')
+    expect(app).not.toContain('mobileSearchOpen || Boolean(query)')
+    expect(css).toMatch(/\.task-search-toggle\{[^}]*width:44px;[^}]*height:44px/)
+    expect(css).toMatch(/@media\(min-width:931px\)\{[^}]*\.task-search-toggle\{display:none\}/)
+    expect(css).toMatch(/@media\(min-width:931px\)\{[\s\S]*?\.search-reveal\{[^}]*min-width:320px/)
+  })
+
+  it('keeps the countdown focus compact and detail titles unique', () => {
+    const focusStart = countdown.indexOf('class="countdown-focus"')
+    const focus = countdown.slice(focusStart, countdown.indexOf('</button>', focusStart))
+    expect(focus).not.toContain('置顶的重要日子')
+    expect(focus).not.toContain('下一个重要日子')
+    expect(focus).not.toContain('countdown-copy')
+    expect(focus).toContain('<h3>{{focusItem.title}}</h3>')
+    expect(countdown).not.toContain('<small>重要日子详情</small>')
+    expect(habits).not.toContain('<small>习惯详情</small>')
+    expect(countdown).toContain('title-id="countdown-detail-title"')
+    expect(habits).toContain('title-id="habit-detail-title"')
+    expect(css).toMatch(/@media\(max-width:930px\)\{[\s\S]*?\.countdown-focus\{[^}]*height:140px/)
+  })
+
+  it('keeps every desktop and mobile task row at the approved height', () => {
+    const polishStart = css.indexOf('/* Approved five-detail list/search polish. */')
+    const polish = css.slice(polishStart)
+    expect(polish).toContain('}\n.task-row{min-height:66px;height:66px;max-height:68px}')
+    expect(polish).toContain('.habit-row{min-height:86px;height:86px;max-height:88px}')
+    expect(polish).toContain('.today-habit-row{min-height:86px;height:86px;max-height:88px}')
+    expect(memoCss).toContain('.memo-row{width:100%;height:74px;min-height:74px;max-height:76px;')
+    expect(css).toContain('.task-check{width:44px;')
+  })
+
+  it('renders memo rows with title and time only at a fixed compact height', () => {
+    expect(memoPanel).not.toContain('memoPlainTextSummary')
+    expect(memoRow).not.toContain('memoPlainTextSummary')
+    expect(memoRow).not.toContain('memo-row__excerpt')
+    expect(memoRow).not.toContain('memo.excerpt')
+    expect(memoRow).toContain('<strong>{{ memo.title }}</strong>')
+    expect(memoRow).toContain('<time :datetime="memo.updated_at">{{ updated }}</time>')
+    expect(memoCss).not.toContain('.memo-row__excerpt')
+    expect(memoCss).toContain('.memo-row time{grid-column:2;grid-row:1;')
+  })
+})