frontend refactor login page

docs/colors.md

@@ -0,0 +1,4 @@
+primary-color: #4da30d
+primary-color-light: #5fc910
+primary-color-dark: #377508
+accent-color: #e7000b

frontend/eslint.config.ts

@@ -21,6 +21,14 @@ export default defineConfigWithVueTs(
   pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
 
+  {
+    name: 'app/vue-rules',
+    rules: {
+      'vue/block-lang': 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+
   {
     ...pluginVitest.configs.recommended,
     files: ['src/**/__tests__/*'],

frontend/src/App.vue

@@ -1,85 +1,11 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
   <RouterView />
 </template>
 
 <style scoped>
-header {
+/* 应用全局样式可以在这里添加 */
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
 </style>

frontend/src/assets/base.css

@@ -1,73 +1,16 @@
-/* color palette from <https://github.com/vuejs/theme> */
+/* 项目主题色 CSS 变量 */
 :root {
-  --vt-c-white: #ffffff;
+  --primary-color: #4da30d;
-  --vt-c-white-soft: #f8f8f8;
+  --primary-color-light: #5fc910;
-  --vt-c-white-mute: #f2f2f2;
+  --primary-color-dark: #377508;
-
+  --accent-color: #e7000b;
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
 }
 
+/* 基础样式 */
 body {
   min-height: 100vh;
-  color: var(--color-text);
+  margin: 0;
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
   font-family:
-    Inter,
     -apple-system,
     BlinkMacSystemFont,
     'Segoe UI',
@@ -79,8 +22,6 @@ body {
     'Droid Sans',
     'Helvetica Neue',
     sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

frontend/src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

frontend/src/assets/main.css

@@ -1,36 +1,9 @@
 @import './base.css';
 @import 'tailwindcss';
 
+/* 应用全局样式 */
 #app {
-  max-width: 1280px;
+  width: 100%;
-  margin: 0 auto;
+  height: 100%;
-  padding: 2rem;
   font-weight: normal;
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

frontend/src/components/Brand.vue

@@ -0,0 +1,59 @@
+<script setup>
+import logoImg from '@/assets/logo.png'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'medium', // small, medium, large
+  },
+  showAppName: {
+    type: Boolean,
+    default: false,
+  },
+  showSlogan: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const sizeClasses = {
+  small: 'h-8',
+  medium: 'h-12',
+  large: 'h-16',
+}
+
+const textSizeClasses = {
+  small: 'text-xl',
+  medium: 'text-2xl',
+  large: 'text-3xl',
+}
+
+const sloganSizeClasses = {
+  small: 'text-xs',
+  medium: 'text-sm',
+  large: 'text-base',
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <img :src="logoImg" alt="DataFlow Logo" :class="['object-contain', sizeClasses[size]]" />
+
+    <div v-if="showAppName || showSlogan" class="flex flex-col">
+      <span
+        v-if="showAppName"
+        class="text-[#4da30d] font-bold leading-tight"
+        :class="textSizeClasses[size]"
+      >
+        DataFlow
+      </span>
+      <span
+        v-if="showSlogan"
+        class="text-gray-600 leading-tight"
+        :class="sloganSizeClasses[size]"
+      >
+        数据管理平台
+      </span>
+    </div>
+  </div>
+</template>

frontend/src/pages/login.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Brand from '@/components/Brand.vue'
+
 // 表单数据
 const formState = reactive({
   username: '',
@@ -71,161 +73,95 @@ const goToRegister = () => {
 </script>
 
 <template>
-  <div class="login-container">
+  <div class="flex flex-col lg:flex-row min-h-screen">
-    <div class="login-card">
+    <!-- 左侧图片区域 -->
-      <div class="login-header">
+    <div class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen">
-        <h1 class="login-title">用户登录</h1>
+      <img
-        <p class="login-subtitle">欢迎回到 DataFlow</p>
+        src="@/assets/images/bg.jpeg"
-      </div>
+        alt="Background"
+        class="absolute inset-0 w-full h-full object-cover"
+      />
+      <div class="absolute inset-0 bg-black/20"></div>
+    </div>
 
-      <a-form
+    <!-- 右侧表单区域 -->
-        ref="formRef"
+    <div class="w-full lg:w-1/2 flex items-center bg-white p-6 md:p-8 lg:pl-12 lg:pr-12">
-        :model="formState"
+      <div class="w-full max-w-md">
-        :rules="rules"
+        <!-- Brand Logo -->
-        layout="vertical"
+        <div class="mb-8">
-        class="login-form"
+          <Brand size="large" show-app-name />
-        @finish="handleSubmit"
+        </div>
-      >
-        <a-form-item label="用户名" name="username">
-          <a-input
-            v-model:value="formState.username"
-            size="large"
-            placeholder="请输入用户名"
-          >
-            <template #prefix>
-              <UserOutlined class="form-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
 
-        <a-form-item label="密码" name="password">
+        <!-- 表单标题 -->
-          <a-input-password
+        <div class="mb-8">
-            v-model:value="formState.password"
+          <h1 class="text-3xl font-bold text-gray-800 mb-2">用户登录</h1>
-            size="large"
+          <p class="text-gray-600">欢迎回到 DataFlow</p>
-            placeholder="请输入密码"
+        </div>
-          >
-            <template #prefix>
-              <LockOutlined class="form-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
 
-        <a-form-item>
+        <!-- 登录表单 -->
-          <div class="login-options">
+        <a-form
-            <a-checkbox v-model:checked="formState.remember">
+          ref="formRef"
-              记住我
+          :model="formState"
-            </a-checkbox>
+          :rules="rules"
-            <a-button type="link" class="forgot-password">
+          layout="vertical"
-              忘记密码？
+          @finish="handleSubmit"
+        >
+          <a-form-item label="用户名" name="username">
+            <a-input
+              v-model:value="formState.username"
+              size="large"
+              placeholder="请输入用户名"
+            >
+              <template #prefix>
+                <UserOutlined class="text-gray-400" />
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item label="密码" name="password">
+            <a-input-password
+              v-model:value="formState.password"
+              size="large"
+              placeholder="请输入密码"
+            >
+              <template #prefix>
+                <LockOutlined class="text-gray-400" />
+              </template>
+            </a-input-password>
+          </a-form-item>
+
+          <a-form-item>
+            <div class="flex justify-between items-center">
+              <a-checkbox v-model:checked="formState.remember">
+                记住我
+              </a-checkbox>
+              <a-button type="link" class="p-0 h-auto text-[#4da30d] hover:text-[#5fc910]">
+                忘记密码？
+              </a-button>
+            </div>
+          </a-form-item>
+
+          <a-form-item class="mt-6">
+            <a-button
+              type="primary"
+              html-type="submit"
+              size="large"
+              :loading="loading"
+              block
+              class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
+            >
+              登录
+            </a-button>
+          </a-form-item>
+
+          <div class="text-center mt-4">
+            <span class="text-gray-600 text-sm">还没有账户？</span>
+            <a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToRegister">
+              立即注册
             </a-button>
           </div>
-        </a-form-item>
+        </a-form>
-
+      </div>
-        <a-form-item>
-          <a-button
-            type="primary"
-            html-type="submit"
-            size="large"
-            :loading="loading"
-            block
-            class="login-button"
-          >
-            登录
-          </a-button>
-        </a-form-item>
-
-        <div class="login-footer">
-          <span class="login-footer-text">还没有账户？</span>
-          <a-button type="link" @click="goToRegister">
-            立即注册
-          </a-button>
-        </div>
-      </a-form>
     </div>
   </div>
 </template>
-
-<style scoped>
-.login-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
-}
-
-.login-card {
-  width: 100%;
-  max-width: 420px;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  padding: 40px;
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.login-title {
-  font-size: 28px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 8px 0;
-}
-
-.login-subtitle {
-  font-size: 14px;
-  color: #666;
-  margin: 0;
-}
-
-.login-form {
-  margin-top: 24px;
-}
-
-.form-icon {
-  color: #999;
-}
-
-.login-options {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.forgot-password {
-  padding: 0;
-  height: auto;
-}
-
-.login-button {
-  height: 48px;
-  font-size: 16px;
-  font-weight: 500;
-  margin-top: 8px;
-}
-
-.login-footer {
-  text-align: center;
-  margin-top: 16px;
-}
-
-.login-footer-text {
-  color: #666;
-  font-size: 14px;
-}
-
-/* 响应式设计 */
-@media (max-width: 576px) {
-  .login-card {
-    padding: 24px;
-  }
-
-  .login-title {
-    font-size: 24px;
-  }
-}
-</style>

frontend/src/pages/register.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Brand from '@/components/Brand.vue'
+
 // 表单数据
 const formState = reactive({
   username: '',
@@ -86,167 +88,114 @@ const goToLogin = () => {
 </script>
 
 <template>
-  <div class="register-container">
+  <div class="flex flex-col lg:flex-row min-h-screen">
-    <div class="register-card">
+    <!-- 左侧图片区域 -->
-      <div class="register-header">
+    <div
-        <h1 class="register-title">用户注册</h1>
+      class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen"
-        <p class="register-subtitle">创建您的 DataFlow 账户</p>
+    >
-      </div>
+      <img
+        src="@/assets/images/bg.jpeg"
+        alt="Background"
+        class="absolute inset-0 w-full h-full object-cover"
+      />
+      <div class="absolute inset-0 bg-black/20"></div>
+    </div>
 
-      <a-form
+    <!-- 右侧表单区域 -->
-        ref="formRef"
+    <div class="w-full lg:w-1/2 flex items-center justify-begain bg-white p-6 md:p-8 lg:p-12">
-        :model="formState"
+      <div class="w-full max-w-md p-4 border border-gray-300 rounded-md overflow-hidden shadow-md">
-        :rules="rules"
+        <!-- Brand Logo -->
-        layout="vertical"
+        <div class="mb-8">
-        class="register-form"
+          <Brand class="justify-center" size="large" :show-app-name="false" />
-        @finish="handleSubmit"
-      >
-        <a-form-item label="用户名" name="username">
-          <a-input
-            v-model:value="formState.username"
-            size="large"
-            placeholder="请输入用户名"
-            :maxlength="20"
-          >
-            <template #prefix>
-              <UserOutlined class="form-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
-
-        <a-form-item label="邮箱" name="email">
-          <a-input
-            v-model:value="formState.email"
-            size="large"
-            type="email"
-            placeholder="请输入邮箱地址"
-          >
-            <template #prefix>
-              <MailOutlined class="form-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
-
-        <a-form-item label="密码" name="password">
-          <a-input-password
-            v-model:value="formState.password"
-            size="large"
-            placeholder="请输入密码（至少6位）"
-            :maxlength="50"
-          >
-            <template #prefix>
-              <LockOutlined class="form-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
-
-        <a-form-item label="确认密码" name="confirmPassword">
-          <a-input-password
-            v-model:value="formState.confirmPassword"
-            size="large"
-            placeholder="请再次输入密码"
-            :maxlength="50"
-          >
-            <template #prefix>
-              <LockOutlined class="form-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
-
-        <a-form-item>
-          <a-button
-            type="primary"
-            html-type="submit"
-            size="large"
-            :loading="loading"
-            block
-            class="register-button"
-          >
-            注册
-          </a-button>
-        </a-form-item>
-
-        <div class="register-footer">
-          <span class="register-footer-text">已有账户？</span>
-          <a-button type="link" @click="goToLogin">
-            立即登录
-          </a-button>
         </div>
-      </a-form>
+
+        <!-- 表单标题 -->
+        <div class="mb-8 text-center">
+          <h1 class="text-3xl font-bold text-gray-800 mb-2">用户注册</h1>
+          <p class="text-gray-600">创建您的账户</p>
+        </div>
+
+        <!-- 注册表单 -->
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          layout="vertical"
+          @finish="handleSubmit"
+        >
+          <a-form-item label="用户名" name="username">
+            <a-input
+              v-model:value="formState.username"
+              size="large"
+              placeholder="请输入用户名"
+              :maxlength="20"
+            >
+              <template #prefix>
+                <UserOutlined class="text-gray-400" />
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item label="邮箱" name="email">
+            <a-input
+              v-model:value="formState.email"
+              size="large"
+              type="email"
+              placeholder="请输入邮箱地址"
+            >
+              <template #prefix>
+                <MailOutlined class="text-gray-400" />
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-form-item label="密码" name="password">
+            <a-input-password
+              v-model:value="formState.password"
+              size="large"
+              placeholder="请输入密码（至少6位）"
+              :maxlength="50"
+            >
+              <template #prefix>
+                <LockOutlined class="text-gray-400" />
+              </template>
+            </a-input-password>
+          </a-form-item>
+
+          <a-form-item label="确认密码" name="confirmPassword">
+            <a-input-password
+              v-model:value="formState.confirmPassword"
+              size="large"
+              placeholder="请再次输入密码"
+              :maxlength="50"
+            >
+              <template #prefix>
+                <LockOutlined class="text-gray-400" />
+              </template>
+            </a-input-password>
+          </a-form-item>
+
+          <a-form-item class="mt-6">
+            <a-button
+              type="primary"
+              html-type="submit"
+              size="large"
+              :loading="loading"
+              block
+              class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
+            >
+              注册
+            </a-button>
+          </a-form-item>
+
+          <div class="text-center mt-4">
+            <span class="text-gray-600 text-sm">已有账户？</span>
+            <a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToLogin">
+              立即登录
+            </a-button>
+          </div>
+        </a-form>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.register-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
-}
-
-.register-card {
-  width: 100%;
-  max-width: 450px;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  padding: 40px;
-}
-
-.register-header {
-  text-align: center;
-  margin-bottom: 32px;
-}
-
-.register-title {
-  font-size: 28px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 8px 0;
-}
-
-.register-subtitle {
-  font-size: 14px;
-  color: #666;
-  margin: 0;
-}
-
-.register-form {
-  margin-top: 24px;
-}
-
-.form-icon {
-  color: #999;
-}
-
-.register-button {
-  height: 48px;
-  font-size: 16px;
-  font-weight: 500;
-  margin-top: 8px;
-}
-
-.register-footer {
-  text-align: center;
-  margin-top: 16px;
-}
-
-.register-footer-text {
-  color: #666;
-  font-size: 14px;
-}
-
-/* 响应式设计 */
-@media (max-width: 576px) {
-  .register-card {
-    padding: 24px;
-  }
-
-  .register-title {
-    font-size: 24px;
-  }
-}
-</style>