From c59e2cf505d035cc46f1a93bcd79f14ab7963815 Mon Sep 17 00:00:00 2001
From: wzclm <2855471171@qq.com>
Date: Thu, 20 Feb 2025 20:44:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  22 ++
 .env.development                              |  14 ++
 .env.production                               |  14 ++
 .env.test                                     |  14 ++
 index.html                                    |   2 +-
 package-lock.json                             |   7 +-
 package.json                                  |   3 +-
 src/api/login/index.js                        |  20 ++
 src/api/report.ts                             |  49 ----
 src/api/request.ts                            |  35 ---
 src/api/user/index.js                         |   0
 src/components/HelloWorld.vue                 |  41 ----
 src/components/report/EnvironmentAnalysis.vue |  34 +--
 src/components/report/MonitorDataChart.vue    |  30 ++-
 src/components/report/SpeciesAnalysis.vue     |  24 +-
 src/layout/AdminLayout.vue                    |   4 +-
 .../Sidebar/{menuData.ts => menuData.js}      |   2 +-
 src/{main.ts => main.js}                      |   2 +-
 src/router/{index.ts => index.js}             |  16 +-
 src/stores/{systemLog.ts => systemLog.js}     |  21 +-
 src/stores/user.js                            |  53 +++++
 src/stores/user.ts                            |  44 ----
 src/utils/request.js                          | 166 ++++++++++++++
 src/views/dashboard/index.vue                 |  14 +-
 src/views/dashboard/screen/index.vue          |   2 +-
 src/views/login/index.vue                     |  10 +-
 src/views/monitor/environment/index.vue       |  54 ++---
 src/views/monitor/species/index.vue           |  25 +-
 src/views/patrol/points/index.vue             |  50 ++--
 src/views/patrol/records/index.vue            |  27 +--
 src/views/patrol/tasks/index.vue              |  89 +++-----
 src/views/report/about/index.vue              |   2 +-
 src/views/report/analysis/index.vue           | 204 +++++++++++------
 src/views/report/daily/index.vue              | 213 +++++++++++++-----
 src/views/reports/analysis/index.vue          |  35 +--
 src/views/reports/daily/index.vue             |  56 ++---
 src/views/system/data/index.vue               |  25 +-
 src/views/system/devices/index.vue            |  43 ++--
 src/views/system/logs/index.vue               |  17 +-
 src/views/system/permissions/index.vue        |  26 +--
 src/views/system/roles/index.vue              |  18 +-
 src/views/system/settings/index.vue           |   6 +-
 src/views/system/users/index.vue              |  19 +-
 src/vite-env.d.ts                             |   1 -
 tsconfig.app.json                             |  14 --
 tsconfig.json                                 |  13 --
 tsconfig.node.json                            |  24 --
 vite.config.ts => vite.config.js              |   9 +-
 48 files changed, 879 insertions(+), 734 deletions(-)
 create mode 100644 .env
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 .env.test
 create mode 100644 src/api/login/index.js
 delete mode 100644 src/api/report.ts
 delete mode 100644 src/api/request.ts
 create mode 100644 src/api/user/index.js
 delete mode 100644 src/components/HelloWorld.vue
 rename src/layout/components/Sidebar/{menuData.ts => menuData.js} (99%)
 rename src/{main.ts => main.js} (96%)
 rename src/router/{index.ts => index.js} (91%)
 rename src/stores/{systemLog.ts => systemLog.js} (77%)
 create mode 100644 src/stores/user.js
 delete mode 100644 src/stores/user.ts
 create mode 100644 src/utils/request.js
 delete mode 100644 src/vite-env.d.ts
 delete mode 100644 tsconfig.app.json
 delete mode 100644 tsconfig.json
 delete mode 100644 tsconfig.node.json
 rename vite.config.ts => vite.config.js (68%)

