intools-cli 1.0.7 → 1.0.9

package/PLUGIN_API.md

@@ -141,56 +141,507 @@
 "icon": { "type": "svg", "value": "<svg>...</svg>" }
 ```
 
-## Preload 配置（自定义 Node.js 能力）
+## Preload 预加载脚本 ⭐ 核心概念
 
-配置自定义 preload 脚本，可在渲染进程中直接使用 Node.js 能力。
+> [!IMPORTANT]
+> **Preload 是 InTools 插件访问 Node.js 能力的核心机制。** 对于需要在渲染进程（UI）中使用 Node.js API、第三方 npm 模块或 Electron 渲染进程 API 的插件来说，Preload 是**必不可少**的。
+
+### 什么是 Preload？
+
+Preload 脚本是一个特殊的 JavaScript 文件，在**渲染进程加载之前**执行，具有以下特点：
+
+| 特性 | 说明 |
+|------|------|
+| 🔧 **Node.js 完整支持** | 可以使用 `require()` 导入任何 Node.js 原生模块和 npm 包 |
+| 🖥️ **Electron API 访问** | 可以调用 Electron 渲染进程 API |
+| 🌉 **桥接能力** | 通过 `window.xxx` 将原生能力暴露给前端 React/Vue 组件 |
+| ⚡ **同步执行** | 在页面 DOM 加载前执行，确保 API 可用 |
+| 📄 **使用 .cjs 扩展名** | 由于项目使用 `type: module`，preload 必须命名为 `*.cjs` |
+
+### 适用场景
+
+以下场景**需要使用** Preload：
+
+- 📂 使用 `pdf-lib`、`sharp`、`ffmpeg` 等需要 Node.js 环境的 npm 包
+- 🔐 调用 Node.js 加密模块 (`crypto`)、子进程 (`child_process`)
+- 📁 需要比 `window.intools.filesystem` 更底层的文件操作
+- 🔗 与本地数据库交互 (SQLite、LevelDB 等)
+- 🎯 任何需要原生能力但又想在前端统一调用的场景
+
+---
 
 ### 配置方式
 
+在 `manifest.json` 中添加 `preload` 字段，指定预加载脚本路径：
+
 ```json
 {
-  "preload": "preload.js"
+  "name": "my-plugin",
+  "version": "1.0.0",
+  "displayName": "我的插件",
+  "main": "dist/main.js",
+  "ui": "ui/index.html",
+  "preload": "preload.cjs",  // 👈 使用 .cjs 扩展名，放在根目录
+  "features": [...]
 }
 ```
 
-### preload.js 示例
+> [!WARNING]
+> **必须使用 `.cjs` 扩展名！** 由于模板使用 `"type": "module"`，所有 `.js` 文件会被当作 ES Module 处理。使用 `.cjs` 扩展名可确保文件始终被视为 CommonJS。
+
+> [!IMPORTANT]
+> **preload 不需要打包！** 直接使用源码文件，放在项目根目录。这样 `node_modules` 中的依赖可以正常解析。
+
+---
+
+### preload.cjs 编写规范
 
 ```javascript
-// preload.js - 遵循 CommonJS 规范
+// preload.cjs - 必须使用 CommonJS 规范和 .cjs 扩展名
 const fs = require('fs')
 const os = require('os')
 const path = require('path')
