山风设计系统
统一抽取自 sms.shanfeng.wang（主）与 appoint.shanfeng.wang（次）， 两站全局样式经比对完全一致（343 行 / 61 个选择器 / 变量逐字相同）。 现在它们被固化成一份可外链引用的资产，新系统直接引用即可，不必再逐站复制粘贴。
设计令牌 Design Tokens
全部以 --sf-* 命名，可直接 var() 引用。
| 侧边栏宽 | --sf-sidebar-width | 230px |
| Logo 区高 | --sf-sidebar-logo-height | 68px |
| 顶栏高 | --sf-header-height | 64px |
| 内容区内边距 | --sf-content-padding | 24px |
| 顶栏左右内边距 | --sf-header-padding | 0 28px |
| 菜单项内边距 | --sf-menu-item-padding | 11px 24px |
| 菜单图标 | --sf-menu-icon-size | 20px |
按钮 Buttons
字号：普通 14px / small 12px / large 15px；圆角 10px；主色为蓝紫渐变。
表单与数据 Form & Data
输入框 14px / 圆角 10px；标签 14px / 500；表头 13px / 600。
栏目切换栏 Tabs
规范来自 sms 内页「系统设置」的栏目切换：文字 14px / 500，未选中 #64748b，选中 #3b82f6，
底部指示条 3px / 圆角 2px，底边框 #e8ecf1。
「阿里云短信」面板内容 —— 与 sms 系统设置页完全一致。
「内容创作」面板内容。
「内容管理」面板内容。
「用户管理」面板内容。
「系统设置」面板内容。
表格 Table
表头 #f8fafc / 13px / 600；单元格 14px；斑马纹 #fafbfc；悬停 #eff6ff。
| 标题 | 类型 | 作者 | 互动 | 状态 | 时间 | 操作 |
|---|---|---|---|---|---|---|
| 长期入睡困难，哪些日常习惯值得先做调整？ | 问题 | 白岑言 | 3 回答 | 已发布 | 2026-11-05 | |
| 每天到底该吃多少蔬菜？ | 文章 | 陆予 | 128 阅读 | 已发布 | 2026-11-04 | |
| 久坐办公的人，一天里怎么安排活动量？ | 问题 | 叶澄安 | 5 回答 | 已发布 | 2026-11-03 |
后台内页骨架 Layout
230px 白侧栏 + 64px 白顶栏 + #f5f6f8 内容底，直接照搬 sms / appoint。
登录页 Login
与 sms.shanfeng.wang 登录页逐条对齐：920×520 圆角卡片，左品牌右表单；登录按钮 15px / 字距 6px；含登录失败警告条。
山风网
内容发布管理后台
高效、稳定的管理平台，提供内容管理、数据统计等一站式解决方案。
欢迎登录
请输入您的账号信息
联系客服 Contact
规范来自 new 后台右上角「客服」弹窗：二维码居中 + 联系方式三行 + 底部说明。
行内标签 #94a3b8 / 值 #111827 加粗 / 行分隔线 #f0f2f5。
工作日 9:00–18:00 在线，其余时间留言即可，看到会尽快回复。
工作日 9:00–18:00 在线。
SVG 图标库 Icons
共 0 个图标，24×24 线性风格，stroke 用 currentColor（放哪就自动变色）。
引用方式 Usage
新系统引入这三行即可获得整套山风视觉规范。
<!-- 1) Element Plus 基础样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.12/dist/index.css" /> <!-- 2) 山风设计系统 --> <link rel="stylesheet" href="https://ui.shanfeng.wang/css/tokens.css" /> <link rel="stylesheet" href="https://ui.shanfeng.wang/css/theme.css" /> <!-- 登录页额外引入 --> <link rel="stylesheet" href="https://ui.shanfeng.wang/css/login.css" /> <!-- 3) 图标库（可选） --> <script src="https://ui.shanfeng.wang/js/icons.js"></script>
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'https://ui.shanfeng.wang/css/tokens.css'
import 'https://ui.shanfeng.wang/css/theme.css'
// 组件里直接用类名即可
// <div class="sf-layout"> … </div>
<!-- 原生 HTML -->
<span data-icon="users"></span>
<!-- JS 渲染 -->
SfIcons.render(el, 'users', { size: 20 })
<!-- Vue 组件（若已挂载全局） -->
<SfIcon name="users" :size="20" />