diff --git a/frontend/src/components/common/CardBase.vue b/frontend/src/components/common/CardBase.vue
new file mode 100644
index 0000000..306373b
--- /dev/null
+++ b/frontend/src/components/common/CardBase.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+    <div class="p-4">
+      <div class="flex justify-between items-start mb-3">
+        <div class="flex-1">
+          <h5 :class="[titleClass || 'text-xl font-semibold tracking-tight text-gray-900 mb-1 truncate']">
+            <slot name="title"></slot>
+          </h5>
+          <div v-if="$slots.subtitle" class="flex items-center mb-2">
+            <slot name="subtitle"></slot>
+          </div>
+        </div>
+        <div v-if="$slots['header-actions']" class="flex space-x-2">
+          <slot name="header-actions"></slot>
+        </div>
+      </div>
+
+      <div v-if="$slots.content" class="text-sm text-gray-600 mb-3 space-y-2">
+        <slot name="content"></slot>
+      </div>
+
+      <div class="flex justify-between items-center">
+        <slot name="footer-left">
+          <span v-if="$slots.timestamp" class="text-xs text-gray-500">
+            <slot name="timestamp"></slot>
+          </span>
+        </slot>
+        <div v-if="$slots['footer-actions']" class="flex space-x-2">
+          <slot name="footer-actions"></slot>
+        </div>
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  titleClass: {
+    type: String,
+    default: ''
+  }
+});
+</script>
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
new file mode 100644
index 0000000..081cca7
--- /dev/null
+++ b/frontend/src/components/common/index.ts
@@ -0,0 +1,4 @@
+import CardBase from "./CardBase.vue";
+import PromotionBanner from "./PromotionBanner.vue";
+
+export { CardBase, PromotionBanner }; 
diff --git a/frontend/src/components/common/knowledge/KnowledgeDocCard.vue b/frontend/src/components/common/knowledge/KnowledgeDocCard.vue
index 6a776a5..2e1f2f5 100644
--- a/frontend/src/components/common/knowledge/KnowledgeDocCard.vue
+++ b/frontend/src/components/common/knowledge/KnowledgeDocCard.vue
@@ -1,31 +1,26 @@
 <template>
-  <div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
-    <div class="p-4">
-      <div class="flex justify-between items-start">
-        <div>
-          <h5 class="text-xl font-semibold tracking-tight text-gray-900 mb-1 truncate">{{ doc.name }}</h5>
-          <div class="flex items-center mb-2">
-            <KnowledgeStatusBadge :status="doc.status" type="status" class="mr-2" />
-            <KnowledgeStatusBadge :enabled="doc.enable" type="enabled" />
-          </div>
-        </div>
-        <div class="flex space-x-2">
-          <slot name="toggle-switch"></slot>
-        </div>
-      </div>
-      <div class="flex justify-between items-center">
-        <span class="text-xs text-gray-500">
-          上传时间: {{ formatDateString(doc.createTime) }}
-        </span>
-        <div class="flex space-x-2">
-          <slot name="actions"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
+  <CardBase>
+    <template #title>{{ doc.name }}</template>
+    <template #subtitle>
+      <KnowledgeStatusBadge :status="doc.status" type="status" class="mr-2" />
+      <KnowledgeStatusBadge :enabled="doc.enable" type="enabled" />
+    </template>
+    <template #header-actions>
+      <slot name="toggle-switch"></slot>
+    </template>
+    <template #footer-left>
+      <span class="text-xs text-gray-500">
+        上传时间: {{ formatDateString(doc.createTime) }}
+      </span>
+    </template>
+    <template #footer-actions>
+      <slot name="actions"></slot>
+    </template>
+  </CardBase>
 </template>
 
 <script setup lang="ts">
+import CardBase from '@/components/common/CardBase.vue';
 import { KnowledgeStatusBadge } from '@/components/common/knowledge';
 import type { LibraryDoc } from "@/types/KnowledgeTypes";
 import { formatDateString } from '@/utils/dateUtil';
diff --git a/frontend/src/components/common/knowledge/KnowledgeLibraryCard.vue b/frontend/src/components/common/knowledge/KnowledgeLibraryCard.vue
index 56f77f6..1117242 100644
--- a/frontend/src/components/common/knowledge/KnowledgeLibraryCard.vue
+++ b/frontend/src/components/common/knowledge/KnowledgeLibraryCard.vue
@@ -1,26 +1,27 @@
 <template>
