diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 849de72..3f2aec2 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -108,13 +108,13 @@
 
     <!-- Quick Actions -->
     <section class="quick-actions">
-      <div class="action-card" @click="goToPlayground">
+      <div class="action-card" @click="goToModels">
         <div class="action-icon">
-          <el-icon><ChatDotRound /></el-icon>
+          <el-icon><Setting /></el-icon>
         </div>
         <div class="action-info">
-          <h3>测试场</h3>
-          <p>交互式测试模型能力</p>
+          <h3>模型配置</h3>
+          <p>管理 AI 模型 API 配置</p>
         </div>
         <el-icon class="action-arrow"><ArrowRight /></el-icon>
       </div>
@@ -136,168 +136,75 @@
       <!-- Projects Grid -->
       <div class="projects-grid" v-loading="loading">
         <!-- Empty State -->
-        <div v-if="!loading && projects.length === 0" class="empty-state">
-          <div class="empty-illustration">
-            <div class="circle-1"></div>
-            <div class="circle-2"></div>
-            <div class="circle-3"></div>
-            <el-icon size="48"><FolderAdd /></el-icon>
-          </div>
-          <h3>暂无项目</h3>
-          <p>创建您的第一个项目开始生成数据集</p>
-          <el-button type="primary" @click="createProject">创建项目</el-button>
-        </div>
+        <EmptyState
+          v-if="!loading && projects.length === 0"
+          :icon="FolderAdd"
+          title="暂无项目"
+          description="创建您的第一个项目开始生成数据集"
+          action-text="创建项目"
+          @action="createProject"
+        />
 
         <!-- Project Cards -->
-        <div
+        <ProjectCard
           v-else
           v-for="(project, index) in projects"
           :key="project.id"
-          class="project-card"
-          :style="{ '--delay': index * 0.1 + 's' }"
-          @click="openProject(project)"
-        >
-          <div class="card-glow"></div>
-          <div class="card-header">
-            <div class="card-avatar">
-              <el-icon><Folder /></el-icon>
-            </div>
-            <div class="card-menu">
-              <el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, project)">
-                <el-icon class="menu-icon"><MoreFilled /></el-icon>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
-                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </div>
-          <h3 class="card-title">{{ project.name }}</h3>
-          <p class="card-desc">{{ project.description || '暂无描述' }}</p>
-          <div class="card-footer">
-            <span class="card-date">
-              <el-icon><Calendar /></el-icon>
-              {{ formatDate(project.created_at) }}
-            </span>
-            <div class="card-status">
-              <span class="status-dot"></span>
-              活跃
-            </div>
-          </div>
-        </div>
+          :project="project"
+          :index="index"
+          @click="openProject"
+          @delete="confirmDelete"
+        />
       </div>
     </section>
 
     <!-- Create Dialog -->
-    <el-dialog v-model="dialogVisible" title="" width="480px" class="create-dialog" :show-close="false" align-center>
-      <template #header>
-        <div class="dialog-header">
-          <div class="header-glow"></div>
-          <div class="header-content">
-            <div class="dialog-icon-new">
-              <el-icon size="24"><FolderAdd /></el-icon>
-            </div>
-            <div class="header-text">
-              <h3>创建新项目</h3>
-              <p>开始构建您的AI训练数据集</p>
-            </div>
-          </div>
-          <button class="close-btn" @click="dialogVisible = false">
-            <el-icon><Close /></el-icon>
-          </button>
-        </div>
-      </template>
-      <div class="dialog-body">
-        <div class="form-card">
-          <div class="input-group">
-            <label class="input-label">
-              <span class="label-icon">✦</span>
-              项目名称
-            </label>
-            <el-input
-              v-model="form.name"
-              placeholder="例如：客服问答数据集"
-              size="large"
-              class="custom-input"
-            />
-          </div>
-          <div class="input-group">
-            <label class="input-label">
-              <span class="label-icon">✦</span>
-              项目描述
-            </label>
-            <el-input
-              v-model="form.description"
-              type="textarea"
-              :rows="3"
-              placeholder="描述这个项目的用途和数据类型..."
-              class="custom-input"
-            />
-          </div>
-        </div>
+    <CreateProjectDialog
+      v-model:visible="dialogVisible"
+      :loading="submitting"
+      @submit="handleCreateSubmit"
+    />
 
-        <!-- Quick Templates -->
-        <div class="templates-section">
-          <span class="templates-label">快速开始模板</span>
-          <div class="templates-grid">
-            <div class="template-card" @click="useTemplate('qa')">
-              <el-icon><ChatDotRound /></el-icon>
-              <span>问答对</span>
-            </div>
-            <div class="template-card" @click="useTemplate('conversation')">
-              <el-icon><ChatLineRound /></el-icon>
-              <span>对话</span>
-            </div>
-            <div class="template-card" @click="useTemplate('instruction')">
-              <el-icon><Promotion /></el-icon>
-              <span>指令</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false" class="btn-cancel">取消</el-button>
-          <el-button type="primary" @click="submitForm" :loading="submitting" class="btn-create">
-            <el-icon v-if="!submitting"><Plus /></el-icon>
-            创建项目
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <!-- Delete Confirmation Dialog -->
+    <DeleteDialog
+      v-model:visible="deleteDialogVisible"
+      :item-name="projectToDelete?.name"
+      :loading="deleting"
+      @confirm="handleDelete"
+    />
   </div>
 </template>
 
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { FolderAdd } from '@element-plus/icons-vue'
 import { projectApi } from '@/api'
