desktop-tool-pl-qrcode 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# desktop-tool-pl-qrcode
+
+强大的二维码生成工具插件，适用于 Desktop Tool。
+
+## 功能特性
+
+- 📝 文本转二维码
+- 🔗 链接转二维码
+- 🎨 自定义颜色和样式
+- 📥 下载为 PNG 图片
+- ⚙️ 多种容错率选择
+- 📐 自定义尺寸和边距
+
+## 安装
+
+通过 Desktop Tool 的插件市场搜索 `qrcode` 或 `desktop-tool-pl-qrcode` 安装。
+
+## 使用
+
+1. 打开插件
+2. 选择输入类型（文本/链接）
+3. 输入内容
+4. 调整样式（可选）
+5. 点击下载保存
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 发布到 npm
+npm publish
+```
+
+## 技术栈
+
+- React 18
+- TypeScript
+- Vite
+- qrcode
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "desktop-tool-pl-qrcode",
+  "version": "1.0.0",
+  "description": "强大的二维码生成工具",
+  "keywords": ["desktop-tool-plugin", "qrcode", "二维码"],
+  "author": "Desktop Tool",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "desktop-tool": {
+    "id": "com.desktop-tool.plugin.qrcode",
+    "entry": "./dist/index.js"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.3"
+  },
+  "devDependencies": {
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:types": "tsc",
+    "build:lib": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  }
+}

package/src/QRCodePlugin.css

@@ -0,0 +1,241 @@
+.qrcode-plugin {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.qrcode-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.qrcode-header h2 {
+  margin: 0;
+  font-size: 24px;
+  color: #333;
+}
+
+.qrcode-window-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.qrcode-window-controls button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+
+.qrcode-window-controls button:hover {
+  background: #e0e0e0;
+}
+
+.qrcode-tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.qrcode-tab {
+  padding: 10px 20px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 500;
+  color: #666;
+  transition: all 0.2s;
+  margin-bottom: -2px;
+}
+
+.qrcode-tab:hover {
+  color: #0066CC;
+}
+
+.qrcode-tab.active {
+  color: #0066CC;
+  border-bottom-color: #0066CC;
+}
+
+.qrcode-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.qrcode-input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.qrcode-input-section label {
+  font-weight: 500;
+  color: #333;
+  font-size: 14px;
+}
+
+.qrcode-textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.qrcode-textarea:focus {
+  outline: none;
+  border-color: #0066CC;
+}
+
+.qrcode-error {
+  padding: 12px 16px;
+  background: #ffe6e6;
+  color: #dc3545;
+  border-radius: 8px;
+  border: 1px solid #ffc9c9;
+  font-size: 14px;
+}
+
+.qrcode-preview-section {
+  display: flex;
+  justify-content: center;
+}
+
+.qrcode-preview-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+}
+
+.qrcode-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  background: white;
+  padding: 16px;
+}
+
+.qrcode-download-btn {
+  padding: 12px 24px;
+  background: white;
+  color: #667eea;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qrcode-download-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.qrcode-settings {
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 12px;
+}
+
+.qrcode-settings h3 {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.qrcode-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.qrcode-setting-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.qrcode-setting-item label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #555;
+}
+
+.qrcode-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: #ddd;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.qrcode-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #0066CC;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.qrcode-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.qrcode-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #0066CC;
+  cursor: pointer;
+  border: none;
+}
+
+.qrcode-color-picker {
+  width: 60px;
+  height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.qrcode-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  cursor: pointer;
+}
+
+.qrcode-select:focus {
+  outline: none;
+  border-color: #0066CC;
+}

package/src/QRCodePlugin.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import { generateQRCode, downloadQRCode } from './utils/qrcode-generator';
+import './QRCodePlugin.css';
+
+interface QRCodePluginProps {
+  pluginId: string;
+  onClose?: () => void;
+  onMinimize?: () => void;
+  onMaximize?: () => void;
+}
+
+type TabType = 'text' | 'url';
+
+type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+function QRCodePlugin({ onClose, onMinimize, onMaximize }: QRCodePluginProps) {
+  const [tab, setTab] = useState<TabType>('text');
+  const [input, setInput] = useState('');
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  const [settings, setSettings] = useState({
+    width: 300,
+    margin: 2,
+    color: '#000000',
+    bgColor: '#ffffff',
+    errorLevel: 'M' as ErrorCorrectionLevel
+  });
+
+  // 实时生成二维码
+  useEffect(() => {
+    if (input.trim()) {
+      generateQR();
+    } else {
+      setQrCodeUrl('');
+    }
+  }, [input, settings, tab]);
+
+  const generateQR = async () => {
+    if (!input.trim()) {
+      setQrCodeUrl('');
+      return;
+    }
+
+    setError('');
+
+    try {
+      const text = tab === 'url' && !input.match(/^https?:\/\//)
+        ? `https://${input}`
+        : input;
+
+      const result = await generateQRCode(text, {
+        width: settings.width,
+        margin: settings.margin,
+        color: { dark: settings.color, light: settings.bgColor },
+        errorCorrectionLevel: settings.errorLevel
+      });
+
+      setQrCodeUrl(result);
+    } catch (err) {
+      setError((err as Error).message);
+      setQrCodeUrl('');
+    }
+  };
+
+  const handleDownload = () => {
+    if (qrCodeUrl) {
+      const timestamp = new Date().getTime();
+      downloadQRCode(qrCodeUrl, `qrcode-${timestamp}.png`);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(e.target.value);
+  };
+
+  return (
+    <div className="qrcode-plugin">
+      <div className="qrcode-header">
+        <h2>📱 二维码生成器</h2>
+        {onClose && (
+          <div className="qrcode-window-controls">
+            <button onClick={onMinimize} title="最小化">─</button>
+            <button onClick={onMaximize} title="最大化">□</button>
+            <button onClick={onClose} title="关闭">✕</button>
+          </div>
+        )}
+      </div>
+
+      <div className="qrcode-tabs">
+        <button
+          className={`qrcode-tab ${tab === 'text' ? 'active' : ''}`}
+          onClick={() => setTab('text')}
+        >
+          文本
+        </button>
+        <button
+          className={`qrcode-tab ${tab === 'url' ? 'active' : ''}`}
+          onClick={() => setTab('url')}
+        >
+          链接
+        </button>
+      </div>
+
+      <div className="qrcode-content">
+        <div className="qrcode-input-section">
+          <label>
+            {tab === 'text' ? '输入文本内容' : '输入链接地址'}
+          </label>
+          <textarea
+            value={input}
+            onChange={handleInputChange}
+            placeholder={tab === 'text' ? '请输入要生成二维码的文本内容...' : '请输入 URL 地址...'}
+            className="qrcode-textarea"
+            rows={4}
+          />
+        </div>
+
+        {error && (
+          <div className="qrcode-error">
+            ⚠️ {error}
+          </div>
+        )}
+
+        {qrCodeUrl && (
+          <div className="qrcode-preview-section">
+            <div className="qrcode-preview-card">
+              <img
+                src={qrCodeUrl}
+                alt="二维码"
+                className="qrcode-image"
+                style={{ width: `${settings.width}px` }}
+              />
+              <button
+                className="qrcode-download-btn"
+                onClick={handleDownload}
+              >
+                📥 下载二维码
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="qrcode-settings">
+          <h3>⚙️ 设置</h3>
+
+          <div className="qrcode-settings-grid">
+            <div className="qrcode-setting-item">
+              <label>尺寸: {settings.width}px</label>
+              <input
+                type="range"
+                min="200"
+                max="600"
+                step="50"
+                value={settings.width}
+                onChange={(e) => setSettings({ ...settings, width: Number(e.target.value) })}
+                className="qrcode-slider"
+              />
+            </div>
+
+            <div className="qrcode-setting-item">
+              <label>边距: {settings.margin}</label>
+              <input
+                type="range"
+                min="0"
+                max="4"
+                step="1"
+                value={settings.margin}
+                onChange={(e) => setSettings({ ...settings, margin: Number(e.target.value) })}
+                className="qrcode-slider"
+              />
+            </div>
+
+            <div className="qrcode-setting-item">
+              <label>前景色</label>
+              <input
+                type="color"
+                value={settings.color}
+                onChange={(e) => setSettings({ ...settings, color: e.target.value })}
+                className="qrcode-color-picker"
+              />
+            </div>
+
+            <div className="qrcode-setting-item">
+              <label>背景色</label>
+              <input
+                type="color"
+                value={settings.bgColor}
+                onChange={(e) => setSettings({ ...settings, bgColor: e.target.value })}
+                className="qrcode-color-picker"
+              />
+            </div>
+
+            <div className="qrcode-setting-item">
+              <label>容错率</label>
+              <select
+                value={settings.errorLevel}
+                onChange={(e) => setSettings({ ...settings, errorLevel: e.target.value as ErrorCorrectionLevel })}
+                className="qrcode-select"
+              >
+                <option value="L">L (7%)</option>
+                <option value="M">M (15%)</option>
+                <option value="Q">Q (25%)</option>
+                <option value="H">H (30%)</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default QRCodePlugin;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './QRCodePlugin';
+export { manifest } from './manifest';

package/src/manifest.ts

@@ -0,0 +1,10 @@
+export const manifest = {
+  id: 'com.desktop-tool.plugin.qrcode',
+  name: '二维码生成器',
+  version: '1.0.0',
+  description: '强大的二维码生成工具，支持文本、链接等多种格式',
+  author: 'Desktop Tool',
+  icon: '📱',
+  category: '工具',
+  permissions: [] as string[]
+};

package/src/utils/qrcode-generator.ts

@@ -0,0 +1,40 @@
+import QRCode from 'qrcode';
+
+export interface QRCodeOptions {
+  width?: number;
+  margin?: number;
+  color?: { dark: string; light: string };
+  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+}
+
+export async function generateQRCode(
+  text: string,
+  options: QRCodeOptions = {}
+): Promise<string> {
+  const defaultOptions: QRCodeOptions = {
+    width: 300,
+    margin: 2,
+    color: { dark: '#000000', light: '#ffffff' },
+    errorCorrectionLevel: 'M',
+    ...options
+  };
+
+  if (!text || text.trim() === '') {
+    throw new Error('输入内容不能为空');
+  }
+
+  try {
+    return await QRCode.toDataURL(text, defaultOptions);
+  } catch (error) {
+    throw new Error(`生成二维码失败: ${(error as Error).message}`);
+  }
+}
+
+export function downloadQRCode(dataUrl: string, filename: string = 'qrcode.png'): void {
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "emitDeclarationOnly": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'QRCodePlugin',
+      fileName: 'index',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'qrcode'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          qrcode: 'QRCode'
+        }
+      }
+    }
+  }
+});