Implement comprehensive user management functionality with API integration

Add AnalysisReport interface and refine report type definitions
优化了路由配置
2025-02-20 21:41:57 +08:00 · 2025-02-20 20:46:27 +08:00 · 2025-02-20 20:44:31 +08:00
49 changed files with 1165 additions and 724 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,25 @@
+# 所有环境都会加载的配置
+
+# 项目名称
+VITE_APP_TITLE=智慧湿地管理平台
+
+# 项目描述
+VITE_APP_DESC=科技赋能生态保护 智慧守护绿色家园
+
+# 版本号
+VITE_APP_VERSION=1.0.0
+
+# 版权信息
+VITE_APP_COPYRIGHT=Copyright © 2025 智慧湿地管理平台 All Rights Reserved.
+
+# 是否启用 gzip 压缩
+VITE_BUILD_GZIP=false
+
+# 是否启用 brotli 压缩
+VITE_BUILD_BROTLI=false
+
+# 是否删除 console
+VITE_DROP_CONSOLE=true
+
+# 后端 API 的基础 URL
+VITE_API_BASE_URL=http://localhost:3000
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,14 @@
+# 开发环境
+VITE_NODE_ENV=development
+
+# API 基础路径
+VITE_API_BASE_URL=http://localhost:3000
+
+# 项目基础路径
+VITE_BASE_URL=/
+
+# Mock API 路径
+VITE_MOCK_API=true
+
+# 是否开启调试工具
+VITE_DEV_TOOLS=true
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,14 @@
+# 生产环境
+VITE_NODE_ENV=production
+
+# API 基础路径 - 实际项目中替换为真实的后端接口地址
+VITE_API_BASE_URL=https://api.your-domain.com
+
+# 项目基础路径
+VITE_BASE_URL=/
+
+# Mock API 路径
+VITE_MOCK_API=false
+
+# 是否开启调试工具
+VITE_DEV_TOOLS=false
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,14 @@
+# 测试环境
+VITE_NODE_ENV=test
+
+# API 基础路径
+VITE_API_BASE_URL=https://test-api.your-domain.com
+
+# 项目基础路径
+VITE_BASE_URL=/
+
+# Mock API 路径
+VITE_MOCK_API=false
+
+# 是否开启调试工具
+VITE_DEV_TOOLS=true
--- a/index.html
+++ b/index.html
@ -8,6 +8,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -15,7 +15,8 @@
        "json-server": "^1.0.0-beta.3",
        "pinia": "^2.3.1",
        "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "wetlandguard-admin": "file:"
      },
      "devDependencies": {
        "@types/node": "^22.13.0",
@ -2750,6 +2751,10 @@
        "typescript": ">=5.0.0"
      }
    },
