This commit is contained in:
QihuAI Design committed
1 parent
71fc502a92
commit
669c16b0a0
11 files changed
+4881
-4282
No files matched your search
+388
-342
@@ -1,342 +1,388 @@
|
||||
import React, { useState } from 'react';
|
||||
import { mockApps, mockCoupons } from '@/mock/data';
|
||||
import type { MarketApp, Coupon } from '@/types';
|
||||
|
||||
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Market: React.FC = () => {
|
||||
const [apps, setApps] = useState<MarketApp[]>(mockApps);
|
||||
const [coupons, setCoupons] = useState<Coupon[]>(mockCoupons);
|
||||
const [activeTab, setActiveTab] = useState<'review' | 'coupon' | 'official'>('review');
|
||||
const [showCouponModal, setShowCouponModal] = useState(false);
|
||||
|
||||
const [couponForm, setCouponForm] = useState({
|
||||
code: '', type: 'fixed' as 'fixed' | 'percent', value: 0, minAmount: 0,
|
||||
validFrom: '', validTo: '',
|
||||
});
|
||||
|
||||
const pendingApps = apps.filter(a => a.status === 'pending');
|
||||
const publishedOfficialApps = apps.filter(a => a.source === 'official' && a.status !== 'removed');
|
||||
|
||||
const handleApprove = (id: string) => {
|
||||
setApps(prev => prev.map(a => a.id === id ? { ...a, status: 'published' as const } : a));
|
||||
};
|
||||
|
||||
const handleReject = (id: string) => {
|
||||
setApps(prev => prev.map(a => a.id === id ? { ...a, status: 'removed' as const } : a));
|
||||
};
|
||||
|
||||
const handleToggleOfficial = (id: string) => {
|
||||
setApps(prev => prev.map(a => {
|
||||
if (a.id === id) {
|
||||
const newStatus: MarketApp['status'] = a.status === 'published' ? 'removed' : 'published';
|
||||
return { ...a, status: newStatus };
|
||||
}
|
||||
return a;
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCreateCoupon = () => {
|
||||
if (!couponForm.code.trim() || !couponForm.validFrom || !couponForm.validTo) return;
|
||||
setCoupons(prev => [...prev, {
|
||||
id: 'cp' + Date.now(),
|
||||
...couponForm,
|
||||
status: 'active',
|
||||
}]);
|
||||
setShowCouponModal(false);
|
||||
setCouponForm({ code: '', type: 'fixed', value: 0, minAmount: 0, validFrom: '', validTo: '' });
|
||||
};
|
||||
|
||||
const handleDeleteCoupon = (id: string) => {
|
||||
setCoupons(prev => prev.filter(c => c.id !== id));
|
||||
};
|
||||
|
||||
const formatDate = (d: string) => {
|
||||
const dt = new Date(d);
|
||||
return dt.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ key: 'review' as const, label: '待审核应用', count: pendingApps.length },
|
||||
{ key: 'coupon' as const, label: '优惠券管理', count: coupons.length },
|
||||
{ key: 'official' as const, label: '官方应用管理', count: publishedOfficialApps.length },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ animation: 'fadeIn var(--transition-normal)' }}>
|
||||
<h1 className="admin-page-title">AI技能审核管理</h1>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style={{ display: 'flex', gap: 'var(--space-sm)', marginBottom: 'var(--space-2xl)', borderBottom: '1px solid var(--color-border)', paddingBottom: 'var(--space-lg)' }}>
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
style={{
|
||||
padding: 'var(--space-sm) var(--space-lg)',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
fontSize: 'var(--text-sm)', fontWeight: 600,
|
||||
background: activeTab === tab.key ? 'var(--color-accent-light)' : 'transparent',
|
||||
color: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-secondary)',
|
||||
transition: 'all var(--transition-fast)',
|
||||
display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
{tab.count > 0 && (
|
||||
<span style={{
|
||||
background: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-disabled)',
|
||||
color: '#FFFFFF', padding: '0 6px', borderRadius: 'var(--radius-full)',
|
||||
fontSize: 'var(--text-xs)', lineHeight: '18px', minWidth: 18, textAlign: 'center',
|
||||
}}>
|
||||
{tab.count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pending Review Tab */}
|
||||
{activeTab === 'review' && (
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">待审核应用</h3>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>应用名</th>
|
||||
<th>类型</th>
|
||||
<th>发布者</th>
|
||||
<th>价格</th>
|
||||
<th>状态</th>
|
||||
<th>发布时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pendingApps.map(app => (
|
||||
<tr key={app.id}>
|
||||
<td style={{ fontWeight: 600 }}>{app.name}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.type === 'agent' ? 'badge-info' : app.type === 'skill' ? 'badge-success' : 'badge-warning'}`}>
|
||||
{app.type.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td>{app.publisherName}</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{app.price} 元</td>
|
||||
<td><span className="admin-badge badge-warning">待审核</span></td>
|
||||
<td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>{formatDate(app.createdAt)}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
|
||||
<button className="admin-btn admin-btn-primary admin-btn-sm" onClick={() => handleApprove(app.id)}>
|
||||
<SVGIcon size={12}><polyline points="20 6 9 17 4 12"/></SVGIcon>
|
||||
通过
|
||||
</button>
|
||||
<button className="admin-btn admin-btn-danger admin-btn-sm" onClick={() => handleReject(app.id)}>
|
||||
<SVGIcon size={12}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></SVGIcon>
|
||||
拒绝
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{pendingApps.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} style={{ textAlign: 'center', color: 'var(--color-text-disabled)', padding: 'var(--space-3xl)' }}>
|
||||
暂无待审核应用
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Coupon Management Tab */}
|
||||
{activeTab === 'coupon' && (
|
||||
<>
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">优惠券列表</h3>
|
||||
<button className="admin-btn admin-btn-primary admin-btn-sm" onClick={() => setShowCouponModal(true)}>
|
||||
<SVGIcon><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
|
||||
创建优惠券
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>兑换码</th>
|
||||
<th>类型</th>
|
||||
<th>面值</th>
|
||||
<th>最低消费</th>
|
||||
<th>有效期</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{coupons.map(c => (
|
||||
<tr key={c.id}>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{c.code}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${c.type === 'fixed' ? 'badge-info' : 'badge-warning'}`}>
|
||||
{c.type === 'fixed' ? '固定金额' : '百分比'}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>
|
||||
{c.type === 'fixed' ? `${c.value} 元` : `${c.value}%`}
|
||||
</td>
|
||||
<td>{c.minAmount > 0 ? `${c.minAmount} 元` : '无门槛'}</td>
|
||||
<td style={{ fontSize: 'var(--text-xs)' }}>{c.validFrom} 至 {c.validTo}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${c.status === 'active' ? 'badge-success' : 'badge-error'}`}>
|
||||
{c.status === 'active' ? '有效' : '已过期'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button className="admin-btn admin-btn-danger admin-btn-sm" onClick={() => handleDeleteCoupon(c.id)}>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Official App Management Tab */}
|
||||
{activeTab === 'official' && (
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">官方应用列表</h3>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>应用名</th>
|
||||
<th>类型</th>
|
||||
<th>价格</th>
|
||||
<th>会员免费</th>
|
||||
<th>安装量</th>
|
||||
<th>评分</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{publishedOfficialApps.map(app => (
|
||||
<tr key={app.id}>
|
||||
<td style={{ fontWeight: 600 }}>{app.name}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.type === 'agent' ? 'badge-info' : app.type === 'skill' ? 'badge-success' : 'badge-warning'}`}>
|
||||
{app.type.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)' }}>{app.price} 元</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.isMemberFree ? 'badge-success' : 'badge-neutral'}`}>
|
||||
{app.isMemberFree ? '是' : '否'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{app.installCount.toLocaleString()}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<SVGIcon size={12}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></SVGIcon>
|
||||
{app.ratingAvg}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.status === 'published' ? 'badge-success' : 'badge-neutral'}`}>
|
||||
{app.status === 'published' ? '已上架' : '已下架'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className={`admin-btn ${app.status === 'published' ? 'admin-btn-danger' : 'admin-btn-outline'} admin-btn-sm`}
|
||||
onClick={() => handleToggleOfficial(app.id)}
|
||||
>
|
||||
{app.status === 'published' ? '下架' : '上架'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Coupon Modal */}
|
||||
{showCouponModal && (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
background: 'rgba(0,0,0,0.4)', zIndex: 'var(--z-modal)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
animation: 'fadeIn var(--transition-normal)',
|
||||
}} onClick={() => setShowCouponModal(false)}>
|
||||
<div style={{
|
||||
background: '#FFFFFF', borderRadius: 'var(--radius-2xl)', width: 460, maxHeight: '90vh', overflow: 'auto',
|
||||
padding: 'var(--space-3xl)', boxShadow: 'var(--shadow-xl)',
|
||||
}} onClick={e => e.stopPropagation()}>
|
||||
<h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginBottom: 'var(--space-2xl)' }}>创建优惠券</h3>
|
||||
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">兑换码</label>
|
||||
<input className="admin-form-input" value={couponForm.code} onChange={e => setCouponForm({ ...couponForm, code: e.target.value })} placeholder="例如: NEW2026" />
|
||||
</div>
|
||||
|
||||
<div className="admin-form-row">
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">类型</label>
|
||||
<select className="admin-form-input" value={couponForm.type} onChange={e => setCouponForm({ ...couponForm, type: e.target.value as 'fixed' | 'percent' })}>
|
||||
<option value="fixed">固定金额</option>
|
||||
<option value="percent">百分比折扣</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">面值</label>
|
||||
<input className="admin-form-input" type="number" value={couponForm.value} onChange={e => setCouponForm({ ...couponForm, value: Number(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-form-row">
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">最低消费(元)</label>
|
||||
<input className="admin-form-input" type="number" value={couponForm.minAmount} onChange={e => setCouponForm({ ...couponForm, minAmount: Number(e.target.value) })} />
|
||||
</div>
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">开始日期</label>
|
||||
<input className="admin-form-input" type="date" value={couponForm.validFrom} onChange={e => setCouponForm({ ...couponForm, validFrom: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-form-group">
|
||||
<label className="admin-form-label">结束日期</label>
|
||||
<input className="admin-form-input" type="date" value={couponForm.validTo} onChange={e => setCouponForm({ ...couponForm, validTo: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<div className="admin-form-actions">
|
||||
<button className="admin-btn admin-btn-primary" onClick={handleCreateCoupon}>创建</button>
|
||||
<button className="admin-btn admin-btn-outline" onClick={() => setShowCouponModal(false)}>取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Market;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { adminAPI } from '@/api';
|
||||
import { mockCoupons } from '@/mock/data';
|
||||
import type { MarketApp, Coupon } from '@/types';
|
||||
|
||||
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Phase 4.1: 安检状态徽章
|
||||
function SecurityBadge({ scan }: { scan?: any }) {
|
||||
if (!scan || !scan.status) return <span style={{ color: 'var(--color-text-disabled)' }}>未扫描</span>;
|
||||
const map: Record<string, { label: string; bg: string; fg: string }> = {
|
||||
pass: { label: '安检通过', bg: '#16a34a1A', fg: '#16a34a' },
|
||||
warn: { label: '安检注意', bg: '#d977061A', fg: '#d97706' },
|
||||
fail: { label: '安检风险', bg: '#dc26261A', fg: '#dc2626' },
|
||||
};
|
||||
const m = map[scan.status] || map.warn;
|
||||
return (
|
||||
<span style={{ background: m.bg, color: m.fg, padding: '2px 8px', borderRadius: 'var(--radius-full)', fontSize: 'var(--text-xs)', fontWeight: 600 }}>
|
||||
{m.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const mapApp = (a: any): MarketApp => ({
|
||||
id: a.id, name: a.name, type: a.type, source: a.source,
|
||||
publisherId: a.publisher_id, publisherName: a.publisher_name || '未知',
|
||||
description: a.description || '', icon: a.icon || '?',
|
||||
price: a.price || 0, isMemberFree: a.is_member_free || false,
|
||||
joinPromotion: a.join_promotion || false, status: a.status || 'published',
|
||||
ratingAvg: a.rating_avg || 0, reviewCount: a.review_count || 0,
|
||||
installCount: a.install_count || 0, createdAt: a.created_at || '',
|
||||
version: a.version || '1.0.0', verified: a.verified || false,
|
||||
securityScan: a.security_scan || null, dependencies: a.dependencies || null,
|
||||
});
|
||||
|
||||
const Market: React.FC = () => {
|
||||
const [reviewApps, setReviewApps] = useState<MarketApp[]>([]);
|
||||
const [officialApps, setOfficialApps] = useState<MarketApp[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'review' | 'coupon' | 'official'>('review');
|
||||
const [showCouponModal, setShowCouponModal] = useState(false);
|
||||
const [coupons] = useState<Coupon[]>(mockCoupons);
|
||||
|
||||
const [couponForm, setCouponForm] = useState({
|
||||
code: '', type: 'fixed' as 'fixed' | 'percent', value: 0, minAmount: 0,
|
||||
validFrom: '', validTo: '',
|
||||
});
|
||||
|
||||
// Phase 4.1: 版本历史弹窗
|
||||
const [versionsApp, setVersionsApp] = useState<MarketApp | null>(null);
|
||||
const [versions, setVersions] = useState<any[]>([]);
|
||||
const [loadingVersions, setLoadingVersions] = useState(false);
|
||||
|
||||
const loadReview = () => {
|
||||
setLoading(true);
|
||||
adminAPI.getPendingApps().then((res: any) => {
|
||||
if (res && Array.isArray(res)) setReviewApps(res.map(mapApp));
|
||||
else if (res?.code === 0 && Array.isArray(res.data)) setReviewApps(res.data.map(mapApp));
|
||||
}).catch(() => {}).finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
const loadOfficial = () => {
|
||||
setLoading(true);
|
||||
adminAPI.getAdminMarketApps('status=published').then((res: any) => {
|
||||
const items = (res?.data?.items || res?.items || []).map(mapApp).filter((a: MarketApp) => a.source === 'official');
|
||||
setOfficialApps(items);
|
||||
}).catch(() => {}).finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'review') loadReview();
|
||||
else if (activeTab === 'official') loadOfficial();
|
||||
}, [activeTab]);
|
||||
|
||||
const handleApprove = (id: string) => {
|
||||
adminAPI.approveApp(id).then(() => loadReview()).catch(() => alert('审核失败'));
|
||||
};
|
||||
|
||||
const handleReject = (id: string) => {
|
||||
adminAPI.rejectApp(id).then(() => loadReview()).catch(() => alert('拒绝失败'));
|
||||
};
|
||||
|
||||
const handleRemoveOfficial = (id: string) => {
|
||||
if (!confirm('确认下架该官方应用？')) return;
|
||||
adminAPI.rejectApp(id).then(() => loadOfficial()).catch(() => alert('下架失败'));
|
||||
};
|
||||
|
||||
const handleRescan = (id: string) => {
|
||||
adminAPI.rescanApp(id).then((res: any) => {
|
||||
alert('重新安检完成：' + (res?.status || 'unknown'));
|
||||
loadOfficial();
|
||||
}).catch(() => alert('安检失败'));
|
||||
};
|
||||
|
||||
const openVersions = (app: MarketApp) => {
|
||||
setVersionsApp(app);
|
||||
setLoadingVersions(true);
|
||||
setVersions([]);
|
||||
adminAPI.getAppVersions(app.id).then((res: any) => {
|
||||
setVersions(res?.items || []);
|
||||
}).catch(() => {}).finally(() => setLoadingVersions(false));
|
||||
};
|
||||
|
||||
const handleRollback = (appId: string, versionId: string) => {
|
||||
if (!confirm('确认回滚到该版本？当前配置将被覆盖。')) return;
|
||||
adminAPI.rollbackApp(appId, versionId).then(() => {
|
||||
alert('已回滚');
|
||||
openVersions({ ...versionsApp!, id: appId } as MarketApp);
|
||||
loadOfficial();
|
||||
}).catch(() => alert('回滚失败'));
|
||||
};
|
||||
|
||||
const formatDate = (d: string) => {
|
||||
if (!d) return '-';
|
||||
const dt = new Date(d);
|
||||
return dt.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ key: 'review' as const, label: '待审核应用', count: reviewApps.length },
|
||||
{ key: 'coupon' as const, label: '优惠券管理', count: coupons.length },
|
||||
{ key: 'official' as const, label: '官方应用管理', count: officialApps.length },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ animation: 'fadeIn var(--transition-normal)' }}>
|
||||
<h1 className="admin-page-title">AI技能审核管理</h1>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style={{ display: 'flex', gap: 'var(--space-sm)', marginBottom: 'var(--space-2xl)', borderBottom: '1px solid var(--color-border)', paddingBottom: 'var(--space-lg)' }}>
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
style={{
|
||||
padding: 'var(--space-sm) var(--space-lg)',
|
||||
borderRadius: 'var(--radius-md)',
|
||||
fontSize: 'var(--text-sm)', fontWeight: 600,
|
||||
background: activeTab === tab.key ? 'var(--color-accent-light)' : 'transparent',
|
||||
color: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-secondary)',
|
||||
transition: 'all var(--transition-fast)',
|
||||
display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
{tab.count > 0 && (
|
||||
<span style={{
|
||||
background: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-disabled)',
|
||||
color: '#FFFFFF', padding: '0 6px', borderRadius: 'var(--radius-full)',
|
||||
fontSize: 'var(--text-xs)', lineHeight: '18px', minWidth: 18, textAlign: 'center',
|
||||
}}>
|
||||
{tab.count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pending Review Tab */}
|
||||
{activeTab === 'review' && (
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">待审核应用</h3>
|
||||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={loadReview}>刷新</button>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>应用名</th>
|
||||
<th>类型</th>
|
||||
<th>发布者</th>
|
||||
<th>价格</th>
|
||||
<th>安检</th>
|
||||
<th>发布时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reviewApps.map(app => (
|
||||
<tr key={app.id}>
|
||||
<td style={{ fontWeight: 600 }}>{app.name}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.type === 'agent' ? 'badge-info' : app.type === 'skill' ? 'badge-success' : 'badge-warning'}`}>
|
||||
{app.type.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td>{app.publisherName}</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{app.price} 元</td>
|
||||
<td><SecurityBadge scan={app.securityScan} /></td>
|
||||
<td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>{formatDate(app.createdAt)}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
|
||||
<button className="admin-btn admin-btn-primary admin-btn-sm" onClick={() => handleApprove(app.id)}>
|
||||
<SVGIcon size={12}><polyline points="20 6 9 17 4 12"/></SVGIcon>
|
||||
通过(绿标)
|
||||
</button>
|
||||
<button className="admin-btn admin-btn-danger admin-btn-sm" onClick={() => handleReject(app.id)}>
|
||||
<SVGIcon size={12}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></SVGIcon>
|
||||
拒绝
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{reviewApps.length === 0 && !loading && (
|
||||
<tr>
|
||||
<td colSpan={7} style={{ textAlign: 'center', color: 'var(--color-text-disabled)', padding: 'var(--space-3xl)' }}>
|
||||
暂无待审核应用
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading && (
|
||||
<tr><td colSpan={7} style={{ textAlign: 'center', padding: 'var(--space-3xl)' }}>加载中...</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Coupon Management Tab */}
|
||||
{activeTab === 'coupon' && (
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">优惠券列表</h3>
|
||||
<button className="admin-btn admin-btn-primary admin-btn-sm" onClick={() => setShowCouponModal(true)}>
|
||||
<SVGIcon><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
|
||||
创建优惠券
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>兑换码</th>
|
||||
<th>类型</th>
|
||||
<th>面值</th>
|
||||
<th>最低消费</th>
|
||||
<th>有效期</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{coupons.map(c => (
|
||||
<tr key={c.id}>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{c.code}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${c.type === 'fixed' ? 'badge-info' : 'badge-warning'}`}>
|
||||
{c.type === 'fixed' ? '固定金额' : '百分比'}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>
|
||||
{c.type === 'fixed' ? `${c.value} 元` : `${c.value}%`}
|
||||
</td>
|
||||
<td>{c.minAmount > 0 ? `${c.minAmount} 元` : '无门槛'}</td>
|
||||
<td style={{ fontSize: 'var(--text-xs)' }}>{c.validFrom} 至 {c.validTo}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${c.status === 'active' ? 'badge-success' : 'badge-error'}`}>
|
||||
{c.status === 'active' ? '有效' : '已过期'}
|
||||
</span>
|
||||
</td>
|
||||
<td><span style={{ color: 'var(--color-text-disabled)' }}>只读</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Official App Management Tab */}
|
||||
{activeTab === 'official' && (
|
||||
<div className="admin-card">
|
||||
<div className="admin-card-header">
|
||||
<h3 className="admin-card-title">官方应用列表</h3>
|
||||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={loadOfficial}>刷新</button>
|
||||
</div>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>应用名</th>
|
||||
<th>类型</th>
|
||||
<th>版本</th>
|
||||
<th>绿标</th>
|
||||
<th>安检</th>
|
||||
<th>安装量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{officialApps.map(app => (
|
||||
<tr key={app.id}>
|
||||
<td style={{ fontWeight: 600 }}>{app.name}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${app.type === 'agent' ? 'badge-info' : app.type === 'skill' ? 'badge-success' : 'badge-warning'}`}>
|
||||
{app.type.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)' }}>v{app.version}</td>
|
||||
<td>
|
||||
{app.verified
|
||||
? <span style={{ color: '#16a34a', fontWeight: 600 }}>✓ 已认证</span>
|
||||
: <span style={{ color: 'var(--color-text-disabled)' }}>未认证</span>}
|
||||
</td>
|
||||
<td><SecurityBadge scan={app.securityScan} /></td>
|
||||
<td>{app.installCount.toLocaleString()}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
|
||||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => handleRescan(app.id)}>重新安检</button>
|
||||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => openVersions(app)}>版本历史</button>
|
||||
<button className="admin-btn admin-btn-danger admin-btn-sm" onClick={() => handleRemoveOfficial(app.id)}>下架</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{officialApps.length === 0 && !loading && (
|
||||
<tr><td colSpan={7} style={{ textAlign: 'center', color: 'var(--color-text-disabled)', padding: 'var(--space-3xl)' }}>暂无官方应用</td></tr>
|
||||
)}
|
||||
{loading && (
|
||||
<tr><td colSpan={7} style={{ textAlign: 'center', padding: 'var(--space-3xl)' }}>加载中...</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Version History Modal */}
|
||||
{versionsApp && (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
background: 'rgba(0,0,0,0.4)', zIndex: 'var(--z-modal)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
animation: 'fadeIn var(--transition-normal)',
|
||||
}} onClick={() => setVersionsApp(null)}>
|
||||
<div style={{
|
||||
background: '#FFFFFF', borderRadius: 'var(--radius-2xl)', width: 520, maxHeight: '90vh', overflow: 'auto',
|
||||
padding: 'var(--space-3xl)', boxShadow: 'var(--shadow-xl)',
|
||||
}} onClick={e => e.stopPropagation()}>
|
||||
<h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginBottom: 'var(--space-lg)' }}>
|
||||
版本历史 · {versionsApp.name}
|
||||
</h3>
|
||||
<p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)', marginBottom: 'var(--space-2xl)' }}>
|
||||
当前版本：v{versionsApp.version}
|
||||
</p>
|
||||
{loadingVersions ? (
|
||||
<p style={{ color: 'var(--color-text-disabled)' }}>加载中...</p>
|
||||
) : versions.length === 0 ? (
|
||||
<p style={{ color: 'var(--color-text-disabled)' }}>暂无历史版本</p>
|
||||
) : (
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr><th>版本</th><th>安检</th><th>创建时间</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{versions.map((v: any) => (
|
||||
<tr key={v.id}>
|
||||
<td style={{ fontFamily: 'var(--font-mono)' }}>v{v.version}</td>
|
||||
<td><SecurityBadge scan={v.security_scan} /></td>
|
||||
<td style={{ fontSize: 'var(--text-xs)' }}>{formatDate(v.created_at)}</td>
|
||||
<td>
|
||||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => handleRollback(versionsApp.id, v.id)}>
|
||||
回滚到此版本
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<div className="admin-form-actions" style={{ marginTop: 'var(--space-2xl)' }}>
|
||||
<button className="admin-btn admin-btn-outline" onClick={() => setVersionsApp(null)}>关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Market;
|
||||
+2030
-1964
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user