+const { PDFDocument } = require('pdf-lib')  // 可使用 npm 包
+
+/**
+ * 通过 window 对象暴露 API 给前端
+ * 命名建议：window.{插件名}Api 或 window.{功能名}Api
+ */
+window.myPluginApi = {
+  // 同步方法
+  getHomeDir: () => os.homedir(),
+  getPlatform: () => process.platform,
+  
+  // 异步方法
+  readFile: async (filePath) => {
+    return fs.promises.readFile(filePath, 'utf-8')
+  },
+  
+  // 复杂功能封装
+  mergePDFs: async (pdfPaths, outputPath) => {
+    const mergedPdf = await PDFDocument.create()
+    for (const pdfPath of pdfPaths) {
+      const pdfBytes = fs.readFileSync(pdfPath)
+      const pdf = await PDFDocument.load(pdfBytes)
+      const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
+      pages.forEach(page => mergedPdf.addPage(page))
+    }
+    const bytes = await mergedPdf.save()
+    fs.writeFileSync(outputPath, bytes)
+    return outputPath
+  }
+}
+
+console.log('[Preload] API 已挂载到 window.myPluginApi')
+```
+
+---
+
+### 前端调用示例
+
+```tsx
+// 在 React 组件中调用
+import { useEffect, useState } from 'react'
+
+// 类型声明（推荐单独放在 types.d.ts）
+declare global {
+  interface Window {
+    myPluginApi?: {
+      getHomeDir: () => string
+      getPlatform: () => string
+      readFile: (path: string) => Promise<string>
+      mergePDFs: (paths: string[], output: string) => Promise<string>
+    }
+  }
+}
+
+export function MyComponent() {
+  const [homeDir, setHomeDir] = useState('')
+  
+  useEffect(() => {
+    // 使用可选链确保安全访问
+    if (window.myPluginApi) {
+      setHomeDir(window.myPluginApi.getHomeDir())
+    }
+  }, [])
+  
+  const handleMerge = async () => {
+    const result = await window.myPluginApi?.mergePDFs(
+      ['/path/to/1.pdf', '/path/to/2.pdf'],
+      '/path/to/merged.pdf'
+    )
+    console.log('合并完成:', result)
+  }
+  
+  // 核心 API 仍然可用
+  const handleCopy = async () => {
+    const text = await window.intools.clipboard.readText()
+    console.log('剪贴板内容:', text)
+  }
+  
+  return <div>Home: {homeDir}</div>
+}
+```
+
+---
+
+### 模块引入方法
+
+Preload 脚本支持多种模块引入方式：
+
+#### 1. 引入 Node.js 原生模块
+
+```javascript
+// preload.cjs
+const fs = require('fs')           // 文件系统
+const os = require('os')           // 操作系统信息
+const path = require('path')       // 路径操作
+const crypto = require('crypto')   // 加密
+const { spawn } = require('child_process')  // 子进程
+
+window.nodeApi = {
+  homeDir: os.homedir(),
+  platform: process.platform,
+  cpus: os.cpus().length,
+  hash: (text) => crypto.createHash('md5').update(text).digest('hex')
+}
+```
+
+#### 2. 引入自编写模块
+
+```javascript
+// preload.cjs
+// 相对于 preload.js 文件的路径
+const utils = require('./lib/utils')           // 同级 lib 目录
+const helpers = require('./helpers/format')    // 同级 helpers 目录
+const shared = require('../shared/constants')  // 上级目录
 
-// 通过 window 暴露给前端
 window.myApi = {
-  getHomeDir: () => os.homedir(),
-  readFile: (filePath) => fs.readFileSync(filePath, 'utf-8'),
-  platform: process.platform
+  format: utils.formatData,
+  constants: shared.APP_NAME
 }
 ```
 
-### 前端调用
+> [!NOTE]
+> 自编写模块也必须使用 CommonJS 格式（`module.exports`），路径相对于 `preload.cjs` 文件位置。
 
-```typescript
-// 在 UI 组件中使用
-const homeDir = window.myApi?.getHomeDir()
-const content = window.myApi?.readFile('/path/to/file.txt')
+#### 3. 引入第三方模块
+
+**方式 A：通过 npm 安装**
+
+```bash
+# 在插件目录安装依赖
+cd my-plugin
+npm install pdf-lib lodash dayjs
+```
+
+```javascript
+// preload.cjs
+const { PDFDocument } = require('pdf-lib')
+const _ = require('lodash')
+const dayjs = require('dayjs')
+
+window.pdfApi = {
+  mergePDFs: async (paths) => { /* ... */ },
+  formatDate: (date) => dayjs(date).format('YYYY-MM-DD')
+}
+```
+
+**方式 B：通过源码引入**
+
+将第三方库源码放入插件目录：
+
+```
+my-plugin/
+├── preload.cjs
+├── vendor/
+│   ├── lodash.min.js
+│   └── crypto-js.js
+```
+
+```javascript
+// preload.cjs
+const _ = require('./vendor/lodash.min.js')
+const CryptoJS = require('./vendor/crypto-js.js')
+```
+
+#### 4. 引入 Electron 渲染进程 API
 
