Docs/improve readme

README.md

@@ -1,46 +1,69 @@
-# ScriptFlow
+<div align="center">
+  <img src="./public/scriptflow-brand-icon.png" width="96" height="96" alt="ScriptFlow Logo" />
 
-一个面向编导、短视频创作者、写作者的可视化脚本工作台。
+  # ScriptFlow
 
-把长文本脚本拆成卡片，在画布中自由拖拽、连线、批注、整理素材，
-让脚本从「一大段文字」变成「可视化的内容结构」。
+  面向编导、短视频创作者、写作者的可视化脚本工作台。
 
-在线体验：在线体验：[flow.yolin02.top](https://flow.yolin02.top)
+  把长文本脚本拆成卡片、素材、时间轴和结构关系，在一个画布中完成脚本拆解、编排与重组。
+
+  [在线体验](https://flow.yolin02.top) · [功能特性](#功能特性) · [快速开始](#快速开始) · [部署](#部署) · [License](#license)
+
+  <br />
+
+  ![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)
+</div>
+
+<br />
+
+## 预览
+
+<img width="2152" height="1383" alt="ScriptFlow Preview" src="https://github.com/user-attachments/assets/f3ee50ec-0678-49cf-9fdd-93943eb9e3a6" />
+
+## 简介
+
+ScriptFlow 是一个将「脚本文本」和「可视化结构」结合起来的创作工具。
+
+你可以在左侧编写完整脚本，在右侧把段落拆成卡片，通过连线、图片、表格、时间轴和模板整理创作逻辑。相比纯 Word、Markdown 或 Excel，ScriptFlow 更适合处理脚本中的结构关系、素材引用和非线性编排。
+
+## 适用场景
 
-适合：
 - 短视频脚本拆解
 - 影视解说文案结构整理
-- 内容策划脑图
-- 文案段落切片
+- 内容策划和镜头逻辑梳理
+- 文案段落切片与重组
 - 图片素材与脚本文字对应
-- 编导替代 Excel / Word 做脚本排版
-
-<img width="2152" height="1383" alt="image" src="https://github.com/user-attachments/assets/f3ee50ec-0678-49cf-9fdd-93943eb9e3a6" />
-
+- 用可视化画布替代 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)。

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 {