+import type { Project, ProjectCreate } from '@/types'
+
+// Components
+import EmptyState from '@/components/common/EmptyState.vue'
+import ProjectCard from '@/components/common/ProjectCard.vue'
+import CreateProjectDialog from '@/components/common/CreateProjectDialog.vue'
+import DeleteDialog from '@/components/common/DeleteDialog.vue'
 
 const router = useRouter()
 
 const loading = ref(false)
 const projects = ref([])
 const dialogVisible = ref(false)
+const deleteDialogVisible = ref(false)
+const projectToDelete = ref(null)
 const submitting = ref(false)
-const formRef = ref(null)
-
-const form = reactive({
-  name: '',
-  description: ''
-})
-
-const rules = {
-  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
-}
+const deleting = ref(false)
 
 const fetchProjects = async () => {
   loading.value = true
   try {
     const res = await projectApi.list()
-    projects.value = res.data.projects || []
+    // New paginated format: {items: [...], total, page, page_size}
+    projects.value = res.items || res || []
   } catch (error) {
     projects.value = []
   } finally {
@@ -306,35 +213,31 @@ const fetchProjects = async () => {
 }
 
 const createProject = () => {
-  form.name = ''
-  form.description = ''
   dialogVisible.value = true
 }
 
-const useTemplate = (type) => {
-  const templates = {
-    qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
-    conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
-    instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
+const handleCreateSubmit = async (formData) => {
+  // Simple validation
+  if (!formData.name || formData.name.trim() === '') {
+    ElMessage.warning('请输入项目名称')
+    return
   }
-  const t = templates[type]
-  form.name = t.name
-  form.description = t.description
-}
-
-const submitForm = async () => {
-  const valid = await formRef.value?.validate().catch(() => false)
-  if (!valid) return
 
+  console.log('Creating project with form:', formData)
   submitting.value = true
   try {
-    const res = await projectApi.create(form)
+    const res = await projectApi.create(formData)
+    console.log('Create response:', res)
     ElMessage.success('项目创建成功')
     dialogVisible.value = false
     fetchProjects()
-    router.push(`/project/${res.data.id}`)
+    // New format: {id: "..."}
+    const projectId = res.id
+    console.log('Navigating to:', projectId)
+    router.push(`/project/${projectId}`)
   } catch (error) {
-    ElMessage.error('创建项目失败')
+    console.error('Create project error:', error)
+    ElMessage.error('创建项目失败: ' + (error.message || '未知错误'))
   } finally {
     submitting.value = false
   }
@@ -344,896 +247,33 @@ const openProject = (project) => {
   router.push(`/project/${project.id}`)
 }
 
-const handleCommand = async (cmd, project) => {
-  if (cmd === 'delete') {
-    try {
-      await ElMessageBox.confirm(
-        `确定要删除项目 "${project.name}" 吗？`,
-        '删除项目',
-        { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
-      )
-      await projectApi.delete(project.id)
-      ElMessage.success('项目已删除')
-      fetchProjects()
-    } catch (e) {
-      if (e !== 'cancel') ElMessage.error('删除失败')
-    }
+const confirmDelete = (project) => {
+  projectToDelete.value = project
+  deleteDialogVisible.value = true
+}
+
+const handleDelete = async () => {
+  if (!projectToDelete.value) return
+  deleting.value = true
+  try {
+    await projectApi.delete(projectToDelete.value.id)
+    ElMessage.success('项目已删除')
+    deleteDialogVisible.value = false
+    projectToDelete.value = null
+    fetchProjects()
+  } catch (error) {
+    ElMessage.error('删除失败')
+  } finally {
+    deleting.value = false
   }
 }
 
-const formatDate = (date) => {
-  if (!date) return ''
-  const d = new Date(date)
-  return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', year: 'numeric' })
-}
-
 const goToDataSquare = () => router.push('/data-square')
-const goToPlayground = () => router.push('/playground')
+const goToModels = () => router.push('/models')
 
 onMounted(() => fetchProjects())
 </script>
 
 <style scoped>
-.home {
-  min-height: 100vh;
-  padding: 60px 40px 80px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-/* Hero Section */
-.hero {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 60px;
-  align-items: center;
-  margin-bottom: 60px;
-}
-
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 14px;
-  background: var(--accent-primary-muted);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 100px;
-  font-size: 13px;
-  color: var(--accent-primary);
-  margin-bottom: 20px;
-}
-
-.badge-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--accent-primary);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.2); }
-}
-
-.hero-title {
-  font-size: 56px;
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  margin-bottom: 20px;
-}
-
-.hero-subtitle {
-  font-size: 18px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: 32px;
-  max-width: 480px;
-}
-
-.hero-actions {
-  display: flex;
-  gap: 14px;
-}
-
-.btn-primary {
-  padding: 14px 28px;
-  font-size: 15px;
-  border-radius: var(--radius-md);
-}
-
-.btn-secondary {
-  padding: 14px 28px;
-  font-size: 15px;
-  border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-default);
-  color: var(--text-primary);
-}
-
-.btn-secondary:hover {
-  background: var(--bg-hover);
-  border-color: var(--border-strong);
-}
-
-/* ========================
-   Hero Visual - 全息粒子矩阵
-   ======================== */
-.hero-visual {
-  position: relative;
-  height: 420px;
-  perspective: 1000px;
-}
-
-/* 全息卡片基础样式 */
-.hologram-card {
-  position: absolute;
-  width: 180px;
-  padding: 24px 20px;
-  background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 18, 0.95) 100%);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  backdrop-filter: blur(20px);
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  transform-style: preserve-3d;
-  animation: hologramFloat 6s ease-in-out infinite;
-  overflow: hidden;
-}
-
-/* 卡片位置 */
-.hologram-card.card-1 {
-  top: 10px;
-  right: 60px;
-  animation-delay: 0s;
-}
-
-.hologram-card.card-2 {
-  top: 130px;
-  left: 30px;
-  animation-delay: -2s;
-}
-
-.hologram-card.card-3 {
-  bottom: 20px;
-  right: 80px;
-  animation-delay: -4s;
-}
-
-@keyframes hologramFloat {
-  0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
-  25% { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); }
-  50% { transform: translateY(0) rotateX(0) rotateY(0); }
-  75% { transform: translateY(-5px) rotateX(-1deg) rotateY(2deg); }
-}
-
-/* 悬浮时的3D效果 */
-.hologram-card:hover {
-  transform: translateY(-15px) scale(1.05);
-  border-color: rgba(0, 212, 255, 0.4);
-  box-shadow:
-    0 25px 50px -12px rgba(0, 0, 0, 0.5),
-    0 0 30px rgba(0, 212, 255, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.hologram-card:hover .scan-line {
-  animation: scanMove 1.5s linear infinite;
-}
-
-.hologram-card:hover .pulse-ring {
-  animation: pulseRing 2s ease-out infinite;
-}
-
-.hologram-card:hover .particle {
-  animation: particleBurst 1s ease-out forwards;
-  animation-delay: calc(var(--i, 0) * 0.1s);
-}
-
-/* 卡片背景 */
-.card-bg {
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at top, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
-              radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
-  opacity: 0.8;
-}
-
-.card-2 .card-bg {
-  background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
-              radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
-}
-
-.card-3 .card-bg {
-  background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
-              radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
-}
-
-/* 扫描线效果 */
-.scan-line {
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: linear-gradient(
-    transparent 0%,
-    rgba(0, 212, 255, 0.03) 50%,
-    transparent 100%
-  );
-  transform: rotate(30deg);
-  pointer-events: none;
-}
-
-@keyframes scanMove {
-  0% { transform: translateY(-100%) rotate(30deg); }
-  100% { transform: translateY(100%) rotate(30deg); }
-}
-
-/* 粒子容器 */
-.particles-container {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.particle {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  opacity: 0;
-  left: var(--x);
-  top: var(--y);
-}
-
-.card-1 .particle {
-  background: var(--accent-primary);
-  box-shadow: 0 0 6px var(--accent-primary);
-}
-
-.card-2 .particle {
-  background: var(--accent-secondary);
-  box-shadow: 0 0 6px var(--accent-secondary);
-}
-
-.card-3 .particle {
-  background: var(--accent-tertiary);
-  box-shadow: 0 0 6px var(--accent-tertiary);
-}
-
-@keyframes particleBurst {
-  0% { opacity: 0; transform: scale(0); }
-  20% { opacity: 1; transform: scale(1); }
-  100% { opacity: 0; transform: scale(2); }
-}
-
-/* 脉动光环 */
-.pulse-ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 60px;
-  height: 60px;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.card-2 .pulse-ring { border-color: rgba(124, 58, 237, 0.3); }
-.card-3 .pulse-ring { border-color: rgba(6, 182, 212, 0.3); }
-
-@keyframes pulseRing {
-  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
-  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
-}
-
-/* 卡片内容 */
-.card-content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 12px;
-}
-
-/* 图标包装器 */
-.icon-wrapper {
-  position: relative;
-  width: 64px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 18px;
-  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
-  border: 1px solid rgba(255,255,255,0.1);
-  transition: all 0.3s ease;
-}
-
-.icon-wrapper.cyan {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 100%);
-  border-color: rgba(0, 212, 255, 0.3);
-  color: var(--accent-primary);
-}
-
-.icon-wrapper.violet {
-  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.05) 100%);
-  border-color: rgba(124, 58, 237, 0.3);
-  color: var(--accent-secondary);
-}
-
-.icon-wrapper.teal {
-  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%);
-  border-color: rgba(6, 182, 212, 0.3);
-  color: var(--accent-tertiary);
-}
-
-/* 图标发光 */
-.icon-glow {
-  position: absolute;
-  inset: -2px;
-  border-radius: 20px;
-  background: inherit;
-  filter: blur(15px);
-  opacity: 0.5;
-  z-index: -1;
-}
-
-.hologram-card:hover .icon-wrapper {
-  transform: scale(1.1);
-  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
-}
-
-.hologram-card:hover .icon-glow { opacity: 0.8; }
-
-/* 标签文字 */
-.card-label {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: 0.02em;
-}
-
-.card-sublabel {
-  font-size: 11px;
-  color: var(--text-muted);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-/* 响应式 */
-@media (max-width: 1200px) {
-  .hero-visual { display: none; }
-}
-
-/* Quick Actions */
-.quick-actions { margin-bottom: 50px; }
-
-.action-card {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 24px;
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: all var(--transition-base);
-}
-
-.action-card:hover {
-  border-color: var(--accent-primary);
-  transform: translateX(6px);
-}
-
-.action-icon {
-  width: 52px;
-  height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-primary-muted);
-  border-radius: var(--radius-md);
-  font-size: 24px;
-  color: var(--accent-primary);
-}
-
-.action-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
-.action-info p { font-size: 14px; color: var(--text-tertiary); }
-
-.action-arrow {
-  margin-left: auto;
-  font-size: 20px;
-  color: var(--text-muted);
-  transition: transform var(--transition-base);
-}
-
-.action-card:hover .action-arrow {
-  transform: translateX(4px);
-  color: var(--accent-primary);
-}
-
-/* Projects Section */
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 28px;
-}
-
-.section-title h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
-.section-title p { font-size: 14px; color: var(--text-tertiary); }
-
-.add-btn { padding: 10px 18px; border-radius: var(--radius-md); }
-
-.projects-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 20px;
-}
-
-/* Empty State */
-.empty-state {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 40px;
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  border: 1px dashed var(--border-default);
-  border-radius: var(--radius-xl);
-  text-align: center;
-}
-
-.empty-illustration {
-  position: relative;
-  width: 120px;
-  height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 24px;
-}
-
-.empty-illustration .el-icon {
-  position: relative;
-  z-index: 1;
-  color: var(--text-muted);
-}
-
-.circle-1, .circle-2, .circle-3 {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid var(--border-default);
-}
-
-.circle-1 { width: 100%; height: 100%; animation: rotate 20s linear infinite; }
-.circle-2 { width: 70%; height: 70%; animation: rotate 15s linear infinite reverse; }
-.circle-3 { width: 40%; height: 40%; background: var(--bg-tertiary); }
-
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
-.empty-state p { color: var(--text-tertiary); margin-bottom: 24px; }
-
-/* Project Card */
-.project-card {
-  position: relative;
-  padding: 24px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  overflow: hidden;
-  animation: cardFadeIn 0.5s ease backwards;
-  animation-delay: var(--delay);
-}
-
-@keyframes cardFadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.project-card:hover {
-  border-color: var(--accent-primary);
-  transform: translateY(-4px);
-}
-
-.card-glow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.project-card:hover .card-glow { opacity: 1; }
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 16px;
-}
-
-.card-avatar {
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-primary-muted);
-  border-radius: var(--radius-md);
-  font-size: 20px;
-  color: var(--accent-primary);
-}
-
-.menu-icon {
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-}
-
-.menu-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
-
-.card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
-
-.card-desc {
-  font-size: 14px;
-  color: var(--text-tertiary);
-  line-height: 1.5;
-  margin-bottom: 20px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 16px;
-  border-top: 1px solid var(--border-subtle);
-}
-
-.card-date {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.card-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--success);
-}
-
-.status-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--success);
-  border-radius: 50%;
-}
-
-/* Dialog - New Design */
-.create-dialog :deep(.el-dialog) {
-  border-radius: 20px;
-  background: linear-gradient(145deg, rgba(20, 20, 30, 0.98) 0%, rgba(15, 15, 25, 0.98) 100%);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 25px 50px -12px rgba(0, 0, 0, 0.6),
-    0 0 40px rgba(0, 212, 255, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  overflow: hidden;
-}
-
-.create-dialog :deep(.el-dialog__header) {
-  padding: 0;
-  margin: 0;
-}
-
-.dialog-header {
-  position: relative;
-  padding: 24px 28px;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  overflow: hidden;
-}
-
-.header-glow {
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
-  animation: headerGlow 4s ease-in-out infinite;
-}
-
-@keyframes headerGlow {
-  0%, 100% { opacity: 0.5; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.1); }
-}
-
-.header-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.dialog-icon-new {
-  width: 52px;
-  height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 14px;
-  color: var(--accent-primary);
-  animation: iconPulse 2s ease-in-out infinite;
-}
-
-@keyframes iconPulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
-  50% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.2); }
-}
-
-.header-text h3 {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 4px 0;
-}
-
-.header-text p {
-  font-size: 13px;
-  color: var(--text-tertiary);
-  margin: 0;
-}
-
-.close-btn {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.close-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
-  border-color: rgba(255, 255, 255, 0.15);
-}
-
-/* Dialog Body */
-.create-dialog :deep(.el-dialog__body) {
-  padding: 28px;
-}
-
-.dialog-body {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.form-card {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 24px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 16px;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.input-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-.label-icon {
-  color: var(--accent-primary);
-  font-size: 10px;
-}
-
-.custom-input :deep(.el-input__wrapper) {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  box-shadow: none;
-  padding: 4px 14px;
-  transition: all 0.25s ease;
-}
-
-.custom-input :deep(.el-input__wrapper:hover) {
-  border-color: rgba(0, 212, 255, 0.3);
-}
-
-.custom-input :deep(.el-input__wrapper.is-focus) {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
-}
-
-.custom-input :deep(.el-input__inner) {
-  color: var(--text-primary);
-}
-
-.custom-input :deep(.el-input__inner::placeholder) {
-  color: var(--text-muted);
-}
-
-.custom-input :deep(.el-textarea__inner) {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  box-shadow: none;
-  padding: 12px 14px;
-  color: var(--text-primary);
-  resize: none;
-  transition: all 0.25s ease;
-}
-
-.custom-input :deep(.el-textarea__inner:hover) {
-  border-color: rgba(0, 212, 255, 0.3);
-}
-
-.custom-input :deep(.el-textarea__inner:focus) {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
-}
-
-/* Templates Section */
-.templates-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.templates-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.templates-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-
-.template-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 12px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-.template-card:hover {
-  background: rgba(0, 212, 255, 0.08);
-  border-color: rgba(0, 212, 255, 0.25);
-  transform: translateY(-2px);
-}
-
-.template-card .el-icon {
-  font-size: 22px;
-  color: var(--accent-primary);
-}
-
-.template-card span {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-/* Dialog Footer */
-.create-dialog :deep(.el-dialog__footer) {
-  padding: 0;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 20px 28px;
-  background: rgba(0, 0, 0, 0.2);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.btn-cancel {
-  padding: 10px 20px;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  color: var(--text-secondary);
-  transition: all 0.2s ease;
-}
-
-.btn-cancel:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.15);
-  color: var(--text-primary);
-}
-
-.btn-create {
-  padding: 10px 24px;
-  background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
-  border: none;
-  border-radius: 10px;
-  font-weight: 500;
-  transition: all 0.25s ease;
-}
-
-.btn-create:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.35);
-}
-
-/* Responsive */
-@media (max-width: 1024px) {
-  .hero {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-  .hero-subtitle { max-width: 100%; }
-  .hero-actions { justify-content: center; }
-}
-
-@media (max-width: 640px) {
-  .home { padding: 40px 20px 60px; }
-  .hero-title { font-size: 36px; }
-  .hero-actions { flex-direction: column; }
-  .projects-grid { grid-template-columns: 1fr; }
-}
+@import '@/styles/home.scss';
 </style>
diff --git a/frontend/src/views/ModelSettingsView.vue b/frontend/src/views/ModelSettingsView.vue
new file mode 100644
index 0000000..861d02c
--- /dev/null
+++ b/frontend/src/views/ModelSettingsView.vue
@@ -0,0 +1,975 @@
+<template>
+  <div class="model-settings">
+    <!-- 背景效果 -->
+    <div class="bg-effects">
+      <div class="glow-orb glow-1"></div>
+      <div class="glow-orb glow-2"></div>
+    </div>
+
+    <!-- 页面头部 -->
+    <header class="page-header">
+      <div class="header-left">
+        <el-button text class="back-btn" @click="goHome">
+          <el-icon><ArrowLeft /></el-icon>
+          <span>返回</span>
+        </el-button>
+      </div>
+      <div class="header-content">
+        <h1 class="page-title">
+          <el-icon class="title-icon"><Cpu /></el-icon>
+          模型配置
+        </h1>
+        <p class="page-subtitle">管理您的 AI 模型 API 配置</p>
+      </div>
+      <div class="header-right">
+        <el-button type="primary" class="add-btn" @click="openAddDialog">
+          <el-icon><Plus /></el-icon>
+          <span>添加模型</span>
+        </el-button>
+      </div>
+    </header>
+
+    <!-- 主内容 -->
+    <main class="page-main">
+      <!-- 统计卡片 -->
+      <section class="stats-grid">
+        <div class="stat-card" v-for="stat in stats" :key="stat.label">
+          <div class="stat-icon" :class="stat.class">
+            {{ stat.icon }}
+          </div>
+          <div class="stat-info">
+            <span class="stat-value">{{ stat.value }}</span>
+            <span class="stat-label">{{ stat.label }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 模型列表 -->
+      <section class="models-section">
+        <div class="section-header">
+          <h2 class="section-title">
+            <span class="title-line"></span>
+            已配置的模型
+          </h2>
+          <span class="count-badge">{{ models.length }} 个</span>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="models.length === 0 && !loading" class="empty-state">
+          <div class="empty-illustration">
+            <div class="pulse-ring"></div>
+            <el-icon size="48"><Setting /></el-icon>
+          </div>
+          <h3>暂无模型配置</h3>
+          <p>添加您的第一个 AI 模型开始使用</p>
+          <el-button type="primary" @click="openAddDialog">添加模型</el-button>
+        </div>
+
+        <!-- 模型卡片 -->
+        <div v-else class="models-grid">
+          <article
+            v-for="(model, index) in models"
+            :key="model.id"
+            class="model-card"
+            :class="{ 'is-default': model.is_default === 'true' }"
+            :style="{ '--delay': index * 0.08 + 's' }"
+          >
+            <div class="card-glow"></div>
+
+            <!-- 默认标识 -->
+            <div v-if="model.is_default === 'true'" class="default-badge">
+              <el-icon><Star /></el-icon>
+              默认
+            </div>
+
+            <!-- 提供商图标 -->
+            <div class="provider-logo" :class="model.provider">
+              {{ getProviderAbbr(model.provider) }}
+            </div>
+
+            <!-- 模型信息 -->
+            <div class="model-info">
+              <h3 class="model-name">{{ model.model_name }}</h3>
+              <p class="model-endpoint">
+                <el-icon><Link /></el-icon>
+                {{ model.api_base || '默认端点' }}
+              </p>
+            </div>
+
+            <!-- 底部操作 -->
+            <div class="card-footer">
+              <div class="status-badge">
+                <span class="status-dot online"></span>
+                已配置
+              </div>
+              <div class="card-actions">
+                <el-tooltip content="测试连接" placement="top">
+                  <el-button text circle class="action-btn" @click="testConnection(model)">
+                    <el-icon><Connection /></el-icon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button text circle class="action-btn delete" @click="confirmDelete(model)">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+    </main>
+
+    <!-- 添加模型弹窗 -->
+    <el-dialog
+      v-model="showAddDialog"
+      :show-close="false"
+      width="500"
+      class="model-dialog"
+      :append-to-body="true"
+    >
+      <template #header>
+        <div class="dialog-header">
+          <div class="dialog-icon">
+            <el-icon size="20"><Plus /></el-icon>
+          </div>
+          <div class="dialog-title">
+            <h3>添加模型</h3>
+            <p>配置新的 AI 模型</p>
+          </div>
+          <button class="dialog-close" @click="showAddDialog = false">
+            <el-icon><Close /></el-icon>
+          </button>
+        </div>
+      </template>
+
+      <el-form :model="modelForm" label-position="top" class="model-form">
+        <!-- 提供商选择 -->
+        <el-form-item label="选择提供商">
+          <div class="provider-grid">
+            <div
+              v-for="provider in providers"
+              :key="provider.value"
+              class="provider-option"
+              :class="{ active: modelForm.provider === provider.value }"
+              @click="modelForm.provider = provider.value"
+            >
+              <span class="provider-abbr">{{ provider.abbr }}</span>
+              <span class="provider-name">{{ provider.label }}</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <!-- 模型名称 -->
+        <el-form-item label="模型名称" required>
+          <el-input
+            v-model="modelForm.model_name"
+            placeholder="例如: gpt-4o-mini"
+            size="large"
+          />
+        </el-form-item>
+
+        <!-- API Key -->
+        <el-form-item label="API Key" required>
+          <el-input
+            v-model="modelForm.api_key"
+            type="password"
+            placeholder="输入 API Key"
+            size="large"
+            show-password
+          />
+        </el-form-item>
+
+        <!-- API 地址 -->
+        <el-form-item label="API 地址 (可选)">
+          <el-input
+            v-model="modelForm.api_base"
+            placeholder="自定义 API 地址"
+            size="large"
+          />
+        </el-form-item>
+
+        <!-- 默认开关 -->
+        <el-form-item>
+          <el-checkbox v-model="modelForm.is_default">
+            设为默认模型
+          </el-checkbox>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="showAddDialog = false" size="large">取消</el-button>
+          <el-button type="primary" @click="addModel" :loading="submitting" size="large">
+            添加模型
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 删除确认弹窗 -->
+    <el-dialog
+      v-model="deleteDialogVisible"
+      :show-close="false"
+      width="400"
+      class="delete-dialog"
+      :append-to-body="true"
+    >
+      <template #header>
+        <div class="delete-header">
+          <div class="delete-icon">
+            <el-icon size="24"><WarningFilled /></el-icon>
+          </div>
+          <h3>确认删除</h3>
+        </div>
+      </template>
+
+      <div class="delete-content">
+        <p>确定要删除模型 <strong>{{ modelToDelete?.model_name }}</strong> 吗？</p>
+        <p class="warning-text">此操作不可恢复</p>
+      </div>
+
+      <template #footer>
+        <div class="delete-footer">
+          <el-button @click="deleteDialogVisible = false" size="large">取消</el-button>
+          <el-button type="danger" @click="handleDelete" :loading="deleting" size="large">
+            确认删除
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import type { ModelConfig, ProviderOption, ModelCreate } from '@/types'
+
+const router = useRouter()
+
+// 状态
+const loading = ref(false)
+const submitting = ref(false)
+const deleting = ref(false)
+const showAddDialog = ref(false)
+const deleteDialogVisible = ref(false)
+const modelToDelete = ref<ModelConfig | null>(null)
+const models = ref<ModelConfig[]>([])
+
+// 表单
+const modelForm = reactive<ModelCreate>({
+  provider: 'openai',
+  model_name: '',
+  api_key: '',
+  api_base: '',
+  is_default: false
+})
+
+// 提供商
+const providers: ProviderOption[] = [
+  { value: 'openai', label: 'OpenAI', abbr: 'OP' },
+  { value: 'anthropic', label: 'Anthropic', abbr: 'AN' },
+  { value: 'google', label: 'Google', abbr: 'GO' },
+  { value: 'other', label: '其他', abbr: 'OT' }
+]
+
+// Mock
+const mockModels: ModelConfig[] = [
+  { id: '1', provider: 'openai', model_name: 'gpt-4o', api_base: 'https://api.openai.com/v1', is_default: 'true' },
+  { id: '2', provider: 'openai', model_name: 'gpt-4o-mini', api_base: 'https://api.openai.com/v1', is_default: 'false' },
+  { id: '3', provider: 'anthropic', model_name: 'claude-3-5-sonnet', api_base: 'https://api.anthropic.com', is_default: 'false' }
+]
+
+// 统计
+const stats = computed(() => [
+  { label: 'OpenAI', value: models.value.filter(m => m.provider === 'openai').length, icon: 'OP', class: 'openai' },
+  { label: 'Anthropic', value: models.value.filter(m => m.provider === 'anthropic').length, icon: 'AN', class: 'anthropic' },
+  { label: 'Google', value: models.value.filter(m => m.provider === 'google').length, icon: 'GO', class: 'google' },
+  { label: '默认模型', value: models.value.find(m => m.is_default === 'true')?.model_name || '未设置', icon: '★', class: 'default' }
+])
+
+// 方法
+const goHome = () => router.push('/')
+
+const getProviderAbbr = (provider: string) => {
+  const p = providers.find(p => p.value === provider)
+  return p?.abbr || '?'
+}
+
+const fetchModels = async () => {
+  loading.value = true
+  try {
+    await new Promise(r => setTimeout(r, 500))
+    models.value = mockModels
+  } catch {
+    ElMessage.error('加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const openAddDialog = () => {
+  modelForm.provider = 'openai'
+  modelForm.model_name = ''
+  modelForm.api_key = ''
+  modelForm.api_base = ''
+  modelForm.is_default = false
+  showAddDialog.value = true
+}
+
+const addModel = async () => {
+  if (!modelForm.model_name || !modelForm.api_key) {
+    ElMessage.warning('请填写模型名称和 API Key')
+    return
+  }
+
+  submitting.value = true
+  try {
+    await new Promise(r => setTimeout(r, 500))
+    ElMessage.success('添加成功')
+    showAddDialog.value = false
+    fetchModels()
+  } catch {
+    ElMessage.error('添加失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+const confirmDelete = (model: ModelConfig) => {
+  modelToDelete.value = model
+  deleteDialogVisible.value = true
+}
+
+const handleDelete = async () => {
+  deleting.value = true
+  try {
+    await new Promise(r => setTimeout(r, 500))
+    ElMessage.success('删除成功')
+    deleteDialogVisible.value = false
+    modelToDelete.value = null
+    fetchModels()
+  } catch {
+    ElMessage.error('删除失败')
+  } finally {
+    deleting.value = false
+  }
+}
+
+const testConnection = (model: ModelConfig) => {
+  ElMessage.info(`测试 ${model.model_name}...`)
+}
+
+onMounted(() => fetchModels())
+</script>
+
+<style scoped>
+/* 使用全局 CSS 变量 */
+.model-settings {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景效果 */
+.bg-effects {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.glow-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.4;
+}
+
+.glow-1 {
+  width: 500px;
+  height: 500px;
+  background: var(--accent-primary);
+  top: -200px;
+  right: -100px;
+}
+
+.glow-2 {
+  width: 400px;
+  height: 400px;
+  background: var(--accent-secondary);
+  bottom: -100px;
+  left: -100px;
+}
+
+/* 页面头部 */
+.page-header {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 32px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.header-content {
+  text-align: center;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.title-icon {
+  color: var(--accent-primary);
+}
+
+.page-subtitle {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin: 4px 0 0;
+}
+
+.header-left, .header-right {
+  flex: 1;
+}
+
+.header-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  padding: 8px 16px;
+  border-radius: var(--radius-md);
+  background: transparent !important;
+}
+
+.back-btn:hover {
+  background: var(--bg-hover) !important;
+  color: var(--text-primary);
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--accent-primary);
+  border: none;
+  color: #030407;
+  font-weight: 600;
+}
+
+.add-btn:hover {
+  background: var(--accent-primary-hover);
+}
+
+/* 主内容 */
+.page-main {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+/* 统计卡片 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
+}
+
+.stat-card:hover {
+  border-color: var(--border-default);
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 700;
+  color: white;
+}
+
+.stat-icon.openai { background: linear-gradient(135deg, #10a37f, #0d8c6d); }
+.stat-icon.anthropic { background: linear-gradient(135deg, #d97757, #c45f3f); }
+.stat-icon.google { background: linear-gradient(135deg, #4285f4, #3367d6); }
+.stat-icon.default { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+/* 模型列表 */
+.models-section {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  padding: 24px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.title-line {
+  width: 4px;
+  height: 18px;
+  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 2px;
+}
+
+.count-badge {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  background: var(--bg-hover);
+  padding: 6px 14px;
+  border-radius: 20px;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.empty-illustration {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.pulse-ring {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--border-subtle);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.1); opacity: 0.5; }
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.empty-state p {
+  color: var(--text-tertiary);
+  margin: 0 0 24px;
+}
+
+/* 模型网格 */
+.models-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.model-card {
+  position: relative;
+  padding: 24px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-base);
+  animation: fadeInUp 0.4s ease backwards;
+  animation-delay: var(--delay);
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.model-card:hover {
+  border-color: var(--accent-primary-muted);
+  transform: translateY(-4px);
+  box-shadow: var(--glow-primary);
+}
+
+.model-card.is-default {
+  border-color: rgba(52, 211, 153, 0.3);
+}
+
+.card-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-lg);
+  background: radial-gradient(circle at top right, var(--accent-primary-muted), transparent 60%);
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.model-card:hover .card-glow {
+  opacity: 1;
+}
+
+.default-badge {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--success);
+  background: var(--success-muted);
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+
+.provider-logo {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 16px;
+}
+
+.provider-logo.openai { background: linear-gradient(135deg, #10a37f, #0d8c6d); }
+.provider-logo.anthropic { background: linear-gradient(135deg, #d97757, #c45f3f); }
+.provider-logo.google { background: linear-gradient(135deg, #4285f4, #3367d6); }
+.provider-logo.other { background: linear-gradient(135deg, #6b7280, #4b5563); }
+
+.model-info {
+  margin-bottom: 20px;
+}
+
+.model-name {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.model-endpoint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.status-dot.online {
+  background: var(--success);
+  box-shadow: 0 0 8px var(--success);
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  color: var(--text-tertiary);
+  background: var(--bg-hover);
+  border-radius: var(--radius-sm);
+}
+
+.action-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+}
+
+.action-btn.delete:hover {
+  color: var(--danger);
+  background: var(--danger-muted);
+}
+
+/* 弹窗样式 */
+:deep(.model-dialog .el-dialog) {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px;
+  position: relative;
+}
+
+.dialog-icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-primary);
+  border-radius: var(--radius-md);
+  color: #030407;
+}
+
+.dialog-title h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.dialog-title p {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin: 4px 0 0;
+}
+
+.dialog-close {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  cursor: pointer;
+}
+
+.dialog-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.provider-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 8px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.provider-option:hover {
+  border-color: var(--border-default);
+}
+
+.provider-option.active {
+  border-color: var(--accent-primary);
+  background: var(--accent-primary-muted);
+}
+
+.provider-option .provider-abbr {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.provider-option .provider-name {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.provider-option.active .provider-name {
+  color: var(--accent-primary);
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  background: var(--bg-tertiary);
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* 删除弹窗 */
+:deep(.delete-dialog .el-dialog) {
+  background: var(--bg-elevated);
+  border: 1px solid var(--danger-muted);
+  border-radius: var(--radius-xl);
+}
+
+.delete-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+}
+
+.delete-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--danger-muted);
+  border: 1px solid var(--danger-muted);
+  border-radius: 50%;
+  color: var(--danger);
+}
+
+.delete-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.delete-content {
+  text-align: center;
+  padding: 0 24px 24px;
+}
+
+.delete-content p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.delete-content p strong {
+  color: var(--text-primary);
+}
+
+.warning-text {
+  color: var(--danger) !important;
+  font-size: 13px;
+  margin-top: 8px !important;
+}
+
+.delete-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 24px;
+  background: var(--bg-tertiary);
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .page-main {
+    padding: 16px;
+  }
+
+  .provider-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 0bd3581..de45a7b 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -76,7 +76,8 @@ const isActive = (path) => route.path.includes(path)
 const fetchProject = async () => {
   try {
     const res = await projectApi.get(id.value)
-    project.value = res.data
+    // New format: returns project directly
+    project.value = res
   } catch (error) {
     ElMessage.error('加载项目失败')
   }
diff --git a/frontend/src/views/project/Settings.vue b/frontend/src/views/project/Settings.vue
index d2e9c09..1990b1b 100644
--- a/frontend/src/views/project/Settings.vue
+++ b/frontend/src/views/project/Settings.vue
@@ -125,8 +125,9 @@ const prompts = reactive({
 const fetchProject = async () => {
   try {
     const res = await projectApi.get(projectId.value)
-    projectInfo.name = res.data.name
-    projectInfo.description = res.data.description || ''
+    // New format: project directly in response
+    projectInfo.name = res.name
+    projectInfo.description = res.description || ''
   } catch (error) {
     console.error(error)
   }