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>
2026-06-12 19:00:19 +08:00
parent 9b997d8bda
commit 9de094ea54
16 changed files with 283 additions and 308 deletions
@@ -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)` 唤出选择器 |

 ## 三、插件生命周期管理