-  <div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
-    <div class="p-4">
-      <div class="flex justify-between items-start">
-        <h5 class="text-xl font-semibold tracking-tight text-gray-900 mb-1 truncate">{{ library.name }}</h5>
-        <div class="flex space-x-2">
-          <slot name="actions-top"></slot>
-        </div>
-      </div>
-      <p class="text-sm text-gray-600 mb-3 line-clamp-2">
+  <CardBase>
+    <template #title>{{ library.name }}</template>
+    <template #header-actions>
+      <slot name="actions-top"></slot>
+    </template>
+    <template #content>
+      <p class="text-sm text-gray-600 line-clamp-2">
         {{ library.description || '暂无描述' }}
       </p>
-      <div class="flex justify-between items-center">
-        <span class="text-xs text-gray-500">
-          创建时间: {{ formatDateString(library.createTime) }}
-        </span>
-        <slot name="actions-bottom"></slot>
-      </div>
-    </div>
-  </div>
+    </template>
+    <template #footer-left>
+      <span class="text-xs text-gray-500">
+        创建时间: {{ formatDateString(library.createTime) }}
+      </span>
+    </template>
+    <template #footer-actions>
+      <slot name="actions-bottom"></slot>
+    </template>
+  </CardBase>
 </template>
 
 <script setup lang="ts">
+import CardBase from '@/components/common/CardBase.vue';
 import type { Library } from "@/types/KnowledgeTypes";
 import { formatDateString } from '@/utils/dateUtil';
 
diff --git a/frontend/src/components/common/knowledge/SegmentCard.vue b/frontend/src/components/common/knowledge/SegmentCard.vue
index 177f83d..8cb9157 100644
--- a/frontend/src/components/common/knowledge/SegmentCard.vue
+++ b/frontend/src/components/common/knowledge/SegmentCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
-    <div class="flex justify-between items-start mb-2">
-      <h5 class="text-lg font-semibold text-gray-900">分段 #{{ index + 1 }}</h5>
+  <CardBase>
+    <template #title>分段 #{{ index + 1 }}</template>
+    <template #header-actions>
       <div class="text-xs text-gray-500">
         ID: {{ segment.id }}
       </div>
-    </div>
-    <div class="text-sm text-gray-500 mb-2">
+    </template>
+    <template #subtitle>
       <div class="flex flex-wrap gap-2">
         <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
           Embedding ID: {{ segment.embeddingId || '无' }}
@@ -15,16 +15,19 @@
           Token 使用量: {{ segment.tokenUsage || 0 }}
         </span>
       </div>
-    </div>
-    <div class="border-t border-gray-200 pt-3 mt-3">
-      <h6 class="text-sm font-medium text-gray-900 mb-2">内容:</h6>
-      <pre
-        class="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-60 overflow-y-auto">{{ segment.content }}</pre>
-    </div>
-  </div>
+    </template>
+    <template #content>
+      <div class="border-t border-gray-200 pt-3">
+        <h6 class="text-sm font-medium text-gray-900 mb-2">内容:</h6>
+        <pre
+          class="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-60 overflow-y-auto">{{ segment.content }}</pre>
+      </div>
+    </template>
+  </CardBase>
 </template>
 
 <script setup lang="ts">
