UI 数字体系 · 总览与接入
胶膳师的数字界面包括：招商 H5、加盟测算器、小程序门店页与到店券、门店经营看板，以及今后的线上商城页、活动页。这些界面全部用同一套设计令牌和组件，保证与门店、物料是同一个品牌。
体系结构
| 层 | 包名 | 给谁用 | 内容 |
|---|---|---|---|
| 设计令牌 | @jiaoshanshi/tokens | 所有端 | 颜色、字号、间距、圆角、投影、动效；生成 CSS / SCSS / Vant / Element Plus / WXSS / Tailwind |
| 组件库 | @jiaoshanshi/ui | H5、网页、后台（Vue 3） | Vant 与 Element Plus 换肤 + 14 个品牌专属组件 + 适老化检查工具 |
| 小程序样式包 | @jiaoshanshi/miniprogram-style | 微信小程序 | WXSS 令牌、基础样式类、原生组件 |
| 页面样板 | @jiaoshanshi/templates | 开发 | 四类关键页面的完整实现，复制即用 |
技术栈与主系统保持一致：Vue 3 + Vite，H5 用 Vant 4，后台用 Element Plus，小程序为原生。
接入步骤（Vue 3 H5）
bash
# 依赖走国内镜像
npm config set registry https://registry.npmmirror.com
npm i vant @jiaoshanshi/tokens @jiaoshanshi/uijs
// main.js
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import JiaoshanshiUI from '@jiaoshanshi/ui'
import '@jiaoshanshi/ui/style.css' // 令牌 + 字体
import '@jiaoshanshi/ui/vant-theme.css' // Vant 品牌换肤
import App from './App.vue'
createApp(App).use(Vant).use(JiaoshanshiUI).mount('#app')vue
<!-- 页面里直接用 -->
<JssArchTitle title="开一家胶膳师" subtitle="阿胶金汤 · 一人一锅" />
<JssButton size="lg" block>预约考察</JssButton>接入步骤（Element Plus 后台）
js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import JiaoshanshiUI from '@jiaoshanshi/ui'
import '@jiaoshanshi/ui/style.css'
import '@jiaoshanshi/ui/element-theme.css' // 放在 Element Plus 样式之后接入步骤（微信小程序）
- 从下载中心下载「微信小程序样式包」，把解压出的文件夹改名为
jss，放到小程序根目录； app.wxss顶部加@import "jss/styles/jss.wxss";，页面里即可使用jss-btn、jss-price、jss-tag、jss-notice、jss-card等样式类；- 需要原生组件时在页面
json里注册：
json
{
"usingComponents": {
"jss-endorse": "/jss/components/endorse/index",
"jss-price": "/jss/components/price/index",
"jss-arch-title": "/jss/components/arch-title/index"
}
}html
<button class="jss-btn jss-btn--primary jss-btn--lg" hover-class="jss-btn--hover">预约考察</button>
<jss-price value="{{dish.price}}" />
<jss-endorse seal="{{sealUrl}}" compact />包还没有发布到 npm 时
在私有 npm 发布之前，可以直接用仓库的 git 地址安装，或者从下载中心取打包文件。
和主系统的关系
会员、到店券核销、线上商城、直播等能力运行在总部主系统上。页面样板里凡是依赖主系统接口的地方都已标注「依赖主系统开发」，接口就绪前用演示数据占位，不在界面上承诺尚不存在的功能。门店点餐收银不自建，接第三方餐饮收银。