From 66d251dcc48dbb4368e4591e36293fdf0e63e9e9 Mon Sep 17 00:00:00 2001
From: Developer <developer@example.com>
Date: Tue, 17 Mar 2026 17:28:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=20TypeScri?=
 =?UTF-8?q?pt=20=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89=E5=92=8C=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 TypeScript API 客户端 (api/index.ts)
- 添加全局样式 (styles/)
- 添加类型定义 (types/)
- 添加 Vue 组件 (components/)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/api/index.ts                     |  94 ++++
 .../components/common/CreateProjectDialog.vue | 423 +++++++++++++++++
 .../src/components/common/DeleteDialog.vue    | 188 ++++++++
 frontend/src/components/common/EmptyState.vue |  96 ++++
 .../src/components/common/ProjectCard.vue     | 202 +++++++++
 frontend/src/styles/home.scss                 | 426 ++++++++++++++++++
 frontend/src/types/api.d.ts                   |  32 ++
 frontend/src/types/common.d.ts                |  60 +++
 frontend/src/types/index.ts                   |   7 +
 frontend/src/types/model.d.ts                 |  30 ++
 frontend/src/types/project.d.ts               |  21 +
 11 files changed, 1579 insertions(+)
 create mode 100644 frontend/src/api/index.ts
 create mode 100644 frontend/src/components/common/CreateProjectDialog.vue
 create mode 100644 frontend/src/components/common/DeleteDialog.vue
 create mode 100644 frontend/src/components/common/EmptyState.vue
 create mode 100644 frontend/src/components/common/ProjectCard.vue
 create mode 100644 frontend/src/styles/home.scss
 create mode 100644 frontend/src/types/api.d.ts
 create mode 100644 frontend/src/types/common.d.ts
 create mode 100644 frontend/src/types/index.ts
 create mode 100644 frontend/src/types/model.d.ts
 create mode 100644 frontend/src/types/project.d.ts

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
new file mode 100644
index 0000000..75aaafc
--- /dev/null
+++ b/frontend/src/api/index.ts
@@ -0,0 +1,94 @@
+import axios from 'axios'
+import type { AxiosInstance } from 'axios'
+import type { Project, ProjectCreate, ProjectUpdate } from '@/types'
+
+const request: AxiosInstance = axios.create({
+  baseURL: import.meta.env.PROD
+    ? '/api/v1'
+    : 'http://10.10.10.77:8000/api/v1',
+  timeout: 60000
+})
+
+// Request interceptor
+request.interceptors.request.use(
+  config => {
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+// Response interceptor
+request.interceptors.response.use(
+  response => {
+    const data = response.data
+    // Handle new ApiResponse format
+    if (data.success !== undefined) {
+      if (data.success) {
+        return data.data // Return the actual data
+      } else {
+        return Promise.reject(new Error(data.message || data.error || '请求失败'))
+      }
+    }
+    return data
+  },
+  error => {
+    const message = error.response?.data?.message || error.message || '请求失败'
+    console.error('API Error:', message)
+    return Promise.reject(error)
+  }
+)
+
+export const projectApi = {
+  list: () => request.get<Project[]>('/projects/'),
+  get: (id: string) => request.get<Project>(`/projects/${id}`),
+  create: (data: ProjectCreate) => request.post<{ id: string }>('/projects/', data),
+  update: (id: string, data: ProjectUpdate) => request.put<Project>(`/projects/${id}`, data),
+  delete: (id: string) => request.delete(`/projects/${id}`)
+}
+
+export const fileApi = {
+  upload: (projectId: string, formData: FormData) =>
+    request.post(`/projects/${projectId}/files/upload`, formData, {
+      headers: { 'Content-Type': 'multipart/form-data' }
+    }),
+  list: (projectId: string) => request.get(`/projects/${projectId}/files/`),
+  get: (projectId: string, fileId: string) => request.get(`/projects/${projectId}/files/${fileId}`),
+  delete: (projectId: string, fileId: string) => request.delete(`/projects/${projectId}/files/${fileId}`)
+}
+
+export const chunkApi = {
+  split: (projectId: string, data: any) => request.post(`/projects/${projectId}/chunks/split`, data),
+  list: (projectId: string, params?: any) => request.get(`/projects/${projectId}/chunks/`, { params }),
+  get: (projectId: string, chunkId: string) => request.get(`/projects/${projectId}/chunks/${chunkId}`),
+  update: (projectId: string, chunkId: string, data: any) => request.put(`/projects/${projectId}/chunks/${chunkId}`, data),
+  delete: (projectId: string, chunkId: string) => request.delete(`/projects/${projectId}/chunks/${chunkId}`)
+}
+
+export const questionApi = {
+  generate: (projectId: string, data: any) => request.post(`/projects/${projectId}/generate-questions`, data),
+  list: (projectId: string, params: { chunkId: string }) => request.get(`/projects/${projectId}/chunks/${params.chunkId}/questions`),
+  update: (projectId: string, questionId: string, data: any) => request.put(`/projects/${projectId}/questions/${questionId}`, data),
+  delete: (projectId: string, questionId: string) => request.delete(`/projects/${projectId}/questions/${questionId}`)
+}
+
+export const datasetApi = {
+  list: (projectId: string) => request.get(`/projects/${projectId}/datasets/`),
+  create: (projectId: string, data: any) => request.post(`/projects/${projectId}/datasets/`, data),
+  get: (projectId: string, datasetId: string) => request.get(`/projects/${projectId}/datasets/${datasetId}`),
+  delete: (projectId: string, datasetId: string) => request.delete(`/projects/${projectId}/datasets/${datasetId}`),
+  export: (projectId: string, datasetId: string, data: any) =>
+    request.post(`/projects/${projectId}/datasets/${datasetId}/export`, data, {
+      responseType: 'blob'
+    })
+}
+
+export const evalApi = {
+  list: (projectId: string) => request.get(`/projects/${projectId}/eval-datasets/`),
+  create: (projectId: string, data: any) => request.post(`/projects/${projectId}/eval-datasets/`, data),
+  run: (projectId: string, evalId: string) => request.post(`/projects/${projectId}/eval-datasets/${evalId}/evaluate`),
+  getResults: (projectId: string, taskId: string) => request.get(`/projects/${projectId}/eval-tasks/${taskId}`)
+}
+
+export default request
diff --git a/frontend/src/components/common/CreateProjectDialog.vue b/frontend/src/components/common/CreateProjectDialog.vue
new file mode 100644
index 0000000..edd83dc
--- /dev/null
+++ b/frontend/src/components/common/CreateProjectDialog.vue
@@ -0,0 +1,423 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    title=""
+    width="480px"
+    class="create-dialog"
+    :show-close="false"
+    align-center
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <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="handleClose">
+          <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="formData.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="formData.description"
+            type="textarea"
+            :rows="3"
+            placeholder="描述这个项目的用途和数据类型..."
+            class="custom-input"
+          />
+        </div>
+      </div>
+
+      <!-- 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="handleClose" class="btn-cancel">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="loading"
+          @click="handleSubmit"
+          class="btn-create"
+        >
+          <el-icon v-if="!loading"><Plus /></el-icon>
+          创建项目
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:visible', 'submit'])
+
+const formData = reactive({
+  name: '',
+  description: ''
+})
+
+const templates = {
+  qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
+  conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
+  instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
+}
+
+const useTemplate = (type) => {
+  const t = templates[type]
+  formData.name = t.name
+  formData.description = t.description
+}
+
+const handleClose = () => {
+  emit('update:visible', false)
+}
+
+const handleSubmit = () => {
+  emit('submit', { ...formData })
+}
+
+// Reset form when dialog opens
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    formData.name = ''
+    formData.description = ''
+  }
+})
+</script>
+
+<style scoped>
+.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);
+}
+</style>
diff --git a/frontend/src/components/common/DeleteDialog.vue b/frontend/src/components/common/DeleteDialog.vue
new file mode 100644
index 0000000..2dbdb8c
--- /dev/null
+++ b/frontend/src/components/common/DeleteDialog.vue
@@ -0,0 +1,188 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    title=""
+    width="420px"
+    class="delete-dialog"
+    :show-close="false"
+    align-center
+    :close-on-click-modal="false"
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <template #header>
+      <div class="delete-dialog-header">
+        <div class="delete-icon-wrapper">
+          <el-icon size="28"><WarningFilled /></el-icon>
+        </div>
+        <h3>{{ title }}</h3>
+      </div>
+    </template>
+    <div class="delete-dialog-body">
+      <p>
+        确定要删除 <strong>{{ itemName }}</strong> 吗？
+      </p>
+      <p class="warning-text">{{ warningText }}</p>
+    </div>
+    <template #footer>
+      <div class="delete-dialog-footer">
+        <el-button
+          @click="handleCancel"
+          class="btn-cancel-delete"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="danger"
+          :loading="loading"
+          @click="handleConfirm"
+          class="btn-delete"
+        >
+          <el-icon v-if="!loading"><Delete /></el-icon>
+          确认删除
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '删除项目'
+  },
+  itemName: {
+    type: String,
+    default: ''
+  },
+  warningText: {
+    type: String,
+    default: '此操作不可恢复，所有相关数据将被永久删除'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
+
+const handleConfirm = () => {
+  emit('confirm')
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+.delete-dialog :deep(.el-dialog) {
+  background: linear-gradient(145deg, #1a1a2e 0%, #16162a 100%);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.1);
+}
+
+.delete-dialog :deep(.el-dialog__header) {
+  padding: 24px 24px 12px;
+}
+
+.delete-dialog :deep(.el-dialog__body) {
+  padding: 0 24px 24px;
+}
+
+.delete-dialog :deep(.el-dialog__footer) {
+  padding: 0;
+}
+
+.delete-dialog-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.delete-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 50%;
+  color: #ef4444;
+}
+
+.delete-dialog-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.delete-dialog-body {
+  text-align: center;
+  padding: 8px 0;
+}
+
+.delete-dialog-body p {
+  margin: 0;
+  color: #ccc;
+  font-size: 14px;
+}
+
+.delete-dialog-body p strong {
+  color: #fff;
+}
+
+.delete-dialog-body .warning-text {
+  margin-top: 8px;
+  color: #ef4444;
+  font-size: 13px;
+}
+
+.delete-dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px 24px;
+  background: rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.btn-cancel-delete {
+  padding: 10px 24px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: #ccc;
+  transition: all 0.2s ease;
+}
+
+.btn-cancel-delete:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.btn-delete {
+  padding: 10px 24px;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border: none;
+  border-radius: 10px;
+  font-weight: 500;
+  transition: all 0.25s ease;
+}
+
+.btn-delete:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+}
+</style>
diff --git a/frontend/src/components/common/EmptyState.vue b/frontend/src/components/common/EmptyState.vue
new file mode 100644
index 0000000..1dde958
--- /dev/null
+++ b/frontend/src/components/common/EmptyState.vue
@@ -0,0 +1,96 @@
+<template>
+  <div 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"><component :is="icon" /></el-icon>
+    </div>
+    <h3>{{ title }}</h3>
+    <p>{{ description }}</p>
+    <el-button v-if="actionText" type="primary" @click="$emit('action')">
+      {{ actionText }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: Object,
+    default: () => null
+  },
+  title: {
+    type: String,
+    default: '暂无数据'
+  },
+  description: {
+    type: String,
+    default: '暂无相关内容'
+  },
+  actionText: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['action'])
+</script>
+
+<style scoped>
+.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;
+  color: var(--text-primary);
+}
+
+.empty-state p {
+  color: var(--text-tertiary);
+  margin-bottom: 24px;
+}
+</style>
diff --git a/frontend/src/components/common/ProjectCard.vue b/frontend/src/components/common/ProjectCard.vue
new file mode 100644
index 0000000..690d475
--- /dev/null
+++ b/frontend/src/components/common/ProjectCard.vue
@@ -0,0 +1,202 @@
+<template>
+  <div
+    class="project-card"
+    :style="{ '--delay': delay }"
+    @click="$emit('click', project)"
+  >
+    <div class="card-glow"></div>
+    <button
+      v-if="showDelete"
+      class="card-delete-btn"
+      @click.stop="$emit('delete', project)"
+    >
+      <el-icon><Delete /></el-icon>
+    </button>
+    <div class="card-header">
+      <div class="card-avatar">
+        <el-icon><Folder /></el-icon>
+      </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>
+        {{ formattedDate }}
+      </span>
+      <div class="card-status">
+        <span class="status-dot"></span>
+        {{ statusText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  },
+  statusText: {
+    type: String,
+    default: '活跃'
+  }
+})
+
+defineEmits(['click', 'delete'])
+
+const delay = computed(() => `${props.index * 0.1}s`)
+
+const formattedDate = computed(() => {
+  if (!props.project.created_at) return ''
+  const d = new Date(props.project.created_at)
+  return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', year: 'numeric' })
+})
+</script>
+
+<style scoped>
+.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-delete-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--danger);
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.card-delete-btn:hover {
+  transform: scale(1.1);
+  background: #dc2626;
+}
+
+.project-card:hover .card-delete-btn {
+  opacity: 1;
+  transform: scale(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);
+}
+
+.card-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.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%;
+}
+</style>
diff --git a/frontend/src/styles/home.scss b/frontend/src/styles/home.scss
new file mode 100644
index 0000000..8650969
--- /dev/null
+++ b/frontend/src/styles/home.scss
@@ -0,0 +1,426 @@
+/* ========================
+   HomeView Styles
+   ======================== */
+
+.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;
+}
+
+/* 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; }
+}
diff --git a/frontend/src/types/api.d.ts b/frontend/src/types/api.d.ts
new file mode 100644
index 0000000..6c21444
--- /dev/null
+++ b/frontend/src/types/api.d.ts
@@ -0,0 +1,32 @@
+/**
+ * API Response Types
+ */
+
+// Base API response wrapper
+export interface ApiResponse<T = any> {
+  success: boolean
+  message: string
+  data: T
+  error: string | null
+  timestamp: string
+}
+
+// Paginated response
+export interface PaginatedResponse<T = any> extends ApiResponse<T> {
+  page?: number
+  page_size?: number
+  total?: number
+}
+
+// List items wrapper
+export interface ListResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  page_size: number
+}
+
+// Simple ID response
+export interface IdResponse {
+  id: string
+}
diff --git a/frontend/src/types/common.d.ts b/frontend/src/types/common.d.ts
new file mode 100644
index 0000000..b466704
--- /dev/null
+++ b/frontend/src/types/common.d.ts
@@ -0,0 +1,60 @@
+/**
+ * Common Types
+ */
+
+// File types
+export interface FileItem {
+  id: string
+  filename: string
+  file_type: string
+  size?: number
+  status: string
+  created_at: string
+  updated_at: string
+}
+
+// Chunk types
+export interface Chunk {
+  id: string
+  name?: string
+  content: string
+  summary?: string
+  word_count?: number
+  file_id?: string
+  created_at: string
+  updated_at: string
+}
+
+// Question types
+export interface Question {
+  id: string
+  content: string
+  answer?: string
+  question_type?: string
+  chunk_id?: string
+  source: string
+  created_at: string
+  updated_at: string
+}
+
+// Dataset types
+export interface Dataset {
+  id: string
+  name: string
+  description?: string
+  dataset_type?: string
+  question_count?: number
+  created_at: string
+  updated_at: string
+}
+
+// Dialog props
+export interface DialogProps {
+  visible: boolean
+  loading?: boolean
+}
+
+export interface DeleteDialogProps extends DialogProps {
+  itemName?: string
+  itemType?: string
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..a75f751
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Type exports
+ */
+export * from './api'
+export * from './project'
+export * from './model'
+export * from './common'
diff --git a/frontend/src/types/model.d.ts b/frontend/src/types/model.d.ts
new file mode 100644
index 0000000..d53fd55
--- /dev/null
+++ b/frontend/src/types/model.d.ts
@@ -0,0 +1,30 @@
+/**
+ * Model Configuration Types
+ */
+
+export interface ModelConfig {
+  id: string
+  provider: ModelProvider
+  model_name: string
+  api_key?: string
+  api_base?: string
+  is_default: 'true' | 'false'
+  created_at?: string
+  updated_at?: string
+}
+
+export type ModelProvider = 'openai' | 'anthropic' | 'google' | 'other'
+
+export interface ModelCreate {
+  provider: ModelProvider
+  model_name: string
+  api_key: string
+  api_base?: string
+  is_default: boolean
+}
+
+export interface ProviderOption {
+  value: ModelProvider
+  label: string
+  abbr: string
+}
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
new file mode 100644
index 0000000..0daf62f
--- /dev/null
+++ b/frontend/src/types/project.d.ts
@@ -0,0 +1,21 @@
+/**
+ * Project Types
+ */
+
+export interface Project {
+  id: string
+  name: string
+  description?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface ProjectCreate {
+  name: string
+  description?: string
+}
+
+export interface ProjectUpdate {
+  name?: string
+  description?: string
+}