feat: 实现通用组件

顶部栏、侧边栏、分页表格、Markdown 渲染、模型选择对话框、模型状态标签、页面卡片、占位视图等八个公共组件，及 Font Awesome 图标资源。

frontend/src/components/PageCard.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * 通用页面卡片容器
+ * 用于表单页、详情页等需要统一卡片样式的场景
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    bordered?: boolean
+  }>(),
+  {
+    bordered: false,
+  },
+)
+</script>
+
+<template>
+  <el-card shadow="never" class="page-card">
+    <div v-if="title || $slots.header" class="page-card-header">
+      <slot name="header">
+        <div>
+          <h2 class="page-card-title">{{ title }}</h2>
+          <p v-if="subtitle" class="page-card-subtitle">{{ subtitle }}</p>
+        </div>
+      </slot>
+      <div v-if="$slots.extra" class="page-card-extra">
+        <slot name="extra" />
+      </div>
+    </div>
+    <div class="page-card-body">
+      <slot />
+    </div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.page-card {
+  border-radius: 8px;
+  margin-bottom: 24px;
+
+  .page-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .page-card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+    margin: 0;
+  }
+
+  .page-card-subtitle {
+    font-size: 13px;
+    color: #909399;
+    margin: 4px 0 0;
+  }
+
+  :deep(.el-card__body) {
+    padding: 24px;
+  }
+}
+</style>