diff --git a/.env b/.env
new file mode 100644
index 0000000..ba65ba3
--- /dev/null
+++ b/.env
@@ -0,0 +1,22 @@
+# 所有环境都会加载的配置
+
+# 项目名称
+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
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..d8640f1
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..f5561ec
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/.env.test b/.env.test
new file mode 100644
index 0000000..6db513b
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/index.html b/index.html
index 11104c1..bff11de 100644
--- 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>
diff --git a/package-lock.json b/package-lock.json
index 105fefe..4fad924 100644
--- 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",
diff --git a/package.json b/package.json
index e383da0..4f50e9b 100644
--- 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",
diff --git a/src/api/login/index.js b/src/api/login/index.js
new file mode 100644
index 0000000..ddc01d1
--- /dev/null
+++ 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')
+}
diff --git a/src/api/report.ts b/src/api/report.ts
deleted file mode 100644
index 26fd721..0000000
--- a/src/api/report.ts
+++ /dev/null
@@ -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 })
-}; 
\ No newline at end of file
diff --git a/src/api/request.ts b/src/api/request.ts
deleted file mode 100644
index 2ba193c..0000000
--- a/src/api/request.ts
+++ /dev/null
@@ -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 
\ No newline at end of file
diff --git a/src/api/user/index.js b/src/api/user/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index b58e52b..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/report/EnvironmentAnalysis.vue b/src/components/report/EnvironmentAnalysis.vue
index 4a82cad..c86c9ad 100644
--- 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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/report/MonitorDataChart.vue b/src/components/report/MonitorDataChart.vue
index c897511..eb014cb 100644
--- 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> 
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/report/SpeciesAnalysis.vue b/src/components/report/SpeciesAnalysis.vue
index 7e42bde..bdd58b1 100644
--- 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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 6caccb7..1b79df0 100644
--- 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);
 };
 
diff --git a/src/layout/components/Sidebar/menuData.ts b/src/layout/components/Sidebar/menuData.js
similarity index 99%
rename from src/layout/components/Sidebar/menuData.ts
rename to src/layout/components/Sidebar/menuData.js
index 182bf6b..1510a0e 100644
--- a/src/layout/components/Sidebar/menuData.ts
+++ b/src/layout/components/Sidebar/menuData.js
@@ -14,4 +14,4 @@ export const menuData = [
       }
     ]
   }
-]; 
\ No newline at end of file
+];
\ No newline at end of file
diff --git a/src/main.ts b/src/main.js
similarity index 96%
rename from src/main.ts
rename to src/main.js
index 0713ead..92e8cd8 100644
--- a/src/main.ts
+++ b/src/main.js
@@ -17,4 +17,4 @@ app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
 
-app.mount('#app')
+app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.js
similarity index 91%
rename from src/router/index.ts
rename to src/router/index.js
index 3ab16a5..318d09f 100644
--- a/src/router/index.ts
+++ b/src/router/index.js
@@ -5,6 +5,14 @@ import { useUserStore } from '../stores/user'
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    {
+      path: '/',
+      redirect: to => {
+        // 如果已登录，重定向到后台首页，否则重定向到登录页
+        const userStore = useUserStore()
+        return userStore.isLoggedIn ? '/dashboard' : '/login'
+      }
+    },
     {
       path: '/login',
       name: 'Login',
@@ -104,22 +112,22 @@ 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({
       path: '/login',
-      query: { redirect: to.fullPath } // 保存原目标路径
+      query: { redirect: to.fullPath }
     })
   } else {
     next()
   }
 })
 
-export default router 
\ No newline at end of file
+export default router
\ No newline at end of file
diff --git a/src/stores/systemLog.ts b/src/stores/systemLog.js
similarity index 77%
rename from src/stores/systemLog.ts
rename to src/stores/systemLog.js
index c368996..753a8d0 100644
--- a/src/stores/systemLog.ts
+++ 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
   }
