955 lines
27 KiB
Markdown
955 lines
27 KiB
Markdown
# Genex Web 管理前端开发指南
|
||
|
||
> 平台管理后台（Admin Dashboard） — React + TypeScript + Next.js
|
||
|
||
---
|
||
|
||
## 1. 技术栈
|
||
|
||
| 技术 | 版本 | 用途 |
|
||
|------|------|------|
|
||
| **React** | 18.x | UI框架 |
|
||
| **TypeScript** | 5.x | 类型安全 |
|
||
| **Next.js** | 14.x | SSR/SSG + App Router |
|
||
| **Zustand** | 4.x | 轻量状态管理（UI状态） |
|
||
| **Redux Toolkit** | 2.x | 复杂业务状态（交易、审核流程） |
|
||
| **RTK Query** | 内置 | API数据获取与缓存 |
|
||
| **Ant Design** | 5.x | 企业级UI组件库 |
|
||
| **ECharts / Recharts** | 最新 | 数据可视化 |
|
||
| **TanStack Table** | 8.x | 高性能数据表格 |
|
||
| **React Hook Form** | 7.x | 表单管理 |
|
||
| **Zod** | 3.x | 运行时类型校验 |
|
||
|
||
---
|
||
|
||
## 2. 项目结构
|
||
|
||
```
|
||
genex-admin/
|
||
├── src/
|
||
│ ├── app/ # Next.js App Router
|
||
│ │ ├── layout.tsx # 根布局
|
||
│ │ ├── page.tsx # Dashboard首页
|
||
│ │ ├── (auth)/ # 认证路由组
|
||
│ │ │ ├── login/page.tsx
|
||
│ │ │ └── layout.tsx
|
||
│ │ ├── (dashboard)/ # 管理面板路由组
|
||
│ │ │ ├── layout.tsx # 侧边栏+顶栏布局
|
||
│ │ │ ├── users/ # 用户管理
|
||
│ │ │ ├── issuers/ # 发行方管理
|
||
│ │ │ ├── coupons/ # 券管理
|
||
│ │ │ ├── trading/ # 交易监控
|
||
│ │ │ ├── compliance/ # 合规管理
|
||
│ │ │ ├── risk/ # 风控中心
|
||
│ │ │ ├── finance/ # 财务管理
|
||
│ │ │ ├── chain/ # 链上监控
|
||
│ │ │ └── system/ # 系统管理
|
||
│ ├── components/
|
||
│ │ ├── ui/ # 基础UI组件
|
||
│ │ ├── business/ # 业务组件
|
||
│ │ └── ai-agent/ # AI Agent组件
|
||
│ ├── features/ # 功能模块（Redux slices）
|
||
│ │ ├── auth/
|
||
│ │ ├── users/
|
||
│ │ ├── issuers/
|
||
│ │ ├── coupons/
|
||
│ │ ├── trading/
|
||
│ │ ├── compliance/
|
||
│ │ └── risk/
|
||
│ ├── services/ # API服务层
|
||
│ │ ├── api.ts # RTK Query base API
|
||
│ │ └── endpoints/ # 按模块分的API端点
|
||
│ ├── stores/ # Zustand stores
|
||
│ │ ├── ui-store.ts # UI状态（侧边栏、主题）
|
||
│ │ └── ai-agent-store.ts # AI Agent状态
|
||
│ ├── hooks/ # 自定义Hooks
|
||
│ ├── lib/ # 工具函数
|
||
│ │ ├── constants.ts
|
||
│ │ ├── utils.ts
|
||
│ │ └── types.ts
|
||
│ └── styles/ # 全局样式
|
||
├── public/
|
||
├── tests/
|
||
├── next.config.js
|
||
├── tailwind.config.ts
|
||
└── package.json
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 状态管理策略
|
||
|
||
### Zustand vs Redux Toolkit 分工
|
||
|
||
| 类型 | 工具 | 场景 |
|
||
|------|------|------|
|
||
| **UI状态** | Zustand | 侧边栏折叠、主题切换、弹窗控制 |
|
||
| **服务端数据** | RTK Query | API数据获取、缓存、自动刷新 |
|
||
| **复杂业务流** | Redux Toolkit | 审核流程、交易状态机、多步骤表单 |
|
||
| **AI Agent** | Zustand | 对话历史、Agent面板状态 |
|
||
|
||
### 3.1 RTK Query API定义
|
||
|
||
```typescript
|
||
// src/services/api.ts
|
||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||
|
||
export const api = createApi({
|
||
baseQuery: fetchBaseQuery({
|
||
baseUrl: '/api/v1',
|
||
prepareHeaders: (headers) => {
|
||
const token = getToken();
|
||
if (token) headers.set('Authorization', `Bearer ${token}`);
|
||
return headers;
|
||
},
|
||
}),
|
||
tagTypes: ['Users', 'Issuers', 'Coupons', 'Orders', 'Compliance'],
|
||
endpoints: () => ({}),
|
||
});
|
||
```
|
||
|
||
```typescript
|
||
// src/services/endpoints/issuers.ts
|
||
export const issuerApi = api.injectEndpoints({
|
||
endpoints: (builder) => ({
|
||
getIssuers: builder.query<PaginatedResult<Issuer>, IssuerQuery>({
|
||
query: (params) => ({ url: '/issuers', params }),
|
||
providesTags: ['Issuers'],
|
||
}),
|
||
approveIssuer: builder.mutation<void, { id: string; decision: 'approve' | 'reject' }>({
|
||
query: ({ id, ...body }) => ({
|
||
url: `/issuers/${id}/review`,
|
||
method: 'POST',
|
||
body,
|
||
}),
|
||
invalidatesTags: ['Issuers'],
|
||
}),
|
||
}),
|
||
});
|
||
```
|
||
|
||
### 3.2 Zustand UI Store
|
||
|
||
```typescript
|
||
// src/stores/ui-store.ts
|
||
import { create } from 'zustand';
|
||
|
||
interface UiState {
|
||
sidebarCollapsed: boolean;
|
||
theme: 'light' | 'dark';
|
||
toggleSidebar: () => void;
|
||
setTheme: (theme: 'light' | 'dark') => void;
|
||
}
|
||
|
||
export const useUiStore = create<UiState>((set) => ({
|
||
sidebarCollapsed: false,
|
||
theme: 'light',
|
||
toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
|
||
setTheme: (theme) => set({ theme }),
|
||
}));
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 核心页面模块
|
||
|
||
### 4.1 Dashboard 首页
|
||
|
||
- 关键指标卡片：日交易量、活跃用户、新发行方、待审核数
|
||
- 交易量趋势图（ECharts线图）
|
||
- 异常交易告警列表
|
||
- AI洞察面板
|
||
|
||
### 4.2 用户管理
|
||
|
||
- 用户列表（TanStack Table，支持搜索/排序/分页）
|
||
- KYC审核详情
|
||
- 用户资产查看（我的券、余额、交易记录）
|
||
- 风控标记用户处理
|
||
|
||
### 4.3 发行方管理
|
||
|
||
```typescript
|
||
// 发行方审核流程
|
||
interface IssuerReview {
|
||
issuerId: string;
|
||
companyName: string;
|
||
businessLicense: string;
|
||
documents: Document[];
|
||
creditRating: CreditRating;
|
||
aiRiskScore: number; // AI预审风险分
|
||
aiRiskFlags: string[]; // AI标记的风险点
|
||
reviewStatus: 'pending' | 'approved' | 'rejected';
|
||
}
|
||
```
|
||
|
||
| 功能 | 说明 |
|
||
|------|------|
|
||
| 入驻审核 | AI预审+人工复核，标记风险点 |
|
||
| 信用管理 | 查看/调整信用评级，额度管理 |
|
||
| 发行监控 | 发行量、兑付率、Breakage率监控 |
|
||
| 违约处理 | 降级、冻结发行、账户冻结 |
|
||
|
||
### 4.4 交易监控
|
||
|
||
- 实时交易流（WebSocket推送）
|
||
- 订单簿深度图
|
||
- 异常交易检测告警
|
||
- 做市商活动监控
|
||
|
||
### 4.5 合规管理
|
||
|
||
```typescript
|
||
interface ComplianceCase {
|
||
id: string;
|
||
type: 'KYC' | 'AML' | 'OFAC' | 'TravelRule';
|
||
severity: 'low' | 'medium' | 'high' | 'critical';
|
||
status: 'open' | 'investigating' | 'resolved' | 'escalated';
|
||
aiAnalysis: string; // AI合规分析
|
||
suggestedAction: string; // AI建议操作
|
||
}
|
||
```
|
||
|
||
### 4.6 风控中心
|
||
|
||
- 风控仪表盘（实时风险指标）
|
||
- 异常交易图谱（关联分析可视化）
|
||
- 自动冻结记录
|
||
- SAR（可疑交易报告）管理
|
||
|
||
### 4.7 系统管理
|
||
|
||
| 页面 | 功能 |
|
||
|------|------|
|
||
| 管理员账号 | 管理员列表、RBAC角色权限、操作日志 |
|
||
| 系统配置 | 手续费率、KYC阈值、交易限额 |
|
||
| 合约管理 | 合约部署状态、升级提案、升级日志 |
|
||
| 系统监控 | 服务健康、API响应时间、Genex Chain节点状态 |
|
||
|
||
---
|
||
|
||
## 5. AI Agent 集成
|
||
|
||
### 5.1 管理端AI Agent功能
|
||
|
||
| 场景 | AI能力 | UI实现 |
|
||
|------|--------|--------|
|
||
| 风险预警 | 实时检测异常交易模式 | 仪表盘AI警告卡片+处理建议 |
|
||
| 审核辅助 | AI预审发行方资料，标记风险点 | 审核页面AI评分+风险标签 |
|
||
| 合规报告 | 自动生成SAR/CTR/监管报表草稿 | 合规报表页AI生成按钮 |
|
||
| 运营洞察 | 分析运营数据，提出优化建议 | Dashboard AI洞察面板 |
|
||
| 智能搜索 | 自然语言查询用户/订单/交易 | 全局搜索框支持NL查询 |
|
||
| 决策支持 | 手续费率调整建议、额度配置建议 | 系统配置页AI建议标签 |
|
||
|
||
### 5.2 AI Agent侧边面板
|
||
|
||
```tsx
|
||
// src/components/ai-agent/AgentPanel.tsx
|
||
export function AgentPanel() {
|
||
const { messages, sendMessage, isStreaming } = useAgentChat();
|
||
|
||
return (
|
||
<Drawer title="AI助手" placement="right" width={400}>
|
||
<ChatMessageList messages={messages} />
|
||
{isStreaming && <StreamingIndicator />}
|
||
<ChatInput onSend={sendMessage} placeholder="描述你要查询或分析的内容..." />
|
||
</Drawer>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 权限管理（RBAC）
|
||
|
||
```typescript
|
||
// 角色定义
|
||
enum AdminRole {
|
||
SuperAdmin = 'super_admin', // 超级管理员：全部权限
|
||
OperationAdmin = 'ops_admin', // 运营管理员：用户+发行方+券管理
|
||
ComplianceOfficer = 'compliance', // 合规官：合规+风控
|
||
FinanceAdmin = 'finance_admin', // 财务管理员：财务+结算
|
||
Viewer = 'viewer', // 只读：仅查看Dashboard
|
||
}
|
||
|
||
// 路由守卫
|
||
function AuthGuard({ children, requiredRole }: GuardProps) {
|
||
const { user } = useAuth();
|
||
if (!hasPermission(user.role, requiredRole)) {
|
||
return <ForbiddenPage />;
|
||
}
|
||
return children;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 实时数据
|
||
|
||
```typescript
|
||
// WebSocket连接管理
|
||
class AdminWebSocket {
|
||
private ws: WebSocket;
|
||
|
||
connect() {
|
||
this.ws = new WebSocket('wss://api.gogenex.com/admin/ws');
|
||
this.ws.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
switch (data.type) {
|
||
case 'trade_alert':
|
||
store.dispatch(addTradeAlert(data.payload));
|
||
break;
|
||
case 'risk_warning':
|
||
store.dispatch(addRiskWarning(data.payload));
|
||
break;
|
||
case 'chain_event':
|
||
store.dispatch(updateChainStatus(data.payload));
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 测试策略
|
||
|
||
| 类型 | 工具 | 覆盖 |
|
||
|------|------|------|
|
||
| 单元测试 | Vitest | Redux slices、工具函数、Hooks |
|
||
| 组件测试 | React Testing Library | 关键表单、表格、弹窗 |
|
||
| E2E测试 | Playwright | 审核流程、配置变更、报表导出 |
|
||
|
||
---
|
||
|
||
## 9. 部署
|
||
|
||
```yaml
|
||
# Next.js部署配置
|
||
# Docker + Kubernetes
|
||
FROM node:20-alpine AS builder
|
||
WORKDIR /app
|
||
COPY package*.json ./
|
||
RUN npm ci
|
||
COPY . .
|
||
RUN npm run build
|
||
|
||
FROM node:20-alpine
|
||
WORKDIR /app
|
||
COPY --from=builder /app/.next ./.next
|
||
COPY --from=builder /app/public ./public
|
||
COPY --from=builder /app/package.json ./
|
||
RUN npm ci --production
|
||
EXPOSE 3000
|
||
CMD ["npm", "start"]
|
||
```
|
||
|
||
---
|
||
|
||
## 10. 数据报表与分析
|
||
|
||
### 10.1 平台数据报表
|
||
|
||
```typescript
|
||
// src/features/reports/types.ts
|
||
interface PlatformReport {
|
||
type: 'daily' | 'monthly' | 'quarterly';
|
||
metrics: {
|
||
totalTransactionVolume: number;
|
||
totalTransactionAmount: number;
|
||
activeUsers: number;
|
||
newIssuers: number;
|
||
avgDiscountRate: number;
|
||
platformRevenue: number; // 手续费收入
|
||
breakageRevenue: number;
|
||
};
|
||
}
|
||
```
|
||
|
||
### 10.2 用户行为分析
|
||
|
||
```typescript
|
||
// src/features/analytics/user-analytics.ts
|
||
interface UserBehaviorAnalytics {
|
||
registrationFunnel: FunnelData; // 注册→KYC→首次交易转化率
|
||
retentionRate: RetentionData; // 留存率（日/周/月）
|
||
activeUserTrend: TimeSeriesData; // DAU/WAU/MAU
|
||
tradingPatterns: TradingPatternData; // 交易行为模式
|
||
kycLevelDistribution: PieData; // KYC等级分布
|
||
walletModeDistribution: PieData; // 标准/Pro模式占比
|
||
}
|
||
```
|
||
|
||
### 10.3 券类别分析
|
||
|
||
```typescript
|
||
// src/features/analytics/coupon-analytics.ts
|
||
interface CouponCategoryAnalytics {
|
||
byIndustry: CategoryBreakdown[]; // 按行业（餐饮/购物/娱乐）
|
||
byTemplate: CategoryBreakdown[]; // 按模板（满减/折扣/礼品卡/储值）
|
||
byIssuerTier: CategoryBreakdown[]; // 按发行方层级
|
||
redemptionByCategory: BarData; // 各品类兑付率
|
||
breakageByCategory: BarData; // 各品类Breakage率
|
||
priceDistribution: HistogramData; // 价格分布
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 11. 税务合规报表
|
||
|
||
### 11.1 IRS 1099报表管理
|
||
|
||
```typescript
|
||
// src/features/compliance/tax-reports.ts
|
||
interface Tax1099Management {
|
||
// IRS Form 1099-DA/1099-B 生成与管理
|
||
generateBatch: (taxYear: number) => Promise<Tax1099Report[]>;
|
||
reviewReport: (reportId: string) => Promise<Tax1099Report>;
|
||
submitToIRS: (reportIds: string[]) => Promise<SubmissionResult>;
|
||
userPortalExport: (userId: string, taxYear: number) => Promise<TaxDocument>;
|
||
}
|
||
|
||
// 1099报表页面
|
||
export function Tax1099Page() {
|
||
const [taxYear, setTaxYear] = useState(2025);
|
||
const reports = useQuery(['tax1099', taxYear], () => taxApi.getReports(taxYear));
|
||
|
||
return (
|
||
<div>
|
||
<YearSelector value={taxYear} onChange={setTaxYear} />
|
||
<StatsCards>
|
||
<Card title="需生成1099" value={reports.pendingCount} />
|
||
<Card title="已生成" value={reports.generatedCount} />
|
||
<Card title="已提交IRS" value={reports.submittedCount} />
|
||
</StatsCards>
|
||
<Button onClick={() => taxApi.generateBatch(taxYear)}>批量生成1099</Button>
|
||
<TanStackTable data={reports.data} columns={tax1099Columns} />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 11.2 FATCA跨境税务
|
||
|
||
```typescript
|
||
interface FatcaReport {
|
||
foreignAccountHolders: ForeignUser[];
|
||
totalUsSourceIncome: number;
|
||
reportingStatus: 'pending' | 'submitted';
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 12. 消费者保护与虚假宣传监控
|
||
|
||
```typescript
|
||
// src/features/compliance/consumer-protection.ts
|
||
interface ConsumerProtectionCase {
|
||
id: string;
|
||
type: 'misleading_description' | 'false_advertising' | 'undisclosed_conditions';
|
||
couponId: string;
|
||
issuerId: string;
|
||
reportedBy: 'user' | 'ai_scan' | 'admin';
|
||
evidence: {
|
||
couponDescription: string; // 券描述
|
||
actualRedemptionInfo: string; // 实际兑付情况
|
||
discrepancy: string; // 差异说明
|
||
};
|
||
status: 'reported' | 'investigating' | 'confirmed' | 'dismissed';
|
||
action: 'warning' | 'delist' | 'suspend_issuer' | 'none';
|
||
}
|
||
|
||
// AI扫描券描述一致性
|
||
export function FalseAdvertisingMonitor() {
|
||
return (
|
||
<div>
|
||
<h3>虚假宣传监控</h3>
|
||
{/* AI自动扫描所有上架券的描述 vs 实际兑付记录 */}
|
||
<AlertList alerts={consumerProtectionAlerts} />
|
||
{/* 手动审查队列 */}
|
||
<CaseQueue cases={pendingCases} onResolve={handleResolve} />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 13. SOX审计模块
|
||
|
||
```typescript
|
||
// src/features/compliance/sox-audit.ts
|
||
interface SoxAuditDashboard {
|
||
// Section 302: CEO/CFO认证追踪
|
||
certifications: CertificationRecord[];
|
||
// Section 404: 内部控制评估
|
||
internalControls: InternalControlAssessment[];
|
||
// 智能合约升级审计追踪
|
||
contractUpgradeAudit: ContractUpgradeLog[];
|
||
// 链上记录与GAAP对账
|
||
chainToGaapReconciliation: ReconciliationReport;
|
||
}
|
||
|
||
interface ContractUpgradeLog {
|
||
proposalId: string;
|
||
contractName: string;
|
||
oldImplementation: string;
|
||
newImplementation: string;
|
||
proposedBy: string;
|
||
approvedBy: string[]; // 多签审批人
|
||
timelockExpiry: Date;
|
||
executedAt: Date;
|
||
auditReport: string; // 第三方审计报告链接
|
||
}
|
||
|
||
// SOX审计页面
|
||
export function SoxAuditPage() {
|
||
return (
|
||
<Tabs>
|
||
<Tab label="内部控制">
|
||
<InternalControlMatrix />
|
||
</Tab>
|
||
<Tab label="合约升级日志">
|
||
<ContractUpgradeAuditTrail />
|
||
</Tab>
|
||
<Tab label="链上对账">
|
||
<ChainGaapReconciliation />
|
||
</Tab>
|
||
<Tab label="操作审计日志">
|
||
<AuditLogViewer /> {/* 全链路操作日志，append-only */}
|
||
</Tab>
|
||
</Tabs>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 14. 财务管理
|
||
|
||
### 14.1 手续费管理
|
||
|
||
```typescript
|
||
// src/features/finance/fee-management.ts
|
||
interface FeeConfiguration {
|
||
tradingFees: {
|
||
takerBuy: number; // 0.5%
|
||
takerSell: number;
|
||
makerBuy: number; // 0.1%
|
||
makerSell: number;
|
||
};
|
||
issuanceFees: Record<IssuerTier, number>;
|
||
breakageSharePercent: number; // 平台Breakage分润比例
|
||
}
|
||
|
||
// 手续费收入仪表盘
|
||
export function FeeRevenueDashboard() {
|
||
return (
|
||
<div>
|
||
<RevenueCards>
|
||
<Card title="交易手续费" value={tradingFeeRevenue} />
|
||
<Card title="发行服务费" value={issuanceFeeRevenue} />
|
||
<Card title="Breakage分润" value={breakageRevenue} />
|
||
<Card title="增值服务" value={vasRevenue} />
|
||
</RevenueCards>
|
||
<RevenueChart data={revenueTimeSeries} />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 14.2 结算管理
|
||
|
||
```typescript
|
||
// 发行方结算管理
|
||
interface SettlementManagement {
|
||
pendingSettlements: SettlementBatch[];
|
||
completedSettlements: SettlementBatch[];
|
||
issuerBalances: IssuerBalance[];
|
||
withdrawalRequests: WithdrawalRequest[];
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 15. 争议与仲裁处理
|
||
|
||
```typescript
|
||
// src/features/disputes/types.ts
|
||
interface DisputeCase {
|
||
id: string;
|
||
type: 'buyer_complaint' | 'seller_complaint' | 'refund_request';
|
||
status: 'submitted' | 'evidence_collection' | 'arbitration' | 'resolved' | 'escalated';
|
||
orderId: string;
|
||
buyerId: string;
|
||
sellerId: string;
|
||
chainEvidence: {
|
||
txHash: string;
|
||
blockNumber: number;
|
||
timestamp: Date;
|
||
transferRecord: string;
|
||
};
|
||
sla: {
|
||
responseDeadline: Date; // 24h响应
|
||
resolutionDeadline: Date; // 72h处理
|
||
};
|
||
arbitrationDecision?: {
|
||
decidedBy: string;
|
||
decision: 'refund' | 'reject' | 'partial_refund';
|
||
reason: string;
|
||
};
|
||
}
|
||
|
||
// 争议处理页面
|
||
export function DisputeManagementPage() {
|
||
return (
|
||
<div>
|
||
<SlaOverview />
|
||
<DisputeList
|
||
columns={[
|
||
{ key: 'id', title: '工单号' },
|
||
{ key: 'type', title: '类型' },
|
||
{ key: 'status', title: '状态' },
|
||
{ key: 'sla', title: 'SLA倒计时', render: (sla) => <SlaCountdown deadline={sla.resolutionDeadline} /> },
|
||
{ key: 'actions', title: '操作', render: (_, row) => <ArbitrationActions dispute={row} /> },
|
||
]}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 16. Web商户核销后台
|
||
|
||
```typescript
|
||
// src/app/(dashboard)/merchant-redemption/page.tsx
|
||
// 门店管理员通过浏览器核销+查看核销记录
|
||
export default function MerchantRedemptionPage() {
|
||
return (
|
||
<div>
|
||
<h2>Web端核销后台</h2>
|
||
|
||
{/* 输码核销 */}
|
||
<Card title="核销券">
|
||
<Input placeholder="输入券码" />
|
||
<Button type="primary">查询并核销</Button>
|
||
</Card>
|
||
|
||
{/* 核销记录 */}
|
||
<Card title="核销记录">
|
||
<DateRangePicker />
|
||
<TanStackTable
|
||
data={redemptionRecords}
|
||
columns={[
|
||
{ key: 'couponCode', title: '券码' },
|
||
{ key: 'couponName', title: '券名' },
|
||
{ key: 'faceValue', title: '面值' },
|
||
{ key: 'operator', title: '核销员' },
|
||
{ key: 'store', title: '门店' },
|
||
{ key: 'time', title: '核销时间' },
|
||
{ key: 'status', title: '状态' },
|
||
]}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 门店数据汇总 */}
|
||
<StoreRedemptionStats />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 17. 做市商管理
|
||
|
||
```typescript
|
||
// src/features/trading/market-maker-management.ts
|
||
interface MarketMakerManagement {
|
||
marketMakers: MarketMaker[];
|
||
obligations: MarketMakerObligation[];
|
||
performanceMetrics: MmPerformanceMetric[];
|
||
violationAlerts: MmViolation[];
|
||
}
|
||
|
||
// 做市商活动监控页面
|
||
export function MarketMakerMonitorPage() {
|
||
return (
|
||
<div>
|
||
<h3>做市商监控</h3>
|
||
<MmPerformanceTable data={marketMakers} />
|
||
{/* Spoofing/Layering检测告警 */}
|
||
<ManipulationAlerts alerts={spoofingAlerts} />
|
||
{/* 做市义务合规检查 */}
|
||
<ObligationComplianceCheck />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 18. Nasdaq上市合规管理
|
||
|
||
### 18.1 SEC Filing管理
|
||
|
||
```typescript
|
||
// src/features/compliance/sec-filing.ts
|
||
interface SecFiling {
|
||
type: '10-K' | '10-Q' | '8-K' | 'S-1' | 'Form ATS' | 'Form ATS-N';
|
||
status: 'drafting' | 'internal_review' | 'legal_review' | 'filed' | 'accepted';
|
||
period?: string; // 报告期间（如 "FY2027", "Q1 2027"）
|
||
dueDate: Date;
|
||
filedDate?: Date;
|
||
preparedBy: string;
|
||
reviewedBy: string[];
|
||
secEdgarLink?: string; // SEC EDGAR提交链接
|
||
attachments: FilingAttachment[];
|
||
}
|
||
|
||
interface FilingSchedule {
|
||
annual: { type: '10-K', deadline: '年度结束后60天（加速申报人）' };
|
||
quarterly: { type: '10-Q', deadline: '季度结束后40天' };
|
||
materialEvent: { type: '8-K', deadline: '事件发生后4个工作日' };
|
||
}
|
||
|
||
// SEC Filing管理页面
|
||
export function SecFilingManagementPage() {
|
||
return (
|
||
<div>
|
||
<h2>SEC Filing管理</h2>
|
||
|
||
{/* Filing日历 */}
|
||
<Card title="申报日历">
|
||
<FilingCalendar
|
||
filings={upcomingFilings}
|
||
onSelect={(filing) => openFilingDetail(filing)}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 10-K/10-Q编制追踪 */}
|
||
<Card title="定期报告">
|
||
<TanStackTable
|
||
data={periodicFilings}
|
||
columns={[
|
||
{ key: 'type', title: '类型' },
|
||
{ key: 'period', title: '报告期' },
|
||
{ key: 'status', title: '状态', render: (s) => <FilingStatusBadge status={s} /> },
|
||
{ key: 'dueDate', title: '截止日期', render: (d) => <DueDateCountdown date={d} /> },
|
||
{ key: 'preparedBy', title: '编制人' },
|
||
{ key: 'actions', title: '操作', render: (_, row) => (
|
||
<>
|
||
<Button onClick={() => openDraft(row)}>编辑</Button>
|
||
<Button onClick={() => submitForReview(row)}>提交审核</Button>
|
||
</>
|
||
)},
|
||
]}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 8-K重大事件快速申报 */}
|
||
<Card title="8-K重大事件">
|
||
<Button type="primary" onClick={create8K}>新建8-K申报</Button>
|
||
<EventList events={materialEvents} />
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 18.2 牌照与注册管理
|
||
|
||
```typescript
|
||
// src/features/compliance/license-management.ts
|
||
interface LicenseRecord {
|
||
type: 'MSB' | 'MTL' | 'BitLicense' | 'DFAL' | 'Broker-Dealer' | 'Form ATS';
|
||
jurisdiction: string; // 联邦 / 州名
|
||
regulatoryBody: string; // FinCEN / NYDFS / SEC等
|
||
status: 'active' | 'pending' | 'expired' | 'not_applied';
|
||
obtainedDate?: Date;
|
||
expiryDate?: Date;
|
||
renewalDate?: Date;
|
||
applicationRef?: string;
|
||
notes: string;
|
||
}
|
||
|
||
// 牌照看板
|
||
export function LicenseDashboardPage() {
|
||
return (
|
||
<div>
|
||
<h2>牌照与注册状态</h2>
|
||
|
||
{/* 联邦级牌照 */}
|
||
<Card title="联邦级">
|
||
<LicenseStatusCard license={msbLicense} icon="federal" />
|
||
</Card>
|
||
|
||
{/* 州级MTL地图 */}
|
||
<Card title="州级MTL覆盖">
|
||
<UsStateMap
|
||
data={stateLicenses}
|
||
colorScale={{
|
||
active: 'green',
|
||
pending: 'yellow',
|
||
not_applied: 'gray',
|
||
restricted: 'red',
|
||
}}
|
||
onClick={(state) => openStateDetail(state)}
|
||
/>
|
||
<StateLicenseTable data={stateLicenses} />
|
||
</Card>
|
||
|
||
{/* 到期提醒 */}
|
||
<Card title="续期提醒">
|
||
<RenewalAlertList licenses={expiringLicenses} />
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 18.3 商业保险管理
|
||
|
||
```typescript
|
||
// src/features/compliance/insurance-management.ts
|
||
interface InsurancePolicy {
|
||
type: 'D&O' | 'E&O' | 'CYBER' | 'FIDELITY' | 'GL';
|
||
name: string;
|
||
carrier: string;
|
||
policyNumber: string;
|
||
coverageAmount: number;
|
||
annualPremium: number;
|
||
effectiveDate: Date;
|
||
expiryDate: Date;
|
||
status: 'active' | 'expiring_soon' | 'expired' | 'not_purchased';
|
||
isAdequate: boolean; // 覆盖额度是否满足要求
|
||
}
|
||
|
||
// 保险管理页面
|
||
export function InsuranceManagementPage() {
|
||
return (
|
||
<div>
|
||
<h2>商业保险管理</h2>
|
||
|
||
{/* 保险概览卡片 */}
|
||
<Row gutter={16}>
|
||
{insurancePolicies.map(policy => (
|
||
<Col span={8} key={policy.type}>
|
||
<InsurancePolicyCard
|
||
policy={policy}
|
||
required={requiredPolicies[policy.type]}
|
||
/>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
|
||
{/* 保险充足性分析 */}
|
||
<Card title="覆盖充足性">
|
||
<CoverageAdequacyChart
|
||
policies={insurancePolicies}
|
||
benchmarks={industryBenchmarks}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 到期/续期日历 */}
|
||
<Card title="续期日历">
|
||
<InsuranceRenewalCalendar policies={insurancePolicies} />
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 18.4 IPO准备清单
|
||
|
||
```typescript
|
||
// src/features/compliance/ipo-readiness.ts
|
||
interface IpoChecklistItem {
|
||
category: 'legal' | 'financial' | 'compliance' | 'governance' | 'insurance' | 'technical';
|
||
item: string;
|
||
status: 'completed' | 'in_progress' | 'not_started' | 'blocked';
|
||
owner: string;
|
||
targetDate: Date;
|
||
dependencies: string[];
|
||
notes: string;
|
||
}
|
||
|
||
// IPO准备看板
|
||
export function IpoReadinessPage() {
|
||
const categories = [
|
||
{
|
||
name: '法律与牌照',
|
||
items: [
|
||
{ item: 'MSB注册（FinCEN Form 107）', status: 'completed' },
|
||
{ item: '州级MTL（49州+DC）', status: 'in_progress' },
|
||
{ item: 'NY BitLicense', status: 'in_progress' },
|
||
{ item: '券法律属性意见书', status: 'not_started' },
|
||
{ item: 'GNX代币法律分类', status: 'not_started' },
|
||
],
|
||
},
|
||
{
|
||
name: '财务与审计',
|
||
items: [
|
||
{ item: '聘请PCAOB注册审计师', status: 'not_started' },
|
||
{ item: '2年+经审计GAAP财报', status: 'not_started' },
|
||
{ item: 'FASB ASU 2023-08数字资产会计', status: 'not_started' },
|
||
{ item: 'ASC 606收入确认（Breakage/递延负债）', status: 'in_progress' },
|
||
{ item: '链上数据与GAAP对账机制', status: 'in_progress' },
|
||
],
|
||
},
|
||
{
|
||
name: 'SOX合规',
|
||
items: [
|
||
{ item: 'Section 302 CEO/CFO认证流程', status: 'in_progress' },
|
||
{ item: 'Section 404(a) 内部控制评估', status: 'not_started' },
|
||
{ item: 'Section 404(b) 外部审计师审计', status: 'not_started' },
|
||
{ item: '智能合约升级审计追踪', status: 'completed' },
|
||
],
|
||
},
|
||
{
|
||
name: '公司治理',
|
||
items: [
|
||
{ item: '独立董事（多数席位）', status: 'not_started' },
|
||
{ item: '审计委员会（全部独立董事）', status: 'not_started' },
|
||
{ item: '薪酬委员会', status: 'not_started' },
|
||
{ item: 'SEC注册声明（Form S-1）', status: 'not_started' },
|
||
],
|
||
},
|
||
{
|
||
name: '商业保险',
|
||
items: [
|
||
{ item: 'D&O保险（匹配市值）', status: 'not_started' },
|
||
{ item: 'E&O专业责任险', status: 'not_started' },
|
||
{ item: '网络安全险（覆盖数字资产托管）', status: 'not_started' },
|
||
{ item: '忠诚保证金', status: 'not_started' },
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<h2>IPO准备清单</h2>
|
||
<OverallProgress categories={categories} />
|
||
{categories.map(cat => (
|
||
<Card key={cat.name} title={cat.name}>
|
||
<ChecklistTable items={cat.items} />
|
||
</Card>
|
||
))}
|
||
<TimelineGantt categories={categories} ipoTargetDate={ipoTarget} />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
*文档版本: v2.1*
|
||
*基于: Genex 券交易平台 - 软件需求规格说明书 v4.1*
|
||
*技术栈: React 18 + TypeScript 5 + Next.js 14 + Zustand + Redux Toolkit*
|
||
*更新: v2.1补充Nasdaq上市合规管理（SEC Filing/牌照管理/商业保险/IPO准备清单）*
|