🎉 初始提交：TinyLabel 图像文字编辑桌面工具
- 基于 Electron + React + TypeScript + Vite - Fabric.js 画布编辑引擎 - Ant Design UI 组件 + Zustand 状态管理 - 支持文字添加、拖拽、字体/颜色/特效编辑 - 支持 PNG / JPEG / WebP 导出
This commit is contained in:
+33
@@ -0,0 +1,33 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Build artifacts
|
||||
dist-electron
|
||||
|
||||
# Platform-specific deps
|
||||
.local-libs
|
||||
|
||||
# IDE / tooling metadata
|
||||
.reasonix
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
# TinyLabel 🎨
|
||||
|
||||
**TinyLabel** 是一款轻量级的跨平台图像文字编辑桌面工具。你可以选择背景图片，在上面添加和编辑文字，最后导出为高质量图片。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ **背景图管理** — 从文件夹加载或上传图片作为背景
|
||||
- ✅ **文字编辑** — 添加文字，自由拖拽移动位置
|
||||
- ✅ **字体属性** — 修改字体、字号、字重、颜色、对齐方式
|
||||
- ✅ **文字特效** — 描边效果、阴影效果、透明度调节
|
||||
- ✅ **图片导出** — 支持 PNG / JPEG / WebP 格式，可调节尺寸和质量
|
||||
- ✅ **系统字体** — 自动加载系统已安装字体
|
||||
- ✅ **跨平台** — 支持 Windows 和 macOS
|
||||
|
||||
## 快速开始
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 开发模式
|
||||
npm run dev
|
||||
|
||||
# 构建 Windows 版本
|
||||
npm run build:win
|
||||
|
||||
# 构建 macOS 版本
|
||||
npm run build:mac
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
|
||||
| 技术 | 用途 |
|
||||
|------|------|
|
||||
| Electron | 跨平台桌面框架 |
|
||||
| React + TypeScript | UI 界面 |
|
||||
| Fabric.js | 画布编辑引擎 |
|
||||
| Ant Design | UI 组件库 |
|
||||
| Zustand | 状态管理 |
|
||||
| Vite | 构建工具 |
|
||||
| electron-builder | 打包分发 |
|
||||
|
||||
## 使用指南
|
||||
|
||||
1. 启动程序后，点击左侧「选择文件夹」或「上传图片」加载背景图
|
||||
2. 点击背景图缩略图选中它
|
||||
3. 点击「添加文字」按钮在画布中添加文字
|
||||
4. 选中文字后，在右侧面板调整字体、大小、颜色、特效等属性
|
||||
5. 点击顶部的「导出」按钮，选择格式、质量、尺寸后导出图片
|
||||
|
||||
## 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| `Delete` / `Backspace` | 删除选中文字 |
|
||||
| `Escape` | 取消选中 |
|
||||
| `Ctrl/Cmd + E` | 导出图片 |
|
||||
|
||||
## 构建说明
|
||||
|
||||
### Windows
|
||||
|
||||
```bash
|
||||
npm run build:win
|
||||
```
|
||||
|
||||
生成 `release/TinyLabel Setup x.x.x.exe`
|
||||
|
||||
### macOS
|
||||
|
||||
```bash
|
||||
npm run build:mac
|
||||
```
|
||||
|
||||
生成 `release/TinyLabel-x.x.x.dmg`
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
@@ -0,0 +1,43 @@
|
||||
appId: com.tinylabel.app
|
||||
productName: TinyLabel
|
||||
copyright: Copyright © 2025
|
||||
|
||||
directories:
|
||||
output: release
|
||||
|
||||
files:
|
||||
- dist
|
||||
- dist-electron
|
||||
|
||||
win:
|
||||
target:
|
||||
- target: nsis
|
||||
arch:
|
||||
- x64
|
||||
icon: build/icon.ico
|
||||
|
||||
mac:
|
||||
target:
|
||||
- target: dmg
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
icon: build/icon.icns
|
||||
category: public.app-category.graphics-design
|
||||
|
||||
nsis:
|
||||
oneClick: false
|
||||
allowToChangeInstallationDirectory: true
|
||||
createDesktopShortcut: true
|
||||
language: 2052
|
||||
|
||||
dmg:
|
||||
title: TinyLabel
|
||||
contents:
|
||||
- x: 130
|
||||
y: 220
|
||||
type: file
|
||||
- x: 410
|
||||
y: 220
|
||||
type: link
|
||||
path: /Applications
|
||||
@@ -0,0 +1,149 @@
|
||||
import { app, BrowserWindow, ipcMain, dialog, shell } from 'electron'
|
||||
import { join, dirname } from 'path'
|
||||
import { readFileSync, readdirSync } from 'fs'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = dirname(__filename)
|
||||
|
||||
let mainWindow: BrowserWindow | null = null
|
||||
|
||||
// WSL/Linux 兼容配置：仅禁用沙箱 + X11 模式，GPU 让 Electron 自动处理
|
||||
if (process.platform === 'linux') {
|
||||
app.commandLine.appendSwitch('no-sandbox')
|
||||
app.commandLine.appendSwitch('ozone-platform', 'x11')
|
||||
app.commandLine.appendSwitch('in-process-gpu')
|
||||
}
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
title: 'TinyLabel',
|
||||
show: true,
|
||||
center: true,
|
||||
autoHideMenuBar: true,
|
||||
backgroundColor: '#1a1a2e',
|
||||
webPreferences: {
|
||||
preload: join(__dirname, 'preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: false,
|
||||
backgroundThrottling: false,
|
||||
},
|
||||
})
|
||||
|
||||
// 加载完成后最大化
|
||||
mainWindow.once('ready-to-show', () => {
|
||||
console.log('[main] ready-to-show')
|
||||
clearTimeout(forceShowTimer)
|
||||
mainWindow?.maximize()
|
||||
mainWindow?.focus()
|
||||
})
|
||||
|
||||
// 兜底：5 秒后强制弹窗
|
||||
const forceShowTimer = setTimeout(() => {
|
||||
if (mainWindow && !mainWindow.isVisible()) {
|
||||
console.warn('[main] force-show window after timeout')
|
||||
mainWindow.show()
|
||||
mainWindow.focus()
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
mainWindow.webContents.on('did-fail-load', (_event, errorCode, errorDesc) => {
|
||||
console.error(`[main] load failed: ${errorCode} ${errorDesc}`)
|
||||
})
|
||||
|
||||
const devUrl = process.env.VITE_DEV_SERVER_URL
|
||||
if (devUrl) {
|
||||
console.log(`[main] loading dev URL: ${devUrl}`)
|
||||
mainWindow.loadURL(devUrl)
|
||||
} else {
|
||||
const filePath = join(__dirname, '../dist/index.html')
|
||||
console.log(`[main] loading file: ${filePath}`)
|
||||
mainWindow.loadFile(filePath)
|
||||
}
|
||||
|
||||
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
|
||||
shell.openExternal(url)
|
||||
return { action: 'deny' }
|
||||
})
|
||||
|
||||
// 开发模式下打开 DevTools（内嵌在窗口底部）
|
||||
if (devUrl) {
|
||||
mainWindow.webContents.openDevTools()
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
console.log('[main] app ready')
|
||||
createWindow()
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
|
||||
// ─── IPC Handlers ────────────────────────────────────────────
|
||||
|
||||
ipcMain.handle('fs:readImages', async (_event, dirPath: string) => {
|
||||
try {
|
||||
const files = readdirSync(dirPath)
|
||||
const images = files
|
||||
.filter((f) => /\.(jpg|jpeg|png|webp|bmp)$/i.test(f))
|
||||
.map((f) => {
|
||||
const fullPath = join(dirPath, f)
|
||||
const buffer = readFileSync(fullPath)
|
||||
const ext = f.split('.').pop()!.toLowerCase()
|
||||
const mime = ext === 'jpg' ? 'jpeg' : ext
|
||||
return { name: f, data: `data:image/${mime};base64,${buffer.toString('base64')}` }
|
||||
})
|
||||
return images
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle('dialog:selectDirectory', async () => {
|
||||
if (!mainWindow) return ''
|
||||
const result = await dialog.showOpenDialog(mainWindow, { properties: ['openDirectory'] })
|
||||
return result.canceled ? '' : result.filePaths[0]
|
||||
})
|
||||
|
||||
ipcMain.handle('dialog:saveFile', async (_event, defaultName: string) => {
|
||||
if (!mainWindow) return ''
|
||||
const result = await dialog.showSaveDialog(mainWindow, {
|
||||
defaultPath: defaultName,
|
||||
filters: [
|
||||
{ name: 'Image', extensions: ['png', 'jpg', 'jpeg', 'webp'] },
|
||||
],
|
||||
})
|
||||
return result.canceled ? '' : result.filePath
|
||||
})
|
||||
|
||||
ipcMain.handle('fs:saveFile', async (_event, filePath: string, base64Data: string) => {
|
||||
try {
|
||||
const { writeFileSync } = await import('fs')
|
||||
const buffer = Buffer.from(base64Data.split(',')[1], 'base64')
|
||||
writeFileSync(filePath, buffer)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle('system:getFonts', async () => {
|
||||
return [
|
||||
'Arial', 'Arial Black', 'Calibri', 'Cambria', 'Comic Sans MS',
|
||||
'Courier New', 'Georgia', 'Helvetica', 'Impact',
|
||||
'Microsoft YaHei', 'Microsoft JhengHei',
|
||||
'Noto Sans SC', 'Noto Serif SC', 'PingFang SC',
|
||||
'Segoe UI', 'SimHei', 'SimSun',
|
||||
'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana',
|
||||
'Source Han Sans', 'Source Han Serif',
|
||||
]
|
||||
})
|
||||
@@ -0,0 +1,13 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
|
||||
const api = {
|
||||
readImages: (dirPath: string) => ipcRenderer.invoke('fs:readImages', dirPath),
|
||||
selectDirectory: () => ipcRenderer.invoke('dialog:selectDirectory'),
|
||||
saveFile: (filePath: string, base64Data: string) =>
|
||||
ipcRenderer.invoke('fs:saveFile', filePath, base64Data),
|
||||
selectSavePath: (defaultName: string) =>
|
||||
ipcRenderer.invoke('dialog:saveFile', defaultName),
|
||||
getFonts: () => ipcRenderer.invoke('system:getFonts'),
|
||||
}
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', api)
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TinyLabel - 图像文字编辑工具</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+6859
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "tinylabel",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"main": "dist-electron/main.js",
|
||||
"scripts": {
|
||||
"dev": "ELECTRON_OZONE_PLATFORM_HINT=x11 GDK_BACKEND=x11 LD_LIBRARY_PATH=$(pwd)/.local-libs:$LD_LIBRARY_PATH vite",
|
||||
"dev:win": "vite",
|
||||
"dev:electron": "ELECTRON_OZONE_PLATFORM_HINT=x11 GDK_BACKEND=x11 LD_LIBRARY_PATH=$(pwd)/.local-libs:$LD_LIBRARY_PATH electron .",
|
||||
"build": "tsc -b && vite build && electron-builder",
|
||||
"build:win": "tsc -b && vite build && electron-builder --win",
|
||||
"build:mac": "tsc -b && vite build && electron-builder --mac",
|
||||
"preview": "vite preview",
|
||||
"lint": "oxlint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"antd": "^6.5.1",
|
||||
"fabric": "^7.4.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"zustand": "^5.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"electron": "^43.1.0",
|
||||
"electron-builder": "^26.15.3",
|
||||
"oxlint": "^1.71.0",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.1.1",
|
||||
"vite-plugin-electron": "^1.1.0",
|
||||
"vite-plugin-electron-renderer": "^1.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<rect width="128" height="128" rx="20" fill="#7c5cfc"/>
|
||||
<text x="64" y="82" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="#fff" text-anchor="middle">T</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
+69
@@ -0,0 +1,69 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { ConfigProvider, theme } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import AppLayout from './components/Layout/AppLayout'
|
||||
import ExportDialog from './components/ExportDialog/ExportDialog'
|
||||
import { useEditorStore } from './stores/editorStore'
|
||||
import { loadSystemFonts } from './utils/fontLoader'
|
||||
|
||||
export default function App() {
|
||||
const [exportOpen, setExportOpen] = useState(false)
|
||||
const initialized = useEditorStore((s) => s.initialized)
|
||||
const setInitialized = useEditorStore((s) => s.setInitialized)
|
||||
const setFonts = useEditorStore((s) => s.setFonts)
|
||||
|
||||
useEffect(() => {
|
||||
async function init() {
|
||||
// Load fonts
|
||||
const fonts = await loadSystemFonts()
|
||||
setFonts(fonts)
|
||||
setInitialized(true)
|
||||
}
|
||||
init()
|
||||
}, [setFonts, setInitialized])
|
||||
|
||||
const handleExport = useCallback(() => {
|
||||
setExportOpen(true)
|
||||
}, [])
|
||||
|
||||
if (!initialized) {
|
||||
return (
|
||||
<div style={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg-primary)',
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 32, marginBottom: 12 }}>🎨</div>
|
||||
<div>正在初始化 TinyLabel...</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
locale={zhCN}
|
||||
theme={{
|
||||
algorithm: theme.darkAlgorithm,
|
||||
token: {
|
||||
colorPrimary: '#7c5cfc',
|
||||
borderRadius: 6,
|
||||
colorBgContainer: '#1e1e3a',
|
||||
colorBgElevated: '#1e1e3a',
|
||||
colorBorder: '#2a2a4e',
|
||||
colorText: '#e8e8f0',
|
||||
colorTextSecondary: '#a0a0b8',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AppLayout onExport={handleExport} />
|
||||
<ExportDialog open={exportOpen} onClose={() => setExportOpen(false)} />
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
import { useEffect, useRef, useCallback, useState } from 'react'
|
||||
import { Canvas, FabricImage, FabricText, IText } from 'fabric'
|
||||
import { useEditorStore } from '@/stores/editorStore'
|
||||
import { Button } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
|
||||
export default function CanvasEditor() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const canvasInstance = useRef<Canvas | null>(null)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 })
|
||||
|
||||
const canvas = useEditorStore((s) => s.canvas)
|
||||
const setCanvas = useEditorStore((s) => s.setCanvas)
|
||||
const selectedBackground = useEditorStore((s) => s.selectedBackground)
|
||||
const setSelectedText = useEditorStore((s) => s.setSelectedText)
|
||||
const setTextConfig = useEditorStore((s) => s.setTextConfig)
|
||||
const textConfig = useEditorStore((s) => s.textConfig)
|
||||
|
||||
const PADDING = 48
|
||||
const ASPECT_RATIO = 4 / 3
|
||||
|
||||
/** 根据容器尺寸计算画布宽高，保持比例 */
|
||||
const calcCanvasSize = useCallback((cw: number, ch: number) => {
|
||||
const availW = cw - PADDING
|
||||
const availH = ch - PADDING
|
||||
let w = availW
|
||||
let h = w / ASPECT_RATIO
|
||||
if (h > availH) {
|
||||
h = availH
|
||||
w = h * ASPECT_RATIO
|
||||
}
|
||||
return { width: Math.floor(w), height: Math.floor(h) }
|
||||
}, [])
|
||||
|
||||
// ── ResizeObserver 监听容器尺寸 ──
|
||||
useEffect(() => {
|
||||
const el = containerRef.current
|
||||
if (!el) return
|
||||
|
||||
const sendSize = () => {
|
||||
const rect = el!.getBoundingClientRect()
|
||||
if (rect.width > 0 && rect.height > 0) {
|
||||
setContainerSize({ width: rect.width, height: rect.height })
|
||||
}
|
||||
}
|
||||
|
||||
sendSize()
|
||||
const observer = new ResizeObserver(sendSize)
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
// ── 容器尺寸变化时更新 Fabric 画布 ──
|
||||
useEffect(() => {
|
||||
const fc = canvasInstance.current
|
||||
if (!fc || containerSize.width === 0) return
|
||||
const { width, height } = calcCanvasSize(containerSize.width, containerSize.height)
|
||||
fc.setDimensions({ width, height })
|
||||
// 重新适配背景图
|
||||
if (fc.backgroundImage) {
|
||||
fitBackground(fc)
|
||||
}
|
||||
fc.renderAll()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [containerSize])
|
||||
|
||||
// ── 初始化 Fabric canvas ──
|
||||
useEffect(() => {
|
||||
if (!canvasRef.current || canvasInstance.current) return
|
||||
|
||||
const { width, height } =
|
||||
containerSize.width > 0
|
||||
? calcCanvasSize(containerSize.width, containerSize.height)
|
||||
: { width: 800, height: 600 }
|
||||
|
||||
const fabricCanvas = new Canvas(canvasRef.current, {
|
||||
width,
|
||||
height,
|
||||
backgroundColor: '#2a2a3a',
|
||||
preserveObjectStacking: true,
|
||||
})
|
||||
|
||||
canvasInstance.current = fabricCanvas
|
||||
setCanvas(fabricCanvas)
|
||||
|
||||
fabricCanvas.on('selection:created', (e) => {
|
||||
const obj = e.selected?.[0]
|
||||
if (obj && obj instanceof FabricText) {
|
||||
setSelectedText(obj)
|
||||
syncTextConfigFromObject(obj)
|
||||
}
|
||||
})
|
||||
|
||||
fabricCanvas.on('selection:updated', (e) => {
|
||||
const obj = e.selected?.[0]
|
||||
if (obj && obj instanceof FabricText) {
|
||||
setSelectedText(obj)
|
||||
syncTextConfigFromObject(obj)
|
||||
}
|
||||
})
|
||||
|
||||
fabricCanvas.on('selection:cleared', () => {
|
||||
setSelectedText(null)
|
||||
})
|
||||
|
||||
fabricCanvas.on('object:modified', (e) => {
|
||||
const obj = e.target
|
||||
if (obj && obj instanceof FabricText) {
|
||||
syncTextConfigFromObject(obj)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
fabricCanvas.dispose()
|
||||
canvasInstance.current = null
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
// Sync text config from Fabric object（需在 init useEffect 之前定义）
|
||||
const syncTextConfigFromObject = useCallback((obj: FabricText) => {
|
||||
setTextConfig({
|
||||
fontFamily: obj.fontFamily,
|
||||
fontSize: obj.fontSize,
|
||||
fontWeight: obj.fontWeight as number,
|
||||
fill: obj.fill as string,
|
||||
textAlign: obj.textAlign as 'left' | 'center' | 'right',
|
||||
stroke: obj.stroke as string,
|
||||
strokeWidth: obj.strokeWidth,
|
||||
opacity: obj.opacity,
|
||||
})
|
||||
if (obj.shadow) {
|
||||
setTextConfig({
|
||||
shadowColor: obj.shadow.color as string,
|
||||
shadowBlur: obj.shadow.blur,
|
||||
shadowOffsetX: obj.shadow.offsetX,
|
||||
shadowOffsetY: obj.shadow.offsetY,
|
||||
})
|
||||
}
|
||||
}, [setTextConfig])
|
||||
|
||||
// ── 背景图适配：contain 模式 + 居中 ──
|
||||
const fitBackground = useCallback((fc: Canvas) => {
|
||||
const bg = fc.backgroundImage as FabricImage | undefined
|
||||
if (!bg) return
|
||||
const cw = fc.width!
|
||||
const ch = fc.height!
|
||||
const imgW = bg.width! * bg.scaleX!
|
||||
const imgH = bg.height! * bg.scaleY!
|
||||
const scaleX = cw / imgW
|
||||
const scaleY = ch / imgH
|
||||
const scale = Math.min(scaleX, scaleY)
|
||||
bg.set({
|
||||
scaleX: bg.scaleX! * scale,
|
||||
scaleY: bg.scaleY! * scale,
|
||||
left: (cw - imgW * scale) / 2,
|
||||
top: (ch - imgH * scale) / 2,
|
||||
})
|
||||
}, [])
|
||||
|
||||
// ── 加载背景图 ──
|
||||
useEffect(() => {
|
||||
const fc = canvasInstance.current
|
||||
if (!fc) return
|
||||
|
||||
if (selectedBackground) {
|
||||
const imgEl = new Image()
|
||||
imgEl.onload = () => {
|
||||
const cw = fc.width!
|
||||
const ch = fc.height!
|
||||
const scaleX = cw / imgEl.width
|
||||
const scaleY = ch / imgEl.height
|
||||
const scale = Math.min(scaleX, scaleY) // contain 模式，完整显示
|
||||
const imgW = imgEl.width * scale
|
||||
const imgH = imgEl.height * scale
|
||||
|
||||
const bgImage = new FabricImage(imgEl, {
|
||||
scaleX: scale,
|
||||
scaleY: scale,
|
||||
left: (cw - imgW) / 2,
|
||||
top: (ch - imgH) / 2,
|
||||
selectable: false,
|
||||
evented: false,
|
||||
originX: 'left',
|
||||
originY: 'top',
|
||||
})
|
||||
|
||||
fc.backgroundImage = bgImage
|
||||
fc.renderAll()
|
||||
}
|
||||
imgEl.src = selectedBackground.data
|
||||
} else {
|
||||
fc.backgroundImage = undefined
|
||||
fc.renderAll()
|
||||
}
|
||||
}, [selectedBackground])
|
||||
|
||||
// ── 添加文字 ──
|
||||
const handleAddText = useCallback(() => {
|
||||
const fc = canvasInstance.current
|
||||
if (!fc) return
|
||||
|
||||
const text = new IText('双击编辑文字', {
|
||||
fontFamily: textConfig.fontFamily,
|
||||
fontSize: textConfig.fontSize,
|
||||
fontWeight: textConfig.fontWeight,
|
||||
fill: textConfig.fill,
|
||||
textAlign: textConfig.textAlign,
|
||||
left: fc.width! / 2,
|
||||
top: fc.height! / 2,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
stroke: textConfig.stroke,
|
||||
strokeWidth: textConfig.strokeWidth,
|
||||
opacity: textConfig.opacity,
|
||||
})
|
||||
|
||||
fc.add(text)
|
||||
fc.setActiveObject(text)
|
||||
fc.renderAll()
|
||||
setSelectedText(text)
|
||||
}, [textConfig, setSelectedText])
|
||||
|
||||
const noSpace = containerSize.width === 0 || containerSize.height === 0
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{!selectedBackground && !noSpace && (
|
||||
<div
|
||||
style={{
|
||||
color: 'var(--text-secondary)',
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 48, marginBottom: 12 }}>🖼️</div>
|
||||
<div style={{ fontSize: 15, fontWeight: 500 }}>请先选择一张背景图</div>
|
||||
<div style={{ fontSize: 13, marginTop: 4, color: 'var(--text-secondary)' }}>
|
||||
从左侧面板选择背景图片开始编辑
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
border: '1px solid var(--border-color)',
|
||||
position: 'relative',
|
||||
display: selectedBackground && !noSpace ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<canvas ref={canvasRef} />
|
||||
</div>
|
||||
|
||||
{selectedBackground && !noSpace && (
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddText}
|
||||
style={{
|
||||
borderColor: 'var(--accent)',
|
||||
color: 'var(--accent)',
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
添加文字
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Modal,
|
||||
Select,
|
||||
Slider,
|
||||
InputNumber,
|
||||
Button,
|
||||
message,
|
||||
Typography,
|
||||
Space,
|
||||
QRCode,
|
||||
Divider,
|
||||
} from 'antd'
|
||||
import { DownloadOutlined, SettingOutlined } from '@ant-design/icons'
|
||||
import { useEditorStore } from '@/stores/editorStore'
|
||||
import { exportAndSave, formatFileSize } from '@/utils/imageExporter'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
interface ExportDialogProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function ExportDialog({ open, onClose }: ExportDialogProps) {
|
||||
const canvas = useEditorStore((s) => s.canvas)
|
||||
const exportConfig = useEditorStore((s) => s.exportConfig)
|
||||
const setExportConfig = useEditorStore((s) => s.setExportConfig)
|
||||
const [estimatedSize, setEstimatedSize] = useState<string>('')
|
||||
const [exporting, setExporting] = useState(false)
|
||||
|
||||
// Update size estimate when config changes
|
||||
useEffect(() => {
|
||||
if (!canvas || !open) return
|
||||
// Estimate from canvas dimensions
|
||||
const w = canvas.width || 800
|
||||
const h = canvas.height || 600
|
||||
const exportW = Math.round(w * exportConfig.scaleFactor)
|
||||
const exportH = Math.round(h * exportConfig.scaleFactor)
|
||||
// Rough size estimation
|
||||
let bytes = exportW * exportH * 4 // RGBA
|
||||
if (exportConfig.format === 'jpeg' || exportConfig.format === 'webp') {
|
||||
bytes = Math.round(bytes * (exportConfig.quality / 100) * 0.3)
|
||||
} else {
|
||||
bytes = Math.round(bytes * 0.5)
|
||||
}
|
||||
setEstimatedSize(formatFileSize(bytes))
|
||||
}, [canvas, open, exportConfig])
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
if (!canvas) return
|
||||
|
||||
setExporting(true)
|
||||
try {
|
||||
const success = await exportAndSave(canvas, exportConfig)
|
||||
if (success) {
|
||||
message.success('图片导出成功！')
|
||||
onClose()
|
||||
}
|
||||
} catch (err) {
|
||||
message.error('导出失败，请重试')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setExporting(false)
|
||||
}
|
||||
}, [canvas, exportConfig, onClose])
|
||||
|
||||
const canvasW = canvas?.width || 800
|
||||
const canvasH = canvas?.height || 600
|
||||
const exportW = Math.round(canvasW * exportConfig.scaleFactor)
|
||||
const exportH = Math.round(canvasH * exportConfig.scaleFactor)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<DownloadOutlined />
|
||||
<span>导出图片</span>
|
||||
</Space>
|
||||
}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
width={520}
|
||||
footer={null}
|
||||
destroyOnClose
|
||||
centered
|
||||
>
|
||||
<div style={{ padding: '8px 0', display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||
{/* Format */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 8 }}>
|
||||
图片格式
|
||||
</Text>
|
||||
<Select
|
||||
value={exportConfig.format}
|
||||
onChange={(v) => setExportConfig({ format: v })}
|
||||
style={{ width: '100%' }}
|
||||
options={[
|
||||
{ value: 'png', label: 'PNG（无损，支持透明）' },
|
||||
{ value: 'jpeg', label: 'JPEG（有损，体积小）' },
|
||||
{ value: 'webp', label: 'WebP（现代格式，高效）' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quality (for JPEG/WebP) */}
|
||||
{(exportConfig.format === 'jpeg' || exportConfig.format === 'webp') && (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12 }}>图片质量</Text>
|
||||
<Text style={{ color: 'var(--accent)', fontSize: 12, fontWeight: 600 }}>
|
||||
{exportConfig.quality}%
|
||||
</Text>
|
||||
</div>
|
||||
<Slider
|
||||
value={exportConfig.quality}
|
||||
onChange={(v) => setExportConfig({ quality: v })}
|
||||
min={10}
|
||||
max={100}
|
||||
marks={{ 10: '低', 50: '中', 80: '高', 100: '最佳' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scale / Size */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 8 }}>
|
||||
导出尺寸
|
||||
</Text>
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 }}>
|
||||
<InputNumber
|
||||
value={exportW}
|
||||
disabled
|
||||
size="small"
|
||||
addonBefore="宽"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<span style={{ color: 'var(--text-secondary)' }}>×</span>
|
||||
<InputNumber
|
||||
value={exportH}
|
||||
disabled
|
||||
size="small"
|
||||
addonBefore="高"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
value={exportConfig.scaleFactor}
|
||||
onChange={(v) => setExportConfig({ scaleFactor: v })}
|
||||
min={0.25}
|
||||
max={4}
|
||||
step={0.25}
|
||||
marks={{
|
||||
0.25: '0.25×',
|
||||
0.5: '0.5×',
|
||||
1: '1×',
|
||||
2: '2×',
|
||||
4: '4×',
|
||||
}}
|
||||
tooltip={{ formatter: (v) => `${v}×` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div style={{
|
||||
background: 'var(--bg-canvas)',
|
||||
borderRadius: 6,
|
||||
padding: '12px 16px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Space direction="vertical" size={2}>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
|
||||
导出分辨率
|
||||
</Text>
|
||||
<Text style={{ color: 'var(--text-primary)', fontSize: 14, fontWeight: 500 }}>
|
||||
{exportW} × {exportH}
|
||||
</Text>
|
||||
</Space>
|
||||
<Space direction="vertical" size={2} style={{ textAlign: 'right' }}>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
|
||||
预估文件大小
|
||||
</Text>
|
||||
<Text style={{ color: 'var(--accent)', fontSize: 14, fontWeight: 500 }}>
|
||||
{estimatedSize}
|
||||
</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, marginTop: 8 }}>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={handleExport}
|
||||
loading={exporting}
|
||||
size="large"
|
||||
>
|
||||
导出图片
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button, Tooltip } from 'antd'
|
||||
import {
|
||||
PictureOutlined,
|
||||
ExportOutlined,
|
||||
UndoOutlined,
|
||||
RedoOutlined,
|
||||
DeleteOutlined,
|
||||
MenuOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import CanvasEditor from '../CanvasEditor/CanvasEditor'
|
||||
import ToolPanel from '../ToolPanel/ToolPanel'
|
||||
import PropertyPanel from '../PropertyPanel/PropertyPanel'
|
||||
import { useEditorStore } from '@/stores/editorStore'
|
||||
|
||||
interface AppLayoutProps {
|
||||
onExport: () => void
|
||||
}
|
||||
|
||||
export default function AppLayout({ onExport }: AppLayoutProps) {
|
||||
const [showToolPanel, setShowToolPanel] = useState(true)
|
||||
const [showPropertyPanel, setShowPropertyPanel] = useState(true)
|
||||
const canvas = useEditorStore((s) => s.canvas)
|
||||
const selectedText = useEditorStore((s) => s.selectedText)
|
||||
const setSelectedText = useEditorStore((s) => s.setSelectedText)
|
||||
const selectedBackground = useEditorStore((s) => s.selectedBackground)
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Delete/Backspace → remove selected text
|
||||
if ((e.key === 'Delete' || e.key === 'Backspace') && selectedText) {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return
|
||||
e.preventDefault()
|
||||
handleDelete()
|
||||
}
|
||||
// Escape → deselect
|
||||
if (e.key === 'Escape' && canvas) {
|
||||
canvas.discardActiveObject()
|
||||
canvas.renderAll()
|
||||
setSelectedText(null)
|
||||
}
|
||||
// Ctrl/Cmd + E → export
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
|
||||
e.preventDefault()
|
||||
if (selectedBackground) onExport()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!canvas || !selectedText) return
|
||||
canvas.remove(selectedText)
|
||||
canvas.discardActiveObject()
|
||||
canvas.renderAll()
|
||||
setSelectedText(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
background: 'var(--bg-primary)',
|
||||
}}>
|
||||
{/* ─── Top Bar ─── */}
|
||||
<header style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: 48,
|
||||
padding: '0 16px',
|
||||
background: 'var(--bg-secondary)',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
flexShrink: 0,
|
||||
WebkitAppRegion: 'drag',
|
||||
} as React.CSSProperties & { WebkitAppRegion?: string }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)', letterSpacing: 1 }}>
|
||||
TinyLabel
|
||||
</span>
|
||||
<span style={{ fontSize: 12, color: 'var(--text-secondary)', marginLeft: 4 }}>
|
||||
图像文字编辑工具
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4, WebkitAppRegion: 'no-drag' } as React.CSSProperties & { WebkitAppRegion?: string }}>
|
||||
<Tooltip title="撤销">
|
||||
<Button type="text" icon={<UndoOutlined />} size="small" />
|
||||
</Tooltip>
|
||||
<Tooltip title="重做">
|
||||
<Button type="text" icon={<RedoOutlined />} size="small" />
|
||||
</Tooltip>
|
||||
<div style={{ width: 1, height: 20, background: 'var(--border-color)', margin: '0 8px' }} />
|
||||
<Tooltip title="删除选中对象">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined />}
|
||||
size="small"
|
||||
disabled={!selectedText}
|
||||
onClick={handleDelete}
|
||||
danger
|
||||
/>
|
||||
</Tooltip>
|
||||
<div style={{ width: 1, height: 20, background: 'var(--border-color)', margin: '0 8px' }} />
|
||||
<Tooltip title="切换左侧面板">
|
||||
<Button
|
||||
type={showToolPanel ? 'primary' : 'text'}
|
||||
icon={<MenuOutlined />}
|
||||
size="small"
|
||||
onClick={() => setShowToolPanel(!showToolPanel)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="切换右侧面板">
|
||||
<Button
|
||||
type={showPropertyPanel ? 'primary' : 'text'}
|
||||
icon={<PictureOutlined />}
|
||||
size="small"
|
||||
onClick={() => setShowPropertyPanel(!showPropertyPanel)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<div style={{ width: 1, height: 20, background: 'var(--border-color)', margin: '0 8px' }} />
|
||||
<Tooltip title="导出图片">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ExportOutlined />}
|
||||
onClick={onExport}
|
||||
disabled={!selectedBackground}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ─── Main Content ─── */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* Left Panel */}
|
||||
{showToolPanel && (
|
||||
<aside style={{
|
||||
width: 280,
|
||||
flexShrink: 0,
|
||||
background: 'var(--bg-secondary)',
|
||||
borderRight: '1px solid var(--border-color)',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<ToolPanel />
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* Center: Canvas */}
|
||||
<main style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--bg-canvas)',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}>
|
||||
<CanvasEditor />
|
||||
</main>
|
||||
|
||||
{/* Right Panel */}
|
||||
{showPropertyPanel && (
|
||||
<aside style={{
|
||||
width: 300,
|
||||
flexShrink: 0,
|
||||
background: 'var(--bg-secondary)',
|
||||
borderLeft: '1px solid var(--border-color)',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<PropertyPanel />
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
import { useCallback } from 'react'
|
||||
import {
|
||||
Select,
|
||||
Slider,
|
||||
InputNumber,
|
||||
ColorPicker,
|
||||
Collapse,
|
||||
Typography,
|
||||
Segmented,
|
||||
Switch,
|
||||
} from 'antd'
|
||||
import { useEditorStore } from '@/stores/editorStore'
|
||||
import type { FabricText } from 'fabric'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export default function PropertyPanel() {
|
||||
const canvas = useEditorStore((s) => s.canvas)
|
||||
const selectedText = useEditorStore((s) => s.selectedText)
|
||||
const textConfig = useEditorStore((s) => s.textConfig)
|
||||
const setTextConfig = useEditorStore((s) => s.setTextConfig)
|
||||
const fonts = useEditorStore((s) => s.fonts)
|
||||
|
||||
// Apply changes to Fabric object
|
||||
const applyToSelected = useCallback((changes: Record<string, any>) => {
|
||||
if (!canvas || !selectedText) return
|
||||
selectedText.set(changes)
|
||||
canvas.renderAll()
|
||||
}, [canvas, selectedText])
|
||||
|
||||
const handleFontFamily = (value: string) => {
|
||||
setTextConfig({ fontFamily: value })
|
||||
applyToSelected({ fontFamily: value })
|
||||
}
|
||||
|
||||
const handleFontSize = (value: number | null) => {
|
||||
if (!value) return
|
||||
setTextConfig({ fontSize: value })
|
||||
applyToSelected({ fontSize: value })
|
||||
}
|
||||
|
||||
const handleFontWeight = (value: number | null) => {
|
||||
if (value === null) return
|
||||
setTextConfig({ fontWeight: value })
|
||||
applyToSelected({ fontWeight: value })
|
||||
}
|
||||
|
||||
const handleFillColor = (value: string) => {
|
||||
setTextConfig({ fill: value })
|
||||
applyToSelected({ fill: value })
|
||||
}
|
||||
|
||||
const handleTextAlign = (value: string) => {
|
||||
setTextConfig({ textAlign: value as 'left' | 'center' | 'right' })
|
||||
applyToSelected({ textAlign: value })
|
||||
}
|
||||
|
||||
const handleStrokeColor = (value: string) => {
|
||||
setTextConfig({ stroke: value })
|
||||
applyToSelected({ stroke: value })
|
||||
}
|
||||
|
||||
const handleStrokeWidth = (value: number | null) => {
|
||||
if (!value && value !== 0) return
|
||||
setTextConfig({ strokeWidth: value })
|
||||
applyToSelected({ strokeWidth: value })
|
||||
}
|
||||
|
||||
const handleShadowColor = (value: string) => {
|
||||
setTextConfig({ shadowColor: value })
|
||||
applyShadow(value, textConfig.shadowBlur, textConfig.shadowOffsetX, textConfig.shadowOffsetY)
|
||||
}
|
||||
|
||||
const handleShadowBlur = (value: number | null) => {
|
||||
if (value === null) return
|
||||
setTextConfig({ shadowBlur: value })
|
||||
applyShadow(textConfig.shadowColor, value, textConfig.shadowOffsetX, textConfig.shadowOffsetY)
|
||||
}
|
||||
|
||||
const handleShadowOffsetX = (value: number | null) => {
|
||||
if (value === null) return
|
||||
setTextConfig({ shadowOffsetX: value })
|
||||
applyShadow(textConfig.shadowColor, textConfig.shadowBlur, value, textConfig.shadowOffsetY)
|
||||
}
|
||||
|
||||
const handleShadowOffsetY = (value: number | null) => {
|
||||
if (value === null) return
|
||||
setTextConfig({ shadowOffsetY: value })
|
||||
applyShadow(textConfig.shadowColor, textConfig.shadowBlur, textConfig.shadowOffsetX, value)
|
||||
}
|
||||
|
||||
const applyShadow = (color: string, blur: number, offsetX: number, offsetY: number) => {
|
||||
if (!selectedText || !canvas) return
|
||||
if (blur > 0 || offsetX !== 0 || offsetY !== 0) {
|
||||
selectedText.set({
|
||||
shadow: {
|
||||
color,
|
||||
blur,
|
||||
offsetX,
|
||||
offsetY,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
selectedText.set({ shadow: null })
|
||||
}
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const handleOpacity = (value: number | null) => {
|
||||
if (value === null) return
|
||||
setTextConfig({ opacity: value })
|
||||
applyToSelected({ opacity: value })
|
||||
}
|
||||
|
||||
if (!selectedText) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
padding: 24,
|
||||
color: 'var(--text-secondary)',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontSize: 40, marginBottom: 12 }}>✏️</div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 14 }}>
|
||||
选择画布中的文字
|
||||
</Text>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, marginTop: 4, opacity: 0.7 }}>
|
||||
点击「添加文字」或选中已有文字进行编辑
|
||||
</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: 'typography',
|
||||
label: '文字属性',
|
||||
children: (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{/* Font */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
字体
|
||||
</Text>
|
||||
<Select
|
||||
value={textConfig.fontFamily}
|
||||
onChange={handleFontFamily}
|
||||
style={{ width: '100%' }}
|
||||
size="small"
|
||||
showSearch
|
||||
options={fonts.map((f) => ({ value: f, label: f }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Size & Weight */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
字号
|
||||
</Text>
|
||||
<InputNumber
|
||||
value={textConfig.fontSize}
|
||||
onChange={handleFontSize}
|
||||
min={8}
|
||||
max={300}
|
||||
size="small"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
字重
|
||||
</Text>
|
||||
<Slider
|
||||
value={textConfig.fontWeight}
|
||||
onChange={handleFontWeight}
|
||||
min={100}
|
||||
max={900}
|
||||
step={100}
|
||||
marks={{ 100: '细', 400: '常规', 700: '粗', 900: '超' }}
|
||||
tooltip={{ formatter: (v) => `${v}` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
文字颜色
|
||||
</Text>
|
||||
<ColorPicker
|
||||
value={textConfig.fill}
|
||||
onChange={(c) => handleFillColor(c.toHexString())}
|
||||
size="small"
|
||||
style={{ width: '100%' }}
|
||||
showText
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Align */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
对齐方式
|
||||
</Text>
|
||||
<Segmented
|
||||
value={textConfig.textAlign}
|
||||
onChange={handleTextAlign}
|
||||
options={[
|
||||
{ value: 'left', label: '左' },
|
||||
{ value: 'center', label: '中' },
|
||||
{ value: 'right', label: '右' },
|
||||
]}
|
||||
block
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Opacity */}
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
不透明度 ({Math.round(textConfig.opacity * 100)}%)
|
||||
</Text>
|
||||
<Slider
|
||||
value={textConfig.opacity}
|
||||
onChange={handleOpacity}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
tooltip={{ formatter: (v) => `${Math.round(v! * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'stroke',
|
||||
label: '描边效果',
|
||||
children: (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '3fr 1fr', gap: 12, alignItems: 'center' }}>
|
||||
<ColorPicker
|
||||
value={textConfig.stroke}
|
||||
onChange={(c) => handleStrokeColor(c.toHexString())}
|
||||
size="small"
|
||||
showText
|
||||
disabled={textConfig.strokeWidth === 0}
|
||||
/>
|
||||
<InputNumber
|
||||
value={textConfig.strokeWidth}
|
||||
onChange={handleStrokeWidth}
|
||||
min={0}
|
||||
max={20}
|
||||
size="small"
|
||||
addonAfter="px"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
value={textConfig.strokeWidth}
|
||||
onChange={handleStrokeWidth}
|
||||
min={0}
|
||||
max={20}
|
||||
marks={{ 0: '关', 5: '5px', 10: '10px', 15: '15px' }}
|
||||
tooltip={{ formatter: (v) => `${v}px` }}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'shadow',
|
||||
label: '阴影效果',
|
||||
children: (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<ColorPicker
|
||||
value={textConfig.shadowColor}
|
||||
onChange={(c) => handleShadowColor(c.toHexString())}
|
||||
size="small"
|
||||
showText
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
模糊程度
|
||||
</Text>
|
||||
<Slider
|
||||
value={textConfig.shadowBlur}
|
||||
onChange={handleShadowBlur}
|
||||
min={0}
|
||||
max={50}
|
||||
marks={{ 0: '无', 10: '10', 25: '25', 50: '50' }}
|
||||
tooltip={{ formatter: (v) => `${v}px` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
水平偏移
|
||||
</Text>
|
||||
<InputNumber
|
||||
value={textConfig.shadowOffsetX}
|
||||
onChange={handleShadowOffsetX}
|
||||
min={-50}
|
||||
max={50}
|
||||
size="small"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text style={{ color: 'var(--text-secondary)', fontSize: 12, display: 'block', marginBottom: 6 }}>
|
||||
垂直偏移
|
||||
</Text>
|
||||
<InputNumber
|
||||
value={textConfig.shadowOffsetY}
|
||||
onChange={handleShadowOffsetY}
|
||||
min={-50}
|
||||
max={50}
|
||||
size="small"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}>
|
||||
<div style={{
|
||||
padding: '16px 16px 12px',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
}}>
|
||||
<Text strong style={{ fontSize: 13, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: 1 }}>
|
||||
属性
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '8px 12px' }}>
|
||||
<Collapse
|
||||
defaultActiveKey={['typography', 'stroke', 'shadow']}
|
||||
items={items}
|
||||
ghost
|
||||
size="small"
|
||||
style={{ background: 'transparent' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button, Upload, message, Typography } from 'antd'
|
||||
import { FolderOpenOutlined, UploadOutlined } from '@ant-design/icons'
|
||||
import { useEditorStore, type BackgroundImage } from '@/stores/editorStore'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export default function ToolPanel() {
|
||||
const backgrounds = useEditorStore((s) => s.backgrounds)
|
||||
const setBackgrounds = useEditorStore((s) => s.setBackgrounds)
|
||||
const selectedBackground = useEditorStore((s) => s.selectedBackground)
|
||||
const selectBackground = useEditorStore((s) => s.selectBackground)
|
||||
const backgroundsDir = useEditorStore((s) => s.backgroundsDir)
|
||||
const setBackgroundsDir = useEditorStore((s) => s.setBackgroundsDir)
|
||||
|
||||
// Try to load backgrounds from default directory on startup
|
||||
useEffect(() => {
|
||||
loadFromDefaultDir()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const loadFromDefaultDir = async () => {
|
||||
if (!window.electronAPI) return
|
||||
// Check if there's a backgrounds folder next to the app
|
||||
const images = await window.electronAPI.readImages('./backgrounds')
|
||||
if (images.length > 0) {
|
||||
setBackgrounds(images)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectDir = async () => {
|
||||
if (!window.electronAPI) return
|
||||
const dir = await window.electronAPI.selectDirectory()
|
||||
if (!dir) return
|
||||
setBackgroundsDir(dir)
|
||||
const images = await window.electronAPI.readImages(dir)
|
||||
if (images.length === 0) {
|
||||
message.info('该目录中没有找到图片文件')
|
||||
return
|
||||
}
|
||||
setBackgrounds(images)
|
||||
message.success(`已加载 ${images.length} 张背景图`)
|
||||
}
|
||||
|
||||
const handleUpload = (file: File) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const data = e.target?.result as string
|
||||
const newBg: BackgroundImage = {
|
||||
name: file.name,
|
||||
data,
|
||||
}
|
||||
setBackgrounds([...backgrounds, newBg])
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
return false // Prevent default upload
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
padding: '16px 16px 12px',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
}}>
|
||||
<Text strong style={{ fontSize: 13, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: 1 }}>
|
||||
背景图
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{
|
||||
padding: '12px 16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
}}>
|
||||
{window.electronAPI && (
|
||||
<Button
|
||||
icon={<FolderOpenOutlined />}
|
||||
onClick={handleSelectDir}
|
||||
block
|
||||
size="small"
|
||||
>
|
||||
选择文件夹
|
||||
</Button>
|
||||
)}
|
||||
<Upload
|
||||
accept="image/png,image/jpeg,image/webp,image/bmp"
|
||||
showUploadList={false}
|
||||
beforeUpload={handleUpload}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} block size="small">
|
||||
上传图片
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail grid */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
padding: '12px',
|
||||
}}>
|
||||
{backgrounds.length === 0 ? (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '32px 16px',
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: 13,
|
||||
}}>
|
||||
<div style={{ fontSize: 32, marginBottom: 8 }}>📁</div>
|
||||
<div>暂无背景图</div>
|
||||
<div style={{ marginTop: 4, fontSize: 12, opacity: 0.7 }}>
|
||||
选择文件夹或上传图片
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: 8,
|
||||
}}>
|
||||
{backgrounds.map((bg, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => selectBackground(bg)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
borderRadius: 6,
|
||||
overflow: 'hidden',
|
||||
border: selectedBackground === bg
|
||||
? '2px solid var(--accent)'
|
||||
: '2px solid transparent',
|
||||
transition: 'border-color 0.2s',
|
||||
aspectRatio: '16 / 10',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={bg.data}
|
||||
alt={bg.name}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '4px 6px',
|
||||
background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
|
||||
fontSize: 11,
|
||||
color: '#fff',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{bg.name}
|
||||
</div>
|
||||
{selectedBackground === bg && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 4,
|
||||
right: 4,
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: '50%',
|
||||
background: 'var(--accent)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
}}>
|
||||
✓
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-surface: #0f3460;
|
||||
--bg-panel: #1e1e3a;
|
||||
--bg-canvas: #2a2a4a;
|
||||
--text-primary: #e8e8f0;
|
||||
--text-secondary: #a0a0b8;
|
||||
--border-color: #2a2a4e;
|
||||
--accent: #7c5cfc;
|
||||
--accent-hover: #6a4ae0;
|
||||
--accent-light: rgba(124, 92, 252, 0.15);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, 'Noto Sans SC', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ─── Scrollbar ─── */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ─── Ant Design Overrides ─── */
|
||||
.ant-btn-primary {
|
||||
background: var(--accent) !important;
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
.ant-btn-primary:hover {
|
||||
background: var(--accent-hover) !important;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
background: var(--bg-panel) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
}
|
||||
.ant-modal-header {
|
||||
background: var(--bg-panel) !important;
|
||||
border-bottom-color: var(--border-color) !important;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
.ant-modal-close {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ant-slider-track {
|
||||
background: var(--accent) !important;
|
||||
}
|
||||
.ant-slider-handle::after {
|
||||
background: var(--accent) !important;
|
||||
box-shadow: 0 0 0 2px var(--accent) !important;
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
background: var(--bg-secondary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
.ant-select-arrow {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
background: var(--bg-secondary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
.ant-input-number-input {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.ant-collapse {
|
||||
background: transparent !important;
|
||||
}
|
||||
.ant-collapse-header {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
.ant-collapse-content {
|
||||
background: transparent !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
// 捕获渲染错误
|
||||
const rootEl = document.getElementById('root')
|
||||
|
||||
try {
|
||||
ReactDOM.createRoot(rootEl!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
} catch (err) {
|
||||
console.error('[tinylabel] render error:', err)
|
||||
rootEl!.innerHTML = `
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#1a1a2e;color:#e8e8f0;font-family:sans-serif;flex-direction:column;gap:12px">
|
||||
<div style="font-size:48px">⚠️</div>
|
||||
<div style="font-size:18px">应用加载失败</div>
|
||||
<pre style="color:#ff6b6b;font-size:13px;max-width:600px">${err instanceof Error ? err.message : String(err)}</pre>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { create } from 'zustand'
|
||||
import type { Canvas, FabricImage, FabricText, IText } from 'fabric'
|
||||
|
||||
export interface BackgroundImage {
|
||||
name: string
|
||||
data: string
|
||||
}
|
||||
|
||||
export interface TextEffect {
|
||||
type: 'stroke' | 'shadow' | 'none'
|
||||
enabled: boolean
|
||||
color?: string
|
||||
width?: number
|
||||
blur?: number
|
||||
offsetX?: number
|
||||
offsetY?: number
|
||||
}
|
||||
|
||||
export interface TextConfig {
|
||||
fontFamily: string
|
||||
fontSize: number
|
||||
fontWeight: number
|
||||
fill: string
|
||||
textAlign: 'left' | 'center' | 'right'
|
||||
stroke: string
|
||||
strokeWidth: number
|
||||
shadowColor: string
|
||||
shadowBlur: number
|
||||
shadowOffsetX: number
|
||||
shadowOffsetY: number
|
||||
opacity: number
|
||||
}
|
||||
|
||||
export interface ExportConfig {
|
||||
format: 'png' | 'jpeg' | 'webp'
|
||||
quality: number
|
||||
width: number
|
||||
height: number
|
||||
scaleFactor: number
|
||||
outputDir: string
|
||||
fileName: string
|
||||
}
|
||||
|
||||
interface EditorState {
|
||||
// Canvas
|
||||
canvas: Canvas | null
|
||||
setCanvas: (canvas: Canvas) => void
|
||||
|
||||
// Background images
|
||||
backgrounds: BackgroundImage[]
|
||||
selectedBackground: BackgroundImage | null
|
||||
setBackgrounds: (images: BackgroundImage[]) => void
|
||||
selectBackground: (image: BackgroundImage | null) => void
|
||||
|
||||
// Text objects on canvas
|
||||
selectedText: FabricText | null
|
||||
setSelectedText: (text: FabricText | null) => void
|
||||
|
||||
// Current text editing config (synced with selected object)
|
||||
textConfig: TextConfig
|
||||
setTextConfig: (config: Partial<TextConfig>) => void
|
||||
resetTextConfig: () => void
|
||||
|
||||
// Font list
|
||||
fonts: string[]
|
||||
setFonts: (fonts: string[]) => void
|
||||
|
||||
// Export
|
||||
exportConfig: ExportConfig
|
||||
setExportConfig: (config: Partial<ExportConfig>) => void
|
||||
|
||||
// App state
|
||||
backgroundsDir: string
|
||||
setBackgroundsDir: (dir: string) => void
|
||||
initialized: boolean
|
||||
setInitialized: (v: boolean) => void
|
||||
}
|
||||
|
||||
const DEFAULT_TEXT_CONFIG: TextConfig = {
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 48,
|
||||
fontWeight: 400,
|
||||
fill: '#ffffff',
|
||||
textAlign: 'center',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 0,
|
||||
shadowColor: '#000000',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
opacity: 1,
|
||||
}
|
||||
|
||||
const DEFAULT_EXPORT_CONFIG: ExportConfig = {
|
||||
format: 'png',
|
||||
quality: 92,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
scaleFactor: 1,
|
||||
outputDir: '',
|
||||
fileName: 'output',
|
||||
}
|
||||
|
||||
export const useEditorStore = create<EditorState>((set) => ({
|
||||
// Canvas
|
||||
canvas: null,
|
||||
setCanvas: (canvas) => set({ canvas }),
|
||||
|
||||
// Background images
|
||||
backgrounds: [],
|
||||
selectedBackground: null,
|
||||
setBackgrounds: (backgrounds) => set({ backgrounds }),
|
||||
selectBackground: (image) => set({ selectedBackground: image }),
|
||||
|
||||
// Text
|
||||
selectedText: null,
|
||||
setSelectedText: (text) => set({ selectedText: text }),
|
||||
|
||||
// Text config
|
||||
textConfig: { ...DEFAULT_TEXT_CONFIG },
|
||||
setTextConfig: (partial) =>
|
||||
set((state) => ({
|
||||
textConfig: { ...state.textConfig, ...partial },
|
||||
})),
|
||||
resetTextConfig: () => set({ textConfig: { ...DEFAULT_TEXT_CONFIG } }),
|
||||
|
||||
// Fonts
|
||||
fonts: [],
|
||||
setFonts: (fonts) => set({ fonts }),
|
||||
|
||||
// Export
|
||||
exportConfig: { ...DEFAULT_EXPORT_CONFIG },
|
||||
setExportConfig: (partial) =>
|
||||
set((state) => ({
|
||||
exportConfig: { ...state.exportConfig, ...partial },
|
||||
})),
|
||||
|
||||
// App
|
||||
backgroundsDir: '',
|
||||
setBackgroundsDir: (dir) => set({ backgroundsDir: dir }),
|
||||
initialized: false,
|
||||
setInitialized: (v) => set({ initialized: v }),
|
||||
}))
|
||||
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
/** Electron API exposed via preload script */
|
||||
export interface ElectronAPI {
|
||||
readImages(dirPath: string): Promise<{ name: string; data: string }[]>
|
||||
selectDirectory(): Promise<string>
|
||||
saveFile(filePath: string, base64Data: string): Promise<boolean>
|
||||
selectSavePath(defaultName: string): Promise<string>
|
||||
getFonts(): Promise<string[]>
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electronAPI: ElectronAPI
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/** Load system fonts via Electron IPC */
|
||||
export async function loadSystemFonts(): Promise<string[]> {
|
||||
try {
|
||||
if (window.electronAPI) {
|
||||
return await window.electronAPI.getFonts()
|
||||
}
|
||||
} catch {
|
||||
// Fallback for browser dev
|
||||
}
|
||||
return fallbackFonts()
|
||||
}
|
||||
|
||||
/** Fallback fonts when running in browser (dev mode) */
|
||||
export function fallbackFonts(): string[] {
|
||||
return [
|
||||
'Arial',
|
||||
'Arial Black',
|
||||
'Calibri',
|
||||
'Cambria',
|
||||
'Comic Sans MS',
|
||||
'Courier New',
|
||||
'Georgia',
|
||||
'Helvetica',
|
||||
'Impact',
|
||||
'Segoe UI',
|
||||
'Tahoma',
|
||||
'Times New Roman',
|
||||
'Trebuchet MS',
|
||||
'Verdana',
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import type { ExportConfig } from '@/stores/editorStore'
|
||||
import type { Canvas } from 'fabric'
|
||||
|
||||
/**
|
||||
* Export the canvas as an image with the specified config.
|
||||
* Returns the base64 data URL of the exported image.
|
||||
*/
|
||||
export function exportCanvasImage(
|
||||
canvas: Canvas,
|
||||
config: ExportConfig
|
||||
): string {
|
||||
const { format, quality, scaleFactor } = config
|
||||
|
||||
// Calculate export dimensions based on scale factor
|
||||
const multiplier = scaleFactor
|
||||
|
||||
// Use Fabric's toDataURL for export
|
||||
const mimeType = format === 'jpeg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png'
|
||||
const qualityValue = format === 'png' ? undefined : quality / 100
|
||||
|
||||
return canvas.toDataURL({
|
||||
format: mimeType as any,
|
||||
quality: qualityValue,
|
||||
multiplier,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Export and save the canvas to a file using Electron IPC.
|
||||
*/
|
||||
export async function exportAndSave(
|
||||
canvas: Canvas,
|
||||
config: ExportConfig
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
const dataUrl = exportCanvasImage(canvas, config)
|
||||
const ext = config.format === 'jpeg' ? 'jpg' : config.format
|
||||
const defaultName = `${config.fileName || 'output'}.${ext}`
|
||||
|
||||
let filePath: string
|
||||
if (window.electronAPI) {
|
||||
filePath = await window.electronAPI.selectSavePath(defaultName)
|
||||
if (!filePath) return false
|
||||
|
||||
const success = await window.electronAPI.saveFile(filePath, dataUrl)
|
||||
return success
|
||||
}
|
||||
|
||||
// Browser fallback: download via anchor
|
||||
const link = document.createElement('a')
|
||||
link.download = defaultName
|
||||
link.href = dataUrl
|
||||
link.click()
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error('Export failed:', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the file size estimate for the exported image.
|
||||
*/
|
||||
export function estimateFileSize(
|
||||
canvas: Canvas,
|
||||
config: ExportConfig
|
||||
): number {
|
||||
const dataUrl = exportCanvasImage(canvas, config)
|
||||
// Base64 length -> bytes approximation
|
||||
const base64Length = dataUrl.split(',')[1]?.length || 0
|
||||
return Math.round(base64Length * 0.75)
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string.
|
||||
*/
|
||||
export function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"ignoreDeprecations": "6.0",
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts", "electron"]
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import electron from 'vite-plugin-electron'
|
||||
import electronRenderer from 'vite-plugin-electron-renderer'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
electron([
|
||||
{
|
||||
entry: 'electron/main.ts',
|
||||
vite: {
|
||||
build: {
|
||||
outDir: 'dist-electron',
|
||||
rollupOptions: {
|
||||
external: ['electron'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
entry: 'electron/preload.ts',
|
||||
onstart(args) {
|
||||
args.reload()
|
||||
},
|
||||
vite: {
|
||||
build: {
|
||||
outDir: 'dist-electron',
|
||||
rollupOptions: {
|
||||
external: ['electron'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]),
|
||||
electronRenderer(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user