+    "node_modules/wetlandguard-admin": {
+      "resolved": "",
+      "link": true
+    },
    "node_modules/zrender": {
      "version": "5.6.1",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
--- a/package.json
+++ b/package.json
@ -16,7 +16,8 @@
    "json-server": "^1.0.0-beta.3",
    "pinia": "^2.3.1",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "wetlandguard-admin": "file:"
  },
  "devDependencies": {
    "@types/node": "^22.13.0",
--- a/src/api/login/index.js
+++ b/src/api/login/index.js
@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+/**
+ * 用户登录
+ * @param {Object} data - 登录参数
+ * @param {string} data.username - 用户名
+ * @param {string} data.password - 密码
+ * @returns {Promise} 返回包含token和用户信息的Promise
+ */
+export function login(data) {
+  return request.post('/api/users/login', data)
+}
+
+/**
+ * 退出登录
+ * @returns {Promise}
+ */
+export function logout() {
+  return request.post('/api/users/logout')
+}
--- a/src/api/report.ts
+++ b/src/api/report.ts
@ -1,49 +0,0 @@
-import request from './request';
-
-// 日常报告接口
-export const dailyReportApi = {
-  // 获取日常报告列表
-  getList: (params: any) => request.get('/report/daily/list', { params }),
-  
-  // 获取日常报告详情
-  getDetail: (id: number) => request.get(`/report/daily/${id}`),
-  
-  // 创建日常报告
-  create: (data: any) => request.post('/report/daily', data),
-  
-  // 更新日常报告
-  update: (id: number, data: any) => request.put(`/report/daily/${id}`, data),
-  
-  // 删除日常报告
-  delete: (id: number) => request.delete(`/report/daily/${id}`),
-  
-  // 导出日常报告
-  export: (id: number) => request.get(`/report/daily/export/${id}`, { responseType: 'blob' })
-};
-
-// 分析报告接口
-export const analysisReportApi = {
-  // 获取分析报告列表
-  getList: (params: any) => request.get('/report/analysis/list', { params }),
-  
-  // 获取分析报告详情
-  getDetail: (id: number) => request.get(`/report/analysis/${id}`),
-  
-  // 创建分析报告
-  create: (data: any) => request.post('/report/analysis', data),
-  
-  // 更新分析报告
-  update: (id: number, data: any) => request.put(`/report/analysis/${id}`, data),
-  
-  // 删除分析报告
-  delete: (id: number) => request.delete(`/report/analysis/${id}`),
-  
-  // 导出分析报告
-  export: (id: number) => request.get(`/report/analysis/export/${id}`, { responseType: 'blob' }),
-  
-  // 获取监测数据统计
-  getMonitorStats: (params: any) => request.get('/report/analysis/monitor-stats', { params }),
-  
-  // 获取物种数据统计
-  getSpeciesStats: (params: any) => request.get('/report/analysis/species-stats', { params })
-}; 
--- a/src/api/request.ts
+++ b/src/api/request.ts
@ -1,35 +0,0 @@
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
-
-const request = axios.create({
-  baseURL: '/api',
-  timeout: 5000
-})
-
-// 请求拦截器
-request.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem('token')
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-// 响应拦截器
-request.interceptors.response.use(
-  (response) => {
-    const { data } = response
-    return data
-  },
-  (error) => {
-    ElMessage.error(error.message || '请求失败')
-    return Promise.reject(error)
-  }
-)
-
-export default request 
--- a/src/api/user/index.js
+++ b/src/api/user/index.js
@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+/**
+ * 获取用户列表
+ * @returns {Promise} 返回用户列表数据
+ */
+export function getUserList() {
+  return request.get('/api/users')
+}
+
+/**
+ * 新增用户
+ * @param {Object} data - 用户数据
+ * @param {string} data.username - 用户名（必选）
+ * @param {string} data.password - 密码（必选）
+ * @param {string} data.role_id - 角色ID（必选）
+ * @param {string} [data.real_name] - 真实姓名（可选）
+ * @param {string} [data.email] - 邮箱（可选）
+ * @param {string} [data.phone] - 手机号（可选）
+ * @param {string} [data.status] - 状态（可选）
+ * @param {string} [data.expire_time] - 过期时间（可选）
+ * @returns {Promise} 返回创建结果
+ */
+export function createUser(data) {
+  return request.post('/api/users', data)
+}
+
+/**
+ * 编辑用户
+ * @param {string|number} id - 用户ID
+ * @param {Object} data - 用户数据
+ * @param {string} [data.real_name] - 真实姓名（可选）
+ * @param {string} [data.email] - 邮箱（可选）
+ * @param {string} [data.phone] - 手机号（可选）
+ * @param {string} [data.role_id] - 角色ID（可选）
+ * @param {string} [data.status] - 状态（可选）
+ * @param {string} [data.expire_time] - 过期时间（可选）
+ * @param {string} [data.password] - 新密码（可选）
+ * @returns {Promise} 返回更新结果
+ */
+export function updateUser(id, data) {
+  return request.put(`/api/users/${id}`, data)
+}
+
+/**
+ * 删除用户
+ * @param {string|number} id - 用户ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteUser(id) {
+  return request.delete(`/api/users/${id}`)
+}
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/src/components/report/EnvironmentAnalysis.vue
+++ b/src/components/report/EnvironmentAnalysis.vue
@ -1,15 +1,23 @@
-<script setup lang="ts">
-const props = defineProps<{
+<script setup>
+const props = defineProps({
  data: {
-    qualityTrend: string;
-    indicators: {
-      name: string;
-      value: number;
-      threshold: number;
-      status: string;
-    }[];
-  };
-}>();
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return (
+        value.qualityTrend &&
+        Array.isArray(value.indicators) &&
+        value.indicators.every(
+          (indicator) =>
+            indicator.name &&
+            typeof indicator.value === 'number' &&
+            typeof indicator.threshold === 'number' &&
+            indicator.status
+        )
+      );
+    },
+  },
+});
 </script>

 <template>
@ -19,7 +27,7 @@ const props = defineProps<{
      :type="data.qualityTrend === '改善' ? 'success' : data.qualityTrend === '恶化' ? 'warning' : 'info'"
      show-icon
    />
-    
+
    <div class="indicators-table">
      <el-table :data="data.indicators" border style="width: 100%">
        <el-table-column prop="name" label="监测指标" />
@ -43,4 +51,4 @@ const props = defineProps<{
    margin-top: 20px;
  }
 }
-</style> 
+</style>
--- a/src/components/report/MonitorDataChart.vue
+++ b/src/components/report/MonitorDataChart.vue
@ -1,19 +1,29 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import * as echarts from 'echarts';

-const props = defineProps<{
-  data: any;
-  type: 'line' | 'bar';
-  title?: string;
-}>();
+const props = defineProps({
+  data: {
+    type: [Object, Array],
+    required: true
+  },
+  type: {
+    type: String,
+    validator: (value) => ['line', 'bar'].includes(value),
+    required: true
+  },
+  title: {
+    type: String,
+    required: false
+  }
+});

-let chart: echarts.ECharts | null = null;
+let chart = null;

 const initChart = () => {
  const chartDom = document.getElementById('monitorChart');
  if (!chartDom) return;
-  
+
  chart = echarts.init(chartDom);
  const option = {
    title: {
@ -24,7 +34,7 @@ const initChart = () => {
    },
    // ... 其他配置
  };
-  
+
  chart.setOption(option);
 };

@ -45,4 +55,4 @@ const handleResize = () => {

 <template>
  <div id="monitorChart" style="width: 100%; height: 400px"></div>
-</template> 
+</template>
--- a/src/components/report/SpeciesAnalysis.vue
+++ b/src/components/report/SpeciesAnalysis.vue
@ -1,13 +1,19 @@
-<script setup lang="ts">
+<script setup>
 import { computed } from 'vue';

-const props = defineProps<{
+const props = defineProps({
  data: {
-    diversity: number;
-    richness: number;
-    distribution: any[];
-  };
-}>();
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return (
+        typeof value.diversity === 'number' &&
+        typeof value.richness === 'number' &&
+        Array.isArray(value.distribution)
+      );
+    },
+  },
+});

 const diversityLevel = computed(() => {
  const value = props.data.diversity;
@ -30,7 +36,7 @@ const diversityLevel = computed(() => {
        {{ data.richness }}
      </el-descriptions-item>
    </el-descriptions>
-    
+
    <!-- 分布情况图表 -->
    <div class="distribution-chart">
      <!-- 这里可以添加物种分布的图表展示 -->
@ -44,4 +50,4 @@ const diversityLevel = computed(() => {
    margin-top: 20px;
  }
 }
-</style> 
+</style>
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessageBox } from 'element-plus';
@ -45,7 +45,7 @@ watch(
  }
 );

-const handleSelect = (key: string) => {
+const handleSelect = (key) => {
  router.push(key);
 };

--- a/src/layout/components/Sidebar/menuData.js
+++ b/src/layout/components/Sidebar/menuData.js
@ -14,4 +14,4 @@ export const menuData = [
      }
    ]
  }
-]; 
+];
--- a/src/main.js
+++ b/src/main.js
@ -17,4 +17,4 @@ app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)

-app.mount('#app')
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -112,13 +112,13 @@ const router = createRouter({
 // 路由守卫
 router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
-  
+
  // 如果访问登录页且已登录，重定向到首页
  if (to.path === '/login' && userStore.isLoggedIn) {
    next('/')
    return
  }
-  
+
  // 如果需要认证但未登录，重定向到登录页
  if (to.matched.some(record => record.meta.requiresAuth) && !userStore.isLoggedIn) {
    next({
@ -130,4 +130,4 @@ router.beforeEach((to, from, next) => {
  }
 })

-export default router 
+export default router
--- a/src/stores/systemLog.js
+++ b/src/stores/systemLog.js
@ -1,25 +1,14 @@
 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[]
+    logs: []
  }),

  actions: {
    // 添加日志
-    addLog(log: Omit<LogEntry, 'id' | 'createTime'>) {
-      const newLog: LogEntry = {
+    addLog(log) {
+      const newLog = {
        ...log,
        id: Date.now(),
        createTime: new Date().toLocaleString('zh-CN', {
@ -32,7 +21,7 @@ export const useSystemLogStore = defineStore('systemLog', {
          hour12: false
        }).replace(/\//g, '-')
      };
-      
+
      this.logs.unshift(newLog);
      this.saveLogs();
    },
@ -60,4 +49,4 @@ export const useSystemLogStore = defineStore('systemLog', {
  getters: {
    getLogs: (state) => state.logs
  }
-}) 
+})
--- a/src/stores/user.js
+++ b/src/stores/user.js
@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import { login as loginApi, logout as logoutApi } from '@/api/login'
+
+// 安全的 JSON 解析函数
+const safeJSONParse = (str, defaultValue = null) => {
+  if (!str || str === 'undefined' || str === 'null') {
+    return defaultValue
+  }
+  try {
+    return JSON.parse(str)
+  } catch (error) {
+    console.warn('JSON解析错误，使用默认值:', error)
+    return defaultValue
+  }
+}
+
+export const useUserStore = defineStore('user', {
+  state: () => {
+    // 从 localStorage 获取数据
+    const token = localStorage.getItem('token')
+    const userInfoStr = localStorage.getItem('userInfo')
+
+    return {
+      token: token || null,
+      userInfo: safeJSONParse(userInfoStr)
+    }
+  },
+
+  actions: {
+    // 登录
+    async login(username, password) {
+      try {
+        // 调用登录接口
+        const { token, userInfo } = await loginApi({ username, password })
+
+        // 保存token和用户信息
+        this.token = token
+        this.userInfo = userInfo
+
+        // 持久化存储
+        localStorage.setItem('token', token)
+        localStorage.setItem('userInfo', JSON.stringify(userInfo))
+
+        return true
+      } catch (error) {
+        console.error('登录失败:', error)
+        return false
+      }
+    },
+
+    // 退出登录
+    async logout() {
+      try {
+        await logoutApi()
+      } catch (error) {
+        console.error('退出登录失败:', error)
+      } finally {
+        // 无论是否成功调用退出接口，都清除本地存储
+        this.token = null
+        this.userInfo = null
+        localStorage.removeItem('token')
+        localStorage.removeItem('userInfo')
+      }
+    }
+  },
+
+  getters: {
+    isLoggedIn: (state) => !!state.token,
+    username: (state) => state.userInfo?.username,
+    userRole: (state) => state.userInfo?.role
+  }
+})
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@ -1,44 +0,0 @@
-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
-  }
-}) 
--- a/src/utils/format.js
+++ b/src/utils/format.js
@ -0,0 +1,68 @@
+/**
+ * 格式化日期时间
+ * @param {string|number|Date} time 需要格式化的时间
+ * @param {string} [format='YYYY-MM-DD HH:mm:ss'] 格式化的格式
+ * @returns {string} 格式化后的时间字符串
+ */
+export function formatDateTime(time, format = 'YYYY-MM-DD HH:mm:ss') {
+  if (!time) return '';
+
+  const date = new Date(time);
+
+  if (isNaN(date.getTime())) return '';
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return format
+    .replace('YYYY', year)
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds);
+}
+
+/**
+ * 格式化日期
+ * @param {string|number|Date} time 需要格式化的时间
+ * @returns {string} 格式化后的日期字符串 YYYY-MM-DD
+ */
+export function formatDate(time) {
+  return formatDateTime(time, 'YYYY-MM-DD');
+}
+
+/**
+ * 格式化时间为相对时间
+ * @param {string|number|Date} time 需要格式化的时间
+ * @returns {string} 相对时间描述
+ */
+export function formatRelativeTime(time) {
+  if (!time) return '';
+
+  const date = new Date(time);
+  if (isNaN(date.getTime())) return '';
+
+  const now = new Date();
+  const diff = now - date;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 30) {
+    return formatDateTime(time);
+  } else if (days > 0) {
+    return `${days}天前`;
+  } else if (hours > 0) {
+    return `${hours}小时前`;
+  } else if (minutes > 0) {
+    return `${minutes}分钟前`;
+  } else {
+    return '刚刚';
+  }
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,156 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '../stores/user'
+import router from '../router'
+
+// 创建axios实例
+const service = axios.create({
+  // 从环境变量获取基础URL，如果没有则使用默认值
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  timeout: 15000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8'
+  }
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    const userStore = useUserStore()
+    const token = userStore.token
+
+    // 如果有token，添加到请求头
+    if (token) {
+      config.headers = config.headers || {}
+      config.headers['Authorization'] = `Bearer ${token}`
+    }
+
+    return config
+  },
+  (error) => {
+    console.error('请求错误：', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const res = response.data
+
+    // 如果响应成功
+    if (res.success) {
+      return res
+    }
+
+    // 处理特定错误码
+    switch (res.code) {
+      case 401:
+        handleUnauthorized()
+        break
+      case 403:
+        ElMessage.error('没有权限访问该资源')
+        break
+      case 500:
+        console.error('服务器错误详情：', res)
+        ElMessage.error(res.message || '服务器错误，请稍后重试')
+        break
+      default:
+        ElMessage.error(res.message || '请求失败')
+    }
+
+    return Promise.reject(new Error(res.message || '请求失败'))
+  },
+  (error) => {
+    console.error('响应错误详情：', {
+      status: error.response?.status,
+      statusText: error.response?.statusText,
+      data: error.response?.data,
+      headers: error.response?.headers,
+      config: {
+        url: error.config?.url,
+        method: error.config?.method,
+        headers: error.config?.headers,
+        params: error.config?.params
+      }
+    })
+
+    // 处理网络错误
+    if (!error.response) {
+      ElMessage.error('网络错误，请检查您的网络连接')
+      return Promise.reject(error)
+    }
+
+    // 处理HTTP状态码错误
+    const status = error.response.status
+    switch (status) {
+      case 401:
+        handleUnauthorized()
+        break
+      case 403:
+        ElMessage.error('没有权限访问该资源')
+        break
+      case 404:
+        ElMessage.error('请求的资源不存在')
+        break
+      case 500:
+        ElMessage.error('服务器错误，请稍后重试')
+        break
+      default:
+        ElMessage.error(`请求失败：${error.message}`)
+    }
+
+    return Promise.reject(error)
+  }
+)
+
+// 处理未授权情况
+const handleUnauthorized = () => {
+  const userStore = useUserStore()
+  userStore.logout() // 清除用户信息
+
+  // 跳转到登录页，并携带当前页面路径
+  const currentPath = router.currentRoute.value.fullPath
+  router.push({
+    path: '/login',
+    query: {
+      redirect: currentPath
+    }
+  })
+
+  ElMessage.error('登录已过期，请重新登录')
+}
+
+// 封装请求方法
+export const request = {
+  get(url, config) {
+    return service.get(url, config)
+  },
+
+  post(url, data, config) {
+    return service.post(url, data, config)
+  },
+
+  put(url, data, config) {
+    return service.put(url, data, config)
+  },
+
+  delete(url, config) {
+    return service.delete(url, config)
+  },
+
+  // 上传文件的专用方法
+  upload(url, file, config) {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    return service.post(url, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      ...config
+    })
+  }
+}
+
+export default request
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import { markRaw } from 'vue'
@ -377,8 +377,8 @@ onMounted(() => {
 <template>
  <div class="dashboard-container">
    <div class="stats-grid">
-      <div v-for="card in statsCards" 
-           :key="card.title" 
+      <div v-for="card in statsCards"
+           :key="card.title"
           class="stats-card"
           :style="{ backgroundColor: card.bgColor }">
        <div class="card-header">
@ -394,16 +394,16 @@ onMounted(() => {
            {{ card.value }}
            <span class="unit">{{ card.unit }}</span>
          </div>
-          <div class="change-value" 
-               :style="{ color: card.change.value.includes('+') ? '#67C23A' : 
+          <div class="change-value"
+               :style="{ color: card.change.value.includes('+') ? '#67C23A' :
                        card.change.value.includes('%') ? card.color : '#F56C6C' }">
            {{ card.change.value }}
            <span class="label">{{ card.change.label }}</span>
          </div>
        </div>
        <div class="card-footer">
-          <div v-for="feature in card.features" 
-               :key="feature" 
+          <div v-for="feature in card.features"
+               :key="feature"
               class="feature-item">
            {{ feature }}
          </div>
--- a/src/views/dashboard/screen/index.vue
+++ b/src/views/dashboard/screen/index.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 import * as echarts from "echarts";
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
@ -42,7 +42,7 @@ const getCurrentTime = () => {
    .replace(/\//g, "-");
 };

-const handleLogin = async (formEl: any) => {
+const handleLogin = async (formEl) => {
  if (!formEl) return;
  loading.value = true;
  try {
@ -67,7 +67,7 @@ const handleLogin = async (formEl: any) => {
      });

      // 获取重定向地址
-      const redirect = route.query.redirect as string;
+      const redirect = route.query.redirect;
      router.push(redirect || "/dashboard");
    } else {
      // 记录失败日志
@ -92,7 +92,7 @@ const handleLogin = async (formEl: any) => {
 };

 // 添加输入框获得焦点时的处理函数
-const handleFocus = (prop: "username" | "password") => {
+const handleFocus = (prop) => {
  if (formRef.value) {
    // 清除对应字段的验证错误
    formRef.value.clearValidate(prop);
@ -161,7 +161,7 @@ const handleFocus = (prop: "username" | "password") => {
 </template>

 <style lang="scss" scoped>
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;

 .login-container {
  height: 100vh;
--- a/src/views/monitor/environment/index.vue
+++ b/src/views/monitor/environment/index.vue
@ -1,19 +1,10 @@
-<script setup lang="ts">
+<script setup>
 import { ref, reactive, onMounted } from "vue";
 import * as echarts from "echarts";
 import { ElMessage } from "element-plus";
 import { Monitor, Warning, TrendCharts } from "@element-plus/icons-vue";

-interface EnvData {
-  id: number;
-  location: string;
-  temperature: number;
-  humidity: number;
-  waterQuality: string;
-  time: string;
-}
-
-const tableData = ref<EnvData[]>([
+const tableData = ref([
  {
    id: 1,
    location: "A区监测点",
@ -90,9 +81,9 @@ const initChart = () => {
      textStyle: {
        color: "#666",
      },
-      formatter: function (params: any) {
+      formatter: function (params) {
        let result = `${params[0].axisValue}<br/>`;
-        params.forEach((item: any) => {
+        params.forEach((item) => {
          result += `${item.marker} ${item.seriesName}: ${item.value}${
            item.seriesName.includes("温度")
              ? "°C"
@ -247,33 +238,30 @@ const initChart = () => {

  myChart.setOption(option);

-  // 监听窗口大小变化
+  // 处理窗口大小变化
  window.addEventListener("resize", () => {
    myChart.resize();
  });
 };

-// 添加导出相关的数据和方法
+// 导出相关数据
 const exportDialogVisible = ref(false);
 const exportForm = reactive({
-  timeRange: [] as string[],
-  format: "excel",
+  timeRange: [],
  dataType: ["temperature", "humidity", "waterQuality"],
+  format: "excel",
 });

-const handleExport = () => {
-  exportDialogVisible.value = true;
-};
-
+// 处理导出确认
 const handleExportConfirm = () => {
-  console.log("导出数据:", exportForm);
+  ElMessage.success("数据导出成功");
  exportDialogVisible.value = false;
 };

 // 初始化迷你图表
-const initMiniChart = (el: HTMLElement, data: number[]) => {
+const initMiniChart = (el, data) => {
  const chart = echarts.init(el);
-  chart.setOption({
+  const option = {
    grid: {
      left: 0,
      right: 0,
@ -357,7 +345,8 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
      },
      padding: [4, 8],
    },
-  });
+  };
+  chart.setOption(option);

  // 监听卡片hover事件
  const card = el.closest(".env-card");
@ -378,15 +367,12 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
 };

 onMounted(() => {
-  // 初始化所有迷你图表
-  envStats.value.forEach((stat, index) => {
-    const el = document.getElementById(`miniChart${index}`);
-    if (el) {
-      initMiniChart(el, stat.trend);
-    }
-  });
-  // 原有的图表初始化
  initChart();
+  // 初始化所有迷你图表
+  const chartEls = document.querySelectorAll(".env-chart");
+  chartEls.forEach((el, index) => {
+    initMiniChart(el, envStats.value[index].trend);
+  });
 });
 </script>

@ -482,7 +468,7 @@ onMounted(() => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .env-container {
  .env-card {
--- a/src/views/monitor/species/index.vue
+++ b/src/views/monitor/species/index.vue
@ -1,18 +1,9 @@
-<script setup lang="ts">
+<script setup>
 import { ref, reactive } from "vue";
 import * as echarts from "echarts";
 import { onMounted } from "vue";

-interface SpeciesData {
-  id: number;
-  name: string;
-  type: string;
-  count: number;
-  location: string;
-  time: string;
-}
-
-const tableData = ref<SpeciesData[]>([
+const tableData = ref([
  {
    id: 1,
    name: "东方白鹳",
@ -148,7 +139,7 @@ const initChart = () => {
        label: {
          show: true,
          position: 'outside',
-          formatter: function(params: any) {
+          formatter: function(params) {
            return `${params.name}\n${params.percent.toFixed(1)}%`;
          },
          color: '#666',
@ -172,10 +163,10 @@ const initChart = () => {
        animationDurationUpdate: 500,
        animationType: 'expansion',
        animationEasing: 'cubicInOut',
-        animationDelay: function(idx: number) {
+        animationDelay: function(idx) {
          return idx * 100;
        },
-        animationDelayUpdate: function(idx: number) {
+        animationDelayUpdate: function(idx) {
          return idx * 100;
        },
        emphasis: {
@ -201,7 +192,7 @@ const initChart = () => {
  };

  myChart.setOption(option);
-  
+
  window.addEventListener('resize', () => {
    myChart.resize();
  });
@ -214,7 +205,7 @@ onMounted(() => {
 // 添加导出相关的数据和方法
 const exportDialogVisible = ref(false);
 const exportForm = reactive({
-  timeRange: [] as string[],
+  timeRange: [],
  format: "excel",
 });

@ -306,7 +297,7 @@ const handleExportConfirm = () => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .species-container {
  padding: 20px;
--- a/src/views/patrol/points/index.vue
+++ b/src/views/patrol/points/index.vue
@ -1,18 +1,8 @@
-<script setup lang="ts">
+<script setup>
 import { ref, reactive, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";

-interface PointData {
-  id: number;
-  name: string;
-  location: string;
-  type: string;
-  description: string;
-  status: string;
-  lastPatrolTime: string;
-}
-
-const tableData = ref<PointData[]>([
+const tableData = ref([
  {
    id: 1,
    name: "A区-1号点位",
@ -56,25 +46,25 @@ const handleAdd = () => {

 // 添加搜索相关
 const searchText = ref("");
-const typeFilter = ref<string[]>([]);
-const statusFilter = ref<string[]>([]);
+const typeFilter = ref([]);
+const statusFilter = ref([]);

 // 过滤表格数据
 const filteredTableData = computed(() => {
  return tableData.value.filter(point => {
    // 文本搜索
    const searchLower = searchText.value.toLowerCase();
-    const textMatch = !searchText.value || 
+    const textMatch = !searchText.value ||
      point.name.toLowerCase().includes(searchLower) ||
      point.location.toLowerCase().includes(searchLower) ||
      point.description.toLowerCase().includes(searchLower);

    // 类型筛选
-    const typeMatch = typeFilter.value.length === 0 || 
+    const typeMatch = typeFilter.value.length === 0 ||
      typeFilter.value.includes(point.type);

    // 状态筛选
-    const statusMatch = statusFilter.value.length === 0 || 
+    const statusMatch = statusFilter.value.length === 0 ||
      statusFilter.value.includes(point.status);

    return textMatch && typeMatch && statusMatch;
@ -90,9 +80,9 @@ const resetFilters = () => {

 // 添加编辑相关
 const isEdit = ref(false);
-const currentPoint = ref<PointData | null>(null);
+const currentPoint = ref(null);

-const handleEdit = (row: PointData) => {
+const handleEdit = (row) => {
  isEdit.value = true;
  currentPoint.value = row;
  formData.name = row.name;
@ -105,7 +95,7 @@ const handleEdit = (row: PointData) => {
 // 更新提交处理
 const handleSubmit = async () => {
  if (!formRef.value) return;
-  
+
  try {
    await formRef.value.validate();
    if (isEdit.value) {
@ -145,16 +135,16 @@ const paginatedData = computed(() => {
  return filteredTableData.value.slice(start, end);
 });

-const handleSizeChange = (val: number) => {
+const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
 };

-const handleCurrentChange = (val: number) => {
+const handleCurrentChange = (val) => {
  currentPage.value = val;
 };

-const handleDelete = (row: PointData) => {
+const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该巡护点位？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@ -253,9 +243,9 @@ const pointTypes = [
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" link @click="handleEdit(row)">编辑</el-button>
-            <el-button 
-              type="danger" 
-              size="small" 
+            <el-button
+              type="danger"
+              size="small"
              link
              @click="handleDelete(row)"
            >
@ -280,8 +270,8 @@ const pointTypes = [
    </el-card>

    <!-- 新增点位弹窗 -->
-    <el-dialog 
-      v-model="dialogVisible" 
+    <el-dialog
+      v-model="dialogVisible"
      :title="isEdit ? '编辑巡护点位' : '新增巡护点位'"
      width="500px"
      @close="handleDialogClose"
@ -328,7 +318,7 @@ const pointTypes = [
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .point-container {
  .el-card {
@ -418,4 +408,4 @@ const pointTypes = [
    width: 100%;
  }
 }
-</style> 
+</style>
--- a/src/views/patrol/records/index.vue
+++ b/src/views/patrol/records/index.vue
@ -1,20 +1,9 @@
-<script setup lang="ts">
+<script setup>
 import { ref, computed, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { Search } from "@element-plus/icons-vue";

-interface RecordData {
-  id: number;
-  taskTitle: string;
-  patroller: string;
-  route: string;
-  findings: string;
-  images: string[];
-  status: string;
-  completedTime: string;
-}
-
-const tableData = ref<RecordData[]>([
+const tableData = ref([
  {
    id: 1,
    taskTitle: "A区日常巡查",
@ -38,9 +27,9 @@ const tableData = ref<RecordData[]>([
 ]);

 const dialogVisible = ref(false);
-const currentRecord = ref<RecordData | null>(null);
+const currentRecord = ref(null);

-const handleView = (row: RecordData) => {
+const handleView = (row) => {
  currentRecord.value = row;
  dialogVisible.value = true;
 };
@ -61,7 +50,7 @@ const filteredTableData = computed(() => {

 const exportDialogVisible = ref(false);
 const exportForm = reactive({
-  timeRange: [] as string[],
+  timeRange: [],
  format: "excel",
  types: ["basic", "findings", "images"],
 });
@ -85,12 +74,12 @@ const paginatedData = computed(() => {
  return filteredTableData.value.slice(start, end);
 });

-const handleSizeChange = (val: number) => {
+const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
 };

-const handleCurrentChange = (val: number) => {
+const handleCurrentChange = (val) => {
  currentPage.value = val;
 };
 </script>
@ -242,7 +231,7 @@ const handleCurrentChange = (val: number) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .record-container {
  .el-card {
--- a/src/views/patrol/tasks/index.vue
+++ b/src/views/patrol/tasks/index.vue
@ -1,19 +1,8 @@
-<script setup lang="ts">
+<script setup>
 import { ref, reactive, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";

-interface TaskData {
-  id: number;
-  title: string;
-  area: string;
-  assignee: string;
-  status: string;
-  priority: string;
-  startTime: string;
-  endTime: string;
-}
-
-const tableData = ref<TaskData[]>([
+const tableData = ref([
  {
    id: 1,
    title: "A区日常巡查",
@ -36,8 +25,8 @@ const tableData = ref<TaskData[]>([
  },
 ]);

-const getStatusType = (status: string) => {
-  const map: Record<string, string> = {
+const getStatusType = (status) => {
+  const map = {
    进行中: "success",
    待开始: "info",
    已完成: "primary",
@ -46,8 +35,8 @@ const getStatusType = (status: string) => {
  return map[status] || "info";
 };

-const getPriorityType = (priority: string) => {
-  const map: Record<string, string> = {
+const getPriorityType = (priority) => {
+  const map = {
    高: "danger",
    中: "warning",
    低: "info",
@ -55,7 +44,7 @@ const getPriorityType = (priority: string) => {
  return map[priority] || "info";
 };

-// 添加新建任务相关
+// 新建任务相关
 const newTaskDialogVisible = ref(false);
 const newTaskForm = reactive({
  title: "",
@ -67,24 +56,23 @@ const newTaskForm = reactive({
  description: "",
 });

-// 添加任务详情相关
+// 任务详情相关
 const detailDialogVisible = ref(false);
-const currentTask = ref<TaskData | null>(null);
+const currentTask = ref(null);

-// 添加任务状态更新相关
-const handleView = (row: TaskData) => {
+// 任务状态更新相关
+const handleView = (row) => {
  currentTask.value = row;
  detailDialogVisible.value = true;
 };

-const handleComplete = (row: TaskData) => {
+const handleComplete = (row) => {
  ElMessageBox.confirm("确认完成该巡护任务？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
-      // 这里添加完成任务的逻辑
      ElMessage.success("任务已完成");
    })
    .catch(() => {
@ -92,14 +80,13 @@ const handleComplete = (row: TaskData) => {
    });
 };

-const handleCancel = (row: TaskData) => {
+const handleCancel = (row) => {
  ElMessageBox.confirm("确认取消该巡护任务？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
-      // 这里添加取消任务的逻辑
      ElMessage.success("任务已取消");
    })
    .catch(() => {
@ -107,14 +94,8 @@ const handleCancel = (row: TaskData) => {
    });
 };

-// 添加任务时间线数据
-interface TimelineItem {
-  type: 'primary' | 'success' | 'warning' | 'danger' | 'info';
-  timestamp: string;
-  content: string;
-}
-
-const taskTimeline = ref<TimelineItem[]>([
+// 任务时间线数据
+const taskTimeline = ref([
  {
    type: 'primary',
    timestamp: '2024-03-20 09:00',
@ -137,8 +118,8 @@ const taskTimeline = ref<TimelineItem[]>([
  },
 ]);

-// 添加表单验证规则
-const validateTime = (rule: any, value: string, callback: Function) => {
+// 表单验证规则
+const validateTime = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请选择时间'));
    return;
@ -174,7 +155,7 @@ const handleNewTask = () => {

 const handleNewTaskSubmit = async () => {
  if (!newTaskFormRef.value) return;
-  
+
  try {
    await newTaskFormRef.value.validate();
    console.log("提交新任务:", newTaskForm);
@ -199,18 +180,18 @@ const resetForm = () => {
  }
 };

-// 添加关闭弹窗时重置表单
+// 关闭弹窗时重置表单
 const handleDialogClose = () => {
  resetForm();
 };

-// 添加搜索和筛选相关
+// 搜索和筛选相关
 const searchText = ref("");
-const statusFilter = ref<string[]>([]);
-const priorityFilter = ref<string[]>([]);
-const dateRange = ref<[string, string]>(['', '']);
+const statusFilter = ref([]);
+const priorityFilter = ref([]);
+const dateRange = ref(['', '']);

-// 添加统计数据
+// 统计数据
 const statistics = computed(() => {
  const total = tableData.value.length;
  const statusCount = {
@ -226,8 +207,8 @@ const statistics = computed(() => {
  };

  tableData.value.forEach(task => {
-    statusCount[task.status as keyof typeof statusCount]++;
-    priorityCount[task.priority as keyof typeof priorityCount]++;
+    statusCount[task.status]++;
+    priorityCount[task.priority]++;
  });

  return {
@ -242,17 +223,17 @@ const filteredTableData = computed(() => {
  return tableData.value.filter(task => {
    // 文本搜索
    const searchLower = searchText.value.toLowerCase();
-    const textMatch = !searchText.value || 
+    const textMatch = !searchText.value ||
      task.title.toLowerCase().includes(searchLower) ||
      task.area.toLowerCase().includes(searchLower) ||
      task.assignee.toLowerCase().includes(searchLower);

    // 状态筛选
-    const statusMatch = statusFilter.value.length === 0 || 
+    const statusMatch = statusFilter.value.length === 0 ||
      statusFilter.value.includes(task.status);

    // 优先级筛选
-    const priorityMatch = priorityFilter.value.length === 0 || 
+    const priorityMatch = priorityFilter.value.length === 0 ||
      priorityFilter.value.includes(task.priority);

    // 日期范围筛选
@ -489,9 +470,9 @@ const resetFilters = () => {
    </el-dialog>

    <!-- 修改新建任务弹窗，添加表单验证 -->
-    <el-dialog 
-      v-model="newTaskDialogVisible" 
-      title="新建巡护任务" 
+    <el-dialog
+      v-model="newTaskDialogVisible"
+      title="新建巡护任务"
      width="600px"
      @close="handleDialogClose"
    >
@ -546,7 +527,7 @@ const resetFilters = () => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .task-container {
  .el-card {
@ -669,7 +650,7 @@ const resetFilters = () => {
  .el-radio-group {
    .el-radio {
      margin-right: 20px;
-      
+
      &:last-child {
        margin-right: 0;
      }
@ -692,7 +673,7 @@ const resetFilters = () => {
    .statistics-content {
      display: flex;
      align-items: baseline;
-      
+
      .number {
        font-size: 28px;
        font-weight: 600;
--- a/src/views/report/about/index.vue
+++ b/src/views/report/about/index.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";
 import { markRaw } from "vue";
 import {
--- a/src/views/report/analysis/index.vue
+++ b/src/views/report/analysis/index.vue
@ -1,43 +1,11 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import * as echarts from "echarts";
 import { ElMessageBox, ElMessage } from "element-plus";
-import { Plus } from "@element-plus/icons-vue";
-
-interface AnalysisReport {
-  id: number;
-  title: string;
-  type: "species" | "environment"; // 分析类型：物种/环境
-  timeRange: {
-    // 分析时间范围
-    start: string;
-    end: string;
-  };
-  dataSource: {
-    // 数据来源
-    type: string;
-    points: string[]; // 监测点位
-  }[];
-  analysis: {
-    summary: string; // 分析总结
-    trends: {
-      // 趋势分析
-      indicator: string; // 指标
-      trend: string; // 变化趋势
-      data: any[]; // 数据
-    }[];
-    abnormal: {
-      // 异常分析
-      type: string;
-      description: string;
-      level: string;
-    }[];
-  };
-  recommendations: string[]; // 建议措施
-}
+import { Plus } from '@element-plus/icons-vue';

 // 示例数据
-const tableData = ref<AnalysisReport[]>([
+const tableData = ref([
  {
    id: 1,
    title: "2024年第一季度水质监测分析报告",
@ -87,15 +55,15 @@ const filterForm = ref({

 // 添加详情查看功能
 const detailVisible = ref(false);
-const currentReport = ref<AnalysisReport | null>(null);
+const currentReport = ref(null);

-const handleView = (row: AnalysisReport) => {
+const handleView = (row) => {
  currentReport.value = row;
  detailVisible.value = true;
 };

 // 添加导出功能
-const handleExport = (row: AnalysisReport) => {
+const handleExport = (row) => {
  ElMessageBox.confirm("确认导出该分析报告？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@ -110,7 +78,7 @@ const handleExport = (row: AnalysisReport) => {
 };

 // 添加图表resize监听
-let myChart: echarts.ECharts | null = null;
+let myChart = null;

 const initChart = () => {
  const chartDom = document.getElementById("trendChart");
@ -266,12 +234,12 @@ const paginatedData = computed(() => {
  return tableData.value.slice(start, end);
 });

-const handleSizeChange = (val: number) => {
+const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
 };

-const handleCurrentChange = (val: number) => {
+const handleCurrentChange = (val) => {
  currentPage.value = val;
 };

@ -480,7 +448,7 @@ const handleRefresh = () => {
          <el-button @click="detailVisible = false">关闭</el-button>
          <el-button
            type="warning"
-            @click="handleExport(currentReport!)"
+            @click="handleExport(currentReport)"
            :disabled="!currentReport"
          >
            导出
@ -492,7 +460,7 @@ const handleRefresh = () => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .analysis-report {
  .card-header {
--- a/src/views/report/daily/index.vue
+++ b/src/views/report/daily/index.vue
@ -1,29 +1,11 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted } from 'vue';
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
 import { Plus, Document, Download, TrendCharts, Connection } from '@element-plus/icons-vue';
 import * as echarts from 'echarts';

-interface DailyReport {
-  id: number;
-  title: string;
-  reporter: string;
-  department: string;
-  type: string;
-  content: string;
-  summary: string;
-  data: {
-    type: string;
-    value: string | number;
-    trend?: string;
-  }[];
-  attachments: string[];
-  status: string;
-  createTime: string;
-}
-
 // 示例数据
-const tableData = ref<DailyReport[]>([
+const tableData = ref([
  {
    id: 1,
    title: "A区巡护日报",
@ -60,9 +42,9 @@ const formData = ref({

 // 查看详情
 const detailVisible = ref(false);
-const currentReport = ref<DailyReport | null>(null);
+const currentReport = ref(null);

-const handleView = (row: DailyReport) => {
+const handleView = (row) => {
  currentReport.value = row;
  detailVisible.value = true;
 };
@ -78,13 +60,12 @@ const handleSubmit = () => {
 };

 // 趋势图表
-let trendChart: echarts.ECharts | null = null;
+let trendChart = null;

 // 初始化趋势图表
 const initTrendChart = () => {
  const chartDom = document.getElementById('trendChart');
  if (!chartDom) return;
-  
  const myChart = echarts.init(chartDom);
  const option = {
    backgroundColor: 'transparent',
@ -235,11 +216,10 @@ const handleGenerate = () => {
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
-    // 模拟自动汇总数据过程
    const loadingInstance = ElLoading.service({
      text: '正在汇总数据，请稍候...'
    });
-    
+
    setTimeout(() => {
      loadingInstance.close();
      ElMessage.success('报告生成成功，已自动整合今日巡护记录和监测数据');
@ -415,8 +395,8 @@ const showTrendAnalysis = ref(false);
          {{ currentReport.content }}
        </el-descriptions-item>
        <el-descriptions-item label="附件" :span="2">
-          <el-link 
-            v-for="file in currentReport.attachments" 
+          <el-link
+            v-for="file in currentReport.attachments"
            :key="file"
            type="primary"
            style="margin-right: 16px"
@ -443,7 +423,7 @@ const showTrendAnalysis = ref(false);
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
-          <el-button type="warning" @click="handleExport(currentReport!)">导出</el-button>
+          <el-button type="warning" @click="handleExport(currentReport)">导出</el-button>
        </span>
      </template>
    </el-dialog>
@ -481,7 +461,7 @@ const showTrendAnalysis = ref(false);
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .daily-report {
  .card-header {
@ -498,18 +478,18 @@ const showTrendAnalysis = ref(false);
    padding: 20px;
    text-align: center;
    transition: all 0.3s;
-    
+
    &:hover {
      transform: translateY(-2px);
    }
-    
+
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: $primary-color;
      margin-bottom: 8px;
    }
-    
+
    .stat-label {
      font-size: 14px;
      color: $text-secondary;
@ -529,19 +509,19 @@ const showTrendAnalysis = ref(false);

  .stat-grid {
    padding: 12px;
-    
+
    .stat-item {
      text-align: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 4px;
-      
+
      .stat-item-label {
        font-size: 13px;
        color: $text-secondary;
        margin-bottom: 8px;
      }
-      
+
      .stat-item-value {
        font-size: 16px;
        font-weight: 500;
@ -550,11 +530,11 @@ const showTrendAnalysis = ref(false);
        align-items: center;
        justify-content: center;
        gap: 4px;
-        
+
        .up {
          color: $success-color;
        }
-        
+
        .down {
          color: $danger-color;
        }
@ -566,7 +546,7 @@ const showTrendAnalysis = ref(false);
    display: flex;
    align-items: center;
    gap: 8px;
-    
+
    .el-icon {
      color: $text-secondary;
      cursor: help;
@ -578,15 +558,15 @@ const showTrendAnalysis = ref(false);
      padding: 12px;
      background: #f8f9fa;
      border-radius: 4px;
-      
+
      p {
        margin: 8px 0;
        color: $text-regular;
-        
+
        &:first-child {
          margin-top: 0;
        }
-        
+
        &:last-child {
          margin-bottom: 0;
        }
@ -607,4 +587,4 @@ const showTrendAnalysis = ref(false);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
 }
-</style> 
+</style>
--- a/src/views/reports/analysis/index.vue
+++ b/src/views/reports/analysis/index.vue
@ -1,21 +1,10 @@
-<script setup lang="ts">
+<script setup>
 import { ref, computed, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import * as echarts from "echarts";
 import { onMounted } from "vue";

-interface AnalysisReport {
-  id: number;
-  title: string;
-  type: string;
-  period: string;
-  author: string;
-  summary: string;
-  charts: string[];
-  createTime: string;
-}
-
-const tableData = ref<AnalysisReport[]>([
+const tableData = ref([
  {
    id: 1,
    title: "2024年第一季度水质分析报告",
@ -42,7 +31,7 @@ const tableData = ref<AnalysisReport[]>([
 const initChart = () => {
  const chartDom = document.getElementById("analysisChart");
  if (!chartDom) return;
-  
+
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
@ -107,7 +96,7 @@ const handleSubmit = () => {
 };

 // 添加导出处理函数
-const handleExport = (row: AnalysisReport) => {
+const handleExport = (row) => {
  ElMessageBox.confirm(
    '确认导出该分析报告？',
    '提示',
@ -130,9 +119,9 @@ const handleExport = (row: AnalysisReport) => {

 // 添加查看报告功能
 const detailVisible = ref(false);
-const currentReport = ref<AnalysisReport | null>(null);
+const currentReport = ref(null);

-const handleView = (row: AnalysisReport) => {
+const handleView = (row) => {
  currentReport.value = row;
  detailVisible.value = true;
 };
@ -168,8 +157,8 @@ const handleView = (row: AnalysisReport) => {
            <el-button type="primary" size="small" @click="handleView(row)">
              查看
            </el-button>
-            <el-button 
-              type="warning" 
+            <el-button
+              type="warning"
              size="small"
              @click="handleExport(row)"
            >
@ -271,9 +260,9 @@ const handleView = (row: AnalysisReport) => {
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
-          <el-button 
+          <el-button
            type="warning"
-            @click="handleExport(currentReport!)"
+            @click="handleExport(currentReport)"
            :disabled="!currentReport"
          >
            导出
@ -285,7 +274,7 @@ const handleView = (row: AnalysisReport) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .analysis-report-container {
  .el-card {
@ -342,4 +331,4 @@ const handleView = (row: AnalysisReport) => {
  color: $text-secondary;
  font-size: 14px;
 }
-</style> 
+</style>
--- a/src/views/reports/daily/index.vue
+++ b/src/views/reports/daily/index.vue
@ -1,21 +1,9 @@
-<script setup lang="ts">
+<script setup>
 import { ref, computed, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Search } from "@element-plus/icons-vue";

-interface DailyReport {
-  id: number;
-  title: string;
-  reporter: string;
-  department: string;
-  type: string;
-  content: string;
-  attachments: string[];
-  status: string;
-  createTime: string;
-}
-
-const tableData = ref<DailyReport[]>([
+const tableData = ref([
  {
    id: 1,
    title: "A区巡护日报",
@ -42,22 +30,22 @@ const tableData = ref<DailyReport[]>([

 // 搜索和筛选
 const searchText = ref("");
-const typeFilter = ref<string[]>([]);
-const statusFilter = ref<string[]>([]);
-const dateRange = ref<[string, string]>(["", ""]);
+const typeFilter = ref([]);
+const statusFilter = ref([]);
+const dateRange = ref(["", ""]);

 // 过滤数据
 const filteredData = computed(() => {
  return tableData.value.filter(report => {
    const searchLower = searchText.value.toLowerCase();
-    const textMatch = !searchText.value || 
+    const textMatch = !searchText.value ||
      report.title.toLowerCase().includes(searchLower) ||
      report.reporter.toLowerCase().includes(searchLower);

-    const typeMatch = typeFilter.value.length === 0 || 
+    const typeMatch = typeFilter.value.length === 0 ||
      typeFilter.value.includes(report.type);

-    const statusMatch = statusFilter.value.length === 0 || 
+    const statusMatch = statusFilter.value.length === 0 ||
      statusFilter.value.includes(report.status);

    return textMatch && typeMatch && statusMatch;
@ -70,7 +58,7 @@ const formData = reactive({
  title: "",
  type: "",
  content: "",
-  attachments: [] as string[],
+  attachments: [],
 });

 const handleCreate = () => {
@ -85,15 +73,15 @@ const handleSubmit = () => {

 // 查看报告
 const detailVisible = ref(false);
-const currentReport = ref<DailyReport | null>(null);
+const currentReport = ref(null);

-const handleView = (row: DailyReport) => {
+const handleView = (row) => {
  currentReport.value = row;
  detailVisible.value = true;
 };

 // 添加导出处理函数
-const handleExport = (row: DailyReport) => {
+const handleExport = (row) => {
  ElMessageBox.confirm(
    '确认导出该报告？',
    '提示',
@ -181,15 +169,15 @@ const handleExport = (row: DailyReport) => {
            <el-button type="primary" size="small" @click="handleView(row)">
              查看
            </el-button>
-            <el-button 
-              type="success" 
+            <el-button
+              type="success"
              size="small"
              :disabled="row.status === '已审核'"
            >
              审核
            </el-button>
-            <el-button 
-              type="warning" 
+            <el-button
+              type="warning"
              size="small"
              @click="handleExport(row)"
            >
@ -264,8 +252,8 @@ const handleExport = (row: DailyReport) => {
          </el-descriptions-item>
          <el-descriptions-item label="附件" :span="2">
            <div class="attachment-list">
-              <el-link 
-                v-for="file in currentReport.attachments" 
+              <el-link
+                v-for="file in currentReport.attachments"
                :key="file"
                type="primary"
                style="margin-right: 16px"
@ -279,9 +267,9 @@ const handleExport = (row: DailyReport) => {
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
-          <el-button 
+          <el-button
            type="warning"
-            @click="handleExport(currentReport!)"
+            @click="handleExport(currentReport)"
            :disabled="!currentReport"
          >
            导出
@ -293,7 +281,7 @@ const handleExport = (row: DailyReport) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .daily-report-container {
  .el-card {
@ -341,4 +329,4 @@ const handleExport = (row: DailyReport) => {
    justify-content: right;
  }
 }
-</style> 
+</style>
--- a/src/views/system/data/index.vue
+++ b/src/views/system/data/index.vue
@ -1,22 +1,11 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import type { UploadProps } from "element-plus";
 import { markRaw } from 'vue';
 import { Upload, Download, Refresh } from "@element-plus/icons-vue";

-// 备份记录
-interface BackupRecord {
-  id: number;
-  name: string;
-  size: string;
-  type: string;
-  status: string;
-  createTime: string;
-}
-
 // 模拟备份记录数据
-const backupRecords = ref<BackupRecord[]>([
+const backupRecords = ref([
  {
    id: 1,
    name: "系统完整备份_20240320",
@ -36,7 +25,7 @@ const backupRecords = ref<BackupRecord[]>([
 ]);

 // 数据导入上传配置
-const uploadConfig: UploadProps = {
+const uploadConfig = {
  action: "/api/upload",
  multiple: true,
  accept: ".xlsx,.csv",
@ -75,7 +64,7 @@ const handleBackup = () => {
    type: "warning",
  }).then(() => {
    ElMessage.success("备份任务已启动");
-    const newBackup: BackupRecord = {
+    const newBackup = {
      id: Date.now(),
      name: `系统备份_${new Date().toISOString().split("T")[0].replace(/-/g, "")}`,
      size: "处理中",
@ -97,7 +86,7 @@ const handleBackup = () => {
 };

 // 恢复备份
-const handleRestore = (record: BackupRecord) => {
+const handleRestore = (record) => {
  if (record.status !== "成功") {
    ElMessage.warning("只能恢复成功的备份");
    return;
@ -113,7 +102,7 @@ const handleRestore = (record: BackupRecord) => {
 };

 // 删除备份
-const handleDelete = (record: BackupRecord) => {
+const handleDelete = (record) => {
  ElMessageBox.confirm("确认删除该备份？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@ -248,7 +237,7 @@ const icons = {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .data-container {
  .mb-20 {
--- a/src/views/system/devices/index.vue
+++ b/src/views/system/devices/index.vue
@ -1,22 +1,11 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onUnmounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import * as echarts from "echarts";
 import { Plus } from "@element-plus/icons-vue";

-interface Device {
-  id: number;
-  name: string;
-  type: string;
-  location: string;
-  status: string;
-  ip: string;
-  lastHeartbeat: string;
-  lastMaintenance: string;
-}
-
 // 模拟设备数据
-const tableData = ref<Device[]>([
+const tableData = ref([
  {
    id: 1,
    name: "A区-水质监测器-01",
@ -50,7 +39,7 @@ const deviceTypes = [
 // 新增/编辑设备
 const dialogVisible = ref(false);
 const isEdit = ref(false);
-const currentDevice = ref<Device | null>(null);
+const currentDevice = ref(null);

 const formData = ref({
  name: "",
@ -78,7 +67,7 @@ const handleAdd = () => {
 };

 // 打开编辑弹窗
-const handleEdit = (row: Device) => {
+const handleEdit = (row) => {
  isEdit.value = true;
  currentDevice.value = row;
  formData.value = {
@ -99,7 +88,7 @@ const handleSubmit = async () => {
    if (isEdit.value && currentDevice.value) {
      // 编辑模式
      const index = tableData.value.findIndex(
-        (item) => item.id === currentDevice.value!.id
+        (item) => item.id === currentDevice.value.id
      );
      if (index !== -1) {
        tableData.value[index] = {
@ -111,7 +100,7 @@ const handleSubmit = async () => {
      }
    } else {
      // 新增模式
-      const newDevice: Device = {
+      const newDevice = {
        id: tableData.value.length + 1,
        ...formData.value,
        status: "在线",
@ -141,7 +130,7 @@ const resetForm = () => {
 };

 // 删除设备
-const handleDelete = (row: Device) => {
+const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该设备？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@ -158,12 +147,12 @@ const handleDelete = (row: Device) => {
 };

 // 远程配置
-const handleConfig = (row: Device) => {
+const handleConfig = (row) => {
  ElMessage.success("正在连接设备...");
 };

 // 设备维护
-const handleMaintenance = (row: Device) => {
+const handleMaintenance = (row) => {
  ElMessage.success("已记录维护时间");
  const index = tableData.value.findIndex((item) => item.id === row.id);
  if (index !== -1) {
@ -206,8 +195,8 @@ const defaultProps = {

 // 监控相关
 const monitorVisible = ref(false);
-const currentMonitorDevice = ref<Device | null>(null);
-const monitorChart = ref<echarts.ECharts | null>(null);
+const currentMonitorDevice = ref(null);
+const monitorChart = ref(null);

 // 模拟实时数据
 const realTimeData = ref({
@ -257,13 +246,13 @@ const handleAddGroup = () => {
  });
 };

-const handleNodeClick = (data: any) => {
+const handleNodeClick = (data) => {
  console.log("选中分组:", data);
  // 这里可以根据分组筛选设备列表
 };

 // 监控处理
-const handleMonitor = (device: Device) => {
+const handleMonitor = (device) => {
  currentMonitorDevice.value = device;
  monitorVisible.value = true;
  initMonitorChart();
@ -330,7 +319,7 @@ const initMonitorChart = () => {
 };

 // 模拟实时数据更新
-let dataTimer: number;
+let dataTimer;
 const startRealTimeData = () => {
  clearInterval(dataTimer);
  dataTimer = setInterval(() => {
@ -376,7 +365,7 @@ const startRealTimeData = () => {
 };

 // 检查告警
-const checkAlarms = (data: any) => {
+const checkAlarms = (data) => {
  const { thresholds } = alarmConfig.value;

  if (
@ -610,7 +599,7 @@ onUnmounted(() => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .device-container {
  .group-card {
--- a/src/views/system/logs/index.vue
+++ b/src/views/system/logs/index.vue
@ -1,21 +1,10 @@
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { useSystemLogStore } from '../../../stores/systemLog';
 import { markRaw } from 'vue';
 import { Download, Delete } from "@element-plus/icons-vue";

-interface LogEntry {
-  id: number;
-  type: string;
-  user: string;
-  action: string;
-  ip: string;
-  status: string;
-  detail: string;
-  createTime: string;
-}
-
 const systemLogStore = useSystemLogStore();

 // 日志类型选项
@ -34,7 +23,7 @@ const statusOptions = [
 ];

 // 获取状态标签类型
-const getStatusType = (status: string) => {
+const getStatusType = (status) => {
  switch (status) {
    case "成功":
      return "success";
@ -184,7 +173,7 @@ const icons = {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .logs-container {
  .card-header {
--- a/src/views/system/permissions/index.vue
+++ b/src/views/system/permissions/index.vue
@ -1,18 +1,8 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";

-interface Permission {
-  id: number;
-  name: string;
-  code: string;
-  description: string;
-  type: string;
-  status: boolean;
-  createTime: string;
-}
-
-const tableData = ref<Permission[]>([
+const tableData = ref([
  {
    id: 1,
    name: "用户管理",
@ -45,7 +35,7 @@ const tableData = ref<Permission[]>([
 // 新增/编辑权限
 const dialogVisible = ref(false);
 const isEdit = ref(false);
-const currentPermission = ref<Permission | null>(null);
+const currentPermission = ref(null);

 const formData = ref({
  name: "",
@ -73,7 +63,7 @@ const handleAdd = () => {
 };

 // 打开编辑弹窗
-const handleEdit = (row: Permission) => {
+const handleEdit = (row) => {
  isEdit.value = true;
  currentPermission.value = row;
  formData.value = {
@ -95,7 +85,7 @@ const handleSubmit = async () => {
    if (isEdit.value && currentPermission.value) {
      // 编辑模式：更新表格中的数据
      const index = tableData.value.findIndex(
-        (item) => item.id === currentPermission.value!.id
+        (item) => item.id === currentPermission.value.id
      );
      if (index !== -1) {
        tableData.value[index] = {
@ -106,7 +96,7 @@ const handleSubmit = async () => {
      }
    } else {
      // 新增模式：添加到表格
-      const newPermission: Permission = {
+      const newPermission = {
        id: tableData.value.length + 1,
        ...formData.value,
        createTime: new Date().toLocaleString(),
@ -142,7 +132,7 @@ const handleDialogClose = () => {
 };

 // 删除权限
-const handleDelete = (row: Permission) => {
+const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该权限？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@ -246,7 +236,7 @@ const handleDelete = (row: Permission) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;

 .permission-container {
  .el-card {
--- a/src/views/system/roles/index.vue
+++ b/src/views/system/roles/index.vue
@ -1,15 +1,7 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";

-interface RoleData {
-  id: number;
-  name: string;
-  description: string;
-  permissions: string[];
-  createTime: string;
-}
-
-const tableData = ref<RoleData[]>([
+const tableData = ref([
  {
    id: 1,
    name: "超级管理员",
@ -26,11 +18,11 @@ const tableData = ref<RoleData[]>([
  },
 ]);

-const handleEdit = (row: RoleData) => {
+const handleEdit = (row) => {
  console.log("编辑角色:", row);
 };

-const handleDelete = (row: RoleData) => {
+const handleDelete = (row) => {
  console.log("删除角色:", row);
 };
 </script>
@ -73,7 +65,7 @@ const handleDelete = (row: RoleData) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;

 .role-container {
  .el-card {
--- a/src/views/system/settings/index.vue
+++ b/src/views/system/settings/index.vue
@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";

 // 系统参数配置
@ -31,7 +31,7 @@ const alertConfig = ref({
 });

 // 保存配置
-const handleSave = (type: string) => {
+const handleSave = (type) => {
  // 这里模拟保存配置
  console.log(
    `保存${type}配置:`,
@ -174,7 +174,7 @@ const handleSave = (type: string) => {
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;

 .settings-container {
  .mb-20 {
--- a/src/views/system/users/index.vue
+++ b/src/views/system/users/index.vue
@ -1,41 +1,260 @@
-<script setup lang="ts">
-import { ref } from "vue";
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { getUserList, createUser, updateUser, deleteUser } from "@/api/user";
+import { formatDateTime } from "@/utils/format";

-interface UserData {
-  id: number;
-  username: string;
-  role: string;
-  email: string;
-  status: boolean;
-  createTime: string;
-}
+const tableData = ref([]);
+const allData = ref([]); // 保存所有数据
+const loading = ref(false);
+const total = ref(0);

-const tableData = ref<UserData[]>([
-  {
-    id: 1,
-    username: "admin",
-    role: "超级管理员",
-    email: "admin@example.com",
-    status: true,
-    createTime: "2024-03-20",
-  },
-  {
-    id: 2,
-    username: "manager",
-    role: "管理人员",
-    email: "manager@example.com",
-    status: true,
-    createTime: "2024-03-20",
-  },
-]);
+// 查询参数
+const queryParams = ref({
+  username: '',
+  role: '',
+  status: ''
+});

-const handleEdit = (row: UserData) => {
-  console.log("编辑用户:", row);
+// 过滤后的数据
+const filteredData = computed(() => {
+  return allData.value.filter(item => {
+    // 用户名搜索
+    if (queryParams.value.username &&
+        !item.real_name.toLowerCase().includes(queryParams.value.username.toLowerCase())) {
+      return false;
+    }
+
+    // 角色搜索
+    if (queryParams.value.role &&
+        item.role.name !== queryParams.value.role) {
+      return false;
+    }
+
+    // 状态搜索
+    if (queryParams.value.status !== '' &&
+        item.status !== queryParams.value.status) {
+      return false;
+    }
+
+    return true;
+  }).sort((a, b) => a.id - b.id); // 按ID升序排序
+});
+
+// 获取用户列表
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await getUserList();
+
+    if (res.success) {
+      allData.value = res.data.list; // 保存所有数据
+      tableData.value = filteredData.value; // 显示过滤后的数据
+      total.value = filteredData.value.length;
+    } else {
+      ElMessage.error(res.message || '获取用户列表失败');
+    }
+  } catch (error) {
+    if (error.response) {
+      ElMessage.error(error.response.data.message || '获取用户列表失败');
+    } else if (error.request) {
+      ElMessage.error('网络错误，请检查网络连接');
+    } else {
+      ElMessage.error(error.message || '获取用户列表失败');
+    }
+  } finally {
+    loading.value = false;
+  }
 };

-const handleDelete = (row: UserData) => {
-  console.log("删除用户:", row);
+// 处理查询
+const handleQuery = () => {
+  tableData.value = filteredData.value;
+  total.value = filteredData.value.length;
 };
+
+// 重置查询
+const resetQuery = () => {
+  queryParams.value = {
+    username: '',
+    role: '',
+    status: ''
+  };
+  tableData.value = allData.value;
+  total.value = allData.value.length;
+};
+
+// 新增/编辑对话框
+const dialogVisible = ref(false);
+const dialogTitle = ref('新增用户');
+const formData = ref({
+  username: '',
+  password: '',
+  role_id: undefined,
+  real_name: '',
+  email: '',
+  phone: '',
+  status: 1,
+  expire_time: undefined
+});
+
+// 表单规则
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' },
+    {
+      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,30}$/,
+      message: '密码必须包含字母和数字',
+      trigger: 'blur'
+    }
+  ],
+  role_id: [
+    { required: true, message: '请选择角色', trigger: 'change' }
+  ],
+  email: [
+    {
+      pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
+      message: '请输入正确的邮箱格式',
+      trigger: 'blur'
+    }
+  ],
+  phone: [
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '请输入正确的手机号格式',
+      trigger: 'blur'
+    }
+  ]
+};
+
+const formRef = ref(null);
+const isEdit = ref(false);
+const editId = ref(null);
+
+// 打开新增对话框
+const handleAdd = () => {
+  dialogTitle.value = '新增用户';
+  isEdit.value = false;
+  editId.value = null;
+  formData.value = {
+    username: '',
+    password: '',
+    role_id: undefined,
+    real_name: '',
+    email: '',
+    phone: '',
+    status: 1,
+    expire_time: undefined
+  };
+  dialogVisible.value = true;
+};
+
+// 打开编辑对话框
+const handleEdit = (row) => {
+  dialogTitle.value = '编辑用户';
+  isEdit.value = true;
+  editId.value = row.id;
+  formData.value = {
+    real_name: row.real_name || '',
+    email: row.email || '',
+    phone: row.phone || '',
+    role_id: row.role.id.toString(),
+    status: row.status.toString(),
+    expire_time: row.expire_time || '',
+    password: '' // 编辑时密码为可选
+  };
+  dialogVisible.value = true;
+};
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+
+  try {
+    await formRef.value.validate();
+
+    const submitData = { ...formData.value };
+
+    // 处理数据格式
+    if (submitData.status) {
+      submitData.status = parseInt(submitData.status); // 转换为数字
+    }
+    if (submitData.role_id) {
+      submitData.role_id = parseInt(submitData.role_id); // 转换为数字
+    }
+    // 如果过期时间为空，则不提交该字段
+    if (!submitData.expire_time) {
+      delete submitData.expire_time;
+    }
+
+    console.log('提交的数据:', submitData); // 打印提交的数据
+
+    if (isEdit.value) {
+      // 编辑时，如果密码为空，则不提交密码字段
+      if (!submitData.password) {
+        delete submitData.password;
+      }
+      await updateUser(editId.value, submitData);
+      ElMessage.success('编辑成功');
+    } else {
+      await createUser(submitData);
+      ElMessage.success('添加成功');
+    }
+
+    dialogVisible.value = false;
+    getList(); // 刷新列表
+  } catch (error) {
+    console.error('表单提交错误:', error);
+    if (error.response) {
+      console.error('错误响应数据:', error.response.data);
+      ElMessage.error(error.response.data.message || '提交失败，请检查表单数据');
+    } else if (error.request) {
+      ElMessage.error('网络错误，请检查网络连接');
+    } else {
+      ElMessage.error(error.message || '操作失败');
+    }
+  }
+};
+
+// 删除用户
+const handleDelete = (row) => {
+  ElMessageBox.confirm(
+    '确认删除该用户吗？',
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(async () => {
+    try {
+      await deleteUser(row.id);
+      ElMessage.success('删除成功');
+      getList(); // 刷新列表
+    } catch (error) {
+      ElMessage.error(error.message || '删除失败');
+    }
+  }).catch(() => {
+    // 取消删除
+  });
+};
+
+// 角色选项
+const roleOptions = [
+  { label: '超级管理员', value: '1' },
+  { label: '管理人员', value: '2' },
+  { label: '普通用户', value: '3' }
+];
+
+// 页面加载时获取列表
+onMounted(() => {
+  getList();
+});
 </script>

 <template>
@ -44,14 +263,50 @@ const handleDelete = (row: UserData) => {
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
-          <el-button type="primary">新增用户</el-button>
+          <el-button type="primary" @click="handleAdd">新增用户</el-button>
        </div>
      </template>

-      <el-table :data="tableData" style="width: 100%">
+      <!-- 搜索表单 -->
+      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="queryParams.username"
+            placeholder="请输入用户名"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="queryParams.role" placeholder="请选择角色" clearable>
+             <el-option
+              v-for="item in roleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+            <el-option :value="1" label="启用" />
+            <el-option :value="0" label="禁用" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+      >
        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="username" label="用户名" width="120" />
-        <el-table-column prop="role" label="角色" width="120" />
+        <el-table-column prop="real_name" label="用户名" width="120" />
+        <el-table-column prop="role.name" label="角色" width="120" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
@ -60,24 +315,121 @@ const handleDelete = (row: UserData) => {
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column prop="updated_at" label="创建时间" width="180">
+          <template #default="{ row }">
+            {{ formatDateTime(row.updated_at) }}
+          </template>
+        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
-            <el-button type="primary" size="small" @click="handleEdit(row)">
+            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
-            <el-button type="danger" size="small" @click="handleDelete(row)">
+            <el-button type="danger" link @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          :size="'small'"
+          :total="total"
+          :default-current-page="1"
+          :default-page-size="10"
+          layout="total, prev, pager, next"
+          :disabled="true"
+        />
+      </div>
    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      @close="dialogVisible = false"
+      destroy-on-close
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="isEdit ? {
+          ...rules,
+          password: [] // 编辑模式下移除密码验证规则
+        } : rules"
+        label-width="100px"
+        class="user-form"
+      >
+        <el-form-item label="用户名" prop="username" v-if="!isEdit">
+          <el-input v-model="formData.username" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item
+          :label="isEdit ? '新密码' : '密码'"
+          prop="password"
+        >
+          <el-input
+            v-model="formData.password"
+            type="password"
+            show-password
+            :placeholder="isEdit ? '不修改请留空' : '请输入密码'"
+          />
+        </el-form-item>
+        <el-form-item label="角色" prop="role_id">
+          <el-select v-model="formData.role_id" placeholder="请选择角色" class="w-full">
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="真实姓名" prop="real_name">
+          <el-input
+            v-model="formData.real_name"
+            placeholder="请输入真实姓名"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="formData.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="formData.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="'1'">启用</el-radio>
+            <el-radio :value="'0'">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="过期时间" prop="expire_time">
+          <el-date-picker
+            v-model="formData.expire_time"
+            type="datetime"
+            placeholder="请选择过期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;

 .user-container {
  .el-card {
@ -105,6 +457,25 @@ const handleDelete = (row: UserData) => {
  }
 }

+.search-form {
+  margin-bottom: 20px;
+
+  .el-form-item {
+    margin-bottom: 16px;
+
+    :deep(.el-input),
+    :deep(.el-select) {
+      width: 240px;
+    }
+  }
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
 :deep(.el-table) {
  th.el-table__cell {
    background-color: #fafafa;
@ -120,4 +491,23 @@ const handleDelete = (row: UserData) => {
 .el-tag {
  border-radius: 2px;
 }
+
+.user-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+  padding-top: 20px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+:deep(.el-dialog__body) {
+  padding: 20px 40px;
+}
 </style>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -1,14 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,13 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
-}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.js
+++ b/vite.config.js
@ -9,5 +9,12 @@ export default defineConfig({
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'index.html')
+      }
+    }
  }
-})
+})
Author	SHA1	Message	Date
wzclm	fb5ad57dc1	Implement comprehensive user management functionality with API integration	2025-02-20 21:41:57 +08:00
wzclm	bb1acb50c1	Add AnalysisReport interface and refine report type definitions	2025-02-20 20:46:27 +08:00
wzclm	c59e2cf505	优化了路由配置	2025-02-20 20:44:31 +08:00