Refactor multiple pages to remove unnecessary labels and improve UI consistency

Updated various components including AssistantPage, AssistantWorkflowPage, ComponentsModelsPage, and others by removing redundant label elements and enhancing the header structure. This change streamlines the layout and improves the overall user experience across the application.
2026-06-07 19:50:29 +08:00
parent 2e3cc3ab5b
commit f49ec64881
12 changed files with 9 additions and 36 deletions
--- a/src/components/pages/AssistantPage.tsx
+++ b/src/components/pages/AssistantPage.tsx
@@ -273,8 +273,7 @@ export function AssistantPage() {
      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
        <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6">
          <div>
-            <div className="caption-label text-muted-soft">助手管理</div>
-            <h1 className="font-display display-lg mt-3 text-ink">助手列表</h1>
+            <h1 className="font-display display-lg text-ink">助手列表</h1>
            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
              管理已有的视频助手，支持提示词、工作流、Dify 和 FastGPT 类型。
            </p>
@@ -478,8 +477,7 @@ export function AssistantPage() {
      <div className="mx-auto flex w-full max-w-[920px] flex-col gap-8">
        <div className="flex items-start justify-between gap-6">
          <div>
-            <div className="caption-label text-muted-soft">新建助手</div>
-            <h1 className="font-display display-lg mt-3 text-ink">创建助手</h1>
+            <h1 className="font-display display-lg text-ink">创建助手</h1>
            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
              先为助手取个名字，再选择构建方式。不同方式将进入不同的构建流程。
            </p>
@@ -590,18 +588,11 @@ export function AssistantPage() {
  }

  if (view === "placeholder") {
-    const option = assistantTypeOptions.find(
-      (item) => item.type === draftType,
-    );
-
    return (
      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
        <div className="flex items-start justify-between gap-6">
          <div>
-            <div className="caption-label text-muted-soft">
-              {option?.label ?? "新建助手"}
-            </div>
-            <h1 className="font-display display-lg mt-3 text-ink">
+            <h1 className="font-display display-lg text-ink">
              {draftName.trim() || "创建助手"}
            </h1>
            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
@@ -657,8 +648,7 @@ export function AssistantPage() {
    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
      <div className="flex items-start justify-between gap-6">
        <div>
-          <div className="caption-label text-muted-soft">提示词模式</div>
-          <h1 className="font-display display-lg mt-3 text-ink">
+          <h1 className="font-display display-lg text-ink">
            创建助手
          </h1>
          <p className="mt-3 text-[15px] text-muted-foreground">
--- a/src/components/pages/AssistantWorkflowPage.tsx
+++ b/src/components/pages/AssistantWorkflowPage.tsx
@@ -5,8 +5,7 @@ export function AssistantWorkflowPage() {
  return (
    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
      <div>
-        <div className="caption-label text-muted-soft">工作流模式</div>
-        <h1 className="font-display display-lg mt-3 text-ink">创建助手</h1>
+        <h1 className="font-display display-lg text-ink">创建助手</h1>
        <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
          通过节点编排方式创建复杂 AI
          视频助手流程，适合多轮任务、工具调用、知识库检索和人工协同场景。
--- a/src/components/pages/ComponentsKnowledgePage.tsx
+++ b/src/components/pages/ComponentsKnowledgePage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function ComponentsKnowledgePage() {
  return (
    <PlaceholderPage
-      label="资源管理"
      title="知识库"
      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
    />
--- a/src/components/pages/ComponentsModelsPage.tsx
+++ b/src/components/pages/ComponentsModelsPage.tsx
@@ -268,8 +268,7 @@ export function ComponentsModelsPage() {
    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
      <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6">
        <div>
-          <div className="caption-label text-muted-soft">资源管理</div>
-          <h1 className="font-display display-lg mt-3 text-ink">模型资源</h1>
+          <h1 className="font-display display-lg text-ink">模型资源</h1>
          <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
            统一管理 LLM、ASR、TTS、Realtime 与 Embedding 模型，配置各自的接口类型与访问凭证。
          </p>
--- a/src/components/pages/ComponentsToolsPage.tsx
+++ b/src/components/pages/ComponentsToolsPage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function ComponentsToolsPage() {
  return (
    <PlaceholderPage
-      label="资源管理"
      title="工具资源"
      description="统一管理大语言模型、语音识别、声音资源、知识库与工具插件。"
    />
--- a/src/components/pages/DashboardPage.tsx
+++ b/src/components/pages/DashboardPage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function DashboardPage() {
  return (
    <PlaceholderPage
-      label="监控观察"
      title="数据看板"
      description="查看助手的对话数据、运行日志与调用明细。"
    />
--- a/src/components/pages/HistoryPage.tsx
+++ b/src/components/pages/HistoryPage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function HistoryPage() {
  return (
    <PlaceholderPage
-      label="运行记录"
      title="历史记录"
      description="查看助手的对话历史、运行日志与调用明细。"
    />
--- a/src/components/pages/HomePage.tsx
+++ b/src/components/pages/HomePage.tsx
@@ -29,9 +29,7 @@ export function HomePage({ onNavigate }: HomePageProps) {
        />

        <div className="relative max-w-2xl">
-          <div className="caption-label text-muted-soft">AI 视频助手 · 管理台</div>
-
-          <h1 className="font-display display-xl mt-5 text-ink">
+          <h1 className="font-display display-xl text-ink">
            你好，开始管理你的智能视频助手
          </h1>

--- a/src/components/pages/PlaceholderPage.tsx
+++ b/src/components/pages/PlaceholderPage.tsx
@@ -1,19 +1,13 @@
 type PlaceholderPageProps = {
-  label: string;
  title: string;
  description: string;
 };

-export function PlaceholderPage({
-  label,
-  title,
-  description,
-}: PlaceholderPageProps) {
+export function PlaceholderPage({ title, description }: PlaceholderPageProps) {
  return (
    <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
      <div>
-        <div className="caption-label text-muted-soft">{label}</div>
-        <h1 className="font-display display-lg mt-3 text-ink">{title}</h1>
+        <h1 className="font-display display-lg text-ink">{title}</h1>
        <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
          {description}
        </p>
--- a/src/components/pages/ProfilePage.tsx
+++ b/src/components/pages/ProfilePage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function ProfilePage() {
  return (
    <PlaceholderPage
-      label="账户设置"
      title="个人中心"
      description="管理账户信息、团队成员、密钥与偏好设置。"
    />
--- a/src/components/pages/TestPage.tsx
+++ b/src/components/pages/TestPage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function TestPage() {
  return (
    <PlaceholderPage
-      label="实时调试"
      title="测试助手"
      description="在发布前通过实时视频对话测试助手的表现与交互体验。"
    />
--- a/src/components/pages/WorkflowPage.tsx
+++ b/src/components/pages/WorkflowPage.tsx
@@ -3,7 +3,6 @@ import { PlaceholderPage } from "./PlaceholderPage";
 export function WorkflowPage() {
  return (
    <PlaceholderPage
-      label="流程编排"
      title="工作流"
      description="管理与编排可复用的助手工作流，支持多轮任务与工具调用。"
    />