Files
2026Technology-Competition/docs/superpowers/plans/2026-09-12-drawer-favicon.md
T

3.7 KiB
Raw Blame History

favicon 修复 + 抽屉(删左栏/宽度变量/蒙版)— 实施计划

目标文件:src/genesis/server/{app.py}src/genesis/server/static/{chat.html,chat.css,chat.js}、新增 static/favicon.svg 后端改动仅 favicon 相关;其余为前端。

已确认决策

  • D1 抽屉宽度 --drawer-w: 520px
  • D2 蒙版 rgba(0,0,0,.5)
  • D3 点蒙版关闭抽屉(带未保存确认)。
  • D4 删除抽屉左侧项目列表,抽屉只留表单。

Task 1favicon 404

  • 新增 src/genesis/server/static/favicon.svg:品牌「G」(深底 #0B0F17 + accent #5EEAD4)。
  • chat.html <head> 增:<link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=__ASSET_VER__">
  • app.py
    • from fastapi.responses import FileResponse, HTMLResponse, Response
    • index 附近新增 @app.get("/favicon.ico")Response(status_code=204)
    • _asset_names 加入 "favicon.svg"

Task 2:抽屉删左栏 + 宽度变量 + 蒙版

  • chat.html
    • 删除 <div class="drawer-list" id="drawer-list"></div>
    • 新增 <div id="drawer-mask" class="drawer-mask"></div>(与 #proj-drawer 同级)。
  • chat.js
    • 删除 3 处 renderDrawerList();loadProjects/openProjectDrawer/loadDrawerForm)与 renderDrawerList() 函数定义。
    • openProjectDrawer → mask showcloseProjectDrawer → 过 guardDrawerDirty() 后 mask 隐藏。
    • 点蒙版 → closeProjectDrawer()
  • chat.css
    • :root--drawer-w: 520px; --mask-bg: rgba(0,0,0,.5);#proj-drawer { width: var(--drawer-w); }
    • 删除 .drawer-list 规则(#drawer-list 不再存在)。
    • 新增 .drawer-maskfixed/inset/z-index 99/opacity+visibility 过渡/.show)与 @media (max-width:860px) .drawer-mask{display:none}

Task 3:验证与提交

  • node --checknode --testpython -m pytest(≥99%)。
  • 手动:favicon 无 404;抽屉只留表单、宽 520px;蒙版 0.5;点蒙版/×/Esc 关闭(带未保存确认)。
  • 更新 _AI_USAGE_LOG.md 并提交。

风险

  • 蒙版使抽屉从"非模态"变"模态"(打开时点侧边栏会被蒙版拦截并关闭抽屉)。
  • 窄屏(≤860px)抽屉全屏,蒙版隐藏,仅 ×/Esc 关闭。

评审结论与计划调整(plan-eng-review

采纳的修正

  • F5(真实缺陷,修正计划)不要.drawer-body 改成 display:block。保持 flex:1; display:flex; min-height:0,仅删除 .drawer-list 规则——否则 .drawer-form { flex:1; overflow-y:auto } 失去高度约束,长表单溢出且不滚动。
  • F6(测试缺口,采纳):新增 favicon 回归测试(tests/test_server_api.py):GET /favicon.ico == 204 且 GET / 文本含 rel="icon"
  • 窄屏蒙版:保留 @media (max-width:860px) .drawer-mask { display:none }(全屏抽屉时仅 ×/Esc 关闭)。

记录(接受,不改)

  • F3 行为变更:加蒙版后抽屉转为模态——打开时点侧边栏/空白会被蒙版拦截并触发关闭(未保存先确认)。
  • F4:蒙版不加 aria-hidden,作为纯装饰层。
  • F7/F8/F9:层叠、幂等、资源版本一致性均按计划成立。

受影响任务更新

  • Task 2:删除 .drawer-list 规则即可,.drawer-body 保持不变
  • Task 3:新增 favicon 回归测试。

GSTACK REVIEW REPORT

  • STATUS: DONE
  • REVIEWED: docs/superpowers/plans/2026-09-12-drawer-favicon.md
  • FINDINGS: F5 缺陷(已修正) / F6 测试缺口(已采纳) / F3 行为变更(记录) / F4 a11y(记录)F7-F9 接受
  • KEY DECISION: .drawer-body 保持 flex;新增 favicon 回归测试;窄屏隐藏蒙版
  • NEXT: 待用户批准后实施