dsh-design-studio 0.8.0 → 0.9.0

package/skills/ui-design/references/desktop.md

@@ -0,0 +1,24 @@
+# 桌面软件（kind: desktop）
+
+## 画幅
+
+- 按 1280×800 设计（窗口里面那块），宽高都跟着视口走（`width: 100%`、整页 `height: 100vh`）：多尺寸视图还会拿 1024×680、1440×900 来看。每屏 `<head>` 写 `<meta name="dsh-design" content="desktop">`；做 Windows 软件写 `content="desktop windows"`（不写是 Mac）。
+- **窗口按钮是外框画的**，盖在页面上面，页面里别再画：
+  - Mac：左上角红绿灯，三个 12px 圆点在 x 20–72、y 20–32。顶部 52px 是工具栏（标题栏和工具栏合一），红绿灯在它左边；有侧栏时红绿灯压在侧栏顶上，侧栏顶部空出 52。标题、搜索、按钮放工具栏里、x 80 以后。
+  - Windows：右上角最小化 / 最大化 / 关闭，共 138×32。顶部 32–48px 标题栏：左边应用图标 + 名字，右边空出 138。
+  - 这两块别放字和按钮，体检会报「被窗口按钮挡住」。顶栏是深色时，Windows 的按钮自动画白的（判断不准就在 `<head>` 加 `<meta name="dsh-capsule" content="white">` 或 `black`）。
+- Mac 的菜单栏在屏幕最上面、不在窗口里，别画；Windows 传统软件可以在标题栏下画一行菜单（文件 编辑 视图…）。
+
+## 结构和组件
+
+- **布局**：左侧栏（220–260，导航、文件夹、账户）+ 主区；要看列表和内容就三栏：侧栏 + 列表（280–360）+ 详情。栏之间 1px 分隔线，侧栏底色比主区略深或半透明。
+- **整个窗口不滚**：侧栏、列表、详情各自滚（`overflow: auto`），工具栏和底部状态栏（可选，24px）一直在。
+- **比手机密**：正文 13px（Mac）/ 14px（Windows），说明 11–12px；列表行高 28–36，按钮、输入框高 28–32，工具栏图标按钮 28×28；鼠标用，不用 44 的点击区。
+- **桌面的规矩**：悬停有反馈（行变浅色底）；选中行用主色底或主色左边条；常用操作在菜单项右边写快捷键（Mac `⌘N`，Windows `Ctrl+N`）；右键菜单、多选、拖拽排序这类可以画出来。
+- **弹窗**：Mac 的 sheet 从工具栏下面滑出，按钮在右下「取消 / 好」（默认按钮主色）；Windows 对话框按钮在右下「确定 / 取消」。设置页用侧边分组 + 右边表单，不用一屏一个。
+- **空状态、首次打开**：一张简单插画 + 一句说明 + 一个主按钮（「新建文档」）。
+
+## 平台风格
+
+- Mac（默认）：`-apple-system, "SF Pro Text", "PingFang SC", sans-serif`；圆角 6–10，控件浅灰底，强调色只给选中和主按钮；侧栏可以半透明（`backdrop-filter`）。
+- Windows 11：`"Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif`；窗口底浅灰（云母）、卡片白底、圆角 4–8，主按钮实色，图标线条风格。

package/skills/ui-design/references/miniprogram.md

@@ -8,6 +8,38 @@
 - **右上角的胶囊**（「···」和关闭圈，87×32，离顶 48、离右 7）是微信画在页面上面的，每个页面都有、盖不住。工作台外框会画它，页面里别画。导航栏右边空出 101px，搜索框、按钮、头像都放到左边或导航栏下面；体检会报「被小程序胶囊挡住」。顶栏是深色时，外框自动画白色胶囊；顶栏是图片或渐变、判断不准时，在 `<head>` 加 `<meta name="dsh-capsule" content="white">`（或 `black`）指定，和微信页面配置里的 `navigationBarTextStyle` 一样。
 - 底部 34px 是这台预览手机的安全区（横条）：设计稿里标签栏、底部操作栏让出 34px（预览里 `env(safe-area-inset-bottom)` 是 0，不能靠它）。做成真小程序时换成 `env(safe-area-inset-bottom)`，没横条的手机是 0。
 
