From 44fc686a0ad380cb75af7119f5352209df5b8ab2 Mon Sep 17 00:00:00 2001
From: Xiaoyu <3306310490@qq.com>
Date: Tue, 11 Feb 2025 15:52:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=A6=82=E4=BA=86pinia=E9=9B=86?=
 =?UTF-8?q?=E4=B8=AD=E7=AE=A1=E7=90=86=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AdminLayout.vue | 35 +++++++++++++++-
 src/stores/systemLog.ts    | 63 +++++++++++++++++++++++++++++
 src/stores/user.ts         | 44 ++++++++++++++++++++
 src/views/login/index.vue  | 82 +++++++++++++++++++++++++++++++++-----
 tsconfig.json              |  8 +++-
 vite.config.ts             |  8 +++-
 6 files changed, 227 insertions(+), 13 deletions(-)
 create mode 100644 src/stores/systemLog.ts
 create mode 100644 src/stores/user.ts

diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index c5dd0e6..51c7bb9 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { ElMessageBox } from 'element-plus';
+import { useUserStore } from '../stores/user';
+import { useSystemLogStore } from '../stores/systemLog';
 import {
   Menu as IconMenu,
   Location,
@@ -17,6 +20,8 @@ const router = useRouter();
 const route = useRoute();
 const isCollapse = ref(false);
 const activeMenu = ref(route.path); // 初始化为当前路由路径
+const userStore = useUserStore();
+const systemLogStore = useSystemLogStore();
 
 // 监听路由变化
 watch(
@@ -29,6 +34,34 @@ watch(
 const handleSelect = (key: string) => {
   router.push(key);
 };
+
+// 处理退出登录
+const handleLogout = () => {
+  ElMessageBox.confirm(
+    '确认退出登录?',
+    '提示',
+    {
+      confirmButtonText: '退出',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    // 记录退出日志
+    systemLogStore.addLog({
+      type: "用户操作",
+      user: userStore.username || '',
+      action: "退出系统",
+      ip: "192.168.1.100",
+      status: "成功",
+      detail: "用户退出登录"
+    });
+    // 执行退出
+    userStore.logout();
+    router.push('/login');
+  }).catch(() => {
+    // 取消退出
+  });
+};
 </script>
 
 <template>
@@ -112,7 +145,7 @@ const handleSelect = (key: string) => {
               <el-dropdown-menu>
                 <el-dropdown-item>个人信息</el-dropdown-item>
                 <el-dropdown-item>修改密码</el-dropdown-item>
-                <el-dropdown-item divided>退出登录</el-dropdown-item>
+                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
diff --git a/src/stores/systemLog.ts b/src/stores/systemLog.ts
new file mode 100644
index 0000000..c368996
--- /dev/null
+++ b/src/stores/systemLog.ts
@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+
+interface LogEntry {
+  id: number;
+  type: string;
+  user: string;
+  action: string;
+  ip: string;
+  status: string;
+  detail: string;
+  createTime: string;
+}
+
+export const useSystemLogStore = defineStore('systemLog', {
+  state: () => ({
+    logs: [] as LogEntry[]
+  }),
+
+  actions: {
+    // 添加日志
+    addLog(log: Omit<LogEntry, 'id' | 'createTime'>) {
+      const newLog: LogEntry = {
+        ...log,
+        id: Date.now(),
+        createTime: new Date().toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        }).replace(/\//g, '-')
+      };
+      
+      this.logs.unshift(newLog);
+      this.saveLogs();
+    },
+
+    // 加载日志
+    loadLogs() {
+      const savedLogs = localStorage.getItem('systemLogs');
+      if (savedLogs) {
+        this.logs = JSON.parse(savedLogs);
+      }
+    },
+
+    // 保存日志到localStorage
+    saveLogs() {
+      localStorage.setItem('systemLogs', JSON.stringify(this.logs));
+    },
+
+    // 清空日志
+    clearLogs() {
+      this.logs = [];
+      this.saveLogs();
+    }
+  },
+
+  getters: {
+    getLogs: (state) => state.logs
+  }
+}) 
\ No newline at end of file
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 0000000..fbd21fa
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+interface UserState {
+  token: string | null;
+  userInfo: {
+    username: string;
+    role: string;
+  } | null;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    token: localStorage.getItem('token'),
+    userInfo: null
+  }),
+  
+  actions: {
+    // 登录
+    async login(username: string, password: string) {
+      if (username === 'admin' && password === '123456') {
+        this.token = 'demo-token';
+        this.userInfo = {
+          username: 'admin',
+          role: '管理员'
+        };
+        localStorage.setItem('token', this.token);
+        return true;
+      }
+      return false;
+    },
+
+    // 退出登录
+    logout() {
+      this.token = null;
+      this.userInfo = null;
+      localStorage.removeItem('token');
+    }
+  },
+
+  getters: {
+    isLoggedIn: (state) => !!state.token,
+    username: (state) => state.userInfo?.username
+  }
+}) 
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8d76b6e..9813993 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,22 +1,75 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useUserStore } from '../../stores/user';
+import { useSystemLogStore } from '../../stores/systemLog';
 
 const router = useRouter();
