diff --git a/README.md b/README.md index 10840b7..ee9b0c9 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,69 @@ -# ScriptFlow +
+ ScriptFlow Logo -一个面向编导、短视频创作者、写作者的可视化脚本工作台。 + # ScriptFlow -把长文本脚本拆成卡片，在画布中自由拖拽、连线、批注、整理素材， -让脚本从「一大段文字」变成「可视化的内容结构」。 + 面向编导、短视频创作者、写作者的可视化脚本工作台。 -在线体验：在线体验：[flow.yolin02.top](https://flow.yolin02.top) + 把长文本脚本拆成卡片、素材、时间轴和结构关系，在一个画布中完成脚本拆解、编排与重组。 + + [在线体验](https://flow.yolin02.top) · [功能特性](#功能特性) · [快速开始](#快速开始) · [部署](#部署) · [License](#license) + +
+ + ![React](https://img.shields.io/badge/React-19-20232a?style=flat-square&logo=react) + ![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?style=flat-square&logo=typescript&logoColor=white) + ![Vite](https://img.shields.io/badge/Vite-6.x-646cff?style=flat-square&logo=vite&logoColor=white) + ![React Flow](https://img.shields.io/badge/React%20Flow-12.x-ff0072?style=flat-square) + ![License](https://img.shields.io/badge/License-Apache--2.0-blue?style=flat-square) +
+ +
+ +## 预览 + +ScriptFlow Preview + +## 简介 + +ScriptFlow 是一个将「脚本文本」和「可视化结构」结合起来的创作工具。 + +你可以在左侧编写完整脚本，在右侧把段落拆成卡片，通过连线、图片、表格、时间轴和模板整理创作逻辑。相比纯 Word、Markdown 或 Excel，ScriptFlow 更适合处理脚本中的结构关系、素材引用和非线性编排。 + +## 适用场景 -适合： - 短视频脚本拆解 - 影视解说文案结构整理 -- 内容策划脑图 -- 文案段落切片 +- 内容策划和镜头逻辑梳理 +- 文案段落切片与重组 - 图片素材与脚本文字对应 -- 编导替代 Excel / Word 做脚本排版 - -image - +- 用可视化画布替代 Excel / Word 做脚本排版 ## 功能特性 -- 富文本写作：基于 Tiptap，支持标题、列表、引用、加粗、斜体等基础编辑能力。 -- 段落切片：可将选区或段落快速生成画布节点。 -- 可视化画布：支持节点拖拽、缩放、框选、多选、连线、复制粘贴、对齐和分布。 -- 多类型节点：支持文本、图片、灵感、表格、时间轴等节点类型。 -- 节点模板：可将框选区域保存为模板，并在画布中再次插入。 -- 媒体库：支持图片上传、插入图片节点和资源管理。 -- Markdown：支持 Markdown 导入与导出。 -- 查找替换：支持正文查找、替换、全部替换和结果跳转。 -- 本地保存：使用浏览器本地存储保存工作区状态。 -- 静态部署：构建后可部署到任意静态资源服务。 +- **富文本脚本编辑**：基于 Tiptap，支持标题、列表、引用、加粗、斜体等基础编辑能力。 +- **段落切片**：可将正文选区或段落快速生成画布节点。 +- **可视化画布**：基于 React Flow，支持拖拽、缩放、框选、多选、连线、复制粘贴、对齐和分布。 +- **多类型节点**：支持文本、图片、灵感、表格、时间轴等节点类型。 +- **节点模板**：可将框选区域保存为模板，并在画布中再次插入。 +- **媒体库**：支持图片上传、图片节点插入和素材资源管理。 +- **Markdown 导入导出**：支持 Markdown 文件导入与导出。 +- **查找替换**：支持正文查找、替换、全部替换和结果跳转。 +- **本地优先存储**：使用 IndexedDB 保存工作区状态，无需后端即可运行。 +- **静态部署**：构建后可部署到任意静态资源服务。 ## 技术栈 -- React 19 -- TypeScript -- Vite -- Tailwind CSS -- Tiptap -- React Flow / `@xyflow/react` -- Lucide React -- IndexedDB +| 类型 | 技术 | +| --- | --- | +| 应用框架 | React 19 | +| 开发语言 | TypeScript | +| 构建工具 | Vite | +| 样式 | Tailwind CSS | +| 富文本编辑 | Tiptap | +| 可视化画布 | React Flow / `@xyflow/react` | +| 图标 | Lucide React | +| 本地存储 | IndexedDB | ## 快速开始 @@ -94,7 +117,7 @@ src/ index.css # 全局样式 ``` -## 构建部署 +## 部署 执行生产构建： @@ -108,19 +131,7 @@ npm run build dist/ ``` -该项目是纯前端静态应用，部署时只需要发布 `dist/` 目录即可。可部署到 Nginx、GitHub Pages、Vercel、Netlify、Cloudflare Pages、对象存储或其他静态资源服务器。 - -## 为什么做 ScriptFlow？ - -传统脚本写作通常会遇到几个问题： - -- Word / Markdown 适合写正文，但不适合整理镜头、素材和批注 -- Excel 可以排表格，但排版不直观，拖拽和结构关系很弱 -- 思维导图适合发散，但不适合承载完整脚本文本 -- 专业剪辑软件太重，不适合前期编导策划 - -ScriptFlow 想解决的是： -让编导在写脚本时，就能把正文、素材、批注、结构关系放在同一个画布里。 +ScriptFlow 是纯前端静态应用，部署时只需要发布 `dist/` 目录。可以部署到 Nginx、GitHub Pages、Vercel、Netlify、Cloudflare Pages、对象存储或其他静态资源服务器。 ## 本地数据 @@ -139,4 +150,6 @@ ScriptFlow 默认将工作区数据保存在当前浏览器中，包括正文内 - 当前项目不包含账号、登录、多人协作或云端同步。 - 修改后建议至少执行 `npm run lint` 和 `npm run build`。 +## License +本项目基于 Apache License 2.0 开源，详情请查看 [LICENSE](./LICENSE)。 diff --git a/src/index.css b/src/index.css index 3225588..5beb41c 100644 --- a/src/index.css +++ b/src/index.css @@ -192,12 +192,12 @@ border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); cursor: crosshair !important; - transition: transform 0.15s ease, background-color 0.15s ease; + transition: background-color 0.15s ease, box-shadow 0.15s ease; } .react-flow__handle:hover { - transform: scale(1.22); background-color: #000000 !important; + box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.12), 0 1px 4px rgba(0, 0, 0, 0.14); } .react-flow__handle.custom-node-handle { @@ -209,8 +209,8 @@ } .react-flow__handle.custom-node-handle:hover { - transform: scale(1.3); background-color: #111827 !important; + box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12), 0 1px 4px rgba(0, 0, 0, 0.14); } .react-flow__connection-path {