-}) 
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/stores/user.js b/src/stores/user.js
new file mode 100644
index 0000000..d57c099
--- /dev/null
+++ b/src/stores/user.js
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia'
+import { login as loginApi, logout as logoutApi } from '@/api/login'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: localStorage.getItem('token'),
+    userInfo: JSON.parse(localStorage.getItem('userInfo')) || null
+  }),
+
+  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
+  }
+})
\ No newline at end of file
diff --git a/src/stores/user.ts b/src/stores/user.ts
deleted file mode 100644
index fbd21fa..0000000
--- a/src/stores/user.ts
+++ /dev/null
@@ -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
-  }
-}) 
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..ff482c2
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,166 @@
+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
+
+    // 模拟API响应
+    if (response.config.url.includes('/api/users/')) {
+      // 模拟登录接口
+      if (response.config.url.includes('/login')) {
+        return {
+          token: 'demo-token',
+          userInfo: {
+            id: 1,
+            username: 'admin',
+            role: '管理员',
+            email: 'admin@example.com',
+            status: true
+          }
+        }
+      }
+
+      // 模拟退出登录接口
+      if (response.config.url.includes('/logout')) {
+        return { message: '退出成功' }
+      }
+    }
+
+    // 如果响应成功
+    if (res.code === 200 || res.code === undefined) {
+      return res.data || res
+    }
+
+    // 处理特定错误码
+    switch (res.code) {
+      case 401:
+        handleUnauthorized()
+        break
+      case 403:
+        ElMessage.error('没有权限访问该资源')
+        break
+      case 500:
+        ElMessage.error('服务器错误，请稍后重试')
+        break
+      default:
+        ElMessage.error(res.message || '请求失败')
+    }
+
+    return Promise.reject(new Error(res.message || '请求失败'))
+  },
+  (error) => {
+    console.error('响应错误：', error)
+
+    // 处理网络错误
+    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
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 0cd4a48..ee3732f 100644
--- 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>
diff --git a/src/views/dashboard/screen/index.vue b/src/views/dashboard/screen/index.vue
index 650f040..f93b1d9 100644
--- 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";
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0c31ee0..191be04 100644
--- 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;
diff --git a/src/views/monitor/environment/index.vue b/src/views/monitor/environment/index.vue
index d5c7fec..d2ffeb6 100644
--- 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 {
diff --git a/src/views/monitor/species/index.vue b/src/views/monitor/species/index.vue
index 3856033..3fdbe1c 100644
--- 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;
diff --git a/src/views/patrol/points/index.vue b/src/views/patrol/points/index.vue
index 283fd66..21aaef4 100644
--- 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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/patrol/records/index.vue b/src/views/patrol/records/index.vue
index bb5e7b3..d9790a3 100644
--- 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 {
diff --git a/src/views/patrol/tasks/index.vue b/src/views/patrol/tasks/index.vue
index 96cdc22..b95987a 100644
--- 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;
diff --git a/src/views/report/about/index.vue b/src/views/report/about/index.vue
index ac5738b..d972be6 100644
--- 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 {
diff --git a/src/views/report/analysis/index.vue b/src/views/report/analysis/index.vue
index f3a4896..1e06d32 100644
--- 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");
@@ -118,39 +86,125 @@ const initChart = () => {
 
   myChart = echarts.init(chartDom);
   const option = {
+    backgroundColor: 'transparent',
     title: {
-      text: "监测指标趋势分析",
+      text: '近7天报告提交趋势',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 500,
+        color: '#303133'
+      },
+      padding: [20, 0]
     },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#eee',
+      padding: [15, 20],
     },
     legend: {
-      data: ["pH值", "溶解氧", "水温"],
+      data: ['巡护报告', '监测报告'],
+      right: 0,
+      top: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#666',
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: '15%',
+      bottom: '3%',
+      containLabel: true
     },
     xAxis: {
-      type: "category",
-      data: ["1月", "2月", "3月", "4月"],
+      type: 'category',
+      boundaryGap: false,
+      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#999',
+        fontSize: 12
+      }
     },
     yAxis: {
-      type: "value",
+      type: 'value',
+      min: 0,
+      max: 8,
+      interval: 2,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#999',
+        fontSize: 12
+      }
     },
     series: [
       {
-        name: "pH值",
-        type: "line",
-        data: [7.1, 7.2, 7.0, 7.3],
+        name: '巡护报告',
+        type: 'line',
+        data: [5, 6, 4, 8, 7, 6, 5],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2,
+          color: '#36A2EB'
+        },
+        itemStyle: {
+          color: '#36A2EB',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(54, 162, 235, 0.15)' },
+            { offset: 1, color: 'rgba(54, 162, 235, 0.02)' }
+          ])
+        }
       },
       {
-        name: "溶解氧",
-        type: "line",
-        data: [6.5, 6.3, 6.0, 5.8],
-      },
-      {
-        name: "水温",
-        type: "line",
-        data: [15, 16, 18, 21],
-      },
-    ],
+        name: '监测报告',
+        type: 'line',
+        data: [3, 4, 3, 5, 4, 5, 4],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2,
+          color: '#4BC0C0'
+        },
+        itemStyle: {
+          color: '#4BC0C0',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(75, 192, 192, 0.15)' },
+            { offset: 1, color: 'rgba(75, 192, 192, 0.02)' }
+          ])
+        }
+      }
+    ]
   };
 
   myChart.setOption(option);