-// 核心 API 仍然可用
-const text = await window.intools.clipboard.readText()
+```javascript
+// preload.cjs
+const { 
+  ipcRenderer,      // 进程通信
+  clipboard,        // 剪贴板（直接访问，无需 IPC）
+  shell,            // 打开外部链接/文件
+  nativeImage,      // 图片处理
+  contextBridge     // 上下文桥接（自定义 preload 模式下不需要）
+} = require('electron')
+
+window.electronApi = {
+  // 剪贴板操作
+  readClipboard: () => clipboard.readText(),
+  writeClipboard: (text) => clipboard.writeText(text),
+  readImage: () => clipboard.readImage().toDataURL(),
+  
+  // 打开外部资源
+  openExternal: (url) => shell.openExternal(url),
+  showInFolder: (path) => shell.showItemInFolder(path),
+  
+  // 自定义 IPC 通信（与主进程交互）
+  send: (channel, data) => ipcRenderer.send(channel, data),
+  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
+  on: (channel, callback) => {
+    ipcRenderer.on(channel, (event, ...args) => callback(...args))
+  }
+}
 ```
 
+> [!TIP]
+> 虽然可以直接使用 Electron API，但建议优先使用 `window.intools` 封装的 API，它们提供了更好的跨平台兼容性和错误处理。
+
+---
+
+### 与 Main 后端的区别
+
+| 对比项 | Preload 脚本 | Main 后端 (main.js) |
+|--------|--------------|---------------------|
+| 执行环境 | 渲染进程（带 Node.js 权限） | 独立 Worker 进程 |
+| 调用方式 | `window.xxxApi.method()` | `window.intools.host.invoke()` |
+| 适合场景 | 同步操作、UI 紧密相关的原生功能 | 后台任务、长时间运行的操作 |
+| 进程通信 | 无需 IPC，直接调用 | 需要 IPC，异步调用 |
+| 生命周期 | 随 UI 窗口创建/销毁 | 独立管理，可持久化 |
+
+> [!TIP]
+> **选择建议**：如果功能与 UI 紧密相关且需要快速响应，使用 **Preload**；如果是后台任务或需要在无 UI 时运行，使用 **Main 后端**。
+
+---
+
 ### 注意事项
 
 | 项目 | 说明 |
 |------|------|
