Life OS 文档

文档 / 设计规范

打开 Markdown

设计规范

应用默认沿用主站的纸张贴纸风：浅色背景、白色卡片、淡紫色控件、圆角和轻柔阴影。platform.ui 提供基础组件，复杂应用可以使用原生 DOM 和包内 CSS 自定义布局、编辑器与交互。这些组件是起点，不是固定的页面模板。运行时默认表单样式使用低优先级选择器，应用的类名样式可以覆盖它们。

颜色与字体

CSS 变量用途
--ink、--muted正文与次要说明。
--paper、--surface纸张背景与卡片表面。
--line分隔线。
--accent链接与强调文字。
--mark、--mark-on标记和选中状态。
--btn、--btn-ink主按钮背景和文字。
--error错误文字。
--shadow轻柔阴影。
--font、--serif系统字体与数字衬线字体。

金额、日期与统计数字使用 lo-num，保持数字宽度一致。不要引入外部字体或独立深色主题。

布局类

类名用途
lo-app页面容器。
lo-stack纵向排列。
lo-app-row横向分栏。
lo-pane白色面板。
lo-pane-side、lo-pane-main侧栏与主栏。
lo-chip、lo-chip on标签与选中状态。
lo-icon-btn圆形图标按钮。

lo-app 默认是纵向布局；横向分栏需要嵌套 lo-app-row，或使用自定义 CSS Grid 容器。不要只设置 display: flex 就假定容器会横向排列。

platform.ui 自动使用对应的 lo-* 类。自定义布局也优先组合这些类。所有 .css 文件自动注入，详见多文件应用包。

响应式与交互

styles/app.css
@media (max-width: 600px) {
  .lo-app-row { flex-direction: column; }
  .lo-pane-side { width: 100%; }
}

窄屏避免固定页面宽度。点击区域应至少 44px，主按钮默认为 50px 高；输入区域文字保持 16px，减少手机自动缩放。

为输入框提供标签，为图片提供替代文字，按钮使用清楚的动作名称。原生 DOM 组件允许通过 setAttribute 设置必要的 ARIA 属性。

遵循 prefers-reduced-motion，不要让页面切换闪白。当前部分组件仍需要应用补充键盘交互与焦点管理，特别是自定义弹层和多页面跳转。