@hyxf/cover-editor 0.0.0-stage → 0.0.10

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# Cover Editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+基于 React、TypeScript、Vite 和 Fabric.js 的电子书封面编辑器。可在浏览器中创建封面、排版文字和装饰元素，并导出 PNG 图片。
+
+[项目主页与源码](https://github.com/hyxf/image-editor) · MIT License
+
+## 功能
+
+- 设置画布尺寸：使用常见宽高比、设备分辨率或自定义尺寸。
+- 设置背景：选择纯色或渐变，上传背景图并按画布比例裁剪。
+- 编辑元素：添加标题、作者文字、矩形、图片、贴图和智能徽章。
+- 调整文字样式：编辑内容、方向、字体、字号、字距、颜色和描边。
+- 拖动调整左侧编辑栏宽度；锁定、删除元素并调整图层顺序。
+- 导出为 2 倍分辨率 PNG。
+
+## 安装并运行
+
+### 作为命令行工具使用
+
+需要 Node.js 22.0.0 或更高版本：
+
+```bash
+npm install --global @hyxf/cover-editor
+ximage
+```
+
+命令会启动本地服务（默认端口 `3002`）；按终端提示在浏览器中打开编辑器。
+
+### 本地开发
+
+```bash
+git clone https://github.com/hyxf/image-editor.git
+cd image-editor
+pnpm install
+pnpm dev
+```
+
+Vite 会在终端显示本地开发地址。生产构建与检查命令：
+
+```bash
+pnpm build    # 类型检查并生成 dist/ 生产构建
+pnpm preview  # 本地预览生产构建
+```
+
+## 基本使用
+
+1. 在“画布与背景”中选择比例、设备预设或输入自定义尺寸。
+2. 设置纯色、渐变背景，或上传背景图。双击背景图可打开裁剪界面。
+3. 从“添加元素”插入文字、形状、图片或贴图；选中元素后在属性编辑区修改样式。
+4. 拖动元素调整位置；使用侧栏操作锁定、置顶、置底或删除元素。
+5. 点击“下载封面”导出 PNG。
+
+## 配置
+
+画布预设、颜色、字体和贴图路径集中在 `src/config.ts`。添加自定义字体时，将字体文件放入 `public/fonts/`，并在字体配置中填写名称、标识和以 `/fonts/` 开头的路径。贴图资源可放在 `public/icons/`，并添加到贴图列表。
+
+## 开发说明
+
+应用界面位于 `src/components/`，画布状态和 Fabric.js 操作位于 `src/hooks/useCanvasStore/`。提交前运行 `pnpm build`。目前仓库未配置自动化测试。
+
+## 发布
+
+发布新版本前更新版本号并推送提交和标签，然后发布 npm 包：
+
+```bash
+npm version patch
+git push
+git push --tags
+npm publish --access public
+```

package/bin/ximage.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+import { startServer } from '@hyxf/xbin'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+/* =========================
+ * Application
+ * ========================= */
+
+startServer({
+    name: 'ximage',
+    description: 'image editor',
+    defaultPort: 3002,
+    distDir: path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../dist')
+})