Compare commits

...

20 Commits

Author SHA1 Message Date
HouYunFei 796882064b feat(account): 新增用户账号与算力点体系
- 新增账号密码注册登录功能
- 集成 Linux.do OAuth 认证
- 添加管理后台配置模型算力点功能
- 实现计费查询支持
- 在画布右上角显示用户算力点余额
- 生成按钮展示本次预计消耗算力点
2026-05-25 17:20:03 +08:00
HouYunFei 8c506f92f9 feat(video): 对齐 grok-imagine-video 接口并优化视频生成功能
- 将默认视频模型从 sora-2 更改为 grok-imagine-video
- 新增分辨率选项包括 720p 和 480p,替换原有的质量选项
- 扩展视频尺寸选项,新增方形、宽屏、长图等预设尺寸
- 添加分辨率和尺寸手动输入功能,支持自定义宽高
- 更新视频生成 API 参数为 resolution_name、preset 和 input_reference[]
- 支持最多 7 张参考图片上传
- 优化视频设置浮层定位,避免被工具栏遮挡
- 识别后端错误响应格式,改进视频生成失败处理逻辑
2026-05-25 17:15:42 +08:00
HouYunFei b21f8c3af9 feat(admin): 优化管理后台渠道模型选择功能
- 在管理后台新增/编辑渠道时,渠道可用模型支持通过弹窗按"新获取、已有"分组选择
- 弹窗内支持手动增加模型或拉取模型列表后再写回表单
- 编辑渠道时API Key留空不再触发必填校验,表示沿用已保存的密钥
- 新增渠道仍要求填写API Key以确保安全性
- 公开配置里的系统可用模型候选项改为由已启用渠道中选择的模型合并去重生成
- 最终开放哪些模型仍由公开配置里手动勾选决定
- 添加了Checkbox组件用于多选模型功能
- 实现了模型选择器的状态管理和数据过滤逻辑
2026-05-25 16:37:18 +08:00
HouYunFei d8cb1d6ed2 fix(image): 修复图像生成中quality参数传递问题
- 添加QUALITY_ALIASES映射表支持质量别名
- 实现normalizeQuality函数进行参数归一化
- 在requestGeneration和requestEdit中验证quality参数
- 防止auto或异常值传递给上游API导致400错误
- 更新FormData和POST请求中的quality参数处理逻辑
2026-05-25 16:15:10 +08:00
HouYunFei b8e50c10f6 feat(auth): 添加用户注册开关功能
- 在系统设置中新增 allowRegister 配置项控制用户注册
- 实现注册接口的开关检查机制
- 登录页面根据注册开关动态显示或隐藏注册选项
- 首次 Linux.do 登录创建用户时也受注册开关限制
- 更新系统配置文档说明新的认证配置项
2026-05-25 16:03:54 +08:00
HouYunFei 030541b99d feat(canvas): 添加画布图片信息显示功能
- 在画布项目状态中添加 showImageInfo 属性
- 实现图片信息栏组件显示图片尺寸和文件大小
- 添加画布工具栏开关控制图片信息显示
- 将图片信息状态集成到项目历史记录和持久化
- 更新画布节点组件支持图片信息显示功能
2026-05-25 15:51:14 +08:00
HouYunFei 2934b1d0bc refactor(ai): 重构AI接口算力点扣费逻辑并添加失败返还机制
- 移除预检查算力点步骤,改为请求前预扣算力点
- 添加请求失败时自动返还算力点的功能
- 修改copyAIResponse函数参数以支持失败回调处理
- 在响应状态异常时也执行算力点返还操作
- 从auth服务中移除EnsureUserCredits方法
- 新增RefundUserCredits方法用于返还用户算力点
- 添加AI_REFUND算力点日志类型常量
- 更新算力点日志类型说明及展示标签
2026-05-25 15:23:51 +08:00
HouYunFei 01f2a4d9d5 feat(ai): 实现AI模型调用的积分计费功能
- 后端根据请求体中的n参数计算AI调用次数并扣减用户积分
- 添加readAIRequestCount函数解析multipart/form-data和JSON格式的请求体获取调用次数
- 前端Canvas组件中显示预计消耗的积分数量
- 在助手面板、配置节点面板和提示面板中集成积分成本计算和展示
- 优化模型选择器在云端模式下的模型列表显示逻辑
- 添加CreditSymbol组件用于统一积分图标显示
- 实现requestCreditCost函数计算远程调用的积分消耗
- 更新文档中关于积分扣费和模型配置的相关说明
2026-05-25 15:01:06 +08:00
HouYunFei 823fb2523f feat(canvas): 在画布用户状态栏新增算力点余额展示
- 在画布详情页右上角用户头像左侧新增当前算力点余额展示
- 未登录或无用户信息时显示 0
- 使用 Coins 图标配合数字显示算力点余额
- 通过 Tooltip 提供当前算力点余额提示信息
- 算力点数值采用千分位分隔格式化显示
- 仅在画布模式下显示算力点余额信息
2026-05-25 14:25:57 +08:00
HouYunFei 2181b3b885 feat(admin): 添加模型算力点配置和扣费功能
- 在管理后台设置页面添加模型算力点配置表格
- 实现后端AI接口调用时按模型扣除用户算力点
- 添加算力点余额检查和不足时的错误处理
- 在credit_logs中记录AI调用消费流水
- 更新前端远程调用后刷新用户信息显示
- 文档中补充模型算力点配置说明
2026-05-25 14:01:04 +08:00
HouYunFei 392bd49d8c Merge branch 'fork/maoqingheng/feature/xiaoxuan' 2026-05-25 12:58:13 +08:00
HouYunFei fff7074218 feat(admin): 添加管理员用户算力点管理和日志功能
- 在管理员API中新增用户算力点调整功能和信用日志相关接口
- 实现后端用户算力点调整逻辑和信用日志的增删改查操作
- 在管理员界面用户管理页面添加算力点调整功能
- 新增独立的算力点日志管理页面,支持日志查看和编辑
- 添加算力点日志相关的数据模型和服务函数
- 更新数据库文档说明第三方资料存储结构
- 添加dayjs依赖用于时间格式化显示
2026-05-25 12:57:27 +08:00
HouYunFei fe3294ed60 feat(auth): 添加用户认证中间件并重构Linux.do登录流程
- 新增UserAuth中间件用于验证用户登录状态和权限
- 移除Linux.do登录中的redirectUri和minimumTrustLevel配置项
- 修改Linux.do登录流程以支持动态构建回调URL
- 将API v1接口组迁移至需要用户认证的路由
- 在远程AI服务调用中添加用户令牌认证
- 修复被封禁用户的认证检查逻辑
- 更新登录重定向函数以处理请求来源
- 添加RequestOrigin函数解析转发的主机和协议头
2026-05-25 12:05:02 +08:00
hengmaoqing 51ea17e8d9 feat(image): 实现图像生成质量与尺寸自适应功能
- 新增 QUALITY_BASE 配置对象定义低中高质量的基础像素值
- 实现 resolveSize 函数将质量等级与宽高比转换为精确像素尺寸
- 在图像生成请求中集成像素尺寸解析逻辑
- 更新图像编辑功能以支持动态像素尺寸设置
- 优化 API 请求参数传递方式使用展开运算符
- 调整页面组件中的质量选项显示标签增加像素信息
2026-05-25 11:53:39 +08:00
HouYunFei b2cae2471d feat(admin): 添加用户管理和Linux.do登录功能
- 新增AdminUser类型定义及用户管理API接口
- 实现用户列表查询、保存和删除功能
- 添加Linux.do第三方登录支持
- 集成Linux.do OAuth认证流程
- 在系统设置中添加Linux.do登录配置选项
- 实现算力点余额调整记录功能
- 优化搜索组件关键词状态管理
- 更新数据库迁移添加credit_logs表
- 完善用户状态和信用等级验证逻辑
2026-05-25 11:21:09 +08:00
HouYunFei f871a5d015 feat(canvas): 优化图片和视频节点尺寸适配
- 在 InsertAssetPayload 类型中为视频添加 width 和 height 属性
- 引入 fitNodeSize 和 nodeSizeFromRatio 工具函数处理节点尺寸计算
- 设置视频节点最大宽度和高度限制为 420px
- 将原有的 fitImageNodeSize 替换为通用的 fitNodeSize 函数
- 为视频节点添加自然宽高元数据存储
- 实现视频文件上传时读取真实宽高信息
- 支持空节点在尺寸比例切换时自动调整外框大小
- 修复视频节点在生成和重试过程中的尺寸适配问题
- 统一图片和视频节点的尺寸调整逻辑
- 添加视频节点纵横比锁定功能
2026-05-23 18:30:32 +08:00
HouYunFei ef7772a703 feat(canvas): 添加视频模型配置和生成功能
- 在系统配置中新增 defaultVideoModel 字段用于设置默认视频模型
- 更新应用配置模态框以支持视频模型的选择和验证
- 修改画布节点逻辑以支持视频类型的生成配置
- 实现视频节点的生成和上传功能
- 更新模型选择器组件以支持视频模型选择
- 在管理后台设置页面添加视频模型配置选项
- 优化模型选择器的层级和交互体验
- 添加对 DeepSeek 和 GLM 模型图标的支持
2026-05-23 18:02:05 +08:00
HouYunFei 370263cd83 feat(canvas): 添加视频模型配置和生成功能
- 在系统配置中新增 defaultVideoModel 字段用于设置默认视频模型
- 更新应用配置模态框以支持视频模型的选择和验证
- 修改画布节点逻辑以支持视频类型的生成配置
- 实现视频节点的生成和上传功能
- 更新模型选择器组件以支持视频模型选择
- 在管理后台设置页面添加视频模型配置选项
- 优化模型选择器的层级和交互体验
- 添加对 DeepSeek 和 GLM 模型图标的支持
2026-05-23 17:25:00 +08:00
HouYunFei 44c5825cb0 feat(canvas): 添加视频节点支持功能
- 在后端添加 AI 视频相关接口处理函数
- 扩展前端画布组件支持视频节点类型
- 实现视频上传、生成和播放功能
- 更新画布数据结构文档以包含视频节点
- 添加视频节点的操作工具栏和配置面板
- 集成视频存储和检索服务
- 优化视频节点的渲染和交互体验
2026-05-23 16:53:21 +08:00
HouYunFei 0cc27b5a4c chore(version): 更新版本号到 v0.0.7 2026-05-23 16:19:23 +08:00
65 changed files with 2953 additions and 424 deletions
+1
View File
@@ -59,6 +59,7 @@
- 优先使用 `canvasThemes``useThemeStore` 或 Ant Design `ConfigProvider` token。
- 不要硬编码黑白、stone、slate 等颜色导致浅色/深色主题不一致。
- 新增画布按钮、弹窗、浮层时,尽量复用已有工具栏、节点面板、Modal 的视觉风格。
- 画布顶部工具栏和状态信息优先采用极简扁平风格:无边框、无阴影、无胶囊背景,融入整体背景,弱化按钮感,仅保留轻微 hover 反馈,保持简洁现代、低视觉重量。
- 图片节点尺寸逻辑要尊重原始比例,除非功能明确要求自由变形。
- 批量生成、多图展示、助手面板等画布交互要尽量简洁,不要占用过多画布空间。
+7
View File
@@ -2,6 +2,13 @@
## Unreleased
## v0.0.8 - 2026-05-24
+ [新增] 新增用户账号与算力点体系,支持账号密码注册登录、Linux.do OAuth。
+ [新增] 管理后台公开配置支持设置模型算力点、支持计费查询。
+ [新增] 画布右上角展示用户算力点余额,生成按钮会展示本次预计消耗算力点。
+ [新增] 新增视频生成节点。
## v0.0.7 - 2026-05-23
+ [新增] 管理后台提示词管理支持多选批量删除。
+1 -1
View File
@@ -1 +1 @@
v0.0.6
v0.0.8
+10 -7
View File
@@ -10,13 +10,16 @@ import (
)
type Config struct {
Port string `env:"PORT" envDefault:"8080"`
AdminUsername string `env:"ADMIN_USERNAME" envDefault:"admin"`
AdminPassword string `env:"ADMIN_PASSWORD" envDefault:"infinite-canvas"`
JWTSecret string `env:"JWT_SECRET" envDefault:"infinite-canvas"`
JWTExpireHours int `env:"JWT_EXPIRE_HOURS" envDefault:"168"`
StorageDriver string `env:"STORAGE_DRIVER" envDefault:"sqlite"`
DatabaseDSN string `env:"DATABASE_DSN" envDefault:"data/infinite-canvas.db"`
Port string `env:"PORT" envDefault:"8080"`
AdminUsername string `env:"ADMIN_USERNAME" envDefault:"admin"`
AdminPassword string `env:"ADMIN_PASSWORD" envDefault:"infinite-canvas"`
JWTSecret string `env:"JWT_SECRET" envDefault:"infinite-canvas"`
JWTExpireHours int `env:"JWT_EXPIRE_HOURS" envDefault:"168"`
StorageDriver string `env:"STORAGE_DRIVER" envDefault:"sqlite"`
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
+50 -138
View File
@@ -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 | 算力点余额,规划字段 |
| `aff_code` | string | 用户自己的邀请码,唯一索引,规划字段 |
| `aff_count` | number | 已邀请用户数量,冗余统计字段,规划字段 |
| `inviter_id` | string | 邀请人用户 ID,规划字段 |
| `github_id` | string | GitHub 用户 ID,规划字段 |
| `linux_do_id` | string | Linux.do 用户 ID,规划字段 |
| `wechat_id` | string | 微信用户 ID,规划字段 |
| `status` | string | 用户状态:`active``ban`,规划字段 |
| `credits` | number | 算力点余额 |
| `aff_code` | string | 用户自己的邀请码,唯一索引 |
| `aff_count` | number | 已邀请用户数量,冗余统计字段 |
| `inviter_id` | string | 邀请人用户 ID |
| `github_id` | string | GitHub 用户 ID |
| `linux_do_id` | string | Linux.do 用户 ID |
| `wechat_id` | string | 微信用户 ID |
| `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` 常放前端展示和可公开读取的配置,例如模型列表、订阅套餐、功能开关等。
`private.value` 常放渠道密钥、支付配置、奖励规则、后台内部开关等。
`public.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` 当前取值:
订单表。统一记录充值、订阅购买等支付订单。
| 字段 | 类型 | 说明 |
|---------------------|--------|----------------------|
| `id` | string | 主键 |
| `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 | 完成时间 |
| 值 | 说明 |
| --- | --- |
| `admin_adjust` | 后台手动调整 |
| `ai_consume` | 调用后端模型接口消费 |
| `ai_refund` | 后端模型接口调用失败返还 |
+7 -5
View File
@@ -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` 指回根节点。
## 连线结构
+8
View File
@@ -39,6 +39,14 @@
- 每个生成出来的图片节点都会在自身 `metadata` 下记录提示词、生成类型、模型、尺寸、质量、数量和参考图引用,方便后续重试。
- 如果重试时参考图已经丢失或无法恢复,系统会直接提示,避免误发空的图生图请求。
### 视频节点
- 工具栏可以新建视频节点,也可以拖入或上传本地视频文件。
- 视频节点使用原生播放器展示内容,可在节点内直接播放、暂停和拖动进度。
- 空视频节点下方对话框可输入提示词生成视频,结果会回填到当前节点。
- 从文本、图片或配置节点创建视频生成时,会在右侧生成新的视频节点并自动连接。
- 视频生成接口使用 OpenAI 兼容的 `POST /v1/videos``GET /v1/videos/{id}``GET /v1/videos/{id}/content`
### 推荐流程
1. 新建文本节点,写入图片创作想法。
+8 -8
View File
@@ -1,10 +1,10 @@
# 待测试
- 模型选择器改为共享的 shadcn 风格下拉,按模型名称显示 OpenAI、Claude、Gemini 图标,并把画布节点下方、右侧助手和配置弹窗统一到同一套组件;右侧助手的模型和模式按钮会随工具栏宽度自动在文字态和图标态之间切换,需要确认生图页、画布助手、节点配置和配置弹窗中的选中态和下拉列表显示正常
- 画布图像设置里的尺寸输入去掉了原生数字步进箭头,需要确认宽高仍可直接输入、禁用态正常、设置值回写正常
- 后台提示词定时同步默认改为开启且默认每 5 分钟执行一次,需要确认新环境未保存过设置时开关默认打开、Cron 默认值正确,用户手动关闭或修改 Cron 后能保持配置
- 画布右侧助手和节点下方对话框的生图设置弹层改为紧凑图像设置面板,面板只包含质量、尺寸、宽高比和生成数量选择模型选择保留在对话框底部工具栏;需要确认助手内设置面板不会被右侧面板裁切,节点内质量可正常选择并参与生成、尺寸可编辑、宽高比预览显示正常且为直角矩形、auto 不重复显示、张数每行 4 个且自定义输入框能显示当前值、实际生图参数正常;节点设置面板打开时会隐藏节点悬浮工具条,避免遮挡质量选择
- 管理后台 `/admin/prompts` 新增提示词批量删除,需要确认多选、确认弹窗、删除后列表刷新和筛选条件下删除行为
- 管理后台 `/admin/settings` 的私有配置新增提示词定时同步开关和 Cron 表达式;开启后后端会按配置同步内置 GitHub 远程提示词源,需要确认保存配置和到点同步行为
- 管理后台 `/admin/settings` 中的渠道模型列表获取和模型测试已改为走后端接口,前端不再直接读取或转发 API Key,需要确认保存后、编辑中和已有渠道三种场景都能正常拉取模型和测试连通性
- 提示词远程源新增 `davidwuw0811-boop/awesome-gpt-image2-prompts`,同步时会读取仓库 `prompts.json` 的结构化数据,需要确认后台同步后分类、封面图、标签和提示词内容展示正常
- 修复生图工作台和画布生图请求中 `quality` 参数可能传入上游不支持值导致 400 的问题;请求前会归一化质量枚举,`auto` 或异常值不再发送给上游
- 管理后台新增/编辑渠道时,渠道可用模型支持通过弹窗按“新获取、已有”分组选择,并可在弹窗内手动增加模型或拉取模型列表后再写回表单
- 管理后台编辑渠道时,API Key 留空不再触发必填校验,表示沿用已保存的密钥;新增渠道仍要求填写 API Key
- 管理后台公开配置里的系统可用模型候选项改为由已启用渠道中选择模型合并去重生成,最终开放哪些模型仍由公开配置里手动勾选
- 视频生成请求参数对齐 `grok-imagine-video` 接口:使用 `resolution_name``preset=normal``input_reference[]`,支持清晰度、尺寸、秒数快捷选择和手动输入,并支持最多 7 张参考图
- 画布视频设置浮层改为挂载到页面根层级,避免被节点悬浮工具栏遮挡
- 视频清晰度输入框改为只输入数字,提交请求时再拼接 `p` 单位
- 视频生成前端会识别后端 `{ code, msg }` 错误响应,创建失败不再继续轮询 `undefined`
+26
View File
@@ -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
-42
View File
@@ -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 体验和工程
- 接口调用队列:图片/文本生成接口增加队列、并发限制、后台状态和基础失败处理,避免大量请求直接打到模型渠道。
+91
View File
@@ -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 {
+89 -10
View File
@@ -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"`
Username string `json:"username"`
Password string `json:"password"`
Role model.UserRole `json:"role"`
ID string `json:"id"`
Username string `json:"username"`
Password string `json:"password"`
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 {
Fail(w, "需要管理员权限")
OK(w, session)
}
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,
Username: request.Username,
Role: request.Role,
ID: request.ID,
Username: request.Username,
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)
+11
View File
@@ -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))
+36 -8
View File
@@ -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"`
DefaultModel string `json:"defaultModel"`
DefaultImageModel string `json:"defaultImageModel"`
DefaultTextModel string `json:"defaultTextModel"`
SystemPrompt string `json:"systemPrompt"`
AllowCustomChannel *bool `json:"allowCustomChannel"`
AvailableModels []string `json:"availableModels"`
ModelCosts []ModelCost `json:"modelCosts"`
DefaultModel string `json:"defaultModel"`
DefaultImageModel string `json:"defaultImageModel"`
DefaultVideoModel string `json:"defaultVideoModel"`
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"`
PromptSync PromptSyncSetting `json:"promptSync"`
Channels []ModelChannel `json:"channels"`
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"`
+68 -16
View File
@@ -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"`
Username string `json:"username" gorm:"uniqueIndex"`
Password string `json:"password,omitempty"`
Role UserRole `json:"role"`
CreatedAt string `json:"createdAt"`
UpdatedAt string `json:"updatedAt"`
ID string `json:"id" gorm:"primaryKey"`
Username string `json:"username" gorm:"uniqueIndex"`
Password string `json:"password,omitempty"`
Email string `json:"email"`
DisplayName string `json:"displayName"`
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"`
Username string `json:"username"`
Role UserRole `json:"role"`
CreatedAt string `json:"createdAt"`
UpdatedAt string `json:"updatedAt"`
ID string `json:"id"`
Username string `json:"username"`
DisplayName string `json:"displayName"`
AvatarURL string `json:"avatarUrl"`
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,
Username: user.Username,
Role: user.Role,
CreatedAt: user.CreatedAt,
UpdatedAt: user.UpdatedAt,
ID: user.ID,
Username: user.Username,
DisplayName: user.DisplayName,
AvatarURL: user.AvatarURL,
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"`
}
+1
View File
@@ -47,6 +47,7 @@ func DB() (*gorm.DB, error) {
}
dbErr = db.AutoMigrate(
&model.User{},
&model.CreditLog{},
&model.Prompt{},
&model.Asset{},
&model.Setting{},
+91
View File
@@ -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{}
+21 -3
View File
@@ -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))
api.POST("/v1/images/edits", gin.WrapF(handler.AIImagesEdits))
api.POST("/v1/chat/completions", gin.WrapF(handler.AIChatCompletions))
v1 := api.Group("/v1", middleware.UserAuth)
v1.POST("/images/generations", gin.WrapF(handler.AIImagesGenerations))
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))
+368 -11
View File
@@ -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 == "" {
return user, errors.New("密码不能为空")
if isCreate && user.Password == "" {
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")
+35
View File
@@ -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 {
+1
View File
@@ -16,6 +16,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"copy-to-clipboard": "^4.0.2",
"dayjs": "^1.11.20",
"localforage": "^1.10.0",
"lucide-react": "^1.16.0",
"motion": "^12.38.0",
+1
View File
@@ -22,6 +22,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"copy-to-clipboard": "^4.0.2",
"dayjs": "^1.11.20",
"localforage": "^1.10.0",
"lucide-react": "^1.16.0",
"motion": "^12.38.0",
+1
View File
@@ -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>

After

Width:  |  Height:  |  Size: 2.1 KiB

+1
View File
@@ -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>

After

Width:  |  Height:  |  Size: 3.5 KiB

+1
View File
@@ -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>

After

Width:  |  Height:  |  Size: 756 B

+9
View File
@@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

+13 -3
View File
@@ -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 type="primary" icon={<ReloadOutlined />} onClick={refreshAssets}>
<Button
onClick={() => {
setKeywordText("");
resetFilters();
}}
>
</Button>
<Button type="primary" icon={<ReloadOutlined />} onClick={() => searchAssets(keywordText)}>
</Button>
</Space>
@@ -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>
);
}
@@ -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),
};
}
+15 -3
View File
@@ -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 pageTitle = pathname.startsWith("/admin/settings") ? "系统设置" : pathname.startsWith("/admin/assets") ? "素材库管理" : "提示词管理";
const activeKey = pathname.startsWith("/admin/settings")
? "/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;
+1 -1
View File
@@ -1,5 +1,5 @@
import { redirect } from "next/navigation";
export default function AdminPage() {
redirect("/admin/assets");
redirect("/admin/users");
}
+13 -3
View File
@@ -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 type="primary" icon={<ReloadOutlined />} onClick={refreshPrompts}>
<Button
onClick={() => {
setKeywordText("");
resetFilters();
}}
>
</Button>
<Button type="primary" icon={<ReloadOutlined />} onClick={() => searchPrompts(keywordText)}>
</Button>
</Space>
+312 -19
View File
@@ -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);
message.success(`已获取 ${channelModels.length} 个模型`);
const current = isModelSelectorOpen ? uniqueModels(modelSelectSelected) : uniqueModels(channelForm.getFieldValue("models") || []);
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="系统可用模型(请先配置渠道)">
<Select mode="tags" tokenSeparators={[",", "\n"]} options={modelOptions.map((item) => ({ label: item, value: item }))} />
<Form.Item name={["public", "modelChannel", "availableModels"]} label="系统可用模型(请先在私有配置里配置渠道)" extra="可选项来自已启用渠道中选择的模型,最终开放哪些模型由这里勾选决定">
<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" }]}>
<Input.Password />
<Form.Item name="apiKey" label="API Key" rules={editingChannelIndex === null ? [{ required: true, message: "请输入 API Key" }] : []}>
<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>
<Button onClick={() => openChannelModelSelector()}></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);
}
+261
View File
@@ -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>
);
}
@@ -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),
};
}
+16 -11
View File
@@ -26,6 +26,7 @@ const kindOptions = [
{ label: "全部", value: "all" },
{ label: "文本", value: "text" },
{ label: "图片", value: "image" },
{ label: "视频", value: "video" },
];
export default function AssetsPage() {
@@ -52,7 +53,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,9 +146,9 @@ 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");
link.href = asset.data.dataUrl;
link.href = asset.kind === "video" ? asset.data.url : asset.data.dataUrl;
link.download = `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`;
link.click();
};
@@ -385,7 +386,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 +405,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}>
</Button>
{asset.kind !== "video" ? (
<Button size="small" icon={<PencilLine className="size-3.5" />} onClick={onEdit}>
</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 +444,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 +456,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 +476,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>
@@ -3,11 +3,13 @@
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 { 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 +17,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 +66,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 +140,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 +159,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 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={<List className="size-5" />} title="文本生成" description="脚本、广告词、品牌文案" onClick={() => onCreate(CanvasNodeType.Text)} />
<ConnectionCreateOption theme={theme} icon={<ImageIcon className="size-5" />} title="图片生成" onClick={() => onCreate(CanvasNodeType.Image)} />
<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}>
<span className="grid size-11 shrink-0 place-items-center rounded-xl bg-white/10 text-stone-200">{icon}</span>
<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" 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>
{description ? <span className="mt-1 block truncate text-sm text-stone-500">{description}</span> : null}
<span className="flex items-center gap-2 text-base font-semibold leading-5">{title}</span>
{description ? <span className="mt-1 block truncate text-sm" style={{ color: theme.node.muted }}>{description}</span> : null}
</span>
</button>
);
@@ -239,6 +247,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 +286,9 @@ function InfiniteCanvasPage() {
chatSessions,
activeChatId,
backgroundMode,
showImageInfo,
}),
[activeChatId, backgroundMode, chatSessions],
[activeChatId, backgroundMode, chatSessions, showImageInfo],
);
useEffect(() => {
@@ -298,6 +308,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 +321,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 +333,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 +353,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 });
}, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, updateProject]);
updateProject(projectId, { nodes, connections, chatSessions, activeChatId, backgroundMode, showImageInfo });
}, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, showImageInfo, updateProject]);
useEffect(() => {
if (!dialogNodeId) setNodeImageSettingsOpen(false);
@@ -463,7 +475,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);
@@ -788,6 +800,7 @@ function InfiniteCanvasPage() {
setChatSessions(entry.chatSessions);
setActiveChatId(entry.activeChatId);
setBackgroundMode(entry.backgroundMode);
setShowImageInfo(entry.showImageInfo);
setSelectedNodeIds(new Set());
setSelectedConnectionId(null);
setContextMenu(null);
@@ -1051,7 +1064,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 +1082,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,14 +1312,14 @@ 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");
link.href = node.metadata.content;
link.download = `canvas-image-${node.id}.${imageExtension(node.metadata.content)}`;
link.download = `canvas-${node.type}-${node.id}.${node.type === CanvasNodeType.Video ? "mp4" : imageExtension(node.metadata.content)}`;
link.click();
}, []);
@@ -1298,6 +1332,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 +1423,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 +1448,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 +1500,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 +1681,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 +1732,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 +1831,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 +1867,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 +1946,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 +1986,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 +2091,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 +2187,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 +2199,7 @@ function InfiniteCanvasPage() {
onClear={() => setClearConfirmOpen(true)}
onDeselect={deselectCanvas}
onBackgroundModeChange={setBackgroundMode}
onShowImageInfoChange={setShowImageInfo}
onOpenAssetLibrary={() => {
setAssetPickerTab("library");
setAssetPickerOpen(true);
@@ -2138,7 +2229,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 +2497,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 +2532,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 +2564,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 +2594,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),
};
}
@@ -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 });
}
};
@@ -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 !w-10 !min-w-10 shrink-0"
icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
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>
@@ -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 { 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 { 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>
@@ -107,8 +120,8 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
<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()}>
<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}
<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 })} />
{mode === "video" ? <CanvasVideoSettingsPopover config={config} 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" ? <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" ? null : <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 })} />}
</div>
<Button
@@ -117,9 +130,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 +313,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,
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),
};
}
@@ -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;
@@ -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 ? <IconAction title="下载图片" icon={<Download className="size-5" />} onClick={() => onDownload(node)} /> : null}
{hasImage || hasVideo || isText ? <ToolbarAction title="加入我的素材" label="存素材" icon={<FolderPlus className="size-4" />} onClick={() => onSaveAsset(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"} />
@@ -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 !w-10 !min-w-10 shrink-0"
className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
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),
};
}
@@ -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;
@@ -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 { CircleDot, Eraser, FolderOpen, Grid2x2, Hand, Image as ImageIcon, Library, Moon, Palette, Redo2, Settings2, Square, Sun, Trash2, Type, Undo2, Upload } from "lucide-react";
import { Button, Segmented, Switch } from "antd";
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 "素材库";
@@ -0,0 +1,200 @@
"use client";
import { type ReactNode } from "react";
import { Settings2 } from "lucide-react";
import { Button, Popover } from "antd";
import { canvasThemes } from "@/lib/canvas-theme";
import { useThemeStore } from "@/stores/use-theme-store";
import type { AiConfig } from "@/stores/use-config-store";
import { CanvasImageSettingsTheme } from "./canvas-image-settings-popover";
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 },
];
const secondOptions = [6, 10, 12, 16, 20];
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 seconds = config.videoSeconds || "6";
const size = normalizeVideoSize(config.size);
const dimensions = readSizeDimensions(size);
const resolution = normalizeVideoResolution(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 (
<Popover
trigger="click"
placement={placement}
arrow={false}
overlayClassName="canvas-image-settings-popover"
color={theme.toolbar.panel}
zIndex={1200}
getPopupContainer={() => document.body}
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>
<SettingGroup title="清晰度" color={theme.node.muted}>
<div className="grid grid-cols-2 gap-3">
{resolutionOptions.map((item) => (
<OptionPill key={item.value} selected={resolution === item.value} theme={theme} onClick={() => onConfigChange("vquality", item.value)}>
{item.label}
</OptionPill>
))}
</div>
<ResolutionInput value={resolution} theme={theme} onChange={(value) => onConfigChange("vquality", value)} />
</SettingGroup>
<SettingGroup title="尺寸" color={theme.node.muted}>
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<DimensionInput prefix="W" value={dimensions.width} theme={theme} onChange={(value) => updateDimension("width", value)} />
<span className="text-lg opacity-45"></span>
<DimensionInput prefix="H" value={dimensions.height} theme={theme} onChange={(value) => updateDimension("height", value)} />
</div>
<div className="grid grid-cols-5 gap-2">
{sizeOptions.map((item) => (
<button
key={item.value}
type="button"
className="flex h-[82px] cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border bg-transparent text-xs 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>
</button>
))}
</div>
</SettingGroup>
<SettingGroup title="秒数" color={theme.node.muted}>
<div className="grid grid-cols-5 gap-2">
{secondOptions.map((value) => (
<OptionPill key={value} selected={seconds === String(value)} theme={theme} onClick={() => onConfigChange("videoSeconds", String(value))}>
{value}s
</OptionPill>
))}
<input
type="number"
min={6}
max={20}
className="col-span-2 h-10 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={seconds}
onChange={(event) => onConfigChange("videoSeconds", event.target.value)}
onMouseDown={(event) => event.stopPropagation()}
/>
</div>
</SettingGroup>
</div>
</CanvasImageSettingsTheme>
}
>
<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" />}>
<span className="truncate">
{resolution}p · {sizeLabel(size)} · {seconds}s
</span>
</Button>
</Popover>
);
}
function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onClick: () => void; children: ReactNode }) {
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 SettingGroup({ title, color, children }: { title: string; color: string; children: ReactNode }) {
return (
<div className="space-y-3">
<div className="text-xs font-medium" style={{ color }}>
{title}
</div>
{children}
</div>
);
}
function ResolutionInput({ value, theme, onChange }: { value: string; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: string) => void }) {
return (
<label className="flex h-10 overflow-hidden rounded-xl 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 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-10 place-items-center" style={{ color: theme.node.muted }}>
p
</span>
</label>
);
}
function DimensionInput({ prefix, value, theme, onChange }: { prefix: string; value: number; 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 }}>
<span className="grid w-10 place-items-center" style={{ color: theme.node.muted }}>
{prefix}
</span>
<input
type="number"
min={1}
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 SizePreview({ width, height, color }: { width: number; height: number; color: string }) {
const longSide = Math.max(width, height);
const previewWidth = Math.max(12, Math.round((width / longSide) * 34));
const previewHeight = Math.max(12, Math.round((height / longSide) * 34));
return <span className="rounded-[4px] border" style={{ width: previewWidth, height: previewHeight, borderColor: color }} />;
}
function normalizeVideoSize(value: string) {
if (/^\d+x\d+$/.test(value || "")) return value;
return ["9:16", "2:3", "3:4"].includes(value) ? "720x1280" : "1280x720";
}
function normalizeVideoResolution(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 readSizeDimensions(size: string) {
const match = size.match(/^(\d+)x(\d+)$/);
return { width: Number(match?.[1]) || 1280, height: Number(match?.[2]) || 720 };
}
function sizeLabel(value: string) {
return ({ "720x1280": "竖屏", "1280x720": "横屏", "1024x1024": "方形", "1792x1024": "宽屏", "1024x1792": "长图" } as Record<string, string>)[value] || value;
}
+5
View File
@@ -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) {
@@ -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] }));
+4 -1
View File
@@ -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;
@@ -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 };
}
+6 -1
View File
@@ -51,7 +51,12 @@ type GenerationLog = {
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 qualityOptions = [
{ label: "auto", value: "auto" },
{ label: "low / 1K", value: "low" },
{ label: "medium / 2K", value: "medium" },
{ label: "high / 4K", value: "high" },
];
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" });
+62 -9
View File
@@ -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 });
message.success("登录成功");
if (mode === "register" && !allowRegister) {
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>
<p className="mt-3 text-base leading-7 text-stone-500 dark:text-stone-400"></p>
<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"> 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}>
</Button>
{mode === "register" ? (
<Form.Item name="confirmPassword" label={<span className="font-medium text-stone-800 dark:text-stone-200"></span>} rules={[{ required: true, message: "请再次输入密码" }]}>
<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>
+3
View File
@@ -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, {
@@ -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>
@@ -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,15 +61,26 @@ 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} />
{variant === "canvas" ? (
<Tooltip title="当前算力点余额" placement="bottom">
<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 }}>
<CreditSymbol className="text-sm leading-none" />
<span>{credits.toLocaleString()}</span>
</div>
</Tooltip>
) : null}
<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="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"
style={avatarStyle}
aria-label="账户菜单"
>
<span className="leading-none">{avatarText}</span>
<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>
+20 -5
View File
@@ -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 "";
}
+1 -1
View File
@@ -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}
+25
View File
@@ -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;
}
+93
View File
@@ -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 = {
+4 -1
View File
@@ -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) {
+71 -11
View File
@@ -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,50 @@ 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 resolveImageDataUrl(item: Record<string, unknown>) {
if (typeof item.b64_json === "string" && item.b64_json) {
return `data:image/png;base64,${item.b64_json}`;
@@ -77,16 +122,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 }
: undefined
? {
...(token ? { Authorization: `Bearer ${token}` } : {}),
...(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 +145,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 pixelSize = quality ? resolveSize(quality, config.size) : undefined;
try {
const response = await axios.post<ImageApiResponse>(
aiApiUrl(config, "/images/generations"),
@@ -101,15 +154,17 @@ export async function requestGeneration(config: AiConfig, prompt: string) {
model: config.model,
prompt: withSystemPrompt(config, prompt),
n,
quality: config.quality || undefined,
size: config.size || undefined,
...(quality ? { quality } : {}),
...(pixelSize ? { size: pixelSize } : {}),
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 +172,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 pixelSize = quality ? resolveSize(quality, config.size) : undefined;
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) {
formData.set("quality", config.quality);
if (quality) {
formData.set("quality", quality);
}
if (config.size) {
formData.set("size", config.size);
if (pixelSize) {
formData.set("size", pixelSize);
}
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 +256,7 @@ export async function requestImageQuestion(config: AiConfig, messages: ChatCompl
} catch (error) {
throw new Error(readAxiosError(error, "请求失败"));
}
refreshRemoteUser(config);
return answer || "没有返回内容";
}
+86
View File
@@ -0,0 +1,86 @@
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));
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;
}
function normalizeVideoSeconds(value: string) {
return String(Math.max(1, Math.floor(Number(value) || 6)));
}
function normalizeVideoSize(value: string) {
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;
}
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 || "视频下载失败");
}
+56
View File
@@ -0,0 +1,56 @@
"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 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;
});
}
+6 -2
View File
@@ -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);
},
}),
+12 -4
View File
@@ -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,
imageModel: models.includes(config.imageModel) ? config.imageModel : modelChannel.defaultImageModel || modelChannel.defaultModel,
textModel: models.includes(config.textModel) ? config.textModel : modelChannel.defaultTextModel || modelChannel.defaultModel,
model: models.includes(config.model) ? config.model : fallbackModel,
imageModel: models.includes(config.imageModel) ? config.imageModel : modelChannel.defaultImageModel || fallbackModel,
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" } };
},
},
),