feat(frontend-v2): /market 技能市场真实数据页 - 重写 MarketApp 类型+marketApi 对齐真实后端契约(#993/#994)，新增 MarketPage 替换 ComingSoon(#995)
This commit is contained in:
QihuAI Design committed
1 parent
66f696c1e6
commit
1ba81ba0d1
5 files changed
+1488
No files matched your search
@@ -0,0 +1,154 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import { queryClient } from '@/lib/query-client';
|
||||
import { Layout } from '@/components/layout/Layout';
|
||||
import { LoginPage } from '@/pages/front/LoginPage';
|
||||
import { LandingPage } from '@/pages/front/LandingPage';
|
||||
import { ChatPage } from '@/pages/front/ChatPage';
|
||||
import { KnowledgePage } from '@/pages/front/KnowledgePage';
|
||||
import { ImBotHub } from '@/pages/front/ImBotHub';
|
||||
import { AppServices } from '@/pages/front/AppServices';
|
||||
import { DashboardPage } from '@/pages/front/DashboardPage';
|
||||
import { ProfilePage } from '@/pages/front/ProfilePage';
|
||||
import { MarketPage } from '@/pages/front/MarketPage';
|
||||
import { ComingSoon } from '@/components/common/ComingSoon';
|
||||
import {
|
||||
Bot,
|
||||
Puzzle,
|
||||
Workflow,
|
||||
Shield,
|
||||
Radio,
|
||||
Bell,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<LandingPage />} />
|
||||
<Route path="chat" element={<ChatPage />} />
|
||||
<Route path="knowledge" element={<KnowledgePage />} />
|
||||
<Route path="im-bots" element={<ImBotHub />} />
|
||||
<Route path="apps" element={<AppServices />} />
|
||||
{/* 占位页：真实功能开发中，统一 amber 金暖白「敬请期待」态 */}
|
||||
<Route path="market" element={<MarketPage />} />
|
||||
<Route
|
||||
path="agents"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="Agent 智能体"
|
||||
icon={Bot}
|
||||
description="可视化编排多源 Agent，组合技能、知识与工具完成复杂任务。"
|
||||
features={[
|
||||
'拖拽式 Agent 编排画布',
|
||||
'多 Agent 协作与对话路由',
|
||||
'绑定知识库与 MCP 工具',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="mcp"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="MCP 工具"
|
||||
icon={Puzzle}
|
||||
description="接入 Model Context Protocol 工具，扩展 AI 的外部执行能力。"
|
||||
features={[
|
||||
'粘贴 MCP 配置一键连接',
|
||||
'工具列表与连通性测试',
|
||||
'官方与社区 MCP 应用市场',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="workflows"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="工作流"
|
||||
icon={Workflow}
|
||||
description="用可视化 DAG 编排多步骤自动化流程。"
|
||||
features={[
|
||||
'节点拖拽编排',
|
||||
'条件分支与并行执行',
|
||||
'可导出可移植的 YAML 规范',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="rules"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="规则库"
|
||||
icon={Shield}
|
||||
description="配置业务规则与审批策略，管控 AI 工具调用风险。"
|
||||
features={[
|
||||
'工具调用四级风险审批',
|
||||
'Loop 原语与验证器',
|
||||
'企业级合规策略模板',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="channels"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="渠道"
|
||||
icon={Radio}
|
||||
description="管理多渠道接入，让 AI 能力触达不同终端用户。"
|
||||
features={[
|
||||
'微信公众号 / 个人微信接入',
|
||||
'IM Bot 多端统一适配',
|
||||
'渠道级权限与配额',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route path="dashboard" element={<DashboardPage />} />
|
||||
<Route path="profile" element={<ProfilePage />} />
|
||||
<Route
|
||||
path="notifications"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="消息通知"
|
||||
icon={Bell}
|
||||
description="集中查看系统通知与任务动态。"
|
||||
features={[
|
||||
'任务完成 / 失败提醒',
|
||||
'配额与账单告警',
|
||||
'按渠道订阅推送',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="evolution"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="自进化"
|
||||
icon={Sparkles}
|
||||
description="让平台从使用中持续学习、自我优化能力。"
|
||||
features={[
|
||||
'对话与工具调用沉淀',
|
||||
'技能自动迭代建议',
|
||||
'知识库增量同步',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,515 @@
|
||||
const BASE_URL = import.meta.env.VITE_API_URL || '/app/api';
|
||||
|
||||
async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...(options.headers as Record<string, string> || {}),
|
||||
};
|
||||
|
||||
const res = await fetch(`${BASE_URL}${path}`, { ...options, headers });
|
||||
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/login';
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: res.statusText }));
|
||||
throw new Error(err.detail || `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// Backend responses use a unified envelope `{code, data, message}`.
|
||||
// `request<T>()` returns the raw envelope; `data<T>()` unwraps `.data`.
|
||||
async function data<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const env = await request<{ code: number; data: T; message: string }>(path, options);
|
||||
return env.data;
|
||||
}
|
||||
|
||||
// ─── Auth ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
export const authApi = {
|
||||
login: (data: { username: string; password: string }) =>
|
||||
request<{ access_token: string; token_type: string }>('/auth/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
register: (data: { username: string; email: string; password: string; code: string }) =>
|
||||
request<{ access_token: string }>('/auth/register', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
me: () => request<{ id: string; username: string; email: string; avatar_url: string }>('/auth/me'),
|
||||
|
||||
logout: () => request('/auth/logout', { method: 'POST' }),
|
||||
|
||||
sendCode: (data: { email: string }) =>
|
||||
request('/auth/send-code', { method: 'POST', body: JSON.stringify(data) }),
|
||||
};
|
||||
|
||||
// ─── Chat ────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Conversation {
|
||||
id: string;
|
||||
title: string;
|
||||
model: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
message_count: number;
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
conversation_id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
model: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export const chatApi = {
|
||||
listConversations: () => request<Conversation[]>('/chat/conversations'),
|
||||
|
||||
createConversation: (data: { title?: string; model?: string }) =>
|
||||
request<Conversation>('/chat/conversations', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
deleteConversation: (id: string) =>
|
||||
request(`/chat/conversations/${id}`, { method: 'DELETE' }),
|
||||
|
||||
getMessages: (convId: string) =>
|
||||
request<ChatMessage[]>(`/chat/conversations/${convId}/messages`),
|
||||
|
||||
sendMessage: (convId: string, data: { content: string; model?: string }) =>
|
||||
request<ChatMessage>(`/chat/conversations/${convId}/messages`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
streamMessage: async function* (convId: string, data: { content: string; model?: string }) {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const res = await fetch(`${BASE_URL}/chat/conversations/${convId}/messages/stream`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
const reader = res.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
if (!reader) return;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = decoder.decode(value);
|
||||
const lines = chunk.split('\n').filter(l => l.startsWith('data: '));
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.content) yield data.content;
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getModels: () => request<{ id: string; name: string; provider: string }[]>('/chat/models'),
|
||||
};
|
||||
|
||||
// ─── Knowledge ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface KnowledgeBase {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
document_count: number;
|
||||
status: 'active' | 'building' | 'error';
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export const knowledgeApi = {
|
||||
listBases: () => request<KnowledgeBase[]>('/knowledge/bases'),
|
||||
|
||||
createBase: (data: { name: string; description?: string }) =>
|
||||
request<KnowledgeBase>('/knowledge/bases', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
deleteBase: (id: string) =>
|
||||
request(`/knowledge/bases/${id}`, { method: 'DELETE' }),
|
||||
|
||||
search: (baseId: string, query: string) =>
|
||||
request<{ results: { content: string; score: number; source: string }[] }>(
|
||||
`/knowledge/bases/${baseId}/search?q=${encodeURIComponent(query)}`
|
||||
),
|
||||
|
||||
getDocuments: (baseId: string) =>
|
||||
request<{ id: string; name: string; status: string; size: number }[]>(
|
||||
`/knowledge/bases/${baseId}/documents`
|
||||
),
|
||||
};
|
||||
|
||||
// ─── Market / Apps ──────────────────────────────────────────────────────────────
|
||||
// 后端契约：app/api/market.py → GET /apps (list_apps) 返回
|
||||
// { code:0, data:{ total, page, page_size, items:[MarketApp] } }
|
||||
// 字段以 list_apps 真实 item 为准（见 #993 重写）。
|
||||
|
||||
export type MarketAppType = 'standalone' | 'embedded' | 'skill' | 'agent' | 'workflow';
|
||||
export type MarketAppSource = 'official' | 'community' | 'third_party';
|
||||
export type MarketAppStatus = 'draft' | 'pending' | 'published' | 'rejected' | 'offline';
|
||||
|
||||
export interface MarketApp {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string | null;
|
||||
type: MarketAppType;
|
||||
source: MarketAppSource;
|
||||
publisher_id: string;
|
||||
publisher_name: string;
|
||||
is_member_free: boolean;
|
||||
join_promotion: boolean;
|
||||
status: MarketAppStatus;
|
||||
price: number;
|
||||
install_count: number;
|
||||
rating_avg: number;
|
||||
review_count: number;
|
||||
created_at: string;
|
||||
capability: string | null;
|
||||
category: string | null;
|
||||
tags: string[];
|
||||
installed: boolean;
|
||||
version: string | null;
|
||||
security_scan: string | null;
|
||||
verified: boolean;
|
||||
dependencies: string[];
|
||||
}
|
||||
|
||||
// 详情页用：list 字段 + 可能更丰富的描述/截图/长文
|
||||
export interface MarketAppDetail extends MarketApp {
|
||||
long_description?: string;
|
||||
screenshots?: string[];
|
||||
homepage_url?: string | null;
|
||||
updated_at?: string | null;
|
||||
}
|
||||
|
||||
export interface MarketReview {
|
||||
id: string;
|
||||
app_id: string;
|
||||
user_id: string;
|
||||
user_name: string;
|
||||
rating: number;
|
||||
comment: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface MarketReviewList {
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
items: MarketReview[];
|
||||
}
|
||||
|
||||
export interface MarketAd {
|
||||
id: string;
|
||||
title: string;
|
||||
image_url: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface MarketAppList {
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
items: MarketApp[];
|
||||
}
|
||||
|
||||
export type MarketSort = 'latest' | 'popular' | 'rating';
|
||||
|
||||
export const marketApi = {
|
||||
// 分页 + 筛选 + 排序 + 搜索，解包 {data:{total,page,page_size,items}}
|
||||
listApps: (params: {
|
||||
type?: MarketAppType;
|
||||
source?: MarketAppSource;
|
||||
capability?: string;
|
||||
search?: string;
|
||||
sort?: MarketSort;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
} = {}) => {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.type) qs.set('type', params.type);
|
||||
if (params.source) qs.set('source', params.source);
|
||||
if (params.capability) qs.set('capability', params.capability);
|
||||
if (params.search) qs.set('search', params.search);
|
||||
if (params.sort) qs.set('sort', params.sort);
|
||||
if (params.page) qs.set('page', String(params.page));
|
||||
if (params.page_size) qs.set('page_size', String(params.page_size));
|
||||
const q = qs.toString();
|
||||
return data<MarketAppList>(`/apps${q ? `?${q}` : ''}`);
|
||||
},
|
||||
|
||||
getApp: (appId: string) =>
|
||||
data<MarketAppDetail>(`/apps/${appId}`),
|
||||
|
||||
getMyApps: () =>
|
||||
request<MarketApp[]>('/my-apps'),
|
||||
|
||||
getReviews: (appId: string, params: { page?: number; page_size?: number } = {}) => {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.page) qs.set('page', String(params.page));
|
||||
if (params.page_size) qs.set('page_size', String(params.page_size));
|
||||
const q = qs.toString();
|
||||
return data<MarketReviewList>(`/reviews/${appId}${q ? `?${q}` : ''}`);
|
||||
},
|
||||
|
||||
getAds: () =>
|
||||
data<MarketAd[]>('/ads'),
|
||||
|
||||
// ─── 写操作（后续迭代启用）───
|
||||
installApp: (appId: string) =>
|
||||
request(`/apps/${appId}/install`, { method: 'POST' }),
|
||||
|
||||
uninstallApp: (appId: string) =>
|
||||
request(`/apps/${appId}/uninstall`, { method: 'DELETE' }),
|
||||
|
||||
purchaseApp: (appId: string) =>
|
||||
request(`/apps/${appId}/purchase`, { method: 'POST' }),
|
||||
|
||||
reviewApp: (appId: string, payload: { rating: number; comment: string }) =>
|
||||
request(`/apps/${appId}/review`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
}),
|
||||
};
|
||||
|
||||
// ─── IM Bot ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ImBotStatus {
|
||||
status: 'connected' | 'disconnected' | 'expired';
|
||||
ilink_bot_id: string;
|
||||
connected_at: string;
|
||||
last_active: string;
|
||||
message_count: number;
|
||||
}
|
||||
|
||||
export const imBotApi = {
|
||||
getStatus: () => request<ImBotStatus>('/im-bot/status'),
|
||||
|
||||
getQRCode: () => request<{ qr_url: string; expire_at: string }>('/im-bot/qrcode'),
|
||||
|
||||
checkQRStatus: (ticket: string) =>
|
||||
request<{ status: string }>('/im-bot/qrcode/status', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ticket }),
|
||||
}),
|
||||
|
||||
disconnect: () => request('/im-bot/disconnect', { method: 'POST' }),
|
||||
|
||||
getHistory: () => request<{ id: string; role: string; content: string; created_at: string }[]>('/im-bot/history'),
|
||||
};
|
||||
|
||||
// ─── Profile ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface MembershipInfo {
|
||||
id: string;
|
||||
plan_id: string;
|
||||
status: string;
|
||||
start_at: string;
|
||||
expire_at: string;
|
||||
is_expired: boolean;
|
||||
}
|
||||
|
||||
export interface UserProfile {
|
||||
id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
avatar: string;
|
||||
role: string;
|
||||
status: string;
|
||||
membership: MembershipInfo | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface LoginLogItem {
|
||||
id: string;
|
||||
ip: string;
|
||||
user_agent: string;
|
||||
login_at: string;
|
||||
}
|
||||
|
||||
export interface LoginLogList {
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
items: LoginLogItem[];
|
||||
}
|
||||
|
||||
export interface ApiKeyItem {
|
||||
id: string;
|
||||
name: string;
|
||||
key_preview: string;
|
||||
status: string;
|
||||
last_used_at: string | null;
|
||||
created_at: string;
|
||||
expire_at: string | null;
|
||||
}
|
||||
|
||||
// 创建 API Key 时后端返回的完整 key（仅创建时返回）
|
||||
export interface ApiKeyCreated {
|
||||
id: string;
|
||||
name: string;
|
||||
api_key: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export type ApiKeyStatus = 'enabled' | 'disabled' | 'revoked';
|
||||
|
||||
export interface PurchasedAppItem {
|
||||
id: string;
|
||||
app_id: string;
|
||||
app_name: string;
|
||||
app_icon: string;
|
||||
app_type: string;
|
||||
price: number;
|
||||
purchased_at: string;
|
||||
}
|
||||
|
||||
export const profileApi = {
|
||||
get: () => data<UserProfile>('/profile/'),
|
||||
|
||||
update: (payload: Partial<Pick<UserProfile, 'username' | 'email' | 'phone' | 'avatar'>>) =>
|
||||
data<UserProfile>('/profile/', { method: 'PUT', body: JSON.stringify(payload) }),
|
||||
|
||||
getBalance: () => data<number>('/profile/balance'),
|
||||
|
||||
getMembership: () => data<{
|
||||
has_membership: boolean;
|
||||
id: string;
|
||||
plan_id: string;
|
||||
status: string;
|
||||
start_at: string;
|
||||
expire_at: string;
|
||||
is_expired: boolean;
|
||||
}>('/profile/membership'),
|
||||
|
||||
getLoginLogs: (page = 1, page_size = 10) =>
|
||||
data<LoginLogList>(`/profile/login-logs?page=${page}&page_size=${page_size}`),
|
||||
|
||||
getApiKeys: () => data<ApiKeyItem[]>('/profile/api-keys'),
|
||||
|
||||
getPurchasedApps: () => data<PurchasedAppItem[]>('/profile/purchased-apps'),
|
||||
|
||||
// ─── 写操作 ───
|
||||
|
||||
updatePassword: (payload: { old_password: string; new_password: string }) =>
|
||||
request<{ code: number; message: string }>('/profile/password', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
}),
|
||||
|
||||
createApiKey: (name: string) =>
|
||||
data<ApiKeyCreated>('/profile/api-keys', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name }),
|
||||
}),
|
||||
|
||||
updateApiKey: (keyId: string, status: ApiKeyStatus) =>
|
||||
data<{ id: string; status: string }>(`/profile/api-keys/${keyId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ status }),
|
||||
}),
|
||||
};
|
||||
|
||||
// ─── Token 驾驶舱 ────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface TokenOverview {
|
||||
total_used: number;
|
||||
balance: number;
|
||||
today_apps: number;
|
||||
server_time: string;
|
||||
}
|
||||
|
||||
export interface ModelRanking {
|
||||
model_id: string;
|
||||
model_name: string;
|
||||
total_tokens: number;
|
||||
usage_count: number;
|
||||
}
|
||||
|
||||
export interface TopApp {
|
||||
conversation_id: string;
|
||||
total_tokens: number;
|
||||
}
|
||||
|
||||
export interface TokenRankings {
|
||||
model_rankings: ModelRanking[];
|
||||
top_apps: TopApp[];
|
||||
}
|
||||
|
||||
export interface TokenLogItem {
|
||||
id: string;
|
||||
model_id: string;
|
||||
model_name: string;
|
||||
prompt_tokens: number;
|
||||
completion_tokens: number;
|
||||
total_tokens: number;
|
||||
conversation_id: string;
|
||||
created_at: string | null;
|
||||
}
|
||||
|
||||
export interface TokenLogPage {
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
items: TokenLogItem[];
|
||||
}
|
||||
|
||||
export interface TokenBalance {
|
||||
balance: number;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export const tokenApi = {
|
||||
getOverview: () => data<TokenOverview>('/token/overview'),
|
||||
|
||||
getRankings: () => data<TokenRankings>('/token/rankings'),
|
||||
|
||||
getLogs: (params: {
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
model_id?: string;
|
||||
app_type?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
} = {}) => {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.start_date) qs.set('start_date', params.start_date);
|
||||
if (params.end_date) qs.set('end_date', params.end_date);
|
||||
if (params.model_id) qs.set('model_id', params.model_id);
|
||||
if (params.app_type) qs.set('app_type', params.app_type);
|
||||
if (params.page) qs.set('page', String(params.page));
|
||||
if (params.page_size) qs.set('page_size', String(params.page_size));
|
||||
const q = qs.toString();
|
||||
return data<TokenLogPage>(`/token/logs${q ? `?${q}` : ''}`);
|
||||
},
|
||||
|
||||
getBalance: () => data<TokenBalance>('/token/balance'),
|
||||
};
|
||||
@@ -0,0 +1,364 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
authApi,
|
||||
chatApi,
|
||||
knowledgeApi,
|
||||
marketApi,
|
||||
imBotApi,
|
||||
profileApi,
|
||||
tokenApi,
|
||||
type TokenOverview,
|
||||
type MarketApp,
|
||||
type MarketAd,
|
||||
type MarketSort,
|
||||
type MarketAppType,
|
||||
type MarketAppSource,
|
||||
} from '@/api/client';
|
||||
|
||||
// ─── Auth ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useLogin() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: { username: string; password: string }) => authApi.login(data),
|
||||
onSuccess: (res) => {
|
||||
localStorage.setItem('auth_token', res.access_token);
|
||||
qc.invalidateQueries({ queryKey: ['auth', 'me'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useCurrentUser() {
|
||||
return useQuery({
|
||||
queryKey: ['auth', 'me'],
|
||||
queryFn: authApi.me,
|
||||
retry: false,
|
||||
enabled: !!localStorage.getItem('auth_token'),
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Chat ────────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useConversations() {
|
||||
return useQuery({
|
||||
queryKey: ['chat', 'conversations'],
|
||||
queryFn: chatApi.listConversations,
|
||||
});
|
||||
}
|
||||
|
||||
export function useMessages(convId: string | null) {
|
||||
return useQuery({
|
||||
queryKey: ['chat', 'messages', convId],
|
||||
queryFn: () => chatApi.getMessages(convId!),
|
||||
enabled: !!convId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateConversation() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: { title?: string; model?: string }) => chatApi.createConversation(data),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['chat', 'conversations'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useSendMessage(convId: string) {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: { content: string; model?: string }) => chatApi.sendMessage(convId, data),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['chat', 'messages', convId] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteConversation() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => chatApi.deleteConversation(id),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['chat', 'conversations'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useModels() {
|
||||
return useQuery({
|
||||
queryKey: ['chat', 'models'],
|
||||
queryFn: chatApi.getModels,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Knowledge ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useKnowledgeBases() {
|
||||
return useQuery({
|
||||
queryKey: ['knowledge', 'bases'],
|
||||
queryFn: knowledgeApi.listBases,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateKnowledgeBase() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: { name: string; description?: string }) => knowledgeApi.createBase(data),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['knowledge', 'bases'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteKnowledgeBase() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => knowledgeApi.deleteBase(id),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['knowledge', 'bases'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useKnowledgeSearch(baseId: string | null, query: string) {
|
||||
return useQuery({
|
||||
queryKey: ['knowledge', 'search', baseId, query],
|
||||
queryFn: () => knowledgeApi.search(baseId!, query),
|
||||
enabled: !!baseId && query.length > 0,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Market / Apps ──────────────────────────────────────────────────────────────
|
||||
|
||||
// Backend list endpoints may return a bare array, `{data:[...]}`, or an error
|
||||
// object. Coerce to a real array so consumers can always call .slice/.map/.filter.
|
||||
function asArray<T>(v: unknown): T[] {
|
||||
if (Array.isArray(v)) return v as T[];
|
||||
if (v && typeof v === 'object' && Array.isArray((v as any).data)) return (v as any).data;
|
||||
if (v && typeof v === 'object' && Array.isArray((v as any).items)) return (v as any).items;
|
||||
return [];
|
||||
}
|
||||
|
||||
export interface MarketAppsParams {
|
||||
type?: MarketAppType;
|
||||
source?: MarketAppSource;
|
||||
capability?: string;
|
||||
search?: string;
|
||||
sort?: MarketSort;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}
|
||||
|
||||
export function useMarketApps(params: MarketAppsParams = {}) {
|
||||
return useQuery({
|
||||
queryKey: ['market', 'apps', params],
|
||||
queryFn: () => marketApi.listApps(params),
|
||||
placeholderData: (prev) => prev, // 翻页/筛选时保留旧数据，避免闪烁
|
||||
});
|
||||
}
|
||||
|
||||
export function useMarketApp(appId: string | null) {
|
||||
return useQuery({
|
||||
queryKey: ['market', 'app', appId],
|
||||
queryFn: () => marketApi.getApp(appId!),
|
||||
enabled: !!appId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useMyApps() {
|
||||
return useQuery({
|
||||
queryKey: ['market', 'my-apps'],
|
||||
queryFn: marketApi.getMyApps,
|
||||
select: (d: unknown) => asArray<MarketApp>(d),
|
||||
});
|
||||
}
|
||||
|
||||
export function useMarketReviews(appId: string | null, params: { page?: number; page_size?: number } = {}) {
|
||||
return useQuery({
|
||||
queryKey: ['market', 'reviews', appId, params],
|
||||
queryFn: () => marketApi.getReviews(appId!, params),
|
||||
enabled: !!appId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useMarketAds() {
|
||||
return useQuery({
|
||||
queryKey: ['market', 'ads'],
|
||||
queryFn: marketApi.getAds,
|
||||
select: (d: unknown) => asArray<MarketAd>(d),
|
||||
});
|
||||
}
|
||||
|
||||
export function useInstallApp() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (appId: string) => marketApi.installApp(appId),
|
||||
onSuccess: (_res, appId) => {
|
||||
qc.invalidateQueries({ queryKey: ['market', 'my-apps'] });
|
||||
qc.invalidateQueries({ queryKey: ['market', 'apps'] });
|
||||
qc.invalidateQueries({ queryKey: ['market', 'app', appId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUninstallApp() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (appId: string) => marketApi.uninstallApp(appId),
|
||||
onSuccess: (_res, appId) => {
|
||||
qc.invalidateQueries({ queryKey: ['market', 'my-apps'] });
|
||||
qc.invalidateQueries({ queryKey: ['market', 'apps'] });
|
||||
qc.invalidateQueries({ queryKey: ['market', 'app', appId] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ─── IM Bot ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useImBotStatus() {
|
||||
return useQuery({
|
||||
queryKey: ['im-bot', 'status'],
|
||||
queryFn: imBotApi.getStatus,
|
||||
refetchInterval: 30000, // poll every 30s
|
||||
});
|
||||
}
|
||||
|
||||
export function useImBotQRCode() {
|
||||
return useQuery({
|
||||
queryKey: ['im-bot', 'qrcode'],
|
||||
queryFn: imBotApi.getQRCode,
|
||||
enabled: false, // only on demand
|
||||
});
|
||||
}
|
||||
|
||||
export function useDisconnectBot() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: () => imBotApi.disconnect(),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['im-bot', 'status'] }),
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Profile ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useProfile() {
|
||||
return useQuery({
|
||||
queryKey: ['profile'],
|
||||
queryFn: profileApi.get,
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateProfile() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: Parameters<typeof profileApi.update>[0]) => profileApi.update(data),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['profile'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useProfileBalance() {
|
||||
return useQuery({
|
||||
queryKey: ['profile', 'balance'],
|
||||
queryFn: profileApi.getBalance,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProfileMembership() {
|
||||
return useQuery({
|
||||
queryKey: ['profile', 'membership'],
|
||||
queryFn: profileApi.getMembership,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProfileLoginLogs(page = 1, page_size = 10) {
|
||||
return useQuery({
|
||||
queryKey: ['profile', 'login-logs', page, page_size],
|
||||
queryFn: () => profileApi.getLoginLogs(page, page_size),
|
||||
});
|
||||
}
|
||||
|
||||
export function useProfileApiKeys() {
|
||||
return useQuery({
|
||||
queryKey: ['profile', 'api-keys'],
|
||||
queryFn: profileApi.getApiKeys,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProfilePurchasedApps() {
|
||||
return useQuery({
|
||||
queryKey: ['profile', 'purchased-apps'],
|
||||
queryFn: profileApi.getPurchasedApps,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Profile 写操作 ─────────────────────────────────────────────────────────────
|
||||
|
||||
export function useUpdateProfilePassword() {
|
||||
return useMutation({
|
||||
mutationFn: (data: { old_password: string; new_password: string }) =>
|
||||
profileApi.updatePassword(data),
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateApiKey() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (name: string) => profileApi.createApiKey(name),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['profile', 'api-keys'] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateApiKey() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ keyId, status }: { keyId: string; status: 'enabled' | 'disabled' | 'revoked' }) =>
|
||||
profileApi.updateApiKey(keyId, status),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['profile', 'api-keys'] }),
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Token 驾驶舱 ─────────────────────────────────────────────────────────────────
|
||||
|
||||
// Landing hero still shows a few headline numbers; reuse the real token overview
|
||||
// so the homepage never ships fake/mock values.
|
||||
export function useDashboardStats() {
|
||||
return useQuery({
|
||||
queryKey: ['token', 'overview'],
|
||||
queryFn: tokenApi.getOverview,
|
||||
select: (d: TokenOverview) => ({
|
||||
active_users: d.today_apps,
|
||||
today_conversations: d.today_apps,
|
||||
skill_count: d.total_used,
|
||||
revenue: d.balance,
|
||||
user_change: '',
|
||||
conv_change: '',
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
export function useTokenOverview() {
|
||||
return useQuery({
|
||||
queryKey: ['token', 'overview'],
|
||||
queryFn: tokenApi.getOverview,
|
||||
refetchInterval: 60000, // 每分钟刷新一次概览
|
||||
});
|
||||
}
|
||||
|
||||
export function useTokenRankings() {
|
||||
return useQuery({
|
||||
queryKey: ['token', 'rankings'],
|
||||
queryFn: tokenApi.getRankings,
|
||||
});
|
||||
}
|
||||
|
||||
export function useTokenBalance() {
|
||||
return useQuery({
|
||||
queryKey: ['token', 'balance'],
|
||||
queryFn: tokenApi.getBalance,
|
||||
});
|
||||
}
|
||||
|
||||
export function useTokenLogs(params: {
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
model_id?: string;
|
||||
app_type?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}) {
|
||||
return useQuery({
|
||||
queryKey: ['token', 'logs', params],
|
||||
queryFn: () => tokenApi.getLogs(params),
|
||||
placeholderData: (prev) => prev, // 翻页时保留旧数据，避免闪烁
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
AppWindow,
|
||||
Plus,
|
||||
ExternalLink,
|
||||
Settings,
|
||||
Play,
|
||||
Globe,
|
||||
Monitor,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { useMyApps } from '@/hooks/useApi';
|
||||
import type { MarketApp } from '@/api/client';
|
||||
|
||||
export function AppServices() {
|
||||
const { data: rawApps, isLoading } = useMyApps();
|
||||
const apps: MarketApp[] = Array.isArray(rawApps) ? rawApps : (((rawApps as any)?.data ?? (rawApps as any)?.items) ?? []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">应用中心</h2>
|
||||
<p className="text-sm text-muted-foreground mt-1">管理第三方 AI 应用</p>
|
||||
</div>
|
||||
<Button className="gap-2">
|
||||
<Plus size={16} /> 创建应用
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="col-span-full flex items-center justify-center py-12">
|
||||
<Loader2 size={24} className="animate-spin text-primary" />
|
||||
</div>
|
||||
) : apps.length === 0 ? (
|
||||
<div className="col-span-full text-center py-12 text-muted-foreground">
|
||||
<AppWindow size={48} className="mx-auto mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium mb-1">暂无应用</p>
|
||||
<p className="text-sm">去应用市场浏览并安装应用</p>
|
||||
</div>
|
||||
) : (
|
||||
apps.map((app: MarketApp) => (
|
||||
<Card key={app.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
{app.type === 'standalone' ? (
|
||||
<Globe size={20} className="text-primary" />
|
||||
) : (
|
||||
<Monitor size={20} className="text-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={app.installed ? 'success' : 'secondary'}>
|
||||
{app.installed ? '已安装' : '未安装'}
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
{app.status === 'published' ? '已发布' : app.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-foreground mb-2">{app.name}</h3>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-4">{app.description}</p>
|
||||
|
||||
<Separator className="mb-4" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="gap-1">
|
||||
<Settings size={14} /> 配置
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="gap-1"
|
||||
variant={app.installed ? 'default' : 'outline'}
|
||||
>
|
||||
{app.installed ? (
|
||||
<><ExternalLink size={14} /> 打开</>
|
||||
) : (
|
||||
<><Play size={14} /> 安装</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Create New */}
|
||||
<Card className="border-dashed hover:shadow-md transition-shadow cursor-pointer">
|
||||
<CardContent className="p-5 flex flex-col items-center justify-center h-full min-h-[220px]">
|
||||
<div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center mb-3">
|
||||
<Plus size={20} className="text-muted-foreground" />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-muted-foreground">创建新应用</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
Search,
|
||||
Store,
|
||||
Star,
|
||||
Download,
|
||||
Check,
|
||||
Sparkles,
|
||||
Globe,
|
||||
Bot,
|
||||
Workflow,
|
||||
Puzzle,
|
||||
ShieldCheck,
|
||||
Crown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
useMarketApps,
|
||||
useMarketAds,
|
||||
type MarketAppsParams,
|
||||
} from '@/hooks/useApi';
|
||||
import type {
|
||||
MarketApp,
|
||||
MarketAppType,
|
||||
MarketAppSource,
|
||||
MarketSort,
|
||||
} from '@/api/client';
|
||||
|
||||
const TYPE_LABELS: Record<MarketAppType, string> = {
|
||||
standalone: '独立应用',
|
||||
embedded: '嵌入式',
|
||||
skill: '技能',
|
||||
agent: '智能体',
|
||||
workflow: '工作流',
|
||||
};
|
||||
|
||||
const TYPE_ICONS: Record<MarketAppType, typeof Globe> = {
|
||||
standalone: Globe,
|
||||
embedded: Puzzle,
|
||||
skill: Sparkles,
|
||||
agent: Bot,
|
||||
workflow: Workflow,
|
||||
};
|
||||
|
||||
const SOURCE_LABELS: Record<MarketAppSource, string> = {
|
||||
official: '官方',
|
||||
community: '社区',
|
||||
third_party: '第三方',
|
||||
};
|
||||
|
||||
function formatCount(n: number): string {
|
||||
if (n >= 10000) return `${(n / 10000).toFixed(1)}w`;
|
||||
if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
|
||||
return String(n);
|
||||
}
|
||||
|
||||
function formatPrice(app: MarketApp): { label: string; free: boolean } {
|
||||
if (app.is_member_free) return { label: '会员免费', free: true };
|
||||
if (app.price > 0) return { label: `¥${app.price}`, free: false };
|
||||
return { label: '免费', free: true };
|
||||
}
|
||||
|
||||
export function MarketPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [debounced, setDebounced] = useState('');
|
||||
const [type, setType] = useState<MarketAppType | undefined>(undefined);
|
||||
const [sort, setSort] = useState<MarketSort>('popular');
|
||||
const [page, setPage] = useState(1);
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
// 简单防抖搜索（300ms）
|
||||
useMemo(() => {
|
||||
const t = setTimeout(() => setDebounced(search.trim()), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [search]);
|
||||
|
||||
const params: MarketAppsParams = useMemo(
|
||||
() => ({
|
||||
type,
|
||||
search: debounced || undefined,
|
||||
sort,
|
||||
page,
|
||||
page_size: PAGE_SIZE,
|
||||
}),
|
||||
[type, debounced, sort, page]
|
||||
);
|
||||
|
||||
const { data, isLoading, isFetching } = useMarketApps(params);
|
||||
const { data: ads } = useMarketAds();
|
||||
|
||||
const items: MarketApp[] = data?.items ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
|
||||
const typeFilters: (MarketAppType | undefined)[] = [
|
||||
undefined,
|
||||
'skill',
|
||||
'agent',
|
||||
'workflow',
|
||||
'standalone',
|
||||
'embedded',
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<Store size={20} className="text-primary" />
|
||||
技能市场
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
浏览、安装官方与社区技能，一键接入平台能力
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 广告位 */}
|
||||
{ads && ads.length > 0 && (
|
||||
<a
|
||||
href={ads[0].url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="block rounded-xl overflow-hidden border border-primary/20 bg-gradient-to-r from-primary/10 to-amber-50 dark:to-amber-950/30"
|
||||
>
|
||||
<div className="flex items-center gap-3 p-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<Sparkles size={22} className="text-primary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium text-foreground truncate">{ads[0].title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">点击查看详情 →</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* 搜索 + 排序 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search
|
||||
size={16}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
/>
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="搜索技能、智能体、工作流…"
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{(['popular', 'latest', 'rating'] as MarketSort[]).map((s) => (
|
||||
<Button
|
||||
key={s}
|
||||
size="sm"
|
||||
variant={sort === s ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
setSort(s);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
{s === 'popular' ? '最热' : s === 'latest' ? '最新' : '评分'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 类型筛选 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{typeFilters.map((tf) => (
|
||||
<Button
|
||||
key={tf ?? 'all'}
|
||||
size="sm"
|
||||
variant={type === tf ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
setType(tf);
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
{tf ? TYPE_LABELS[tf] : '全部'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 列表 */}
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 size={28} className="animate-spin text-primary" />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground">
|
||||
<Store size={48} className="mx-auto mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium mb-1">未找到匹配的技能</p>
|
||||
<p className="text-sm">试试调整搜索词或筛选条件</p>
|
||||
</div>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
||||
>
|
||||
{items.map((app: MarketApp) => {
|
||||
const TypeIcon = TYPE_ICONS[app.type] ?? Sparkles;
|
||||
const price = formatPrice(app);
|
||||
return (
|
||||
<Card
|
||||
key={app.id}
|
||||
className="hover:shadow-md transition-shadow flex flex-col"
|
||||
>
|
||||
<CardContent className="p-5 flex flex-col flex-1">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="w-11 h-11 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
{app.icon ? (
|
||||
<img
|
||||
src={app.icon}
|
||||
alt={app.name}
|
||||
className="w-7 h-7 rounded"
|
||||
/>
|
||||
) : (
|
||||
<TypeIcon size={22} className="text-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1.5">
|
||||
{app.verified && (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<ShieldCheck size={11} />
|
||||
已认证
|
||||
</Badge>
|
||||
)}
|
||||
{app.installed ? (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Check size={11} />
|
||||
已安装
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{SOURCE_LABELS[app.source]}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold text-foreground truncate">{app.name}</h3>
|
||||
{app.is_member_free && (
|
||||
<Crown size={14} className="text-amber-500 shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
由 {app.publisher_name} 发布
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-4 flex-1">
|
||||
{app.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground mb-3">
|
||||
{app.rating_avg > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Star size={13} className="text-amber-500 fill-amber-500" />
|
||||
{app.rating_avg.toFixed(1)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Download size={13} />
|
||||
{formatCount(app.install_count)}
|
||||
</span>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{TYPE_LABELS[app.type]}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Separator className="mb-3" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={
|
||||
price.free
|
||||
? 'text-sm font-medium text-green-600 dark:text-green-400'
|
||||
: 'text-sm font-semibold text-foreground'
|
||||
}
|
||||
>
|
||||
{price.label}
|
||||
</span>
|
||||
{app.installed ? (
|
||||
<Button size="sm" variant="outline" disabled className="gap-1">
|
||||
<Check size={14} />
|
||||
已安装
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" className="gap-1">
|
||||
<Download size={14} />
|
||||
安装
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-4 pt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={page <= 1 || isFetching}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
上一页
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={page >= totalPages || isFetching}
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
>
|
||||
下一页
|
||||
<ChevronRight size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user