用途:让 Salla 应用的店面(面向购物者的店铺页面,Twilight 主题)呈现原生外观与风格。该技能只负责原生样式本身,不自行注入内容——店面片段注入配方在 salla-snippets;嵌入式/仪表盘 UI 属于另一套设计系统,见 salla-embedded-ui。
主要能力与做法:优先用 Twilight 的 <salla-> Web Components 构建可见 UI(例如 salla-button、salla-modal、salla-rating-stars、salla-products-slider),由 Storefront JS SDK 驱动,而不是手写 HTML;这些组件会自动继承主题令牌、RTL 与语言区域。样式应继承 Twilight CSS 变量,如 --color-primary、--color-text、--font-main 以及间距/圆角变量,仅在回退时才使用字面字体、颜色、边框和阴影。图标使用 sicon- 类;Twilight 主题会向每个店面页面注入 Twilight SDK 并加载 Salla Icons 字体,无需自行打包。需匹配商品页的间距与密度,将内容内联插入到相关元素旁。多数店铺为阿拉伯语/RTL,应遵循 dir/lang、镜像布局、文案阿拉伯语优先。
验证要求:代码能运行不等于外观正确。完成前需用 salla_apps action=demo_stores 安装到演示店铺,打开 install_url 与店面 URL,对构建的店面片段截图,并检查是否使用 Twilight 组件与 sicon-* 图标、是否继承主题令牌、间距是否匹配、RTL 是否正确、明暗两种模式是否正常、有无溢出或裁切。
限制:本文未提供具体收费、价格、平台支持范围等事实,暂未提供。相关文档包括主题、Twilight JS SDK、CSS 变量、Salla Icons 与单品页链接(见原始资料 URL)。