Version: 0.7.6.dev.260325

后端： - ♻️ 将 `taskquery` 模块迁移至 `agent2`，并完成与 `agent2` 业务链路及整体结构的正式接入前端： - 🧱 已完成基础框架搭建，并完成了登录、注册、主页等页面并对接了对应接口；但整体功能实现仍在完善中
2026-03-25 00:49:16 +08:00
parent f4ef6fb256
commit e06284d0b0
52 changed files with 8847 additions and 468 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SmartFlow</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+  </html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "smartflow-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vue/shared": "^3.5.0",
+    "axios": "^1.8.0",
+    "element-plus": "^2.9.0",
+    "pinia": "^2.2.0",
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vue-tsc": "^2.2.0"
+  }
+}
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
--- a/frontend/src/api/agent.ts
+++ b/frontend/src/api/agent.ts
@@ -0,0 +1,68 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+import type { ConversationListResponse, ConversationMeta } from '@/types/dashboard'
+import { extractErrorMessage } from '@/utils/http'
+
+const conversationHistoryPath = '/agent/conversation-history'
+
+export interface ConversationHistoryMessage {
+  id?: string | number
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  created_at?: string | null
+  reasoning_content?: string
+}
+
+export interface ConversationListQuery {
+  page?: number
+  pageSize?: number
+  status?: 'active' | 'archived'
+}
+
+// getConversationList 负责按 openapi 约定读取会话列表分页。
+// 职责边界：
+// 1. 负责把前端分页参数映射为后端要求的 page/limit。
+// 2. 不负责前端滚动懒加载时的合并、去重和选中逻辑。
+// 3. 接口失败时统一抛出中文错误，便于页面层直接提示。
+export async function getConversationList(options: ConversationListQuery = {}) {
+  const { page = 1, pageSize = 20, status = 'active' } = options
+
+  try {
+    const response = await http.get<ApiResponse<ConversationListResponse>>('/agent/conversation-list', {
+      params: {
+        page,
+        limit: pageSize,
+        status,
+      },
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '会话列表加载失败，请稍后重试'))
+  }
+}
+
+export async function getConversationMeta(conversationId: string) {
+  try {
+    const response = await http.get<ApiResponse<ConversationMeta>>('/agent/conversation-meta', {
+      params: {
+        conversation_id: conversationId,
+      },
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '会话信息加载失败，请稍后重试'))
+  }
+}
+
+export async function getConversationHistory(conversationId: string) {
+  try {
+    const response = await http.get<ApiResponse<ConversationHistoryMessage[]>>(conversationHistoryPath, {
+      params: {
+        conversation_id: conversationId,
+      },
+    })
+    return response.data.data ?? []
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '会话消息加载失败，请稍后重试'))
+  }
+}
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -0,0 +1,62 @@
+import http from '@/api/http'
+import { extractErrorMessage } from '@/utils/http'
+import type {
+  ApiResponse,
+  LoginPayload,
+  PlainResponse,
+  RefreshTokenPayload,
+  RegisterPayload,
+  RegisterResult,
+  TokenPair,
+} from '@/types/api'
+
+export async function login(payload: LoginPayload) {
+  try {
+    const response = await http.post<ApiResponse<TokenPair>>('/user/login', payload, {
+      skipAuth: true,
+      skipRefresh: true,
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '登录失败，请稍后重试'))
+  }
+}
+
+export async function register(payload: RegisterPayload) {
+  try {
+    const response = await http.post<ApiResponse<RegisterResult>>('/user/register', payload, {
+      skipAuth: true,
+      skipRefresh: true,
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '注册失败，请稍后重试'))
+  }
+}
+
+export async function refreshToken(payload: RefreshTokenPayload) {
+  try {
+    const response = await http.post<ApiResponse<TokenPair>>('/user/refresh-token', payload, {
+      skipAuth: true,
+      skipRefresh: true,
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '登录状态已失效，请重新登录'))
+  }
+}
+
+export async function logout() {
+  try {
+    const response = await http.post<PlainResponse>(
+      '/user/logout',
+      {},
+      {
+        skipRefresh: true,
+      },
+    )
+    return response.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '退出登录失败，请稍后重试'))
+  }
+}
--- a/frontend/src/api/http.ts
+++ b/frontend/src/api/http.ts
@@ -0,0 +1,134 @@
+import axios, { AxiosError, type InternalAxiosRequestConfig } from 'axios'
+
+import router from '@/router'
+import { useAuthStore } from '@/stores/auth'
+import type { ApiResponse, TokenPair } from '@/types/api'
+
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    skipAuth?: boolean
+    skipRefresh?: boolean
+    _retry?: boolean
+  }
+
+  interface InternalAxiosRequestConfig {
+    skipAuth?: boolean
+    skipRefresh?: boolean
+    _retry?: boolean
+  }
+}
+
+const http = axios.create({
+  baseURL: '/api/v1',
+  timeout: 12000,
+})
+
+const refreshHttp = axios.create({
+  baseURL: '/api/v1',
+  timeout: 12000,
+})
+
+let refreshPromise: Promise<TokenPair> | null = null
+
+function getAuthStore() {
+  return useAuthStore()
+}
+
+async function redirectToAuth() {
+  if (router.currentRoute.value.name !== 'auth') {
+    await router.push('/auth')
+  }
+}
+
+// refreshAccessToken 负责把多个并发 401 合并成一次 refresh 请求。
+// 职责边界：
+// 1. 负责读取当前 refresh token，并向后端换发新的 token 对。
+// 2. 不负责决定“哪些请求应该触发 refresh”；这一层由响应拦截器判断。
+// 3. 失败时会清理本地会话并跳回登录页，避免页面继续带着坏 token 重试。
+async function refreshAccessToken() {
+  if (refreshPromise) {
+    return refreshPromise
+  }
+
+  const authStore = getAuthStore()
+  const currentRefreshToken = authStore.refreshToken.trim()
+  if (!currentRefreshToken) {
+    authStore.clearSession()
+    await redirectToAuth()
+    throw new Error('缺少 refresh token，请重新登录')
+  }
+
+  refreshPromise = refreshHttp
+    .post<ApiResponse<TokenPair>>(
+      '/user/refresh-token',
+      {
+        old_refresh_token: currentRefreshToken,
+      },
+      {
+        skipAuth: true,
+        skipRefresh: true,
+      },
+    )
+    .then((response) => {
+      const tokens = response.data.data
+      authStore.applyTokenPair(tokens)
+      return tokens
+    })
+    .catch(async (error) => {
+      authStore.clearSession()
+      await redirectToAuth()
+      throw error
+    })
+    .finally(() => {
+      refreshPromise = null
+    })
+
+  return refreshPromise
+}
+
+http.interceptors.request.use((config) => {
+  const authStore = getAuthStore()
+
+  // 1. 默认所有业务请求都自动带 access token。
+  // 2. 登录/注册/刷新这类公开接口通过 skipAuth 显式跳过，避免误带过期 token。
+  if (!config.skipAuth && authStore.accessToken) {
+    config.headers.Authorization = `Bearer ${authStore.accessToken}`
+  }
+
+  return config
+})
+
+http.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const authStore = getAuthStore()
+    const originalRequest = error.config as InternalAxiosRequestConfig | undefined
+
+    // 1. 只对“带请求配置的 401”尝试自动续签。
+    // 2. 已经重试过、显式禁用 refresh 的请求，直接走失败兜底，避免死循环。
+    if (
+      error.response?.status !== 401 ||
+      !originalRequest ||
+      originalRequest.skipRefresh ||
+      originalRequest._retry
+    ) {
+      if (error.response?.status === 401 && !originalRequest?.skipRefresh) {
+        authStore.clearSession()
+        await redirectToAuth()
+      }
+      return Promise.reject(error)
+    }
+
+    originalRequest._retry = true
+
+    try {
+      const tokens = await refreshAccessToken()
+      originalRequest.headers.Authorization = `Bearer ${tokens.access_token}`
+      return http(originalRequest)
+    } catch (refreshError) {
+      return Promise.reject(refreshError)
+    }
+  },
+)
+
+export default http
--- a/frontend/src/api/schedule.ts
+++ b/frontend/src/api/schedule.ts
@@ -0,0 +1,13 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+import type { TodaySchedule } from '@/types/dashboard'
+import { extractErrorMessage } from '@/utils/http'
+
+export async function getTodaySchedule() {
+  try {
+    const response = await http.get<ApiResponse<TodaySchedule[]>>('/schedule/today')
+    return response.data.data ?? []
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '今日日程加载失败，请稍后重试'))
+  }
+}
--- a/frontend/src/api/task.ts
+++ b/frontend/src/api/task.ts
@@ -0,0 +1,61 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+import type { TaskCreatePayload, TaskCreateResult, TaskItem, TaskMutationResult } from '@/types/dashboard'
+import { createIdempotencyKey } from '@/utils/idempotency'
+import { extractErrorMessage } from '@/utils/http'
+
+export async function getTasks() {
+  try {
+    const response = await http.get<ApiResponse<TaskItem[]>>('/task/get')
+    return response.data.data ?? []
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '任务加载失败，请稍后重试'))
+  }
+}
+
+export async function createTask(payload: TaskCreatePayload) {
+  try {
+    const response = await http.post<ApiResponse<TaskCreateResult>>('/task/create', payload, {
+      headers: {
+        'X-Idempotency-Key': createIdempotencyKey('task-create'),
+      },
+    })
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '创建任务失败，请稍后重试'))
+  }
+}
+
+export async function completeTask(taskId: number) {
+  try {
+    const response = await http.put<ApiResponse<TaskMutationResult>>(
+      '/task/complete',
+      { task_id: taskId },
+      {
+        headers: {
+          'X-Idempotency-Key': createIdempotencyKey('task-complete'),
+        },
+      },
+    )
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '更新任务状态失败，请稍后重试'))
+  }
+}
+
+export async function undoCompleteTask(taskId: number) {
+  try {
+    const response = await http.put<ApiResponse<TaskMutationResult>>(
+      '/task/undo-complete',
+      { task_id: taskId },
+      {
+        headers: {
+          'X-Idempotency-Key': createIdempotencyKey('task-undo'),
+        },
+      },
+    )
+    return response.data.data
+  } catch (error) {
+    throw new Error(extractErrorMessage(error, '恢复任务失败，请稍后重试'))
+  }
+}
--- a/frontend/src/components/dashboard/AssistantPanel.vue
+++ b/frontend/src/components/dashboard/AssistantPanel.vue
--- a/frontend/src/components/dashboard/TaskQuadrantCard.vue
+++ b/frontend/src/components/dashboard/TaskQuadrantCard.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { TaskItem } from '@/types/dashboard'
+import { formatDeadline } from '@/utils/date'
+
+const props = defineProps<{
+  title: string
+  caption: string
+  count: number
+  tone: 'danger' | 'primary' | 'warning' | 'slate'
+  tasks: TaskItem[]
+  emptyText: string
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [task: TaskItem]
+}>()
+
+const visibleTasks = computed(() => props.tasks.slice(0, 4))
+</script>
+
+<template>
+  <section class="quadrant-card" :class="`quadrant-card--${tone}`">
+    <header class="quadrant-card__header">
+      <div>
+        <p class="quadrant-card__eyebrow">{{ caption }}</p>
+        <h3>{{ title }}</h3>
+      </div>
+      <span class="quadrant-card__count">{{ count }}项</span>
+    </header>
+
+    <div v-if="loading" class="quadrant-card__skeleton">
+      <div v-for="index in 3" :key="index" class="quadrant-card__skeleton-item" />
+    </div>
+
+    <div v-else-if="visibleTasks.length === 0" class="quadrant-card__empty">
+      {{ emptyText }}
+    </div>
+
+    <div v-else class="quadrant-list">
+      <button
+        v-for="task in visibleTasks"
+        :key="task.id"
+        type="button"
+        class="quadrant-item"
+        :class="{ 'quadrant-item--completed': task.is_completed }"
+        @click="emit('toggle', task)"
+      >
+        <span class="quadrant-item__check">
+          {{ task.is_completed ? '✓' : '' }}
+        </span>
+        <span class="quadrant-item__content">
+          <strong>{{ task.title }}</strong>
+          <small>{{ formatDeadline(task.deadline) }}</small>
+        </span>
+        <span class="quadrant-item__status">
+          {{ task.is_completed ? '已完成' : '待处理' }}
+        </span>
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.quadrant-card {
+  border-radius: 28px;
+  padding: 22px;
+  border: 1px solid rgba(17, 24, 39, 0.07);
+  min-height: 260px;
+}
+
+.quadrant-card--danger {
+  background: linear-gradient(180deg, #fff1f2 0%, #fff7f7 100%);
+}
+
+.quadrant-card--primary {
+  background: linear-gradient(180deg, #eef7ff 0%, #f7fbff 100%);
+}
+
+.quadrant-card--warning {
+  background: linear-gradient(180deg, #fff8df 0%, #fffdf1 100%);
+}
+
+.quadrant-card--slate {
+  background: linear-gradient(180deg, #f2f5fb 0%, #f8fafc 100%);
+}
+
+.quadrant-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.quadrant-card__eyebrow {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 700;
+  color: rgba(32, 50, 79, 0.72);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.quadrant-card h3 {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.quadrant-card__count {
+  min-width: 64px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.78);
+  font-size: 13px;
+  font-weight: 700;
+  color: #39506f;
+  text-align: center;
+}
+
+.quadrant-list {
+  display: grid;
+  gap: 12px;
+}
+
+.quadrant-item,
+.quadrant-card__skeleton-item {
+  border-radius: 18px;
+  min-height: 72px;
+}
+
+.quadrant-item {
+  width: 100%;
+  border: 1px solid rgba(17, 24, 39, 0.06);
+  background: rgba(255, 255, 255, 0.92);
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  padding: 14px 16px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease,
+    border-color 0.18s ease;
+}
+
+.quadrant-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
+  border-color: rgba(37, 99, 235, 0.16);
+}
+
+.quadrant-item--completed {
+  opacity: 0.82;
+}
+
+.quadrant-item__check {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  background: #f8fafc;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #2c8d57;
+  font-weight: 800;
+}
+
+.quadrant-item__content {
+  min-width: 0;
+}
+
+.quadrant-item__content strong,
+.quadrant-item__content small {
+  display: block;
+}
+
+.quadrant-item__content strong {
+  font-size: 16px;
+  color: #122033;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.quadrant-item--completed .quadrant-item__content strong {
+  color: #96a0af;
+  text-decoration: line-through;
+}
+
+.quadrant-item__content small {
+  margin-top: 6px;
+  color: #768396;
+}
+
+.quadrant-item__status {
+  font-size: 13px;
+  color: #8090a5;
+  white-space: nowrap;
+}
+
+.quadrant-card__empty {
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b97a7;
+  font-size: 16px;
+}
+
+.quadrant-card__skeleton {
+  display: grid;
+  gap: 12px;
+}
+
+.quadrant-card__skeleton-item {
+  background: linear-gradient(90deg, rgba(230, 236, 244, 0.8), rgba(245, 248, 252, 1), rgba(230, 236, 244, 0.8));
+  background-size: 200% 100%;
+  animation: quadrant-shimmer 1.4s linear infinite;
+}
+
+@keyframes quadrant-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>
--- a/frontend/src/components/dashboard/TodayTimeline.vue
+++ b/frontend/src/components/dashboard/TodayTimeline.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { TodayEvent } from '@/types/dashboard'
+import { formatTimeRange } from '@/utils/date'
+
+interface TimelineSlot {
+  order: number
+  kind: 'event' | 'pause'
+  label: string
+  timeText?: string
+}
+
+const props = defineProps<{
+  events: TodayEvent[]
+  loading?: boolean
+}>()
+
+const slotBlueprint: TimelineSlot[] = [
+  { order: 1, kind: 'event', label: '上午' },
+  { order: 2, kind: 'event', label: '上午' },
+  { order: 3, kind: 'pause', label: '午休', timeText: '11:55 - 14:00' },
+  { order: 4, kind: 'event', label: '下午' },
+  { order: 5, kind: 'event', label: '下午' },
+  { order: 6, kind: 'pause', label: '晚餐', timeText: '17:55 - 19:00' },
+  { order: 7, kind: 'event', label: '晚间' },
+]
+
+const eventMap = computed(() => {
+  const map = new Map<number, TodayEvent>()
+  for (const event of props.events ?? []) {
+    map.set(event.order, event)
+  }
+  return map
+})
+
+function resolveCardTone(event: TodayEvent) {
+  if (event.type === 'course') {
+    return 'course'
+  }
+
+  const orderToneMap: Record<number, string> = {
+    1: 'sky',
+    2: 'violet',
+    4: 'mint',
+    5: 'amber',
+    7: 'cyan',
+  }
+
+  return orderToneMap[event.order] ?? 'neutral'
+}
+</script>
+
+<template>
+  <section class="timeline-card glass-panel">
+    <header class="timeline-card__header">
+      <div>
+        <p class="timeline-card__eyebrow">今日总览</p>
+        <h2>今日日程一览</h2>
+      </div>
+      <span class="timeline-card__caption">按时间顺序展示课程与任务安排</span>
+    </header>
+
+    <div v-if="loading" class="timeline-skeleton">
+      <div v-for="index in 7" :key="index" class="timeline-skeleton__item" />
+    </div>
+
+    <div v-else class="timeline-grid">
+      <template v-for="slot in slotBlueprint" :key="slot.order">
+        <article
+          v-if="eventMap.has(slot.order)"
+          class="timeline-event"
+          :class="`timeline-event--${resolveCardTone(eventMap.get(slot.order)!)}`"
+        >
+          <span class="timeline-event__time">
+            {{
+              formatTimeRange(
+                eventMap.get(slot.order)?.start_time,
+                eventMap.get(slot.order)?.end_time,
+              )
+            }}
+          </span>
+          <strong class="timeline-event__title">{{ eventMap.get(slot.order)?.name }}</strong>
+          <span class="timeline-event__location">
+            {{ eventMap.get(slot.order)?.location || '休息时间' }}
+          </span>
+        </article>
+
+        <article v-else class="timeline-placeholder timeline-placeholder--pause">
+          <span class="timeline-placeholder__time">{{ slot.timeText }}</span>
+          <strong class="timeline-placeholder__title">{{ slot.label }}</strong>
+          <span class="timeline-placeholder__hint">为中段留出缓冲与恢复时间</span>
+        </article>
+      </template>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.timeline-card {
+  border-radius: 28px;
+  padding: 22px 22px 20px;
+  border: 1px solid rgba(17, 24, 39, 0.08);
+}
+
+.timeline-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: flex-end;
+  margin-bottom: 18px;
+}
+
+.timeline-card__eyebrow {
+  margin: 0 0 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2a6fdf;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.timeline-card h2 {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.timeline-card__caption {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.timeline-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(132px, 1fr));
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.timeline-event,
+.timeline-placeholder,
+.timeline-skeleton__item {
+  min-height: 124px;
+  border-radius: 20px;
+}
+
+.timeline-event {
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid rgba(17, 24, 39, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.timeline-event::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  opacity: 0.92;
+}
+
+.timeline-event__time {
+  font-size: 12px;
+  font-weight: 700;
+  color: #295b9b;
+}
+
+.timeline-event__title {
+  margin-top: 12px;
+  font-size: 15px;
+  line-height: 1.35;
+  color: #172033;
+}
+
+.timeline-event__location {
+  margin-top: 14px;
+  font-size: 12px;
+  color: #5f6980;
+}
+
+.timeline-event--course {
+  background: linear-gradient(180deg, #ecf4ff 0%, #e4eefc 100%);
+}
+
+.timeline-event--course::before {
+  background: #1669c1;
+}
+
+.timeline-event--violet {
+  background: linear-gradient(180deg, #eef0ff 0%, #e6e8ff 100%);
+}
+
+.timeline-event--violet::before {
+  background: #676cff;
+}
+
+.timeline-event--mint {
+  background: linear-gradient(180deg, #e6f8f1 0%, #def5ec 100%);
+}
+
+.timeline-event--mint::before {
+  background: #27b482;
+}
+
+.timeline-event--amber {
+  background: linear-gradient(180deg, #fff5db 0%, #fff0cb 100%);
+}
+
+.timeline-event--amber::before {
+  background: #f59e0b;
+}
+
+.timeline-event--cyan {
+  background: linear-gradient(180deg, #e1f7ff 0%, #d6f2fb 100%);
+}
+
+.timeline-event--cyan::before {
+  background: #57b8ea;
+}
+
+.timeline-placeholder {
+  border: 1px dashed rgba(120, 144, 171, 0.28);
+  background: rgba(255, 255, 255, 0.55);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 8px;
+  padding: 14px 12px;
+  text-align: center;
+  color: #8a96a8;
+}
+
+.timeline-placeholder--pause {
+  background: linear-gradient(180deg, #f5f9ff 0%, #eef4fb 100%);
+}
+
+.timeline-placeholder__time {
+  font-size: 12px;
+  font-weight: 700;
+  color: #4c6c97;
+}
+
+.timeline-placeholder__title {
+  font-size: 16px;
+  color: #22324b;
+}
+
+.timeline-placeholder__hint {
+  font-size: 12px;
+  color: #7a889d;
+  line-height: 1.5;
+}
+
+.timeline-skeleton {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(132px, 1fr));
+  gap: 12px;
+}
+
+.timeline-skeleton__item {
+  background: linear-gradient(90deg, rgba(230, 236, 244, 0.8), rgba(245, 248, 252, 1), rgba(230, 236, 244, 0.8));
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s linear infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>
--- a/frontend/src/env.d.ts
+++ b/frontend/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,16 @@
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,56 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import { useAuthStore } from '@/stores/auth'
+import AuthView from '@/views/AuthView.vue'
+import DashboardView from '@/views/DashboardView.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      redirect: '/dashboard',
+    },
+    {
+      path: '/auth',
+      name: 'auth',
+      component: AuthView,
+      meta: {
+        guestOnly: true,
+      },
+    },
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: DashboardView,
+      meta: {
+        requiresAuth: true,
+      },
+    },
+  ],
+})
+
+router.beforeEach((to) => {
+  const authStore = useAuthStore()
+
+  // 1. 进入受保护页面前，必须先确认 access token 是否存在。
+  // 2. 当前阶段只做“是否登录”的前端兜底，不在这里做 token 过期解析。
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    return {
+      name: 'auth',
+      query: {
+        redirect: to.fullPath,
+      },
+    }
+  }
+
+  if (to.meta.guestOnly && authStore.isAuthenticated) {
+    return {
+      name: 'dashboard',
+    }
+  }
+
+  return true
+})
+
+export default router
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -0,0 +1,87 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import type { LoginPayload, RegisterPayload, TokenPair } from '@/types/api'
+import { login as loginApi, logout as logoutApi, register as registerApi } from '@/api/auth'
+
+const ACCESS_TOKEN_KEY = 'smartflow_access_token'
+const REFRESH_TOKEN_KEY = 'smartflow_refresh_token'
+const LAST_USERNAME_KEY = 'smartflow_last_username'
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessToken = ref(localStorage.getItem(ACCESS_TOKEN_KEY) ?? '')
+  const refreshToken = ref(localStorage.getItem(REFRESH_TOKEN_KEY) ?? '')
+  const lastUsername = ref(localStorage.getItem(LAST_USERNAME_KEY) ?? '')
+
+  const isAuthenticated = computed(() => accessToken.value.trim().length > 0)
+
+  // applyTokenPair 只负责把后端返回的新 token 对落到内存和本地存储。
+  // 职责边界：
+  // 1. 负责登录成功、刷新成功后的统一持久化。
+  // 2. 不负责调用接口，避免把“网络失败”和“本地状态写入”耦合在一起。
+  // 3. 返回值为空；调用方若需要错误处理，应在接口层完成。
+  function applyTokenPair(tokens: TokenPair) {
+    accessToken.value = tokens.access_token
+    refreshToken.value = tokens.refresh_token
+    localStorage.setItem(ACCESS_TOKEN_KEY, tokens.access_token)
+    localStorage.setItem(REFRESH_TOKEN_KEY, tokens.refresh_token)
+  }
+
+  function persistLastUsername(username: string) {
+    lastUsername.value = username
+    localStorage.setItem(LAST_USERNAME_KEY, username)
+  }
+
+  // clearSession 只清本地登录态，不调用后端接口。
+  // 职责边界：
+  // 1. 负责在 refresh 失败、401 兜底、主动退出后统一清理本地状态。
+  // 2. 不负责页面跳转；跳转由调用方按场景决定，避免 store 硬绑定 UI。
+  // 3. lastUsername 保留，用于下次登录时回填用户名，减少重复输入。
+  function clearSession() {
+    accessToken.value = ''
+    refreshToken.value = ''
+    localStorage.removeItem(ACCESS_TOKEN_KEY)
+    localStorage.removeItem(REFRESH_TOKEN_KEY)
+  }
+
+  async function login(payload: LoginPayload) {
+    const tokens = await loginApi(payload)
+    applyTokenPair(tokens)
+    persistLastUsername(payload.username)
+    return tokens
+  }
+
+  async function register(payload: RegisterPayload) {
+    const result = await registerApi(payload)
+    persistLastUsername(payload.username)
+    return result
+  }
+
+  // logout 负责“尽力通知后端 + 一定清理本地状态”。
+  // 职责边界：
+  // 1. 先请求后端注销当前 access token，让对应 jti 进入黑名单。
+  // 2. 不保证后端一定成功；即使接口失败，也必须清理本地状态，避免前端假在线。
+  // 3. 返回值语义：接口成功时返回后端响应；失败时向上抛错，但本地状态已被清空。
+  async function logout() {
+    try {
+      const result = await logoutApi()
+      clearSession()
+      return result
+    } catch (error) {
+      clearSession()
+      throw error
+    }
+  }
+
+  return {
+    accessToken,
+    refreshToken,
+    lastUsername,
+    isAuthenticated,
+    applyTokenPair,
+    clearSession,
+    login,
+    register,
+    logout,
+  }
+})
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -0,0 +1,68 @@
+:root {
+  color-scheme: light;
+  font-family:
+    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #1f2937;
+  background:
+    radial-gradient(circle at top left, rgba(119, 198, 255, 0.18), transparent 28%),
+    radial-gradient(circle at right center, rgba(89, 208, 160, 0.16), transparent 24%),
+    linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --page-max-width: 1200px;
+  --surface: rgba(255, 255, 255, 0.92);
+  --surface-strong: #ffffff;
+  --surface-muted: #f5f7fb;
+  --line-soft: rgba(15, 23, 42, 0.08);
+  --text-main: #111827;
+  --text-secondary: #5b6475;
+  --brand: #2684ff;
+  --brand-strong: #1d6fe0;
+  --success: #11a36a;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --shadow-soft: 0 18px 45px rgba(31, 41, 55, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.page-shell {
+  width: min(var(--page-max-width), calc(100vw - 32px));
+  margin: 0 auto;
+}
+
+.glass-panel {
+  background: var(--surface);
+  border: 1px solid var(--line-soft);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(10px);
+}
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -0,0 +1,34 @@
+export interface ApiResponse<T> {
+  status: string
+  info: string
+  data: T
+}
+
+export interface PlainResponse {
+  status: string
+  info: string
+}
+
+export interface TokenPair {
+  access_token: string
+  refresh_token: string
+}
+
+export interface LoginPayload {
+  username: string
+  password: string
+}
+
+export interface RegisterPayload {
+  username: string
+  phone_number: string
+  password: string
+}
+
+export interface RegisterResult {
+  id: number
+}
+
+export interface RefreshTokenPayload {
+  old_refresh_token: string
+}
--- a/frontend/src/types/dashboard.ts
+++ b/frontend/src/types/dashboard.ts
@@ -0,0 +1,99 @@
+export interface TaskItem {
+  id: number
+  user_id: number
+  title: string
+  priority_group: number
+  status: string
+  deadline: string
+  is_completed: boolean
+}
+
+export interface TaskCreatePayload {
+  title: string
+  priority_group: number
+  deadline_at?: string | null
+}
+
+export interface TaskCreateResult {
+  id: number
+  title: string
+  priority_group: number
+  deadline_at?: string | null
+  status: string
+  created_at: string
+}
+
+export interface TaskMutationResult {
+  task_id: number
+  is_completed: boolean
+  already_completed?: boolean
+  status: string
+}
+
+export interface TaskBrief {
+  id: number
+  name: string
+  type: string
+}
+
+export interface TodayEvent {
+  id: number
+  order: number
+  name: string
+  start_time: string
+  end_time: string
+  location: string
+  type: string
+  span: number
+  embedded_task_info?: TaskBrief
+}
+
+export interface TodaySchedule {
+  day_of_week: number
+  week: number
+  events: TodayEvent[]
+}
+
+export interface ConversationListItem {
+  conversation_id: string
+  title: string
+  has_title: boolean
+  message_count: number
+  last_message_at?: string | null
+  status: string
+  created_at?: string | null
+}
+
+export interface ConversationListResponse {
+  list: ConversationListItem[]
+  page: number
+  page_size: number
+  limit: number
+  total: number
+  has_more: boolean
+}
+
+export interface ConversationMeta {
+  conversation_id: string
+  title: string
+  has_title: boolean
+  message_count: number
+  last_message_at?: string | null
+  status: string
+}
+
+export interface AssistantMessage {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  createdAt: string
+  reasoning?: string
+}
+
+export interface ChatStreamRequest {
+  conversation_id?: string
+  message: string
+  model?: string
+  thinking?: boolean
+  extra?: Record<string, unknown>
+}
--- a/frontend/src/utils/date.ts
+++ b/frontend/src/utils/date.ts
@@ -0,0 +1,71 @@
+const weekdayMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+
+function toDate(value?: string | null) {
+  if (!value) {
+    return null
+  }
+
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+export function formatHeaderDate(date = new Date()) {
+  const year = date.getFullYear()
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  return `${year}年${month}月${day}日 ${weekdayMap[date.getDay()]}`
+}
+
+export function formatTimeRange(start?: string | null, end?: string | null) {
+  if (!start || !end) {
+    return '待安排'
+  }
+  return `${start} - ${end}`
+}
+
+export function formatDeadline(deadline?: string | null) {
+  const date = toDate(deadline)
+  if (!date) {
+    return '未设置截止时间'
+  }
+
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  const hour = `${date.getHours()}`.padStart(2, '0')
+  const minute = `${date.getMinutes()}`.padStart(2, '0')
+  return `${month}-${day} ${hour}:${minute}`
+}
+
+export function formatConversationTime(value?: string | null) {
+  const date = toDate(value)
+  if (!date) {
+    return '刚刚'
+  }
+
+  const now = new Date()
+  const sameDay =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+
+  const hour = `${date.getHours()}`.padStart(2, '0')
+  const minute = `${date.getMinutes()}`.padStart(2, '0')
+  if (sameDay) {
+    return `${hour}:${minute}`
+  }
+
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  return `${month}-${day} ${hour}:${minute}`
+}
+
+export function formatMessageTime(value?: string | null) {
+  const date = toDate(value)
+  if (!date) {
+    return ''
+  }
+
+  const hour = `${date.getHours()}`.padStart(2, '0')
+  const minute = `${date.getMinutes()}`.padStart(2, '0')
+  return `${hour}:${minute}`
+}
--- a/frontend/src/utils/http.ts
+++ b/frontend/src/utils/http.ts
@@ -0,0 +1,20 @@
+import axios from 'axios'
+
+interface ErrorBody {
+  info?: string
+  message?: string
+}
+
+export function extractErrorMessage(error: unknown, fallback: string) {
+  if (axios.isAxiosError<ErrorBody>(error)) {
+    const responseInfo = error.response?.data?.info
+    const responseMessage = error.response?.data?.message
+    return responseInfo || responseMessage || error.message || fallback
+  }
+
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return fallback
+}
--- a/frontend/src/utils/idempotency.ts
+++ b/frontend/src/utils/idempotency.ts
@@ -0,0 +1,11 @@
+// createIdempotencyKey 负责为写接口生成幂等键。
+// 职责边界：
+// 1. 只负责生成前端唯一键，不负责持久化或重试策略。
+// 2. 优先使用浏览器原生 randomUUID，缺失时退回时间戳方案。
+export function createIdempotencyKey(prefix = 'smartflow') {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return `${prefix}-${crypto.randomUUID()}`
+  }
+
+  return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
--- a/frontend/src/utils/markdown.ts
+++ b/frontend/src/utils/markdown.ts
@@ -0,0 +1,151 @@
+function escapeHtml(input: string) {
+  return input
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function parseInlineMarkdown(input: string) {
+  const inlineCodeBlocks: string[] = []
+  let content = escapeHtml(input)
+
+  content = content.replace(/`([^`]+)`/g, (_, code: string) => {
+    const token = `@@INLINE_CODE_${inlineCodeBlocks.length}@@`
+    inlineCodeBlocks.push(`<code>${escapeHtml(code)}</code>`)
+    return token
+  })
+
+  content = content.replace(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+    (_, label: string, link: string) =>
+      `<a href="${escapeHtml(link)}" target="_blank" rel="noreferrer noopener">${label}</a>`,
+  )
+
+  content = content.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+  content = content.replace(/\*([^*]+)\*/g, '<em>$1</em>')
+  content = content.replace(/~~([^~]+)~~/g, '<del>$1</del>')
+
+  return content.replace(/@@INLINE_CODE_(\d+)@@/g, (_, index: string) => inlineCodeBlocks[Number(index)] ?? '')
+}
+
+// renderMarkdown 负责把常见 Markdown 文本安全转换为可展示 HTML。
+// 职责边界：
+// 1. 负责处理标题、列表、引用、代码块、链接、粗斜体等常见场景。
+// 2. 不追求完整 CommonMark 兼容，只覆盖聊天消息里最常见的展示需求。
+// 3. 所有原始文本都会先做 HTML 转义，避免把模型输出直接当成原生 HTML 注入页面。
+export function renderMarkdown(input: string) {
+  const normalized = (input || '').replace(/\r\n?/g, '\n').trim()
+  if (!normalized) {
+    return ''
+  }
+
+  const fencedBlocks: string[] = []
+  let source = normalized.replace(/```([a-zA-Z0-9_-]+)?\n?([\s\S]*?)```/g, (_, language: string, code: string) => {
+    const token = `@@FENCED_BLOCK_${fencedBlocks.length}@@`
+    const languageClass = language ? ` language-${escapeHtml(language)}` : ''
+    fencedBlocks.push(
+      `<pre class="md-pre"><code class="md-code${languageClass}">${escapeHtml(code.trimEnd())}</code></pre>`,
+    )
+    return token
+  })
+
+  const lines = source.split('\n')
+  const htmlParts: string[] = []
+  let unorderedItems: string[] = []
+  let orderedItems: string[] = []
+  let quoteLines: string[] = []
+  let paragraphLines: string[] = []
+
+  function flushParagraph() {
+    if (paragraphLines.length === 0) {
+      return
+    }
+    htmlParts.push(`<p>${parseInlineMarkdown(paragraphLines.join('<br />'))}</p>`)
+    paragraphLines = []
+  }
+
+  function flushUnorderedList() {
+    if (unorderedItems.length === 0) {
+      return
+    }
+    htmlParts.push(`<ul>${unorderedItems.map((item) => `<li>${parseInlineMarkdown(item)}</li>`).join('')}</ul>`)
+    unorderedItems = []
+  }
+
+  function flushOrderedList() {
+    if (orderedItems.length === 0) {
+      return
+    }
+    htmlParts.push(`<ol>${orderedItems.map((item) => `<li>${parseInlineMarkdown(item)}</li>`).join('')}</ol>`)
+    orderedItems = []
+  }
+
+  function flushBlockquote() {
+    if (quoteLines.length === 0) {
+      return
+    }
+    htmlParts.push(`<blockquote>${quoteLines.map((line) => `<p>${parseInlineMarkdown(line)}</p>`).join('')}</blockquote>`)
+    quoteLines = []
+  }
+
+  function flushAllBlocks() {
+    flushParagraph()
+    flushUnorderedList()
+    flushOrderedList()
+    flushBlockquote()
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+
+    if (!trimmed) {
+      flushAllBlocks()
+      continue
+    }
+
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.*)$/)
+    if (headingMatch) {
+      flushAllBlocks()
+      const level = headingMatch[1].length
+      htmlParts.push(`<h${level}>${parseInlineMarkdown(headingMatch[2])}</h${level}>`)
+      continue
+    }
+
+    const unorderedMatch = trimmed.match(/^[-*+]\s+(.*)$/)
+    if (unorderedMatch) {
+      flushParagraph()
+      flushOrderedList()
+      flushBlockquote()
+      unorderedItems.push(unorderedMatch[1])
+      continue
+    }
+
+    const orderedMatch = trimmed.match(/^\d+\.\s+(.*)$/)
+    if (orderedMatch) {
+      flushParagraph()
+      flushUnorderedList()
+      flushBlockquote()
+      orderedItems.push(orderedMatch[1])
+      continue
+    }
+
+    const quoteMatch = trimmed.match(/^>\s?(.*)$/)
+    if (quoteMatch) {
+      flushParagraph()
+      flushUnorderedList()
+      flushOrderedList()
+      quoteLines.push(quoteMatch[1])
+      continue
+    }
+
+    paragraphLines.push(trimmed)
+  }
+
+  flushAllBlocks()
+
+  return htmlParts
+    .join('')
+    .replace(/@@FENCED_BLOCK_(\d+)@@/g, (_, index: string) => fencedBlocks[Number(index)] ?? '')
+}
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+
+import { useAuthStore } from '@/stores/auth'
+
+type PanelName = 'login' | 'register'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+
+const activePanel = ref<PanelName>('login')
+const loginLoading = ref(false)
+const registerLoading = ref(false)
+
+const loginForm = reactive({
+  username: authStore.lastUsername,
+  password: '',
+})
+
+const registerForm = reactive({
+  username: '',
+  phone_number: '',
+  password: '',
+  confirmPassword: '',
+})
+
+const redirectPath = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+
+async function submitLogin() {
+  if (!loginForm.username.trim() || !loginForm.password.trim()) {
+    ElMessage.warning('请填写用户名和密码')
+    return
+  }
+
+  loginLoading.value = true
+  try {
+    await authStore.login({
+      username: loginForm.username.trim(),
+      password: loginForm.password,
+    })
+    ElMessage.success('登录成功，欢迎回来')
+    await router.push(redirectPath)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '登录失败')
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+async function submitRegister() {
+  if (!registerForm.username.trim() || !registerForm.phone_number.trim() || !registerForm.password.trim()) {
+    ElMessage.warning('请先把注册信息填写完整')
+    return
+  }
+
+  if (!/^1\d{10}$/.test(registerForm.phone_number.trim())) {
+    ElMessage.warning('请输入正确的 11 位手机号')
+    return
+  }
+
+  if (registerForm.password.length < 6) {
+    ElMessage.warning('密码至少需要 6 位')
+    return
+  }
+
+  if (registerForm.password !== registerForm.confirmPassword) {
+    ElMessage.warning('两次输入的密码不一致')
+    return
+  }
+
+  registerLoading.value = true
+  try {
+    await authStore.register({
+      username: registerForm.username.trim(),
+      phone_number: registerForm.phone_number.trim(),
+      password: registerForm.password,
+    })
+    loginForm.username = registerForm.username.trim()
+    loginForm.password = ''
+    registerForm.password = ''
+    registerForm.confirmPassword = ''
+    activePanel.value = 'login'
+    ElMessage.success('注册成功，请使用新账号登录')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '注册失败')
+  } finally {
+    registerLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="auth-page">
+    <div class="page-shell auth-layout">
+      <section class="auth-brand glass-panel">
+        <div class="auth-brand__badge">SmartFlow</div>
+        <h1>把任务、课程与智能规划放在同一个工作台里。</h1>
+        <p>
+          这一版先把登录链路跑通。后面我们会在这个基础上继续接任务管理、课表总览和智能体排程能力。
+        </p>
+
+        <div class="auth-brand__points">
+          <article>
+            <strong>扁平化界面</strong>
+            <span>去掉多余装饰，把信息层级讲清楚。</span>
+          </article>
+          <article>
+            <strong>登录态托管</strong>
+            <span>统一管理 access token，后续接业务页面更轻松。</span>
+          </article>
+          <article>
+            <strong>可持续扩展</strong>
+            <span>路由、状态、接口层已经拆开，后面直接加页面即可。</span>
+          </article>
+        </div>
+      </section>
+
+      <section class="auth-card glass-panel">
+        <div class="auth-card__header">
+          <div>
+            <span class="auth-card__eyebrow">欢迎使用</span>
+            <h2>账号入口</h2>
+          </div>
+          <p>先登录，再进入示例工作台。</p>
+        </div>
+
+        <el-tabs v-model="activePanel" stretch class="auth-tabs">
+          <el-tab-pane label="登录" name="login">
+            <el-form label-position="top" class="auth-form" @submit.prevent="submitLogin">
+              <el-form-item label="用户名">
+                <el-input
+                  v-model="loginForm.username"
+                  placeholder="请输入用户名"
+                  size="large"
+                  clearable
+                />
+              </el-form-item>
+
+              <el-form-item label="密码">
+                <el-input
+                  v-model="loginForm.password"
+                  type="password"
+                  placeholder="请输入密码"
+                  size="large"
+                  show-password
+                />
+              </el-form-item>
+
+              <el-button
+                type="primary"
+                size="large"
+                class="auth-submit"
+                :loading="loginLoading"
+                @click="submitLogin"
+              >
+                登录并进入示例页
+              </el-button>
+            </el-form>
+          </el-tab-pane>
+
+          <el-tab-pane label="注册" name="register">
+            <el-form label-position="top" class="auth-form" @submit.prevent="submitRegister">
+              <el-form-item label="用户名">
+                <el-input
+                  v-model="registerForm.username"
+                  placeholder="例如：losita"
+                  size="large"
+                  clearable
+                />
+              </el-form-item>
+
+              <el-form-item label="手机号">
+                <el-input
+                  v-model="registerForm.phone_number"
+                  placeholder="请输入 11 位手机号"
+                  size="large"
+                  clearable
+                />
+              </el-form-item>
+
+              <el-form-item label="密码">
+                <el-input
+                  v-model="registerForm.password"
+                  type="password"
+                  placeholder="建议至少 6 位"
+                  size="large"
+                  show-password
+                />
+              </el-form-item>
+
+              <el-form-item label="确认密码">
+                <el-input
+                  v-model="registerForm.confirmPassword"
+                  type="password"
+                  placeholder="请再次输入密码"
+                  size="large"
+                  show-password
+                />
+              </el-form-item>
+
+              <el-button
+                type="primary"
+                size="large"
+                class="auth-submit"
+                :loading="registerLoading"
+                @click="submitRegister"
+              >
+                创建账号
+              </el-button>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+      </section>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 32px 0;
+}
+
+.auth-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 460px);
+  gap: 24px;
+  align-items: stretch;
+}
+
+.auth-brand,
+.auth-card {
+  border-radius: 28px;
+}
+
+.auth-brand {
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 680px;
+}
+
+.auth-brand__badge {
+  width: fit-content;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: #e8f2ff;
+  color: #1f5fbf;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.auth-brand h1 {
+  margin: 24px 0 16px;
+  max-width: 10em;
+  font-size: clamp(36px, 5vw, 56px);
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+  color: var(--text-main);
+}
+
+.auth-brand p {
+  margin: 0;
+  max-width: 38rem;
+  color: var(--text-secondary);
+  font-size: 16px;
+}
+
+.auth-brand__points {
+  display: grid;
+  gap: 14px;
+  margin-top: 36px;
+}
+
+.auth-brand__points article {
+  padding: 18px 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(17, 24, 39, 0.06);
+}
+
+.auth-brand__points strong {
+  display: block;
+  font-size: 16px;
+  margin-bottom: 6px;
+  color: var(--text-main);
+}
+
+.auth-brand__points span {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.auth-card {
+  padding: 30px 30px 24px;
+  min-height: 680px;
+}
+
+.auth-card__header {
+  margin-bottom: 18px;
+}
+
+.auth-card__header h2 {
+  margin: 8px 0 8px;
+  font-size: 30px;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+.auth-card__header p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.auth-card__eyebrow {
+  color: #1f5fbf;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.auth-tabs {
+  --el-color-primary: var(--brand);
+}
+
+.auth-form {
+  margin-top: 16px;
+}
+
+.auth-submit {
+  width: 100%;
+  margin-top: 10px;
+  height: 48px;
+  border-radius: 14px;
+  font-weight: 600;
+  border: none;
+  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
+}
+
+@media (max-width: 1080px) {
+  .auth-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-brand,
+  .auth-card {
+    min-height: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .auth-page {
+    padding: 16px 0;
+  }
+
+  .auth-brand,
+  .auth-card {
+    padding: 22px;
+    border-radius: 22px;
+  }
+}
+</style>
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -0,0 +1,806 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+import AssistantPanel from '@/components/dashboard/AssistantPanel.vue'
+import TaskQuadrantCard from '@/components/dashboard/TaskQuadrantCard.vue'
+import TodayTimeline from '@/components/dashboard/TodayTimeline.vue'
+import { completeTask, createTask, getTasks, undoCompleteTask } from '@/api/task'
+import { getTodaySchedule } from '@/api/schedule'
+import { useAuthStore } from '@/stores/auth'
+import type { TaskItem, TodayEvent } from '@/types/dashboard'
+import { formatHeaderDate } from '@/utils/date'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const pageLoading = ref(false)
+const taskLoading = ref(false)
+const scheduleLoading = ref(false)
+const createTaskLoading = ref(false)
+const logoutLoading = ref(false)
+const createTaskDialogVisible = ref(false)
+const dashboardLayoutRef = ref<HTMLElement | null>(null)
+
+const tasks = ref<TaskItem[]>([])
+const todayEvents = ref<TodayEvent[]>([])
+
+const sidebarWidth = ref(78)
+const assistantWidth = ref(460)
+
+const taskForm = reactive<{
+  title: string
+  priority_group: number
+  deadline_at: Date | null
+}>({
+  title: '',
+  priority_group: 2,
+  deadline_at: null,
+})
+
+const sidebarItems = [
+  { key: 'home', label: '总览', short: '总' },
+  { key: 'task', label: '任务', short: '任' },
+  { key: 'calendar', label: '日程', short: '程' },
+  { key: 'ai', label: '助手', short: 'AI' },
+]
+
+const quadrantOrder = [1, 2, 3, 4] as const
+
+const quadrantMeta: Record<
+  (typeof quadrantOrder)[number],
+  { title: string; caption: string; tone: 'danger' | 'primary' | 'warning' | 'slate'; emptyText: string }
+> = {
+  1: {
+    title: '重要且紧急',
+    caption: '优先处理',
+    tone: 'danger',
+    emptyText: '暂无需要立刻推进的事项',
+  },
+  2: {
+    title: '重要不紧急',
+    caption: '持续推进',
+    tone: 'primary',
+    emptyText: '这里适合放长期投入的关键任务',
+  },
+  3: {
+    title: '简单不重要',
+    caption: '顺手完成',
+    tone: 'warning',
+    emptyText: '暂无高频但低价值的小任务',
+  },
+  4: {
+    title: '不简单不重要',
+    caption: '谨慎投入',
+    tone: 'slate',
+    emptyText: '这里可以放暂缓事项或后续再评估的任务',
+  },
+}
+
+const pageTitleDate = computed(() => formatHeaderDate(new Date()))
+const greetingName = computed(() => authStore.lastUsername || 'SmartFlow 用户')
+const layoutStyle = computed(() => ({
+  '--dashboard-sidebar-width': `${sidebarWidth.value}px`,
+  '--dashboard-assistant-width': `${assistantWidth.value}px`,
+}))
+
+const groupedTasks = computed(() => {
+  const groups: Record<number, TaskItem[]> = {
+    1: [],
+    2: [],
+    3: [],
+    4: [],
+  }
+
+  for (const task of tasks.value) {
+    if (groups[task.priority_group]) {
+      groups[task.priority_group].push(task)
+    }
+  }
+
+  for (const key of Object.keys(groups)) {
+    groups[Number(key)].sort((left, right) => {
+      if (left.is_completed !== right.is_completed) {
+        return left.is_completed ? 1 : -1
+      }
+      return left.id - right.id
+    })
+  }
+
+  return groups
+})
+
+async function loadTasksData() {
+  taskLoading.value = true
+  try {
+    tasks.value = await getTasks()
+  } catch (error) {
+    ElMessage.warning(error instanceof Error ? error.message : '任务加载失败')
+  } finally {
+    taskLoading.value = false
+  }
+}
+
+async function loadScheduleData() {
+  scheduleLoading.value = true
+  try {
+    const schedules = await getTodaySchedule()
+    todayEvents.value = schedules.flatMap((item) => item.events).sort((left, right) => left.order - right.order)
+  } catch (error) {
+    ElMessage.warning(error instanceof Error ? error.message : '今日日程加载失败')
+  } finally {
+    scheduleLoading.value = false
+  }
+}
+
+async function loadDashboardData() {
+  pageLoading.value = true
+  await Promise.allSettled([loadTasksData(), loadScheduleData()])
+  pageLoading.value = false
+}
+
+async function handleTaskToggle(task: TaskItem) {
+  try {
+    if (task.is_completed) {
+      const result = await undoCompleteTask(task.id)
+      task.is_completed = result.is_completed
+      task.status = result.status
+      ElMessage.success('任务已恢复为未完成')
+      return
+    }
+
+    const result = await completeTask(task.id)
+    task.is_completed = result.is_completed
+    task.status = result.status
+    ElMessage.success(result.already_completed ? '任务已经是完成状态' : '任务已标记为完成')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '任务更新失败')
+  }
+}
+
+function openCreateTaskDialog() {
+  taskForm.title = ''
+  taskForm.priority_group = 2
+  taskForm.deadline_at = null
+  createTaskDialogVisible.value = true
+}
+
+async function handleCreateTask() {
+  if (!taskForm.title.trim()) {
+    ElMessage.warning('请先填写任务标题')
+    return
+  }
+
+  createTaskLoading.value = true
+  try {
+    const created = await createTask({
+      title: taskForm.title.trim(),
+      priority_group: taskForm.priority_group,
+      deadline_at: taskForm.deadline_at ? taskForm.deadline_at.toISOString() : null,
+    })
+
+    tasks.value.unshift({
+      id: created.id,
+      user_id: 0,
+      title: created.title,
+      priority_group: created.priority_group,
+      status: created.status,
+      deadline: created.deadline_at ?? '',
+      is_completed: false,
+    })
+
+    createTaskDialogVisible.value = false
+    ElMessage.success('任务已添加')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '创建任务失败')
+  } finally {
+    createTaskLoading.value = false
+  }
+}
+
+async function handleLogout() {
+  logoutLoading.value = true
+
+  try {
+    await authStore.logout()
+    ElMessage.success('已安全退出登录')
+  } catch (error) {
+    ElMessage.warning(error instanceof Error ? `${error.message}，本地登录态已清除` : '退出接口异常，本地登录态已清除')
+  } finally {
+    logoutLoading.value = false
+    await router.push('/auth')
+  }
+}
+
+function handleCourseImportEntry() {
+  ElMessage.info('课表导入入口已预留，下一步我可以继续把导入流程页接出来')
+}
+
+function clampSidebarWidth(nextWidth: number) {
+  return Math.min(110, Math.max(68, nextWidth))
+}
+
+function clampAssistantWidth(nextWidth: number) {
+  return Math.min(680, Math.max(380, nextWidth))
+}
+
+function startResize(type: 'sidebar' | 'assistant', event: PointerEvent) {
+  const layout = dashboardLayoutRef.value
+  if (!layout || window.innerWidth <= 1380) {
+    return
+  }
+
+  const rect = layout.getBoundingClientRect()
+  const startX = event.clientX
+  const startSidebarWidth = sidebarWidth.value
+  const startAssistantWidth = assistantWidth.value
+
+  // 1. 拖拽时先记录容器宽度和起始位置，避免每次 move 都重复读布局造成抖动。
+  // 2. 中间主区域需要保留最小宽度，防止用户把左右面板拖到挤爆内容区。
+  // 3. 结束时统一解绑事件，避免指针松开后仍残留拖拽状态。
+  const handlePointerMove = (moveEvent: PointerEvent) => {
+    const deltaX = moveEvent.clientX - startX
+    const splitterTotalWidth = 20
+    const minMainWidth = 760
+
+    if (type === 'sidebar') {
+      const nextSidebarWidth = clampSidebarWidth(startSidebarWidth + deltaX)
+      const maxSidebarWidth = rect.width - assistantWidth.value - splitterTotalWidth - minMainWidth
+      sidebarWidth.value = Math.min(nextSidebarWidth, Math.max(68, maxSidebarWidth))
+      return
+    }
+
+    const nextAssistantWidth = clampAssistantWidth(startAssistantWidth - deltaX)
+    const maxAssistantWidth = rect.width - sidebarWidth.value - splitterTotalWidth - minMainWidth
+    assistantWidth.value = Math.min(nextAssistantWidth, Math.max(380, maxAssistantWidth))
+  }
+
+  const stopResize = () => {
+    window.removeEventListener('pointermove', handlePointerMove)
+    window.removeEventListener('pointerup', stopResize)
+    document.body.classList.remove('dashboard-resizing')
+  }
+
+  document.body.classList.add('dashboard-resizing')
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', stopResize)
+}
+
+onMounted(async () => {
+  await loadDashboardData()
+})
+
+onBeforeUnmount(() => {
+  document.body.classList.remove('dashboard-resizing')
+})
+</script>
+
+<template>
+  <main class="dashboard-page">
+    <div ref="dashboardLayoutRef" class="dashboard-layout" :style="layoutStyle">
+      <aside class="dashboard-sidebar">
+        <div class="dashboard-sidebar__brand">S</div>
+        <nav class="dashboard-sidebar__nav">
+          <button
+            v-for="item in sidebarItems"
+            :key="item.key"
+            type="button"
+            class="dashboard-sidebar__nav-item"
+            :class="{ 'dashboard-sidebar__nav-item--active': item.key === 'home' }"
+          >
+            <span>{{ item.short }}</span>
+            <small>{{ item.label }}</small>
+          </button>
+        </nav>
+        <button type="button" class="dashboard-sidebar__settings">设</button>
+      </aside>
+
+      <div
+        class="dashboard-splitter"
+        role="separator"
+        aria-label="调整侧边导航宽度"
+        @pointerdown.prevent="startResize('sidebar', $event)"
+      >
+        <span class="dashboard-splitter__line" />
+      </div>
+
+      <section class="dashboard-main">
+        <header class="dashboard-topbar glass-panel">
+          <div>
+            <div class="dashboard-topbar__brandline">
+              <strong>AI 智慧日程系统</strong>
+              <span>{{ pageTitleDate }}</span>
+            </div>
+          </div>
+
+          <div class="dashboard-topbar__actions">
+            <button
+              type="button"
+              class="dashboard-topbar__logout"
+              :disabled="logoutLoading"
+              @click="handleLogout"
+            >
+              {{ logoutLoading ? '退出中…' : '登出' }}
+            </button>
+            <div class="dashboard-topbar__profile">
+              <strong>{{ greetingName }}</strong>
+              <span>{{ greetingName.slice(0, 1).toUpperCase() }}</span>
+            </div>
+          </div>
+        </header>
+
+        <div class="dashboard-content page-shell">
+          <TodayTimeline :events="todayEvents" :loading="scheduleLoading || pageLoading" />
+
+          <div class="dashboard-actions">
+            <button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">
+              添加任务
+            </button>
+          </div>
+
+          <section class="dashboard-quadrants">
+            <TaskQuadrantCard
+              v-for="group in quadrantOrder"
+              :key="group"
+              :title="quadrantMeta[group].title"
+              :caption="quadrantMeta[group].caption"
+              :tone="quadrantMeta[group].tone"
+              :empty-text="quadrantMeta[group].emptyText"
+              :count="groupedTasks[group].length"
+              :tasks="groupedTasks[group]"
+              :loading="taskLoading || pageLoading"
+              @toggle="handleTaskToggle"
+            />
+          </section>
+
+          <section class="dashboard-import glass-panel">
+            <div class="dashboard-import__content">
+              <p class="dashboard-import__eyebrow">课程导入</p>
+              <h2>导入课表</h2>
+              <p>导入课表后，可以在安排日程时避开上课时间，后续我会继续把导入流程页接完整。</p>
+              <button type="button" class="dashboard-import__button" @click="handleCourseImportEntry">
+                开始导入
+              </button>
+            </div>
+            <div class="dashboard-import__shape">
+              <span class="dashboard-import__shape-ring" />
+              <span class="dashboard-import__shape-core" />
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <div
+        class="dashboard-splitter"
+        role="separator"
+        aria-label="调整 AI 助手宽度"
+        @pointerdown.prevent="startResize('assistant', $event)"
+      >
+        <span class="dashboard-splitter__line" />
+      </div>
+
+      <AssistantPanel class="dashboard-assistant" />
+    </div>
+
+    <el-dialog
+      v-model="createTaskDialogVisible"
+      title="添加任务"
+      width="460px"
+      align-center
+      class="dashboard-dialog"
+    >
+      <el-form label-position="top">
+        <el-form-item label="任务标题">
+          <el-input v-model="taskForm.title" maxlength="255" placeholder="例如：完成数据库复习" />
+        </el-form-item>
+
+        <el-form-item label="优先级象限">
+          <el-select v-model="taskForm.priority_group" class="dashboard-dialog__select">
+            <el-option :value="1" label="1 - 重要且紧急" />
+            <el-option :value="2" label="2 - 重要不紧急" />
+            <el-option :value="3" label="3 - 简单不重要" />
+            <el-option :value="4" label="4 - 不简单不重要" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="截止时间">
+          <el-date-picker
+            v-model="taskForm.deadline_at"
+            type="datetime"
+            placeholder="可选，不设置也可以"
+            class="dashboard-dialog__select"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="createTaskDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="createTaskLoading" @click="handleCreateTask">保存任务</el-button>
+      </template>
+    </el-dialog>
+  </main>
+</template>
+
+<style scoped>
+.dashboard-page {
+  height: 100vh;
+  padding: 10px;
+  overflow: hidden;
+}
+
+.dashboard-layout {
+  --dashboard-sidebar-width: 78px;
+  --dashboard-assistant-width: 460px;
+  height: calc(100vh - 20px);
+  display: grid;
+  grid-template-columns:
+    var(--dashboard-sidebar-width)
+    10px
+    minmax(0, 1fr)
+    10px
+    var(--dashboard-assistant-width);
+  gap: 8px;
+  align-items: stretch;
+}
+
+.dashboard-sidebar {
+  height: 100%;
+  border-radius: 26px;
+  background: linear-gradient(180deg, #165ca8 0%, #104d8f 100%);
+  padding: 16px 12px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 16px;
+}
+
+.dashboard-sidebar__brand,
+.dashboard-sidebar__settings {
+  width: 50px;
+  height: 50px;
+  border: none;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  font-weight: 800;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dashboard-sidebar__nav {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.dashboard-sidebar__nav-item {
+  width: 54px;
+  border: none;
+  border-radius: 16px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.74);
+  padding: 10px 8px;
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.dashboard-sidebar__nav-item span {
+  width: 32px;
+  height: 32px;
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.08);
+  font-weight: 700;
+}
+
+.dashboard-sidebar__nav-item small {
+  font-size: 10px;
+}
+
+.dashboard-sidebar__nav-item--active {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+
+.dashboard-splitter {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.dashboard-splitter__line {
+  width: 4px;
+  height: 64px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(145, 163, 188, 0.24), rgba(88, 124, 177, 0.4), rgba(145, 163, 188, 0.24));
+  transition:
+    background-color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.dashboard-splitter:hover .dashboard-splitter__line {
+  transform: scaleX(1.15);
+  background: linear-gradient(180deg, rgba(104, 140, 194, 0.34), rgba(42, 108, 214, 0.62), rgba(104, 140, 194, 0.34));
+}
+
+.dashboard-main {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 10px;
+}
+
+.dashboard-topbar {
+  border-radius: 24px;
+  padding: 18px 22px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid rgba(17, 24, 39, 0.08);
+}
+
+.dashboard-topbar__brandline {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.dashboard-topbar__brandline strong {
+  font-size: 18px;
+  color: #14233a;
+}
+
+.dashboard-topbar__brandline span {
+  color: #677588;
+  font-size: 13px;
+}
+
+.dashboard-topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.dashboard-topbar__logout {
+  min-width: 88px;
+  height: 38px;
+  border-radius: 13px;
+  border: 1px solid rgba(28, 98, 205, 0.22);
+  background: #f9fbff;
+  color: #1d63cf;
+  cursor: pointer;
+}
+
+.dashboard-topbar__profile {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dashboard-topbar__profile strong {
+  font-size: 13px;
+}
+
+.dashboard-topbar__profile span {
+  width: 38px;
+  height: 38px;
+  border-radius: 999px;
+  background: #eef3fb;
+  color: #314156;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+}
+
+.dashboard-content {
+  width: 100%;
+  max-width: none;
+  min-height: 0;
+  display: grid;
+  gap: 14px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.dashboard-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dashboard-actions__primary {
+  height: 42px;
+  padding: 0 20px;
+  border: none;
+  border-radius: 15px;
+  background: linear-gradient(180deg, #246ff1 0%, #1a5dc8 100%);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.dashboard-quadrants {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.dashboard-import {
+  border-radius: 26px;
+  padding: 28px 30px;
+  min-height: 240px;
+  background: linear-gradient(135deg, #0f5ca9 0%, #0b4b89 100%);
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-import__content {
+  position: relative;
+  z-index: 1;
+  max-width: 460px;
+}
+
+.dashboard-import__eyebrow {
+  margin: 0 0 8px;
+  opacity: 0.76;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.dashboard-import h2 {
+  margin: 0;
+  font-size: 38px;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+}
+
+.dashboard-import p {
+  margin: 12px 0 22px;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.7;
+  font-size: 14px;
+}
+
+.dashboard-import__button {
+  height: 46px;
+  padding: 0 20px;
+  border: none;
+  border-radius: 15px;
+  background: #fff;
+  color: #0d55a0;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.dashboard-import__shape {
+  position: relative;
+  width: 250px;
+  min-width: 250px;
+  display: grid;
+  place-items: center;
+}
+
+.dashboard-import__shape-ring,
+.dashboard-import__shape-core {
+  position: absolute;
+  border-radius: 999px;
+  border: 14px solid rgba(255, 255, 255, 0.92);
+}
+
+.dashboard-import__shape-ring {
+  width: 168px;
+  height: 168px;
+  right: 22px;
+  bottom: 10px;
+}
+
+.dashboard-import__shape-core {
+  width: 96px;
+  height: 96px;
+  right: 0;
+  bottom: 2px;
+}
+
+.dashboard-assistant {
+  min-height: 0;
+  height: 100%;
+  align-self: stretch;
+}
+
+.dashboard-dialog :deep(.el-dialog) {
+  border-radius: 24px;
+}
+
+.dashboard-dialog__select {
+  width: 100%;
+}
+
+@media (max-width: 1640px) {
+  .dashboard-layout {
+    --dashboard-assistant-width: 430px;
+  }
+}
+
+@media (max-width: 1380px) {
+  .dashboard-layout {
+    height: calc(100vh - 20px);
+    grid-template-columns: 78px minmax(0, 1fr);
+  }
+
+  .dashboard-splitter {
+    display: none;
+  }
+
+  .dashboard-assistant {
+    grid-column: 2;
+    height: auto;
+  }
+}
+
+@media (max-width: 980px) {
+  .dashboard-layout {
+    height: auto;
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-sidebar {
+    height: auto;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: none;
+    align-items: center;
+  }
+
+  .dashboard-sidebar__nav {
+    grid-auto-flow: column;
+    justify-content: center;
+  }
+
+  .dashboard-main,
+  .dashboard-assistant {
+    grid-column: auto;
+  }
+
+  .dashboard-quadrants {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-import {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 720px) {
+  .dashboard-page {
+    height: auto;
+    padding: 8px;
+    overflow: visible;
+  }
+
+  .dashboard-topbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .dashboard-topbar__actions,
+  .dashboard-topbar__brandline {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+</style>
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,25 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+// 1. 开发环境把 /api 代理到本地 Go 服务，避免前端先处理跨域。
+// 2. 这里只负责联调体验，不负责生产环境网关配置。
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 5173,
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+})