{children}
-
{children}
-
+
+
+ {children}
+ {filters ? (
+ <>
+ } onClick={() => setFiltersOpen((open) => !open)}>
+ 筛选{active ? : null}
+
+
+ {filters}
+
+ ) : null}
+ {activeFilters ? {activeFilters}
: null}
+
{active && onReset ? } onClick={onReset}>重置 : null}
{trailing}
@@ -49,19 +67,22 @@ export function CollectionGrid({ children, className }: { children: ReactNode; c
return {children}
;
}
-export function PaginationBar({ current, pageSize, total, onChange, pageSizeOptions = [20, 50, 100] }: { current: number; pageSize: number; total: number; onChange: (page: number, pageSize: number) => void; pageSizeOptions?: number[] }) {
- if (total <= pageSize && current === 1) return null;
+export function PaginationBar({ current, pageSize, total, onChange, pageSizeOptions = [20, 50, 100], alwaysShow = false }: { current: number; pageSize: number; total: number; onChange: (page: number, pageSize: number) => void; pageSizeOptions?: number[]; alwaysShow?: boolean }) {
+ if (!alwaysShow && total <= pageSize && current === 1) return null;
+ const start = total === 0 ? 0 : (current - 1) * pageSize + 1;
+ const end = total === 0 ? 0 : Math.min(current * pageSize, total);
return (
-
+
+ {total === 0 ? "共 0 条" : `${start}-${end} / 共 ${total} 条`}
1}
responsive
+ showLessItems
pageSizeOptions={pageSizeOptions.map(String)}
- showTotal={(value, range) => `${range[0]}-${range[1]} / 共 ${value} 条`}
onChange={onChange}
/>
diff --git a/web/src/components/layout/workspace-sidebar-footer.tsx b/web/src/components/layout/workspace-sidebar-footer.tsx
index f396578b0..087ac8d20 100644
--- a/web/src/components/layout/workspace-sidebar-footer.tsx
+++ b/web/src/components/layout/workspace-sidebar-footer.tsx
@@ -37,7 +37,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
const handleLogout = async () => {
try {
await logout();
- await applyUserSession({ user: null, systemChannels: [] });
+ await applyUserSession({ user: null, logicalModels: [] });
setMenuOpen(false);
message.success("已退出登录");
navigate("/login", { replace: true });
diff --git a/web/src/components/model-capability-editor.tsx b/web/src/components/model-capability-editor.tsx
index 5f44eef3d..e058af14a 100644
--- a/web/src/components/model-capability-editor.tsx
+++ b/web/src/components/model-capability-editor.tsx
@@ -1,7 +1,7 @@
import { Input, InputNumber, Segmented, Select, Switch } from "antd";
import type { ReactNode } from "react";
-import { defaultImageCapabilityConfig, defaultModelCapabilityConfig, type ImageCapabilityConfig, type ModelCapabilityConfig, type VideoCapabilityConfig } from "@/lib/model-capabilities";
+import { defaultImageCapabilityConfig, defaultModelCapabilityConfig, type ImageCapabilityConfig, type ModelCapabilityConfig, type TextCapabilityConfig, type VideoCapabilityConfig } from "@/lib/model-capabilities";
import type { ModelProtocol } from "@/lib/model-protocols";
import { VIDEO_RESOLUTION_CAPABILITY_OPTIONS } from "@/lib/video-generation-options";
@@ -21,12 +21,15 @@ type Props = {
value?: ModelCapabilityConfig;
onChange?: (value: ModelCapabilityConfig) => void;
protocol?: ModelProtocol;
- capability?: "image" | "video";
+ capability?: "text" | "image" | "video";
model?: string;
disabled?: boolean;
};
export function ModelCapabilityEditor({ value, onChange, protocol, capability = "video", model = "", disabled = false }: Props) {
+ if (capability === "text") {
+ return
+
协议模板可继续调整
@@ -77,7 +80,7 @@ export function ModelCapabilityEditor({ value, onChange, protocol, capability =
视频能力参数
这些参数会同步到创造页、画布和生成校验
@@ -96,6 +99,31 @@ export function ModelCapabilityEditor({ value, onChange, protocol, capability =
);
}
+function TextCapabilityEditor({ value, onChange, protocol, disabled }: Pick) {
+ const profile = value?.text || defaultModelCapabilityConfig(protocol).text!;
+ const updateReferences = (patch: Partial) => {
+ onChange?.({ version: 1, text: { references: { ...profile.references, ...patch } } });
+ };
+
+ return (
+ > & Pick) {
const profile = value?.image || defaultImageCapabilityConfig(protocol, model);
const update = (patch: Partial) => onChange?.({ version: 1, image: { ...profile, ...patch } });
@@ -104,7 +132,7 @@ function ImageCapabilityEditor({ value, onChange, protocol, model, disabled }: R
const updateQuality = (patch: Partial) => update({ quality: { ...profile.quality, ...patch } });
return (
-
+
+
+
+ );
+}
+
function ImageCapabilityEditor({ value, onChange, protocol, model, disabled }: Required
+
+ 文本理解能力
+ 默认不假设支持图片或视频，只有明确配置后相关请求才会进入该模型。
+
+ updateReferences({ promptMaxChars: next || 1 })} />
+ updateReferences({ maxImages: next || 0 })} />
+ updateReferences({ maxImageBytes: mbToBytes(next) })} />
+ updateReferences({ maxVideos: next || 0 })} />
+ updateReferences({ maxVideoBytes: mbToBytes(next) })} />
+
+
+
当前模型独立生效
@@ -132,7 +160,7 @@ function ImageCapabilityEditor({ value, onChange, protocol, model, disabled }: R
}}
/>
{profile.size.parameter !== "none" ? <>
- updateSize({ allowCustom })} />
@@ -143,7 +171,7 @@ function ImageCapabilityEditor({ value, onChange, protocol, model, disabled }: R
updateQuality({ supported })} />
{profile.quality.supported ? update({ transparentBackground })} />
@@ -157,7 +185,7 @@ function ImageCapabilityEditor({ value, onChange, protocol, model, disabled }: R
}
function CapabilityGroup({ title, children }: { title: string; children: ReactNode }) {
- return & { size?: number | string }>;
+
+const iconRegistry = LobeIcons as unknown as Record;
+const iconOptions = toc
+ .filter((item) => item.group === "model" || item.group === "provider")
+ .map((item) => ({ id: item.id, title: item.fullTitle || item.title }))
+ .filter((item) => Boolean(iconRegistry[item.id]));
+
+export function ModelLogo({ icon, size = 18, className }: { icon?: string; size?: number; className?: string }) {
+ const Icon = icon ? iconRegistry[icon] : undefined;
+ if (!Icon) return
+
+
+ );
+}
diff --git a/web/src/components/model-picker.tsx b/web/src/components/model-picker.tsx
index 5e3e9178d..168369062 100644
--- a/web/src/components/model-picker.tsx
+++ b/web/src/components/model-picker.tsx
@@ -1,14 +1,15 @@
import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from "react";
-import { Check, ChevronDown, Coins, Cpu } from "lucide-react";
+import { Check, ChevronDown, Coins } from "lucide-react";
import { Popover } from "antd";
import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
import { modelCapabilityConfigFor, videoDurationOptions } from "@/lib/model-capabilities";
import { compatibleModelInGroup, configuredModelDisplayName, groupModelsByDisplayName, modelCompatibilityError, resolveCompatibleModel, type ModelRequirements } from "@/lib/model-selection";
import { cn } from "@/lib/utils";
-import { modelDisplayName, modelOptionLabel, modelOptionName, resolveModelChannel, selectableModelsByCapability, type AiConfig, type ModelCapability } from "@/stores/use-config-store";
+import { modelDisplayName, modelIcon, modelOptionName, PUBLIC_MODEL_CATALOG_ID, resolveModelChannel, selectableModelsByCapability, type AiConfig, type ModelCapability } from "@/stores/use-config-store";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
+import { ModelLogo } from "@/components/model-logo";
type ModelPickerProps = {
config: AiConfig;
@@ -45,7 +46,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
.map((channel) => ({
key: channel.id,
label: channel.name || "未命名渠道",
- scope: channel.scope === "system" ? "系统渠道" : "自定义渠道",
+ scope: channel.id === PUBLIC_MODEL_CATALOG_ID ? "" : channel.scope === "system" ? "平台服务" : "我的模型",
models: groupModelsByDisplayName(
config,
options.filter((model) => resolveModelChannel(config, model).id === channel.id),
@@ -138,9 +139,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
图片能力参数
生成界面和后端请求都会按此处裁剪参数
-
: null}
{title}
{children}{title}
{children}
{label}
;
}
function BooleanField({ label, value, disabled, onChange }: { label: string; value: { supported: boolean; default: boolean }; disabled: boolean; onChange: (value: { supported: boolean; default: boolean }) => void }) {
diff --git a/web/src/components/model-logo.tsx b/web/src/components/model-logo.tsx
new file mode 100644
index 000000000..6e5fbf345
--- /dev/null
+++ b/web/src/components/model-logo.tsx
@@ -0,0 +1,74 @@
+import { useMemo, useState, type ComponentType, type SVGProps } from "react";
+import { Input, Popover } from "antd";
+import { Cpu, Search, X } from "lucide-react";
+
+import * as LobeIcons from "@lobehub/icons/es/icons";
+import { toc } from "@lobehub/icons/es/toc";
+
+import { cn } from "@/lib/utils";
+
+type LobeIconComponent = ComponentType
+
+ );
+
+ return (
+
+ } value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索 Logo" allowClear />
+ {value ? (
+
+ ) : null}
+
+
+ {filteredIcons.map((item) => {
+ const selected = value === item.id;
+ return (
+
+ );
+ })}
+
+
{group.label}
-
- {group.scope}
-
+ {group.scope ? {group.scope} : null}
{group.models.map((modelGroup) => {
@@ -207,7 +206,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
>
- [number]["logicalCapabilitySpec"]>) {
+ const operationLabels: Record = {
+ text_to_video: "文生视频",
+ image_to_video: "图生视频",
+ audio_to_video: "音频生视频",
+ extend: "视频续写",
+ inpaint: "局部修改",
+ replace_element: "元素替换",
+ camera_motion: "运镜调整",
+ style_transfer: "风格迁移",
+ };
+ const inputLabels: Record = {
+ image: { label: spec.capability === "text" ? "图片理解" : "参考图片", unit: "张" },
+ video: { label: spec.capability === "text" ? "视频理解" : "参考视频", unit: "个" },
+ audio: { label: "参考音频", unit: "个" },
+ mask: { label: "蒙版", unit: "张" },
+ };
+ const optionLabels: Record = {
+ size: "画面比例",
+ aspectRatio: "画面比例",
+ quality: "生成质量",
+ count: "输出数量",
+ videoSeconds: "视频时长",
+ duration: "视频时长",
+ vquality: "输出分辨率",
+ resolution: "输出分辨率",
+ audioVoice: "音色",
+ audioFormat: "音频格式",
+ audioSpeed: "语速",
+ };
+ const values: string[] = [];
+ values.push(...(spec.operations || []).map((operation) => operationLabels[operation] || operation));
+ for (const [name, constraint] of Object.entries(spec.inputs || {})) {
+ if (constraint.max <= 0) continue;
+ const definition = inputLabels[name];
+ if (!definition) continue;
+ values.push(spec.capability === "text" ? `支持${definition.label}` : `${definition.label}最多 ${constraint.max}${definition.unit}`);
+ }
+ for (const [name, constraint] of Object.entries(spec.options || {})) {
+ const label = optionLabels[name];
+ if (!label) continue;
+ if (constraint.values?.length) values.push(`${label} ${constraint.values.map(publicScalarLabel).join("/")}`);
+ else if (constraint.min !== undefined && constraint.max !== undefined) values.push(`${label} ${constraint.min}-${constraint.max}`);
+ }
+ return values.slice(0, 2).join(" · ") || "智能匹配当前输入";
+}
+
+function publicScalarLabel(value: unknown) {
+ if (value === true) return "支持";
+ if (value === false) return "关闭";
+ return String(value);
+}
+
function formatDurationSummary(profile: NonNullable["video"]>) {
const values = videoDurationOptions(profile);
if (profile.duration.selection === "enum") return values.map((item) => `${item}s`).join("/");
@@ -292,7 +347,9 @@ function pickerModelDisplayName(config: AiConfig, model: string, showConfiguredM
}
function pickerModelOptionLabel(config: AiConfig, model: string, showConfiguredModelName: boolean) {
- return showConfiguredModelName ? `${configuredModelDisplayName(config, model)}（${resolveModelChannel(config, model).name}）` : modelOptionLabel(config, model);
+ const displayName = showConfiguredModelName ? configuredModelDisplayName(config, model) : modelDisplayName(config, model);
+ const channel = resolveModelChannel(config, model);
+ return channel.scope === "system" ? displayName : `${displayName}（${channel.name}）`;
}
function ModelPrice({ price, compact = false }: { price: ModelMenuPrice | null | undefined; compact?: boolean }) {
@@ -324,25 +381,9 @@ function modelMenuMeta(model: string, capability?: ModelCapability): { descripti
if (name.includes("claude")) return { description: "长文本、推理与创意写作", time: "10s" };
if (name.includes("gemini")) return { description: "多模态理解与快速文本生成", time: "10s" };
if (name.includes("deepseek")) return { description: "推理、代码和结构化文本", time: "10s" };
- return { description: capability === "text" ? "文本生成模型" : "当前渠道模型", time: "10s" };
+ return { description: capability === "text" ? "文本生成模型" : "当前模型", time: "10s" };
}
-export function ModelIcon({ model }: { model: string }) {
- const icon = resolveModelIcon(modelOptionName(model));
- const monochrome = icon === "/icons/openai.svg" || icon === "/icons/grok.svg";
- return icon ? 
:
+ = {
- info: { label: "平台通知", color: "blue", icon: Info },
- success: { label: "状态恢复", color: "green", icon: Wrench },
- warning: { label: "服务提醒", color: "orange", icon: CircleAlert },
- critical: { label: "重要通知", color: "red", icon: ShieldAlert },
+const levelMeta: Record = {
+ info: { label: "平台通知", tone: "info" },
+ success: { label: "状态恢复", tone: "success" },
+ warning: { label: "服务提醒", tone: "warning" },
+ critical: { label: "重要通知", tone: "error" },
};
export default function AdminAnnouncementsPanel() {
@@ -130,15 +131,14 @@ export default function AdminAnnouncementsPanel() {
width: 120,
render: (level: AnnouncementLevel) => {
const meta = levelMeta[level] || levelMeta.info;
- const Icon = meta.icon;
- return 发布中 : 已关闭 ,
+ render: (value: AnnouncementStatus) => openEditModal(announcement) }} actions={announcement.status === "active" ? [{ key: "close", label: "关闭", danger: true, disabled: closingId === announcement.id, onClick: () => void closeAnnouncement(announcement), confirm: { title: "关闭这条公告？", description: "关闭后用户公告中心将不再展示，历史记录会保留。", okText: "关闭公告" } }] : []} />,
},
];
return (
<>
- { setKeyword(""); setPage(1); }} /> : null}{status !== "all" ? { setStatus("all"); setPage(1); }} /> : null}}
+ toolbarActive={Boolean(keyword || status !== "all")}
+ toolbarFilters={
{protocols.map((protocol) => {
const selected = value === protocol.value;
return (
@@ -66,7 +66,7 @@ export function ProtocolCardPicker({ capability, value, onChange, density = "com
role="radio"
aria-checked={selected}
className={cn(
- "relative flex min-w-0 flex-col rounded-md border text-left outline-none transition-colors focus-visible:ring-1 focus-visible:ring-foreground/40",
+ "relative flex min-w-0 flex-col rounded-md border text-left outline-none focus-visible:ring-1 focus-visible:ring-foreground/40",
density === "compact" ? "min-h-16 p-2" : "min-h-24 p-2.5",
selected ? "border-foreground/70 bg-foreground/[.04]" : "border-border/75 bg-background hover:border-foreground/25 hover:bg-muted/30",
)}
diff --git a/web/src/constant/credits.tsx b/web/src/constant/credits.tsx
index f3ff70f27..e5567385a 100644
--- a/web/src/constant/credits.tsx
+++ b/web/src/constant/credits.tsx
@@ -11,6 +11,7 @@ export function CreditSymbol({ className, ...props }: ComponentProps<"span">) {
export type ModelCreditCost = {
model: string;
+ pricePolicy?: "channel" | "unified";
billingMode: "fixed_request" | "per_second" | "token";
unitPriceMicrocredits: number;
};
@@ -27,6 +28,8 @@ export function requestCreditCost(options: { channelMode: string; modelCosts?: M
if (options.channelMode !== "remote") return null;
const cost = modelCreditCost(options.modelCosts, options.model);
if (!cost) return null;
+ // 跟随供应价格的前台模型只有后端完成能力路由后才能确定价格，前端不展示误导性预估。
+ if (cost.pricePolicy === "channel") return null;
// Token 订单由服务端按请求体预授权并在 usage 返回后结算，前端不展示无依据的固定价格。
if (cost.billingMode === "token") return null;
const quantity = cost.billingMode === "per_second"
diff --git a/web/src/lib/app-theme.ts b/web/src/lib/app-theme.ts
index 32ee386bb..3511c54b0 100644
--- a/web/src/lib/app-theme.ts
+++ b/web/src/lib/app-theme.ts
@@ -8,6 +8,13 @@ const controlTheme = {
solidHoverBg: "#303030",
solidActiveBg: "#404040",
solidFg: "#ffffff",
+ checkBg: "#171717",
+ checkHoverBg: "#303030",
+ checkActiveBg: "#404040",
+ checkFg: "#ffffff",
+ switchCheckedBg: "#171717",
+ switchCheckedHoverBg: "#303030",
+ switchCheckedHandle: "#ffffff",
selectedBg: "rgba(17, 17, 17, 0.09)",
selectedHoverBg: "rgba(17, 17, 17, 0.13)",
selectedActiveBg: "rgba(17, 17, 17, 0.16)",
@@ -33,6 +40,13 @@ const controlTheme = {
solidHoverBg: "#ffffff",
solidActiveBg: "#e5e5e5",
solidFg: "#171717",
+ checkBg: "#f5f5f5",
+ checkHoverBg: "#ffffff",
+ checkActiveBg: "#e5e5e5",
+ checkFg: "#131313",
+ switchCheckedBg: "#f5f5f5",
+ switchCheckedHoverBg: "#ffffff",
+ switchCheckedHandle: "#131313",
selectedBg: "rgba(255, 255, 255, 0.12)",
selectedHoverBg: "rgba(255, 255, 255, 0.16)",
selectedActiveBg: "rgba(255, 255, 255, 0.2)",
@@ -103,7 +117,7 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
colorPrimaryHover: color.solidHoverBg,
colorPrimaryActive: color.solidActiveBg,
primaryColor: color.solidFg,
- defaultBg: color.controlSurface,
+ defaultBg: "transparent",
defaultColor: color.selectedFg,
defaultBorderColor: color.controlBorder,
defaultHoverBg: color.selectedBg,
@@ -131,9 +145,9 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
Switch: {
handleBg: color.switchOffHandle,
handleShadow: dark ? "0 1px 4px rgba(0, 0, 0, 0.42)" : "0 1px 2px rgba(0, 0, 0, 0.2)",
- colorPrimary: color.solidBg,
- colorPrimaryActive: color.solidActiveBg,
- colorPrimaryHover: color.solidHoverBg,
+ colorPrimary: color.switchCheckedBg,
+ colorPrimaryActive: color.switchCheckedBg,
+ colorPrimaryHover: color.switchCheckedHoverBg,
colorTextQuaternary: color.switchOffBg,
colorTextTertiary: color.switchOffHoverBg,
controlOutline: color.controlFocus,
@@ -142,9 +156,9 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
colorBgContainer: color.controlSurface,
colorBgContainerDisabled: color.controlDisabledBg,
colorBorder: color.controlBorder,
- colorPrimary: color.solidBg,
- colorPrimaryActive: color.solidActiveBg,
- colorPrimaryHover: color.solidHoverBg,
+ colorPrimary: color.checkBg,
+ colorPrimaryActive: color.checkActiveBg,
+ colorPrimaryHover: color.checkHoverBg,
controlOutline: color.controlFocus,
},
Radio: {
@@ -154,16 +168,16 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
buttonCheckedBg: color.selectedBg,
buttonCheckedBgDisabled: color.controlDisabledBg,
buttonCheckedColorDisabled: color.controlDisabledFg,
- buttonSolidCheckedColor: color.solidFg,
- buttonSolidCheckedActiveBg: color.solidActiveBg,
- buttonSolidCheckedBg: color.solidBg,
- buttonSolidCheckedHoverBg: color.solidHoverBg,
+ buttonSolidCheckedColor: color.checkFg,
+ buttonSolidCheckedActiveBg: color.checkActiveBg,
+ buttonSolidCheckedBg: color.checkBg,
+ buttonSolidCheckedHoverBg: color.checkHoverBg,
colorBgContainer: color.controlSurface,
colorBgContainerDisabled: color.controlDisabledBg,
colorBorder: color.controlBorder,
- colorPrimary: color.solidBg,
- colorPrimaryActive: color.solidActiveBg,
- colorPrimaryHover: color.solidHoverBg,
+ colorPrimary: color.checkBg,
+ colorPrimaryActive: color.checkActiveBg,
+ colorPrimaryHover: color.checkHoverBg,
controlOutline: color.controlFocus,
},
Menu: {
@@ -241,3 +255,60 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
},
};
}
+
+/**
+ * 管理后台使用更高密度的控件节奏；只在 AdminShell 内挂载，避免改变创作端的视觉契约。
+ */
+export function getAdminAntThemeConfig(dark: boolean): ThemeConfig {
+ const base = getAntThemeConfig(dark);
+ const mutedForeground = dark ? "rgba(250, 250, 250, 0.58)" : "rgba(23, 23, 23, 0.58)";
+
+ return {
+ ...base,
+ token: {
+ ...base.token,
+ borderRadius: 6,
+ borderRadiusLG: 8,
+ colorBgContainer: "var(--color-surface)",
+ colorBorder: "var(--color-border)",
+ fontFamily: "var(--font-sans)",
+ padding: 12,
+ paddingSM: 8,
+ fontSize: 13,
+ },
+ components: {
+ ...base.components,
+ Card: {
+ ...base.components?.Card,
+ boxShadow: "none",
+ boxShadowTertiary: "none",
+ },
+ Drawer: {
+ ...base.components?.Drawer,
+ colorBgElevated: "var(--color-surface)",
+ },
+ Form: {
+ ...base.components?.Form,
+ itemMarginBottom: 16,
+ },
+ Menu: {
+ ...base.components?.Menu,
+ itemHeight: 34,
+ itemSelectedBg: "transparent",
+ },
+ Table: {
+ ...base.components?.Table,
+ cellPaddingBlock: 8,
+ cellPaddingBlockMD: 8,
+ cellPaddingBlockSM: 6,
+ cellPaddingInline: 12,
+ cellPaddingInlineMD: 12,
+ cellPaddingInlineSM: 8,
+ headerBg: "transparent",
+ headerColor: mutedForeground,
+ headerSplitColor: "transparent",
+ borderColor: "var(--color-border)",
+ },
+ },
+ };
+}
diff --git a/web/src/lib/canvas/canvas-project-generation.ts b/web/src/lib/canvas/canvas-project-generation.ts
index f5bb31652..f4db0c10b 100644
--- a/web/src/lib/canvas/canvas-project-generation.ts
+++ b/web/src/lib/canvas/canvas-project-generation.ts
@@ -1,5 +1,5 @@
import { type GenerationTask } from "@/services/api/task-center";
-import { backendProviderConfig, runBackendGenerationTask, type GenerationTaskDependencies } from "@/services/api/generation-task";
+import { backendProviderConfig, logicalModelIDForConfig, runBackendGenerationTask, type GenerationTaskDependencies } from "@/services/api/generation-task";
import { configuredModelMatchesCapability, defaultConfig, normalizeModelOptionValue, resolveModelRequestConfig, type AiConfig } from "@/stores/use-config-store";
import { resolveImageUrl, uploadImage } from "@/services/image-storage";
import { resolveMediaUrl } from "@/services/file-storage";
@@ -8,7 +8,7 @@ import { NODE_DEFAULT_SIZE } from "@/constant/canvas";
import { normalizeVideoDuration, normalizeVideoResolution } from "@/lib/video-generation-options";
import { isSeedanceVideoConfig } from "@/lib/seedance-video";
import { modelCapabilityConfigFor, normalizeImageValue } from "@/lib/model-capabilities";
-import { resolveCompatibleModel, resolveVideoOperation, type ModelRequirements } from "@/lib/model-selection";
+import { modelRequestOptions, resolveCompatibleModel, resolveVideoOperation, type ModelRequirements } from "@/lib/model-selection";
import { imageMetadata } from "@/lib/canvas/canvas-generation-task-sync";
import { ensureMediaNodeMinimumSize } from "@/lib/canvas/canvas-node-size";
import type { CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
@@ -85,7 +85,7 @@ export function assertCanvasImageReferenceLimit(config: AiConfig, referenceImage
if (error) throw new Error(error);
}
-export { backendProviderConfig };
+export { backendProviderConfig, logicalModelIDForConfig };
const generationOperationLocks = new Map>();
@@ -375,35 +375,46 @@ export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | u
const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
const storedModel = resolveCanvasGenerationModel(config, node?.metadata?.model, mode);
const preferredModel = storedModel || resolveCanvasGenerationModel(config, defaultModel, mode) || fallbackModel;
- const imageSize = mode === "image" ? node?.metadata?.size || config.size || defaultConfig.size : undefined;
+ // 先合并节点上的实时选择，再做兼容性匹配。否则路由只看到全局默认值，节点改过的时长、分辨率或布尔能力无法参与分流。
+ const requestedConfig: AiConfig = {
+ ...config,
+ quality: node?.metadata?.quality ?? config.quality ?? defaultConfig.quality,
+ size: node?.metadata?.size ?? config.size ?? defaultConfig.size,
+ transparentBackground: node?.metadata?.transparentBackground ?? config.transparentBackground ?? defaultConfig.transparentBackground,
+ videoSeconds: normalizeVideoDuration(node?.metadata?.seconds ?? config.videoSeconds ?? defaultConfig.videoSeconds),
+ vquality: normalizeVideoResolution(node?.metadata?.vquality ?? config.vquality ?? defaultConfig.vquality),
+ videoGenerateAudio: node?.metadata?.generateAudio ?? config.videoGenerateAudio ?? defaultConfig.videoGenerateAudio,
+ videoWatermark: node?.metadata?.watermark ?? config.videoWatermark ?? defaultConfig.videoWatermark,
+ audioVoice: node?.metadata?.audioVoice ?? config.audioVoice ?? defaultConfig.audioVoice,
+ audioFormat: node?.metadata?.audioFormat ?? config.audioFormat ?? defaultConfig.audioFormat,
+ audioSpeed: node?.metadata?.audioSpeed ?? config.audioSpeed ?? defaultConfig.audioSpeed,
+ audioInstructions: node?.metadata?.audioInstructions ?? config.audioInstructions ?? defaultConfig.audioInstructions,
+ count: String(node?.metadata?.count ?? (mode === "image" ? config.canvasImageCount || config.count || defaultConfig.count : config.count || defaultConfig.count)),
+ };
+ const imageSize = mode === "image" ? requestedConfig.size : undefined;
// 无 requirements 的调用（重试、媒体工具等）也按当前能力与尺寸路由到组内最低价兼容模型，
// 避免旧 metadata.model 不支持当前尺寸导致生成时被 normalize 回退。
- const baseRequirements = requirements?.capability ? requirements : { capability: mode };
+ const liveOptions = modelRequestOptions(requestedConfig, mode);
+ const baseRequirements = requirements?.capability
+ ? { ...requirements, options: { ...liveOptions, ...(requirements.options || {}) } }
+ : { capability: mode, options: liveOptions };
const model = resolveCompatibleModel(config, preferredModel, imageSize ? { ...baseRequirements, imageSize } : baseRequirements) || preferredModel;
const imageProfile = mode === "image" ? modelCapabilityConfigFor(config, model).image! : undefined;
const normalizedImage = imageProfile
? normalizeImageValue(imageProfile, {
- quality: node?.metadata?.quality || config.quality || defaultConfig.quality,
- size: node?.metadata?.size || config.size || defaultConfig.size,
- transparentBackground: node?.metadata?.transparentBackground || config.transparentBackground,
- count: String(node?.metadata?.count || config.canvasImageCount || config.count || defaultConfig.count),
+ quality: requestedConfig.quality,
+ size: requestedConfig.size,
+ transparentBackground: requestedConfig.transparentBackground,
+ count: requestedConfig.count,
})
: undefined;
return {
- ...config,
+ ...requestedConfig,
model,
- quality: normalizedImage?.quality || node?.metadata?.quality || config.quality || defaultConfig.quality,
- size: normalizedImage?.size || node?.metadata?.size || config.size || defaultConfig.size,
- transparentBackground: normalizedImage?.transparentBackground || ((node?.metadata?.transparentBackground || config.transparentBackground) === "true" ? "true" : "false"),
- videoSeconds: normalizeVideoDuration(node?.metadata?.seconds || config.videoSeconds || defaultConfig.videoSeconds),
- vquality: normalizeVideoResolution(node?.metadata?.vquality || config.vquality || defaultConfig.vquality),
- videoGenerateAudio: node?.metadata?.generateAudio || config.videoGenerateAudio || defaultConfig.videoGenerateAudio,
- videoWatermark: node?.metadata?.watermark || config.videoWatermark || defaultConfig.videoWatermark,
- audioVoice: node?.metadata?.audioVoice || config.audioVoice || defaultConfig.audioVoice,
- audioFormat: node?.metadata?.audioFormat || config.audioFormat || defaultConfig.audioFormat,
- audioSpeed: node?.metadata?.audioSpeed || config.audioSpeed || defaultConfig.audioSpeed,
- audioInstructions: node?.metadata?.audioInstructions || config.audioInstructions || defaultConfig.audioInstructions,
- count: normalizedImage?.count || String(node?.metadata?.count || (mode === "image" ? config.canvasImageCount || config.count : config.count) || defaultConfig.count),
+ quality: normalizedImage?.quality || requestedConfig.quality,
+ size: normalizedImage?.size || requestedConfig.size,
+ transparentBackground: normalizedImage?.transparentBackground || (requestedConfig.transparentBackground === "true" ? "true" : "false"),
+ count: normalizedImage?.count || requestedConfig.count,
};
}
diff --git a/web/src/lib/model-capabilities.ts b/web/src/lib/model-capabilities.ts
index 5108f3bf8..a20bd9f0c 100644
--- a/web/src/lib/model-capabilities.ts
+++ b/web/src/lib/model-capabilities.ts
@@ -2,10 +2,21 @@ import type { ModelProtocol } from "@/lib/model-protocols";
export type ModelCapabilityConfig = {
version: number;
+ text?: TextCapabilityConfig;
image?: ImageCapabilityConfig;
video?: VideoCapabilityConfig;
};
+export type TextCapabilityConfig = {
+ references: {
+ promptMaxChars: number;
+ maxImages: number;
+ maxImageBytes: number;
+ maxVideos: number;
+ maxVideoBytes: number;
+ };
+};
+
export type ImageSizeParameter = "none" | "size" | "aspect_ratio";
export type ImageCapabilityConfig = {
@@ -131,6 +142,10 @@ export function defaultImageCapabilityConfig(protocol?: ModelProtocol, model = "
}
export function defaultModelCapabilityConfig(protocol?: ModelProtocol, model = ""): ModelCapabilityConfig {
+ const text: TextCapabilityConfig = {
+ // 文本模型的视觉能力必须由管理员明确开启，不能根据模型名猜测。
+ references: { promptMaxChars: 32000, maxImages: 0, maxImageBytes: 0, maxVideos: 0, maxVideoBytes: 0 },
+ };
const video: VideoCapabilityConfig = {
references: {
promptMaxChars: 1000,
@@ -181,7 +196,7 @@ export function defaultModelCapabilityConfig(protocol?: ModelProtocol, model = "
video.resolutions = ["1080p"];
video.defaultResolution = "1080p";
}
- return { version: 1, image: defaultImageCapabilityConfig(protocol, model), video };
+ return { version: 1, text, image: defaultImageCapabilityConfig(protocol, model), video };
}
export function modelCapabilityConfigFor(config: { channels: Array<{ id: string; models: string[]; modelCosts?: Array<{ model: string; capabilityConfig?: ModelCapabilityConfig; protocol?: ModelProtocol }> }> }, model: string) {
@@ -192,10 +207,13 @@ export function modelCapabilityConfigFor(config: { channels: Array<{ id: string;
const cost = channel?.modelCosts?.find((item) => item.model === modelName);
const fallback = defaultModelCapabilityConfig(cost?.protocol, modelName);
if (!cost?.capabilityConfig) return fallback;
+ const text = cost.capabilityConfig.text
+ ? { ...fallback.text!, ...cost.capabilityConfig.text, references: { ...fallback.text!.references, ...cost.capabilityConfig.text.references } }
+ : fallback.text;
const video = cost.capabilityConfig.video
? { ...fallback.video!, ...cost.capabilityConfig.video, references: { ...fallback.video!.references, ...cost.capabilityConfig.video.references } }
: fallback.video;
- return { ...fallback, ...cost.capabilityConfig, image: cost.capabilityConfig.image || fallback.image, video };
+ return { ...fallback, ...cost.capabilityConfig, text, image: cost.capabilityConfig.image || fallback.image, video };
}
export function normalizeImageValue(profile: ImageCapabilityConfig, value: { size?: string; quality?: string; count?: string; transparentBackground?: string }) {
diff --git a/web/src/lib/model-selection.ts b/web/src/lib/model-selection.ts
index 0d6b513e8..0a01ee258 100644
--- a/web/src/lib/model-selection.ts
+++ b/web/src/lib/model-selection.ts
@@ -15,6 +15,7 @@ export type ModelRequirements = {
videoOperation?: string;
videoSeconds?: string;
imageSize?: string;
+ options?: Record;
};
export type DisplayModelGroup = {
@@ -53,6 +54,18 @@ export function modelCompatibilityError(config: AiConfig, model: string, require
if (!capability) return "";
const input = requirements?.input;
const visualInputCount = input ? input.imageCount + input.characterCount : 0;
+ const channel = resolveModelChannel(config, model);
+ const logicalCost = channel.modelCosts?.find((item) => item.model === modelOptionName(model));
+ const logicalSpecs = logicalCost?.logicalCapabilityProfiles?.length ? logicalCost.logicalCapabilityProfiles : logicalCost?.logicalCapabilitySpec ? [logicalCost.logicalCapabilitySpec] : [];
+ if (logicalSpecs.length) {
+ const publicOptionNames = logicalCost?.logicalCapabilitySpec?.options || {};
+ const logicalRequirements = {
+ ...requirements,
+ options: Object.fromEntries(Object.entries(requirements.options || {}).filter(([name]) => Boolean(publicOptionNames[name]))),
+ };
+ const errors = logicalSpecs.map((spec) => logicalModelCompatibilityError(spec, logicalRequirements, visualInputCount));
+ return errors.some((error) => !error) ? "" : errors[0] || "当前输入不受支持";
+ }
if (capability === "image") {
const image = modelCapabilityConfigFor(config, model).image!;
@@ -87,6 +100,71 @@ export function modelCompatibilityError(config: AiConfig, model: string, require
return input.imageCount > 0 || input.videoCount > 0 || input.audioCount > 0 ? "音频模型只接受文本或单个角色卡输入" : "";
}
+export function modelRequestOptions(config: AiConfig, capability: ModelCapability) {
+ switch (capability) {
+ case "image":
+ return { size: config.size, quality: config.quality, transparentBackground: config.transparentBackground === "true", count: Number(config.count) };
+ case "video":
+ return { size: config.size, videoSeconds: Number(config.videoSeconds), vquality: config.vquality, videoGenerateAudio: config.videoGenerateAudio === "true", videoWatermark: config.videoWatermark === "true" };
+ case "audio":
+ return { audioVoice: config.audioVoice, audioFormat: config.audioFormat, audioSpeed: Number(config.audioSpeed) };
+ default:
+ return {};
+ }
+}
+
+function logicalModelCompatibilityError(spec: NonNullable[number]["logicalCapabilitySpec"]>, requirements: ModelRequirements, visualInputCount: number) {
+ if (requirements.capability && spec.capability !== requirements.capability) return "不支持当前生成类型";
+ const input = requirements.input;
+ const counts: Record = {
+ text: 0,
+ image: visualInputCount,
+ video: input?.videoCount || 0,
+ audio: input?.audioCount || 0,
+ };
+ for (const [kind, count] of Object.entries(counts)) {
+ const constraint = spec.inputs?.[kind];
+ if (!constraint && count > 0) return `不支持${kind}输入`;
+ if (constraint && (count < constraint.min || count > constraint.max)) return `${kind}输入需为 ${constraint.min}-${constraint.max} 个`;
+ }
+ const operation = requirements.capability === "video" && input ? resolveVideoOperation(input, requirements.videoOperation) : requirements.videoOperation;
+ if (operation && spec.operations?.length && !spec.operations.includes(operation)) return "不支持当前生成模式";
+ const options = { ...requirements.options, ...(requirements.videoSeconds ? { videoSeconds: requirements.videoSeconds } : {}), ...(requirements.imageSize ? { size: requirements.imageSize } : {}) };
+ for (const [name, value] of Object.entries(options)) {
+ if (value === undefined || value === null || value === "") continue;
+ const constraint = spec.options?.[name];
+ if (!constraint || !logicalOptionMatches(constraint, value)) return logicalOptionError(name);
+ }
+ return "";
+}
+
+function logicalOptionMatches(constraint: { values?: unknown[]; min?: number; max?: number; step?: number }, value: unknown) {
+ if (constraint.values?.length) return constraint.values.some((candidate) => String(candidate).toLowerCase() === String(value).toLowerCase());
+ const numeric = Number(value);
+ if (!Number.isFinite(numeric)) return false;
+ if (constraint.min !== undefined && numeric < constraint.min) return false;
+ if (constraint.max !== undefined && numeric > constraint.max) return false;
+ if (constraint.step !== undefined && constraint.min !== undefined) return Math.abs((numeric - constraint.min) / constraint.step - Math.round((numeric - constraint.min) / constraint.step)) < 1e-9;
+ return true;
+}
+
+function logicalOptionError(name: string) {
+ const label: Record = {
+ size: "尺寸",
+ quality: "质量",
+ transparentBackground: "透明背景",
+ count: "输出数量",
+ videoSeconds: "时长",
+ vquality: "分辨率",
+ videoGenerateAudio: "同步音频",
+ videoWatermark: "水印设置",
+ audioVoice: "音色",
+ audioFormat: "音频格式",
+ audioSpeed: "语速",
+ };
+ return `不支持当前${label[name] || name}`;
+}
+
export function compatibleModelInGroup(config: AiConfig, models: string[], requirements?: ModelRequirements, preferred?: string) {
const compatible = models.filter((model) => !modelCompatibilityError(config, model, requirements));
if (!compatible.length) return "";
diff --git a/web/src/lib/user-session.ts b/web/src/lib/user-session.ts
index 8dbec73c9..af9c33a8d 100644
--- a/web/src/lib/user-session.ts
+++ b/web/src/lib/user-session.ts
@@ -1,10 +1,12 @@
-import { getFeatureAvailability, getSystemChannels, type AuthSessionPayload } from "@/services/api/auth";
+import { getFeatureAvailability, type AuthSessionPayload } from "@/services/api/auth";
+import { listLogicalModels, type CapabilitySpec, type OptionConstraint, type PublicLogicalModel } from "@/services/api/logical-models";
import { localForageStorage } from "@/lib/localforage-storage";
import { appQueryClient } from "@/lib/query-client";
import { scopedLocalStorage, setActiveUserScope } from "@/lib/user-scope";
import { CANVAS_STORE_KEY, flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
import { ASSET_STORE_KEY, flushAssetStorePersistence, useAssetStore } from "@/stores/use-asset-store";
-import { CONFIG_STORE_KEY, defaultConfig, normalizeConfigSnapshot, useConfigStore } from "@/stores/use-config-store";
+import { CONFIG_STORE_KEY, PUBLIC_MODEL_CATALOG_ID, defaultConfig, normalizeConfigSnapshot, useConfigStore, type ModelChannel } from "@/stores/use-config-store";
+import { defaultModelCapabilityConfig, type ModelCapabilityConfig } from "@/lib/model-capabilities";
import { useUserStore } from "@/stores/use-user-store";
import { installRemoteUserDataAutoSync, resetRemoteUserDataSync, syncRemoteUserData, withRemoteUserDataSyncPaused } from "@/services/user-data-sync";
import { withGenerationConsumersPaused } from "@/services/generation-consumer-lifecycle";
@@ -41,7 +43,7 @@ export async function applyUserSession(payload: AuthSessionPayload) {
// 只有首次配置缺失时才生成能力推荐；已有配置中的空数组代表用户明确清空。
const initialSystemConfig = {
...defaultConfig,
- channels: payload.systemChannels || [],
+ channels: managedModelChannels(payload.logicalModels || []),
imageModels: undefined,
videoModels: undefined,
textModels: undefined,
@@ -49,7 +51,7 @@ export async function applyUserSession(payload: AuthSessionPayload) {
};
useConfigStore.getState().replaceConfig(normalizeConfigSnapshot({ config: initialSystemConfig }).config);
} else {
- useConfigStore.getState().mergeSystemChannels(payload.systemChannels || []);
+ useConfigStore.getState().mergeSystemChannels(managedModelChannels(payload.logicalModels || []));
}
installRemoteUserDataAutoSync();
if (payload.user?.id) await syncRemoteUserData(payload.user.id);
@@ -60,9 +62,100 @@ export async function applyUserSession(payload: AuthSessionPayload) {
}
export async function refreshSystemChannels() {
- // 系统模型由后端统一维护，后台变更后只刷新这一层，避免重跑整套用户数据同步。
- const payload = await getSystemChannels();
- useConfigStore.getState().mergeSystemChannels(payload.channels || []);
+ // 创作端只刷新公开前台模型；供应渠道目录仅管理员页面可见。
+ const logicalPayload = await listLogicalModels();
+ useConfigStore.getState().mergeSystemChannels(managedModelChannels(logicalPayload.models || []));
+}
+
+function managedModelChannels(models: PublicLogicalModel[]) {
+ const availableModels = models.filter((item) => item.available);
+ if (!availableModels.length) return [];
+ const managed: ModelChannel = {
+ id: PUBLIC_MODEL_CATALOG_ID,
+ name: "平台模型",
+ baseUrl: "/api",
+ apiKey: "system",
+ apiFormat: "openai",
+ scope: "system",
+ enabled: true,
+ models: availableModels.map((item) => item.id),
+ modelCosts: availableModels.map((item) => ({
+ model: item.id,
+ displayName: item.name,
+ description: item.description,
+ icon: item.icon,
+ capability: item.capability,
+ pricePolicy: item.pricePolicy,
+ billingMode: item.billingMode,
+ unitPriceMicrocredits: item.unitPriceMicrocredits,
+ inputTokenPriceMicrocredits: item.inputPriceMicrocredits,
+ outputTokenPriceMicrocredits: item.outputPriceMicrocredits,
+ cachedTokenPriceMicrocredits: item.cachedPriceMicrocredits,
+ capabilityConfig: projectLogicalCapability(item.capabilitySpec, item.defaultOptions),
+ logicalModelId: item.id,
+ logicalCapabilitySpec: item.capabilitySpec,
+ logicalCapabilityProfiles: item.capabilityProfiles,
+ defaultOptions: item.defaultOptions,
+ })),
+ };
+ return [managed];
+}
+
+function projectLogicalCapability(spec: CapabilitySpec, defaults: Record): ModelCapabilityConfig {
+ const projected = defaultModelCapabilityConfig();
+ if (spec.capability === "image" && projected.image) {
+ projected.image.references.maxImages = spec.inputs?.image?.max ?? 0;
+ projected.image.references.maskSupported = (spec.inputs?.mask?.max ?? 0) > 0;
+ projected.image.size = { parameter: "none", values: [], default: "auto", allowCustom: false };
+ projected.image.quality = { supported: false, values: [], default: "auto" };
+ projected.image.transparentBackground = { supported: false, default: false };
+ applyStringOption(spec.options?.size || spec.options?.aspectRatio, defaults.size, (values, initial) => {
+ projected.image!.size = { parameter: "size", values, default: initial, allowCustom: false };
+ });
+ applyStringOption(spec.options?.quality, defaults.quality, (values, initial) => {
+ projected.image!.quality = { supported: true, values, default: initial };
+ });
+ projected.image.maxOutputs = maxNumericOption(spec.options?.count, 1);
+ projected.image.transparentBackground = booleanOption(spec.options?.transparentBackground, defaults.transparentBackground);
+ }
+ if (spec.capability === "video" && projected.video) {
+ projected.video.references.minImages = spec.inputs?.image?.min ?? 0;
+ projected.video.references.maxImages = spec.inputs?.image?.max ?? 0;
+ projected.video.references.maxVideos = spec.inputs?.video?.max ?? 0;
+ projected.video.references.maxAudios = spec.inputs?.audio?.max ?? 0;
+ projected.video.operations = spec.operations || [];
+ projected.video.defaultOperation = spec.operations?.[0] || "";
+ const duration = spec.options?.videoSeconds || spec.options?.duration;
+ if (duration?.values?.length) projected.video.duration = { selection: "enum", values: duration.values.map(Number).filter(Number.isFinite), default: Number(defaults.videoSeconds ?? duration.values[0]) };
+ else if (duration?.min !== undefined && duration.max !== undefined) projected.video.duration = { selection: "range", min: duration.min, max: duration.max, step: duration.step || 1, default: Number(defaults.videoSeconds ?? duration.min) };
+ projected.video.ratios = stringValues(spec.options?.size || spec.options?.aspectRatio);
+ projected.video.defaultRatio = String(defaults.size ?? projected.video.ratios[0] ?? "");
+ projected.video.resolutions = stringValues(spec.options?.vquality || spec.options?.resolution);
+ projected.video.defaultResolution = String(defaults.vquality ?? projected.video.resolutions[0] ?? "");
+ projected.video.generateAudio = booleanOption(spec.options?.videoGenerateAudio, defaults.videoGenerateAudio);
+ projected.video.watermark = booleanOption(spec.options?.videoWatermark, defaults.videoWatermark);
+ }
+ return projected;
+}
+
+function applyStringOption(option: OptionConstraint | undefined, fallback: unknown, apply: (values: string[], initial: string) => void) {
+ const values = stringValues(option);
+ if (values.length) apply(values, String(fallback ?? values[0]));
+}
+
+function stringValues(option?: OptionConstraint) {
+ return (option?.values || []).map(String);
+}
+
+function maxNumericOption(option: OptionConstraint | undefined, fallback: number) {
+ if (option?.max !== undefined) return option.max;
+ const values = (option?.values || []).map(Number).filter(Number.isFinite);
+ return values.length ? Math.max(...values) : fallback;
+}
+
+function booleanOption(option: OptionConstraint | undefined, fallback: unknown) {
+ const supported = (option?.values || []).some((value) => value === true || value === "true");
+ return { supported, default: supported && String(fallback) === "true" };
}
export async function refreshFeatureAvailability() {
diff --git a/web/src/pages/admin/channels/channels-page.tsx b/web/src/pages/admin/channels/channels-page.tsx
index 3e025dec0..d8de0b12f 100644
--- a/web/src/pages/admin/channels/channels-page.tsx
+++ b/web/src/pages/admin/channels/channels-page.tsx
@@ -1,12 +1,12 @@
-import { App, Button, Drawer, Form, Input, InputNumber, Select, Switch, Table, Tag } from "antd";
+import { App, Button, Form, Input, InputNumber, Modal, Select, Switch } from "antd";
import type { FormInstance } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Pencil, Plus, Power, Search, Trash2 } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "react-router";
-import { ListToolbar, TableSurface } from "@/components/layout/workspace-page";
import { ChannelHeadersEditor, validateChannelHeaders } from "@/components/channel-headers-editor";
+import { PaginationBar } from "@/components/layout/workspace-page";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { desktopLocalChannelFormState, desktopLocalChannelPayloadValue, DESKTOP_LOCAL_CHANNEL_EXAMPLE_BASE_URL } from "@/lib/desktop-local-channel";
import { refreshSystemChannels } from "@/lib/user-session";
@@ -15,7 +15,7 @@ import { type ChannelHeader, type ModelChannel } from "@/stores/use-config-store
import { useUserStore } from "@/stores/use-user-store";
import { useAdminContext } from "../admin-context";
import { AdminPageFrame } from "../components/admin-shell";
-import { AdminRowActions, AdminTableEmpty, AdminTableSkeleton, configuredSecretText } from "../components/admin-ui";
+import { AdminDataTable, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty, configuredSecretText } from "../components/admin-ui";
import { ChannelModelManager } from "../components/channel-model-manager";
type ChannelFormValues = { name: string; baseUrl: string; allowLocalChannel?: boolean; apiKey?: string; secretKey?: string; headers?: ChannelHeader[]; useGlobalConcurrency?: boolean; concurrencyLimit?: number; enabled?: boolean };
@@ -189,12 +189,12 @@ export default function ChannelsPage() {
};
const columns: ColumnsType = [
- { title: "渠道", dataIndex: "name", render: (_, channel) => },
+ { title: "渠道", dataIndex: "name", render: (_, channel) => },
{ title: "模型", dataIndex: "models", width: 100, render: (models: string[]) => `${models?.length || 0} 个` },
{ title: "最大并发", dataIndex: "concurrencyLimit", width: 120, render: (value: number) => value > 0 ? value : 跟随系统 },
- { title: "凭证", width: 130, render: (_, channel) => {channel.hasApiKey ? (channel.hasSecretKey ? "AK/SK 已配置" : "API Key 已配置") : "未配置"} },
- { title: "状态", dataIndex: "enabled", width: 100, render: (enabled) => {enabled !== false ? "已启用" : "已停用"} },
- { title: "操作", width: 160, fixed: "right", align: "right", render: (_, channel) => setManagingChannel(channel) }} actions={[{ key: "edit", label: "编辑渠道", icon: setManagingChannel(channel) }} actions={[{ key: "edit", label: "编辑", icon: updateUrl({ filter: "", status: "all", page: 1 })}>
- } value={keyword} placeholder="搜索渠道名称或地址" onChange={(event) => updateUrl({ filter: event.target.value, page: 1 }, true)} />
-
-
- {loading && channels.length === 0 ?
} onClick={() => openDrawer()}>新增系统渠道} /> }} pagination={{ current: page, pageSize, total, showSizeChanger: true, pageSizeOptions: [20, 50, 100], showTotal: (value, range) => `${range[0]}-${range[1]} / 共 ${value} 条`, onChange: (nextPage, nextSize) => updateUrl({ page: nextSize !== pageSize ? 1 : nextPage, pageSize: nextSize }) }} scroll={{ x: 820 }} />}
-
- void save()}>保存}>
+ updateUrl({ filter: "", page: 1 })} /> : null}{status !== "all" ? updateUrl({ status: "all", page: 1 })} /> : null}}
+ toolbarFilters={
}
+ >
-
+
);
}
diff --git a/web/src/pages/admin/components/admin-announcements-panel.tsx b/web/src/pages/admin/components/admin-announcements-panel.tsx
index 87a57e8bd..062342ae9 100644
--- a/web/src/pages/admin/components/admin-announcements-panel.tsx
+++ b/web/src/pages/admin/components/admin-announcements-panel.tsx
@@ -1,9 +1,9 @@
-import { App, Button, Form, Input, Modal, Popconfirm, Select, Table, Tag } from "antd";
+import { App, Button, Form, Input, Modal, Select } from "antd";
import type { ColumnsType } from "antd/es/table";
-import { BellRing, CircleAlert, Info, Plus, Search, ShieldAlert, Wrench } from "lucide-react";
+import { Plus, Search } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
-import { ListToolbar, TableSurface } from "@/components/layout/workspace-page";
+import { PaginationBar } from "@/components/layout/workspace-page";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import {
closeAdminAnnouncement,
@@ -14,6 +14,7 @@ import {
type AnnouncementStatus,
type SystemAnnouncement,
} from "@/services/api/announcements";
+import { AdminDataTable, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";
type AnnouncementFormValues = {
title: string;
@@ -28,11 +29,11 @@ const levelOptions: Array<{ value: AnnouncementLevel; label: string }> = [
{ value: "critical", label: "重要通知" },
];
-const levelMeta: Record{channel.name}
{channel.baseUrl}
{channel.name}
{channel.baseUrl}
-
- {announcement.status === "active" ? (
- void closeAnnouncement(announcement)}>
-
-
- ) : null}
-
- ),
+ render: (_, announcement) =>
-
+
-
- } onClick={openPublishModal}>发布公告
-
-
- 共保留 {total} 条公告记录
- 关闭公告会立即从用户公告中心移除
-