-| 文件格式 | CommonJS 格式，使用 `require()` 导入模块 |
-| 代码规范 | 必须是清晰可读的源码，**不能压缩/混淆** |
-| 可用模块 | Node.js 原生模块 + 第三方 npm 模块 |
-| API 暴露 | 通过 `window.xxx` 暴露自定义 API |
-| 核心 API | `window.intools` 核心 API 仍然可用 |
-| 安全性 | 有完整 Node.js 权限，需注意安全风险 |
-| 打包 | 运行 `intools pack` 会自动包含 preload 文件 |
+| 📄 文件扩展名 | **必须使用 `.cjs`** 扩展名，放在项目根目录 |
+| 📝 文件格式 | **必须是 CommonJS** 格式，使用 `require()` 导入模块 |
+| 📦 不需要打包 | 直接使用源码文件，不要用 esbuild/webpack 打包 |
+| 🔍 代码规范 | 必须是清晰可读的源码，**禁止压缩/混淆**（安全审查需要） |
+| 📦 可用模块 | Node.js 原生模块 + 已安装的 npm 包 |
+| 🌐 API 暴露 | 通过 `window.xxx` 暴露，建议使用 `window.{插件名}Api` 命名 |
+| 🔧 核心 API | `window.intools` 核心 API 在 Preload 环境中**仍然可用** |
+| ⚠️ 安全性 | 拥有完整 Node.js 权限，**请谨慎处理用户输入** |
+| 📦 打包 | `intools pack` 会自动包含 preload 及其依赖 |
+
+> [!CAUTION]
+> Preload 脚本拥有完整的 Node.js 权限，可以访问文件系统、网络等敏感资源。请确保代码安全，避免执行不可信的用户输入。
+
+---
+
+### Preload vs 前端代码：适用场景区分 ⭐
+
+> [!IMPORTANT]
+> **Preload 并非万能！** 并非所有 Node.js 相关功能都应放在 Preload 中。以下是基于 pdf-tools 插件开发实践总结的经验。
+
+#### 核心原则
+
+| 放在 `preload.cjs` | 放在前端 React/Vue 项目 |
+|-------------------|------------------------|
+| 纯 Node.js 环境操作 | 需要 DOM/浏览器 API 的操作 |
+| 无需渲染的数据处理 | 需要 `document`、`canvas` 等 |
+| 第三方纯 JS 库 | 需要浏览器环境的第三方库 |
+
+#### ✅ 适合放在 Preload 的功能
+
+```javascript
+// preload.cjs
+const fs = require('fs');
+const { PDFDocument } = require('pdf-lib');  // 纯 JS 库，不依赖 DOM
+
+window.pdfApi = {
+  // ✅ 文件 I/O - Node.js 原生能力
+  readFile: async (path) => fs.promises.readFile(path),
+  saveFile: async (path, data) => fs.promises.writeFile(path, data),
+  
+  // ✅ PDF 字节操作 - pdf-lib 是纯 JS 库，不需要渲染
+  getPDFInfo: async (pdfPath) => {
+    const bytes = await fs.promises.readFile(pdfPath);
+    const pdf = await PDFDocument.load(bytes);
+    return { pageCount: pdf.getPageCount() };
+  },
+  
+  // ✅ 合并/拆分/水印 - 都是字节级操作，不涉及可视化
+  mergePDFs: async (files, output) => { /* ... */ },
+  splitPDF: async (file, outputDir) => { /* ... */ },
+  addWatermark: async (file, config) => { /* ... */ },
+};
+```
+
+**适用场景**：
+- 📂 文件读写 (`fs`)
+- 🔧 PDF 结构操作（合并、拆分、提取元数据）
+- 📦 纯 JS 第三方库（`pdf-lib`、`docx`、`xlsx`）
+- 🔐 加密、压缩等纯数据处理
+
+#### ❌ 不适合放在 Preload 的功能
+
+以下功能**必须放在前端项目**（如 React 组件或 Service 类）：
+
+```typescript
+// src/ui/services/PDFService.ts
+import * as pdfjsLib from 'pdfjs-dist';
+
+class PDFService {
+  // ❌ 需要 canvas 渲染 - 必须在浏览器环境
+  async convertPDFToImages(pdfPath: string) {
+    const pdf = await pdfjsLib.getDocument(data).promise;
+    
+    for (let i = 1; i <= pdf.numPages; i++) {
+      const page = await pdf.getPage(i);
+      
+      // 这些 API 只在浏览器中存在！
+      const canvas = document.createElement('canvas');  // ❌ 需要 DOM
+      const context = canvas.getContext('2d');          // ❌ 需要 Canvas API
+      
+      await page.render({ canvasContext: context }).promise;
+      
+      const blob = await new Promise(resolve => 
+        canvas.toBlob(resolve, 'image/png')  // ❌ 需要 Blob API
+      );
+    }
+  }
+}
+```
+
+**不适合的场景**：
+- 🖼️ PDF 页面渲染为图片（需要 `canvas`）
+- 📄 转换为 Word/PPT 时需要渲染图片（扫描件 PDF）
+- 🎨 任何涉及 `document`、`canvas`、`Image` 的操作
+
+#### 错误示例与报错
+
+如果在 Preload 中使用浏览器 API：
+
+```javascript
+// preload.cjs - ❌ 错误做法！
+window.pdfApi = {
+  renderToImage: async () => {
+    const canvas = document.createElement('canvas');  
+    // 💥 报错: ReferenceError: document is not defined
+  }
+};
+```
+
+#### 正确的架构模式
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     前端 React 项目                          │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │  PDFService.ts                                       │   │
+│  │  - convertPDFToImages() ← 使用 pdfjs-dist + canvas   │   │
+│  │  - convertToWord()      ← 需要渲染扫描件              │   │
+│  │  - compressPDF()        ← 需要渲染后压缩              │   │
+│  └──────────────────────────┬──────────────────────────┘   │
+│                             │ 调用                          │
+│                             ▼                               │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │  window.pdfApi (来自 preload.cjs)                    │   │
+│  │  - readFile() / saveFile()  ← 文件 I/O               │   │
+│  │  - getPDFInfo()             ← 获取元数据              │   │
+│  │  - mergePDFs()              ← 字节操作                │   │
+│  │  - splitPDF()               ← 字节操作                │   │
+│  └─────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              │ require()
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                     preload.cjs                              │
+│  - fs, path (Node.js 原生)                                   │
+│  - pdf-lib, docx, xlsx (纯 JS 第三方库)                       │
+└─────────────────────────────────────────────────────────────┘
+```
+
+> [!TIP]
+> **简单判断方法**：如果你的代码中出现了 `document`、`canvas`、`Image`、`Blob` 等关键字，那它就应该放在前端 React 项目中，而不是 Preload。
+
+---
+
+### 开发流程
+
+使用 preload 的插件开发流程与普通插件略有不同：
+
+#### 项目结构
+
+```
+my-plugin/
+├── manifest.json          # 配置 preload 字段
+├── package.json           # 依赖列表（含 type: module）
+├── preload.cjs            # 👈 Preload 脚本（根目录，不打包）
+├── lib/                   # 可选：自编写模块
+│   └── utils.cjs
+├── src/
+│   ├── main.ts            # 后端入口
+│   └── ui/                # React UI
+├── dist/                  # 构建输出（main.js）
+├── ui/                    # UI 构建输出
+└── node_modules/          # npm 依赖
+```
+
+#### CLI 命令说明
+
+| 命令 | Preload 处理方式 |
+|------|-----------------|
+| `intools create` | 创建项目模板，手动添加 `preload.cjs` |
+| `intools dev` | 无需处理，preload 使用源码直接运行 |
+| `intools build` | 无需处理，preload **不需要打包** |
+| `intools pack` | **自动打包** preload 文件 + node_modules 生产依赖 |
+
+#### 开发步骤
+
+```bash
+# 1. 创建插件
+cd plugins
+npx intools create my-plugin --template react
+
+# 2. 手动创建 preload.cjs
+touch preload.cjs
+
+# 3. 在 manifest.json 中配置
+# "preload": "preload.cjs"
+
+# 4. 安装第三方依赖（如需要）
+npm install pdf-lib lodash
+
+# 5. 编写 preload.cjs（使用 require）
+
+# 6. 开发调试
+npm run dev
+
+# 7. 构建
+npm run build
+
+# 8. 打包发布
+npm run pack
+```
+
+#### 打包后的结构
+
+`intools pack` 会生成包含以下内容的 `.inplugin` 文件：
+
+```
+my-plugin-1.0.0.inplugin
+├── manifest.json
+├── main.js                # 后端（打包后）
+├── preload.cjs            # Preload 源码
+├── ui/                    # UI 构建产物
+├── node_modules/          # 👈 自动包含生产依赖
+│   ├── pdf-lib/
+│   └── (依赖的依赖...)
+├── icon.png
+└── README.md
+```
+
+> [!NOTE]
+> 只有 `package.json` 中 `dependencies`（生产依赖）会被打包。`devDependencies` 不会包含在内。
 
 ---
 

package/dist/commands/create/templates/react.js

@@ -199,25 +199,56 @@ function buildAppTsx(name) {
     return `import { useEffect, useState } from 'react'
 import { useIntools } from './hooks/useIntools'
 