+const userStore = useUserStore();
+const systemLogStore = useSystemLogStore();
 
 const loginForm = reactive({
   username: "",
   password: "",
 });
 
-const loading = ref(false);
+// 表单验证规则
+const rules = {
+  username: [
+    { required: true, message: "请输入用户名", trigger: "blur" }
+  ],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" }
+  ]
+};
 
-const handleLogin = async () => {
+const loading = ref(false);
+const formRef = ref();
+
+// 获取当前时间
+const getCurrentTime = () => {
+  return new Date().toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).replace(/\//g, '-');
+};
+
+const handleLogin = async (formEl: any) => {
+  if (!formEl) return;
   loading.value = true;
   try {
-    // TODO: 调用登录API
-    localStorage.setItem("token", "demo-token");
-    router.push("/dashboard");
+    await formEl.validate();
+    
+    const success = await userStore.login(loginForm.username, loginForm.password);
+    if (success) {
+      // 记录登录日志
+      systemLogStore.addLog({
+        type: "用户操作",
+        user: loginForm.username,
+        action: "登录系统",
+        ip: "192.168.1.100",
+        status: "成功",
+        detail: "用户登录成功"
+      });
+      router.push("/dashboard");
+    } else {
+      // 记录失败日志
+      systemLogStore.addLog({
+        type: "用户操作",
+        user: loginForm.username,
+        action: "登录系统",
+        ip: "192.168.1.100",
+        status: "失败",
+        detail: "用户名或密码错误"
+      });
+      ElMessage.error("用户名或密码错误");
+    }
   } catch (error) {
     console.error(error);
   } finally {
@@ -29,11 +82,20 @@ const handleLogin = async () => {
   <div class="login-container">
     <el-card class="login-card">
       <h2>智慧湿地管理平台</h2>
-      <el-form :model="loginForm" label-width="0">
-        <el-form-item>
-          <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="User" />
+      <el-form 
+        ref="formRef"
+        :model="loginForm" 
+        :rules="rules"
+        label-width="0"
+      >
+        <el-form-item prop="username">
+          <el-input 
+            v-model="loginForm.username" 
+            placeholder="用户名" 
+            prefix-icon="User" 
+          />
         </el-form-item>
-        <el-form-item>
+        <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
             type="password"
@@ -47,7 +109,7 @@ const handleLogin = async () => {
             type="primary"
             :loading="loading"
             class="login-button"
-            @click="handleLogin"
+            @click="handleLogin(formRef)"
           >
             登录
           </el-button>
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..a8d3cb5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,5 +3,11 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
 }
diff --git a/vite.config.ts b/vite.config.ts
index bbcf80c..e6c6e63 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
 })