fix: 移除遗留fmfuncs目录创建 + 清理init_service无用导入 + 文件管理器SVG图标 + 示例插件MD3改造
- init_service: 删除_load_fmfuncs方法和fmfuncs目录创建(已迁移到sdk/) - init_service: 清理未使用的importlib.util和sys导入 - 文件管理器: 全部emoji替换为MD3 SVG矢量图标(文件夹/文件类型/右键菜单) - 示例插件: dashboard.html改为MD3风格 CSS变量自动适配日夜主题 - 面包屑: 加底色+模糊+左右外边距 - CSS: .btn::after加pointer-events:none - 插件开发指南: 更新2.6节MD3主题同步和完善的CSS变量/组件类参考表 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
qinglong
+55
-24
@@ -3432,41 +3432,72 @@ class MyPlugin(PluginWebMixin):
|
||||
- 提取 `<script>` 标签，通过动态 script 元素执行
|
||||
- 页面 content 区 padding 归零，插件内容边到边铺满
|
||||
|
||||
#### 2.6.3 HTML 编写建议
|
||||
#### 2.6.3 MD3 主题同步与 HTML 编写建议
|
||||
|
||||
插件页面会自动注入到 SenSu 主面板的 `<div class=\"plugin-page-root\">` 容器中。**CSS 中的所有 `body` 选择器会被自动替换为 `.plugin-page-root`**，不会污染主页面。
|
||||
|
||||
**主题同步无需任何代码** — CSS 中使用 `var(--xxx)` 引用 MD3 token，日夜切换自动生效。
|
||||
|
||||
```html
|
||||
<!-- 推荐：使用内联样式 + 容器类，不依赖 body 选择器 -->
|
||||
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>My Plugin</title>
|
||||
<style>
|
||||
/* body 选择器不会生效（body 标签已被剥离） */
|
||||
/* 改用类选择器或直接用容器 div */
|
||||
.plugin-root {
|
||||
background: var(--bg); /* 继承 SenSu 主题背景 */
|
||||
color: var(--text); /* 继承 SenSu 主题文字 */
|
||||
font-family: system-ui, sans-serif;
|
||||
padding: 16px;
|
||||
min-height: 100%;
|
||||
}
|
||||
.plugin-root h2 { color: var(--primary); }
|
||||
</style>
|
||||
<div class="plugin-root">
|
||||
<h2>插件面板标题</h2>
|
||||
<button class="btn btn-sm btn-tonal" onclick="...">操作</button>
|
||||
/* ✅ 正确: 使用 MD3 CSS 变量，自动适配日夜主题 */
|
||||
.plugin-page-root{font-family:system-ui,sans-serif;padding:20px;min-height:100%}
|
||||
h2{color:var(--primary);font-weight:500}
|
||||
/* ✅ 使用 MD3 组件类 */
|
||||
</style></head><body>
|
||||
<h2>插件面板</h2>
|
||||
<!-- ✅ 复用 MD3 卡片样式 -->
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<h3>数据面板</h3>
|
||||
<div id="value">0</div>
|
||||
<button class="btn btn-sm btn-filled" onclick="doAction()">操作</button>
|
||||
</div>
|
||||
<script>
|
||||
// 脚本会被动态 script 元素执行，声明的函数可被 onclick 调用
|
||||
function handleClick() { ... }
|
||||
</script>
|
||||
function doAction(){ /* ... */ }
|
||||
</script></body></html>
|
||||
```
|
||||
|
||||
**常用 MD3 CSS 变量 (自动跟随日夜主题)：**
|
||||
|
||||
| 变量 | 用途 |
|
||||
|------|------|
|
||||
| `--bg` | 页面背景色 |
|
||||
| `--bg-card` | 卡片/容器背景 |
|
||||
| `--text` | 主文字色 |
|
||||
| `--text-dim` | 次要文字色 |
|
||||
| `--primary` | 主题色 |
|
||||
| `--primary-container` | 主题色容器背景 |
|
||||
| `--outline` | 边框色 |
|
||||
| `--error` | 错误/危险色 |
|
||||
| `--shape-xs` / `--shape-sm` / `--shape-md` | 圆角 (8/12/16px) |
|
||||
| `--md-sys-elevation-1` ~ `--md-sys-elevation-5` | 阴影 |
|
||||
|
||||
**常用 MD3 组件类：**
|
||||
|
||||
| 类 | 用途 |
|
||||
|------|------|
|
||||
| `.card` | MD3 卡片容器 |
|
||||
| `.card.outlined` | 带边框的卡片 |
|
||||
| `.btn` + `.btn-filled` | 实心按钮 |
|
||||
| `.btn` + `.btn-tonal` | 半透明按钮 |
|
||||
| `.btn` + `.btn-outlined` | 轮廓按钮 |
|
||||
| `.btn-sm` / `.btn-lg` | 按钮尺寸 (需配合 .btn) |
|
||||
| `.input` | MD3 输入框 |
|
||||
| `.input-group` | 输入框容器 (含 label) |
|
||||
| `.badge` / `.badge-run` / `.badge-stop` | 状态徽章 |
|
||||
| `.chip` / `.chip.active` | 标签/筛选 |
|
||||
|
||||
#### 2.6.4 注意事项
|
||||
|
||||
| 事项 | 说明 |
|
||||
|------|------|
|
||||
| `body` 选择器 | CSS 中 `body { ... }` 不会生效，改用容器类 |
|
||||
| 硬编码背景色 | 避免 `background: #000`，用 `var(--bg)` 自适应主题 |
|
||||
| `onclick` 函数 | 函数需在 `<script>` 中声明，浏览器 innerHTML 不执行 script |
|
||||
| `<html>/<head>` | 可省略，直接写 body 内容 |
|
||||
| 文件管理器调用 | 可通过 postMessage API 唤出文件选择器 (见第八章) |
|
||||
| `body` 选择器 | v0.6.0 起自动替换为 `.plugin-page-root`，可放心使用 |
|
||||
| 硬编码颜色 | ❌ `background:#000` / `color:#fff` → ✅ `var(--bg)` / `var(--text)` |
|
||||
| 主题同步 | 无需额外代码，CSS 变量自动跟随 `data-theme` 属性切换 |
|
||||
| `onclick` 函数 | 函数需在 `<script>` 中声明，框架通过动态 script 元素执行 |
|
||||
| `<html>/<head>` | 可完整书写，框架自动剥离包装标签 |
|
||||
| 文件管理器调用 | 通过 `window.pickPath('dir', callback)` 唤出选择器 |
|
||||
|
||||
## 三、插件生命周期管理
|
||||
|
||||
|
||||
Reference in New Issue
Block a user