新增知识库相关组件，包括文档卡片、知识库卡片、状态徽章和分段卡片，优化日期格式化工具函数，更新文档管理和知识库管理页面以使用新组件。

frontend/src/components/common/knowledge/KnowledgeDocCard.vue

@@ -0,0 +1,36 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { KnowledgeStatusBadge } from '@/components/common/knowledge';
+import type { LibraryDoc } from "@/types/KnowledgeTypes";
+import { formatDateString } from '@/utils/dateUtil';
+
+const props = defineProps<{
+  doc: LibraryDoc;
+}>();
+</script>

frontend/src/components/common/knowledge/KnowledgeLibraryCard.vue

@@ -0,0 +1,30 @@
+<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">
+        {{ 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>
+
+<script setup lang="ts">
+import type { Library } from "@/types/KnowledgeTypes";
+import { formatDateString } from '@/utils/dateUtil';
+
+const props = defineProps<{
+  library: Library;
+}>();
+</script>

frontend/src/components/common/knowledge/KnowledgeStatusBadge.vue

@@ -0,0 +1,37 @@
+<template>
+  <span :class="`inline-flex items-center px-2 py-1 text-xs font-medium rounded-full ${
+    getStatusClass()
+  }`">
+    {{ getStatusText() }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { DocStatus } from "@/types/KnowledgeTypes";
+
+const props = defineProps<{
+  status?: string;
+  enabled?: boolean;
+  type: 'status' | 'enabled';
+}>();
+
+const getStatusClass = () => {
+  if (props.type === 'status') {
+    return props.status === DocStatus.SUCCESS 
+      ? 'bg-green-100 text-green-800' 
+      : 'bg-yellow-100 text-yellow-800';
+  }
+  
+  return props.enabled 
+    ? 'bg-blue-100 text-blue-800' 
+    : 'bg-gray-100 text-gray-800';
+};
+
+const getStatusText = () => {
+  if (props.type === 'status') {
+    return props.status === DocStatus.SUCCESS ? '解析完成' : '解析中';
+  }
+  
+  return props.enabled ? '已启用' : '已禁用';
+};
+</script>

frontend/src/components/common/knowledge/SegmentCard.vue

@@ -0,0 +1,34 @@
+<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>
+      <div class="text-xs text-gray-500">
+        ID: {{ segment.id }}
+      </div>
+    </div>
+    <div class="text-sm text-gray-500 mb-2">
+      <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 || '无' }}
+        </span>
+        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
+          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>
+
+<script setup lang="ts">
+import type { LibraryDocSegment } from "@/types/KnowledgeTypes";
+
+const props = defineProps<{
+  segment: LibraryDocSegment;
+  index: number;
+}>();
+</script>

frontend/src/components/common/knowledge/index.ts

@@ -0,0 +1,11 @@
+import KnowledgeDocCard from "./KnowledgeDocCard.vue";
+import KnowledgeLibraryCard from "./KnowledgeLibraryCard.vue";
+import KnowledgeStatusBadge from "./KnowledgeStatusBadge.vue";
+import SegmentCard from "./SegmentCard.vue";
+
+export {
+	KnowledgeStatusBadge,
+	KnowledgeDocCard,
+	KnowledgeLibraryCard,
+	SegmentCard,
+};