Initial project setup with Next.js accounts manager
- Set up Next.js project structure - Added UI components and styling - Configured package dependencies - Added feature documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Your Name
10
.claude/settings.local.json
Normal file
10
.claude/settings.local.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(pnpm dlx:*)",
|
||||||
|
"Bash(pnpm dev:*)",
|
||||||
|
"Bash(mkdir:*)"
|
||||||
|
],
|
||||||
|
"deny": []
|
||||||
|
}
|
||||||
|
}
|
||||||
120
FEATURES.md
Normal file
120
FEATURES.md
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
# 账户管理系统 - 更新说明
|
||||||
|
|
||||||
|
## 🚀 新增功能
|
||||||
|
|
||||||
|
### 1. 账户上传功能 📤
|
||||||
|
|
||||||
|
#### ---- 分割格式（推荐）
|
||||||
|
```
|
||||||
|
user1@gmail.com----password123----cookie=abc123----token=xyz789
|
||||||
|
user2@gmail.com----{"password":"456789","token":"fb_token"}
|
||||||
|
user3@twitter.com----oauth_token----oauth_secret----user_data
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 默认格式（一行一个）
|
||||||
|
```
|
||||||
|
user1@gmail.com
|
||||||
|
user2@facebook.com
|
||||||
|
simple_username
|
||||||
|
my_account_id
|
||||||
|
```
|
||||||
|
|
||||||
|
**格式说明：**
|
||||||
|
- **---- 分割格式**: `customId----纯数据内容`
|
||||||
|
- customId: 唯一标识符（第一个----之前）
|
||||||
|
- 数据内容: 后面所有内容都作为纯数据（可包含多个----）
|
||||||
|
- **默认格式**: 整行既作为customId也作为data
|
||||||
|
- **平台和状态**: 在界面上方外部设置，应用到所有上传的账户
|
||||||
|
|
||||||
|
**特点：**
|
||||||
|
- 支持 `----` 分割格式：只在第一个 `----` 处分割，后面的所有内容都作为数据
|
||||||
|
- 支持默认格式：一行一个ID，整行既作为customId也作为data
|
||||||
|
- 第一个字段为唯一ID（customId）
|
||||||
|
- 数据部分可以包含任意格式和多个 `----` 分隔符
|
||||||
|
- 平台和状态统一在外部设置
|
||||||
|
|
||||||
|
#### 其他支持格式
|
||||||
|
- **制表符分隔**：`platform customId data status`
|
||||||
|
- **逗号分隔**：`platform,customId,data,status`
|
||||||
|
- **JSON格式**：`{"platform":"google","customId":"user@gmail.com","data":"..."}`
|
||||||
|
|
||||||
|
### 2. 智能数据源集成 🧠
|
||||||
|
|
||||||
|
- **所有者ID**：从后端数据自动获取现有所有者列表，支持下拉选择或手动输入
|
||||||
|
- **平台选择**：从后端数据自动获取现有平台列表，支持下拉选择或手动输入 ✨
|
||||||
|
- **状态选择**：从后端数据自动获取现有状态类型，支持下拉选择或手动输入
|
||||||
|
- **外部统一设置**：平台和状态在界面外部统一设置，应用到所有账户 ✨
|
||||||
|
- **灵活输入**：所有选择器都支持手动输入自定义值
|
||||||
|
|
||||||
|
### 3. 界面优化 ✨
|
||||||
|
|
||||||
|
- **三列布局**：所有者ID、平台、状态并排显示
|
||||||
|
- **响应式布局**：修复超出背景框问题，使用更大的对话框
|
||||||
|
- **滚动支持**：内容区域支持滚动，避免内容被截断
|
||||||
|
- **纯数据输入**：输入框内只需要填写纯粹的账户数据
|
||||||
|
|
||||||
|
### 4. 组件架构 🏗️
|
||||||
|
|
||||||
|
```
|
||||||
|
components/accounts/
|
||||||
|
├── stats-cards.tsx # 统计卡片
|
||||||
|
├── account-filters.tsx # 筛选器
|
||||||
|
├── batch-operations.tsx # 批量操作
|
||||||
|
├── account-upload.tsx # 账户上传 ✨
|
||||||
|
├── account-table.tsx # 账户表格
|
||||||
|
├── account-details.tsx # 账户详情/编辑
|
||||||
|
└── index.ts # 导出文件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 使用方法
|
||||||
|
|
||||||
|
### 上传账户
|
||||||
|
1. 点击页面右上角的"上传账户"按钮
|
||||||
|
2. 选择或输入所有者ID
|
||||||
|
3. 设置平台（应用到所有账户）
|
||||||
|
4. 设置默认状态（应用到所有账户）
|
||||||
|
5. 选择上传方式：
|
||||||
|
- **批量上传**：粘贴格式化的账户数据
|
||||||
|
- **单个添加**：手动填写单个账户信息
|
||||||
|
|
||||||
|
### ---- 分割格式示例
|
||||||
|
```
|
||||||
|
john@gmail.com----password123----cookie_data----session_token
|
||||||
|
jane.doe@facebook.com----{"token":"fb_token_12345","user_id":"987654321","refresh_token":"refresh123"}
|
||||||
|
@twitter_user----oauth_token_value----oauth_secret_value----additional_data----more_info
|
||||||
|
simple@example.com----plaintext_password_data
|
||||||
|
complex@example.com----key1=value1----key2=value2----key3=value3----extra_field=data
|
||||||
|
```
|
||||||
|
|
||||||
|
### 默认格式示例
|
||||||
|
```
|
||||||
|
john@gmail.com
|
||||||
|
jane.doe@facebook.com
|
||||||
|
@twitter_user
|
||||||
|
simple@example.com
|
||||||
|
my_username_123
|
||||||
|
account_id_456
|
||||||
|
```
|
||||||
|
|
||||||
|
**解析规则：**
|
||||||
|
- **---- 分割格式**：只在第一个 `----` 处分割
|
||||||
|
- 第一部分：唯一ID
|
||||||
|
- 第二部分：所有剩余内容作为纯数据（保持原格式）
|
||||||
|
- **默认格式**：整行作为唯一ID，同时也作为data
|
||||||
|
- 平台和状态从外部设置应用
|
||||||
|
|
||||||
|
## 🔧 技术特性
|
||||||
|
|
||||||
|
- **类型安全**：完整的TypeScript类型定义
|
||||||
|
- **组件分离**：每个功能独立组件，易于维护
|
||||||
|
- **状态管理**：使用自定义Hook管理状态
|
||||||
|
- **数据验证**：完善的数据格式验证和错误处理
|
||||||
|
- **用户体验**：加载状态、错误提示、确认对话框
|
||||||
|
|
||||||
|
## 📱 界面特色
|
||||||
|
|
||||||
|
- **简洁大气**：使用shadcn/ui组件库，现代化设计
|
||||||
|
- **单页面操作**：所有功能集中在一个页面，无需跳转
|
||||||
|
- **批量操作**：支持批量选择、删除、更新
|
||||||
|
- **智能筛选**：多维度筛选条件
|
||||||
|
- **详细信息**：完整的账户详情查看和编辑功能
|
||||||
124
app/globals.css
124
app/globals.css
@@ -1,26 +1,122 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
:root {
|
@custom-variant dark (&:is(.dark *));
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
:root {
|
||||||
:root {
|
--radius: 0.625rem;
|
||||||
--background: #0a0a0a;
|
--background: oklch(1 0 0);
|
||||||
--foreground: #ededed;
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.205 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.205 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.922 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.556 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@@ -28,6 +29,7 @@ export default function RootLayout({
|
|||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
<Toaster />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
102
app/page.tsx
102
app/page.tsx
@@ -1,103 +1,11 @@
|
|||||||
import Image from "next/image";
|
"use client";
|
||||||
|
|
||||||
|
import { AccountsManager } from "@/components/accounts-manager";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
<div className="min-h-screen bg-background">
|
||||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
<AccountsManager />
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
|
||||||
width={180}
|
|
||||||
height={38}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
|
||||||
<li className="mb-2 tracking-[-.01em]">
|
|
||||||
Get started by editing{" "}
|
|
||||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
|
||||||
app/page.tsx
|
|
||||||
</code>
|
|
||||||
.
|
|
||||||
</li>
|
|
||||||
<li className="tracking-[-.01em]">
|
|
||||||
Save and see your changes instantly.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
Deploy now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
|
||||||
alt="File icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Go to nextjs.org →
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
22
components.json
Normal file
22
components.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
181
components/accounts-manager.tsx
Normal file
181
components/accounts-manager.tsx
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Account } from '@/lib/types';
|
||||||
|
import { useAccounts } from '@/lib/hooks/use-accounts';
|
||||||
|
|
||||||
|
// 组件导入
|
||||||
|
import { StatsCards } from './accounts/stats-cards';
|
||||||
|
import { AccountFilters } from './accounts/account-filters';
|
||||||
|
import { BatchOperations } from './accounts/batch-operations';
|
||||||
|
import { AccountUpload } from './accounts/account-upload';
|
||||||
|
import { AccountTable } from './accounts/account-table';
|
||||||
|
import { AccountDetails } from './accounts/account-details';
|
||||||
|
|
||||||
|
export function AccountsManager() {
|
||||||
|
const {
|
||||||
|
accounts,
|
||||||
|
stats,
|
||||||
|
loading,
|
||||||
|
selectedIds,
|
||||||
|
pagination,
|
||||||
|
filters,
|
||||||
|
fetchAccounts,
|
||||||
|
fetchStats,
|
||||||
|
handleFilterChange,
|
||||||
|
handlePageChange,
|
||||||
|
handlePageSizeChange,
|
||||||
|
handleSelectAll,
|
||||||
|
handleSelectOne,
|
||||||
|
handleBatchDelete,
|
||||||
|
handleBatchUpdate,
|
||||||
|
handleUploadAccounts,
|
||||||
|
setSelectedIds
|
||||||
|
} = useAccounts();
|
||||||
|
|
||||||
|
// 账户详情状态
|
||||||
|
const [detailsDialog, setDetailsDialog] = useState(false);
|
||||||
|
const [detailsMode, setDetailsMode] = useState<'view' | 'edit'>('view');
|
||||||
|
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||||
|
|
||||||
|
// 处理查看详情
|
||||||
|
const handleViewAccount = (account: Account) => {
|
||||||
|
setSelectedAccount(account);
|
||||||
|
setDetailsMode('view');
|
||||||
|
setDetailsDialog(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理编辑账户
|
||||||
|
const handleEditAccount = (account: Account) => {
|
||||||
|
setSelectedAccount(account);
|
||||||
|
setDetailsMode('edit');
|
||||||
|
setDetailsDialog(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理删除单个账户
|
||||||
|
const handleDeleteAccount = async (account: Account) => {
|
||||||
|
if (!confirm('确认删除此账户？')) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 设置选中的账户ID
|
||||||
|
setSelectedIds([account.id]);
|
||||||
|
// 执行删除
|
||||||
|
await handleBatchDelete();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete account:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理保存编辑
|
||||||
|
const handleSaveAccount = async (account: Account) => {
|
||||||
|
try {
|
||||||
|
console.log('开始保存账户:', account);
|
||||||
|
|
||||||
|
// 构建payload，将null/undefined转换为空字符串
|
||||||
|
const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
|
||||||
|
|
||||||
|
if (account.status !== null && account.status !== undefined) {
|
||||||
|
payload.status = account.status;
|
||||||
|
}
|
||||||
|
if (account.ownerId !== null && account.ownerId !== undefined) {
|
||||||
|
payload.ownerId = account.ownerId;
|
||||||
|
}
|
||||||
|
if (account.notes !== null && account.notes !== undefined) {
|
||||||
|
payload.notes = account.notes || ''; // 将null转换为空字符串
|
||||||
|
}
|
||||||
|
if (account.platform !== null && account.platform !== undefined) {
|
||||||
|
payload.platform = account.platform;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('更新payload:', payload);
|
||||||
|
console.log('账户ID:', account.id);
|
||||||
|
|
||||||
|
if (Object.keys(payload).length === 0) {
|
||||||
|
console.log('没有有效的字段需要更新');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 直接传递账户ID数组，避免状态竞态条件
|
||||||
|
await handleBatchUpdate(payload, [account.id]);
|
||||||
|
|
||||||
|
console.log('账户保存完成');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save account:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="container mx-auto p-6 flex flex-col">
|
||||||
|
{/* 页面标题 */}
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">账户管理系统</h1>
|
||||||
|
<p className="text-muted-foreground">轻量化账户管理平台</p>
|
||||||
|
</div>
|
||||||
|
<AccountUpload onUpload={handleUploadAccounts} stats={stats} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 统计卡片 */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<StatsCards stats={stats} loading={loading} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 账户管理区域 */}
|
||||||
|
<Card className="flex flex-col">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<CardTitle>账户列表</CardTitle>
|
||||||
|
<CardDescription>管理和查看所有账户信息</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col space-y-4">
|
||||||
|
{/* 筛选条件 */}
|
||||||
|
<AccountFilters
|
||||||
|
filters={filters}
|
||||||
|
stats={stats}
|
||||||
|
onFilterChange={handleFilterChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 批量操作 */}
|
||||||
|
<BatchOperations
|
||||||
|
selectedCount={selectedIds.length}
|
||||||
|
selectedAccounts={accounts.filter(account => selectedIds.includes(account.id))}
|
||||||
|
stats={stats}
|
||||||
|
onBatchUpdate={handleBatchUpdate}
|
||||||
|
onBatchDelete={handleBatchDelete}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 账户表格 - 移除高度限制 */}
|
||||||
|
<div className="">
|
||||||
|
<AccountTable
|
||||||
|
accounts={accounts}
|
||||||
|
loading={loading}
|
||||||
|
selectedIds={selectedIds}
|
||||||
|
pagination={pagination}
|
||||||
|
onSelectAll={handleSelectAll}
|
||||||
|
onSelectOne={handleSelectOne}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
onPageSizeChange={handlePageSizeChange}
|
||||||
|
onRefresh={fetchAccounts}
|
||||||
|
onView={handleViewAccount}
|
||||||
|
onEdit={handleEditAccount}
|
||||||
|
onDelete={handleDeleteAccount}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 账户详情对话框 */}
|
||||||
|
<AccountDetails
|
||||||
|
account={selectedAccount}
|
||||||
|
open={detailsDialog}
|
||||||
|
mode={detailsMode}
|
||||||
|
stats={stats}
|
||||||
|
onOpenChange={setDetailsDialog}
|
||||||
|
onSave={handleSaveAccount}
|
||||||
|
onDelete={handleDeleteAccount}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
246
components/accounts/account-details.tsx
Normal file
246
components/accounts/account-details.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Account, StatsOverview } from '@/lib/types';
|
||||||
|
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||||
|
|
||||||
|
interface AccountDetailsProps {
|
||||||
|
account: Account | null;
|
||||||
|
open: boolean;
|
||||||
|
mode: 'view' | 'edit';
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onSave?: (account: Account) => Promise<void>;
|
||||||
|
onDelete?: (account: Account) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AccountDetails({
|
||||||
|
account,
|
||||||
|
open,
|
||||||
|
mode,
|
||||||
|
stats,
|
||||||
|
onOpenChange,
|
||||||
|
onSave,
|
||||||
|
onDelete
|
||||||
|
}: AccountDetailsProps) {
|
||||||
|
const [editData, setEditData] = useState<Partial<Account>>({});
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const isEditing = mode === 'edit';
|
||||||
|
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!account || !onSave) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const updatedAccount = { ...account, ...editData };
|
||||||
|
await onSave(updatedAccount);
|
||||||
|
onOpenChange(false);
|
||||||
|
setEditData({});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!account || !onDelete) return;
|
||||||
|
|
||||||
|
if (!confirm('确认删除此账户？')) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await onDelete(account);
|
||||||
|
onOpenChange(false);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'available':
|
||||||
|
return <Badge variant="default" className="bg-green-500">可用</Badge>;
|
||||||
|
case 'locked':
|
||||||
|
return <Badge variant="secondary">已锁定</Badge>;
|
||||||
|
case 'banned':
|
||||||
|
return <Badge variant="destructive">已封禁</Badge>;
|
||||||
|
default:
|
||||||
|
return <Badge variant="outline">{status}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatData = (data: string) => {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(data);
|
||||||
|
return JSON.stringify(parsed, null, 2);
|
||||||
|
} catch {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!account) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{isEditing ? '编辑账户' : '账户详情'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
账户ID: {account.id}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">平台</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<PlatformSelector
|
||||||
|
value={editData.platform ?? account.platform}
|
||||||
|
onValueChange={(value) => setEditData({...editData, platform: value})}
|
||||||
|
stats={stats}
|
||||||
|
placeholder="选择平台"
|
||||||
|
inputPlaceholder="或直接输入平台名称"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2 bg-muted rounded">{account.platform}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">自定义ID</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<Input
|
||||||
|
value={editData.customId ?? account.customId}
|
||||||
|
onChange={(e) => setEditData({...editData, customId: e.target.value})}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2 bg-muted rounded font-mono">{account.customId}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">所有者ID</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<OwnerSelector
|
||||||
|
value={editData.ownerId ?? account.ownerId}
|
||||||
|
onValueChange={(value) => setEditData({...editData, ownerId: value})}
|
||||||
|
stats={stats}
|
||||||
|
placeholder="选择所有者"
|
||||||
|
inputPlaceholder="或直接输入所有者ID"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2 bg-muted rounded">{account.ownerId}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">状态</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<StatusSelector
|
||||||
|
value={editData.status ?? account.status}
|
||||||
|
onValueChange={(value) => setEditData({...editData, status: value})}
|
||||||
|
stats={stats}
|
||||||
|
placeholder="选择状态"
|
||||||
|
inputPlaceholder="或直接输入状态"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2">{getStatusBadge(account.status)}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">账户数据</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<Textarea
|
||||||
|
value={editData.data ?? account.data}
|
||||||
|
onChange={(e) => setEditData({...editData, data: e.target.value})}
|
||||||
|
className="min-h-[120px] font-mono text-sm"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<pre className="p-3 bg-muted rounded text-sm font-mono whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto">
|
||||||
|
{formatData(account.data)}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">备注</label>
|
||||||
|
{isEditing ? (
|
||||||
|
<Textarea
|
||||||
|
value={editData.notes ?? account.notes ?? ''}
|
||||||
|
onChange={(e) => setEditData({...editData, notes: e.target.value})}
|
||||||
|
placeholder="输入备注..."
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2 bg-muted rounded min-h-[40px]">
|
||||||
|
{account.notes || '无备注'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isEditing && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-muted-foreground">
|
||||||
|
<div>
|
||||||
|
<label className="font-medium">创建时间</label>
|
||||||
|
<div>{new Date(account.createdAt).toLocaleString('zh-CN')}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="font-medium">更新时间</label>
|
||||||
|
<div>{new Date(account.updatedAt).toLocaleString('zh-CN')}</div>
|
||||||
|
</div>
|
||||||
|
{account.lockedAt && (
|
||||||
|
<div className="col-span-full md:col-span-2">
|
||||||
|
<label className="font-medium">锁定时间</label>
|
||||||
|
<div>{new Date(account.lockedAt).toLocaleString('zh-CN')}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{isEditing ? '取消' : '关闭'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isEditing ? (
|
||||||
|
<Button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? '保存中...' : '保存'}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="space-x-2">
|
||||||
|
{onDelete && (
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDelete}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? '删除中...' : '删除'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
78
components/accounts/account-filters.tsx
Normal file
78
components/accounts/account-filters.tsx
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Search } from 'lucide-react';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
|
||||||
|
interface AccountFiltersProps {
|
||||||
|
filters: {
|
||||||
|
platform: string;
|
||||||
|
status: string[];
|
||||||
|
ownerId: string;
|
||||||
|
search: string;
|
||||||
|
};
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
onFilterChange: (key: string, value: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AccountFilters({ filters, stats, onFilterChange }: AccountFiltersProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Search className="h-4 w-4" />
|
||||||
|
<Input
|
||||||
|
placeholder="搜索账户..."
|
||||||
|
value={filters.search}
|
||||||
|
onChange={(e) => onFilterChange('search', e.target.value)}
|
||||||
|
className="w-[200px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.platform || 'all'}
|
||||||
|
onValueChange={(value) => onFilterChange('platform', value === 'all' ? '' : value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="选择平台" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">所有平台</SelectItem>
|
||||||
|
{stats && Object.keys(stats.platformSummary).map(platform => (
|
||||||
|
<SelectItem key={platform} value={platform}>{platform}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.ownerId || 'all'}
|
||||||
|
onValueChange={(value) => onFilterChange('ownerId', value === 'all' ? '' : value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="选择所有者" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">所有所有者</SelectItem>
|
||||||
|
{stats && Object.keys(stats.ownerSummary).map(owner => (
|
||||||
|
<SelectItem key={owner} value={owner}>{owner}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={filters.status.length > 0 ? filters.status[0] : 'all'}
|
||||||
|
onValueChange={(value) => onFilterChange('status', value === 'all' ? [] : [value])}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="选择状态" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">所有状态</SelectItem>
|
||||||
|
<SelectItem value="available">可用</SelectItem>
|
||||||
|
<SelectItem value="locked">已锁定</SelectItem>
|
||||||
|
<SelectItem value="banned">已封禁</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
241
components/accounts/account-table.tsx
Normal file
241
components/accounts/account-table.tsx
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { ChevronLeft, ChevronRight, Eye, Edit, Trash2, RefreshCw } from 'lucide-react';
|
||||||
|
import { Account } from '@/lib/types';
|
||||||
|
|
||||||
|
interface AccountTableProps {
|
||||||
|
accounts: Account[];
|
||||||
|
loading: boolean;
|
||||||
|
selectedIds: number[];
|
||||||
|
pagination: {
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
total: number;
|
||||||
|
totalPages: number;
|
||||||
|
};
|
||||||
|
onSelectAll: (checked: boolean) => void;
|
||||||
|
onSelectOne: (id: number, checked: boolean) => void;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
onPageSizeChange: (pageSize: number) => void;
|
||||||
|
onRefresh: () => void;
|
||||||
|
onView?: (account: Account) => void;
|
||||||
|
onEdit?: (account: Account) => void;
|
||||||
|
onDelete?: (account: Account) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AccountTable({
|
||||||
|
accounts,
|
||||||
|
loading,
|
||||||
|
selectedIds,
|
||||||
|
pagination,
|
||||||
|
onSelectAll,
|
||||||
|
onSelectOne,
|
||||||
|
onPageChange,
|
||||||
|
onPageSizeChange,
|
||||||
|
onRefresh,
|
||||||
|
onView,
|
||||||
|
onEdit,
|
||||||
|
onDelete
|
||||||
|
}: AccountTableProps) {
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'available':
|
||||||
|
return <Badge variant="default" className="bg-green-500">可用</Badge>;
|
||||||
|
case 'locked':
|
||||||
|
return <Badge variant="secondary">已锁定</Badge>;
|
||||||
|
case 'banned':
|
||||||
|
return <Badge variant="destructive">已封禁</Badge>;
|
||||||
|
default:
|
||||||
|
return <Badge variant="outline">{status}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderPagination = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
显示 {(pagination.page - 1) * pagination.pageSize + 1} - {Math.min(pagination.page * pagination.pageSize, pagination.total)} 共 {pagination.total} 条
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-sm text-muted-foreground">每页显示</span>
|
||||||
|
<Select value={pagination.pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
|
||||||
|
<SelectTrigger className="w-26">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="20">20</SelectItem>
|
||||||
|
<SelectItem value="100">100</SelectItem>
|
||||||
|
<SelectItem value="1000">1000</SelectItem>
|
||||||
|
<SelectItem value="100000">100000</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<span className="text-sm text-muted-foreground">条</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{pagination.totalPages > 1 && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onPageChange(pagination.page - 1)}
|
||||||
|
disabled={pagination.page <= 1}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
上一页
|
||||||
|
</Button>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
{Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
|
||||||
|
let pageNum;
|
||||||
|
if (pagination.totalPages <= 5) {
|
||||||
|
pageNum = i + 1;
|
||||||
|
} else if (pagination.page <= 3) {
|
||||||
|
pageNum = i + 1;
|
||||||
|
} else if (pagination.page >= pagination.totalPages - 2) {
|
||||||
|
pageNum = pagination.totalPages - 4 + i;
|
||||||
|
} else {
|
||||||
|
pageNum = pagination.page - 2 + i;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={pageNum}
|
||||||
|
variant={pageNum === pagination.page ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onPageChange(pageNum)}
|
||||||
|
>
|
||||||
|
{pageNum}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onPageChange(pagination.page + 1)}
|
||||||
|
disabled={pagination.page >= pagination.totalPages}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* 分页器 - 移到顶部 */}
|
||||||
|
{renderPagination()}
|
||||||
|
|
||||||
|
{/* 表格区域 - 直接使用原生table确保sticky正常工作 */}
|
||||||
|
<div className="border rounded-lg max-h-[600px] overflow-auto">
|
||||||
|
<table className="w-full caption-bottom text-sm">
|
||||||
|
<thead className="sticky top-0 bg-background z-20 border-b shadow-sm">
|
||||||
|
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-12">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.length === accounts.length && accounts.length > 0}
|
||||||
|
onCheckedChange={onSelectAll}
|
||||||
|
/>
|
||||||
|
</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">ID</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">平台</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">自定义ID</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">所有者</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">状态</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">备注</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">创建时间</th>
|
||||||
|
<th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-[120px]">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span>操作</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onRefresh}
|
||||||
|
disabled={loading}
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
>
|
||||||
|
<RefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading ? (
|
||||||
|
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||||
|
<td colSpan={9} className="p-2 align-middle text-center py-8">
|
||||||
|
加载中...
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : accounts.length === 0 ? (
|
||||||
|
<tr className="hover:bg-muted/50 border-b transition-colors">
|
||||||
|
<td colSpan={9} className="p-2 align-middle text-center py-8">
|
||||||
|
暂无数据
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
accounts.map((account) => (
|
||||||
|
<tr key={account.id} className="hover:bg-muted/50 border-b transition-colors">
|
||||||
|
<td className="p-2 align-middle w-12">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedIds.includes(account.id)}
|
||||||
|
onCheckedChange={(checked) => onSelectOne(account.id, checked as boolean)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="p-2 align-middle font-mono">{account.id}</td>
|
||||||
|
<td className="p-2 align-middle">{account.platform}</td>
|
||||||
|
<td className="p-2 align-middle font-mono max-w-[150px] truncate">{account.customId}</td>
|
||||||
|
<td className="p-2 align-middle">{account.ownerId}</td>
|
||||||
|
<td className="p-2 align-middle">{getStatusBadge(account.status)}</td>
|
||||||
|
<td className="p-2 align-middle max-w-[200px] truncate">{account.notes || '-'}</td>
|
||||||
|
<td className="p-2 align-middle text-sm text-muted-foreground">
|
||||||
|
{new Date(account.createdAt).toLocaleDateString('zh-CN')}
|
||||||
|
</td>
|
||||||
|
<td className="p-2 align-middle w-[120px]">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
{onView && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onView(account)}
|
||||||
|
>
|
||||||
|
<Eye className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{onEdit && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onEdit(account)}
|
||||||
|
>
|
||||||
|
<Edit className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{onDelete && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onDelete(account)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
299
components/accounts/account-upload.tsx
Normal file
299
components/accounts/account-upload.tsx
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Upload, Plus, FileText } from 'lucide-react';
|
||||||
|
import { ScriptUploadItem, StatsOverview } from '@/lib/types';
|
||||||
|
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||||
|
|
||||||
|
interface AccountUploadProps {
|
||||||
|
onUpload: (accounts: ScriptUploadItem[], ownerId: string) => Promise<void>;
|
||||||
|
stats?: StatsOverview | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AccountUpload({ onUpload, stats }: AccountUploadProps) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [ownerId, setOwnerId] = useState('');
|
||||||
|
|
||||||
|
// 文本上传
|
||||||
|
const [textData, setTextData] = useState('');
|
||||||
|
const [defaultStatus, setDefaultStatus] = useState('available');
|
||||||
|
const [defaultPlatform, setDefaultPlatform] = useState('');
|
||||||
|
|
||||||
|
// 单个添加
|
||||||
|
const [singleAccount, setSingleAccount] = useState({
|
||||||
|
customId: '',
|
||||||
|
data: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const parseTextData = (text: string): ScriptUploadItem[] => {
|
||||||
|
const lines = text.trim().split('\n').filter(line => line.trim());
|
||||||
|
const accounts: ScriptUploadItem[] = [];
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
try {
|
||||||
|
// 支持多种格式
|
||||||
|
if (line.includes('----')) {
|
||||||
|
// ---- 分隔格式：customId----data（data中可能包含更多的----）
|
||||||
|
const firstSeparatorIndex = line.indexOf('----');
|
||||||
|
if (firstSeparatorIndex > 0) {
|
||||||
|
const customId = line.substring(0, firstSeparatorIndex).trim();
|
||||||
|
const data = line.substring(firstSeparatorIndex + 4).trim(); // 跳过第一个----
|
||||||
|
|
||||||
|
accounts.push({
|
||||||
|
platform: defaultPlatform,
|
||||||
|
customId,
|
||||||
|
data,
|
||||||
|
status: defaultStatus
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (line.includes('\t')) {
|
||||||
|
// 制表符分隔：platform\tcustomId\tdata\tstatus
|
||||||
|
const parts = line.split('\t');
|
||||||
|
if (parts.length >= 3) {
|
||||||
|
accounts.push({
|
||||||
|
platform: parts[0].trim(),
|
||||||
|
customId: parts[1].trim(),
|
||||||
|
data: parts[2].trim(),
|
||||||
|
status: parts[3]?.trim() || defaultStatus
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (line.includes(',')) {
|
||||||
|
// 逗号分隔：platform,customId,data,status
|
||||||
|
const parts = line.split(',');
|
||||||
|
if (parts.length >= 3) {
|
||||||
|
accounts.push({
|
||||||
|
platform: parts[0].trim(),
|
||||||
|
customId: parts[1].trim(),
|
||||||
|
data: parts[2].trim(),
|
||||||
|
status: parts[3]?.trim() || defaultStatus
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (line.startsWith('{') && line.endsWith('}')) {
|
||||||
|
// JSON格式
|
||||||
|
const parsed = JSON.parse(line);
|
||||||
|
if (parsed.platform && parsed.customId && parsed.data) {
|
||||||
|
accounts.push({
|
||||||
|
platform: parsed.platform,
|
||||||
|
customId: parsed.customId,
|
||||||
|
data: typeof parsed.data === 'string' ? parsed.data : JSON.stringify(parsed.data),
|
||||||
|
status: parsed.status || defaultStatus
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 默认格式：整行作为ID和data
|
||||||
|
const trimmedLine = line.trim();
|
||||||
|
if (trimmedLine) {
|
||||||
|
accounts.push({
|
||||||
|
platform: defaultPlatform,
|
||||||
|
customId: trimmedLine,
|
||||||
|
data: trimmedLine,
|
||||||
|
status: defaultStatus
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to parse line:', line, error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return accounts;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTextUpload = async () => {
|
||||||
|
if (!ownerId.trim()) {
|
||||||
|
alert('请输入所有者ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!textData.trim()) {
|
||||||
|
alert('请输入账户数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const accounts = parseTextData(textData);
|
||||||
|
if (accounts.length === 0) {
|
||||||
|
alert('未解析到有效的账户数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await onUpload(accounts, ownerId);
|
||||||
|
setOpen(false);
|
||||||
|
setTextData('');
|
||||||
|
setOwnerId('');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSingleUpload = async () => {
|
||||||
|
if (!ownerId.trim()) {
|
||||||
|
alert('请输入所有者ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!singleAccount.customId || !singleAccount.data) {
|
||||||
|
alert('请填写完整的账户信息');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const accountToUpload = {
|
||||||
|
platform: defaultPlatform,
|
||||||
|
customId: singleAccount.customId,
|
||||||
|
data: singleAccount.data,
|
||||||
|
status: defaultStatus
|
||||||
|
};
|
||||||
|
await onUpload([accountToUpload], ownerId);
|
||||||
|
setOpen(false);
|
||||||
|
setSingleAccount({ customId: '', data: '' });
|
||||||
|
setOwnerId('');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Upload className="h-4 w-4 mr-2" />
|
||||||
|
上传账户
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>上传账户</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
支持批量上传和单个添加账户
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-4 pr-2">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">所有者ID</label>
|
||||||
|
<OwnerSelector
|
||||||
|
value={ownerId}
|
||||||
|
onValueChange={setOwnerId}
|
||||||
|
stats={stats || null}
|
||||||
|
placeholder="选择所有者ID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">平台</label>
|
||||||
|
<PlatformSelector
|
||||||
|
value={defaultPlatform}
|
||||||
|
onValueChange={setDefaultPlatform}
|
||||||
|
stats={stats || null}
|
||||||
|
placeholder="选择平台"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">默认状态</label>
|
||||||
|
<StatusSelector
|
||||||
|
value={defaultStatus}
|
||||||
|
onValueChange={setDefaultStatus}
|
||||||
|
stats={stats || null}
|
||||||
|
placeholder="选择状态"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs defaultValue="batch" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-2">
|
||||||
|
<TabsTrigger value="batch">
|
||||||
|
<FileText className="h-4 w-4 mr-2" />
|
||||||
|
批量上传
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="single">
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
单个添加
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="batch" className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">账户数据</label>
|
||||||
|
<Textarea
|
||||||
|
placeholder={`支持以下格式：
|
||||||
|
|
||||||
|
1. ---- 分割格式（推荐）：
|
||||||
|
user1@gmail.com----password123----cookie=abc123----token=xyz789
|
||||||
|
user2@gmail.com----{"password":"456789","token":"fb_token"}
|
||||||
|
user3@twitter.com----oauth_token----oauth_secret----user_data
|
||||||
|
|
||||||
|
2. 默认格式（一行一个）：
|
||||||
|
user1@gmail.com
|
||||||
|
user2@facebook.com
|
||||||
|
simple_username
|
||||||
|
|
||||||
|
3. 制表符分隔：platform customId data status
|
||||||
|
4. 逗号分隔：platform,customId,data,status
|
||||||
|
5. JSON格式：{"platform":"google","customId":"user@gmail.com","data":"..."}
|
||||||
|
|
||||||
|
格式说明：
|
||||||
|
- ---- 分割: customId----纯数据内容（第一个----后的所有内容作为data）
|
||||||
|
- 默认格式: 整行既作为customId也作为data
|
||||||
|
- 平台和状态: 在上方外部设置`}
|
||||||
|
value={textData}
|
||||||
|
onChange={(e) => setTextData(e.target.value)}
|
||||||
|
className="h-[200px] max-h-[300px] font-mono text-sm resize-y overflow-y-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={handleTextUpload}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{loading ? '上传中...' : '批量上传'}
|
||||||
|
</Button>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="single" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">自定义ID</label>
|
||||||
|
<Input
|
||||||
|
placeholder="如：user@gmail.com"
|
||||||
|
value={singleAccount.customId}
|
||||||
|
onChange={(e) => setSingleAccount({...singleAccount, customId: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium">账户数据</label>
|
||||||
|
<Textarea
|
||||||
|
placeholder='纯数据内容，如：password123----cookie=abc123----token=xyz789 或 {"username":"user@gmail.com","password":"123456","token":"abc"}'
|
||||||
|
value={singleAccount.data}
|
||||||
|
onChange={(e) => setSingleAccount({...singleAccount, data: e.target.value})}
|
||||||
|
className="min-h-[120px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleSingleUpload}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{loading ? '添加中...' : '添加账户'}
|
||||||
|
</Button>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
200
components/accounts/batch-operations.tsx
Normal file
200
components/accounts/batch-operations.tsx
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Edit3, Trash2 } from 'lucide-react';
|
||||||
|
import { Account, StatsOverview } from '@/lib/types';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
|
||||||
|
|
||||||
|
interface BatchOperationsProps {
|
||||||
|
selectedCount: number;
|
||||||
|
selectedAccounts: Account[];
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
onBatchUpdate: (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>) => Promise<void>;
|
||||||
|
onBatchDelete: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BatchOperations({ selectedCount, selectedAccounts, stats, onBatchUpdate, onBatchDelete }: BatchOperationsProps) {
|
||||||
|
const [updateDialog, setUpdateDialog] = useState(false);
|
||||||
|
const [updateData, setUpdateData] = useState({
|
||||||
|
status: '',
|
||||||
|
platform: '',
|
||||||
|
ownerId: '',
|
||||||
|
notes: ''
|
||||||
|
});
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
// 计算选中账户的统计信息
|
||||||
|
const getSelectedStats = () => {
|
||||||
|
const platforms = new Set(selectedAccounts.map(account => account.platform));
|
||||||
|
const owners = new Set(selectedAccounts.map(account => account.ownerId));
|
||||||
|
|
||||||
|
return {
|
||||||
|
platformCount: platforms.size,
|
||||||
|
ownerCount: owners.size,
|
||||||
|
platforms: Array.from(platforms).slice(0, 3), // 只显示前3个
|
||||||
|
owners: Array.from(owners).slice(0, 3) // 只显示前3个
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedStats = getSelectedStats();
|
||||||
|
|
||||||
|
|
||||||
|
const handleBatchUpdate = async () => {
|
||||||
|
const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
|
||||||
|
if (updateData.status) payload.status = updateData.status;
|
||||||
|
if (updateData.platform) payload.platform = updateData.platform;
|
||||||
|
if (updateData.ownerId) payload.ownerId = updateData.ownerId;
|
||||||
|
if (updateData.notes) payload.notes = updateData.notes;
|
||||||
|
|
||||||
|
if (Object.keys(payload).length === 0) {
|
||||||
|
toast.warning('请至少选择一个字段进行更新');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await onBatchUpdate(payload);
|
||||||
|
setUpdateDialog(false);
|
||||||
|
setUpdateData({ status: '', platform: '', ownerId: '', notes: '' });
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBatchDelete = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await onBatchDelete();
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (selectedCount === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center space-x-2 p-3 bg-muted rounded-lg">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<span className="text-sm font-medium">已选择 {selectedCount} 个账户</span>
|
||||||
|
<div className="flex items-center space-x-3 text-xs text-muted-foreground">
|
||||||
|
<span>
|
||||||
|
{selectedStats.ownerCount} 个用户
|
||||||
|
{selectedStats.ownerCount > 0 && (
|
||||||
|
<span className="ml-1">
|
||||||
|
({selectedStats.owners.join(', ')}
|
||||||
|
{selectedStats.ownerCount > 3 && ` 等${selectedStats.ownerCount}个`})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>
|
||||||
|
{selectedStats.platformCount} 个平台
|
||||||
|
{selectedStats.platformCount > 0 && (
|
||||||
|
<span className="ml-1">
|
||||||
|
({selectedStats.platforms.join(', ')}
|
||||||
|
{selectedStats.platformCount > 3 && ` 等${selectedStats.platformCount}个`})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setUpdateDialog(true)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<Edit3 className="h-4 w-4 mr-1" />
|
||||||
|
批量更新
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBatchDelete}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 mr-1" />
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={updateDialog} onOpenChange={setUpdateDialog}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>批量更新账户</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
将对 {selectedCount} 个账户进行批量更新操作
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid grid-cols-1 gap-6">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-medium">平台</label>
|
||||||
|
<PlatformSelector
|
||||||
|
value={updateData.platform}
|
||||||
|
onValueChange={(value) => setUpdateData({...updateData, platform: value})}
|
||||||
|
stats={stats}
|
||||||
|
showNoneOption={true}
|
||||||
|
placeholder="选择新平台（可选）"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-medium">状态</label>
|
||||||
|
<StatusSelector
|
||||||
|
value={updateData.status}
|
||||||
|
onValueChange={(value) => setUpdateData({...updateData, status: value})}
|
||||||
|
stats={stats}
|
||||||
|
showNoneOption={true}
|
||||||
|
placeholder="选择新状态（可选）"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-medium">所有者ID</label>
|
||||||
|
<OwnerSelector
|
||||||
|
value={updateData.ownerId}
|
||||||
|
onValueChange={(value) => setUpdateData({...updateData, ownerId: value})}
|
||||||
|
stats={stats}
|
||||||
|
showNoneOption={true}
|
||||||
|
placeholder="选择所有者（可选）"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-medium">备注</label>
|
||||||
|
<Input
|
||||||
|
placeholder="输入新的备注（可选）"
|
||||||
|
value={updateData.notes}
|
||||||
|
onChange={(e) => setUpdateData({...updateData, notes: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setUpdateDialog(false)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleBatchUpdate}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? '更新中...' : '确认更新'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
components/accounts/index.ts
Normal file
7
components/accounts/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
// 导出所有账户相关组件
|
||||||
|
export { StatsCards } from './stats-cards';
|
||||||
|
export { AccountFilters } from './account-filters';
|
||||||
|
export { BatchOperations } from './batch-operations';
|
||||||
|
export { AccountUpload } from './account-upload';
|
||||||
|
export { AccountTable } from './account-table';
|
||||||
|
export { AccountDetails } from './account-details';
|
||||||
93
components/accounts/stats-cards.tsx
Normal file
93
components/accounts/stats-cards.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Database, TrendingUp, Users, Activity } from 'lucide-react';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
|
||||||
|
interface StatsCardsProps {
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
loading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatsCards({ stats, loading }: StatsCardsProps) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">加载中...</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">--</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!stats) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">总账户数</CardTitle>
|
||||||
|
<Database className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.totalAccounts}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">平台数量</CardTitle>
|
||||||
|
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{Object.keys(stats.platformSummary).length}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{Object.entries(stats.platformSummary).slice(0, 3).map(([platform, count]) => (
|
||||||
|
`${platform}: ${count}`
|
||||||
|
)).join(', ')}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">所有者数量</CardTitle>
|
||||||
|
<Users className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{Object.keys(stats.ownerSummary).length}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{Object.entries(stats.ownerSummary).slice(0, 3).map(([owner, count]) => (
|
||||||
|
`${owner}: ${count}`
|
||||||
|
)).join(', ')}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">可用账户</CardTitle>
|
||||||
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-green-600">
|
||||||
|
{stats.statusSummary.available || 0}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
已锁定: {stats.statusSummary.locked || 0} |
|
||||||
|
已封禁: {stats.statusSummary.banned || 0}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
4
components/shared/index.ts
Normal file
4
components/shared/index.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export { PlatformSelector } from './platform-selector';
|
||||||
|
export { OwnerSelector } from './owner-selector';
|
||||||
|
export { StatusSelector } from './status-selector';
|
||||||
|
export { StatsSelect } from './stats-select';
|
||||||
45
components/shared/owner-selector.tsx
Normal file
45
components/shared/owner-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { StatsSelect } from './stats-select';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||||
|
|
||||||
|
interface OwnerSelectorProps {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
showNoneOption?: boolean;
|
||||||
|
noneOptionLabel?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
inputPlaceholder?: string;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OwnerSelector({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
stats,
|
||||||
|
showNoneOption = false,
|
||||||
|
noneOptionLabel = "不修改",
|
||||||
|
placeholder = "选择所有者",
|
||||||
|
inputPlaceholder = "或直接输入所有者ID",
|
||||||
|
className,
|
||||||
|
disabled = false
|
||||||
|
}: OwnerSelectorProps) {
|
||||||
|
const { owners } = useStatsData(stats);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsSelect
|
||||||
|
value={value}
|
||||||
|
onValueChange={onValueChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
inputPlaceholder={inputPlaceholder}
|
||||||
|
items={owners}
|
||||||
|
showNoneOption={showNoneOption}
|
||||||
|
noneOptionLabel={noneOptionLabel}
|
||||||
|
className={className}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
components/shared/platform-selector.tsx
Normal file
45
components/shared/platform-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { StatsSelect } from './stats-select';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||||
|
|
||||||
|
interface PlatformSelectorProps {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
showNoneOption?: boolean;
|
||||||
|
noneOptionLabel?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
inputPlaceholder?: string;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PlatformSelector({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
stats,
|
||||||
|
showNoneOption = false,
|
||||||
|
noneOptionLabel = "不修改",
|
||||||
|
placeholder = "选择平台",
|
||||||
|
inputPlaceholder = "或直接输入平台名称",
|
||||||
|
className,
|
||||||
|
disabled = false
|
||||||
|
}: PlatformSelectorProps) {
|
||||||
|
const { platforms } = useStatsData(stats);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsSelect
|
||||||
|
value={value}
|
||||||
|
onValueChange={onValueChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
inputPlaceholder={inputPlaceholder}
|
||||||
|
items={platforms}
|
||||||
|
showNoneOption={showNoneOption}
|
||||||
|
noneOptionLabel={noneOptionLabel}
|
||||||
|
className={className}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
components/shared/stats-select.tsx
Normal file
80
components/shared/stats-select.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { StatsDataItem } from '@/lib/hooks/use-stats-data';
|
||||||
|
|
||||||
|
interface StatsSelectProps {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
placeholder: string;
|
||||||
|
inputPlaceholder: string;
|
||||||
|
items: StatsDataItem[];
|
||||||
|
showNoneOption?: boolean;
|
||||||
|
noneOptionLabel?: string;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatsSelect({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
placeholder,
|
||||||
|
inputPlaceholder,
|
||||||
|
items,
|
||||||
|
showNoneOption = false,
|
||||||
|
noneOptionLabel = "不修改",
|
||||||
|
className,
|
||||||
|
disabled = false
|
||||||
|
}: StatsSelectProps) {
|
||||||
|
const handleSelectChange = (selectedValue: string) => {
|
||||||
|
if (selectedValue === 'none') {
|
||||||
|
onValueChange('');
|
||||||
|
} else {
|
||||||
|
onValueChange(selectedValue);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 检查当前值是否在选项列表中
|
||||||
|
const isValueInOptions = value && (
|
||||||
|
showNoneOption && value === '' ||
|
||||||
|
items.some(item => item.value === value)
|
||||||
|
);
|
||||||
|
|
||||||
|
// 为Select组件确定显示值
|
||||||
|
const selectValue = () => {
|
||||||
|
if (!value && showNoneOption) return 'none';
|
||||||
|
if (isValueInOptions) return value;
|
||||||
|
return undefined; // 如果值不在选项中，不设置Select的值
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`space-y-2 ${className || ''}`}>
|
||||||
|
<Select
|
||||||
|
value={selectValue()}
|
||||||
|
onValueChange={handleSelectChange}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder={placeholder} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{showNoneOption && (
|
||||||
|
<SelectItem value="none">{noneOptionLabel}</SelectItem>
|
||||||
|
)}
|
||||||
|
{items.map((item) => (
|
||||||
|
<SelectItem key={item.value} value={item.value}>
|
||||||
|
{item.label} ({item.count} 个账户)
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Input
|
||||||
|
placeholder={inputPlaceholder}
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onValueChange(e.target.value)}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
components/shared/status-selector.tsx
Normal file
45
components/shared/status-selector.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { StatsSelect } from './stats-select';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
import { useStatsData } from '@/lib/hooks/use-stats-data';
|
||||||
|
|
||||||
|
interface StatusSelectorProps {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
showNoneOption?: boolean;
|
||||||
|
noneOptionLabel?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
inputPlaceholder?: string;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatusSelector({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
stats,
|
||||||
|
showNoneOption = false,
|
||||||
|
noneOptionLabel = "不修改",
|
||||||
|
placeholder = "选择状态",
|
||||||
|
inputPlaceholder = "或直接输入状态",
|
||||||
|
className,
|
||||||
|
disabled = false
|
||||||
|
}: StatusSelectorProps) {
|
||||||
|
const { statuses } = useStatsData(stats);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatsSelect
|
||||||
|
value={value}
|
||||||
|
onValueChange={onValueChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
inputPlaceholder={inputPlaceholder}
|
||||||
|
items={statuses}
|
||||||
|
showNoneOption={showNoneOption}
|
||||||
|
noneOptionLabel={noneOptionLabel}
|
||||||
|
className={className}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
components/ui/badge.tsx
Normal file
46
components/ui/badge.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
58
components/ui/button.tsx
Normal file
58
components/ui/button.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
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-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
92
components/ui/card.tsx
Normal file
92
components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
32
components/ui/checkbox.tsx
Normal file
32
components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { CheckIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Checkbox({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
data-slot="checkbox"
|
||||||
|
className={cn(
|
||||||
|
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
data-slot="checkbox-indicator"
|
||||||
|
className="flex items-center justify-center text-current transition-none"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-3.5" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
143
components/ui/dialog.tsx
Normal file
143
components/ui/dialog.tsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Dialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||||
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||||
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||||
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
data-slot="dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
data-slot="dialog-title"
|
||||||
|
className={cn("text-lg leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
data-slot="dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
}
|
||||||
21
components/ui/input.tsx
Normal file
21
components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
185
components/ui/select.tsx
Normal file
185
components/ui/select.tsx
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Select({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||||
|
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||||
|
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectValue({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||||
|
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectTrigger({
|
||||||
|
className,
|
||||||
|
size = "default",
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||||
|
size?: "sm" | "default"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
data-slot="select-trigger"
|
||||||
|
data-size={size}
|
||||||
|
className={cn(
|
||||||
|
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDownIcon className="size-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
position = "popper",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
data-slot="select-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||||
|
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)] scroll-my-1"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectLabel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
data-slot="select-label"
|
||||||
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
data-slot="select-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
data-slot="select-separator"
|
||||||
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollUpButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
data-slot="select-scroll-up-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectScrollDownButton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
data-slot="select-scroll-down-button"
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="size-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
}
|
||||||
25
components/ui/sonner.tsx
Normal file
25
components/ui/sonner.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes"
|
||||||
|
import { Toaster as Sonner, ToasterProps } from "sonner"
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--normal-bg": "var(--popover)",
|
||||||
|
"--normal-text": "var(--popover-foreground)",
|
||||||
|
"--normal-border": "var(--border)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toaster }
|
||||||
116
components/ui/table.tsx
Normal file
116
components/ui/table.tsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="table-container"
|
||||||
|
className="relative w-full overflow-x-auto"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
data-slot="table"
|
||||||
|
className={cn("w-full caption-bottom text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||||
|
return (
|
||||||
|
<thead
|
||||||
|
data-slot="table-header"
|
||||||
|
className={cn("[&_tr]:border-b", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||||
|
return (
|
||||||
|
<tbody
|
||||||
|
data-slot="table-body"
|
||||||
|
className={cn("[&_tr:last-child]:border-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||||
|
return (
|
||||||
|
<tfoot
|
||||||
|
data-slot="table-footer"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
data-slot="table-row"
|
||||||
|
className={cn(
|
||||||
|
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
data-slot="table-head"
|
||||||
|
className={cn(
|
||||||
|
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
data-slot="table-cell"
|
||||||
|
className={cn(
|
||||||
|
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TableCaption({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"caption">) {
|
||||||
|
return (
|
||||||
|
<caption
|
||||||
|
data-slot="table-caption"
|
||||||
|
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Table,
|
||||||
|
TableHeader,
|
||||||
|
TableBody,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
TableCell,
|
||||||
|
TableCaption,
|
||||||
|
}
|
||||||
66
components/ui/tabs.tsx
Normal file
66
components/ui/tabs.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Tabs({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Root
|
||||||
|
data-slot="tabs"
|
||||||
|
className={cn("flex flex-col gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.List
|
||||||
|
data-slot="tabs-list"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsTrigger({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Trigger
|
||||||
|
data-slot="tabs-trigger"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabsContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<TabsPrimitive.Content
|
||||||
|
data-slot="tabs-content"
|
||||||
|
className={cn("flex-1 outline-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||||
18
components/ui/textarea.tsx
Normal file
18
components/ui/textarea.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
className={cn(
|
||||||
|
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
73
lib/api.ts
Normal file
73
lib/api.ts
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import {
|
||||||
|
ApiResponse,
|
||||||
|
ListAccountsBody,
|
||||||
|
ListAccountsResponse,
|
||||||
|
BatchDeleteBody,
|
||||||
|
BatchUpdateBody,
|
||||||
|
StatsOverview,
|
||||||
|
ScriptUploadItem
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
const API_BASE_URL = 'http://localhost:3006';
|
||||||
|
|
||||||
|
class ApiClient {
|
||||||
|
private async request<T>(
|
||||||
|
endpoint: string,
|
||||||
|
options: RequestInit = {}
|
||||||
|
): Promise<ApiResponse<T>> {
|
||||||
|
const url = `${API_BASE_URL}${endpoint}`;
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options.headers,
|
||||||
|
},
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取账户列表
|
||||||
|
async getAccountsList(body: ListAccountsBody): Promise<ApiResponse<ListAccountsResponse>> {
|
||||||
|
return this.request<ListAccountsResponse>('/web/v1/accounts/list', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除账户
|
||||||
|
async batchDeleteAccounts(body: BatchDeleteBody): Promise<ApiResponse<{ deletedCount: number }>> {
|
||||||
|
return this.request<{ deletedCount: number }>('/web/v1/accounts/delete-batch', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量更新账户
|
||||||
|
async batchUpdateAccounts(body: BatchUpdateBody): Promise<ApiResponse<{ updatedCount: number }>> {
|
||||||
|
return this.request<{ updatedCount: number }>('/web/v1/accounts/update-batch', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取统计概览
|
||||||
|
async getStatsOverview(): Promise<ApiResponse<StatsOverview>> {
|
||||||
|
return this.request<StatsOverview>('/web/v1/stats/overview');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传账户
|
||||||
|
async uploadAccounts(accounts: ScriptUploadItem[], ownerId: string): Promise<ApiResponse<{ processedCount: number; createdCount: number; updatedCount: number }>> {
|
||||||
|
return this.request<{ processedCount: number; createdCount: number; updatedCount: number }>(`/s/v1/${ownerId}/upload`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(accounts),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiClient = new ApiClient();
|
||||||
265
lib/hooks/use-accounts.ts
Normal file
265
lib/hooks/use-accounts.ts
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Account,
|
||||||
|
ListAccountsBody,
|
||||||
|
ListAccountsResponse,
|
||||||
|
StatsOverview,
|
||||||
|
BusinessCode,
|
||||||
|
BatchUpdateBody,
|
||||||
|
BatchDeleteBody,
|
||||||
|
ScriptUploadItem
|
||||||
|
} from '@/lib/types';
|
||||||
|
import { apiClient } from '@/lib/api';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
export interface UseAccountsReturn {
|
||||||
|
// 数据状态
|
||||||
|
accounts: Account[];
|
||||||
|
stats: StatsOverview | null;
|
||||||
|
loading: boolean;
|
||||||
|
selectedIds: number[];
|
||||||
|
|
||||||
|
// 分页和筛选
|
||||||
|
pagination: {
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
total: number;
|
||||||
|
totalPages: number;
|
||||||
|
};
|
||||||
|
filters: {
|
||||||
|
platform: string;
|
||||||
|
status: string[];
|
||||||
|
ownerId: string;
|
||||||
|
search: string;
|
||||||
|
};
|
||||||
|
sort: {
|
||||||
|
field: keyof Account;
|
||||||
|
order: 'asc' | 'desc';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 操作方法
|
||||||
|
fetchAccounts: () => Promise<void>;
|
||||||
|
fetchStats: () => Promise<void>;
|
||||||
|
handleFilterChange: (key: string, value: any) => void;
|
||||||
|
handlePageChange: (page: number) => void;
|
||||||
|
handlePageSizeChange: (pageSize: number) => void;
|
||||||
|
handleSortChange: (field: keyof Account, order: 'asc' | 'desc') => void;
|
||||||
|
handleSelectAll: (checked: boolean) => void;
|
||||||
|
handleSelectOne: (id: number, checked: boolean) => void;
|
||||||
|
handleBatchDelete: () => Promise<void>;
|
||||||
|
handleBatchUpdate: (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>) => Promise<void>;
|
||||||
|
handleUploadAccounts: (accounts: ScriptUploadItem[], ownerId: string) => Promise<void>;
|
||||||
|
setSelectedIds: (ids: number[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAccounts(): UseAccountsReturn {
|
||||||
|
const [accounts, setAccounts] = useState<Account[]>([]);
|
||||||
|
const [stats, setStats] = useState<StatsOverview | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
||||||
|
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0,
|
||||||
|
totalPages: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
platform: '',
|
||||||
|
status: [] as string[],
|
||||||
|
ownerId: '',
|
||||||
|
search: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const [sort, setSort] = useState({
|
||||||
|
field: 'id' as keyof Account,
|
||||||
|
order: 'desc' as 'asc' | 'desc'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
const fetchStats = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.getStatsOverview();
|
||||||
|
if (response.code === BusinessCode.Success && response.data) {
|
||||||
|
setStats(response.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch stats:', error);
|
||||||
|
toast.error('获取统计数据失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取账户列表
|
||||||
|
const fetchAccounts = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const body: ListAccountsBody = {
|
||||||
|
filters,
|
||||||
|
pagination: {
|
||||||
|
page: pagination.page,
|
||||||
|
pageSize: pagination.pageSize
|
||||||
|
},
|
||||||
|
sort
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await apiClient.getAccountsList(body);
|
||||||
|
if (response.code === BusinessCode.Success && response.data) {
|
||||||
|
setAccounts(response.data.list);
|
||||||
|
setPagination(prev => ({
|
||||||
|
...prev,
|
||||||
|
total: response.data.pagination.total,
|
||||||
|
totalPages: response.data.pagination.totalPages
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch accounts:', error);
|
||||||
|
toast.error('获取账户列表失败');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理筛选变化
|
||||||
|
const handleFilterChange = (key: string, value: any) => {
|
||||||
|
setFilters({ ...filters, [key]: value });
|
||||||
|
setPagination({ ...pagination, page: 1 });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理分页
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
setPagination({ ...pagination, page });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理每页大小变化
|
||||||
|
const handlePageSizeChange = (pageSize: number) => {
|
||||||
|
setPagination({ ...pagination, pageSize, page: 1 });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理排序
|
||||||
|
const handleSortChange = (field: keyof Account, order: 'asc' | 'desc') => {
|
||||||
|
setSort({ field, order });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理全选
|
||||||
|
const handleSelectAll = (checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds(accounts.map(account => account.id));
|
||||||
|
} else {
|
||||||
|
setSelectedIds([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理单选
|
||||||
|
const handleSelectOne = (id: number, checked: boolean) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedIds([...selectedIds, id]);
|
||||||
|
} else {
|
||||||
|
setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
const handleBatchDelete = async () => {
|
||||||
|
if (selectedIds.length === 0) return;
|
||||||
|
|
||||||
|
if (!confirm(`确认删除 ${selectedIds.length} 个账户？`)) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.batchDeleteAccounts({ ids: selectedIds });
|
||||||
|
if (response.code === BusinessCode.Success) {
|
||||||
|
setSelectedIds([]);
|
||||||
|
await fetchAccounts();
|
||||||
|
await fetchStats();
|
||||||
|
toast.success(`成功删除 ${response.data?.deletedCount || 0} 个账户`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete accounts:', error);
|
||||||
|
toast.error('删除失败，请检查网络连接后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量更新
|
||||||
|
const handleBatchUpdate = async (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>, targetIds?: number[]) => {
|
||||||
|
const idsToUpdate = targetIds || selectedIds;
|
||||||
|
console.log('handleBatchUpdate 被调用, idsToUpdate:', idsToUpdate);
|
||||||
|
console.log('payload:', payload);
|
||||||
|
|
||||||
|
if (idsToUpdate.length === 0) {
|
||||||
|
console.log('idsToUpdate为空，直接返回');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(payload).length === 0) {
|
||||||
|
toast.warning('请至少选择一个字段进行更新');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('发送批量更新请求...');
|
||||||
|
const response = await apiClient.batchUpdateAccounts({ ids: idsToUpdate, payload });
|
||||||
|
console.log('批量更新响应:', response);
|
||||||
|
|
||||||
|
if (response.code === BusinessCode.Success) {
|
||||||
|
if (!targetIds) {
|
||||||
|
// 只有在没有指定目标ID时才清空选中状态（批量操作时）
|
||||||
|
setSelectedIds([]);
|
||||||
|
}
|
||||||
|
await fetchAccounts();
|
||||||
|
await fetchStats();
|
||||||
|
toast.success(`成功更新 ${response.data?.updatedCount || 0} 个账户`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to update accounts:', error);
|
||||||
|
toast.error('更新失败，请检查网络连接后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上传账户
|
||||||
|
const handleUploadAccounts = async (uploadAccounts: ScriptUploadItem[], ownerId: string) => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.uploadAccounts(uploadAccounts, ownerId);
|
||||||
|
if (response.code === BusinessCode.Success) {
|
||||||
|
await fetchAccounts();
|
||||||
|
await fetchStats();
|
||||||
|
toast.success(`成功处理 ${response.data?.processedCount || 0} 个账户 (${response.data?.createdCount || 0} 个新建, ${response.data?.updatedCount || 0} 个更新)`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to upload accounts:', error);
|
||||||
|
toast.error('上传失败，请检查网络连接后重试');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAccounts();
|
||||||
|
}, [filters, pagination.page, pagination.pageSize, sort]);
|
||||||
|
|
||||||
|
// 只在开始时获取统计数据
|
||||||
|
useEffect(() => {
|
||||||
|
fetchStats();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
accounts,
|
||||||
|
stats,
|
||||||
|
loading,
|
||||||
|
selectedIds,
|
||||||
|
pagination,
|
||||||
|
filters,
|
||||||
|
sort,
|
||||||
|
fetchAccounts,
|
||||||
|
fetchStats,
|
||||||
|
handleFilterChange,
|
||||||
|
handlePageChange,
|
||||||
|
handlePageSizeChange,
|
||||||
|
handleSortChange,
|
||||||
|
handleSelectAll,
|
||||||
|
handleSelectOne,
|
||||||
|
handleBatchDelete,
|
||||||
|
handleBatchUpdate,
|
||||||
|
handleUploadAccounts,
|
||||||
|
setSelectedIds
|
||||||
|
};
|
||||||
|
}
|
||||||
59
lib/hooks/use-stats-data.ts
Normal file
59
lib/hooks/use-stats-data.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
import { StatsOverview } from '@/lib/types';
|
||||||
|
|
||||||
|
export interface StatsDataItem {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useStatsData(stats: StatsOverview | null) {
|
||||||
|
const platforms = useMemo(() => {
|
||||||
|
if (!stats?.platformSummary) return [];
|
||||||
|
return Object.entries(stats.platformSummary).map(([platform, count]) => ({
|
||||||
|
value: platform,
|
||||||
|
label: platform,
|
||||||
|
count
|
||||||
|
}));
|
||||||
|
}, [stats?.platformSummary]);
|
||||||
|
|
||||||
|
const owners = useMemo(() => {
|
||||||
|
if (!stats?.ownerSummary) return [];
|
||||||
|
return Object.entries(stats.ownerSummary).map(([owner, count]) => ({
|
||||||
|
value: owner,
|
||||||
|
label: owner,
|
||||||
|
count
|
||||||
|
}));
|
||||||
|
}, [stats?.ownerSummary]);
|
||||||
|
|
||||||
|
const statuses = useMemo(() => {
|
||||||
|
if (!stats?.statusSummary) return [];
|
||||||
|
return Object.entries(stats.statusSummary).map(([status, count]) => ({
|
||||||
|
value: status,
|
||||||
|
label: getStatusLabel(status),
|
||||||
|
count
|
||||||
|
}));
|
||||||
|
}, [stats?.statusSummary]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
platforms,
|
||||||
|
owners,
|
||||||
|
statuses,
|
||||||
|
hasData: Boolean(stats)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusLabel(status: string): string {
|
||||||
|
switch (status) {
|
||||||
|
case 'available':
|
||||||
|
return '可用';
|
||||||
|
case 'locked':
|
||||||
|
return '已锁定';
|
||||||
|
case 'banned':
|
||||||
|
return '已封禁';
|
||||||
|
default:
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
}
|
||||||
101
lib/types.ts
Normal file
101
lib/types.ts
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
// 业务状态码
|
||||||
|
export enum BusinessCode {
|
||||||
|
Success = 0,
|
||||||
|
NoResource = 1001,
|
||||||
|
InvalidParams = 2001,
|
||||||
|
ResourceConflict = 3001,
|
||||||
|
PermissionDenied = 4001,
|
||||||
|
BusinessError = 5001,
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用响应格式
|
||||||
|
export interface ApiResponse<T> {
|
||||||
|
code: BusinessCode;
|
||||||
|
message: string;
|
||||||
|
data: T | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账户类型
|
||||||
|
export interface Account {
|
||||||
|
id: number;
|
||||||
|
ownerId: string;
|
||||||
|
platform: string;
|
||||||
|
customId: string;
|
||||||
|
data: string;
|
||||||
|
status: string;
|
||||||
|
notes?: string;
|
||||||
|
lockedAt?: Date | null;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页结果
|
||||||
|
export interface PaginationResult {
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
total: number;
|
||||||
|
totalPages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本获取响应
|
||||||
|
export type ScriptAcquireResponse = Pick<Account, 'id' | 'customId' | 'data'>[];
|
||||||
|
|
||||||
|
// 脚本上传项
|
||||||
|
export interface ScriptUploadItem {
|
||||||
|
platform: string;
|
||||||
|
customId: string;
|
||||||
|
data: string;
|
||||||
|
status?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账户列表筛选条件
|
||||||
|
export interface ListAccountsFilters {
|
||||||
|
platform?: string;
|
||||||
|
status?: string[];
|
||||||
|
ownerId?: string;
|
||||||
|
search?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账户列表请求体
|
||||||
|
export interface ListAccountsBody {
|
||||||
|
filters: ListAccountsFilters;
|
||||||
|
pagination: {
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
};
|
||||||
|
sort: {
|
||||||
|
field: keyof Account;
|
||||||
|
order: 'asc' | 'desc';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账户列表响应
|
||||||
|
export interface ListAccountsResponse {
|
||||||
|
list: Account[];
|
||||||
|
pagination: PaginationResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除请求体
|
||||||
|
export interface BatchDeleteBody {
|
||||||
|
ids: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量更新请求体
|
||||||
|
export interface BatchUpdateBody {
|
||||||
|
ids: number[];
|
||||||
|
payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统计概览
|
||||||
|
export interface StatsOverview {
|
||||||
|
totalAccounts: number;
|
||||||
|
platformSummary: Record<string, number>;
|
||||||
|
ownerSummary: Record<string, number>;
|
||||||
|
statusSummary: Record<string, number>;
|
||||||
|
detailedBreakdown: {
|
||||||
|
platform: string;
|
||||||
|
ownerId: string;
|
||||||
|
status: string;
|
||||||
|
count: number;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
6
lib/utils.ts
Normal file
6
lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
20
package.json
20
package.json
@@ -8,16 +8,28 @@
|
|||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.544.0",
|
||||||
|
"next": "15.5.3",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0",
|
||||||
"next": "15.5.3"
|
"sonner": "^2.0.7",
|
||||||
|
"tailwind-merge": "^3.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
"@tailwindcss/postcss": "^4",
|
"tailwindcss": "^4",
|
||||||
"tailwindcss": "^4"
|
"tw-animate-css": "^1.3.8",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
849
pnpm-lock.yaml
generated
849
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user