+import CardBase from '@/components/common/CardBase.vue';
 import type { LibraryDocSegment } from "@/types/KnowledgeTypes";
 
 const props = defineProps<{
diff --git a/frontend/src/components/ui/Button.vue b/frontend/src/components/ui/Button.vue
new file mode 100644
index 0000000..2509d4a
--- /dev/null
+++ b/frontend/src/components/ui/Button.vue
@@ -0,0 +1,122 @@
+<template>
+  <button :class="[
+    'flex items-center justify-center gap-x-1 whitespace-nowrap font-medium rounded-lg focus:ring-4 focus:outline-none',
+    sizeClasses,
+    colorClasses,
+    (disabled || (isLoading && !abortable)) ? 'opacity-50 cursor-not-allowed' : '',
+    fullWidth ? 'w-full' : '',
+    className
+  ]" :disabled="disabled || (isLoading && !abortable)" @click="handleClick" :type="type">
+    <div v-if="isLoading && !abortable" class="animate-spin mr-1" :class="iconSizeClasses">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+      </svg>
+    </div>
+    <StopIcon v-else-if="isLoading && abortable" :class="iconSizeClasses" />
+    <slot v-else name="icon"></slot>
+    <span v-if="$slots.default">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { StopIcon } from "@/components/icons";
+import { computed } from "vue";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type ButtonType = "button" | "submit" | "reset";
+
+const props = defineProps<{
+  /** 按钮变体类型 */
+  variant?: ButtonVariant;
+  /** 按钮尺寸 */
+  size?: ButtonSize;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 自定义CSS类名 */
+  className?: string;
+  /** 是否为移动端尺寸 */
+  isMobile?: boolean;
+  /** 是否处于加载状态 */
+  isLoading?: boolean;
+  /** 是否可中止 */
+  abortable?: boolean;
+  /** 按钮类型 */
+  type?: ButtonType;
+  /** 是否占满宽度 */
+  fullWidth?: boolean;
+}>();
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+/** 按钮颜色样式映射 */
+const colorClasses = computed(() => {
+  const variants: Record<ButtonVariant, string> = {
+    primary: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300",
+    secondary:
+      "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-100",
+    success: "text-white bg-green-700 hover:bg-green-800 focus:ring-green-300",
+    danger: "text-white bg-red-700 hover:bg-red-800 focus:ring-red-300",
+    warning:
+      "text-gray-900 bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300",
+    info: "text-white bg-cyan-700 hover:bg-cyan-800 focus:ring-cyan-300",
+  };
+
+  return variants[props.variant || "primary"];
+});
+
+/** 按钮尺寸样式映射 */
+const sizeClasses = computed(() => {
+  // 移动端尺寸
+  if (props.isMobile) {
+    const sizes: Record<ButtonSize, string> = {
+      xs: "text-xs px-2 py-1",
+      sm: "text-xs px-3 py-1.5",
+      md: "text-sm px-3 py-2",
+      lg: "text-sm px-4 py-2.5",
+    };
+    return sizes[props.size || "sm"];
+  }
+
+  // PC端尺寸
+  const sizes: Record<ButtonSize, string> = {
+    xs: "text-xs px-3 py-1.5",
+    sm: "text-sm px-3 py-2",
+    md: "text-sm px-4 py-2.5",
+    lg: "text-base px-5 py-3",
+  };
+
+  return sizes[props.size || "md"];
+});
+
+/** 图标尺寸样式映射 */
+const iconSizeClasses = computed(() => {
+  const sizes: Record<ButtonSize, string> = {
+    xs: "w-3.5 h-3.5",
+    sm: "w-4 h-4",
+    md: "w-4.5 h-4.5",
+    lg: "w-5 h-5",
+  };
+  return sizes[props.size || "md"];
+});
+
+/** 处理点击事件 */
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !(props.isLoading && !props.abortable)) {
+    emit("click", event);
+  }
+};
+</script> 
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
new file mode 100644
index 0000000..4bda237
--- /dev/null
+++ b/frontend/src/components/ui/index.ts
@@ -0,0 +1,7 @@
+import Alert from "./Alert.vue";
+import Avatar from "./Avatar.vue";
+import Button from "./Button.vue";
+import InputButton from "./InputButton.vue";
+import SortIcon from "./SortIcon.vue";
+
+export { Alert, Avatar, Button, InputButton, SortIcon }; 
diff --git a/frontend/src/composables/knowledge/useKnowledgeQuery.ts b/frontend/src/composables/knowledge/useKnowledgeQuery.ts
index 674ba24..cdad5d2 100644
--- a/frontend/src/composables/knowledge/useKnowledgeQuery.ts
+++ b/frontend/src/composables/knowledge/useKnowledgeQuery.ts
@@ -12,6 +12,7 @@ export const useKnowledgeQuery = () => {
 	const libraries = ref<Library[]>([]);
 	const docs = ref<LibraryDoc[]>([]);
 	const segments = ref<LibraryDocSegment[]>([]);
+	const doc = ref<LibraryDoc | null>(null);
 
 	const fetchLibraries = async () => {
 		const { data } = await client.GET("/knowledge/libraries", {});
@@ -29,11 +30,22 @@ export const useKnowledgeQuery = () => {
 		docs.value = data || [];
 	};
 
+	const fetchDocById = async (docId: number) => {
+		const { data } = await client.GET("/knowledge/docs", {
+			params: {
+				query: {},
+			},
+		});
+		if (data && Array.isArray(data)) {
+			doc.value = data.find((item) => item.id === docId) || null;
+		}
+	};
+
 	const fetchDocSegments = async (params: SegmentQueryParams) => {
 		const { data } = await client.GET("/knowledge/segments", {
 			params: {
 				query: {
-					libraryDocId: params.libraryDocId,
+					libraryDocId: params.libraryDocId || params.docId || 0,
 				},
 			},
 		});
@@ -45,6 +57,8 @@ export const useKnowledgeQuery = () => {
 		fetchLibraries,
 		docs,
 		fetchLibraryDocs,
+		doc,
+		fetchDocById,
 		segments,
 		fetchDocSegments,
 	};
diff --git a/frontend/src/types/KnowledgeTypes.ts b/frontend/src/types/KnowledgeTypes.ts
index c28a3e9..7fd7116 100644
--- a/frontend/src/types/KnowledgeTypes.ts
+++ b/frontend/src/types/KnowledgeTypes.ts
@@ -26,8 +26,9 @@ export interface DocQueryParams {
 }
 
 export interface SegmentQueryParams {
-	libraryDocId: number;
-}
+		libraryDocId?: number;
+		docId?: number;
+	}
 
 export enum DocStatus {
 	SUCCESS = "SUCCESS",
diff --git a/frontend/src/views/KnowledgeDocManagementPage.vue b/frontend/src/views/KnowledgeDocManagementPage.vue
index 1cf017d..478c58a 100644
--- a/frontend/src/views/KnowledgeDocManagementPage.vue
+++ b/frontend/src/views/KnowledgeDocManagementPage.vue
@@ -1,56 +1,53 @@
 <template>
-  <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
-    <Breadcrumbs :names="['知识库管理', '文档管理']" :routes="[Routes.KNOWLEDGEVIEW.fullPath()]" />
-    <div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
-      <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">{{ currentLibrary?.name || '知识库' }} - 文档管理</h1>
-    </div>
+	<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
+		<Breadcrumbs :names="['知识库管理', '文档管理']" :routes="[Routes.KNOWLEDGEVIEW.fullPath()]" />
+		<div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+			<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">{{ currentLibrary?.name || '知识库' }} - 文档管理</h1>
+		</div>
 
-    <!-- 文档列表 -->
-    <div v-if="docs.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <KnowledgeDocCard v-for="doc in docs" :key="doc.id" :doc="doc">
-        <template #toggle-switch>
-          <label class="inline-flex items-center mb-5"
-            :class="!doc.enable ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'">
-            <input type="checkbox" class="sr-only peer" :checked="doc.enable" @change="handleToggleDocStatus(doc)">
-            <div
-              class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
-            </div>
-          </label>
-        </template>
-        <template #actions>
-          <button @click="navigateToDocSegments(doc)" :class="
-            ['text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-content',
-            doc.status !== DocStatus.SUCCESS ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer']"
-            :disabled="doc.status !== DocStatus.SUCCESS">
-            查看内容
-          </button>
-          <button @click="handleDeleteDoc(doc)"
-            class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5">
-            删除
-          </button>
-        </template>
-      </KnowledgeDocCard>
-    </div>
+		<!-- 文档列表 -->
+		<div v-if="docs.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			<KnowledgeDocCard v-for="doc in docs" :key="doc.id" :doc="doc">
+				<template #toggle-switch>
+					<label class="inline-flex items-center mb-5"
+						:class="!doc.enable ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'">
+						<input type="checkbox" class="sr-only peer" :checked="doc.enable" @change="handleToggleDocStatus(doc)">
+						<div
+							class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
+						</div>
+					</label>
+				</template>
+				<template #actions>
+					<Button variant="primary" size="xs" @click="navigateToDocSegments(doc)"
+						:disabled="doc.status !== DocStatus.SUCCESS">
+						查看内容
+					</Button>
+					<Button variant="danger" size="xs" @click="handleDeleteDoc(doc)">
+						删除
+					</Button>
+				</template>
+			</KnowledgeDocCard>
+		</div>
 
-    <!-- 空状态 -->
-    <div v-else class="flex flex-col items-center justify-center py-10">
-      <div class="text-gray-500 text-lg mb-4">暂无文档</div>
-      <div>
-        <input ref="fileInputRef" class="hidden" id="doc_file_input" type="file" @change="handleFileChange">
-        <TableButton variant="primary" size="md" @click="triggerFileInput">
-          <template #icon>
-            <PlusIcon class="w-4 h-4" />
-          </template>
-          上传文档
-        </TableButton>
-      </div>
-    </div>
+		<!-- 空状态 -->
+		<div v-else class="flex flex-col items-center justify-center py-10">
+			<div class="text-gray-500 text-lg mb-4">暂无文档</div>
+			<div>
+				<input ref="fileInputRef" class="hidden" id="doc_file_input" type="file" @change="handleFileChange">
+				<Button variant="primary" @click="triggerFileInput">
+					<template #icon>
+						<PlusIcon class="w-4 h-4" />
+					</template>
+					上传文档
+				</Button>
+			</div>
+		</div>
 
-  </div>
+	</div>
 
-  <!-- 删除确认对话框 -->
-  <ConfirmationDialog :id="'doc-delete-modal'" :title="`确定删除文档 '${selectedDoc?.name || ''}' 吗？`"
-    content="删除后将无法恢复，且其中的所有分段内容也将被删除。" :closeModal="() => {
+	<!-- 删除确认对话框 -->
+	<ConfirmationDialog :id="'doc-delete-modal'" :title="`确定删除文档 '${selectedDoc?.name || ''}' 吗？`"
+		content="删除后将无法恢复，且其中的所有分段内容也将被删除。" :closeModal="() => {
       docDeleteModal?.hide();
     }" :onSubmit="handleDocDeleteSubmit" />
 
@@ -61,11 +58,11 @@ import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { onMounted, ref, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
-import { KnowledgeDocCard, KnowledgeStatusBadge } from "@/components/common/knowledge";
+import { KnowledgeDocCard } from "@/components/common/knowledge";
 import { PlusIcon } from "@/components/icons";
 import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
 import ConfirmationDialog from "@/components/modals/ConfirmationDialog.vue";
-import TableButton from "@/components/tables/TableButton.vue";
+import { Button } from "@/components/ui";
 
 import { useKnowledgeQuery } from "@/composables/knowledge/useKnowledgeQuery";
 import { useKnowledgeUpsert } from "@/composables/knowledge/useKnowledgeUpsert";
diff --git a/frontend/src/views/KnowledgeManagementPage.vue b/frontend/src/views/KnowledgeManagementPage.vue
index 5a68940..b87ce8a 100644
--- a/frontend/src/views/KnowledgeManagementPage.vue
+++ b/frontend/src/views/KnowledgeManagementPage.vue
@@ -27,10 +27,9 @@
           </button>
         </template>
         <template #actions-bottom>
-          <button @click="navigateToLibraryDocs(library)"
-            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5">
+          <Button variant="primary" size="xs" @click="navigateToLibraryDocs(library)">
             查看知识库
-          </button>
+          </Button>
         </template>
       </KnowledgeLibraryCard>
     </div>
@@ -39,10 +38,9 @@
     <div v-else class="flex flex-col items-center justify-center py-10">
       <div class="text-gray-500 text-lg mb-4">暂无知识库</div>
       <div>
-        <button @click="handleCreateLibraryClick"
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none">
+        <Button variant="primary" @click="handleCreateLibraryClick">
           创建知识库
-        </button>
+        </Button>
       </div>
     </div>
   </div>
@@ -69,6 +67,7 @@ import { KnowledgeLibraryCard } from "@/components/common/knowledge";
 import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
 import ConfirmationDialog from "@/components/modals/ConfirmationDialog.vue";
 import LibraryFormDialog from "@/components/modals/LibraryFormDialog.vue";
+import { Button } from "@/components/ui";
 
 import { useKnowledgeQuery } from "@/composables/knowledge/useKnowledgeQuery";
 import { useKnowledgeUpsert } from "@/composables/knowledge/useKnowledgeUpsert";
diff --git a/frontend/src/views/KnowledgeSegmentsPage.vue b/frontend/src/views/KnowledgeSegmentsPage.vue
index 7e43214..91cf1fc 100644
--- a/frontend/src/views/KnowledgeSegmentsPage.vue
+++ b/frontend/src/views/KnowledgeSegmentsPage.vue
@@ -1,76 +1,78 @@
 <template>
   <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
-    <Breadcrumbs :names="['知识库管理', '文档管理', '内容管理']"
-      :routes="[Routes.KNOWLEDGEVIEW.fullPath(), Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId: libraryId })]" />
-    <div class="mb-4">
-      <h1 class="text-2xl font-semibold text-gray-900 mb-2">{{ currentDoc?.name || '文档' }} - 分段内容</h1>
-      <p class="text-sm text-gray-500">
-        共 {{ segments.length }} 个分段
-      </p>
+    <Breadcrumbs :names="['知识库管理', '文档管理', '文档分段']" :routes="[
+      Routes.KNOWLEDGEVIEW.fullPath(),
+      Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId })
+    ]" />
+    <div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">{{ currentDoc?.name || '文档' }} - 分段内容</h1>
     </div>
 
-    <!-- 空状态 -->
-    <div v-if="segments.length === 0" class="flex flex-col items-center justify-center py-10">
-      <div class="text-gray-500 text-lg">暂无分段内容</div>
+    <div class="mb-4">
+      <Button variant="secondary" size="sm" @click="navigateBack">
+        <template #icon>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
+            </path>
+          </svg>
+        </template>
+        返回文档列表
+      </Button>
     </div>
 
     <!-- 分段列表 -->
-    <div v-else class="space-y-4">
+    <div v-if="segments.length > 0" class="space-y-4">
       <SegmentCard v-for="(segment, index) in segments" :key="segment.id" :segment="segment" :index="index" />
     </div>
+
+    <!-- 空状态 -->
+    <div v-else class="flex flex-col items-center justify-center py-10">
+      <div class="text-gray-500 text-lg mb-4">暂无分段内容</div>
+      <Button variant="secondary" @click="navigateBack">
+        返回文档列表
+      </Button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watchEffect } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 import { SegmentCard } from "@/components/common/knowledge";
 import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
