feat: 渠道展示、订阅套餐、系统配置全功能
- 新增 Channel / SubscriptionPlan / SystemConfig 三个数据模型 - Order 模型扩展支持订阅订单（order_type, plan_id, subscription_group_id） - Sub2API client 新增分组查询、订阅分配/续期、用户订阅查询 - 订单服务支持订阅履约流程（CAS 锁 + 分组消失安全处理） - 管理后台：渠道管理、订阅套餐管理、系统配置、Sub2API 分组同步 - 用户页面：双 Tab UI（按量付费/包月订阅）、渠道卡片、充值弹窗、订阅确认 - PaymentForm 支持 fixedAmount 固定金额模式 - 订单状态 API 返回 failedReason 用于订阅异常展示 - 数据库迁移脚本
This commit is contained in:
erio
958
src/app/admin/channels/page.tsx
Normal file
958
src/app/admin/channels/page.tsx
Normal file
@@ -0,0 +1,958 @@
|
||||
'use client';
|
||||
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useState, useEffect, useCallback, Suspense } from 'react';
|
||||
import PayPageLayout from '@/components/PayPageLayout';
|
||||
import { resolveLocale, type Locale } from '@/lib/locale';
|
||||
|
||||
// ── Types ──
|
||||
|
||||
interface Channel {
|
||||
id: string;
|
||||
groupId: number;
|
||||
name: string;
|
||||
platform: string;
|
||||
rateMultiplier: number;
|
||||
description: string | null;
|
||||
models: string | null;
|
||||
features: string | null;
|
||||
sortOrder: number;
|
||||
enabled: boolean;
|
||||
groupExists: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface Sub2ApiGroup {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
platform: string;
|
||||
status: string;
|
||||
rate_multiplier: number;
|
||||
}
|
||||
|
||||
interface ChannelFormData {
|
||||
group_id: number | '';
|
||||
name: string;
|
||||
platform: string;
|
||||
rate_multiplier: string;
|
||||
description: string;
|
||||
models: string;
|
||||
features: string;
|
||||
sort_order: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
const PLATFORMS = ['claude', 'openai', 'gemini', 'codex', 'sora'] as const;
|
||||
|
||||
const PLATFORM_COLORS: Record<string, { bg: string; text: string }> = {
|
||||
claude: { bg: 'bg-orange-100 dark:bg-orange-900/40', text: 'text-orange-700 dark:text-orange-300' },
|
||||
openai: { bg: 'bg-green-100 dark:bg-green-900/40', text: 'text-green-700 dark:text-green-300' },
|
||||
gemini: { bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-700 dark:text-blue-300' },
|
||||
codex: { bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-700 dark:text-purple-300' },
|
||||
sora: { bg: 'bg-pink-100 dark:bg-pink-900/40', text: 'text-pink-700 dark:text-pink-300' },
|
||||
};
|
||||
|
||||
// ── i18n ──
|
||||
|
||||
function getTexts(locale: Locale) {
|
||||
return locale === 'en'
|
||||
? {
|
||||
missingToken: 'Missing admin token',
|
||||
missingTokenHint: 'Please access the admin page from the Sub2API platform.',
|
||||
invalidToken: 'Invalid admin token',
|
||||
title: 'Channel Management',
|
||||
subtitle: 'Configure and manage subscription channels',
|
||||
orders: 'Orders',
|
||||
refresh: 'Refresh',
|
||||
loading: 'Loading...',
|
||||
noChannels: 'No channels found',
|
||||
noChannelsHint: 'Click "Sync from Sub2API" or "New Channel" to get started.',
|
||||
syncFromSub2Api: 'Sync from Sub2API',
|
||||
newChannel: 'New Channel',
|
||||
editChannel: 'Edit Channel',
|
||||
colName: 'Name',
|
||||
colPlatform: 'Platform',
|
||||
colRate: 'Rate',
|
||||
colSub2ApiStatus: 'Sub2API Status',
|
||||
colSortOrder: 'Sort',
|
||||
colEnabled: 'Enabled',
|
||||
colActions: 'Actions',
|
||||
edit: 'Edit',
|
||||
delete: 'Delete',
|
||||
deleteConfirm: 'Are you sure you want to delete this channel?',
|
||||
fieldName: 'Channel Name',
|
||||
fieldPlatform: 'Category',
|
||||
fieldRate: 'Rate Multiplier',
|
||||
fieldRateHint: 'e.g. 0.15 means 0.15x',
|
||||
fieldDescription: 'Description',
|
||||
fieldModels: 'Supported Models (one per line)',
|
||||
fieldFeatures: 'Features (one per line)',
|
||||
fieldSortOrder: 'Sort Order',
|
||||
fieldEnabled: 'Enable Channel',
|
||||
fieldGroupId: 'Sub2API Group ID',
|
||||
cancel: 'Cancel',
|
||||
save: 'Save',
|
||||
saving: 'Saving...',
|
||||
syncTitle: 'Sync from Sub2API',
|
||||
syncHint: 'Select groups to import as channels',
|
||||
syncLoading: 'Loading groups...',
|
||||
syncNoGroups: 'No groups found in Sub2API',
|
||||
syncAlreadyExists: 'Already imported',
|
||||
syncImport: 'Import Selected',
|
||||
syncImporting: 'Importing...',
|
||||
loadFailed: 'Failed to load channels',
|
||||
saveFailed: 'Failed to save channel',
|
||||
deleteFailed: 'Failed to delete channel',
|
||||
syncFetchFailed: 'Failed to fetch Sub2API groups',
|
||||
syncImportFailed: 'Failed to import groups',
|
||||
syncImportSuccess: (n: number) => `Successfully imported ${n} channel(s)`,
|
||||
yes: 'Yes',
|
||||
no: 'No',
|
||||
}
|
||||
: {
|
||||
missingToken: '缺少管理员凭证',
|
||||
missingTokenHint: '请从 Sub2API 平台正确访问管理页面',
|
||||
invalidToken: '管理员凭证无效',
|
||||
title: '渠道管理',
|
||||
subtitle: '配置和管理订阅渠道',
|
||||
orders: '订单管理',
|
||||
refresh: '刷新',
|
||||
loading: '加载中...',
|
||||
noChannels: '暂无渠道',
|
||||
noChannelsHint: '点击「从 Sub2API 同步」或「新建渠道」开始创建。',
|
||||
syncFromSub2Api: '从 Sub2API 同步',
|
||||
newChannel: '新建渠道',
|
||||
editChannel: '编辑渠道',
|
||||
colName: '名称',
|
||||
colPlatform: '平台',
|
||||
colRate: '倍率',
|
||||
colSub2ApiStatus: 'Sub2API 状态',
|
||||
colSortOrder: '排序',
|
||||
colEnabled: '启用',
|
||||
colActions: '操作',
|
||||
edit: '编辑',
|
||||
delete: '删除',
|
||||
deleteConfirm: '确定要删除该渠道吗？',
|
||||
fieldName: '渠道名称',
|
||||
fieldPlatform: '分类',
|
||||
fieldRate: '倍率',
|
||||
fieldRateHint: '如 0.15 表示 0.15 倍',
|
||||
fieldDescription: '描述',
|
||||
fieldModels: '支持模型（每行一个）',
|
||||
fieldFeatures: '功能特性（每行一个）',
|
||||
fieldSortOrder: '排序',
|
||||
fieldEnabled: '启用渠道',
|
||||
fieldGroupId: 'Sub2API 分组 ID',
|
||||
cancel: '取消',
|
||||
save: '保存',
|
||||
saving: '保存中...',
|
||||
syncTitle: '从 Sub2API 同步',
|
||||
syncHint: '选择要导入为渠道的分组',
|
||||
syncLoading: '加载分组中...',
|
||||
syncNoGroups: 'Sub2API 中没有找到分组',
|
||||
syncAlreadyExists: '已导入',
|
||||
syncImport: '导入所选',
|
||||
syncImporting: '导入中...',
|
||||
loadFailed: '加载渠道列表失败',
|
||||
saveFailed: '保存渠道失败',
|
||||
deleteFailed: '删除渠道失败',
|
||||
syncFetchFailed: '获取 Sub2API 分组列表失败',
|
||||
syncImportFailed: '导入分组失败',
|
||||
syncImportSuccess: (n: number) => `成功导入 ${n} 个渠道`,
|
||||
yes: '是',
|
||||
no: '否',
|
||||
};
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function parseJsonArray(value: string | null): string[] {
|
||||
if (!value) return [];
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function arrayToLines(value: string | null): string {
|
||||
return parseJsonArray(value).join('\n');
|
||||
}
|
||||
|
||||
function linesToJsonString(lines: string): string {
|
||||
const arr = lines
|
||||
.split('\n')
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean);
|
||||
return JSON.stringify(arr);
|
||||
}
|
||||
|
||||
const emptyForm: ChannelFormData = {
|
||||
group_id: '',
|
||||
name: '',
|
||||
platform: 'claude',
|
||||
rate_multiplier: '1',
|
||||
description: '',
|
||||
models: '',
|
||||
features: '',
|
||||
sort_order: '0',
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
// ── Main Content ──
|
||||
|
||||
function ChannelsContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get('token') || '';
|
||||
const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
|
||||
const uiMode = searchParams.get('ui_mode') || 'standalone';
|
||||
const locale = resolveLocale(searchParams.get('lang'));
|
||||
const isDark = theme === 'dark';
|
||||
const isEmbedded = uiMode === 'embedded';
|
||||
const t = getTexts(locale);
|
||||
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Edit modal state
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
const [editingChannel, setEditingChannel] = useState<Channel | null>(null);
|
||||
const [form, setForm] = useState<ChannelFormData>(emptyForm);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Sync modal state
|
||||
const [syncModalOpen, setSyncModalOpen] = useState(false);
|
||||
const [syncGroups, setSyncGroups] = useState<Sub2ApiGroup[]>([]);
|
||||
const [syncLoading, setSyncLoading] = useState(false);
|
||||
const [syncSelected, setSyncSelected] = useState<Set<number>>(new Set());
|
||||
const [syncImporting, setSyncImporting] = useState(false);
|
||||
|
||||
// ── Fetch channels ──
|
||||
|
||||
const fetchChannels = useCallback(async () => {
|
||||
if (!token) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/channels?token=${encodeURIComponent(token)}`);
|
||||
if (!res.ok) {
|
||||
if (res.status === 401) {
|
||||
setError(t.invalidToken);
|
||||
return;
|
||||
}
|
||||
throw new Error();
|
||||
}
|
||||
const data = await res.json();
|
||||
setChannels(data.channels);
|
||||
} catch {
|
||||
setError(t.loadFailed);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchChannels();
|
||||
}, [fetchChannels]);
|
||||
|
||||
// ── Missing token ──
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
|
||||
<div className="text-center text-red-500">
|
||||
<p className="text-lg font-medium">{t.missingToken}</p>
|
||||
<p className="mt-2 text-sm text-gray-500">{t.missingTokenHint}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Edit modal handlers ──
|
||||
|
||||
const openCreateModal = () => {
|
||||
setEditingChannel(null);
|
||||
setForm(emptyForm);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditModal = (channel: Channel) => {
|
||||
setEditingChannel(channel);
|
||||
setForm({
|
||||
group_id: channel.groupId,
|
||||
name: channel.name,
|
||||
platform: channel.platform,
|
||||
rate_multiplier: String(channel.rateMultiplier),
|
||||
description: channel.description ?? '',
|
||||
models: arrayToLines(channel.models),
|
||||
features: arrayToLines(channel.features),
|
||||
sort_order: String(channel.sortOrder),
|
||||
enabled: channel.enabled,
|
||||
});
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const closeEditModal = () => {
|
||||
setEditModalOpen(false);
|
||||
setEditingChannel(null);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.name.trim() || form.group_id === '' || !form.rate_multiplier) return;
|
||||
setSaving(true);
|
||||
setError('');
|
||||
|
||||
const body = {
|
||||
group_id: Number(form.group_id),
|
||||
name: form.name.trim(),
|
||||
platform: form.platform,
|
||||
rate_multiplier: parseFloat(form.rate_multiplier),
|
||||
description: form.description.trim() || null,
|
||||
models: form.models.trim() ? linesToJsonString(form.models) : null,
|
||||
features: form.features.trim() ? linesToJsonString(form.features) : null,
|
||||
sort_order: parseInt(form.sort_order, 10) || 0,
|
||||
enabled: form.enabled,
|
||||
};
|
||||
|
||||
try {
|
||||
const url = editingChannel ? `/api/admin/channels/${editingChannel.id}` : '/api/admin/channels';
|
||||
const method = editingChannel ? 'PUT' : 'POST';
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
setError(data.error || t.saveFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
closeEditModal();
|
||||
fetchChannels();
|
||||
} catch {
|
||||
setError(t.saveFailed);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Delete handler ──
|
||||
|
||||
const handleDelete = async (channel: Channel) => {
|
||||
if (!confirm(t.deleteConfirm)) return;
|
||||
try {
|
||||
const res = await fetch(`/api/admin/channels/${channel.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
setError(data.error || t.deleteFailed);
|
||||
return;
|
||||
}
|
||||
fetchChannels();
|
||||
} catch {
|
||||
setError(t.deleteFailed);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Toggle enabled ──
|
||||
|
||||
const handleToggleEnabled = async (channel: Channel) => {
|
||||
try {
|
||||
const res = await fetch(`/api/admin/channels/${channel.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ enabled: !channel.enabled }),
|
||||
});
|
||||
if (res.ok) {
|
||||
setChannels((prev) => prev.map((c) => (c.id === channel.id ? { ...c, enabled: !c.enabled } : c)));
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
|
||||
// ── Sync modal handlers ──
|
||||
|
||||
const openSyncModal = async () => {
|
||||
setSyncModalOpen(true);
|
||||
setSyncLoading(true);
|
||||
setSyncSelected(new Set());
|
||||
try {
|
||||
const res = await fetch(`/api/admin/sub2api/groups?token=${encodeURIComponent(token)}`);
|
||||
if (!res.ok) throw new Error();
|
||||
const data = await res.json();
|
||||
setSyncGroups(data.groups ?? []);
|
||||
} catch {
|
||||
setError(t.syncFetchFailed);
|
||||
setSyncModalOpen(false);
|
||||
} finally {
|
||||
setSyncLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const closeSyncModal = () => {
|
||||
setSyncModalOpen(false);
|
||||
setSyncGroups([]);
|
||||
setSyncSelected(new Set());
|
||||
};
|
||||
|
||||
const existingGroupIds = new Set(channels.map((c) => c.groupId));
|
||||
|
||||
const toggleSyncGroup = (id: number) => {
|
||||
setSyncSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSyncImport = async () => {
|
||||
if (syncSelected.size === 0) return;
|
||||
setSyncImporting(true);
|
||||
setError('');
|
||||
let successCount = 0;
|
||||
|
||||
for (const groupId of syncSelected) {
|
||||
const group = syncGroups.find((g) => g.id === groupId);
|
||||
if (!group) continue;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/admin/channels', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
group_id: group.id,
|
||||
name: group.name,
|
||||
platform: group.platform || 'claude',
|
||||
rate_multiplier: group.rate_multiplier ?? 1,
|
||||
description: group.description || null,
|
||||
sort_order: 0,
|
||||
enabled: true,
|
||||
}),
|
||||
});
|
||||
if (res.ok) successCount++;
|
||||
} catch {
|
||||
/* continue with remaining */
|
||||
}
|
||||
}
|
||||
|
||||
setSyncImporting(false);
|
||||
closeSyncModal();
|
||||
|
||||
if (successCount > 0) {
|
||||
fetchChannels();
|
||||
} else {
|
||||
setError(t.syncImportFailed);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Nav params ──
|
||||
|
||||
const navParams = new URLSearchParams();
|
||||
if (token) navParams.set('token', token);
|
||||
if (locale === 'en') navParams.set('lang', 'en');
|
||||
if (isDark) navParams.set('theme', 'dark');
|
||||
if (isEmbedded) navParams.set('ui_mode', 'embedded');
|
||||
|
||||
const btnBase = [
|
||||
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
isDark
|
||||
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
|
||||
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
|
||||
].join(' ');
|
||||
|
||||
// ── Shared input classes ──
|
||||
|
||||
const inputCls = [
|
||||
'w-full rounded-lg border px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500/50',
|
||||
isDark
|
||||
? 'border-slate-600 bg-slate-700 text-slate-100 placeholder-slate-400'
|
||||
: 'border-slate-300 bg-white text-slate-900 placeholder-slate-400',
|
||||
].join(' ');
|
||||
|
||||
const labelCls = ['block text-sm font-medium mb-1', isDark ? 'text-slate-300' : 'text-slate-700'].join(' ');
|
||||
|
||||
// ── Render ──
|
||||
|
||||
return (
|
||||
<PayPageLayout
|
||||
isDark={isDark}
|
||||
isEmbedded={isEmbedded}
|
||||
maxWidth="full"
|
||||
title={t.title}
|
||||
subtitle={t.subtitle}
|
||||
locale={locale}
|
||||
actions={
|
||||
<>
|
||||
<a href={`/admin?${navParams}`} className={btnBase}>
|
||||
{t.orders}
|
||||
</a>
|
||||
<button type="button" onClick={fetchChannels} className={btnBase}>
|
||||
{t.refresh}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openSyncModal}
|
||||
className="inline-flex items-center rounded-lg border border-indigo-500 bg-indigo-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-indigo-600"
|
||||
>
|
||||
{t.syncFromSub2Api}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateModal}
|
||||
className="inline-flex items-center rounded-lg border border-emerald-500 bg-emerald-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-emerald-600"
|
||||
>
|
||||
{t.newChannel}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div
|
||||
className={`mb-4 rounded-lg border p-3 text-sm ${isDark ? 'border-red-800 bg-red-950/50 text-red-400' : 'border-red-200 bg-red-50 text-red-600'}`}
|
||||
>
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 opacity-60 hover:opacity-100">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Channel table */}
|
||||
<div
|
||||
className={[
|
||||
'overflow-x-auto rounded-xl border',
|
||||
isDark ? 'border-slate-700 bg-slate-800/70' : 'border-slate-200 bg-white shadow-sm',
|
||||
].join(' ')}
|
||||
>
|
||||
{loading ? (
|
||||
<div className={`py-12 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{t.loading}</div>
|
||||
) : channels.length === 0 ? (
|
||||
<div className={`py-12 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
<p className="text-base font-medium">{t.noChannels}</p>
|
||||
<p className="mt-1 text-sm opacity-70">{t.noChannelsHint}</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className={isDark ? 'border-b border-slate-700 text-slate-400' : 'border-b border-slate-200 text-slate-500'}>
|
||||
<th className="px-4 py-3 text-left font-medium">{t.colName}</th>
|
||||
<th className="px-4 py-3 text-left font-medium">{t.colPlatform}</th>
|
||||
<th className="px-4 py-3 text-left font-medium">{t.colRate}</th>
|
||||
<th className="px-4 py-3 text-center font-medium">{t.colSub2ApiStatus}</th>
|
||||
<th className="px-4 py-3 text-center font-medium">{t.colSortOrder}</th>
|
||||
<th className="px-4 py-3 text-center font-medium">{t.colEnabled}</th>
|
||||
<th className="px-4 py-3 text-right font-medium">{t.colActions}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{channels.map((channel) => {
|
||||
const pc = PLATFORM_COLORS[channel.platform] ?? PLATFORM_COLORS.claude;
|
||||
return (
|
||||
<tr
|
||||
key={channel.id}
|
||||
className={[
|
||||
'border-b transition-colors',
|
||||
isDark ? 'border-slate-700/50 hover:bg-slate-700/30' : 'border-slate-100 hover:bg-slate-50',
|
||||
].join(' ')}
|
||||
>
|
||||
<td className={`px-4 py-3 font-medium ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<div>{channel.name}</div>
|
||||
<div className={`text-xs ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Group #{channel.groupId}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${isDark ? pc.bg.replace('dark:', '') : pc.bg.split(' ')[0]} ${isDark ? pc.text.replace('dark:', '') : pc.text.split(' ')[0]}`}
|
||||
>
|
||||
{channel.platform}
|
||||
</span>
|
||||
</td>
|
||||
<td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
{channel.rateMultiplier}x
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{channel.groupExists ? (
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400">
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400">
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={`px-4 py-3 text-center ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
{channel.sortOrder}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleEnabled(channel)}
|
||||
className={[
|
||||
'relative inline-flex h-5 w-9 items-center rounded-full transition-colors',
|
||||
channel.enabled ? 'bg-emerald-500' : isDark ? 'bg-slate-600' : 'bg-slate-300',
|
||||
].join(' ')}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
'inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform',
|
||||
channel.enabled ? 'translate-x-4.5' : 'translate-x-0.5',
|
||||
].join(' ')}
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="inline-flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditModal(channel)}
|
||||
className={[
|
||||
'rounded-md px-2 py-1 text-xs font-medium transition-colors',
|
||||
isDark ? 'text-indigo-400 hover:bg-indigo-500/20' : 'text-indigo-600 hover:bg-indigo-50',
|
||||
].join(' ')}
|
||||
>
|
||||
{t.edit}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(channel)}
|
||||
className={[
|
||||
'rounded-md px-2 py-1 text-xs font-medium transition-colors',
|
||||
isDark ? 'text-red-400 hover:bg-red-500/20' : 'text-red-600 hover:bg-red-50',
|
||||
].join(' ')}
|
||||
>
|
||||
{t.delete}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Edit / Create Modal ── */}
|
||||
{editModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={closeEditModal}>
|
||||
<div
|
||||
className={[
|
||||
'relative w-full max-w-lg overflow-y-auto rounded-2xl border p-6 shadow-2xl',
|
||||
isDark ? 'border-slate-700 bg-slate-800' : 'border-slate-200 bg-white',
|
||||
].join(' ')}
|
||||
style={{ maxHeight: '90vh' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className={`mb-5 text-lg font-semibold ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{editingChannel ? t.editChannel : t.newChannel}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Group ID (only for create) */}
|
||||
{!editingChannel && (
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldGroupId}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={form.group_id}
|
||||
onChange={(e) => setForm({ ...form, group_id: e.target.value ? Number(e.target.value) : '' })}
|
||||
className={inputCls}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldName}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
className={inputCls}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Platform */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldPlatform}</label>
|
||||
<select
|
||||
value={form.platform}
|
||||
onChange={(e) => setForm({ ...form, platform: e.target.value })}
|
||||
className={inputCls}
|
||||
>
|
||||
{PLATFORMS.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Rate Multiplier */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldRate}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.0001"
|
||||
min="0"
|
||||
value={form.rate_multiplier}
|
||||
onChange={(e) => setForm({ ...form, rate_multiplier: e.target.value })}
|
||||
className={inputCls}
|
||||
required
|
||||
/>
|
||||
<p className={`mt-1 text-xs ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>{t.fieldRateHint}</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldDescription}</label>
|
||||
<textarea
|
||||
value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
rows={2}
|
||||
className={inputCls}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Models */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldModels}</label>
|
||||
<textarea
|
||||
value={form.models}
|
||||
onChange={(e) => setForm({ ...form, models: e.target.value })}
|
||||
rows={4}
|
||||
className={[inputCls, 'font-mono text-xs'].join(' ')}
|
||||
placeholder="claude-sonnet-4-20250514 claude-opus-4-20250514"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldFeatures}</label>
|
||||
<textarea
|
||||
value={form.features}
|
||||
onChange={(e) => setForm({ ...form, features: e.target.value })}
|
||||
rows={3}
|
||||
className={[inputCls, 'font-mono text-xs'].join(' ')}
|
||||
placeholder="Extended thinking Vision Tool use"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sort Order */}
|
||||
<div>
|
||||
<label className={labelCls}>{t.fieldSortOrder}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={form.sort_order}
|
||||
onChange={(e) => setForm({ ...form, sort_order: e.target.value })}
|
||||
className={inputCls}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Enabled */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setForm({ ...form, enabled: !form.enabled })}
|
||||
className={[
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
|
||||
form.enabled ? 'bg-emerald-500' : isDark ? 'bg-slate-600' : 'bg-slate-300',
|
||||
].join(' ')}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
'inline-block h-4 w-4 rounded-full bg-white transition-transform',
|
||||
form.enabled ? 'translate-x-6' : 'translate-x-1',
|
||||
].join(' ')}
|
||||
/>
|
||||
</button>
|
||||
<span className={`text-sm ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>{t.fieldEnabled}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeEditModal}
|
||||
className={[
|
||||
'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
|
||||
isDark ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100',
|
||||
].join(' ')}
|
||||
>
|
||||
{t.cancel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={saving || !form.name.trim() || form.group_id === '' || !form.rate_multiplier}
|
||||
className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saving ? t.saving : t.save}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Sync from Sub2API Modal ── */}
|
||||
{syncModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={closeSyncModal}>
|
||||
<div
|
||||
className={[
|
||||
'relative w-full max-w-lg overflow-y-auto rounded-2xl border p-6 shadow-2xl',
|
||||
isDark ? 'border-slate-700 bg-slate-800' : 'border-slate-200 bg-white',
|
||||
].join(' ')}
|
||||
style={{ maxHeight: '80vh' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className={`mb-1 text-lg font-semibold ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{t.syncTitle}
|
||||
</h2>
|
||||
<p className={`mb-4 text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>{t.syncHint}</p>
|
||||
|
||||
{syncLoading ? (
|
||||
<div className={`py-8 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{t.syncLoading}</div>
|
||||
) : syncGroups.length === 0 ? (
|
||||
<div className={`py-8 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{t.syncNoGroups}</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{syncGroups.map((group) => {
|
||||
const alreadyImported = existingGroupIds.has(group.id);
|
||||
return (
|
||||
<label
|
||||
key={group.id}
|
||||
className={[
|
||||
'flex items-start gap-3 rounded-lg border p-3 transition-colors',
|
||||
alreadyImported
|
||||
? isDark
|
||||
? 'border-slate-700 bg-slate-700/30 opacity-60'
|
||||
: 'border-slate-200 bg-slate-50 opacity-60'
|
||||
: syncSelected.has(group.id)
|
||||
? isDark
|
||||
? 'border-indigo-500/50 bg-indigo-500/10'
|
||||
: 'border-indigo-300 bg-indigo-50'
|
||||
: isDark
|
||||
? 'border-slate-700 hover:border-slate-600'
|
||||
: 'border-slate-200 hover:border-slate-300',
|
||||
alreadyImported ? 'cursor-not-allowed' : 'cursor-pointer',
|
||||
].join(' ')}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={alreadyImported}
|
||||
checked={syncSelected.has(group.id)}
|
||||
onChange={() => toggleSyncGroup(group.id)}
|
||||
className="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{group.name}
|
||||
</span>
|
||||
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
#{group.id}
|
||||
</span>
|
||||
{(() => {
|
||||
const gpc = PLATFORM_COLORS[group.platform] ?? PLATFORM_COLORS.claude;
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${isDark ? gpc.bg.replace('dark:', '') : gpc.bg.split(' ')[0]} ${isDark ? gpc.text.replace('dark:', '') : gpc.text.split(' ')[0]}`}
|
||||
>
|
||||
{group.platform}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
{alreadyImported && (
|
||||
<span className="text-[10px] text-amber-500 font-medium">{t.syncAlreadyExists}</span>
|
||||
)}
|
||||
</div>
|
||||
{group.description && (
|
||||
<p className={`mt-0.5 text-xs truncate ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
{group.description}
|
||||
</p>
|
||||
)}
|
||||
<p className={`mt-0.5 text-xs ${isDark ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{t.colRate}: {group.rate_multiplier}x
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sync actions */}
|
||||
<div className="mt-5 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeSyncModal}
|
||||
className={[
|
||||
'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
|
||||
isDark ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100',
|
||||
].join(' ')}
|
||||
>
|
||||
{t.cancel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSyncImport}
|
||||
disabled={syncImporting || syncSelected.size === 0}
|
||||
className="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{syncImporting ? t.syncImporting : `${t.syncImport} (${syncSelected.size})`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</PayPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelsPageFallback() {
|
||||
const searchParams = useSearchParams();
|
||||
const locale = resolveLocale(searchParams.get('lang'));
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="text-gray-500">{locale === 'en' ? 'Loading...' : '加载中...'}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChannelsPage() {
|
||||
return (
|
||||
<Suspense fallback={<ChannelsPageFallback />}>
|
||||
<ChannelsContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user