From 411253a277379839fd55a26d956a238e833a8e08 Mon Sep 17 00:00:00 2001
From: chenhao <852066789@qq.com>
Date: Thu, 28 Aug 2025 15:37:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E5=AE=9E=E7=8E=B0=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=8A=9F=E8=83=BD=E5=92=8C=E8=AE=A4=E8=AF=81=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 auth.ts 文件实现登录接口调用
- 创建 auth store 管理认证状态
- 实现登录页面组件
- 优化订单列表页面样式
- 添加记住密码和自动登录功能
---
 docs/ui-mockups/designs/login.png | Bin 0 -> 13448 bytes
 src/api/auth.ts                   |  20 +++
 src/store/auth.ts                 |  80 ++++++++++
 src/store/index.ts                |  17 +++
 src/views/List/index.vue          | 100 ++++++++++--
 src/views/Login/index.vue         | 243 ++++++++++++++++++++++++++++++
 6 files changed, 445 insertions(+), 15 deletions(-)
 create mode 100644 docs/ui-mockups/designs/login.png
 create mode 100644 src/api/auth.ts
 create mode 100644 src/store/auth.ts
 create mode 100644 src/store/index.ts
 create mode 100644 src/views/Login/index.vue

diff --git a/docs/ui-mockups/designs/login.png b/docs/ui-mockups/designs/login.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc15e3c893e77b4a30b6b40b5abc0124472208d3
GIT binary patch
literal 13448
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
bD~Ow@YME`xV@L46h#-oxYA>o~%)|a0;ZKn4

literal 0
HcmV?d00001

diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000..d15088f
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,20 @@
+import http from '@/utils/http'
+import type { ApiResponse, LoginParams } from '@/types'
+import type { AxiosResponse } from 'axios'
+
+/**
+ * 用户登录
+ */
+export const login = (params: LoginParams): Promise<AxiosResponse<ApiResponse<{
+  token: string
+  userInfo: any
+}>>> => {
+  // 创建FormData对象
+  const formData = new FormData()
+  formData.append('username', params.username)
+  formData.append('password', params.password)
+  // 添加rememberMe参数，默认为true
+  formData.append('rememberMe', String(params.rememberMe ?? true))
+
+  return http.post('/login', formData)
+}
\ No newline at end of file
diff --git a/src/store/auth.ts b/src/store/auth.ts
new file mode 100644
index 0000000..760bcaf
--- /dev/null
+++ b/src/store/auth.ts
@@ -0,0 +1,80 @@
+import { defineStore } from 'pinia'
+import { login } from '@/api/auth'
+import type { LoginParams } from '@/types'
+
+interface AuthState {
+  token: string | null
+  userInfo: any | null
+  isAuthenticated: boolean
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthState => ({
+    token: null,
+    userInfo: null,
+    isAuthenticated: localStorage.getItem('isAuthenticated') === 'true'
+  }),
+
+  actions: {
+    /**
+     * 用户登录
+     */
+    async login(params: LoginParams) {
+      try {
+        // 调用登录接口
+        const response = await login(params)
+        
+        // 检查响应状态
+        if (response.status === 200 && response.data.code === 0) {
+          // 由于服务器使用session判断登录状态，我们只需要设置认证状态为true
+          this.isAuthenticated = true
+          
+          // 保存到localStorage，用于页面刷新后保持登录状态
+          localStorage.setItem('isAuthenticated', 'true')
+          
+          // 如果选择了记住密码，则保存用户名和密码
+          if (params.rememberMe) {
+            localStorage.setItem('savedUsername', params.username)
+            localStorage.setItem('savedPassword', params.password)
+          } else {
+            // 清除保存的用户名和密码
+            localStorage.removeItem('savedUsername')
+            localStorage.removeItem('savedPassword')
+          }
+          
+          return response.data
+        } else {
+          throw new Error(response.data.msg || '登录失败')
+        }
+      } catch (error: any) {
+        console.error('登录接口调用失败:', error)
+        throw error
+      }
+    },
+
+    /**
+     * 用户登出
+     */
+    logout() {
+      this.token = null
+      this.userInfo = null
+      this.isAuthenticated = false
+      
+      // 清除localStorage中的认证状态
+      localStorage.removeItem('isAuthenticated')
+      
+      // 注意：这里不清除保存的用户名和密码，以便下次自动填充
+    },
+
+    /**
+     * 检查登录状态
+     */
+    checkAuthStatus() {
+      // 从localStorage检查认证状态
+      const isAuthenticated = localStorage.getItem('isAuthenticated')
+      if (isAuthenticated === 'true') {
+        this.isAuthenticated = true
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..e447e03
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,17 @@
+import { createPinia } from 'pinia'
+import { useAuthStore } from './auth'
+import { useOrderStore } from './order'
+
+// 创建 pinia 实例
+export const store = createPinia()
+
+// 导出所有 store 的 hook
+export { useAuthStore, useOrderStore }
+
+// 初始化 store
+export const initStores = () => {
+  // 可以在这里添加初始化逻辑
+  const authStore = useAuthStore(store)
+  // 检查本地存储的认证状态
+  authStore.checkAuthStatus()
+}
\ No newline at end of file
diff --git a/src/views/List/index.vue b/src/views/List/index.vue
index 9abe162..35b5e5a 100644
--- a/src/views/List/index.vue
+++ b/src/views/List/index.vue
@@ -134,18 +134,39 @@ onMounted(() => {
 <style lang="scss" scoped>
 .order-list-page {
   min-height: 100vh;
-  background-color: var(--background-color-secondary);
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .order-item {
-  background: var(--background-color-primary);
-  margin-bottom: var(--spacing-sm);
-  padding: var(--spacing-lg);
+  background: white;
+  margin-bottom: 16px;
+  padding: 20px;
   cursor: pointer;
-  transition: background-color 0.2s;
-
+  transition: all 0.2s;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(90deg, #1989fa, #07c160);
+  }
+  
   &:active {
-    background-color: var(--background-color-tertiary);
+    transform: translateY(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  &:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -153,19 +174,43 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .order-code {
   font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.status-tag {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 20px;
   font-weight: 500;
-  color: var(--text-color-primary);
+  
+  &.pending {
+    background-color: #FFF7E6;
+    color: #FA8C16;
+  }
+  
+  &.approved {
+    background-color: #F6FFED;
+    color: #52C41A;
+  }
+  
+  &.rejected {
+    background-color: #FFF2F0;
+    color: #FF4D4F;
+  }
 }
 
 .order-info {
   .info-row {
     display: flex;
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: 12px;
     
     &:last-child {
       margin-bottom: 0;
@@ -173,26 +218,51 @@ onMounted(() => {
     
     .label {
       width: 80px;
-      color: var(--text-color-secondary);
+      color: #666;
       font-size: 14px;
       flex-shrink: 0;
     }
     
     .value {
       flex: 1;
-      color: var(--text-color-primary);
+      color: #333;
       font-size: 14px;
       word-break: break-all;
       
       &.amount {
-        color: var(--error-color);
-        font-weight: 500;
+        color: #FF6600;
+        font-weight: 600;
       }
     }
   }
 }
 
 .empty-state {
-  padding: 60px var(--spacing-lg);
+  padding: 60px 20px;
+  text-align: center;
+  
+  :deep(.van-empty) {
+    .van-empty__image {
+      width: 120px;
+      height: 120px;
+    }
+    
+    .van-empty__description {
+      font-size: 16px;
+      color: #666;
+    }
+  }
+}
+
+// 搜索栏样式优化
+:deep(.van-search) {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  
+  .van-search__content {
+    background: white;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
new file mode 100644
index 0000000..c4e7347
--- /dev/null
+++ b/src/views/Login/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="login-page">
+    <div class="login-container">
+      <div class="login-header">
+        <div class="logo-placeholder">
+          <svg class="logo-icon" viewBox="0 0 100 100">
+            <circle cx="50" cy="50" r="40" fill="#1989fa" />
+            <path d="M30,50 L45,65 L70,35" stroke="white" stroke-width="8" fill="none" />
+          </svg>
+        </div>
+        <h1 class="login-title">OMS</h1>
+        <p class="login-subtitle">Order Management System</p>
+      </div>
+      
+      <van-form @submit="onSubmit" class="login-form">
+        <van-cell-group inset>
+          <van-field
+            v-model="username"
+            name="username"
+            label="用户名"
+            placeholder="请输入用户名"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+            class="login-input"
+          >
+            <template #left-icon>
+              <svg class="input-icon" viewBox="0 0 100 100">
+                <circle cx="50" cy="35" r="15" fill="none" stroke="#1989fa" stroke-width="8" />
+                <path d="M25,85 Q50,65 75,85" stroke="#1989fa" stroke-width="8" fill="none" />
+              </svg>
+            </template>
+          </van-field>
+          
+          <van-field
+            v-model="password"
+            type="password"
+            name="password"
+            label="密码"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+            class="login-input"
+          >
+            <template #left-icon>
+              <svg class="input-icon" viewBox="0 0 100 100">
+                <rect x="20" y="40" width="60" height="40" rx="5" fill="none" stroke="#1989fa" stroke-width="8" />
+                <circle cx="50" cy="25" r="10" fill="#1989fa" />
+              </svg>
+            </template>
+          </van-field>
+        </van-cell-group>
+        
+        <div class="login-options">
+          <van-checkbox v-model="rememberMe" name="rememberMe" checked-color="#1989fa">
+            记住密码
+          </van-checkbox>
+          <a href="javascript:void(0)" class="forgot-password">忘记密码？</a>
+        </div>
+        
+        <div class="login-button-container">
+          <van-button round block type="primary" native-type="submit" :loading="loading" class="login-button">
+            登录
+          </van-button>
+        </div>
+      </van-form>
+      
+      <div class="login-footer">
+        <p class="footer-text">© 2025 订单管理系统 - 安全可靠的订单管理平台</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { showFailToast, showSuccessToast } from 'vant'
+import { useAuthStore } from '@/store/auth'
+import type { LoginParams } from '@/types'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// 表单数据
+const username = ref('')
+const password = ref('')
+const rememberMe = ref(true)
+const loading = ref(false)
+
+// 登录提交
+const onSubmit = async (values: LoginParams) => {
+  loading.value = true
+  try {
+    // 调用登录接口
+    await authStore.login(values)
+    
+    // 显示成功提示
+    showSuccessToast('登录成功')
+    
+    // 跳转到列表页面
+    router.push('/list')
+  } catch (error: any) {
+    console.error('登录失败:', error)
+    showFailToast(error.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 页面加载时检查是否保存了用户名和密码
+import { onMounted } from 'vue'
+onMounted(() => {
+  const savedUsername = localStorage.getItem('savedUsername')
+  const savedPassword = localStorage.getItem('savedPassword')
+  
+  if (savedUsername) {
+    username.value = savedUsername
+  }
+  
+  if (savedPassword) {
+    password.value = savedPassword
+    rememberMe.value = true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.login-container {
+  width: 100%;
+  max-width: 400px;
+  background: white;
+  border-radius: 16px;
+  padding: 40px 30px;
+  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #1989fa, #07c160, #ff6600);
+  }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.logo-placeholder {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.logo-icon {
+  width: 60px;
+  height: 60px;
+}
+
+.login-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 0;
+}
+
+.login-form {
+  margin-bottom: 20px;
+}
+
+.login-input {
+  margin-bottom: 15px;
+  
+  :deep(.van-field__left-icon) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.input-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.login-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  margin: 10px 0 25px;
+}
+
+.forgot-password {
+  color: #1989fa;
+  font-size: 14px;
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.login-button-container {
+  margin: 16px 0;
+}
+
+.login-button {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 30px;
+}
+
+.footer-text {
+  font-size: 12px;
+  color: #999;
+  margin: 0;
+}
+</style>
\ No newline at end of file