From 9ba3362fea185230e8786c94720de12569bc2a28 Mon Sep 17 00:00:00 2001
From: XiaoShu Yang <2024302111357@whu.edu.cn>
Date: Tue, 31 Mar 2026 22:23:15 +0800
Subject: [PATCH 01/27] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/main.css          |  53 +++-
 frontend/src/views/home/Home.vue      | 409 +++++++++++++++++++++++++-
 frontend/src/views/login/Login.vue    | 215 ++++++++++++--
 frontend/src/views/login/Register.vue | 244 +++++++++++++--
 frontend/vite.config.js               |   6 +
 5 files changed, 855 insertions(+), 72 deletions(-)

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 9de88d5..e0274f3 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -9,5 +9,56 @@ body,
 #app {
   width: 100%;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333;
+  background-color: #f7f8fa;
+}
+
+:root {
+  --primary-green: #4caf50;
+  --primary-green-light: #e8f5e9;
+  --primary-blue: #42a5f5;
+  --primary-blue-light: #e3f2fd;
+  --primary-orange: #f5a623;
+  --gradient-orange: linear-gradient(135deg, #f7c948 0%, #f5a623 100%);
+  --gradient-orange-light: linear-gradient(135deg, #fbe9a0 0%, #f5c842 100%);
+  --bg-card: #ffffff;
+  --bg-page: #f7f8fa;
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --text-placeholder: #c0c0c0;
+  --border-light: #f0f0f0;
+  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
+  --shadow-soft: 0 1px 6px rgba(0, 0, 0, 0.04);
+  --radius-lg: 16px;
+  --radius-md: 12px;
+  --radius-sm: 8px;
+  --radius-full: 9999px;
+}
+
+input, button, textarea {
+  font-family: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  border: none;
+  cursor: pointer;
+  background: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
diff --git a/frontend/src/views/home/Home.vue b/frontend/src/views/home/Home.vue
index df049e7..7300bee 100644
--- a/frontend/src/views/home/Home.vue
+++ b/frontend/src/views/home/Home.vue
@@ -1,30 +1,415 @@
 <template>
-  <div class="home-container">
-    <h1>欢迎来到 StudyingSpace</h1>
-    <p>个人学习空间</p>
+  <div class="page-container">
+    <header class="page-header">
+      <div class="header-left">
+        <div class="avatar">📚</div>
+        <div class="header-info">
+          <h1 class="greeting">StudyingSpace</h1>
+          <p class="subtitle">个人学习空间</p>
+        </div>
+      </div>
+      <button class="icon-btn" @click="goLogin">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+          <circle cx="12" cy="7" r="4"/>
+        </svg>
+      </button>
+    </header>
+
+    <!-- 服务状态 -->
+    <section class="section">
+      <div class="section-title">
+        <span class="title-bar green"></span>
+        <h2>服务状态</h2>
+      </div>
+      <div class="status-card">
+        <div class="status-icon" :class="statusClass">
+          <svg v-if="status === 'connected'" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4caf50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+            <polyline points="22 4 12 14.01 9 11.01"/>
+          </svg>
+          <svg v-else-if="status === 'loading'" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <polyline points="12 6 12 12 16 14"/>
+          </svg>
+          <svg v-else width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#e53935" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="15" y1="9" x2="9" y2="15"/>
+            <line x1="9" y1="9" x2="15" y2="15"/>
+          </svg>
+        </div>
+        <div class="status-info">
+          <span class="status-label">后端服务</span>
+          <span class="status-text" :class="statusClass">{{ statusText }}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- API 测试 -->
+    <section class="section">
+      <div class="section-title">
+        <span class="title-bar blue"></span>
+        <h2>接口测试</h2>
+      </div>
+      <div class="api-card">
+        <div class="api-endpoint">
+          <span class="method-tag">GET</span>
+          <span class="endpoint-path">/api/hello</span>
+        </div>
+        <button class="action-btn primary" @click="callHello">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="5 3 19 12 5 21 5 3"/>
+          </svg>
+          <span>发送请求</span>
+        </button>
+        <div v-if="apiResponse" class="response-card">
+          <span class="response-label">响应结果</span>
+          <pre class="response-body">{{ apiResponse }}</pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- API 文档入口 -->
+    <section class="section">
+      <div class="section-title">
+        <span class="title-bar orange"></span>
+        <h2>API 文档</h2>
+      </div>
+      <div class="doc-card" @click="openSwagger">
+        <div class="doc-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <line x1="16" y1="13" x2="8" y2="13"/>
+            <line x1="16" y1="17" x2="8" y2="17"/>
+            <polyline points="10 9 9 9 8 9"/>
+          </svg>
+        </div>
+        <div class="doc-info">
+          <span class="doc-title">Swagger UI</span>
+          <span class="doc-desc">查看和调试后端 API 接口文档</span>
+        </div>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6"/>
+        </svg>
+      </div>
+    </section>
+
+    <div class="bottom-spacer"></div>
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import request from '@/utils/request.js'
+
+const router = useRouter()
+
+const status = ref('loading')
+const statusText = ref('检测中...')
+const apiResponse = ref(null)
+
+const checkBackend = async () => {
+  status.value = 'loading'
+  statusText.value = '检测中...'
+  try {
+    await request.get('/hello')
+    status.value = 'connected'
+    statusText.value = '已连接'
+  } catch {
+    status.value = 'error'
+    statusText.value = '无法连接'
+  }
+}
+
+const callHello = async () => {
+  apiResponse.value = null
+  try {
+    const res = await request.get('/hello')
+    apiResponse.value = JSON.stringify(res, null, 2)
+  } catch (err) {
+    apiResponse.value = JSON.stringify({ error: '请求失败，请确认后端是否启动' }, null, 2)
+  }
+}
+
+const openSwagger = () => {
+  window.open('http://localhost:8080/swagger-ui.html', '_blank')
+}
+
+const goLogin = () => {
+  router.push('/login')
+}
+
+onMounted(() => {
+  checkBackend()
+})
 </script>
 
 <style scoped>
-.home-container {
-  width: 100%;
-  height: 100%;
+.page-container {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 20px 16px;
+  min-height: 100vh;
+  background: var(--bg-page);
+}
+
+.page-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: var(--primary-green-light);
+  display: flex;
+  align-items: center;
   justify-content: center;
+  font-size: 22px;
+}
+
+.greeting {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background: var(--bg-card);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-soft);
+  transition: transform 0.15s;
+}
+
+.icon-btn:active {
+  transform: scale(0.93);
+}
+
+/* Sections */
+.section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.title-bar {
+  width: 4px;
+  height: 20px;
+  border-radius: 2px;
+}
+
+.title-bar.green { background: var(--primary-green); }
+.title-bar.blue { background: var(--primary-blue); }
+.title-bar.orange { background: var(--primary-orange); }
+
+.section-title h2 {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Status Card */
+.status-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  display: flex;
   align-items: center;
+  gap: 16px;
+  box-shadow: var(--shadow-card);
 }
 
-h1 {
-  font-size: 32px;
+.status-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.status-icon.connected { background: var(--primary-green-light); }
+.status-icon.loading { background: #fff8e1; }
+.status-icon.error { background: #ffebee; }
+
+.status-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.status-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.status-text {
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.status-text.connected { color: #4caf50; }
+.status-text.loading { color: #f5a623; }
+.status-text.error { color: #e53935; }
+
+/* API Card */
+.api-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  box-shadow: var(--shadow-card);
+}
+
+.api-endpoint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   margin-bottom: 16px;
+  padding: 12px 14px;
+  background: var(--bg-page);
+  border-radius: var(--radius-sm);
+}
+
+.method-tag {
+  background: var(--primary-green);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 4px;
+  letter-spacing: 0.5px;
+}
+
+.endpoint-path {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  border-radius: var(--radius-full);
+  font-size: 16px;
+  font-weight: 600;
+  padding: 14px 0;
+  transition: all 0.2s;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+}
+
+.action-btn.primary {
+  background: var(--gradient-orange);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
+}
+
+.response-card {
+  margin-top: 16px;
+  padding: 14px;
+  background: var(--bg-page);
+  border-radius: var(--radius-sm);
+}
+
+.response-label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.response-body {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* Doc Card */
+.doc-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  box-shadow: var(--shadow-card);
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.doc-card:active {
+  transform: scale(0.98);
+}
+
+.doc-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: #fff8e1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.doc-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.doc-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.doc-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
 }
 
-p {
-  font-size: 18px;
-  color: #666;
+.bottom-spacer {
+  height: 40px;
 }
 </style>
diff --git a/frontend/src/views/login/Login.vue b/frontend/src/views/login/Login.vue
index 64ba85d..8e181a1 100644
--- a/frontend/src/views/login/Login.vue
+++ b/frontend/src/views/login/Login.vue
@@ -1,35 +1,80 @@
 <template>
-  <div class="login-container">
-    <div class="login-box">
-      <h2>登录</h2>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="用户名">
-          <el-input v-model="form.username" />
-        </el-form-item>
-        <el-form-item label="密码">
-          <el-input v-model="form.password" type="password" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleLogin">登录</el-button>
-          <el-button @click="goRegister">去注册</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="auth-container">
+    <div class="auth-card">
+      <div class="auth-header">
+        <div class="auth-logo">📚</div>
+        <h1>StudyingSpace</h1>
+        <p>登录你的学习空间</p>
+      </div>
+
+      <form class="auth-form" @submit.prevent="handleLogin">
+        <div class="input-group">
+          <div class="input-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+          </div>
+          <input
+            v-model="form.username"
+            type="text"
+            placeholder="请输入用户名"
+            autocomplete="username"
+          />
+        </div>
+
+        <div class="input-group">
+          <div class="input-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+            </svg>
+          </div>
+          <input
+            v-model="form.password"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="请输入密码"
+            autocomplete="current-password"
+          />
+          <button type="button" class="toggle-pwd" @click="showPassword = !showPassword">
+            <svg v-if="!showPassword" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+              <line x1="1" y1="1" x2="23" y2="23"/>
+            </svg>
+          </button>
+        </div>
+
+        <button type="submit" class="submit-btn primary">
+          登录
+        </button>
+      </form>
+
+      <div class="auth-footer">
+        <span>还没有账号？</span>
+        <button class="link-btn" @click="goRegister">立即注册</button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const form = ref({
+const showPassword = ref(false)
+
+const form = reactive({
   username: '',
   password: ''
 })
 
 const handleLogin = () => {
-  console.log('login', form.value)
+  console.log('login', form)
 }
 
 const goRegister = () => {
@@ -38,25 +83,139 @@ const goRegister = () => {
 </script>
 
 <style scoped>
-.login-container {
+.auth-container {
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--bg-page);
+  padding: 20px;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 40px 28px 32px;
+  box-shadow: var(--shadow-card);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 36px;
+}
+
+.auth-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-lg);
+  background: var(--primary-green-light);
   display: flex;
+  align-items: center;
   justify-content: center;
+  font-size: 32px;
+  margin: 0 auto 16px;
+}
+
+.auth-header h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.auth-header p {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-group {
+  display: flex;
   align-items: center;
-  background: #f5f5f5;
+  background: var(--bg-page);
+  border-radius: var(--radius-md);
+  padding: 0 14px;
+  height: 50px;
+  border: 1.5px solid transparent;
+  transition: border-color 0.2s;
 }
 
-.login-box {
-  width: 400px;
-  padding: 40px;
+.input-group:focus-within {
+  border-color: var(--primary-green);
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-h2 {
+.input-icon {
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.input-group input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: var(--text-primary);
+  height: 100%;
+}
+
+.input-group input::placeholder {
+  color: var(--text-placeholder);
+}
+
+.toggle-pwd {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 50px;
+  border-radius: var(--radius-full);
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 8px;
+  transition: all 0.2s;
+}
+
+.submit-btn:active {
+  transform: scale(0.98);
+}
+
+.submit-btn.primary {
+  background: var(--gradient-orange);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
+}
+
+.auth-footer {
   text-align: center;
-  margin-bottom: 30px;
+  margin-top: 24px;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.link-btn {
+  color: var(--primary-green);
+  font-weight: 600;
+  font-size: 14px;
+  margin-left: 4px;
+}
+
+.link-btn:active {
+  opacity: 0.7;
 }
 </style>
diff --git a/frontend/src/views/login/Register.vue b/frontend/src/views/login/Register.vue
index dcbf736..4126748 100644
--- a/frontend/src/views/login/Register.vue
+++ b/frontend/src/views/login/Register.vue
@@ -1,39 +1,107 @@
 <template>
-  <div class="register-container">
-    <div class="register-box">
-      <h2>注册</h2>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="用户名">
-          <el-input v-model="form.username" />
-        </el-form-item>
-        <el-form-item label="密码">
-          <el-input v-model="form.password" type="password" />
-        </el-form-item>
-        <el-form-item label="确认密码">
-          <el-input v-model="form.confirmPassword" type="password" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleRegister">注册</el-button>
-          <el-button @click="goLogin">去登录</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="auth-container">
+    <div class="auth-card">
+      <div class="auth-header">
+        <div class="auth-logo">📚</div>
+        <h1>创建账号</h1>
+        <p>加入 StudyingSpace，开启学习之旅</p>
+      </div>
+
+      <form class="auth-form" @submit.prevent="handleRegister">
+        <div class="input-group">
+          <div class="input-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+          </div>
+          <input
+            v-model="form.username"
+            type="text"
+            placeholder="请输入用户名"
+            autocomplete="username"
+          />
+        </div>
+
+        <div class="input-group">
+          <div class="input-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+            </svg>
+          </div>
+          <input
+            v-model="form.password"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="请输入密码"
+            autocomplete="new-password"
+          />
+          <button type="button" class="toggle-pwd" @click="showPassword = !showPassword">
+            <svg v-if="!showPassword" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+              <line x1="1" y1="1" x2="23" y2="23"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="input-group">
+          <div class="input-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+              <polyline points="22 4 12 14.01 9 11.01"/>
+            </svg>
+          </div>
+          <input
+            v-model="form.confirmPassword"
+            :type="showConfirm ? 'text' : 'password'"
+            placeholder="请确认密码"
+            autocomplete="new-password"
+          />
+          <button type="button" class="toggle-pwd" @click="showConfirm = !showConfirm">
+            <svg v-if="!showConfirm" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+              <line x1="1" y1="1" x2="23" y2="23"/>
+            </svg>
+          </button>
+        </div>
+
+        <button type="submit" class="submit-btn primary">
+          注册
+        </button>
+      </form>
+
+      <div class="auth-footer">
+        <span>已有账号？</span>
+        <button class="link-btn" @click="goLogin">立即登录</button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const form = ref({
+const showPassword = ref(false)
+const showConfirm = ref(false)
+
+const form = reactive({
   username: '',
   password: '',
   confirmPassword: ''
 })
 
 const handleRegister = () => {
-  console.log('register', form.value)
+  console.log('register', form)
 }
 
 const goLogin = () => {
@@ -42,25 +110,139 @@ const goLogin = () => {
 </script>
 
 <style scoped>
-.register-container {
+.auth-container {
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #f5f5f5;
+  background: var(--bg-page);
+  padding: 20px;
 }
 
-.register-box {
-  width: 400px;
-  padding: 40px;
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  padding: 40px 28px 32px;
+  box-shadow: var(--shadow-card);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 36px;
+}
+
+.auth-logo {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-lg);
+  background: var(--primary-green-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  margin: 0 auto 16px;
+}
+
+.auth-header h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.auth-header p {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  background: var(--bg-page);
+  border-radius: var(--radius-md);
+  padding: 0 14px;
+  height: 50px;
+  border: 1.5px solid transparent;
+  transition: border-color 0.2s;
+}
+
+.input-group:focus-within {
+  border-color: var(--primary-green);
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
-h2 {
+.input-icon {
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.input-group input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: var(--text-primary);
+  height: 100%;
+}
+
+.input-group input::placeholder {
+  color: var(--text-placeholder);
+}
+
+.toggle-pwd {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 50px;
+  border-radius: var(--radius-full);
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 8px;
+  transition: all 0.2s;
+}
+
+.submit-btn:active {
+  transform: scale(0.98);
+}
+
+.submit-btn.primary {
+  background: var(--gradient-orange);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
+}
+
+.auth-footer {
   text-align: center;
-  margin-bottom: 30px;
+  margin-top: 24px;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.link-btn {
+  color: var(--primary-green);
+  font-weight: 600;
+  font-size: 14px;
+  margin-left: 4px;
+}
+
+.link-btn:active {
+  opacity: 0.7;
 }
 </style>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 0a848c6..28f30f3 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
   server: {
     proxy: {
       '/api': {
-- 
2.34.1


From 9d04a782e144fcc147473ea4ae8ea795ff61836c Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 16:02:35 +0800
Subject: [PATCH 02/27] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/backend-build.yml | 32 +++++++++++++++++++++++++++++
 backend/README.md                   |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/backend-build.yml

diff --git a/.github/workflows/backend-build.yml b/.github/workflows/backend-build.yml
new file mode 100644
index 0000000..207d590
--- /dev/null
+++ b/.github/workflows/backend-build.yml
@@ -0,0 +1,32 @@
+name: Backend CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Set up JDK 21
+      uses: actions/setup-java@v4
+      with:
+        java-version: '21'
+        distribution: 'temurin'
+        cache: 'maven'
+
+    - name: Build with Maven
+      working-directory: backend
+      run: mvn clean package
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: studyingspace-backend
+        path: backend/target/*.jar
diff --git a/backend/README.md b/backend/README.md
index bfc8831..79cb230 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -132,7 +132,7 @@ Authorization: Bearer <token>
 ```
 
 ## 📝 开发计划
-
+- [x] 登录注册功能
 - [ ] 用户认证模块
 - [ ] 每日打卡模块
 - [ ] 笔记导入导出模块
-- 
2.34.1


From f783b2e195272288640cef9608daa8c80e1cb068 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 16:09:01 +0800
Subject: [PATCH 03/27] Update CI workflow branches for testing

---
 .github/workflows/backend-build.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/backend-build.yml b/.github/workflows/backend-build.yml
index 207d590..60cd1a4 100644
--- a/.github/workflows/backend-build.yml
+++ b/.github/workflows/backend-build.yml
@@ -2,9 +2,9 @@ name: Backend CI
 
 on:
   push:
-    branches: [ main, master ]
+    branches: [ main, TEST ]
   pull_request:
-    branches: [ main, master ]
+    branches: [ main, TEST ]
 
 jobs:
   build:
-- 
2.34.1


From 27696a8c7135a97938388880e383648a9dcbdb83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=9C=E6=B5=A9=E6=BA=90?= <2722623475@qq.com>
Date: Wed, 1 Apr 2026 17:41:45 +0800
Subject: [PATCH 04/27] frontend_dhy

---
 frontend/index.html                   |   4 +
 frontend/package.json                 |   4 +-
 frontend/src/views/home/Home.vue      | 523 +++++++++-----------------
 frontend/src/views/login/Login.vue    | 388 +++++++++++++++----
 frontend/src/views/login/Register.vue | 410 ++++++++++++--------
 5 files changed, 758 insertions(+), 571 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 8f2cb37..dd744f2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,10 @@
   </head>
   <body>
     <div id="app"></div>
+    <!-- CDN fallback for GSAP and Rough.js when local install is unavailable -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.0/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.0/dist/ScrollTrigger.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.0/bundled/rough.min.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index 8ef59a5..3cbc823 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,9 @@
     "vue-router": "^4.2.5",
     "pinia": "^2.1.7",
     "axios": "^1.6.2",
-    "element-plus": "^2.4.4"
+    "element-plus": "^2.4.4",
+    "roughjs": "^4.5.0",
+    "gsap": "^3.12.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
diff --git a/frontend/src/views/home/Home.vue b/frontend/src/views/home/Home.vue
index 7300bee..f9831e7 100644
--- a/frontend/src/views/home/Home.vue
+++ b/frontend/src/views/home/Home.vue
@@ -1,415 +1,254 @@
-<template>
-  <div class="page-container">
-    <header class="page-header">
-      <div class="header-left">
-        <div class="avatar">📚</div>
-        <div class="header-info">
-          <h1 class="greeting">StudyingSpace</h1>
-          <p class="subtitle">个人学习空间</p>
-        </div>
+<template>
+  <div class="home-layout">
+    <nav class="glass-nav">
+      <div class="logo">MindSpace.</div>
+      <div class="nav-links">
+        <span class="nav-btn-text">探索</span>
+        <button class="nav-btn-primary" @click="handleLogout">退出登录</button>
       </div>
-      <button class="icon-btn" @click="goLogin">
-        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-          <circle cx="12" cy="7" r="4"/>
-        </svg>
-      </button>
-    </header>
+    </nav>
 
-    <!-- 服务状态 -->
-    <section class="section">
-      <div class="section-title">
-        <span class="title-bar green"></span>
-        <h2>服务状态</h2>
+    <main class="hero-section">
+      <div class="vibe-badge">
+        <span class="pulse-dot"></span> 智能番茄钟已就绪
       </div>
-      <div class="status-card">
-        <div class="status-icon" :class="statusClass">
-          <svg v-if="status === 'connected'" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4caf50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-            <polyline points="22 4 12 14.01 9 11.01"/>
-          </svg>
-          <svg v-else-if="status === 'loading'" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"/>
-            <polyline points="12 6 12 12 16 14"/>
-          </svg>
-          <svg v-else width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#e53935" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="15" y1="9" x2="9" y2="15"/>
-            <line x1="9" y1="9" x2="15" y2="15"/>
-          </svg>
-        </div>
-        <div class="status-info">
-          <span class="status-label">后端服务</span>
-          <span class="status-text" :class="statusClass">{{ statusText }}</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- API 测试 -->
-    <section class="section">
-      <div class="section-title">
-        <span class="title-bar blue"></span>
-        <h2>接口测试</h2>
-      </div>
-      <div class="api-card">
-        <div class="api-endpoint">
-          <span class="method-tag">GET</span>
-          <span class="endpoint-path">/api/hello</span>
-        </div>
-        <button class="action-btn primary" @click="callHello">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polygon points="5 3 19 12 5 21 5 3"/>
-          </svg>
-          <span>发送请求</span>
-        </button>
-        <div v-if="apiResponse" class="response-card">
-          <span class="response-label">响应结果</span>
-          <pre class="response-body">{{ apiResponse }}</pre>
-        </div>
-      </div>
-    </section>
-
-    <!-- API 文档入口 -->
-    <section class="section">
-      <div class="section-title">
-        <span class="title-bar orange"></span>
-        <h2>API 文档</h2>
-      </div>
-      <div class="doc-card" @click="openSwagger">
-        <div class="doc-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-            <polyline points="14 2 14 8 20 8"/>
-            <line x1="16" y1="13" x2="8" y2="13"/>
-            <line x1="16" y1="17" x2="8" y2="17"/>
-            <polyline points="10 9 9 9 8 9"/>
-          </svg>
-        </div>
-        <div class="doc-info">
-          <span class="doc-title">Swagger UI</span>
-          <span class="doc-desc">查看和调试后端 API 接口文档</span>
-        </div>
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="9 18 15 12 9 6"/>
-        </svg>
-      </div>
-    </section>
-
-    <div class="bottom-spacer"></div>
+      
+      <h1 class="hero-title">
+        沉浸式算法学习，<br />
+        <span class="text-gradient">由 RAG 智能驱动。</span>
+      </h1>
+      
+      <p class="hero-subtitle">
+        专属思维空间。融合 AI 深度问答与专注番茄钟，为你打造无干扰的极致自律环境。
+      </p>
+      
+      <button class="btn-large" @click="startLearning">开始专注</button>
+
+      <section class="feature-grid">
+        <article class="feature-card">
+          <h3>实时学习建议</h3>
+          <p>根据你当前进度，智能推荐最优题目与复盘策略。</p>
+        </article>
+        <article class="feature-card">
+          <h3>专注番茄钟</h3>
+          <p>内置番茄时钟和任务列表，专注效率提升 30% 以上。</p>
+        </article>
+        <article class="feature-card">
+          <h3>一键导出记录</h3>
+          <p>统计学习成果，支持 CSV/JSON 导出，便于总结与追踪。</p>
+        </article>
+      </section>
+    </main>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import request from '@/utils/request.js'
 
 const router = useRouter()
 
-const status = ref('loading')
-const statusText = ref('检测中...')
-const apiResponse = ref(null)
-
-const checkBackend = async () => {
-  status.value = 'loading'
-  statusText.value = '检测中...'
-  try {
-    await request.get('/hello')
-    status.value = 'connected'
-    statusText.value = '已连接'
-  } catch {
-    status.value = 'error'
-    statusText.value = '无法连接'
-  }
-}
-
-const callHello = async () => {
-  apiResponse.value = null
-  try {
-    const res = await request.get('/hello')
-    apiResponse.value = JSON.stringify(res, null, 2)
-  } catch (err) {
-    apiResponse.value = JSON.stringify({ error: '请求失败，请确认后端是否启动' }, null, 2)
-  }
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  localStorage.removeItem('username')
+  router.push('/login')
 }
 
-const openSwagger = () => {
-  window.open('http://localhost:8080/swagger-ui.html', '_blank')
+const startLearning = () => {
+  alert('功能即将上线！')
 }
+</script>
 
-const goLogin = () => {
-  router.push('/login')
-}
 
-onMounted(() => {
-  checkBackend()
-})
-</script>
 
 <style scoped>
-.page-container {
-  max-width: 480px;
-  margin: 0 auto;
-  padding: 20px 16px;
+/* 整体布局与手绘点阵背景 */
+.home-layout {
   min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.page-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-md);
-  background: var(--primary-green-light);
+  flex-direction: column;
+  background-color: #fafafa;
+  color: #1a1a1a;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.glass-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: 22px;
+  padding: 20px 40px;
+  background: rgba(250, 250, 250, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 50;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.greeting {
+.logo {
   font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-  line-height: 1.3;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin-top: 2px;
-}
-
-.icon-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-full);
-  background: var(--bg-card);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-soft);
-  transition: transform 0.15s;
-}
-
-.icon-btn:active {
-  transform: scale(0.93);
-}
-
-/* Sections */
-.section {
-  margin-bottom: 24px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
-.section-title {
+.nav-links {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 14px;
+  gap: 24px;
 }
 
-.title-bar {
-  width: 4px;
-  height: 20px;
-  border-radius: 2px;
+.nav-btn-text {
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.3s;
 }
 
-.title-bar.green { background: var(--primary-green); }
-.title-bar.blue { background: var(--primary-blue); }
-.title-bar.orange { background: var(--primary-orange); }
-
-.section-title h2 {
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--text-primary);
+.nav-btn-text:hover {
+  color: #000;
 }
 
-/* Status Card */
-.status-card {
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  box-shadow: var(--shadow-card);
+.nav-btn-primary {
+  background: #000;
+  color: #fff;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
-.status-icon {
-  width: 52px;
-  height: 52px;
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.nav-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.status-icon.connected { background: var(--primary-green-light); }
-.status-icon.loading { background: #fff8e1; }
-.status-icon.error { background: #ffebee; }
-
-.status-info {
+.hero-section {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-}
-
-.status-label {
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.status-text {
-  font-size: 17px;
-  font-weight: 600;
-}
-
-.status-text.connected { color: #4caf50; }
-.status-text.loading { color: #f5a623; }
-.status-text.error { color: #e53935; }
-
-/* API Card */
-.api-card {
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  box-shadow: var(--shadow-card);
-}
-
-.api-endpoint {
-  display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 16px;
-  padding: 12px 14px;
-  background: var(--bg-page);
-  border-radius: var(--radius-sm);
-}
-
-.method-tag {
-  background: var(--primary-green);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  padding: 3px 8px;
-  border-radius: 4px;
-  letter-spacing: 0.5px;
-}
-
-.endpoint-path {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  justify-content: center;
+  text-align: center;
+  padding: 120px 20px 60px;
 }
 
-.action-btn {
-  display: flex;
+.vibe-badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 8px;
-  width: 100%;
-  border-radius: var(--radius-full);
-  font-size: 16px;
-  font-weight: 600;
-  padding: 14px 0;
-  transition: all 0.2s;
+  padding: 6px 16px;
+  border-radius: 40px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  color: #4b5563;
+  font-size: 14px;
+  margin-bottom: 32px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 }
 
-.action-btn:active {
-  transform: scale(0.98);
+.pulse-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981;
+  animation: pulse 2s infinite;
 }
 
-.action-btn.primary {
-  background: var(--gradient-orange);
-  color: #fff;
-  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-.response-card {
-  margin-top: 16px;
-  padding: 14px;
-  background: var(--bg-page);
-  border-radius: var(--radius-sm);
+.hero-title {
+  font-size: 64px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -2px;
+  margin: 0 0 24px 0;
 }
 
-.response-label {
-  display: block;
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
+.text-gradient {
+  background: linear-gradient(90deg, #111, #888);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-.response-body {
-  font-size: 13px;
-  color: var(--text-primary);
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin: 0;
+.hero-subtitle {
+  font-size: 20px;
+  color: #6b7280;
+  max-width: 600px;
   line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
 }
 
-/* Doc Card */
-.doc-card {
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  padding: 18px 20px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  box-shadow: var(--shadow-card);
-  cursor: pointer;
-  transition: transform 0.15s;
+.feature-grid {
+  margin-top: 44px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  width: min(900px, 100%);
 }
 
-.doc-card:active {
-  transform: scale(0.98);
+.feature-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 18px;
+  text-align: left;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
 }
 
-.doc-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-md);
-  background: #fff8e1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.feature-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
 }
 
-.doc-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+.feature-card h3 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  color: #111827;
 }
 
-.doc-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
+.feature-card p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
 }
 
-.doc-desc {
-  font-size: 12px;
-  color: var(--text-secondary);
+.btn-large {
+  background: #000;
+  color: #fff;
+  padding: 18px 40px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }
 
-.bottom-spacer {
-  height: 40px;
+.btn-large:hover {
+  transform: scale(1.02);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/frontend/src/views/login/Login.vue b/frontend/src/views/login/Login.vue
index 8e181a1..93e52a1 100644
--- a/frontend/src/views/login/Login.vue
+++ b/frontend/src/views/login/Login.vue
@@ -1,61 +1,48 @@
-<template>
-  <div class="auth-container">
-    <div class="auth-card">
-      <div class="auth-header">
-        <div class="auth-logo">📚</div>
-        <h1>StudyingSpace</h1>
-        <p>登录你的学习空间</p>
+<template>
+  <div class="login-container">
+    <div class="bg-shape shape1"></div>
+    <div class="bg-shape shape2"></div>
+    <div class="bg-shape shape3"></div>
+
+    <div class="glass-panel">
+      <div class="brand-vip">
+        <div class="brand-logo">MS</div>
+        <div class="brand-text">
+          <h2>欢迎来到 MindSpace</h2>
+          <p>连接你的专属算法思维空间</p>
+        </div>
       </div>
 
-      <form class="auth-form" @submit.prevent="handleLogin">
-        <div class="input-group">
-          <div class="input-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-              <circle cx="12" cy="7" r="4"/>
-            </svg>
-          </div>
-          <input
-            v-model="form.username"
-            type="text"
-            placeholder="请输入用户名"
-            autocomplete="username"
-          />
+      <form class="login-form" @submit.prevent="handleLogin">
+        <div v-if="errorMessage" class="error-message">
+          {{ errorMessage }}
         </div>
 
-        <div class="input-group">
-          <div class="input-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-            </svg>
+        <div class="input-wrapper">
+          <label>账号 / 邮箱</label>
+          <input type="text" v-model="loginForm.username" required placeholder="输入邮箱或用户名" :disabled="isLoading" />
+        </div>
+        
+        <div class="input-wrapper">
+          <label>密码</label>
+          <div class="password-wrap">
+            <input :type="showPassword ? 'text' : 'password'" v-model="loginForm.password" required placeholder="••••••••" :disabled="isLoading" />
+            <button type="button" class="eye-btn" @click="showPassword = !showPassword" :aria-label="showPassword ? '隐藏密码' : '显示密码'">
+              {{ showPassword ? '隐藏' : '显示' }}
+            </button>
           </div>
-          <input
-            v-model="form.password"
-            :type="showPassword ? 'text' : 'password'"
-            placeholder="请输入密码"
-            autocomplete="current-password"
-          />
-          <button type="button" class="toggle-pwd" @click="showPassword = !showPassword">
-            <svg v-if="!showPassword" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-              <circle cx="12" cy="12" r="3"/>
-            </svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
-              <line x1="1" y1="1" x2="23" y2="23"/>
-            </svg>
-          </button>
         </div>
 
-        <button type="submit" class="submit-btn primary">
-          登录
+        <router-link to="#" class="forgot-link">忘记密码？</router-link>
+
+        <button type="submit" class="submit-btn" :disabled="isLoading">
+          {{ isLoading ? '登录中...' : '登 录' }}
         </button>
       </form>
 
       <div class="auth-footer">
         <span>还没有账号？</span>
-        <button class="link-btn" @click="goRegister">立即注册</button>
+        <router-link to="/register" class="link-btn">立即注册</router-link>
       </div>
     </div>
   </div>
@@ -64,68 +51,313 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
+import { login } from '@/api/auth'
 
 const router = useRouter()
-const showPassword = ref(false)
 
-const form = reactive({
-  username: '',
+// 这里的字段名 (username/password) 必须和你们后端的 Request Body 严格一致！
+const loginForm = reactive({
+  username: '', 
   password: ''
 })
 
-const handleLogin = () => {
-  console.log('login', form)
-}
+const isLoading = ref(false)
+const errorMessage = ref('')
+const showPassword = ref(false)
 
-const goRegister = () => {
-  router.push('/register')
+const handleLogin = async () => {
+  if (!loginForm.username || !loginForm.password) {
+    errorMessage.value = '请输入账号和密码'
+    return
+  }
+  
+  try {
+    isLoading.value = true
+    errorMessage.value = ''
+    
+    // 调用后端登录接口，响应格式为 Result<LoginResponse>
+    const res = await login({
+      username: loginForm.username,
+      password: loginForm.password
+    })
+    
+    // 检查响应状态码（后端返回 code=200 表示成功）
+    if (res.code === 200 && res.data) {
+      // 存入 localStorage
+      localStorage.setItem('token', res.data.token)
+      localStorage.setItem('username', res.data.username)
+      
+      // 跳转到主页
+      router.push('/')
+    } else {
+      errorMessage.value = res.message || '登录失败，请稍后重试'
+    }
+    
+  } catch (error) {
+    console.error('登录请求异常:', error)
+    errorMessage.value = error.response?.data?.message || '网络或服务器错误，请稍后再试'
+  } finally {
+    isLoading.value = false
+  }
 }
 </script>
 
 <style scoped>
-.auth-container {
-  width: 100%;
+.login-container {
+  position: relative;
   min-height: 100vh;
   display: flex;
-  justify-content: center;
   align-items: center;
-  background: var(--bg-page);
-  padding: 20px;
+  justify-content: center;
+  background: linear-gradient(135deg, #e5e7eb 0%, #f8fafc 40%, #f3f4f6 100%);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.bg-shape {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: 0.6;
+  animation: float 8s infinite ease-in-out;
+}
+
+.shape1 {
+  top: -10%;
+  left: -10%;
+  width: 450px;
+  height: 450px;
+  background: #bfdbfe;
+}
+
+.shape2 {
+  top: 20%;
+  right: -10%;
+  width: 400px;
+  height: 400px;
+  background: #e9d5ff;
+  animation-delay: 2s;
+}
+
+.shape3 {
+  bottom: -15%;
+  left: 20%;
+  width: 500px;
+  height: 500px;
+  background: #fbcfe8;
+  animation-delay: 4s;
 }
 
-.auth-card {
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+}
+
+.glass-panel {
+  position: relative;
+  z-index: 10;
   width: 100%;
-  max-width: 400px;
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  padding: 40px 28px 32px;
-  box-shadow: var(--shadow-card);
+  max-width: 420px;
+  padding: 48px 40px;
+  margin: 0 20px;
+  background: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 32px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
 }
 
-.auth-header {
-  text-align: center;
-  margin-bottom: 36px;
+.brand-vip {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 26px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.35);
 }
 
-.auth-logo {
-  width: 64px;
-  height: 64px;
-  border-radius: var(--radius-lg);
-  background: var(--primary-green-light);
+.brand-logo {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #000, #4b5563);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
-  margin: 0 auto 16px;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
 }
 
-.auth-header h1 {
+.brand-text h2 {
+  margin: 0;
   font-size: 24px;
+  font-weight: 800;
+  color: #111;
+}
+
+.brand-text p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 13px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.password-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-wrap input {
+  flex: 1;
+}
+
+.eye-btn {
+  border: none;
+  background: transparent;
+  color: #4b5563;
   font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 6px;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.forgot-link {
+  text-align: right;
+  color: #2563eb;
+  font-size: 13px;
+  margin-top: -4px;
+  margin-bottom: 4px;
+  text-decoration: none;
+}
+
+.forgot-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 480px) {
+  .glass-panel {
+    padding: 28px 20px;
+  }
+
+  .brand-text h2 {
+    font-size: 20px;
+  }
+
+  .submit-btn {
+    padding: 16px;
+  }
+}
+
+.error-message {
+  padding: 16px;
+  background: #fee2e2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+  border-radius: 12px;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 -8px 8px -8px;
+}
+
+.input-wrapper label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #444;
+  margin-bottom: 8px;
+  margin-left: 4px;
+}
+
+.input-wrapper input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1.5px solid #eaeaea;
+  background: rgba(255, 255, 255, 0.8);
+  font-size: 15px;
+  outline: none;
+  transition: all 0.3s;
+}
+
+.input-wrapper input::placeholder {
+  color: #bbb;
+}
+
+.input-wrapper input:focus {
+  border-color: #000;
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
+  background: #fff;
 }
 
+.input-wrapper input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  background: #000;
+  color: #fff;
+  padding: 18px;
+  border-radius: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 8px;
+}
+
+.submit-btn:hover:not(:disabled) {
+  background: #222;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.submit-btn:disabled {
+  background: #999;
+  cursor: not-allowed;
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: 24px;
+  font-size: 14px;
+  color: #666;
+}
+
+.auth-footer span {
+  margin-right: 8px;
+}
+
+.link-btn {
+  color: #000;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  transition: opacity 0.3s;
+}
+
+.link-btn:hover {
+  opacity: 0.7;
+}
+
+
 .auth-header p {
   font-size: 14px;
   color: var(--text-secondary);
diff --git a/frontend/src/views/login/Register.vue b/frontend/src/views/login/Register.vue
index 4126748..82a46ce 100644
--- a/frontend/src/views/login/Register.vue
+++ b/frontend/src/views/login/Register.vue
@@ -1,86 +1,56 @@
-<template>
-  <div class="auth-container">
-    <div class="auth-card">
-      <div class="auth-header">
-        <div class="auth-logo">📚</div>
-        <h1>创建账号</h1>
-        <p>加入 StudyingSpace，开启学习之旅</p>
+<template>
+  <div class="register-container">
+    <div class="bg-shape shape1"></div>
+    <div class="bg-shape shape2"></div>
+    <div class="bg-shape shape3"></div>
+
+    <div class="glass-panel">
+      <div class="brand-vip">
+        <div class="brand-logo">MS</div>
+        <div class="brand-text">
+          <h2>加入 MindSpace</h2>
+          <p>创建账号，开启算法思维之旅</p>
+        </div>
       </div>
 
-      <form class="auth-form" @submit.prevent="handleRegister">
-        <div class="input-group">
-          <div class="input-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-              <circle cx="12" cy="7" r="4"/>
-            </svg>
-          </div>
-          <input
-            v-model="form.username"
-            type="text"
-            placeholder="请输入用户名"
-            autocomplete="username"
-          />
+      <form class="register-form" @submit.prevent="handleRegister">
+        <div v-if="errorMessage" class="error-message">
+          {{ errorMessage }}
         </div>
 
-        <div class="input-group">
-          <div class="input-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-            </svg>
+        <div class="input-wrapper">
+          <label>账号 / 邮箱</label>
+          <input type="text" v-model="registerForm.username" required placeholder="输入账号" :disabled="isLoading" />
+        </div>
+        
+        <div class="input-wrapper">
+          <label>密码</label>
+          <div class="password-wrap">
+            <input :type="showPassword ? 'text' : 'password'" v-model="registerForm.password" required placeholder="••••••••" :disabled="isLoading" />
+            <button type="button" class="eye-btn" @click="showPassword = !showPassword">
+              {{ showPassword ? '隐藏' : '显示' }}
+            </button>
           </div>
-          <input
-            v-model="form.password"
-            :type="showPassword ? 'text' : 'password'"
-            placeholder="请输入密码"
-            autocomplete="new-password"
-          />
-          <button type="button" class="toggle-pwd" @click="showPassword = !showPassword">
-            <svg v-if="!showPassword" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-              <circle cx="12" cy="12" r="3"/>
-            </svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
-              <line x1="1" y1="1" x2="23" y2="23"/>
-            </svg>
-          </button>
         </div>
 
-        <div class="input-group">
-          <div class="input-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-              <polyline points="22 4 12 14.01 9 11.01"/>
-            </svg>
+        <div class="input-wrapper">
+          <label>确认密码</label>
+          <div class="password-wrap">
+            <input :type="showPassword ? 'text' : 'password'" v-model="registerForm.confirmPassword" required placeholder="••••••••" :disabled="isLoading" />
+            <button type="button" class="eye-btn" @click="showPassword = !showPassword">
+              {{ showPassword ? '隐藏' : '显示' }}
+            </button>
           </div>
-          <input
-            v-model="form.confirmPassword"
-            :type="showConfirm ? 'text' : 'password'"
-            placeholder="请确认密码"
-            autocomplete="new-password"
-          />
-          <button type="button" class="toggle-pwd" @click="showConfirm = !showConfirm">
-            <svg v-if="!showConfirm" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-              <circle cx="12" cy="12" r="3"/>
-            </svg>
-            <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
-              <line x1="1" y1="1" x2="23" y2="23"/>
-            </svg>
-          </button>
         </div>
 
-        <button type="submit" class="submit-btn primary">
-          注册
+        <button type="submit" class="submit-btn" :disabled="isLoading">
+          {{ isLoading ? '注册中...' : '注 册' }}
         </button>
       </form>
 
       <div class="auth-footer">
         <span>已有账号？</span>
-        <button class="link-btn" @click="goLogin">立即登录</button>
+        <router-link to="/login" class="link-btn">立即登录</router-link>
       </div>
     </div>
   </div>
@@ -89,160 +59,300 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
+import { register } from '@/api/auth'
 
 const router = useRouter()
-const showPassword = ref(false)
-const showConfirm = ref(false)
 
-const form = reactive({
+const registerForm = reactive({
   username: '',
   password: '',
   confirmPassword: ''
 })
 
-const handleRegister = () => {
-  console.log('register', form)
-}
+const isLoading = ref(false)
+const errorMessage = ref('')
+const showPassword = ref(false)
+
+const handleRegister = async () => {
+  if (!registerForm.username || !registerForm.password || !registerForm.confirmPassword) {
+    errorMessage.value = '请填写所有字段'
+    return
+  }
+
+  if (registerForm.password !== registerForm.confirmPassword) {
+    errorMessage.value = '两次输入的密码不一致'
+    return
+  }
+
+  if (registerForm.password.length < 6) {
+    errorMessage.value = '密码长度至少为 6 位'
+    return
+  }
 
-const goLogin = () => {
-  router.push('/login')
+  try {
+    isLoading.value = true
+    errorMessage.value = ''
+
+    const res = await register({
+      username: registerForm.username,
+      password: registerForm.password
+    })
+
+    if (res.code === 200) {
+      // 注册成功，跳转到登录页
+      router.push('/login')
+    } else {
+      errorMessage.value = res.message || '注册失败，请稍后重试'
+    }
+
+  } catch (error) {
+    console.error('注册请求异常:', error)
+    errorMessage.value = error.response?.data?.message || '网络或服务器错误，请稍后再试'
+  } finally {
+    isLoading.value = false
+  }
 }
 </script>
 
 <style scoped>
-.auth-container {
-  width: 100%;
+.register-container {
+  position: relative;
   min-height: 100vh;
   display: flex;
-  justify-content: center;
   align-items: center;
-  background: var(--bg-page);
-  padding: 20px;
+  justify-content: center;
+  background: linear-gradient(135deg, #f4f4f5 0%, #f8fafc 45%, #eef2ff 100%);
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.bg-shape {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: 0.6;
+  animation: float 8s infinite ease-in-out;
 }
 
-.auth-card {
+.shape1 {
+  top: -10%;
+  left: -10%;
+  width: 450px;
+  height: 450px;
+  background: #bfdbfe;
+}
+
+.shape2 {
+  top: 20%;
+  right: -10%;
+  width: 400px;
+  height: 400px;
+  background: #e9d5ff;
+  animation-delay: 2s;
+}
+
+.shape3 {
+  bottom: -15%;
+  left: 20%;
+  width: 500px;
+  height: 500px;
+  background: #fbcfe8;
+  animation-delay: 4s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+}
+
+.glass-panel {
+  position: relative;
+  z-index: 10;
   width: 100%;
-  max-width: 400px;
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  padding: 40px 28px 32px;
-  box-shadow: var(--shadow-card);
+  max-width: 420px;
+  padding: 48px 40px;
+  margin: 0 20px;
+  background: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 32px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
 }
 
-.auth-header {
-  text-align: center;
-  margin-bottom: 36px;
+.brand-vip {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 26px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.35);
 }
 
-.auth-logo {
-  width: 64px;
-  height: 64px;
-  border-radius: var(--radius-lg);
-  background: var(--primary-green-light);
+.brand-logo {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #000, #4b5563);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
-  margin: 0 auto 16px;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
 }
 
-.auth-header h1 {
+.brand-text h2 {
+  margin: 0;
   font-size: 24px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 6px;
+  font-weight: 800;
+  color: #111;
 }
 
-.auth-header p {
-  font-size: 14px;
-  color: var(--text-secondary);
+.brand-text p {
+  margin: 0;
+  color: #4b5563;
+  font-size: 13px;
 }
 
-.auth-form {
+.register-form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 18px;
 }
 
-.input-group {
+.password-wrap {
+  position: relative;
   display: flex;
   align-items: center;
-  background: var(--bg-page);
-  border-radius: var(--radius-md);
-  padding: 0 14px;
-  height: 50px;
-  border: 1.5px solid transparent;
-  transition: border-color 0.2s;
-}
-
-.input-group:focus-within {
-  border-color: var(--primary-green);
-  background: #fff;
 }
 
-.input-icon {
-  margin-right: 10px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
+.password-wrap input {
+  flex: 1;
 }
 
-.input-group input {
-  flex: 1;
+.eye-btn {
   border: none;
-  outline: none;
   background: transparent;
+  color: #4b5563;
+  font-weight: 700;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+@media (max-width: 480px) {
+  .glass-panel {
+    padding: 28px 20px;
+  }
+
+  .brand-text h2 {
+    font-size: 20px;
+  }
+
+  .submit-btn {
+    padding: 16px;
+  }
+}
+
+.error-message {
+  padding: 16px;
+  background: #fee2e2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+  border-radius: 12px;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 -8px 8px -8px;
+}
+
+.input-wrapper label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #444;
+  margin-bottom: 8px;
+  margin-left: 4px;
+}
+
+.input-wrapper input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1.5px solid #eaeaea;
+  background: rgba(255, 255, 255, 0.8);
   font-size: 15px;
-  color: var(--text-primary);
-  height: 100%;
+  outline: none;
+  transition: all 0.3s;
 }
 
-.input-group input::placeholder {
-  color: var(--text-placeholder);
+.input-wrapper input::placeholder {
+  color: #bbb;
 }
 
-.toggle-pwd {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  flex-shrink: 0;
+.input-wrapper input:focus {
+  border-color: #000;
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
+  background: #fff;
+}
+
+.input-wrapper input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .submit-btn {
-  width: 100%;
-  height: 50px;
-  border-radius: var(--radius-full);
+  background: #000;
+  color: #fff;
+  padding: 18px;
+  border-radius: 16px;
   font-size: 16px;
   font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s;
   margin-top: 8px;
-  transition: all 0.2s;
 }
 
-.submit-btn:active {
-  transform: scale(0.98);
+.submit-btn:hover:not(:disabled) {
+  background: #222;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
-.submit-btn.primary {
-  background: var(--gradient-orange);
-  color: #fff;
-  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
+.submit-btn:disabled {
+  background: #999;
+  cursor: not-allowed;
 }
 
 .auth-footer {
   text-align: center;
   margin-top: 24px;
   font-size: 14px;
-  color: var(--text-secondary);
+  color: #666;
+}
+
+.auth-footer span {
+  margin-right: 8px;
 }
 
 .link-btn {
-  color: var(--primary-green);
+  color: #000;
   font-weight: 600;
-  font-size: 14px;
-  margin-left: 4px;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  transition: opacity 0.3s;
 }
 
-.link-btn:active {
+.link-btn:hover {
   opacity: 0.7;
 }
 </style>
-- 
2.34.1


From 019f4dde193bedeb027f5b3be99c4414126a1f93 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 22:36:24 +0800
Subject: [PATCH 05/27] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=AD=BE=E5=88=B0?=
 =?UTF-8?q?=E6=89=93=E5=8D=A1=E5=8A=9F=E8=83=BD=E5=92=8C=E5=A5=BD=E5=8F=8B?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/README.md                             |   2 +-
 .../studyingspace/config/SecurityConfig.java  |  12 +-
 .../controller/CheckInController.java         | 111 ++++
 .../controller/FriendController.java          | 166 +++++
 .../com/studyingspace/entity/CheckIn.java     |  31 +
 .../java/com/studyingspace/entity/Friend.java |  28 +
 .../studyingspace/entity/FriendRequest.java   |  39 ++
 .../repository/CheckInRepository.java         |  22 +
 .../repository/FriendRepository.java          |  20 +
 .../repository/FriendRequestRepository.java   |  19 +
 .../security/JwtAuthenticationFilter.java     |  55 ++
 frontend/src/api/checkin.js                   |  30 +
 frontend/src/api/friend.js                    |  31 +
 frontend/src/router/index.js                  |  10 +
 frontend/src/views/checkin/Checkin.vue        | 598 +++++++++++++++++
 frontend/src/views/home/Home.vue              |  36 +-
 frontend/src/views/profile/Profile.vue        | 622 ++++++++++++++++++
 17 files changed, 1827 insertions(+), 5 deletions(-)
 create mode 100644 backend/src/main/java/com/studyingspace/controller/CheckInController.java
 create mode 100644 backend/src/main/java/com/studyingspace/controller/FriendController.java
 create mode 100644 backend/src/main/java/com/studyingspace/entity/CheckIn.java
 create mode 100644 backend/src/main/java/com/studyingspace/entity/Friend.java
 create mode 100644 backend/src/main/java/com/studyingspace/entity/FriendRequest.java
 create mode 100644 backend/src/main/java/com/studyingspace/repository/CheckInRepository.java
 create mode 100644 backend/src/main/java/com/studyingspace/repository/FriendRepository.java
 create mode 100644 backend/src/main/java/com/studyingspace/repository/FriendRequestRepository.java
 create mode 100644 backend/src/main/java/com/studyingspace/security/JwtAuthenticationFilter.java
 create mode 100644 frontend/src/api/checkin.js
 create mode 100644 frontend/src/api/friend.js
 create mode 100644 frontend/src/views/checkin/Checkin.vue
 create mode 100644 frontend/src/views/profile/Profile.vue

diff --git a/backend/README.md b/backend/README.md
index 79cb230..b8b32dc 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -133,7 +133,7 @@ Authorization: Bearer <token>
 
 ## 📝 开发计划
 - [x] 登录注册功能
-- [ ] 用户认证模块
+- [x] 用户认证模块
 - [ ] 每日打卡模块
 - [ ] 笔记导入导出模块
 
diff --git a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
index d371069..28c33e1 100644
--- a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
+++ b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
@@ -1,11 +1,13 @@
 package com.studyingspace.config;
 
+import com.studyingspace.security.JwtAuthenticationFilter;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
 import org.springframework.security.config.http.SessionCreationPolicy;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
 import org.springframework.web.cors.CorsConfiguration;
 import org.springframework.web.cors.CorsConfigurationSource;
 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
@@ -16,6 +18,12 @@ import java.util.Arrays;
 @EnableWebSecurity
 public class SecurityConfig {
 
+    private final JwtAuthenticationFilter jwtAuthenticationFilter;
+
+    public SecurityConfig(JwtAuthenticationFilter jwtAuthenticationFilter) {
+        this.jwtAuthenticationFilter = jwtAuthenticationFilter;
+    }
+
     @Bean
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         http
@@ -24,7 +32,6 @@ public class SecurityConfig {
                 .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .authorizeHttpRequests(auth -> auth
                         .requestMatchers(
-                                "/api/**",
                                 "/api/auth/**",
                                 "/v3/api-docs/**",
                                 "/swagger-ui/**",
@@ -32,7 +39,8 @@ public class SecurityConfig {
                                 "/webjars/**"
                         ).permitAll()
                         .anyRequest().authenticated()
-                );
+                )
+                .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
 
         return http.build();
     }
diff --git a/backend/src/main/java/com/studyingspace/controller/CheckInController.java b/backend/src/main/java/com/studyingspace/controller/CheckInController.java
new file mode 100644
index 0000000..8974ed8
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/controller/CheckInController.java
@@ -0,0 +1,111 @@
+package com.studyingspace.controller;
+
+import com.studyingspace.common.Result;
+import com.studyingspace.entity.CheckIn;
+import com.studyingspace.entity.User;
+import com.studyingspace.repository.CheckInRepository;
+import com.studyingspace.repository.UserRepository;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.*;
+
+import java.time.LocalDate;
+import java.util.*;
+
+@RestController
+@RequestMapping("/api/checkin")
+@Tag(name = "每日打卡", description = "每日学习打卡功能")
+@RequiredArgsConstructor
+public class CheckInController {
+
+    private final CheckInRepository checkInRepository;
+    private final UserRepository userRepository;
+
+    @GetMapping
+    @Operation(summary = "获取打卡记录", description = "获取当前用户的所有打卡记录，按时间倒序排列")
+    public Result<List<CheckIn>> getCheckInList(Authentication authentication) {
+        Long userId = getCurrentUserId(authentication);
+        List<CheckIn> checkInList = checkInRepository.findByUserIdOrderByCheckinDateDesc(userId);
+        return Result.success(checkInList);
+    }
+
+    @PostMapping
+    @Operation(summary = "每日打卡", description = "今天打卡学习")
+    public Result<String> dailyCheckIn(
+            Authentication authentication,
+            @RequestParam(required = false) String remark
+    ) {
+        Long userId = getCurrentUserId(authentication);
+        LocalDate today = LocalDate.now();
+
+        if (checkInRepository.findByUserIdAndCheckinDate(userId, today).isPresent()) {
+            return Result.error("今天已经打过卡了");
+        }
+
+        CheckIn checkIn = new CheckIn();
+        checkIn.setUserId(userId);
+        checkIn.setCheckinDate(today);
+        checkIn.setRemark(remark);
+        checkInRepository.save(checkIn);
+
+        return Result.success("打卡成功");
+    }
+
+    @GetMapping("/calendar")
+    @Operation(summary = "获取打卡日历数据", description = "获取当前用户所有打卡日期，用于日历展示")
+    public Result<List<String>> getCheckinCalendar(Authentication authentication) {
+        Long userId = getCurrentUserId(authentication);
+        List<LocalDate> dates = checkInRepository.findAllCheckinDatesByUserId(userId);
+        List<String> result = dates.stream()
+                .map(LocalDate::toString)
+                .toList();
+        return Result.success(result);
+    }
+
+    @GetMapping("/stats")
+    @Operation(summary = "获取打卡统计", description = "获取连续打卡天数、总打卡天数等统计信息")
+    public Result<Map<String, Object>> getStats(Authentication authentication) {
+        Long userId = getCurrentUserId(authentication);
+        long totalDays = checkInRepository.countByUserId(userId);
+        List<CheckIn> checkIns = checkInRepository.findByUserIdOrderByCheckinDateDesc(userId);
+
+        int consecutiveDays = calculateConsecutiveDays(checkIns);
+
+        Map<String, Object> stats = new HashMap<>();
+        stats.put("totalDays", totalDays);
+        stats.put("consecutiveDays", consecutiveDays);
+
+        return Result.success(stats);
+    }
+
+    private Long getCurrentUserId(Authentication authentication) {
+        String username = authentication.getName();
+        Optional<User> userOpt = userRepository.findByUsername(username);
+        if (userOpt.isPresent()) {
+            return userOpt.get().getId();
+        }
+        return 1L;
+    }
+
+    private int calculateConsecutiveDays(List<CheckIn> checkIns) {
+        if (checkIns.isEmpty()) {
+            return 0;
+        }
+
+        int consecutive = 0;
+        LocalDate current = LocalDate.now();
+
+        for (CheckIn checkIn : checkIns) {
+            if (checkIn.getCheckinDate().equals(current)) {
+                consecutive++;
+                current = current.minusDays(1);
+            } else {
+                break;
+            }
+        }
+
+        return consecutive;
+    }
+}
diff --git a/backend/src/main/java/com/studyingspace/controller/FriendController.java b/backend/src/main/java/com/studyingspace/controller/FriendController.java
new file mode 100644
index 0000000..ed3591b
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/controller/FriendController.java
@@ -0,0 +1,166 @@
+package com.studyingspace.controller;
+
+import com.studyingspace.common.Result;
+import com.studyingspace.entity.Friend;
+import com.studyingspace.entity.FriendRequest;
+import com.studyingspace.entity.User;
+import com.studyingspace.repository.CheckInRepository;
+import com.studyingspace.repository.FriendRepository;
+import com.studyingspace.repository.FriendRequestRepository;
+import com.studyingspace.repository.UserRepository;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.*;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+
+@RestController
+@RequestMapping("/api/friend")
+@Tag(name = "好友关系", description = "好友申请和好友列表功能")
+@RequiredArgsConstructor
+public class FriendController {
+
+    private final FriendRepository friendRepository;
+    private final FriendRequestRepository friendRequestRepository;
+    private final UserRepository userRepository;
+    private final CheckInRepository checkInRepository;
+
+    @PostMapping("/request")
+    @Operation(summary = "发送好友申请", description = "向指定用户发送好友申请")
+    public Result<String> sendFriendRequest(
+            Authentication authentication,
+            @RequestParam String username
+    ) {
+        Long fromUserId = getCurrentUserId(authentication);
+
+        Optional<User> toUserOpt = userRepository.findByUsername(username);
+        if (toUserOpt.isEmpty()) {
+            return Result.error("用户不存在");
+        }
+
+        User toUser = toUserOpt.get();
+        Long toUserId = toUser.getId();
+        if (toUserId.equals(fromUserId)) {
+            return Result.error("不能添加自己为好友");
+        }
+
+        if (friendRepository.existsByUserIdAndFriendId(fromUserId, toUserId)) {
+            return Result.error("该用户已经是你的好友");
+        }
+
+        if (friendRequestRepository.existsByFromUserIdAndToUserIdAndStatus(
+                fromUserId, toUserId, FriendRequest.RequestStatus.PENDING)) {
+            return Result.error("已经发送过申请，请等待对方处理");
+        }
+
+        FriendRequest request = new FriendRequest();
+        request.setFromUserId(fromUserId);
+        request.setToUserId(toUserId);
+        friendRequestRepository.save(request);
+
+        return Result.success("好友申请已发送");
+    }
+
+    @PostMapping("/handle")
+    @Operation(summary = "处理好友申请", description = "同意或拒绝好友申请")
+    public Result<String> handleFriendRequest(
+            Authentication authentication,
+            @RequestParam Long requestId,
+            @RequestParam boolean accept
+    ) {
+        Long toUserId = getCurrentUserId(authentication);
+
+        Optional<FriendRequest> requestOpt = friendRequestRepository.findByIdAndToUserId(requestId, toUserId);
+        if (requestOpt.isEmpty()) {
+            return Result.error("申请不存在");
+        }
+
+        FriendRequest request = requestOpt.get();
+        if (request.getStatus() != FriendRequest.RequestStatus.PENDING) {
+            return Result.error("该申请已经处理过了");
+        }
+
+        request.setHandleTime(LocalDateTime.now());
+        if (accept) {
+            request.setStatus(FriendRequest.RequestStatus.ACCEPTED);
+            friendRequestRepository.save(request);
+
+            Friend friend1 = new Friend();
+            friend1.setUserId(toUserId);
+            friend1.setFriendId(request.getFromUserId());
+            friendRepository.save(friend1);
+
+            Friend friend2 = new Friend();
+            friend2.setUserId(request.getFromUserId());
+            friend2.setFriendId(toUserId);
+            friendRepository.save(friend2);
+
+            return Result.success("已同意好友申请");
+        } else {
+            request.setStatus(FriendRequest.RequestStatus.REJECTED);
+            friendRequestRepository.save(request);
+            return Result.success("已拒绝好友申请");
+        }
+    }
+
+    @GetMapping("/requests/pending")
+    @Operation(summary = "获取待处理的好友申请", description = "获取当前用户收到的待处理好友申请列表")
+    public Result<List<Map<String, Object>>> getPendingRequests(Authentication authentication) {
+        Long userId = getCurrentUserId(authentication);
+        List<FriendRequest> requests = friendRequestRepository.findByToUserIdAndStatus(
+                userId, FriendRequest.RequestStatus.PENDING);
+
+        List<Map<String, Object>> result = new ArrayList<>();
+        for (FriendRequest request : requests) {
+            User fromUser = userRepository.findById(request.getFromUserId()).orElse(null);
+            if (fromUser != null) {
+                Map<String, Object> item = new HashMap<>();
+                item.put("id", request.getId());
+                item.put("fromUserId", request.getFromUserId());
+                item.put("fromUsername", fromUser.getUsername());
+                item.put("createTime", request.getCreateTime().toString());
+                result.add(item);
+            }
+        }
+
+        return Result.success(result);
+    }
+
+    @GetMapping("/list")
+    @Operation(summary = "获取好友列表", description = "获取当前用户的所有好友，包含好友打卡天数统计")
+    public Result<List<Map<String, Object>>> getFriendList(Authentication authentication) {
+        Long userId = getCurrentUserId(authentication);
+        List<Friend> friends = friendRepository.findByUserId(userId);
+
+        List<Map<String, Object>> result = new ArrayList<>();
+        for (Friend friend : friends) {
+            User friendUser = userRepository.findById(friend.getFriendId()).orElse(null);
+            if (friendUser != null) {
+                Map<String, Object> item = new HashMap<>();
+                item.put("id", friendUser.getId());
+                item.put("username", friendUser.getUsername());
+                long totalDays = checkInRepository.countByUserId(friendUser.getId());
+                item.put("totalCheckinDays", totalDays);
+                result.add(item);
+            }
+        }
+
+        return Result.success(result);
+    }
+
+    private Long getCurrentUserId(Authentication authentication) {
+        String username = authentication.getName();
+        Optional<User> userOpt = userRepository.findByUsername(username);
+        if (userOpt.isPresent()) {
+            return userOpt.get().getId();
+        }
+        return 1L;
+    }
+}
diff --git a/backend/src/main/java/com/studyingspace/entity/CheckIn.java b/backend/src/main/java/com/studyingspace/entity/CheckIn.java
new file mode 100644
index 0000000..6d89f3b
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/entity/CheckIn.java
@@ -0,0 +1,31 @@
+package com.studyingspace.entity;
+
+import jakarta.persistence.*;
+import lombok.Data;
+
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+
+@Data
+@Entity
+@Table(name = "checkin")
+public class CheckIn {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private Long userId;
+
+    @Column(nullable = false)
+    private LocalDate checkinDate;
+
+    private String remark;
+
+    private LocalDateTime createTime;
+
+    @PrePersist
+    protected void onCreate() {
+        createTime = LocalDateTime.now();
+    }
+}
diff --git a/backend/src/main/java/com/studyingspace/entity/Friend.java b/backend/src/main/java/com/studyingspace/entity/Friend.java
new file mode 100644
index 0000000..8e3d0fa
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/entity/Friend.java
@@ -0,0 +1,28 @@
+package com.studyingspace.entity;
+
+import jakarta.persistence.*;
+import lombok.Data;
+
+import java.time.LocalDateTime;
+
+@Data
+@Entity
+@Table(name = "friends")
+public class Friend {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private Long userId;
+
+    @Column(nullable = false)
+    private Long friendId;
+
+    private LocalDateTime createTime;
+
+    @PrePersist
+    protected void onCreate() {
+        createTime = LocalDateTime.now();
+    }
+}
diff --git a/backend/src/main/java/com/studyingspace/entity/FriendRequest.java b/backend/src/main/java/com/studyingspace/entity/FriendRequest.java
new file mode 100644
index 0000000..7d05bca
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/entity/FriendRequest.java
@@ -0,0 +1,39 @@
+package com.studyingspace.entity;
+
+import jakarta.persistence.*;
+import lombok.Data;
+
+import java.time.LocalDateTime;
+
+@Data
+@Entity
+@Table(name = "friend_requests")
+public class FriendRequest {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private Long fromUserId;
+
+    @Column(nullable = false)
+    private Long toUserId;
+
+    @Enumerated(EnumType.STRING)
+    private RequestStatus status;
+
+    private LocalDateTime createTime;
+    private LocalDateTime handleTime;
+
+    public enum RequestStatus {
+        PENDING,
+        ACCEPTED,
+        REJECTED
+    }
+
+    @PrePersist
+    protected void onCreate() {
+        createTime = LocalDateTime.now();
+        status = RequestStatus.PENDING;
+    }
+}
diff --git a/backend/src/main/java/com/studyingspace/repository/CheckInRepository.java b/backend/src/main/java/com/studyingspace/repository/CheckInRepository.java
new file mode 100644
index 0000000..37733a4
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/repository/CheckInRepository.java
@@ -0,0 +1,22 @@
+package com.studyingspace.repository;
+
+import com.studyingspace.entity.CheckIn;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.time.LocalDate;
+import java.util.List;
+import java.util.Optional;
+
+public interface CheckInRepository extends JpaRepository<CheckIn, Long> {
+    
+    Optional<CheckIn> findByUserIdAndCheckinDate(Long userId, LocalDate checkinDate);
+    
+    List<CheckIn> findByUserIdOrderByCheckinDateDesc(Long userId);
+    
+    @Query("SELECT c.checkinDate FROM CheckIn c WHERE c.userId = :userId")
+    List<LocalDate> findAllCheckinDatesByUserId(@Param("userId") Long userId);
+    
+    long countByUserId(Long userId);
+}
diff --git a/backend/src/main/java/com/studyingspace/repository/FriendRepository.java b/backend/src/main/java/com/studyingspace/repository/FriendRepository.java
new file mode 100644
index 0000000..cc279a0
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/repository/FriendRepository.java
@@ -0,0 +1,20 @@
+package com.studyingspace.repository;
+
+import com.studyingspace.entity.Friend;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.util.List;
+import java.util.Optional;
+
+public interface FriendRepository extends JpaRepository<Friend, Long> {
+    List<Friend> findByUserId(Long userId);
+
+    Optional<Friend> findByUserIdAndFriendId(Long userId, Long friendId);
+
+    @Query("SELECT f.friendId FROM Friend f WHERE f.userId = :userId")
+    List<Long> findFriendIdsByUserId(@Param("userId") Long userId);
+
+    boolean existsByUserIdAndFriendId(Long userId, Long friendId);
+}
diff --git a/backend/src/main/java/com/studyingspace/repository/FriendRequestRepository.java b/backend/src/main/java/com/studyingspace/repository/FriendRequestRepository.java
new file mode 100644
index 0000000..31aa2cd
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/repository/FriendRequestRepository.java
@@ -0,0 +1,19 @@
+package com.studyingspace.repository;
+
+import com.studyingspace.entity.FriendRequest;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.util.List;
+import java.util.Optional;
+
+public interface FriendRequestRepository extends JpaRepository<FriendRequest, Long> {
+    List<FriendRequest> findByToUserIdAndStatus(Long toUserId, FriendRequest.RequestStatus status);
+
+    List<FriendRequest> findByFromUserIdAndStatus(Long fromUserId, FriendRequest.RequestStatus status);
+
+    boolean existsByFromUserIdAndToUserIdAndStatus(Long fromUserId, Long toUserId, FriendRequest.RequestStatus status);
+
+    Optional<FriendRequest> findByIdAndToUserId(Long id, Long toUserId);
+}
diff --git a/backend/src/main/java/com/studyingspace/security/JwtAuthenticationFilter.java b/backend/src/main/java/com/studyingspace/security/JwtAuthenticationFilter.java
new file mode 100644
index 0000000..e377b17
--- /dev/null
+++ b/backend/src/main/java/com/studyingspace/security/JwtAuthenticationFilter.java
@@ -0,0 +1,55 @@
+package com.studyingspace.security;
+
+import com.studyingspace.utils.JwtUtils;
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.authentication.WebAuthenticationDetails;
+import org.springframework.stereotype.Component;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+import java.io.IOException;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+@Component
+public class JwtAuthenticationFilter extends OncePerRequestFilter {
+
+    private static final Logger logger = LoggerFactory.getLogger(JwtAuthenticationFilter.class);
+
+    @Autowired
+    private JwtUtils jwtUtils;
+
+    @Override
+    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
+            throws ServletException, IOException {
+        try {
+            String jwt = getJwtFromRequest(request);
+
+            if (jwt != null && !jwt.isEmpty() && jwtUtils.validateToken(jwt)) {
+                String username = jwtUtils.getUsernameFromToken(jwt);
+                UsernamePasswordAuthenticationToken authentication =
+                        new UsernamePasswordAuthenticationToken(username, null, null);
+                authentication.setDetails(new WebAuthenticationDetails(request));
+                SecurityContextHolder.getContext().setAuthentication(authentication);
+            }
+        } catch (Exception e) {
+            logger.error("Cannot set user authentication: {}", e.getMessage());
+        }
+
+        filterChain.doFilter(request, response);
+    }
+
+    private String getJwtFromRequest(HttpServletRequest request) {
+        String bearerToken = request.getHeader("Authorization");
+        if (bearerToken != null && bearerToken.startsWith("Bearer ")) {
+            return bearerToken.substring(7);
+        }
+        return null;
+    }
+}
diff --git a/frontend/src/api/checkin.js b/frontend/src/api/checkin.js
new file mode 100644
index 0000000..66412c2
--- /dev/null
+++ b/frontend/src/api/checkin.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function getCheckinList() {
+  return request({
+    url: '/checkin',
+    method: 'get'
+  })
+}
+
+export function dailyCheckin(remark) {
+  return request({
+    url: '/checkin',
+    method: 'post',
+    params: { remark }
+  })
+}
+
+export function getCheckinCalendar() {
+  return request({
+    url: '/checkin/calendar',
+    method: 'get'
+  })
+}
+
+export function getCheckinStats() {
+  return request({
+    url: '/checkin/stats',
+    method: 'get'
+  })
+}
diff --git a/frontend/src/api/friend.js b/frontend/src/api/friend.js
new file mode 100644
index 0000000..c81b8d8
--- /dev/null
+++ b/frontend/src/api/friend.js
@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+export function sendFriendRequest(username) {
+  return request({
+    url: '/friend/request',
+    method: 'post',
+    params: { username }
+  })
+}
+
+export function handleFriendRequest(requestId, accept) {
+  return request({
+    url: '/friend/handle',
+    method: 'post',
+    params: { requestId, accept }
+  })
+}
+
+export function getPendingFriendRequests() {
+  return request({
+    url: '/friend/requests/pending',
+    method: 'get'
+  })
+}
+
+export function getFriendList() {
+  return request({
+    url: '/friend/list',
+    method: 'get'
+  })
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 54a5cdc..3a6e05a 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -15,6 +15,16 @@ const routes = [
     path: '/',
     name: 'home',
     component: () => import('../views/home/Home.vue')
+  },
+  {
+    path: '/checkin',
+    name: 'checkin',
+    component: () => import('../views/checkin/Checkin.vue')
+  },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: () => import('../views/profile/Profile.vue')
   }
 ]
 
diff --git a/frontend/src/views/checkin/Checkin.vue b/frontend/src/views/checkin/Checkin.vue
new file mode 100644
index 0000000..a884844
--- /dev/null
+++ b/frontend/src/views/checkin/Checkin.vue
@@ -0,0 +1,598 @@
+  <script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  getCheckinList,
+  dailyCheckin,
+  getCheckinCalendar,
+  getCheckinStats
+} from '@/api/checkin'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const loading = ref(false)
+const checkedIn = ref(false)
+const todayDate = ref('')
+const form = ref({
+  remark: ''
+})
+const stats = ref({
+  totalDays: 0,
+  consecutiveDays: 0
+})
+const checkinList = ref([])
+const checkedDates = ref([])
+const calendar = ref([])
+
+const year = ref(new Date().getFullYear())
+const month = ref(new Date().getMonth())
+
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  localStorage.removeItem('username')
+  router.push('/login')
+}
+
+const generateCalendar = () => {
+  const result = []
+  const firstDay = new Date(year.value, month.value, 1).getDay()
+  const daysInMonth = new Date(year.value, month.value + 1, 0).getDate()
+
+  let week = []
+  for (let i = 0; i < firstDay; i++) {
+    week.push({ date: '', checked: false, empty: true })
+  }
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    const dateStr = `${year.value}-${String(month.value + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    week.push({
+      date: i,
+      checked: checkedDates.value.includes(dateStr),
+      empty: false
+    })
+    if (week.length === 7) {
+      result.push(week)
+      week = []
+    }
+  }
+
+  if (week.length > 0 && week.length < 7) {
+    for (let i = week.length; i < 7; i++) {
+      week.push({ date: '', checked: false, empty: true })
+    }
+    result.push(week)
+  }
+
+  calendar.value = result
+}
+
+const loadData = async () => {
+  try {
+    const [listRes, calendarRes, statsRes] = await Promise.all([
+      getCheckinList(),
+      getCheckinCalendar(),
+      getCheckinStats()
+    ])
+    if (listRes.code === 200) {
+      checkinList.value = listRes.data
+    }
+    if (calendarRes.code === 200) {
+      checkedDates.value = calendarRes.data
+      generateCalendar()
+      const today = new Date()
+      const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+      checkedIn.value = checkedDates.value.includes(todayStr)
+    }
+    if (statsRes.code === 200) {
+      stats.value = statsRes.data
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('加载数据失败')
+  }
+}
+
+const handleCheckin = async () => {
+  loading.value = true
+  try {
+    const res = await dailyCheckin(form.value.remark)
+    if (res.code === 200) {
+      ElMessage.success(res.data)
+      checkedIn.value = true
+      form.value.remark = ''
+      await loadData()
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('打卡失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const formatTime = (time) => {
+  return time?.replace('T', ' ').substring(0, 16)
+}
+
+const goToHome = () => {
+  router.push('/')
+}
+
+const goToCheckin = () => {
+  router.push('/checkin')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+const today = computed(() => {
+  const d = new Date()
+  const year = d.getFullYear()
+  const month = d.getMonth() + 1
+  const date = d.getDate()
+  return `${year}年${month}月${date}日`
+})
+
+onMounted(() => {
+  todayDate.value = today.value
+  loadData()
+})
+</script>
+
+<template>
+  <div class="home-layout">
+    <nav class="glass-nav">
+      <div class="logo">MindSpace.</div>
+      <div class="nav-links">
+        <span class="nav-btn-text" @click="goToHome">首页</span>
+        <span class="nav-btn-text" @click="goToCheckin">每日打卡</span>
+        <button class="nav-btn-secondary" @click="goToProfile">个人中心</button>
+        <button class="nav-btn-primary" @click="handleLogout">退出登录</button>
+      </div>
+    </nav>
+
+    <main class="checkin-section">
+      <div class="vibe-badge">
+        <span :class="['pulse-dot', checkedIn ? 'green' : 'orange']"></span>
+        {{ checkedIn ? '今日已打卡' : '今日待打卡' }}
+      </div>
+
+      <h1 class="checkin-title">
+        坚持每日打卡，<br />
+        <span class="text-gradient">养成自律好习惯。</span>
+      </h1>
+
+      <p class="checkin-subtitle">
+        {{ todayDate }} · 记录学习点滴，见证成长轨迹
+      </p>
+
+      <div class="stats-grid">
+        <article class="stat-card">
+          <div class="stat-number">{{ stats.totalDays }}</div>
+          <div class="stat-label">总打卡天数</div>
+        </article>
+        <article class="stat-card">
+          <div class="stat-number">{{ stats.consecutiveDays }}</div>
+          <div class="stat-label">连续打卡</div>
+        </article>
+      </div>
+
+      <div class="checkin-card">
+        <div class="form-group">
+          <label>打卡备注</label>
+          <textarea
+            v-model="form.remark"
+            placeholder="今天学习了什么？留下一点记录吧"
+            rows="3"
+          />
+        </div>
+        <button
+          class="btn-large"
+          :disabled="checkedIn || loading"
+          @click="handleCheckin"
+        >
+          {{ loading ? '打卡中...' : checkedIn ? '今日已打卡' : '立即打卡' }}
+        </button>
+      </div>
+
+      <div class="content-grid">
+        <article class="content-card">
+          <h3>打卡日历</h3>
+          <div class="calendar-grid">
+            <div
+              v-for="(week, weekIndex) in calendar"
+              :key="weekIndex"
+              class="calendar-week"
+            >
+              <div
+                v-for="(day, dayIndex) in week"
+                :key="dayIndex"
+                :class="['calendar-day', { checked: day.checked, empty: day.empty }]"
+              >
+                {{ day.date }}
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article class="content-card history-card">
+          <h3>最近打卡记录</h3>
+          <div class="history-list">
+            <div v-for="item in checkinList.slice(0, 5)" :key="item.id" class="history-item">
+              <div>
+                <div class="history-date">{{ item.checkinDate }}</div>
+                <div v-if="item.remark" class="history-remark">{{ item.remark }}</div>
+              </div>
+              <el-tag type="success">已打卡</el-tag>
+            </div>
+          </div>
+        </article>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.home-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
+  color: #1a1a1a;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.glass-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: rgba(250, 250, 250, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 50;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.nav-btn-text {
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-btn-text:hover {
+  color: #000;
+}
+
+.nav-btn-primary {
+  background: #000;
+  color: #fff;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.nav-btn-secondary {
+  background: transparent;
+  color: #000;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.checkin-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 120px 20px 60px;
+}
+
+.vibe-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  border-radius: 40px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  color: #4b5563;
+  font-size: 14px;
+  margin-bottom: 32px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+}
+
+.pulse-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f59e0b;
+  animation: pulse 2s infinite;
+}
+
+.pulse-dot.green {
+  background: #10b981;
+}
+
+.pulse-dot.orange {
+  background: #f59e0b;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.checkin-title {
+  font-size: 64px;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -2px;
+  margin: 0 0 24px 0;
+}
+
+.text-gradient {
+  background: linear-gradient(90deg, #111, #888);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.checkin-subtitle {
+  font-size: 20px;
+  color: #6b7280;
+  max-width: 600px;
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  width: min(600px, 100%);
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 24px 18px;
+  text-align: center;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
+}
+
+.stat-number {
+  font-size: 48px;
+  font-weight: 800;
+  color: #111827;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.checkin-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 32px;
+  width: min(600px, 100%);
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  margin-bottom: 32px;
+}
+
+.form-group {
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+  background: rgba(255, 255, 255, 0.5);
+  resize: vertical;
+  font-family: inherit;
+}
+
+.form-group textarea:focus {
+  outline: none;
+  border-color: #000;
+}
+
+.btn-large {
+  background: #000;
+  color: #fff;
+  padding: 18px 40px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.btn-large:hover:not(:disabled) {
+  transform: scale(1.02);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+}
+
+.btn-large:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.content-grid {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  width: min(900px, 100%);
+}
+
+.content-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 24px;
+  text-align: left;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.content-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
+}
+
+.content-card h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  color: #111827;
+}
+
+.calendar-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.calendar-week {
+  display: flex;
+  gap: 4px;
+}
+
+.calendar-day {
+  width: calc(100% / 7 - 4px * 6 / 7);
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: default;
+  color: #1a1a1a;
+}
+
+.calendar-day.checked {
+  background: #10b981;
+  color: #fff;
+}
+
+.calendar-day.empty {
+  background: transparent;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.history-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.history-item:last-child {
+  border-bottom: none;
+}
+
+.history-date {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+}
+
+.history-remark {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.history-card {
+  grid-column: span 1;
+}
+</style>
+
diff --git a/frontend/src/views/home/Home.vue b/frontend/src/views/home/Home.vue
index f9831e7..cda17a1 100644
--- a/frontend/src/views/home/Home.vue
+++ b/frontend/src/views/home/Home.vue
@@ -1,9 +1,11 @@
-<template>
+<template>
   <div class="home-layout">
     <nav class="glass-nav">
       <div class="logo">MindSpace.</div>
       <div class="nav-links">
-        <span class="nav-btn-text">探索</span>
+        <span class="nav-btn-text" @click="goToHome">首页</span>
+        <span class="nav-btn-text" @click="goToCheckin">每日打卡</span>
+        <button class="nav-btn-secondary" @click="goToProfile">个人中心</button>
         <button class="nav-btn-primary" @click="handleLogout">退出登录</button>
       </div>
     </nav>
@@ -53,6 +55,18 @@ const handleLogout = () => {
   router.push('/login')
 }
 
+const goToHome = () => {
+  router.push('/')
+}
+
+const goToCheckin = () => {
+  router.push('/checkin')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
 const startLearning = () => {
   alert('功能即将上线！')
 }
@@ -130,6 +144,24 @@ const startLearning = () => {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
+.nav-btn-secondary {
+  background: transparent;
+  color: #000;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.02);
+}
+
 .hero-section {
   flex: 1;
   display: flex;
diff --git a/frontend/src/views/profile/Profile.vue b/frontend/src/views/profile/Profile.vue
new file mode 100644
index 0000000..97be6ee
--- /dev/null
+++ b/frontend/src/views/profile/Profile.vue
@@ -0,0 +1,622 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { getCheckinStats } from '@/api/checkin'
+import { sendFriendRequest, handleFriendRequest, getPendingFriendRequests, getFriendList } from '@/api/friend'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const stats = ref({
+  totalDays: 0,
+  consecutiveDays: 0
+})
+const loading = ref(false)
+const friendUsername = ref('')
+const friendList = ref([])
+const pendingRequests = ref([])
+
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  localStorage.removeItem('username')
+  router.push('/login')
+}
+
+const goToHome = () => {
+  router.push('/')
+}
+
+const goToCheckin = () => {
+  router.push('/checkin')
+}
+
+const goToProfile = () => {
+  router.push('/profile')
+}
+
+const loadStats = async () => {
+  try {
+    const res = await getCheckinStats()
+    if (res.code === 200) {
+      stats.value = res.data
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('加载数据失败')
+  }
+}
+
+const loadFriends = async () => {
+  try {
+    const res = await getFriendList()
+    if (res.code === 200) {
+      friendList.value = res.data
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const loadPendingRequests = async () => {
+  try {
+    const res = await getPendingFriendRequests()
+    if (res.code === 200) {
+      pendingRequests.value = res.data
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleSendRequest = async () => {
+  if (!friendUsername.value.trim()) {
+    ElMessage.warning('请输入用户名')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await sendFriendRequest(friendUsername.value.trim())
+    if (res.code === 200) {
+      ElMessage.success(res.data)
+      friendUsername.value = ''
+      await loadFriends()
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('发送申请失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleAccept = async (requestId) => {
+  try {
+    const res = await handleFriendRequest(requestId, true)
+    if (res.code === 200) {
+      ElMessage.success(res.data)
+      await loadPendingRequests()
+      await loadFriends()
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('处理失败')
+  }
+}
+
+const handleReject = async (requestId) => {
+  try {
+    const res = await handleFriendRequest(requestId, false)
+    if (res.code === 200) {
+      ElMessage.success(res.data)
+      await loadPendingRequests()
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('处理失败')
+  }
+}
+
+const currentUsername = computed(() => {
+  return localStorage.getItem('username') || ''
+})
+
+onMounted(() => {
+  loadStats()
+  loadFriends()
+  loadPendingRequests()
+})
+</script>
+
+<template>
+  <div class="home-layout">
+    <nav class="glass-nav">
+      <div class="logo">MindSpace.</div>
+      <div class="nav-links">
+        <span class="nav-btn-text" @click="goToHome">首页</span>
+        <span class="nav-btn-text" @click="goToCheckin">每日打卡</span>
+        <button class="nav-btn-secondary" @click="goToProfile">个人中心</button>
+        <button class="nav-btn-primary" @click="handleLogout">退出登录</button>
+      </div>
+    </nav>
+
+    <main class="profile-section">
+      <div class="profile-card">
+        <div class="avatar-circle">
+          <span class="avatar-text">{{ currentUsername.charAt(0).toUpperCase() }}</span>
+        </div>
+        <h1 class="username">{{ currentUsername }}</h1>
+        <p class="welcome">欢迎回来，持续学习中</p>
+      </div>
+
+      <div class="stats-grid">
+        <article class="stat-card">
+          <div class="stat-number">{{ stats.totalDays }}</div>
+          <div class="stat-label">总打卡天数</div>
+        </article>
+        <article class="stat-card">
+          <div class="stat-number">{{ stats.consecutiveDays }}</div>
+          <div class="stat-label">连续打卡</div>
+        </article>
+      </div>
+
+      <div class="content-grid">
+        <article class="content-card">
+          <h3>添加好友</h3>
+          <div class="add-friend-form">
+            <input
+              v-model="friendUsername"
+              type="text"
+              placeholder="输入好友用户名"
+              class="friend-input"
+              @keyup.enter="handleSendRequest"
+            />
+            <button
+              class="btn-add"
+              :disabled="loading"
+              @click="handleSendRequest"
+            >
+              {{ loading ? '发送中...' : '发送申请' }}
+            </button>
+          </div>
+        </article>
+
+        <article class="content-card request-list-card" v-if="pendingRequests.length > 0">
+          <h3>待处理申请 ({{ pendingRequests.length }})</h3>
+          <div class="request-list">
+            <div v-for="request in pendingRequests" :key="request.id" class="request-item">
+              <div class="request-info">
+                <div class="request-avatar">
+                  <span>{{ request.fromUsername.charAt(0).toUpperCase() }}</span>
+                </div>
+                <div>
+                  <div class="request-name">{{ request.fromUsername }}</div>
+                  <div class="request-time">请求添加你为好友</div>
+                </div>
+              </div>
+              <div class="request-actions">
+                <button class="btn-accept" @click="handleAccept(request.id)">同意</button>
+                <button class="btn-reject" @click="handleReject(request.id)">拒绝</button>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article class="content-card friend-list-card">
+          <h3>好友列表</h3>
+          <div v-if="friendList.length === 0" class="empty-state">
+            还没有好友
+          </div>
+          <div v-else class="friend-list">
+            <div v-for="friend in friendList" :key="friend.id" class="friend-item">
+              <div class="friend-avatar">
+                <span>{{ friend.username.charAt(0).toUpperCase() }}</span>
+              </div>
+              <div class="friend-info">
+                <div class="friend-name">{{ friend.username }}</div>
+                <div class="friend-stats">
+                  已打卡 {{ friend.totalCheckinDays }} 天
+                </div>
+              </div>
+              <el-tag type="success">已添加</el-tag>
+            </div>
+          </div>
+        </article>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.home-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
+  color: #1a1a1a;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.glass-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: rgba(250, 250, 250, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 50;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.nav-btn-text {
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.nav-btn-text:hover {
+  color: #000;
+}
+
+.nav-btn-secondary {
+  background: transparent;
+  color: #000;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.nav-btn-primary {
+  background: #000;
+  color: #fff;
+  padding: 10px 24px;
+  border-radius: 40px;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.profile-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120px 20px 60px;
+}
+
+.profile-card {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.avatar-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+
+.avatar-text {
+  font-size: 40px;
+  font-weight: 800;
+  color: #fff;
+}
+
+.username {
+  font-size: 32px;
+  font-weight: 800;
+  margin: 0 0 8px 0;
+  color: #111827;
+}
+
+.welcome {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  width: min(600px, 100%);
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 24px 18px;
+  text-align: center;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
+}
+
+.stat-number {
+  font-size: 48px;
+  font-weight: 800;
+  color: #111827;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  width: min(900px, 100%);
+}
+
+.content-card {
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 20px;
+  padding: 24px;
+  text-align: left;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.content-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
+}
+
+.content-card h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  color: #111827;
+}
+
+.add-friend-form {
+  display: flex;
+  gap: 12px;
+}
+
+.friend-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 14px;
+  background: rgba(255, 255, 255, 0.5);
+  transition: border-color 0.2s;
+}
+
+.friend-input:focus {
+  outline: none;
+  border-color: #000;
+}
+
+.btn-add {
+  background: #000;
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 12px;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-add:hover:not(:disabled) {
+  transform: scale(1.02);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.btn-add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.empty-state {
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+  padding: 40px 0;
+}
+
+.friend-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.friend-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: background 0.2s;
+}
+
+.friend-item:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.friend-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #10b981, #059669);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.friend-info {
+  flex: 1;
+}
+
+.friend-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 2px;
+}
+
+.friend-stats {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.friend-list-card {
+  grid-column: span 1;
+}
+
+.request-list-card {
+  grid-column: 1 / -1;
+}
+
+.request-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.request-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.request-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.request-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.request-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 2px;
+}
+
+.request-time {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.request-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-accept {
+  background: #10b981;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-accept:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.btn-reject {
+  background: transparent;
+  color: #ef4444;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #ef4444;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-reject:hover {
+  background: #ef4444;
+  color: #fff;
+}
+</style>
-- 
2.34.1


From e6a74f6a30adcfe086409e9fa4bc20cd42058b0e Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 22:39:44 +0800
Subject: [PATCH 06/27] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=89=8D=E7=AB=AFworkf?=
 =?UTF-8?q?low?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/frontend-build.yml | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 .github/workflows/frontend-build.yml

diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
new file mode 100644
index 0000000..54d18d7
--- /dev/null
+++ b/.github/workflows/frontend-build.yml
@@ -0,0 +1,28 @@
+name: Frontend CI
+
+on:
+  push:
+    branches: [ main ,TEST]
+  pull_request:
+    branches: [ main ,TEST]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+
+    - name: Install dependencies
+      working-directory: ./frontend
+      run: npm ci
+
+    - name: Build
+      working-directory: ./frontend
+      run: npm run build
-- 
2.34.1


From 61365437a2c1767750bc57aa7ab49a47fc98881f Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 22:43:28 +0800
Subject: [PATCH 07/27] test

---
 .github/workflows/frontend-build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
index 54d18d7..6c4c8ea 100644
--- a/.github/workflows/frontend-build.yml
+++ b/.github/workflows/frontend-build.yml
@@ -21,7 +21,7 @@ jobs:
 
     - name: Install dependencies
       working-directory: ./frontend
-      run: npm ci
+      run: npm install
 
     - name: Build
       working-directory: ./frontend
-- 
2.34.1


From 6212c1e240a43bdfb986859cb2e4e983881934d5 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Wed, 1 Apr 2026 22:46:03 +0800
Subject: [PATCH 08/27] =?UTF-8?q?=E5=AE=8C=E5=96=84workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/frontend-build.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
index 6c4c8ea..f152f29 100644
--- a/.github/workflows/frontend-build.yml
+++ b/.github/workflows/frontend-build.yml
@@ -17,7 +17,6 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: '20'
-        cache: 'npm'
 
     - name: Install dependencies
       working-directory: ./frontend
-- 
2.34.1


From 91187bbb80ce0a1064b579f214660cb5577d9ca9 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Thu, 2 Apr 2026 15:49:07 +0800
Subject: [PATCH 09/27] =?UTF-8?q?=E5=A2=9E=E5=8A=A0docker=E9=83=A8?=
 =?UTF-8?q?=E7=BD=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/backend-docker.yml | 34 ++++++++++++++++++++++++++++
 backend/Dockerfile                   | 19 ++++++++++++++++
 docker-compose.yml                   | 31 +++++++++++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 .github/workflows/backend-docker.yml
 create mode 100644 backend/Dockerfile
 create mode 100644 docker-compose.yml

diff --git a/.github/workflows/backend-docker.yml b/.github/workflows/backend-docker.yml
new file mode 100644
index 0000000..2305132
--- /dev/null
+++ b/.github/workflows/backend-docker.yml
@@ -0,0 +1,34 @@
+name: Build and Push Backend to Docker Hub
+
+on:
+  push:
+    branches: [ main ,TEST]
+    tags:
+      - 'v*'
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKER_HUB_USERNAME }}/studyingspace-backend
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./backend
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 0000000..47fdb22
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,19 @@
+FROM maven:3.9.6-eclipse-temurin-17-alpine AS builder
+
+WORKDIR /app
+
+COPY pom.xml .
+RUN mvn dependency:go-offline -B
+
+COPY src ./src
+RUN mvn clean package -DskipTests
+
+FROM eclipse-temurin:17-jre-alpine
+
+WORKDIR /app
+
+COPY --from=builder /app/target/*.jar app.jar
+
+EXPOSE 8080
+
+ENTRYPOINT ["java", "-jar", "app.jar"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..52252ae
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,31 @@
+version: '3.8'
+
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: studyingspace-postgres
+    environment:
+      POSTGRES_DB: studyingspace
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: 123456
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    restart: unless-stopped
+
+  backend:
+    image: ${DOCKER_HUB_USERNAME:-yourusername}/studyingspace-backend:latest
+    container_name: studyingspace-backend
+    ports:
+      - "8080:8080"
+    depends_on:
+      - postgres
+    environment:
+      SPRING_DATASOURCE_URL: jdbc:postgresql://postgres:5432/studyingspace
+      SPRING_DATASOURCE_USERNAME: postgres
+      SPRING_DATASOURCE_PASSWORD: postgres
+    restart: unless-stopped
+
+volumes:
+  postgres-data:
-- 
2.34.1


From f7cde13d78503040c897e19c305d9bc7231a1836 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Thu, 2 Apr 2026 16:01:33 +0800
Subject: [PATCH 10/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9dockerfile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/Dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/Dockerfile b/backend/Dockerfile
index 47fdb22..2d04aa0 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM maven:3.9.6-eclipse-temurin-17-alpine AS builder
+FROM maven:3.9.6-eclipse-temurin-21-alpine AS builder
 
 WORKDIR /app
 
@@ -8,7 +8,7 @@ RUN mvn dependency:go-offline -B
 COPY src ./src
 RUN mvn clean package -DskipTests
 
-FROM eclipse-temurin:17-jre-alpine
+FROM eclipse-temurin:21-jre-alpine
 
 WORKDIR /app
 
-- 
2.34.1


From 2be54639f85df5b1ac51d0d556d9c986d82cc49e Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 17:31:13 +0800
Subject: [PATCH 11/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9docker=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/main/resources/application.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
index fa8b5f8..4046a07 100644
--- a/backend/src/main/resources/application.yml
+++ b/backend/src/main/resources/application.yml
@@ -7,9 +7,9 @@ spring:
 #数据库账号密码
   datasource:
     driver-class-name: org.postgresql.Driver
-    url: jdbc:postgresql://localhost:5432/StudyingSystem
-    username: postgres
-    password: 123456
+    url: ${SPRING_DATASOURCE_URL:jdbc:postgresql://localhost:5432/StudyingSystem}
+    username: ${SPRING_DATASOURCE_USERNAME:postgres}
+    password: ${SPRING_DATASOURCE_PASSWORD:123456}
 
   jpa:
     hibernate:
-- 
2.34.1


From 5d244288e449dcc65d82b19ad8300c6aa87f9687 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 19:48:20 +0800
Subject: [PATCH 12/27] =?UTF-8?q?=E5=A2=9E=E5=8A=A0docker=E9=83=A8?=
 =?UTF-8?q?=E7=BD=B2=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md          | 62 ++++++++++++++++++++++++++++++++++++++++++++++
 docker-compose.yml |  4 +--
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 022a601..d40c0e7 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,68 @@ StudyingSpace/
 
 ### 运行项目
 
+## 🐳 Docker 快速部署
+
+你可以直接使用 Docker 一键部署整个应用，无需本地配置 Java/Node.js/PostgreSQL。
+
+### 前置要求
+- 安装 [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+- Docker Desktop 已启动
+
+### 部署步骤
+
+1. 克隆项目到本地：
+```bash
+git clone https://github.com/hetianci/StudyingSpace.git
+cd StudyingSpace
+```
+
+2. 直接运行：
+```bash
+docker-compose up -d
+```
+
+项目中已经包含 `docker-compose.yml`，会自动从 Docker Hub 拉取镜像并启动。
+
+### 访问应用
+
+启动成功后，打开浏览器访问：
+
+- 后端 API: http://localhost:8080
+- Swagger API 文档: http://localhost:8080/swagger-ui.html
+
+### 常用命令
+
+```bash
+# 查看运行状态
+docker-compose ps
+
+# 查看后端日志
+docker-compose logs backend
+
+# 实时查看日志
+docker-compose logs -f backend
+
+# 停止所有容器
+docker-compose down
+
+# 停止但保留数据
+docker-compose stop
+
+# 重新启动
+docker-compose start
+
+# 更新到最新镜像
+docker-compose pull
+docker-compose up -d
+```
+
+### 注意事项
+
+- 如果本地 5432 端口已被占用，需要先停止本地 PostgreSQL 服务，或者修改 `docker-compose.yml` 中的端口映射
+- 数据库数据会保存在 Docker 卷 `postgres-data` 中，即使删除容器数据也不会丢失
+- 首次启动会自动拉取镜像，需要等待一段时间
+
 
 ## 📖 使用文档
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 52252ae..17a8066 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,7 +15,7 @@ services:
     restart: unless-stopped
 
   backend:
-    image: ${DOCKER_HUB_USERNAME:-yourusername}/studyingspace-backend:latest
+    image: hetianci/studyingspace-backend:TEST
     container_name: studyingspace-backend
     ports:
       - "8080:8080"
@@ -24,7 +24,7 @@ services:
     environment:
       SPRING_DATASOURCE_URL: jdbc:postgresql://postgres:5432/studyingspace
       SPRING_DATASOURCE_USERNAME: postgres
-      SPRING_DATASOURCE_PASSWORD: postgres
+      SPRING_DATASOURCE_PASSWORD: 123456
     restart: unless-stopped
 
 volumes:
-- 
2.34.1


From 348df05c19b739a88139a82fffa635a39b08d26d Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 20:11:53 +0800
Subject: [PATCH 13/27] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=83=A8=E7=BD=B2?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..bd63643
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,21 @@
+name: Deploy to Server
+
+on:
+  push:
+    branches: [ main,TEST ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to server
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SERVER_SSH_PRIVATE_KEY }}
+          script: |
+            cd /root/StudyingSpace
+            git pull
+            docker compose pull
+            docker compose up -d
-- 
2.34.1


From 9a4b63c9f5c408b16181f424e01667d11b2b91c4 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 20:34:56 +0800
Subject: [PATCH 14/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9workflow=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index bd63643..304eeab 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ jobs:
           username: ${{ secrets.SERVER_USER }}
           key: ${{ secrets.SERVER_SSH_PRIVATE_KEY }}
           script: |
-            cd /root/StudyingSpace
+            cd /my_project/StudyingSpace
             git pull
             docker compose pull
             docker compose up -d
-- 
2.34.1


From 6117a4f5b47037c62302956b21e539f0e81f7649 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 20:37:30 +0800
Subject: [PATCH 15/27] =?UTF-8?q?=E8=B0=83=E8=AF=95workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 304eeab..37ab9c3 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ jobs:
           username: ${{ secrets.SERVER_USER }}
           key: ${{ secrets.SERVER_SSH_PRIVATE_KEY }}
           script: |
-            cd /my_project/StudyingSpace
+            cd my_project/StudyingSpace
             git pull
             docker compose pull
             docker compose up -d
-- 
2.34.1


From cd33565b55ea9442fb4ac2f0997fe9e4532607ad Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 20:52:59 +0800
Subject: [PATCH 16/27] TEST

---
 docker-compose.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 17a8066..6d35a97 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   postgres:
     image: postgres:15-alpine
-- 
2.34.1


From 6f63f8847ba95d20d50e7e5503dc569938eb0614 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 21:10:05 +0800
Subject: [PATCH 17/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9dockerfile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md          | 41 +++++++++++++++++++++++++----------------
 backend/Dockerfile |  4 ++--
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index d40c0e7..402ebfa 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,25 @@
 # StudyingSpace - 个人学习空间
 
 ## 📖 项目简介
+
 个人学习空间，帮助学习者记录学习过程、管理学习笔记，打造个性化的学习环境。
 
 ## ✨ 功能特性
 
 ### 🔐 用户系统
+
 - [ ] 用户注册：创建个人账号
 - [ ] 用户登录：安全登录个人空间
 
 ### 📅 每日打卡
+
 - [ ] 每日学习打卡记录
 - [ ] 打卡日历展示
 - [ ] 连续打卡统计
 - [ ] 学习时长记录
 
 ### 📝 笔记管理
+
 - [ ] 笔记导入：支持从多种格式导入笔记
 - [ ] 笔记导出：将笔记导出为常见格式
 - [ ] 笔记分类与整理
@@ -23,15 +27,18 @@
 ## 🛠️ 技术栈
 
 ### 前端
+
 - **框架**: Vue 3
 - **构建工具**: Vite
 
 ### 后端
+
 - **框架**: Spring Boot
 - **语言**: Java
 - **数据库**: PostgreSQL
 
 ## 📁 项目结构
+
 项目采用前后端分离架构，代码分别存放于两个目录：
 
 ```
@@ -43,13 +50,13 @@ StudyingSpace/
 ## 🚀 快速开始
 
 ### 环境要求
+
 - Node.js (前端)
 - JDK 21+ (后端)
 - PostgreSQL
 
 ### 安装步骤
 
-
 ### 运行项目
 
 ## 🐳 Docker 快速部署
@@ -57,20 +64,23 @@ StudyingSpace/
 你可以直接使用 Docker 一键部署整个应用，无需本地配置 Java/Node.js/PostgreSQL。
 
 ### 前置要求
+
 - 安装 [Docker Desktop](https://www.docker.com/products/docker-desktop/)
 - Docker Desktop 已启动
 
 ### 部署步骤
 
 1. 克隆项目到本地：
+
 ```bash
 git clone https://github.com/hetianci/StudyingSpace.git
 cd StudyingSpace
 ```
 
-2. 直接运行：
+1. 直接运行：
+
 ```bash
-docker-compose up -d
+docker compose up -d
 ```
 
 项目中已经包含 `docker-compose.yml`，会自动从 Docker Hub 拉取镜像并启动。
@@ -79,33 +89,33 @@ docker-compose up -d
 
 启动成功后，打开浏览器访问：
 
-- 后端 API: http://localhost:8080
-- Swagger API 文档: http://localhost:8080/swagger-ui.html
+- 后端 API: <http://localhost:8080>
+- Swagger API 文档: <http://localhost:8080/swagger-ui.html>
 
 ### 常用命令
 
 ```bash
 # 查看运行状态
-docker-compose ps
+docker compose ps
 
 # 查看后端日志
-docker-compose logs backend
+docker compose logs backend
 
 # 实时查看日志
-docker-compose logs -f backend
+docker compose logs -f backend
 
 # 停止所有容器
-docker-compose down
+docker compose down
 
 # 停止但保留数据
-docker-compose stop
+docker compose stop
 
 # 重新启动
-docker-compose start
+docker compose start
 
 # 更新到最新镜像
-docker-compose pull
-docker-compose up -d
+docker compose pull
+docker compose up -d
 ```
 
 ### 注意事项
@@ -114,12 +124,12 @@ docker-compose up -d
 - 数据库数据会保存在 Docker 卷 `postgres-data` 中，即使删除容器数据也不会丢失
 - 首次启动会自动拉取镜像，需要等待一段时间
 
-
 ## 📖 使用文档
 
-
 ### 用户注册登录
+
 ### 每日打卡使用
+
 ### 笔记导入导出
 
 ## 📈 开发计划
@@ -131,5 +141,4 @@ docker-compose up -d
 
 ## 🤝 贡献指南
 
-
 ## 📄 许可证
diff --git a/backend/Dockerfile b/backend/Dockerfile
index 2d04aa0..521a50a 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM maven:3.9.6-eclipse-temurin-21-alpine AS builder
+FROM registry.aliyuncs.com/ops-any/maven:3.9.6-eclipse-temurin-21-alpine AS builder
 
 WORKDIR /app
 
@@ -8,7 +8,7 @@ RUN mvn dependency:go-offline -B
 COPY src ./src
 RUN mvn clean package -DskipTests
 
-FROM eclipse-temurin:21-jre-alpine
+FROM registry.aliyuncs.com/ops-any/eclipse-temurin:21-jre-alpine
 
 WORKDIR /app
 
-- 
2.34.1


From a7c64975b747bb96bec166bf2474459550af25a1 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 21:14:34 +0800
Subject: [PATCH 18/27] test

---
 backend/Dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/Dockerfile b/backend/Dockerfile
index 521a50a..2d04aa0 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM registry.aliyuncs.com/ops-any/maven:3.9.6-eclipse-temurin-21-alpine AS builder
+FROM maven:3.9.6-eclipse-temurin-21-alpine AS builder
 
 WORKDIR /app
 
@@ -8,7 +8,7 @@ RUN mvn dependency:go-offline -B
 COPY src ./src
 RUN mvn clean package -DskipTests
 
-FROM registry.aliyuncs.com/ops-any/eclipse-temurin:21-jre-alpine
+FROM eclipse-temurin:21-jre-alpine
 
 WORKDIR /app
 
-- 
2.34.1


From dacc21fe7592c0dccc08e5993adac9dc03268080 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 21:56:06 +0800
Subject: [PATCH 19/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 37ab9c3..15c2b27 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,13 +1,34 @@
-name: Deploy to Server
+name: Build and Deploy to Server
 
 on:
   push:
     branches: [ main,TEST ]
 
 jobs:
-  deploy:
+  build-and-deploy:
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build Docker image
+        run: |
+          cd backend
+          docker build -t studyingspace-backend:TEST .
+
+      - name: Save image to tar
+        run: |
+          docker save -o studyingspace-backend.tar studyingspace-backend:TEST
+
+      - name: Copy image to server
+        uses: appleboy/scp-action@v0.1.4
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SERVER_SSH_PRIVATE_KEY }}
+          source: "studyingspace-backend.tar"
+          target: "my_project/StudyingSpace/"
+
       - name: Deploy to server
         uses: appleboy/ssh-action@v1.0.3
         with:
@@ -17,5 +38,6 @@ jobs:
           script: |
             cd my_project/StudyingSpace
             git pull
-            docker compose pull
+            docker load -i studyingspace-backend.tar
             docker compose up -d
+            rm -f studyingspace-backend.tar
-- 
2.34.1


From 9d6abe3d96ba8de8d051a4d01c59fd583062c6af Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:02:36 +0800
Subject: [PATCH 20/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 15c2b27..13ea759 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -14,11 +14,11 @@ jobs:
       - name: Build Docker image
         run: |
           cd backend
-          docker build -t studyingspace-backend:TEST .
+          docker build -t hetianci/studyingspace-backend:TEST .
 
       - name: Save image to tar
         run: |
-          docker save -o studyingspace-backend.tar studyingspace-backend:TEST
+          docker save -o studyingspace-backend.tar hetianci/studyingspace-backend:TEST
 
       - name: Copy image to server
         uses: appleboy/scp-action@v0.1.4
-- 
2.34.1


From 7beacf3487c722c51a3db1e1f053a61408db7383 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:08:34 +0800
Subject: [PATCH 21/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=AB=AF=E5=8F=A3?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 6d35a97..401f295 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -16,7 +16,7 @@ services:
     image: hetianci/studyingspace-backend:TEST
     container_name: studyingspace-backend
     ports:
-      - "8080:8080"
+      - "8081:8080"
     depends_on:
       - postgres
     environment:
-- 
2.34.1


From a2d806c876db9320a7a9eb5e908b2856387f888e Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:19:06 +0800
Subject: [PATCH 22/27] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=83=A8=E7=BD=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 20 +++++++++++++++-----
 docker-compose.yml           |  9 +++++++++
 frontend/Dockerfile          | 18 ++++++++++++++++++
 frontend/nginx.conf          | 18 ++++++++++++++++++
 4 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/nginx.conf

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 13ea759..987d3db 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -11,22 +11,31 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Build Docker image
+      - name: Build backend image
         run: |
           cd backend
           docker build -t hetianci/studyingspace-backend:TEST .
 
-      - name: Save image to tar
+      - name: Build frontend image
+        run: |
+          cd frontend
+          docker build -t hetianci/studyingspace-frontend:TEST .
+
+      - name: Save backend image to tar
         run: |
           docker save -o studyingspace-backend.tar hetianci/studyingspace-backend:TEST
 
-      - name: Copy image to server
+      - name: Save frontend image to tar
+        run: |
+          docker save -o studyingspace-frontend.tar hetianci/studyingspace-frontend:TEST
+
+      - name: Copy images to server
         uses: appleboy/scp-action@v0.1.4
         with:
           host: ${{ secrets.SERVER_HOST }}
           username: ${{ secrets.SERVER_USER }}
           key: ${{ secrets.SERVER_SSH_PRIVATE_KEY }}
-          source: "studyingspace-backend.tar"
+          source: "studyingspace-backend.tar,studyingspace-frontend.tar"
           target: "my_project/StudyingSpace/"
 
       - name: Deploy to server
@@ -39,5 +48,6 @@ jobs:
             cd my_project/StudyingSpace
             git pull
             docker load -i studyingspace-backend.tar
+            docker load -i studyingspace-frontend.tar
             docker compose up -d
-            rm -f studyingspace-backend.tar
+            rm -f studyingspace-backend.tar studyingspace-frontend.tar
diff --git a/docker-compose.yml b/docker-compose.yml
index 401f295..4511f86 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -25,5 +25,14 @@ services:
       SPRING_DATASOURCE_PASSWORD: 123456
     restart: unless-stopped
 
+  frontend:
+    image: hetianci/studyingspace-frontend:TEST
+    container_name: studyingspace-frontend
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    restart: unless-stopped
+
 volumes:
   postgres-data:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..8174735
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:21-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000..8142de7
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,18 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://backend:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
-- 
2.34.1


From bdbb99a84c185cde7550eb4c5bb7c40fcc5ce7a6 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:20:30 +0800
Subject: [PATCH 23/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=AB=AF=E5=8F=A3?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 4511f86..06067e8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -29,7 +29,7 @@ services:
     image: hetianci/studyingspace-frontend:TEST
     container_name: studyingspace-frontend
     ports:
-      - "80:80"
+      - "8000:80"
     depends_on:
       - backend
     restart: unless-stopped
-- 
2.34.1


From 74b856422e8753c3819bf4a827371480dc744077 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:23:12 +0800
Subject: [PATCH 24/27] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=83=A8=E7=BD=B2?=
 =?UTF-8?q?=E5=88=B0docker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/frontend-docker.yml | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 .github/workflows/frontend-docker.yml

diff --git a/.github/workflows/frontend-docker.yml b/.github/workflows/frontend-docker.yml
new file mode 100644
index 0000000..da02c17
--- /dev/null
+++ b/.github/workflows/frontend-docker.yml
@@ -0,0 +1,34 @@
+name: Build and Push Frontend to Docker Hub
+
+on:
+  push:
+    branches: [ main ,TEST]
+    tags:
+      - 'v*'
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKER_HUB_USERNAME }}/studyingspace-frontend
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
-- 
2.34.1


From 5c4e754172a1c6596b643e58a0bfe17a2415313f Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:41:24 +0800
Subject: [PATCH 25/27] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/studyingspace/config/SecurityConfig.java  |  2 +-
 frontend/src/views/home/Home.vue                  | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
index 28c33e1..f6c1179 100644
--- a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
+++ b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
@@ -48,7 +48,7 @@ public class SecurityConfig {
     @Bean
     public CorsConfigurationSource corsConfigurationSource() {
         CorsConfiguration configuration = new CorsConfiguration();
-        configuration.setAllowedOrigins(Arrays.asList("http://localhost:5173"));
+        configuration.setAllowedOrigins(Arrays.asList("*"));
         configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
         configuration.setAllowedHeaders(Arrays.asList("*"));
         configuration.setAllowCredentials(true);
diff --git a/frontend/src/views/home/Home.vue b/frontend/src/views/home/Home.vue
index cda17a1..c0fefe7 100644
--- a/frontend/src/views/home/Home.vue
+++ b/frontend/src/views/home/Home.vue
@@ -5,8 +5,9 @@
       <div class="nav-links">
         <span class="nav-btn-text" @click="goToHome">首页</span>
         <span class="nav-btn-text" @click="goToCheckin">每日打卡</span>
-        <button class="nav-btn-secondary" @click="goToProfile">个人中心</button>
-        <button class="nav-btn-primary" @click="handleLogout">退出登录</button>
+        <button v-if="isLoggedIn" class="nav-btn-secondary" @click="goToProfile">个人中心</button>
+        <button v-if="isLoggedIn" class="nav-btn-primary" @click="handleLogout">退出登录</button>
+        <button v-else class="nav-btn-primary" @click="goToLogin">登录</button>
       </div>
     </nav>
 
@@ -46,8 +47,14 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
 
 const router = useRouter()
+const isLoggedIn = ref(false)
+
+onMounted(() => {
+  isLoggedIn.value = !!localStorage.getItem('token')
+})
 
 const handleLogout = () => {
   localStorage.removeItem('token')
@@ -70,6 +77,10 @@ const goToProfile = () => {
 const startLearning = () => {
   alert('功能即将上线！')
 }
+
+const goToLogin = () => {
+  router.push('/login')
+}
 </script>
 
 
-- 
2.34.1


From f54ac097097b5a6a4f1c6104f4cc3548e6710ced Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 22:47:19 +0800
Subject: [PATCH 26/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=89=E5=85=A8?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/java/com/studyingspace/config/SecurityConfig.java  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
index f6c1179..5565bb3 100644
--- a/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
+++ b/backend/src/main/java/com/studyingspace/config/SecurityConfig.java
@@ -48,7 +48,7 @@ public class SecurityConfig {
     @Bean
     public CorsConfigurationSource corsConfigurationSource() {
         CorsConfiguration configuration = new CorsConfiguration();
-        configuration.setAllowedOrigins(Arrays.asList("*"));
+        configuration.addAllowedOriginPattern("*");
         configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
         configuration.setAllowedHeaders(Arrays.asList("*"));
         configuration.setAllowCredentials(true);
-- 
2.34.1


From 3088adabd090facf5b44728468554abbc689c477 Mon Sep 17 00:00:00 2001
From: HeTianci <a2647915766@outlook.com>
Date: Fri, 3 Apr 2026 23:24:39 +0800
Subject: [PATCH 27/27] =?UTF-8?q?=E4=BF=AE=E6=94=B9workflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 987d3db..12733bf 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -2,7 +2,7 @@ name: Build and Deploy to Server
 
 on:
   push:
-    branches: [ main,TEST ]
+    branches: [ main ]
 
 jobs:
   build-and-deploy:
-- 
2.34.1