chore(version): 更新版本号并完善变更日志

- 更新版本号从 v0.0.9 到 v0.1.0
- 在变更日志中添加 v0.1.0 版本记录
- 记录优化我的画布、我的素材导出功能
- 记录修复画布撤销、配置节点等 bug 问题

AGENTS.md

@@ -6,6 +6,7 @@
 
 - 先读现有代码，再动手修改，优先沿用项目已有结构和写法。
 - 写代码保持最少行数，能简单实现就不要引入复杂抽象。
+- 标准格式、协议、解析、压缩、加密、日期等通用能力优先使用成熟稳定的库，不要手写底层实现，除非用户明确要求或项目已有实现必须沿用。
 - 不要为了“兼容更多场景”写大量分支，只实现当前明确需要的功能。
 - 项目尚未上线，不需要兼容旧数据；表结构或字段调整时直接按新设计修改，不写旧字段兼容、数据迁移兜底或删除旧表的清理逻辑，除非用户明确要求。
 - 每次写完代码，不需要检查语法，不需要执行构建，用户会自己做。
@@ -59,6 +60,7 @@
 - 优先使用 `canvasThemes`、`useThemeStore` 或 Ant Design `ConfigProvider` token。
 - 不要硬编码黑白、stone、slate 等颜色导致浅色/深色主题不一致。
 - 新增画布按钮、弹窗、浮层时，尽量复用已有工具栏、节点面板、Modal 的视觉风格。
+- 画布顶部工具栏和状态信息优先采用极简扁平风格：无边框、无阴影、无胶囊背景，融入整体背景，弱化按钮感，仅保留轻微 hover 反馈，保持简洁现代、低视觉重量。
 - 图片节点尺寸逻辑要尊重原始比例，除非功能明确要求自由变形。
 - 批量生成、多图展示、助手面板等画布交互要尽量简洁，不要占用过多画布空间。
 

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+## v0.1.0 - 2026-05-26
+
++ [优化] 优化我的画布、我的素材导出功能
++ [修复] 修复画布撤销，配置节点等bug问题
+
+## v0.0.9 - 2026-05-26
+
++ [新增] 新增视频创作台页面。
++ [修复] 修复图片节点size参数传递问题。
+
+## v0.0.8 - 2026-05-24
+
++ [新增] 新增用户账号与算力点体系，支持账号密码注册登录、Linux.do OAuth。
++ [新增] 管理后台公开配置支持设置模型算力点、支持计费查询。
++ [新增] 画布右上角展示用户算力点余额，生成按钮会展示本次预计消耗算力点。
++ [新增] 新增视频生成节点。
+
 ## v0.0.7 - 2026-05-23
 
 + [新增] 管理后台提示词管理支持多选批量删除。

VERSION

@@ -1 +1 @@
-v0.0.6
+v0.1.0

config/config.go

@@ -10,13 +10,16 @@ import (
 )
 
 type Config struct {
-	Port           string `env:"PORT" envDefault:"8080"`
+	Port                string `env:"PORT" envDefault:"8080"`
-	AdminUsername  string `env:"ADMIN_USERNAME" envDefault:"admin"`
+	AdminUsername       string `env:"ADMIN_USERNAME" envDefault:"admin"`
-	AdminPassword  string `env:"ADMIN_PASSWORD" envDefault:"infinite-canvas"`
+	AdminPassword       string `env:"ADMIN_PASSWORD" envDefault:"infinite-canvas"`
-	JWTSecret      string `env:"JWT_SECRET" envDefault:"infinite-canvas"`
+	JWTSecret           string `env:"JWT_SECRET" envDefault:"infinite-canvas"`
-	JWTExpireHours int    `env:"JWT_EXPIRE_HOURS" envDefault:"168"`
+	JWTExpireHours      int    `env:"JWT_EXPIRE_HOURS" envDefault:"168"`
-	StorageDriver  string `env:"STORAGE_DRIVER" envDefault:"sqlite"`
+	StorageDriver       string `env:"STORAGE_DRIVER" envDefault:"sqlite"`
-	DatabaseDSN    string `env:"DATABASE_DSN" envDefault:"data/infinite-canvas.db"`
+	DatabaseDSN         string `env:"DATABASE_DSN" envDefault:"data/infinite-canvas.db"`
+	LinuxDoAuthorizeURL string `env:"LINUX_DO_AUTHORIZE_URL" envDefault:"https://connect.linux.do/oauth2/authorize"`
+	LinuxDoTokenURL     string `env:"LINUX_DO_TOKEN_URL" envDefault:"https://connect.linux.do/oauth2/token"`
+	LinuxDoUserInfoURL  string `env:"LINUX_DO_USERINFO_URL" envDefault:"https://connect.linux.do/api/user"`
 }
 
 var Cfg Config

docs/backend-database.md

@@ -1,6 +1,6 @@
 # 后端数据库说明
 
-本文档记录后端当前已经使用，以及后续规划会用到的主要数据表。
+本文档只记录后端当前已经使用的主要数据表。
 
 ## 数据库
 
@@ -15,15 +15,16 @@
 当前启动时执行 `AutoMigrate`，自动维护以下表：
 
 - `users`
+- `credit_logs`
 - `prompts`
 - `assets`
 - `settings`
 
-后续新增表时，优先保持表数量少，能用字段或 JSON 表达的配置、状态、统计和扩展信息先不拆表。
+后续新增表时再同步补充本文档，未实际使用的规划表不提前写入。
 
 ### users
 
-系统用户表。用户基础信息、角色、算力点余额和邀请关系放在该表中。
+系统用户表。用户基础信息、角色、算力点余额和第三方登录标识放在该表中。
 
 | 字段              | 类型     | 说明                       |
 |-----------------|--------|--------------------------|
@@ -34,22 +35,22 @@
 | `display_name`  | string | 昵称                       |
 | `avatar_url`    | string | 头像地址                     |
 | `role`          | string | 角色：`user`、`admin`        |
-| `credits`       | number | 算力点余额，规划字段               |
+| `credits`       | number | 算力点余额                    |
-| `aff_code`      | string | 用户自己的邀请码，唯一索引，规划字段       |
+| `aff_code`      | string | 用户自己的邀请码，唯一索引            |
-| `aff_count`     | number | 已邀请用户数量，冗余统计字段，规划字段      |
+| `aff_count`     | number | 已邀请用户数量，冗余统计字段           |
-| `inviter_id`    | string | 邀请人用户 ID，规划字段            |
+| `inviter_id`    | string | 邀请人用户 ID                 |
-| `github_id`     | string | GitHub 用户 ID，规划字段        |
+| `github_id`     | string | GitHub 用户 ID               |
-| `linux_do_id`   | string | Linux.do 用户 ID，规划字段      |
+| `linux_do_id`   | string | Linux.do 用户 ID            |
-| `wechat_id`     | string | 微信用户 ID，规划字段             |
+| `wechat_id`     | string | 微信用户 ID                   |
-| `status`        | string | 用户状态：`active`、`ban`，规划字段 |
+| `status`        | string | 用户状态：`active`、`ban`       |
 | `last_login_at` | string | 最近登录时间                   |
-| `extra`         | json   | 扩展信息                     |
+| `extra`         | json   | 扩展信息，第三方资料按平台命名空间保存，如 `linuxDo` |
 | `created_at`    | string | 创建时间                     |
 | `updated_at`    | string | 更新时间                     |
 
 ### prompts
 
-提示词表。后续公开提示词、内置 GitHub 系统提示词、分类和扩展信息都优先放在该表字段或 JSON 中。
+提示词表。用于保存公开提示词、内置 GitHub 系统提示词、分类和预览内容。
 
 | 字段           | 类型     | 说明                           |
 |--------------|--------|------------------------------|
@@ -59,9 +60,7 @@
 | `prompt`     | string | 提示词内容                        |
 | `tags`       | json   | 标签列表                         |
 | `category`   | string | 分类标识                         |
-| `visibility` | string | 可见性：公开、私有、系统内置等，规划字段         |
 | `preview`    | text   | Markdown 展示内容，可包含文本、图片、视频链接等 |
-| `extra`      | json   | 扩展信息                         |
 | `created_at` | string | 创建时间                         |
 | `updated_at` | string | 更新时间                         |
 
@@ -69,25 +68,19 @@
 
 ### assets
 
-素材表。当前用于素材库；后续通过 `user_id`、`visibility`、`type` 区分系统公开素材和用户私有素材。
+素材表。当前用于后台素材库。
 
 | 字段               | 类型     | 说明                            |
 |------------------|--------|-------------------------------|
 | `id`             | string | 主键                            |
-| `user_id`        | string | 所属用户，为空或系统用户表示公开素材，规划字段       |
 | `title`          | string | 标题                            |
 | `type`           | string | 素材类型：`text`、`image`、`video` 等 |
-| `visibility`     | string | 可见性：公开、私有，规划字段                |
 | `cover_url`      | string | 封面图                           |
 | `tags`           | json   | 标签列表                          |
 | `category`       | string | 分类标识                          |
 | `description`    | string | 描述                            |
 | `content`        | text   | 文本或 Markdown 内容               |
 | `url`            | string | 图片、视频等媒体地址                    |
-| `like_count`     | number | 点赞量，规划字段                      |
-| `favorite_count` | number | 收藏量，规划字段                      |
-| `view_count`     | number | 查看量，规划字段                      |
-| `extra`          | json   | 扩展信息，规划字段                     |
 | `created_at`     | string | 创建时间                          |
 | `updated_at`     | string | 更新时间                          |
 
@@ -102,8 +95,8 @@
 | `created_at` | string | 创建时间                  |
 | `updated_at` | string | 更新时间                  |
 
-`public.value` 常放前端展示和可公开读取的配置，例如模型列表、订阅套餐、功能开关等。
+`public.value` 常放前端展示和可公开读取的配置，例如模型列表、登录开关等。
-`private.value` 常放渠道密钥、支付配置、奖励规则、后台内部开关等。
+`private.value` 常放渠道密钥、登录密钥、后台内部开关等。
 
 当前系统设置接口会按后端结构体序列化和反序列化已知字段；数据库 JSON 中额外存在的旧字段会被忽略。
 
@@ -112,24 +105,41 @@
 | 字段                | 类型       | 说明             |
 |-------------------|----------|----------------|
 | `modelChannel` | object | 模型渠道公开配置组 |
+| `auth` | object | 公开登录配置 |
 
 `modelChannel` 当前字段：
 
 | 字段                | 类型       | 说明             |
 |-------------------|----------|----------------|
 | `availableModels` | string[] | 系统可用模型列表       |
+| `modelCosts` | object[] | 模型算力点配置       |
 | `defaultModel`    | string   | 默认模型           |
 | `defaultImageModel` | string | 默认图片模型         |
+| `defaultVideoModel` | string | 默认视频模型         |
 | `defaultTextModel` | string  | 默认文本模型         |
 | `systemPrompt`    | string   | 系统提示词          |
 | `allowCustomChannel` | bool    | 是否允许用户自定义渠道，默认允许，关闭后前端只提供走后端渠道的模式 |
 
+`modelCosts` 每项字段：
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `model` | string | 模型名称 |
+| `credits` | number | 每次后端模型接口调用前预扣的算力点，未配置默认不扣除 |
+
+`auth.linuxDo` 当前字段：
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `enabled` | bool | 是否开启 Linux.do 登录 |
+
 `private.value` 当前字段：
 
 | 字段         | 类型       | 说明       |
 |------------|----------|----------|
 | `channels` | object[] | 模型渠道配置列表 |
 | `promptSync` | object | GitHub 远程提示词定时同步配置 |
+| `auth` | object | 私有登录配置 |
 
 `channels` 每项字段：
 
@@ -151,133 +161,35 @@
 | `enabled` | bool | 是否开启定时同步，默认开启 |
 | `cron` | string | Cron 表达式，默认每 5 分钟 |
 
+`auth.linuxDo` 当前字段：
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `clientId` | string | Linux.do OAuth App Client ID |
+| `clientSecret` | string | Linux.do OAuth App Client Secret，后台返回时隐藏 |
+
 后端请求模型时，先按模型名筛选启用且包含该模型的渠道，再按 `weight` 加权随机选择一个渠道。
 
-### dicts
-
-字典表。一个字典一行，具体字典项数据放在 `items`。
-
-| 字段           | 类型     | 说明    |
-|--------------|--------|-------|
-| `code`       | string | 字典编码  |
-| `name`       | string | 字典名称  |
-| `remark`     | string | 备注    |
-| `items`      | text   | 字典值数据 |
-| `created_at` | string | 创建时间  |
-| `updated_at` | string | 更新时间  |
-
-可维护分类、标签、业务枚举、模型分类、日志类型等。
-
 ### credit_logs
 
-用户算力点变更流水表。充值、消费、订阅扣减、邀请奖励、后台调整等余额变化都写入该表。
+用户算力点变更流水表。当前记录后台手动调整、模型调用预扣和模型调用失败返还。
 
 | 字段           | 类型     | 说明                       |
 |--------------|--------|--------------------------|
 | `id`         | string | 主键                       |
 | `user_id`    | string | 关联用户 ID                  |
-| `type`       | string | 类型：充值、消费、订阅扣减、邀请奖励、后台调整等 |
+| `type`       | string | 类型：`admin_adjust`、`ai_consume`、`ai_refund` |
 | `amount`     | number | 本次变动数量，增加为正，扣减为负         |
 | `balance`    | number | 变动后的用户算力点余额              |
-| `related_id` | string | 关联订单、任务或日志 ID，可为空        |
+| `related_id` | string | 关联业务 ID，可为空                |
 | `remark`     | string | 备注                       |
 | `extra`      | json   | 扩展信息                     |
 | `created_at` | string | 创建时间                     |
 
-### orders
+`type` 当前取值：
 
-订单表。统一记录充值、订阅购买等支付订单。
+| 值 | 说明 |
-
+| --- | --- |
-| 字段                  | 类型     | 说明                   |
+| `admin_adjust` | 后台手动调整 |
-|---------------------|--------|----------------------|
+| `ai_consume` | 调用后端模型接口消费 |
-| `id`                | string | 主键                   |
+| `ai_refund` | 后端模型接口调用失败返还 |
-| `user_id`           | string | 关联用户 ID              |
-| `type`              | string | 订单类型：充值、订阅等          |
-| `provider`          | string | 支付渠道：Linux LDC、聚合支付等 |
-| `amount`            | number | 支付金额                 |
-| `credits`           | number | 到账算力点                |
-| `status`            | string | 订单状态：待支付、已支付、失败、关闭等  |
-| `provider_order_id` | string | 第三方订单号               |
-| `extra`             | json   | 扩展信息                 |
-| `created_at`        | string | 创建时间                 |
-| `paid_at`           | string | 支付时间                 |
-| `updated_at`        | string | 更新时间                 |
-
-### subscriptions
-
-用户订阅表。一个用户可以有多个订阅记录，套餐配置放在 `settings.public.value` 中。
-
-| 字段              | 类型     | 说明                                       |
-|-----------------|--------|------------------------------------------|
-| `id`            | string | 主键                                       |
-| `user_id`       | string | 关联用户 ID                                  |
-| `plan_key`      | string | 套餐标识，对应 `settings.public.value` 中的订阅套餐配置 |
-| `order_id`      | string | 关联订单 ID，可为空                              |
-| `status`        | string | 状态：生效中、已过期、已取消等                          |
-| `total_credits` | number | 订阅总额度                                    |
-| `used_credits`  | number | 已使用额度                                    |
-| `started_at`    | string | 开始时间                                     |
-| `expired_at`    | string | 过期时间                                     |
-| `extra`         | json   | 扩展信息                                     |
-| `created_at`    | string | 创建时间                                     |
-| `updated_at`    | string | 更新时间                                     |
-
-### files
-
-文件表。用于统一管理上传图片、视频等文件，保存最终可访问地址。缩略图和视频封面优先按 URL 命名规则推导，特殊情况放在
-`extra.coverUrl`。
-
-| 字段           | 类型     | 说明          |
-|--------------|--------|-------------|
-| `id`         | string | 主键          |
-| `user_id`    | string | 上传用户 ID，可为空 |
-| `name`       | string | 原始文件名       |
-| `url`        | string | 完整可访问地址     |
-| `mime_type`  | string | MIME 类型     |
-| `size`       | number | 文件大小        |
-| `extra`      | json   | 扩展信息        |
-| `created_at` | string | 创建时间        |
-
-### canvases
-
-画布表。保存用户私有画布、公开画布和模板，分享、协作、审核等低频配置放在 `extra`。
-
-| 字段               | 类型     | 说明                                          |
-|------------------|--------|---------------------------------------------|
-| `id`             | string | 主键                                          |
-| `user_id`        | string | 所属用户 ID                                     |
-| `title`          | string | 画布标题                                        |
-| `description`    | string | 描述                                          |
-| `cover_url`      | string | 封面图                                         |
-| `data`           | json   | 画布节点、边、视图等数据                                |
-| `visibility`     | string | 可见性：`private`、`public`                      |
-| `status`         | string | 状态：`draft`、`pending`、`published`、`rejected` |
-| `is_template`    | bool   | 是否模板                                        |
-| `view_count`     | number | 查看量                                         |
-| `like_count`     | number | 点赞量                                         |
-| `favorite_count` | number | 收藏量                                         |
-| `copy_count`     | number | 复制量                                         |
-| `extra`          | json   | 扩展信息，如分享、协作、审核备注等                           |
-| `created_at`     | string | 创建时间                                        |
-| `updated_at`     | string | 更新时间                                        |
-
-### generation_tasks
-
-接口调用队列表。用于图片、文本、图生图等后端模型调用的排队、状态和结果记录。
-
-| 字段            | 类型     | 说明                   |
-|---------------|--------|----------------------|
-| `id`          | string | 主键                   |
-| `user_id`     | string | 发起用户 ID              |
-| `type`        | string | 任务类型：文本生成、文生图、图生图等   |
-| `model`       | string | 使用模型                 |
-| `channel`     | string | 使用渠道                 |
-| `status`      | string | 状态：排队中、执行中、成功、失败、取消等 |
-| `credits`     | number | 扣除算力点                |
-| `input`       | json   | 请求参数                 |
-| `output`      | json   | 生成结果                 |
-| `error`       | string | 错误信息                 |
-| `extra`       | json   | 扩展信息                 |
-| `created_at`  | string | 创建时间                 |
-| `started_at`  | string | 开始时间                 |
-| `finished_at` | string | 完成时间                 |

docs/canvas-data-structure.md

@@ -9,8 +9,9 @@
 - 画布项目 JSON：`localForage`，数据库名 `infinite-canvas`，storeName `app_state`，key 为 `infinite-canvas:canvas_store`。
 - 我的素材 JSON：`localForage`，数据库名 `infinite-canvas`，storeName `app_state`，key 为 `infinite-canvas:asset_store`。
 - 图片 Blob：单独存到 `localForage` 实例，数据库名 `infinite-canvas`，storeName `image_files`。
+- 视频等媒体 Blob：单独存到 `localForage` 实例，数据库名 `infinite-canvas`，storeName `media_files`。
 
-画布 JSON 不直接长期保存大体积 base64 图片。图片节点、助手图片和素材图片只保存展示 URL、`storageKey` 和图片元信息，真实图片 Blob 通过 `storageKey` 读取。
+画布 JSON 不直接长期保存大体积 base64 图片或视频。图片节点、视频节点、助手图片和素材媒体只保存展示 URL、`storageKey` 和元信息，真实 Blob 通过 `storageKey` 读取。
 
 ## 画布项目结构
 
@@ -50,7 +51,7 @@ type CanvasProject = {
 ```ts
 type CanvasNodeData = {
   id: string;
-  type: "image" | "text" | "config";
+  type: "image" | "text" | "config" | "video";
   title: string;
   position: { x: number; y: number };
   width: number;
@@ -62,7 +63,7 @@ type CanvasNodeData = {
 通用字段：
 
 - `id`：节点 ID。
-- `type`：节点类型，当前有图片、文本、生成配置三类。
+- `type`：节点类型，当前有图片、文本、生成配置、视频四类。
 - `title`：节点标题。
 - `position`：画布世界坐标，不是屏幕坐标。
 - `width` / `height`：画布世界坐标下的节点尺寸。
@@ -77,7 +78,7 @@ type CanvasNodeMetadata = {
   status?: "idle" | "success" | "loading" | "error";
   errorDetails?: string;
   fontSize?: number;
-  generationMode?: "text" | "image";
+  generationMode?: "text" | "image" | "video";
   model?: string;
   size?: string;
   count?: number;
@@ -99,8 +100,9 @@ type CanvasNodeMetadata = {
 不同节点的使用方式：
 
 - 图片节点：`content` 是当前可展示的图片 URL，通常是 `blob:` URL；`storageKey` 指向本地图片 Blob；`naturalWidth/naturalHeight/bytes/mimeType` 保存原图信息。
+- 视频节点：`content` 是当前可播放的视频 URL，通常是 `blob:` URL；`storageKey` 指向本地视频 Blob；`bytes/mimeType` 保存文件信息。
 - 文本节点：`content` 保存文本内容；`fontSize` 保存字体大小；`prompt/status/errorDetails` 保存生成状态。
-- 生成配置节点：`generationMode/model/size/count/inputOrder` 保存生成配置；上游输入通过 `connections` 计算。
+- 生成配置节点：`generationMode/model/size/count/inputOrder` 保存生成配置；`generationMode` 可选择文本、图片或视频；上游输入通过 `connections` 计算。
 - 图片组节点：根节点用 `isBatchRoot/batchChildIds/primaryImageId/imageBatchExpanded` 记录批量生成结果；子图节点用 `batchRootId` 指回根节点。
 
 ## 连线结构

docs/canvas-node-manual.md

@@ -39,6 +39,14 @@
 - 每个生成出来的图片节点都会在自身 `metadata` 下记录提示词、生成类型、模型、尺寸、质量、数量和参考图引用，方便后续重试。
 - 如果重试时参考图已经丢失或无法恢复，系统会直接提示，避免误发空的图生图请求。
 
+### 视频节点
+
+- 工具栏可以新建视频节点，也可以拖入或上传本地视频文件。
+- 视频节点使用原生播放器展示内容，可在节点内直接播放、暂停和拖动进度。
+- 空视频节点下方对话框可输入提示词生成视频，结果会回填到当前节点。
+- 从文本、图片或配置节点创建视频生成时，会在右侧生成新的视频节点并自动连接。
+- 视频生成接口使用 OpenAI 兼容的 `POST /v1/videos`、`GET /v1/videos/{id}` 和 `GET /v1/videos/{id}/content`。
+
 ### 推荐流程
 
 1. 新建文本节点，写入图片创作想法。

docs/pending-test.md

@@ -1,10 +1,23 @@
 # 待测试
 
-- 模型选择器改为共享的 shadcn 风格下拉，按模型名称显示 OpenAI、Claude、Gemini 图标，并把画布节点下方、右侧助手和配置弹窗统一到同一套组件；右侧助手的模型和模式按钮会随工具栏宽度自动在文字态和图标态之间切换，需要确认生图页、画布助手、节点配置和配置弹窗中的选中态和下拉列表显示正常。
+- 画布项目导出改为下载 `.zip` 压缩包，包内包含 `projects.json` 和当前画布引用到的本地图片、视频文件，避免只导出 JSON 时丢失媒体内容。
-- 画布图像设置里的尺寸输入去掉了原生数字步进箭头，需要确认宽高仍可直接输入、禁用态正常、设置值回写正常。
+- 画布库支持多选后一键导出多个画布项目，导出的压缩包可一次恢复多个项目。
-- 后台提示词定时同步默认改为开启且默认每 5 分钟执行一次，需要确认新环境未保存过设置时开关默认打开、Cron 默认值正确，用户手动关闭或修改 Cron 后能保持配置。
+- 画布项目导入改为读取新版 `.zip` 压缩包，会先按 `projects.json` 中的文件映射恢复图片、视频到本地存储，再插入画布项目，导入成功后仍停留在画布库。
-- 画布右侧助手和节点下方对话框的生图设置弹层改为紧凑图像设置面板，面板只包含质量、尺寸、宽高比和生成数量选择，模型选择保留在对话框底部工具栏；需要确认助手内设置面板不会被右侧面板裁切，节点内质量可正常选择并参与生成、尺寸可编辑、宽高比预览显示正常且为直角矩形、auto 不重复显示、张数每行 4 个且自定义输入框能显示当前值、实际生图参数正常；节点设置面板打开时会隐藏节点悬浮工具条，避免遮挡质量选择。
+- 修复删除画布图片节点或清空画布后撤销时，节点信息恢复但本地图片数据已被清理导致图片丢失的问题。
-- 管理后台 `/admin/prompts` 新增提示词批量删除，需要确认多选、确认弹窗、删除后列表刷新和筛选条件下删除行为。
+- “我的素材”类型筛选区右侧新增文本样式的导出素材和导入素材入口，可将全部素材导出为包含 `assets.json` 与图片、视频文件的压缩包，并从压缩包恢复素材。
-- 管理后台 `/admin/settings` 的私有配置新增提示词定时同步开关和 Cron 表达式；开启后后端会按配置同步内置 GitHub 远程提示词源，需要确认保存配置和到点同步行为。
+- 未登录状态下，画布右上角不再显示用户头像菜单、用户名称、算力点余额和退出登录入口，改为显示登录入口；快捷键入口仍可直接打开。
-- 管理后台 `/admin/settings` 中的渠道模型列表获取和模型测试已改为走后端接口，前端不再直接读取或转发 API Key，需要确认保存后、编辑中和已有渠道三种场景都能正常拉取模型和测试连通性。
+- 生图工作台的图片参数区复用画布里的紧凑版图像设置面板，尺寸、质量、生成张数的交互保持一致；工作台仍保留独立的模型选择。
-- 提示词远程源新增 `davidwuw0811-boop/awesome-gpt-image2-prompts`，同步时会读取仓库 `prompts.json` 的结构化数据，需要确认后台同步后分类、封面图、标签和提示词内容展示正常。
+- 生图工作台新增生成记录配置持久化：每次生成会保存提示词、参考图、模型、质量、尺寸和张数，结果图写入本地图片存储后记录只保存 `storageKey`；点击历史记录会回填本次生成配置并预览结果。
+- 视频设置抽成画布和视频创作台共用的紧凑面板，清晰度、尺寸、秒数按固定网格选择并支持手动输入；尺寸选择 `auto` 时请求不传 `size`。
+- 修复画布和生图工作台选择图片尺寸后，请求图片生成/编辑接口未携带 `size` 参数的问题；`auto` 不传，其余比例或像素尺寸会随请求发送。
+- 修复生图工作台和画布生图请求中 `quality` 参数可能传入上游不支持值导致 400 的问题；请求前会归一化质量枚举，`auto` 或异常值不再发送给上游。
+- 管理后台新增/编辑渠道时，渠道可用模型支持通过弹窗按“新获取、已有”分组选择，并可在弹窗内手动增加模型或拉取模型列表后再写回表单。
+- 管理后台编辑渠道时，API Key 留空不再触发必填校验，表示沿用已保存的密钥；新增渠道仍要求填写 API Key。
+- 管理后台公开配置里的系统可用模型候选项改为由已启用渠道中选择的模型合并去重生成，最终开放哪些模型仍由公开配置里手动勾选。
+- 视频生成请求参数对齐 `grok-imagine-video` 接口：使用 `resolution_name`、`preset=normal`、`input_reference[]`，支持清晰度、尺寸、秒数快捷选择和手动输入，并支持最多 7 张参考图。
+- 画布视频设置浮层改为挂载到页面根层级并使用自建浮层交互，避免被节点悬浮工具栏遮挡或点击面板内容时关闭。
+- 画布生成配置节点的生图参数改为复用图像设置浮层，支持在同一个入口里调整质量、尺寸和生成张数。
+- 视频清晰度输入框改为只输入数字，提交请求时再拼接 `p` 单位。
+- 视频生成前端会识别后端 `{ code, msg }` 错误响应，创建失败不再继续轮询 `undefined`。
+- 新增 `/video` 视频创作台页面，参考生图工作台布局，支持提示词、参考图、视频参数、生成结果、保存素材、下载和本地生成记录；清晰度和秒数均支持常用值选择与手动输入，生成记录只保存媒体 `storageKey` 并可回填本次提示词、参考图和参数。
+- 视频创作台生成前会把模型、尺寸、秒数、清晰度归一化为视频接口支持的参数，并展示后端返回的错误信息，避免页面侧残留的生图参数影响视频请求。

docs/system-settings.md

@@ -13,11 +13,21 @@
 {
   "modelChannel": {
     "availableModels": ["gpt-5.5", "gpt-image-2"],
+    "modelCosts": [
+      { "model": "gpt-5.5", "credits": 1 },
+      { "model": "gpt-image-2", "credits": 10 }
+    ],
     "defaultModel": "gpt-image-2",
     "defaultImageModel": "gpt-image-2",
     "defaultTextModel": "gpt-5.5",
     "systemPrompt": "",
     "allowCustomChannel": true
+  },
+  "auth": {
+    "allowRegister": true,
+    "linuxDo": {
+      "enabled": false
+    }
   }
 }
 ```
@@ -25,18 +35,27 @@
 | 字段 | 类型 | 说明 |
 | --- | --- | --- |
 | `modelChannel` | object | 模型渠道公开配置组 |
+| `auth` | object | 认证相关公开配置 |
 
 `modelChannel` 字段：
 
 | 字段 | 类型 | 说明 |
 | --- | --- | --- |
 | `availableModels` | string[] | 系统可用模型，由管理员手动选择；页面下拉选项可来自私有渠道模型 |
+| `modelCosts` | object[] | 模型算力点配置，后端模型接口调用前按模型预扣，上游失败时返还；未配置默认不扣除 |
 | `defaultModel` | string | 默认模型，从 `availableModels` 中选择 |
 | `defaultImageModel` | string | 默认图片模型，从 `availableModels` 中选择 |
 | `defaultTextModel` | string | 默认文本模型，从 `availableModels` 中选择 |
 | `systemPrompt` | string | 系统提示词 |
 | `allowCustomChannel` | boolean | 是否允许用户在配置弹窗中切换为本地直连渠道，默认允许 |
 
+`modelCosts` 每项字段：
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `model` | string | 模型名称 |
+| `credits` | number | 每次后端模型接口调用前预扣的算力点 |
+
 用户侧请求模式：
 
 | 模式 | 说明 |
@@ -44,6 +63,13 @@
 | 云端渠道 | 使用后端 `/api/v1/*` 代理接口，请求会按模型名匹配 `private.value.channels` 中的可用渠道 |
 | 本地直连 | 默认可选；`allowCustomChannel` 关闭后不可选，用户在浏览器本地配置 `baseUrl`、`apiKey` 和模型列表后直接请求模型接口 |
 
+`auth` 字段：
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `allowRegister` | boolean | 是否允许用户注册，默认允许；关闭后注册入口隐藏，注册接口拒绝新用户创建 |
+| `linuxDo.enabled` | boolean | 是否开启 Linux.do 登录 |
+
 ## private.value
 
 ```json

docs/todo.md

@@ -1,45 +1,3 @@
 # TODO
 
 本文档用来记录当前项目后续比较值得处理的事项。
-
-## P0 近期优先
-
-暂无。
-
-## P1 核心账号和后台
-
-- 登录注册和用户模块：新增 `users` 表，用户角色、算力点余额、邀请码、邀请人、邀请人数和第三方平台用户 ID
-  等直接放在用户表字段里；补齐登录、注册、第三方登录、用户信息、管理员用户管理等基础能力。
-- 字典管理：新增 `dicts` 表，一个字典一行，具体字典项用 JSON 保存；用于维护分类、标签、业务枚举、模型分类、日志类型等可配置项。
-- 日志管理：新增 `credit_logs` 记录用户算力点变更流水，新增 `api_logs` 记录第三方大模型 API 调用情况。
-- 对话工具调用：在助手对话中增加类似工具调用的形式，展示模型调用、生成图片、插入画布等步骤。
-- 画布助手对话框优化：把当前对话面板调整得更简洁，减少干扰，突出输入、引用和结果。
-- 考虑引入视频生成能力
-
-## P1 算力点和商业化
-
-- 算力点模块：使用 `users` 表里的算力点余额字段，用于调用后端生图、文本等接口时扣除；扣除记录写入 `credit_logs`。
-- 算力点订阅模块：订阅套餐配置先放 `settings.public.value`，用户订阅记录新增 `subscriptions`
-  表；用户购买订阅后，模型调用优先从可用订阅额度扣除，不足时再扣用户余额。
-- 支付模块：新增 `orders` 表，统一记录充值、订阅购买等订单，预留 Linux LDC 支付和第三方聚合支付；该模块优先级较低，先只设计结构，暂不重点实现。
-- 邀请奖励模块：邀请码、邀请人和邀请人数放 `users`，注册奖励、充值奖励配置放 `settings.private.value`，奖励发放记录写入
-  `credit_logs`。
-
-## P1 内容、素材和画布
-
-- 文件存储管理：新增 `files` 表和存储接口，文件表只记录最终可访问 URL 等基础信息；后续再考虑图片缩略图、文件清理等能力，后台可查询所有图片和文件。
-- 提示词管理：新增 `prompts` 表，公开提示词、内置 GitHub 系统提示词、分类和扩展信息等尽量放字段或 JSON，支持后台维护和随时爬取更新。
-- 提示词分类：已移除 `prompt_groups` 表；分类数据很少，并且必须和抓取代码一一对应，直接在代码内存里写死维护。
-- 画布管理：新增 `canvases` 表，后台管理员可以查看每个人的画布数据，普通用户可以查看自己的画布列表。
-- 公开画布：在 `canvases` 表增加公开状态、审核状态、公开信息等字段；管理员可将自己的画布设为公开，用户也可以申请公开并由管理员审核。
-- 画布分享与模板：在云端画布基础上支持只读分享、复制为模板、团队内共享，分享配置和模板标记优先放在 `canvases` 字段或 JSON 中。
-- 项目库：基于公开画布增加系统公开项目库，用于筛选、打开、复制公开画布项目。
-- 画布协作能力：后续如果支持多人协作，协作成员、节点操作事件、锁定/光标、冲突处理和增量同步优先放在 `canvases` 的协作 JSON
-  中，确实不够用时再拆表。
-- 素材管理和我的素材：新增 `assets` 表，用 `user_id`、`visibility`、`type` 区分系统公开素材和用户私有素材；管理员可管理公开素材，也可以查看每个用户自己的素材。
-- 素材互动：公开素材增加点赞量、收藏量、查看量等统计字段；用户侧我的收藏、我的点赞先放在 `assets` 或用户偏好 JSON
-  中，后续数据量大了再拆互动表。
-
-## P2 体验和工程
-
-- 接口调用队列：图片/文本生成接口增加队列、并发限制、后台状态和基础失败处理，避免大量请求直接打到模型渠道。

handler/ai.go

@@ -3,6 +3,7 @@ package handler
 import (
 	"bytes"
 	"encoding/json"
+	"fmt"
 	"io"
 	"log"
 	"mime"
@@ -25,6 +26,38 @@ func AIChatCompletions(w http.ResponseWriter, r *http.Request) {
 	proxyAIRequest(w, r, "/chat/completions")
 }
 
+func AIVideos(w http.ResponseWriter, r *http.Request) {
+	proxyAIRequest(w, r, "/videos")
+}
+
+func AIVideo(w http.ResponseWriter, r *http.Request, id string) {
+	proxyAIGetRequest(w, r, "/videos/"+id)
+}
+
+func AIVideoContent(w http.ResponseWriter, r *http.Request, id string) {
+	proxyAIGetRequest(w, r, "/videos/"+id+"/content")
+}
+
+func proxyAIGetRequest(w http.ResponseWriter, r *http.Request, path string) {
+	modelName := r.URL.Query().Get("model")
+	if strings.TrimSpace(modelName) == "" {
+		modelName = "grok-imagine-video"
+	}
+	channel, err := service.SelectModelChannel(modelName)
+	if err != nil {
+		log.Printf("AI proxy select channel failed: model=%s err=%v", modelName, err)
+		Fail(w, "AI 接口请求失败")
+		return
+	}
+	request, err := http.NewRequest(http.MethodGet, service.BuildModelChannelURL(channel, path), nil)
+	if err != nil {
+		Fail(w, "AI 接口请求失败")
+		return
+	}
+	request.Header.Set("Authorization", "Bearer "+channel.APIKey)
+	copyAIResponse(w, request, nil)
+}
+
 func proxyAIRequest(w http.ResponseWriter, r *http.Request, path string) {
 	body, contentType, modelName, err := readAIRequest(r)
 	if err != nil {
@@ -32,6 +65,18 @@ func proxyAIRequest(w http.ResponseWriter, r *http.Request, path string) {
 		Fail(w, "AI 接口请求失败")
 		return
 	}
+	user, ok := service.UserFromContext(r.Context())
+	if !ok {
+		Fail(w, "未登录或权限不足")
+		return
+	}
+	credits, err := service.ModelCost(modelName)
+	if err != nil {
+		log.Printf("AI proxy read model cost failed: model=%s err=%v", modelName, err)
+		Fail(w, "AI 接口请求失败")
+		return
+	}
+	credits *= readAIRequestCount(body, contentType)
 	channel, err := service.SelectModelChannel(modelName)
 	if err != nil {
 		log.Printf("AI proxy select channel failed: model=%s err=%v", modelName, err)
@@ -48,9 +93,24 @@ func proxyAIRequest(w http.ResponseWriter, r *http.Request, path string) {
 	if contentType != "" {
 		request.Header.Set("Content-Type", contentType)
 	}
+	if err := service.ConsumeUserCredits(user.ID, modelName, credits, path); err != nil {
+		FailError(w, err)
+		return
+	}
+	copyAIResponse(w, request, func() {
+		if err := service.RefundUserCredits(user.ID, modelName, credits, path); err != nil {
+			log.Printf("AI proxy refund credits failed: user=%s model=%s credits=%d err=%v", user.ID, modelName, credits, err)
+		}
+	})
+}
+
+func copyAIResponse(w http.ResponseWriter, request *http.Request, onFailure func()) {
 	response, err := http.DefaultClient.Do(request)
 	if err != nil {
 		log.Printf("AI proxy request failed: url=%s err=%v", request.URL.String(), err)
+		if onFailure != nil {
+			onFailure()
+		}
 		Fail(w, "AI 接口请求失败")
 		return
 	}
@@ -59,6 +119,9 @@ func proxyAIRequest(w http.ResponseWriter, r *http.Request, path string) {
 	if response.StatusCode >= http.StatusBadRequest {
 		payload, _ := io.ReadAll(io.LimitReader(response.Body, 4096))
 		log.Printf("AI upstream error: url=%s status=%d body=%s", request.URL.String(), response.StatusCode, strings.TrimSpace(string(payload)))
+		if onFailure != nil {
+			onFailure()
+		}
 		Fail(w, "AI 接口请求失败")
 		return
 	}
@@ -114,6 +177,34 @@ func readMultipartModel(body []byte, contentType string) string {
 	return ""
 }
 
+func readAIRequestCount(body []byte, contentType string) int {
+	count := 1
+	if strings.HasPrefix(contentType, "multipart/form-data") {
+		_, params, err := mime.ParseMediaType(contentType)
+		if err != nil {
+			return count
+		}
+		form, err := multipart.NewReader(bytes.NewReader(body), params["boundary"]).ReadForm(32 << 20)
+		if err != nil {
+			return count
+		}
+		defer form.RemoveAll()
+		if values := form.Value["n"]; len(values) > 0 {
+			_, _ = fmt.Sscan(values[0], &count)
+		}
+	} else {
+		var payload struct {
+			N int `json:"n"`
+		}
+		_ = json.Unmarshal(body, &payload)
+		count = payload.N
+	}
+	if count < 1 {
+		return 1
+	}
+	return count
+}
+
 var errMissingModel = &aiError{"缺少模型名称"}
 
 type aiError struct {

handler/auth.go

@@ -3,6 +3,8 @@ package handler
 import (
 	"encoding/json"
 	"net/http"
+	"net/url"
+	"strings"
 
 	"github.com/basketikun/infinite-canvas/model"
 	"github.com/basketikun/infinite-canvas/service"
@@ -19,10 +21,17 @@ type registerRequest struct {
 }
 
 type saveUserRequest struct {
-	ID       string         `json:"id"`
+	ID          string           `json:"id"`
-	Username string         `json:"username"`
+	Username    string           `json:"username"`
-	Password string         `json:"password"`
+	Password    string           `json:"password"`
-	Role     model.UserRole `json:"role"`
+	Email       string           `json:"email"`
+	DisplayName string           `json:"displayName"`
+	Role        model.UserRole   `json:"role"`
+	Status      model.UserStatus `json:"status"`
+}
+
+type adjustUserCreditsRequest struct {
+	Credits int `json:"credits"`
 }
 
 func Register(w http.ResponseWriter, r *http.Request) {
@@ -44,11 +53,25 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		FailError(w, err)
 		return
 	}
-	if session.User.Role != model.UserRoleAdmin {
+	OK(w, session)
-		Fail(w, "需要管理员权限")
+}
+
+func LinuxDoAuthorize(w http.ResponseWriter, r *http.Request) {
+	authURL, err := service.LinuxDoAuthorizeURL(r, r.URL.Query().Get("redirect"))
+	if err != nil {
+		FailError(w, err)
 		return
 	}
-	OK(w, session)
+	http.Redirect(w, r, authURL, http.StatusFound)
+}
+
+func LinuxDoCallback(w http.ResponseWriter, r *http.Request) {
+	session, redirect, err := service.LoginWithLinuxDo(r, r.URL.Query().Get("code"), r.URL.Query().Get("state"))
+	if err != nil {
+		http.Redirect(w, r, loginRedirect(r, redirect, "", err.Error()), http.StatusFound)
+		return
+	}
+	http.Redirect(w, r, loginRedirect(r, redirect, session.Token, ""), http.StatusFound)
 }
 
 func AdminLogin(w http.ResponseWriter, r *http.Request) {
@@ -87,9 +110,12 @@ func AdminSaveUser(w http.ResponseWriter, r *http.Request) {
 	var request saveUserRequest
 	_ = json.NewDecoder(r.Body).Decode(&request)
 	user, err := service.SaveUser(model.User{
-		ID:       request.ID,
+		ID:          request.ID,
-		Username: request.Username,
+		Username:    request.Username,
-		Role:     request.Role,
+		Email:       request.Email,
+		DisplayName: request.DisplayName,
+		Role:        request.Role,
+		Status:      request.Status,
 	}, request.Password)
 	if err != nil {
 		FailError(w, err)
@@ -98,6 +124,59 @@ func AdminSaveUser(w http.ResponseWriter, r *http.Request) {
 	OK(w, user)
 }
 
+func AdminAdjustUserCredits(w http.ResponseWriter, r *http.Request, id string) {
+	var request adjustUserCreditsRequest
+	_ = json.NewDecoder(r.Body).Decode(&request)
+	user, err := service.AdjustUserCredits(id, request.Credits)
+	if err != nil {
+		FailError(w, err)
+		return
+	}
+	OK(w, user)
+}
+
+func AdminCreditLogs(w http.ResponseWriter, r *http.Request) {
+	logs, err := service.ListCreditLogs(parseQuery(r))
+	if err != nil {
+		FailError(w, err)
+		return
+	}
+	OK(w, logs)
+}
+
+func AdminSaveCreditLog(w http.ResponseWriter, r *http.Request) {
+	var log model.CreditLog
+	_ = json.NewDecoder(r.Body).Decode(&log)
+	result, err := service.SaveCreditLog(log)
+	if err != nil {
+		FailError(w, err)
+		return
+	}
+	OK(w, result)
+}
+
+func AdminDeleteCreditLog(w http.ResponseWriter, r *http.Request, id string) {
+	if err := service.DeleteCreditLog(id); err != nil {
+		FailError(w, err)
+		return
+	}
+	OK(w, true)
+}
+
+func loginRedirect(r *http.Request, redirect string, token string, message string) string {
+	values := url.Values{}
+	if strings.TrimSpace(token) != "" {
+		values.Set("token", token)
+	}
+	if strings.TrimSpace(message) != "" {
+		values.Set("error", message)
+	}
+	if strings.TrimSpace(redirect) != "" {
+		values.Set("redirect", redirect)
+	}
+	return service.RequestOrigin(r) + "/login?" + values.Encode()
+}
+
 func AdminDeleteUser(w http.ResponseWriter, r *http.Request, id string) {
 	if err := service.DeleteUser(id); err != nil {
 		FailError(w, err)

middleware/admin.go

@@ -21,6 +21,17 @@ func AdminAuth(c *gin.Context) {
 	c.Next()
 }
 
+func UserAuth(c *gin.Context) {
+	user, ok := authUser(c)
+	if !ok || user.Role == model.UserRoleGuest {
+		handler.Fail(c.Writer, "未登录或权限不足")
+		c.Abort()
+		return
+	}
+	c.Request = c.Request.WithContext(service.WithUser(c.Request.Context(), user))
+	c.Next()
+}
+
 func OptionalAuth(c *gin.Context) {
 	if user, ok := authUser(c); ok {
 		c.Request = c.Request.WithContext(service.WithUser(c.Request.Context(), user))

model/setting.go

@@ -21,25 +21,44 @@ type ModelChannel struct {
 	Remark   string   `json:"remark"`
 }
 
+// ModelCost 模型算力点配置。
+type ModelCost struct {
+	Model   string `json:"model"`
+	Credits int    `json:"credits"`
+}
+
 // PublicModelChannelSetting 公开模型渠道配置。
 type PublicModelChannelSetting struct {
-	AvailableModels    []string `json:"availableModels"`
+	AvailableModels    []string    `json:"availableModels"`
-	DefaultModel       string   `json:"defaultModel"`
+	ModelCosts         []ModelCost `json:"modelCosts"`
-	DefaultImageModel  string   `json:"defaultImageModel"`
+	DefaultModel       string      `json:"defaultModel"`
-	DefaultTextModel   string   `json:"defaultTextModel"`
+	DefaultImageModel  string      `json:"defaultImageModel"`
-	SystemPrompt       string   `json:"systemPrompt"`
+	DefaultVideoModel  string      `json:"defaultVideoModel"`
-	AllowCustomChannel *bool    `json:"allowCustomChannel"`
+	DefaultTextModel   string      `json:"defaultTextModel"`
+	SystemPrompt       string      `json:"systemPrompt"`
+	AllowCustomChannel *bool       `json:"allowCustomChannel"`
 }
 
 // PublicSetting 公开配置。
 type PublicSetting struct {
 	ModelChannel PublicModelChannelSetting `json:"modelChannel"`
+	Auth         PublicAuthSetting         `json:"auth"`
+}
+
+type PublicAuthSetting struct {
+	AllowRegister *bool                    `json:"allowRegister"`
+	LinuxDo       PublicLinuxDoAuthSetting `json:"linuxDo"`
+}
+
+type PublicLinuxDoAuthSetting struct {
+	Enabled bool `json:"enabled"`
 }
 
 // PrivateSetting 私有配置。
 type PrivateSetting struct {
-	Channels   []ModelChannel    `json:"channels"`
+	Channels   []ModelChannel     `json:"channels"`
-	PromptSync PromptSyncSetting `json:"promptSync"`
+	PromptSync PromptSyncSetting  `json:"promptSync"`
+	Auth       PrivateAuthSetting `json:"auth"`
 }
 
 // PromptSyncSetting 提示词定时同步配置。
@@ -48,6 +67,15 @@ type PromptSyncSetting struct {
 	Cron    string `json:"cron"`
 }
 
+type PrivateAuthSetting struct {
+	LinuxDo PrivateLinuxDoAuthSetting `json:"linuxDo"`
+}
+
+type PrivateLinuxDoAuthSetting struct {
+	ClientID     string `json:"clientId"`
+	ClientSecret string `json:"clientSecret"`
+}
+
 // Setting 系统配置。
 type Setting struct {
 	Key       SettingKey      `json:"key" gorm:"primaryKey"`

model/user.go

@@ -8,14 +8,34 @@ const (
 	UserRoleAdmin UserRole = "admin"
 )
 
+type UserStatus string
+
+const (
+	UserStatusActive UserStatus = "active"
+	UserStatusBan    UserStatus = "ban"
+)
+
 // User 系统用户。
 type User struct {
-	ID       string   `json:"id" gorm:"primaryKey"`
+	ID          string     `json:"id" gorm:"primaryKey"`
-	Username string   `json:"username" gorm:"uniqueIndex"`
+	Username    string     `json:"username" gorm:"uniqueIndex"`
-	Password string   `json:"password,omitempty"`
+	Password    string     `json:"password,omitempty"`
-	Role     UserRole `json:"role"`
+	Email       string     `json:"email"`
-	CreatedAt string   `json:"createdAt"`
+	DisplayName string     `json:"displayName"`
-	UpdatedAt string   `json:"updatedAt"`
+	AvatarURL   string     `json:"avatarUrl"`
+	Role        UserRole   `json:"role"`
+	Credits     int        `json:"credits"`
+	AffCode     string     `json:"affCode" gorm:"uniqueIndex"`
+	AffCount    int        `json:"affCount"`
+	InviterID   string     `json:"inviterId"`
+	GithubID    string     `json:"githubId"`
+	LinuxDoID   string     `json:"linuxDoId" gorm:"index"`
+	WechatID    string     `json:"wechatId"`
+	Status      UserStatus `json:"status"`
+	LastLoginAt string     `json:"lastLoginAt"`
+	Extra       string     `json:"extra" gorm:"type:text"`
+	CreatedAt   string     `json:"createdAt"`
+	UpdatedAt   string     `json:"updatedAt"`
 }
 
 // UserList 用户分页结果。
@@ -26,11 +46,14 @@ type UserList struct {
 
 // AuthUser 用户公开信息。
 type AuthUser struct {
-	ID        string   `json:"id"`
+	ID          string   `json:"id"`
-	Username  string   `json:"username"`
+	Username    string   `json:"username"`
-	Role      UserRole `json:"role"`
+	DisplayName string   `json:"displayName"`
-	CreatedAt string   `json:"createdAt"`
+	AvatarURL   string   `json:"avatarUrl"`
-	UpdatedAt string   `json:"updatedAt"`
+	Role        UserRole `json:"role"`
+	Credits     int      `json:"credits"`
+	CreatedAt   string   `json:"createdAt"`
+	UpdatedAt   string   `json:"updatedAt"`
 }
 
 // AuthSession 登录会话信息。
@@ -41,10 +64,39 @@ type AuthSession struct {
 
 func PublicUser(user User) AuthUser {
 	return AuthUser{
-		ID:        user.ID,
+		ID:          user.ID,
-		Username:  user.Username,
+		Username:    user.Username,
-		Role:      user.Role,
+		DisplayName: user.DisplayName,
-		CreatedAt: user.CreatedAt,
+		AvatarURL:   user.AvatarURL,
-		UpdatedAt: user.UpdatedAt,
+		Role:        user.Role,
+		Credits:     user.Credits,
+		CreatedAt:   user.CreatedAt,
+		UpdatedAt:   user.UpdatedAt,
 	}
 }
+
+type CreditLogType string
+
+const (
+	CreditLogTypeAdminAdjust CreditLogType = "admin_adjust"
+	CreditLogTypeAIConsume   CreditLogType = "ai_consume"
+	CreditLogTypeAIRefund    CreditLogType = "ai_refund"
+)
+
+// CreditLog 用户算力点变更流水。
+type CreditLog struct {
+	ID        string        `json:"id" gorm:"primaryKey"`
+	UserID    string        `json:"userId" gorm:"index"`
+	Type      CreditLogType `json:"type"`
+	Amount    int           `json:"amount"`
+	Balance   int           `json:"balance"`
+	RelatedID string        `json:"relatedId"`
+	Remark    string        `json:"remark"`
+	Extra     string        `json:"extra" gorm:"type:text"`
+	CreatedAt string        `json:"createdAt"`
+}
+
+type CreditLogList struct {
+	Items []CreditLog `json:"items"`
+	Total int         `json:"total"`
+}

repository/db.go

@@ -47,6 +47,7 @@ func DB() (*gorm.DB, error) {
 		}
 		dbErr = db.AutoMigrate(
 			&model.User{},
+			&model.CreditLog{},
 			&model.Prompt{},
 			&model.Asset{},
 			&model.Setting{},

repository/user.go

@@ -2,6 +2,7 @@ package repository
 
 import (
 	"errors"
+	"strings"
 
 	"github.com/basketikun/infinite-canvas/model"
 	"gorm.io/gorm"
@@ -15,6 +16,10 @@ func ListUsers(q model.Query) ([]model.User, int64, error) {
 	}
 	q.Normalize()
 	tx := db.Model(&model.User{})
+	if keyword := strings.TrimSpace(q.Keyword); keyword != "" {
+		like := "%" + keyword + "%"
+		tx = tx.Where("username LIKE ? OR display_name LIKE ? OR email LIKE ? OR linux_do_id LIKE ?", like, like, like, like)
+	}
 
 	var total int64
 	if err := tx.Count(&total).Error; err != nil {
@@ -74,6 +79,83 @@ func SaveUser(user model.User) (model.User, error) {
 	return user, db.Save(&user).Error
 }
 
+func ConsumeUserCredits(id string, credits int, now string) (model.User, bool, error) {
+	db, err := DB()
+	if err != nil {
+		return model.User{}, false, err
+	}
+	if credits <= 0 {
+		user, ok, err := GetUserByID(id)
+		return user, ok, err
+	}
+	tx := db.Model(&model.User{}).Where("id = ? AND credits >= ?", id, credits).Updates(map[string]any{
+		"credits":    gorm.Expr("credits - ?", credits),
+		"updated_at": now,
+	})
+	if tx.Error != nil {
+		return model.User{}, false, tx.Error
+	}
+	user, ok, err := GetUserByID(id)
+	return user, ok && tx.RowsAffected > 0, err
+}
+
+func RefundUserCredits(id string, credits int, now string) (model.User, bool, error) {
+	db, err := DB()
+	if err != nil {
+		return model.User{}, false, err
+	}
+	if credits <= 0 {
+		user, ok, err := GetUserByID(id)
+		return user, ok, err
+	}
+	tx := db.Model(&model.User{}).Where("id = ?", id).Updates(map[string]any{
+		"credits":    gorm.Expr("credits + ?", credits),
+		"updated_at": now,
+	})
+	if tx.Error != nil {
+		return model.User{}, false, tx.Error
+	}
+	user, ok, err := GetUserByID(id)
+	return user, ok && tx.RowsAffected > 0, err
+}
+
+// SaveCreditLog 保存算力点变更流水。
+func SaveCreditLog(log model.CreditLog) (model.CreditLog, error) {
+	db, err := DB()
+	if err != nil {
+		return log, err
+	}
+	return log, db.Save(&log).Error
+}
+
+func ListCreditLogs(q model.Query) ([]model.CreditLog, int64, error) {
+	db, err := DB()
+	if err != nil {
+		return nil, 0, err
+	}
+	q.Normalize()
+	tx := db.Model(&model.CreditLog{})
+	if keyword := strings.TrimSpace(q.Keyword); keyword != "" {
+		like := "%" + keyword + "%"
+		tx = tx.Where("user_id LIKE ? OR type LIKE ? OR remark LIKE ? OR related_id LIKE ?", like, like, like, like)
+	}
+	var total int64
+	if err := tx.Count(&total).Error; err != nil {
+		return nil, 0, err
+	}
+	var logs []model.CreditLog
+	err = tx.Order("created_at desc").Offset(q.Offset()).Limit(q.PageSize).Find(&logs).Error
+	return logs, total, err
+}
+
+func DeleteCreditLog(id string) error {
+	db, err := DB()
+	if err != nil {
+		return err
+	}
+	return db.Delete(&model.CreditLog{}, "id = ?", id).Error
+}
+
 // DeleteUser 删除指定用户。
 func DeleteUser(id string) error {
 	db, err := DB()
@@ -83,6 +165,15 @@ func DeleteUser(id string) error {
 	return db.Delete(&model.User{}, "id = ?", id).Error
 }
 
+// GetUserByLinuxDoID 根据 Linux.do ID 查询用户。
+func GetUserByLinuxDoID(id string) (model.User, bool, error) {
+	db, err := DB()
+	if err != nil {
+		return model.User{}, false, err
+	}
+	return findUser(db, "linux_do_id = ?", id)
+}
+
 // findUser 查询单个用户，并将未命中转换为 ok=false。
 func findUser(db *gorm.DB, query string, args ...any) (model.User, bool, error) {
 	user := model.User{}

router/router.go

@@ -18,11 +18,21 @@ func New() *gin.Engine {
 	})
 	api.POST("/auth/register", gin.WrapF(handler.Register))
 	api.POST("/auth/login", gin.WrapF(handler.Login))
+	api.GET("/auth/linux-do/authorize", gin.WrapF(handler.LinuxDoAuthorize))
+	api.GET("/auth/linux-do/callback", gin.WrapF(handler.LinuxDoCallback))
 	api.GET("/auth/me", middleware.OptionalAuth, gin.WrapF(handler.CurrentUser))
 	api.GET("/settings", gin.WrapF(handler.Settings))
-	api.POST("/v1/images/generations", gin.WrapF(handler.AIImagesGenerations))
+	v1 := api.Group("/v1", middleware.UserAuth)
-	api.POST("/v1/images/edits", gin.WrapF(handler.AIImagesEdits))
+	v1.POST("/images/generations", gin.WrapF(handler.AIImagesGenerations))
-	api.POST("/v1/chat/completions", gin.WrapF(handler.AIChatCompletions))
+	v1.POST("/images/edits", gin.WrapF(handler.AIImagesEdits))
+	v1.POST("/chat/completions", gin.WrapF(handler.AIChatCompletions))
+	v1.POST("/videos", gin.WrapF(handler.AIVideos))
+	v1.GET("/videos/:id", func(c *gin.Context) {
+		handler.AIVideo(c.Writer, c.Request, c.Param("id"))
+	})
+	v1.GET("/videos/:id/content", func(c *gin.Context) {
+		handler.AIVideoContent(c.Writer, c.Request, c.Param("id"))
+	})
 	api.GET("/prompts", middleware.OptionalAuth, gin.WrapF(handler.Prompts))
 	api.GET("/assets", middleware.OptionalAuth, gin.WrapF(handler.Assets))
 	api.POST("/admin/login", gin.WrapF(handler.AdminLogin))
@@ -30,9 +40,17 @@ func New() *gin.Engine {
 	admin := api.Group("/admin", middleware.AdminAuth)
 	admin.GET("/users", gin.WrapF(handler.AdminUsers))
 	admin.POST("/users", gin.WrapF(handler.AdminSaveUser))
+	admin.POST("/users/:id/credits", func(c *gin.Context) {
+		handler.AdminAdjustUserCredits(c.Writer, c.Request, c.Param("id"))
+	})
 	admin.DELETE("/users/:id", func(c *gin.Context) {
 		handler.AdminDeleteUser(c.Writer, c.Request, c.Param("id"))
 	})
+	admin.GET("/credit-logs", gin.WrapF(handler.AdminCreditLogs))
+	admin.POST("/credit-logs", gin.WrapF(handler.AdminSaveCreditLog))
+	admin.DELETE("/credit-logs/:id", func(c *gin.Context) {
+		handler.AdminDeleteCreditLog(c.Writer, c.Request, c.Param("id"))
+	})
 	admin.GET("/settings", gin.WrapF(handler.AdminSettings))
 	admin.POST("/settings", gin.WrapF(handler.AdminSaveSettings))
 	admin.POST("/settings/channel-models", gin.WrapF(handler.AdminChannelModels))

service/auth.go

@@ -1,8 +1,15 @@
 package service
 
 import (
+	"bytes"
+	"encoding/base64"
+	"encoding/json"
 	"errors"
+	"fmt"
+	"io"
 	"log"
+	"net/http"
+	"net/url"
 	"strings"
 	"time"
 
@@ -21,6 +28,10 @@ type TokenClaims struct {
 	jwt.RegisteredClaims
 }
 
+type userExtra struct {
+	LinuxDo any `json:"linuxDo,omitempty"`
+}
+
 func EnsureDefaultAdmin() error {
 	if strings.TrimSpace(config.Cfg.AdminUsername) == "" || strings.TrimSpace(config.Cfg.AdminPassword) == "" {
 		return nil
@@ -39,6 +50,8 @@ func EnsureDefaultAdmin() error {
 		Username:  strings.TrimSpace(config.Cfg.AdminUsername),
 		Password:  hash,
 		Role:      model.UserRoleAdmin,
+		AffCode:   newAffCode(),
+		Status:    model.UserStatusActive,
 		CreatedAt: now(),
 		UpdatedAt: now(),
 	})
@@ -46,19 +59,26 @@ func EnsureDefaultAdmin() error {
 }
 
 func Register(username string, password string) (model.AuthSession, error) {
-	return model.AuthSession{}, errors.New("注册功能暂时关闭")
+	settings, err := repository.GetSettings()
+	if err != nil {
+		return model.AuthSession{}, err
+	}
+	normalizedSettings := normalizeSettings(settings)
+	if normalizedSettings.Public.Auth.AllowRegister != nil && !*normalizedSettings.Public.Auth.AllowRegister {
+		return model.AuthSession{}, safeMessageError{message: "当前未开放注册"}
+	}
 	username = strings.TrimSpace(username)
 	if strings.ContainsAny(username, " \t\r\n") {
-		return model.AuthSession{}, errors.New("用户名不能包含空格")
+		return model.AuthSession{}, safeMessageError{message: "用户名不能包含空格"}
 	}
 	if username == "" || password == "" {
-		return model.AuthSession{}, errors.New("用户名和密码不能为空")
+		return model.AuthSession{}, safeMessageError{message: "用户名和密码不能为空"}
 	}
 	if _, ok, err := repository.GetUserByUsername(username); err != nil || ok {
 		if err != nil {
 			return model.AuthSession{}, err
 		}
-		return model.AuthSession{}, errors.New("用户名已存在")
+		return model.AuthSession{}, safeMessageError{message: "用户名已存在"}
 	}
 	hash, err := hashPassword(password)
 	if err != nil {
@@ -69,6 +89,8 @@ func Register(username string, password string) (model.AuthSession, error) {
 		Username:  username,
 		Password:  hash,
 		Role:      model.UserRoleUser,
+		AffCode:   newAffCode(),
+		Status:    model.UserStatusActive,
 		CreatedAt: now(),
 		UpdatedAt: now(),
 	})
@@ -84,11 +106,102 @@ func Login(username string, password string) (model.AuthSession, error) {
 		return model.AuthSession{}, err
 	}
 	if !ok || bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(password)) != nil {
-		return model.AuthSession{}, errors.New("用户名或密码错误")
+		return model.AuthSession{}, safeMessageError{message: "用户名或密码错误"}
+	}
+	if user.Status == model.UserStatusBan {
+		return model.AuthSession{}, safeMessageError{message: "账号已被禁用"}
+	}
+	normalizeUserDefaults(&user)
+	user.LastLoginAt = now()
+	user.UpdatedAt = now()
+	user, err = repository.SaveUser(user)
+	if err != nil {
+		return model.AuthSession{}, err
 	}
 	return newSession(user)
 }
 
+func LinuxDoAuthorizeURL(r *http.Request, redirect string) (string, error) {
+	settings, err := repository.GetSettings()
+	if err != nil {
+		return "", err
+	}
+	settings = normalizeSettings(settings)
+	linuxDo := settings.Private.Auth.LinuxDo
+	if !settings.Public.Auth.LinuxDo.Enabled {
+		return "", safeMessageError{message: "Linux.do 登录未开启"}
+	}
+	if strings.TrimSpace(linuxDo.ClientID) == "" || strings.TrimSpace(linuxDo.ClientSecret) == "" {
+		return "", safeMessageError{message: "Linux.do 登录未配置"}
+	}
+	values := url.Values{}
+	values.Set("client_id", linuxDo.ClientID)
+	values.Set("redirect_uri", linuxDoRedirectURI(r))
+	values.Set("response_type", "code")
+	values.Set("scope", "read")
+	values.Set("state", base64.RawURLEncoding.EncodeToString([]byte(redirect)))
+	return config.Cfg.LinuxDoAuthorizeURL + "?" + values.Encode(), nil
+}
+
+func LoginWithLinuxDo(r *http.Request, code string, state string) (model.AuthSession, string, error) {
+	redirect := decodeState(state)
+	settings, err := repository.GetSettings()
+	if err != nil {
+		return model.AuthSession{}, redirect, err
+	}
+	settings = normalizeSettings(settings)
+	linuxDo := settings.Private.Auth.LinuxDo
+	if !settings.Public.Auth.LinuxDo.Enabled {
+		return model.AuthSession{}, redirect, safeMessageError{message: "Linux.do 登录未开启"}
+	}
+	token, err := linuxDoAccessToken(r, code, linuxDo)
+	if err != nil {
+		return model.AuthSession{}, redirect, err
+	}
+	profile, err := linuxDoProfile(token)
+	if err != nil {
+		return model.AuthSession{}, redirect, err
+	}
+	linuxDoID := fmt.Sprint(profile.ID)
+	if strings.TrimSpace(linuxDoID) == "" || linuxDoID == "0" {
+		return model.AuthSession{}, redirect, safeMessageError{message: "Linux.do 用户信息无效"}
+	}
+	user, ok, err := repository.GetUserByLinuxDoID(linuxDoID)
+	if err != nil {
+		return model.AuthSession{}, redirect, err
+	}
+	if !ok {
+		if settings.Public.Auth.AllowRegister != nil && !*settings.Public.Auth.AllowRegister {
+			return model.AuthSession{}, redirect, safeMessageError{message: "当前未开放注册"}
+		}
+		user = model.User{
+			ID:          newID("user"),
+			Username:    linuxDoUsername(profile.Username, linuxDoID),
+			DisplayName: strings.TrimSpace(profile.Name),
+			AvatarURL:   linuxDoAvatar(profile.AvatarTemplate),
+			Role:        model.UserRoleUser,
+			AffCode:     newAffCode(),
+			LinuxDoID:   linuxDoID,
+			Status:      model.UserStatusActive,
+			CreatedAt:   now(),
+		}
+	} else if user.Status == model.UserStatusBan {
+		return model.AuthSession{}, redirect, safeMessageError{message: "账号已被禁用"}
+	}
+	user.DisplayName = firstNonEmpty(profile.Name, user.DisplayName)
+	user.AvatarURL = firstNonEmpty(linuxDoAvatar(profile.AvatarTemplate), user.AvatarURL)
+	user.LastLoginAt = now()
+	user.UpdatedAt = now()
+	extra, _ := json.Marshal(userExtra{LinuxDo: profile})
+	user.Extra = string(extra)
+	user, err = repository.SaveUser(user)
+	if err != nil {
+		return model.AuthSession{}, redirect, err
+	}
+	session, err := newSession(user)
+	return session, redirect, err
+}
+
 func ParseToken(tokenText string) (TokenClaims, error) {
 	claims := TokenClaims{}
 	token, err := jwt.ParseWithClaims(tokenText, &claims, func(token *jwt.Token) (any, error) {
@@ -112,6 +225,9 @@ func CurrentAuthUser(tokenText string) (model.AuthUser, bool) {
 	if err != nil || !ok {
 		return model.AuthUser{}, false
 	}
+	if user.Status == model.UserStatusBan {
+		return model.AuthUser{}, false
+	}
 	return model.PublicUser(user), true
 }
 
@@ -122,6 +238,7 @@ func ListUsers(q model.Query) (model.UserList, error) {
 	}
 	for i := range users {
 		users[i].Password = ""
+		normalizeUserDefaults(&users[i])
 	}
 	return model.UserList{Items: users, Total: int(total)}, nil
 }
@@ -129,27 +246,45 @@ func ListUsers(q model.Query) (model.UserList, error) {
 func SaveUser(user model.User, password string) (model.User, error) {
 	user.Username = strings.TrimSpace(user.Username)
 	if strings.ContainsAny(user.Username, " \t\r\n") {
-		return user, errors.New("用户名不能包含空格")
+		return user, safeMessageError{message: "用户名不能包含空格"}
 	}
 	if user.Username == "" {
-		return user, errors.New("用户名不能为空")
+		return user, safeMessageError{message: "用户名不能为空"}
 	}
 	if user.Role == "" || user.Role == model.UserRoleGuest {
 		user.Role = model.UserRoleUser
 	}
+	if user.Status == "" {
+		user.Status = model.UserStatusActive
+	}
 	if saved, ok, err := repository.GetUserByUsername(user.Username); err != nil {
 		return user, err
 	} else if ok && saved.ID != user.ID {
-		return user, errors.New("用户名已存在")
+		return user, safeMessageError{message: "用户名已存在"}
 	}
-	if user.ID == "" {
+	isCreate := user.ID == ""
+	if isCreate {
 		user.ID = newID("user")
+		user.AffCode = newAffCode()
 		user.CreatedAt = now()
 	} else if saved, ok, err := repository.GetUserByID(user.ID); err != nil {
 		return user, err
 	} else if ok {
 		user.CreatedAt = saved.CreatedAt
 		user.Password = saved.Password
+		user.AvatarURL = saved.AvatarURL
+		user.Credits = saved.Credits
+		user.Extra = saved.Extra
+		if user.AffCode == "" {
+			user.AffCode = saved.AffCode
+		}
+		if user.AffCode == "" {
+			user.AffCode = newAffCode()
+		}
+		if user.LinuxDoID == "" {
+			user.LinuxDoID = saved.LinuxDoID
+		}
+		user.LastLoginAt = saved.LastLoginAt
 	}
 	if password != "" {
 		hash, err := hashPassword(password)
@@ -158,8 +293,8 @@ func SaveUser(user model.User, password string) (model.User, error) {
 		}
 		user.Password = hash
 	}
-	if user.Password == "" {
+	if isCreate && user.Password == "" {
-		return user, errors.New("密码不能为空")
+		return user, safeMessageError{message: "密码不能为空"}
 	}
 	user.UpdatedAt = now()
 	user, err := repository.SaveUser(user)
@@ -167,6 +302,103 @@ func SaveUser(user model.User, password string) (model.User, error) {
 	return user, err
 }
 
+func AdjustUserCredits(id string, credits int) (model.User, error) {
+	user, ok, err := repository.GetUserByID(id)
+	if err != nil || !ok {
+		if err != nil {
+			return user, err
+		}
+		return user, safeMessageError{message: "用户不存在"}
+	}
+	oldCredits := user.Credits
+	user.Credits = credits
+	user.UpdatedAt = now()
+	user, err = repository.SaveUser(user)
+	if err == nil && oldCredits != credits {
+		_, err = repository.SaveCreditLog(model.CreditLog{
+			ID:        newID("credit"),
+			UserID:    user.ID,
+			Type:      model.CreditLogTypeAdminAdjust,
+			Amount:    credits - oldCredits,
+			Balance:   credits,
+			Remark:    "后台手动调整",
+			CreatedAt: now(),
+		})
+	}
+	user.Password = ""
+	return user, err
+}
+
+func ConsumeUserCredits(userID string, modelName string, credits int, path string) error {
+	if credits <= 0 {
+		return nil
+	}
+	user, ok, err := repository.ConsumeUserCredits(userID, credits, now())
+	if err != nil {
+		return err
+	}
+	if !ok {
+		return safeMessageError{message: "算力点不足"}
+	}
+	extra, _ := json.Marshal(map[string]string{"model": modelName, "path": path})
+	_, err = repository.SaveCreditLog(model.CreditLog{
+		ID:        newID("credit"),
+		UserID:    userID,
+		Type:      model.CreditLogTypeAIConsume,
+		Amount:    -credits,
+		Balance:   user.Credits,
+		Remark:    "调用模型 " + modelName,
+		Extra:     string(extra),
+		CreatedAt: now(),
+	})
+	return err
+}
+
+func RefundUserCredits(userID string, modelName string, credits int, path string) error {
+	if credits <= 0 {
+		return nil
+	}
+	user, ok, err := repository.RefundUserCredits(userID, credits, now())
+	if err != nil {
+		return err
+	}
+	if !ok {
+		return safeMessageError{message: "用户不存在"}
+	}
+	extra, _ := json.Marshal(map[string]string{"model": modelName, "path": path})
+	_, err = repository.SaveCreditLog(model.CreditLog{
+		ID:        newID("credit"),
+		UserID:    userID,
+		Type:      model.CreditLogTypeAIRefund,
+		Amount:    credits,
+		Balance:   user.Credits,
+		Remark:    "模型调用失败返还 " + modelName,
+		Extra:     string(extra),
+		CreatedAt: now(),
+	})
+	return err
+}
+
+func ListCreditLogs(q model.Query) (model.CreditLogList, error) {
+	logs, total, err := repository.ListCreditLogs(q)
+	if err != nil {
+		return model.CreditLogList{}, err
+	}
+	return model.CreditLogList{Items: logs, Total: int(total)}, nil
+}
+
+func SaveCreditLog(log model.CreditLog) (model.CreditLog, error) {
+	if log.ID == "" {
+		log.ID = newID("credit")
+		log.CreatedAt = now()
+	}
+	return repository.SaveCreditLog(log)
+}
+
+func DeleteCreditLog(id string) error {
+	return repository.DeleteCreditLog(id)
+}
+
 func DeleteUser(id string) error {
 	return repository.DeleteUser(id)
 }
@@ -214,6 +446,131 @@ func newID(prefix string) string {
 	return prefix + "-" + uuid.NewString()
 }
 
+func newAffCode() string {
+	return strings.ToUpper(strings.ReplaceAll(uuid.NewString()[:8], "-", ""))
+}
+
+func normalizeUserDefaults(user *model.User) {
+	if user.Status == "" {
+		user.Status = model.UserStatusActive
+	}
+	if user.AffCode == "" {
+		user.AffCode = newAffCode()
+	}
+}
+
+type linuxDoTokenResponse struct {
+	AccessToken string `json:"access_token"`
+}
+
+type linuxDoUserResponse struct {
+	ID             int64  `json:"id"`
+	Username       string `json:"username"`
+	Name           string `json:"name"`
+	AvatarTemplate string `json:"avatar_template"`
+}
+
+func linuxDoAccessToken(r *http.Request, code string, setting model.PrivateLinuxDoAuthSetting) (string, error) {
+	values := url.Values{}
+	values.Set("client_id", setting.ClientID)
+	values.Set("client_secret", setting.ClientSecret)
+	values.Set("grant_type", "authorization_code")
+	values.Set("code", code)
+	values.Set("redirect_uri", linuxDoRedirectURI(r))
+	req, _ := http.NewRequest(http.MethodPost, config.Cfg.LinuxDoTokenURL, strings.NewReader(values.Encode()))
+	req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
+	var payload linuxDoTokenResponse
+	if err := doLinuxDoJSON(req, &payload); err != nil {
+		return "", err
+	}
+	if strings.TrimSpace(payload.AccessToken) == "" {
+		return "", safeMessageError{message: "Linux.do 登录失败"}
+	}
+	return payload.AccessToken, nil
+}
+
+func linuxDoRedirectURI(r *http.Request) string {
+	return RequestOrigin(r) + "/api/auth/linux-do/callback"
+}
+
+func linuxDoProfile(token string) (linuxDoUserResponse, error) {
+	req, _ := http.NewRequest(http.MethodGet, config.Cfg.LinuxDoUserInfoURL, nil)
+	req.Header.Set("Authorization", "Bearer "+token)
+	var payload linuxDoUserResponse
+	err := doLinuxDoJSON(req, &payload)
+	return payload, err
+}
+
+func doLinuxDoJSON(req *http.Request, payload any) error {
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+	body, _ := io.ReadAll(resp.Body)
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		return safeMessageError{message: "Linux.do 登录失败"}
+	}
+	return json.NewDecoder(bytes.NewReader(body)).Decode(payload)
+}
+
+func linuxDoUsername(username string, id string) string {
+	base := strings.TrimSpace(username)
+	if base == "" {
+		base = "linuxdo-" + id
+	}
+	if _, ok, err := repository.GetUserByUsername(base); err != nil || !ok {
+		return base
+	}
+	return base + "-" + id
+}
+
+func linuxDoAvatar(template string) string {
+	if strings.TrimSpace(template) == "" {
+		return ""
+	}
+	if strings.HasPrefix(template, "//") {
+		template = "https:" + template
+	}
+	if strings.HasPrefix(template, "/") {
+		template = "https://linux.do" + template
+	}
+	return strings.ReplaceAll(template, "{size}", "120")
+}
+
+func decodeState(state string) string {
+	data, err := base64.RawURLEncoding.DecodeString(state)
+	if err != nil {
+		return "/"
+	}
+	redirect := string(data)
+	if !strings.HasPrefix(redirect, "/") {
+		return "/"
+	}
+	return redirect
+}
+
+func RequestOrigin(r *http.Request) string {
+	host := strings.TrimSpace(r.Header.Get("X-Forwarded-Host"))
+	if host == "" {
+		host = r.Host
+	}
+	proto := strings.TrimSpace(r.Header.Get("X-Forwarded-Proto"))
+	if proto == "" {
+		proto = "http"
+	}
+	return proto + "://" + host
+}
+
+func firstNonEmpty(values ...string) string {
+	for _, value := range values {
+		if strings.TrimSpace(value) != "" {
+			return value
+		}
+	}
+	return ""
+}
+
 func WarnDefaultSecurityConfig() {
 	if config.Cfg.AdminUsername == "admin" && config.Cfg.AdminPassword == "infinite-canvas" {
 		log.Println("WARNING: using default admin credentials, please set ADMIN_USERNAME and ADMIN_PASSWORD to safer values before deployment")

service/settings.go

@@ -31,6 +31,7 @@ func SaveSettings(settings model.Settings) (model.Settings, error) {
 	}
 	settings = normalizeSettings(settings)
 	keepPrivateAPIKeys(&settings, normalizeSettings(saved))
+	keepPrivateAuthSecrets(&settings, normalizeSettings(saved))
 	result, err := repository.SaveSettings(settings, now())
 	if err == nil {
 		RefreshPromptSyncScheduler()
@@ -64,13 +65,40 @@ func normalizePublicSetting(setting model.PublicSetting) model.PublicSetting {
 	if setting.ModelChannel.AvailableModels == nil {
 		setting.ModelChannel.AvailableModels = []string{}
 	}
+	if setting.ModelChannel.ModelCosts == nil {
+		setting.ModelChannel.ModelCosts = []model.ModelCost{}
+	}
+	for i := range setting.ModelChannel.ModelCosts {
+		setting.ModelChannel.ModelCosts[i].Model = strings.TrimSpace(setting.ModelChannel.ModelCosts[i].Model)
+		if setting.ModelChannel.ModelCosts[i].Credits < 0 {
+			setting.ModelChannel.ModelCosts[i].Credits = 0
+		}
+	}
 	if setting.ModelChannel.AllowCustomChannel == nil {
 		enabled := true
 		setting.ModelChannel.AllowCustomChannel = &enabled
 	}
+	if setting.Auth.AllowRegister == nil {
+		enabled := true
+		setting.Auth.AllowRegister = &enabled
+	}
 	return setting
 }
 
+func ModelCost(modelName string) (int, error) {
+	settings, err := repository.GetSettings()
+	if err != nil {
+		return 0, err
+	}
+	modelName = strings.TrimSpace(modelName)
+	for _, item := range normalizePublicSetting(settings.Public).ModelChannel.ModelCosts {
+		if item.Model == modelName {
+			return item.Credits, nil
+		}
+	}
+	return 0, nil
+}
+
 func normalizePrivateSetting(setting model.PrivateSetting) model.PrivateSetting {
 	if setting.Channels == nil {
 		setting.Channels = []model.ModelChannel{}
@@ -94,6 +122,7 @@ func hidePrivateAPIKeys(settings model.Settings) model.Settings {
 	for i := range settings.Private.Channels {
 		settings.Private.Channels[i].APIKey = ""
 	}
+	settings.Private.Auth.LinuxDo.ClientSecret = ""
 	return settings
 }
 
@@ -108,6 +137,12 @@ func keepPrivateAPIKeys(settings *model.Settings, saved model.Settings) {
 	}
 }
 
+func keepPrivateAuthSecrets(settings *model.Settings, saved model.Settings) {
+	if strings.TrimSpace(settings.Private.Auth.LinuxDo.ClientSecret) == "" {
+		settings.Private.Auth.LinuxDo.ClientSecret = saved.Private.Auth.LinuxDo.ClientSecret
+	}
+}
+
 func findSavedChannel(channel model.ModelChannel, saved []model.ModelChannel, index int) (model.ModelChannel, bool) {
 	for _, item := range saved {
 		if item.Name == channel.Name && item.BaseURL == channel.BaseURL {

web/bun.lock

@@ -16,6 +16,9 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "copy-to-clipboard": "^4.0.2",
+        "dayjs": "^1.11.20",
+        "fflate": "^0.8.3",
+        "file-saver": "^2.0.5",
         "localforage": "^1.10.0",
         "lucide-react": "^1.16.0",
         "motion": "^12.38.0",
@@ -32,6 +35,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "19.1.12",
         "@types/react-dom": "19.1.9",
@@ -553,6 +557,8 @@
 
     "@types/debug": ["@types/debug@4.1.13", "https://registry.npmmirror.com/@types/debug/-/debug-4.1.13.tgz", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
 
+    "@types/file-saver": ["@types/file-saver@2.0.7", "", {}, "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A=="],
+
     "@types/hast": ["@types/hast@2.3.10", "https://registry.npmmirror.com/@types/hast/-/hast-2.3.10.tgz", { "dependencies": { "@types/unist": "^2" } }, "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw=="],
 
     "@types/mdast": ["@types/mdast@3.0.15", "https://registry.npmmirror.com/@types/mdast/-/mdast-3.0.15.tgz", { "dependencies": { "@types/unist": "^2" } }, "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ=="],
@@ -801,8 +807,12 @@
 
     "fetch-blob": ["fetch-blob@3.2.0", "https://registry.npmmirror.com/fetch-blob/-/fetch-blob-3.2.0.tgz", { "dependencies": { "node-domexception": "^1.0.0", "web-streams-polyfill": "^3.0.3" } }, "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ=="],
 
+    "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
+
     "figures": ["figures@6.1.0", "https://registry.npmmirror.com/figures/-/figures-6.1.0.tgz", { "dependencies": { "is-unicode-supported": "^2.0.0" } }, "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg=="],
 
+    "file-saver": ["file-saver@2.0.5", "", {}, "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="],
+
     "fill-range": ["fill-range@7.1.1", "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "finalhandler": ["finalhandler@2.1.1", "https://registry.npmmirror.com/finalhandler/-/finalhandler-2.1.1.tgz", { "dependencies": { "debug": "^4.4.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "on-finished": "^2.4.1", "parseurl": "^1.3.3", "statuses": "^2.0.1" } }, "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA=="],

web/package.json

@@ -22,6 +22,9 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "copy-to-clipboard": "^4.0.2",
+        "dayjs": "^1.11.20",
+        "fflate": "^0.8.3",
+        "file-saver": "^2.0.5",
         "localforage": "^1.10.0",
         "lucide-react": "^1.16.0",
         "motion": "^12.38.0",
@@ -38,6 +41,7 @@
     },
     "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "19.1.12",
         "@types/react-dom": "19.1.9",

web/public/icons/deepseek.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"></path></svg>

web/public/icons/glm.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Zhipu</title><path d="M11.991 23.503a.24.24 0 00-.244.248.24.24 0 00.244.249.24.24 0 00.245-.249.24.24 0 00-.22-.247l-.025-.001zM9.671 5.365a1.697 1.697 0 011.099 2.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47 1.279 1.186 1.314h.366c1.309.053 2.338 1.173 2.286 2.523-.052 1.332-1.152 2.38-2.478 2.327h-.174c-.715.018-1.274.64-1.239 1.368 0 .124.018.23.053.337.209.373.54.658.96.8.75.23 1.517-.125 1.9-.782l.018-.035c.402-.64 1.17-.96 1.92-.711.854.284 1.378 1.226 1.099 2.167a1.661 1.661 0 01-2.077 1.102 1.711 1.711 0 01-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646 1.646 0 00-1.954.746 1.66 1.66 0 01-1.065.764 1.677 1.677 0 01-1.989-1.279c-.209-.906.332-1.83 1.257-2.043a1.51 1.51 0 01.296-.035h.018c.68-.071 1.151-.622 1.116-1.333a1.307 1.307 0 00-.227-.693 2.515 2.515 0 01-.366-1.403 2.39 2.39 0 01.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43 1.43 0 01-.299-.07l-.05-.019a1.7 1.7 0 01-1.047-2.114 1.68 1.68 0 012.094-1.101zm-5.575 10.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267 1.013-.402.41-1.053.41-1.455 0a1.062 1.062 0 010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237 1.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05 1.05 0 01.757-1.26zm-.064-4.39c.314.32.49.753.49 1.206 0 .452-.176.886-.49 1.206-.315.32-.74.5-1.185.5-.444 0-.87-.18-1.184-.5a1.727 1.727 0 010-2.412 1.654 1.654 0 012.369 0zm-11.243.163c.364.484.447 1.128.218 1.691a1.665 1.665 0 01-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68 1.68 0 011.33-1.038c.593-.08 1.183.169 1.547.652zm11.545-4.221c.368 0 .708.2.892.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.892.524c-.568 0-1.03-.47-1.03-1.048 0-.579.462-1.048 1.03-1.048zm-14.358 0c.368 0 .707.2.891.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.891.524c-.569 0-1.03-.47-1.03-1.048 0-.579.461-1.048 1.03-1.048zm10.031-1.475c.925 0 1.675.764 1.675 1.706s-.75 1.705-1.675 1.705-1.674-.763-1.674-1.705c0-.942.75-1.706 1.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062 1.062 0 00-.238-1.028 1.017 1.017 0 00-.996-.294c-.547.14-.881.7-.752 1.257.13.558.675.907 1.225.783zm0 16.876c.359-.087.644-.36.75-.72a1.062 1.062 0 00-.237-1.019 1.018 1.018 0 00-.985-.301 1.037 1.037 0 00-.762.717c-.108.361-.017.754.239 1.028.245.263.606.377.953.305l.043-.01zM17.19 3.5a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64a.631.631 0 00-.628.64c0 .355.28.64.628.64zm-10.38 0a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64a.631.631 0 00-.628.64c0 .355.279.64.628.64zm-5.182 7.852a.631.631 0 00-.628.64c0 .354.28.639.628.639a.63.63 0 00.627-.606l.001-.034a.62.62 0 00-.628-.64zm5.182 9.13a.631.631 0 00-.628.64c0 .355.279.64.628.64a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631 0 00-.628.64c0 .355.28.64.628.64a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631 0 00-.628.64c0 .354.279.639.628.639a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24 0 00.244-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249c0 .142.122.249.244.249zM11.991.497a.24.24 0 00.245-.248A.24.24 0 0011.99 0a.24.24 0 00-.244.249c0 .133.108.236.223.247l.021.001zM2.011 6.36a.24.24 0 00.245-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249.24.24 0 00.244.249zm0 11.263a.24.24 0 00-.243.248.24.24 0 00.244.249.24.24 0 00.244-.249.252.252 0 00-.244-.248zm19.995-.018a.24.24 0 00-.245.248.24.24 0 00.245.25.24.24 0 00.244-.25.252.252 0 00-.244-.248z" fill="#3859FF" fill-rule="nonzero"></path></svg>

web/public/icons/grok.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"></path></svg>

web/public/icons/linuxdo.svg

@@ -0,0 +1,9 @@
+<svg class="icon" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" style="color: rgb(233, 84, 32); width: 20px; height: 20px;">
+    <g id="linuxdo_icon" data-name="linuxdo_icon">
+        <path
+            d="m7.44,0s.09,0,.13,0c.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0q.12,0,.25,0t.26.08c.15.03.29.06.44.08,1.97.38,3.78,1.47,4.95,3.11.04.06.09.12.13.18.67.96,1.15,2.11,1.3,3.28q0,.19.09.26c0,.15,0,.29,0,.44,0,.04,0,.09,0,.13,0,.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0,.08,0,.17,0,.25q0,.19-.08.26c-.03.15-.06.29-.08.44-.38,1.97-1.47,3.78-3.11,4.95-.06.04-.12.09-.18.13-.96.67-2.11,1.15-3.28,1.3q-.19,0-.26.09c-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25,0q-.19,0-.26-.08c-.15-.03-.29-.06-.44-.08-1.97-.38-3.78-1.47-4.95-3.11q-.07-.09-.13-.18c-.67-.96-1.15-2.11-1.3-3.28q0-.19-.09-.26c0-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25q0-.19.08-.26c.03-.15.06-.29.08-.44.38-1.97,1.47-3.78,3.11-4.95.06-.04.12-.09.18-.13C4.42.73,5.57.26,6.74.1,7,.07,7.15,0,7.44,0Z"
+            fill="#EFEFEF"></path>
+        <path d="m1.27,11.33h13.45c-.94,1.89-2.51,3.21-4.51,3.88-1.99.59-3.96.37-5.8-.57-1.25-.7-2.67-1.9-3.14-3.3Z" fill="#FEB005"></path>
+        <path d="m12.54,1.99c.87.7,1.82,1.59,2.18,2.68H1.27c.87-1.74,2.33-3.13,4.2-3.78,2.44-.79,5-.47,7.07,1.1Z" fill="#1D1D1F"></path>
+    </g>
+</svg>

web/src/app/(admin)/admin/assets/page.tsx

@@ -23,6 +23,7 @@ export default function AdminAssetsPage() {
     const { assets, tags, keyword, kind, tag, page, pageSize, total, isLoading, searchAssets, changeKind, changeTag, changePage, changePageSize, resetFilters, refreshAssets, saveAsset: saveAdminAsset, deleteAsset } = useAdminAssets();
     const copyText = useCopyText();
     const [form] = Form.useForm<AssetFormValues>();
+    const [keywordText, setKeywordText] = useState(keyword);
     const [editingAsset, setEditingAsset] = useState<Partial<AdminAsset> | null>(null);
     const [detailAsset, setDetailAsset] = useState<AdminAsset | null>(null);
     const [deletingAsset, setDeletingAsset] = useState<AdminAsset | null>(null);
@@ -33,6 +34,8 @@ export default function AdminAssetsPage() {
         if (editingAsset) form.setFieldsValue({ ...editingAsset, tagText: editingAsset.tags?.join(", ") || "" });
     }, [editingAsset, form]);
 
+    useEffect(() => setKeywordText(keyword), [keyword]);
+
     const saveAsset = async () => {
         const value = await form.validateFields();
         const nextType = value.type || "text";
@@ -119,7 +122,7 @@ export default function AdminAssetsPage() {
                         <Row gutter={16} align="bottom">
                             <Col flex="360px">
                                 <Form.Item label="关键词">
-                                    <Input.Search value={keyword} placeholder="搜索标题、内容或标签" allowClear enterButton={<SearchOutlined />} onSearch={searchAssets} onChange={(event) => searchAssets(event.target.value)} />
+                                    <Input.Search value={keywordText} placeholder="搜索标题、内容或标签" allowClear enterButton={<SearchOutlined />} onSearch={() => searchAssets(keywordText)} onChange={(event) => setKeywordText(event.target.value)} />
                                 </Form.Item>
                             </Col>
                             <Col flex="180px">
@@ -135,8 +138,15 @@ export default function AdminAssetsPage() {
                             <Col flex="none">
                                 <Form.Item>
                                     <Space>
-                                        <Button onClick={resetFilters}>重置</Button>
+                                        <Button
-                                        <Button type="primary" icon={<ReloadOutlined />} onClick={refreshAssets}>
+                                            onClick={() => {
+                                                setKeywordText("");
+                                                resetFilters();
+                                            }}
+                                        >
+                                            重置
+                                        </Button>
+                                        <Button type="primary" icon={<ReloadOutlined />} onClick={() => searchAssets(keywordText)}>
                                             查询
                                         </Button>
                                     </Space>

web/src/app/(admin)/admin/credit-logs/page.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
+import { ProTable, type ProColumns } from "@ant-design/pro-components";
+import { Button, Card, Col, Form, Input, InputNumber, Modal, Row, Space, Tag, Tooltip, Typography } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+
+import type { AdminCreditLog } from "@/services/api/admin";
+import { useAdminCreditLogs } from "./use-admin-credit-logs";
+
+type CreditLogFormValues = Partial<AdminCreditLog>;
+
+const creditLogTypeLabels: Record<string, string> = {
+    admin_adjust: "后台调整",
+    ai_consume: "模型消费",
+    ai_refund: "失败返还",
+};
+
+export default function AdminCreditLogsPage() {
+    const { logs, keyword, page, pageSize, total, isLoading, searchLogs, changePage, changePageSize, resetFilters, refreshLogs, saveLog: saveAdminLog, deleteLog } = useAdminCreditLogs();
+    const [form] = Form.useForm<CreditLogFormValues>();
+    const [keywordText, setKeywordText] = useState(keyword);
+    const [editingLog, setEditingLog] = useState<Partial<AdminCreditLog> | null>(null);
+    const [deletingLog, setDeletingLog] = useState<AdminCreditLog | null>(null);
+
+    useEffect(() => setKeywordText(keyword), [keyword]);
+
+    useEffect(() => {
+        if (editingLog) form.setFieldsValue({ type: "admin_adjust", amount: 0, balance: 0, ...editingLog });
+    }, [editingLog, form]);
+
+    const saveLog = async () => {
+        const value = await form.validateFields();
+        await saveAdminLog({ ...editingLog, ...value });
+        setEditingLog(null);
+    };
+
+    const columns: ProColumns<AdminCreditLog>[] = [
+        {
+            title: "用户 ID",
+            dataIndex: "userId",
+            width: 220,
+            render: (_, item) => <Typography.Text copyable>{item.userId}</Typography.Text>,
+        },
+        {
+            title: "类型",
+            dataIndex: "type",
+            width: 140,
+            render: (_, item) => <Tag>{creditLogTypeLabels[item.type] || item.type || "-"}</Tag>,
+        },
+        {
+            title: "变动",
+            dataIndex: "amount",
+            width: 100,
+            render: (_, item) => <Typography.Text type={item.amount >= 0 ? "success" : "danger"}>{item.amount}</Typography.Text>,
+        },
+        {
+            title: "余额",
+            dataIndex: "balance",
+            width: 100,
+        },
+        {
+            title: "备注",
+            dataIndex: "remark",
+            ellipsis: true,
+            render: (_, item) => <Typography.Text type="secondary">{item.remark || "-"}</Typography.Text>,
+        },
+        {
+            title: "创建时间",
+            dataIndex: "createdAt",
+            width: 180,
+            render: (_, item) => <Typography.Text type="secondary">{item.createdAt ? dayjs(item.createdAt).format("YYYY-MM-DD HH:mm:ss") : "-"}</Typography.Text>,
+        },
+        {
+            title: "操作",
+            key: "actions",
+            width: 96,
+            align: "right",
+            render: (_, item) => (
+                <Space size={4}>
+                    <Tooltip title="编辑">
+                        <Button type="text" size="small" icon={<EditOutlined />} onClick={() => setEditingLog(item)} />
+                    </Tooltip>
+                    <Tooltip title="删除">
+                        <Button danger type="text" size="small" icon={<DeleteOutlined />} onClick={() => setDeletingLog(item)} />
+                    </Tooltip>
+                </Space>
+            ),
+        },
+    ];
+
+    return (
+        <main style={{ padding: 24 }}>
+            <Space direction="vertical" size={16} style={{ width: "100%" }}>
+                <Card variant="borderless">
+                    <Form layout="vertical">
+                        <Row gutter={16} align="bottom">
+                            <Col flex="360px">
+                                <Form.Item label="关键词">
+                                    <Input.Search value={keywordText} placeholder="搜索用户 ID、类型、备注或关联 ID" allowClear enterButton={<SearchOutlined />} onSearch={() => searchLogs(keywordText)} onChange={(event) => setKeywordText(event.target.value)} />
+                                </Form.Item>
+                            </Col>
+                            <Col flex="none">
+                                <Form.Item>
+                                    <Space>
+                                        <Button
+                                            onClick={() => {
+                                                setKeywordText("");
+                                                resetFilters();
+                                            }}
+                                        >
+                                            重置
+                                        </Button>
+                                        <Button type="primary" icon={<ReloadOutlined />} onClick={() => searchLogs(keywordText)}>
+                                            查询
+                                        </Button>
+                                    </Space>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form>
+                </Card>
+                <ProTable<AdminCreditLog>
+                    rowKey="id"
+                    columns={columns}
+                    dataSource={logs}
+                    loading={isLoading}
+                    search={false}
+                    defaultSize="middle"
+                    tableLayout="fixed"
+                    cardProps={{ variant: "borderless" }}
+                    headerTitle={
+                        <Space>
+                            <Typography.Text strong>算力点日志</Typography.Text>
+                            <Tag>{total} 条</Tag>
+                        </Space>
+                    }
+                    options={{ density: true, setting: true, reload: () => void refreshLogs() }}
+                    toolBarRender={() => [
+                        <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditingLog({ type: "admin_adjust", amount: 0, balance: 0 })}>
+                            新增
+                        </Button>,
+                    ]}
+                    pagination={{
+                        current: page,
+                        pageSize,
+                        total,
+                        showSizeChanger: true,
+                        pageSizeOptions: [10, 20, 50, 100],
+                        showTotal: (value) => `共 ${value} 条`,
+                        onChange: (nextPage, nextPageSize) => (nextPageSize !== pageSize ? changePageSize(nextPageSize) : changePage(nextPage)),
+                    }}
+                />
+            </Space>
+
+            <Modal title={editingLog?.id ? "编辑日志" : "新增日志"} open={Boolean(editingLog)} width={680} onCancel={() => setEditingLog(null)} onOk={() => void saveLog()} okText="保存" cancelText="取消" destroyOnHidden>
+                <Form form={form} layout="vertical" requiredMark={false}>
+                    <Row gutter={14}>
+                        <Col span={12}>
+                            <Form.Item name="userId" label="用户 ID" rules={[{ required: true, message: "请输入用户 ID" }]}>
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="type" label="类型" rules={[{ required: true, message: "请输入类型" }]}>
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="amount" label="变动数量" rules={[{ required: true, message: "请输入变动数量" }]}>
+                                <InputNumber precision={0} style={{ width: "100%" }} />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="balance" label="变动后余额" rules={[{ required: true, message: "请输入变动后余额" }]}>
+                                <InputNumber min={0} precision={0} style={{ width: "100%" }} />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="relatedId" label="关联 ID">
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="createdAt" label="创建时间">
+                                <Input placeholder="不填则新增时自动生成" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item name="remark" label="备注">
+                                <Input.TextArea rows={3} />
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item name="extra" label="扩展信息">
+                                <Input.TextArea rows={3} />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
+
+            <Modal
+                title="删除日志"
+                open={Boolean(deletingLog)}
+                onCancel={() => setDeletingLog(null)}
+                onOk={async () => {
+                    if (!deletingLog) return;
+                    await deleteLog(deletingLog.id);
+                    setDeletingLog(null);
+                }}
+                okText="删除"
+                okButtonProps={{ danger: true }}
+                cancelText="取消"
+            >
+                确定删除这条算力点日志吗？
+            </Modal>
+        </main>
+    );
+}

web/src/app/(admin)/admin/credit-logs/use-admin-credit-logs.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App } from "antd";
+
+import { deleteAdminCreditLog, fetchAdminCreditLogs, saveAdminCreditLog, type AdminCreditLog } from "@/services/api/admin";
+import { useUserStore } from "@/stores/use-user-store";
+
+const defaultPageSize = 10;
+
+export function useAdminCreditLogs() {
+    const { message } = App.useApp();
+    const queryClient = useQueryClient();
+    const token = useUserStore((state) => state.token);
+    const clearSession = useUserStore((state) => state.clearSession);
+    const [keyword, setKeyword] = useState("");
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+
+    const query = useQuery({
+        queryKey: ["admin", "credit-logs", token, keyword, page, pageSize],
+        queryFn: () => fetchAdminCreditLogs(token, { keyword, page, pageSize }),
+        enabled: Boolean(token),
+        retry: false,
+    });
+
+    const saveMutation = useMutation({
+        mutationFn: (log: Partial<AdminCreditLog>) => saveAdminCreditLog(token, log),
+        onSuccess: async (_, log) => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "credit-logs"] });
+            message.success(log.id ? "日志已保存" : "日志已新增");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "保存失败"),
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: string) => deleteAdminCreditLog(token, id),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "credit-logs"] });
+            message.success("日志已删除");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "删除失败"),
+    });
+
+    useEffect(() => {
+        if (query.isError) {
+            const errorMessage = query.error instanceof Error ? query.error.message : "读取日志失败";
+            message.error(errorMessage);
+            if (errorMessage.includes("未登录") || errorMessage.includes("权限不足") || errorMessage.includes("登录状态无效")) clearSession();
+        }
+    }, [clearSession, message, query.error, query.isError]);
+
+    const updateFilters = (next: Partial<{ keyword: string; page: number; pageSize: number }>) => {
+        const queryState = { keyword, page, pageSize, ...next };
+        if (next.keyword !== undefined || next.pageSize !== undefined) queryState.page = 1;
+        setKeyword(queryState.keyword);
+        setPage(queryState.page);
+        setPageSize(queryState.pageSize);
+    };
+
+    const data = query.data;
+
+    return {
+        logs: data?.items || [],
+        keyword,
+        page,
+        pageSize,
+        total: data?.total || 0,
+        isLoading: query.isFetching || saveMutation.isPending || deleteMutation.isPending,
+        searchLogs: (value = keyword) => updateFilters({ keyword: value }),
+        changePage: (value: number) => updateFilters({ page: value }),
+        changePageSize: (value: number) => updateFilters({ pageSize: value }),
+        resetFilters: () => updateFilters({ keyword: "", page: 1, pageSize: defaultPageSize }),
+        refreshLogs: () => query.refetch(),
+        saveLog: (log: Partial<AdminCreditLog>) => saveMutation.mutateAsync(log),
+        deleteLog: (id: string) => deleteMutation.mutateAsync(id),
+    };
+}

web/src/app/(admin)/admin/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FileTextOutlined, HomeOutlined, LogoutOutlined, PictureOutlined, SettingOutlined } from "@ant-design/icons";
+import { FileTextOutlined, HomeOutlined, LogoutOutlined, PictureOutlined, SettingOutlined, TransactionOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Flex, Layout, Menu, Typography, theme } from "antd";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -12,6 +12,8 @@ import { adminLayoutStyle } from "@/lib/app-theme";
 import { useUserStore } from "@/stores/use-user-store";
 
 const adminMenus = [
+    { key: "/admin/users", icon: <UserOutlined />, label: "用户管理" },
+    { key: "/admin/credit-logs", icon: <TransactionOutlined />, label: "算力点日志" },
     { key: "/admin/prompts", icon: <FileTextOutlined />, label: "提示词管理" },
     { key: "/admin/assets", icon: <PictureOutlined />, label: "素材库" },
     { key: "/admin/settings", icon: <SettingOutlined />, label: "系统设置" },
@@ -25,8 +27,18 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
     const user = useUserStore((state) => state.user);
     const isReady = useUserStore((state) => state.isReady);
     const logout = useUserStore((state) => state.clearSession);
-    const activeKey = pathname.startsWith("/admin/settings") ? "/admin/settings" : pathname.startsWith("/admin/assets") ? "/admin/assets" : pathname.startsWith("/admin/prompts") ? "/admin/prompts" : "";
+    const activeKey = pathname.startsWith("/admin/settings")
-    const pageTitle = pathname.startsWith("/admin/settings") ? "系统设置" : pathname.startsWith("/admin/assets") ? "素材库管理" : "提示词管理";
+        ? "/admin/settings"
+        : pathname.startsWith("/admin/assets")
+          ? "/admin/assets"
+          : pathname.startsWith("/admin/prompts")
+            ? "/admin/prompts"
+            : pathname.startsWith("/admin/credit-logs")
+              ? "/admin/credit-logs"
+              : pathname.startsWith("/admin/users")
+                ? "/admin/users"
+                : "";
+    const pageTitle = pathname.startsWith("/admin/settings") ? "系统设置" : pathname.startsWith("/admin/assets") ? "素材库管理" : pathname.startsWith("/admin/prompts") ? "提示词管理" : pathname.startsWith("/admin/credit-logs") ? "算力点日志" : "用户管理";
 
     useEffect(() => {
         if (!isReady) return;

web/src/app/(admin)/admin/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function AdminPage() {
-    redirect("/admin/assets");
+    redirect("/admin/users");
 }

web/src/app/(admin)/admin/prompts/page.tsx

@@ -36,6 +36,7 @@ export default function AdminPromptsPage() {
     } = useAdminPrompts();
     const copyText = useCopyText();
     const [form] = Form.useForm<Partial<Prompt> & { tagText?: string }>();
+    const [keywordText, setKeywordText] = useState(keyword);
     const [editingPrompt, setEditingPrompt] = useState<Partial<Prompt> | null>(null);
     const [detailPrompt, setDetailPrompt] = useState<Prompt | null>(null);
     const [deletingPrompt, setDeletingPrompt] = useState<Prompt | null>(null);
@@ -51,6 +52,8 @@ export default function AdminPromptsPage() {
         if (editingPrompt) form.setFieldsValue({ ...editingPrompt, tagText: editingPrompt.tags?.join(", ") || "" });
     }, [editingPrompt, form]);
 
+    useEffect(() => setKeywordText(keyword), [keyword]);
+
     const savePrompt = async () => {
         const value = await form.validateFields();
         await saveAdminPrompt({
@@ -135,7 +138,7 @@ export default function AdminPromptsPage() {
                         <Row gutter={16} align="bottom">
                             <Col flex="360px">
                                 <Form.Item label="关键词">
-                                    <Input.Search value={keyword} placeholder="搜索标题或提示词" allowClear enterButton={<SearchOutlined />} onSearch={searchPrompts} onChange={(event) => searchPrompts(event.target.value)} />
+                                    <Input.Search value={keywordText} placeholder="搜索标题或提示词" allowClear enterButton={<SearchOutlined />} onSearch={() => searchPrompts(keywordText)} onChange={(event) => setKeywordText(event.target.value)} />
                                 </Form.Item>
                             </Col>
                             <Col flex="220px">
@@ -151,8 +154,15 @@ export default function AdminPromptsPage() {
                             <Col flex="none">
                                 <Form.Item>
                                     <Space>
-                                        <Button onClick={resetFilters}>重置</Button>
+                                        <Button
-                                        <Button type="primary" icon={<ReloadOutlined />} onClick={refreshPrompts}>
+                                            onClick={() => {
+                                                setKeywordText("");
+                                                resetFilters();
+                                            }}
+                                        >
+                                            重置
+                                        </Button>
+                                        <Button type="primary" icon={<ReloadOutlined />} onClick={() => searchPrompts(keywordText)}>
                                             查询
                                         </Button>
                                     </Space>

web/src/app/(admin)/admin/settings/page.tsx

@@ -2,12 +2,12 @@
 
 import { CheckCircleOutlined, DeleteOutlined, FormatPainterOutlined, LoadingOutlined, PlusOutlined, ReloadOutlined, SaveOutlined } from "@ant-design/icons";
 import { json } from "@codemirror/lang-json";
-import { Alert, App, Button, Card, Col, Drawer, Flex, Form, Input, InputNumber, Modal, Row, Segmented, Select, Space, Switch, Table, Tabs, Tag, Typography } from "antd";
+import { App, Button, Card, Checkbox, Col, Drawer, Flex, Form, Input, InputNumber, Modal, Row, Segmented, Select, Space, Switch, Table, Tabs, Tag, Typography } from "antd";
 import dynamic from "next/dynamic";
 import { useEffect, useMemo, useState } from "react";
 import { EditorView } from "@uiw/react-codemirror";
 
-import { fetchAdminSettings, fetchChannelModels, saveAdminSettings, testChannelModel, type AdminModelChannel, type AdminSettings } from "@/services/api/admin";
+import { fetchAdminSettings, fetchChannelModels, saveAdminSettings, testChannelModel, type AdminModelChannel, type AdminModelCost, type AdminSettings } from "@/services/api/admin";
 import { useUserStore } from "@/stores/use-user-store";
 
 const CodeMirror = dynamic(() => import("@uiw/react-codemirror"), { ssr: false });
@@ -28,19 +28,23 @@ const emptySettings: AdminSettings = {
     public: {
         modelChannel: {
             availableModels: [],
+            modelCosts: [],
             defaultModel: "",
             defaultImageModel: "",
+            defaultVideoModel: "",
             defaultTextModel: "",
             systemPrompt: "",
             allowCustomChannel: true,
         },
+        auth: { allowRegister: true, linuxDo: { enabled: false } },
     },
-    private: { channels: [], promptSync: { enabled: true, cron: "*/5 * * * *" } },
+    private: { channels: [], promptSync: { enabled: true, cron: "*/5 * * * *" }, auth: { linuxDo: { clientId: "", clientSecret: "" } } },
 };
 const emptyChannel: AdminModelChannel = { protocol: "openai", name: "", baseUrl: "", apiKey: "", models: [], weight: 1, enabled: true, remark: "" };
 
 type SettingsTabKey = "public" | "private";
 type EditorMode = "visual" | "json";
+type ModelSelectTabKey = "new" | "current";
 
 export default function AdminSettingsPage() {
     const token = useUserStore((state) => state.token);
@@ -58,15 +62,30 @@ export default function AdminSettingsPage() {
     const [selectedTestModels, setSelectedTestModels] = useState<string[]>([]);
     const [testingModels, setTestingModels] = useState<string[]>([]);
     const [testResults, setTestResults] = useState<Record<string, { status: "success" | "error"; duration?: string; message: string }>>({});
+    const [isModelSelectorOpen, setIsModelSelectorOpen] = useState(false);
+    const [modelSelectSource, setModelSelectSource] = useState<string[]>([]);
+    const [modelSelectExisting, setModelSelectExisting] = useState<string[]>([]);
+    const [modelSelectSelected, setModelSelectSelected] = useState<string[]>([]);
+    const [modelSelectKeyword, setModelSelectKeyword] = useState("");
+    const [modelSelectNewModel, setModelSelectNewModel] = useState("");
+    const [modelSelectTab, setModelSelectTab] = useState<ModelSelectTabKey>("new");
+    const [isFetchingChannelModels, setIsFetchingChannelModels] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    const [modelCosts, setModelCosts] = useState<AdminModelCost[]>([]);
+    const [knownModels, setKnownModels] = useState<string[]>([]);
     const publicModels = Form.useWatch(["public", "modelChannel", "availableModels"], form) || [];
     const channelModels = useMemo(() => collectChannelModels(channels), [channels]);
     const channelTableData = useMemo(() => channels.map((channel, index) => ({ ...channel, _index: index, _rowKey: `${index}-${channel.name}-${channel.baseUrl}` })), [channels]);
-    const modelOptions = useMemo(() => uniqueModels([...publicModels, ...channelModels]), [publicModels, channelModels]);
     const activeMode = editorMode[activeTab];
     const activeJsonText = jsonText[activeTab];
     const jsonError = activeMode === "json" ? getJsonError(activeJsonText) : "";
+    const modelSelectGroups = useMemo(() => buildModelSelectGroups(modelSelectSource, modelSelectExisting), [modelSelectSource, modelSelectExisting]);
+    const activeModelSelectModels = useMemo(() => {
+        const keyword = modelSelectKeyword.trim().toLowerCase();
+        return modelSelectGroups[modelSelectTab].filter((model) => model.toLowerCase().includes(keyword));
+    }, [modelSelectGroups, modelSelectKeyword, modelSelectTab]);
+    const activeSelectedCount = activeModelSelectModels.filter((model) => modelSelectSelected.includes(model)).length;
 
     const loadSettings = async () => {
         if (!token) return;
@@ -75,6 +94,8 @@ export default function AdminSettingsPage() {
             const data = normalizeSettings(await fetchAdminSettings(token));
             form.setFieldsValue(data);
             setChannels(data.private.channels);
+            setModelCosts(data.public.modelChannel.modelCosts);
+            setKnownModels(collectKnownModels(data));
             setJsonText({
                 public: JSON.stringify(data.public, null, 2),
                 private: JSON.stringify(data.private, null, 2),
@@ -106,6 +127,8 @@ export default function AdminSettingsPage() {
             const merged = mergeChannelApiKeys(values.private.channels, saved);
             form.setFieldsValue(merged);
             setChannels(merged.private.channels);
+            setModelCosts(merged.public.modelChannel.modelCosts);
+            rememberKnownModels(merged);
             setJsonText({
                 public: JSON.stringify(merged.public, null, 2),
                 private: JSON.stringify(merged.private, null, 2),
@@ -134,6 +157,8 @@ export default function AdminSettingsPage() {
         }
         form.setFieldsValue({ [tab]: parsed } as Partial<AdminSettings>);
         if (tab === "private") setChannels((parsed as AdminSettings["private"]).channels);
+        if (tab === "public") setModelCosts((parsed as AdminSettings["public"]).modelChannel.modelCosts);
+        rememberKnownModels({ ...normalizeSettings(form.getFieldsValue(true) as AdminSettings), [tab]: parsed });
         setEditorMode((current) => ({ ...current, [tab]: nextMode }));
     };
 
@@ -143,6 +168,7 @@ export default function AdminSettingsPage() {
             message.error("JSON 格式不正确");
             return;
         }
+        if (tab === "public") setModelCosts((parsed as AdminSettings["public"]).modelChannel.modelCosts);
         setJsonText((current) => ({
             ...current,
             [tab]: JSON.stringify(parsed, null, 2),
@@ -152,7 +178,9 @@ export default function AdminSettingsPage() {
     const openChannelDrawer = (index: number | null) => {
         setEditingChannelIndex(index);
         setIsChannelDrawerOpen(true);
-        channelForm.setFieldsValue(index === null ? emptyChannel : normalizeChannel(channels[index]));
+        const channel = index === null ? emptyChannel : normalizeChannel(channels[index]);
+        channelForm.setFieldsValue(channel);
+        rememberModels(channel.models);
     };
 
     const closeChannelDrawer = () => {
@@ -163,6 +191,7 @@ export default function AdminSettingsPage() {
 
     const saveChannel = async () => {
         const channel = normalizeChannel(await channelForm.validateFields());
+        rememberModels(channel.models);
         const nextChannels = [...channels];
         if (editingChannelIndex === null) nextChannels.push(channel);
         else nextChannels[editingChannelIndex] = channel;
@@ -181,15 +210,81 @@ export default function AdminSettingsPage() {
             message.warning("请先填写 API Key");
             return;
         }
+        setIsFetchingChannelModels(true);
         try {
             const channelModels = await fetchChannelModels(token, { index: editingChannelIndex ?? undefined, channel: normalizeChannel(channel) });
-            channelForm.setFieldValue("models", channelModels);
+            const current = isModelSelectorOpen ? uniqueModels(modelSelectSelected) : uniqueModels(channelForm.getFieldValue("models") || []);
-            message.success(`已获取 ${channelModels.length} 个模型`);
+            rememberModels(channelModels);
+            setModelSelectExisting(current);
+            setModelSelectSource(uniqueModels(channelModels));
+            setModelSelectSelected(uniqueModels([...current, ...channelModels]));
+            setModelSelectKeyword("");
+            setModelSelectNewModel("");
+            setModelSelectTab("new");
+            setIsModelSelectorOpen(true);
+            message.success(`已获取 ${channelModels.length} 个模型，请选择后确认`);
         } catch (error) {
             message.error(error instanceof Error ? error.message : "读取模型失败");
+        } finally {
+            setIsFetchingChannelModels(false);
         }
     };
 
+    const openChannelModelSelector = (sourceModels?: string[]) => {
+        const current = uniqueModels(channelForm.getFieldValue("models") || []);
+        const source = uniqueModels(sourceModels !== undefined ? sourceModels : [...knownModels, ...current]);
+        setModelSelectExisting(current);
+        setModelSelectSource(source);
+        setModelSelectSelected(sourceModels ? uniqueModels([...current, ...source]) : current);
+        setModelSelectKeyword("");
+        setModelSelectNewModel("");
+        setModelSelectTab(sourceModels ? "new" : "current");
+        setIsModelSelectorOpen(true);
+    };
+
+    const closeChannelModelSelector = () => {
+        setIsModelSelectorOpen(false);
+        setModelSelectKeyword("");
+        setModelSelectNewModel("");
+    };
+
+    const confirmChannelModelSelector = () => {
+        const models = uniqueModels(modelSelectSelected);
+        channelForm.setFieldValue("models", models);
+        rememberModels(models);
+        closeChannelModelSelector();
+    };
+
+    const toggleSelectedModel = (model: string, checked: boolean) => {
+        setModelSelectSelected((current) => (checked ? uniqueModels([...current, model]) : current.filter((item) => item !== model)));
+    };
+
+    const selectActiveModels = () => {
+        setModelSelectSelected((current) => uniqueModels([...current, ...activeModelSelectModels]));
+    };
+
+    const clearActiveModels = () => {
+        const active = new Set(activeModelSelectModels);
+        setModelSelectSelected((current) => current.filter((model) => !active.has(model)));
+    };
+
+    const addModelInSelector = () => {
+        const model = modelSelectNewModel.trim();
+        if (!model) return;
+        setModelSelectExisting((current) => uniqueModels([...current, model]));
+        setModelSelectSelected((current) => uniqueModels([...current, model]));
+        setModelSelectNewModel("");
+        setModelSelectTab("current");
+    };
+
+    function rememberModels(models: string[]) {
+        setKnownModels((current) => uniqueModels([...current, ...models]));
+    }
+
+    function rememberKnownModels(settings: AdminSettings) {
+        rememberModels(collectKnownModels(settings));
+    }
+
     const openTestDialog = (index: number) => {
         const channel = normalizeChannel(channels[index]);
         if (!channel.baseUrl || channel.models.length === 0) {
@@ -239,13 +334,17 @@ export default function AdminSettingsPage() {
     async function persistChannels(nextChannels: AdminModelChannel[]) {
         if (!token) return;
         const values = normalizeSettings(form.getFieldsValue(true) as AdminSettings);
+        const nextChannelModels = collectChannelModels(nextChannels);
         const nextSettings = normalizeSettings({
             ...values,
+            public: { ...values.public, modelChannel: { ...values.public.modelChannel, availableModels: filterModels(values.public.modelChannel.availableModels, nextChannelModels) } },
             private: { ...values.private, channels: nextChannels },
         });
         const saved = normalizeSettings(await saveAdminSettings(token, nextSettings));
         const merged = mergeChannelApiKeys(nextChannels, saved);
         setChannels(merged.private.channels);
+        setModelCosts(merged.public.modelChannel.modelCosts);
+        rememberKnownModels(merged);
         form.setFieldsValue(merged);
         setJsonText({
             public: JSON.stringify(merged.public, null, 2),
@@ -311,21 +410,26 @@ export default function AdminSettingsPage() {
                             <Form form={form} layout="vertical" initialValues={emptySettings} requiredMark={false}>
                                 <Row gutter={16}>
                                     <Col span={24}>
-                                        <Form.Item name={["public", "modelChannel", "availableModels"]} label="系统可用模型(请先配置渠道)">
+                                        <Form.Item name={["public", "modelChannel", "availableModels"]} label="系统可用模型(请先在私有配置里配置渠道)" extra="可选项来自已启用渠道中选择的模型，最终开放哪些模型由这里勾选决定">
-                                            <Select mode="tags" tokenSeparators={[",", "\n"]} options={modelOptions.map((item) => ({ label: item, value: item }))} />
+                                            <Select mode="multiple" placeholder="请选择系统可用模型" options={channelModels.map((item) => ({ label: item, value: item }))} />
                                         </Form.Item>
                                     </Col>
-                                    <Col xs={24} md={8}>
+                                    <Col xs={24} md={6}>
                                         <Form.Item name={["public", "modelChannel", "defaultModel"]} label="默认模型">
                                             <Select showSearch allowClear options={publicModels.map((item) => ({ label: item, value: item }))} />
                                         </Form.Item>
                                     </Col>
-                                    <Col xs={24} md={8}>
+                                    <Col xs={24} md={6}>
                                         <Form.Item name={["public", "modelChannel", "defaultImageModel"]} label="默认图片模型">
                                             <Select showSearch allowClear options={publicModels.map((item) => ({ label: item, value: item }))} />
                                         </Form.Item>
                                     </Col>
-                                    <Col xs={24} md={8}>
+                                    <Col xs={24} md={6}>
+                                        <Form.Item name={["public", "modelChannel", "defaultVideoModel"]} label="默认视频模型">
+                                            <Select showSearch allowClear options={publicModels.map((item) => ({ label: item, value: item }))} />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col xs={24} md={6}>
                                         <Form.Item name={["public", "modelChannel", "defaultTextModel"]} label="默认文本模型">
                                             <Select showSearch allowClear options={publicModels.map((item) => ({ label: item, value: item }))} />
                                         </Form.Item>
@@ -340,6 +444,39 @@ export default function AdminSettingsPage() {
                                             <Switch />
                                         </Form.Item>
                                     </Col>
+                                    <Col span={24}>
+                                        <Form.Item name={["public", "auth", "allowRegister"]} label="是否允许用户注册" extra="关闭后隐藏注册入口，注册接口也会拒绝新用户创建" valuePropName="checked">
+                                            <Switch />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col span={24}>
+                                        <Typography.Title level={5}>模型算力点</Typography.Title>
+                                        <Table
+                                            rowKey="model"
+                                            pagination={false}
+                                            size="small"
+                                            dataSource={publicModels.map((model) => ({ model, credits: modelCostCredits(modelCosts, model) }))}
+                                            columns={[
+                                                { title: "模型", dataIndex: "model" },
+                                                {
+                                                    title: "每次调用扣除",
+                                                    dataIndex: "credits",
+                                                    width: 220,
+                                                    render: (_, item) => (
+                                                        <InputNumber
+                                                            min={0}
+                                                            step={1}
+                                                            precision={0}
+                                                            className="!w-full"
+                                                            value={item.credits}
+                                                            addonAfter="点"
+                                                            onChange={(value) => setModelCost(form, setModelCosts, item.model, Number(value) || 0)}
+                                                        />
+                                                    ),
+                                                },
+                                            ]}
+                                        />
+                                    </Col>
                                 </Row>
                             </Form>
                         ) : (
@@ -358,7 +495,41 @@ export default function AdminSettingsPage() {
                     ) : activeMode === "visual" ? (
                         <Form form={form} layout="vertical" initialValues={emptySettings} requiredMark={false}>
                             <Flex vertical gap={12}>
-                                <Alert showIcon type="warning" title="当前还没有完整用户体系，所有访问到站点的用户都可以无条件使用后端渠道 API。请不要公网部署，避免私有渠道额度被他人消耗。" />
+                                <Card
+                                    size="small"
+                                    title={
+                                        <Space>
+                                            <img src="/icons/linuxdo.svg" alt="" width={18} height={18} />
+                                            Linux.do 登录
+                                        </Space>
+                                    }
+                                >
+                                    <Flex vertical gap={14}>
+                                        <Typography.Text type="secondary">
+                                            本项目接口回调地址是 /api/auth/linux-do/callback，请在 Linux.do 应用后台自行拼接站点前缀。
+                                            <Typography.Link href="https://connect.linux.do" target="_blank" rel="noreferrer">
+                                                点击此处管理你的 LinuxDO OAuth App
+                                            </Typography.Link>
+                                        </Typography.Text>
+                                        <Row gutter={16}>
+                                            <Col xs={24} md={6}>
+                                                <Form.Item name={["public", "auth", "linuxDo", "enabled"]} label="开启 Linux.do 登录" valuePropName="checked">
+                                                    <Switch />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col xs={24} md={9}>
+                                                <Form.Item name={["private", "auth", "linuxDo", "clientId"]} label="Linux.do Client ID">
+                                                    <Input placeholder="输入 Linux.do OAuth App 的 ID" />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col xs={24} md={9}>
+                                                <Form.Item name={["private", "auth", "linuxDo", "clientSecret"]} label="Linux.do Client Secret">
+                                                    <Input.Password placeholder="留空则沿用已保存的密钥" />
+                                                </Form.Item>
+                                            </Col>
+                                        </Row>
+                                    </Flex>
+                                </Card>
                                 <Card size="small" title="提示词定时同步">
                                     <Row gutter={16} align="middle">
                                         <Col xs={24} md={8}>
@@ -481,19 +652,17 @@ export default function AdminSettingsPage() {
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
-                                <Form.Item name="apiKey" label="API Key" rules={[{ required: true, message: "请输入 API Key" }]}>
+                                <Form.Item name="apiKey" label="API Key" rules={editingChannelIndex === null ? [{ required: true, message: "请输入 API Key" }] : []}>
-                                    <Input.Password />
+                                    <Input.Password placeholder={editingChannelIndex === null ? "" : "留空则沿用已保存的 API Key"} />
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
                                 <Form.Item label="渠道可用模型">
                                     <Space.Compact style={{ width: "100%" }}>
                                         <Form.Item name="models" noStyle>
-                                            <Select mode="tags" tokenSeparators={[",", "\n"]} />
+                                            <Select mode="tags" maxTagCount="responsive" tokenSeparators={[",", "\n"]} options={knownModels.map((model) => ({ label: model, value: model }))} />
                                         </Form.Item>
-                                        <Button icon={<ReloadOutlined />} onClick={() => void fetchChannelModelList()}>
+                                        <Button onClick={() => openChannelModelSelector()}>选择模型</Button>
-                                            获取模型列表
-                                        </Button>
                                     </Space.Compact>
                                 </Form.Item>
                             </Col>
@@ -505,6 +674,77 @@ export default function AdminSettingsPage() {
                         </Row>
                     </Form>
                 </Drawer>
+                <Modal
+                    title={
+                        <Space size={12}>
+                            选择渠道模型
+                            <Typography.Text type="secondary">
+                                已选择 {modelSelectSelected.length} / {uniqueModels([...modelSelectSource, ...modelSelectExisting]).length}
+                            </Typography.Text>
+                        </Space>
+                    }
+                    open={isModelSelectorOpen}
+                    width={960}
+                    onCancel={closeChannelModelSelector}
+                    footer={
+                        <Space>
+                            <Button onClick={closeChannelModelSelector}>取消</Button>
+                            <Button type="primary" onClick={confirmChannelModelSelector}>
+                                确定
+                            </Button>
+                        </Space>
+                    }
+                    destroyOnHidden
+                >
+                    <Flex vertical gap={14}>
+                        <Flex gap={12} wrap>
+                            <Input.Search placeholder="搜索模型" allowClear value={modelSelectKeyword} onChange={(event) => setModelSelectKeyword(event.target.value)} style={{ flex: "1 1 260px" }} />
+                            <Space.Compact style={{ flex: "1 1 320px" }}>
+                                <Input value={modelSelectNewModel} placeholder="输入模型名称" onChange={(event) => setModelSelectNewModel(event.target.value)} onPressEnter={addModelInSelector} />
+                                <Button onClick={addModelInSelector}>增加模型</Button>
+                                <Button icon={<ReloadOutlined />} loading={isFetchingChannelModels} onClick={() => void fetchChannelModelList()}>
+                                    拉取模型列表
+                                </Button>
+                            </Space.Compact>
+                        </Flex>
+                        <Tabs
+                            activeKey={modelSelectTab}
+                            onChange={(key) => setModelSelectTab(key as ModelSelectTabKey)}
+                            items={[
+                                { key: "new", label: `新获取的模型 (${modelSelectGroups.new.length})` },
+                                { key: "current", label: `已有的模型 (${modelSelectGroups.current.length})` },
+                            ]}
+                        />
+                        <Flex justify="space-between" align="center" gap={12} wrap>
+                            <Typography.Text type="secondary">
+                                当前列表已选择 {activeSelectedCount} / {activeModelSelectModels.length}
+                            </Typography.Text>
+                            <Space size={8}>
+                                <Button size="small" disabled={!activeModelSelectModels.length || activeSelectedCount === activeModelSelectModels.length} onClick={selectActiveModels}>
+                                    全选当前列表
+                                </Button>
+                                <Button size="small" disabled={!activeSelectedCount} onClick={clearActiveModels}>
+                                    取消当前列表
+                                </Button>
+                            </Space>
+                        </Flex>
+                        <div style={{ maxHeight: 420, overflowY: "auto", borderTop: "1px solid var(--ant-color-border-secondary)", paddingTop: 12 }}>
+                            {activeModelSelectModels.length ? (
+                                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", columnGap: 24, rowGap: 12 }}>
+                                    {activeModelSelectModels.map((model) => (
+                                        <Checkbox key={model} checked={modelSelectSelected.includes(model)} onChange={(event) => toggleSelectedModel(model, event.target.checked)}>
+                                            <Typography.Text style={{ wordBreak: "break-all" }}>{model}</Typography.Text>
+                                        </Checkbox>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div style={{ padding: "48px 0", textAlign: "center" }}>
+                                    <Typography.Text type="secondary">没有匹配的模型</Typography.Text>
+                                </div>
+                            )}
+                        </div>
+                    </Flex>
+                </Modal>
                 <Modal
                     title={
                         <Space>
@@ -593,10 +833,21 @@ function normalizePublicSetting(setting: Partial<AdminSettings["public"]> = {}):
             ...emptySettings.public.modelChannel,
             ...(setting.modelChannel || {}),
             availableModels: setting.modelChannel?.availableModels || [],
+            modelCosts: normalizeModelCosts(setting.modelChannel?.modelCosts || []),
+        },
+        auth: {
+            allowRegister: setting.auth?.allowRegister !== false,
+            linuxDo: {
+                enabled: setting.auth?.linuxDo?.enabled === true,
+            },
         },
     };
 }
 
+function normalizeModelCosts(items: Partial<AdminSettings["public"]["modelChannel"]["modelCosts"][number]>[]) {
+    return items.filter((item) => item.model).map((item) => ({ model: item.model || "", credits: Math.max(0, Number(item.credits) || 0) }));
+}
+
 function normalizePrivateSetting(setting: Partial<AdminSettings["private"]> = {}): AdminSettings["private"] {
     return {
         channels: (setting.channels || []).map(normalizeChannel),
@@ -604,6 +855,12 @@ function normalizePrivateSetting(setting: Partial<AdminSettings["private"]> = {}
             enabled: setting.promptSync?.enabled !== false,
             cron: setting.promptSync?.cron || "*/5 * * * *",
         },
+        auth: {
+            linuxDo: {
+                clientId: setting.auth?.linuxDo?.clientId || "",
+                clientSecret: setting.auth?.linuxDo?.clientSecret || "",
+            },
+        },
     };
 }
 
@@ -620,6 +877,18 @@ function normalizeChannel(item: Partial<AdminModelChannel> = {}): AdminModelChan
     };
 }
 
+function modelCostCredits(items: AdminSettings["public"]["modelChannel"]["modelCosts"], model: string) {
+    return items.find((item) => item.model === model)?.credits || 0;
+}
+
+function setModelCost(form: any, setModelCosts: (items: AdminModelCost[]) => void, model: string, credits: number) {
+    const current = (form.getFieldValue(["public", "modelChannel", "modelCosts"]) || []) as AdminSettings["public"]["modelChannel"]["modelCosts"];
+    const next = current.filter((item) => item.model !== model);
+    next.push({ model, credits: Math.max(0, credits) });
+    form.setFieldValue(["public", "modelChannel", "modelCosts"], next);
+    setModelCosts(next);
+}
+
 function mergeChannelApiKeys(currentChannels: AdminModelChannel[], saved: AdminSettings): AdminSettings {
     const channels = saved.private.channels.map((item, index) => ({
         ...item,
@@ -635,10 +904,33 @@ function collectChannelModels(channels: AdminModelChannel[]) {
     return uniqueModels(channels.filter((channel) => channel.enabled).flatMap((channel) => channel.models || []));
 }
 
+function collectKnownModels(settings: AdminSettings) {
+    return uniqueModels([
+        ...(settings.public.modelChannel.availableModels || []),
+        ...(settings.public.modelChannel.modelCosts || []).map((item) => item.model),
+        ...settings.private.channels.flatMap((channel) => channel.models || []),
+    ]);
+}
+
+function buildModelSelectGroups(sourceModels: string[], existingModels: string[]): Record<ModelSelectTabKey, string[]> {
+    const source = uniqueModels(sourceModels);
+    const existing = uniqueModels(existingModels);
+    const existingSet = new Set(existing);
+    return {
+        new: source.filter((model) => !existingSet.has(model)),
+        current: existing,
+    };
+}
+
 function uniqueModels(models: string[]) {
     return Array.from(new Set(models.filter(Boolean)));
 }
 
+function filterModels(models: string[], options: string[]) {
+    const optionSet = new Set(options);
+    return uniqueModels(models).filter((model) => optionSet.has(model));
+}
+
 function modelSummary(models: string[]) {
     if (!models.length) return "未配置模型";
     const preview = models.slice(0, 3).join(", ");
@@ -674,6 +966,7 @@ async function collectSettings(form: any, editorMode: Record<SettingsTabKey, Edi
         }
         values.private = privateSetting;
     }
+    values.public.modelChannel.availableModels = filterModels(values.public.modelChannel.availableModels, collectChannelModels(values.private.channels));
     return normalizeSettings(values);
 }
 

web/src/app/(admin)/admin/users/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
+import { ProTable, type ProColumns } from "@ant-design/pro-components";
+import { Avatar, Button, Card, Col, Divider, Flex, Form, Input, InputNumber, Modal, Row, Select, Space, Tag, Tooltip, Typography } from "antd";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+
+import type { AdminUser } from "@/services/api/admin";
+import { useAdminUsers } from "./use-admin-users";
+
+type UserFormValues = Partial<AdminUser> & { password?: string };
+
+const roleOptions = [
+    { label: "普通用户", value: "user" },
+    { label: "管理员", value: "admin" },
+];
+
+const statusOptions = [
+    { label: "正常", value: "active" },
+    { label: "禁用", value: "ban" },
+];
+
+export default function AdminUsersPage() {
+    const { users, keyword, page, pageSize, total, isLoading, searchUsers, changePage, changePageSize, resetFilters, refreshUsers, saveUser: saveAdminUser, adjustCredits, deleteUser } = useAdminUsers();
+    const [form] = Form.useForm<UserFormValues>();
+    const [keywordText, setKeywordText] = useState(keyword);
+    const [editingUser, setEditingUser] = useState<Partial<AdminUser> | null>(null);
+    const [deletingUser, setDeletingUser] = useState<AdminUser | null>(null);
+
+    useEffect(() => setKeywordText(keyword), [keyword]);
+
+    useEffect(() => {
+        if (editingUser) form.setFieldsValue({ role: "user", status: "active", ...editingUser, password: "" });
+    }, [editingUser, form]);
+
+    const saveUser = async () => {
+        const value = await form.validateFields();
+        const userValue = { ...value };
+        delete userValue.credits;
+        await saveAdminUser({ ...editingUser, ...userValue, password: value.password || undefined });
+        setEditingUser(null);
+    };
+
+    const saveCredits = async () => {
+        if (!editingUser?.id) return;
+        await adjustCredits(editingUser.id, form.getFieldValue("credits") || 0);
+    };
+
+    const columns: ProColumns<AdminUser>[] = [
+        {
+            title: "用户",
+            dataIndex: "username",
+            width: 260,
+            render: (_, item) => (
+                <Flex align="center" gap={10} style={{ minWidth: 0 }}>
+                    <Avatar src={item.avatarUrl || undefined}>{(item.displayName || item.username || "U").slice(0, 1).toUpperCase()}</Avatar>
+                    <Flex vertical style={{ minWidth: 0 }}>
+                        <Typography.Text strong ellipsis>
+                            {item.displayName || item.username}
+                        </Typography.Text>
+                        <Typography.Text type="secondary" ellipsis>
+                            {item.username}
+                        </Typography.Text>
+                    </Flex>
+                </Flex>
+            ),
+        },
+        {
+            title: "角色",
+            dataIndex: "role",
+            width: 100,
+            render: (_, item) => <Tag color={item.role === "admin" ? "gold" : "default"}>{item.role === "admin" ? "管理员" : "用户"}</Tag>,
+        },
+        {
+            title: "状态",
+            dataIndex: "status",
+            width: 90,
+            render: (_, item) => <Tag color={item.status === "ban" ? "red" : "green"}>{item.status === "ban" ? "禁用" : "正常"}</Tag>,
+        },
+        {
+            title: "算力点",
+            dataIndex: "credits",
+            width: 100,
+            render: (_, item) => <Typography.Text>{item.credits}</Typography.Text>,
+        },
+        {
+            title: "Linux.do",
+            dataIndex: "linuxDoId",
+            width: 140,
+            render: (_, item) => <Typography.Text type="secondary">{item.linuxDoId || "-"}</Typography.Text>,
+        },
+        {
+            title: "最近登录",
+            dataIndex: "lastLoginAt",
+            width: 180,
+            render: (_, item) => <Typography.Text type="secondary">{item.lastLoginAt ? dayjs(item.lastLoginAt).format("YYYY-MM-DD HH:mm:ss") : "-"}</Typography.Text>,
+        },
+        {
+            title: "操作",
+            key: "actions",
+            width: 96,
+            align: "right",
+            render: (_, item) => (
+                <Space size={4}>
+                    <Tooltip title="编辑">
+                        <Button type="text" size="small" icon={<EditOutlined />} onClick={() => setEditingUser(item)} />
+                    </Tooltip>
+                    <Tooltip title="删除">
+                        <Button danger type="text" size="small" icon={<DeleteOutlined />} onClick={() => setDeletingUser(item)} />
+                    </Tooltip>
+                </Space>
+            ),
+        },
+    ];
+
+    return (
+        <main style={{ padding: 24 }}>
+            <Flex vertical gap={16}>
+                <Card variant="borderless">
+                    <Form layout="vertical">
+                        <Row gutter={16} align="bottom">
+                            <Col flex="360px">
+                                <Form.Item label="关键词">
+                                    <Input.Search
+                                        value={keywordText}
+                                        placeholder="搜索用户名、昵称、邮箱或 Linux.do ID"
+                                        allowClear
+                                        enterButton={<SearchOutlined />}
+                                        onSearch={() => searchUsers(keywordText)}
+                                        onChange={(event) => setKeywordText(event.target.value)}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col flex="none">
+                                <Form.Item>
+                                    <Space>
+                                        <Button
+                                            onClick={() => {
+                                                setKeywordText("");
+                                                resetFilters();
+                                            }}
+                                        >
+                                            重置
+                                        </Button>
+                                        <Button type="primary" icon={<ReloadOutlined />} onClick={() => searchUsers(keywordText)}>
+                                            查询
+                                        </Button>
+                                    </Space>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form>
+                </Card>
+                <ProTable<AdminUser>
+                    rowKey="id"
+                    columns={columns}
+                    dataSource={users}
+                    loading={isLoading}
+                    search={false}
+                    defaultSize="middle"
+                    tableLayout="fixed"
+                    cardProps={{ variant: "borderless" }}
+                    headerTitle={
+                        <Space>
+                            <Typography.Text strong>用户列表</Typography.Text>
+                            <Tag>{total} 人</Tag>
+                        </Space>
+                    }
+                    options={{ density: true, setting: true, reload: () => void refreshUsers() }}
+                    toolBarRender={() => [
+                        <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditingUser({ role: "user", status: "active" })}>
+                            新增
+                        </Button>,
+                    ]}
+                    pagination={{
+                        current: page,
+                        pageSize,
+                        total,
+                        showSizeChanger: true,
+                        pageSizeOptions: [10, 20, 50, 100],
+                        showTotal: (value) => `共 ${value} 人`,
+                        onChange: (nextPage, nextPageSize) => (nextPageSize !== pageSize ? changePageSize(nextPageSize) : changePage(nextPage)),
+                    }}
+                />
+            </Flex>
+
+            <Modal title={editingUser?.id ? "编辑用户" : "新增用户"} open={Boolean(editingUser)} width={680} onCancel={() => setEditingUser(null)} onOk={() => void saveUser()} okText="保存" cancelText="取消" destroyOnHidden>
+                <Form form={form} layout="vertical" requiredMark={false}>
+                    <Typography.Text strong>基础信息</Typography.Text>
+                    <Row gutter={14}>
+                        <Col span={12}>
+                            <Form.Item name="username" label="用户名" rules={[{ required: true, message: "请输入用户名" }]}>
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="password" label={editingUser?.id ? "新密码" : "密码"} rules={editingUser?.id ? [] : [{ required: true, message: "请输入密码" }]}>
+                                <Input.Password autoComplete="new-password" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="displayName" label="昵称">
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="email" label="邮箱">
+                                <Input />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="role" label="角色" rules={[{ required: true, message: "请选择角色" }]}>
+                                <Select options={roleOptions} />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name="status" label="状态" rules={[{ required: true, message: "请选择状态" }]}>
+                                <Select options={statusOptions} />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    {editingUser?.id ? (
+                        <>
+                            <Divider style={{ margin: "4px 0 16px" }} />
+                            <Typography.Text strong>算力点调整</Typography.Text>
+                            <Row gutter={14}>
+                                <Col span={12}>
+                                    <Form.Item label="算力点">
+                                        <Space.Compact style={{ width: "100%" }}>
+                                            <Form.Item name="credits" noStyle>
+                                                <InputNumber min={0} precision={0} style={{ width: "100%" }} />
+                                            </Form.Item>
+                                            <Button onClick={() => void saveCredits()}>调整</Button>
+                                        </Space.Compact>
+                                    </Form.Item>
+                                </Col>
+                            </Row>
+                        </>
+                    ) : null}
+                </Form>
+            </Modal>
+
+            <Modal
+                title="删除用户"
+                open={Boolean(deletingUser)}
+                onCancel={() => setDeletingUser(null)}
+                onOk={async () => {
+                    if (!deletingUser) return;
+                    await deleteUser(deletingUser.id);
+                    setDeletingUser(null);
+                }}
+                okText="删除"
+                okButtonProps={{ danger: true }}
+                cancelText="取消"
+            >
+                确定删除「{deletingUser?.displayName || deletingUser?.username}」吗？删除后该账号将无法继续登录。
+            </Modal>
+        </main>
+    );
+}

web/src/app/(admin)/admin/users/use-admin-users.ts

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App } from "antd";
+
+import { adjustAdminUserCredits, deleteAdminUser, fetchAdminUsers, saveAdminUser, type AdminUser } from "@/services/api/admin";
+import { useUserStore } from "@/stores/use-user-store";
+
+const defaultPageSize = 10;
+
+export function useAdminUsers() {
+    const { message } = App.useApp();
+    const queryClient = useQueryClient();
+    const token = useUserStore((state) => state.token);
+    const clearSession = useUserStore((state) => state.clearSession);
+    const [keyword, setKeyword] = useState("");
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+
+    const query = useQuery({
+        queryKey: ["admin", "users", token, keyword, page, pageSize],
+        queryFn: () => fetchAdminUsers(token, { keyword, page, pageSize }),
+        enabled: Boolean(token),
+        retry: false,
+    });
+
+    const saveMutation = useMutation({
+        mutationFn: (user: Partial<AdminUser> & { password?: string }) => saveAdminUser(token, user),
+        onSuccess: async (_, user) => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "users"] });
+            message.success(user.id ? "用户已保存" : "用户已新增");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "保存失败"),
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: string) => deleteAdminUser(token, id),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "users"] });
+            message.success("用户已删除");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "删除失败"),
+    });
+
+    const creditMutation = useMutation({
+        mutationFn: ({ id, credits }: { id: string; credits: number }) => adjustAdminUserCredits(token, id, credits),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "users"] });
+            message.success("算力点已调整");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "调整失败"),
+    });
+
+    useEffect(() => {
+        if (query.isError) {
+            const errorMessage = query.error instanceof Error ? query.error.message : "读取用户失败";
+            message.error(errorMessage);
+            if (errorMessage.includes("未登录") || errorMessage.includes("权限不足") || errorMessage.includes("登录状态无效")) clearSession();
+        }
+    }, [clearSession, message, query.error, query.isError]);
+
+    const updateFilters = (next: Partial<{ keyword: string; page: number; pageSize: number }>) => {
+        const queryState = { keyword, page, pageSize, ...next };
+        if (next.keyword !== undefined || next.pageSize !== undefined) queryState.page = 1;
+        setKeyword(queryState.keyword);
+        setPage(queryState.page);
+        setPageSize(queryState.pageSize);
+    };
+
+    const data = query.data;
+
+    return {
+        users: data?.items || [],
+        keyword,
+        page,
+        pageSize,
+        total: data?.total || 0,
+        isLoading: query.isFetching || saveMutation.isPending || deleteMutation.isPending || creditMutation.isPending,
+        searchUsers: (value = keyword) => updateFilters({ keyword: value }),
+        changePage: (value: number) => updateFilters({ page: value }),
+        changePageSize: (value: number) => updateFilters({ pageSize: value }),
+        resetFilters: () => updateFilters({ keyword: "", page: 1, pageSize: defaultPageSize }),
+        refreshUsers: () => query.refetch(),
+        saveUser: (user: Partial<AdminUser> & { password?: string }) => saveMutation.mutateAsync(user),
+        adjustCredits: (id: string, credits: number) => creditMutation.mutateAsync({ id, credits }),
+        deleteUser: (id: string) => deleteMutation.mutateAsync(id),
+    };
+}

web/src/app/(user)/assets/asset-transfer.ts

@@ -0,0 +1,72 @@
+import { saveAs } from "file-saver";
+
+import { createZip, readZip } from "@/lib/zip";
+import { getMediaBlob, setMediaBlob } from "@/services/file-storage";
+import { getImageBlob, setImageBlob } from "@/services/image-storage";
+import type { Asset } from "@/stores/use-asset-store";
+
+type AssetExportFile = {
+    app: "infinite-canvas";
+    version: 1;
+    exportedAt: string;
+    assets: Asset[];
+    files: AssetExportItem[];
+};
+
+type AssetExportItem = {
+    storageKey: string;
+    path: string;
+    mimeType: string;
+    bytes: number;
+};
+
+export async function exportAssets(assets: Asset[]) {
+    const files: AssetExportItem[] = [];
+    const zipFiles: { name: string; data: BlobPart }[] = [];
+
+    await Promise.all(
+        assets.map(async (asset) => {
+            const storageKey = asset.kind === "image" || asset.kind === "video" ? asset.data.storageKey : undefined;
+            if (!storageKey) return;
+            const blob = asset.kind === "image" ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
+            if (!blob) return;
+            const path = `files/${safeFileName(storageKey)}.${fileExtension(blob.type, asset.kind)}`;
+            files.push({ storageKey, path, mimeType: blob.type || asset.data.mimeType, bytes: blob.size });
+            zipFiles.push({ name: path, data: blob });
+        }),
+    );
+
+    const data: AssetExportFile = { app: "infinite-canvas", version: 1, exportedAt: new Date().toISOString(), assets, files };
+    const zip = await createZip([{ name: "assets.json", data: JSON.stringify(data, null, 2) }, ...zipFiles]);
+    saveAs(zip, "我的素材.zip");
+}
+
+export async function readAssetPackage(file: File) {
+    const zip = await readZip(file);
+    const assetFile = zip.get("assets.json");
+    if (!assetFile) throw new Error("missing assets.json");
+    const data = JSON.parse(await assetFile.text()) as AssetExportFile;
+    await Promise.all(
+        data.files.map(async (item) => {
+            const blob = zip.get(item.path);
+            if (!blob) return;
+            const typedBlob = blob.type ? blob : blob.slice(0, blob.size, item.mimeType);
+            await (item.storageKey.startsWith("image:") ? setImageBlob(item.storageKey, typedBlob) : setMediaBlob(item.storageKey, typedBlob));
+        }),
+    );
+    return data.assets;
+}
+
+function safeFileName(value: string) {
+    return value.replace(/[\\/:*?"<>|]/g, "_");
+}
+
+function fileExtension(mimeType: string, kind: Asset["kind"]) {
+    if (mimeType.includes("png")) return "png";
+    if (mimeType.includes("jpeg")) return "jpg";
+    if (mimeType.includes("webp")) return "webp";
+    if (mimeType.includes("gif")) return "gif";
+    if (mimeType.includes("mp4")) return "mp4";
+    if (mimeType.includes("webm")) return "webm";
+    return kind === "image" ? "png" : "bin";
+}

web/src/app/(user)/assets/page.tsx

@@ -3,12 +3,14 @@
 import { Copy, Download, PencilLine, Search, Trash2, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { App, Button, Card, Drawer, Empty, Form, Image, Input, Modal, Pagination, Select, Space, Tag, Typography } from "antd";
+import { saveAs } from "file-saver";
 
 import { useCopyText } from "@/hooks/use-copy-text";
 import { formatBytes, readFileAsDataUrl } from "@/lib/image-utils";
 import { uploadImage } from "@/services/image-storage";
 import { cn } from "@/lib/utils";
 import { useAssetStore, type Asset, type AssetKind, type ImageAsset } from "@/stores/use-asset-store";
+import { exportAssets, readAssetPackage } from "./asset-transfer";
 
 type AssetFormValues = {
     kind: AssetKind;
@@ -26,6 +28,7 @@ const kindOptions = [
     { label: "全部", value: "all" },
     { label: "文本", value: "text" },
     { label: "图片", value: "image" },
+    { label: "视频", value: "video" },
 ];
 
 export default function AssetsPage() {
@@ -34,6 +37,7 @@ export default function AssetsPage() {
     const [form] = Form.useForm<AssetFormValues>();
     const coverInputRef = useRef<HTMLInputElement>(null);
     const imageInputRef = useRef<HTMLInputElement>(null);
+    const assetInputRef = useRef<HTMLInputElement>(null);
     const assets = useAssetStore((state) => state.assets);
     const addAsset = useAssetStore((state) => state.addAsset);
     const updateAsset = useAssetStore((state) => state.updateAsset);
@@ -52,7 +56,7 @@ export default function AssetsPage() {
     const title = Form.useWatch("title", form) || "";
     const tags = Form.useWatch("tags", form) || [];
     const content = Form.useWatch("content", form) || "";
-    const validAssets = useMemo(() => assets.filter((asset) => asset.kind === "text" || asset.kind === "image"), [assets]);
+    const validAssets = useMemo(() => assets.filter((asset) => asset.kind === "text" || asset.kind === "image" || asset.kind === "video"), [assets]);
 
     const filteredAssets = useMemo(() => {
         const query = keyword.trim().toLowerCase();
@@ -145,11 +149,35 @@ export default function AssetsPage() {
     };
 
     const downloadImage = (asset: Asset) => {
-        if (asset.kind !== "image") return;
+        if (asset.kind !== "image" && asset.kind !== "video") return;
-        const link = document.createElement("a");
+        saveAs(asset.kind === "video" ? asset.data.url : asset.data.dataUrl, `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`);
-        link.href = asset.data.dataUrl;
+    };
-        link.download = `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`;
+
-        link.click();
+    const exportAllAssets = async () => {
+        if (!validAssets.length) {
+            message.warning("暂无素材可导出");
+            return;
+        }
+        await exportAssets(validAssets);
+    };
+
+    const importAssetZip = async (file?: File) => {
+        if (!file) return;
+        try {
+            const importedAssets = await readAssetPackage(file);
+            importedAssets.forEach((asset) => {
+                const payload = { ...asset } as Record<string, unknown>;
+                delete payload.id;
+                delete payload.createdAt;
+                delete payload.updatedAt;
+                addAsset(payload as Parameters<typeof addAsset>[0]);
+            });
+            message.success(`已导入 ${importedAssets.length} 个素材`);
+        } catch {
+            message.error("导入失败，请选择有效的素材压缩包");
+        } finally {
+            if (assetInputRef.current) assetInputRef.current.value = "";
+        }
     };
 
     const confirmDelete = () => {
@@ -207,13 +235,29 @@ export default function AssetsPage() {
                                     ))}
                                 </div>
                             </div>
-                            <button
+                            <div className="flex flex-wrap gap-4">
-                                type="button"
+                                <button
-                                className="cursor-pointer self-start text-sm font-medium text-stone-700 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline sm:self-center dark:text-stone-300"
+                                    type="button"
-                                onClick={openCreate}
+                                    className="cursor-pointer text-sm font-medium text-stone-700 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline dark:text-stone-300"
-                            >
+                                    onClick={() => void exportAllAssets()}
-                                新增素材
+                                >
-                            </button>
+                                    导出素材
+                                </button>
+                                <button
+                                    type="button"
+                                    className="cursor-pointer text-sm font-medium text-stone-700 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline dark:text-stone-300"
+                                    onClick={() => assetInputRef.current?.click()}
+                                >
+                                    导入素材
+                                </button>
+                                <button
+                                    type="button"
+                                    className="cursor-pointer text-sm font-medium text-stone-700 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:underline dark:text-stone-300"
+                                    onClick={openCreate}
+                                >
+                                    新增素材
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -351,6 +395,8 @@ export default function AssetsPage() {
 
             <AssetDrawer asset={previewAsset} onClose={() => setPreviewAsset(null)} onCopy={copyAssetText} onDownload={downloadImage} />
 
+            <input ref={assetInputRef} type="file" accept="application/zip,.zip" className="hidden" onChange={(event) => void importAssetZip(event.target.files?.[0])} />
+
             <Modal title="删除素材" open={Boolean(deletingAsset)} onCancel={() => setDeletingAsset(null)} onOk={confirmDelete} okText="删除" okButtonProps={{ danger: true }} cancelText="取消">
                 确定删除「{deletingAsset?.title}」吗？删除后会从我的素材中移除。
             </Modal>
@@ -385,7 +431,7 @@ function AssetCard({ asset, onOpen, onEdit, onCopy, onDownload, onDelete }: { as
                                 {asset.source || "未标注来源"}
                             </Typography.Text>
                         </div>
-                        <Tag className="m-0 shrink-0 text-[11px]">{asset.kind === "image" ? "图片" : "文本"}</Tag>
+                        <Tag className="m-0 shrink-0 text-[11px]">{asset.kind === "image" ? "图片" : asset.kind === "video" ? "视频" : "文本"}</Tag>
                     </div>
                     <Typography.Paragraph type="secondary" ellipsis={{ rows: 3 }} className="!mb-0 !mt-2 !text-xs !leading-5">
                         {summary}
@@ -404,15 +450,17 @@ function AssetCard({ asset, onOpen, onEdit, onCopy, onDownload, onDelete }: { as
                 <Button size="small" onClick={onOpen}>
                     查看
                 </Button>
-                <Button size="small" icon={<PencilLine className="size-3.5" />} onClick={onEdit}>
+                {asset.kind !== "video" ? (
-                    编辑
+                    <Button size="small" icon={<PencilLine className="size-3.5" />} onClick={onEdit}>
-                </Button>
+                        编辑
+                    </Button>
+                ) : null}
                 {asset.kind === "text" ? (
                     <Button size="small" icon={<Copy className="size-3.5" />} onClick={() => void onCopy(asset)}>
                         复制
                     </Button>
                 ) : null}
-                {asset.kind === "image" ? (
+                {asset.kind === "image" || asset.kind === "video" ? (
                     <Button size="small" icon={<Download className="size-3.5" />} onClick={() => onDownload(asset)}>
                         下载
                     </Button>
@@ -441,7 +489,7 @@ function AssetDrawer({ asset, onClose, onCopy, onDownload }: { asset: Asset | nu
                             {asset.title}
                         </Typography.Title>
                         <Space size={[4, 4]} wrap>
-                            <Tag>{asset.kind === "image" ? "图片" : "文本"}</Tag>
+                            <Tag>{asset.kind === "image" ? "图片" : asset.kind === "video" ? "视频" : "文本"}</Tag>
                             {(asset.tags || []).map((tag) => (
                                 <Tag key={tag}>{tag}</Tag>
                             ))}
@@ -453,6 +501,8 @@ function AssetDrawer({ asset, onClose, onCopy, onDownload }: { asset: Asset | nu
                         </Typography.Text>
                         {asset.kind === "text" ? (
                             <Typography.Paragraph className="mt-2 whitespace-pre-wrap">{asset.data.content}</Typography.Paragraph>
+                        ) : asset.kind === "video" ? (
+                            <video src={asset.data.url} controls className="mt-2 aspect-video w-full rounded-lg bg-black" />
                         ) : (
                             <Typography.Text className="mt-2 block">
                                 {asset.data.width}x{asset.data.height} · {formatBytes(asset.data.bytes)} · {asset.data.mimeType}
@@ -471,9 +521,9 @@ function AssetDrawer({ asset, onClose, onCopy, onDownload }: { asset: Asset | nu
                                 复制文本
                             </Button>
                         ) : null}
-                        {asset.kind === "image" ? (
+                        {asset.kind === "image" || asset.kind === "video" ? (
                             <Button type="primary" icon={<Download className="size-4" />} onClick={() => onDownload(asset)}>
-                                下载图片
+                                {asset.kind === "video" ? "下载视频" : "下载图片"}
                             </Button>
                         ) : null}
                     </Space>

web/src/app/(user)/canvas/[id]/canvas-client-page.tsx

@@ -3,11 +3,14 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ChangeEvent as ReactChangeEvent, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Home, ImageIcon, Images, List, Menu, MessageSquare, Plus, Redo2, Settings2, Trash2, Undo2, Upload } from "lucide-react";
+import { Home, ImageIcon, Images, List, Menu, MessageSquare, Plus, Redo2, Settings2, Trash2, Undo2, Upload, Video } from "lucide-react";
+import { saveAs } from "file-saver";
 
 import { requestEdit, requestGeneration, requestImageQuestion } from "@/services/api/image";
+import { requestVideoGeneration } from "@/services/api/video";
 import { defaultConfig, type AiConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import { resolveImageUrl, uploadImage, type UploadedImage } from "@/services/image-storage";
+import { resolveMediaUrl, uploadMediaFile, type UploadedFile } from "@/services/file-storage";
 import { nanoid } from "nanoid";
 import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
 import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
@@ -15,6 +18,7 @@ import { UserStatusActions } from "@/components/layout/user-status-actions";
 import { useAssetStore } from "@/stores/use-asset-store";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { cropDataUrl } from "../utils/canvas-image-data";
+import { fitNodeSize, nodeSizeFromRatio } from "../utils/canvas-node-size";
 import { App, Button, Dropdown, Modal } from "antd";
 import { NODE_DEFAULT_SIZE, getNodeSpec } from "../constants";
 import { ActiveConnectionPath, ConnectionPath } from "../components/canvas-connections";
@@ -63,9 +67,11 @@ type CanvasHistoryEntry = Pick<CanvasClipboard, "nodes" | "connections"> & {
     chatSessions: CanvasAssistantSession[];
     activeChatId: string | null;
     backgroundMode: CanvasBackgroundMode;
+    showImageInfo: boolean;
 };
 
-const UPLOADED_IMAGE_MAX_SIDE = 640;
+const VIDEO_NODE_MAX_WIDTH = 420;
+const VIDEO_NODE_MAX_HEIGHT = 420;
 const NODE_STATUS_LOADING = "loading" as const;
 const NODE_STATUS_SUCCESS = "success" as const;
 const NODE_STATUS_ERROR = "error" as const;
@@ -135,7 +141,7 @@ function CanvasRefreshShell() {
     );
 }
 
-function ConnectionCreateMenu({ pending, onCreate, onClose }: { pending: PendingConnectionCreate; onCreate: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config) => void; onClose: () => void }) {
+function ConnectionCreateMenu({ pending, onCreate, onClose }: { pending: PendingConnectionCreate; onCreate: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config | CanvasNodeType.Video) => void; onClose: () => void }) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     return (
         <div
@@ -154,21 +160,24 @@ function ConnectionCreateMenu({ pending, onCreate, onClose }: { pending: Pending
                 </button>
             </div>
             <div className="grid gap-1">
-                <ConnectionCreateOption icon={<List className="size-5" />} title="文本生成" description="脚本、广告词、品牌文案" onClick={() => onCreate(CanvasNodeType.Text)} />
+                <ConnectionCreateOption theme={theme} icon={<List className="size-5" />} title="文本生成" description="脚本、广告词、品牌文案" onClick={() => onCreate(CanvasNodeType.Text)} />
-                <ConnectionCreateOption icon={<ImageIcon className="size-5" />} title="图片生成" onClick={() => onCreate(CanvasNodeType.Image)} />
+                <ConnectionCreateOption theme={theme} icon={<ImageIcon className="size-5" />} title="图片生成" onClick={() => onCreate(CanvasNodeType.Image)} />
-                <ConnectionCreateOption icon={<Settings2 className="size-5" />} title="配置节点" description="模型、尺寸、数量和输入顺序" onClick={() => onCreate(CanvasNodeType.Config)} />
+                <ConnectionCreateOption theme={theme} icon={<Video className="size-5" />} title="视频生成" onClick={() => onCreate(CanvasNodeType.Video)} />
+                <ConnectionCreateOption theme={theme} icon={<Settings2 className="size-5" />} title="配置节点" description="模型、尺寸、数量和输入顺序" onClick={() => onCreate(CanvasNodeType.Config)} />
             </div>
         </div>
     );
 }
 
-function ConnectionCreateOption({ icon, title, description, onClick }: { icon: React.ReactNode; title: string; description?: string; onClick?: () => void }) {
+function ConnectionCreateOption({ theme, icon, title, description, onClick }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; icon: React.ReactNode; title: string; description?: string; onClick?: () => void }) {
     return (
-        <button type="button" className="flex h-16 w-full cursor-pointer items-center gap-3 rounded-2xl px-3 text-left transition hover:bg-white/10" onClick={onClick}>
+        <button type="button" className="flex h-16 w-full cursor-pointer items-center gap-3 rounded-2xl px-3 text-left transition" style={{ color: theme.node.text }} onClick={onClick} onMouseEnter={(event) => (event.currentTarget.style.background = theme.node.fill)} onMouseLeave={(event) => (event.currentTarget.style.background = "transparent")}>
-            <span className="grid size-11 shrink-0 place-items-center rounded-xl bg-white/10 text-stone-200">{icon}</span>
+            <span className="grid size-11 shrink-0 place-items-center rounded-xl" style={{ background: theme.node.fill, color: theme.node.muted }}>
+                {icon}
+            </span>
             <span className="min-w-0 flex-1">
-                <span className="flex items-center gap-2 text-base font-semibold leading-5 text-stone-100">{title}</span>
+                <span className="flex items-center gap-2 text-base font-semibold leading-5">{title}</span>
-                {description ? <span className="mt-1 block truncate text-sm text-stone-500">{description}</span> : null}
+                {description ? <span className="mt-1 block truncate text-sm" style={{ color: theme.node.muted }}>{description}</span> : null}
             </span>
         </button>
     );
@@ -239,6 +248,7 @@ function InfiniteCanvasPage() {
     const [runningNodeId, setRunningNodeId] = useState<string | null>(null);
     const [isMiniMapOpen, setIsMiniMapOpen] = useState(false);
     const [backgroundMode, setBackgroundMode] = useState<CanvasBackgroundMode>("lines");
+    const [showImageInfo, setShowImageInfo] = useState(false);
     const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
     const [assetPickerOpen, setAssetPickerOpen] = useState(false);
     const [assetPickerTab, setAssetPickerTab] = useState<AssetPickerTab>("my-assets");
@@ -277,8 +287,16 @@ function InfiniteCanvasPage() {
             chatSessions,
             activeChatId,
             backgroundMode,
+            showImageInfo,
         }),
-        [activeChatId, backgroundMode, chatSessions],
+        [activeChatId, backgroundMode, chatSessions, showImageInfo],
+    );
+
+    const cleanupCanvasFiles = useCallback(
+        (extra?: unknown) => {
+            cleanupAssetImages({ extra, history: historyRef.current, lastHistory: lastHistoryRef.current });
+        },
+        [cleanupAssetImages],
     );
 
     useEffect(() => {
@@ -298,6 +316,7 @@ function InfiniteCanvasPage() {
             setChatSessions(restoredSessions);
             setActiveChatId(project.activeChatId || null);
             setBackgroundMode(project.backgroundMode);
+            setShowImageInfo(project.showImageInfo || false);
             setViewport(project.viewport);
             historyRef.current = { past: [], future: [] };
             if (historyCommitTimerRef.current) {
@@ -310,6 +329,7 @@ function InfiniteCanvasPage() {
                 chatSessions: restoredSessions,
                 activeChatId: project.activeChatId || null,
                 backgroundMode: project.backgroundMode,
+                showImageInfo: project.showImageInfo || false,
             };
             setHistoryState({ canUndo: false, canRedo: false });
             setProjectLoaded(true);
@@ -321,7 +341,7 @@ function InfiniteCanvasPage() {
         if (!projectLoaded || applyingHistoryRef.current || historyPausedRef.current) return;
         const next = createHistoryEntry();
         const previous = lastHistoryRef.current;
-        if (previous?.nodes === next.nodes && previous.connections === next.connections && previous.chatSessions === next.chatSessions && previous.activeChatId === next.activeChatId && previous.backgroundMode === next.backgroundMode) return;
+        if (previous?.nodes === next.nodes && previous.connections === next.connections && previous.chatSessions === next.chatSessions && previous.activeChatId === next.activeChatId && previous.backgroundMode === next.backgroundMode && previous.showImageInfo === next.showImageInfo) return;
 
         if (historyCommitTimerRef.current) clearTimeout(historyCommitTimerRef.current);
         historyCommitTimerRef.current = setTimeout(() => {
@@ -341,12 +361,12 @@ function InfiniteCanvasPage() {
                 historyCommitTimerRef.current = null;
             }
         };
-    }, [activeChatId, backgroundMode, chatSessions, connections, createHistoryEntry, nodes, projectLoaded]);
+    }, [activeChatId, backgroundMode, chatSessions, connections, createHistoryEntry, nodes, projectLoaded, showImageInfo]);
 
     useEffect(() => {
         if (!projectLoaded || historyPausedRef.current) return;
-        updateProject(projectId, { nodes, connections, chatSessions, activeChatId, backgroundMode });
+        updateProject(projectId, { nodes, connections, chatSessions, activeChatId, backgroundMode, showImageInfo });
-    }, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, updateProject]);
+    }, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, showImageInfo, updateProject]);
 
     useEffect(() => {
         if (!dialogNodeId) setNodeImageSettingsOpen(false);
@@ -463,7 +483,7 @@ function InfiniteCanvasPage() {
     );
 
     const createConnectedNode = useCallback(
-        (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config, pending: PendingConnectionCreate) => {
+        (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config | CanvasNodeType.Video, pending: PendingConnectionCreate) => {
             const metadata = type === CanvasNodeType.Config ? { model: effectiveConfig.imageModel || effectiveConfig.model, size: effectiveConfig.size, count: 3 } : undefined;
             const newNode = createCanvasNode(type, pending.position, metadata);
             const connection = normalizeConnection(pending.connection.nodeId, newNode.id, [...nodesRef.current, newNode], pending.connection.handleType);
@@ -636,9 +656,9 @@ function InfiniteCanvasPage() {
             setPreviewNodeId((current) => (current && allIds.has(current) ? null : current));
             setRunningNodeId((current) => (current && allIds.has(current) ? null : current));
             setContextMenu((current) => (current && allIds.has(current.nodeId) ? null : current));
-            cleanupAssetImages({ projectId, nodes: nodesRef.current.filter((node) => !allIds.has(node.id)), chatSessions });
+            cleanupCanvasFiles({ projectId, nodes: nodesRef.current.filter((node) => !allIds.has(node.id)), chatSessions });
         },
-        [chatSessions, cleanupAssetImages, projectId],
+        [chatSessions, cleanupCanvasFiles, projectId],
     );
 
     const deselectCanvas = useCallback(() => {
@@ -663,8 +683,8 @@ function InfiniteCanvasPage() {
         setRunningNodeId(null);
         deselectCanvas();
         setClearConfirmOpen(false);
-        cleanupAssetImages({ projectId, nodes: [], chatSessions: [] });
+        cleanupCanvasFiles({ projectId, nodes: [], chatSessions: [] });
-    }, [cleanupAssetImages, deselectCanvas, projectId]);
+    }, [cleanupCanvasFiles, deselectCanvas, projectId]);
 
     const duplicateNode = useCallback((nodeId: string) => {
         const source = nodesRef.current.find((node) => node.id === nodeId);
@@ -788,6 +808,7 @@ function InfiniteCanvasPage() {
         setChatSessions(entry.chatSessions);
         setActiveChatId(entry.activeChatId);
         setBackgroundMode(entry.backgroundMode);
+        setShowImageInfo(entry.showImageInfo);
         setSelectedNodeIds(new Set());
         setSelectedConnectionId(null);
         setContextMenu(null);
@@ -1051,7 +1072,7 @@ function InfiniteCanvasPage() {
 
     const createImageFileNode = useCallback(async (file: File, position: Position) => {
         const image = await uploadImage(file);
-        const size = fitImageNodeSize(image.width, image.height);
+        const size = fitNodeSize(image.width, image.height);
         const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
         const newNode: CanvasNodeData = {
             id,
@@ -1069,6 +1090,27 @@ function InfiniteCanvasPage() {
         setDialogNodeId(id);
     }, []);
 
+    const createVideoFileNode = useCallback(async (file: File, position: Position) => {
+        const video = await uploadMediaFile(file, "video");
+        const size = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT);
+        const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+        setNodes((prev) => [
+            ...prev,
+            {
+                id,
+                type: CanvasNodeType.Video,
+                title: file.name,
+                position: { x: position.x - size.width / 2, y: position.y - size.height / 2 },
+                width: size.width,
+                height: size.height,
+                metadata: videoMetadata(video),
+            },
+        ]);
+        setSelectedNodeIds(new Set([id]));
+        setSelectedConnectionId(null);
+        setDialogNodeId(id);
+    }, []);
+
     const createTextNodeFromClipboard = useCallback(
         (text: string) => {
             const trimmed = text.trim();
@@ -1278,15 +1320,12 @@ function InfiniteCanvasPage() {
     }, []);
 
     const handleConfigNodeChange = useCallback((nodeId: string, patch: Partial<CanvasNodeData["metadata"]>) => {
-        setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, ...(patch || {}) } } : node)));
+        setNodes((prev) => prev.map((node) => (node.id === nodeId ? applyNodeConfigPatch(node, patch) : node)));
     }, []);
 
     const downloadNodeImage = useCallback((node: CanvasNodeData) => {
-        if (node.type !== CanvasNodeType.Image || !node.metadata?.content) return;
+        if ((node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) || !node.metadata?.content) return;
-        const link = document.createElement("a");
+        saveAs(node.metadata.content, `canvas-${node.type}-${node.id}.${node.type === CanvasNodeType.Video ? "mp4" : imageExtension(node.metadata.content)}`);
-        link.href = node.metadata.content;
-        link.download = `canvas-image-${node.id}.${imageExtension(node.metadata.content)}`;
-        link.click();
     }, []);
 
     const saveNodeAsset = useCallback(
@@ -1298,6 +1337,12 @@ function InfiniteCanvasPage() {
                 message.success("已加入我的素材");
                 return;
             }
+            if (node.type === CanvasNodeType.Video) {
+                if (!node.metadata?.content) return message.error("没有可保存的视频");
+                addAsset({ kind: "video", title: node.metadata?.prompt?.slice(0, 24) || "画布视频", coverUrl: "", tags: [], source: "Canvas", data: { url: node.metadata.content, storageKey: node.metadata.storageKey, width: node.width, height: node.height, bytes: node.metadata.bytes || 0, mimeType: node.metadata.mimeType || "video/mp4" }, metadata: { source: "canvas", nodeId: node.id, prompt: node.metadata?.prompt } });
+                message.success("已加入我的素材");
+                return;
+            }
             if (!node.metadata?.content) return message.error("没有可保存的图片");
             const dataUrl = node.metadata.storageKey ? "" : node.metadata.content;
             addAsset({
@@ -1383,7 +1428,7 @@ function InfiniteCanvasPage() {
                     (items) => items[0],
                 );
                 const uploaded = await uploadImage(image.dataUrl);
-                const size = fitImageNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height);
+                const size = fitNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height);
                 setNodes((prev) => prev.map((item) => (item.id === childId ? { ...item, width: size.width, height: size.height, metadata: { ...item.metadata, ...imageMetadata(uploaded), prompt, ...generationMetadata } } : item)));
             } catch (error) {
                 const errorDetails = error instanceof Error ? error.message : "生成失败";
@@ -1408,11 +1453,22 @@ function InfiniteCanvasPage() {
         async (event: ReactChangeEvent<HTMLInputElement>) => {
             const file = event.target.files?.[0];
             const target = uploadTargetRef.current;
-            if (!file || !file.type.startsWith("image/")) return;
+            if (!file || (!file.type.startsWith("image/") && !file.type.startsWith("video/"))) return;
 
             if (target?.nodeId) {
+                if (file.type.startsWith("video/")) {
+                    const video = await uploadMediaFile(file, "video");
+                    const nextSize = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT);
+                    setNodes((prev) => prev.map((node) => (node.id === target.nodeId ? { ...node, type: CanvasNodeType.Video, title: file.name, position: { x: node.position.x + node.width / 2 - nextSize.width / 2, y: node.position.y + node.height / 2 - nextSize.height / 2 }, width: nextSize.width, height: nextSize.height, metadata: { ...node.metadata, ...videoMetadata(video), errorDetails: undefined } } : node)));
+                    setSelectedNodeIds(new Set([target.nodeId]));
+                    setSelectedConnectionId(null);
+                    setDialogNodeId(target.nodeId);
+                    uploadTargetRef.current = null;
+                    event.target.value = "";
+                    return;
+                }
                 const image = await uploadImage(file);
-                const size = fitImageNodeSize(image.width, image.height);
+                const size = fitNodeSize(image.width, image.height);
                 setNodes((prev) =>
                     prev.map((node) =>
                         node.id === target.nodeId
@@ -1449,25 +1505,25 @@ function InfiniteCanvasPage() {
                 setDialogNodeId(target.nodeId);
             } else {
                 const position = target?.position || screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2);
-                void createImageFileNode(file, position);
+                void (file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position));
             }
 
             uploadTargetRef.current = null;
             event.target.value = "";
         },
-        [createImageFileNode, screenToCanvas, size.height, size.width],
+        [createImageFileNode, createVideoFileNode, screenToCanvas, size.height, size.width],
     );
 
     const handleDrop = useCallback(
         (event: ReactDragEvent<HTMLDivElement>) => {
             event.preventDefault();
-            const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
+            const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/") || item.type.startsWith("video/"));
             if (!file) return;
 
             const pos = screenToCanvas(event.clientX, event.clientY);
-            void createImageFileNode(file, pos);
+            void (file.type.startsWith("video/") ? createVideoFileNode(file, pos) : createImageFileNode(file, pos));
         },
-        [createImageFileNode, screenToCanvas],
+        [createImageFileNode, createVideoFileNode, screenToCanvas],
     );
 
     const pasteAssistantImage = useCallback(
@@ -1630,7 +1686,7 @@ function InfiniteCanvasPage() {
                                     ? await requestEdit({ ...generationConfig, count: "1" }, effectivePrompt, referenceImages).then((items) => items[0])
                                     : await requestGeneration({ ...generationConfig, count: "1" }, effectivePrompt).then((items) => items[0]);
                                 const uploaded = await uploadImage(image.dataUrl);
-                                const imageSize = fitImageNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height);
+                                const imageSize = fitNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height);
                                 setNodes((prev) => {
                                     const root = prev.find((node) => node.id === rootId);
                                     return prev.map((node) => {
@@ -1681,6 +1737,29 @@ function InfiniteCanvasPage() {
                     return;
                 }
 
+                if (mode === "video") {
+                    const spec = nodeSizeFromRatio(generationConfig.size, NODE_DEFAULT_SIZE[CanvasNodeType.Video].width, NODE_DEFAULT_SIZE[CanvasNodeType.Video].height) || NODE_DEFAULT_SIZE[CanvasNodeType.Video];
+                    const isEmptyVideoNode = sourceNode?.type === CanvasNodeType.Video && !sourceNode.metadata?.content;
+                    const videoId = isEmptyVideoNode ? nodeId : nanoid();
+                    const parent = sourceNode?.position || { x: 0, y: 0 };
+                    const videoNode: CanvasNodeData = {
+                        id: videoId,
+                        type: CanvasNodeType.Video,
+                        title: effectivePrompt.slice(0, 32) || "Generated Video",
+                        position: isEmptyVideoNode ? sourceNode.position : { x: parent.x + (sourceNode?.width || spec.width) + 96, y: parent.y },
+                        width: isEmptyVideoNode ? sourceNode.width : spec.width,
+                        height: isEmptyVideoNode ? sourceNode.height : spec.height,
+                        metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality, references: generationContext.referenceImages.map(referenceUrl).filter((url): url is string => Boolean(url)) },
+                    };
+                    pendingChildIds = [videoId];
+                    setNodes((prev) => (isEmptyVideoNode ? prev.map((node) => (node.id === nodeId ? { ...node, ...videoNode } : node)) : [...prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS } } : node)), videoNode]));
+                    if (!isEmptyVideoNode) setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: nodeId, toNodeId: videoId }]);
+                    const video = await uploadMediaFile(await requestVideoGeneration(generationConfig, effectivePrompt, generationContext.referenceImages), "video");
+                    const videoSize = fitNodeSize(video.width || spec.width, video.height || spec.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT);
+                    setNodes((prev) => prev.map((node) => (node.id === videoId ? { ...node, width: videoSize.width, height: videoSize.height, position: { x: node.position.x + node.width / 2 - videoSize.width / 2, y: node.position.y + node.height / 2 - videoSize.height / 2 }, metadata: { ...node.metadata, ...videoMetadata(video), prompt: effectivePrompt, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality, references: generationContext.referenceImages.map(referenceUrl).filter((url): url is string => Boolean(url)) } } : node)));
+                    return;
+                }
+
                 let streamed = "";
                 const isConfigNode = sourceNode?.type === CanvasNodeType.Config;
                 const textCount = isConfigNode ? getGenerationCount(generationConfig.count) : 1;
@@ -1757,7 +1836,7 @@ function InfiniteCanvasPage() {
                           size: savedImageMetadata.size || effectiveConfig.size,
                           count: "1",
                       }
-                    : { ...buildGenerationConfig(effectiveConfig, sourceNode, node.type === CanvasNodeType.Text ? "text" : "image"), count: "1" };
+                    : { ...buildGenerationConfig(effectiveConfig, sourceNode, node.type === CanvasNodeType.Text ? "text" : node.type === CanvasNodeType.Video ? "video" : "image"), count: "1" };
             if (!isAiConfigReady(generationConfig, generationConfig.model)) {
                 openConfigDialog(true);
                 return;
@@ -1793,11 +1872,17 @@ function InfiniteCanvasPage() {
                     setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, type: CanvasNodeType.Text, metadata: { ...item.metadata, content: answer || streamed, prompt, status: NODE_STATUS_SUCCESS } } : item)));
                     return;
                 }
+                if (node.type === CanvasNodeType.Video) {
+                    const video = await uploadMediaFile(await requestVideoGeneration(generationConfig, prompt, retryReferenceImages || []), "video");
+                    const videoSize = fitNodeSize(video.width || node.width, video.height || node.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT);
+                    setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, width: videoSize.width, height: videoSize.height, position: { x: item.position.x + item.width / 2 - videoSize.width / 2, y: item.position.y + item.height / 2 - videoSize.height / 2 }, metadata: { ...item.metadata, ...videoMetadata(video), prompt, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality } } : item)));
+                    return;
+                }
 
                 const image = useReferenceImages ? await requestEdit(generationConfig, prompt, retryReferenceImages).then((items) => items[0]) : await requestGeneration(generationConfig, prompt).then((items) => items[0]);
                 const uploadedImage = await uploadImage(image.dataUrl);
                 const imageConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Image];
-                const imageSize = fitImageNodeSize(uploadedImage.width, uploadedImage.height, imageConfig.width, imageConfig.height);
+                const imageSize = fitNodeSize(uploadedImage.width, uploadedImage.height, imageConfig.width, imageConfig.height);
                 const generationMetadata = savedImageMetadata?.generationType
                     ? { generationType: savedImageMetadata.generationType, model: generationConfig.model, size: generationConfig.size, quality: generationConfig.quality, count: savedImageMetadata.count || 1, references: savedImageMetadata.references }
                     : buildImageGenerationMetadata(useReferenceImages ? "edit" : "generation", generationConfig, 1, retryReferenceImages || []);
@@ -1866,7 +1951,7 @@ function InfiniteCanvasPage() {
         async (image: CanvasAssistantImage) => {
             const storedImage = image.storageKey ? { url: image.dataUrl, storageKey: image.storageKey, width: 1, height: 1, bytes: 0, mimeType: "image/png" } : await uploadImage(image.dataUrl);
             const meta = storedImage.width === 1 && storedImage.height === 1 ? await readImageMeta(storedImage.url) : storedImage;
-            const config = fitImageNodeSize(meta.width, meta.height);
+            const config = fitNodeSize(meta.width, meta.height);
             const center = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2);
             const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
             const node: CanvasNodeData = {
@@ -1906,12 +1991,19 @@ function InfiniteCanvasPage() {
         (payload: InsertAssetPayload) => {
             if (payload.kind === "text") {
                 insertAssistantText(payload.content);
+            } else if (payload.kind === "video") {
+                const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Video];
+                const center = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2);
+                const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+                const nextSize = fitNodeSize(payload.width || spec.width, payload.height || spec.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT);
+                setNodes((prev) => [...prev, { id, type: CanvasNodeType.Video, title: payload.title, position: { x: center.x - nextSize.width / 2, y: center.y - nextSize.height / 2 }, width: nextSize.width, height: nextSize.height, metadata: { content: payload.url, storageKey: payload.storageKey, status: NODE_STATUS_SUCCESS, naturalWidth: payload.width, naturalHeight: payload.height } }]);
+                setSelectedNodeIds(new Set([id]));
             } else {
                 insertAssistantImage({ id: `asset-${Date.now()}`, prompt: payload.title, dataUrl: payload.dataUrl, storageKey: payload.storageKey });
             }
             setAssetPickerOpen(false);
         },
-        [insertAssistantImage, insertAssistantText],
+        [insertAssistantImage, insertAssistantText, screenToCanvas, size.height, size.width],
     );
 
     if (!projectLoaded) return <CanvasRefreshShell />;
@@ -2004,6 +2096,7 @@ function InfiniteCanvasPage() {
                             batchOpening={openingBatchIds.has(node.id)}
                             batchRecovering={collapsingBatchIds.has(node.id)}
                             batchMotion={batchMotionById.get(node.id)}
+                            showImageInfo={showImageInfo}
                             renderPanel={(panelNode) => (
                                 <CanvasNodePromptPanel
                                     node={panelNode}
@@ -2099,7 +2192,9 @@ function InfiniteCanvasPage() {
                     canUndo={historyState.canUndo}
                     canRedo={historyState.canRedo}
                     backgroundMode={backgroundMode}
+                    showImageInfo={showImageInfo}
                     onAddImage={() => createNode(CanvasNodeType.Image)}
+                    onAddVideo={() => createNode(CanvasNodeType.Video)}
                     onAddText={() => createNode(CanvasNodeType.Text)}
                     onAddConfig={() => createNode(CanvasNodeType.Config)}
                     onUndo={undoCanvas}
@@ -2109,6 +2204,7 @@ function InfiniteCanvasPage() {
                     onClear={() => setClearConfirmOpen(true)}
                     onDeselect={deselectCanvas}
                     onBackgroundModeChange={setBackgroundMode}
+                    onShowImageInfoChange={setShowImageInfo}
                     onOpenAssetLibrary={() => {
                         setAssetPickerTab("library");
                         setAssetPickerOpen(true);
@@ -2138,7 +2234,7 @@ function InfiniteCanvasPage() {
                     />
                 ) : null}
 
-                <input ref={imageInputRef} type="file" accept="image/*" className="hidden" onChange={handleImageInputChange} />
+                <input ref={imageInputRef} type="file" accept="image/*,video/*" className="hidden" onChange={handleImageInputChange} />
 
                 <CanvasNodeInfoModal node={infoNode} open={Boolean(infoNode)} onClose={() => setInfoNodeId(null)} />
 
@@ -2406,6 +2502,10 @@ function imageMetadata(image: UploadedImage): CanvasNodeMetadata {
     return { content: image.url, storageKey: image.storageKey, status: "success", naturalWidth: image.width, naturalHeight: image.height, bytes: image.bytes, mimeType: image.mimeType };
 }
 
+function videoMetadata(video: UploadedFile): CanvasNodeMetadata {
+    return { content: video.url, storageKey: video.storageKey, status: "success", naturalWidth: video.width, naturalHeight: video.height, bytes: video.bytes, mimeType: video.mimeType || "video/mp4" };
+}
+
 function buildImageGenerationMetadata(type: CanvasImageGenerationType, config: AiConfig, count: number, references: ReferenceImage[]): CanvasNodeMetadata {
     return {
         generationType: type,
@@ -2437,6 +2537,7 @@ async function hydrateCanvasImages(nodes: CanvasNodeData[]) {
     return Promise.all(
         nodes.map(async (node) => {
             const content = node.metadata?.content;
+            if (node.type === CanvasNodeType.Video && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content) } };
             if (node.type !== CanvasNodeType.Image || !content) return node;
             if (node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveImageUrl(node.metadata.storageKey, content) } };
             if (!content.startsWith("data:image/")) return node;
@@ -2468,21 +2569,17 @@ async function hydrateAssistantImages(sessions: CanvasAssistantSession[]) {
     );
 }
 
-function fitImageNodeSize(width: number, height: number, maxWidth = UPLOADED_IMAGE_MAX_SIDE, maxHeight = UPLOADED_IMAGE_MAX_SIDE) {
-    const safeWidth = Math.max(1, width);
-    const safeHeight = Math.max(1, height);
-    const scale = Math.min(1, maxWidth / safeWidth, maxHeight / safeHeight);
-
-    return {
-        width: safeWidth * scale,
-        height: safeHeight * scale,
-    };
-}
-
 function getGenerationCount(count: string) {
     return Math.max(1, Math.min(15, Math.floor(Math.abs(Number(count)) || 1)));
 }
 
+function applyNodeConfigPatch(node: CanvasNodeData, patch: Partial<CanvasNodeData["metadata"]>) {
+    const next = { ...node, metadata: { ...node.metadata, ...(patch || {}) } };
+    const spec = node.type === CanvasNodeType.Video ? NODE_DEFAULT_SIZE[CanvasNodeType.Video] : NODE_DEFAULT_SIZE[CanvasNodeType.Image];
+    const size = typeof patch.size === "string" && !node.metadata?.content ? nodeSizeFromRatio(patch.size, spec.width, spec.height) : null;
+    return size && (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video) ? { ...next, ...size, position: { x: node.position.x + node.width / 2 - size.width / 2, y: node.position.y + node.height / 2 - size.height / 2 } } : next;
+}
+
 function normalizeConnection(firstNodeId: string, secondNodeId: string, nodes: CanvasNodeData[], firstHandleType: "source" | "target") {
     const first = nodes.find((node) => node.id === firstNodeId);
     const second = nodes.find((node) => node.id === secondNodeId);
@@ -2502,12 +2599,14 @@ function getInputSummary(inputs: NodeGenerationInput[]) {
 }
 
 function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | undefined, mode: CanvasNodeGenerationMode): AiConfig {
-    const defaultModel = mode === "image" ? config.imageModel : config.textModel;
+    const defaultModel = mode === "image" ? config.imageModel : mode === "video" ? config.videoModel : config.textModel;
     return {
         ...config,
         model: node?.metadata?.model || defaultModel || config.model || defaultConfig.model,
         quality: node?.metadata?.quality || config.quality || defaultConfig.quality,
         size: node?.metadata?.size || config.size || defaultConfig.size,
+        videoSeconds: node?.metadata?.seconds || config.videoSeconds || defaultConfig.videoSeconds,
+        vquality: node?.metadata?.vquality || config.vquality || defaultConfig.vquality,
         count: String(node?.metadata?.count || (mode === "image" ? 3 : config.count) || defaultConfig.count),
     };
 }

web/src/app/(user)/canvas/components/asset-picker-modal.tsx

@@ -12,7 +12,7 @@ import { fetchAssetLibrary, type AssetLibraryItem } from "@/services/api/assets"
 
 export type AssetPickerTab = "my-assets" | "library";
 
-export type InsertAssetPayload = { kind: "text"; content: string; title: string } | { kind: "image"; dataUrl: string; title: string; storageKey?: string };
+export type InsertAssetPayload = { kind: "text"; content: string; title: string } | { kind: "image"; dataUrl: string; title: string; storageKey?: string } | { kind: "video"; url: string; title: string; storageKey?: string; width?: number; height?: number };
 
 type Props = {
     open: boolean;
@@ -48,6 +48,7 @@ const kindOptions = [
     { label: "全部", value: "all" },
     { label: "文本", value: "text" },
     { label: "图片", value: "image" },
+    { label: "视频", value: "video" },
 ];
 
 function LibraryTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) => void }) {
@@ -157,7 +158,7 @@ function PickerCard({ title, kind, cover, loading, onClick }: { title: string; k
             <div className="p-2.5">
                 <div className="flex items-center justify-between gap-2">
                     <span className="line-clamp-1 text-xs font-medium text-stone-800 dark:text-stone-200">{title}</span>
-                    <Tag className="m-0 shrink-0 text-[10px]">{kind === "image" ? "图片" : "文本"}</Tag>
+                    <Tag className="m-0 shrink-0 text-[10px]">{kind === "image" ? "图片" : kind === "video" ? "视频" : "文本"}</Tag>
                 </div>
             </div>
             {loading && (
@@ -190,7 +191,7 @@ function MyAssetsTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) =>
     const filtered = useMemo(() => {
         const query = keyword.trim().toLowerCase();
         return assets
-            .filter((a) => a.kind === "text" || a.kind === "image")
+            .filter((a) => a.kind === "text" || a.kind === "image" || a.kind === "video")
             .filter((a) => kindFilter === "all" || a.kind === kindFilter)
             .filter((a) => !query || [a.title, ...(a.tags || [])].join(" ").toLowerCase().includes(query));
     }, [assets, keyword, kindFilter]);
@@ -206,7 +207,7 @@ function MyAssetsTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) =>
         if (asset.kind === "text") {
             onInsert({ kind: "text", content: asset.data.content, title: asset.title });
         } else {
-            onInsert({ kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title });
+            onInsert(asset.kind === "video" ? { kind: "video", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height } : { kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title });
         }
     };
 

web/src/app/(user)/canvas/components/canvas-assistant-panel.tsx

@@ -8,6 +8,7 @@ import { motion } from "motion/react";
 import { ImageGenerationPending } from "@/components/image-generation-pending";
 import { ModelPicker } from "@/components/model-picker";
 import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { nanoid } from "nanoid";
 import { cn } from "@/lib/utils";
@@ -41,8 +42,8 @@ type CanvasAssistantPanelProps = {
 
 export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeSessionId, onSelectNodeIds, onSessionsChange, onInsertImage, onInsertText, onPasteImage, onCollapseStart, onCollapse }: CanvasAssistantPanelProps) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
-    const config = useConfigStore((state) => state.config);
     const effectiveConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
     const cleanupImages = useAssetStore((state) => state.cleanupImages);
     const updateConfig = useConfigStore((state) => state.updateConfig);
     const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
@@ -328,6 +329,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeS
                             if (selectedNodeIds.has(id)) onSelectNodeIds(new Set(Array.from(selectedNodeIds).filter((nodeId) => nodeId !== id)));
                         }}
                         onPasteImage={onPasteImage}
+                        modelCosts={modelCosts}
                     />
                 ) : null}
 
@@ -372,6 +374,7 @@ function AssistantComposer({
     onMissingConfig,
     onRemoveReference,
     onPasteImage,
+    modelCosts,
 }: {
     mode: AssistantMode;
     prompt: string;
@@ -385,8 +388,11 @@ function AssistantComposer({
     onMissingConfig: () => void;
     onRemoveReference: (id: string) => void;
     onPasteImage: (file: File) => void;
+    modelCosts?: { model: string; credits: number }[];
 }) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const activeModel = mode === "image" ? config.imageModel || config.model : config.textModel || config.model;
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: activeModel, count: mode === "image" ? config.count : 1 });
 
     return (
         <div className="px-2 pb-2" onWheelCapture={(event) => event.stopPropagation()}>
@@ -431,13 +437,19 @@ function AssistantComposer({
                     </div>
                     <Button
                         type="primary"
-                        shape="circle"
+                        className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
-                        className="!h-10 !w-10 !min-w-10 shrink-0"
-                        icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
                         disabled={isRunning || !prompt.trim()}
                         onClick={() => void onSubmit()}
                         aria-label="发送"
-                    />
+                    >
+                        <span className="flex items-center gap-1.5">
+                            <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
+                                <CreditSymbol />
+                                {credits.toLocaleString()}
+                            </span>
+                            {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                        </span>
+                    </Button>
                 </div>
             </div>
         </div>

web/src/app/(user)/canvas/components/canvas-config-node-panel.tsx

@@ -2,14 +2,16 @@
 
 import type { CSSProperties } from "react";
 import { useState } from "react";
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Edit3, Eye, Image as ImageIcon, LoaderCircle, MessageSquare, Play } from "lucide-react";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Edit3, Eye, Image as ImageIcon, LoaderCircle, MessageSquare, Play, Video } from "lucide-react";
-import { App, Button, Empty, Input, InputNumber, Modal, Segmented } from "antd";
+import { App, Button, Empty, Input, Modal, Segmented } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, type AiConfig } from "@/stores/use-config-store";
+import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
-import { CanvasSizePicker } from "./canvas-size-picker";
+import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
+import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
 import type { NodeGenerationInput } from "./canvas-node-generation";
 import type { CanvasGenerationMode, CanvasNodeData, CanvasNodeMetadata } from "../types";
 
@@ -28,12 +30,14 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
     const [previewOpen, setPreviewOpen] = useState(false);
     const [editingTextId, setEditingTextId] = useState<string | null>(null);
     const [editingText, setEditingText] = useState("");
-    const globalConfig = useConfigStore((state) => state.config);
+    const globalConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const mode = node.metadata?.generationMode || "image";
     const config = buildNodeConfig(globalConfig, node, mode);
     const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(node.metadata?.count || 3)) || 1)));
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: config.model, count: mode === "image" ? count : 1 });
     const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
     const textInputs = inputs.filter((input) => input.type === "text");
     const imageInputs = inputs.filter((input) => input.type === "image");
@@ -91,6 +95,15 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                                     </span>
                                 ),
                             },
+                            {
+                                value: "video",
+                                label: (
+                                    <span className="inline-flex items-center gap-1">
+                                        <Video className="size-3.5" />
+                                        视频
+                                    </span>
+                                ),
+                            },
                         ]}
                     />
                 </div>
@@ -105,10 +118,13 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                 </button>
             </div>
 
-            <div className="mb-2 grid min-w-0 cursor-default grid-cols-[minmax(0,1fr)_92px_64px] items-center gap-2" onMouseDown={(event) => event.stopPropagation()}>
+            <div className={`mb-2 grid min-w-0 cursor-default items-center gap-2 ${mode === "text" ? "grid-cols-1" : "grid-cols-[minmax(0,1fr)_148px]"}`} onMouseDown={(event) => event.stopPropagation()}>
                 <ModelPicker className="canvas-compact-control h-10" config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} fullWidth />
-                {mode === "image" ? <CanvasSizePicker className="h-10 min-w-0" value={node.metadata?.size || globalConfig.size || defaultConfig.size} onChange={(value) => onConfigChange(node.id, { size: value })} /> : null}
+                {mode === "video" ? (
-                <InputNumber min={1} max={15} className="canvas-compact-control canvas-control-number h-10 !w-full" value={count} onChange={(value) => onConfigChange(node.id, { count: Number(value) || 1 })} />
+                    <CanvasVideoSettingsPopover config={config} placement="topRight" buttonClassName="canvas-compact-control !h-10 !w-full !justify-start !rounded-lg !px-2" onConfigChange={(key, value) => onConfigChange(node.id, key === "videoSeconds" ? { seconds: value } : { [key]: value })} />
+                ) : mode === "image" ? (
+                    <CanvasImageSettingsPopover config={config} placement="topRight" autoAdjustOverflow={false} buttonClassName="canvas-compact-control !h-10 !w-full !justify-start !rounded-lg !px-2" onConfigChange={(key, value) => onConfigChange(node.id, key === "count" ? { count: Number(value) || 1 } : { [key]: value })} />
+                ) : null}
             </div>
 
             <Button
@@ -117,9 +133,15 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                 disabled={isRunning || (!inputSummary.textCount && !inputSummary.imageCount)}
                 onMouseDown={(event) => event.stopPropagation()}
                 onClick={() => onGenerate(node.id)}
-                icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <Play className="size-4" />}
             >
-                开始生成
+                <span className="inline-flex items-center gap-1.5">
+                    <span className="inline-flex items-center gap-1">
+                        <CreditSymbol />
+                        {credits.toLocaleString()}
+                    </span>
+                    {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <Play className="size-4" />}
+                    <span>开始生成</span>
+                </span>
             </Button>
             <Modal
                 title="输入预览"
@@ -294,12 +316,14 @@ function InputChip({ label, value, style }: { label: string; value: string; styl
 }
 
 function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasGenerationMode): AiConfig {
-    const defaultModel = mode === "image" ? globalConfig.imageModel : globalConfig.textModel;
+    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : globalConfig.textModel;
     return {
         ...globalConfig,
         model: node.metadata?.model || defaultModel || globalConfig.model || defaultConfig.model,
-        quality: globalConfig.quality || defaultConfig.quality,
+        quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
         size: node.metadata?.size || globalConfig.size || defaultConfig.size,
+        videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
+        vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
         count: String(node.metadata?.count || (mode === "image" ? 3 : globalConfig.count) || defaultConfig.count),
     };
 }

web/src/app/(user)/canvas/components/canvas-image-settings-popover.tsx

@@ -1,34 +1,15 @@
 "use client";
 
-import { type ReactNode } from "react";
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
 import { Settings2 } from "lucide-react";
-import { Button, ConfigProvider, Popover } from "antd";
+import { Button } from "antd";
 
+import { ImageSettingsPanel, imageQualityLabel, imageSizeLabel } from "@/components/image-settings-panel";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
 import type { AiConfig } from "@/stores/use-config-store";
 
-const qualityOptions = [
-    { value: "auto", label: "自动" },
-    { value: "high", label: "高" },
-    { value: "medium", label: "中" },
-    { value: "low", label: "低" },
-];
-const aspectOptions = [
-    { value: "1:1", label: "1:1", width: 1024, height: 1024, icon: "square" },
-    { value: "3:2", label: "3:2", width: 1536, height: 1024, icon: "landscape" },
-    { value: "2:3", label: "2:3", width: 1024, height: 1536, icon: "portrait" },
-    { value: "4:3", label: "4:3", width: 1344, height: 1024, icon: "landscape" },
-    { value: "3:4", label: "3:4", width: 1024, height: 1344, icon: "portrait" },
-    { value: "9:16", label: "9:16", width: 1024, height: 1792, icon: "portrait" },
-    { value: "1:1-2k", label: "1:1(2k)", size: "2048x2048", width: 2048, height: 2048, icon: "square" },
-    { value: "16:9-2k", label: "16:9(2k)", size: "2048x1152", width: 2048, height: 1152, icon: "landscape" },
-    { value: "9:16-2k", label: "9:16(2k)", size: "1152x2048", width: 1152, height: 2048, icon: "portrait" },
-    { value: "16:9-4k", label: "16:9(4k)", size: "3840x2160", width: 3840, height: 2160, icon: "landscape" },
-    { value: "9:16-4k", label: "9:16(4k)", size: "2160x3840", width: 2160, height: 3840, icon: "portrait" },
-    { value: "auto", label: "auto", width: 0, height: 0, icon: "auto" },
-];
-
 type CanvasImageSettingsPopoverProps = {
     config: AiConfig;
     onConfigChange: (key: keyof AiConfig, value: string) => void;
@@ -37,188 +18,108 @@ type CanvasImageSettingsPopoverProps = {
     buttonClassName?: string;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     placement?: "topLeft" | "top" | "topRight" | "bottomLeft" | "bottom" | "bottomRight";
+    autoAdjustOverflow?: boolean;
 };
 
-export function CanvasImageSettingsPopover({ config, onConfigChange, onOpenChange, buttonClassName, getPopupContainer, placement = "topLeft" }: CanvasImageSettingsPopoverProps) {
+export function CanvasImageSettingsPopover({ config, onConfigChange, onOpenChange, buttonClassName, placement = "topLeft" }: CanvasImageSettingsPopoverProps) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const buttonRef = useRef<HTMLSpanElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [open, setOpen] = useState(false);
+    const [buttonRect, setButtonRect] = useState<DOMRect | null>(null);
     const quality = config.quality || "auto";
     const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
     const activeSize = config.size || "auto";
-    const selectedAspect = aspectOptions.find((item) => (item.size || item.value) === activeSize || item.value === activeSize);
+    const updateOpen = (nextOpen: boolean) => {
-    const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
+        setOpen(nextOpen);
-    const selectAspect = (value: string) => {
+        onOpenChange?.(nextOpen);
-        const option = aspectOptions.find((item) => item.value === value);
-        onConfigChange("size", option?.size || option?.value || "auto");
-    };
-    const updateDimension = (key: "width" | "height", value: number | null) => {
-        const next = Math.max(1, Math.floor(value || dimensions[key] || 1024));
-        onConfigChange("size", `${key === "width" ? next : dimensions.width}x${key === "height" ? next : dimensions.height}`);
     };
 
-    return (
+    useEffect(() => {
-        <Popover
+        if (!open) return;
-            trigger="click"
+        const syncPosition = () => setButtonRect(buttonRef.current?.getBoundingClientRect() || null);
-            placement={placement}
+        const closeOnOutsidePointer = (event: PointerEvent) => {
-            arrow={false}
+            const target = event.target;
-            overlayClassName="canvas-image-settings-popover"
+            if (!(target instanceof Node)) return;
-            color={theme.toolbar.panel}
+            if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) return;
-            getPopupContainer={getPopupContainer || ((triggerNode) => triggerNode.parentElement || document.body)}
+            setOpen(false);
-            onOpenChange={onOpenChange}
+            onOpenChange?.(false);
-            content={
+        };
-                <CanvasImageSettingsTheme theme={theme}>
-                    <div className="w-[360px] space-y-5 rounded-3xl px-1 py-0.5" style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
-                        <div className="text-xl font-semibold">图像设置</div>
-                        <div className="space-y-3">
-                            <SettingTitle color={theme.node.muted}>质量</SettingTitle>
-                            <div className="grid grid-cols-4 gap-3">
-                                {qualityOptions.map((item) => (
-                                    <OptionPill key={item.value} selected={quality === item.value} theme={theme} onClick={() => onConfigChange("quality", item.value)}>
-                                        {item.label}
-                                    </OptionPill>
-                                ))}
-                            </div>
-                        </div>
-                        <div className="space-y-3">
-                            <SettingTitle color={theme.node.muted}>尺寸</SettingTitle>
-                            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
-                                <DimensionInput prefix="W" value={dimensions.width} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("width", value)} />
-                                <span className="text-lg opacity-45">↔</span>
-                                <DimensionInput prefix="H" value={dimensions.height} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("height", value)} />
-                            </div>
-                        </div>
-                        <div className="space-y-3">
-                            <SettingTitle color={theme.node.muted}>宽高比</SettingTitle>
-                            <div className="grid grid-cols-4 gap-3">
-                                {aspectOptions.map((item) => (
-                                    <button
-                                        key={item.value}
-                                        type="button"
-                                        className="flex h-[86px] cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border bg-transparent text-sm transition hover:opacity-80"
-                                        style={{ borderColor: selectedAspect?.value === item.value ? theme.node.text : theme.node.stroke, background: "transparent", color: theme.node.text }}
-                                        onMouseDown={(event) => event.stopPropagation()}
-                                        onClick={() => selectAspect(item.value)}
-                                    >
-                                        <AspectIcon type={item.icon} width={item.width} height={item.height} color={theme.node.text} />
-                                        <span>{item.label}</span>
-                                    </button>
-                                ))}
-                            </div>
-                        </div>
-                        <div className="space-y-3">
-                            <SettingTitle color={theme.node.muted}>生成张数</SettingTitle>
-                            <div className="grid grid-cols-4 gap-3">
-                                {Array.from({ length: 10 }, (_, index) => index + 1).map((value) => (
-                                    <OptionPill key={value} selected={count === value} theme={theme} onClick={() => onConfigChange("count", String(value))}>
-                                        {value} 张
-                                    </OptionPill>
-                                ))}
-                                <CountInput value={count} theme={theme} onChange={(value) => onConfigChange("count", String(value || 1))} />
-                            </div>
-                        </div>
-                    </div>
-                </CanvasImageSettingsTheme>
-            }
-        >
-            <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />}>
-                <span className="truncate">
-                    {qualityLabel(quality)} · {selectedAspect?.label || activeSize} · {count} 张
-                </span>
-            </Button>
-        </Popover>
-    );
-}
 
-export function CanvasImageSettingsTheme({ theme, children }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; children: ReactNode }) {
+        syncPosition();
-    return (
+        window.addEventListener("resize", syncPosition);
-        <ConfigProvider
+        window.addEventListener("scroll", syncPosition, true);
-            theme={{
+        window.addEventListener("pointerdown", closeOnOutsidePointer, true);
-                token: { colorBgContainer: theme.toolbar.panel, colorBgElevated: theme.toolbar.panel, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel },
+        return () => {
-                components: { Button: { defaultBg: theme.toolbar.panel, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text } },
+            window.removeEventListener("resize", syncPosition);
-            }}
+            window.removeEventListener("scroll", syncPosition, true);
-        >
+            window.removeEventListener("pointerdown", closeOnOutsidePointer, true);
-            {children}
+        };
-        </ConfigProvider>
+    }, [onOpenChange, open]);
-    );
-}
 
-function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onClick: () => void; children: ReactNode }) {
+    const panel = open && buttonRect ? <ImageSettingsPortal buttonRect={buttonRect} panelRef={panelRef} placement={placement} theme={theme} config={config} onConfigChange={onConfigChange} /> : null;
-    return (
-        <button
-            type="button"
-            className="h-10 cursor-pointer rounded-full border px-2 text-sm transition hover:opacity-80"
-            style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }}
-            onMouseDown={(event) => event.stopPropagation()}
-            onClick={onClick}
-        >
-            {children}
-        </button>
-    );
-}
 
-function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix: string; value: number; disabled: boolean; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: number | null) => void }) {
     return (
-        <label className="flex h-10 overflow-hidden rounded-xl text-sm" style={{ background: theme.node.fill, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
+        <>
-            <span className="grid w-10 place-items-center" style={{ color: theme.node.muted }}>
+            <span ref={buttonRef} className="inline-flex min-w-0">
-                {prefix}
+                <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[180px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />} onClick={() => updateOpen(!open)}>
+                    <span className="truncate">
+                        {imageQualityLabel(quality)} · {imageSizeLabel(activeSize)} · {count} 张
+                    </span>
+                </Button>
             </span>
-            <input
+            {panel}
-                type="number"
+        </>
-                min={1}
-                disabled={disabled}
-                className="min-w-0 flex-1 bg-transparent px-2 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                value={value || ""}
-                onChange={(event) => onChange(Number(event.target.value) || null)}
-                onMouseDown={(event) => event.stopPropagation()}
-            />
-        </label>
     );
 }
 
-function CountInput({ value, theme, onChange }: { value: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: number | null) => void }) {
+function ImageSettingsPortal({
-    return (
+    buttonRect,
-        <label className="col-span-2 flex h-10 overflow-hidden rounded-full border text-sm" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
+    panelRef,
-            <input
+    placement,
-                type="number"
+    theme,
-                min={1}
+    config,
-                max={15}
+    onConfigChange,
-                className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+}: {
-                style={{ color: theme.node.text, WebkitTextFillColor: theme.node.text }}
+    buttonRect: DOMRect;
-                value={value || ""}
+    panelRef: RefObject<HTMLDivElement | null>;
-                onChange={(event) => onChange(Number(event.target.value) || null)}
+    placement: CanvasImageSettingsPopoverProps["placement"];
-                onMouseDown={(event) => event.stopPropagation()}
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
-            />
+    config: AiConfig;
-        </label>
+    onConfigChange: (key: keyof AiConfig, value: string) => void;
+}) {
+    const width = 356;
+    const gap = 8;
+    const margin = 12;
+    const alignRight = placement?.endsWith("Right");
+    const alignCenter = placement === "top" || placement === "bottom";
+    const left = alignCenter ? buttonRect.left + buttonRect.width / 2 - width / 2 : alignRight ? buttonRect.right - width : buttonRect.left;
+    const topPlacement = placement?.startsWith("top");
+    const style = {
+        position: "fixed",
+        zIndex: 1200,
+        width,
+        left: Math.max(margin, Math.min(window.innerWidth - width - margin, left)),
+        ...(topPlacement ? { bottom: window.innerHeight - buttonRect.top + gap, maxHeight: Math.max(260, buttonRect.top - margin * 2) } : { top: buttonRect.bottom + gap, maxHeight: Math.max(260, window.innerHeight - buttonRect.bottom - margin * 2) }),
+        background: theme.toolbar.panel,
+        borderRadius: 18,
+        boxShadow: "0 18px 54px rgba(28, 25, 23, 0.16)",
+        padding: 18,
+        overflowY: "auto",
+        color: theme.node.text,
+    } as const;
+
+    return createPortal(
+        <div
+            ref={panelRef}
+            className="canvas-image-settings-popover"
+            style={style}
+            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={(event) => event.stopPropagation()}
+        >
+            <ImageSettingsPanel config={config} onConfigChange={(key, value) => onConfigChange(key, value)} theme={theme} className="space-y-4" />
+        </div>,
+        document.body,
     );
 }
-
-function AspectIcon({ type, width, height, color }: { type: string; width: number; height: number; color: string }) {
-    if (type === "auto") return null;
-    const ratio = width / Math.max(1, height);
-    const boxWidth = ratio >= 1 ? 28 : Math.max(12, 28 * ratio);
-    const boxHeight = ratio >= 1 ? Math.max(12, 28 / ratio) : 28;
-    return (
-        <span className="grid h-8 w-10 place-items-center">
-            <span className="border-2" style={{ width: boxWidth, height: boxHeight, borderColor: color }} />
-        </span>
-    );
-}
-
-function SettingTitle({ children, color }: { children: string; color: string }) {
-    return (
-        <div className="text-xs font-medium" style={{ color }}>
-            {children}
-        </div>
-    );
-}
-
-function qualityLabel(value: string) {
-    return ({ auto: "自动", high: "高", medium: "中", low: "低" } as Record<string, string>)[value] || value;
-}
-
-function readSizeDimensions(size: string, fallback: { width: number; height: number }) {
-    const match = size?.match(/^(\d+)x(\d+)$/);
-    return {
-        width: match ? Number(match[1]) : fallback.width,
-        height: match ? Number(match[2]) : fallback.height,
-    };
-}

web/src/app/(user)/canvas/components/canvas-node-generation.ts

@@ -11,7 +11,7 @@ export type NodeGenerationContext = {
 
 export type NodeGenerationInput = {
     nodeId: string;
-    type: "text" | "image";
+    type: "text" | "image" | "video";
     title: string;
     text?: string;
     image?: ReferenceImage;

web/src/app/(user)/canvas/components/canvas-node-hover-toolbar.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { Modal, Segmented, Tooltip } from "antd";
-import { Camera, Download, FolderPlus, Image as ImageIcon, Info, Lock, LockOpen, Maximize2, MessageSquare, Minus, Pencil, Plus, RefreshCw, Scissors, Settings2, Trash2, Upload } from "lucide-react";
+import { Camera, Download, FolderPlus, Image as ImageIcon, Info, Lock, LockOpen, Maximize2, MessageSquare, Minus, Pencil, Plus, RefreshCw, Scissors, Settings2, Trash2, Upload, Video } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
 import { formatBytes, getDataUrlByteSize } from "@/lib/image-utils";
@@ -57,12 +57,14 @@ export function CanvasNodeHoverToolbar({
     const left = viewport.x + (node.position.x + node.width / 2) * viewport.k;
     const top = viewport.y + node.position.y * viewport.k - 14;
     const isImage = node.type === CanvasNodeType.Image;
+    const isVideo = node.type === CanvasNodeType.Video;
     const hasImage = isImage && Boolean(node.metadata?.content);
+    const hasVideo = isVideo && Boolean(node.metadata?.content);
     const isText = node.type === CanvasNodeType.Text;
     const isConfig = node.type === CanvasNodeType.Config;
-    const canOpenDialog = isText || hasImage;
+    const canOpenDialog = isText || hasImage || isVideo;
     const canRetry = node.metadata?.status === "error";
-    const hasSpecificTools = canRetry || isText || isImage || isConfig;
+    const hasSpecificTools = canRetry || isText || isImage || isVideo || isConfig;
 
     return (
         <div
@@ -77,8 +79,8 @@ export function CanvasNodeHoverToolbar({
             <ToolbarAction title="移除节点" label="删除" icon={<Trash2 className="size-4" />} onClick={() => onDelete(node)} danger />
             {hasSpecificTools ? <ToolbarDivider /> : null}
             {canRetry ? <ToolbarAction title="重新生成" label="重试" icon={<RefreshCw className="size-4" />} onClick={() => onRetry(node)} /> : null}
-            {hasImage || isText ? <ToolbarAction title="加入我的素材" label="存素材" icon={<FolderPlus className="size-4" />} onClick={() => onSaveAsset(node)} /> : null}
+            {hasImage || hasVideo || isText ? <ToolbarAction title="加入我的素材" label="存素材" icon={<FolderPlus className="size-4" />} onClick={() => onSaveAsset(node)} /> : null}
-            {hasImage ? <IconAction title="下载图片" icon={<Download className="size-5" />} onClick={() => onDownload(node)} /> : null}
+            {hasImage || hasVideo ? <IconAction title={hasVideo ? "下载视频" : "下载图片"} icon={<Download className="size-5" />} onClick={() => onDownload(node)} /> : null}
             {canOpenDialog ? <ToolbarAction title="编辑" label="编辑" icon={<MessageSquare className="size-4" />} onClick={() => onToggleDialog(node)} /> : null}
             {isText ? <ToolbarAction title="编辑文本" label="编辑文字" icon={<Pencil className="size-4" />} onClick={() => onEditText(node)} /> : null}
             {isText ? <ToolbarAction title="用文本生图" label="生图" icon={<ImageIcon className="size-4" />} onClick={() => onGenerateImage(node)} /> : null}
@@ -86,6 +88,7 @@ export function CanvasNodeHoverToolbar({
             {isText ? <ToolbarAction title="减小字号" label="缩小" icon={<Minus className="size-4" />} onClick={() => onDecreaseFont(node)} /> : null}
             {isText ? <ToolbarAction title="增大字号" label="放大" icon={<Plus className="size-4" />} onClick={() => onIncreaseFont(node)} /> : null}
             {isImage ? <ToolbarAction title={hasImage ? "替换图片" : "上传图片"} label={hasImage ? "替换图片" : "上传图片"} icon={<Upload className="size-4" />} onClick={() => onUpload(node)} /> : null}
+            {isVideo ? <ToolbarAction title={hasVideo ? "替换视频" : "上传视频"} label={hasVideo ? "替换视频" : "上传视频"} icon={<Video className="size-4" />} onClick={() => onUpload(node)} /> : null}
             {hasImage ? (
                 <ToolbarAction
                     title={node.metadata?.freeResize ? "切换为等比缩放" : "切换为自由比例"}
@@ -148,7 +151,7 @@ export function CanvasNodeInfoModal({ node, open, onClose }: { node: CanvasNodeD
                     {view === "info" ? (
                         <div className="thin-scrollbar h-full space-y-3 overflow-auto pr-1">
                             <InfoRow label="ID" value={node.id} />
-                            <InfoRow label="类型" value={node.type === CanvasNodeType.Text ? "文本" : node.type === CanvasNodeType.Image ? "图片" : "生成配置"} />
+                            <InfoRow label="类型" value={node.type === CanvasNodeType.Text ? "文本" : node.type === CanvasNodeType.Image ? "图片" : node.type === CanvasNodeType.Video ? "视频" : "生成配置"} />
                             <InfoRow label="尺寸" value={`${Math.round(node.width)} x ${Math.round(node.height)}`} />
                             <InfoRow label="位置" value={`${Math.round(node.position.x)}, ${Math.round(node.position.y)}`} />
                             <InfoRow label="状态" value={node.metadata?.status || "idle"} />

web/src/app/(user)/canvas/components/canvas-node-prompt-panel.tsx

@@ -5,11 +5,13 @@ import { ArrowUp, LoaderCircle } from "lucide-react";
 import { Button } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, type AiConfig } from "@/stores/use-config-store";
+import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
+import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
 import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData } from "../types";
 
 export type CanvasNodeGenerationMode = CanvasGenerationMode;
@@ -24,7 +26,8 @@ type CanvasNodePromptPanelProps = {
 };
 
 export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
-    const globalConfig = useConfigStore((state) => state.config);
+    const globalConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const mode = defaultMode(node.type);
@@ -33,6 +36,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
     const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
     const isEditingExistingContent = hasTextContent || hasImageContent;
     const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: config.model, count: mode === "image" ? config.count : 1 });
 
     useEffect(() => {
         setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
@@ -68,7 +72,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                 }}
                 className="thin-scrollbar h-24 w-full resize-none rounded-xl border px-3 py-2 text-sm leading-5 outline-none"
                 style={{ background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text }}
-                placeholder={mode === "image" ? (hasImageContent ? "请输入你想要把这张图修改成什么" : "描述要生成的图片内容") : hasTextContent ? "请输入你想要将本段文本修改成什么" : "请输入你想要生成的文本内容"}
+                placeholder={mode === "video" ? "描述要生成的视频内容" : mode === "image" ? (hasImageContent ? "请输入你想要把这张图修改成什么" : "描述要生成的图片内容") : hasTextContent ? "请输入你想要将本段文本修改成什么" : "请输入你想要生成的文本内容"}
             />
 
             <div className="mt-2 flex min-w-0 items-center justify-between gap-2">
@@ -86,35 +90,48 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                                 onOpenChange={onImageSettingsOpenChange}
                             />
                         </>
+                    ) : mode === "video" ? (
+                        <>
+                            <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} />
+                            <CanvasVideoSettingsPopover config={config} buttonClassName="!h-10 !max-w-[170px] !justify-start !rounded-full !px-3" onConfigChange={(key, value) => onConfigChange(node.id, key === "videoSeconds" ? { seconds: value } : { [key]: value })} />
+                        </>
                     ) : (
                         <ModelPicker config={config} value={config.model} onChange={(model) => onConfigChange(node.id, { model })} onMissingConfig={() => openConfigDialog(true)} />
                     )}
                 </div>
                 <Button
                     type="primary"
-                    shape="circle"
+                    className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
-                    className="!h-10 !w-10 !min-w-10 shrink-0"
                     disabled={isRunning || !prompt.trim()}
                     onClick={submit}
-                    icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
                     aria-label="生成"
-                />
+                >
+                    <span className="flex items-center gap-1.5">
+                        <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
+                            <CreditSymbol />
+                            {credits.toLocaleString()}
+                        </span>
+                        {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                    </span>
+                </Button>
             </div>
         </div>
     );
 }
 
 function defaultMode(type: CanvasNodeData["type"]): CanvasNodeGenerationMode {
-    return type === CanvasNodeType.Text ? "text" : "image";
+    return type === CanvasNodeType.Text ? "text" : type === CanvasNodeType.Video ? "video" : "image";
 }
 
 function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasNodeGenerationMode): AiConfig {
-    const defaultModel = mode === "image" ? globalConfig.imageModel : globalConfig.textModel;
+    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : globalConfig.textModel;
     return {
         ...globalConfig,
         model: node.metadata?.model || defaultModel || globalConfig.model || defaultConfig.model,
         quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
         size: node.metadata?.size || globalConfig.size || defaultConfig.size,
+        videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
+        vquality: node.metadata?.vquality || globalConfig.vquality || defaultConfig.vquality,
         count: String(node.metadata?.count || (mode === "image" ? 3 : globalConfig.count) || defaultConfig.count),
     };
 }

web/src/app/(user)/canvas/components/canvas-node.tsx

@@ -2,9 +2,10 @@
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { ChevronRight, Image as ImageIcon, RefreshCw, Star } from "lucide-react";
+import { ChevronRight, Image as ImageIcon, RefreshCw, Star, Video } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
+import { formatBytes } from "@/lib/image-utils";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasNodeType, type CanvasNodeData, type Position } from "../types";
 
@@ -21,6 +22,7 @@ type CanvasNodeProps = {
     isConnecting: boolean;
     editRequestNonce?: number;
     showPanel: boolean;
+    showImageInfo: boolean;
     renderPanel?: (node: CanvasNodeData) => ReactNode;
     renderNodeContent?: (node: CanvasNodeData) => ReactNode;
     batchCount?: number;
@@ -71,6 +73,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     isConnecting,
     editRequestNonce = 0,
     showPanel,
+    showImageInfo,
     renderPanel,
     renderNodeContent,
     batchCount = 0,
@@ -95,6 +98,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     const [hovered, setHovered] = useState(false);
     const [isEditingContent, setIsEditingContent] = useState(false);
     const hasImageContent = data.type === CanvasNodeType.Image && Boolean(data.metadata?.content);
+    const hasVideoContent = data.type === CanvasNodeType.Video && Boolean(data.metadata?.content);
     const isBatchRoot = data.type === CanvasNodeType.Image && Boolean(data.metadata?.isBatchRoot) && batchCount > 1;
     const isBatchChild = data.type === CanvasNodeType.Image && Boolean(data.metadata?.batchRootId);
     const isActive = isConnectionTarget || isSelected || isFocusRelated;
@@ -208,7 +212,7 @@ export const CanvasNode = React.memo(function CanvasNode({
             startTop: data.position.y,
             startWidth: data.width,
             startHeight: data.height,
-            keepRatio: data.type === CanvasNodeType.Image && !data.metadata?.freeResize,
+            keepRatio: (data.type === CanvasNodeType.Image && !data.metadata?.freeResize) || data.type === CanvasNodeType.Video,
             ratio: (data.metadata?.naturalWidth || data.width) / (data.metadata?.naturalHeight || data.height || 1),
         };
         window.addEventListener("mousemove", handleResizeMove);
@@ -246,7 +250,7 @@ export const CanvasNode = React.memo(function CanvasNode({
             <div
                 className="relative h-full w-full overflow-visible rounded-3xl border-2"
                 style={{
-                    background: hasImageContent ? "transparent" : theme.node.fill,
+                    background: hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
                     borderColor: hasImageContent ? imageBorderColor : isActive ? selectionBlue : isRelated ? theme.node.muted : theme.node.stroke,
                     boxShadow: isActive ? `0 0 0 1px ${selectionBlue}55` : isRelated && !isBatchChild ? `0 0 0 1px ${theme.node.muted}55, 0 18px 48px rgba(0,0,0,.14)` : undefined,
                 }}
@@ -266,7 +270,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                     className={`relative flex h-full w-full items-center justify-center rounded-[inherit] ${isBatchRoot ? "overflow-visible" : "overflow-hidden"}`}
                     style={
                         {
-                            background: hasImageContent ? "transparent" : theme.node.fill,
+                            background: hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
                             "--batch-from-x": `${batchMotion?.x || 0}px`,
                             "--batch-from-y": `${batchMotion?.y || 0}px`,
                             "--batch-from-rotate": `${6 + (batchMotion?.index || 0) * 4}deg`,
@@ -295,7 +299,9 @@ export const CanvasNode = React.memo(function CanvasNode({
                     />
                 </div>
 
-                {!hasImageContent ? <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12" style={{ background: `linear-gradient(to top, ${theme.canvas.background}66, transparent)` }} /> : null}
+                {showImageInfo && hasImageContent ? <ImageInfoBar node={data} /> : null}
+
+                {!hasImageContent && !hasVideoContent ? <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12" style={{ background: `linear-gradient(to top, ${theme.canvas.background}66, transparent)` }} /> : null}
 
                 <ResizeHandle corner="top-left" onMouseDown={handleResizeMouseDown} />
                 <ResizeHandle corner="top-right" onMouseDown={handleResizeMouseDown} />
@@ -325,6 +331,7 @@ const nodeContentRenderers = {
     [CanvasNodeType.Text]: TextContent,
     [CanvasNodeType.Image]: ImageNodeContent,
     [CanvasNodeType.Config]: EmptyImageContent,
+    [CanvasNodeType.Video]: VideoNodeContent,
 } satisfies Record<CanvasNodeType, (props: NodeContentRendererProps) => ReactNode>;
 
 function LoadingContent({ theme }: Pick<NodeContentRendererProps, "theme">) {
@@ -454,6 +461,17 @@ function EmptyImageContent({ theme, isBatchRoot, batchCount, batchExpanded, batc
     return content;
 }
 
+function VideoNodeContent({ node, theme }: NodeContentRendererProps) {
+    if (!node.metadata?.content)
+        return (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-3" style={{ color: theme.node.placeholder }}>
+                <Video className="size-7 opacity-35" />
+                <span className="text-sm">视频节点(未开发完，请勿使用)</span>
+            </div>
+        );
+    return <video src={node.metadata.content} controls className="h-full w-full rounded-[18px] bg-black object-contain" data-canvas-no-zoom />;
+}
+
 function ImageContent({
     node,
     isBatchRoot,
@@ -524,6 +542,20 @@ function ImageContent({
     );
 }
 
+function ImageInfoBar({ node }: { node: CanvasNodeData }) {
+    const width = Math.round(node.metadata?.naturalWidth || node.width);
+    const height = Math.round(node.metadata?.naturalHeight || node.height);
+    const size = formatBytes(node.metadata?.bytes || 0);
+    return (
+        <div className="pointer-events-none absolute bottom-3 right-3 z-40 max-w-[calc(100%-24px)]">
+            <span className="max-w-full truncate rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium leading-none text-white backdrop-blur-sm">
+                {width} x {height}
+                {size ? ` · ${size}` : ""}
+            </span>
+        </div>
+    );
+}
+
 function BatchFrame({ batchCount, batchExpanded, batchOpening, batchRecovering, onToggleBatch, children }: { batchCount: number; batchExpanded: boolean; batchOpening: boolean; batchRecovering: boolean; onToggleBatch?: () => void; children: ReactNode }) {
     const theme = canvasThemes[useThemeStore((state) => state.theme)];
     const isBatchRoot = batchCount > 1;

web/src/app/(user)/canvas/components/canvas-project-card.tsx

@@ -6,6 +6,7 @@ import { Button, Input } from "antd";
 
 import { useCanvasStore, type CanvasProject } from "../stores/use-canvas-store";
 import { useCanvasUiStore } from "../stores/use-canvas-ui-store";
+import { exportCanvasProjects } from "../utils/canvas-export";
 
 export function CanvasProjectCard({ project }: { project: CanvasProject }) {
     const router = useRouter();
@@ -65,7 +66,7 @@ export function CanvasProjectCard({ project }: { project: CanvasProject }) {
                         </>
                     ) : (
                         <>
-                            <Button type="text" size="small" shape="circle" icon={<Download className="size-4" />} onClick={() => exportProject(project)} aria-label="导出" />
+                            <Button type="text" size="small" shape="circle" icon={<Download className="size-4" />} onClick={() => void exportCanvasProjects([project], project.title || "无限画布")} aria-label="导出" />
                             <Button type="text" size="small" shape="circle" icon={<Pencil className="size-4" />} onClick={() => startEditing(project.id, project.title)} aria-label="重命名" />
                             <Button type="text" size="small" shape="circle" icon={<Trash2 className="size-4" />} onClick={() => setDeleteIds([project.id])} aria-label="删除" />
                         </>
@@ -75,13 +76,3 @@ export function CanvasProjectCard({ project }: { project: CanvasProject }) {
         </article>
     );
 }
-
-function exportProject(project: CanvasProject) {
-    const data = { app: "infinite-canvas", version: 1, exportedAt: new Date().toISOString(), project };
-    const url = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }));
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${(project.title || "无限画布").replace(/[\\/:*?"<>|]/g, "_")}.json`;
-    link.click();
-    URL.revokeObjectURL(url);
-}

web/src/app/(user)/canvas/components/canvas-toolbar.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
 import { useRef, useState } from "react";
-import { Button, Segmented } from "antd";
+import { Button, Segmented, Switch } from "antd";
-import { CircleDot, Eraser, FolderOpen, Grid2x2, Hand, Image as ImageIcon, Library, Moon, Palette, Redo2, Settings2, Square, Sun, Trash2, Type, Undo2, Upload } from "lucide-react";
+import { CircleDot, Eraser, FolderOpen, Grid2x2, Hand, Image as ImageIcon, Info, Library, Moon, Palette, Redo2, Settings2, Square, Sun, Trash2, Type, Undo2, Upload, Video } from "lucide-react";
 
 import { canvasThemes, type CanvasBackgroundMode, type CanvasColorTheme, type CanvasTheme } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
@@ -12,7 +12,9 @@ export function CanvasToolbar({
     canUndo,
     canRedo,
     backgroundMode,
+    showImageInfo,
     onAddImage,
+    onAddVideo,
     onAddText,
     onAddConfig,
     onUndo,
@@ -22,6 +24,7 @@ export function CanvasToolbar({
     onClear,
     onDeselect,
     onBackgroundModeChange,
+    onShowImageInfoChange,
     onOpenAssetLibrary,
     onOpenMyAssets,
 }: {
@@ -29,7 +32,9 @@ export function CanvasToolbar({
     canUndo: boolean;
     canRedo: boolean;
     backgroundMode: CanvasBackgroundMode;
+    showImageInfo: boolean;
     onAddImage: () => void;
+    onAddVideo: () => void;
     onAddText: () => void;
     onAddConfig: () => void;
     onUndo: () => void;
@@ -39,6 +44,7 @@ export function CanvasToolbar({
     onClear: () => void;
     onDeselect: () => void;
     onBackgroundModeChange: (mode: CanvasBackgroundMode) => void;
+    onShowImageInfoChange: (show: boolean) => void;
     onOpenAssetLibrary: () => void;
     onOpenMyAssets: () => void;
 }) {
@@ -75,6 +81,9 @@ export function CanvasToolbar({
                 <ToolbarButton id="tool-image" label="图片" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onAddImage}>
                     <ImageIcon className="size-4.5" />
                 </ToolbarButton>
+                <ToolbarButton id="tool-video" label="视频" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onAddVideo}>
+                    <Video className="size-4.5" />
+                </ToolbarButton>
                 <ToolbarButton id="tool-config" label="生成配置" hovered={hovered} hoverStyle={hoverStyle} wrapRef={wrapRef} onTipX={setTipX} onHover={setHovered} onClick={onAddConfig}>
                     <Settings2 className="size-4.5" />
                 </ToolbarButton>
@@ -169,6 +178,13 @@ export function CanvasToolbar({
                             },
                         ]}
                     />
+                    <div className="mt-3 flex items-center justify-between gap-3 rounded-lg px-1.5 py-1">
+                        <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium opacity-65">
+                            <Info className="size-3.5" />
+                            图片信息
+                        </span>
+                        <Switch size="small" checked={showImageInfo} onChange={onShowImageInfoChange} />
+                    </div>
                 </div>
             ) : null}
         </div>
@@ -262,6 +278,7 @@ function toolLabel(id: string) {
     if (id === "tool-redo") return "重做";
     if (id === "tool-text") return "文本";
     if (id === "tool-image") return "图片";
+    if (id === "tool-video") return "视频";
     if (id === "tool-config") return "生成配置";
     if (id === "tool-upload") return "上传图片";
     if (id === "tool-library") return "素材库";

web/src/app/(user)/canvas/components/canvas-video-settings-popover.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { Settings2 } from "lucide-react";
+import { Button } from "antd";
+
+import { VideoSettingsPanel, videoResolutionLabel, videoSecondsLabel, videoSizeLabel } from "@/components/video-settings-panel";
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { AiConfig } from "@/stores/use-config-store";
+
+type CanvasVideoSettingsPopoverProps = {
+    config: AiConfig;
+    onConfigChange: (key: keyof AiConfig, value: string) => void;
+    buttonClassName?: string;
+    placement?: "topLeft" | "top" | "topRight" | "bottomLeft" | "bottom" | "bottomRight";
+};
+
+export function CanvasVideoSettingsPopover({ config, onConfigChange, buttonClassName, placement = "topLeft" }: CanvasVideoSettingsPopoverProps) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const buttonRef = useRef<HTMLSpanElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [open, setOpen] = useState(false);
+    const [buttonRect, setButtonRect] = useState<DOMRect | null>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        const syncPosition = () => setButtonRect(buttonRef.current?.getBoundingClientRect() || null);
+        const closeOnOutsidePointer = (event: PointerEvent) => {
+            const target = event.target;
+            if (!(target instanceof Node)) return;
+            if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+            setOpen(false);
+        };
+
+        syncPosition();
+        window.addEventListener("resize", syncPosition);
+        window.addEventListener("scroll", syncPosition, true);
+        window.addEventListener("pointerdown", closeOnOutsidePointer, true);
+        return () => {
+            window.removeEventListener("resize", syncPosition);
+            window.removeEventListener("scroll", syncPosition, true);
+            window.removeEventListener("pointerdown", closeOnOutsidePointer, true);
+        };
+    }, [open]);
+
+    const panel = open && buttonRect ? <VideoSettingsPortal buttonRect={buttonRect} panelRef={panelRef} placement={placement} theme={theme} config={config} onConfigChange={onConfigChange} /> : null;
+
+    return (
+        <>
+            <span ref={buttonRef} className="inline-flex min-w-0">
+                <Button size="small" type="text" className={buttonClassName || "!h-8 !max-w-[170px] !justify-start !rounded-full !px-2.5"} style={{ background: theme.node.fill, color: theme.node.text }} icon={<Settings2 className="size-3.5" />} onClick={() => setOpen((current) => !current)}>
+                    <span className="truncate">
+                        {videoResolutionLabel(config.vquality)} · {videoSizeLabel(config.size)} · {videoSecondsLabel(config.videoSeconds)}
+                    </span>
+                </Button>
+            </span>
+            {panel}
+        </>
+    );
+}
+
+function VideoSettingsPortal({
+    buttonRect,
+    panelRef,
+    placement,
+    theme,
+    config,
+    onConfigChange,
+}: {
+    buttonRect: DOMRect;
+    panelRef: RefObject<HTMLDivElement | null>;
+    placement: CanvasVideoSettingsPopoverProps["placement"];
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+    config: AiConfig;
+    onConfigChange: (key: keyof AiConfig, value: string) => void;
+}) {
+    const width = 356;
+    const gap = 8;
+    const margin = 12;
+    const alignRight = placement?.endsWith("Right");
+    const alignCenter = placement === "top" || placement === "bottom";
+    const left = alignCenter ? buttonRect.left + buttonRect.width / 2 - width / 2 : alignRight ? buttonRect.right - width : buttonRect.left;
+    const topPlacement = placement?.startsWith("top");
+    const style = {
+        position: "fixed",
+        zIndex: 1200,
+        width,
+        left: Math.max(margin, Math.min(window.innerWidth - width - margin, left)),
+        ...(topPlacement ? { bottom: window.innerHeight - buttonRect.top + gap, maxHeight: Math.max(260, buttonRect.top - margin * 2) } : { top: buttonRect.bottom + gap, maxHeight: Math.max(260, window.innerHeight - buttonRect.bottom - margin * 2) }),
+        background: theme.toolbar.panel,
+        borderRadius: 18,
+        boxShadow: "0 18px 54px rgba(28, 25, 23, 0.16)",
+        padding: 18,
+        overflowY: "auto",
+        color: theme.node.text,
+    } as const;
+
+    return createPortal(
+        <div
+            ref={panelRef}
+            className="canvas-image-settings-popover"
+            style={style}
+            onPointerDown={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={(event) => event.stopPropagation()}
+        >
+            <VideoSettingsPanel config={config} onConfigChange={(key, value) => onConfigChange(key, value)} theme={theme} className="space-y-4" />
+        </div>,
+        document.body,
+    );
+}

web/src/app/(user)/canvas/constants.ts

@@ -12,6 +12,7 @@ export const NODE_DEFAULT_SIZE = {
     [CanvasNodeType.Image]: { width: 340, height: 240, title: "New Generation" },
     [CanvasNodeType.Text]: { width: 340, height: 240, title: "Note" },
     [CanvasNodeType.Config]: { width: 340, height: 240, title: "生成配置" },
+    [CanvasNodeType.Video]: { width: 420, height: 236, title: "Video" },
 } satisfies Record<CanvasNodeType, { width: number; height: number; title: string }>;
 
 export const NODE_SPECS = {
@@ -27,6 +28,10 @@ export const NODE_SPECS = {
         ...NODE_DEFAULT_SIZE[CanvasNodeType.Config],
         metadata: { content: "", status: "idle", generationMode: "image" },
     },
+    [CanvasNodeType.Video]: {
+        ...NODE_DEFAULT_SIZE[CanvasNodeType.Video],
+        metadata: { content: "", status: "idle" },
+    },
 } satisfies Record<CanvasNodeType, CanvasNodeSpec>;
 
 export function getNodeSpec(type: CanvasNodeType) {

web/src/app/(user)/canvas/export-types.ts

@@ -0,0 +1,20 @@
+import type { CanvasProject } from "./stores/use-canvas-store";
+
+export type CanvasExportFile = {
+    app: "infinite-canvas";
+    version: 3;
+    exportedAt: string;
+    projects: CanvasProjectExportItem[];
+};
+
+export type CanvasProjectExportItem = {
+    project: CanvasProject;
+    files: CanvasExportAsset[];
+};
+
+export type CanvasExportAsset = {
+    storageKey: string;
+    path: string;
+    mimeType: string;
+    bytes: number;
+};

web/src/app/(user)/canvas/page.tsx

@@ -3,19 +3,17 @@
 import { useRef } from "react";
 import { useRouter } from "next/navigation";
 import { App, Button } from "antd";
-import { FileUp, Plus } from "lucide-react";
+import { Download, FileUp, Plus } from "lucide-react";
 
+import { readZip } from "@/lib/zip";
+import { setMediaBlob } from "@/services/file-storage";
+import { setImageBlob } from "@/services/image-storage";
 import { CanvasDeleteProjectsDialog } from "./components/canvas-delete-projects-dialog";
 import { CanvasProjectCard } from "./components/canvas-project-card";
-import { useCanvasStore, type CanvasProject } from "./stores/use-canvas-store";
+import type { CanvasExportFile } from "./export-types";
+import { useCanvasStore } from "./stores/use-canvas-store";
 import { useCanvasUiStore } from "./stores/use-canvas-ui-store";
-
+import { exportCanvasProjects } from "./utils/canvas-export";
-type CanvasExportFile = {
-    app: "infinite-canvas";
-    version: number;
-    exportedAt: string;
-    project: CanvasProject;
-};
 
 export default function CanvasPage() {
     const { message } = App.useApp();
@@ -35,11 +33,24 @@ export default function CanvasPage() {
     const importCanvas = async (file?: File) => {
         if (!file) return;
         try {
-            const data = JSON.parse(await file.text()) as CanvasExportFile;
+            const zip = await readZip(file);
-            enterProject(importProject(data.project));
+            const projectFile = zip.get("projects.json");
-            message.success("画布已导入");
+            if (!projectFile) throw new Error("missing projects.json");
+            const data = JSON.parse(await projectFile.text()) as CanvasExportFile;
+            await Promise.all(
+                data.projects.flatMap((project) =>
+                    project.files.map(async (item) => {
+                        const blob = zip.get(item.path);
+                        if (!blob) return;
+                        const typedBlob = blob.type ? blob : blob.slice(0, blob.size, item.mimeType);
+                        await (item.storageKey.startsWith("image:") ? setImageBlob(item.storageKey, typedBlob) : setMediaBlob(item.storageKey, typedBlob));
+                    }),
+                ),
+            );
+            data.projects.forEach((item) => importProject(item.project));
+            message.success(`已导入 ${data.projects.length} 个画布`);
         } catch {
-            message.error("导入失败，请选择有效的 JSON 文件");
+            message.error("导入失败，请选择有效的画布压缩包");
         } finally {
             if (inputRef.current) inputRef.current.value = "";
         }
@@ -55,9 +66,14 @@ export default function CanvasPage() {
                     </div>
                     <div className="flex items-center gap-2">
                         {selectedIds.length ? (
-                            <Button disabled={!hydrated} onClick={() => setDeleteIds(selectedIds)}>
+                            <>
-                                删除选中
+                                <Button disabled={!hydrated} icon={<Download className="size-4" />} onClick={() => void exportCanvasProjects(projects.filter((project) => selectedIds.includes(project.id)), `无限画布-${selectedIds.length}个项目`)}>
-                            </Button>
+                                    导出选中
+                                </Button>
+                                <Button disabled={!hydrated} onClick={() => setDeleteIds(selectedIds)}>
+                                    删除选中
+                                </Button>
+                            </>
                         ) : null}
                         {projects.length ? (
                             <Button disabled={!hydrated} onClick={() => setDeleteIds(projects.map((project) => project.id))}>
@@ -92,7 +108,7 @@ export default function CanvasPage() {
                 )}
             </div>
 
-            <input ref={inputRef} type="file" accept="application/json,.json" className="hidden" onChange={(event) => void importCanvas(event.target.files?.[0])} />
+            <input ref={inputRef} type="file" accept="application/zip,.zip" className="hidden" onChange={(event) => void importCanvas(event.target.files?.[0])} />
             <CanvasDeleteProjectsDialog />
         </main>
     );

web/src/app/(user)/canvas/stores/use-canvas-store.ts

@@ -16,6 +16,7 @@ export type CanvasProject = {
     chatSessions: CanvasAssistantSession[];
     activeChatId: string | null;
     backgroundMode: CanvasBackgroundMode;
+    showImageInfo: boolean;
     viewport: ViewportTransform;
 };
 
@@ -27,7 +28,7 @@ type CanvasStore = {
     openProject: (id: string) => CanvasProject | null;
     renameProject: (id: string, title: string) => void;
     deleteProjects: (ids: string[]) => void;
-    updateProject: (id: string, patch: Partial<Pick<CanvasProject, "nodes" | "connections" | "chatSessions" | "activeChatId" | "backgroundMode" | "viewport">>) => void;
+    updateProject: (id: string, patch: Partial<Pick<CanvasProject, "nodes" | "connections" | "chatSessions" | "activeChatId" | "backgroundMode" | "showImageInfo" | "viewport">>) => void;
 };
 
 const initialViewport: ViewportTransform = { x: 0, y: 0, k: 1 };
@@ -75,6 +76,7 @@ export const useCanvasStore = create<CanvasStore>()(
                     chatSessions: [],
                     activeChatId: null,
                     backgroundMode: "lines",
+                    showImageInfo: false,
                     viewport: initialViewport,
                 };
                 set((state) => ({ projects: [project, ...state.projects] }));
@@ -92,6 +94,7 @@ export const useCanvasStore = create<CanvasStore>()(
                     chatSessions: source.chatSessions || [],
                     activeChatId: source.activeChatId || null,
                     backgroundMode: source.backgroundMode || "lines",
+                    showImageInfo: source.showImageInfo || false,
                     viewport: source.viewport || initialViewport,
                 };
                 set((state) => ({ projects: [project, ...state.projects] }));

web/src/app/(user)/canvas/types.ts

@@ -13,10 +13,11 @@ export enum CanvasNodeType {
     Image = "image",
     Text = "text",
     Config = "config",
+    Video = "video",
 }
 
 export type CanvasNodeStatus = "idle" | "success" | "loading" | "error";
-export type CanvasGenerationMode = "text" | "image";
+export type CanvasGenerationMode = "text" | "image" | "video";
 export type CanvasImageGenerationType = "generation" | "edit";
 
 export type CanvasNodeMetadata = {
@@ -31,6 +32,8 @@ export type CanvasNodeMetadata = {
     size?: string;
     quality?: string;
     count?: number;
+    seconds?: string;
+    vquality?: string;
     references?: string[];
     naturalWidth?: number;
     naturalHeight?: number;

web/src/app/(user)/canvas/utils/canvas-export.ts

@@ -0,0 +1,51 @@
+import { saveAs } from "file-saver";
+
+import { createZip } from "@/lib/zip";
+import { getMediaBlob } from "@/services/file-storage";
+import { getImageBlob } from "@/services/image-storage";
+import type { CanvasExportAsset, CanvasExportFile } from "../export-types";
+import type { CanvasProject } from "../stores/use-canvas-store";
+
+export async function exportCanvasProjects(projects: CanvasProject[], fileName = "无限画布") {
+    const zipFiles: { name: string; data: BlobPart }[] = [];
+    const exportedProjects = await Promise.all(
+        projects.map(async (project) => {
+            const files: CanvasExportAsset[] = [];
+            await Promise.all(
+                collectStorageKeys(project).map(async (storageKey) => {
+                    const blob = storageKey.startsWith("image:") ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
+                    if (!blob) return;
+                    const path = `projects/${project.id}/files/${safeFileName(storageKey)}.${fileExtension(blob.type, storageKey)}`;
+                    files.push({ storageKey, path, mimeType: blob.type || "application/octet-stream", bytes: blob.size });
+                    zipFiles.push({ name: path, data: blob });
+                }),
+            );
+            return { project, files };
+        }),
+    );
+
+    const data: CanvasExportFile = { app: "infinite-canvas", version: 3, exportedAt: new Date().toISOString(), projects: exportedProjects };
+    const zip = await createZip([{ name: "projects.json", data: JSON.stringify(data, null, 2) }, ...zipFiles]);
+    saveAs(zip, `${safeFileName(fileName)}.zip`);
+}
+
+function collectStorageKeys(value: unknown, keys = new Set<string>()) {
+    if (!value || typeof value !== "object") return [...keys];
+    if ("storageKey" in value && typeof value.storageKey === "string" && value.storageKey.includes(":")) keys.add(value.storageKey);
+    Object.values(value).forEach((item) => (Array.isArray(item) ? item.forEach((child) => collectStorageKeys(child, keys)) : collectStorageKeys(item, keys)));
+    return [...keys];
+}
+
+function safeFileName(value: string) {
+    return value.replace(/[\\/:*?"<>|]/g, "_");
+}
+
+function fileExtension(mimeType: string, storageKey: string) {
+    if (mimeType.includes("png")) return "png";
+    if (mimeType.includes("jpeg")) return "jpg";
+    if (mimeType.includes("webp")) return "webp";
+    if (mimeType.includes("gif")) return "gif";
+    if (mimeType.includes("mp4")) return "mp4";
+    if (mimeType.includes("webm")) return "webm";
+    return storageKey.startsWith("image:") ? "png" : "bin";
+}

web/src/app/(user)/canvas/utils/canvas-node-size.ts

@@ -0,0 +1,18 @@
+"use client";
+
+export function fitNodeSize(width: number, height: number, maxWidth = 640, maxHeight = 640) {
+    const w = Math.max(1, width);
+    const h = Math.max(1, height);
+    const scale = Math.min(1, maxWidth / w, maxHeight / h);
+    return { width: w * scale, height: h * scale };
+}
+
+export function nodeSizeFromRatio(size: string, baseWidth: number, baseHeight: number) {
+    const match = size?.match(/^(\d+)(?:x|:)(\d+)/);
+    if (!match) return null;
+    const width = Number(match[1]);
+    const height = Number(match[2]);
+    const ratio = width / Math.max(1, height);
+    if (ratio < 0.25 || ratio > 4) return { width: baseWidth, height: baseHeight };
+    return ratio >= baseWidth / baseHeight ? { width: baseWidth, height: baseWidth / ratio } : { width: baseHeight * ratio, height: baseHeight };
+}

web/src/app/(user)/image/page.tsx

@@ -2,27 +2,33 @@
 
 import { BookOpen, CheckSquare, ClipboardPaste, Download, FolderPlus, History, ImagePlus, LoaderCircle, PenLine, Plus, SlidersHorizontal, Sparkles, Trash2, Upload } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { App, AutoComplete, Button, Checkbox, Drawer, Empty, Image, Input, InputNumber, Modal, Select, Tag, Typography } from "antd";
+import { App, Button, Checkbox, Drawer, Empty, Image, Input, Modal, Tag, Typography } from "antd";
 import localforage from "localforage";
+import { saveAs } from "file-saver";
 
+import { ImageSettingsPanel } from "@/components/image-settings-panel";
 import { ModelPicker } from "@/components/model-picker";
 import { PromptSelectDialog } from "@/components/prompts/prompt-select-dialog";
 import { AssetPickerModal, type InsertAssetPayload } from "@/app/(user)/canvas/components/asset-picker-modal";
+import { canvasThemes } from "@/lib/canvas-theme";
 import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { useThemeStore } from "@/stores/use-theme-store";
 import { nanoid } from "nanoid";
 import { formatBytes, formatDuration, getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
 import { requestEdit, requestGeneration } from "@/services/api/image";
-import { uploadImage } from "@/services/image-storage";
+import { deleteStoredImages, resolveImageUrl, uploadImage } from "@/services/image-storage";
 import { useAssetStore } from "@/stores/use-asset-store";
 import type { ReferenceImage } from "@/types/image";
 
 type GeneratedImage = {
     id: string;
     dataUrl: string;
+    storageKey?: string;
     durationMs: number;
     width: number;
     height: number;
     bytes: number;
+    mimeType?: string;
 };
 
 type GenerationResult = {
@@ -36,8 +42,11 @@ type GenerationLog = {
     id: string;
     createdAt: number;
     title: string;
+    prompt: string;
     time: string;
     model: string;
+    config: GenerationLogConfig;
+    references: ReferenceImage[];
     durationMs: number;
     successCount: number;
     failCount: number;
@@ -45,15 +54,15 @@ type GenerationLog = {
     size: string;
     quality: string;
     status: "成功" | "失败";
+    images: GeneratedImage[];
     thumbnails: string[];
 };
 
+type GenerationLogConfig = Pick<AiConfig, "model" | "imageModel" | "quality" | "size" | "count">;
+
 type UpdateAiConfig = <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
 
-const sizeOptions = ["auto", "1:1", "3:2", "2:3", "4:3", "3:4", "16:9", "9:16"].map((value) => ({ label: value, value }));
-const qualityOptions = ["auto", "low", "medium", "high"].map((value) => ({ label: value, value }));
 const LOG_STORE_KEY = "infinite-canvas:image_generation_logs";
-const LOG_STORE_PREFIX = `${LOG_STORE_KEY}:`;
 const logStore = localforage.createInstance({ name: "infinite-canvas", storeName: "image_generation_logs" });
 
 export default function ImagePage() {
@@ -157,16 +166,23 @@ export default function ImagePage() {
         const failed = result.find((item): item is PromiseRejectedResult => item.status === "rejected");
 
         try {
+            const logImages = await Promise.all(
+                successImages.map(async (image) => {
+                    const stored = await uploadImage(image.dataUrl);
+                    return { ...image, dataUrl: stored.url, storageKey: stored.storageKey, width: stored.width, height: stored.height, bytes: stored.bytes, mimeType: stored.mimeType };
+                }),
+            );
             saveLog(
                 buildLog({
                     prompt: text,
                     model,
                     config: { ...snapshot.config, count: String(generationCount) },
+                    references: snapshot.references,
                     durationMs: performance.now() - batchStartedAt,
                     successCount,
                     failCount,
                     status: successCount ? "成功" : "失败",
-                    thumbnails: successImages.map((image) => image.dataUrl),
+                    images: logImages,
                 }),
             );
             successCount ? message.success("图片已生成") : message.error(failed?.reason instanceof Error ? failed.reason.message : "生成失败");
@@ -176,10 +192,7 @@ export default function ImagePage() {
     };
 
     const downloadImage = (image: GeneratedImage, index: number) => {
-        const link = document.createElement("a");
+        saveAs(image.dataUrl, `image-${index + 1}.png`);
-        link.href = image.dataUrl;
-        link.download = `image-${index + 1}.png`;
-        link.click();
     };
 
     const addResultToReferences = async (image: GeneratedImage, index: number) => {
@@ -223,7 +236,8 @@ export default function ImagePage() {
     };
 
     const deleteSelectedLogs = () => {
-        void Promise.all(selectedLogIds.map((id) => logStore.removeItem(id))).then(refreshLogs);
+        const imageKeys = logs.filter((log) => selectedLogIds.includes(log.id)).flatMap((log) => log.images.map((image) => image.storageKey).filter((key): key is string => Boolean(key)));
+        void Promise.all([deleteStoredImages(imageKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(refreshLogs);
         if (previewLog && selectedLogIds.includes(previewLog.id)) {
             setPreviewLog(null);
             setResults([]);
@@ -233,7 +247,7 @@ export default function ImagePage() {
     };
 
     const saveLog = (log: GenerationLog) => {
-        void logStore.setItem(log.id, log).then(refreshLogs);
+        void logStore.setItem(log.id, serializeLog(log)).then(refreshLogs);
     };
 
     const refreshLogs = async () => setLogs(await readStoredLogs());
@@ -241,13 +255,13 @@ export default function ImagePage() {
     const previewGenerationLog = async (log: GenerationLog) => {
         setPreviewLog(log);
         setLogsOpen(false);
-        const images = await Promise.all(
+        setPrompt(log.prompt);
-            log.thumbnails.map(async (dataUrl, index) => {
+        setReferences(log.references || []);
-                const meta = await readImageMeta(dataUrl);
+        if (log.config.imageModel || log.model) updateConfig("imageModel", log.config.imageModel || log.model);
-                return { id: `${log.id}-${index}`, dataUrl, durationMs: log.durationMs, width: meta.width, height: meta.height, bytes: getDataUrlByteSize(dataUrl) };
+        if (log.config.quality) updateConfig("quality", log.config.quality);
-            }),
+        if (log.config.size) updateConfig("size", log.config.size);
-        );
+        if (log.config.count) updateConfig("count", log.config.count);
-        setResults(images.map((image) => ({ id: image.id, status: "success", image })));
+        setResults(log.images.map((image) => ({ id: image.id, status: "success", image })));
     };
 
     const buildRequestSnapshot = () => {
@@ -445,8 +459,8 @@ export default function ImagePage() {
                     onPreviewLog={(log) => void previewGenerationLog(log)}
                 />
             </Drawer>
-            <Drawer title="参数" placement="bottom" size="default" open={settingsOpen} onClose={() => setSettingsOpen(false)}>
+            <Drawer title="参数" placement="bottom" height="82vh" open={settingsOpen} onClose={() => setSettingsOpen(false)}>
-                <div className="grid grid-cols-2 gap-3">
+                <div className="grid grid-cols-2 gap-3 pb-4">
                     <GenerationSettings config={effectiveConfig} model={model} updateConfig={updateConfig} openConfigDialog={openConfigDialog} />
                 </div>
             </Drawer>
@@ -460,24 +474,17 @@ export default function ImagePage() {
 }
 
 function GenerationSettings({ config, model, updateConfig, openConfigDialog }: { config: AiConfig; model: string; updateConfig: UpdateAiConfig; openConfigDialog: (shouldPromptContinue?: boolean) => void }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+
     return (
         <>
             <label className="col-span-2 block min-w-0 sm:col-span-1">
                 <span className="mb-1.5 block text-sm font-semibold sm:mb-2 sm:text-base">模型</span>
                 <ModelPicker config={config} value={model} onChange={(value) => updateConfig("imageModel", value)} fullWidth onMissingConfig={() => openConfigDialog(false)} />
             </label>
-            <label className="block">
+            <div className="col-span-2">
-                <span className="mb-1.5 block text-sm font-semibold sm:mb-2 sm:text-base">生成次数</span>
+                <ImageSettingsPanel config={config} onConfigChange={(key, value) => updateConfig(key, value)} theme={theme} showTitle={false} className="space-y-4" maxCount={10} />
-                <InputNumber className="canvas-control-number !w-full" min={1} max={10} value={Number(config.count) || 1} onChange={(value) => updateConfig("count", String(value || 1))} />
+            </div>
-            </label>
-            <label className="block">
-                <span className="mb-1.5 block text-sm font-semibold sm:mb-2 sm:text-base">尺寸</span>
-                <AutoComplete className="canvas-control-select w-full" value={config.size} options={sizeOptions} placeholder="例如 1:1、3:2" onChange={(value) => updateConfig("size", value)} />
-            </label>
-            <label className="block">
-                <span className="mb-1.5 block text-sm font-semibold sm:mb-2 sm:text-base">质量</span>
-                <Select className="canvas-control-select w-full" value={config.quality} options={qualityOptions} onChange={(value) => updateConfig("quality", value)} />
-            </label>
         </>
     );
 }
@@ -668,47 +675,68 @@ function LogCard({ log, selected, active, onSelectedChange, onClick }: { log: Ge
 async function readStoredLogs() {
     if (typeof window === "undefined") return [];
     try {
-        const legacyValue = window.localStorage.getItem(LOG_STORE_KEY);
+        const values: GenerationLog[] = [];
-        if (legacyValue) {
-            await Promise.all((JSON.parse(legacyValue) as GenerationLog[]).map((log) => logStore.setItem(log.id, normalizeLog(log))));
-            window.localStorage.removeItem(LOG_STORE_KEY);
-        }
-        const legacyKeys = Array.from({ length: window.localStorage.length }, (_, index) => window.localStorage.key(index)).filter((key): key is string => Boolean(key?.startsWith(LOG_STORE_PREFIX)));
-        await Promise.all(
-            legacyKeys.map(async (key) => {
-                try {
-                    const log = normalizeLog(JSON.parse(window.localStorage.getItem(key) || ""));
-                    await logStore.setItem(log.id, log);
-                    window.localStorage.removeItem(key);
-                } catch {}
-            }),
-        );
-
-        const logs: GenerationLog[] = [];
         await logStore.iterate<GenerationLog, void>((value) => {
-            logs.push(normalizeLog(value));
+            values.push(value);
         });
+        const logs = await Promise.all(values.map(normalizeLog));
         return logs.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
     } catch {
         return [];
     }
 }
 
-function normalizeLog(log: Partial<GenerationLog>): GenerationLog {
+async function normalizeLog(log: Partial<GenerationLog>): Promise<GenerationLog> {
+    const references = await Promise.all(
+        (log.references || []).map(async (item) => ({
+            ...item,
+            dataUrl: await resolveImageUrl(item.storageKey, item.dataUrl),
+        })),
+    );
+    const images = await Promise.all(
+        (log.images || []).map(async (item) => ({
+            ...item,
+            dataUrl: await resolveImageUrl(item.storageKey, item.dataUrl),
+        })),
+    );
+    const config = normalizeLogConfig(log);
     return {
         id: log.id || nanoid(),
         createdAt: log.createdAt || Date.now(),
         title: log.title || log.model || "未命名",
+        prompt: log.prompt || log.title || "",
         time: log.time || new Date().toLocaleString("zh-CN", { hour12: false }),
-        model: log.model || "",
+        model: log.model || config.imageModel || "",
+        config,
+        references,
         durationMs: log.durationMs || 0,
         successCount: log.successCount ?? log.imageCount ?? 0,
         failCount: log.failCount || 0,
         imageCount: log.imageCount || log.successCount || 0,
-        size: log.size || "",
+        size: log.size || config.size || "",
-        quality: log.quality || "",
+        quality: log.quality || config.quality || "",
         status: log.status || "成功",
-        thumbnails: log.thumbnails || [],
+        images,
+        thumbnails: images.map((image) => image.dataUrl),
+    };
+}
+
+function serializeLog(log: GenerationLog): GenerationLog {
+    return {
+        ...log,
+        references: log.references.map((item) => ({ ...item, dataUrl: item.storageKey ? "" : item.dataUrl })),
+        images: log.images.map((image) => ({ ...image, dataUrl: image.storageKey ? "" : image.dataUrl })),
+        thumbnails: [],
+    };
+}
+
+function normalizeLogConfig(log: Partial<GenerationLog>): GenerationLogConfig {
+    return {
+        model: log.config?.model || log.model || "",
+        imageModel: log.config?.imageModel || log.model || "",
+        quality: log.config?.quality || log.quality || "",
+        size: log.config?.size || log.size || "",
+        count: log.config?.count || String(log.imageCount || log.successCount || 1),
     };
 }
 
@@ -716,34 +744,47 @@ function buildLog({
     prompt,
     model,
     config,
+    references,
     durationMs,
     successCount,
     failCount,
     status,
-    thumbnails,
+    images,
 }: {
     prompt: string;
     model: string;
-    config: { size: string; quality: string; count?: string };
+    config: GenerationLogConfig;
+    references: ReferenceImage[];
     durationMs: number;
     successCount: number;
     failCount: number;
     status: GenerationLog["status"];
-    thumbnails: string[];
+    images: GeneratedImage[];
 }): GenerationLog {
+    const logConfig = {
+        model: config.model,
+        imageModel: config.imageModel,
+        quality: config.quality,
+        size: config.size,
+        count: config.count,
+    };
     return {
         id: nanoid(),
         createdAt: Date.now(),
         title: prompt.slice(0, 12) || "未命名",
+        prompt,
         time: new Date().toLocaleString("zh-CN", { hour12: false }),
         model,
+        config: logConfig,
+        references,
         durationMs,
         successCount,
         failCount,
-        imageCount: Number(config.count) || successCount,
+        imageCount: Number(logConfig.count) || successCount,
-        size: config.size,
+        size: logConfig.size,
-        quality: config.quality,
+        quality: logConfig.quality,
         status,
-        thumbnails,
+        images,
+        thumbnails: images.map((image) => image.dataUrl),
     };
 }

web/src/app/(user)/login/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import { App, Button, Form, Input } from "antd";
+import { App, Button, Form, Input, Segmented, Space } from "antd";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 
+import { fetchCurrentUser } from "@/services/api/auth";
+import { useConfigStore } from "@/stores/use-config-store";
 import { useUserStore } from "@/stores/use-user-store";
 
 type LoginFormValues = {
@@ -26,13 +28,44 @@ function LoginContent() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const login = useUserStore((state) => state.login);
+    const register = useUserStore((state) => state.register);
+    const setSession = useUserStore((state) => state.setSession);
     const isLoading = useUserStore((state) => state.isLoading);
+    const linuxDoEnabled = useConfigStore((state) => state.publicSettings?.auth?.linuxDo?.enabled === true);
+    const allowRegister = useConfigStore((state) => state.publicSettings?.auth?.allowRegister !== false);
+    const [mode, setMode] = useState<"login" | "register">("login");
     const redirect = searchParams.get("redirect") || "/";
 
+    useEffect(() => {
+        const token = searchParams.get("token");
+        const error = searchParams.get("error");
+        if (error) message.error(error);
+        if (!token) return;
+        void fetchCurrentUser(token).then((user) => {
+            setSession(token, user);
+            message.success("登录成功");
+            router.replace(redirect.startsWith("/") ? redirect : "/");
+            router.refresh();
+        });
+    }, [message, redirect, router, searchParams, setSession]);
+
+    useEffect(() => {
+        if (!allowRegister && mode === "register") setMode("login");
+    }, [allowRegister, mode]);
+
     const submit = async (values: LoginFormValues) => {
         try {
-            const user = await login({ username: values.username, password: values.password });
+            if (mode === "register" && !allowRegister) {
-            message.success("登录成功");
+                message.error("当前未开放注册");
+                return;
+            }
+            if (mode === "register" && values.password !== values.confirmPassword) {
+                message.error("两次输入的密码不一致");
+                return;
+            }
+            const action = mode === "register" ? register : login;
+            const user = await action({ username: values.username, password: values.password });
+            message.success(mode === "register" ? "注册成功" : "登录成功");
             router.replace(redirect.startsWith("/") ? redirect : "/");
             router.refresh();
             if (user.role !== "admin") router.replace("/");
@@ -53,20 +86,40 @@ function LoginContent() {
                         }}
                         aria-label="无限画布"
                     />
-                    <h1 className="text-3xl font-semibold tracking-normal text-stone-950 dark:text-stone-100">管理员登录</h1>
+                    <h1 className="text-3xl font-semibold tracking-normal text-stone-950 dark:text-stone-100">账号登录</h1>
-                    <p className="mt-3 text-base leading-7 text-stone-500 dark:text-stone-400">当前暂时关闭注册，仅允许管理员账号登录。</p>
+                    <p className="mt-3 text-base leading-7 text-stone-500 dark:text-stone-400">支持账号密码和 Linux.do 登录。</p>
                 </div>
 
                 <Form<LoginFormValues> layout="vertical" size="large" requiredMark={false} onFinish={submit}>
+                    <Form.Item>
+                        <Segmented
+                            block
+                            value={mode}
+                            onChange={(value) => setMode(value as "login" | "register")}
+                            options={allowRegister ? [{ label: "登录", value: "login" }, { label: "注册", value: "register" }] : [{ label: "登录", value: "login" }]}
+                        />
+                    </Form.Item>
                     <Form.Item name="username" label={<span className="font-medium text-stone-800 dark:text-stone-200">用户名</span>} rules={[{ required: true, message: "请输入用户名" }]}>
                         <Input prefix={<UserOutlined />} autoComplete="username" />
                     </Form.Item>
                     <Form.Item name="password" label={<span className="font-medium text-stone-800 dark:text-stone-200">密码</span>} rules={[{ required: true, message: "请输入密码" }]}>
                         <Input.Password prefix={<LockOutlined />} autoComplete="current-password" />
                     </Form.Item>
-                    <Button block type="primary" htmlType="submit" loading={isLoading}>
+                    {mode === "register" ? (
-                        登录
+                        <Form.Item name="confirmPassword" label={<span className="font-medium text-stone-800 dark:text-stone-200">确认密码</span>} rules={[{ required: true, message: "请再次输入密码" }]}>
-                    </Button>
+                            <Input.Password prefix={<LockOutlined />} autoComplete="new-password" />
+                        </Form.Item>
+                    ) : null}
+                    <Space orientation="vertical" size={12} style={{ width: "100%" }}>
+                        <Button block type="primary" htmlType="submit" loading={isLoading}>
+                            {mode === "register" ? "注册" : "登录"}
+                        </Button>
+                        {linuxDoEnabled ? (
+                            <Button block href={`/api/auth/linux-do/authorize?redirect=${encodeURIComponent(redirect)}`} icon={<img src="/icons/linuxdo.svg" alt="" width={18} height={18} />}>
+                                使用 Linux.do 登录
+                            </Button>
+                        ) : null}
+                    </Space>
                 </Form>
             </section>
         </main>

web/src/app/(user)/video/page.tsx

@@ -0,0 +1,638 @@
+"use client";
+
+import { BookOpen, CheckSquare, ClipboardPaste, Download, FolderPlus, History, LoaderCircle, Plus, SlidersHorizontal, Sparkles, Trash2, Upload, VideoIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { App, Button, Checkbox, Drawer, Empty, Input, Modal, Tag, Typography } from "antd";
+import localforage from "localforage";
+import { nanoid } from "nanoid";
+import { saveAs } from "file-saver";
+
+import { AssetPickerModal, type InsertAssetPayload } from "@/app/(user)/canvas/components/asset-picker-modal";
+import { ModelPicker } from "@/components/model-picker";
+import { PromptSelectDialog } from "@/components/prompts/prompt-select-dialog";
+import { VideoSettingsPanel, normalizeVideoResolutionValue, normalizeVideoSizeValue, videoSizeLabel } from "@/components/video-settings-panel";
+import { canvasThemes } from "@/lib/canvas-theme";
+import { formatBytes, formatDuration } from "@/lib/image-utils";
+import { deleteStoredMedia, resolveMediaUrl, uploadMediaFile } from "@/services/file-storage";
+import { resolveImageUrl, uploadImage } from "@/services/image-storage";
+import { requestVideoGeneration } from "@/services/api/video";
+import { useAssetStore } from "@/stores/use-asset-store";
+import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { ReferenceImage } from "@/types/image";
+
+type GeneratedVideo = {
+    id: string;
+    url: string;
+    storageKey: string;
+    durationMs: number;
+    width: number;
+    height: number;
+    bytes: number;
+    mimeType: string;
+};
+
+type GenerationResult = {
+    id: string;
+    status: "pending" | "success" | "failed";
+    video?: GeneratedVideo;
+    error?: string;
+};
+
+type GenerationLog = {
+    id: string;
+    createdAt: number;
+    title: string;
+    prompt: string;
+    time: string;
+    model: string;
+    config: GenerationLogConfig;
+    references: ReferenceImage[];
+    durationMs: number;
+    size: string;
+    resolution: string;
+    seconds: string;
+    status: "成功" | "失败";
+    video?: GeneratedVideo;
+    error?: string;
+};
+
+type GenerationLogConfig = Pick<AiConfig, "model" | "videoModel" | "size" | "vquality" | "videoSeconds">;
+
+type UpdateAiConfig = <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
+
+const LOG_STORE_KEY = "infinite-canvas:video_generation_logs";
+const logStore = localforage.createInstance({ name: "infinite-canvas", storeName: "video_generation_logs" });
+
+export default function VideoPage() {
+    const { message } = App.useApp();
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const config = useConfigStore((state) => state.config);
+    const effectiveConfig = useEffectiveConfig();
+    const updateConfig = useConfigStore((state) => state.updateConfig);
+    const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
+    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
+    const addAsset = useAssetStore((state) => state.addAsset);
+    const [prompt, setPrompt] = useState("");
+    const [references, setReferences] = useState<ReferenceImage[]>([]);
+    const [results, setResults] = useState<GenerationResult[]>([]);
+    const [logs, setLogs] = useState<GenerationLog[]>([]);
+    const [running, setRunning] = useState(false);
+    const [logsOpen, setLogsOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [promptDialogOpen, setPromptDialogOpen] = useState(false);
+    const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+    const [startedAt, setStartedAt] = useState(0);
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const [selectedLogIds, setSelectedLogIds] = useState<string[]>([]);
+    const [previewLog, setPreviewLog] = useState<GenerationLog | null>(null);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+
+    const model = effectiveConfig.videoModel || effectiveConfig.model;
+    const canGenerate = Boolean(prompt.trim());
+
+    useEffect(() => {
+        if (!running || !startedAt) return;
+        const timer = window.setInterval(() => setElapsedMs(performance.now() - startedAt), 1000);
+        return () => window.clearInterval(timer);
+    }, [running, startedAt]);
+
+    useEffect(() => {
+        void refreshLogs();
+    }, []);
+
+    const addReferences = async (files?: FileList | null) => {
+        const imageFiles = Array.from(files || []).filter((file) => file.type.startsWith("image/")).slice(0, 7 - references.length);
+        const nextReferences = await Promise.all(
+            imageFiles.map(async (file) => {
+                const image = await uploadImage(file);
+                return { id: nanoid(), name: file.name, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
+            }),
+        );
+        setReferences((value) => [...value, ...nextReferences].slice(0, 7));
+    };
+
+    const addReferencesFromClipboard = async () => {
+        try {
+            const items = await navigator.clipboard.read();
+            const blobs = await Promise.all(items.flatMap((item) => item.types.filter((type) => type.startsWith("image/")).map((type) => item.getType(type))));
+            if (!blobs.length) {
+                message.error("剪切板里没有可读取的图片");
+                return;
+            }
+            const nextReferences = await Promise.all(
+                blobs.slice(0, 7 - references.length).map(async (blob, index) => {
+                    const image = await uploadImage(blob);
+                    return { id: nanoid(), name: `clipboard-${index + 1}.png`, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
+                }),
+            );
+            setReferences((value) => [...value, ...nextReferences].slice(0, 7));
+            message.success(`已读取 ${nextReferences.length} 张参考图`);
+        } catch {
+            message.error("剪切板里没有可读取的图片");
+        }
+    };
+
+    const generate = async () => {
+        const snapshot = buildRequestSnapshot();
+        if (!snapshot) return;
+        setElapsedMs(0);
+        setRunning(true);
+        setPreviewLog(null);
+        setResults([{ id: nanoid(), status: "pending" }]);
+        const batchStartedAt = performance.now();
+        setStartedAt(batchStartedAt);
+        try {
+            const blob = await requestVideoGeneration(snapshot.config, snapshot.text, snapshot.references);
+            const stored = await uploadMediaFile(blob, "video");
+            const nextVideo: GeneratedVideo = {
+                id: nanoid(),
+                url: stored.url,
+                storageKey: stored.storageKey,
+                durationMs: performance.now() - batchStartedAt,
+                width: stored.width || 1280,
+                height: stored.height || 720,
+                bytes: stored.bytes,
+                mimeType: stored.mimeType,
+            };
+            setResults([{ id: nextVideo.id, status: "success", video: nextVideo }]);
+            saveLog(buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, durationMs: nextVideo.durationMs, status: "成功", video: nextVideo }));
+            message.success("视频已生成");
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "生成失败";
+            setResults([{ id: nanoid(), status: "failed", error: errorMessage }]);
+            saveLog(buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, durationMs: performance.now() - batchStartedAt, status: "失败", error: errorMessage }));
+            message.error(errorMessage);
+        } finally {
+            setRunning(false);
+        }
+    };
+
+    const buildRequestSnapshot = () => {
+        const text = prompt.trim();
+        if (!text) {
+            message.error("请输入视频提示词");
+            return null;
+        }
+        if (!isAiConfigReady(effectiveConfig, model)) {
+            message.warning("请先完成配置");
+            openConfigDialog(true);
+            return null;
+        }
+        return { text, config: buildVideoConfig(effectiveConfig, model), references: [...references] };
+    };
+
+    const retryResult = () => {
+        void generate();
+    };
+
+    const downloadVideo = (video: GeneratedVideo) => {
+        saveAs(video.url, "video.mp4");
+    };
+
+    const saveResultToAssets = (video: GeneratedVideo) => {
+        addAsset({
+            kind: "video",
+            title: "生成视频",
+            coverUrl: "",
+            tags: [],
+            source: "视频创作台",
+            data: { url: video.url, storageKey: video.storageKey, width: video.width, height: video.height, bytes: video.bytes, mimeType: video.mimeType },
+            metadata: { source: "video-page", prompt },
+        });
+        message.success("已加入我的素材");
+    };
+
+    const insertPickedAsset = async (payload: InsertAssetPayload) => {
+        if (payload.kind === "text") {
+            setPrompt(payload.content);
+        } else if (payload.kind === "image") {
+            const stored = await uploadImage(payload.dataUrl);
+            setReferences((value) => [...value, { id: nanoid(), name: payload.title, type: stored.mimeType, dataUrl: stored.url, storageKey: stored.storageKey }].slice(0, 7));
+        }
+        setAssetPickerOpen(false);
+    };
+
+    const createSession = () => {
+        setPrompt("");
+        setReferences([]);
+        setResults([]);
+        setElapsedMs(0);
+        setStartedAt(0);
+        setSelectedLogIds([]);
+        setPreviewLog(null);
+    };
+
+    const deleteSelectedLogs = () => {
+        const mediaKeys = logs
+            .filter((log) => selectedLogIds.includes(log.id))
+            .map((log) => log.video?.storageKey)
+            .filter((key): key is string => Boolean(key));
+        void Promise.all([deleteStoredMedia(mediaKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(refreshLogs);
+        if (previewLog && selectedLogIds.includes(previewLog.id)) {
+            setPreviewLog(null);
+            setResults([]);
+        }
+        setSelectedLogIds([]);
+        setDeleteConfirmOpen(false);
+    };
+
+    const saveLog = (log: GenerationLog) => {
+        void logStore.setItem(log.id, serializeLog(log)).then(refreshLogs);
+    };
+
+    const refreshLogs = async () => setLogs(await readStoredLogs());
+
+    const previewGenerationLog = (log: GenerationLog) => {
+        setPreviewLog(log);
+        setLogsOpen(false);
+        setPrompt(log.prompt);
+        setReferences(log.references || []);
+        if (log.config.videoModel || log.model) updateConfig("videoModel", log.config.videoModel || log.model);
+        if (log.config.size) updateConfig("size", log.config.size);
+        if (log.config.vquality) updateConfig("vquality", log.config.vquality);
+        if (log.config.videoSeconds) updateConfig("videoSeconds", log.config.videoSeconds);
+        setResults(log.video ? [{ id: log.video.id, status: "success", video: log.video }] : [{ id: log.id, status: "failed", error: log.error || "生成失败" }]);
+    };
+
+    return (
+        <div className="flex h-full flex-col overflow-hidden bg-stone-50 text-stone-900 dark:bg-stone-950 dark:text-stone-100">
+            <main className="grid min-h-0 flex-1 grid-cols-1 gap-3 overflow-y-auto p-3 lg:grid-cols-[300px_minmax(0,1fr)] lg:overflow-hidden xl:grid-cols-[320px_minmax(0,1fr)]">
+                <aside className="thin-scrollbar hidden min-h-0 overflow-y-auto rounded-lg border border-stone-200 bg-card p-4 shadow-sm dark:border-stone-800 lg:block">
+                    <LogPanel logs={logs} selectedLogIds={selectedLogIds} activeLogId={previewLog?.id} onSelectedLogIdsChange={setSelectedLogIds} onCreateSession={createSession} onDeleteSelected={() => setDeleteConfirmOpen(true)} onPreviewLog={previewGenerationLog} />
+                </aside>
+
+                <section className="grid gap-3 lg:min-h-0 lg:overflow-hidden xl:grid-cols-[420px_minmax(0,1fr)]">
+                    <div className="thin-scrollbar flex flex-col rounded-lg border border-stone-200 bg-card p-4 shadow-sm dark:border-stone-800 lg:min-h-0 lg:overflow-y-auto">
+                        <div className="flex items-start justify-between gap-3">
+                            <h1 className="text-2xl font-semibold text-stone-950 dark:text-stone-100">视频创作台</h1>
+                            <div className="flex shrink-0 gap-2 lg:hidden">
+                                <Button icon={<History className="size-4" />} onClick={() => setLogsOpen(true)}>
+                                    记录
+                                </Button>
+                                <Button icon={<SlidersHorizontal className="size-4" />} onClick={() => setSettingsOpen(true)}>
+                                    参数
+                                </Button>
+                            </div>
+                        </div>
+
+                        <div className="mt-6 space-y-5">
+                            <div>
+                                <div className="mb-2 flex items-center justify-between gap-3">
+                                    <span className="text-base font-semibold">提示词</span>
+                                    <div className="flex gap-2">
+                                        <Button size="small" icon={<BookOpen className="size-3.5" />} onClick={() => setPromptDialogOpen(true)}>
+                                            查看提示词库
+                                        </Button>
+                                        <Button size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => setAssetPickerOpen(true)}>
+                                            查看我的素材
+                                        </Button>
+                                    </div>
+                                </div>
+                                <Input.TextArea value={prompt} onChange={(event) => setPrompt(event.target.value)} rows={7} placeholder="描述镜头运动、主体动作、场景氛围和画面风格" />
+                            </div>
+
+                            <div className="min-w-0">
+                                <div className="mb-2 flex items-center justify-between gap-3">
+                                    <span className="text-base font-semibold">参考图</span>
+                                    <div className="flex gap-2">
+                                        <Button size="small" icon={<ClipboardPaste className="size-3.5" />} onClick={() => void addReferencesFromClipboard()}>
+                                            剪切板
+                                        </Button>
+                                        <Button size="small" icon={<Upload className="size-3.5" />} onClick={() => fileInputRef.current?.click()}>
+                                            上传
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="hover-scrollbar hover-scrollbar-hint flex min-h-24 w-full min-w-0 max-w-full gap-2 overflow-x-scroll overflow-y-hidden rounded-lg border border-dashed border-stone-300 p-2 pb-3 overscroll-x-contain dark:border-stone-700">
+                                    {references.map((item) => (
+                                        <div key={item.id} className="group relative size-20 shrink-0 overflow-hidden rounded-md border border-stone-200 dark:border-stone-800">
+                                            <img src={item.dataUrl} alt={item.name} className="size-full object-cover" />
+                                            <button type="button" className="absolute right-1 top-1 hidden size-6 items-center justify-center rounded bg-black/60 text-white group-hover:flex" onClick={() => setReferences((value) => value.filter((ref) => ref.id !== item.id))} aria-label="移除参考图">
+                                                <Trash2 className="size-3.5" />
+                                            </button>
+                                        </div>
+                                    ))}
+                                    {!references.length ? <div className="flex min-w-full items-center justify-center text-sm text-stone-500">暂无参考图，最多 7 张</div> : null}
+                                </div>
+                            </div>
+
+                            <div className="flex items-center justify-between rounded-lg border border-stone-200 bg-stone-50 px-3 py-2 text-sm dark:border-stone-800 dark:bg-stone-900 sm:hidden">
+                                <span className="truncate text-stone-500 dark:text-stone-400">
+                                    {model} · {normalizeResolution(effectiveConfig.vquality)}p · {videoSizeLabel(effectiveConfig.size)} · {normalizeVideoSeconds(effectiveConfig.videoSeconds)}s
+                                </span>
+                                <Button size="small" type="text" icon={<SlidersHorizontal className="size-4" />} onClick={() => setSettingsOpen(true)}>
+                                    调整
+                                </Button>
+                            </div>
+
+                            <div className="hidden gap-4 sm:grid sm:grid-cols-2">
+                                <GenerationSettings config={effectiveConfig} model={model} updateConfig={updateConfig} openConfigDialog={openConfigDialog} />
+                            </div>
+                        </div>
+
+                        <div className="mt-auto pt-6">
+                            <Button type="primary" size="large" block icon={<Sparkles className="size-4" />} loading={running} disabled={!canGenerate || running} onClick={() => void generate()}>
+                                开始生成
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div className="thin-scrollbar rounded-lg border border-stone-200 bg-card p-4 shadow-sm dark:border-stone-800 lg:min-h-0 lg:overflow-y-auto lg:p-5">
+                        <div className="mb-4 flex items-center justify-between gap-3">
+                            <h2 className="text-xl font-semibold">生成结果</h2>
+                            {running ? <Tag className="m-0 px-2 py-1">等待 {formatDuration(elapsedMs)}</Tag> : null}
+                        </div>
+                        {results.length ? (
+                            <div className="grid gap-4">
+                                {results.map((result) => (result.status === "success" && result.video ? <ResultVideoCard key={result.id} video={result.video} onDownload={downloadVideo} onSaveAsset={saveResultToAssets} /> : result.status === "failed" ? <FailedVideoCard key={result.id} error={result.error || "生成失败"} onRetry={retryResult} /> : <PendingVideoCard key={result.id} />))}
+                            </div>
+                        ) : (
+                            <div className="flex min-h-[320px] flex-col items-center justify-center rounded-lg border border-dashed border-stone-300 text-center dark:border-stone-700 lg:min-h-[560px]">
+                                <VideoIcon className="mb-4 size-11 text-stone-400" />
+                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有生成视频" />
+                            </div>
+                        )}
+                    </div>
+                </section>
+            </main>
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                multiple
+                className="hidden"
+                onChange={(event) => {
+                    void addReferences(event.target.files);
+                    event.target.value = "";
+                }}
+            />
+            <Drawer title="生成记录" placement="bottom" size="large" open={logsOpen} onClose={() => setLogsOpen(false)}>
+                <LogPanel logs={logs} selectedLogIds={selectedLogIds} activeLogId={previewLog?.id} onSelectedLogIdsChange={setSelectedLogIds} onCreateSession={createSession} onDeleteSelected={() => setDeleteConfirmOpen(true)} onPreviewLog={previewGenerationLog} />
+            </Drawer>
+            <Drawer title="参数" placement="bottom" height="82vh" open={settingsOpen} onClose={() => setSettingsOpen(false)}>
+                <div className="grid grid-cols-2 gap-3 pb-4">
+                    <GenerationSettings config={effectiveConfig} model={model} updateConfig={updateConfig} openConfigDialog={openConfigDialog} />
+                </div>
+            </Drawer>
+            <PromptSelectDialog open={promptDialogOpen} onOpenChange={setPromptDialogOpen} onSelect={setPrompt} />
+            <AssetPickerModal open={assetPickerOpen} defaultTab="my-assets" onInsert={(payload) => void insertPickedAsset(payload)} onClose={() => setAssetPickerOpen(false)} />
+            <Modal title="删除生成记录" open={deleteConfirmOpen} onCancel={() => setDeleteConfirmOpen(false)} onOk={deleteSelectedLogs} okText="删除" okButtonProps={{ danger: true }} cancelText="取消">
+                确定删除选中的 {selectedLogIds.length} 条生成记录吗？
+            </Modal>
+        </div>
+    );
+}
+
+function GenerationSettings({ config, model, updateConfig, openConfigDialog }: { config: AiConfig; model: string; updateConfig: UpdateAiConfig; openConfigDialog: (shouldPromptContinue?: boolean) => void }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+
+    return (
+        <>
+            <label className="col-span-2 block min-w-0 sm:col-span-1">
+                <span className="mb-1.5 block text-sm font-semibold sm:mb-2 sm:text-base">模型</span>
+                <ModelPicker config={config} value={model} onChange={(value) => updateConfig("videoModel", value)} fullWidth onMissingConfig={() => openConfigDialog(false)} />
+            </label>
+            <div className="col-span-2">
+                <VideoSettingsPanel config={config} onConfigChange={(key, value) => updateConfig(key, value)} theme={theme} showTitle={false} className="space-y-4" />
+            </div>
+        </>
+    );
+}
+
+function ResultVideoCard({ video, onDownload, onSaveAsset }: { video: GeneratedVideo; onDownload: (video: GeneratedVideo) => void; onSaveAsset: (video: GeneratedVideo) => void }) {
+    return (
+        <div className="overflow-hidden rounded-lg border border-stone-200 bg-background dark:border-stone-800">
+            <video src={video.url} controls className="aspect-video w-full bg-black object-contain" />
+            <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-stone-200 px-3 py-2.5 dark:border-stone-800">
+                <div className="flex min-w-0 flex-wrap gap-x-2 gap-y-1 text-xs text-stone-500 dark:text-stone-400">
+                    <span>
+                        {video.width}x{video.height}
+                    </span>
+                    <span>{formatBytes(video.bytes)}</span>
+                    <span>{formatDuration(video.durationMs)}</span>
+                </div>
+                <div className="flex shrink-0 gap-1">
+                    <Button size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => onSaveAsset(video)}>
+                        添加到素材
+                    </Button>
+                    <Button size="small" icon={<Download className="size-3.5" />} onClick={() => onDownload(video)}>
+                        下载
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function PendingVideoCard() {
+    return (
+        <div className="relative aspect-video overflow-hidden rounded-lg border border-dashed border-stone-300 bg-stone-50 dark:border-stone-700 dark:bg-stone-900">
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-sm text-stone-500 dark:text-stone-400">
+                <LoaderCircle className="size-6 animate-spin" />
+                <span>生成中</span>
+            </div>
+        </div>
+    );
+}
+
+function FailedVideoCard({ error, onRetry }: { error: string; onRetry: () => void }) {
+    return (
+        <div className="overflow-hidden rounded-lg border border-red-200 bg-red-50 dark:border-red-950 dark:bg-red-950/20">
+            <div className="flex aspect-video flex-col items-center justify-center gap-3 p-5 text-center">
+                <div className="text-sm font-medium text-red-600 dark:text-red-300">生成失败</div>
+                <Typography.Paragraph ellipsis={{ rows: 4 }} className="!mb-0 !text-xs !text-red-500 dark:!text-red-300">
+                    {error}
+                </Typography.Paragraph>
+            </div>
+            <div className="flex justify-end border-t border-red-200 p-3 dark:border-red-950">
+                <Button size="small" danger onClick={onRetry}>
+                    重试
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+function LogPanel({
+    logs,
+    selectedLogIds,
+    activeLogId,
+    onSelectedLogIdsChange,
+    onCreateSession,
+    onDeleteSelected,
+    onPreviewLog,
+}: {
+    logs: GenerationLog[];
+    selectedLogIds: string[];
+    activeLogId?: string;
+    onSelectedLogIdsChange: (ids: string[]) => void;
+    onCreateSession: () => void;
+    onDeleteSelected: () => void;
+    onPreviewLog: (log: GenerationLog) => void;
+}) {
+    const allSelected = Boolean(logs.length) && selectedLogIds.length === logs.length;
+    const toggleAll = () => onSelectedLogIdsChange(allSelected ? [] : logs.map((log) => log.id));
+
+    return (
+        <>
+            <div className="mb-3 flex items-center justify-between gap-3">
+                <h2 className="text-base font-semibold">生成记录</h2>
+                <Tag className="m-0">{logs.length}</Tag>
+            </div>
+            <div className="mb-4 flex flex-wrap gap-2">
+                <Button size="small" icon={<Plus className="size-3.5" />} onClick={onCreateSession}>
+                    新建
+                </Button>
+                <Button size="small" icon={<CheckSquare className="size-3.5" />} disabled={!logs.length} onClick={toggleAll}>
+                    {allSelected ? "取消" : "全选"}
+                </Button>
+                <Button size="small" danger icon={<Trash2 className="size-3.5" />} disabled={!selectedLogIds.length} onClick={onDeleteSelected}>
+                    删除
+                </Button>
+            </div>
+            <div className="space-y-3">
+                {logs.map((log) => (
+                    <LogCard key={log.id} log={log} selected={selectedLogIds.includes(log.id)} active={activeLogId === log.id} onSelectedChange={(checked) => onSelectedLogIdsChange(checked ? [...selectedLogIds, log.id] : selectedLogIds.filter((id) => id !== log.id))} onClick={() => onPreviewLog(log)} />
+                ))}
+                {!logs.length ? <div className="flex min-h-48 items-center justify-center rounded-lg border border-dashed border-stone-300 text-center text-sm text-stone-500 dark:border-stone-700">暂无生成记录</div> : null}
+            </div>
+        </>
+    );
+}
+
+function LogCard({ log, selected, active, onSelectedChange, onClick }: { log: GenerationLog; selected: boolean; active: boolean; onSelectedChange: (checked: boolean) => void; onClick: () => void }) {
+    return (
+        <button type="button" className={`block w-full rounded-lg border p-2 text-left transition ${active ? "border-stone-900 bg-blue-50 dark:border-stone-100 dark:bg-blue-950/20" : "border-stone-200 bg-background hover:bg-stone-50 dark:border-stone-800 dark:hover:bg-stone-900"}`} onClick={onClick}>
+            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-2">
+                <Checkbox className="mt-0.5" checked={selected} onClick={(event) => event.stopPropagation()} onChange={(event) => onSelectedChange(event.target.checked)} />
+                <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold leading-5">{log.title}</div>
+                    <div className="mt-2 flex flex-wrap gap-1">
+                        <Tag className="m-0 flex h-6 items-center rounded-md px-1.5 text-xs leading-none">{log.size}</Tag>
+                        <Tag className="m-0 flex h-6 items-center rounded-md px-1.5 text-xs leading-none">{log.resolution}p</Tag>
+                        <Tag className="m-0 flex h-6 items-center rounded-md px-1.5 text-xs leading-none">{log.seconds}s</Tag>
+                    </div>
+                </div>
+                <div className="grid justify-items-end gap-2">
+                    <Tag className="m-0 flex h-6 items-center rounded-md px-1.5 text-xs leading-none" color={log.status === "成功" ? "blue" : "red"}>
+                        {log.status}
+                    </Tag>
+                    <Tag className="m-0 flex h-6 items-center rounded-md px-1.5 text-xs leading-none" color="green">
+                        {formatDuration(log.durationMs)}
+                    </Tag>
+                </div>
+            </div>
+        </button>
+    );
+}
+
+async function readStoredLogs() {
+    if (typeof window === "undefined") return [];
+    try {
+        const logs: GenerationLog[] = [];
+        await logStore.iterate<GenerationLog, void>((value) => {
+            logs.push(value);
+        });
+        return (await Promise.all(logs.map(normalizeLog))).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+    } catch {
+        return [];
+    }
+}
+
+async function normalizeLog(log: Partial<GenerationLog>): Promise<GenerationLog> {
+    const video = log.video?.storageKey ? { ...log.video, url: await resolveMediaUrl(log.video.storageKey, log.video.url) } : log.video;
+    const references = await Promise.all(
+        (log.references || []).map(async (item) => ({
+            ...item,
+            dataUrl: await resolveImageUrl(item.storageKey, item.dataUrl),
+        })),
+    );
+    const config = normalizeLogConfig(log);
+    return {
+        id: log.id || nanoid(),
+        createdAt: log.createdAt || Date.now(),
+        title: log.title || log.model || "未命名",
+        prompt: log.prompt || "",
+        time: log.time || new Date().toLocaleString("zh-CN", { hour12: false }),
+        model: log.model || config.videoModel || "",
+        config,
+        references,
+        durationMs: log.durationMs || 0,
+        size: log.size || config.size || "",
+        resolution: normalizeResolution(log.resolution || config.vquality || ""),
+        seconds: log.seconds || config.videoSeconds || "",
+        status: log.status || "成功",
+        video,
+        error: log.error,
+    };
+}
+
+function serializeLog(log: GenerationLog): GenerationLog {
+    return {
+        ...log,
+        references: log.references.map((item) => ({ ...item, dataUrl: item.storageKey ? "" : item.dataUrl })),
+        video: log.video?.storageKey ? { ...log.video, url: "" } : log.video,
+    };
+}
+
+function normalizeLogConfig(log: Partial<GenerationLog>): GenerationLogConfig {
+    return {
+        model: log.config?.model || log.model || "",
+        videoModel: log.config?.videoModel || log.model || "",
+        size: log.config?.size || log.size || "",
+        vquality: normalizeResolution(log.config?.vquality || log.resolution || ""),
+        videoSeconds: log.config?.videoSeconds || log.seconds || "",
+    };
+}
+
+function buildLog({ prompt, model, config, references, durationMs, status, video, error }: { prompt: string; model: string; config: AiConfig; references: ReferenceImage[]; durationMs: number; status: GenerationLog["status"]; video?: GeneratedVideo; error?: string }): GenerationLog {
+    const logConfig = {
+        model: config.model,
+        videoModel: config.videoModel,
+        size: config.size,
+        vquality: normalizeResolution(config.vquality),
+        videoSeconds: config.videoSeconds,
+    };
+    return {
+        id: nanoid(),
+        createdAt: Date.now(),
+        title: prompt.slice(0, 12) || "未命名",
+        prompt,
+        time: new Date().toLocaleString("zh-CN", { hour12: false }),
+        model,
+        config: logConfig,
+        references,
+        durationMs,
+        size: logConfig.size,
+        resolution: logConfig.vquality,
+        seconds: logConfig.videoSeconds,
+        status,
+        video,
+        error,
+    };
+}
+
+function buildVideoConfig(config: AiConfig, model: string): AiConfig {
+    return {
+        ...config,
+        model,
+        videoModel: model,
+        size: normalizeVideoSize(config.size),
+        videoSeconds: normalizeVideoSeconds(config.videoSeconds),
+        vquality: normalizeResolution(config.vquality),
+    };
+}
+
+function normalizeVideoSeconds(value: string) {
+    const seconds = Math.floor(Number(value) || 6);
+    return String(Math.max(1, Math.min(20, seconds)));
+}
+
+function normalizeVideoSize(value: string) {
+    return normalizeVideoSizeValue(value);
+}
+
+function normalizeResolution(value: string) {
+    return normalizeVideoResolutionValue(value);
+}

web/src/app/api/[...path]/route.ts

@@ -12,6 +12,8 @@ function proxyHeaders(request: NextRequest) {
     headers.delete("host");
     headers.delete("content-length");
     headers.delete("connection");
+    headers.set("x-forwarded-host", request.nextUrl.host);
+    headers.set("x-forwarded-proto", request.nextUrl.protocol.replace(":", ""));
     return headers;
 }
 
@@ -35,6 +37,7 @@ async function proxy(request: NextRequest, context: RouteContext) {
             headers: proxyHeaders(request),
             body: hasBody ? request.body : undefined,
             duplex: hasBody ? "half" : undefined,
+            redirect: "manual",
         } as RequestInit & { duplex?: "half" });
 
         return new Response(response.body, {

web/src/app/globals.css

@@ -405,6 +405,11 @@
         padding: 18px;
     }
 
+    .canvas-image-settings-popover .ant-popover-inner-content {
+        max-height: calc(100vh - 96px);
+        overflow-y: auto;
+    }
+
     .canvas-image-settings-popover .ant-segmented {
         border-radius: 999px;
         padding: 3px;

web/src/components/image-settings-panel.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { ConfigProvider } from "antd";
+
+import { type CanvasTheme } from "@/lib/canvas-theme";
+import type { AiConfig } from "@/stores/use-config-store";
+
+const qualityOptions = [
+    { value: "auto", label: "自动" },
+    { value: "high", label: "高" },
+    { value: "medium", label: "中" },
+    { value: "low", label: "低" },
+];
+
+const aspectOptions = [
+    { value: "1:1", label: "1:1", width: 1024, height: 1024, icon: "square" },
+    { value: "3:2", label: "3:2", width: 1536, height: 1024, icon: "landscape" },
+    { value: "2:3", label: "2:3", width: 1024, height: 1536, icon: "portrait" },
+    { value: "4:3", label: "4:3", width: 1344, height: 1024, icon: "landscape" },
+    { value: "3:4", label: "3:4", width: 1024, height: 1344, icon: "portrait" },
+    { value: "9:16", label: "9:16", width: 1024, height: 1792, icon: "portrait" },
+    { value: "1:1-2k", label: "1:1(2k)", size: "2048x2048", width: 2048, height: 2048, icon: "square" },
+    { value: "16:9-2k", label: "16:9(2k)", size: "2048x1152", width: 2048, height: 1152, icon: "landscape" },
+    { value: "9:16-2k", label: "9:16(2k)", size: "1152x2048", width: 1152, height: 2048, icon: "portrait" },
+    { value: "16:9-4k", label: "16:9(4k)", size: "3840x2160", width: 3840, height: 2160, icon: "landscape" },
+    { value: "9:16-4k", label: "9:16(4k)", size: "2160x3840", width: 2160, height: 3840, icon: "portrait" },
+    { value: "auto", label: "auto", width: 0, height: 0, icon: "auto" },
+];
+
+type ImageSettingsPanelProps = {
+    config: AiConfig;
+    onConfigChange: (key: "quality" | "size" | "count", value: string) => void;
+    theme: CanvasTheme;
+    showTitle?: boolean;
+    className?: string;
+    maxCount?: number;
+    quickCount?: number;
+};
+
+export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle = true, className = "w-[320px] space-y-4 rounded-2xl px-1 py-0.5", maxCount = 15, quickCount = 10 }: ImageSettingsPanelProps) {
+    const quality = config.quality || "auto";
+    const count = Math.max(1, Math.min(maxCount, Math.floor(Math.abs(Number(config.count)) || 1)));
+    const activeSize = config.size || "auto";
+    const selectedAspect = aspectOptions.find((item) => (item.size || item.value) === activeSize || item.value === activeSize);
+    const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
+    const selectAspect = (value: string) => {
+        const option = aspectOptions.find((item) => item.value === value);
+        onConfigChange("size", option?.size || option?.value || "auto");
+    };
+    const updateDimension = (key: "width" | "height", value: number | null) => {
+        const next = Math.max(1, Math.floor(value || dimensions[key] || 1024));
+        onConfigChange("size", `${key === "width" ? next : dimensions.width}x${key === "height" ? next : dimensions.height}`);
+    };
+
+    return (
+        <ImageSettingsTheme theme={theme}>
+            <div className={className} style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
+                {showTitle ? <div className="text-lg font-semibold">图像设置</div> : null}
+                <div className="space-y-2.5">
+                    <SettingTitle color={theme.node.muted}>质量</SettingTitle>
+                    <div className="grid grid-cols-4 gap-2.5">
+                        {qualityOptions.map((item) => (
+                            <OptionPill key={item.value} selected={quality === item.value} theme={theme} onClick={() => onConfigChange("quality", item.value)}>
+                                {item.label}
+                            </OptionPill>
+                        ))}
+                    </div>
+                </div>
+                <div className="space-y-2.5">
+                    <SettingTitle color={theme.node.muted}>尺寸</SettingTitle>
+                    <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2.5">
+                        <DimensionInput prefix="W" value={dimensions.width} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("width", value)} />
+                        <span className="text-lg opacity-45">↔</span>
+                        <DimensionInput prefix="H" value={dimensions.height} disabled={activeSize === "auto"} theme={theme} onChange={(value) => updateDimension("height", value)} />
+                    </div>
+                </div>
+                <div className="space-y-2.5">
+                    <SettingTitle color={theme.node.muted}>宽高比</SettingTitle>
+                    <div className="grid grid-cols-4 gap-2.5">
+                        {aspectOptions.map((item) => (
+                            <button
+                                key={item.value}
+                                type="button"
+                                className="flex h-[72px] cursor-pointer flex-col items-center justify-center gap-1.5 rounded-xl border bg-transparent text-sm transition hover:opacity-80"
+                                style={{ borderColor: selectedAspect?.value === item.value ? theme.node.text : theme.node.stroke, background: "transparent", color: theme.node.text }}
+                                onMouseDown={(event) => event.stopPropagation()}
+                                onClick={() => selectAspect(item.value)}
+                            >
+                                <AspectIcon type={item.icon} width={item.width} height={item.height} color={theme.node.text} />
+                                <span>{item.label}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="space-y-2.5">
+                    <SettingTitle color={theme.node.muted}>生成张数</SettingTitle>
+                    <div className="grid grid-cols-4 gap-2.5">
+                        {Array.from({ length: quickCount }, (_, index) => index + 1).map((value) => (
+                            <OptionPill key={value} selected={count === value} theme={theme} onClick={() => onConfigChange("count", String(value))}>
+                                {value} 张
+                            </OptionPill>
+                        ))}
+                        <CountInput value={count} max={maxCount} theme={theme} onChange={(value) => onConfigChange("count", String(value || 1))} />
+                    </div>
+                </div>
+            </div>
+        </ImageSettingsTheme>
+    );
+}
+
+export function ImageSettingsTheme({ theme, children }: { theme: CanvasTheme; children: ReactNode }) {
+    return (
+        <ConfigProvider
+            theme={{
+                token: { colorBgContainer: theme.toolbar.panel, colorBgElevated: theme.toolbar.panel, colorBorder: theme.node.stroke, colorPrimary: theme.node.activeStroke, colorText: theme.node.text, colorTextLightSolid: theme.node.panel },
+                components: { Button: { defaultBg: theme.toolbar.panel, defaultBorderColor: theme.node.stroke, defaultColor: theme.node.text } },
+            }}
+        >
+            {children}
+        </ConfigProvider>
+    );
+}
+
+export function imageQualityLabel(value: string) {
+    return ({ auto: "自动", high: "高", medium: "中", low: "低" } as Record<string, string>)[value] || value;
+}
+
+export function imageSizeLabel(size: string) {
+    return aspectOptions.find((item) => (item.size || item.value) === size || item.value === size)?.label || size;
+}
+
+function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: CanvasTheme; onClick: () => void; children: ReactNode }) {
+    return (
+        <button
+            type="button"
+            className="h-9 cursor-pointer rounded-full border px-2 text-sm transition hover:opacity-80"
+            style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}
+
+function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix: string; value: number; disabled: boolean; theme: CanvasTheme; onChange: (value: number | null) => void }) {
+    return (
+        <label className="flex h-9 overflow-hidden rounded-xl text-sm" style={{ background: theme.node.fill, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
+            <span className="grid w-9 place-items-center" style={{ color: theme.node.muted }}>
+                {prefix}
+            </span>
+            <input
+                type="number"
+                min={1}
+                disabled={disabled}
+                className="min-w-0 flex-1 bg-transparent px-2 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                value={value || ""}
+                onChange={(event) => onChange(Number(event.target.value) || null)}
+                onMouseDown={(event) => event.stopPropagation()}
+            />
+        </label>
+    );
+}
+
+function CountInput({ value, max, theme, onChange }: { value: number; max: number; theme: CanvasTheme; onChange: (value: number | null) => void }) {
+    return (
+        <label className="col-span-2 flex h-9 overflow-hidden rounded-full border text-sm" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
+            <input
+                type="number"
+                min={1}
+                max={max}
+                className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                style={{ color: theme.node.text, WebkitTextFillColor: theme.node.text }}
+                value={value || ""}
+                onChange={(event) => onChange(Number(event.target.value) || null)}
+                onMouseDown={(event) => event.stopPropagation()}
+            />
+        </label>
+    );
+}
+
+function AspectIcon({ type, width, height, color }: { type: string; width: number; height: number; color: string }) {
+    if (type === "auto") return null;
+    const ratio = width / Math.max(1, height);
+    const boxWidth = ratio >= 1 ? 24 : Math.max(10, 24 * ratio);
+    const boxHeight = ratio >= 1 ? Math.max(10, 24 / ratio) : 24;
+    return (
+        <span className="grid h-7 w-9 place-items-center">
+            <span className="border-2" style={{ width: boxWidth, height: boxHeight, borderColor: color }} />
+        </span>
+    );
+}
+
+function SettingTitle({ children, color }: { children: string; color: string }) {
+    return (
+        <div className="text-xs font-medium" style={{ color }}>
+            {children}
+        </div>
+    );
+}
+
+function readSizeDimensions(size: string, fallback: { width: number; height: number }) {
+    const match = size?.match(/^(\d+)x(\d+)$/);
+    return {
+        width: match ? Number(match[1]) : fallback.width,
+        height: match ? Number(match[2]) : fallback.height,
+    };
+}

web/src/components/layout/app-config-modal.tsx

@@ -26,7 +26,7 @@ export function AppConfigModal() {
     const finishConfig = () => {
         setConfigDialogOpen(false);
         if (effectiveMode === "local" && (!config.baseUrl.trim() || !config.apiKey.trim())) return;
-        if (!modelConfig.imageModel.trim() || !modelConfig.textModel.trim()) return;
+        if (!modelConfig.imageModel.trim() || !modelConfig.videoModel.trim() || !modelConfig.textModel.trim()) return;
         if (!allowCustomChannel && config.channelMode !== "remote") updateConfig("channelMode", "remote");
         message.success(shouldPromptContinue ? "配置已保存，请继续刚才的请求" : "配置已保存");
         clearPromptContinue();
@@ -43,6 +43,7 @@ export function AppConfigModal() {
             const models = await fetchImageModels(config);
             updateConfig("models", models);
             if (models.length && !models.includes(config.imageModel)) updateConfig("imageModel", models[0]);
+            if (models.length && !models.includes(config.videoModel)) updateConfig("videoModel", models[0]);
             if (models.length && !models.includes(config.textModel)) updateConfig("textModel", models[0]);
             message.success("模型列表已更新");
         } catch (error) {
@@ -112,10 +113,13 @@ export function AppConfigModal() {
                             <div className="mt-1">由系统后台渠道转发请求，当前可用 {modelChannel?.availableModels.length || 0} 个模型。</div>
                         </div>
                     )}
-                    <div className="grid gap-4 md:grid-cols-2">
+                    <div className="grid gap-4 md:grid-cols-3">
                         <Form.Item label="默认生图模型" className="mb-4">
                             <ModelPicker config={modelConfig} value={modelConfig.imageModel} onChange={(model) => updateConfig("imageModel", model)} fullWidth />
                         </Form.Item>
+                        <Form.Item label="默认视频模型" className="mb-4">
+                            <ModelPicker config={modelConfig} value={modelConfig.videoModel} onChange={(model) => updateConfig("videoModel", model)} fullWidth />
+                        </Form.Item>
                         <Form.Item label="默认文本模型" className="mb-4">
                             <ModelPicker config={modelConfig} value={modelConfig.textModel} onChange={(model) => updateConfig("textModel", model)} fullWidth />
                         </Form.Item>

web/src/components/layout/user-status-actions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { CSSProperties, RefObject } from "react";
-import { Dropdown } from "antd";
+import { Avatar, Dropdown, Tooltip } from "antd";
 import { Keyboard, LogOut, Settings2, Shield } from "lucide-react";
 import type { ItemType } from "antd/es/menu/interface";
 import Link from "next/link";
@@ -9,6 +9,7 @@ import Link from "next/link";
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { GitHubLink } from "@/components/layout/github-link";
 import { VersionReleaseModal } from "@/components/layout/version-release-modal";
+import { CreditSymbol } from "@/constant/credits";
 import { cn } from "@/lib/utils";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useConfigStore } from "@/stores/use-config-store";
@@ -32,14 +33,16 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
     const logout = useUserStore((state) => state.clearSession);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
     const canvasTheme = canvasThemes[theme];
-    const userName = user?.username || "用户";
+    const userName = user?.displayName || user?.username || "";
+    const credits = user?.credits ?? 0;
+    const avatarUrl = user?.avatarUrl?.trim();
     const avatarText = (userName.trim()[0] || "U").toUpperCase();
     const naturalIconClass = "inline-flex size-8 shrink-0 items-center justify-center text-stone-600 transition hover:text-stone-950 dark:text-stone-300 dark:hover:text-white [&_svg]:size-4";
     const iconStyle: CSSProperties | undefined = variant === "canvas" ? { color: canvasTheme.node.text } : undefined;
     const versionStyle = iconStyle;
     const gitHubClassName = variant === "canvas" ? "size-11 text-base" : undefined;
     const gitHubStyle = iconStyle;
-    const avatarStyle: CSSProperties | undefined = variant === "canvas" ? { borderColor: canvasTheme.toolbar.border, color: canvasTheme.node.text } : undefined;
+    const avatarStyle: CSSProperties | undefined = variant === "canvas" ? { borderColor: canvasTheme.toolbar.border, color: canvasTheme.node.text, background: "transparent" } : undefined;
     const menuItems: ItemType[] = [
         { key: "user", disabled: true, label: <span className="font-medium text-current">{userName}</span> },
         ...(user?.role === "admin" ? [{ key: "admin", icon: <Shield className="size-4" />, label: <Link href="/admin">管理后台</Link> }] : []),
@@ -58,18 +61,41 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
             <AnimatedThemeToggler theme={theme} onThemeChange={setTheme} className={naturalIconClass} style={iconStyle} aria-label={theme === "dark" ? "切换到浅色主题" : "切换到深色主题"} title={theme === "dark" ? "切换到浅色主题" : "切换到深色主题"} />
             <VersionReleaseModal style={versionStyle} />
             <GitHubLink className={cn("bg-transparent hover:bg-transparent dark:hover:bg-transparent", gitHubClassName)} style={gitHubStyle} />
-            <div ref={accountRef}>
+            {variant === "canvas" && user ? (
-                <Dropdown open={accountOpen} onOpenChange={onAccountOpenChange} trigger={["click"]} placement="bottomRight" getPopupContainer={getPopupContainer} styles={{ root: { minWidth: 150 } }} menu={{ items: menuItems }}>
+                <Tooltip title="当前算力点余额" placement="bottom">
-                    <button
+                    <div className="flex h-8 shrink-0 items-center gap-1.5 px-1.5 text-xs font-medium tabular-nums opacity-75 transition hover:opacity-100" style={{ color: canvasTheme.node.text }}>
-                        type="button"
+                        <CreditSymbol className="text-sm leading-none" />
-                        className="inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-stone-300 bg-transparent p-0 text-xs font-semibold leading-none text-stone-800 transition hover:border-stone-500 hover:text-stone-950 dark:border-stone-700 dark:text-stone-100 dark:hover:border-stone-400 dark:hover:text-white"
+                        <span>{credits.toLocaleString()}</span>
-                        style={avatarStyle}
+                    </div>
-                        aria-label="账户菜单"
+                </Tooltip>
-                    >
+            ) : null}
-                        <span className="leading-none">{avatarText}</span>
+            {!user && onOpenShortcuts ? (
-                    </button>
+                <button type="button" className={naturalIconClass} style={iconStyle} onClick={onOpenShortcuts} aria-label="快捷键" title="快捷键">
-                </Dropdown>
+                    <Keyboard className="size-4" />
-            </div>
+                </button>
+            ) : null}
+            {!user ? (
+                <Link href="/login" className="px-1.5 text-sm font-medium text-stone-600 underline-offset-4 transition hover:text-stone-950 hover:underline dark:text-stone-300 dark:hover:text-stone-100" style={iconStyle}>
+                    登录
+                </Link>
+            ) : null}
+            {user ? (
+                <div ref={accountRef}>
+                    <Dropdown open={accountOpen} onOpenChange={onAccountOpenChange} trigger={["click"]} placement="bottomRight" getPopupContainer={getPopupContainer} styles={{ root: { minWidth: 150 } }} menu={{ items: menuItems }}>
+                        <button type="button" className="flex size-8 shrink-0 items-center justify-center rounded-full bg-transparent p-0 text-[0] leading-[0] transition" aria-label="账户菜单">
+                            <Avatar
+                                size={28}
+                                src={avatarUrl ? <img src={avatarUrl} alt={userName} referrerPolicy="no-referrer" /> : undefined}
+                                alt={userName}
+                                className="!flex !items-center !justify-center border border-stone-300 bg-transparent text-xs font-semibold text-stone-800 transition hover:border-stone-500 hover:text-stone-950 dark:border-stone-700 dark:text-stone-100 dark:hover:border-stone-400 dark:hover:text-white"
+                                style={avatarStyle}
+                            >
+                                {avatarText}
+                            </Avatar>
+                        </button>
+                    </Dropdown>
+                </div>
+            ) : null}
         </div>
     );
 }

web/src/components/model-picker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { Cpu } from "lucide-react";
 
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
@@ -18,19 +18,29 @@ type ModelPickerProps = {
 };
 
 export function ModelPicker({ config, value, onChange, className, fullWidth = false, placeholder = "选择模型", onMissingConfig }: ModelPickerProps) {
+    const pickerId = useId();
     const [open, setOpen] = useState(false);
-    const options = useMemo(() => Array.from(new Set([value, ...config.models].filter(Boolean))), [config.models, value]);
+    const options = useMemo(() => Array.from(new Set([...(config.channelMode === "local" ? [value] : []), ...config.models].filter(Boolean))), [config.channelMode, config.models, value]);
     const current = value || "";
 
+    useEffect(() => {
+        const closeOtherPicker = (event: Event) => {
+            if ((event as CustomEvent<string>).detail !== pickerId) setOpen(false);
+        };
+        window.addEventListener("model-picker-open", closeOtherPicker);
+        return () => window.removeEventListener("model-picker-open", closeOtherPicker);
+    }, [pickerId]);
+
     return (
         <Select
             open={open}
             value={current}
             onOpenChange={(nextOpen) => {
-                if (nextOpen && !options.length) {
+                if (nextOpen && !options.length && config.channelMode === "local") {
                     onMissingConfig?.();
                     return;
                 }
+                if (nextOpen) window.dispatchEvent(new CustomEvent("model-picker-open", { detail: pickerId }));
                 setOpen(nextOpen);
             }}
             onValueChange={onChange}
@@ -51,9 +61,11 @@ export function ModelPicker({ config, value, onChange, className, fullWidth = fa
             </SelectTrigger>
             <SelectContent
                 data-canvas-no-zoom
-                className="z-50 w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl"
+                className="z-[1200] w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl"
                 position="popper"
                 align="start"
+                side="bottom"
+                sideOffset={6}
                 onPointerDown={(event) => event.stopPropagation()}
                 onMouseDown={(event) => event.stopPropagation()}
             >
@@ -65,7 +77,7 @@ export function ModelPicker({ config, value, onChange, className, fullWidth = fa
                     ))
                 ) : (
                     <SelectItem value="__empty__" disabled>
-                        请先到配置里拉取模型列表
+                        {config.channelMode === "remote" ? "暂无可用模型" : "请先到配置里拉取模型列表"}
                     </SelectItem>
                 )}
             </SelectContent>
@@ -92,5 +104,8 @@ function resolveModelIcon(model: string) {
     if (name.includes("claude") || name.includes("anthropic")) return "/icons/claude.svg";
     if (name.includes("gemini") || name.includes("google")) return "/icons/gemini.svg";
     if (name.includes("gpt") || name.includes("openai")) return "/icons/openai.svg";
+    if (name.includes("grok") || name.includes("grok")) return "/icons/grok.svg";
+    if (name.includes("deepseek") || name.includes("deepseek")) return "/icons/deepseek.svg";
+    if (name.includes("glm") || name.includes("glm")) return "/icons/glm.svg";
     return "";
 }

web/src/components/ui/select.tsx

@@ -73,7 +73,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-[min(var(--radix-select-content-available-height),18rem)] min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
         align={align}
         {...props}

web/src/components/video-settings-panel.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import { ImageSettingsTheme } from "@/components/image-settings-panel";
+import { type CanvasTheme } from "@/lib/canvas-theme";
+import type { AiConfig } from "@/stores/use-config-store";
+
+const resolutionOptions = [
+    { value: "720", label: "720p" },
+    { value: "480", label: "480p" },
+];
+
+const sizeOptions = [
+    { value: "1280x720", label: "横屏", width: 1280, height: 720 },
+    { value: "720x1280", label: "竖屏", width: 720, height: 1280 },
+    { value: "1024x1024", label: "方形", width: 1024, height: 1024 },
+    { value: "1792x1024", label: "宽屏", width: 1792, height: 1024 },
+    { value: "1024x1792", label: "长图", width: 1024, height: 1792 },
+    { value: "auto", label: "auto", width: 0, height: 0 },
+];
+
+const secondOptions = [6, 10, 12, 16, 20];
+
+type VideoSettingsPanelProps = {
+    config: AiConfig;
+    onConfigChange: (key: "vquality" | "size" | "videoSeconds", value: string) => void;
+    theme: CanvasTheme;
+    showTitle?: boolean;
+    className?: string;
+};
+
+export function VideoSettingsPanel({ config, onConfigChange, theme, showTitle = true, className = "w-[320px] space-y-4 rounded-2xl px-1 py-0.5" }: VideoSettingsPanelProps) {
+    const seconds = config.videoSeconds || "6";
+    const size = normalizeVideoSizeValue(config.size);
+    const dimensions = readSizeDimensions(size);
+    const resolution = normalizeVideoResolutionValue(config.vquality);
+    const updateDimension = (key: "width" | "height", value: number | null) => {
+        const next = Math.max(1, Math.floor(value || dimensions[key] || 720));
+        onConfigChange("size", `${key === "width" ? next : dimensions.width}x${key === "height" ? next : dimensions.height}`);
+    };
+
+    return (
+        <ImageSettingsTheme theme={theme}>
+            <div className={className} style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
+                {showTitle ? <div className="text-lg font-semibold">视频设置</div> : null}
+                <SettingGroup title="清晰度" color={theme.node.muted}>
+                    <div className="grid grid-cols-3 gap-2.5">
+                        {resolutionOptions.map((item) => (
+                            <OptionPill key={item.value} selected={resolution === item.value} theme={theme} onClick={() => onConfigChange("vquality", item.value)}>
+                                {item.label}
+                            </OptionPill>
+                        ))}
+                        <ResolutionInput value={resolution} theme={theme} onChange={(value) => onConfigChange("vquality", value)} />
+                    </div>
+                </SettingGroup>
+                <SettingGroup title="尺寸" color={theme.node.muted}>
+                    <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2.5">
+                        <DimensionInput prefix="W" value={dimensions.width} disabled={size === "auto"} theme={theme} onChange={(value) => updateDimension("width", value)} />
+                        <span className="text-lg opacity-45">↔</span>
+                        <DimensionInput prefix="H" value={dimensions.height} disabled={size === "auto"} theme={theme} onChange={(value) => updateDimension("height", value)} />
+                    </div>
+                    <div className="grid grid-cols-3 gap-2.5">
+                        {sizeOptions.map((item) => (
+                            <button
+                                key={item.value}
+                                type="button"
+                                className="flex h-[78px] cursor-pointer flex-col items-center justify-center gap-1 rounded-xl border bg-transparent text-sm transition hover:opacity-80"
+                                style={{ borderColor: size === item.value ? theme.node.text : theme.node.stroke, color: theme.node.text }}
+                                onMouseDown={(event) => event.stopPropagation()}
+                                onClick={() => onConfigChange("size", item.value)}
+                            >
+                                <SizePreview width={item.width} height={item.height} color={theme.node.text} />
+                                <span>{item.label}</span>
+                                {item.value === "auto" ? null : (
+                                    <span className="text-[11px] leading-none opacity-55">
+                                        {item.value}
+                                    </span>
+                                )}
+                            </button>
+                        ))}
+                    </div>
+                </SettingGroup>
+                <SettingGroup title="秒数" color={theme.node.muted}>
+                    <div className="grid grid-cols-3 gap-2.5">
+                        {secondOptions.map((value) => (
+                            <OptionPill key={value} selected={seconds === String(value)} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>
+                                {value}s
+                            </OptionPill>
+                        ))}
+                        <NumberInput value={seconds} min={1} max={20} theme={theme} onChange={(value) => onConfigChange("videoSeconds", value)} />
+                    </div>
+                </SettingGroup>
+            </div>
+        </ImageSettingsTheme>
+    );
+}
+
+export function videoResolutionLabel(value: string) {
+    return `${normalizeVideoResolutionValue(value)}p`;
+}
+
+export function videoSizeLabel(value: string) {
+    const size = normalizeVideoSizeValue(value);
+    return sizeOptions.find((item) => item.value === size)?.label || size;
+}
+
+export function videoSecondsLabel(value: string) {
+    return `${value || "6"}s`;
+}
+
+export function normalizeVideoSizeValue(value: string) {
+    if (value === "auto") return "auto";
+    if (/^\d+x\d+$/.test(value || "")) return value;
+    return ["9:16", "2:3", "3:4"].includes(value) ? "720x1280" : "1280x720";
+}
+
+export function normalizeVideoResolutionValue(value: string) {
+    if (value === "480p" || value === "low") return "480";
+    if (value === "720p" || value === "auto" || value === "high" || value === "medium") return "720";
+    return value.replace(/p$/i, "") || "720";
+}
+
+function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: CanvasTheme; onClick: () => void; children: ReactNode }) {
+    return (
+        <button type="button" className="h-9 cursor-pointer rounded-full border px-2 text-sm transition hover:opacity-80" style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()} onClick={onClick}>
+            {children}
+        </button>
+    );
+}
+
+function SettingGroup({ title, color, children }: { title: string; color: string; children: ReactNode }) {
+    return (
+        <div className="space-y-2.5">
+            <div className="text-xs font-medium" style={{ color }}>
+                {title}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+function ResolutionInput({ value, theme, onChange }: { value: string; theme: CanvasTheme; onChange: (value: string) => void }) {
+    return (
+        <label className="flex h-9 overflow-hidden rounded-full border text-sm" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
+            <input type="number" min={1} className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" value={value} onChange={(event) => onChange(event.target.value)} onMouseDown={(event) => event.stopPropagation()} />
+            <span className="grid w-7 place-items-center pr-1" style={{ color: theme.node.muted }}>
+                p
+            </span>
+        </label>
+    );
+}
+
+function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix: string; value: number; disabled: boolean; theme: CanvasTheme; onChange: (value: number | null) => void }) {
+    return (
+        <label className="flex h-9 overflow-hidden rounded-xl text-sm" style={{ background: theme.node.fill, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
+            <span className="grid w-9 place-items-center" style={{ color: theme.node.muted }}>
+                {prefix}
+            </span>
+            <input type="number" min={1} disabled={disabled} className="min-w-0 flex-1 bg-transparent px-2 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" value={value || ""} onChange={(event) => onChange(Number(event.target.value) || null)} onMouseDown={(event) => event.stopPropagation()} />
+        </label>
+    );
+}
+
+function NumberInput({ value, min, max, theme, onChange }: { value: string; min: number; max: number; theme: CanvasTheme; onChange: (value: string) => void }) {
+    return <input type="number" min={min} max={max} className="h-9 rounded-full border bg-transparent px-3 text-center text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" style={{ borderColor: theme.node.stroke, color: theme.node.text, WebkitTextFillColor: theme.node.text }} value={value} onChange={(event) => onChange(event.target.value)} onMouseDown={(event) => event.stopPropagation()} />;
+}
+
+function SizePreview({ width, height, color }: { width: number; height: number; color: string }) {
+    if (!width || !height) return null;
+    const longSide = Math.max(width, height);
+    const previewWidth = Math.max(10, Math.round((width / longSide) * 26));
+    const previewHeight = Math.max(10, Math.round((height / longSide) * 26));
+    return <span className="rounded-[3px] border-2" style={{ width: previewWidth, height: previewHeight, borderColor: color }} />;
+}
+
+function readSizeDimensions(size: string) {
+    if (size === "auto") return { width: 0, height: 0 };
+    const match = size.match(/^(\d+)x(\d+)$/);
+    return { width: Number(match?.[1]) || 1280, height: Number(match?.[2]) || 720 };
+}

web/src/constant/credits.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import { Zap } from "lucide-react";
+
+export function CreditSymbol({ className, ...props }: ComponentProps<"span">) {
+    return (
+        <span {...props} className={`inline-flex items-center justify-center ${className || ""}`}>
+            <Zap className="size-[1em] fill-current" strokeWidth={2.4} />
+        </span>
+    );
+}
+
+export type ModelCreditCost = {
+    model: string;
+    credits: number;
+};
+
+export function modelCreditCost(modelCosts: ModelCreditCost[] | undefined, model: string) {
+    return modelCosts?.find((item) => item.model === model)?.credits || 0;
+}
+
+export function requestCreditCost(options: { channelMode: string; modelCosts?: ModelCreditCost[]; model: string; count?: string | number }) {
+    if (options.channelMode !== "remote") return 0;
+    const count = Math.max(1, Math.floor(Math.abs(Number(options.count)) || 1));
+    return modelCreditCost(options.modelCosts, options.model) * count;
+}

web/src/constant/navigation-tools.ts

@@ -1,4 +1,4 @@
-import { FileText, ImagePlus, Images, Maximize2 } from "lucide-react";
+import { FileText, ImagePlus, Images, Maximize2, Video } from "lucide-react";
 
 export const navigationTools = [
     {
@@ -11,6 +11,11 @@ export const navigationTools = [
         label: "生图工作台",
         icon: ImagePlus,
     },
+    {
+        slug: "video",
+        label: "视频创作台",
+        icon: Video,
+    },
     {
         slug: "prompts",
         label: "提示词库",

web/src/lib/zip.ts

@@ -0,0 +1,21 @@
+import { unzipSync, zipSync } from "fflate";
+
+type ZipFile = {
+    name: string;
+    data: BlobPart;
+};
+
+export async function createZip(files: ZipFile[]) {
+    const entries = await Promise.all(
+        files.map(async (file) => {
+            const data = new Uint8Array(await new Blob([file.data]).arrayBuffer());
+            return [file.name, data] as const;
+        }),
+    );
+    return new Blob([zipSync(Object.fromEntries(entries), { level: 0 })], { type: "application/zip" });
+}
+
+export async function readZip(file: Blob) {
+    const entries = unzipSync(new Uint8Array(await file.arrayBuffer()));
+    return new Map(Object.entries(entries).map(([name, data]) => [name, new Blob([data])]));
+}

web/src/services/api/admin.ts

@@ -10,6 +10,80 @@ export type AdminPromptCategory = {
     remote: boolean;
 };
 
+export type AdminUser = {
+    id: string;
+    username: string;
+    email: string;
+    displayName: string;
+    avatarUrl: string;
+    role: "user" | "admin";
+    credits: number;
+    affCode: string;
+    affCount: number;
+    inviterId: string;
+    linuxDoId: string;
+    status: "active" | "ban";
+    lastLoginAt: string;
+    createdAt: string;
+    updatedAt: string;
+};
+
+export type AdminUserListResponse = {
+    items: AdminUser[];
+    total: number;
+};
+
+export type AdminCreditLog = {
+    id: string;
+    userId: string;
+    type: string;
+    amount: number;
+    balance: number;
+    relatedId: string;
+    remark: string;
+    extra: string;
+    createdAt: string;
+};
+
+export type AdminCreditLogListResponse = {
+    items: AdminCreditLog[];
+    total: number;
+};
+
+export type AdminUserQuery = {
+    keyword?: string;
+    page?: number;
+    pageSize?: number;
+};
+
+export async function fetchAdminUsers(token: string, query: AdminUserQuery = {}) {
+    return apiGet<AdminUserListResponse>("/api/admin/users", compactApiParams(query), token);
+}
+
+export async function saveAdminUser(token: string, user: Partial<AdminUser> & { password?: string }) {
+    return apiPost<AdminUser>("/api/admin/users", user, token);
+}
+
+export async function adjustAdminUserCredits(token: string, id: string, credits: number) {
+    return apiPost<AdminUser>(`/api/admin/users/${encodeURIComponent(id)}/credits`, { credits }, token);
+}
+
+export async function deleteAdminUser(token: string, id: string) {
+    return apiDelete<boolean>(`/api/admin/users/${encodeURIComponent(id)}`, token);
+}
+
+export async function fetchAdminCreditLogs(token: string, query: AdminUserQuery = {}) {
+    return apiGet<AdminCreditLogListResponse>("/api/admin/credit-logs", compactApiParams(query), token);
+}
+
+export async function saveAdminCreditLog(token: string, log: Partial<AdminCreditLog>) {
+    return apiPost<AdminCreditLog>("/api/admin/credit-logs", log, token);
+}
+
+export async function deleteAdminCreditLog(token: string, id: string) {
+    return apiDelete<boolean>(`/api/admin/credit-logs/${encodeURIComponent(id)}`, token);
+}
+
 export async function fetchAdminPromptCategories(token: string) {
     return apiGet<AdminPromptCategory[]>("/api/admin/prompt-categories", undefined, token);
 }
@@ -95,15 +169,28 @@ export type AdminModelChannel = {
 
 export type AdminPublicModelChannelSettings = {
     availableModels: string[];
+    modelCosts: AdminModelCost[];
     defaultModel: string;
     defaultImageModel: string;
+    defaultVideoModel: string;
     defaultTextModel: string;
     systemPrompt: string;
     allowCustomChannel: boolean;
 };
 
+export type AdminModelCost = {
+    model: string;
+    credits: number;
+};
+
 export type AdminPublicSettings = {
     modelChannel: AdminPublicModelChannelSettings;
+    auth: {
+        allowRegister: boolean;
+        linuxDo: {
+            enabled: boolean;
+        };
+    };
 };
 
 export type AdminPrivateSettings = {
@@ -112,6 +199,12 @@ export type AdminPrivateSettings = {
         enabled: boolean;
         cron: string;
     };
+    auth: {
+        linuxDo: {
+            clientId: string;
+            clientSecret: string;
+        };
+    };
 };
 
 export type AdminSettings = {

web/src/services/api/auth.ts

@@ -7,7 +7,10 @@ export type UserRole = "guest" | "user" | "admin";
 export type AuthUser = {
     id: string;
     username: string;
+    displayName: string;
+    avatarUrl: string;
     role: UserRole;
+    credits: number;
     createdAt: string;
     updatedAt: string;
 };
@@ -23,7 +26,7 @@ export type AuthPayload = {
 };
 
 export async function login(payload: AuthPayload) {
-    return apiPost<AuthSession>("/api/admin/login", payload);
+    return apiPost<AuthSession>("/api/auth/login", payload);
 }
 
 export async function register(payload: AuthPayload) {

web/src/services/api/image.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 
 import { buildApiUrl, type AiConfig } from "@/stores/use-config-store";
+import { useUserStore } from "@/stores/use-user-store";
 import { nanoid } from "nanoid";
 import { dataUrlToFile } from "@/lib/image-utils";
 import { imageToDataUrl } from "@/services/image-storage";
@@ -18,6 +19,57 @@ type ImageApiResponse = {
     msg?: string;
 };
 
+const QUALITY_BASE: Record<string, number> = {
+    low: 1024,
+    medium: 2048,
+    high: 2880,
+    standard: 1024,
+    hd: 2048,
+};
+const QUALITY_ALIASES: Record<string, string> = {
+    "1k": "low",
+    "2k": "medium",
+    "4k": "high",
+};
+
+function normalizeQuality(quality: string) {
+    const value = quality.trim().toLowerCase();
+    const normalized = QUALITY_ALIASES[value] || value;
+    return QUALITY_BASE[normalized] ? normalized : undefined;
+}
+
+/** Map "quality + ratio" to an explicit pixel dimension like "3840x2160". Returns undefined when quality is auto. */
+function resolveSize(quality: string, ratio: string): string | undefined {
+    const basePixels = QUALITY_BASE[quality];
+    if (!basePixels || ratio === "auto" || !ratio) return undefined;
+
+    const parts = ratio.split(":");
+    if (parts.length !== 2) return undefined;
+    const w = Number(parts[0]);
+    const h = Number(parts[1]);
+    if (!w || !h) return undefined;
+
+    const targetPixels = basePixels * basePixels;
+    const isLandscape = w >= h;
+    const longRatio = isLandscape ? w / h : h / w;
+
+    const longSideRaw = Math.sqrt(targetPixels * longRatio);
+    const longSide = Math.floor(longSideRaw / 16) * 16;
+    const shortSide = Math.round((longSide / longRatio) / 16) * 16;
+
+    const width = isLandscape ? longSide : shortSide;
+    const height = isLandscape ? shortSide : longSide;
+
+    return `${width}x${height}`;
+}
+
+function resolveRequestSize(quality: string | undefined, size: string) {
+    const value = size.trim();
+    if (!value || value === "auto") return undefined;
+    if (/^\d+x\d+$/.test(value)) return value;
+    return (quality && resolveSize(quality, value)) || value;
+}
+
 function resolveImageDataUrl(item: Record<string, unknown>) {
     if (typeof item.b64_json === "string" && item.b64_json) {
         return `data:image/png;base64,${item.b64_json}`;
@@ -77,16 +129,22 @@ function aiApiUrl(config: AiConfig, path: string) {
 }
 
 function aiHeaders(config: AiConfig, contentType?: string) {
+    const token = useUserStore.getState().token;
     return config.channelMode === "remote"
-        ? contentType
+        ? {
-            ? { "Content-Type": contentType }
+              ...(token ? { Authorization: `Bearer ${token}` } : {}),
-            : undefined
+              ...(contentType ? { "Content-Type": contentType } : {}),
+          }
         : {
               Authorization: `Bearer ${config.apiKey}`,
               ...(contentType ? { "Content-Type": contentType } : {}),
           };
 }
 
+function refreshRemoteUser(config: AiConfig) {
+    if (config.channelMode === "remote") void useUserStore.getState().hydrateUser();
+}
+
 function withSystemMessage(config: AiConfig, messages: ChatCompletionMessage[]) {
     const systemPrompt = config.systemPrompt.trim();
     return systemPrompt ? [{ role: "system" as const, content: systemPrompt }, ...messages] : messages;
@@ -94,6 +152,8 @@ function withSystemMessage(config: AiConfig, messages: ChatCompletionMessage[])
 
 export async function requestGeneration(config: AiConfig, prompt: string) {
     const n = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
+    const quality = normalizeQuality(config.quality);
+    const requestSize = resolveRequestSize(quality, config.size);
     try {
         const response = await axios.post<ImageApiResponse>(
             aiApiUrl(config, "/images/generations"),
@@ -101,15 +161,17 @@ export async function requestGeneration(config: AiConfig, prompt: string) {
                 model: config.model,
                 prompt: withSystemPrompt(config, prompt),
                 n,
-                quality: config.quality || undefined,
+                ...(quality ? { quality } : {}),
-                size: config.size || undefined,
+                ...(requestSize ? { size: requestSize } : {}),
                 response_format: "b64_json",
             },
             {
                 headers: aiHeaders(config, "application/json"),
             },
         );
-        return parseImagePayload(response.data);
+        const images = parseImagePayload(response.data);
+        refreshRemoteUser(config);
+        return images;
     } catch (error) {
         throw new Error(readAxiosError(error, "请求失败"));
     }
@@ -117,23 +179,27 @@ export async function requestGeneration(config: AiConfig, prompt: string) {
 
 export async function requestEdit(config: AiConfig, prompt: string, references: ReferenceImage[]) {
     const n = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
+    const quality = normalizeQuality(config.quality);
+    const requestSize = resolveRequestSize(quality, config.size);
     const formData = new FormData();
     formData.set("model", config.model);
     formData.set("prompt", withSystemPrompt(config, prompt));
     formData.set("n", String(n));
     formData.set("response_format", "b64_json");
-    if (config.quality) {
+    if (quality) {
-        formData.set("quality", config.quality);
+        formData.set("quality", quality);
     }
-    if (config.size) {
+    if (requestSize) {
-        formData.set("size", config.size);
+        formData.set("size", requestSize);
     }
     const files = await Promise.all(references.map(async (image) => dataUrlToFile({ ...image, dataUrl: await imageToDataUrl(image) })));
     files.forEach((file) => formData.append("image", file));
 
     try {
         const response = await axios.post<ImageApiResponse>(aiApiUrl(config, "/images/edits"), formData, { headers: aiHeaders(config) });
-        return parseImagePayload(response.data);
+        const images = parseImagePayload(response.data);
+        refreshRemoteUser(config);
+        return images;
     } catch (error) {
         throw new Error(readAxiosError(error, "请求失败"));
     }
@@ -197,6 +263,7 @@ export async function requestImageQuestion(config: AiConfig, messages: ChatCompl
     } catch (error) {
         throw new Error(readAxiosError(error, "请求失败"));
     }
+    refreshRemoteUser(config);
     return answer || "没有返回内容";
 }
 

web/src/services/api/video.ts

@@ -0,0 +1,100 @@
+import axios from "axios";
+
+import { dataUrlToFile } from "@/lib/image-utils";
+import { imageToDataUrl } from "@/services/image-storage";
+import { buildApiUrl, type AiConfig } from "@/stores/use-config-store";
+import { useUserStore } from "@/stores/use-user-store";
+import type { ReferenceImage } from "@/types/image";
+
+type VideoResponse = { id: string; status?: string; error?: { message?: string } };
+type ApiVideoResponse = VideoResponse | { code?: number; data?: VideoResponse | null; msg?: string };
+
+function aiApiUrl(config: AiConfig, path: string) {
+    return config.channelMode === "remote" ? `/api/v1${path}` : buildApiUrl(config.baseUrl, path);
+}
+
+function aiHeaders(config: AiConfig) {
+    const token = useUserStore.getState().token;
+    return config.channelMode === "remote" ? (token ? { Authorization: `Bearer ${token}` } : undefined) : { Authorization: `Bearer ${config.apiKey}` };
+}
+
+function refreshRemoteUser(config: AiConfig) {
+    if (config.channelMode === "remote") void useUserStore.getState().hydrateUser();
+}
+
+export async function requestVideoGeneration(config: AiConfig, prompt: string, references: ReferenceImage[] = []) {
+    const model = config.model || config.videoModel;
+    const body = new FormData();
+    body.append("model", model);
+    body.append("prompt", prompt);
+    body.append("seconds", normalizeVideoSeconds(config.videoSeconds));
+    if (normalizeVideoSize(config.size)) body.append("size", normalizeVideoSize(config.size)!);
+    body.append("resolution_name", normalizeVideoResolution(config.vquality));
+    body.append("preset", "normal");
+    const files = await Promise.all(references.slice(0, 7).map(async (image) => dataUrlToFile({ ...image, dataUrl: await imageToDataUrl(image) })));
+    files.forEach((file) => body.append("input_reference[]", file));
+    try {
+        const created = unwrapVideoResponse((await axios.post<ApiVideoResponse>(aiApiUrl(config, "/videos"), body, { headers: aiHeaders(config) })).data);
+        if (!created.id) throw new Error("视频接口没有返回任务 ID");
+        for (;;) {
+            const video = unwrapVideoResponse((await axios.get<ApiVideoResponse>(aiApiUrl(config, `/videos/${created.id}`), { headers: aiHeaders(config), params: config.channelMode === "remote" ? { model } : undefined })).data);
+            if (video.status === "completed") break;
+            if (video.status === "failed" || video.status === "cancelled") throw new Error(video.error?.message || "视频生成失败");
+            await new Promise((resolve) => setTimeout(resolve, 2500));
+        }
+        const content = await axios.get<Blob>(aiApiUrl(config, `/videos/${created.id}/content`), { headers: aiHeaders(config), params: config.channelMode === "remote" ? { model } : undefined, responseType: "blob" });
+        await assertVideoBlob(content.data);
+        refreshRemoteUser(config);
+        return content.data;
+    } catch (error) {
+        throw new Error(readAxiosError(error, "视频生成失败"));
+    }
+}
+
+function normalizeVideoSeconds(value: string) {
+    const seconds = Math.floor(Number(value) || 6);
+    return String(Math.max(1, Math.min(20, seconds)));
+}
+
+function normalizeVideoSize(value: string) {
+    if (value === "auto") return null;
+    const size = value || "1280x720";
+    if (/^\d+x\d+$/.test(size)) return size;
+    return ["9:16", "2:3", "3:4"].includes(size) ? "720x1280" : "1280x720";
+}
+
+function normalizeVideoResolution(value: string) {
+    if (value === "low") return "480p";
+    if (value === "auto" || value === "high" || value === "medium") return "720p";
+    const resolution = value.replace(/p$/i, "") || "720";
+    return `${resolution}p`;
+}
+
+function unwrapVideoResponse(payload: ApiVideoResponse) {
+    if (!payload) throw new Error("接口没有返回视频任务");
+    if ("code" in payload && typeof payload.code === "number") {
+        if (payload.code !== 0) throw new Error(payload.msg || "请求失败");
+        if (!payload.data) throw new Error("接口没有返回视频任务");
+        return payload.data;
+    }
+    return payload;
+}
+
+function readAxiosError(error: unknown, fallback: string) {
+    if (axios.isAxiosError<{ error?: { message?: string }; msg?: string; code?: number }>(error)) {
+        const responseData = error.response?.data;
+        return responseData?.msg || responseData?.error?.message || (error.response?.status ? `${fallback}：${error.response.status}` : fallback);
+    }
+    return error instanceof Error ? error.message : fallback;
+}
+
+async function assertVideoBlob(blob: Blob) {
+    if (!blob.type.includes("json")) return;
+    let payload: { code?: number; msg?: string };
+    try {
+        payload = JSON.parse(await blob.text()) as { code?: number; msg?: string };
+    } catch {
+        return;
+    }
+    if (typeof payload.code === "number" && payload.code !== 0) throw new Error(payload.msg || "视频下载失败");
+}

web/src/services/file-storage.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import localforage from "localforage";
+import { nanoid } from "nanoid";
+
+export type UploadedFile = { url: string; storageKey: string; bytes: number; mimeType: string; width?: number; height?: number };
+
+const store = localforage.createInstance({ name: "infinite-canvas", storeName: "media_files" });
+const objectUrls = new Map<string, string>();
+
+export async function uploadMediaFile(input: string | Blob, prefix = "file"): Promise<UploadedFile> {
+    const blob = typeof input === "string" ? await (await fetch(input)).blob() : input;
+    const storageKey = `${prefix}:${nanoid()}`;
+    await store.setItem(storageKey, blob);
+    const url = URL.createObjectURL(blob);
+    objectUrls.set(storageKey, url);
+    const meta = blob.type.startsWith("video/") ? await readVideoMeta(url) : {};
+    return { url, storageKey, bytes: blob.size, mimeType: blob.type || "application/octet-stream", ...meta };
+}
+
+export async function resolveMediaUrl(storageKey?: string, fallback = "") {
+    if (!storageKey) return fallback;
+    const cached = objectUrls.get(storageKey);
+    if (cached) return cached;
+    const blob = await store.getItem<Blob>(storageKey);
+    if (!blob) return fallback;
+    const url = URL.createObjectURL(blob);
+    objectUrls.set(storageKey, url);
+    return url;
+}
+
+export async function getMediaBlob(storageKey: string) {
+    return store.getItem<Blob>(storageKey);
+}
+
+export async function setMediaBlob(storageKey: string, blob: Blob) {
+    await store.setItem(storageKey, blob);
+    const url = URL.createObjectURL(blob);
+    objectUrls.set(storageKey, url);
+    return url;
+}
+
+export async function deleteStoredMedia(keys: Iterable<string>) {
+    await Promise.all(
+        Array.from(new Set(keys)).map(async (key) => {
+            const url = objectUrls.get(key);
+            if (url) URL.revokeObjectURL(url);
+            objectUrls.delete(key);
+            await store.removeItem(key);
+        }),
+    );
+}
+
+export async function cleanupUnusedMedia(usedData: unknown) {
+    const usedKeys = collectMediaStorageKeys(usedData);
+    const unused: string[] = [];
+    await store.iterate((_value, key) => {
+        if (!usedKeys.has(key)) unused.push(key);
+    });
+    await Promise.all(unused.map((key) => store.removeItem(key)));
+}
+
+export function collectMediaStorageKeys(value: unknown, keys = new Set<string>()) {
+    if (!value || typeof value !== "object") return keys;
+    if ("storageKey" in value && typeof value.storageKey === "string" && value.storageKey.includes(":")) keys.add(value.storageKey);
+    Object.values(value).forEach((item) => (Array.isArray(item) ? item.forEach((child) => collectMediaStorageKeys(child, keys)) : collectMediaStorageKeys(item, keys)));
+    return keys;
+}
+
+function readVideoMeta(url: string) {
+    return new Promise<{ width: number; height: number }>((resolve) => {
+        const video = document.createElement("video");
+        const done = () => resolve({ width: video.videoWidth || 1280, height: video.videoHeight || 720 });
+        video.onloadedmetadata = done;
+        video.onerror = done;
+        video.src = url;
+    });
+}

web/src/services/image-storage.ts

@@ -38,6 +38,17 @@ export async function resolveImageUrl(storageKey?: string, fallback = "") {
     return url;
 }
 
+export async function getImageBlob(storageKey: string) {
+    return store.getItem<Blob>(storageKey);
+}
+
+export async function setImageBlob(storageKey: string, blob: Blob) {
+    await store.setItem(storageKey, blob);
+    const url = URL.createObjectURL(blob);
+    objectUrls.set(storageKey, url);
+    return url;
+}
+
 export async function imageToDataUrl(image: { url?: string; dataUrl?: string; storageKey?: string }) {
     const url = image.dataUrl || (await resolveImageUrl(image.storageKey, image.url || ""));
     if (!url || url.startsWith("data:")) return url;

web/src/stores/use-asset-store.ts

@@ -6,11 +6,13 @@ import { persist, type PersistStorage, type StorageValue } from "zustand/middlew
 import { nanoid } from "nanoid";
 import { localForageStorage } from "@/lib/localforage-storage";
 import { cleanupUnusedImages, resolveImageUrl, uploadImage } from "@/services/image-storage";
+import { cleanupUnusedMedia, resolveMediaUrl } from "@/services/file-storage";
 
-export type AssetKind = "text" | "image";
+export type AssetKind = "text" | "image" | "video";
 export type TextAsset = AssetBase<"text"> & { data: { content: string } };
 export type ImageAsset = AssetBase<"image"> & { data: { dataUrl: string; storageKey?: string; width: number; height: number; bytes: number; mimeType: string } };
-export type Asset = TextAsset | ImageAsset;
+export type VideoAsset = AssetBase<"video"> & { data: { url: string; storageKey?: string; width: number; height: number; bytes: number; mimeType: string } };
+export type Asset = TextAsset | ImageAsset | VideoAsset;
 
 type AssetBase<T extends AssetKind> = {
     id: string;
@@ -42,6 +44,7 @@ const assetStorage: PersistStorage<AssetStore> = {
         const parsed = JSON.parse(value) as StorageValue<AssetStore>;
         parsed.state.assets = await Promise.all(
             parsed.state.assets.map(async (asset) => {
+                if (asset.kind === "video" && asset.data.storageKey) return { ...asset, data: { ...asset.data, url: await resolveMediaUrl(asset.data.storageKey, asset.data.url) } };
                 if (asset.kind !== "image") return asset;
                 if (asset.data.storageKey)
                     return {
@@ -84,6 +87,7 @@ export const useAssetStore = create<AssetStore>()(
                 window.setTimeout(async () => {
                     const { useCanvasStore } = await import("@/app/(user)/canvas/stores/use-canvas-store");
                     await cleanupUnusedImages({ assets: get().assets, projects: useCanvasStore.getState().projects, extra });
+                    await cleanupUnusedMedia({ assets: get().assets, projects: useCanvasStore.getState().projects, extra });
                 }, 0);
             },
         }),

web/src/stores/use-config-store.ts

@@ -13,7 +13,10 @@ export type AiConfig = {
     apiKey: string;
     model: string;
     imageModel: string;
+    videoModel: string;
     textModel: string;
+    videoSeconds: string;
+    vquality: string;
     systemPrompt: string;
     models: string[];
     quality: string;
@@ -29,7 +32,10 @@ export const defaultConfig: AiConfig = {
     apiKey: "",
     model: "gpt-image-2",
     imageModel: "gpt-image-2",
+    videoModel: "grok-imagine-video",
     textModel: "gpt-5.5",
+    videoSeconds: "6",
+    vquality: "720",
     systemPrompt: "",
     models: [],
     quality: "auto",
@@ -55,13 +61,15 @@ function resolveEffectiveConfig(config: AiConfig, modelChannel: AdminPublicSetti
     const channelMode = modelChannel?.allowCustomChannel ? config.channelMode : "remote";
     if (channelMode === "local" || !modelChannel) return { ...config, channelMode };
     const models = modelChannel.availableModels;
+    const fallbackModel = modelChannel.defaultModel || models[0] || "";
     return {
         ...config,
         channelMode,
         models,
-        model: models.includes(config.model) ? config.model : modelChannel.defaultModel,
+        model: models.includes(config.model) ? config.model : fallbackModel,
-        imageModel: models.includes(config.imageModel) ? config.imageModel : modelChannel.defaultImageModel || modelChannel.defaultModel,
+        imageModel: models.includes(config.imageModel) ? config.imageModel : modelChannel.defaultImageModel || fallbackModel,
-        textModel: models.includes(config.textModel) ? config.textModel : modelChannel.defaultTextModel || modelChannel.defaultModel,
+        videoModel: models.includes(config.videoModel) ? config.videoModel : modelChannel.defaultVideoModel || fallbackModel,
+        textModel: models.includes(config.textModel) ? config.textModel : modelChannel.defaultTextModel || fallbackModel,
         systemPrompt: modelChannel.systemPrompt,
     };
 }
@@ -104,7 +112,7 @@ export const useConfigStore = create<ConfigStore>()(
             partialize: (state) => ({ config: state.config }),
             merge: (persisted, current) => {
                 const config = { ...defaultConfig, ...((persisted as Partial<ConfigStore>).config || {}) };
-                return { ...current, config: { ...config, channelMode: config.channelMode || "remote", imageModel: config.imageModel || config.model, textModel: config.textModel || config.model } };
+                return { ...current, config: { ...config, channelMode: config.channelMode || "remote", imageModel: config.imageModel || config.model, videoModel: config.videoModel || "grok-imagine-video", textModel: config.textModel || config.model, videoSeconds: config.videoSeconds || "6", vquality: config.vquality || "720" } };
             },
         },
     ),