墨序设计系统

排版角色

font-ui 与 font-display 承担界面，font-editorial 承担作品与引文，font-data 承担参数和短标签。字体使用完整系统回退栈。

墨线与形状

墨线表示当前位置、焦点和内容关系。用留白组织普通内容，独立对象才使用容器。

border / brand-line

常规分隔与当前内容关系。

radius-control / radius-panel

控件与内容容器分别使用共享圆角。

ring / motion-standard

明确的键盘焦点与短暂操作反馈。

字号与阅读节奏

中文正文使用自然换行与完整回退字体。长篇阅读单行约 28–34 个汉字，数字对比列用 tabular-nums。

间距与响应式

间距以 4px 为基础单位。图标与文字常用 gap-2，字段和列表常用 gap-3 / gap-4，区块使用 gap-6 / gap-8。

小于 768px

按任务采用移动结构，正文单列；触控目标至少 44px，窄屏输入正文至少 16px。

768–1023px

作为过渡区，由内容决定保留单列还是展开布局。

1024px 起

逐步展开侧栏和多列；页面继续消费 layout-page-max 与 layout-gutter。

交互环境

以媒体查询响应粗指针、减少动效与高对比偏好；布局不依赖 User-Agent。

按子路径导入组件

先查阅已有组件，再按实际用途组合。共享包直接导出 Vue 与 TypeScript 源码，由应用构建。

import { Button } from '@chuangyi/ui/button';
import { Field, FieldLabel } from '@chuangyi/ui/field';
import { Input } from '@chuangyi/ui/input';

接入样式与字体

styles.css 提供主题、reset 与共享组件的 utility。字体按应用需要单独加载，避免默认下载完整中文字库。

@import 'tailwindcss';
@import '@chuangyi/ui/styles.css';

/* 需要思源字体的应用单独接入。 */
@import '@chuangyi/ui/fonts.css';

字体是可选入口，不做全局 preload。当前 Landing 与 Work 接入，Hub 使用系统回退字体；采用前评估字库体积与布局位移。

完整字段组合

email 与 error 由业务层持有；错误保留用户输入，并关联到实际控件。导入 FieldError 与 FieldDescription 后组合如下。

<Field :data-invalid="Boolean(error)">
  <FieldLabel for="contact-email">接收邮箱</FieldLabel>
  <Input
    id="contact-email"
    v-model="email"
    name="contact-email"
    type="email"
    autocomplete="email"
    :aria-invalid="Boolean(error)"
    :aria-describedby="error ? 'email-error' : 'email-help'"
  />
  <FieldError v-if="error" id="email-error">{{ error }}</FieldError>
  <FieldDescription v-else id="email-help">
    用于接收作品更新。
  </FieldDescription>
</Field>

复用多个字段时，每组 id 必须唯一。提交失败聚焦第一个错误；请求进行时防止重复提交，失败后允许重试。

密度由容器决定

同一容器内的控件共享密度，只有确需稳定尺寸的工具栏或表单才显式指定 size。

<div data-density="compact">
  <Button variant="outline">筛选作品</Button>
  <Button size="lg">固定尺寸的操作</Button>
</div>

组合的责任边界

• 共享组件管理结构、键盘、焦点、浮层与主题。
• 应用管理数据、校验、权限、持久化、请求与失败恢复。
• 跨页签保留的字段值放在父层；列表项与消息使用稳定标识。
• 页壳统一挂载通知和主题入口，关键正文保持可预渲染。