+## 骨架（先抄进 `app.css`，再按品牌改颜色）
+
+顶部 88、标签栏 84 这些数字照这台预览手机来，几屏共用，别每屏各写一套：
+
+```css
+.mp-top{position:sticky;top:0;z-index:10;background:var(--nav-bg,#fff)}            /* 状态栏 + 导航栏，共 88 */
+.mp-status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 32px;font:600 15px/1 -apple-system,"PingFang SC",sans-serif}
+.mp-nav{position:relative;height:44px;display:flex;align-items:center;justify-content:center;padding:0 101px} /* 右边 101 让给胶囊，左边也空 101，标题才在正中 */
+.mp-nav h1{margin:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mp-nav.custom{justify-content:flex-start;padding-left:16px}                      /* 首页自定义导航：品牌 / 搜索靠左，右边照样让 101 */
+.mp-back{position:absolute;left:4px;top:0;width:44px;height:44px;display:grid;place-items:center}
+.mp-tabbar{position:fixed;left:0;right:0;bottom:0;height:84px;padding-bottom:34px;box-sizing:border-box;display:flex;background:#fff;border-top:.5px solid rgba(0,0,0,.12)}
+.mp-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:#6E7277;text-decoration:none}
+.mp-tabbar a.on{color:var(--color-primary)}
+.mp-tabbar svg{width:24px;height:24px}
+.mp-page{padding:0 16px 100px}                                                      /* 有标签栏的页：底部让出 84 + 16 */
+.mp-actionbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:12px;padding:8px 16px 42px;background:#fff;box-shadow:0 -.5px 0 rgba(0,0,0,.12)}
+```
+
+```html
+<header class="mp-top">
+  <div class="mp-status"><span>9:41</span><span>信号 · 电量图标</span></div>
+  <div class="mp-nav"><a class="mp-back" href="list.html">返回图标</a><h1>商品详情</h1></div>
+</header>
+<main class="mp-page">…</main>
+<nav class="mp-tabbar"><a class="on" href="index.html">图标<span>首页</span></a>…</nav>
+```
+
+- **一级页**（标签栏里的那几页）：有标签栏、没有返回；首页可以用 `.mp-nav.custom` 放品牌或搜索。**二级页**：标题居中、左边返回、没有标签栏，底部要操作就用 `.mp-actionbar`。从分享卡片直接打开的二级页，返回换成「回首页」小房子。
+- 默认导航栏只能是**纯色底 + 黑或白的标题**（微信的 `navigationBarBackgroundColor` / `navigationBarTextStyle`），胶囊跟着标题一个颜色；渐变、图片顶栏要用自定义导航（`navigationStyle: custom`），内容和胶囊竖直居中对齐（中线 y 64）。
+- 体检会报：被胶囊挡住、被灵动岛挡住、底栏伸进横条区、标签栏超过 5 项、这屏没有导航栏。
+
 ## 结构和组件（照微信的规矩）
 
 - **标签栏（tabBar）**：2–5 项，图标 + 文字（10–12px），高 50 + 底部安全区（预览手机 34），当前项用主色。只有一级页面有；二级页面没有标签栏，左上角是返回箭头。
@@ -18,6 +50,10 @@
 - **分享、更多**：胶囊里已经有「···」，页面里不用再放「更多」菜单。
 - 列表、表单、点击区（至少 44×44）同 App，见 `app.md`。
 
+## 微信原生风格（用户要「像微信」「原生」「WeUI」时）
+
+底 #EDEDED、卡片和列表白底；字 rgba(0,0,0,.9)，说明 rgba(0,0,0,.55)；主色 #07C160，危险 #FA5151，链接 #576B95。列表行（cell）最少 56 高、左右 16、分隔线 0.5px 从左边 16 起；分组之间空 8。主按钮 17px、高 48、圆角 8、宽 184 居中（底部操作区可以通栏）。对话框：标题 17 粗、正文 15 灰，「取消」灰、「确定」绿在右。
+
 ## 常见的一套
 
 首页（搜索 + 图标宫格 + 推荐列表）→ 分类或列表 → 详情（底部固定操作栏）→ 下单或表单 → 支付结果 → 我的（头像昵称卡片、一排订单入口、设置列表）。几屏共用一套导航栏、标签栏和卡片样式，写进 `app.css`。