+// 附件类型定义
+interface Attachment {
+  id: string
+  name: string
+  size: number
+  kind: 'file' | 'image'
+  mime?: string
+  ext?: string
+  path?: string
+  dataUrl?: string
+}
+
 interface PluginInitData {
   pluginName: string
   featureCode: string
   input: string
   mode?: string
   route?: string
+  attachments?: Attachment[]
 }
 
 export default function App() {
   const [input, setInput] = useState('')
   const [output, setOutput] = useState('')
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+  const [attachments, setAttachments] = useState<Attachment[]>([])
   const { clipboard, notification } = useIntools('${name}')
 
   useEffect(() => {
+    // 获取初始主题（从 URL 参数）
+    const params = new URLSearchParams(window.location.search)
+    const initialTheme = (params.get('theme') as 'light' | 'dark') || 'light'
+    setTheme(initialTheme)
+    document.documentElement.classList.toggle('dark', initialTheme === 'dark')
+
+    // 监听主题变化
+    window.intools?.onThemeChange?.((newTheme: 'light' | 'dark') => {
+      setTheme(newTheme)
+      document.documentElement.classList.toggle('dark', newTheme === 'dark')
+    })
+
     // 接收插件初始化数据
     window.intools?.onPluginInit?.((data: PluginInitData) => {
       if (data.input) {
         setInput(data.input)
       }
+      // 接收附件数据
+      if (data.attachments) {
+        setAttachments(data.attachments)
+      }
     })
   }, [])
 
@@ -231,10 +262,44 @@ export default function App() {
     notification.show('已复制到剪贴板')
   }
 
+  // 格式化文件大小
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return \`\${bytes} B\`
+    if (bytes < 1024 * 1024) return \`\${(bytes / 1024).toFixed(1)} KB\`
+    return \`\${(bytes / 1024 / 1024).toFixed(1)} MB\`
+  }
+
   return (
     <div className="app">
       <div className="titlebar">${name}</div>
       <div className="container">
+        {/* 附件展示区域 */}
+        {attachments.length > 0 && (
+          <div className="field">
+            <label>附件 ({attachments.length})</label>
+            <div className="attachments-list">
+              {attachments.map((item, index) => (
+                <div key={item.id || index} className="attachment-item">
+                  <span className="attachment-icon">
+                    {item.kind === 'image' ? '🖼️' : '📄'}
+                  </span>
+                  <div className="attachment-info">
+                    <div className="attachment-name">{item.name}</div>
+                    <div className="attachment-meta">{formatSize(item.size)}</div>
+                  </div>
+                  {item.kind === 'image' && (item.dataUrl || item.path) && (
+                    <img
+                      src={item.dataUrl || \`file://\${item.path}\`}
+                      alt={item.name}
+                      className="attachment-preview"
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
         <div className="field">
           <label>输入</label>
           <textarea
@@ -263,7 +328,33 @@ export default function App() {
 `;
 }
 function buildStylesCss() {
-    return `* {
+    return `/* CSS 变量 - 亮色主题 */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #ebebeb;
+  --text-primary: #1e1e1e;
+  --text-secondary: #666666;
+  --text-tertiary: #999999;
+  --border-color: #e0e0e0;
+  --accent-color: #0078d4;
+  --accent-hover: #1084d8;
+}
+
+/* CSS 变量 - 暗色主题 */
+:root.dark {
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #3d3d3d;
+  --text-primary: #e0e0e0;
+  --text-secondary: #999999;
+  --text-tertiary: #666666;
+  --border-color: #3d3d3d;
+  --accent-color: #0078d4;
+  --accent-hover: #1084d8;
+}
+
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -271,9 +362,10 @@ function buildStylesCss() {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #1e1e1e;
-  color: #e0e0e0;
+  background: var(--bg-primary);
+  color: var(--text-primary);
   min-height: 100vh;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .app {
@@ -284,12 +376,12 @@ body {
 
 .titlebar {
   height: 32px;
-  background: #2d2d2d;
+  background: var(--bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
-  color: #999;
+  color: var(--text-secondary);
   -webkit-app-region: drag;
   flex-shrink: 0;
 }
@@ -313,29 +405,30 @@ body {
 
 .field label {
   font-size: 12px;
-  color: #999;
+  color: var(--text-secondary);
 }
 
 .field textarea {
   flex: 1;
-  background: #2d2d2d;
-  border: 1px solid #3d3d3d;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 12px;
-  color: #fff;
+  color: var(--text-primary);
   font-family: 'Monaco', 'Consolas', monospace;
   font-size: 13px;
   resize: none;
   outline: none;
   min-height: 80px;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
 }
 
 .field textarea:focus {
-  border-color: #0078d4;
+  border-color: var(--accent-color);
 }
 
 .field textarea::placeholder {
-  color: #666;
+  color: var(--text-tertiary);
 }
 
 .actions {
@@ -354,21 +447,70 @@ button {
 }
 
 .btn-primary {
-  background: #0078d4;
+  background: var(--accent-color);
   color: #fff;
 }
 
 .btn-primary:hover {
-  background: #1084d8;
+  background: var(--accent-hover);
 }
 
 .btn-secondary {
-  background: #3d3d3d;
-  color: #fff;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .btn-secondary:hover {
-  background: #4d4d4d;
+  background: var(--bg-secondary);
+}
+
+/* 附件列表样式 */
+.attachments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  gap: 10px;
+}
+
+.attachment-icon {
+  font-size: 20px;
+}
+
+.attachment-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.attachment-name {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.attachment-meta {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+
+.attachment-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  object-fit: cover;
 }
 `;
 }
@@ -1145,6 +1287,17 @@ interface IntoolsFFmpeg {
   run(args: string[], onProgress?: (progress: FFmpegRunProgress) => void): FFmpegTask
 }
 
+interface Attachment {
+  id: string
+  name: string
+  size: number
+  kind: 'file' | 'image'
+  mime?: string
+  ext?: string
+  path?: string
+  dataUrl?: string
+}
+
 interface PluginInitData {
   pluginName: string
   featureCode: string
@@ -1152,6 +1305,7 @@ interface PluginInitData {
   input: string
   mode?: string
   route?: string
+  attachments?: Attachment[]
 }
 
 interface IntoolsAPI {

package/dist/commands/pack.js

@@ -87,6 +87,33 @@ async function createArchive(cwd, outputPath, manifest) {
             if (fs.existsSync(preloadPath)) {
                 archive.file(preloadPath, { name: manifest.preload });
                 console.log(chalk_1.default.gray(`  + ${manifest.preload}`));
+                // 当有 preload 时，打包 node_modules 中的生产依赖
+                const nodeModulesDir = path.join(cwd, 'node_modules');
+                const pkgJsonPath = path.join(cwd, 'package.json');
+                if (fs.existsSync(nodeModulesDir) && fs.existsSync(pkgJsonPath)) {
+                    const pkgJson = fs.readJsonSync(pkgJsonPath);
+                    const dependencies = Object.keys(pkgJson.dependencies || {});
+                    if (dependencies.length > 0) {
+                        console.log(chalk_1.default.gray('  + node_modules/ (生产依赖)'));
+                        // 打包每个生产依赖及其子依赖
+                        for (const dep of dependencies) {
+                            const depPath = path.join(nodeModulesDir, dep);
+                            if (fs.existsSync(depPath)) {
+                                archive.directory(depPath, `node_modules/${dep}`);
+                            }
+                        }
+                        // 递归收集所有需要的依赖（包括依赖的依赖）
+                        const allDeps = collectAllDependencies(cwd, dependencies);
+                        for (const dep of allDeps) {
+                            if (!dependencies.includes(dep)) {
+                                const depPath = path.join(nodeModulesDir, dep);
+                                if (fs.existsSync(depPath)) {
+                                    archive.directory(depPath, `node_modules/${dep}`);
+                                }
+                            }
+                        }
+                    }
+                }
             }
             else {
                 console.log(chalk_1.default.yellow(`警告: preload 文件不存在: ${manifest.preload}`));
@@ -100,3 +127,34 @@ async function createArchive(cwd, outputPath, manifest) {
         archive.finalize();
     });
 }
+/**
+ * 递归收集所有依赖（包括依赖的依赖）
+ */
+function collectAllDependencies(cwd, dependencies) {
+    const nodeModulesDir = path.join(cwd, 'node_modules');
+    const collected = new Set();
+    const queue = [...dependencies];
+    while (queue.length > 0) {
+        const dep = queue.shift();
+        if (collected.has(dep))
+            continue;
+        collected.add(dep);
+        // 读取该依赖的 package.json 获取其依赖
+        const depPkgPath = path.join(nodeModulesDir, dep, 'package.json');
+        if (fs.existsSync(depPkgPath)) {
+            try {
+                const depPkg = fs.readJsonSync(depPkgPath);
+                const subDeps = Object.keys(depPkg.dependencies || {});
+                for (const subDep of subDeps) {
+                    if (!collected.has(subDep)) {
+                        queue.push(subDep);
+                    }
+                }
+            }
+            catch {
+                // 忽略读取错误
+            }
+        }
+    }
+    return Array.from(collected);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intools-cli",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "InTools 插件开发 CLI 工具",
   "main": "dist/index.js",
   "files": [