SillyTavern 前端开发

SillyTavern 本身不提供定制化的前端界面渲染能力。本 skill 的前端开发借助第三方扩展酒馆助手（Tavern-Helper，旧名 JS-Slash-Runner）：它会渲染消息楼层里的 HTML 代码块，并向前端预注入 Vue、jQuery、lodash、zod 等全局变量。状态栏等界面通过占位符（如 <StatusPlaceHolderImpl/>）让正则替换出 HTML 代码块，再被酒馆助手渲染。

设计原则

• ICON 优先：前端版面向复杂界面，ICON 在不同主题/尺寸下表现一致，且支持 CSS 调色，与状态栏视觉风格统一
• 低耦合：每个组件只负责一件事，变量读取集中在 store，业务逻辑抽离为独立模块，确保组件可复用、可单独测试

常用资源

• 图标（ICON）：FontAwesome 免费图标，前端界面直接用 fa-* 类
• 字体：ZeoSeven Fonts（如 Sarasa 更纱黑体），复制其 CSS 引入链接即可
• CDN（jsdelivr）：必须用国内可达的 testingcf.jsdelivr.net 镜像，而不是 cdn.jsdelivr.net
• 第三方库：用 pnpm add 添加，模板打包时会自动将其转为 jsdelivr 链接，避免在多个界面中重复打包
• 可读性：用 Adobe 色彩对比度检查器确保背景色与文字色对比足够强

前端界面的正则：只定位、不解析