---
description: 萧康云医官网前端设计与实现规则
globs: xk-of-view/**/*,**/*.html,**/*.css,**/*.scss,**/*.less,**/*.vue,**/*.tsx,**/*.ts,**/*.jsx,**/*.js
alwaysApply: false
---

# 前端规则

- 项目名称为“萧康云医官网”，定位为面向诊所赋能业务的 SaaS 平台。
- 产品端形态包含小程序患者端、医生端、门店老板端、推广员端，以及 PC 端管理或官网相关页面。
- 页面设计要体现 SaaS 平台的专业、清晰、高效，优先服务信息扫描、业务转化和多角色理解。
- 必须注意多端适配，兼容移动端、平板端和桌面端，不允许出现文字溢出、布局重叠、关键按钮不可触达等问题。
- 必须提供暗色模式适配，颜色、阴影、边框、图标、图表和状态提示都要在明暗主题下保持可读。
- 采用模块化、组件化设计，页面由清晰的业务模块和可复用 UI 组件组成。
- 组件应保持职责单一，状态、事件、属性和插槽设计清楚，避免单个组件承担过多页面逻辑。
- 表单、列表、筛选、弹窗、空状态、加载态、错误态、成功态等常见状态要完整设计。
- 视觉风格要克制、现代、可信，适合医疗和诊所经营场景；避免过度营销化、装饰化或单一色系堆叠。