964 lines
51 KiB
TypeScript
964 lines
51 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { adminAPI } from '@/api';
|
|
import McpMarketTab from './McpMarketTab';
|
|
|
|
// ============================================================
|
|
// Types
|
|
// ============================================================
|
|
interface MarketAppItem {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
category: string;
|
|
tags: string | null;
|
|
source: string;
|
|
publisher_name: string | null;
|
|
description: string | null;
|
|
icon: string | null;
|
|
price: number;
|
|
is_member_free: boolean;
|
|
featured: boolean;
|
|
featured_order: number;
|
|
status: string;
|
|
rating_avg: number;
|
|
review_count: number;
|
|
install_count: number;
|
|
version: string;
|
|
created_at: string | null;
|
|
updated_at: string | null;
|
|
tutorial?: string;
|
|
skill_content?: string;
|
|
}
|
|
|
|
interface OverviewData {
|
|
total_apps: number;
|
|
published: number;
|
|
pending: number;
|
|
removed: number;
|
|
total_installs: number;
|
|
total_purchases: number;
|
|
total_revenue: number;
|
|
total_reviews: number;
|
|
overall_rating: number;
|
|
by_type: Record<string, number>;
|
|
by_category: Record<string, number>;
|
|
trend_7d: Array<{ date: string; new_apps: number; new_installs: number }>;
|
|
}
|
|
|
|
interface CouponItem {
|
|
id: string;
|
|
code: string;
|
|
type: string;
|
|
value: number;
|
|
min_amount: number;
|
|
valid_from: string | null;
|
|
valid_to: string | null;
|
|
total_count: number;
|
|
used_count: number;
|
|
status: string;
|
|
}
|
|
|
|
interface ReviewItem {
|
|
id: string;
|
|
rating: number;
|
|
content: string;
|
|
username: string;
|
|
avatar: string | null;
|
|
app_name: string;
|
|
app_icon: string | null;
|
|
created_at: string | null;
|
|
}
|
|
|
|
const CATEGORY_LABELS: Record<string, string> = {
|
|
coding: '编程开发', assistant: '智能助手', tools: '效率工具',
|
|
writing: '内容创作', education: '教育培训', marketing: '营销推广',
|
|
data: '数据分析', design: '设计创意', business: '企业管理', other: '其他',
|
|
};
|
|
|
|
const TYPE_LABELS: Record<string, string> = {
|
|
skill: 'Skills工具', agent: '智能Agent', mcp: 'MCP协议',
|
|
};
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
pending: '待审核', published: '已发布', removed: '已下架',
|
|
};
|
|
|
|
const STATUS_COLORS: Record<string, string> = {
|
|
pending: 'var(--color-warning)', published: 'var(--color-success)', removed: 'var(--color-danger)',
|
|
};
|
|
|
|
// ============================================================
|
|
// Icon helpers
|
|
// ============================================================
|
|
const Icon = ({ name, size = 18, color = 'currentColor' }: { name: string; size?: number; color?: string }) => {
|
|
const icons: Record<string, string> = {
|
|
chart: 'M3 3v18h18M7 14l4-4 4 4 5-5', store: 'M3 9l1-5h16l1 5M4 9v11h16V9M9 14h6',
|
|
check: 'M20 6L9 17l-5-5', close: 'M18 6L6 18M6 6l12 12', edit: 'M11 4H4v16h16v-7M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z',
|
|
star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
|
|
trash: 'M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2',
|
|
tag: 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z',
|
|
plus: 'M12 5v14M5 12h14', search: 'M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-4.35-4.35',
|
|
download: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3',
|
|
refresh: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15',
|
|
trending: 'M23 6l-9.5 9.5-5-5L1 18', eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z',
|
|
};
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<path d={icons[name] || ''} />
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Main Component
|
|
// ============================================================
|
|
const Market: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'apps' | 'pending' | 'coupons' | 'reviews' | 'mcp'>('overview');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// Overview data
|
|
const [overview, setOverview] = useState<OverviewData | null>(null);
|
|
const [topApps, setTopApps] = useState<MarketAppItem[]>([]);
|
|
const [topMetric, setTopMetric] = useState<string>('installs');
|
|
|
|
// Apps list
|
|
const [apps, setApps] = useState<MarketAppItem[]>([]);
|
|
const [appsTotal, setAppsTotal] = useState(0);
|
|
const [appsPage, setAppsPage] = useState(1);
|
|
const [filterStatus, setFilterStatus] = useState('');
|
|
const [filterType, setFilterType] = useState('');
|
|
const [filterCategory, setFilterCategory] = useState('');
|
|
const [filterKeyword, setFilterKeyword] = useState('');
|
|
|
|
// Pending
|
|
const [pendingApps, setPendingApps] = useState<MarketAppItem[]>([]);
|
|
const [pendingTotal, setPendingTotal] = useState(0);
|
|
|
|
// Coupons
|
|
const [coupons, setCoupons] = useState<CouponItem[]>([]);
|
|
const [couponModal, setCouponModal] = useState(false);
|
|
const [editingCoupon, setEditingCoupon] = useState<CouponItem | null>(null);
|
|
|
|
// Reviews
|
|
const [reviews, setReviews] = useState<ReviewItem[]>([]);
|
|
|
|
// Edit modal
|
|
const [editApp, setEditApp] = useState<MarketAppItem | null>(null);
|
|
|
|
const loadOverview = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getMarketOverview();
|
|
if (res?.code === 0) setOverview(res.data);
|
|
const topRes = await adminAPI.getTopApps(topMetric, 10);
|
|
if (topRes?.code === 0) setTopApps(topRes.data || []);
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
}, [topMetric]);
|
|
|
|
const loadApps = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (filterStatus) params.set('status', filterStatus);
|
|
if (filterType) params.set('app_type', filterType);
|
|
if (filterCategory) params.set('category', filterCategory);
|
|
if (filterKeyword) params.set('keyword', filterKeyword);
|
|
params.set('page', String(appsPage));
|
|
params.set('page_size', '20');
|
|
const res = await adminAPI.getAdminMarketApps(params.toString());
|
|
if (res?.code === 0) {
|
|
const d = res.data as any;
|
|
setApps(d?.items || []);
|
|
setAppsTotal(d?.total || 0);
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
}, [filterStatus, filterType, filterCategory, filterKeyword, appsPage]);
|
|
|
|
const loadPending = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getPendingApps();
|
|
if (res?.code === 0) {
|
|
const d = res.data as any;
|
|
setPendingApps(d?.items || d || []);
|
|
setPendingTotal(d?.total || (Array.isArray(d) ? d.length : 0));
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
const loadCoupons = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getCoupons();
|
|
if (res?.code === 0) { const d = res.data as any; setCoupons(d?.items || d || []); }
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
const loadReviews = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getRecentReviews();
|
|
if (res?.code === 0) setReviews(res.data || []);
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'overview') loadOverview();
|
|
else if (activeTab === 'apps') loadApps();
|
|
else if (activeTab === 'pending') loadPending();
|
|
else if (activeTab === 'coupons') loadCoupons();
|
|
else if (activeTab === 'reviews') loadReviews();
|
|
}, [activeTab, loadOverview, loadApps, loadPending, loadCoupons, loadReviews]);
|
|
|
|
// Actions
|
|
const handleApprove = async (id: string) => {
|
|
if (!confirm('确认审核通过？')) return;
|
|
try {
|
|
await adminAPI.approveApp(id);
|
|
loadPending();
|
|
loadOverview();
|
|
} catch (e) { alert('操作失败'); }
|
|
};
|
|
|
|
const handleReject = async (id: string) => {
|
|
const reason = prompt('拒绝原因：', '');
|
|
if (reason === null) return;
|
|
try {
|
|
await adminAPI.rejectApp(id + '?reason=' + encodeURIComponent(reason));
|
|
loadPending();
|
|
} catch (e) { alert('操作失败'); }
|
|
};
|
|
|
|
const handleToggleFeatured = async (app: MarketAppItem) => {
|
|
try {
|
|
await adminAPI.setFeaturedApp(app.id, !app.featured, app.featured ? 0 : 1);
|
|
loadApps();
|
|
} catch (e) { alert('操作失败'); }
|
|
};
|
|
|
|
const handleDeleteApp = async (id: string, name: string) => {
|
|
if (!confirm(`确认删除应用「${name}」？此操作不可恢复！`)) return;
|
|
try {
|
|
await adminAPI.deleteMarketApp(id);
|
|
loadApps();
|
|
} catch (e) { alert('操作失败'); }
|
|
};
|
|
|
|
const handleDeleteCoupon = async (id: string) => {
|
|
if (!confirm('确认删除此优惠券？')) return;
|
|
try {
|
|
await adminAPI.deleteCoupon(id);
|
|
loadCoupons();
|
|
} catch (e) { alert('操作失败'); }
|
|
};
|
|
|
|
const tabs = [
|
|
{ key: 'overview', label: '数据总览', icon: 'chart' },
|
|
{ key: 'apps', label: '应用管理', icon: 'store' },
|
|
{ key: 'pending', label: `待审核${pendingTotal > 0 ? `(${pendingTotal})` : ''}`, icon: 'eye' },
|
|
{ key: 'coupons', label: '优惠券', icon: 'tag' },
|
|
{ key: 'reviews', label: '用户评价', icon: 'star' },
|
|
{ key: 'mcp', label: 'MCP工具', icon: 'tool' },
|
|
] as const;
|
|
|
|
return (
|
|
<div style={{ padding: '24px', maxWidth: '1400px', margin: '0 auto' }}>
|
|
{/* Header */}
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<h1 style={{ fontSize: '24px', fontWeight: 700, margin: '0 0 8px', color: 'var(--color-text-primary)' }}>
|
|
市场管理
|
|
</h1>
|
|
<p style={{ fontSize: '14px', color: 'var(--color-text-tertiary)', margin: 0 }}>
|
|
管理应用市场、审核提交、分析数据、配置优惠券
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div style={{ display: 'flex', gap: '4px', marginBottom: '24px', borderBottom: '1px solid var(--color-border)', paddingBottom: '0' }}>
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
style={{
|
|
padding: '10px 20px',
|
|
border: 'none',
|
|
background: activeTab === tab.key ? 'var(--color-primary)' : 'transparent',
|
|
color: activeTab === tab.key ? '#fff' : 'var(--color-text-secondary)',
|
|
borderRadius: '8px 8px 0 0',
|
|
cursor: 'pointer',
|
|
fontSize: '14px',
|
|
fontWeight: 500,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
<Icon name={tab.icon} size={16} />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Loading */}
|
|
{loading && (
|
|
<div style={{ textAlign: 'center', padding: '60px', color: 'var(--color-text-tertiary)' }}>
|
|
<div className="audit-spinner" style={{ margin: '0 auto 12px' }} />
|
|
<span>加载中...</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{!loading && activeTab === 'overview' && overview && (
|
|
<MarketOverview overview={overview} topApps={topApps} topMetric={topMetric} onMetricChange={setTopMetric} />
|
|
)}
|
|
|
|
{!loading && activeTab === 'apps' && (
|
|
<AppsManagement
|
|
apps={apps} total={appsTotal} page={appsPage} onPageChange={setAppsPage}
|
|
filterStatus={filterStatus} setFilterStatus={setFilterStatus}
|
|
filterType={filterType} setFilterType={setFilterType}
|
|
filterCategory={filterCategory} setFilterCategory={setFilterCategory}
|
|
filterKeyword={filterKeyword} setFilterKeyword={setFilterKeyword}
|
|
onEdit={setEditApp} onToggleFeatured={handleToggleFeatured} onDelete={handleDeleteApp}
|
|
/>
|
|
)}
|
|
|
|
{!loading && activeTab === 'pending' && (
|
|
<PendingApps apps={pendingApps} onApprove={handleApprove} onReject={handleReject} />
|
|
)}
|
|
|
|
{!loading && activeTab === 'coupons' && (
|
|
<CouponsManagement
|
|
coupons={coupons} onAdd={() => { setEditingCoupon(null); setCouponModal(true); }}
|
|
onEdit={(c) => { setEditingCoupon(c); setCouponModal(true); }}
|
|
onDelete={handleDeleteCoupon}
|
|
/>
|
|
)}
|
|
|
|
{!loading && activeTab === 'reviews' && (
|
|
<ReviewsList reviews={reviews} />
|
|
)}
|
|
|
|
{!loading && activeTab === 'mcp' && (
|
|
<McpMarketTab />
|
|
)}
|
|
|
|
{/* Edit Modal */}
|
|
{editApp && (
|
|
<EditAppModal app={editApp} onClose={() => setEditApp(null)} onSaved={() => { setEditApp(null); loadApps(); }} />
|
|
)}
|
|
|
|
{/* Coupon Modal */}
|
|
{couponModal && (
|
|
<CouponModal coupon={editingCoupon} onClose={() => setCouponModal(false)} onSaved={() => { setCouponModal(false); loadCoupons(); }} />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Overview Component
|
|
// ============================================================
|
|
const MarketOverview: React.FC<{ overview: OverviewData; topApps: MarketAppItem[]; topMetric: string; onMetricChange: (v: string) => void }> = ({
|
|
overview, topApps, topMetric, onMetricChange
|
|
}) => {
|
|
const stats = [
|
|
{ label: '总应用数', value: overview.total_apps, sub: `${overview.published} 已发布`, color: 'var(--color-primary)' },
|
|
{ label: '总安装量', value: overview.total_installs, sub: `${overview.pending} 待审核`, color: 'var(--color-success)' },
|
|
{ label: '总收入', value: `¥${overview.total_revenue.toFixed(2)}`, sub: `${overview.total_purchases} 笔购买`, color: 'var(--color-warning)' },
|
|
{ label: '平均评分', value: overview.overall_rating.toFixed(1), sub: `${overview.total_reviews} 条评价`, color: 'var(--color-danger)' },
|
|
];
|
|
|
|
const maxTrend = Math.max(...overview.trend_7d.map(t => Math.max(t.new_apps, t.new_installs)), 1);
|
|
|
|
return (
|
|
<div>
|
|
{/* Stat cards */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', marginBottom: '24px' }}>
|
|
{stats.map((s, i) => (
|
|
<div key={i} style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '20px',
|
|
border: '1px solid var(--color-border)',
|
|
}}>
|
|
<div style={{ fontSize: '13px', color: 'var(--color-text-tertiary)', marginBottom: '8px' }}>{s.label}</div>
|
|
<div style={{ fontSize: '28px', fontWeight: 700, color: s.color }}>{s.value}</div>
|
|
<div style={{ fontSize: '12px', color: 'var(--color-text-tertiary)', marginTop: '4px' }}>{s.sub}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 7-day trend */}
|
|
<div style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '24px',
|
|
border: '1px solid var(--color-border)', marginBottom: '24px',
|
|
}}>
|
|
<h3 style={{ fontSize: '16px', fontWeight: 600, margin: '0 0 20px', color: 'var(--color-text-primary)' }}>
|
|
7日趋势
|
|
</h3>
|
|
<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-end', height: '180px' }}>
|
|
{overview.trend_7d.map((t, i) => (
|
|
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
|
<div style={{ display: 'flex', gap: '4px', alignItems: 'flex-end', height: '140px' }}>
|
|
<div style={{
|
|
width: '16px', height: `${(t.new_apps / maxTrend) * 130 + 4}px`,
|
|
background: 'var(--color-primary)', borderRadius: '4px 4px 0 0',
|
|
minHeight: '4px', transition: 'height 0.3s',
|
|
}} title={`新应用: ${t.new_apps}`} />
|
|
<div style={{
|
|
width: '16px', height: `${(t.new_installs / maxTrend) * 130 + 4}px`,
|
|
background: 'var(--color-success)', borderRadius: '4px 4px 0 0',
|
|
minHeight: '4px', transition: 'height 0.3s',
|
|
}} title={`新安装: ${t.new_installs}`} />
|
|
</div>
|
|
<span style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>
|
|
{t.date.slice(5)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '24px', marginTop: '16px', fontSize: '12px' }}>
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
|
<span style={{ width: '12px', height: '12px', background: 'var(--color-primary)', borderRadius: '3px' }} />
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>新应用</span>
|
|
</span>
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
|
<span style={{ width: '12px', height: '12px', background: 'var(--color-success)', borderRadius: '3px' }} />
|
|
<span style={{ color: 'var(--color-text-secondary)' }}>新安装</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category distribution + Top apps */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '16px' }}>
|
|
{/* Categories */}
|
|
<div style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '20px',
|
|
border: '1px solid var(--color-border)',
|
|
}}>
|
|
<h3 style={{ fontSize: '14px', fontWeight: 600, margin: '0 0 16px' }}>分类分布</h3>
|
|
{Object.entries(overview.by_category).map(([cat, cnt]) => (
|
|
<div key={cat} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<span style={{ fontSize: '13px', color: 'var(--color-text-secondary)' }}>{CATEGORY_LABELS[cat] || cat}</span>
|
|
<span style={{ fontSize: '13px', fontWeight: 600 }}>{cnt}</span>
|
|
</div>
|
|
))}
|
|
{Object.keys(overview.by_category).length === 0 && (
|
|
<div style={{ fontSize: '13px', color: 'var(--color-text-tertiary)', textAlign: 'center', padding: '20px' }}>暂无数据</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Top apps */}
|
|
<div style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '20px',
|
|
border: '1px solid var(--color-border)',
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
|
<h3 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>热门应用</h3>
|
|
<select
|
|
value={topMetric}
|
|
onChange={(e) => onMetricChange(e.target.value)}
|
|
style={{
|
|
padding: '4px 12px', borderRadius: '6px', border: '1px solid var(--color-border)',
|
|
background: 'var(--color-bg-primary)', color: 'var(--color-text-primary)', fontSize: '12px',
|
|
}}
|
|
>
|
|
<option value="installs">按安装量</option>
|
|
<option value="rating">按评分</option>
|
|
<option value="revenue">按收入</option>
|
|
<option value="reviews">按评价数</option>
|
|
</select>
|
|
</div>
|
|
{topApps.map((app, i) => (
|
|
<div key={app.id} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '8px 0', borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<span style={{ fontSize: '16px', fontWeight: 700, color: i < 3 ? 'var(--color-warning)' : 'var(--color-text-tertiary)', width: '24px' }}>
|
|
#{i + 1}
|
|
</span>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: '13px', fontWeight: 500, color: 'var(--color-text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{app.name}
|
|
</div>
|
|
<div style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>
|
|
{TYPE_LABELS[app.type] || app.type} · {CATEGORY_LABELS[app.category] || app.category}
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: 'right', fontSize: '13px', fontWeight: 600 }}>
|
|
{topMetric === 'installs' && `${app.install_count}`}
|
|
{topMetric === 'rating' && `${app.rating_avg.toFixed(1)}`}
|
|
{topMetric === 'reviews' && `${app.review_count}`}
|
|
{topMetric === 'revenue' && `¥${(app as any).revenue?.toFixed(0) || 0}`}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{topApps.length === 0 && (
|
|
<div style={{ fontSize: '13px', color: 'var(--color-text-tertiary)', textAlign: 'center', padding: '20px' }}>暂无数据</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Apps Management Component
|
|
// ============================================================
|
|
const AppsManagement: React.FC<{
|
|
apps: MarketAppItem[]; total: number; page: number; onPageChange: (p: number) => void;
|
|
filterStatus: string; setFilterStatus: (v: string) => void;
|
|
filterType: string; setFilterType: (v: string) => void;
|
|
filterCategory: string; setFilterCategory: (v: string) => void;
|
|
filterKeyword: string; setFilterKeyword: (v: string) => void;
|
|
onEdit: (app: MarketAppItem) => void; onToggleFeatured: (app: MarketAppItem) => void; onDelete: (id: string, name: string) => void;
|
|
}> = ({ apps, total, page, onPageChange, filterStatus, setFilterStatus, filterType, setFilterType, filterCategory, setFilterCategory, filterKeyword, setFilterKeyword, onEdit, onToggleFeatured, onDelete }) => {
|
|
const totalPages = Math.ceil(total / 20);
|
|
|
|
return (
|
|
<div>
|
|
{/* Filters */}
|
|
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
|
|
<input
|
|
placeholder="搜索应用..."
|
|
value={filterKeyword}
|
|
onChange={(e) => setFilterKeyword(e.target.value)}
|
|
style={{ flex: 1, minWidth: '200px', padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}
|
|
/>
|
|
<select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
<option value="">全部状态</option>
|
|
<option value="published">已发布</option>
|
|
<option value="pending">待审核</option>
|
|
<option value="removed">已下架</option>
|
|
</select>
|
|
<select value={filterType} onChange={(e) => setFilterType(e.target.value)} style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
<option value="">全部类型</option>
|
|
<option value="skill">Skills工具</option>
|
|
<option value="agent">智能Agent</option>
|
|
<option value="mcp">MCP协议</option>
|
|
</select>
|
|
<select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
<option value="">全部分类</option>
|
|
{Object.entries(CATEGORY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div style={{ background: 'var(--color-bg-secondary)', borderRadius: '12px', border: '1px solid var(--color-border)', overflow: 'hidden' }}>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: '1px solid var(--color-border)' }}>
|
|
{['应用', '类型', '分类', '价格', '安装', '评分', '状态', '推荐', '操作'].map(h => (
|
|
<th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--color-text-tertiary)' }}>{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{apps.map(app => (
|
|
<tr key={app.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
{app.icon && <img src={app.icon} alt="" style={{ width: '32px', height: '32px', borderRadius: '6px' }} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />}
|
|
<div>
|
|
<div style={{ fontSize: '13px', fontWeight: 500 }}>{app.name}</div>
|
|
<div style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>{app.publisher_name || '—'}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{TYPE_LABELS[app.type] || app.type}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{CATEGORY_LABELS[app.category] || app.category}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>
|
|
{app.price === 0 ? <span style={{ color: 'var(--color-success)' }}>免费</span> : `¥${app.price}`}
|
|
{app.is_member_free && <span style={{ fontSize: '10px', color: 'var(--color-warning)', marginLeft: '4px' }}>会员免费</span>}
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{app.install_count}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>
|
|
{app.rating_avg > 0 ? `★ ${app.rating_avg.toFixed(1)} (${app.review_count})` : '—'}
|
|
</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: STATUS_COLORS[app.status] || 'var(--color-text-tertiary)', color: '#fff' }}>
|
|
{STATUS_LABELS[app.status] || app.status}
|
|
</span>
|
|
</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<button
|
|
onClick={() => onToggleFeatured(app)}
|
|
style={{
|
|
padding: '4px 8px', borderRadius: '4px', border: 'none', cursor: 'pointer', fontSize: '12px',
|
|
background: app.featured ? 'var(--color-warning)' : 'var(--color-bg-tertiary)',
|
|
color: app.featured ? '#fff' : 'var(--color-text-tertiary)',
|
|
}}
|
|
>
|
|
{app.featured ? '已推荐' : '推荐'}
|
|
</button>
|
|
</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<div style={{ display: 'flex', gap: '4px' }}>
|
|
<button onClick={() => onEdit(app)} style={{ padding: '4px 8px', borderRadius: '4px', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-text-secondary)', cursor: 'pointer', fontSize: '12px' }}>编辑</button>
|
|
<button onClick={() => onDelete(app.id, app.name)} style={{ padding: '4px 8px', borderRadius: '4px', border: '1px solid var(--color-danger)', background: 'transparent', color: 'var(--color-danger)', cursor: 'pointer', fontSize: '12px' }}>删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{apps.length === 0 && (
|
|
<div style={{ textAlign: 'center', padding: '40px', color: 'var(--color-text-tertiary)', fontSize: '14px' }}>暂无应用</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '16px' }}>
|
|
<button disabled={page <= 1} onClick={() => onPageChange(page - 1)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-secondary)', cursor: page <= 1 ? 'not-allowed' : 'pointer', opacity: page <= 1 ? 0.5 : 1 }}>上一页</button>
|
|
<span style={{ padding: '6px 12px', fontSize: '13px', color: 'var(--color-text-secondary)' }}>{page} / {totalPages}</span>
|
|
<button disabled={page >= totalPages} onClick={() => onPageChange(page + 1)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-secondary)', cursor: page >= totalPages ? 'not-allowed' : 'pointer', opacity: page >= totalPages ? 0.5 : 1 }}>下一页</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Pending Apps Component
|
|
// ============================================================
|
|
const PendingApps: React.FC<{ apps: MarketAppItem[]; onApprove: (id: string) => void; onReject: (id: string) => void }> = ({ apps, onApprove, onReject }) => (
|
|
<div>
|
|
{apps.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '60px', color: 'var(--color-text-tertiary)' }}>
|
|
<Icon name="check" size={48} color="var(--color-success)" />
|
|
<p style={{ marginTop: '16px', fontSize: '14px' }}>没有待审核的应用</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
{apps.map(app => (
|
|
<div key={app.id} style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '20px',
|
|
border: '1px solid var(--color-border)', display: 'flex', gap: '16px',
|
|
}}>
|
|
{app.icon ? (
|
|
<img src={app.icon} alt="" style={{ width: '56px', height: '56px', borderRadius: '10px' }} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
|
|
) : (
|
|
<div style={{ width: '56px', height: '56px', borderRadius: '10px', background: 'var(--color-bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Icon name="store" size={24} color="var(--color-text-tertiary)" />
|
|
</div>
|
|
)}
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
|
|
<h4 style={{ margin: 0, fontSize: '15px', fontWeight: 600 }}>{app.name}</h4>
|
|
<span style={{ fontSize: '11px', padding: '2px 6px', borderRadius: '4px', background: 'var(--color-bg-tertiary)', color: 'var(--color-text-tertiary)' }}>
|
|
{TYPE_LABELS[app.type] || app.type}
|
|
</span>
|
|
<span style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>
|
|
by {app.publisher_name || 'Unknown'}
|
|
</span>
|
|
</div>
|
|
<p style={{ margin: '0 0 8px', fontSize: '13px', color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
|
|
{app.description || '无描述'}
|
|
</p>
|
|
{app.skill_content && (
|
|
<details style={{ marginTop: '8px' }}>
|
|
<summary style={{ cursor: 'pointer', fontSize: '12px', color: 'var(--color-text-tertiary)' }}>查看 Skill 内容</summary>
|
|
<pre style={{ marginTop: '8px', padding: '12px', background: 'var(--color-bg-tertiary)', borderRadius: '8px', fontSize: '12px', overflow: 'auto', maxHeight: '200px', color: 'var(--color-text-secondary)' }}>
|
|
{app.skill_content.slice(0, 500)}{app.skill_content.length > 500 ? '...' : ''}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
<div style={{ display: 'flex', gap: '8px', marginTop: '12px' }}>
|
|
<button onClick={() => onApprove(app.id)} style={{ padding: '6px 16px', borderRadius: '6px', border: 'none', background: 'var(--color-success)', color: '#fff', cursor: 'pointer', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px' }}>
|
|
<Icon name="check" size={14} /> 审核通过
|
|
</button>
|
|
<button onClick={() => onReject(app.id)} style={{ padding: '6px 16px', borderRadius: '6px', border: '1px solid var(--color-danger)', background: 'transparent', color: 'var(--color-danger)', cursor: 'pointer', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px' }}>
|
|
<Icon name="close" size={14} /> 拒绝
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// Coupons Component
|
|
// ============================================================
|
|
const CouponsManagement: React.FC<{
|
|
coupons: CouponItem[]; onAdd: () => void; onEdit: (c: CouponItem) => void; onDelete: (id: string) => void;
|
|
}> = ({ coupons, onAdd, onEdit, onDelete }) => (
|
|
<div>
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<button onClick={onAdd} style={{ padding: '8px 16px', borderRadius: '8px', border: 'none', background: 'var(--color-primary)', color: '#fff', cursor: 'pointer', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
|
<Icon name="plus" size={16} /> 创建优惠券
|
|
</button>
|
|
</div>
|
|
<div style={{ background: 'var(--color-bg-secondary)', borderRadius: '12px', border: '1px solid var(--color-border)', overflow: 'hidden' }}>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: '1px solid var(--color-border)' }}>
|
|
{['优惠券码', '类型', '面值', '最低消费', '有效期', '使用情况', '状态', '操作'].map(h => (
|
|
<th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 600, color: 'var(--color-text-tertiary)' }}>{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{coupons.map(c => (
|
|
<tr key={c.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', fontWeight: 500, fontFamily: 'monospace' }}>{c.code}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{c.type === 'fixed' ? '固定金额' : '百分比'}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{c.type === 'fixed' ? `¥${c.value}` : `${c.value}%`}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>¥{c.min_amount}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '12px', color: 'var(--color-text-tertiary)' }}>
|
|
{c.valid_from?.slice(0, 10) || '—'} ~ {c.valid_to?.slice(0, 10) || '长期'}
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px' }}>{c.used_count} / {c.total_count}</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: c.status === 'active' ? 'var(--color-success)' : 'var(--color-text-tertiary)', color: '#fff' }}>
|
|
{c.status === 'active' ? '有效' : '已停用'}
|
|
</span>
|
|
</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<div style={{ display: 'flex', gap: '4px' }}>
|
|
<button onClick={() => onEdit(c)} style={{ padding: '4px 8px', borderRadius: '4px', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-text-secondary)', cursor: 'pointer', fontSize: '12px' }}>编辑</button>
|
|
<button onClick={() => onDelete(c.id)} style={{ padding: '4px 8px', borderRadius: '4px', border: '1px solid var(--color-danger)', background: 'transparent', color: 'var(--color-danger)', cursor: 'pointer', fontSize: '12px' }}>删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{coupons.length === 0 && (
|
|
<div style={{ textAlign: 'center', padding: '40px', color: 'var(--color-text-tertiary)', fontSize: '14px' }}>暂无优惠券</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// Reviews List Component
|
|
// ============================================================
|
|
const ReviewsList: React.FC<{ reviews: ReviewItem[] }> = ({ reviews }) => (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
{reviews.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '60px', color: 'var(--color-text-tertiary)' }}>
|
|
<Icon name="star" size={48} color="var(--color-text-tertiary)" />
|
|
<p style={{ marginTop: '16px', fontSize: '14px' }}>暂无用户评价</p>
|
|
</div>
|
|
) : (
|
|
reviews.map(r => (
|
|
<div key={r.id} style={{
|
|
background: 'var(--color-bg-secondary)', borderRadius: '12px', padding: '16px',
|
|
border: '1px solid var(--color-border)',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
|
|
{r.avatar ? (
|
|
<img src={r.avatar} alt="" style={{ width: '28px', height: '28px', borderRadius: '50%' }} />
|
|
) : (
|
|
<div style={{ width: '28px', height: '28px', borderRadius: '50%', background: 'var(--color-bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px' }}>
|
|
{r.username?.charAt(0).toUpperCase() || 'U'}
|
|
</div>
|
|
)}
|
|
<span style={{ fontSize: '13px', fontWeight: 500 }}>{r.username}</span>
|
|
<span style={{ fontSize: '12px', color: 'var(--color-warning)' }}>
|
|
{'★'.repeat(r.rating)}{'☆'.repeat(5 - r.rating)}
|
|
</span>
|
|
<span style={{ fontSize: '11px', color: 'var(--color-text-tertiary)' }}>
|
|
on {r.app_name}
|
|
</span>
|
|
<span style={{ fontSize: '11px', color: 'var(--color-text-tertiary)', marginLeft: 'auto' }}>
|
|
{r.created_at?.slice(0, 16)}
|
|
</span>
|
|
</div>
|
|
<p style={{ margin: 0, fontSize: '13px', color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
|
|
{r.content}
|
|
</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// Edit App Modal
|
|
// ============================================================
|
|
const EditAppModal: React.FC<{ app: MarketAppItem; onClose: () => void; onSaved: () => void }> = ({ app, onClose, onSaved }) => {
|
|
const [form, setForm] = useState({
|
|
name: app.name,
|
|
description: app.description || '',
|
|
category: app.category || 'other',
|
|
tags: app.tags || '',
|
|
price: app.price,
|
|
is_member_free: app.is_member_free,
|
|
featured: app.featured,
|
|
featured_order: app.featured_order,
|
|
status: app.status,
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
await adminAPI.updateMarketApp(app.id, form);
|
|
onSaved();
|
|
} catch (e) {
|
|
alert('保存失败');
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }} onClick={onClose}>
|
|
<div style={{ background: 'var(--color-bg-primary)', borderRadius: '12px', padding: '24px', width: '500px', maxWidth: '90vw', maxHeight: '85vh', overflow: 'auto' }} onClick={e => e.stopPropagation()}>
|
|
<h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 600 }}>编辑应用</h3>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>应用名称</label>
|
|
<input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>描述</label>
|
|
<textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} rows={3} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)', resize: 'vertical' }} />
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>分类</label>
|
|
<select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
{Object.entries(CATEGORY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>价格 (¥)</label>
|
|
<input type="number" value={form.price} onChange={e => setForm({ ...form, price: parseFloat(e.target.value) || 0 })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>标签 (逗号分隔)</label>
|
|
<input value={form.tags} onChange={e => setForm({ ...form, tags: e.target.value })} placeholder="AI, 工具, 效率" style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>状态</label>
|
|
<select value={form.status} onChange={e => setForm({ ...form, status: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
<option value="published">已发布</option>
|
|
<option value="pending">待审核</option>
|
|
<option value="removed">已下架</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>推荐排序</label>
|
|
<input type="number" value={form.featured_order} onChange={e => setForm({ ...form, featured_order: parseInt(e.target.value) || 0 })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '16px' }}>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', cursor: 'pointer' }}>
|
|
<input type="checkbox" checked={form.is_member_free} onChange={e => setForm({ ...form, is_member_free: e.target.checked })} />
|
|
会员免费
|
|
</label>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', cursor: 'pointer' }}>
|
|
<input type="checkbox" checked={form.featured} onChange={e => setForm({ ...form, featured: e.target.checked })} />
|
|
推荐应用
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '8px', marginTop: '24px', justifyContent: 'flex-end' }}>
|
|
<button onClick={onClose} style={{ padding: '8px 20px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-text-secondary)', cursor: 'pointer', fontSize: '14px' }}>取消</button>
|
|
<button onClick={handleSave} disabled={saving} style={{ padding: '8px 20px', borderRadius: '8px', border: 'none', background: 'var(--color-primary)', color: '#fff', cursor: 'pointer', fontSize: '14px', opacity: saving ? 0.6 : 1 }}>
|
|
{saving ? '保存中...' : '保存'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Coupon Modal
|
|
// ============================================================
|
|
const CouponModal: React.FC<{ coupon: CouponItem | null; onClose: () => void; onSaved: () => void }> = ({ coupon, onClose, onSaved }) => {
|
|
const [form, setForm] = useState({
|
|
code: coupon?.code || '',
|
|
type: coupon?.type || 'fixed',
|
|
value: coupon?.value || 10,
|
|
min_amount: coupon?.min_amount || 0,
|
|
valid_from: coupon?.valid_from?.slice(0, 10) || '',
|
|
valid_to: coupon?.valid_to?.slice(0, 10) || '',
|
|
total_count: coupon?.total_count || 100,
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const handleSave = async () => {
|
|
if (!form.code.trim()) { alert('请输入优惠券码'); return; }
|
|
setSaving(true);
|
|
try {
|
|
if (coupon) {
|
|
await adminAPI.updateCoupon(coupon.id, form);
|
|
} else {
|
|
await adminAPI.addCoupon(form);
|
|
}
|
|
onSaved();
|
|
} catch (e) {
|
|
alert('保存失败');
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }} onClick={onClose}>
|
|
<div style={{ background: 'var(--color-bg-primary)', borderRadius: '12px', padding: '24px', width: '440px', maxWidth: '90vw' }} onClick={e => e.stopPropagation()}>
|
|
<h3 style={{ margin: '0 0 20px', fontSize: '18px', fontWeight: 600 }}>{coupon ? '编辑优惠券' : '创建优惠券'}</h3>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>优惠券码</label>
|
|
<input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} placeholder="SUMMER2026" style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>类型</label>
|
|
<select value={form.type} onChange={e => setForm({ ...form, type: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }}>
|
|
<option value="fixed">固定金额</option>
|
|
<option value="percent">百分比</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>面值</label>
|
|
<input type="number" value={form.value} onChange={e => setForm({ ...form, value: parseFloat(e.target.value) || 0 })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>最低消费 (¥)</label>
|
|
<input type="number" value={form.min_amount} onChange={e => setForm({ ...form, min_amount: parseFloat(e.target.value) || 0 })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>发放数量</label>
|
|
<input type="number" value={form.total_count} onChange={e => setForm({ ...form, total_count: parseInt(e.target.value) || 0 })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>开始日期</label>
|
|
<input type="date" value={form.valid_from} onChange={e => setForm({ ...form, valid_from: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
<div>
|
|
<label style={{ display: 'block', fontSize: '13px', marginBottom: '4px', color: 'var(--color-text-secondary)' }}>结束日期</label>
|
|
<input type="date" value={form.valid_to} onChange={e => setForm({ ...form, valid_to: e.target.value })} style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid var(--color-border)', background: 'var(--color-bg-secondary)', color: 'var(--color-text-primary)' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '8px', marginTop: '24px', justifyContent: 'flex-end' }}>
|
|
<button onClick={onClose} style={{ padding: '8px 20px', borderRadius: '8px', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-text-secondary)', cursor: 'pointer', fontSize: '14px' }}>取消</button>
|
|
<button onClick={handleSave} disabled={saving} style={{ padding: '8px 20px', borderRadius: '8px', border: 'none', background: 'var(--color-primary)', color: '#fff', cursor: 'pointer', fontSize: '14px', opacity: saving ? 0.6 : 1 }}>
|
|
{saving ? '保存中...' : '保存'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Market;
|