feat(0.2.1): 合并 Windows 外壳 + 离线编辑, 版本 0.2.1, 正式域名 https://iboard.honor3.com

docs/V0.2/任务模块/视图切换移入项目栏-设计稿.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>设计稿 · 视图切换移入项目栏 (T-VW-02/03 调整)</title>
+<style>
+  :root { --primary:#1677ff; --text:#333; --muted:#999; --border:#eee; }
+  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
+  body { background:#eceef1; padding: 24px; display:flex; gap:28px; flex-wrap:wrap; }
+  .phone { width:375px; background:#f5f5f5; border-radius:18px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.15); }
+  .phone h3 { font-size:13px; color:#556; padding:10px 14px 0; font-weight:600; }
+  .phone .cap { font-size:11px; color:#889; padding:2px 14px 10px; }
+  .bar { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; border-bottom:1px solid #f0f0f0; }
+  .pname { font-size:15px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
+  /* 紧凑分段切换: 高 26px, 内边距收窄, 选中项白底浮起 */
+  .vseg { display:flex; background:#f2f3f5; border-radius:8px; padding:2px; flex-shrink:0; }
+  .vseg div { font-size:12px; line-height:1; padding:5px 11px; border-radius:6px; color:var(--muted); cursor:pointer; white-space:nowrap; }
+  .vseg div.on { background:#fff; color:var(--text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
+  .mini { font-size:11px; color:var(--primary); background:#f0f5ff; border-radius:6px; padding:5px 8px; white-space:nowrap; flex-shrink:0; cursor:pointer; }
+  .mini.solid { background:var(--primary); color:#fff; }
+  .mini.ghost { background:#fff; border:1px solid #e3e6ea; color:#666; }
+  .bar-note { font-size:10px; color:#b0b6bf; padding:6px 12px; background:#fafbfc; border-bottom:1px dashed #e5e8ec; }
+  .demo-body { padding:12px; }
+  .card { background:#fff; border-radius:9px; padding:10px 12px; margin-bottom:7px; font-size:13px; color:#444; box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex; gap:8px; align-items:center; }
+  .card .dot { width:8px; height:8px; border-radius:50%; background:#c9ced6; flex-shrink:0; }
+  .cols { display:flex; gap:8px; }
+  .col { flex:1; background:#fff; border-radius:9px; padding:8px; }
+  .col b { font-size:11px; color:#556; }
+  .col .ccard { background:#f6f7f9; border-radius:6px; font-size:11px; color:#555; padding:6px; margin-top:6px; }
+  .anno { font-size:11px; color:#7a828e; padding:8px 14px 14px; line-height:1.7; background:#fafbfc; }
+  .anno b { color:#43506b; }
+</style>
+</head>
+<body>
+
+<div class="phone">
+  <h3>状态 1 · 列表视图(默认)</h3>
+  <div class="cap">切换段控放在项目名右侧, 与名称同一行</div>
+  <div class="bar">
+    <div class="pname">我的看板项目</div>
+    <div class="vseg"><div class="on">列表</div><div>看板</div></div>
+    <div class="mini">已归档</div>
+    <div class="mini ghost">管理</div>
+    <div class="mini solid">+ 新增</div>
+  </div>
+  <div class="bar-note">「项目管理」按钮文案收窄为「管理」, 与「已归档」同为次级样式, 突出右侧主操作</div>
+  <div class="demo-body">
+    <div class="card"><span class="dot"></span>梳理 V0.2 归档需求</div>
+    <div class="card"><span class="dot"></span>OTA 发布说明样式修复</div>
+    <div class="card"><span class="dot"></span>看板列滚动条位置调整</div>
+  </div>
+  <div class="anno">
+    <b>规格</b><br/>
+    · 分段控件高 26px, 选中项白底浮起(复用现有 .seg 体系收窄版)<br/>
+    · 项目名 flex:1 + 单行省略, 最短保留 4 字符<br/>
+    · 段控始终紧贴名称右侧, 距离 8px
+  </div>
+</div>
+
+<div class="phone">
+  <h3>状态 2 · 看板视图</h3>
+  <div class="cap">点「看板」后段控选中项滑换, 其余布局不变</div>
+  <div class="bar">
+    <div class="pname">我的看板项目</div>
+    <div class="vseg"><div>列表</div><div class="on">看板</div></div>
+    <div class="mini">已归档</div>
+    <div class="mini ghost">管理</div>
+    <div class="mini solid">+ 新增</div>
+  </div>
+  <div class="demo-body">
+    <div class="cols">
+      <div class="col"><b>Plan · 2</b><div class="ccard">梳理归档需求</div><div class="ccard">OTA 说明修复</div></div>
+      <div class="col"><b>Doing · 1</b><div class="ccard">滚动条调整</div></div>
+      <div class="col"><b>Done · 1</b><div class="ccard">版本方案落地</div></div>
+    </div>
+  </div>
+  <div class="anno">
+    <b>交互</b><br/>
+    · 点按即切换并持久化(设备端记忆, T-VW-02/03 不变)<br/>
+    · 切换不引发项目栏高度变化, 下方视图平滑重排<br/>
+    · 长按/拖动手势不受影响(段控独立控件, 不在卡片上)
+  </div>
+</div>
+
+<div class="phone">
+  <h3>状态 3 · 长项目名</h3>
+  <div class="cap">名称被压缩时单行省略, 段控与按钮永不换行/收缩</div>
+  <div class="bar">
+    <div class="pname">经济数据整理与策略研究-2026年第一季度重点项目</div>
+    <div class="vseg"><div class="on">列表</div><div>看板</div></div>
+    <div class="mini">已归档</div>
+    <div class="mini ghost">管理</div>
+    <div class="mini solid">+ 新增</div>
+  </div>
+  <div class="demo-body">
+    <div class="card"><span class="dot"></span>完整项目名在详情/管理页仍可见</div>
+  </div>
+  <div class="anno">
+    <b>宽度预算 (375px)</b><br/>
+    · 左右内边距 24 + 段控 90 + 已归档 48 + 管理 42 + 新增 54 + 间距 32 ≈ 290<br/>
+    · 名称可用 ≈ 85px(约 6 个汉字)起, 不足部分省略<br/>
+    · 若仍嫌拥挤, 备选:「已归档」「管理」收进 ⋯ 溢出菜单(二期可选, 本稿未采用)
+  </div>
+</div>
+
+</body>
+</html>