+import { Button } from "@/components/ui";
+
 import { useKnowledgeQuery } from "@/composables/knowledge/useKnowledgeQuery";
 import { Routes } from "@/router/constants";
 
-import type { Library, LibraryDoc } from "@/types/KnowledgeTypes";
+import type { LibraryDoc } from "@/types/KnowledgeTypes";
 
 // 路由参数
 const route = useRoute();
-const libraryId = ref<number>(
-	Number.parseInt(route.params.libraryId as string, 10),
-);
-const docId = ref<number>(Number.parseInt(route.params.docId as string, 10));
+const router = useRouter();
+const libraryId = Number.parseInt(route.params.libraryId as string, 10);
+const docId = Number.parseInt(route.params.docId as string, 10);
 
-// 获取知识库信息
-const { libraries, fetchLibraries } = useKnowledgeQuery();
-const currentLibrary = ref<Library | undefined>();
-
-// 获取文档信息
-const { docs, fetchLibraryDocs } = useKnowledgeQuery();
+// 获取文档信息和分段列表
+const { docs, segments, fetchLibraryDocs, fetchDocSegments } = useKnowledgeQuery();
 const currentDoc = ref<LibraryDoc | undefined>();
 
-// 获取分段列表
-const { segments, fetchDocSegments } = useKnowledgeQuery();
+// 导航回文档列表
+const navigateBack = () => {
+	router.push(Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId }));
+};
 
 // 初始化
 onMounted(async () => {
-	// 获取知识库列表、文档列表和分段列表
-	await fetchLibraries();
-	await fetchLibraryDocs({ libraryId: libraryId.value });
-	await fetchDocSegments({ libraryDocId: docId.value });
-});
-
-// 监听知识库列表变化，找到当前知识库
-watchEffect(() => {
-	if (libraries.value && libraries.value.length > 0) {
-		currentLibrary.value = libraries.value.find(
-			(lib) => lib.id === libraryId.value,
-		);
-	}
+	await fetchLibraryDocs({ libraryId });
+	await fetchDocSegments({ libraryDocId: docId });
 });
 
 // 监听文档列表变化，找到当前文档
 watchEffect(() => {
 	if (docs.value && docs.value.length > 0) {
-		currentDoc.value = docs.value.find((doc) => doc.id === docId.value);
+		currentDoc.value = docs.value.find((doc) => doc.id === docId);
 	}
 });
 </script>