tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 用户工作台 - 产品化壳层、内容库布局与积分入口

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ddCat
2026-09-16 22:59:45 +08:00
parent f52702b70f
commit 969e2831b2
46 changed files with 5355 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/pages/plugins/index.tsx
View File

@@ -1,3 +1,4 @@
import { CollectionToolbar } from "@/components/layout/collection-toolbar";
import { App, Button, Input, Modal, Select, Typography } from "antd";
import { Switch } from "@/components/ui/base/switch";
import { AudioLines, CalendarDays, CheckCircle2, Clock3, CreditCard, ExternalLink, Film, FolderOpen, Image as ImageIcon, MessageSquareText, PlugZap, RefreshCw, Search, Settings2, ShieldCheck, SlidersHorizontal } from "lucide-react";
@@ -5,6 +6,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router";
import { EmptyState } from "@/components/ui/product/empty-state";
import { PageHeader } from "@/components/layout/workspace-page";
import { listRegisteredPlugins } from "@/lib/plugins/plugin-registry";
import "@/lib/plugins/builtin";
import { EAGLE_PLUGIN_ID } from "@/lib/plugins/builtin/eagle";
@@ -250,9 +252,7 @@ export default function PluginsPage() {
<div className="plugins-page-layout">
<aside className="plugins-sidebar" aria-label="插件分类">
<div className="plugins-sidebar-heading">
<span className="plugins-sidebar-kicker">PLUGIN CENTER</span>
<h1>插件中心</h1>
<p>统一管理 provider、工作流、画布节点和其他扩展能力。</p>
<PageHeader title="插件中心" description="连接模型、素材与工作流，拓展你的创作工具。" />
</div>
<nav className="plugins-sidebar-nav">
<button type="button" className={`plugins-sidebar-item${categoryFilter === "all" ? " is-active" : ""}`} aria-current={categoryFilter === "all" ? "page" : undefined} onClick={() => selectCategory("all")}>
@@ -290,7 +290,16 @@ export default function PluginsPage() {
</nav>
</aside>
<div className="plugins-page-content">
<div className="plugins-toolbar" aria-label="插件筛选">
<CollectionToolbar label="插件筛选" trailing={<div className="plugins-toolbar-actions">
<Button icon={<RefreshCw className="size-4" />} loading={backendPluginsLoading} onClick={() => void reloadBackendPlugins()}>
刷新插件
</Button>
{user?.role === "admin" ? (
<Button type="primary" onClick={() => navigate("/admin/plugins")}>
管理员插件管理
</Button>
) : null}
</div>}>
<Input
className="plugins-search"
prefix={<Search className="size-4 text-foreground/38" aria-hidden="true" />}
@@ -320,20 +329,7 @@ export default function PluginsPage() {
onChange={(value) => setTrustFilter(value as "all" | "trusted")}
aria-label="按来源筛选"
/>
<span className="plugins-filter-icon" aria-hidden="true">
<SlidersHorizontal className="size-4" />
</span>
<div className="plugins-toolbar-actions">
<Button icon={<RefreshCw className="size-4" />} loading={backendPluginsLoading} onClick={() => void reloadBackendPlugins()}>
刷新插件
</Button>
{user?.role === "admin" ? (
<Button type="primary" onClick={() => navigate("/admin/plugins")}>
管理员插件管理
</Button>
) : null}
</div>
</div>
</CollectionToolbar>
{filteredPlugins.length ? (
<div className="plugins-sections">
@@ -348,6 +344,7 @@ export default function PluginsPage() {
sectionRefs.current[section.key] = element;
}}
className="plugin-section"
data-category={section.key === "image" ? "creative" : section.key === "video" ? "drama" : section.key === "audio" ? "social" : section.key === "payment" ? "ecommerce" : undefined}
>
<header className="plugin-section-heading">
<span className="plugin-section-icon">
@@ -369,7 +366,7 @@ export default function PluginsPage() {
const sourceLabel = pluginSourceLabel(plugin, state);
const canConfigure = canConfigurePlugin(plugin);
return (
<section key={plugin.manifest.id} className={`plugin-card library-card-surface${trusted ? " is-trusted" : ""}`}>
<section key={plugin.manifest.id} className={`product-collection-card plugin-card library-card-surface${trusted ? " is-trusted" : ""}`}>
<button
type="button"
className="plugin-card-main"
@@ -383,7 +380,7 @@ export default function PluginsPage() {
>
<div className="plugin-card-heading">
<span className={`plugin-icon-tile${trusted ? " is-trusted" : ""}`} aria-hidden="true">
<PlugZap className="size-5" />
<SectionIcon className="size-5" />
</span>
<div className="min-w-0 flex-1">
<div className="plugin-card-title-row">

58
web/src/pages/plugins/plugins.css
View File

@@ -1,5 +1,6 @@
.plugins-page {
--plugins-card-radius: var(--r-md);
--plugins-card-radius: var(--user-radius-card);
background: var(--user-page-bg);
}
.plugin-trust-label {
@@ -14,29 +15,28 @@
width: auto;
min-width: 0;
margin: 0;
padding: var(--space-5) var(--space-6) var(--space-8);
padding: 0 0 var(--space-8);
}
.plugins-page-layout {
display: grid;
width: 100%;
width: min(var(--product-content-max), calc(100% - 64px));
min-height: 100%;
margin: 0;
grid-template-columns: 208px minmax(0, 1fr);
margin: 24px auto 0;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.plugins-sidebar {
position: sticky;
top: 0;
position: static;
min-width: 0;
min-height: calc(100vh - 72px);
border-right: 1px solid var(--workspace-border);
padding: var(--space-6) var(--space-3) var(--space-8) var(--space-5);
min-height: 0;
padding: 0 0 var(--space-4);
}
.plugins-sidebar-heading {
padding: 0 var(--space-2) var(--space-4);
padding: 0;
background: transparent;
}
.plugins-sidebar-kicker {
@@ -63,13 +63,16 @@
}
.plugins-sidebar-nav {
display: grid;
display: flex;
overflow-x: auto;
gap: var(--space-1);
}
.plugins-sidebar-item {
display: flex;
width: 100%;
width: auto;
flex-shrink: 0;
white-space: nowrap;
min-height: 36px;
align-items: center;
justify-content: space-between;
@@ -100,9 +103,10 @@
}
.plugins-sidebar-item.is-active {
border-color: color-mix(in srgb, var(--foreground) 11%, transparent);
background: color-mix(in srgb, var(--foreground) 7%, transparent);
color: var(--foreground);
border-color: transparent;
border-radius: var(--user-radius-control);
background: var(--user-surface-muted);
color: var(--user-ink);
font-weight: 600;
box-shadow: none;
}
@@ -178,7 +182,7 @@
.plugins-sections {
display: grid;
gap: var(--space-8);
margin-top: var(--space-8);
margin-top: var(--space-5);
}
.plugin-section {
@@ -192,7 +196,7 @@
align-items: center;
gap: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--workspace-border);
border-bottom: 0;
}
.plugin-section-icon {
@@ -201,10 +205,10 @@
height: 34px;
flex: 0 0 auto;
place-items: center;
border: 1px solid var(--workspace-border);
border: 0;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--foreground) 5%, transparent);
color: color-mix(in srgb, var(--foreground) 68%, transparent);
background: color-mix(in srgb, var(--category-accent, var(--user-ink-muted)) 12%, var(--user-surface));
color: var(--category-accent, var(--user-ink-muted));
}
.plugin-section-heading > div {
@@ -249,10 +253,12 @@
.plugin-card {
display: flex;
min-width: 0;
min-height: 232px;
min-height: 214px;
flex-direction: column;
padding: var(--space-3);
border-radius: var(--plugins-card-radius);
border: 1px solid var(--user-border);
background: var(--user-surface);
transition: background-color var(--motion-state) ease-out;
}
@@ -430,7 +436,7 @@
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-2);
border-top: 1px solid color-mix(in srgb, var(--workspace-border) 72%, transparent);
border-top: 0;
}
.plugin-card-actions .settings-channel-status {
@@ -835,8 +841,7 @@
position: static;
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--workspace-border);
padding: var(--space-4) var(--space-4) 0;
padding: 0 0 var(--space-4);
}
.plugins-sidebar-heading {
@@ -895,8 +900,9 @@
}
@media (max-width: 640px) {
.plugins-page-layout { width: calc(100% - 24px); }
.plugins-page-content {
padding-inline: var(--space-4);
padding-inline: 0;
}
.plugins-sidebar-heading {