全量提交: base_device子查询修复+SyncDevices父设备ParentDeviceId=0+KmsAdapter+前端多项修复
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
.react-router
|
||||
build
|
||||
node_modules
|
||||
README.md
|
||||
@@ -0,0 +1,4 @@
|
||||
VITE_API_BASE_URL=/api
|
||||
|
||||
# 路由前缀
|
||||
VITE_BASENAME=/web/
|
||||
@@ -0,0 +1,4 @@
|
||||
VITE_API_BASE_URL=/
|
||||
|
||||
# 路由前缀 - 必须与 react-router.config.ts 中的 basename 一致
|
||||
VITE_BASENAME=/web/
|
||||
@@ -0,0 +1,58 @@
|
||||
name: Build and Release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
|
||||
- name: Enable Corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --immutable
|
||||
|
||||
- name: Build
|
||||
run: yarn build
|
||||
|
||||
- name: Rename dist to www and create zip
|
||||
run: |
|
||||
mv dist www
|
||||
zip -r www.zip www
|
||||
|
||||
- name: Delete existing latest release
|
||||
uses: dev-drprasad/delete-tag-and-release@v1.1
|
||||
with:
|
||||
tag_name: latest
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
delete_release: true
|
||||
continue-on-error: true
|
||||
|
||||
- name: Create latest release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: latest
|
||||
name: Latest Build
|
||||
body: |
|
||||
自动构建的最新版本
|
||||
|
||||
构建时间: ${{ github.event.head_commit.timestamp }}
|
||||
提交: ${{ github.sha }}
|
||||
files: www.zip
|
||||
prerelease: false
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
@@ -0,0 +1,10 @@
|
||||
.DS_Store
|
||||
/node_modules/
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
dist/
|
||||
.cursor/
|
||||
.remember/
|
||||
stats.html
|
||||
Binary file not shown.
+948
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-4.9.1.cjs
|
||||
@@ -0,0 +1,22 @@
|
||||
FROM node:20-alpine AS development-dependencies-env
|
||||
COPY . /app
|
||||
WORKDIR /app
|
||||
RUN npm ci
|
||||
|
||||
FROM node:20-alpine AS production-dependencies-env
|
||||
COPY ./package.json package-lock.json /app/
|
||||
WORKDIR /app
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
FROM node:20-alpine AS build-env
|
||||
COPY . /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN npm run build
|
||||
|
||||
FROM node:20-alpine
|
||||
COPY ./package.json package-lock.json /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["npm", "run", "start"]
|
||||
@@ -0,0 +1,25 @@
|
||||
FROM oven/bun:1 AS dependencies-env
|
||||
COPY . /app
|
||||
|
||||
FROM dependencies-env AS development-dependencies-env
|
||||
COPY ./package.json bun.lockb /app/
|
||||
WORKDIR /app
|
||||
RUN bun i --frozen-lockfile
|
||||
|
||||
FROM dependencies-env AS production-dependencies-env
|
||||
COPY ./package.json bun.lockb /app/
|
||||
WORKDIR /app
|
||||
RUN bun i --production
|
||||
|
||||
FROM dependencies-env AS build-env
|
||||
COPY ./package.json bun.lockb /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN bun run build
|
||||
|
||||
FROM dependencies-env
|
||||
COPY ./package.json bun.lockb /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["bun", "run", "start"]
|
||||
@@ -0,0 +1,26 @@
|
||||
FROM node:20-alpine AS dependencies-env
|
||||
RUN npm i -g pnpm
|
||||
COPY . /app
|
||||
|
||||
FROM dependencies-env AS development-dependencies-env
|
||||
COPY ./package.json pnpm-lock.yaml /app/
|
||||
WORKDIR /app
|
||||
RUN pnpm i --frozen-lockfile
|
||||
|
||||
FROM dependencies-env AS production-dependencies-env
|
||||
COPY ./package.json pnpm-lock.yaml /app/
|
||||
WORKDIR /app
|
||||
RUN pnpm i --prod --frozen-lockfile
|
||||
|
||||
FROM dependencies-env AS build-env
|
||||
COPY ./package.json pnpm-lock.yaml /app/
|
||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
||||
WORKDIR /app
|
||||
RUN pnpm build
|
||||
|
||||
FROM dependencies-env
|
||||
COPY ./package.json pnpm-lock.yaml /app/
|
||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
||||
COPY --from=build-env /app/build /app/build
|
||||
WORKDIR /app
|
||||
CMD ["pnpm", "start"]
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2024 gowvp
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,4 @@
|
||||
.phony: build/cli
|
||||
build/cli:
|
||||
@yarn build
|
||||
@rm -rf ../gb28181/www && mv dist ../gb28181/www
|
||||
@@ -0,0 +1,214 @@
|
||||
# PTZ 云台控制功能实现说明
|
||||
|
||||
## 概述
|
||||
|
||||
已成功为 GB28181 Web 前端项目添加了完整的 PTZ(云台)控制功能,支持 GB28181 协议的摄像头设备。
|
||||
|
||||
## 实现内容
|
||||
|
||||
### 1. API 接口层
|
||||
|
||||
**文件**: `app/service/api/channel/channel.ts`
|
||||
|
||||
添加了以下类型和函数:
|
||||
|
||||
```typescript
|
||||
// PTZ 动作类型
|
||||
type PTZAction = "continuous" | "stop" | "absolute" | "relative" | "preset";
|
||||
|
||||
// PTZ 方向
|
||||
type PTZDirection =
|
||||
| "up" | "down" | "left" | "right"
|
||||
| "upleft" | "upright" | "downleft" | "downright"
|
||||
| "zoomin" | "zoomout";
|
||||
|
||||
// PTZ 控制输入
|
||||
interface PTZControlInput {
|
||||
action: PTZAction;
|
||||
direction?: PTZDirection;
|
||||
speed?: number; // 0-1, 默认 0.5
|
||||
x?: number; // -1 到 1 (绝对/相对移动)
|
||||
y?: number; // -1 到 1 (绝对/相对移动)
|
||||
zoom?: number; // 0 到 1 (绝对/相对移动)
|
||||
preset_id?: string; // 预置位 ID
|
||||
preset_op?: PresetOp; // 预置位操作
|
||||
}
|
||||
|
||||
// PTZ 控制函数
|
||||
async function PTZControl(channelId: string, data: PTZControlInput)
|
||||
```
|
||||
|
||||
### 2. UI 组件
|
||||
|
||||
#### PTZ 控制面板
|
||||
|
||||
**文件**: `app/components/ptz-control/ptz-panel.tsx`
|
||||
|
||||
功能特性:
|
||||
- ✅ 方向控制按钮(上、下、左、右)
|
||||
- ✅ 对角线方向按钮(左上、右上、左下、右下)
|
||||
- ✅ 变焦控制(放大、缩小)
|
||||
- ✅ 停止按钮
|
||||
- ✅ 速度调节滑块(10% - 100%)
|
||||
- ✅ 按住移动,松开停止的交互方式
|
||||
- ✅ 触摸设备支持
|
||||
- ✅ 协议类型显示(GB28181)
|
||||
- ✅ 不支持设备的友好提示
|
||||
|
||||
UI 设计:
|
||||
- 采用十字方向键布局
|
||||
- 直观的图标和文字提示
|
||||
- 响应式设计,适配不同屏幕
|
||||
- 加载状态显示
|
||||
- 错误提示
|
||||
|
||||
#### Slider 组件
|
||||
|
||||
**文件**: `app/components/ui/slider.tsx`
|
||||
|
||||
基于 Radix UI 的 Slider 组件,用于速度控制。
|
||||
|
||||
### 3. 集成位置
|
||||
|
||||
**文件**: `app/pages/channels/device.tsx`
|
||||
|
||||
PTZ 控制面板已集成到设备详情视图的设备信息标签页中,当用户打开播放抽屉并查看设备详情时即可看到云台控制界面。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基本操作
|
||||
|
||||
1. **打开播放抽屉**: 点击任意通道卡片
|
||||
2. **查看设备详情**: 右侧会显示设备详细信息
|
||||
3. **使用云台控制**: 在设备信息标签页底部找到 PTZ 控制面板
|
||||
|
||||
### 控制方式
|
||||
|
||||
#### 方向控制
|
||||
- **点击并按住**方向按钮开始移动
|
||||
- **松开按钮**自动停止
|
||||
- 支持 8 个方向:上、下、左、右、左上、右上、左下、右下
|
||||
|
||||
#### 变焦控制
|
||||
- **点击并按住**"放大"或"缩小"按钮
|
||||
- **松开按钮**停止变焦
|
||||
|
||||
#### 速度调节
|
||||
- 拖动滑块调整移动速度
|
||||
- 范围:10% - 100%
|
||||
- 默认值:50%
|
||||
|
||||
#### 紧急停止
|
||||
- 点击红色停止按钮立即停止所有动作
|
||||
|
||||
### 请求流程
|
||||
|
||||
```
|
||||
用户操作
|
||||
↓
|
||||
PTZPanel 组件
|
||||
↓
|
||||
PTZControl API 调用
|
||||
↓
|
||||
POST /channels/{id}/ptz/control
|
||||
↓
|
||||
后端 IPC Core
|
||||
↓
|
||||
协议适配器(GB28181/ONVIF)
|
||||
↓
|
||||
摄像头设备
|
||||
```
|
||||
|
||||
### GB28181 实现
|
||||
|
||||
- 使用 SIP MESSAGE 方法发送控制命令
|
||||
- XML 格式: `<Control><CmdType>DeviceControl</CmdType>...</Control>`
|
||||
- 控制码格式: 8字节十六进制字符串
|
||||
- 仅支持 continuous 和 stop 动作
|
||||
|
||||
### ONVIF 实现
|
||||
|
||||
- 使用 ONVIF PTZ 服务
|
||||
- 支持 AbsoluteMove, RelativeMove, ContinuousMove
|
||||
- 支持预设位管理(GotoPreset, SetPreset, RemovePreset)
|
||||
- 完整的 PTZ 功能支持
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **设备必须在线**: 离线设备无法进行云台控制
|
||||
2. **设备必须支持 PTZ**: 不是所有摄像头都支持云台功能
|
||||
3. **GB28181 限制**: 仅支持连续移动和停止,不支持精确定位
|
||||
4. **网络延迟**: 云台控制可能有轻微延迟,属正常现象
|
||||
5. **权限要求**: 需要有效的认证 Token
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
**Q: 点击按钮没有反应?**
|
||||
A: 检查以下几点:
|
||||
- 设备是否在线
|
||||
- 设备类型是否为 GB28181 或 ONVIF
|
||||
- 浏览器控制台是否有错误信息
|
||||
- 网络连接是否正常
|
||||
|
||||
**Q: 移动速度太快/太慢?**
|
||||
A: 调整速度滑块,建议从 50% 开始尝试
|
||||
|
||||
**Q: 控制后不停止?**
|
||||
A: 点击红色的停止按钮,或松开当前按住的按钮
|
||||
|
||||
**Q: 提示"云台控制失败"?**
|
||||
A: 可能的原因:
|
||||
- 设备不支持 PTZ 功能
|
||||
- 设备配置问题
|
||||
- 后端服务异常
|
||||
- 查看浏览器控制台和网络请求获取详细错误
|
||||
|
||||
## 后续扩展
|
||||
|
||||
可以考虑添加的功能:
|
||||
|
||||
1. **预置位管理**: 保存和调用常用位置
|
||||
2. **巡航路径**: 自动巡视多个位置
|
||||
3. **键盘快捷键**: 使用方向键控制
|
||||
4. **鼠标拖拽**: 在视频上直接拖拽控制
|
||||
5. **手势控制**: 移动端滑动手势
|
||||
6. **控制历史记录**: 查看最近的控制操作
|
||||
7. **批量控制**: 同时控制多个摄像头
|
||||
|
||||
## 文件清单
|
||||
|
||||
新增文件:
|
||||
- `app/service/api/channel/channel.ts` (修改,添加 PTZ API)
|
||||
- `app/components/ptz-control/ptz-panel.tsx` (新增)
|
||||
- `app/components/ui/slider.tsx` (新增)
|
||||
- `app/pages/channels/device.tsx` (修改,集成 PTZ 面板)
|
||||
- `package.json` (修改,添加 @radix-ui/react-slider 依赖)
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **功能测试**:
|
||||
- 测试所有方向的移动
|
||||
- 测试变焦功能
|
||||
- 测试速度调节
|
||||
- 测试停止功能
|
||||
|
||||
2. **兼容性测试**:
|
||||
- Chrome/Edge/Firefox/Safari
|
||||
- 桌面端和移动端
|
||||
- 鼠标和触摸操作
|
||||
|
||||
3. **性能测试**:
|
||||
- 快速连续点击
|
||||
- 长时间按住
|
||||
- 多设备同时控制
|
||||
|
||||
4. **边界测试**:
|
||||
- 离线设备
|
||||
- 不支持 PTZ 的设备
|
||||
- 网络异常情况
|
||||
|
||||
## 总结
|
||||
|
||||
PTZ 云台控制功能已完整实现并集成到前端项目中,用户可以通过直观的界面控制支持 GB28181 协议的摄像头设备。界面简洁易用,支持多种控制方式,提供了良好的用户体验。
|
||||
@@ -0,0 +1,158 @@
|
||||
<p align="center">
|
||||
<img src="./docs/logo.avif" alt="GoWVP Logo" width="550"/>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/gowvp/gb28181/releases"><img src="https://img.shields.io/github/v/release/ixugo/goweb?include_prereleases" alt="Version"/></a>
|
||||
<a href="https://github.com/ixugo/goweb/blob/master/LICENSE.txt"><img src="https://img.shields.io/dub/l/vibe-d.svg" alt="License"/></a>
|
||||
</p>
|
||||
|
||||
# 开箱即用的 GB/T28181 协议视频平台
|
||||
|
||||
go wvp 是 Go 语言实现的开源 GB28181 解决方案，基于GB28181-2022标准实现的网络视频平台，支持 rtmp/rtsp，客户端支持网页版本和安卓 App。支持rtsp/rtmp等视频流转发到国标平台，支持rtsp/rtmp等推流转发到国标平台。
|
||||
|
||||
## Golang 服务端实现 [gb28181](github.com/gowvp/gb28181)
|
||||
|
||||
当前项目是由 React 实现的 web 管理平台
|
||||
|
||||
## 页面缩略图
|
||||
|
||||
|
||||
|
||||
|
||||
## 在线演示平台
|
||||
+ [在线演示平台 :)](http://gowvp.golang.space:15123/)
|
||||
|
||||
|
||||
|
||||
## 技术栈
|
||||
|
||||
前置要求:
|
||||
node.js > 20.x
|
||||
|
||||
+ [React 19](https://react.dev/)
|
||||
+ [TanStack Router](https://tanstack.com/router/latest)
|
||||
+ [shadcn/ui](https://ui.shadcn.com/)
|
||||
+ [Vite 7](https://cn.vitejs.dev/)
|
||||
+ [Tailwind CSS 4](https://tailwindcss.com/) - 使用 @tailwindcss/vite 插件
|
||||
+ [React Query](https://tanstack.com/query/latest/docs/framework/react/overview)
|
||||
+ [TypeScript](https://www.typescriptlang.org/)
|
||||
+ [Biome](https://biomejs.dev/) - 代码格式化和 lint
|
||||
|
||||
## 使用帮助
|
||||
|
||||
路由跳转
|
||||
|
||||
```tsx
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClick = () => {
|
||||
navigate({ to: '/about' });
|
||||
}
|
||||
|
||||
// 带搜索参数的导航
|
||||
navigate({ to: '/zones', search: { cid: '123' } });
|
||||
```
|
||||
|
||||
vite 配置代理
|
||||
```ts
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:18081",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
## 生产模式公共前缀
|
||||
|
||||
开发模式下，Vite 默认的开发服务器是以 / 为根路径运行的，而生产环境会以设置的 base 作为根路径。为了兼容开发模式和生产模式，可以按以下方式进行配置。
|
||||
值为 `./` 会导致开发模式下出错
|
||||
|
||||
|
||||
1. 更新 vite.config.ts
|
||||
```ts
|
||||
base: mode === "development" ? "/" : "/web/",
|
||||
```
|
||||
|
||||
2. 其它静态文件
|
||||
```tsx
|
||||
<img src={`${import.meta.env.BASE_URL}assets/logo.avif`} alt="Logo" />
|
||||
```
|
||||
|
||||
## 开发与生成环境区分
|
||||
|
||||
`yarn dev` 加载 `.env.development` 环境变量
|
||||
|
||||
`yarn build` 加载 `.env.production` 环境变量
|
||||
|
||||
### 其它
|
||||
|
||||
**drawer 背景动画**
|
||||
需要使用 DrawerCSSProvider 包裹父组件，动画才生效
|
||||
|
||||
**react-resizable-panels**
|
||||
导入 shadcn-ui 的 resizable ，需要额外执行
|
||||
`yarn add react-resizable-panels`
|
||||
|
||||
vite.config.ts 需要增加以下配置，否则模块加载会出问题
|
||||
|
||||
```ts
|
||||
ssr: {
|
||||
// 外部化会导致问题的依赖项
|
||||
noExternal: ["react-resizable-panels"],
|
||||
},
|
||||
```
|
||||
|
||||
### 部署
|
||||
|
||||
Start the development server with HMR:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Your application will be available at `http://localhost:5173`.
|
||||
|
||||
## Building for Production
|
||||
|
||||
Create a production build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Docker Deployment
|
||||
|
||||
This template includes three Dockerfiles optimized for different package managers:
|
||||
|
||||
- `Dockerfile` - for npm
|
||||
- `Dockerfile.pnpm` - for pnpm
|
||||
- `Dockerfile.bun` - for bun
|
||||
|
||||
To build and run using Docker:
|
||||
|
||||
```bash
|
||||
# For npm
|
||||
docker build -t my-app .
|
||||
|
||||
# For pnpm
|
||||
docker build -f Dockerfile.pnpm -t my-app .
|
||||
|
||||
# For bun
|
||||
docker build -f Dockerfile.bun -t my-app .
|
||||
|
||||
# Run the container
|
||||
docker run -p 3000:3000 my-app
|
||||
```
|
||||
|
||||
The containerized application can be deployed to any platform that supports Docker,
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* 自定义主题配置 - Tailwind v4 使用 @theme 指令 */
|
||||
@theme {
|
||||
/* 颜色 */
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
--color-chart-1: hsl(var(--chart-1));
|
||||
--color-chart-2: hsl(var(--chart-2));
|
||||
--color-chart-3: hsl(var(--chart-3));
|
||||
--color-chart-4: hsl(var(--chart-4));
|
||||
--color-chart-5: hsl(var(--chart-5));
|
||||
--color-sidebar: hsl(var(--sidebar-background));
|
||||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||||
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
||||
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
||||
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
||||
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
||||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||||
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
||||
|
||||
/* 圆角 */
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
/* 动画 */
|
||||
--animate-ripple: ripple 1.2s linear infinite;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #f4f4f4;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html,
|
||||
body {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
||||
}
|
||||
|
||||
/* Antd Modal 圆角加大，贴近 Apple 弹窗风格 */
|
||||
.ant-modal-content {
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格分页组件右侧内边距，不影响表格本身 */
|
||||
.ant-table-pagination.ant-pagination {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
@keyframes livePulse {
|
||||
0% { transform: scale(1); opacity: 0.6; }
|
||||
100% { transform: scale(2.5); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Handle, type HandleProps } from "@xyflow/react";
|
||||
import { forwardRef } from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
export type BaseHandleProps = HandleProps;
|
||||
|
||||
export const BaseHandle = forwardRef<HTMLDivElement, BaseHandleProps>(
|
||||
({ className, children, ...props }, ref) => {
|
||||
return (
|
||||
<Handle
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(
|
||||
"h-[11px] w-[11px] rounded-full border border-slate-300 bg-slate-100 transition dark:border-secondary dark:bg-secondary",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Handle>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
BaseHandle.displayName = "BaseHandle";
|
||||
@@ -0,0 +1,21 @@
|
||||
import { forwardRef } from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
export const BaseNode = forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & { selected?: boolean }
|
||||
>(({ className, selected, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative rounded-md border bg-card p-5 text-card-foreground",
|
||||
className,
|
||||
selected ? "border-muted-foreground shadow-lg" : "",
|
||||
"hover:ring-1",
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
BaseNode.displayName = "BaseNode";
|
||||
@@ -0,0 +1,225 @@
|
||||
import { useMemo, useState, useCallback } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
interface RecordingCalendarProps {
|
||||
/** 有录像的日期列表，格式为 "YYYY-MM-DD" */
|
||||
recordingDates: string[];
|
||||
/** 当前选中的日期 */
|
||||
selectedDate: Date;
|
||||
/** 日期选择回调 */
|
||||
onDateSelect: (date: Date) => void;
|
||||
/** 月份变化回调（用于加载该月的录像统计） */
|
||||
onMonthChange?: (year: number, month: number) => void;
|
||||
/** 是否加载中 */
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
|
||||
/**
|
||||
* 录像日历组件
|
||||
* 显示月历视图，标记有录像的日期
|
||||
*/
|
||||
export function RecordingCalendar({
|
||||
recordingDates,
|
||||
selectedDate,
|
||||
onDateSelect,
|
||||
onMonthChange,
|
||||
isLoading = false,
|
||||
}: RecordingCalendarProps) {
|
||||
const [viewDate, setViewDate] = useState(() => {
|
||||
return new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
||||
});
|
||||
|
||||
// 切换到上个月
|
||||
const goToPrevMonth = useCallback(() => {
|
||||
setViewDate((prev) => {
|
||||
const newDate = new Date(prev.getFullYear(), prev.getMonth() - 1, 1);
|
||||
onMonthChange?.(newDate.getFullYear(), newDate.getMonth() + 1);
|
||||
return newDate;
|
||||
});
|
||||
}, [onMonthChange]);
|
||||
|
||||
// 切换到下个月
|
||||
const goToNextMonth = useCallback(() => {
|
||||
setViewDate((prev) => {
|
||||
const newDate = new Date(prev.getFullYear(), prev.getMonth() + 1, 1);
|
||||
onMonthChange?.(newDate.getFullYear(), newDate.getMonth() + 1);
|
||||
return newDate;
|
||||
});
|
||||
}, [onMonthChange]);
|
||||
|
||||
// 回到今天
|
||||
const goToToday = useCallback(() => {
|
||||
const today = new Date();
|
||||
setViewDate(new Date(today.getFullYear(), today.getMonth(), 1));
|
||||
onDateSelect(today);
|
||||
onMonthChange?.(today.getFullYear(), today.getMonth() + 1);
|
||||
}, [onDateSelect, onMonthChange]);
|
||||
|
||||
// 生成日历网格
|
||||
const calendarDays = useMemo(() => {
|
||||
const year = viewDate.getFullYear();
|
||||
const month = viewDate.getMonth();
|
||||
|
||||
// 当月第一天是星期几
|
||||
const firstDayOfMonth = new Date(year, month, 1).getDay();
|
||||
// 当月有多少天
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
// 上个月有多少天
|
||||
const daysInPrevMonth = new Date(year, month, 0).getDate();
|
||||
|
||||
const days: {
|
||||
date: Date;
|
||||
day: number;
|
||||
isCurrentMonth: boolean;
|
||||
isToday: boolean;
|
||||
isSelected: boolean;
|
||||
hasRecording: boolean;
|
||||
}[] = [];
|
||||
|
||||
// 填充上个月的日期
|
||||
for (let i = firstDayOfMonth - 1; i >= 0; i--) {
|
||||
const day = daysInPrevMonth - i;
|
||||
const date = new Date(year, month - 1, day);
|
||||
days.push({
|
||||
date,
|
||||
day,
|
||||
isCurrentMonth: false,
|
||||
isToday: false,
|
||||
isSelected: false,
|
||||
hasRecording: false,
|
||||
});
|
||||
}
|
||||
|
||||
// 填充当月日期
|
||||
const today = new Date();
|
||||
const todayStr = formatDate(today);
|
||||
const selectedStr = formatDate(selectedDate);
|
||||
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
const dateStr = formatDate(date);
|
||||
days.push({
|
||||
date,
|
||||
day,
|
||||
isCurrentMonth: true,
|
||||
isToday: dateStr === todayStr,
|
||||
isSelected: dateStr === selectedStr,
|
||||
hasRecording: recordingDates.includes(dateStr),
|
||||
});
|
||||
}
|
||||
|
||||
// 填充下个月的日期（补满 6 行）
|
||||
const remainingDays = 42 - days.length;
|
||||
for (let day = 1; day <= remainingDays; day++) {
|
||||
const date = new Date(year, month + 1, day);
|
||||
days.push({
|
||||
date,
|
||||
day,
|
||||
isCurrentMonth: false,
|
||||
isToday: false,
|
||||
isSelected: false,
|
||||
hasRecording: false,
|
||||
});
|
||||
}
|
||||
|
||||
return days;
|
||||
}, [viewDate, selectedDate, recordingDates]);
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD
|
||||
function formatDate(date: Date): string {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||
{/* 头部：月份导航 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToPrevMonth}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg font-semibold">
|
||||
{viewDate.getFullYear()}年{viewDate.getMonth() + 1}月
|
||||
</span>
|
||||
<Button variant="outline" size="sm" onClick={goToToday}>
|
||||
今天
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToNextMonth}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 星期标题 */}
|
||||
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||
{WEEKDAYS.map((day) => (
|
||||
<div
|
||||
key={day}
|
||||
className="text-center text-xs font-medium text-gray-500 py-1"
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 日期网格 */}
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{calendarDays.map((dayInfo, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
className={cn(
|
||||
"relative aspect-square flex items-center justify-center rounded-lg text-sm transition-colors",
|
||||
dayInfo.isCurrentMonth
|
||||
? "text-gray-900 hover:bg-gray-100"
|
||||
: "text-gray-300",
|
||||
dayInfo.isToday && "ring-2 ring-blue-400",
|
||||
dayInfo.isSelected && "bg-blue-500 text-white hover:bg-blue-600",
|
||||
!dayInfo.isCurrentMonth && "pointer-events-none",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (dayInfo.isCurrentMonth) {
|
||||
onDateSelect(dayInfo.date);
|
||||
}
|
||||
}}
|
||||
disabled={!dayInfo.isCurrentMonth}
|
||||
>
|
||||
{dayInfo.day}
|
||||
{/* 有录像的标记（蓝色圆点） */}
|
||||
{dayInfo.hasRecording && !dayInfo.isSelected && (
|
||||
<span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-blue-500 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 加载状态 */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-white/50 flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecordingCalendar;
|
||||
@@ -0,0 +1,154 @@
|
||||
import type { Edge, EdgeProps, Node } from "@xyflow/react";
|
||||
import {
|
||||
BaseEdge,
|
||||
EdgeLabelRenderer,
|
||||
getBezierPath,
|
||||
getSmoothStepPath,
|
||||
getStraightPath,
|
||||
type Position,
|
||||
useStore,
|
||||
} from "@xyflow/react";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export type DataEdge<T extends Node = Node> = Edge<{
|
||||
/**
|
||||
* The key to lookup in the source node's `data` object. For additional safety,
|
||||
* you can parameterize the `DataEdge` over the type of one of your nodes to
|
||||
* constrain the possible values of this key.
|
||||
*
|
||||
* If no key is provided this edge behaves identically to React Flow's default
|
||||
* edge component.
|
||||
*/
|
||||
key?: keyof T["data"];
|
||||
/**
|
||||
* Which of React Flow's path algorithms to use. Each value corresponds to one
|
||||
* of React Flow's built-in edge types.
|
||||
*
|
||||
* If not provided, this defaults to `"bezier"`.
|
||||
*/
|
||||
path?: "bezier" | "smoothstep" | "step" | "straight";
|
||||
}>;
|
||||
|
||||
export function DataEdge({
|
||||
data = { path: "bezier" },
|
||||
id,
|
||||
markerEnd,
|
||||
source,
|
||||
sourcePosition,
|
||||
sourceX,
|
||||
sourceY,
|
||||
style,
|
||||
targetPosition,
|
||||
targetX,
|
||||
targetY,
|
||||
}: EdgeProps<DataEdge>) {
|
||||
const nodeData = useStore((state) => state.nodeLookup.get(source)?.data);
|
||||
const [edgePath, labelX, labelY] = getPath({
|
||||
type: data.path ?? "bezier",
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourcePosition,
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition,
|
||||
});
|
||||
|
||||
const label = useMemo(() => {
|
||||
if (data.key && nodeData) {
|
||||
const value = nodeData[data.key];
|
||||
|
||||
switch (typeof value) {
|
||||
case "string":
|
||||
case "number":
|
||||
return value;
|
||||
|
||||
case "object":
|
||||
return JSON.stringify(value);
|
||||
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}, [data, nodeData]);
|
||||
|
||||
const transform = `translate(${labelX}px,${labelY}px) translate(-50%, -50%)`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<BaseEdge id={id} path={edgePath} markerEnd={markerEnd} style={style} />
|
||||
{data.key && (
|
||||
<EdgeLabelRenderer>
|
||||
<div
|
||||
className="absolute rounded border bg-background px-1 text-foreground"
|
||||
style={{ transform }}
|
||||
>
|
||||
<pre className="text-xs">{label}</pre>
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Chooses which of React Flow's edge path algorithms to use based on the provided
|
||||
* `type`.
|
||||
*/
|
||||
function getPath({
|
||||
type,
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
}: {
|
||||
type: "bezier" | "smoothstep" | "step" | "straight";
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
targetX: number;
|
||||
targetY: number;
|
||||
sourcePosition: Position;
|
||||
targetPosition: Position;
|
||||
}) {
|
||||
switch (type) {
|
||||
case "bezier":
|
||||
return getBezierPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
});
|
||||
|
||||
case "smoothstep":
|
||||
return getSmoothStepPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
});
|
||||
|
||||
case "step":
|
||||
return getSmoothStepPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
borderRadius: 0,
|
||||
});
|
||||
|
||||
case "straight":
|
||||
return getStraightPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
import { Button, Input, Select, Slider, Spin } from "antd";
|
||||
import {
|
||||
Bell,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ExternalLink,
|
||||
RefreshCw,
|
||||
ScanSearch,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import type {
|
||||
CameraMarker,
|
||||
LatestCameraEvent,
|
||||
} from "~/pages/desktop/floor_plan.types";
|
||||
import type { FlatDeviceChannelOption } from "~/service/api/device/device";
|
||||
import type { FloorPlanInteractionMode } from "~/pages/desktop/floor_plan.storage";
|
||||
import { formatEventTimeAbsolute } from "~/pages/desktop/floor_plan.relative-time";
|
||||
|
||||
/**
|
||||
* 为什么要用“设备名称”而不是 device_id 做分组主键：
|
||||
* 现场绑点时，用户识别的是“卖场1、卖场2”这类业务名称，而不是长串国标 ID。
|
||||
* 把分组口径改成设备名称，能让多设备场景下的查找路径和用户心智一致，减少误绑和反复展开分组的成本。
|
||||
*/
|
||||
function buildGroupedChannelOptions(channelOptions: FlatDeviceChannelOption[]) {
|
||||
const grouped = new Map<
|
||||
string,
|
||||
{ label: string; options: Array<{ value: string; label: string }> }
|
||||
>();
|
||||
|
||||
for (const item of channelOptions) {
|
||||
const groupKey = item.deviceName;
|
||||
const group = grouped.get(groupKey) ?? {
|
||||
label: item.deviceName,
|
||||
options: [],
|
||||
};
|
||||
|
||||
group.options.push({
|
||||
value: item.value,
|
||||
label: `${item.deviceName} / ${item.channelName}`,
|
||||
});
|
||||
|
||||
grouped.set(groupKey, group);
|
||||
}
|
||||
|
||||
return Array.from(grouped.values())
|
||||
.map((group) => ({
|
||||
...group,
|
||||
options: group.options.sort((left, right) =>
|
||||
left.label.localeCompare(right.label, "zh-CN"),
|
||||
),
|
||||
}))
|
||||
.sort((left, right) => left.label.localeCompare(right.label, "zh-CN"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 为什么摄像头绑定面板要直接暴露加载状态和异常状态：
|
||||
* 绑定失败往往不是交互问题，而是后端分页、网络或数据规模导致的数据不完整。
|
||||
* 把这些状态留在面板里直接提示，能让现场排查更快定位到“是没加载全”，而不是误判成摄像头或布局有问题。
|
||||
*/
|
||||
export function CameraBindingPanel({
|
||||
camera,
|
||||
channelOptions,
|
||||
channelsLoading,
|
||||
channelsError,
|
||||
onBindChannel,
|
||||
onAngleChange,
|
||||
onFovChange,
|
||||
onRangeChange,
|
||||
onDelete,
|
||||
interactionMode = "edit",
|
||||
channelFilter = "",
|
||||
onChannelFilterChange,
|
||||
selectedLatestEvent = null,
|
||||
selectedEventLoading = false,
|
||||
channelOnline = null,
|
||||
playbackTo = null,
|
||||
alertsTo = null,
|
||||
eventOccurredAgo = "",
|
||||
dataFetchedAgo = "",
|
||||
onRefreshEvent,
|
||||
filterMatchCount = 0,
|
||||
filterMatchActiveIndex = 0,
|
||||
onFilterPrev,
|
||||
onFilterNext,
|
||||
onFilterFrameAll,
|
||||
}: {
|
||||
camera: CameraMarker | null;
|
||||
channelOptions: FlatDeviceChannelOption[];
|
||||
channelsLoading: boolean;
|
||||
channelsError: string | null;
|
||||
onBindChannel: (value: string | null) => void;
|
||||
onAngleChange: (value: number) => void;
|
||||
onFovChange: (value: number) => void;
|
||||
onRangeChange: (value: number) => void;
|
||||
onDelete: () => void;
|
||||
interactionMode?: FloorPlanInteractionMode;
|
||||
channelFilter?: string;
|
||||
onChannelFilterChange?: (value: string) => void;
|
||||
selectedLatestEvent?: LatestCameraEvent | null;
|
||||
selectedEventLoading?: boolean;
|
||||
channelOnline?: boolean | null;
|
||||
playbackTo?: { pathname: string; search: string } | null;
|
||||
alertsTo?: { pathname: string; search: string } | null;
|
||||
eventOccurredAgo?: string;
|
||||
dataFetchedAgo?: string;
|
||||
onRefreshEvent?: () => void;
|
||||
filterMatchCount?: number;
|
||||
filterMatchActiveIndex?: number;
|
||||
onFilterPrev?: () => void;
|
||||
onFilterNext?: () => void;
|
||||
onFilterFrameAll?: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation("desktop");
|
||||
|
||||
const groupedChannelOptions = useMemo(
|
||||
() => buildGroupedChannelOptions(channelOptions),
|
||||
[channelOptions],
|
||||
);
|
||||
|
||||
const editLocked = interactionMode === "browse";
|
||||
|
||||
const filterTrimmed = channelFilter.trim();
|
||||
const showFilterNav =
|
||||
Boolean(onChannelFilterChange) &&
|
||||
Boolean(filterTrimmed) &&
|
||||
Boolean(onFilterPrev && onFilterNext && onFilterFrameAll);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{onChannelFilterChange ? (
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-2 text-sm font-medium text-gray-900">
|
||||
{t("filter_cameras")}
|
||||
</div>
|
||||
<Input
|
||||
allowClear
|
||||
value={channelFilter}
|
||||
placeholder={t("filter_cameras_placeholder")}
|
||||
onChange={(e) => onChannelFilterChange(e.target.value)}
|
||||
/>
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
{t("filter_cameras_hint")}
|
||||
</div>
|
||||
{showFilterNav ? (
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-3">
|
||||
{filterMatchCount > 0 ? (
|
||||
<>
|
||||
<span className="text-xs text-gray-600">
|
||||
{t("filter_match_position", {
|
||||
current: filterMatchActiveIndex + 1,
|
||||
total: filterMatchCount,
|
||||
})}
|
||||
</span>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon={<ChevronLeft className="h-3.5 w-3.5" />}
|
||||
onClick={onFilterPrev}
|
||||
title={t("filter_prev_match")}
|
||||
/>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon={<ChevronRight className="h-3.5 w-3.5" />}
|
||||
onClick={onFilterNext}
|
||||
title={t("filter_next_match")}
|
||||
/>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon={<ScanSearch className="h-3.5 w-3.5" />}
|
||||
onClick={onFilterFrameAll}
|
||||
>
|
||||
{t("filter_frame_all")}
|
||||
</Button>
|
||||
<span className="w-full text-[11px] text-gray-400">
|
||||
{t("filter_keyboard_hint")}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-amber-700">
|
||||
{t("filter_no_matches")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{camera ? (
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="text-sm font-semibold text-gray-900">
|
||||
{t("panel_latest_ai_event")}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-end gap-1">
|
||||
{camera.channelId && onRefreshEvent ? (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<RefreshCw className="h-3.5 w-3.5" />}
|
||||
loading={selectedEventLoading}
|
||||
onClick={onRefreshEvent}
|
||||
title={t("refresh_event_tooltip")}
|
||||
/>
|
||||
) : null}
|
||||
{camera.channelId && alertsTo ? (
|
||||
<Link
|
||||
to={alertsTo}
|
||||
className="inline-flex items-center gap-1 rounded-lg bg-amber-600 px-2 py-1 text-xs font-medium text-white hover:bg-amber-700"
|
||||
>
|
||||
<Bell className="h-3.5 w-3.5" />
|
||||
{t("open_alerts")}
|
||||
</Link>
|
||||
) : null}
|
||||
{camera.channelId && playbackTo ? (
|
||||
<Link
|
||||
to={playbackTo}
|
||||
className="inline-flex items-center gap-1 rounded-lg bg-gray-900 px-2 py-1 text-xs font-medium text-white hover:bg-gray-800"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
{t("open_playback")}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{selectedEventLoading ? (
|
||||
<div className="flex min-h-20 items-center justify-center">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : selectedLatestEvent ? (
|
||||
<div className="space-y-2 text-xs text-gray-600">
|
||||
{selectedLatestEvent.imageSrc ? (
|
||||
<img
|
||||
src={selectedLatestEvent.imageSrc}
|
||||
alt={selectedLatestEvent.label}
|
||||
className="h-32 w-full rounded-lg border border-gray-200 object-cover"
|
||||
onError={() => {
|
||||
console.warn("[floor-plan] panel event image failed", {
|
||||
channelId: selectedLatestEvent.channelId,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">
|
||||
{t("latest_ai_event")}:{" "}
|
||||
</span>
|
||||
{selectedLatestEvent.label}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">
|
||||
{t("event_time")}:{" "}
|
||||
</span>
|
||||
{formatEventTimeAbsolute(selectedLatestEvent.startedAt)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">
|
||||
{t("score")}:{" "}
|
||||
</span>
|
||||
{(selectedLatestEvent.score * 100).toFixed(1)}%
|
||||
</div>
|
||||
{eventOccurredAgo ? (
|
||||
<div className="text-[11px] text-gray-500">
|
||||
{t("event_occurred_ago", { ago: eventOccurredAgo })}
|
||||
</div>
|
||||
) : null}
|
||||
{dataFetchedAgo ? (
|
||||
<div className="text-[11px] text-gray-400">
|
||||
{t("data_fetched_ago", { ago: dataFetchedAgo })}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="rounded-lg bg-gray-50 px-3 py-3 text-center text-sm text-gray-500">
|
||||
{camera.channelId ? t("no_ai_event") : t("camera_unbound")}
|
||||
</div>
|
||||
{camera.channelId && dataFetchedAgo ? (
|
||||
<div className="text-center text-[11px] text-gray-400">
|
||||
{t("data_fetched_ago", { ago: dataFetchedAgo })}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!camera ? (
|
||||
<div className="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-4 text-sm text-gray-500">
|
||||
{t("no_camera_selected")}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-1 text-sm font-semibold text-gray-900">
|
||||
{t("camera_settings")}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{t("position")}: {Math.round(camera.x)}, {Math.round(camera.y)}
|
||||
</div>
|
||||
{camera.channelId != null ? (
|
||||
<div className="mt-1 text-xs text-gray-600">
|
||||
<span className="font-medium text-gray-900">
|
||||
{t("channel_status")}:{" "}
|
||||
</span>
|
||||
{channelOnline === null
|
||||
? t("channel_online_unknown")
|
||||
: channelOnline
|
||||
? t("channel_online")
|
||||
: t("channel_offline")}
|
||||
</div>
|
||||
) : null}
|
||||
{editLocked ? (
|
||||
<div className="mt-2 text-xs leading-5 text-gray-500">
|
||||
{t("browse_camera_panel_edit_hidden_hint")}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{editLocked ? null : (
|
||||
<>
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-2 text-sm font-medium text-gray-900">
|
||||
{t("bind_channel")}
|
||||
</div>
|
||||
{channelsLoading ? (
|
||||
<div className="flex min-h-14 items-center justify-center">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Select
|
||||
className="w-full"
|
||||
showSearch
|
||||
allowClear
|
||||
placeholder={t("bind_channel_placeholder")}
|
||||
optionFilterProp="label"
|
||||
value={camera.channelId ?? undefined}
|
||||
options={groupedChannelOptions}
|
||||
onChange={(value) => onBindChannel(value ?? null)}
|
||||
/>
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
{t("channel_count_loaded", {
|
||||
count: channelOptions.length,
|
||||
})}
|
||||
</div>
|
||||
{channelsError ? (
|
||||
<div className="mt-1 text-xs text-amber-600">
|
||||
{t("channel_load_warning")}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
{camera.channelName || t("camera_unbound")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-3 text-sm font-medium text-gray-900">
|
||||
{t("direction")}
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={359}
|
||||
value={camera.angle}
|
||||
onChange={(value) => onAngleChange(Number(value))}
|
||||
/>
|
||||
|
||||
<div className="mb-3 mt-4 text-sm font-medium text-gray-900">
|
||||
{t("fov")}
|
||||
</div>
|
||||
<Slider
|
||||
min={20}
|
||||
max={160}
|
||||
value={camera.fov}
|
||||
onChange={(value) => onFovChange(Number(value))}
|
||||
/>
|
||||
|
||||
<div className="mb-3 mt-4 text-sm font-medium text-gray-900">
|
||||
{t("range")}
|
||||
</div>
|
||||
<Slider
|
||||
min={80}
|
||||
max={800}
|
||||
step={10}
|
||||
value={camera.range}
|
||||
onChange={(value) => onRangeChange(Number(value))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{t("delete_camera")}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import { Spin } from "antd";
|
||||
import { Bell, ExternalLink } from "lucide-react";
|
||||
import type { RefObject } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import type { CameraMarker, LatestCameraEvent } from "~/pages/desktop/floor_plan.types";
|
||||
|
||||
const CARD_WIDTH = 288;
|
||||
const CARD_HEIGHT_ESTIMATE = 320;
|
||||
|
||||
/**
|
||||
* 为什么单独做时间格式化并包 try：
|
||||
* 后端或脏数据可能给出非法时间戳，直接在 UI 层抛错会让整张卡片白屏；降级为可读的字符串更利于现场对照日志排查。
|
||||
*/
|
||||
function formatEventTime(timestamp: number | null | undefined) {
|
||||
if (!timestamp) {
|
||||
return "-";
|
||||
}
|
||||
try {
|
||||
return new Date(timestamp).toLocaleString();
|
||||
} catch {
|
||||
return String(timestamp);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 为什么按视口裁剪：
|
||||
* 卡片用 fixed 贴在视口上，必须用 window 尺寸裁剪，避免贴边被裁切。
|
||||
*/
|
||||
function clampCardPositionViewport(left: number, top: number) {
|
||||
const pad = 8;
|
||||
const vw = typeof window !== "undefined" ? window.innerWidth : 1200;
|
||||
const vh = typeof window !== "undefined" ? window.innerHeight : 800;
|
||||
let x = left;
|
||||
let y = top;
|
||||
if (x + CARD_WIDTH > vw - pad) {
|
||||
x = vw - CARD_WIDTH - pad;
|
||||
}
|
||||
if (y + CARD_HEIGHT_ESTIMATE > vh - pad) {
|
||||
y = vh - CARD_HEIGHT_ESTIMATE - pad;
|
||||
}
|
||||
if (x < pad) {
|
||||
x = pad;
|
||||
}
|
||||
if (y < pad) {
|
||||
y = pad;
|
||||
}
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
/**
|
||||
* 为什么用 Portal + fixed + 高于 FAB 的 z-index：
|
||||
* 卡片若在画布容器内 absolute，层叠上下文低于右下角 fixed z-50 的 FAB，且关闭菜单的透明层仍会占位拦截；挂到 body 并 z-[100] 才能保证链接可点。
|
||||
* 为什么用画布容器的 getBoundingClientRect + 锚点：
|
||||
* Konva 内坐标需换算成视口像素，才能与 fixed 对齐。
|
||||
*/
|
||||
export function CameraHoverCard({
|
||||
camera,
|
||||
latestEvent,
|
||||
loading,
|
||||
anchorX,
|
||||
anchorY,
|
||||
canvasContainerRef,
|
||||
channelOnline = null,
|
||||
playbackTo = null,
|
||||
alertsTo = null,
|
||||
onCardPointerEnter,
|
||||
onCardPointerLeave,
|
||||
eventOccurredAgo = "",
|
||||
dataFetchedAgo = "",
|
||||
}: {
|
||||
camera: CameraMarker;
|
||||
latestEvent: LatestCameraEvent | null;
|
||||
loading: boolean;
|
||||
/** 相对画布容器左上角的屏幕对齐坐标（与 Stage 内 worldToScreen 一致） */
|
||||
anchorX: number;
|
||||
anchorY: number;
|
||||
canvasContainerRef: RefObject<HTMLDivElement | null>;
|
||||
channelOnline?: boolean | null | undefined;
|
||||
playbackTo?: { pathname: string; search: string } | null;
|
||||
alertsTo?: { pathname: string; search: string } | null;
|
||||
/** 鼠标移入卡片时取消「离开摄像头」的延时清除，否则移向按钮途中卡片会消失 */
|
||||
onCardPointerEnter?: () => void;
|
||||
onCardPointerLeave?: () => void;
|
||||
/** 由父组件用当前时间与事件 startedAt 算出，避免卡片内再挂定时器 */
|
||||
eventOccurredAgo?: string;
|
||||
/** 本次卡片数据完成请求的时间，用于提示「缓存可能滞后」 */
|
||||
dataFetchedAgo?: string;
|
||||
}) {
|
||||
const { t } = useTranslation("desktop");
|
||||
|
||||
let left = 0;
|
||||
let top = 0;
|
||||
const el = canvasContainerRef.current;
|
||||
if (el && typeof window !== "undefined") {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const clamped = clampCardPositionViewport(rect.left + anchorX + 18, rect.top + anchorY + 18);
|
||||
left = clamped.x;
|
||||
top = clamped.y;
|
||||
}
|
||||
|
||||
const canPlayback = Boolean(camera.channelId && playbackTo);
|
||||
const canAlerts = Boolean(camera.channelId && alertsTo);
|
||||
|
||||
const node = (
|
||||
<div
|
||||
className="pointer-events-none fixed z-[100] w-72 rounded-xl border border-gray-200 bg-white/95 p-3 shadow-xl backdrop-blur"
|
||||
style={{ left, top }}
|
||||
onMouseEnter={onCardPointerEnter}
|
||||
onMouseLeave={onCardPointerLeave}
|
||||
>
|
||||
<div className="mb-2 flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1 text-sm font-semibold text-gray-900">
|
||||
{camera.channelName || t("camera_unbound")}
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap justify-end gap-1">
|
||||
{canAlerts && alertsTo ? (
|
||||
<Link
|
||||
to={alertsTo}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="pointer-events-auto inline-flex items-center gap-1 rounded-lg bg-amber-600 px-2 py-1 text-xs font-medium text-white hover:bg-amber-700"
|
||||
>
|
||||
<Bell className="h-3.5 w-3.5" />
|
||||
{t("open_alerts")}
|
||||
</Link>
|
||||
) : null}
|
||||
{canPlayback && playbackTo ? (
|
||||
<Link
|
||||
to={playbackTo}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="pointer-events-auto inline-flex items-center gap-1 rounded-lg bg-gray-900 px-2 py-1 text-xs font-medium text-white hover:bg-gray-800"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
{t("open_playback")}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{camera.channelId != null ? (
|
||||
<div className="mb-2 text-xs text-gray-600">
|
||||
<span className="font-medium text-gray-900">{t("channel_status")}: </span>
|
||||
{channelOnline === undefined
|
||||
? t("channel_online_unknown")
|
||||
: channelOnline
|
||||
? t("channel_online")
|
||||
: t("channel_offline")}
|
||||
</div>
|
||||
) : null}
|
||||
{loading ? (
|
||||
<div className="flex min-h-24 items-center justify-center">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : latestEvent ? (
|
||||
<>
|
||||
{latestEvent.imageSrc ? (
|
||||
<img
|
||||
src={latestEvent.imageSrc}
|
||||
alt={latestEvent.label}
|
||||
className="mb-3 h-36 w-full rounded-lg border border-gray-200 object-cover"
|
||||
onError={() => {
|
||||
console.warn("[floor-plan] failed to load hover event image", {
|
||||
channelId: latestEvent.channelId,
|
||||
imageSrc: latestEvent.imageSrc,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div className="space-y-1 text-xs text-gray-600">
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{t("latest_ai_event")}: </span>
|
||||
{latestEvent.label}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{t("score")}: </span>
|
||||
{(latestEvent.score * 100).toFixed(1)}%
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{t("event_time")}: </span>
|
||||
{formatEventTime(latestEvent.startedAt)}
|
||||
</div>
|
||||
{eventOccurredAgo ? (
|
||||
<div className="text-[11px] text-gray-500">{t("event_occurred_ago", { ago: eventOccurredAgo })}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="rounded-lg bg-gray-50 px-3 py-4 text-center text-sm text-gray-500">
|
||||
{t("no_ai_event")}
|
||||
</div>
|
||||
)}
|
||||
{!loading && dataFetchedAgo ? (
|
||||
<div
|
||||
className={`text-[11px] text-gray-400 ${latestEvent || !camera.channelId ? "mt-2 border-t border-gray-100 pt-2" : "mt-2 text-center"}`}
|
||||
>
|
||||
{t("data_fetched_ago", { ago: dataFetchedAgo })}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (typeof document === "undefined") {
|
||||
return null;
|
||||
}
|
||||
return createPortal(node, document.body);
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type {
|
||||
CameraMarker,
|
||||
FloorWall,
|
||||
PlannerView,
|
||||
} from "~/pages/desktop/floor_plan.types";
|
||||
import {
|
||||
FLOOR_PLAN_WORLD_HEIGHT,
|
||||
FLOOR_PLAN_WORLD_WIDTH,
|
||||
} from "~/pages/desktop/floor_plan.storage";
|
||||
|
||||
const MAP_W_DEFAULT = 168;
|
||||
const MAP_H_DEFAULT = 105;
|
||||
const MAP_W_COMPACT = 128;
|
||||
const MAP_H_COMPACT = 80;
|
||||
const DRAG_THRESHOLD_PX = 5;
|
||||
|
||||
type FloorPlanMinimapProps = {
|
||||
walls: FloorWall[];
|
||||
cameras: CameraMarker[];
|
||||
view: PlannerView;
|
||||
viewportWidth: number;
|
||||
viewportHeight: number;
|
||||
onCenterWorld: (worldX: number, worldY: number) => void;
|
||||
onPanViewByScreenDelta: (dx: number, dy: number) => void;
|
||||
/** 小屏缩小尺寸并上移，避免与底部提示条、安全区重叠 */
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* 为什么小地图用 SVG + viewBox：
|
||||
* 墙线在世界坐标是任意斜线；SVG 与 Konva 世界系一致，便于点击/拖拽换算。
|
||||
* 为什么区分轻点与拖拽：
|
||||
* 轻点仍用于「跳到该大致区域」，拖拽用于连续平移主视口，两者手势不同，阈值避免误触。
|
||||
*/
|
||||
export function FloorPlanMinimap({
|
||||
walls,
|
||||
cameras,
|
||||
view,
|
||||
viewportWidth,
|
||||
viewportHeight,
|
||||
onCenterWorld,
|
||||
onPanViewByScreenDelta,
|
||||
compact = false,
|
||||
}: FloorPlanMinimapProps) {
|
||||
const { t } = useTranslation("desktop");
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const MAP_W = compact ? MAP_W_COMPACT : MAP_W_DEFAULT;
|
||||
const MAP_H = compact ? MAP_H_COMPACT : MAP_H_DEFAULT;
|
||||
|
||||
const worldW = FLOOR_PLAN_WORLD_WIDTH;
|
||||
const worldH = FLOOR_PLAN_WORLD_HEIGHT;
|
||||
|
||||
const vpLeft = -view.x / view.scale;
|
||||
const vpTop = -view.y / view.scale;
|
||||
const vpW = viewportWidth / view.scale;
|
||||
const vpH = viewportHeight / view.scale;
|
||||
|
||||
const sessionRef = useRef<{
|
||||
pointerId: number;
|
||||
lastClientX: number;
|
||||
lastClientY: number;
|
||||
startClientX: number;
|
||||
startClientY: number;
|
||||
startedDrag: boolean;
|
||||
} | null>(null);
|
||||
|
||||
const clientToWorld = useCallback(
|
||||
(clientX: number, clientY: number, svg: SVGSVGElement) => {
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const nx = (clientX - rect.left) / rect.width;
|
||||
const ny = (clientY - rect.top) / rect.height;
|
||||
return { wx: nx * worldW, wy: ny * worldH };
|
||||
},
|
||||
[worldW, worldH],
|
||||
);
|
||||
|
||||
const endSession = useCallback((svg: SVGSVGElement, pointerId: number) => {
|
||||
try {
|
||||
svg.releasePointerCapture(pointerId);
|
||||
} catch {
|
||||
/* noop */
|
||||
}
|
||||
sessionRef.current = null;
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const onPointerDown = (event: React.PointerEvent<SVGSVGElement>) => {
|
||||
event.preventDefault();
|
||||
const svg = event.currentTarget;
|
||||
svg.setPointerCapture(event.pointerId);
|
||||
sessionRef.current = {
|
||||
pointerId: event.pointerId,
|
||||
lastClientX: event.clientX,
|
||||
lastClientY: event.clientY,
|
||||
startClientX: event.clientX,
|
||||
startClientY: event.clientY,
|
||||
startedDrag: false,
|
||||
};
|
||||
};
|
||||
|
||||
const onPointerMove = (event: React.PointerEvent<SVGSVGElement>) => {
|
||||
const session = sessionRef.current;
|
||||
if (!session || event.pointerId !== session.pointerId) {
|
||||
return;
|
||||
}
|
||||
const dx = event.clientX - session.lastClientX;
|
||||
const dy = event.clientY - session.lastClientY;
|
||||
const distFromStart = Math.hypot(
|
||||
event.clientX - session.startClientX,
|
||||
event.clientY - session.startClientY,
|
||||
);
|
||||
if (distFromStart > DRAG_THRESHOLD_PX) {
|
||||
if (!session.startedDrag) {
|
||||
session.startedDrag = true;
|
||||
setIsDragging(true);
|
||||
}
|
||||
onPanViewByScreenDelta(dx, dy);
|
||||
session.lastClientX = event.clientX;
|
||||
session.lastClientY = event.clientY;
|
||||
}
|
||||
};
|
||||
|
||||
const onPointerUp = (event: React.PointerEvent<SVGSVGElement>) => {
|
||||
const session = sessionRef.current;
|
||||
const svg = event.currentTarget;
|
||||
if (!session || event.pointerId !== session.pointerId) {
|
||||
return;
|
||||
}
|
||||
if (!session.startedDrag) {
|
||||
const { wx, wy } = clientToWorld(
|
||||
session.startClientX,
|
||||
session.startClientY,
|
||||
svg,
|
||||
);
|
||||
onCenterWorld(wx, wy);
|
||||
}
|
||||
endSession(svg, event.pointerId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`pointer-events-auto absolute left-4 z-30 flex flex-col gap-1 rounded-lg border border-gray-200 bg-white/95 p-1.5 shadow-md backdrop-blur ${
|
||||
compact
|
||||
? "bottom-[max(6.5rem,env(safe-area-inset-bottom))]"
|
||||
: "bottom-24"
|
||||
}`}
|
||||
title={t("minimap_hint")}
|
||||
>
|
||||
<svg
|
||||
role="img"
|
||||
width={MAP_W}
|
||||
height={MAP_H}
|
||||
viewBox={`0 0 ${worldW} ${worldH}`}
|
||||
className={`rounded border border-gray-200 bg-slate-50 touch-none ${isDragging ? "cursor-grabbing" : "cursor-crosshair"}`}
|
||||
preserveAspectRatio="none"
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerCancel={onPointerUp}
|
||||
>
|
||||
{walls.map((wall) => (
|
||||
<line
|
||||
key={wall.id}
|
||||
x1={wall.x1}
|
||||
y1={wall.y1}
|
||||
x2={wall.x2}
|
||||
y2={wall.y2}
|
||||
stroke="#94a3b8"
|
||||
strokeWidth={worldW / 200}
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
))}
|
||||
{cameras.map((camera) => (
|
||||
<circle
|
||||
key={camera.id}
|
||||
cx={camera.x}
|
||||
cy={camera.y}
|
||||
r={worldW / 160}
|
||||
fill="#3b82f6"
|
||||
stroke="#fff"
|
||||
strokeWidth={worldW / 400}
|
||||
/>
|
||||
))}
|
||||
{/* 视口框：non-scaling + 约 1px，避免 world 坐标 strokeWidth 在缩放后变成十几像素粗边 */}
|
||||
<rect
|
||||
x={Math.max(0, vpLeft)}
|
||||
y={Math.max(0, vpTop)}
|
||||
width={Math.min(worldW, vpW)}
|
||||
height={Math.min(worldH, vpH)}
|
||||
fill="rgba(59,130,246,0.12)"
|
||||
stroke="#2563eb"
|
||||
strokeWidth={1.25}
|
||||
vectorEffect="non-scaling-stroke"
|
||||
pointerEvents="none"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,419 @@
|
||||
/**
|
||||
* HLS 回放播放器组件
|
||||
*
|
||||
* 独立的视频回放播放器，基于 hls.js 实现，支持：
|
||||
* - HLS (m3u8) 格式播放
|
||||
* - MP4 直接播放
|
||||
* - 倍速播放 (0.5x - 3x)
|
||||
* - 进度控制和跳转
|
||||
* - 时间更新回调（用于时间轴同步）
|
||||
*
|
||||
* 设计为独立组件，可迁移到其他项目或作为独立仓库使用
|
||||
* 不依赖任何本地项目文件，仅依赖 hls.js 库
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* import HlsPlayer, { type HlsPlayerRef } from '@/components/hls-player';
|
||||
*
|
||||
* const playerRef = useRef<HlsPlayerRef>(null);
|
||||
*
|
||||
* <HlsPlayer
|
||||
* ref={playerRef}
|
||||
* onTimeUpdate={(time) => setCurrentTime(time)}
|
||||
* onDurationChange={(duration) => setDuration(duration)}
|
||||
* />
|
||||
*
|
||||
* // 播放 HLS
|
||||
* playerRef.current?.play('http://example.com/playlist.m3u8');
|
||||
*
|
||||
* // 设置倍速
|
||||
* playerRef.current?.setPlaybackRate(2);
|
||||
*
|
||||
* // 跳转到指定时间
|
||||
* playerRef.current?.seek(30); // 跳转到30秒
|
||||
* ```
|
||||
*/
|
||||
|
||||
import Hls from "hls.js";
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
|
||||
export interface HlsPlayerRef {
|
||||
/** 播放指定 URL（支持 m3u8 和 mp4） */
|
||||
play: (url: string) => void;
|
||||
/** 暂停播放 */
|
||||
pause: () => void;
|
||||
/** 继续播放 */
|
||||
resume: () => void;
|
||||
/** 停止播放并释放资源 */
|
||||
stop: () => void;
|
||||
/** 跳转到指定时间（秒） */
|
||||
seek: (time: number) => void;
|
||||
/** 设置播放速率 */
|
||||
setPlaybackRate: (rate: number) => void;
|
||||
/** 获取当前播放时间（秒） */
|
||||
getCurrentTime: () => number;
|
||||
/** 获取总时长（秒） */
|
||||
getDuration: () => number;
|
||||
/** 是否正在播放 */
|
||||
isPlaying: () => boolean;
|
||||
/** 设置音量 (0-1) */
|
||||
setVolume: (volume: number) => void;
|
||||
/** 静音/取消静音 */
|
||||
setMuted: (muted: boolean) => void;
|
||||
/** 快进指定秒数 */
|
||||
forward: (seconds: number) => void;
|
||||
/** 快退指定秒数 */
|
||||
backward: (seconds: number) => void;
|
||||
}
|
||||
|
||||
export interface HlsPlayerProps {
|
||||
/** 时间更新回调（毫秒） */
|
||||
onTimeUpdate?: (timeMs: number) => void;
|
||||
/** 总时长变化回调（毫秒） */
|
||||
onDurationChange?: (durationMs: number) => void;
|
||||
/** 播放状态变化回调 */
|
||||
onPlayStateChange?: (playing: boolean) => void;
|
||||
/** 加载状态变化回调 */
|
||||
onLoadingChange?: (loading: boolean) => void;
|
||||
/** 错误回调 */
|
||||
onError?: (error: Error) => void;
|
||||
/** 播放结束回调 */
|
||||
onEnded?: () => void;
|
||||
/** 自定义样式类名 */
|
||||
className?: string;
|
||||
/** 是否自动播放 */
|
||||
autoPlay?: boolean;
|
||||
/** 是否静音 */
|
||||
muted?: boolean;
|
||||
/** 是否显示原生控件 */
|
||||
controls?: boolean;
|
||||
}
|
||||
|
||||
// ==================== 组件实现 ====================
|
||||
|
||||
const HlsPlayer = forwardRef<HlsPlayerRef, HlsPlayerProps>(
|
||||
(
|
||||
{
|
||||
onTimeUpdate,
|
||||
onDurationChange,
|
||||
onPlayStateChange,
|
||||
onLoadingChange,
|
||||
onError,
|
||||
onEnded,
|
||||
className = "",
|
||||
autoPlay = true,
|
||||
muted = true,
|
||||
controls = false,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const hlsRef = useRef<Hls | null>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const currentUrlRef = useRef<string>("");
|
||||
|
||||
// 清理 HLS 实例
|
||||
const cleanup = useCallback(() => {
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy();
|
||||
hlsRef.current = null;
|
||||
}
|
||||
currentUrlRef.current = "";
|
||||
}, []);
|
||||
|
||||
// 组件卸载时清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
cleanup();
|
||||
};
|
||||
}, [cleanup]);
|
||||
|
||||
// 播放指定 URL
|
||||
const play = useCallback(
|
||||
(url: string) => {
|
||||
if (!videoRef.current) return;
|
||||
|
||||
// 如果是同一个 URL，直接播放
|
||||
if (url === currentUrlRef.current) {
|
||||
videoRef.current.play().catch(console.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// 清理之前的实例
|
||||
cleanup();
|
||||
currentUrlRef.current = url;
|
||||
onLoadingChange?.(true);
|
||||
|
||||
const video = videoRef.current;
|
||||
|
||||
// 判断是否为 HLS 格式
|
||||
const isHls = url.includes(".m3u8");
|
||||
|
||||
if (isHls && Hls.isSupported()) {
|
||||
// 使用 hls.js 播放
|
||||
const hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: false,
|
||||
// 针对 VOD 优化的配置
|
||||
maxBufferLength: 30,
|
||||
maxMaxBufferLength: 60,
|
||||
maxBufferSize: 60 * 1000 * 1000, // 60MB
|
||||
maxBufferHole: 0.5,
|
||||
});
|
||||
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
onLoadingChange?.(false);
|
||||
if (autoPlay) {
|
||||
video.play().catch(console.error);
|
||||
}
|
||||
});
|
||||
|
||||
hls.on(Hls.Events.ERROR, (_, data) => {
|
||||
if (data.fatal) {
|
||||
onLoadingChange?.(false);
|
||||
onError?.(new Error(`HLS Error: ${data.type} - ${data.details}`));
|
||||
|
||||
// 尝试恢复
|
||||
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
hls.startLoad();
|
||||
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
|
||||
hls.recoverMediaError();
|
||||
} else {
|
||||
cleanup();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
hlsRef.current = hls;
|
||||
} else if (
|
||||
isHls &&
|
||||
video.canPlayType("application/vnd.apple.mpegurl")
|
||||
) {
|
||||
// Safari 原生支持 HLS
|
||||
video.src = url;
|
||||
video.addEventListener(
|
||||
"loadedmetadata",
|
||||
() => {
|
||||
onLoadingChange?.(false);
|
||||
if (autoPlay) {
|
||||
video.play().catch(console.error);
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
} else {
|
||||
// 直接播放 MP4
|
||||
video.src = url;
|
||||
video.addEventListener(
|
||||
"loadedmetadata",
|
||||
() => {
|
||||
onLoadingChange?.(false);
|
||||
if (autoPlay) {
|
||||
video.play().catch(console.error);
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
},
|
||||
[autoPlay, cleanup, onError, onLoadingChange]
|
||||
);
|
||||
|
||||
// 暂停播放
|
||||
const pause = useCallback(() => {
|
||||
videoRef.current?.pause();
|
||||
}, []);
|
||||
|
||||
// 继续播放
|
||||
const resume = useCallback(() => {
|
||||
videoRef.current?.play().catch(console.error);
|
||||
}, []);
|
||||
|
||||
// 停止播放
|
||||
const stop = useCallback(() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.pause();
|
||||
videoRef.current.currentTime = 0;
|
||||
}
|
||||
cleanup();
|
||||
}, [cleanup]);
|
||||
|
||||
// 跳转到指定时间
|
||||
const seek = useCallback((time: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.currentTime = time;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 设置播放速率
|
||||
const setPlaybackRate = useCallback((rate: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = rate;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 获取当前时间
|
||||
const getCurrentTime = useCallback(() => {
|
||||
return videoRef.current?.currentTime ?? 0;
|
||||
}, []);
|
||||
|
||||
// 获取总时长
|
||||
const getDuration = useCallback(() => {
|
||||
return videoRef.current?.duration ?? 0;
|
||||
}, []);
|
||||
|
||||
// 是否正在播放
|
||||
const getIsPlaying = useCallback(() => {
|
||||
return isPlaying;
|
||||
}, [isPlaying]);
|
||||
|
||||
// 设置音量
|
||||
const setVolume = useCallback((volume: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.volume = Math.max(0, Math.min(1, volume));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 设置静音
|
||||
const setMuted = useCallback((mutedValue: boolean) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.muted = mutedValue;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 快进
|
||||
const forward = useCallback((seconds: number) => {
|
||||
if (videoRef.current) {
|
||||
const duration = videoRef.current.duration || 0;
|
||||
videoRef.current.currentTime = Math.min(
|
||||
duration,
|
||||
videoRef.current.currentTime + seconds
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 快退
|
||||
const backward = useCallback((seconds: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.currentTime = Math.max(
|
||||
0,
|
||||
videoRef.current.currentTime - seconds
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 暴露方法给父组件
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
play,
|
||||
pause,
|
||||
resume,
|
||||
stop,
|
||||
seek,
|
||||
setPlaybackRate,
|
||||
getCurrentTime,
|
||||
getDuration,
|
||||
isPlaying: getIsPlaying,
|
||||
setVolume,
|
||||
setMuted,
|
||||
forward,
|
||||
backward,
|
||||
}),
|
||||
[
|
||||
play,
|
||||
pause,
|
||||
resume,
|
||||
stop,
|
||||
seek,
|
||||
setPlaybackRate,
|
||||
getCurrentTime,
|
||||
getDuration,
|
||||
getIsPlaying,
|
||||
setVolume,
|
||||
setMuted,
|
||||
forward,
|
||||
backward,
|
||||
]
|
||||
);
|
||||
|
||||
// 视频事件处理
|
||||
const handleTimeUpdate = useCallback(() => {
|
||||
if (videoRef.current) {
|
||||
onTimeUpdate?.(videoRef.current.currentTime * 1000);
|
||||
}
|
||||
}, [onTimeUpdate]);
|
||||
|
||||
const handleDurationChange = useCallback(() => {
|
||||
if (videoRef.current && !Number.isNaN(videoRef.current.duration)) {
|
||||
onDurationChange?.(videoRef.current.duration * 1000);
|
||||
}
|
||||
}, [onDurationChange]);
|
||||
|
||||
const handlePlay = useCallback(() => {
|
||||
setIsPlaying(true);
|
||||
onPlayStateChange?.(true);
|
||||
}, [onPlayStateChange]);
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
onPlayStateChange?.(false);
|
||||
}, [onPlayStateChange]);
|
||||
|
||||
const handleEnded = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
onPlayStateChange?.(false);
|
||||
onEnded?.();
|
||||
}, [onPlayStateChange, onEnded]);
|
||||
|
||||
const handleError = useCallback(() => {
|
||||
onLoadingChange?.(false);
|
||||
if (videoRef.current?.error) {
|
||||
onError?.(new Error(videoRef.current.error.message || "Video error"));
|
||||
}
|
||||
}, [onError, onLoadingChange]);
|
||||
|
||||
const handleWaiting = useCallback(() => {
|
||||
onLoadingChange?.(true);
|
||||
}, [onLoadingChange]);
|
||||
|
||||
const handlePlaying = useCallback(() => {
|
||||
onLoadingChange?.(false);
|
||||
}, [onLoadingChange]);
|
||||
|
||||
return (
|
||||
<video
|
||||
ref={videoRef}
|
||||
className={`hls-player ${className}`}
|
||||
style={{ width: "100%", height: "100%", backgroundColor: "#000" }}
|
||||
muted={muted}
|
||||
controls={controls}
|
||||
playsInline
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onDurationChange={handleDurationChange}
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onEnded={handleEnded}
|
||||
onError={handleError}
|
||||
onWaiting={handleWaiting}
|
||||
onPlaying={handlePlaying}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
HlsPlayer.displayName = "HlsPlayer";
|
||||
|
||||
export default HlsPlayer;
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { HandleProps } from "@xyflow/react";
|
||||
import type React from "react";
|
||||
import { forwardRef } from "react";
|
||||
import { BaseHandle } from "~/components/base-handle";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const flexDirections = {
|
||||
top: "flex-col",
|
||||
right: "flex-row-reverse justify-end",
|
||||
bottom: "flex-col-reverse justify-end",
|
||||
left: "flex-row",
|
||||
};
|
||||
|
||||
export const LabeledHandle = forwardRef<
|
||||
HTMLDivElement,
|
||||
HandleProps &
|
||||
React.HTMLAttributes<HTMLDivElement> & {
|
||||
title: string;
|
||||
handleClassName?: string;
|
||||
labelClassName?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, labelClassName, handleClassName, title, position, ...props },
|
||||
ref,
|
||||
) => (
|
||||
<div
|
||||
ref={ref}
|
||||
title={title}
|
||||
className={cn(
|
||||
"relative flex items-center",
|
||||
flexDirections[position],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<BaseHandle position={position} className={handleClassName} {...props} />
|
||||
<label className={cn("px-3 text-sm text-foreground", labelClassName)}>
|
||||
{title}
|
||||
</label>
|
||||
</div>
|
||||
),
|
||||
);
|
||||
|
||||
LabeledHandle.displayName = "LabeledHandle";
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Languages } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
|
||||
export function LanguageSwitcher() {
|
||||
const { i18n, t } = useTranslation();
|
||||
|
||||
const changeLanguage = (lng: string) => {
|
||||
console.log("Changing language from", i18n.language, "to", lng);
|
||||
i18n.changeLanguage(lng).then(() => {
|
||||
console.log("Language changed to:", i18n.language);
|
||||
console.log("localStorage:", localStorage.getItem("i18nextLng"));
|
||||
});
|
||||
};
|
||||
|
||||
const currentLanguage = i18n.language || "zh";
|
||||
console.log("Current language in switcher:", currentLanguage);
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 rounded-full"
|
||||
title={t("common:language")}
|
||||
>
|
||||
<Languages className="h-5 w-5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-32">
|
||||
<DropdownMenuItem
|
||||
onClick={() => changeLanguage("zh")}
|
||||
className={currentLanguage === "zh" ? "bg-accent" : ""}
|
||||
>
|
||||
<span className="mr-2">🇨🇳</span>
|
||||
{t("common:chinese")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => changeLanguage("en")}
|
||||
className={currentLanguage === "en" ? "bg-accent" : ""}
|
||||
>
|
||||
<span className="mr-2">🇺🇸</span>
|
||||
{t("common:english")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,473 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
export interface VideoSegment {
|
||||
id: number | string;
|
||||
url: string;
|
||||
duration: number;
|
||||
startTime: number;
|
||||
endTime?: number;
|
||||
}
|
||||
|
||||
export interface Mp4PlayerRef {
|
||||
play: () => void;
|
||||
pause: () => void;
|
||||
resume: () => void;
|
||||
stop: () => void;
|
||||
seek: (time: number, autoPlay?: boolean) => void;
|
||||
setPlaybackRate: (rate: number) => void;
|
||||
getCurrentTime: () => number;
|
||||
getDuration: () => number;
|
||||
isPlaying: () => boolean;
|
||||
setMuted: (muted: boolean) => void;
|
||||
setVolume: (volume: number) => void;
|
||||
getVolume: () => number;
|
||||
}
|
||||
|
||||
export interface Mp4PlayerProps {
|
||||
segments: VideoSegment[];
|
||||
onTimeUpdate?: (timeSeconds: number) => void;
|
||||
onDurationChange?: (durationMs: number) => void;
|
||||
onPlayStateChange?: (playing: boolean) => void;
|
||||
onError?: (error: Error) => void;
|
||||
onSegmentError?: (segment: VideoSegment, error: Error) => void;
|
||||
onEnded?: () => void;
|
||||
className?: string;
|
||||
autoPlay?: boolean;
|
||||
controls?: boolean;
|
||||
}
|
||||
|
||||
type PendingSeek = {
|
||||
offsetSeconds: number;
|
||||
autoPlay: boolean;
|
||||
};
|
||||
|
||||
const Mp4Player = forwardRef<Mp4PlayerRef, Mp4PlayerProps>(
|
||||
(
|
||||
{
|
||||
segments,
|
||||
onTimeUpdate,
|
||||
onDurationChange,
|
||||
onPlayStateChange,
|
||||
onError,
|
||||
onSegmentError,
|
||||
onEnded,
|
||||
className = "",
|
||||
autoPlay = false,
|
||||
controls = false,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const currentIndexRef = useRef(0);
|
||||
const accumulatedTimeRef = useRef(0);
|
||||
const pendingSeekRef = useRef<PendingSeek | null>(null);
|
||||
const isPlayingRef = useRef(false);
|
||||
const playbackRateRef = useRef(1);
|
||||
const mutedRef = useRef(false);
|
||||
const volumeRef = useRef(1);
|
||||
const onTimeUpdateRef = useRef(onTimeUpdate);
|
||||
const onDurationChangeRef = useRef(onDurationChange);
|
||||
const onPlayStateChangeRef = useRef(onPlayStateChange);
|
||||
const onErrorRef = useRef(onError);
|
||||
const onSegmentErrorRef = useRef(onSegmentError);
|
||||
const onEndedRef = useRef(onEnded);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isPlayingState, setIsPlayingState] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
onTimeUpdateRef.current = onTimeUpdate;
|
||||
}, [onTimeUpdate]);
|
||||
|
||||
useEffect(() => {
|
||||
onDurationChangeRef.current = onDurationChange;
|
||||
}, [onDurationChange]);
|
||||
|
||||
useEffect(() => {
|
||||
onPlayStateChangeRef.current = onPlayStateChange;
|
||||
}, [onPlayStateChange]);
|
||||
|
||||
useEffect(() => {
|
||||
onErrorRef.current = onError;
|
||||
}, [onError]);
|
||||
|
||||
useEffect(() => {
|
||||
onSegmentErrorRef.current = onSegmentError;
|
||||
}, [onSegmentError]);
|
||||
|
||||
useEffect(() => {
|
||||
onEndedRef.current = onEnded;
|
||||
}, [onEnded]);
|
||||
|
||||
const emitPlayState = useCallback((playing: boolean) => {
|
||||
onPlayStateChangeRef.current?.(playing);
|
||||
}, []);
|
||||
|
||||
const emitError = useCallback((error: Error) => {
|
||||
onErrorRef.current?.(error);
|
||||
}, []);
|
||||
|
||||
const emitSegmentError = useCallback((segment: VideoSegment, error: Error) => {
|
||||
onSegmentErrorRef.current?.(segment, error);
|
||||
}, []);
|
||||
|
||||
const emitEnded = useCallback(() => {
|
||||
onEndedRef.current?.();
|
||||
}, []);
|
||||
|
||||
const totalDuration = useMemo(
|
||||
() => segments.reduce((sum, segment) => sum + Math.max(segment.duration, 0), 0),
|
||||
[segments],
|
||||
);
|
||||
|
||||
const segmentsSignature = useMemo(
|
||||
() =>
|
||||
segments
|
||||
.map((segment) => `${segment.id}:${segment.url}:${segment.duration}:${segment.startTime}:${segment.endTime ?? ""}`)
|
||||
.join("|"),
|
||||
[segments],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onDurationChangeRef.current?.(totalDuration * 1000);
|
||||
}, [totalDuration]);
|
||||
|
||||
const getAccumulatedTime = useCallback(
|
||||
(index: number) => {
|
||||
let sum = 0;
|
||||
for (let i = 0; i < index && i < segments.length; i += 1) {
|
||||
sum += Math.max(segments[i].duration, 0);
|
||||
}
|
||||
return sum;
|
||||
},
|
||||
[segments],
|
||||
);
|
||||
|
||||
const syncMediaState = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.playbackRate = playbackRateRef.current;
|
||||
video.muted = mutedRef.current;
|
||||
video.volume = volumeRef.current;
|
||||
}, []);
|
||||
|
||||
const applyPendingSeek = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
const pending = pendingSeekRef.current;
|
||||
const segment = segments[currentIndexRef.current];
|
||||
if (!video || !pending || !segment || video.readyState < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
syncMediaState();
|
||||
|
||||
const mediaDuration = Number.isFinite(video.duration) && video.duration > 0
|
||||
? video.duration
|
||||
: Math.max(segment.duration, 0);
|
||||
const clampedOffset = Math.min(Math.max(pending.offsetSeconds, 0), mediaDuration || 0);
|
||||
|
||||
try {
|
||||
video.currentTime = Number.isFinite(clampedOffset) ? clampedOffset : 0;
|
||||
} catch {
|
||||
video.currentTime = 0;
|
||||
}
|
||||
|
||||
pendingSeekRef.current = null;
|
||||
|
||||
if (pending.autoPlay) {
|
||||
video
|
||||
.play()
|
||||
.then(() => {
|
||||
isPlayingRef.current = true;
|
||||
setIsPlayingState(true);
|
||||
emitPlayState(true);
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
emitError(toError(error));
|
||||
});
|
||||
}
|
||||
}, [emitError, emitPlayState, segments, syncMediaState]);
|
||||
|
||||
const loadSegment = useCallback(
|
||||
(index: number, offsetSeconds = 0, autoPlayNext = false) => {
|
||||
const video = videoRef.current;
|
||||
const segment = segments[index];
|
||||
if (!video || !segment) return;
|
||||
|
||||
currentIndexRef.current = index;
|
||||
setCurrentIndex(index);
|
||||
accumulatedTimeRef.current = getAccumulatedTime(index);
|
||||
pendingSeekRef.current = {
|
||||
offsetSeconds,
|
||||
autoPlay: autoPlayNext,
|
||||
};
|
||||
|
||||
syncMediaState();
|
||||
|
||||
if (video.src !== resolveUrl(segment.url)) {
|
||||
video.src = segment.url;
|
||||
video.load();
|
||||
return;
|
||||
}
|
||||
|
||||
applyPendingSeek();
|
||||
},
|
||||
[applyPendingSeek, getAccumulatedTime, segments, syncMediaState],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
|
||||
if (segments.length === 0) {
|
||||
video.pause();
|
||||
video.removeAttribute("src");
|
||||
video.load();
|
||||
currentIndexRef.current = 0;
|
||||
accumulatedTimeRef.current = 0;
|
||||
pendingSeekRef.current = null;
|
||||
isPlayingRef.current = false;
|
||||
setCurrentIndex(0);
|
||||
setIsPlayingState(false);
|
||||
emitPlayState(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const previousIndex = Math.min(currentIndexRef.current, segments.length - 1);
|
||||
loadSegment(previousIndex, 0, autoPlay && previousIndex === 0);
|
||||
}, [autoPlay, emitPlayState, loadSegment, segments.length, segmentsSignature]);
|
||||
|
||||
const play = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video || segments.length === 0) return;
|
||||
|
||||
syncMediaState();
|
||||
|
||||
if (!video.src) {
|
||||
loadSegment(0, 0, true);
|
||||
return;
|
||||
}
|
||||
|
||||
video
|
||||
.play()
|
||||
.then(() => {
|
||||
isPlayingRef.current = true;
|
||||
setIsPlayingState(true);
|
||||
emitPlayState(true);
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
emitError(toError(error));
|
||||
});
|
||||
}, [emitError, emitPlayState, loadSegment, segments.length, syncMediaState]);
|
||||
|
||||
const pause = useCallback(() => {
|
||||
videoRef.current?.pause();
|
||||
isPlayingRef.current = false;
|
||||
setIsPlayingState(false);
|
||||
emitPlayState(false);
|
||||
}, [emitPlayState]);
|
||||
|
||||
const resume = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video || segments.length === 0) return;
|
||||
|
||||
syncMediaState();
|
||||
|
||||
if (!video.src) {
|
||||
loadSegment(currentIndexRef.current, 0, true);
|
||||
return;
|
||||
}
|
||||
|
||||
video
|
||||
.play()
|
||||
.then(() => {
|
||||
isPlayingRef.current = true;
|
||||
setIsPlayingState(true);
|
||||
emitPlayState(true);
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
emitError(toError(error));
|
||||
});
|
||||
}, [emitError, emitPlayState, loadSegment, segments.length, syncMediaState]);
|
||||
|
||||
const stop = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.pause();
|
||||
isPlayingRef.current = false;
|
||||
setIsPlayingState(false);
|
||||
emitPlayState(false);
|
||||
if (segments.length > 0) {
|
||||
loadSegment(0, 0, false);
|
||||
} else {
|
||||
video.removeAttribute("src");
|
||||
video.load();
|
||||
}
|
||||
}, [emitPlayState, loadSegment, segments.length]);
|
||||
|
||||
const seek = useCallback(
|
||||
(time: number, autoPlayNext = false) => {
|
||||
if (segments.length === 0) return;
|
||||
|
||||
const safeTime = Math.min(Math.max(time, 0), totalDuration);
|
||||
let accumulated = 0;
|
||||
|
||||
for (let index = 0; index < segments.length; index += 1) {
|
||||
const segment = segments[index];
|
||||
const nextAccumulated = accumulated + Math.max(segment.duration, 0);
|
||||
const isLast = index === segments.length - 1;
|
||||
if (safeTime < nextAccumulated || isLast) {
|
||||
const offsetSeconds = Math.max(safeTime - accumulated, 0);
|
||||
loadSegment(index, offsetSeconds, autoPlayNext);
|
||||
if (index === currentIndexRef.current && videoRef.current?.readyState) {
|
||||
applyPendingSeek();
|
||||
}
|
||||
return;
|
||||
}
|
||||
accumulated = nextAccumulated;
|
||||
}
|
||||
},
|
||||
[applyPendingSeek, loadSegment, segments, totalDuration],
|
||||
);
|
||||
|
||||
const setPlaybackRate = useCallback((rate: number) => {
|
||||
playbackRateRef.current = Number.isFinite(rate) && rate > 0 ? rate : 1;
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = playbackRateRef.current;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getCurrentTime = useCallback(() => {
|
||||
return accumulatedTimeRef.current + (videoRef.current?.currentTime ?? 0);
|
||||
}, []);
|
||||
|
||||
const getDuration = useCallback(() => totalDuration, [totalDuration]);
|
||||
|
||||
const isPlaying = useCallback(() => isPlayingRef.current, []);
|
||||
|
||||
const setMuted = useCallback((muted: boolean) => {
|
||||
mutedRef.current = muted;
|
||||
if (videoRef.current) {
|
||||
videoRef.current.muted = muted;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setVolume = useCallback((volume: number) => {
|
||||
volumeRef.current = Math.min(Math.max(volume, 0), 1);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.volume = volumeRef.current;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getVolume = useCallback(() => volumeRef.current, []);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
play,
|
||||
pause,
|
||||
resume,
|
||||
stop,
|
||||
seek,
|
||||
setPlaybackRate,
|
||||
getCurrentTime,
|
||||
getDuration,
|
||||
isPlaying,
|
||||
setMuted,
|
||||
setVolume,
|
||||
getVolume,
|
||||
}),
|
||||
[getCurrentTime, getDuration, getVolume, isPlaying, pause, play, resume, seek, setMuted, setPlaybackRate, setVolume, stop],
|
||||
);
|
||||
|
||||
const handleLoadedMetadata = useCallback(() => {
|
||||
applyPendingSeek();
|
||||
}, [applyPendingSeek]);
|
||||
|
||||
const handleTimeUpdate = useCallback(() => {
|
||||
onTimeUpdateRef.current?.(getCurrentTime());
|
||||
}, [getCurrentTime]);
|
||||
|
||||
const handleEnded = useCallback(() => {
|
||||
if (currentIndexRef.current < segments.length - 1) {
|
||||
loadSegment(currentIndexRef.current + 1, 0, true);
|
||||
return;
|
||||
}
|
||||
|
||||
isPlayingRef.current = false;
|
||||
setIsPlayingState(false);
|
||||
emitPlayState(false);
|
||||
emitEnded();
|
||||
}, [emitEnded, emitPlayState, loadSegment, segments.length]);
|
||||
|
||||
const handleError = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
const currentSegment = segments[currentIndexRef.current];
|
||||
const baseMessage = video?.error?.message || "Video error";
|
||||
const error = new Error(
|
||||
currentSegment
|
||||
? `片段播放失败: ${currentSegment.url} - ${baseMessage}`
|
||||
: baseMessage,
|
||||
);
|
||||
|
||||
if (currentSegment) {
|
||||
emitSegmentError(currentSegment, error);
|
||||
}
|
||||
|
||||
if (currentIndexRef.current < segments.length - 1) {
|
||||
loadSegment(currentIndexRef.current + 1, 0, isPlayingRef.current);
|
||||
}
|
||||
|
||||
emitError(error);
|
||||
}, [emitError, emitSegmentError, loadSegment, segments]);
|
||||
|
||||
return (
|
||||
<video
|
||||
ref={videoRef}
|
||||
className={className}
|
||||
style={{ width: "100%", height: "100%", backgroundColor: "#000" }}
|
||||
playsInline
|
||||
controls={controls}
|
||||
preload="metadata"
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onCanPlay={applyPendingSeek}
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onEnded={handleEnded}
|
||||
onError={handleError}
|
||||
onPlay={() => {
|
||||
isPlayingRef.current = true;
|
||||
setIsPlayingState(true);
|
||||
emitPlayState(true);
|
||||
}}
|
||||
onPause={() => {
|
||||
if (!videoRef.current?.ended) {
|
||||
isPlayingRef.current = false;
|
||||
setIsPlayingState(false);
|
||||
emitPlayState(false);
|
||||
}
|
||||
}}
|
||||
data-playing={isPlayingState ? "true" : "false"}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Mp4Player.displayName = "Mp4Player";
|
||||
|
||||
function resolveUrl(url: string): string {
|
||||
if (typeof window === "undefined") return url;
|
||||
return new URL(url, window.location.href).href;
|
||||
}
|
||||
|
||||
function toError(error: unknown): Error {
|
||||
return error instanceof Error ? error : new Error(String(error));
|
||||
}
|
||||
|
||||
export default Mp4Player;
|
||||
@@ -0,0 +1,197 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { useNodeId, useReactFlow } from "@xyflow/react";
|
||||
import { EllipsisVertical, Trash } from "lucide-react";
|
||||
import {
|
||||
forwardRef,
|
||||
type HTMLAttributes,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import { Button, type ButtonProps } from "~/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
/* NODE HEADER -------------------------------------------------------------- */
|
||||
|
||||
export type NodeHeaderProps = HTMLAttributes<HTMLElement>;
|
||||
|
||||
/**
|
||||
* A container for a consistent header layout intended to be used inside the
|
||||
* `<BaseNode />` component.
|
||||
*/
|
||||
export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<header
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-2 px-3 py-2",
|
||||
// Remove or modify these classes if you modify the padding in the
|
||||
// `<BaseNode />` component.
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
NodeHeader.displayName = "NodeHeader";
|
||||
|
||||
/* NODE HEADER TITLE -------------------------------------------------------- */
|
||||
|
||||
export type NodeHeaderTitleProps = HTMLAttributes<HTMLHeadingElement> & {
|
||||
asChild?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* The title text for the node. To maintain a native application feel, the title
|
||||
* text is not selectable.
|
||||
*/
|
||||
export const NodeHeaderTitle = forwardRef<
|
||||
HTMLHeadingElement,
|
||||
NodeHeaderTitleProps
|
||||
>(({ className, asChild, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "h3";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(className, "user-select-none flex-1 font-semibold")}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
NodeHeaderTitle.displayName = "NodeHeaderTitle";
|
||||
|
||||
/* NODE HEADER ICON --------------------------------------------------------- */
|
||||
|
||||
export type NodeHeaderIconProps = HTMLAttributes<HTMLSpanElement>;
|
||||
|
||||
export const NodeHeaderIcon = forwardRef<HTMLSpanElement, NodeHeaderIconProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<span ref={ref} {...props} className={cn(className, "[&>*]:size-5")} />
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
NodeHeaderIcon.displayName = "NodeHeaderIcon";
|
||||
|
||||
/* NODE HEADER ACTIONS ------------------------------------------------------ */
|
||||
|
||||
export type NodeHeaderActionsProps = HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
/**
|
||||
* A container for right-aligned action buttons in the node header.
|
||||
*/
|
||||
export const NodeHeaderActions = forwardRef<
|
||||
HTMLDivElement,
|
||||
NodeHeaderActionsProps
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(
|
||||
"ml-auto flex items-center gap-1 justify-self-end",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
NodeHeaderActions.displayName = "NodeHeaderActions";
|
||||
|
||||
/* NODE HEADER ACTION ------------------------------------------------------- */
|
||||
|
||||
export type NodeHeaderActionProps = ButtonProps & {
|
||||
label: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* A thin wrapper around the `<Button />` component with a fixed sized suitable
|
||||
* for icons.
|
||||
*
|
||||
* Because the `<NodeHeaderAction />` component is intended to render icons, it's
|
||||
* important to provide a meaningful and accessible `label` prop that describes
|
||||
* the action.
|
||||
*/
|
||||
export const NodeHeaderAction = forwardRef<
|
||||
HTMLButtonElement,
|
||||
NodeHeaderActionProps
|
||||
>(({ className, label, title, ...props }, ref) => {
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
aria-label={label}
|
||||
title={title ?? label}
|
||||
className={cn(className, "nodrag size-6 p-1")}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
NodeHeaderAction.displayName = "NodeHeaderAction";
|
||||
|
||||
//
|
||||
|
||||
export type NodeHeaderMenuActionProps = Omit<
|
||||
NodeHeaderActionProps,
|
||||
"onClick"
|
||||
> & {
|
||||
trigger?: ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a header action that opens a dropdown menu when clicked. The dropdown
|
||||
* trigger is a button with an ellipsis icon. The trigger's content can be changed
|
||||
* by using the `trigger` prop.
|
||||
*
|
||||
* Any children passed to the `<NodeHeaderMenuAction />` component will be rendered
|
||||
* inside the dropdown menu. You can read the docs for the shadcn dropdown menu
|
||||
* here: https://ui.shadcn.com/docs/components/dropdown-menu
|
||||
*
|
||||
*/
|
||||
export const NodeHeaderMenuAction = forwardRef<
|
||||
HTMLButtonElement,
|
||||
NodeHeaderMenuActionProps
|
||||
>(({ trigger, children, ...props }, ref) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<NodeHeaderAction ref={ref} {...props}>
|
||||
{trigger ?? <EllipsisVertical />}
|
||||
</NodeHeaderAction>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>{children}</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
});
|
||||
|
||||
NodeHeaderMenuAction.displayName = "NodeHeaderMenuAction";
|
||||
|
||||
/* NODE HEADER DELETE ACTION --------------------------------------- */
|
||||
|
||||
export const NodeHeaderDeleteAction = () => {
|
||||
const id = useNodeId();
|
||||
const { setNodes } = useReactFlow();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
setNodes((prevNodes) => prevNodes.filter((node) => node.id !== id));
|
||||
}, [id, setNodes]);
|
||||
|
||||
return (
|
||||
<NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
|
||||
<Trash />
|
||||
</NodeHeaderAction>
|
||||
);
|
||||
};
|
||||
|
||||
NodeHeaderDeleteAction.displayName = "NodeHeaderDeleteAction";
|
||||
@@ -0,0 +1,15 @@
|
||||
import type React from "react";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
|
||||
interface BaseNodeProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function BaseNode({ children, className }: BaseNodeProps) {
|
||||
return (
|
||||
<Card className={`bg-white/90 shadow-lg ${className}`}>
|
||||
<CardContent className="p-0">{children}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Handle, type Position } from "@xyflow/react";
|
||||
|
||||
interface LabeledHandleProps {
|
||||
id: string;
|
||||
type: "source" | "target";
|
||||
position: Position;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function LabeledHandle({
|
||||
id,
|
||||
type,
|
||||
position,
|
||||
title,
|
||||
}: LabeledHandleProps) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<Handle
|
||||
id={id}
|
||||
type={type}
|
||||
position={position}
|
||||
style={{ background: "#666666" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { Node, NodeProps } from "@xyflow/react";
|
||||
import { Position } from "@xyflow/react";
|
||||
import { CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { BaseNode } from "./base-node";
|
||||
import { LabeledHandle } from "./labeled-handle";
|
||||
|
||||
export type ZlmNodeData = {
|
||||
label: string;
|
||||
ip?: string;
|
||||
};
|
||||
|
||||
export type ZlmNode = Node<ZlmNodeData>;
|
||||
|
||||
export function ZlmNode({ data }: NodeProps<ZlmNode>) {
|
||||
return (
|
||||
<BaseNode className="w-32">
|
||||
<CardHeader className="p-3">
|
||||
<CardTitle className="text-sm font-medium">{data.label}</CardTitle>
|
||||
</CardHeader>
|
||||
<div className="px-3 pb-3">
|
||||
<div className="text-xs text-muted-foreground">{data.ip}</div>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between p-2 bg-gray-50">
|
||||
<LabeledHandle id="x" type="target" position={Position.Left} />
|
||||
<LabeledHandle id="y" type="target" position={Position.Left} />
|
||||
<LabeledHandle id="out" type="source" position={Position.Right} />
|
||||
</div>
|
||||
</BaseNode>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useNavigate } from "react-router";
|
||||
import { ChevronDown, Copy } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Player, { type PlayerRef } from "~/components/player/player";
|
||||
import { AspectRatio } from "~/components/ui/aspect-ratio";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Drawer, DrawerContent } from "~/components/ui/drawer";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { copy2Clipboard } from "~/components/util/copy";
|
||||
import ToolTips from "~/components/xui/tips";
|
||||
import { PTZPanel } from "~/components/ptz-control/ptz-panel";
|
||||
import { usePlayerLayout } from "~/hooks/use-player-layout";
|
||||
import DeviceDetailView, {
|
||||
type DeviceDetailViewRef,
|
||||
} from "~/pages/channels/device";
|
||||
import { Play } from "~/service/api/channel/channel";
|
||||
import { ErrorHandle } from "~/service/config/error";
|
||||
|
||||
export interface PlayDrawerRef {
|
||||
open: (item: any, options?: { hideSidebar?: boolean }) => void;
|
||||
}
|
||||
|
||||
const PROTOCOLS_EXPANDED_KEY = "player_protocols_expanded";
|
||||
|
||||
export default function PlayDrawer({
|
||||
ref,
|
||||
}: {
|
||||
ref: React.RefObject<PlayDrawerRef | null>;
|
||||
}) {
|
||||
const { t } = useTranslation("common");
|
||||
const navigate = useNavigate();
|
||||
const deviceDetailRef = useRef<DeviceDetailViewRef>(null);
|
||||
const [showSidebar, setShowSidebar] = useState(true);
|
||||
const [currentChannelId, setCurrentChannelId] = useState<string>("");
|
||||
const [currentChannelExt, setCurrentChannelExt] = useState<any>(undefined);
|
||||
const [currentChannelType, setCurrentChannelType] = useState<string>("");
|
||||
const [currentChannelPtztype, setCurrentChannelPtztype] = useState<number>(0);
|
||||
// 协议选择器收缩/展开状态 - 从 localStorage 读取，默认收缩
|
||||
const [protocolsExpanded, setProtocolsExpanded] = useState(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
return localStorage.getItem(PROTOCOLS_EXPANDED_KEY) === "true";
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 切换协议展开状态并保存到 localStorage
|
||||
const toggleProtocolsExpanded = () => {
|
||||
const newValue = !protocolsExpanded;
|
||||
setProtocolsExpanded(newValue);
|
||||
localStorage.setItem(PROTOCOLS_EXPANDED_KEY, String(newValue));
|
||||
};
|
||||
|
||||
// 使用布局计算 Hook（使用固定 footer 高度避免展开/收缩时视频位置变动）
|
||||
const layout = usePlayerLayout({
|
||||
headerHeight: 40,
|
||||
fixedFooterHeight: 120, // 固定高度，无论展开收缩都保持视频位置一致
|
||||
sidebarWidth:
|
||||
showSidebar && typeof window !== "undefined" && window.innerWidth >= 640
|
||||
? 290
|
||||
: 0,
|
||||
});
|
||||
|
||||
// 播放功能
|
||||
// 为什么: WebRTC 端到端延迟最低(300~500ms), H.265 兼容浏览器优先走 WebRTC;
|
||||
// 不兼容的浏览器 WebRTCPlayer 内部会弹窗提示, 用户可手动切 HTTP_FLV 兜底。
|
||||
const { mutate: playMutate, data: playData } = useMutation({
|
||||
mutationFn: Play,
|
||||
onSuccess(data) {
|
||||
const item = data.data.items[0];
|
||||
const preferred = item?.webrtc || item?.http_flv || "";
|
||||
setLink(preferred);
|
||||
playRef.current?.play(preferred);
|
||||
},
|
||||
onError: (error) => {
|
||||
ErrorHandle(error);
|
||||
},
|
||||
});
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
open(item: any, options?: { hideSidebar?: boolean }) {
|
||||
console.log("打开播放详情，ID:", item.id);
|
||||
setCurrentChannelId(item.id);
|
||||
setCurrentChannelExt(item.ext);
|
||||
setCurrentChannelType(item.type || "");
|
||||
setCurrentChannelPtztype(item.ptztype ?? 0);
|
||||
|
||||
if (options?.hideSidebar !== undefined) {
|
||||
setShowSidebar(!options.hideSidebar);
|
||||
} else {
|
||||
setShowSidebar(true);
|
||||
}
|
||||
|
||||
// RTSP 类型通道需要触发播放请求才能启动拉流代理，无论 is_online 状态
|
||||
// 其他类型仅在线时才触发播放
|
||||
if (item.type === "RTSP" || item.is_online !== false) {
|
||||
playMutate(item.id);
|
||||
}
|
||||
setOpen(true);
|
||||
|
||||
if (item.did && !options?.hideSidebar) {
|
||||
setTimeout(() => {
|
||||
deviceDetailRef.current?.showDetail(item.did);
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const playRef = useRef<PlayerRef>(null);
|
||||
|
||||
const [link, setLink] = useState("");
|
||||
|
||||
const [selected] = useState(0);
|
||||
|
||||
// 关闭弹窗，并销毁播放器
|
||||
const onOpenChange = (v: boolean) => {
|
||||
setOpen(v);
|
||||
if (!v) {
|
||||
playRef.current?.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
const getStream = () => {
|
||||
if (!playData) {
|
||||
return null;
|
||||
}
|
||||
if (playData && playData.data?.items.length <= selected) {
|
||||
return null;
|
||||
}
|
||||
return playData.data.items[selected];
|
||||
};
|
||||
|
||||
/** 通道列表卡片点击：就地切换播放，不重新打开窗口 */
|
||||
const handleChannelSwitch = useCallback((channel: any) => {
|
||||
setCurrentChannelId(channel.id);
|
||||
setCurrentChannelExt(channel.ext);
|
||||
setCurrentChannelType(channel.type || "");
|
||||
setCurrentChannelPtztype(channel.ptztype ?? 0);
|
||||
|
||||
if (channel.type === "RTSP" || channel.is_online !== false) {
|
||||
playMutate(channel.id);
|
||||
}
|
||||
}, [playMutate]);
|
||||
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={onOpenChange}>
|
||||
<DrawerContent className="h-[85vh] sm:h-[95vh]">
|
||||
<div className="flex flex-col sm:flex-row h-full overflow-hidden">
|
||||
{/* 播放器内容区域 - 背景色改为白色，移动端允许滚动以容纳 PTZ */}
|
||||
<div className="flex-1 bg-white overflow-y-auto sm:overflow-visible" style={layout.containerStyle}>
|
||||
{/* 播放器容器 */}
|
||||
<div style={layout.contentStyle}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Player ref={playRef} link={link} />
|
||||
</AspectRatio>
|
||||
</div>
|
||||
|
||||
{/* 底部信息 - 固定高度容器，通过 visibility 控制显隐避免视频位置变动 */}
|
||||
<div
|
||||
className="w-full mt-2"
|
||||
style={{ ...layout.contentStyle, height: "120px" }}
|
||||
>
|
||||
{/* ZLM 标签 - 点击展开/收缩整个底部区域 */}
|
||||
<div className="flex items-center my-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="shrink-0 font-medium transition-transform duration-200 hover:scale-105"
|
||||
onClick={toggleProtocolsExpanded}
|
||||
>
|
||||
{playData?.data?.items?.[selected]?.label || "ZLM"}
|
||||
<span
|
||||
className={`ml-1 transition-transform duration-300 ${
|
||||
protocolsExpanded ? "rotate-180" : "rotate-0"
|
||||
}`}
|
||||
>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 地址输入框和协议按钮 - 固定高度，通过 opacity 和 visibility 控制显隐 */}
|
||||
<div
|
||||
className={`transition-all duration-300 ease-in-out ${
|
||||
protocolsExpanded
|
||||
? "opacity-100 visible"
|
||||
: "opacity-0 invisible"
|
||||
}`}
|
||||
>
|
||||
<Input
|
||||
className="bg-gray-50 w-full my-2"
|
||||
disabled
|
||||
value={link}
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1.5 sm:gap-2.5 my-2">
|
||||
{[
|
||||
{
|
||||
name: "WebRTC",
|
||||
addr: getStream()?.webrtc ?? "",
|
||||
copy: false,
|
||||
},
|
||||
{
|
||||
name: "HTTP_FLV",
|
||||
addr: getStream()?.http_flv ?? "",
|
||||
copy: true,
|
||||
},
|
||||
{
|
||||
name: "WS_FLV",
|
||||
addr: getStream()?.ws_flv ?? "",
|
||||
copy: true,
|
||||
},
|
||||
{
|
||||
name: "HLS",
|
||||
addr: getStream()?.hls ?? "",
|
||||
copy: true,
|
||||
},
|
||||
{
|
||||
name: "RTMP",
|
||||
addr: getStream()?.rtmp ?? "",
|
||||
copy: true,
|
||||
},
|
||||
{
|
||||
name: "RTSP",
|
||||
addr: getStream()?.rtsp ?? "",
|
||||
copy: true,
|
||||
},
|
||||
].map((item, i) => (
|
||||
<ToolTips tips={item.addr || t("no_address")} key={i}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className={`text-[10px] h-6 px-1.5 sm:text-sm sm:h-9 sm:px-3 transition-all duration-200 ${
|
||||
item.addr === link ? "border-gray-800" : ""
|
||||
}`}
|
||||
disabled={!item.addr}
|
||||
onClick={() => {
|
||||
if (!item.addr) return;
|
||||
|
||||
if (item.copy === true) {
|
||||
copy2Clipboard(item.addr, {
|
||||
title: t("stream_address_copied"),
|
||||
description: item.addr,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
playRef.current?.play(item.addr);
|
||||
setLink(item.addr);
|
||||
}}
|
||||
>
|
||||
{item.copy && <Copy className="hidden sm:inline w-4 h-4 mr-1" />}
|
||||
{item.name}
|
||||
</Button>
|
||||
</ToolTips>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 移动端 PTZ 云台控制 - z-index 最高确保不被遮挡 */}
|
||||
{currentChannelId && (
|
||||
<div className="sm:hidden pb-4 mt-2 relative z-50">
|
||||
<PTZPanel
|
||||
channelId={currentChannelId}
|
||||
deviceType={currentChannelType || undefined}
|
||||
ptztype={currentChannelPtztype}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 设备详情/介绍 - 小屏幕时隐藏 */}
|
||||
{showSidebar && (
|
||||
<div className="hidden sm:block w-72 lg:w-[360px] bg-white overflow-y-auto">
|
||||
<DeviceDetailView
|
||||
ref={deviceDetailRef}
|
||||
channelId={currentChannelId}
|
||||
channelExt={currentChannelExt}
|
||||
channelType={currentChannelType}
|
||||
channelPtztype={currentChannelPtztype}
|
||||
onZoneSettings={() => {
|
||||
if (!currentChannelId) return;
|
||||
onOpenChange(false);
|
||||
navigate(`/zones?cid=${encodeURIComponent(currentChannelId)}`);
|
||||
}}
|
||||
onChannelSwitch={handleChannelSwitch}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import type React from "react";
|
||||
import { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import logger from "~/lib/logger";
|
||||
import { toastError } from "../xui/toast";
|
||||
import WebRTCPlayer, { type WebRTCPlayerRef } from "./webrtc-player";
|
||||
|
||||
export type PlayerRef = {
|
||||
play: (link: string) => void;
|
||||
destroy: () => void;
|
||||
};
|
||||
|
||||
interface PlayerProps {
|
||||
ref: React.RefObject<PlayerRef | null>;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
// 为什么: WebRTC 是项目唯一保留的播放通道(低延迟+浏览器原生硬解),
|
||||
// 其他协议仅作地址复制用, 不再内嵌播放器逻辑, 保持组件薄。
|
||||
function isWebRTCLink(link: string): boolean {
|
||||
return /^webrtc:/i.test(link);
|
||||
}
|
||||
|
||||
function Player({ ref }: PlayerProps) {
|
||||
const webrtcRef = useRef<WebRTCPlayerRef>(null);
|
||||
const currentLinkRef = useRef<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
// 延迟显示加载动画，快速连接时避免闪烁
|
||||
const [showSpinner, setShowSpinner] = useState(false);
|
||||
const spinnerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
spinnerTimerRef.current = setTimeout(() => setShowSpinner(true), 1000);
|
||||
} else {
|
||||
if (spinnerTimerRef.current) {
|
||||
clearTimeout(spinnerTimerRef.current);
|
||||
spinnerTimerRef.current = null;
|
||||
}
|
||||
setShowSpinner(false);
|
||||
}
|
||||
return () => {
|
||||
if (spinnerTimerRef.current) {
|
||||
clearTimeout(spinnerTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, [loading]);
|
||||
|
||||
const play = useCallback((link: string) => {
|
||||
logger.info("Player ~ play ~ link:", link);
|
||||
if (!isWebRTCLink(link)) {
|
||||
toastError("当前仅支持 WebRTC 播放", {
|
||||
description: "其他协议请点击按钮复制地址, 用外部播放器观看",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
currentLinkRef.current = link;
|
||||
webrtcRef.current?.play(link).catch((e) => {
|
||||
logger.error("Player ~ play failed:", e);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const destroy = useCallback(() => {
|
||||
logger.info("Player ~ destroy");
|
||||
currentLinkRef.current = null;
|
||||
setLoading(false);
|
||||
webrtcRef.current?.destroy();
|
||||
}, []);
|
||||
|
||||
/** WebRTC track 到达后关闭加载动画 */
|
||||
const handleTrackReady = useCallback(() => {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
/** WebRTC 协商失败时也关闭加载动画，避免遮挡 warning */
|
||||
const handlePlayFailed = useCallback(() => {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(ref, () => ({ play, destroy }), [play, destroy]);
|
||||
|
||||
return (
|
||||
<div className="min-w-full min-h-full rounded-lg bg-black relative">
|
||||
<div className="absolute inset-0">
|
||||
<WebRTCPlayer ref={webrtcRef} onTrackReady={handleTrackReady} onPlayFailed={handlePlayFailed} />
|
||||
</div>
|
||||
{showSpinner && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/60 rounded-lg z-10">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Loader2 className="w-8 h-8 text-white animate-spin" />
|
||||
<span className="text-white/80 text-sm">正在连接...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Player;
|
||||
@@ -0,0 +1,281 @@
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
import logger from "~/lib/logger";
|
||||
|
||||
const WARN_MSG =
|
||||
"WebRTC 协商失败! 请检查您的 Chrome 浏览器是否为 105 及以上版本。\n作为替代方案，您可以复制 HTTP_FLV 流地址到 VLC 播放器中打开。";
|
||||
|
||||
// 为什么: 流媒体服务端可能在信令成功后才开始推流，首次连接时 track 延迟到达是正常现象，
|
||||
// 单次超时判定为故障会造成误报，所以用多次重试来容忍这种延迟。
|
||||
const MAX_RETRIES = 3;
|
||||
const TRACK_TIMEOUT_MS = 3000;
|
||||
const LAST_ATTEMPT_TIMEOUT_MS = 6000;
|
||||
|
||||
export type WebRTCPlayerRef = {
|
||||
play: (link: string) => Promise<void>;
|
||||
destroy: () => void;
|
||||
};
|
||||
|
||||
interface WebRTCPlayerProps {
|
||||
ref: React.RefObject<WebRTCPlayerRef | null>;
|
||||
onTrackReady?: () => void;
|
||||
onPlayFailed?: () => void;
|
||||
}
|
||||
|
||||
// 为什么: ZLM 返回的 URL scheme 是 webrtc://, 浏览器无法直接识别, 需要按当前页面协议改写
|
||||
// 成 http/https 做 HTTP 信令请求, 避免 mixed-content 被拦截。
|
||||
function toSignalingURL(webrtcURL: string): string {
|
||||
if (!webrtcURL) return "";
|
||||
const scheme = typeof window !== "undefined" ? window.location.protocol : "http:";
|
||||
return webrtcURL.replace(/^webrtc:/i, scheme);
|
||||
}
|
||||
|
||||
// 为什么: ZLM HTTP 信令是单次 offer/answer (非 trickle), 必须把带完整 a=candidate 的 SDP 一次性发过去。
|
||||
// setLocalDescription 后 ICE gathering 是异步的, 不等 complete 就发送会导致 offer 里无 candidate,
|
||||
// 浏览器建不起 ICE pair → 黑屏。这里等 gathering 完成或 2s 兜底超时。
|
||||
function waitIceGatheringComplete(pc: RTCPeerConnection, timeoutMs = 2000): Promise<void> {
|
||||
if (pc.iceGatheringState === "complete") return Promise.resolve();
|
||||
return new Promise((resolve) => {
|
||||
const done = () => {
|
||||
pc.removeEventListener("icegatheringstatechange", onChange);
|
||||
clearTimeout(timer);
|
||||
resolve();
|
||||
};
|
||||
const onChange = () => {
|
||||
if (pc.iceGatheringState === "complete") done();
|
||||
};
|
||||
pc.addEventListener("icegatheringstatechange", onChange);
|
||||
const timer = setTimeout(done, timeoutMs);
|
||||
});
|
||||
}
|
||||
|
||||
function WebRTCPlayer({ ref, onTrackReady, onPlayFailed }: WebRTCPlayerProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const pcRef = useRef<RTCPeerConnection | null>(null);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const trackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const [warning, setWarning] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (warning) onPlayFailed?.();
|
||||
}, [warning]);
|
||||
|
||||
const destroy = useCallback(() => {
|
||||
if (trackTimerRef.current) {
|
||||
clearTimeout(trackTimerRef.current);
|
||||
trackTimerRef.current = null;
|
||||
}
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = null;
|
||||
if (pcRef.current) {
|
||||
try {
|
||||
pcRef.current.getSenders().forEach((s) => s.track?.stop());
|
||||
pcRef.current.close();
|
||||
} catch (e) {
|
||||
logger.warn("WebRTCPlayer ~ close pc failed:", e);
|
||||
}
|
||||
pcRef.current = null;
|
||||
}
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 为什么: 单次连接可能因信令成功但流延迟到达而超时，提取为独立函数以支持外层重试。
|
||||
// 返回 true 表示 track 已到达，false 表示超时。抛异常表示信令/ICE 层面失败。
|
||||
const attemptConnect = useCallback(
|
||||
(signaling: string, attempt: number, timeoutMs: number): Promise<boolean> => {
|
||||
// 为什么: 新的重试必须中断前一次的信令请求和 PeerConnection，
|
||||
// 防止旧请求的响应干扰新连接状态。
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = null;
|
||||
if (pcRef.current) {
|
||||
try { pcRef.current.close(); } catch (_) {}
|
||||
pcRef.current = null;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const pc = new RTCPeerConnection();
|
||||
pcRef.current = pc;
|
||||
let settled = false;
|
||||
|
||||
const cleanup = () => {
|
||||
if (trackTimerRef.current) {
|
||||
clearTimeout(trackTimerRef.current);
|
||||
trackTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const settle = (result: boolean | Error) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
cleanup();
|
||||
if (result instanceof Error) {
|
||||
reject(result);
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
};
|
||||
|
||||
pc.addTransceiver("video", { direction: "recvonly" });
|
||||
pc.addTransceiver("audio", { direction: "recvonly" });
|
||||
|
||||
trackTimerRef.current = setTimeout(() => {
|
||||
if (pcRef.current === pc && !videoRef.current?.srcObject) {
|
||||
logger.warn(`WebRTCPlayer ~ attempt ${attempt}/${MAX_RETRIES} no track within ${timeoutMs}ms`);
|
||||
try { pc.close(); } catch (_) {}
|
||||
if (pcRef.current === pc) pcRef.current = null;
|
||||
settle(false);
|
||||
}
|
||||
}, timeoutMs);
|
||||
|
||||
pc.ontrack = (ev) => {
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} ontrack:`, ev.track.kind);
|
||||
const v = videoRef.current;
|
||||
const stream = ev.streams[0];
|
||||
if (!v || !stream) return;
|
||||
if (v.srcObject !== stream) {
|
||||
v.srcObject = stream;
|
||||
onTrackReady?.();
|
||||
v.play().catch((err) => {
|
||||
logger.warn("WebRTCPlayer ~ video.play rejected:", err);
|
||||
});
|
||||
}
|
||||
settle(true);
|
||||
};
|
||||
|
||||
pc.oniceconnectionstatechange = () => {
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} ice state:`, pc.iceConnectionState);
|
||||
if (pc.iceConnectionState === "failed") {
|
||||
try { pc.close(); } catch (_) {}
|
||||
if (pcRef.current === pc) pcRef.current = null;
|
||||
settle(new Error("ICE connection failed"));
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} pc state:`, pc.connectionState);
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
await waitIceGatheringComplete(pc);
|
||||
|
||||
const localSDP = pc.localDescription?.sdp || offer.sdp || "";
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} local candidates:`,
|
||||
(localSDP.match(/^a=candidate:/gm) || []).length);
|
||||
|
||||
const ac = new AbortController();
|
||||
abortRef.current = ac;
|
||||
const signalingTimeout = setTimeout(() => ac.abort(), timeoutMs);
|
||||
let resp: Response;
|
||||
try {
|
||||
resp = await fetch(signaling, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/sdp" },
|
||||
body: localSDP,
|
||||
signal: ac.signal,
|
||||
});
|
||||
} finally {
|
||||
clearTimeout(signalingTimeout);
|
||||
}
|
||||
if (!resp.ok) throw new Error(`signaling http ${resp.status}`);
|
||||
|
||||
const text = await resp.text();
|
||||
let answerSDP = "";
|
||||
try {
|
||||
const obj = JSON.parse(text);
|
||||
if (obj.code !== 0) {
|
||||
throw new Error(`signaling code=${obj.code} msg=${obj.msg || "unknown"}`);
|
||||
}
|
||||
answerSDP = obj.sdp;
|
||||
} catch (_) {
|
||||
if (text.startsWith("v=")) {
|
||||
answerSDP = text;
|
||||
} else {
|
||||
throw new Error(`signaling bad response: ${text.slice(0, 120)}`);
|
||||
}
|
||||
}
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} remote candidates:`,
|
||||
(answerSDP.match(/^a=candidate:.*$/gm) || []).length);
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSDP });
|
||||
logger.info(`WebRTCPlayer ~ attempt ${attempt} setRemoteDescription ok`);
|
||||
})().catch((e) => {
|
||||
settle(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
[onTrackReady],
|
||||
);
|
||||
|
||||
const play = useCallback(async (link: string) => {
|
||||
logger.info("WebRTCPlayer ~ play ~ link:", link);
|
||||
destroy();
|
||||
setWarning(null);
|
||||
|
||||
const signaling = toSignalingURL(link);
|
||||
if (!signaling) {
|
||||
setWarning(WARN_MSG);
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 1; i <= MAX_RETRIES; i++) {
|
||||
const timeout = i === MAX_RETRIES ? LAST_ATTEMPT_TIMEOUT_MS : TRACK_TIMEOUT_MS;
|
||||
try {
|
||||
const gotTrack = await attemptConnect(signaling, i, timeout);
|
||||
if (gotTrack) {
|
||||
logger.info(`WebRTCPlayer ~ attempt ${i} succeeded`);
|
||||
return;
|
||||
}
|
||||
logger.warn(`WebRTCPlayer ~ attempt ${i}/${MAX_RETRIES} timed out, ${i < MAX_RETRIES ? "retrying..." : "giving up"}`);
|
||||
} catch (e) {
|
||||
logger.error(`WebRTCPlayer ~ attempt ${i}/${MAX_RETRIES} error:`, e);
|
||||
if (i >= MAX_RETRIES) break;
|
||||
logger.info(`WebRTCPlayer ~ retrying after error...`);
|
||||
}
|
||||
}
|
||||
|
||||
logger.error(`WebRTCPlayer ~ all ${MAX_RETRIES} attempts failed`);
|
||||
destroy();
|
||||
setWarning(WARN_MSG);
|
||||
}, [destroy, attemptConnect]);
|
||||
|
||||
useImperativeHandle(ref, () => ({ play, destroy }), [play, destroy]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => destroy();
|
||||
}, [destroy]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="min-w-full min-h-full rounded-lg bg-black"
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
controls={false}
|
||||
/>
|
||||
{warning && (
|
||||
<div
|
||||
className="absolute top-0 left-0 right-0 z-10 bg-amber-500/90 text-white text-xs md:text-sm px-3 py-1.5 flex items-start gap-2 rounded-t-lg shadow"
|
||||
role="alert"
|
||||
>
|
||||
<AlertTriangle className="shrink-0 w-4 h-4 mt-0.5" aria-hidden="true" />
|
||||
<span className="flex-1 break-words whitespace-pre-line leading-snug">{warning}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setWarning(null)}
|
||||
className="shrink-0 text-white/90 hover:text-white cursor-pointer leading-none px-1"
|
||||
aria-label="关闭警告"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WebRTCPlayer;
|
||||
@@ -0,0 +1,260 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowDownLeft,
|
||||
ArrowDownRight,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
ArrowUp,
|
||||
ArrowUpLeft,
|
||||
ArrowUpRight,
|
||||
Minus,
|
||||
Plus,
|
||||
Square,
|
||||
} from "lucide-react";
|
||||
import { memo, useCallback, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Slider } from "~/components/ui/slider";
|
||||
import { PTZControl, type PTZDirection } from "~/service/api/channel/channel";
|
||||
|
||||
interface PTZPanelProps {
|
||||
channelId: string;
|
||||
deviceType?: string;
|
||||
/** 云台类型 (0=无云台/未知, >0=有云台) - 来自后端通道 ptztype 字段 */
|
||||
ptztype?: number;
|
||||
}
|
||||
|
||||
// 为什么: 开发/联调期 ptztype 尚未稳定返回, 允许面板始终显示, 生产期关闭即可。
|
||||
const TEST_MODE = true;
|
||||
|
||||
type PtrEvt = React.MouseEvent | React.TouchEvent;
|
||||
|
||||
interface DirectionButtonProps {
|
||||
direction: PTZDirection;
|
||||
activeDirection: PTZDirection | null;
|
||||
onStart: (d: PTZDirection, e?: PtrEvt) => void;
|
||||
onStop: (e?: PtrEvt) => void;
|
||||
icon: React.ReactNode;
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
// 为什么: 用 memo + 稳定回调引用避免速度滑块变动时全盘重渲染, 保障拖动手感。
|
||||
const DirectionButton = memo(function DirectionButton({
|
||||
direction,
|
||||
activeDirection,
|
||||
onStart,
|
||||
onStop,
|
||||
icon,
|
||||
ariaLabel,
|
||||
}: DirectionButtonProps) {
|
||||
const isActive = activeDirection === direction;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={ariaLabel}
|
||||
onMouseDown={(e) => onStart(direction, e)}
|
||||
onMouseUp={onStop}
|
||||
onMouseLeave={onStop}
|
||||
onTouchStart={(e) => onStart(direction, e)}
|
||||
onTouchEnd={onStop}
|
||||
className={`
|
||||
relative flex items-center justify-center
|
||||
h-11 w-11 sm:h-12 sm:w-12 rounded-xl select-none
|
||||
transition-all duration-150 active:scale-95
|
||||
border shadow-sm
|
||||
${
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground border-primary shadow-md shadow-primary/30"
|
||||
: "bg-background text-foreground/80 border-border hover:bg-accent hover:text-foreground hover:-translate-y-[1px]"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
interface ZoomButtonProps {
|
||||
direction: "zoomin" | "zoomout";
|
||||
activeDirection: PTZDirection | null;
|
||||
onStart: (d: PTZDirection, e?: PtrEvt) => void;
|
||||
onStop: (e?: PtrEvt) => void;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const ZoomButton = memo(function ZoomButton({
|
||||
direction,
|
||||
activeDirection,
|
||||
onStart,
|
||||
onStop,
|
||||
icon,
|
||||
}: ZoomButtonProps) {
|
||||
const isActive = activeDirection === direction;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => onStart(direction, e)}
|
||||
onMouseUp={onStop}
|
||||
onMouseLeave={onStop}
|
||||
onTouchStart={(e) => onStart(direction, e)}
|
||||
onTouchEnd={onStop}
|
||||
className={`
|
||||
flex items-center justify-center
|
||||
h-9 rounded-lg border text-xs font-medium
|
||||
transition-all duration-150 active:scale-95 select-none
|
||||
${
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground border-primary shadow-sm"
|
||||
: "bg-background text-foreground/80 border-border hover:bg-accent"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
export function PTZPanel({ channelId, deviceType, ptztype }: PTZPanelProps) {
|
||||
const [speed, setSpeed] = useState(0.5);
|
||||
const [activeDirection, setActiveDirection] = useState<PTZDirection | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const ptzMutation = useMutation({
|
||||
mutationFn: (data: Parameters<typeof PTZControl>[1]) =>
|
||||
PTZControl(channelId, data),
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || "云台控制失败");
|
||||
},
|
||||
});
|
||||
|
||||
// 为什么: mousedown 立即发起 continuous, mouseup/leave/touchend 发 stop,
|
||||
// 同方向去重避免连发; speedRef 让回调引用保持稳定, 防止速度滑块变动时子组件重渲染。
|
||||
const speedRef = useRef(speed);
|
||||
speedRef.current = speed;
|
||||
|
||||
const handleStart = useCallback(
|
||||
(direction: PTZDirection, e?: PtrEvt) => {
|
||||
e?.preventDefault?.();
|
||||
e?.stopPropagation?.();
|
||||
setActiveDirection((prev) => {
|
||||
if (prev === direction) return prev;
|
||||
ptzMutation.mutate({
|
||||
action: "continuous",
|
||||
direction,
|
||||
speed: speedRef.current,
|
||||
});
|
||||
return direction;
|
||||
});
|
||||
},
|
||||
[ptzMutation],
|
||||
);
|
||||
|
||||
const handleStop = useCallback(
|
||||
(e?: PtrEvt) => {
|
||||
e?.preventDefault?.();
|
||||
e?.stopPropagation?.();
|
||||
setActiveDirection((prev) => {
|
||||
if (prev) {
|
||||
ptzMutation.mutate({ action: "stop" });
|
||||
}
|
||||
return null;
|
||||
});
|
||||
},
|
||||
[ptzMutation],
|
||||
);
|
||||
|
||||
const isSupportedProtocol =
|
||||
deviceType === "GB28181" || deviceType === "ONVIF";
|
||||
const supportsPTZ = TEST_MODE
|
||||
? isSupportedProtocol
|
||||
: isSupportedProtocol && (ptztype ?? 0) > 0;
|
||||
|
||||
if (!supportsPTZ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const directionPad = (
|
||||
<div className="grid grid-cols-3 gap-1.5 w-fit mx-auto">
|
||||
<DirectionButton direction="upleft" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowUpLeft className="h-4 w-4" />} ariaLabel="左上" />
|
||||
<DirectionButton direction="up" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowUp className="h-4 w-4" />} ariaLabel="上" />
|
||||
<DirectionButton direction="upright" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowUpRight className="h-4 w-4" />} ariaLabel="右上" />
|
||||
<DirectionButton direction="left" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowLeft className="h-4 w-4" />} ariaLabel="左" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleStop(e)}
|
||||
aria-label="停止"
|
||||
className="flex items-center justify-center h-11 w-11 sm:h-12 sm:w-12 rounded-xl select-none bg-destructive/10 text-destructive border border-destructive/30 hover:bg-destructive hover:text-destructive-foreground transition-all duration-150 active:scale-95"
|
||||
>
|
||||
<Square className="h-3.5 w-3.5 fill-current" />
|
||||
</button>
|
||||
<DirectionButton direction="right" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowRight className="h-4 w-4" />} ariaLabel="右" />
|
||||
<DirectionButton direction="downleft" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowDownLeft className="h-4 w-4" />} ariaLabel="左下" />
|
||||
<DirectionButton direction="down" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowDown className="h-4 w-4" />} ariaLabel="下" />
|
||||
<DirectionButton direction="downright" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<ArrowDownRight className="h-4 w-4" />} ariaLabel="右下" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const controlPanel = (
|
||||
<div className="space-y-3 flex-1 min-w-0">
|
||||
{/* 速度控制 */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-[11px]">
|
||||
<span className="text-muted-foreground">速度</span>
|
||||
<span className="font-mono tabular-nums text-foreground/80">
|
||||
{Math.round(speed * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[speed]}
|
||||
onValueChange={(v) => setSpeed(v[0])}
|
||||
min={0.1}
|
||||
max={1}
|
||||
step={0.1}
|
||||
disabled={activeDirection !== null}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 变焦控制 */}
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
<ZoomButton direction="zoomin" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<Plus className="h-4 w-4" />} />
|
||||
<ZoomButton direction="zoomout" activeDirection={activeDirection} onStart={handleStart} onStop={handleStop} icon={<Minus className="h-4 w-4" />} />
|
||||
</div>
|
||||
|
||||
<div className="text-[10px] text-muted-foreground/70 text-center leading-relaxed">
|
||||
按住移动 · 松开停止
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="border-primary/15 sm:border bg-gradient-to-b from-background to-muted/30 shadow-sm sm:shadow-sm border-0 sm:border-primary/15">
|
||||
<CardHeader className="pb-2 pt-2 sm:pt-3 px-1 sm:px-3">
|
||||
<CardTitle className="text-xs font-semibold flex items-center justify-between text-foreground/70">
|
||||
<span>云台控制</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] px-1.5 py-0 h-5 font-normal"
|
||||
>
|
||||
{deviceType || "PTZ"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-1 sm:px-3 pb-2 sm:pb-3">
|
||||
{/* 移动端左右布局，PC端上下布局 */}
|
||||
<div className="flex gap-3 sm:hidden mx-auto max-w-[350px]">
|
||||
<div className="shrink-0">{directionPad}</div>
|
||||
{controlPanel}
|
||||
</div>
|
||||
<div className="hidden sm:block space-y-3">
|
||||
{directionPad}
|
||||
{controlPanel}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* SeamlessPlayer - 无缝 MP4 播放器
|
||||
*
|
||||
* 使用 mp4box.js + MSE 实现多个 MP4 文件无缝播放
|
||||
* 核心原理：将多个独立 MP4 文件的媒体数据追加到同一个 SourceBuffer，
|
||||
* 通过 timestampOffset 调整时间戳实现连续播放
|
||||
*/
|
||||
|
||||
import {
|
||||
createFile,
|
||||
type ISOFile,
|
||||
type MP4BoxBuffer,
|
||||
type Track,
|
||||
} from "mp4box";
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
/** 视频片段信息 */
|
||||
export interface VideoSegment {
|
||||
/** 唯一标识 */
|
||||
id: number;
|
||||
/** 视频 URL */
|
||||
url: string;
|
||||
/** 时长（秒） */
|
||||
duration: number;
|
||||
/** 开始时间戳（毫秒），用于时间轴定位 */
|
||||
startTime?: number;
|
||||
}
|
||||
|
||||
/** 播放器暴露的方法 */
|
||||
export interface SeamlessPlayerRef {
|
||||
/** 开始播放 */
|
||||
play: () => void;
|
||||
/** 暂停 */
|
||||
pause: () => void;
|
||||
/** 跳转到指定时间（秒） */
|
||||
seek: (time: number) => void;
|
||||
/** 设置倍速 */
|
||||
setPlaybackRate: (rate: number) => void;
|
||||
/** 获取当前播放时间 */
|
||||
getCurrentTime: () => number;
|
||||
/** 获取总时长 */
|
||||
getDuration: () => number;
|
||||
/** 销毁播放器 */
|
||||
destroy: () => void;
|
||||
}
|
||||
|
||||
/** 播放器属性 */
|
||||
export interface SeamlessPlayerProps {
|
||||
/** 视频片段列表 */
|
||||
segments: VideoSegment[];
|
||||
/** 自动播放 */
|
||||
autoPlay?: boolean;
|
||||
/** 播放状态变化回调 */
|
||||
onPlayStateChange?: (playing: boolean) => void;
|
||||
/** 时间更新回调 */
|
||||
onTimeUpdate?: (currentTime: number, duration: number) => void;
|
||||
/** 加载进度回调 */
|
||||
onLoadProgress?: (loaded: number, total: number) => void;
|
||||
/** 错误回调 */
|
||||
onError?: (error: Error) => void;
|
||||
/** 播放结束回调 */
|
||||
onEnded?: () => void;
|
||||
/** 自定义样式 */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** 内部状态 */
|
||||
interface PlayerState {
|
||||
isPlaying: boolean;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
buffered: number;
|
||||
loadedSegments: number;
|
||||
totalSegments: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 无缝 MP4 播放器组件
|
||||
* 使用 mp4box.js 解析 MP4，通过 MSE 实现无缝拼接播放
|
||||
*/
|
||||
const SeamlessPlayer = forwardRef<SeamlessPlayerRef, SeamlessPlayerProps>(
|
||||
(
|
||||
{
|
||||
segments,
|
||||
autoPlay = false,
|
||||
onPlayStateChange,
|
||||
onTimeUpdate,
|
||||
onLoadProgress,
|
||||
onError,
|
||||
onEnded,
|
||||
className,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const mediaSourceRef = useRef<MediaSource | null>(null);
|
||||
const sourceBufferRef = useRef<SourceBuffer | null>(null);
|
||||
const mp4boxFileRef = useRef<ISOFile | null>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
// 播放状态
|
||||
const [state, setState] = useState<PlayerState>({
|
||||
isPlaying: false,
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
buffered: 0,
|
||||
loadedSegments: 0,
|
||||
totalSegments: segments.length,
|
||||
});
|
||||
|
||||
// 累计时间偏移量，用于拼接多个文件
|
||||
const timestampOffsetRef = useRef(0);
|
||||
// 当前正在加载的片段索引
|
||||
const currentLoadingIndexRef = useRef(0);
|
||||
// 是否已初始化
|
||||
const initializedRef = useRef(false);
|
||||
// 待追加的 buffer 队列
|
||||
const pendingBuffersRef = useRef<ArrayBuffer[]>([]);
|
||||
// 是否正在追加
|
||||
const isAppendingRef = useRef(false);
|
||||
// codec 字符串
|
||||
const codecRef = useRef<string>("");
|
||||
|
||||
/**
|
||||
* 追加 buffer 到 SourceBuffer（带队列处理）
|
||||
* MSE 要求同一时间只能有一个 appendBuffer 操作
|
||||
*/
|
||||
const appendBuffer = useCallback((buffer: ArrayBuffer) => {
|
||||
const sourceBuffer = sourceBufferRef.current;
|
||||
if (!sourceBuffer || sourceBuffer.updating) {
|
||||
pendingBuffersRef.current.push(buffer);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isAppendingRef.current = true;
|
||||
sourceBuffer.appendBuffer(buffer);
|
||||
} catch (e) {
|
||||
console.error("appendBuffer error:", e);
|
||||
isAppendingRef.current = false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理队列中的待追加 buffer
|
||||
*/
|
||||
const processBufferQueue = useCallback(() => {
|
||||
const sourceBuffer = sourceBufferRef.current;
|
||||
if (
|
||||
!sourceBuffer ||
|
||||
sourceBuffer.updating ||
|
||||
pendingBuffersRef.current.length === 0
|
||||
) {
|
||||
isAppendingRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const buffer = pendingBuffersRef.current.shift();
|
||||
if (buffer) {
|
||||
try {
|
||||
sourceBuffer.appendBuffer(buffer);
|
||||
} catch (e) {
|
||||
console.error("processBufferQueue error:", e);
|
||||
isAppendingRef.current = false;
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 加载并处理单个 MP4 文件
|
||||
*/
|
||||
const loadSegment = useCallback(
|
||||
async (segment: VideoSegment, index: number) => {
|
||||
const controller = abortControllerRef.current;
|
||||
if (!controller) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(segment.url, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch ${segment.url}: ${response.status}`
|
||||
);
|
||||
}
|
||||
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
|
||||
// 创建 mp4box 文件实例处理此片段
|
||||
const mp4boxFile = createFile();
|
||||
|
||||
// 存储解析出的 segments
|
||||
const mediaSegments: ArrayBuffer[] = [];
|
||||
let initSegment: ArrayBuffer | null = null;
|
||||
|
||||
mp4boxFile.onError = (e: string) => {
|
||||
console.error(`MP4Box error for segment ${index}:`, e);
|
||||
};
|
||||
|
||||
mp4boxFile.onReady = (info: { tracks: Track[] }) => {
|
||||
// 找到视频轨道
|
||||
const videoTrack = info.tracks.find(
|
||||
(t: Track) => t.type === "video"
|
||||
);
|
||||
if (!videoTrack) {
|
||||
console.error("No video track found");
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存 codec 信息（仅第一个文件）
|
||||
if (index === 0) {
|
||||
codecRef.current = `video/mp4; codecs="${videoTrack.codec}"`;
|
||||
}
|
||||
|
||||
// 设置分片参数
|
||||
mp4boxFile.setSegmentOptions(videoTrack.id, null, {
|
||||
nbSamples: 100,
|
||||
});
|
||||
|
||||
// 获取初始化段
|
||||
const initSegs = mp4boxFile.initializeSegmentation() as unknown as
|
||||
| { buffer: ArrayBuffer }[]
|
||||
| undefined;
|
||||
if (initSegs && initSegs.length > 0) {
|
||||
initSegment = initSegs[0].buffer;
|
||||
}
|
||||
|
||||
// 开始生成媒体段
|
||||
mp4boxFile.start();
|
||||
};
|
||||
|
||||
mp4boxFile.onSegment = (
|
||||
_id: number,
|
||||
_user: unknown,
|
||||
buffer: ArrayBuffer
|
||||
) => {
|
||||
mediaSegments.push(buffer);
|
||||
};
|
||||
|
||||
// 输入数据
|
||||
const mp4Buffer = arrayBuffer as MP4BoxBuffer;
|
||||
mp4Buffer.fileStart = 0;
|
||||
mp4boxFile.appendBuffer(mp4Buffer);
|
||||
mp4boxFile.flush();
|
||||
|
||||
// 等待解析完成
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
// 第一个文件时初始化 SourceBuffer
|
||||
if (index === 0 && initSegment && codecRef.current) {
|
||||
const mediaSource = mediaSourceRef.current;
|
||||
if (mediaSource && mediaSource.readyState === "open") {
|
||||
const sourceBuffer = mediaSource.addSourceBuffer(
|
||||
codecRef.current
|
||||
);
|
||||
sourceBufferRef.current = sourceBuffer;
|
||||
|
||||
sourceBuffer.mode = "segments";
|
||||
|
||||
// 监听 updateend 事件处理队列
|
||||
sourceBuffer.addEventListener("updateend", () => {
|
||||
processBufferQueue();
|
||||
|
||||
// 检查是否所有片段都已加载完成
|
||||
if (
|
||||
currentLoadingIndexRef.current >= segments.length &&
|
||||
pendingBuffersRef.current.length === 0 &&
|
||||
!sourceBuffer.updating
|
||||
) {
|
||||
if (mediaSource.readyState === "open") {
|
||||
try {
|
||||
mediaSource.endOfStream();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 追加初始化段
|
||||
appendBuffer(initSegment);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置时间偏移量（从第二个文件开始）
|
||||
if (index > 0) {
|
||||
const sourceBuffer = sourceBufferRef.current;
|
||||
if (sourceBuffer && !sourceBuffer.updating) {
|
||||
// 等待之前的操作完成
|
||||
await new Promise<void>((resolve) => {
|
||||
const check = () => {
|
||||
if (!sourceBuffer.updating) {
|
||||
resolve();
|
||||
} else {
|
||||
setTimeout(check, 10);
|
||||
}
|
||||
};
|
||||
check();
|
||||
});
|
||||
sourceBuffer.timestampOffset = timestampOffsetRef.current;
|
||||
}
|
||||
}
|
||||
|
||||
// 追加媒体段
|
||||
for (const seg of mediaSegments) {
|
||||
appendBuffer(seg);
|
||||
}
|
||||
|
||||
// 更新时间偏移量
|
||||
timestampOffsetRef.current += segment.duration;
|
||||
|
||||
// 更新加载进度
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
loadedSegments: index + 1,
|
||||
duration: timestampOffsetRef.current,
|
||||
}));
|
||||
|
||||
onLoadProgress?.(index + 1, segments.length);
|
||||
|
||||
// 清理
|
||||
mp4boxFile.stop();
|
||||
} catch (e) {
|
||||
if ((e as Error).name !== "AbortError") {
|
||||
console.error(`Error loading segment ${index}:`, e);
|
||||
onError?.(e as Error);
|
||||
}
|
||||
}
|
||||
},
|
||||
[segments, appendBuffer, processBufferQueue, onLoadProgress, onError]
|
||||
);
|
||||
|
||||
/**
|
||||
* 初始化播放器
|
||||
*/
|
||||
const initialize = useCallback(async () => {
|
||||
if (initializedRef.current || segments.length === 0) return;
|
||||
initializedRef.current = true;
|
||||
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
|
||||
// 创建 AbortController
|
||||
abortControllerRef.current = new AbortController();
|
||||
|
||||
// 创建 MediaSource
|
||||
const mediaSource = new MediaSource();
|
||||
mediaSourceRef.current = mediaSource;
|
||||
video.src = URL.createObjectURL(mediaSource);
|
||||
|
||||
// 等待 MediaSource 打开
|
||||
await new Promise<void>((resolve) => {
|
||||
mediaSource.addEventListener("sourceopen", () => resolve(), {
|
||||
once: true,
|
||||
});
|
||||
});
|
||||
|
||||
// 依次加载所有片段
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
currentLoadingIndexRef.current = i + 1;
|
||||
await loadSegment(segments[i], i);
|
||||
}
|
||||
|
||||
// 自动播放
|
||||
if (autoPlay) {
|
||||
video.play().catch(() => {});
|
||||
}
|
||||
}, [segments, loadSegment, autoPlay]);
|
||||
|
||||
/**
|
||||
* 销毁播放器
|
||||
*/
|
||||
const destroy = useCallback(() => {
|
||||
// 取消正在进行的请求
|
||||
abortControllerRef.current?.abort();
|
||||
abortControllerRef.current = null;
|
||||
|
||||
// 停止 mp4box
|
||||
mp4boxFileRef.current?.stop();
|
||||
mp4boxFileRef.current = null;
|
||||
|
||||
// 清理 MediaSource
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.pause();
|
||||
video.src = "";
|
||||
video.load();
|
||||
}
|
||||
|
||||
if (mediaSourceRef.current?.readyState === "open") {
|
||||
try {
|
||||
mediaSourceRef.current.endOfStream();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
mediaSourceRef.current = null;
|
||||
sourceBufferRef.current = null;
|
||||
pendingBuffersRef.current = [];
|
||||
timestampOffsetRef.current = 0;
|
||||
currentLoadingIndexRef.current = 0;
|
||||
initializedRef.current = false;
|
||||
isAppendingRef.current = false;
|
||||
}, []);
|
||||
|
||||
// 暴露方法给父组件
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
play: () => {
|
||||
videoRef.current?.play().catch(() => {});
|
||||
},
|
||||
pause: () => {
|
||||
videoRef.current?.pause();
|
||||
},
|
||||
seek: (time: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.currentTime = time;
|
||||
}
|
||||
},
|
||||
setPlaybackRate: (rate: number) => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.playbackRate = rate;
|
||||
}
|
||||
},
|
||||
getCurrentTime: () => videoRef.current?.currentTime ?? 0,
|
||||
getDuration: () => videoRef.current?.duration ?? 0,
|
||||
destroy,
|
||||
}),
|
||||
[destroy]
|
||||
);
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
initialize();
|
||||
return () => {
|
||||
destroy();
|
||||
};
|
||||
}, [initialize, destroy]);
|
||||
|
||||
// 监听视频事件
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
|
||||
const handlePlay = () => {
|
||||
setState((prev) => ({ ...prev, isPlaying: true }));
|
||||
onPlayStateChange?.(true);
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setState((prev) => ({ ...prev, isPlaying: false }));
|
||||
onPlayStateChange?.(false);
|
||||
};
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
const currentTime = video.currentTime;
|
||||
const duration = video.duration || 0;
|
||||
setState((prev) => ({ ...prev, currentTime, duration }));
|
||||
onTimeUpdate?.(currentTime, duration);
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
setState((prev) => ({ ...prev, isPlaying: false }));
|
||||
onPlayStateChange?.(false);
|
||||
onEnded?.();
|
||||
};
|
||||
|
||||
const handleError = () => {
|
||||
const error = video.error;
|
||||
if (error) {
|
||||
onError?.(new Error(`Video error: ${error.message}`));
|
||||
}
|
||||
};
|
||||
|
||||
video.addEventListener("play", handlePlay);
|
||||
video.addEventListener("pause", handlePause);
|
||||
video.addEventListener("timeupdate", handleTimeUpdate);
|
||||
video.addEventListener("ended", handleEnded);
|
||||
video.addEventListener("error", handleError);
|
||||
|
||||
return () => {
|
||||
video.removeEventListener("play", handlePlay);
|
||||
video.removeEventListener("pause", handlePause);
|
||||
video.removeEventListener("timeupdate", handleTimeUpdate);
|
||||
video.removeEventListener("ended", handleEnded);
|
||||
video.removeEventListener("error", handleError);
|
||||
};
|
||||
}, [onPlayStateChange, onTimeUpdate, onEnded, onError]);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-full bg-black"
|
||||
playsInline
|
||||
controls
|
||||
/>
|
||||
{/* 加载状态指示 */}
|
||||
{state.loadedSegments < state.totalSegments && (
|
||||
<div className="absolute bottom-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
|
||||
加载中: {state.loadedSegments}/{state.totalSegments}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
SeamlessPlayer.displayName = "SeamlessPlayer";
|
||||
|
||||
export default SeamlessPlayer;
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Button, Form, Input, Popconfirm } from "antd";
|
||||
import { useNavigate } from "react-router";
|
||||
import { toastSuccess } from "~/components/xui/toast";
|
||||
import { PUT } from "~/service/config/http";
|
||||
import { ErrorHandle } from "~/service/config/error";
|
||||
import { getPublicKey } from "~/service/api/user/user";
|
||||
|
||||
interface UpdateCredentialsResponse {
|
||||
msg: string;
|
||||
}
|
||||
|
||||
/** 使用动态导入加载 node-forge 进行 RSA-OAEP 加密 */
|
||||
async function encryptWithRSA(
|
||||
publicKeyPem: string,
|
||||
data: string,
|
||||
): Promise<string> {
|
||||
const forge = (await import("node-forge")).default;
|
||||
const publicKey = forge.pki.publicKeyFromPem(publicKeyPem);
|
||||
const encrypted = publicKey.encrypt(data, "RSA-OAEP", {
|
||||
md: forge.md.sha256.create(),
|
||||
mgf1: { md: forge.md.sha256.create() },
|
||||
});
|
||||
return forge.util.encode64(encrypted);
|
||||
}
|
||||
|
||||
/** 修改账户凭据，旧密码+新账号+新密码一起加密传输 */
|
||||
async function updateCredentials(data: {
|
||||
username: string;
|
||||
old_password: string;
|
||||
password: string;
|
||||
}): Promise<UpdateCredentialsResponse> {
|
||||
const { key: base64PemKey } = await getPublicKey();
|
||||
const pemKey = atob(base64PemKey);
|
||||
const encrypted = await encryptWithRSA(pemKey, JSON.stringify(data));
|
||||
const res = await PUT<UpdateCredentialsResponse>("/users", { data: encrypted });
|
||||
return res.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 账户设置面板
|
||||
* 为什么提交后清 token 并跳登录：凭据变更后旧 JWT 语义上已失效，
|
||||
* 强制重新登录避免后续请求带过期身份。
|
||||
*/
|
||||
export default function AccountSettings({ onClose }: { onClose: () => void }) {
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { mutateAsync, isPending } = useMutation({
|
||||
mutationFn: updateCredentials,
|
||||
onError: ErrorHandle,
|
||||
onSuccess: () => {
|
||||
toastSuccess("凭据更新成功");
|
||||
localStorage.removeItem("GOWVP_TOKEN");
|
||||
localStorage.removeItem("user");
|
||||
onClose();
|
||||
navigate("/");
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const { confirmPassword: _, ...payload } = values;
|
||||
await mutateAsync(payload);
|
||||
} catch {
|
||||
// 表单验证未通过
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-sm">
|
||||
<h3 className="text-base font-medium mb-4">账户设置</h3>
|
||||
<Form form={form} layout="vertical" size="large">
|
||||
<Form.Item
|
||||
label="账号"
|
||||
name="username"
|
||||
rules={[{ required: true, message: "请输入账号" }]}
|
||||
>
|
||||
<Input placeholder="请输入新账号" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="旧密码"
|
||||
name="old_password"
|
||||
rules={[{ required: true, message: "请输入旧密码" }]}
|
||||
>
|
||||
<Input.Password placeholder="请输入当前密码" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="新密码"
|
||||
name="password"
|
||||
rules={[{ required: true, message: "请输入新密码" }]}
|
||||
>
|
||||
<Input.Password placeholder="请输入新密码" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="确认密码"
|
||||
name="confirmPassword"
|
||||
dependencies={["password"]}
|
||||
rules={[
|
||||
{ required: true, message: "请确认密码" },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue("password") === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error("两次输入的密码不一致"));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请再次输入密码" />
|
||||
</Form.Item>
|
||||
|
||||
<Popconfirm
|
||||
title="确认修改"
|
||||
description="修改账户信息后将自动退出登录，需要使用新凭据重新登录。"
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
onConfirm={handleSubmit}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={isPending}
|
||||
className="mt-2 w-1/2"
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Switch } from "antd";
|
||||
import {
|
||||
GetMetadata,
|
||||
getMetadataKey,
|
||||
SaveMetadata,
|
||||
} from "~/service/api/metadata/metadata";
|
||||
import { ErrorHandle } from "~/service/config/error";
|
||||
import logger from "~/lib/logger";
|
||||
|
||||
export const COVER_BLUR_KEY = "cover_blur";
|
||||
export const COVER_BLUR_STORAGE_KEY = "gowvp_cover_blur";
|
||||
|
||||
/**
|
||||
* 基本设置面板
|
||||
* 为什么同时写 metadata + localStorage：metadata 是跨设备持久化源，
|
||||
* localStorage 是同设备快速读取缓存，登录时从 metadata 同步到 localStorage。
|
||||
*/
|
||||
export default function GeneralSettings() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: [getMetadataKey, COVER_BLUR_KEY],
|
||||
queryFn: () => GetMetadata(COVER_BLUR_KEY),
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const blurEnabled = data?.data?.ext === "true";
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (enabled: boolean) =>
|
||||
SaveMetadata(COVER_BLUR_KEY, String(enabled)),
|
||||
onSuccess: (_, enabled) => {
|
||||
localStorage.setItem(COVER_BLUR_STORAGE_KEY, String(enabled));
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [getMetadataKey, COVER_BLUR_KEY],
|
||||
});
|
||||
// logger.debug("cover blur toggled", enabled);
|
||||
},
|
||||
onError: ErrorHandle,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-base font-medium mb-4">基本设置</h3>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">封面毛玻璃</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
开启后所有通道封面加微弱模糊效果
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={blurEnabled}
|
||||
loading={isPending}
|
||||
onChange={(checked) => mutate(checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Modal } from "antd";
|
||||
import { KeyRound, SlidersHorizontal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import AccountSettings from "./account_settings";
|
||||
import GeneralSettings from "./general_settings";
|
||||
|
||||
/** 左侧菜单项定义 */
|
||||
const menuItems = [
|
||||
{ key: "account", label: "账户设置", icon: KeyRound },
|
||||
{ key: "general", label: "基本设置", icon: SlidersHorizontal },
|
||||
] as const;
|
||||
|
||||
type MenuKey = (typeof menuItems)[number]["key"];
|
||||
|
||||
/**
|
||||
* 全局设置弹窗
|
||||
* 为什么用 Modal 而非路由页面：设置是低频操作，弹窗避免离开当前上下文，
|
||||
* 且与 ZLM 节点就地编辑的交互范式一致。
|
||||
*/
|
||||
export default function SettingsModal({
|
||||
open,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [activeKey, setActiveKey] = useState<MenuKey>("account");
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
width={768}
|
||||
destroyOnClose
|
||||
title="设置"
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
<div className="flex min-h-[400px]">
|
||||
{/* 左侧菜单 */}
|
||||
<nav className="w-40 border-r border-gray-200 py-3 shrink-0">
|
||||
{menuItems.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => setActiveKey(item.key)}
|
||||
className={`flex items-center gap-2 w-full px-4 py-2.5 text-sm transition-colors ${
|
||||
activeKey === item.key
|
||||
? "bg-gray-100 text-gray-900 font-medium border-l-2 border-gray-900"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 border-l-2 border-transparent"
|
||||
}`}
|
||||
>
|
||||
<item.icon className="w-4 h-4" />
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* 右侧内容 */}
|
||||
<div className="flex-1 p-6">
|
||||
{activeKey === "account" && <AccountSettings onClose={onClose} />}
|
||||
{activeKey === "general" && <GeneralSettings />}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,487 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import type { PlaybackTimeRange } from "~/pages/recordings/time-mapping";
|
||||
|
||||
const MIN_WINDOW_MS = 60 * 1000;
|
||||
|
||||
export interface TimelineEventMarker {
|
||||
id: string;
|
||||
absoluteMs: number;
|
||||
imageSrc?: string | null;
|
||||
label: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
count?: number;
|
||||
score?: number | null;
|
||||
}
|
||||
|
||||
export interface DayPlaybackTimelineProps {
|
||||
dayStartMs: number;
|
||||
dayEndMs: number;
|
||||
ranges: PlaybackTimeRange[];
|
||||
errorRanges?: PlaybackTimeRange[];
|
||||
eventMarkers?: TimelineEventMarker[];
|
||||
eventRanges?: PlaybackTimeRange[];
|
||||
currentTimeMs?: number | null;
|
||||
onSeek: (absoluteMs: number) => void;
|
||||
className?: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export default function DayPlaybackTimeline({
|
||||
dayStartMs,
|
||||
dayEndMs,
|
||||
ranges,
|
||||
errorRanges = [],
|
||||
eventMarkers = [],
|
||||
eventRanges = [],
|
||||
currentTimeMs,
|
||||
onSeek,
|
||||
className,
|
||||
compact = false,
|
||||
}: DayPlaybackTimelineProps) {
|
||||
const overviewRef = useRef<HTMLDivElement>(null);
|
||||
const trackRef = useRef<HTMLDivElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [hoverMs, setHoverMs] = useState<number | null>(null);
|
||||
const [activeMarkerId, setActiveMarkerId] = useState<string | null>(null);
|
||||
const [activeEventRangeKey, setActiveEventRangeKey] = useState<string | null>(null);
|
||||
const [viewStartMs, setViewStartMs] = useState(dayStartMs);
|
||||
const [viewEndMs, setViewEndMs] = useState(dayEndMs);
|
||||
|
||||
const totalDurationMs = Math.max(dayEndMs - dayStartMs, 1);
|
||||
const viewDurationMs = Math.max(viewEndMs - viewStartMs, MIN_WINDOW_MS);
|
||||
|
||||
useEffect(() => {
|
||||
setViewStartMs(dayStartMs);
|
||||
setViewEndMs(dayEndMs);
|
||||
}, [dayStartMs, dayEndMs]);
|
||||
|
||||
const clampWindow = useCallback(
|
||||
(nextStart: number, nextDuration: number) => {
|
||||
const duration = Math.min(Math.max(nextDuration, MIN_WINDOW_MS), totalDurationMs);
|
||||
const maxStart = dayEndMs - duration;
|
||||
const start = Math.min(Math.max(nextStart, dayStartMs), maxStart);
|
||||
return {
|
||||
start,
|
||||
end: start + duration,
|
||||
};
|
||||
},
|
||||
[dayEndMs, dayStartMs, totalDurationMs],
|
||||
);
|
||||
|
||||
const getAbsoluteMsFromClientX = useCallback(
|
||||
(clientX: number, element: HTMLDivElement | null, useFullDay = false) => {
|
||||
if (!element) return dayStartMs;
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.width <= 0) return dayStartMs;
|
||||
const ratio = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
|
||||
if (useFullDay) {
|
||||
return dayStartMs + ratio * totalDurationMs;
|
||||
}
|
||||
return viewStartMs + ratio * viewDurationMs;
|
||||
},
|
||||
[dayStartMs, totalDurationMs, viewDurationMs, viewStartMs],
|
||||
);
|
||||
|
||||
const visibleEventMarkers = useMemo(
|
||||
() =>
|
||||
eventMarkers.filter(
|
||||
(marker) => marker.absoluteMs >= viewStartMs && marker.absoluteMs <= viewEndMs,
|
||||
),
|
||||
[eventMarkers, viewEndMs, viewStartMs],
|
||||
);
|
||||
|
||||
const visibleEventRanges = useMemo(
|
||||
() => clipRangesToWindow(eventRanges, viewStartMs, viewEndMs),
|
||||
[eventRanges, viewEndMs, viewStartMs],
|
||||
);
|
||||
|
||||
const findHoverEventState = useCallback(
|
||||
(clientX: number, element: HTMLDivElement | null, useFullDay = false) => {
|
||||
const markers = useFullDay ? eventMarkers : visibleEventMarkers;
|
||||
const rangesForHit = useFullDay ? eventRanges : visibleEventRanges;
|
||||
if (!element || markers.length === 0 || rangesForHit.length === 0) {
|
||||
return { marker: null, rangeKey: null };
|
||||
}
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.width <= 0) {
|
||||
return { marker: null, rangeKey: null };
|
||||
}
|
||||
|
||||
const absoluteMs = getAbsoluteMsFromClientX(clientX, element, useFullDay);
|
||||
const duration = useFullDay ? totalDurationMs : viewDurationMs;
|
||||
const baseStart = useFullDay ? dayStartMs : viewStartMs;
|
||||
const msPerPx = duration / rect.width;
|
||||
const toleranceMs = Math.max(msPerPx * 10, 1200);
|
||||
|
||||
const matchedRange = rangesForHit.find(
|
||||
(range) => absoluteMs >= range.startMs - toleranceMs && absoluteMs <= range.endMs + toleranceMs,
|
||||
);
|
||||
|
||||
if (!matchedRange) {
|
||||
return { marker: null, rangeKey: null };
|
||||
}
|
||||
|
||||
let marker: TimelineEventMarker | null = null;
|
||||
let bestDistance = Number.POSITIVE_INFINITY;
|
||||
|
||||
for (const item of markers) {
|
||||
if (item.absoluteMs < matchedRange.startMs - toleranceMs || item.absoluteMs > matchedRange.endMs + toleranceMs) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const distance = Math.abs(item.absoluteMs - absoluteMs);
|
||||
if (distance < bestDistance) {
|
||||
bestDistance = distance;
|
||||
marker = item;
|
||||
}
|
||||
}
|
||||
|
||||
if (!marker) {
|
||||
return { marker: null, rangeKey: null };
|
||||
}
|
||||
|
||||
return {
|
||||
marker,
|
||||
rangeKey: `${baseStart}-${matchedRange.startMs}-${matchedRange.endMs}`,
|
||||
};
|
||||
},
|
||||
[dayStartMs, eventMarkers, eventRanges, getAbsoluteMsFromClientX, totalDurationMs, viewDurationMs, viewStartMs, visibleEventMarkers, visibleEventRanges],
|
||||
);
|
||||
|
||||
const updatePointerState = useCallback(
|
||||
(clientX: number) => {
|
||||
const absoluteMs = getAbsoluteMsFromClientX(clientX, trackRef.current);
|
||||
const hoverState = findHoverEventState(clientX, trackRef.current);
|
||||
setHoverMs(absoluteMs);
|
||||
setActiveMarkerId(hoverState.marker?.id ?? null);
|
||||
setActiveEventRangeKey(hoverState.rangeKey);
|
||||
return absoluteMs;
|
||||
},
|
||||
[findHoverEventState, getAbsoluteMsFromClientX],
|
||||
);
|
||||
|
||||
const handleOverviewClick = useCallback(
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const absoluteMs = getAbsoluteMsFromClientX(event.clientX, overviewRef.current, true);
|
||||
const centeredStart = absoluteMs - viewDurationMs / 2;
|
||||
const nextWindow = clampWindow(centeredStart, viewDurationMs);
|
||||
setViewStartMs(nextWindow.start);
|
||||
setViewEndMs(nextWindow.end);
|
||||
const hoverState = findHoverEventState(event.clientX, overviewRef.current, true);
|
||||
setActiveMarkerId(hoverState.marker?.id ?? null);
|
||||
setActiveEventRangeKey(hoverState.rangeKey);
|
||||
onSeek(absoluteMs);
|
||||
},
|
||||
[clampWindow, findHoverEventState, getAbsoluteMsFromClientX, onSeek, viewDurationMs],
|
||||
);
|
||||
|
||||
const handlePointerDown = useCallback(
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const absoluteMs = updatePointerState(event.clientX);
|
||||
setIsDragging(true);
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
onSeek(absoluteMs);
|
||||
},
|
||||
[onSeek, updatePointerState],
|
||||
);
|
||||
|
||||
const handlePointerMove = useCallback(
|
||||
(event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const absoluteMs = updatePointerState(event.clientX);
|
||||
if (isDragging) {
|
||||
onSeek(absoluteMs);
|
||||
}
|
||||
},
|
||||
[isDragging, onSeek, updatePointerState],
|
||||
);
|
||||
|
||||
const handlePointerUp = useCallback(() => {
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const element = trackRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
|
||||
const cursorRatio = Math.min(Math.max(ratio, 0), 1);
|
||||
const anchorMs = viewStartMs + cursorRatio * viewDurationMs;
|
||||
|
||||
if (event.shiftKey) {
|
||||
const delta = Math.sign(event.deltaY || event.deltaX || 0) * viewDurationMs * 0.15;
|
||||
const nextWindow = clampWindow(viewStartMs + delta, viewDurationMs);
|
||||
setViewStartMs(nextWindow.start);
|
||||
setViewEndMs(nextWindow.end);
|
||||
return;
|
||||
}
|
||||
|
||||
const zoomFactor = event.deltaY > 0 ? 1.15 : 0.85;
|
||||
const nextDuration = viewDurationMs * zoomFactor;
|
||||
const nextStart = anchorMs - cursorRatio * nextDuration;
|
||||
const nextWindow = clampWindow(nextStart, nextDuration);
|
||||
setViewStartMs(nextWindow.start);
|
||||
setViewEndMs(nextWindow.end);
|
||||
};
|
||||
|
||||
element.addEventListener("wheel", handleWheel, { passive: false });
|
||||
return () => {
|
||||
element.removeEventListener("wheel", handleWheel);
|
||||
};
|
||||
}, [clampWindow, viewDurationMs, viewStartMs]);
|
||||
|
||||
const ticks = useMemo(() => {
|
||||
const candidateSteps = [
|
||||
60 * 1000,
|
||||
5 * 60 * 1000,
|
||||
10 * 60 * 1000,
|
||||
15 * 60 * 1000,
|
||||
30 * 60 * 1000,
|
||||
60 * 60 * 1000,
|
||||
2 * 60 * 60 * 1000,
|
||||
3 * 60 * 60 * 1000,
|
||||
6 * 60 * 60 * 1000,
|
||||
];
|
||||
const desiredTickCount = 8;
|
||||
const targetStep = viewDurationMs / desiredTickCount;
|
||||
const step = candidateSteps.find((item) => item >= targetStep) ?? candidateSteps[candidateSteps.length - 1];
|
||||
const first = Math.ceil(viewStartMs / step) * step;
|
||||
|
||||
const result: number[] = [];
|
||||
for (let tick = first; tick <= viewEndMs; tick += step) {
|
||||
result.push(tick);
|
||||
}
|
||||
return result;
|
||||
}, [viewDurationMs, viewEndMs, viewStartMs]);
|
||||
|
||||
const visibleRanges = useMemo(
|
||||
() => clipRangesToWindow(ranges, viewStartMs, viewEndMs),
|
||||
[ranges, viewEndMs, viewStartMs],
|
||||
);
|
||||
|
||||
const visibleErrorRanges = useMemo(
|
||||
() => clipRangesToWindow(errorRanges, viewStartMs, viewEndMs),
|
||||
[errorRanges, viewEndMs, viewStartMs],
|
||||
);
|
||||
|
||||
const activeMarker = useMemo(
|
||||
() => eventMarkers.find((marker) => marker.id === activeMarkerId) ?? null,
|
||||
[activeMarkerId, eventMarkers],
|
||||
);
|
||||
|
||||
const currentRatio = currentTimeMs
|
||||
? (currentTimeMs - viewStartMs) / viewDurationMs
|
||||
: null;
|
||||
const overviewCurrentRatio = currentTimeMs
|
||||
? (currentTimeMs - dayStartMs) / totalDurationMs
|
||||
: null;
|
||||
const overviewWindowLeft = ((viewStartMs - dayStartMs) / totalDurationMs) * 100;
|
||||
const overviewWindowWidth = (viewDurationMs / totalDurationMs) * 100;
|
||||
const hoverRatio = hoverMs !== null ? (hoverMs - viewStartMs) / viewDurationMs : null;
|
||||
const activeMarkerRatio = activeMarker
|
||||
? (activeMarker.absoluteMs - viewStartMs) / viewDurationMs
|
||||
: null;
|
||||
const showHoverPreview = !compact && activeMarker && activeMarkerRatio !== null && activeMarkerRatio >= 0 && activeMarkerRatio <= 1;
|
||||
|
||||
return (
|
||||
<div className={cn(compact ? "space-y-3" : "space-y-4", className)}>
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between text-xs text-gray-500">
|
||||
<span>{compact ? "概览" : "全天概览"}</span>
|
||||
<span>{formatDateTime(viewStartMs)} - {formatDateTime(viewEndMs)}</span>
|
||||
</div>
|
||||
<div
|
||||
ref={overviewRef}
|
||||
className={cn("relative cursor-pointer overflow-hidden rounded-xl border border-gray-200 bg-gray-50", compact ? "h-9" : "h-10")}
|
||||
onPointerDown={handleOverviewClick}
|
||||
>
|
||||
{ranges.map((range, index) => renderRangeBlock(range, index, dayStartMs, totalDurationMs, "overview-normal"))}
|
||||
{errorRanges.map((range, index) => renderRangeBlock(range, index, dayStartMs, totalDurationMs, "overview-error"))}
|
||||
{eventRanges.map((range, index) => renderRangeBlock(range, index, dayStartMs, totalDurationMs, "overview-event", false, `${dayStartMs}-${range.startMs}-${range.endMs}` === activeEventRangeKey))}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 rounded-xl border-2 border-blue-500 bg-blue-100/35"
|
||||
style={{
|
||||
left: `${overviewWindowLeft}%`,
|
||||
width: `${Math.max(overviewWindowWidth, 2)}%`,
|
||||
}}
|
||||
/>
|
||||
{overviewCurrentRatio !== null && overviewCurrentRatio >= 0 && overviewCurrentRatio <= 1 && (
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-0.5 bg-red-500"
|
||||
style={{ left: `${overviewCurrentRatio * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between gap-3 text-xs text-gray-500">
|
||||
<span>{compact ? "拖动定位" : "点击、拖动定位，悬停橙色区间预览，滚轮缩放，Shift + 滚轮平移"}</span>
|
||||
<span>
|
||||
{activeMarker
|
||||
? activeMarker.title ?? formatDateTime(activeMarker.absoluteMs)
|
||||
: hoverMs
|
||||
? formatDateTime(hoverMs)
|
||||
: currentTimeMs
|
||||
? formatDateTime(currentTimeMs)
|
||||
: "--:--:--"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-visible">
|
||||
{showHoverPreview && activeMarker && activeMarkerRatio !== null && (
|
||||
<div
|
||||
className="pointer-events-none absolute bottom-full z-30 mb-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-xl"
|
||||
style={{
|
||||
left: `clamp(7rem, ${activeMarkerRatio * 100}%, calc(100% - 7rem))`,
|
||||
}}
|
||||
>
|
||||
{activeMarker.imageSrc ? (
|
||||
<img src={activeMarker.imageSrc} alt={activeMarker.title ?? "告警快照"} className="aspect-video w-full bg-black object-cover" />
|
||||
) : (
|
||||
<div className="flex aspect-video w-full items-center justify-center bg-gray-900 px-3 text-center text-xs text-white/80">
|
||||
当前告警暂无快照
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1 border-t border-amber-100 px-3 py-2 text-xs text-gray-600">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium text-gray-800">{activeMarker.title ?? "告警快照"}</span>
|
||||
{typeof activeMarker.count === "number" && activeMarker.count > 1 && (
|
||||
<span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">{activeMarker.count} 个目标</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-gray-500">{activeMarker.subtitle ?? activeMarker.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={trackRef}
|
||||
className={cn("relative cursor-pointer overflow-hidden rounded-2xl border border-gray-200 bg-white touch-none select-none", compact ? "h-24" : "h-28")}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerLeave={() => {
|
||||
handlePointerUp();
|
||||
setHoverMs(null);
|
||||
setActiveMarkerId(null);
|
||||
setActiveEventRangeKey(null);
|
||||
}}
|
||||
onPointerCancel={() => {
|
||||
handlePointerUp();
|
||||
setHoverMs(null);
|
||||
setActiveMarkerId(null);
|
||||
setActiveEventRangeKey(null);
|
||||
}}
|
||||
onDoubleClick={(event) => onSeek(getAbsoluteMsFromClientX(event.clientX, trackRef.current))}
|
||||
>
|
||||
<div className={cn("absolute inset-x-0 bg-gray-50", compact ? "top-7 bottom-7" : "top-8 bottom-8")} />
|
||||
|
||||
{ticks.map((tick) => {
|
||||
const left = ((tick - viewStartMs) / viewDurationMs) * 100;
|
||||
return (
|
||||
<div key={tick} className="absolute top-0 bottom-0" style={{ left: `${left}%` }}>
|
||||
<div className={cn("-translate-x-1/2 text-gray-500", compact ? "h-5 text-[10px]" : "h-6 text-[11px]")}>{formatAxisTime(tick, viewDurationMs)}</div>
|
||||
<div className="absolute top-6 bottom-0 border-l border-dashed border-gray-200" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{visibleRanges.map((range, index) => renderRangeBlock(range, index, viewStartMs, viewDurationMs, "detail-normal", compact))}
|
||||
{visibleErrorRanges.map((range, index) => renderRangeBlock(range, index, viewStartMs, viewDurationMs, "detail-error", compact))}
|
||||
{visibleEventRanges.map((range, index) => renderRangeBlock(range, index, viewStartMs, viewDurationMs, "detail-event", compact, `${viewStartMs}-${range.startMs}-${range.endMs}` === activeEventRangeKey))}
|
||||
|
||||
{hoverRatio !== null && hoverRatio >= 0 && hoverRatio <= 1 && (
|
||||
<div
|
||||
className="absolute top-0 bottom-0 z-10 w-px bg-blue-500/80"
|
||||
style={{ left: `${hoverRatio * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentRatio !== null && currentRatio >= 0 && currentRatio <= 1 && (
|
||||
<div
|
||||
className="absolute top-0 bottom-0 z-20 w-0.5 bg-red-500"
|
||||
style={{ left: `${currentRatio * 100}%` }}
|
||||
>
|
||||
<div className={cn("absolute top-0 rounded-full border-2 border-white bg-red-500 shadow", compact ? "-left-1 h-2.5 w-2.5" : "-left-1.5 h-3 w-3")} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function clipRangesToWindow(ranges: PlaybackTimeRange[], viewStartMs: number, viewEndMs: number) {
|
||||
return ranges
|
||||
.filter((range) => range.endMs >= viewStartMs && range.startMs <= viewEndMs)
|
||||
.map((range) => ({
|
||||
startMs: Math.max(range.startMs, viewStartMs),
|
||||
endMs: Math.min(range.endMs, viewEndMs),
|
||||
}));
|
||||
}
|
||||
|
||||
function renderRangeBlock(
|
||||
range: PlaybackTimeRange,
|
||||
index: number,
|
||||
baseStartMs: number,
|
||||
durationMs: number,
|
||||
variant:
|
||||
| "overview-normal"
|
||||
| "overview-error"
|
||||
| "overview-event"
|
||||
| "detail-normal"
|
||||
| "detail-error"
|
||||
| "detail-event",
|
||||
compact = false,
|
||||
active = false,
|
||||
) {
|
||||
const left = ((range.startMs - baseStartMs) / durationMs) * 100;
|
||||
const width = ((range.endMs - range.startMs) / durationMs) * 100;
|
||||
|
||||
const className = {
|
||||
"overview-normal": "absolute top-1.5 bottom-1.5 rounded-lg bg-blue-300",
|
||||
"overview-error": "absolute top-1.5 bottom-1.5 z-10 rounded-lg bg-red-400",
|
||||
"overview-event": cn("absolute top-1.5 bottom-1.5 z-20 rounded-lg bg-amber-400/90", active && "ring-2 ring-amber-200"),
|
||||
"detail-normal": cn("absolute rounded-lg border border-blue-300 bg-blue-200", compact ? "top-8 bottom-8" : "top-10 bottom-10"),
|
||||
"detail-error": cn("absolute z-10 rounded-lg border border-red-400 bg-red-300/90", compact ? "top-8 bottom-8" : "top-10 bottom-10"),
|
||||
"detail-event": cn(
|
||||
"absolute z-20 rounded-lg border border-amber-500/80 bg-amber-300/90 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.25)]",
|
||||
compact ? "top-8 bottom-8" : "top-10 bottom-10",
|
||||
active && "bg-amber-400 ring-2 ring-amber-200",
|
||||
),
|
||||
}[variant];
|
||||
|
||||
const minWidth = variant.startsWith("overview") ? 0.2 : variant === "detail-event" ? 0.65 : 0.5;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${variant}-${range.startMs}-${range.endMs}-${index}`}
|
||||
className={className}
|
||||
style={{ left: `${left}%`, width: `${Math.max(width, minWidth)}%` }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function formatAxisTime(timestampMs: number, viewDurationMs: number) {
|
||||
const date = new Date(timestampMs);
|
||||
const hour = String(date.getHours()).padStart(2, "0");
|
||||
const minute = String(date.getMinutes()).padStart(2, "0");
|
||||
const second = String(date.getSeconds()).padStart(2, "0");
|
||||
return viewDurationMs <= 10 * 60 * 1000 ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
|
||||
}
|
||||
|
||||
function formatDateTime(timestampMs: number) {
|
||||
const date = new Date(timestampMs);
|
||||
const hour = String(date.getHours()).padStart(2, "0");
|
||||
const minute = String(date.getMinutes()).padStart(2, "0");
|
||||
const second = String(date.getSeconds()).padStart(2, "0");
|
||||
return `${hour}:${minute}:${second}`;
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import { useCallback, useRef, useState, useEffect, useMemo } from "react";
|
||||
import type { TimeRange } from "~/service/api/recording/state";
|
||||
import type { Event } from "~/service/api/event/state";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
interface ReviewTimelineProps {
|
||||
/** 录像时间段列表 */
|
||||
timeRanges: TimeRange[];
|
||||
/** 事件列表 */
|
||||
events: Event[];
|
||||
/** 当前播放时间（毫秒时间戳） */
|
||||
currentTime: number;
|
||||
/** 时间范围开始（毫秒时间戳） */
|
||||
startTime: number;
|
||||
/** 时间范围结束（毫秒时间戳） */
|
||||
endTime: number;
|
||||
/** 时间变化回调 */
|
||||
onTimeChange: (time: number) => void;
|
||||
/** 是否加载中 */
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Frigate 风格的垂直时间轴组件
|
||||
* 整个右侧区域，从上到下表示从最新到最旧的时间
|
||||
* 蓝色区域表示有录像，橙色波形表示有活动/事件
|
||||
*/
|
||||
export function ReviewTimeline({
|
||||
timeRanges,
|
||||
events,
|
||||
currentTime,
|
||||
startTime,
|
||||
endTime,
|
||||
onTimeChange,
|
||||
isLoading = false,
|
||||
}: ReviewTimelineProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const totalDuration = endTime - startTime;
|
||||
|
||||
// 生成时间刻度（每小时一个大刻度，每15分钟一个小刻度）
|
||||
const timeMarkers = useMemo(() => {
|
||||
const markers: { time: number; label: string; isHour: boolean }[] = [];
|
||||
// 从结束时间向开始时间生成
|
||||
const hourMs = 60 * 60 * 1000;
|
||||
const quarterMs = 15 * 60 * 1000;
|
||||
|
||||
// 找到第一个整点
|
||||
const firstHour = new Date(endTime);
|
||||
firstHour.setMinutes(0, 0, 0);
|
||||
let currentMarker = firstHour.getTime();
|
||||
|
||||
while (currentMarker >= startTime) {
|
||||
const date = new Date(currentMarker);
|
||||
const isHour = date.getMinutes() === 0;
|
||||
if (isHour) {
|
||||
markers.push({
|
||||
time: currentMarker,
|
||||
label: formatTimeLabel(date),
|
||||
isHour: true,
|
||||
});
|
||||
}
|
||||
currentMarker -= quarterMs;
|
||||
}
|
||||
|
||||
return markers;
|
||||
}, [startTime, endTime]);
|
||||
|
||||
// 计算时间对应的位置百分比（从顶部开始，顶部是最新时间）
|
||||
const getPositionPercent = useCallback(
|
||||
(time: number) => {
|
||||
return ((endTime - time) / totalDuration) * 100;
|
||||
},
|
||||
[endTime, totalDuration],
|
||||
);
|
||||
|
||||
// 计算位置对应的时间
|
||||
const getTimeFromPosition = useCallback(
|
||||
(y: number, containerHeight: number) => {
|
||||
const percent = y / containerHeight;
|
||||
return endTime - percent * totalDuration;
|
||||
},
|
||||
[endTime, totalDuration],
|
||||
);
|
||||
|
||||
// 处理指针事件
|
||||
const handlePointerDown = useCallback(
|
||||
(e: React.PointerEvent) => {
|
||||
if (!containerRef.current) return;
|
||||
setIsDragging(true);
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const time = getTimeFromPosition(y, rect.height);
|
||||
onTimeChange(Math.max(startTime, Math.min(endTime, time)));
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
},
|
||||
[getTimeFromPosition, onTimeChange, startTime, endTime],
|
||||
);
|
||||
|
||||
const handlePointerMove = useCallback(
|
||||
(e: React.PointerEvent) => {
|
||||
if (!isDragging || !containerRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const time = getTimeFromPosition(y, rect.height);
|
||||
onTimeChange(Math.max(startTime, Math.min(endTime, time)));
|
||||
},
|
||||
[isDragging, getTimeFromPosition, onTimeChange, startTime, endTime],
|
||||
);
|
||||
|
||||
const handlePointerUp = useCallback(() => {
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
// 计算事件密度（用于绘制波形）
|
||||
const eventDensity = useMemo(() => {
|
||||
const bucketCount = 100;
|
||||
const bucketDuration = totalDuration / bucketCount;
|
||||
const density: number[] = new Array(bucketCount).fill(0);
|
||||
|
||||
for (const event of events) {
|
||||
const bucketIndex = Math.floor(
|
||||
(endTime - event.started_at) / bucketDuration,
|
||||
);
|
||||
if (bucketIndex >= 0 && bucketIndex < bucketCount) {
|
||||
density[bucketIndex]++;
|
||||
}
|
||||
}
|
||||
|
||||
// 归一化
|
||||
const maxDensity = Math.max(...density, 1);
|
||||
return density.map((d) => d / maxDensity);
|
||||
}, [events, endTime, totalDuration]);
|
||||
|
||||
// 当前时间指示器位置
|
||||
const currentTimePercent = getPositionPercent(currentTime);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 当前时间显示 */}
|
||||
<div className="h-10 flex items-center justify-center border-b border-gray-700">
|
||||
<span className="text-xs font-mono text-red-400">
|
||||
{formatTimeDisplay(new Date(currentTime))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 时间轴主体 */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex-1 relative cursor-pointer select-none overflow-hidden"
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerLeave={handlePointerUp}
|
||||
>
|
||||
{/* 背景 */}
|
||||
<div className="absolute inset-0 bg-gray-900" />
|
||||
|
||||
{/* 录像时段（蓝色背景） */}
|
||||
{timeRanges.map((range, index) => {
|
||||
const topPercent = getPositionPercent(range.end_ms);
|
||||
const bottomPercent = getPositionPercent(range.start_ms);
|
||||
const heightPercent = bottomPercent - topPercent;
|
||||
return (
|
||||
<div
|
||||
key={`range-${index}`}
|
||||
className="absolute left-8 right-0 bg-blue-500/30"
|
||||
style={{
|
||||
top: `${topPercent}%`,
|
||||
height: `${heightPercent}%`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 事件密度波形（橙色） */}
|
||||
<div className="absolute left-8 right-0 top-0 bottom-0 flex flex-col">
|
||||
{eventDensity.map((density, index) => (
|
||||
<div
|
||||
key={`density-${index}`}
|
||||
className="flex-1 flex items-center justify-end"
|
||||
>
|
||||
{density > 0 && (
|
||||
<div
|
||||
className="h-full bg-orange-400"
|
||||
style={{
|
||||
width: `${Math.max(density * 100, 10)}%`,
|
||||
opacity: 0.3 + density * 0.7,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 时间刻度 */}
|
||||
{timeMarkers.map((marker) => {
|
||||
const topPercent = getPositionPercent(marker.time);
|
||||
if (topPercent < 0 || topPercent > 100) return null;
|
||||
return (
|
||||
<div
|
||||
key={marker.time}
|
||||
className="absolute left-0 right-0 flex items-center pointer-events-none"
|
||||
style={{ top: `${topPercent}%` }}
|
||||
>
|
||||
<div className="w-8 flex items-center justify-end pr-1">
|
||||
<span className="text-[10px] text-gray-400">
|
||||
{marker.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 h-px bg-gray-600" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 当前时间指示器（红色横线 + 左侧三角形） */}
|
||||
<div
|
||||
className="absolute left-0 right-0 z-20 pointer-events-none"
|
||||
style={{ top: `${currentTimePercent}%` }}
|
||||
>
|
||||
<div className="relative flex items-center -translate-y-1/2">
|
||||
{/* 红色横线 */}
|
||||
<div className="absolute left-0 right-0 h-0.5 bg-red-500" />
|
||||
{/* 左侧三角形手柄 */}
|
||||
<div
|
||||
className="absolute left-0 w-0 h-0"
|
||||
style={{
|
||||
borderTop: "6px solid transparent",
|
||||
borderBottom: "6px solid transparent",
|
||||
borderLeft: "8px solid #ef4444",
|
||||
}}
|
||||
/>
|
||||
{/* 右侧小圆点 */}
|
||||
<div className="absolute right-0 w-2 h-2 bg-red-500 rounded-full -translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 格式化时间标签（如 "12 PM"）
|
||||
function formatTimeLabel(date: Date): string {
|
||||
const hours = date.getHours();
|
||||
const ampm = hours >= 12 ? "PM" : "AM";
|
||||
const hour12 = hours % 12 || 12;
|
||||
return `${hour12} ${ampm}`;
|
||||
}
|
||||
|
||||
// 格式化时间显示（如 "12:42:39 PM"）
|
||||
function formatTimeDisplay(date: Date): string {
|
||||
return date.toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
}
|
||||
|
||||
export default ReviewTimeline;
|
||||
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
type NodeProps,
|
||||
NodeToolbar,
|
||||
type NodeToolbarProps,
|
||||
} from "@xyflow/react";
|
||||
import React, {
|
||||
createContext,
|
||||
forwardRef,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useState,
|
||||
} from "react";
|
||||
import { BaseNode } from "~/components/base-node";
|
||||
|
||||
/* TOOLTIP CONTEXT ---------------------------------------------------------- */
|
||||
|
||||
const TooltipContext = createContext(false);
|
||||
|
||||
/* TOOLTIP NODE ------------------------------------------------------------- */
|
||||
|
||||
export type TooltipNodeProps = Partial<NodeProps> & {
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* A component that wraps a node and provides tooltip visibility context.
|
||||
*/
|
||||
export const TooltipNode = forwardRef<HTMLDivElement, TooltipNodeProps>(
|
||||
({ selected, children }, ref) => {
|
||||
const [isTooltipVisible, setTooltipVisible] = useState(false);
|
||||
|
||||
const showTooltip = useCallback(() => setTooltipVisible(true), []);
|
||||
const hideTooltip = useCallback(() => setTooltipVisible(false), []);
|
||||
|
||||
return (
|
||||
<TooltipContext.Provider value={isTooltipVisible}>
|
||||
<BaseNode
|
||||
ref={ref}
|
||||
onMouseEnter={showTooltip}
|
||||
onMouseLeave={hideTooltip}
|
||||
onFocus={showTooltip}
|
||||
onBlur={hideTooltip}
|
||||
tabIndex={0}
|
||||
selected={selected}
|
||||
>
|
||||
{children}
|
||||
</BaseNode>
|
||||
</TooltipContext.Provider>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
TooltipNode.displayName = "TooltipNode";
|
||||
|
||||
/* TOOLTIP CONTENT ---------------------------------------------------------- */
|
||||
|
||||
export type TooltipContentProps = NodeToolbarProps;
|
||||
|
||||
/**
|
||||
* A component that displays the tooltip content based on visibility context.
|
||||
*/
|
||||
export const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
|
||||
({ position, children }, ref) => {
|
||||
const isTooltipVisible = useContext(TooltipContext);
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<NodeToolbar
|
||||
isVisible={isTooltipVisible}
|
||||
className="rounded-sm bg-primary p-2 text-primary-foreground"
|
||||
tabIndex={0}
|
||||
position={position}
|
||||
>
|
||||
{children}
|
||||
</NodeToolbar>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
TooltipContent.displayName = "TooltipContent";
|
||||
|
||||
/* TOOLTIP TRIGGER ---------------------------------------------------------- */
|
||||
|
||||
export type TooltipTriggerProps = React.HTMLAttributes<HTMLParagraphElement>;
|
||||
|
||||
/**
|
||||
* A component that triggers the tooltip visibility.
|
||||
*/
|
||||
export const TooltipTrigger = forwardRef<
|
||||
HTMLParagraphElement,
|
||||
TooltipTriggerProps
|
||||
>(({ children, ...props }, ref) => {
|
||||
return (
|
||||
<div ref={ref} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TooltipTrigger.displayName = "TooltipTrigger";
|
||||
@@ -0,0 +1,160 @@
|
||||
import { Tour } from "antd";
|
||||
import type { TourStepProps } from "antd";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { GetMetadata, SaveMetadata } from "~/service/api/metadata/metadata";
|
||||
import logger from "~/lib/logger";
|
||||
|
||||
const TOUR_METADATA_KEY = "app_tour_completed";
|
||||
const TOUR_STORAGE_KEY = "app_tour_completed";
|
||||
|
||||
interface AppTourProps {
|
||||
/** 引导开始前触发，用于准备 UI（如展开 FAB 菜单） */
|
||||
onBeforeStep?: (step: number) => void;
|
||||
/** 引导结束 */
|
||||
onFinish?: () => void;
|
||||
}
|
||||
|
||||
/** 查询 DOM 元素作为 Tour target */
|
||||
function queryTarget(selector: string): HTMLElement | null {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
/**
|
||||
* 为什么用 metadata + localStorage 双重存储：
|
||||
* localStorage 保证本地首次判断不闪烁，metadata 保证换设备/清缓存后仍能跳过引导。
|
||||
*/
|
||||
export default function AppTour({ onBeforeStep, onFinish }: AppTourProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const localFlag = localStorage.getItem(TOUR_STORAGE_KEY);
|
||||
if (localFlag === "true") {
|
||||
logger.info("AppTour: 本地已标记引导完成，跳过");
|
||||
return;
|
||||
}
|
||||
|
||||
// 延迟检查，等 ReactFlow 渲染完
|
||||
const timer = setTimeout(() => {
|
||||
setOpen(true);
|
||||
}, 1500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
/** 标记引导已完成，同步到 localStorage 和 metadata */
|
||||
const markCompleted = useCallback(async () => {
|
||||
localStorage.setItem(TOUR_STORAGE_KEY, "true");
|
||||
try {
|
||||
await SaveMetadata(TOUR_METADATA_KEY, "true");
|
||||
logger.info("AppTour: 引导完成标记已同步到服务端");
|
||||
} catch (e) {
|
||||
logger.warn("AppTour: 同步引导标记到服务端失败", e);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/** 临时关闭（遮罩点击/ESC），不持久化，下次刷新仍显示 */
|
||||
const handleDismiss = useCallback(() => {
|
||||
setOpen(false);
|
||||
onFinish?.();
|
||||
}, [onFinish]);
|
||||
|
||||
/** 永久结束引导（"跳过" 或 "开始自行探索" 按钮），写入 metadata */
|
||||
const handleComplete = useCallback(() => {
|
||||
setOpen(false);
|
||||
markCompleted();
|
||||
onFinish?.();
|
||||
}, [markCompleted, onFinish]);
|
||||
|
||||
const handleStepChange = useCallback((step: number) => {
|
||||
setCurrent(step);
|
||||
onBeforeStep?.(step);
|
||||
}, [onBeforeStep]);
|
||||
|
||||
const steps: TourStepProps[] = useMemo(() => [
|
||||
{
|
||||
title: t("tour_dataflow_title"),
|
||||
description: t("tour_dataflow_desc"),
|
||||
target: () => queryTarget('[data-tour-id="dataflow"]')!,
|
||||
placement: "rightBottom",
|
||||
},
|
||||
{
|
||||
title: t("tour_floor_plan_title"),
|
||||
description: t("tour_floor_plan_desc"),
|
||||
target: () => queryTarget('[data-tour-id="floor-plan"]')!,
|
||||
placement: "rightBottom",
|
||||
},
|
||||
{
|
||||
title: "GB/T28181",
|
||||
description: t("tour_gb28181_desc"),
|
||||
target: () => queryTarget('[data-tour-id="gb28181"]')!,
|
||||
placement: "right",
|
||||
},
|
||||
{
|
||||
title: t("tour_zlm_settings_title"),
|
||||
description: t("tour_zlm_settings_desc"),
|
||||
target: () => queryTarget('[data-tour-id="zlm-settings"]')!,
|
||||
placement: "left",
|
||||
},
|
||||
{
|
||||
title: t("tour_fab_menu_title"),
|
||||
description: t("tour_fab_menu_desc"),
|
||||
target: () => queryTarget('[data-tour-id="fab-menu"]')!,
|
||||
placement: "leftBottom",
|
||||
},
|
||||
{
|
||||
title: t("tour_language_title"),
|
||||
description: t("tour_language_desc"),
|
||||
target: () => queryTarget('[data-tour-id="fab-language"]')!,
|
||||
placement: "left",
|
||||
},
|
||||
], [t]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<Tour
|
||||
open={open}
|
||||
current={current}
|
||||
onChange={handleStepChange}
|
||||
onClose={handleDismiss}
|
||||
steps={steps}
|
||||
indicatorsRender={(cur, total) => (
|
||||
<span className="text-xs text-gray-400">
|
||||
{cur + 1} / {total}
|
||||
</span>
|
||||
)}
|
||||
actionsRender={(_, info) => {
|
||||
const isLast = info.current === info.total - 1;
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{!isLast && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleComplete}
|
||||
className="px-3 py-1 text-sm text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
{t("tour_skip")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isLast) {
|
||||
handleComplete();
|
||||
} else {
|
||||
handleStepChange(info.current + 1);
|
||||
}
|
||||
}}
|
||||
className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{isLast ? t("tour_start_exploring") : t("tour_next")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
import * as React from "react";
|
||||
import { buttonVariants } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const AlertDialog = AlertDialogPrimitive.Root;
|
||||
|
||||
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
||||
|
||||
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
||||
|
||||
const AlertDialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
||||
|
||||
const AlertDialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
));
|
||||
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
||||
|
||||
const AlertDialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
AlertDialogHeader.displayName = "AlertDialogHeader";
|
||||
|
||||
const AlertDialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
AlertDialogFooter.displayName = "AlertDialogFooter";
|
||||
|
||||
const AlertDialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
||||
|
||||
const AlertDialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogDescription.displayName =
|
||||
AlertDialogPrimitive.Description.displayName;
|
||||
|
||||
const AlertDialogAction = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Action
|
||||
ref={ref}
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
||||
|
||||
const AlertDialogCancel = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
ref={ref}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"mt-2 sm:mt-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
||||
|
||||
const AspectRatio = AspectRatioPrimitive.Root;
|
||||
|
||||
export { AspectRatio };
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
||||
|
||||
const AvatarImage = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
||||
|
||||
const AvatarFallback = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback };
|
||||
@@ -0,0 +1,36 @@
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import type * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Breadcrumb = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.ComponentPropsWithoutRef<"nav"> & {
|
||||
separator?: React.ReactNode;
|
||||
}
|
||||
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
|
||||
Breadcrumb.displayName = "Breadcrumb";
|
||||
|
||||
const BreadcrumbList = React.forwardRef<
|
||||
HTMLOListElement,
|
||||
React.ComponentPropsWithoutRef<"ol">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ol
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
BreadcrumbList.displayName = "BreadcrumbList";
|
||||
|
||||
const BreadcrumbItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentPropsWithoutRef<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
ref={ref}
|
||||
className={cn("inline-flex items-center gap-1.5", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
BreadcrumbItem.displayName = "BreadcrumbItem";
|
||||
|
||||
const BreadcrumbLink = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentPropsWithoutRef<"a"> & {
|
||||
asChild?: boolean;
|
||||
}
|
||||
>(({ asChild, className, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "a";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
className={cn("transition-colors hover:text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
BreadcrumbLink.displayName = "BreadcrumbLink";
|
||||
|
||||
const BreadcrumbPage = React.forwardRef<
|
||||
HTMLSpanElement,
|
||||
React.ComponentPropsWithoutRef<"span">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<span
|
||||
ref={ref}
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("font-normal text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
BreadcrumbPage.displayName = "BreadcrumbPage";
|
||||
|
||||
const BreadcrumbSeparator = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) => (
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? <ChevronRight />}
|
||||
</li>
|
||||
);
|
||||
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
||||
|
||||
const BreadcrumbEllipsis = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) => (
|
||||
<span
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
);
|
||||
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
};
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
isLoading?: boolean;
|
||||
isFull?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
isLoading: loading,
|
||||
isFull = false,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<div
|
||||
className={cn("relative inline-block select-none", isFull && "w-full")}
|
||||
>
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
style={{
|
||||
height: "32px",
|
||||
}}
|
||||
// disabled={loading}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{props.children}
|
||||
{loading && (
|
||||
// <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-80 z-10">
|
||||
<Loader2 className="animate-spin" />
|
||||
// </div>
|
||||
)}
|
||||
</Comp>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,83 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border-none bg-card text-card-foreground shadow-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
|
||||
));
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
};
|
||||
@@ -0,0 +1,363 @@
|
||||
import * as React from "react";
|
||||
import * as RechartsPrimitive from "recharts";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const;
|
||||
|
||||
export type ChartConfig = {
|
||||
[k in string]: {
|
||||
label?: React.ReactNode;
|
||||
icon?: React.ComponentType;
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
);
|
||||
};
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig;
|
||||
};
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
const ChartContainer = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
config: ChartConfig;
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"];
|
||||
}
|
||||
>(({ id, className, children, config, ...props }, ref) => {
|
||||
const uniqueId = React.useId();
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
);
|
||||
});
|
||||
ChartContainer.displayName = "Chart";
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([, config]) => config.theme || config.color,
|
||||
);
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||
itemConfig.color;
|
||||
return color ? ` --color-${key}: ${color};` : null;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||
|
||||
const ChartTooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean;
|
||||
hideIndicator?: boolean;
|
||||
indicator?: "line" | "dot" | "dashed";
|
||||
nameKey?: string;
|
||||
labelKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [item] = payload;
|
||||
const key = `${labelKey || item.dataKey || item.name || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label as keyof typeof config]?.label || label
|
||||
: itemConfig?.label;
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
]);
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const indicatorColor = color || item.payload.fill || item.color;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center",
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
},
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center",
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span className="font-mono font-medium tabular-nums text-foreground">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartTooltipContent.displayName = "ChartTooltip";
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend;
|
||||
|
||||
const ChartLegendContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean;
|
||||
nameKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
if (!payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{payload.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartLegendContent.displayName = "ChartLegend";
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string,
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined;
|
||||
|
||||
let configLabelKey: string = key;
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string;
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key as keyof typeof config];
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||
import { Check } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
export { Checkbox };
|
||||
@@ -0,0 +1,9 @@
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
||||
|
||||
const Collapsible = CollapsiblePrimitive.Root;
|
||||
|
||||
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
||||
|
||||
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
||||
@@ -0,0 +1,116 @@
|
||||
import * as React from "react";
|
||||
import { Drawer as DrawerPrimitive } from "vaul";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Drawer = ({
|
||||
shouldScaleBackground = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
|
||||
<DrawerPrimitive.Root
|
||||
shouldScaleBackground={shouldScaleBackground}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
Drawer.displayName = "Drawer";
|
||||
|
||||
const DrawerTrigger = DrawerPrimitive.Trigger;
|
||||
|
||||
const DrawerPortal = DrawerPrimitive.Portal;
|
||||
|
||||
const DrawerClose = DrawerPrimitive.Close;
|
||||
|
||||
const DrawerOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn("fixed inset-0 z-50 bg-black/80", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
|
||||
|
||||
const DrawerContent = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DrawerPortal>
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="mx-auto mt-3 h-1 rounded-full bg-muted" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
));
|
||||
DrawerContent.displayName = "DrawerContent";
|
||||
|
||||
const DrawerHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DrawerHeader.displayName = "DrawerHeader";
|
||||
|
||||
const DrawerFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DrawerFooter.displayName = "DrawerFooter";
|
||||
|
||||
const DrawerTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
|
||||
|
||||
const DrawerDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
};
|
||||
@@ -0,0 +1,199 @@
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
));
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
));
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
));
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
));
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
@@ -0,0 +1,24 @@
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
||||
);
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Label.displayName = LabelPrimitive.Root.displayName;
|
||||
|
||||
export { Label };
|
||||
@@ -0,0 +1,128 @@
|
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||
import { cva } from "class-variance-authority";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const NavigationMenu = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenuPrimitive.Root>
|
||||
));
|
||||
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
|
||||
|
||||
const NavigationMenuList = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center space-x-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
|
||||
|
||||
const NavigationMenuItem = NavigationMenuPrimitive.Item;
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
|
||||
);
|
||||
|
||||
const NavigationMenuTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDown
|
||||
className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
));
|
||||
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
|
||||
|
||||
const NavigationMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
|
||||
|
||||
const NavigationMenuLink = NavigationMenuPrimitive.Link;
|
||||
|
||||
const NavigationMenuViewport = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className={cn("absolute left-0 top-full flex justify-center")}>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
className={cn(
|
||||
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
NavigationMenuViewport.displayName =
|
||||
NavigationMenuPrimitive.Viewport.displayName;
|
||||
|
||||
const NavigationMenuIndicator = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
));
|
||||
NavigationMenuIndicator.displayName =
|
||||
NavigationMenuPrimitive.Indicator.displayName;
|
||||
|
||||
export {
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
};
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { type ButtonProps, buttonVariants } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
Pagination.displayName = "Pagination";
|
||||
|
||||
const PaginationContent = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
PaginationContent.displayName = "PaginationContent";
|
||||
|
||||
const PaginationItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li ref={ref} className={cn("", className)} {...props} />
|
||||
));
|
||||
PaginationItem.displayName = "PaginationItem";
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean;
|
||||
} & Pick<ButtonProps, "size"> &
|
||||
React.ComponentProps<"a">;
|
||||
|
||||
const PaginationLink = ({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) => (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
PaginationLink.displayName = "PaginationLink";
|
||||
|
||||
const PaginationPrevious = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</PaginationLink>
|
||||
);
|
||||
PaginationPrevious.displayName = "PaginationPrevious";
|
||||
|
||||
const PaginationNext = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</PaginationLink>
|
||||
);
|
||||
PaginationNext.displayName = "PaginationNext";
|
||||
|
||||
const PaginationEllipsis = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) => (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
);
|
||||
PaginationEllipsis.displayName = "PaginationEllipsis";
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
));
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const RadioGroup = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
});
|
||||
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
||||
|
||||
const RadioGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||
<div className="h-2 w-2 rounded-full bg-current" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
);
|
||||
});
|
||||
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
||||
|
||||
export { RadioGroup, RadioGroupItem };
|
||||
@@ -0,0 +1,43 @@
|
||||
import { GripVertical } from "lucide-react";
|
||||
import * as ResizablePrimitive from "react-resizable-panels";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const ResizablePanelGroup = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
const ResizablePanel = ResizablePrimitive.Panel;
|
||||
|
||||
const ResizableHandle = ({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||
withHandle?: boolean;
|
||||
}) => (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
className={cn(
|
||||
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||
<GripVertical className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
);
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||
@@ -0,0 +1,157 @@
|
||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Select = SelectPrimitive.Root;
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group;
|
||||
|
||||
const SelectValue = SelectPrimitive.Value;
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
));
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
));
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
));
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName;
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
|
||||
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}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
));
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
));
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
ref,
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
);
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
||||
|
||||
export { Separator };
|
||||
@@ -0,0 +1,138 @@
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { X } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Sheet = SheetPrimitive.Root;
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger;
|
||||
|
||||
const SheetClose = SheetPrimitive.Close;
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal;
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
{children}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
));
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
SheetHeader.displayName = "SheetHeader";
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
SheetFooter.displayName = "SheetFooter";
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
};
|
||||
@@ -0,0 +1,760 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { PanelLeft } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { Sheet, SheetContent } from "~/components/ui/sheet";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "~/components/ui/tooltip";
|
||||
import { useIsMobile } from "~/hooks/use-mobile";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||
const SIDEBAR_WIDTH = "16rem";
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
||||
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||
|
||||
type SidebarContext = {
|
||||
state: "expanded" | "collapsed";
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
openMobile: boolean;
|
||||
setOpenMobile: (open: boolean) => void;
|
||||
isMobile: boolean;
|
||||
toggleSidebar: () => void;
|
||||
};
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContext | null>(null);
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext);
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
const SidebarProvider = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const isMobile = useIsMobile();
|
||||
const [openMobile, setOpenMobile] = React.useState(false);
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||
const open = openProp ?? _open;
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value;
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState);
|
||||
} else {
|
||||
_setOpen(openState);
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
||||
},
|
||||
[setOpenProp, open],
|
||||
);
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile
|
||||
? setOpenMobile((open) => !open)
|
||||
: setOpen((open) => !open);
|
||||
}, [isMobile, setOpen]);
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault();
|
||||
toggleSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [toggleSidebar]);
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed";
|
||||
|
||||
const contextValue = React.useMemo<SidebarContext>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, toggleSidebar],
|
||||
);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
},
|
||||
);
|
||||
SidebarProvider.displayName = "SidebarProvider";
|
||||
|
||||
const Sidebar = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right";
|
||||
variant?: "sidebar" | "floating" | "inset";
|
||||
collapsible?: "offcanvas" | "icon" | "none";
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-mobile="true"
|
||||
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="group peer hidden text-sidebar-foreground md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
Sidebar.displayName = "Sidebar";
|
||||
|
||||
const SidebarTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof Button>,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, onClick, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar();
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
data-sidebar="trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("h-7 w-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event);
|
||||
toggleSidebar();
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeft />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
SidebarTrigger.displayName = "SidebarTrigger";
|
||||
|
||||
const SidebarRail = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button">
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar();
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
data-sidebar="rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
||||
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarRail.displayName = "SidebarRail";
|
||||
|
||||
const SidebarInset = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"main">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<main
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex min-h-svh flex-1 flex-col bg-background",
|
||||
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarInset.displayName = "SidebarInset";
|
||||
|
||||
const SidebarInput = React.forwardRef<
|
||||
React.ElementRef<typeof Input>,
|
||||
React.ComponentProps<typeof Input>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Input
|
||||
ref={ref}
|
||||
data-sidebar="input"
|
||||
className={cn(
|
||||
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarInput.displayName = "SidebarInput";
|
||||
|
||||
const SidebarHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarHeader.displayName = "SidebarHeader";
|
||||
|
||||
const SidebarFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarFooter.displayName = "SidebarFooter";
|
||||
|
||||
const SidebarSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof Separator>,
|
||||
React.ComponentProps<typeof Separator>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Separator
|
||||
ref={ref}
|
||||
data-sidebar="separator"
|
||||
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarSeparator.displayName = "SidebarSeparator";
|
||||
|
||||
const SidebarContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarContent.displayName = "SidebarContent";
|
||||
|
||||
const SidebarGroup = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroup.displayName = "SidebarGroup";
|
||||
|
||||
const SidebarGroupLabel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
||||
|
||||
const SidebarGroupAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroupAction.displayName = "SidebarGroupAction";
|
||||
|
||||
const SidebarGroupContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarGroupContent.displayName = "SidebarGroupContent";
|
||||
|
||||
const SidebarMenu = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenu.displayName = "SidebarMenu";
|
||||
|
||||
const SidebarMenuItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
ref={ref}
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuItem.displayName = "SidebarMenuItem";
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const SidebarMenuButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean;
|
||||
isActive?: boolean;
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>
|
||||
>(
|
||||
(
|
||||
{
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
const { isMobile, state } = useSidebar();
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
if (!tooltip) {
|
||||
return button;
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
);
|
||||
SidebarMenuButton.displayName = "SidebarMenuButton";
|
||||
|
||||
const SidebarMenuAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean;
|
||||
showOnHover?: boolean;
|
||||
}
|
||||
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarMenuAction.displayName = "SidebarMenuAction";
|
||||
|
||||
const SidebarMenuBadge = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
||||
|
||||
const SidebarMenuSkeleton = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean;
|
||||
}
|
||||
>(({ className, showIcon = false, ...props }, ref) => {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-[--skeleton-width] flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
||||
|
||||
const SidebarMenuSub = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuSub.displayName = "SidebarMenuSub";
|
||||
|
||||
const SidebarMenuSubItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ ...props }, ref) => <li ref={ref} {...props} />);
|
||||
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
||||
|
||||
const SidebarMenuSubButton = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentProps<"a"> & {
|
||||
asChild?: boolean;
|
||||
size?: "sm" | "md";
|
||||
isActive?: boolean;
|
||||
}
|
||||
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "a";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Skeleton };
|
||||
@@ -0,0 +1,26 @@
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
))
|
||||
Slider.displayName = SliderPrimitive.Root.displayName
|
||||
|
||||
export { Slider }
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useTheme } from "next-themes";
|
||||
import type React from "react";
|
||||
import { Toaster as Sonner } from "sonner";
|
||||
|
||||
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast:
|
||||
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||
description: "group-[.toast]:text-muted-foreground",
|
||||
actionButton:
|
||||
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||
cancelButton:
|
||||
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Toaster };
|
||||
@@ -0,0 +1,120 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
Table.displayName = "Table";
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableFooter.displayName = "TableFooter";
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableRow.displayName = "TableRow";
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableHead.displayName = "TableHead";
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCell.displayName = "TableCell";
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCaption.displayName = "TableCaption";
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Tabs = TabsPrimitive.Root;
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsList.displayName = TabsPrimitive.List.displayName;
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
||||
import type { VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
import { toggleVariants } from "~/components/ui/toggle";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants>
|
||||
>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
const ToggleGroup = React.forwardRef<
|
||||
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, variant, size, children, ...props }, ref) => (
|
||||
<ToggleGroupPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("flex items-center justify-center gap-1", className)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ variant, size }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
));
|
||||
|
||||
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
||||
|
||||
const ToggleGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, children, variant, size, ...props }, ref) => {
|
||||
const context = React.useContext(ToggleGroupContext);
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
);
|
||||
});
|
||||
|
||||
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem };
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const Toggle = React.forwardRef<
|
||||
React.ElementRef<typeof TogglePrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, variant, size, ...props }, ref) => (
|
||||
<TogglePrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
Toggle.displayName = TogglePrimitive.Root.displayName;
|
||||
|
||||
export { Toggle, toggleVariants };
|
||||
@@ -0,0 +1,30 @@
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</TooltipPrimitive.Portal>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
@@ -0,0 +1,13 @@
|
||||
import copy from "copy-to-clipboard";
|
||||
import { toastSuccess } from "../xui/toast";
|
||||
|
||||
// copy2Clipboard 拷贝到粘贴板
|
||||
export function copy2Clipboard(
|
||||
s: string,
|
||||
toast?: { title?: string; description?: string },
|
||||
) {
|
||||
copy(s);
|
||||
if (toast?.title) {
|
||||
toastSuccess(toast.title, { description: toast.description });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
export function formatDate(dateString: string) {
|
||||
if (dateString.startsWith("1970")) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
if (!dateString || dateString.length < "2025-01-01 01:01:01".length) {
|
||||
return dateString ?? "";
|
||||
}
|
||||
// 获取当前日期
|
||||
const currentDate = new Date();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，需要加 1
|
||||
const currentDay = currentDate.getDate();
|
||||
|
||||
// 解析输入的日期字符串
|
||||
const inputDate = new Date(dateString);
|
||||
const inputYear = inputDate.getFullYear();
|
||||
const inputMonth = inputDate.getMonth() + 1;
|
||||
const inputDay = inputDate.getDate();
|
||||
const inputTime = dateString.split(" ")[1]; // 提取时间部分
|
||||
|
||||
let result = "";
|
||||
|
||||
if (inputYear !== currentYear) {
|
||||
return dateString;
|
||||
}
|
||||
// 是今年，去掉年份
|
||||
result = `${inputMonth}-${inputDay} ${inputTime}`;
|
||||
if (inputMonth === currentMonth && inputDay === currentDay) {
|
||||
result = `Today ${inputTime}`;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useCallback, useRef } from "react";
|
||||
|
||||
/**
|
||||
* 通用防抖 Hook
|
||||
* @param callback 需要防抖的函数
|
||||
* @param delay 防抖延迟时间（毫秒）
|
||||
* @returns 包装后的防抖函数
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function useDebounce<T extends (...args: any[]) => any>(
|
||||
callback: T,
|
||||
delay: number,
|
||||
): (...args: Parameters<T>) => void {
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const debouncedFunction = useCallback(
|
||||
(...args: Parameters<T>) => {
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
}
|
||||
timerRef.current = setTimeout(() => {
|
||||
callback(...args);
|
||||
}, delay);
|
||||
},
|
||||
[callback, delay],
|
||||
);
|
||||
|
||||
return debouncedFunction;
|
||||
}
|
||||
|
||||
export default useDebounce;
|
||||
@@ -0,0 +1,232 @@
|
||||
import { Modal } from "antd";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import type { CheckVersionResponse } from "~/service/api/version/state";
|
||||
|
||||
const IGNORED_VERSIONS_KEY = "GOWVP_IGNORED_VERSIONS";
|
||||
const MAX_IGNORED_VERSIONS = 3;
|
||||
|
||||
interface VersionUpdateModalProps {
|
||||
versionInfo: CheckVersionResponse | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// 获取已忽略的版本列表
|
||||
function getIgnoredVersions(): string[] {
|
||||
try {
|
||||
const stored = localStorage.getItem(IGNORED_VERSIONS_KEY);
|
||||
if (stored) {
|
||||
return JSON.parse(stored);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// 添加忽略的版本
|
||||
function addIgnoredVersion(version: string): void {
|
||||
const versions = getIgnoredVersions();
|
||||
if (!versions.includes(version)) {
|
||||
versions.push(version);
|
||||
// 保持最多 3 个
|
||||
while (versions.length > MAX_IGNORED_VERSIONS) {
|
||||
versions.shift();
|
||||
}
|
||||
localStorage.setItem(IGNORED_VERSIONS_KEY, JSON.stringify(versions));
|
||||
}
|
||||
}
|
||||
|
||||
// 检查版本是否被忽略
|
||||
export function isVersionIgnored(version: string): boolean {
|
||||
return getIgnoredVersions().includes(version);
|
||||
}
|
||||
|
||||
// 简单的 Markdown 渲染（支持基本格式）
|
||||
function renderMarkdown(text: string): React.ReactNode {
|
||||
if (!text) return null;
|
||||
|
||||
const lines = text.split("\n");
|
||||
const elements: React.ReactNode[] = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
|
||||
// 处理标题
|
||||
if (line.startsWith("### ")) {
|
||||
elements.push(
|
||||
<h3 key={i} className="text-base font-semibold mt-3 mb-1">
|
||||
{line.slice(4)}
|
||||
</h3>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith("## ")) {
|
||||
elements.push(
|
||||
<h2 key={i} className="text-lg font-semibold mt-3 mb-1">
|
||||
{line.slice(3)}
|
||||
</h2>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
if (line.startsWith("# ")) {
|
||||
elements.push(
|
||||
<h1 key={i} className="text-xl font-bold mt-3 mb-1">
|
||||
{line.slice(2)}
|
||||
</h1>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 处理分隔线
|
||||
if (line.match(/^-{3,}$/)) {
|
||||
elements.push(<hr key={i} className="my-3 border-gray-200" />);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 处理列表项
|
||||
if (line.match(/^\d+\.\s/)) {
|
||||
const content = line.replace(/^\d+\.\s/, "");
|
||||
elements.push(
|
||||
<div key={i} className="flex gap-2 py-0.5">
|
||||
<span className="text-gray-400">•</span>
|
||||
<span>{renderInlineMarkdown(content)}</span>
|
||||
</div>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (line.startsWith("- ")) {
|
||||
elements.push(
|
||||
<div key={i} className="flex gap-2 py-0.5">
|
||||
<span className="text-gray-400">•</span>
|
||||
<span>{renderInlineMarkdown(line.slice(2))}</span>
|
||||
</div>,
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 空行
|
||||
if (line.trim() === "") {
|
||||
elements.push(<div key={i} className="h-2" />);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 普通段落
|
||||
elements.push(
|
||||
<p key={i} className="py-0.5">
|
||||
{renderInlineMarkdown(line)}
|
||||
</p>,
|
||||
);
|
||||
}
|
||||
|
||||
return <div className="text-sm text-gray-600">{elements}</div>;
|
||||
}
|
||||
|
||||
// 处理行内 Markdown（粗体、斜体、代码）
|
||||
function renderInlineMarkdown(text: string): React.ReactNode {
|
||||
// 简单处理：粗体 **text** 和代码 `code`
|
||||
const parts: React.ReactNode[] = [];
|
||||
let remaining = text;
|
||||
let key = 0;
|
||||
|
||||
while (remaining.length > 0) {
|
||||
// 处理粗体
|
||||
const boldMatch = remaining.match(/\*\*(.+?)\*\*/);
|
||||
// 处理代码
|
||||
const codeMatch = remaining.match(/`(.+?)`/);
|
||||
|
||||
if (boldMatch && (!codeMatch || boldMatch.index! <= codeMatch.index!)) {
|
||||
if (boldMatch.index! > 0) {
|
||||
parts.push(remaining.slice(0, boldMatch.index));
|
||||
}
|
||||
parts.push(
|
||||
<strong key={key++} className="font-semibold">
|
||||
{boldMatch[1]}
|
||||
</strong>,
|
||||
);
|
||||
remaining = remaining.slice(boldMatch.index! + boldMatch[0].length);
|
||||
} else if (codeMatch) {
|
||||
if (codeMatch.index! > 0) {
|
||||
parts.push(remaining.slice(0, codeMatch.index));
|
||||
}
|
||||
parts.push(
|
||||
<code
|
||||
key={key++}
|
||||
className="px-1 py-0.5 bg-gray-100 rounded text-xs font-mono"
|
||||
>
|
||||
{codeMatch[1]}
|
||||
</code>,
|
||||
);
|
||||
remaining = remaining.slice(codeMatch.index! + codeMatch[0].length);
|
||||
} else {
|
||||
parts.push(remaining);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return parts.length === 1 ? parts[0] : <>{parts}</>;
|
||||
}
|
||||
|
||||
export default function VersionUpdateModal({
|
||||
versionInfo,
|
||||
onClose,
|
||||
}: VersionUpdateModalProps) {
|
||||
if (!versionInfo) return null;
|
||||
|
||||
const handleIgnore = () => {
|
||||
addIgnoredVersion(versionInfo.new_version);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleConfirm = (): void => {
|
||||
// 直接关闭弹窗，不触发任何请求
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={true}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🎉 发现新版本</span>
|
||||
</div>
|
||||
}
|
||||
width={520}
|
||||
>
|
||||
<div className="py-4">
|
||||
{/* 版本信息 */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500">当前版本:</span>
|
||||
<span className="font-mono text-sm bg-gray-100 px-2 py-0.5 rounded">
|
||||
{versionInfo.current_version}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-gray-400">→</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500">新版本:</span>
|
||||
<span className="font-mono text-sm bg-green-100 text-green-700 px-2 py-0.5 rounded">
|
||||
{versionInfo.new_version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更新说明 */}
|
||||
<div className="max-h-64 overflow-y-auto border border-gray-100 rounded-lg p-4 bg-gray-50/50">
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">更新说明</h4>
|
||||
{renderMarkdown(versionInfo.description)}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button variant="outline" onClick={handleIgnore}>
|
||||
此版本不再提示
|
||||
</Button>
|
||||
<Button onClick={handleConfirm}>我会更新 Docker 镜像</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { PopoverClose } from "@radix-ui/react-popover";
|
||||
import { CircleAlert, Trash } from "lucide-react";
|
||||
import { Button } from "../ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||||
|
||||
// XButtonDelete 删除按钮，提供二次确认功能
|
||||
export function XButtonDelete({
|
||||
onConfirm,
|
||||
isLoading,
|
||||
}: {
|
||||
onConfirm: () => void;
|
||||
isLoading?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
isLoading={isLoading ?? false}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
删除
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-36">
|
||||
<div className="grid gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground flex items-center">
|
||||
<CircleAlert
|
||||
className="inline-block pr-2"
|
||||
fill="orange"
|
||||
color="white"
|
||||
size={28}
|
||||
/>
|
||||
确认删除吗?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<div className="grid grid-cols-2 items-center gap-4">
|
||||
<PopoverClose>
|
||||
<Button size={"sm"} className="w-full" variant="outline">
|
||||
取消
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<PopoverClose>
|
||||
<Button onClick={onConfirm} size={"sm"}>
|
||||
确认
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import type React from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
export default function XButton({
|
||||
children,
|
||||
title,
|
||||
icon,
|
||||
className,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
title: string;
|
||||
icon?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Button className={cn(className)}>
|
||||
{children ?? (
|
||||
<>
|
||||
{icon} {title}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export const DrawerCSSProvider = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<div vaul-drawer-wrapper="">
|
||||
<div className="relative flex min-h-screen flex-col bg-background">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,374 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import type { FormInstance } from "antd";
|
||||
import { Button, Form, Modal } from "antd";
|
||||
import { SquarePlus } from "lucide-react";
|
||||
import React, {
|
||||
Children,
|
||||
isValidElement,
|
||||
useImperativeHandle,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button as ShadcnButton } from "~/components/ui/button";
|
||||
import { ErrorHandle } from "~/service/config/error";
|
||||
|
||||
export interface PFormProps {
|
||||
onAddSuccess?: () => void; // 添加成功回调
|
||||
onEditSuccess?: (data: any) => void; // 编辑成功回调
|
||||
ref: React.RefObject<EditSheetImpl | null>; // 控制反转
|
||||
}
|
||||
|
||||
// 步骤配置
|
||||
export interface StepConfig {
|
||||
title: string; // 步骤标题
|
||||
fields: string[]; // 该步骤包含的字段名
|
||||
}
|
||||
|
||||
interface EditSheetProps {
|
||||
title: string; // 标题
|
||||
description?: string; // 描述
|
||||
children: React.ReactNode; // 表单内容
|
||||
trigger?: React.ReactNode; // 触发器按钮
|
||||
mutation: {
|
||||
// api 请求
|
||||
add: (values: any) => Promise<any>;
|
||||
edit: (id: string, values: any) => Promise<any>;
|
||||
};
|
||||
onSuccess?: {
|
||||
// 成功回调
|
||||
add?: () => void;
|
||||
edit?: (data: any) => void;
|
||||
};
|
||||
ref?: React.Ref<EditSheetImpl>;
|
||||
form: FormInstance; // Ant Design Form 实例
|
||||
width?: number | string; // Modal 宽度，默认 520
|
||||
steps?: StepConfig[]; // 步骤配置，如果不提供则自动分组
|
||||
fieldsPerStep?: number; // 每步字段数，默认 2
|
||||
}
|
||||
|
||||
export interface EditSheetImpl {
|
||||
edit: (values: any) => void; // 编辑时传入表单的值，打开弹窗
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一的多步骤表单编辑弹窗组件
|
||||
* 支持新增和编辑两种模式，通过 form 中是否有 id 字段区分
|
||||
* 自动将表单字段按每 3 个分组为一个步骤
|
||||
*/
|
||||
export function EditSheet({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
trigger,
|
||||
mutation,
|
||||
onSuccess,
|
||||
ref,
|
||||
form,
|
||||
width = 520,
|
||||
steps: customSteps,
|
||||
fieldsPerStep = 2,
|
||||
}: EditSheetProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
// 解析 children 中的 Form.Item，提取字段信息
|
||||
const parseFormItems = () => {
|
||||
const items: { name: string; element: React.ReactNode; hidden: boolean }[] =
|
||||
[];
|
||||
|
||||
const traverse = (node: React.ReactNode) => {
|
||||
Children.forEach(node, (child) => {
|
||||
if (isValidElement(child)) {
|
||||
// 检查是否是 Form.Item
|
||||
if (
|
||||
child.type === Form.Item ||
|
||||
(child.type as any)?.displayName === "FormItem"
|
||||
) {
|
||||
const props = child.props as any;
|
||||
const name = props.name;
|
||||
const hidden = props.hidden === true;
|
||||
|
||||
if (name) {
|
||||
items.push({ name, element: child, hidden });
|
||||
}
|
||||
}
|
||||
// 递归处理子元素
|
||||
if ((child.props as { children?: React.ReactNode })?.children) {
|
||||
traverse((child.props as { children?: React.ReactNode }).children);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
traverse(children);
|
||||
return items;
|
||||
};
|
||||
|
||||
const formItems = parseFormItems();
|
||||
|
||||
// 过滤出可见的表单项（用于分步）
|
||||
const visibleItems = formItems.filter((item) => !item.hidden);
|
||||
// 隐藏的表单项（始终渲染）
|
||||
const hiddenItems = formItems.filter((item) => item.hidden);
|
||||
|
||||
// 自动生成步骤配置（每步 fieldsPerStep 个字段，最多 3 步）
|
||||
const generateSteps = (): StepConfig[] => {
|
||||
if (customSteps) return customSteps;
|
||||
|
||||
const stepsConfig: StepConfig[] = [];
|
||||
const totalItems = visibleItems.length;
|
||||
|
||||
// 按 fieldsPerStep 分组，最多 3 步
|
||||
for (
|
||||
let i = 0;
|
||||
i < totalItems && stepsConfig.length < 3;
|
||||
i += fieldsPerStep
|
||||
) {
|
||||
const stepItems = visibleItems.slice(i, i + fieldsPerStep);
|
||||
stepsConfig.push({
|
||||
title: `${t("step")} ${stepsConfig.length + 1}`,
|
||||
fields: stepItems.map((item) => item.name),
|
||||
});
|
||||
}
|
||||
|
||||
return stepsConfig;
|
||||
};
|
||||
|
||||
const stepsConfig = generateSteps();
|
||||
const totalSteps = stepsConfig.length;
|
||||
const isMultiStep = totalSteps > 1;
|
||||
|
||||
// 获取当前步骤应该显示的字段
|
||||
const getCurrentStepFields = (): string[] => {
|
||||
if (!isMultiStep) return visibleItems.map((item) => item.name);
|
||||
return stepsConfig[currentStep]?.fields || [];
|
||||
};
|
||||
|
||||
// 判断当前是编辑模式还是新增模式
|
||||
const isEditMode = () => {
|
||||
const values = form.getFieldsValue();
|
||||
return !!values.id;
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
edit(values: any) {
|
||||
console.log("🚀 ~ edit ~ values:", values);
|
||||
form.setFieldsValue(values);
|
||||
setCurrentStep(0);
|
||||
setOpen(true);
|
||||
},
|
||||
}));
|
||||
|
||||
const { mutateAsync, isPending } = useMutation({
|
||||
mutationFn: async (values: any) => {
|
||||
if (values.id) {
|
||||
return await mutation.edit(values.id, values);
|
||||
}
|
||||
return await mutation.add(values);
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
if (variables.id) {
|
||||
onSuccess?.edit?.(data.data);
|
||||
} else {
|
||||
onSuccess?.add?.();
|
||||
}
|
||||
handleClose();
|
||||
},
|
||||
onError: ErrorHandle,
|
||||
});
|
||||
|
||||
// 验证当前步骤的字段
|
||||
const validateCurrentStep = async (): Promise<boolean> => {
|
||||
const currentFields = getCurrentStepFields();
|
||||
try {
|
||||
await form.validateFields(currentFields);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 下一步
|
||||
const handleNext = async () => {
|
||||
const isValid = await validateCurrentStep();
|
||||
if (isValid && currentStep < totalSteps - 1) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 上一步
|
||||
const handlePrev = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 最后一步时验证所有字段
|
||||
const values = await form.validateFields();
|
||||
await mutateAsync(values);
|
||||
} catch (error) {
|
||||
console.log("表单验证失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setCurrentStep(0);
|
||||
// 延迟重置表单，避免关闭动画时内容闪烁
|
||||
setTimeout(() => {
|
||||
form.resetFields();
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
handleClose();
|
||||
};
|
||||
|
||||
// 打开弹窗（用于新增模式）
|
||||
const handleOpen = () => {
|
||||
form.resetFields();
|
||||
setCurrentStep(0);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
// 渲染触发按钮
|
||||
const renderTrigger = () => {
|
||||
if (trigger === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const defaultTrigger = (
|
||||
<ShadcnButton onClick={handleOpen}>
|
||||
<SquarePlus className="mr-2 h-4 w-4" />
|
||||
{t("add")}
|
||||
</ShadcnButton>
|
||||
);
|
||||
|
||||
if (trigger) {
|
||||
if (React.isValidElement(trigger)) {
|
||||
return React.cloneElement(trigger as React.ReactElement<any>, {
|
||||
onClick: (e: React.MouseEvent) => {
|
||||
const originalOnClick = (trigger as React.ReactElement<any>).props
|
||||
?.onClick;
|
||||
if (originalOnClick) {
|
||||
originalOnClick(e);
|
||||
}
|
||||
handleOpen();
|
||||
},
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div
|
||||
onClick={handleOpen}
|
||||
style={{ display: "inline-block", cursor: "pointer" }}
|
||||
>
|
||||
{trigger}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return defaultTrigger;
|
||||
};
|
||||
|
||||
// 渲染表单内容
|
||||
const renderFormContent = () => {
|
||||
const currentFields = getCurrentStepFields();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 隐藏字段始终渲染 */}
|
||||
{hiddenItems.map((item) => (
|
||||
<div key={item.name} style={{ display: "none" }}>
|
||||
{item.element}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 可见字段根据当前步骤显示/隐藏 */}
|
||||
{visibleItems.map((item) => {
|
||||
const isCurrentStep = currentFields.includes(item.name);
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
style={{ display: isCurrentStep ? "block" : "none" }}
|
||||
>
|
||||
{item.element}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染底部按钮
|
||||
const renderFooter = () => {
|
||||
if (!isMultiStep) {
|
||||
// 单步骤模式
|
||||
return [
|
||||
<Button key="cancel" onClick={handleCancel}>
|
||||
{t("cancel")}
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
loading={isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{isEditMode() ? t("save") : t("add")}
|
||||
</Button>,
|
||||
];
|
||||
}
|
||||
|
||||
// 多步骤模式（无取消按钮）
|
||||
const isFirstStep = currentStep === 0;
|
||||
const isLastStep = currentStep === totalSteps - 1;
|
||||
|
||||
return [
|
||||
!isFirstStep && (
|
||||
<Button key="prev" onClick={handlePrev}>
|
||||
{t("prev_step")}
|
||||
</Button>
|
||||
),
|
||||
isLastStep ? (
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
loading={isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{isEditMode() ? t("save") : t("add")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button key="next" type="primary" onClick={handleNext}>
|
||||
{t("next_step")}
|
||||
</Button>
|
||||
),
|
||||
].filter(Boolean);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderTrigger()}
|
||||
|
||||
<Modal
|
||||
title={title}
|
||||
open={open}
|
||||
onCancel={handleCancel}
|
||||
width={width}
|
||||
footer={renderFooter()}
|
||||
destroyOnHidden={false}
|
||||
maskClosable={false}
|
||||
>
|
||||
{description && (
|
||||
<p className="text-gray-500 text-sm mb-4">{description}</p>
|
||||
)}
|
||||
|
||||
<Form form={form} layout="vertical" size="large">
|
||||
{renderFormContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Link } from "react-router";
|
||||
import React from "react";
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "../ui/breadcrumb";
|
||||
|
||||
export default function XHeader({
|
||||
items = [],
|
||||
}: {
|
||||
items: { title: string; url?: string }[];
|
||||
}) {
|
||||
return (
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
{/* <SidebarTrigger className="-ml-1" /> */}
|
||||
{/* <Separator orientation="vertical" className="mr-2 h-4" /> */}
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
{items.map((item, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
{(item.url?.length ?? 0) === 0 ? (
|
||||
<BreadcrumbPage>{item.title}</BreadcrumbPage>
|
||||
) : (
|
||||
<Link to={item.url ?? ""}>{item.title}</Link>
|
||||
// <BreadcrumbLink href={item.url}>
|
||||
|
||||
// </BreadcrumbLink>
|
||||
)}
|
||||
</BreadcrumbItem>
|
||||
{index < items.length - 1 && (
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
interface TableQueryOptions<_T> {
|
||||
queryKey: string;
|
||||
fetchFn: (params: any) => Promise<any>;
|
||||
deleteFn: (id: string) => Promise<any>;
|
||||
defaultFilters?: {
|
||||
page: number;
|
||||
size: number;
|
||||
key?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function useTableQuery<T>({
|
||||
queryKey,
|
||||
fetchFn,
|
||||
deleteFn,
|
||||
defaultFilters = { page: 1, size: 10, key: "" },
|
||||
}: TableQueryOptions<T>) {
|
||||
const [filters, setFilters] = useState(defaultFilters);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// 查询数据
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: [queryKey, filters],
|
||||
queryFn: () => fetchFn(filters),
|
||||
});
|
||||
|
||||
// 删除功能
|
||||
const { mutate: delMutate, isPending: delIsPending } = useMutation({
|
||||
mutationFn: deleteFn,
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData([queryKey, filters], (old: any) => {
|
||||
const newItems = old.data.items.filter(
|
||||
(item: any) => item.id !== data.data.id,
|
||||
);
|
||||
|
||||
// 如果当前页数据为空且不是第一页,回退一页
|
||||
if (newItems.length === 0 && filters.page > 1) {
|
||||
setTimeout(() => {
|
||||
setFilters((prev) => ({ ...prev, page: prev.page - 1 }));
|
||||
}, 370);
|
||||
}
|
||||
// 如果是第一页且数据为空,刷新当前页
|
||||
else if (newItems.length === 0 && filters.page === 1) {
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [queryKey, filters],
|
||||
});
|
||||
}, 370);
|
||||
}
|
||||
|
||||
return {
|
||||
...old,
|
||||
data: {
|
||||
...old.data,
|
||||
items: newItems,
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 添加成功处理
|
||||
const handleAddSuccess = () => {
|
||||
if (filters.page !== 1) {
|
||||
setFilters({ ...filters, page: 1 });
|
||||
return;
|
||||
}
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [queryKey],
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑成功处理
|
||||
const handleEditSuccess = (updatedItem: T) => {
|
||||
queryClient.setQueryData([queryKey, filters], (old: any) => ({
|
||||
...old,
|
||||
data: {
|
||||
...old.data,
|
||||
items: old.data.items.map((item: any) =>
|
||||
item.id === (updatedItem as any).id ? updatedItem : item,
|
||||
),
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
return {
|
||||
data: data?.data,
|
||||
isLoading,
|
||||
filters,
|
||||
setFilters,
|
||||
delMutate,
|
||||
delIsPending,
|
||||
queryClient,
|
||||
handleAddSuccess,
|
||||
handleEditSuccess,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "../ui/pagination";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
|
||||
// TODO: 这个组件是配置 shadcn table 的分页组件
|
||||
// 未使用
|
||||
|
||||
type PaginationBoxProps = {
|
||||
page: number;
|
||||
size: number;
|
||||
total: number;
|
||||
setPagination: (page: number, size: number) => void;
|
||||
};
|
||||
|
||||
export default function PaginationBox({
|
||||
page,
|
||||
size,
|
||||
total,
|
||||
setPagination,
|
||||
}: PaginationBoxProps) {
|
||||
const setData = (page: number, size: number) => {
|
||||
setTimeout(() => {
|
||||
setPagination(page, size);
|
||||
}, 50);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-end space-x-2 py-4 select-none">
|
||||
<div className="flex">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
onClick={() => {
|
||||
if (page > 1) {
|
||||
setData(page - 1, size);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
{getPaginationArray(page, size, total).map((v) => {
|
||||
return (
|
||||
<PaginationItem key={v}>
|
||||
<PaginationLink
|
||||
isActive={v === page}
|
||||
onClick={() => {
|
||||
if (page <= 0) page = 1;
|
||||
if (page !== v) {
|
||||
setData(v, size);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{v}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* <PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem> */}
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => {
|
||||
if (page <= 0) page = 1;
|
||||
if (page < Math.ceil(total / size)) {
|
||||
setData(page + 1, size);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
|
||||
<Select
|
||||
defaultValue={size.toString()}
|
||||
onValueChange={(v) => setData(1, Number(v))}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="min-w-[3rem]">
|
||||
<SelectItem value="12">12 / 页</SelectItem>
|
||||
<SelectItem value="24">24 / 页</SelectItem>
|
||||
<SelectItem value="36">36 / 页</SelectItem>
|
||||
<SelectItem value="50">50 / 页</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function getPaginationArray(page: number, size: number, total: number) {
|
||||
const totalPages = Math.ceil(total / size);
|
||||
const paginationArray = [];
|
||||
|
||||
if (totalPages <= 4) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
paginationArray.push(i);
|
||||
}
|
||||
return paginationArray;
|
||||
}
|
||||
|
||||
if (page <= 2) {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
paginationArray.push(i);
|
||||
}
|
||||
} else if (page >= totalPages - 1) {
|
||||
for (let i = totalPages - 3; i <= totalPages; i++) {
|
||||
paginationArray.push(i);
|
||||
}
|
||||
} else {
|
||||
paginationArray.push(page - 1);
|
||||
paginationArray.push(page);
|
||||
paginationArray.push(page + 1);
|
||||
paginationArray.push(page + 2);
|
||||
}
|
||||
|
||||
return paginationArray;
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { forwardRef, useImperativeHandle, useState } from "react";
|
||||
import { ErrorHandle } from "~/service/config/error";
|
||||
import { XTable } from "./table";
|
||||
|
||||
interface TableQueryProps<T> {
|
||||
queryKey: string; // 查询key
|
||||
fetchFn: (params: any) => Promise<any>; // 查询函数
|
||||
deleteFn?: (id: string) => Promise<any>; // 删除函数
|
||||
columns: ColumnsType<T>; // 列配置
|
||||
// 过滤条件/分页
|
||||
defaultFilters?: {
|
||||
page: number;
|
||||
size: number;
|
||||
[property: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
export interface TableQueryRef<T> {
|
||||
setFilters: (filters: any) => void; // 设置过滤条件
|
||||
handleAddSuccess: () => void; // 添加成功处理
|
||||
handleEditSuccess: (item: T) => void; // 编辑成功处理
|
||||
delMutate: (id: string) => void; // 删除
|
||||
delIsPending: boolean; // 删除状态
|
||||
}
|
||||
|
||||
export const TableQuery = forwardRef<TableQueryRef<any>, TableQueryProps<any>>(
|
||||
function TableQuery(
|
||||
{
|
||||
queryKey,
|
||||
fetchFn,
|
||||
deleteFn,
|
||||
columns,
|
||||
defaultFilters = { page: 1, size: 10 },
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const [filters, setFilters] = useState(defaultFilters);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// 查询数据
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: [queryKey, filters],
|
||||
queryFn: () => fetchFn(filters),
|
||||
refetchInterval: 5000,
|
||||
throwOnError: (err) => {
|
||||
ErrorHandle(err);
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
// 删除功能
|
||||
const { mutate: delMutate, isPending: delIsPending } = useMutation({
|
||||
mutationFn: deleteFn,
|
||||
onError: ErrorHandle,
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData([queryKey, filters], (old: any) => {
|
||||
const newItems = old.data.items.filter(
|
||||
(item: any) => item.id !== data.data.id,
|
||||
);
|
||||
|
||||
// 如果当前页数据为空且不是第一页,回退一页
|
||||
if (newItems.length === 0 && filters.page > 1) {
|
||||
setTimeout(() => {
|
||||
setFilters((prev) => ({ ...prev, page: prev.page - 1 }));
|
||||
}, 370);
|
||||
}
|
||||
// 如果是第一页且数据为空,刷新当前页
|
||||
else if (newItems.length === 0 && filters.page === 1) {
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [queryKey, filters],
|
||||
});
|
||||
}, 370);
|
||||
}
|
||||
|
||||
return {
|
||||
...old,
|
||||
data: {
|
||||
...old.data,
|
||||
items: newItems,
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 添加成功处理
|
||||
const handleAddSuccess = () => {
|
||||
if (filters.page !== 1) {
|
||||
setFilters({ page: 1, size: filters.size });
|
||||
return;
|
||||
}
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [queryKey],
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑成功处理
|
||||
const handleEditSuccess = (updatedItem: any) => {
|
||||
queryClient.setQueryData([queryKey, filters], (old: any) => {
|
||||
if (!old?.data) {
|
||||
console.log("🚀 ~ queryClient.setQueryData ~ old:", old);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [queryKey],
|
||||
});
|
||||
return old;
|
||||
}
|
||||
return {
|
||||
...old,
|
||||
data: {
|
||||
...old.data,
|
||||
items: old.data.items.map((item: any) =>
|
||||
item.id === updatedItem.id ? updatedItem : item,
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露内部方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
setFilters,
|
||||
handleAddSuccess,
|
||||
handleEditSuccess,
|
||||
delMutate,
|
||||
delIsPending,
|
||||
}));
|
||||
|
||||
return (
|
||||
<XTable
|
||||
columns={columns}
|
||||
dataSource={data?.data.items}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
pagination={{
|
||||
current: filters.page,
|
||||
pageSize: filters.size,
|
||||
total: data?.data.total,
|
||||
onChange: (page, size) => {
|
||||
setFilters({ ...filters, page, size });
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { TableProps } from "antd";
|
||||
import { Table } from "antd";
|
||||
|
||||
interface XTableProps<T> extends TableProps<T> {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// TODO: antd table 组件相比 shadcn/ui 开发效率更高
|
||||
// 等未来有时间，可以将 xtable 实现替换成 shadcn/ui table
|
||||
export function XTable<T extends object>({
|
||||
className,
|
||||
...props
|
||||
}: XTableProps<T>) {
|
||||
return (
|
||||
<Table<T>
|
||||
tableLayout="fixed"
|
||||
{...props}
|
||||
className={className}
|
||||
scroll={{ x: "max-content" }}
|
||||
// size="middle"
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: false,
|
||||
position: ["bottomRight"],
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
size: "small",
|
||||
...props.pagination,
|
||||
pageSizeOptions: ["10", "20", "30", "50"],
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
overflowX: "auto",
|
||||
paddingBottom: 8,
|
||||
...props.style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
// import * as React from "react";
|
||||
// import {
|
||||
// Table,
|
||||
// TableBody,
|
||||
// TableCell,
|
||||
// TableHead,
|
||||
// TableHeader,
|
||||
// TableRow,
|
||||
// } from "~/components/ui/table";
|
||||
// import { motion, AnimatePresence } from "framer-motion";
|
||||
// import PaginationBox from "./pagination";
|
||||
// import { useRef, useEffect, useState } from "react";
|
||||
|
||||
// interface Column<T> {
|
||||
// key: string;
|
||||
// title: React.ReactNode;
|
||||
// render?: (value: any, record: T) => React.ReactNode;
|
||||
// }
|
||||
|
||||
// interface XTable2Props<T> {
|
||||
// columns: Column<T>[];
|
||||
// dataSource?: T[];
|
||||
// rowKey: string;
|
||||
// className?: string;
|
||||
// loading?: boolean;
|
||||
// pagination?: {
|
||||
// page: number;
|
||||
// size: number;
|
||||
// total: number;
|
||||
// setPagination: (page: number, size: number) => void;
|
||||
// };
|
||||
// }
|
||||
|
||||
// type OperationType = "add" | "delete" | "none";
|
||||
|
||||
// export function XTable2<T extends object>({
|
||||
// columns,
|
||||
// dataSource = [],
|
||||
// rowKey,
|
||||
// className,
|
||||
// loading,
|
||||
// pagination,
|
||||
// }: XTable2Props<T>) {
|
||||
// const prevDataRef = useRef<T[]>([]);
|
||||
// const [operation, setOperation] = useState<{
|
||||
// type: OperationType;
|
||||
// id?: string;
|
||||
// index?: number;
|
||||
// }>({ type: "none" });
|
||||
|
||||
// useEffect(() => {
|
||||
// const prevData = prevDataRef.current;
|
||||
// // 如果是首次加载，不执行动画
|
||||
// if (prevData.length === 0) {
|
||||
// prevDataRef.current = dataSource;
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // 避免不必要的状态更新
|
||||
// if (prevData === dataSource) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// let newOperation = { type: "none" as OperationType };
|
||||
|
||||
// if (dataSource.length === prevData.length + 1) {
|
||||
// // 添加操作
|
||||
// const newRecord = dataSource.find(
|
||||
// (curr: any) =>
|
||||
// !prevData.some((prev: any) => prev[rowKey] === curr[rowKey])
|
||||
// );
|
||||
// if (newRecord) {
|
||||
// const index = dataSource.findIndex(
|
||||
// (item: any) => item[rowKey] === (newRecord as any)[rowKey]
|
||||
// );
|
||||
// newOperation = {
|
||||
// type: "add",
|
||||
// id: (newRecord as any)[rowKey],
|
||||
// index,
|
||||
// };
|
||||
// }
|
||||
// } else if (dataSource.length < prevData.length) {
|
||||
// // 删除操作
|
||||
// const deletedRecord = prevData.find(
|
||||
// (prev: any) =>
|
||||
// !dataSource.some((curr: any) => curr[rowKey] === prev[rowKey])
|
||||
// );
|
||||
// if (deletedRecord) {
|
||||
// const index = prevData.findIndex(
|
||||
// (item: any) => item[rowKey] === (deletedRecord as any)[rowKey]
|
||||
// );
|
||||
// newOperation = {
|
||||
// type: "delete",
|
||||
// id: (deletedRecord as any)[rowKey],
|
||||
// index,
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
|
||||
// setOperation(newOperation);
|
||||
// prevDataRef.current = dataSource;
|
||||
// }, [dataSource, rowKey]);
|
||||
|
||||
// const renderCell = (record: T, column: Column<T>) => {
|
||||
// const value = (record as any)[column.key];
|
||||
// return column.render ? column.render(value, record) : value;
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className={className}>
|
||||
// <div className="overflow-hidden rounded-md border">
|
||||
// <Table>
|
||||
// <TableHeader>
|
||||
// <TableRow className="hover:bg-transparent">
|
||||
// {columns.map((column) => (
|
||||
// <TableHead key={column.key} className="font-medium">
|
||||
// {column.title}
|
||||
// </TableHead>
|
||||
// ))}
|
||||
// </TableRow>
|
||||
// </TableHeader>
|
||||
// <TableBody>
|
||||
// <AnimatePresence initial={false} mode="popLayout">
|
||||
// {dataSource.map((record: T, index) => {
|
||||
// const recordId = (record as any)[rowKey];
|
||||
// const isNewRecord =
|
||||
// operation.type === "add" && recordId === operation.id;
|
||||
// const shouldShift =
|
||||
// operation.type === "add" && index >= (operation.index ?? 0);
|
||||
|
||||
// return (
|
||||
// <motion.tr
|
||||
// key={recordId}
|
||||
// className="hover:bg-muted/50"
|
||||
// initial={
|
||||
// isNewRecord
|
||||
// ? { opacity: 0, x: 20 }
|
||||
// : shouldShift
|
||||
// ? { y: -40 }
|
||||
// : { opacity: 1 }
|
||||
// }
|
||||
// animate={
|
||||
// isNewRecord
|
||||
// ? { opacity: 1, x: 0 }
|
||||
// : shouldShift
|
||||
// ? { y: 0 }
|
||||
// : { opacity: 1 }
|
||||
// }
|
||||
// exit={
|
||||
// operation.type === "delete" && recordId === operation.id
|
||||
// ? { opacity: 0, y: -20 }
|
||||
// : undefined
|
||||
// }
|
||||
// transition={{
|
||||
// duration: 0.2,
|
||||
// ease: "easeOut",
|
||||
// delay: isNewRecord ? 0.15 : 0,
|
||||
// }}
|
||||
// >
|
||||
// {columns.map((column) => (
|
||||
// <TableCell key={column.key} className="font-normal">
|
||||
// {renderCell(record, column)}
|
||||
// </TableCell>
|
||||
// ))}
|
||||
// </motion.tr>
|
||||
// );
|
||||
// })}
|
||||
// </AnimatePresence>
|
||||
// </TableBody>
|
||||
// </Table>
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <PaginationBox
|
||||
// page={pagination?.page ?? 1}
|
||||
// size={pagination?.size ?? 10}
|
||||
// total={pagination?.total ?? 0}
|
||||
// setPagination={pagination?.setPagination ?? (() => {})}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@@ -0,0 +1,30 @@
|
||||
import type React from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "../ui/tooltip";
|
||||
|
||||
export default function ToolTips({
|
||||
children,
|
||||
tips,
|
||||
disabled,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
tips: string;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
if (disabled) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent>{tips}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { CircleCheckBig, OctagonAlert } from "lucide-react";
|
||||
import { type ExternalToast, toast } from "sonner";
|
||||
|
||||
// toastErrorMore 用于 api 统一错误处理
|
||||
export function toastErrorMore(
|
||||
message: string,
|
||||
details: string[] | null,
|
||||
props?: ExternalToast,
|
||||
) {
|
||||
toast.error(message, {
|
||||
...props,
|
||||
position: "top-right",
|
||||
style: {
|
||||
pointerEvents: "auto",
|
||||
},
|
||||
duration: 2000,
|
||||
icon: <OctagonAlert color="red" size={22} />,
|
||||
action: (details ?? []).length > 0 && {
|
||||
label: <div className="z-100">😲</div>,
|
||||
actionButtonStyle: {
|
||||
zIndex: 100,
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.stopPropagation();
|
||||
if (!details) return;
|
||||
for (let i = 0; i < details.length; i++) {
|
||||
toastError(details[i], {
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// toastError 错误提示
|
||||
export function toastError(message: string, props?: ExternalToast) {
|
||||
toast.error(message, {
|
||||
position: "top-right",
|
||||
icon: <OctagonAlert color="red" size={22} />,
|
||||
duration: 2000,
|
||||
...props,
|
||||
});
|
||||
}
|
||||
|
||||
// toastSuccess 操作成功提示
|
||||
export function toastSuccess(message: string, props?: ExternalToast) {
|
||||
toast.success(message, {
|
||||
position: "top-right",
|
||||
icon: <CircleCheckBig color="green" size={22} />,
|
||||
duration: 2000,
|
||||
...props,
|
||||
});
|
||||
}
|
||||
|
||||
// toastWarn 警告提示
|
||||
export function toastWarn(message: string, props?: ExternalToast) {
|
||||
toast.warning(message, {
|
||||
position: "top-right",
|
||||
// icon: <CircleExclamation color="yellow" size={22} />,
|
||||
duration: 2000,
|
||||
...props,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// 区域编辑器预设颜色池
|
||||
export const COLOR_POOL = [
|
||||
"#3B82F6", // blue
|
||||
"#EF4444", // red
|
||||
"#10B981", // green
|
||||
"#F59E0B", // amber
|
||||
"#8B5CF6", // violet
|
||||
"#EC4899", // pink
|
||||
"#06B6D4", // cyan
|
||||
"#F97316", // orange
|
||||
];
|
||||
@@ -0,0 +1,324 @@
|
||||
import type { KonvaEventObject } from "konva/lib/Node";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Circle,
|
||||
Image as KonvaImage,
|
||||
Layer,
|
||||
Line,
|
||||
Rect,
|
||||
Stage,
|
||||
} from "react-konva";
|
||||
import useImage from "use-image";
|
||||
|
||||
export interface ZoneData {
|
||||
name: string;
|
||||
/** 归一化坐标数组 [x1, y1, x2, y2, ...] */
|
||||
points: number[];
|
||||
color: string;
|
||||
isFinished: boolean;
|
||||
/** 应用的算法标签列表，如 ["person", "car"] */
|
||||
labels?: string[];
|
||||
}
|
||||
|
||||
interface PolygonZoneEditorProps {
|
||||
/** 背景图片 URL，可为空 */
|
||||
imageUrl?: string;
|
||||
/** 初始区域数据 */
|
||||
initialZones?: ZoneData[];
|
||||
/** 当前选中的区域索引 */
|
||||
activeZoneIndex?: number;
|
||||
/** 是否处于编辑模式（可添加点） */
|
||||
isEditing?: boolean;
|
||||
/** 区域数据变更回调 */
|
||||
onZonesChange?: (zones: ZoneData[]) => void;
|
||||
/** 区域选中回调 */
|
||||
onZoneSelect?: (index: number | undefined) => void;
|
||||
/** 区域闭合回调 - 当绘制完成自动闭合时触发 */
|
||||
onZoneFinished?: (index: number) => void;
|
||||
/** 容器宽度 */
|
||||
width?: number;
|
||||
/** 容器高度 */
|
||||
height?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 多边形区域编辑器
|
||||
* 用于在监控画面截图上标记感兴趣区域 (ROI)
|
||||
* 参考 frigate 的交互设计：
|
||||
* - 点击添加进入编辑模式
|
||||
* - 点击画布添加点
|
||||
* - 点击第一个点闭合区域，自动退出编辑模式
|
||||
* - 闭合后可拖拽调整顶点位置
|
||||
*/
|
||||
export default function PolygonZoneEditor({
|
||||
imageUrl,
|
||||
initialZones = [],
|
||||
activeZoneIndex,
|
||||
isEditing = false,
|
||||
onZonesChange,
|
||||
onZoneSelect,
|
||||
onZoneFinished,
|
||||
width: containerWidth,
|
||||
height: containerHeight,
|
||||
}: PolygonZoneEditorProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [image] = useImage(imageUrl || "", "anonymous");
|
||||
const [zones, setZones] = useState<ZoneData[]>(initialZones);
|
||||
const [dimensions, setDimensions] = useState({ width: 800, height: 450 });
|
||||
|
||||
// 同步外部传入的 zones
|
||||
useEffect(() => {
|
||||
setZones(initialZones);
|
||||
}, [initialZones]);
|
||||
|
||||
// 计算画布尺寸（保持图片宽高比，无图片时使用默认 16:9）
|
||||
useEffect(() => {
|
||||
const maxWidth = containerWidth || containerRef.current?.clientWidth || 800;
|
||||
const maxHeight = containerHeight || 600;
|
||||
|
||||
if (image) {
|
||||
const imageRatio = image.width / image.height;
|
||||
let width = maxWidth;
|
||||
let height = width / imageRatio;
|
||||
|
||||
if (height > maxHeight) {
|
||||
height = maxHeight;
|
||||
width = height * imageRatio;
|
||||
}
|
||||
setDimensions({ width, height });
|
||||
} else {
|
||||
// 无图片时使用 16:9 比例
|
||||
const ratio = 16 / 9;
|
||||
let width = maxWidth;
|
||||
let height = width / ratio;
|
||||
|
||||
if (height > maxHeight) {
|
||||
height = maxHeight;
|
||||
width = height * ratio;
|
||||
}
|
||||
setDimensions({ width, height });
|
||||
}
|
||||
}, [image, containerWidth, containerHeight]);
|
||||
|
||||
// 将归一化坐标转换为画布坐标
|
||||
const normalizedToCanvas = useCallback(
|
||||
(normalizedPoints: number[]): number[] => {
|
||||
const result: number[] = [];
|
||||
for (let i = 0; i < normalizedPoints.length; i += 2) {
|
||||
result.push(normalizedPoints[i] * dimensions.width);
|
||||
result.push(normalizedPoints[i + 1] * dimensions.height);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
[dimensions],
|
||||
);
|
||||
|
||||
// 点击画布添加点（仅在编辑模式下生效）
|
||||
const handleStageClick = useCallback(
|
||||
(e: KonvaEventObject<MouseEvent | TouchEvent>) => {
|
||||
// 如果不是编辑模式，不处理
|
||||
if (!isEditing) return;
|
||||
|
||||
// 如果点击的是顶点（Circle），不处理（由 Circle 的 onClick 处理闭合）
|
||||
const clickedOnVertex = e.target.getClassName() === "Circle";
|
||||
if (clickedOnVertex) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stage = e.target.getStage();
|
||||
if (!stage) return;
|
||||
|
||||
const pos = stage.getPointerPosition();
|
||||
if (!pos) return;
|
||||
|
||||
// 归一化坐标，限制最多 3 位小数
|
||||
const normX = Math.round((pos.x / dimensions.width) * 1000) / 1000;
|
||||
const normY = Math.round((pos.y / dimensions.height) * 1000) / 1000;
|
||||
|
||||
// 如果有活动区域且未闭合，在该区域添加点
|
||||
if (activeZoneIndex !== undefined && zones[activeZoneIndex]) {
|
||||
const zone = zones[activeZoneIndex];
|
||||
if (!zone.isFinished) {
|
||||
const newZones = [...zones];
|
||||
newZones[activeZoneIndex] = {
|
||||
...zone,
|
||||
points: [...zone.points, normX, normY],
|
||||
};
|
||||
setZones(newZones);
|
||||
onZonesChange?.(newZones);
|
||||
}
|
||||
}
|
||||
},
|
||||
[isEditing, activeZoneIndex, zones, dimensions, onZonesChange],
|
||||
);
|
||||
|
||||
// 点击第一个点闭合多边形
|
||||
const handleFirstPointClick = useCallback(
|
||||
(zoneIndex: number) => {
|
||||
const zone = zones[zoneIndex];
|
||||
// 至少需要 3 个点才能闭合
|
||||
if (zone.points.length < 6) return;
|
||||
|
||||
const newZones = [...zones];
|
||||
newZones[zoneIndex] = {
|
||||
...zone,
|
||||
isFinished: true,
|
||||
};
|
||||
setZones(newZones);
|
||||
onZonesChange?.(newZones);
|
||||
// 通知父组件区域已闭合，退出编辑模式
|
||||
onZoneFinished?.(zoneIndex);
|
||||
},
|
||||
[zones, onZonesChange, onZoneFinished],
|
||||
);
|
||||
|
||||
// 拖拽顶点（仅闭合后的区域可拖拽）
|
||||
const handleVertexDrag = useCallback(
|
||||
(zoneIndex: number, pointIndex: number, e: KonvaEventObject<DragEvent>) => {
|
||||
const pos = e.target.position();
|
||||
// 归一化坐标，限制最多 3 位小数，并限制在 0-1 范围内
|
||||
const normX =
|
||||
Math.round(Math.max(0, Math.min(1, pos.x / dimensions.width)) * 1000) /
|
||||
1000;
|
||||
const normY =
|
||||
Math.round(Math.max(0, Math.min(1, pos.y / dimensions.height)) * 1000) /
|
||||
1000;
|
||||
|
||||
const newZones = [...zones];
|
||||
const zone = newZones[zoneIndex];
|
||||
const newPoints = [...zone.points];
|
||||
newPoints[pointIndex * 2] = normX;
|
||||
newPoints[pointIndex * 2 + 1] = normY;
|
||||
newZones[zoneIndex] = { ...zone, points: newPoints };
|
||||
setZones(newZones);
|
||||
onZonesChange?.(newZones);
|
||||
},
|
||||
[zones, dimensions, onZonesChange],
|
||||
);
|
||||
|
||||
// 渲染多边形和顶点
|
||||
const renderZone = useCallback(
|
||||
(zone: ZoneData, zoneIndex: number) => {
|
||||
const canvasPoints = normalizedToCanvas(zone.points);
|
||||
const isActive = zoneIndex === activeZoneIndex;
|
||||
const pointCount = zone.points.length / 2;
|
||||
|
||||
// 生成半透明填充色
|
||||
const fillColor = zone.isFinished ? `${zone.color}40` : "transparent";
|
||||
|
||||
return (
|
||||
<React.Fragment key={zoneIndex}>
|
||||
{/* 多边形线条 */}
|
||||
<Line
|
||||
points={canvasPoints}
|
||||
stroke={zone.color}
|
||||
strokeWidth={isActive ? 3 : 2}
|
||||
closed={zone.isFinished}
|
||||
fill={fillColor}
|
||||
onClick={() => {
|
||||
if (!isEditing) {
|
||||
onZoneSelect?.(zoneIndex);
|
||||
}
|
||||
}}
|
||||
onTap={() => {
|
||||
if (!isEditing) {
|
||||
onZoneSelect?.(zoneIndex);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 顶点 - 仅在活动区域或闭合区域显示 */}
|
||||
{(isActive || zone.isFinished) &&
|
||||
Array.from({ length: pointCount }).map((_, i) => {
|
||||
const x = canvasPoints[i * 2];
|
||||
const y = canvasPoints[i * 2 + 1];
|
||||
const isFirstPoint = i === 0;
|
||||
const canClose =
|
||||
isFirstPoint &&
|
||||
!zone.isFinished &&
|
||||
pointCount >= 3 &&
|
||||
isEditing;
|
||||
|
||||
return (
|
||||
<Circle
|
||||
key={i}
|
||||
x={x}
|
||||
y={y}
|
||||
radius={canClose ? 12 : 6}
|
||||
fill={isFirstPoint && canClose ? "#ffffff" : zone.color}
|
||||
stroke={zone.color}
|
||||
strokeWidth={2}
|
||||
draggable={zone.isFinished && isActive}
|
||||
onClick={() => {
|
||||
if (canClose) {
|
||||
handleFirstPointClick(zoneIndex);
|
||||
}
|
||||
}}
|
||||
onTap={() => {
|
||||
if (canClose) {
|
||||
handleFirstPointClick(zoneIndex);
|
||||
}
|
||||
}}
|
||||
onDragEnd={(e) => handleVertexDrag(zoneIndex, i, e)}
|
||||
style={{ cursor: canClose ? "pointer" : "move" }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
);
|
||||
},
|
||||
[
|
||||
normalizedToCanvas,
|
||||
activeZoneIndex,
|
||||
isEditing,
|
||||
handleFirstPointClick,
|
||||
handleVertexDrag,
|
||||
onZoneSelect,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative bg-gray-800 rounded-lg overflow-hidden"
|
||||
style={{ width: dimensions.width, height: dimensions.height }}
|
||||
>
|
||||
<Stage
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
onClick={handleStageClick}
|
||||
onTap={handleStageClick}
|
||||
style={{ cursor: isEditing ? "crosshair" : "default" }}
|
||||
>
|
||||
<Layer>
|
||||
{/* 背景：图片或灰色占位 */}
|
||||
{image ? (
|
||||
<KonvaImage
|
||||
image={image}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
/>
|
||||
) : (
|
||||
<Rect
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
fill="#374151"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 渲染所有区域 */}
|
||||
{zones.map((zone, index) => renderZone(zone, index))}
|
||||
</Layer>
|
||||
</Stage>
|
||||
|
||||
{/* 无图片时的提示文字 */}
|
||||
{!image && (
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<p className="text-gray-400 text-sm">{t("no_image_available")}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from "react";
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
};
|
||||
mql.addEventListener("change", onChange);
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
return () => mql.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
|
||||
return !!isMobile;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface LayoutOptions {
|
||||
aspectRatio?: number; // 播放器宽高比，默认 16/9
|
||||
headerHeight?: number; // 顶部留白/标题栏高度
|
||||
minWidth?: number; // 最小宽度，低于此宽度允许滚动 (iPhone 13 ~ 390px)
|
||||
sidebarWidth?: number; // 侧边栏宽度 (如果有)
|
||||
footerRef?: React.RefObject<HTMLElement | null>; // 底部容器的引用，用于动态测量高度
|
||||
fixedFooterHeight?: number; // 固定的 footer 高度，设置后忽略动态测量，避免展开/收缩时位置变动
|
||||
}
|
||||
|
||||
interface LayoutResult {
|
||||
containerStyle: React.CSSProperties;
|
||||
contentStyle: React.CSSProperties;
|
||||
isSmallScreen: boolean;
|
||||
}
|
||||
|
||||
export function usePlayerLayout(options: LayoutOptions): LayoutResult {
|
||||
const {
|
||||
aspectRatio = 16 / 9,
|
||||
headerHeight = 48,
|
||||
minWidth = 390,
|
||||
sidebarWidth = 0,
|
||||
footerRef,
|
||||
fixedFooterHeight,
|
||||
} = options;
|
||||
|
||||
const [layout, setLayout] = useState<LayoutResult>({
|
||||
containerStyle: {},
|
||||
contentStyle: {},
|
||||
isSmallScreen: false,
|
||||
});
|
||||
|
||||
// 存储实际测量到的底部高度
|
||||
const [measuredFooterHeight, setMeasuredFooterHeight] = useState(100); // 初始估算值
|
||||
|
||||
// 使用固定高度或动态测量高度
|
||||
const footerHeight = fixedFooterHeight ?? measuredFooterHeight;
|
||||
|
||||
// 1. 监听 footer 高度变化（仅当未设置固定高度时）
|
||||
useEffect(() => {
|
||||
if (fixedFooterHeight !== undefined) return; // 使用固定高度时跳过动态测量
|
||||
|
||||
const footerEl = footerRef?.current;
|
||||
if (!footerEl) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 使用 borderBoxSize 获取包含 padding/border 的高度
|
||||
if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
|
||||
setMeasuredFooterHeight(entry.borderBoxSize[0].blockSize);
|
||||
} else {
|
||||
setMeasuredFooterHeight(entry.contentRect.height);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(footerEl);
|
||||
return () => observer.disconnect();
|
||||
}, [footerRef, fixedFooterHeight]); // 依赖 footerRef 和 fixedFooterHeight
|
||||
|
||||
// 2. 计算布局
|
||||
useEffect(() => {
|
||||
const calculateLayout = () => {
|
||||
// Drawer 内容区域高度 (sm:h-[95vh])
|
||||
const vh = window.innerHeight * 0.95;
|
||||
const vw = window.innerWidth - sidebarWidth;
|
||||
|
||||
// 极致优化：容器内边距 (0.25rem top + 0.25rem bottom = 8px)
|
||||
// 之前是 32px，减少了 24px 的占用
|
||||
const containerPaddingY = 8;
|
||||
|
||||
// 计算播放器最大可用高度
|
||||
// Available Height = Viewport - Header - Footer - Padding
|
||||
const maxPlayerHeight =
|
||||
vh - headerHeight - footerHeight - containerPaddingY;
|
||||
|
||||
// 基于高度限制计算出的最大宽度
|
||||
const widthBasedOnHeightLimit = maxPlayerHeight * aspectRatio;
|
||||
|
||||
let paddingX = 0;
|
||||
let shouldScroll = false;
|
||||
|
||||
// 决策逻辑：
|
||||
// 1. 如果屏幕足够宽（宽于基于高度计算出的宽度），则限制宽度以防止高度溢出。
|
||||
if (vw > widthBasedOnHeightLimit) {
|
||||
// 需要左右留白来限制宽度
|
||||
paddingX = (vw - widthBasedOnHeightLimit) / 2;
|
||||
} else {
|
||||
// 2. 屏幕不够宽，宽度受限。
|
||||
const totalHeight =
|
||||
vw / aspectRatio + footerHeight + headerHeight + containerPaddingY;
|
||||
|
||||
// 只有当溢出超过一定阈值（比如 2px）才开启滚动
|
||||
if (totalHeight > vh + 2) {
|
||||
shouldScroll = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 最小宽度兜底
|
||||
if (vw - 2 * paddingX < minWidth) {
|
||||
paddingX = 0;
|
||||
shouldScroll = true;
|
||||
}
|
||||
|
||||
paddingX = Math.max(0, paddingX);
|
||||
|
||||
const isSmall = vw < 640;
|
||||
|
||||
setLayout({
|
||||
containerStyle: {
|
||||
paddingLeft: isSmall ? 0 : `${paddingX}px`,
|
||||
paddingRight: isSmall ? 0 : `${paddingX}px`,
|
||||
paddingTop: isSmall ? 0 : "0.25rem",
|
||||
paddingBottom: isSmall ? 0 : "0.25rem",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflowY: shouldScroll || isSmall ? "auto" : "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: isSmall ? "stretch" : "center",
|
||||
justifyContent: shouldScroll || isSmall ? "flex-start" : "center",
|
||||
},
|
||||
contentStyle: {
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
},
|
||||
isSmallScreen: isSmall || vw < minWidth,
|
||||
});
|
||||
};
|
||||
|
||||
calculateLayout();
|
||||
window.addEventListener("resize", calculateLayout);
|
||||
|
||||
const timer = setTimeout(calculateLayout, 100);
|
||||
return () => {
|
||||
window.removeEventListener("resize", calculateLayout);
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [aspectRatio, headerHeight, footerHeight, minWidth, sidebarWidth]);
|
||||
|
||||
return layout;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
const SIDEBAR_STATE_KEY = "sidebar-open-state";
|
||||
|
||||
/**
|
||||
* 侧边栏状态管理 hook
|
||||
* 将侧边栏的展开/关闭状态持久化到 localStorage
|
||||
* 默认状态为开启
|
||||
*/
|
||||
export function useSidebarState() {
|
||||
// 从 localStorage 获取初始状态，默认为 true
|
||||
const [isOpen, setIsOpen] = useState<boolean>(() => {
|
||||
if (typeof window === "undefined") {
|
||||
return true; // 服务端渲染时默认为开启
|
||||
}
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(SIDEBAR_STATE_KEY);
|
||||
return stored !== null ? JSON.parse(stored) : false;
|
||||
} catch (error) {
|
||||
console.warn("Failed to parse sidebar state from localStorage:", error);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// 当状态改变时，保存到 localStorage
|
||||
useEffect(() => {
|
||||
try {
|
||||
localStorage.setItem(SIDEBAR_STATE_KEY, JSON.stringify(isOpen));
|
||||
} catch (error) {
|
||||
console.warn("Failed to save sidebar state to localStorage:", error);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// 切换侧边栏状态
|
||||
const toggleSidebar = useCallback(() => {
|
||||
setIsOpen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
// 打开侧边栏
|
||||
const openSidebar = useCallback(() => {
|
||||
setIsOpen(true);
|
||||
}, []);
|
||||
|
||||
// 关闭侧边栏
|
||||
const closeSidebar = useCallback(() => {
|
||||
setIsOpen(false);
|
||||
}, []);
|
||||
|
||||
// 设置侧边栏状态的回调，用于监听外部状态变化
|
||||
const onStateChange = useCallback((open: boolean) => {
|
||||
setIsOpen(open);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
toggleSidebar,
|
||||
openSidebar,
|
||||
closeSidebar,
|
||||
onStateChange, // 新增：用于监听外部状态变化
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
# 国际化配置优化报告
|
||||
|
||||
## 优化目标
|
||||
- 消除所有翻译文件中的重复项
|
||||
- 将通用翻译键统一放到 `common.json`
|
||||
- 确保每个翻译键只出现一次
|
||||
|
||||
## 已完成的优化
|
||||
|
||||
### 1. 修复 `common.json` 内部重复项
|
||||
|
||||
**删除的重复项：**
|
||||
- ❌ `channel_list` (第57行) - 与第97行重复 → **保留一个**
|
||||
- ❌ `password` (第16行) - 与第94行重复 → **保留一个**
|
||||
- ❌ `app_name` (第2行) - 与第80行重复 → **保留一个**
|
||||
|
||||
**优化后：**
|
||||
- ✅ 从 100 行减少到 96 行
|
||||
- ✅ 所有键现在都是唯一的
|
||||
|
||||
### 2. 移除其他文件中与 `common.json` 重复的键
|
||||
|
||||
#### `channel.json`
|
||||
**删除的重复项：**
|
||||
- ❌ `play` - 已存在于 `common.json`
|
||||
- ❌ `channel_list` - 已存在于 `common.json`
|
||||
- ❌ `stream_url` - 已移至 `common.json`
|
||||
|
||||
**保留的专属键：**
|
||||
- ✅ `title` (通道管理)
|
||||
- ✅ `channel_name`, `channel_id`, `parent_id`
|
||||
- ✅ `live`, `stop`, `record`, `snapshot`
|
||||
- ✅ `ptz_control`, `channel_detail`, `video_stream`
|
||||
- ✅ `codec`, `resolution`, `frame_rate`, `bitrate`
|
||||
|
||||
#### `device.json`
|
||||
**删除的重复项：**
|
||||
- ❌ `channel_list` - 已存在于 `common.json`
|
||||
|
||||
**保留的专属键：**
|
||||
- ✅ `title` (设备管理)
|
||||
- ✅ `device_list`, `device_name`, `device_id`, `device_type`
|
||||
- ✅ `model`, `firmware_version`, `ip_address`, `port`
|
||||
- ✅ `add_device`, `edit_device`, `delete_device`
|
||||
- ✅ `device_config`, `channel_sync`, `device_info`
|
||||
|
||||
#### `stream.json`
|
||||
**删除的重复项：**
|
||||
- ❌ `stream_url` - 已移至 `common.json`
|
||||
|
||||
**保留的专属键：**
|
||||
- ✅ `rtmp_title`, `rtsp_title`, `stream_list`
|
||||
- ✅ `stream_name`, `stream_id`, `app`, `stream`, `vhost`
|
||||
- ✅ `push_url`, `pull_url`, `source_url`, `target_url`
|
||||
- ✅ `start_time`, `duration`
|
||||
- ✅ `add_stream`, `edit_stream`, `delete_stream`
|
||||
- ✅ `start_proxy`, `stop_proxy`
|
||||
|
||||
#### `dashboard.json`
|
||||
**删除的重复项：**
|
||||
- ❌ `channel_count` - 已存在于 `common.json`
|
||||
|
||||
**保留的专属键：**
|
||||
- ✅ `title` (仪表盘)
|
||||
- ✅ `system_overview`, `cpu_usage`, `memory_usage`, `disk_usage`
|
||||
- ✅ `network_traffic`, `device_count`
|
||||
- ✅ `online_devices`, `offline_devices`
|
||||
- ✅ `total_bandwidth`, `load_average`
|
||||
|
||||
### 3. 新增国际化页面
|
||||
|
||||
✅ **配置页面** (`app/pages/device/config/config.tsx`)
|
||||
- 国标 ID、国标域、端口号、密码、保存配置等
|
||||
|
||||
## 翻译键组织原则
|
||||
|
||||
### `common.json` - 通用翻译键
|
||||
包含：
|
||||
- 🔹 基础操作：搜索、添加、编辑、删除、保存、取消等
|
||||
- 🔹 通用状态：在线、离线、成功、失败、加载中等
|
||||
- 🔹 系统导航：快捷桌面、国标通道、推流列表、拉流代理
|
||||
- 🔹 通用字段：名称、状态、操作、设备ID、流ID等
|
||||
- 🔹 全局使用的业务术语：播放、通道列表、流地址等
|
||||
|
||||
### 专属 JSON 文件 - 特定功能翻译键
|
||||
- `channel.json` - 通道特有：云台控制、编码格式、分辨率、帧率等
|
||||
- `device.json` - 设备特有：设备列表、固件版本、IP地址、通道同步等
|
||||
- `stream.json` - 流特有：推流地址、拉流地址、源地址、虚拟主机等
|
||||
- `dashboard.json` - 仪表盘特有：CPU使用率、内存使用率、系统负载等
|
||||
- `desktop.json` - 桌面特有：RTMP推流、RTSP拉流、国标信令等
|
||||
- `login.json` - 登录特有：忘记密码提示、确认等
|
||||
|
||||
## 使用建议
|
||||
|
||||
### 1. 添加新翻译时的判断标准
|
||||
|
||||
**放入 `common.json` 的情况：**
|
||||
- ✅ 多个页面/组件都会用到
|
||||
- ✅ 通用的操作按钮（如：播放、编辑、删除）
|
||||
- ✅ 通用的状态描述（如：在线、离线、成功）
|
||||
- ✅ 通用的业务术语（如：设备、通道、流）
|
||||
|
||||
**放入专属文件的情况：**
|
||||
- ✅ 仅在特定功能模块使用
|
||||
- ✅ 具有特定领域含义的专业术语
|
||||
- ✅ 某个页面特有的标题或描述
|
||||
|
||||
### 2. 引用方式
|
||||
|
||||
```typescript
|
||||
// 引用 common.json
|
||||
const { t } = useTranslation('common');
|
||||
t('play') // 播放
|
||||
|
||||
// 引用专属文件
|
||||
const { t } = useTranslation('channel');
|
||||
t('ptz_control') // 云台控制
|
||||
|
||||
// 同时引用多个命名空间
|
||||
const { t } = useTranslation(['common', 'channel']);
|
||||
t('common:play') // 播放
|
||||
t('channel:codec') // 编码格式
|
||||
```
|
||||
|
||||
## 优化效果
|
||||
|
||||
### 减少重复
|
||||
- ✅ `common.json`: 从 100 行 → 96 行（删除 4 个重复项）
|
||||
- ✅ `channel.json`: 从 20 行 → 17 行（删除 3 个重复项）
|
||||
- ✅ `device.json`: 从 21 行 → 20 行（删除 1 个重复项）
|
||||
- ✅ `stream.json`: 从 22 行 → 21 行（删除 1 个重复项）
|
||||
- ✅ `dashboard.json`: 从 14 行 → 13 行（删除 1 个重复项）
|
||||
|
||||
### 总体优化
|
||||
- 📊 **总翻译键数量减少**: 10 个重复项被消除
|
||||
- 🎯 **配置更清晰**: 每个键只出现一次，避免维护时遗漏
|
||||
- 🚀 **易于扩展**: 新增翻译时有明确的归类标准
|
||||
|
||||
## 下一步建议
|
||||
|
||||
1. ✅ **已完成国际化的页面**：
|
||||
- 配置页面（国标配置）
|
||||
- 设备管理页面
|
||||
- 通道列表页面
|
||||
- RTMP推流页面
|
||||
- RTSP拉流页面
|
||||
- 桌面页面
|
||||
- 导航栏和登录页面
|
||||
|
||||
2. 🔄 **未来可优化的方向**：
|
||||
- 考虑将所有 `title` 键统一到 `common.json`（如果多个页面都有 title）
|
||||
- 监控新增的翻译键，及时发现并合并重复项
|
||||
- 定期审查翻译文件，确保组织结构清晰
|
||||
|
||||
## 维护规范
|
||||
|
||||
### 添加新翻译时的检查清单
|
||||
- [ ] 检查 `common.json` 中是否已存在相同或相似的键
|
||||
- [ ] 确认是通用键还是专属键
|
||||
- [ ] 如果是通用键，放入 `common.json`
|
||||
- [ ] 如果是专属键，放入对应的功能文件
|
||||
- [ ] 同时更新中文和英文两个版本
|
||||
- [ ] 确保键名语义明确，避免歧义
|
||||
|
||||
---
|
||||
|
||||
**优化完成时间**: 2025-11-19
|
||||
**优化工具**: AI 辅助分析和自动化重构
|
||||
**影响范围**: 全部国际化配置文件
|
||||
@@ -0,0 +1,206 @@
|
||||
# 国际化 (i18n) 使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本项目使用 `react-i18next` 实现多语言支持，目前支持中文(zh)和英文(en)。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **react-i18next**: React 国际化库
|
||||
- **i18next**: 核心国际化框架
|
||||
- **i18next-browser-languagedetector**: 自动检测浏览器语言
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
app/i18n/
|
||||
├── config.ts # i18n配置文件
|
||||
├── locales/ # 翻译资源目录
|
||||
│ ├── zh/ # 中文翻译
|
||||
│ │ ├── common.json # 通用翻译
|
||||
│ │ ├── dashboard.json # 仪表盘翻译
|
||||
│ │ ├── device.json # 设备管理翻译
|
||||
│ │ ├── channel.json # 通道管理翻译
|
||||
│ │ └── stream.json # 流管理翻译
|
||||
│ └── en/ # 英文翻译
|
||||
│ ├── common.json
|
||||
│ ├── dashboard.json
|
||||
│ ├── device.json
|
||||
│ ├── channel.json
|
||||
│ └── stream.json
|
||||
└── README.md # 本文档
|
||||
```
|
||||
|
||||
## 基本使用
|
||||
|
||||
### 1. 在组件中使用翻译
|
||||
|
||||
```tsx
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function MyComponent() {
|
||||
// 使用common命名空间（默认）
|
||||
const { t } = useTranslation('common');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{t('app_name')}</h1>
|
||||
<p>{t('welcome')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 使用多个命名空间
|
||||
|
||||
```tsx
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function DevicePage() {
|
||||
// 使用device命名空间
|
||||
const { t } = useTranslation('device');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{t('title')}</h1>
|
||||
<p>{t('device_name')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 使用多个命名空间的翻译
|
||||
|
||||
```tsx
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function ComplexPage() {
|
||||
const { t } = useTranslation(['common', 'device']);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 从common命名空间获取 */}
|
||||
<button>{t('common:save')}</button>
|
||||
|
||||
{/* 从device命名空间获取 */}
|
||||
<h2>{t('device:title')}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 语言切换
|
||||
|
||||
项目已提供 `<LanguageSwitcher />` 组件，集成在顶部导航栏中。
|
||||
|
||||
```tsx
|
||||
import { LanguageSwitcher } from '~/components/language-switcher';
|
||||
|
||||
// 已集成在 TopNavigation 组件中
|
||||
```
|
||||
|
||||
## 添加新的翻译
|
||||
|
||||
### 1. 添加到现有命名空间
|
||||
|
||||
编辑对应的JSON文件，例如 `app/i18n/locales/zh/common.json`：
|
||||
|
||||
```json
|
||||
{
|
||||
"existing_key": "现有翻译",
|
||||
"new_key": "新的翻译" // 添加新的键值对
|
||||
}
|
||||
```
|
||||
|
||||
同时更新英文版本 `app/i18n/locales/en/common.json`：
|
||||
|
||||
```json
|
||||
{
|
||||
"existing_key": "Existing Translation",
|
||||
"new_key": "New Translation"
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 创建新的命名空间
|
||||
|
||||
1. 创建新的翻译文件：
|
||||
- `app/i18n/locales/zh/mynewspace.json`
|
||||
- `app/i18n/locales/en/mynewspace.json`
|
||||
|
||||
2. 在 `app/i18n/config.ts` 中导入：
|
||||
|
||||
```typescript
|
||||
import mynewspaceZh from './locales/zh/mynewspace.json';
|
||||
import mynewspaceEn from './locales/en/mynewspace.json';
|
||||
|
||||
const resources = {
|
||||
zh: {
|
||||
common: commonZh,
|
||||
mynewspace: mynewspaceZh, // 添加新命名空间
|
||||
},
|
||||
en: {
|
||||
common: commonEn,
|
||||
mynewspace: mynewspaceEn, // 添加新命名空间
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 默认语言行为
|
||||
|
||||
系统会按以下顺序确定语言：
|
||||
|
||||
1. **用户之前选择的语言**（存储在localStorage中）
|
||||
2. **浏览器语言**（如果浏览器语言是中文则使用zh，否则使用en）
|
||||
3. **备用语言**（默认为en）
|
||||
|
||||
## 命名空间说明
|
||||
|
||||
- **common**: 通用文本（按钮、标签、状态等）
|
||||
- **dashboard**: 仪表盘相关
|
||||
- **device**: 设备管理相关
|
||||
- **channel**: 通道管理相关
|
||||
- **stream**: 流管理相关（RTMP/RTSP）
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **保持键值一致**：中英文JSON文件的键名必须保持一致
|
||||
2. **使用有意义的键名**：使用描述性的键名，如 `device_name` 而不是 `text1`
|
||||
3. **避免重复**：检查是否已存在类似的翻译键
|
||||
4. **及时更新**：添加新功能时同时更新翻译文件
|
||||
5. **测试两种语言**：确保中英文都能正常显示
|
||||
|
||||
## 未来扩展
|
||||
|
||||
如需添加更多语言：
|
||||
|
||||
1. 创建新的语言目录，如 `app/i18n/locales/ja/`（日语）
|
||||
2. 复制所有JSON文件并翻译
|
||||
3. 在 `config.ts` 中添加新语言的资源
|
||||
4. 在 `LanguageSwitcher` 组件中添加切换选项
|
||||
|
||||
## 示例页面迁移
|
||||
|
||||
以下是将现有页面迁移到使用i18n的步骤：
|
||||
|
||||
### 迁移前
|
||||
```tsx
|
||||
function MyPage() {
|
||||
return <h1>设备管理</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
### 迁移后
|
||||
```tsx
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function MyPage() {
|
||||
const { t } = useTranslation('device');
|
||||
return <h1>{t('title')}</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
- 翻译文件在应用启动时一次性加载
|
||||
- 切换语言不会重新加载页面
|
||||
- localStorage缓存用户语言选择
|
||||
@@ -0,0 +1,65 @@
|
||||
import i18n from "i18next";
|
||||
import LanguageDetector from "i18next-browser-languagedetector";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import channelEn from "./locales/en/channel.json";
|
||||
import commonEn from "./locales/en/common.json";
|
||||
import dashboardEn from "./locales/en/dashboard.json";
|
||||
import desktopEn from "./locales/en/desktop.json";
|
||||
import deviceEn from "./locales/en/device.json";
|
||||
import loginEn from "./locales/en/login.json";
|
||||
import streamEn from "./locales/en/stream.json";
|
||||
import channelZh from "./locales/zh/channel.json";
|
||||
// 导入翻译资源
|
||||
import commonZh from "./locales/zh/common.json";
|
||||
import dashboardZh from "./locales/zh/dashboard.json";
|
||||
import desktopZh from "./locales/zh/desktop.json";
|
||||
import deviceZh from "./locales/zh/device.json";
|
||||
import loginZh from "./locales/zh/login.json";
|
||||
import streamZh from "./locales/zh/stream.json";
|
||||
|
||||
// 配置翻译资源
|
||||
const resources = {
|
||||
zh: {
|
||||
common: commonZh,
|
||||
dashboard: dashboardZh,
|
||||
device: deviceZh,
|
||||
channel: channelZh,
|
||||
stream: streamZh,
|
||||
desktop: desktopZh,
|
||||
login: loginZh,
|
||||
},
|
||||
en: {
|
||||
common: commonEn,
|
||||
dashboard: dashboardEn,
|
||||
device: deviceEn,
|
||||
channel: channelEn,
|
||||
stream: streamEn,
|
||||
desktop: desktopEn,
|
||||
login: loginEn,
|
||||
},
|
||||
};
|
||||
|
||||
// 初始化 i18next
|
||||
i18n
|
||||
.use(LanguageDetector) // 自动检测用户语言
|
||||
.use(initReactI18next) // 绑定 React
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: "en", // 备用语言
|
||||
defaultNS: "common", // 默认命名空间
|
||||
lng: undefined, // 让 LanguageDetector 自动检测
|
||||
interpolation: {
|
||||
escapeValue: false, // React 已经防止 XSS
|
||||
},
|
||||
detection: {
|
||||
// 语言检测选项
|
||||
order: ["localStorage", "navigator"], // 优先从localStorage读取，其次是浏览器语言
|
||||
caches: ["localStorage"], // 缓存用户选择的语言
|
||||
lookupLocalStorage: "i18nextLng", // localStorage的key
|
||||
},
|
||||
react: {
|
||||
useSuspense: false, // 禁用 Suspense，避免 SSR 问题
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"title": "Channel Management",
|
||||
"channel_name": "Channel Name",
|
||||
"channel_id": "Channel ID",
|
||||
"parent_id": "Parent ID",
|
||||
"live": "Live",
|
||||
"stop": "Stop",
|
||||
"record": "Record",
|
||||
"snapshot": "Snapshot",
|
||||
"ptz_control": "PTZ Control",
|
||||
"channel_detail": "Channel Detail",
|
||||
"video_stream": "Video Stream",
|
||||
"codec": "Codec",
|
||||
"resolution": "Resolution",
|
||||
"frame_rate": "Frame Rate",
|
||||
"bitrate": "Bitrate"
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
{
|
||||
"app_name": "App",
|
||||
"app_title": "GB/T28181",
|
||||
"quick_desktop": "Desktop",
|
||||
"gb_channel": "Monitor",
|
||||
"alerts": "Alerts",
|
||||
"rtmp_stream": "RTMP",
|
||||
"rtsp_proxy": "RTSP",
|
||||
"dashboard": "Dashboard",
|
||||
"device_management": "Device Management",
|
||||
"channel_management": "Channel Management",
|
||||
"stream_management": "Stream Management",
|
||||
"settings": "Settings",
|
||||
"logout": "Logout",
|
||||
"login": "Login",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"remember_me": "Remember me",
|
||||
"forgot_password": "Forgot password",
|
||||
"search": "Search",
|
||||
"add": "Add",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"confirm": "Confirm",
|
||||
"submit": "Submit",
|
||||
"reset": "Reset",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"previous": "Previous",
|
||||
"next_step": "Next",
|
||||
"prev_step": "Previous",
|
||||
"step": "Step",
|
||||
"close": "Close",
|
||||
"refresh": "Refresh",
|
||||
"loading": "Loading...",
|
||||
"no_data": "No data available",
|
||||
"operation": "Operation",
|
||||
"status": "Status",
|
||||
"online": "ON",
|
||||
"offline": "OFF",
|
||||
"pushing": "BUSY",
|
||||
"not_pushing": "IDLE",
|
||||
"pulling": "BUSY",
|
||||
"not_pulling": "IDLE",
|
||||
"all": "All",
|
||||
"success": "Success",
|
||||
"failed": "Failed",
|
||||
"error": "Error",
|
||||
"warning": "Warning",
|
||||
"info": "Info",
|
||||
"language": "Language",
|
||||
"chinese": "中文",
|
||||
"english": "English",
|
||||
"name": "Name",
|
||||
"device_number": "Device ID",
|
||||
"address": "Address",
|
||||
"manufacturer": "Manufacturer",
|
||||
"stream_mode": "Stream Mode",
|
||||
"channel_count": "Channels",
|
||||
"register_time": "Register Time",
|
||||
"last_heartbeat": "Last Heartbeat",
|
||||
"device_detail": "Device Detail",
|
||||
"channel_list": "Channel List",
|
||||
"attributes": "Attributes",
|
||||
"vendor": "Vendor",
|
||||
"model": "Model",
|
||||
"firmware": "Firmware",
|
||||
"created": "Created",
|
||||
"click_channel": "Click Channel",
|
||||
"udp": "UDP",
|
||||
"tcp_passive": "TCP Passive",
|
||||
"tcp_active": "TCP Active",
|
||||
"client_side": "Preview",
|
||||
"management_side": "Manage",
|
||||
"access_info": "Access Info",
|
||||
"idle": "IDLE",
|
||||
"live": "LIVE",
|
||||
"stop_play_confirm": "Disconnect the stream?",
|
||||
"no_channels": "No Channels",
|
||||
"unnamed_device": "Unnamed Device",
|
||||
"device_id": "Device ID",
|
||||
"total_channels": "Total Channels",
|
||||
"view_more": "View More",
|
||||
"play": "Play",
|
||||
"remark": "Remark",
|
||||
"remark_placeholder": "Give it a simple and memorable name",
|
||||
"app_tooltip": "Custom app name, leave blank defaults to push. Note: cannot use rtp (GB28181 exclusive)",
|
||||
"app_validation_msg": "app cannot be rtp (GB28181 exclusive)",
|
||||
"app_placeholder": "Leave blank defaults to: push",
|
||||
"stream_tooltip": "Custom stream ID, leave blank defaults to channel ID",
|
||||
"stream_placeholder": "Leave blank defaults to: Channel ID",
|
||||
"stream_id": "Stream ID",
|
||||
"pull_status": "Pull Status",
|
||||
"push_status": "Push Status",
|
||||
"media_server": "Media Server",
|
||||
"proxy_method": "Proxy Method",
|
||||
"create_time": "Create Time",
|
||||
"push_time": "Push Time",
|
||||
"stop_time": "Stop Time",
|
||||
"add_channel": "Add Channel",
|
||||
"placeholder_search": "Search by app name/stream ID",
|
||||
"gb_id": "Server ID",
|
||||
"gb_domain": "Server Domain",
|
||||
"port_udp_tcp": "Port (UDP/TCP)",
|
||||
"port_config_tip": "Port must be modified in config file and restart the program",
|
||||
"save_config": "Save",
|
||||
"save_success": "Saved successfully",
|
||||
"stream_url": "Stream URL",
|
||||
"id": "ID",
|
||||
"app": "App Name",
|
||||
"stream": "Stream ID",
|
||||
"source_url": "Pull URL",
|
||||
"timeout_s": "Pull Timeout (s)",
|
||||
"pull_method": "Pull Method",
|
||||
"enabled": "Enable",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable",
|
||||
"device_code": "Device Code",
|
||||
"stream_receive_mode": "Stream Mode",
|
||||
"push_auth": "Push Auth",
|
||||
"push_auth_tip": "Recommended to enable, disabling push auth is unsafe",
|
||||
"media_config": "Media Config",
|
||||
"media_config_desc": "Enter media config and click save",
|
||||
"device_edit": "Device Edit",
|
||||
"device_edit_desc": "Add device manually or auto-register",
|
||||
"push_info": "Push Info",
|
||||
"push_info_desc": "Enter push info and click save",
|
||||
"pull_info": "Pull Info",
|
||||
"pull_info_desc": "Enter pull info and click save",
|
||||
"ip": "IP",
|
||||
"ip_desc": "ZLM address for gowvp access",
|
||||
"gb_receive_address": "GB Receive Address",
|
||||
"hook_ip": "Hook IP",
|
||||
"hook_ip_desc": "gowvp address for zlm callback",
|
||||
"media_type": "Media Type",
|
||||
"media_type_desc": "Select the media service type",
|
||||
"media_type_zlm": "ZLM",
|
||||
"input_media_type": "Please select media type",
|
||||
"api_secret": "API Secret",
|
||||
"api_secret_desc": "API auth for both ZLM and Lalmax",
|
||||
"add_device": "Add Device",
|
||||
"stream_address_copied": "Stream address copied",
|
||||
"device_discover": "Discovery",
|
||||
"device_discovering": "Scanning devices...",
|
||||
"stop_discover": "Stop Scanning",
|
||||
"no_devices_found": "No devices found",
|
||||
"discovery_tip_1": "1. Please get closer to the device",
|
||||
"discovery_tip_2": "2. Ensure the device and platform are on the same LAN",
|
||||
"discovery_tip_3": "3. Docker deployment requires host mode to be on the same LAN as devices",
|
||||
"add_device_success": "Device added successfully",
|
||||
"please_fill_required_fields": "Please fill in all required fields",
|
||||
"found_devices": "Found {{count}} device(s)",
|
||||
"waiting_search": "Waiting to search...",
|
||||
"click_to_add": "Click to add",
|
||||
"rescan": "Rescan",
|
||||
"manual_add": "Manual Add",
|
||||
"device_info_form": "Fill in device information to add to monitoring system",
|
||||
"ip_address": "IP Address",
|
||||
"port": "Port",
|
||||
"device_name": "Device Name",
|
||||
"device_name_placeholder": "Camera Name",
|
||||
"input_ip": "Please enter IP address",
|
||||
"input_port": "Please enter port",
|
||||
"input_username": "Please enter username",
|
||||
"input_password": "Please enter password",
|
||||
"input_required": "This field is required",
|
||||
"subscribe": "Subscribe",
|
||||
"recent_heartbeat": "Recent Heartbeat",
|
||||
"recent_register": "Recent Register",
|
||||
"search_device_placeholder": "Search by device ID/name/ID",
|
||||
"channel": "Channel",
|
||||
"input_device_code": "Please enter device code",
|
||||
"input_device_name": "Please enter device name",
|
||||
"input_password_placeholder": "Please enter password",
|
||||
"device_code_length": "Device code should be 18-20 characters",
|
||||
"input_app_name": "Please enter app name",
|
||||
"input_stream_id": "Please enter stream ID",
|
||||
"app_name_length": "App name should be 2-20 characters",
|
||||
"stream_id_length": "Stream ID should be 2-20 characters",
|
||||
"source_url_min_length": "Source URL must be at least 10 characters",
|
||||
"timeout_range": "Timeout should be 1-100 seconds",
|
||||
"input_timeout": "Please enter timeout",
|
||||
"input_ip_placeholder": "Please enter IP address",
|
||||
"input_gb_address": "Please enter GB receive address",
|
||||
"input_hook_ip": "Please enter Hook IP",
|
||||
"input_api_secret": "Please enter API secret",
|
||||
"ip_length": "IP address should be 2-20 characters",
|
||||
"address_length": "Address should be 2-20 characters",
|
||||
"secret_length": "Secret should be 2-50 characters",
|
||||
"gb_id_length": "GB ID should be 18-20 characters",
|
||||
"input_gb_id": "Please enter GB ID",
|
||||
"input_gb_domain": "Please enter GB domain",
|
||||
"port_range": "Port should be 1-65535",
|
||||
"server_ip": "Server IP",
|
||||
"server_ip_tip": "Address announced to devices, supports domain or IP. Auto-detect when empty",
|
||||
"input_server_ip": "Enter server IP or domain",
|
||||
"no_channels_check_config": "Please check if the <strong>SIP Server ID</strong> and <strong>Server Domain</strong> filled in the camera are consistent with the platform",
|
||||
"detection": "Detection",
|
||||
"zone_settings": "Zone Settings",
|
||||
"developing": "In Development",
|
||||
"edit_zone": "Edit Zone",
|
||||
"zone_edit_desc": "Define specific zones to determine if objects are within that area.",
|
||||
"points": "points",
|
||||
"zone_click_tip": "Click on the image to add points and draw a polygon zone.",
|
||||
"zone_name": "Zone Name",
|
||||
"zone_name_placeholder": "Enter zone name",
|
||||
"zone_name_tip": "Name must be at least 2 characters and cannot duplicate camera or other zone names. Only alphanumeric characters are supported.",
|
||||
"zone_not_closed": "Zone is not closed. Click the first point to complete.",
|
||||
"zone_name_required": "Please enter a zone name with at least 2 characters",
|
||||
"zone_select_tip": "Click on the image to start drawing a new zone, or select a zone from the list to edit.",
|
||||
"add_zone": "Add Zone",
|
||||
"zones": "Zones",
|
||||
"drawing": "Drawing",
|
||||
"no_zones": "No zones",
|
||||
"loading_snapshot": "Loading snapshot...",
|
||||
"refresh_snapshot": "Refresh Snapshot",
|
||||
"no_address": "No address",
|
||||
"no_image_available": "No image available. You can still draw zones here.",
|
||||
"reset_points": "Reset Points",
|
||||
"zone_edit_drag_tip": "Drag vertices to adjust the zone shape.",
|
||||
"closed": "Closed",
|
||||
"labels": "Labels",
|
||||
"label_person": "Person",
|
||||
"label_car": "Car",
|
||||
"label_cat": "Cat",
|
||||
"label_dog": "Dog",
|
||||
"alert_label": "Label",
|
||||
"alert_channel": "Channel",
|
||||
"alert_time": "Time",
|
||||
"alert_confidence": "Confidence",
|
||||
"alert_device": "Device",
|
||||
"alert_model": "Model",
|
||||
"alert_filter_channel": "Filter Channel",
|
||||
"alert_filter_label": "Filter Type",
|
||||
"alert_filter_time": "Time Range",
|
||||
"all_labels": "All Types",
|
||||
"alert_no_events": "No alert events",
|
||||
"alert_prev": "Previous",
|
||||
"alert_next": "Next",
|
||||
"alert_started_at": "Started At",
|
||||
"alert_ended_at": "Ended At",
|
||||
"all_channels": "All Channels",
|
||||
"today": "Today",
|
||||
"yesterday": "Yesterday",
|
||||
"last_7_days": "Last 7 Days",
|
||||
"last_30_days": "Last 30 Days",
|
||||
"ai_enabled": "AI Detection Enabled",
|
||||
"ai_disabled": "AI Detection Disabled",
|
||||
"click_to_enable_ai": "Click to enable AI detection",
|
||||
"click_to_disable_ai": "Click to disable AI detection",
|
||||
"preview": "Preview",
|
||||
"recordings": "Recordings",
|
||||
"management": "Management",
|
||||
"recording_playback": "Recording Playback",
|
||||
"select_channel": "Select Channel",
|
||||
"select_date": "Select Date",
|
||||
"calendar_view": "Calendar View",
|
||||
"timeline": "Timeline",
|
||||
"no_recordings": "No Recordings",
|
||||
"no_recordings_for_date": "No recordings available for this date",
|
||||
"has_recording": "Has Recording",
|
||||
"has_event": "Has Event",
|
||||
"no_recording": "No Recording",
|
||||
"download": "Download",
|
||||
"playback_speed": "Playback Speed",
|
||||
"jump_to_event": "Jump to Event",
|
||||
"event_cards": "Event Cards",
|
||||
"recording_duration": "Duration",
|
||||
"file_size": "File Size",
|
||||
"recording_start": "Start Time",
|
||||
"recording_end": "End Time",
|
||||
"speed": "Speed",
|
||||
"back_5s": "Back 5s",
|
||||
"forward_5s": "Forward 5s",
|
||||
"segments": "segments",
|
||||
"mute": "Mute",
|
||||
"unmute": "Unmute",
|
||||
"all_day": "All Day",
|
||||
"morning": "Morning",
|
||||
"afternoon": "Afternoon",
|
||||
"evening": "Evening",
|
||||
"ai_analysis": "AI Analysis",
|
||||
"record_mode": "Record Mode",
|
||||
"record_mode_always": "Always Record",
|
||||
"record_mode_ai": "AI Record",
|
||||
"record_mode_none": "No Record",
|
||||
"record_mode_set_success": "Recording mode set successfully",
|
||||
"record_short_ai": "AI",
|
||||
"record_short_always": "All",
|
||||
"record_short_none": "Off",
|
||||
"action": "Action",
|
||||
"tour_dataflow_title": "Dataflow",
|
||||
"tour_dataflow_desc": "Preview data flow in the system, understand connections between devices, media servers and clients",
|
||||
"tour_floor_plan_title": "2D Floor Plan",
|
||||
"tour_floor_plan_desc": "Draw floor plans to quickly identify camera positions",
|
||||
"tour_gb28181_desc": "View camera info and manage GB/T28181 protocol devices",
|
||||
"tour_zlm_settings_title": "Media Config",
|
||||
"tour_zlm_settings_desc": "Black screen or playback issues? The problem might be here! Click to modify media server parameters",
|
||||
"tour_fab_menu_title": "Quick Menu",
|
||||
"tour_fab_menu_desc": "Click the avatar to open a menu for quick navigation to various modules",
|
||||
"tour_language_title": "Language Switch",
|
||||
"tour_language_desc": "Click to switch between Chinese and English interface",
|
||||
"tour_skip": "Skip",
|
||||
"tour_next": "Next",
|
||||
"tour_start_exploring": "Start Exploring"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user