@@ -180,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;
 };
 
@@ -210,7 +264,7 @@ const handleSubmit = () => {
 
 // 刷新数据
 const handleRefresh = () => {
-  ElMessage.success('数据已更新');
+  ElMessage.success("数据已更新");
   // TODO: 实际刷新数据的逻辑
 };
 </script>
@@ -218,8 +272,8 @@ const handleRefresh = () => {
 <template>
   <div class="analysis-report">
     <!-- 趋势图表 -->
-    <el-card>
-      <div id="trendChart" style="height: 400px"></div>
+    <el-card class="chart-card">
+      <div id="trendChart"></div>
     </el-card>
 
     <!-- 报告列表 -->
@@ -259,7 +313,7 @@ const handleRefresh = () => {
         <el-table-column prop="type" label="类型" width="120">
           <template #default="{ row }">
             <el-tag :type="row.type === 'species' ? 'success' : 'primary'">
-              {{ row.type === 'species' ? '物种分析' : '环境分析' }}
+              {{ row.type === "species" ? "物种分析" : "环境分析" }}
             </el-tag>
           </template>
         </el-table-column>
@@ -394,7 +448,7 @@ const handleRefresh = () => {
           <el-button @click="detailVisible = false">关闭</el-button>
           <el-button
             type="warning"
-            @click="handleExport(currentReport!)"
+            @click="handleExport(currentReport)"
             :disabled="!currentReport"
           >
             导出
@@ -406,7 +460,7 @@ const handleRefresh = () => {
 </template>
 
 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;
 
 .analysis-report {
   .card-header {
@@ -458,22 +512,34 @@ const handleRefresh = () => {
     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;
     }
   }
+
+  .chart-card {
+    margin-bottom: 24px;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+    #trendChart {
+      height: 400px;
+      padding: 20px;
+    }
+  }
 }
 </style>
diff --git a/src/views/report/daily/index.vue b/src/views/report/daily/index.vue
index dc80ca8..20b01d6 100644
--- 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,35 +60,150 @@ const handleSubmit = () => {
 };
 
 // 趋势图表
-let trendChart: echarts.ECharts | null = null;
+let trendChart = null;
 
 // 初始化趋势图表
 const initTrendChart = () => {
   const chartDom = document.getElementById('trendChart');
   if (!chartDom) return;
-  
-  trendChart = echarts.init(chartDom);
+
+  const myChart = echarts.init(chartDom);
   const option = {
-    title: { text: '近7天报告提交趋势' },
-    tooltip: { trigger: 'axis' },
-    xAxis: { type: 'category', data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'] },
-    yAxis: { type: 'value' },
+    backgroundColor: 'transparent',
+    title: {
+      text: '近7天报告提交趋势',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 500,
+        color: '#303133'
+      },
+      padding: [20, 0]
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#eee',
+      padding: [10, 15],
+      textStyle: {
+        color: '#666'
+      },
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: '#409EFF',
+          opacity: 0.2
+        }
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
+      boundaryGap: false,
+      axisLine: {
+        lineStyle: {
+          color: '#E5E7EB'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#666',
+        padding: [8, 0]
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#E5E7EB',
+          type: 'dashed'
+        }
+      },
+      axisLabel: {
+        color: '#666'
+      }
+    },
     series: [
       {
         name: '巡护报告',
         type: 'line',
         data: [5, 6, 4, 8, 7, 6, 5],
-        smooth: true
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: '#409EFF'
+        },
+        itemStyle: {
+          color: '#409EFF',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(64, 158, 255, 0.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(64, 158, 255, 0.02)'
+            }
+          ])
+        }
       },
       {
         name: '监测报告',
         type: 'line',
         data: [3, 4, 3, 5, 4, 5, 4],
-        smooth: true
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: '#67C23A'
+        },
+        itemStyle: {
+          color: '#67C23A',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(103, 194, 58, 0.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(103, 194, 58, 0.02)'
+            }
+          ])
+        }
       }
-    ]
+    ],
+    legend: {
+      data: ['巡护报告', '监测报告'],
+      right: 20,
+      top: 20,
+      itemWidth: 12,
+      itemHeight: 12,
+      textStyle: {
+        color: '#666'
+      }
+    }
   };
