---
name: 药堂主题
description: 朱红、暖金与宣纸白构成的登录场景及应用主题
colors:
primary: "#a51d24"
primary-dark: "hsl(357 64% 73%)"
paper: "hsl(40 50% 99%)"
paper-deep: "hsl(37 33% 95%)"
ink: "hsl(27 16% 17%)"
border: "hsl(33 25% 86%)"
dark-background: "hsl(26 16% 12%)"
dark-card: "hsl(26 15% 14%)"
dark-foreground: "hsl(35 30% 90%)"
frame-gold: "#cda878"
typography:
display:
fontFamily: '"STKaiti", "KaiTi", "FangSong", serif'
fontWeight: 700
body:
fontFamily: "var(--font-family, system-ui, sans-serif)"
rounded:
control: "9px"
components:
login-button:
backgroundColor: "{colors.primary}"
textColor: "#ffffff"
rounded: "{rounded.control}"
Creative North Star: "宣纸上的药堂"
以已确认的朱红、暖金、宣纸白与药堂庭院参考为依据。登录场景用药材与建筑承载气氛,表单保持清晰;应用内部沿用现有组件与布局,通过全局语义色传递同一视觉身份。登录页的堂训、装饰框与庭院构图不推广到业务页面。
朱红承担主要操作与选中态,暖金用于登录场景的细框和装饰;暖白与墨色承担日常阅读。src/preferences.ts 定义默认主色,src/styles/herbal-theme.css 定义明暗中性色;主色色阶由偏好系统生成。
The 用户偏好 Rule. 首次主题升级迁移到默认朱红,此后保留用户选择的主色与明暗模式。亮朱砂暗色主色覆盖只在当前主色等于默认朱红时启用。迁移细节与存储限制见登录主题记录。
正文继承应用字体变量与系统无衬线回退,保持表单和业务数据可读。公司名称、堂训采用本机楷体/仿宋回退,不下载字体;不同操作系统的字形会有差异。登录标题使用正文体系的粗体,避免把装饰字体用于输入内容。
业务界面保留既有布局密度与组件结构。登录桌面采用左侧堂训、右侧表单,宽屏限制表单宽度;小于等于 900px 改为单列表单并隐藏堂训,小于等于 540px 收紧边距、允许品牌区域换行。语言和主题工具保留在页首。短桌面视口降低表单最小高度和内边距。
庭院图片位于登录内容下层;浅色表单用接近不透明的纸白底与柔和暖色阴影提供阅读层。暗色降低图片亮度与饱和度,表单改用深棕底。应用内部依赖现有卡片、浮层语义色,不追加场景装饰。
登录输入框与主按钮使用轻圆角;表单外壳使用更宽的圆角,暖金细线和四角纹样仅属于认证场景。框线与纹样为装饰,不承载交互。
认证布局继续渲染真实路由,保留现有 AuthenticationLogin、表单校验、加载态、验证码与认证 store 调用。输入支持账号/当前密码自动填充;可见焦点环明确定位键盘操作。密码切换为明文后仍保留显隐按钮的右侧空间(44px),避免文字与按钮重叠。暗色工具条采用深色底。标题旁使用无文字几何 SVG 纹样。
The 公司身份 Rule. 公司名称、Logo、登录标题和描述仍读取现有配置。药堂背景与装饰属于主题,不能替代公司 Logo;未配置公司标志时隐藏框架示例 Logo。