-  trendChart.setOption(option);
+
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
 };
 
 onMounted(() => {
@@ -120,11 +217,10 @@ const handleGenerate = () => {
     cancelButtonText: '取消',
     type: 'info'
   }).then(() => {
-    // 模拟自动汇总数据过程
     const loadingInstance = ElLoading.service({
       text: '正在汇总数据，请稍候...'
     });
-    
+
     setTimeout(() => {
       loadingInstance.close();
       ElMessage.success('报告生成成功，已自动整合今日巡护记录和监测数据');
@@ -300,8 +396,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"
@@ -328,7 +424,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>
@@ -366,7 +462,7 @@ const showTrendAnalysis = ref(false);
 </template>
 
 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "./styles/variables" as v;
 
 .daily-report {
   .card-header {
@@ -383,18 +479,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;
@@ -414,19 +510,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;
@@ -435,11 +531,11 @@ const showTrendAnalysis = ref(false);
         align-items: center;
         justify-content: center;
         gap: 4px;
-        
+
         .up {
           color: $success-color;
         }
-        
+
         .down {
           color: $danger-color;
         }
@@ -451,7 +547,7 @@ const showTrendAnalysis = ref(false);
     display: flex;
     align-items: center;
     gap: 8px;
-    
+
     .el-icon {
       color: $text-secondary;
       cursor: help;
@@ -463,15 +559,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;
         }
@@ -479,4 +575,17 @@ const showTrendAnalysis = ref(false);
     }
   }
 }
-</style> 
\ No newline at end of file
+
+.chart-card {
+  height: 400px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/reports/analysis/index.vue b/src/views/reports/analysis/index.vue
index a6caf17..5e94161 100644
--- 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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/reports/daily/index.vue b/src/views/reports/daily/index.vue
index 671039a..57f542b 100644
--- 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> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/system/data/index.vue b/src/views/system/data/index.vue
index da093f8..dd1815b 100644
--- 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 {
diff --git a/src/views/system/devices/index.vue b/src/views/system/devices/index.vue
index 84490b1..4750790 100644
--- 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 {
diff --git a/src/views/system/logs/index.vue b/src/views/system/logs/index.vue
index 8093430..9e9ebac 100644
--- 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 {
diff --git a/src/views/system/permissions/index.vue b/src/views/system/permissions/index.vue
index 4d4445c..a45beec 100644
--- 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 {
diff --git a/src/views/system/roles/index.vue b/src/views/system/roles/index.vue
index b479d0e..fff6274 100644
--- 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 {
diff --git a/src/views/system/settings/index.vue b/src/views/system/settings/index.vue
index 303bc22..231ba9d 100644
--- 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 {
diff --git a/src/views/system/users/index.vue b/src/views/system/users/index.vue
index 0c361f6..f48f96e 100644
--- a/src/views/system/users/index.vue
+++ b/src/views/system/users/index.vue
@@ -1,16 +1,7 @@
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";
 
-interface UserData {
-  id: number;
-  username: string;
-  role: string;
-  email: string;
-  status: boolean;
-  createTime: string;
-}
-
-const tableData = ref<UserData[]>([
+const tableData = ref([
   {
     id: 1,
     username: "admin",
@@ -29,11 +20,11 @@ const tableData = ref<UserData[]>([
   },
 ]);
 
-const handleEdit = (row: UserData) => {
+const handleEdit = (row) => {
   console.log("编辑用户:", row);
 };
 
-const handleDelete = (row: UserData) => {
+const handleDelete = (row) => {
   console.log("删除用户:", row);
 };
 </script>
@@ -77,7 +68,7 @@ const handleDelete = (row: UserData) => {
 </template>
 
 <style lang="scss" scoped>
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;
 
 .user-container {
   .el-card {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
deleted file mode 100644
index 7fb078c..0000000
--- a/tsconfig.app.json
+++ /dev/null
@@ -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"]
-}
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index a8d3cb5..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
-}
diff --git a/tsconfig.node.json b/tsconfig.node.json
deleted file mode 100644
index db0becc..0000000
--- a/tsconfig.node.json
+++ /dev/null
@@ -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"]
-}
diff --git a/vite.config.ts b/vite.config.js
similarity index 68%
rename from vite.config.ts
rename to vite.config.js
index e6c6e63..3877f37 100644
--- a/vite.config.ts
+++ 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')
+      }
+    }
   }
-})
+})
\ No newline at end of file