From f401f40a6e47b8c35e947daddcdb0a99e69c5ab3 Mon Sep 17 00:00:00 2001
From: wzclm <2855471171@qq.com>
Date: Sat, 1 Mar 2025 16:07:20 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=AF=BE=E7=A8=8B=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97=E5=B9=B6=E6=9B=B4=E6=96=B0=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E9=80=89=E6=8B=A9=20-=20=E5=B0=86=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=BB=8E=E6=B4=BB=E5=8A=A8=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=A7=BB=E8=87=B3=E4=B8=93=E7=94=A8=E8=AF=BE=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=20-=20=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84=E8=AF=BE?=
 =?UTF-8?q?=E7=A8=8B=E7=AE=A1=E7=90=86=E7=BB=93=E6=9E=84=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20AdminLayout=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=20-=20=E4=BF=AE=E6=94=B9=E8=B7=AF=E7=94=B1=E5=99=A8=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=BB=A5=E5=8F=8D=E6=98=A0=E6=96=B0=E7=9A=84=E8=AF=BE?=
 =?UTF-8?q?=E7=A8=8B=E7=AE=A1=E7=90=86=E8=B7=AF=E7=94=B1=20-=20=E4=BB=8E?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E6=A8=A1=E5=9D=97=E4=B8=AD=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=B7=B2=E5=BC=83=E7=94=A8=E7=9A=84=E8=AF=BE=E7=A8=8B=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=A7=86=E5=9B=BE=20-=E6=B7=BB=E5=8A=A0=E7=89=A9?=
 =?UTF-8?q?=E7=A7=8D=E7=9B=91=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         |    1 -
 src/api/activity/courseEnrollment.js      |   30 +
 src/api/monitor/species.js                |   79 ++
 src/layout/AdminLayout.vue                |   10 +-
 src/router/index.js                       |   10 +-
 src/utils/request.js                      |    1 -
 src/utils/sort.js                         |   12 +
 src/views/AIPatrol/drone/index.vue        |   67 +-
 src/views/course/Application.vue          |  342 ++++++
 src/views/{activity => }/course/index.vue |    0
 src/views/monitor/species/index.vue       | 1218 +++++++++++++++------
 11 files changed, 1417 insertions(+), 353 deletions(-)
 create mode 100644 src/api/activity/courseEnrollment.js
 create mode 100644 src/api/monitor/species.js
 create mode 100644 src/views/course/Application.vue
 rename src/views/{activity => }/course/index.vue (100%)

diff --git a/package-lock.json b/package-lock.json
index 4253b72..7a9f4e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1968,7 +1968,6 @@
       "version": "5.6.0",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
       "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
-      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "5.6.1"
diff --git a/src/api/activity/courseEnrollment.js b/src/api/activity/courseEnrollment.js
new file mode 100644
index 0000000..4e44709
--- /dev/null
+++ b/src/api/activity/courseEnrollment.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+/**
+ * 获取课程报名列表
+ * @returns {Promise} 返回报名列表数据
+ */
+export function getCourseEnrollmentList() {
+  return request.get('/api/admin/course-enrollments')
+}
+
+/**
+ * 导出报名记录
+ * @param {Object} params - 查询参数
+ * @param {number} [params.courseId] - 课程ID
+ * @param {string} [params.startTime] - 开始时间
+ * @param {string} [params.endTime] - 结束时间
+ * @param {number} [params.status] - 状态
+ * @returns {Promise} 返回文件内容
+ */
+export function exportCourseEnrollments(params = {}) {
+  return request.get('/api/admin/course-enrollments/export', {
+    params: {
+      course_id: params.courseId,
+      start_time: params.startTime,
+      end_time: params.endTime,
+      status: params.status === '' ? undefined : params.status
+    },
+    responseType: 'blob'  // 设置响应类型为blob
+  })
+}
\ No newline at end of file
diff --git a/src/api/monitor/species.js b/src/api/monitor/species.js
new file mode 100644
index 0000000..994cc90
--- /dev/null
+++ b/src/api/monitor/species.js
@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+/**
+ * 查询物种列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.page_size=10] - 每页条数
+ * @param {string} [params.species_code] - 物种编号
+ * @param {string} [params.chinese_name] - 中文名称
+ * @param {string} [params.category] - 物种类别
+ * @param {string} [params.protection_level] - 保护等级
+ * @param {number} [params.status] - 状态
+ * @returns {Promise} 返回物种列表数据
+ */
+export function getSpeciesList(params = {}) {
+  return request.get('/api/admin/species', {
+    params: {
+      page: params.page || 1,
+      page_size: params.page_size || 10,
+      species_code: params.species_code || undefined,
+      chinese_name: params.chinese_name || undefined,
+      category: params.category || undefined,
+      protection_level: params.protection_level || undefined,
+      status: params.status === '' ? undefined : params.status
+    }
+  })
+}
+
+/**
+ * 获取物种详细信息
+ * @param {string|number} id - 物种ID
+ * @returns {Promise} 返回物种详细信息
+ */
+export function getSpecies(id) {
+  return request.get(`/api/admin/species/${id}`)
+}
+
+/**
+ * 创建物种
+ * @param {Object} data - 物种数据
+ * @returns {Promise} 返回创建结果
+ */
+export function addSpecies(data) {
+  return request.post('/api/admin/species', data, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 更新物种信息
+ * @param {string|number} id - 物种ID
+ * @param {Object} data - 更新数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateSpecies(id, data) {
+  return request.put(`/api/admin/species/${id}`, data)
+}
+
+/**
+ * 更新物种状态
+ * @param {string|number} id - 物种ID
+ * @param {number} status - 状态值：1-启用，0-禁用
+ * @returns {Promise} 返回状态更新结果
+ */
+export function updateSpeciesStatus(id, status) {
+  return request.put(`/api/admin/species/${id}/status`, {
+    status: status === 1 ? 1 : 0 // 确保只发送 1 或 0
+  })
+}
+
+/**
+ * 获取物种统计信息
+ * @returns {Promise} 返回统计数据，包含物种类别和保护等级的统计
+ */
+export function getSpeciesStatistics() {
+  return request.get('/api/admin/species/statistics/overview')
+}
\ No newline at end of file
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index b18598b..2abbe2b 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -164,11 +164,19 @@ const handleLogout = () => {
             <el-icon><component :is="icons.Collection" /></el-icon>
             <span>活动管理</span>
           </template>
-          <el-menu-item index="/activity/course">课程管理</el-menu-item>
           <el-menu-item index="/activity/study">研学管理</el-menu-item>
           <el-menu-item index="/activity/knowledge">知识库管理</el-menu-item>
         </el-sub-menu>
 
+        <el-sub-menu index="course">
+          <template #title>
+            <el-icon><component :is="icons.DataLine" /></el-icon>
+            <span>课程管理</span>
+          </template>
+          <el-menu-item index="/course/index">课程管理</el-menu-item>
+          <el-menu-item index="/course/application">报名管理</el-menu-item>
+        </el-sub-menu>
+
         <el-sub-menu index="feedback">
           <template #title>
             <el-icon><component :is="icons.DataLine" /></el-icon>
diff --git a/src/router/index.js b/src/router/index.js
index 6af7246..4facbc3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -136,9 +136,15 @@ const router = createRouter({
           meta: { title: '轮播图管理', icon: 'picture' }
         },
         {
-          path: 'activity/course',
+          path: 'course/index',
           name: 'CourseManagement',
-          component: () => import('../views/activity/course/index.vue')
+          component: () => import('../views/course/index.vue'),
+          meta: { title: '课程管理', icon: 'reading' }
+        },
+        {
+          path: 'course/application',
+          name: 'CourseApplication',
+          component: () => import('../views/course/Application.vue')
         },
         {
           path: 'activity/study',
diff --git a/src/utils/request.js b/src/utils/request.js
index 2fbae47..557361b 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -42,7 +42,6 @@ service.interceptors.response.use(
     }
 
     const res = response.data;
-    console.log('响应数据:', res)
 
     // 如果响应成功
     if (res.code === 200 || res.success) {
diff --git a/src/utils/sort.js b/src/utils/sort.js
index 88bf2dc..c809f2e 100644
--- a/src/utils/sort.js
+++ b/src/utils/sort.js
@@ -37,4 +37,16 @@ export function sortArrayByField(array, field, order = 'asc') {
   });
 
   return sortedArray;
+}
+
+/**
+ * 反转数组顺序
+ * @param {Array} array - 要反转的数组
+ * @returns {Array} 反转后的新数组
+ */
+export function reverseArray(array) {
+  if (!Array.isArray(array)) {
+    return array;
+  }
+  return [...array].reverse();
 }
\ No newline at end of file
diff --git a/src/views/AIPatrol/drone/index.vue b/src/views/AIPatrol/drone/index.vue
index d6eda86..9e39c33 100644
--- a/src/views/AIPatrol/drone/index.vue
+++ b/src/views/AIPatrol/drone/index.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { Plus, VideoCamera } from '@element-plus/icons-vue'
+import { Plus, VideoCamera, Loading } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { getDeviceList } from '@/api/device'
 import { createFlvPlayer, destroyFlvPlayer } from '@/utils/videoPlayer'
@@ -12,6 +12,7 @@ const mainVideoRef = ref(null)
 const mainFlvPlayer = ref(null)
 const videoRefs = ref([])
 const flvPlayers = ref([])
+const playingVideos = ref(new Set()) // 记录正在播放的视频
 
 // 初始化视频播放器
 const initVideoPlayers = async () => {
@@ -28,6 +29,9 @@ const initVideoPlayers = async () => {
   })
   flvPlayers.value = []
 
+  // 清理播放状态
+  playingVideos.value.clear()
+
   // 等待DOM更新
   await nextTick()
 
@@ -36,6 +40,21 @@ const initVideoPlayers = async () => {
     const deviceCode = droneList.value[currentDroneIndex.value].code
     console.log('初始化主视频播放器:', deviceCode)
     mainFlvPlayer.value = createFlvPlayer(mainVideoRef.value, deviceCode)
+
+    // 监听视频播放事件
+    mainVideoRef.value.onplaying = () => {
+      playingVideos.value.add(deviceCode)
+    }
+
+    // 监听视频停止事件
+    mainVideoRef.value.onpause = () => {
+      playingVideos.value.delete(deviceCode)
+    }
+
+    // 监听视频错误事件
+    mainVideoRef.value.onerror = () => {
+      playingVideos.value.delete(deviceCode)
+    }
   }
 
   // 初始化列表视频播放器
@@ -45,6 +64,21 @@ const initVideoPlayers = async () => {
       console.log('初始化列表视频播放器:', index, deviceCode)
       const player = createFlvPlayer(videoRef, deviceCode)
       flvPlayers.value.push(player)
+
+      // 监听视频播放事件
+      videoRef.onplaying = () => {
+        playingVideos.value.add(deviceCode)
+      }
+
+      // 监听视频停止事件
+      videoRef.onpause = () => {
+        playingVideos.value.delete(deviceCode)
+      }
+
+      // 监听视频错误事件
+      videoRef.onerror = () => {
+        playingVideos.value.delete(deviceCode)
+      }
     }
   })
 }
@@ -141,6 +175,11 @@ onUnmounted(() => {
         <el-icon class="offline-icon"><VideoCamera /></el-icon>
         <span>无人机离线</span>
       </div>
+      <!-- 只在视频未开始播放时显示loading -->
+      <div v-if="droneList[currentDroneIndex]?.status === 'online' && !playingVideos.value.has(droneList[currentDroneIndex].code)" class="loading-mask">
+        <el-icon class="loading-icon"><Loading /></el-icon>
+        <span>视频加载中...</span>
+      </div>
       <div class="video-info">
         <h2>{{ droneList[currentDroneIndex]?.name }}</h2>
         <div class="drone-status">
@@ -267,6 +306,32 @@ onUnmounted(() => {
       }
     }
 
+    .loading-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.8);
+      z-index: 2;
+
+      .loading-icon {
+        font-size: 48px;
+        color: #409EFF;
+        margin-bottom: 16px;
+        animation: rotate 1s linear infinite;
+      }
+
+      span {
+        font-size: 16px;
+        color: #fff;
+      }
+    }
+
     .video-info {
       position: absolute;
       left: 0;
diff --git a/src/views/course/Application.vue b/src/views/course/Application.vue
new file mode 100644
index 0000000..7f0f57c
--- /dev/null
+++ b/src/views/course/Application.vue
@@ -0,0 +1,342 @@
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getCourseList } from '@/api/activity/course'
+import { getCourseEnrollmentList, exportCourseEnrollments } from '@/api/activity/courseEnrollment'
+
+// 课程选项
+const courseOptions = ref([])
+
+// 搜索表单数据
+const searchForm = reactive({
+  courseId: '',
+  enrollmentTimeRange: [],
+  status: '',
+  currentPage: 1,
+  pageSize: 10
+})
+
+// 表格数据
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+
+// 详情对话框显示状态
+const detailDialogVisible = ref(false)
+// 详情数据
+const detailData = ref({})
+
+// 原始数据
+const originalData = ref([]);
+
+// 计算属性，动态过滤数据
+const filteredData = computed(() => {
+  return originalData.value.filter(item => {
+    const matchCourse = searchForm.courseId ? item.userId === searchForm.courseId : true;
+    const matchStatus = searchForm.status ? item.status === searchForm.status : true;
+    return matchCourse && matchStatus;
+  });
+});
+
+// 获取课程列表
+const fetchCourseOptions = async () => {
+  try {
+    const res = await getCourseList() // 移除参数
+    if (res.success && res.data) {
+      courseOptions.value = res.data
+    } else {
+      courseOptions.value = []
+    }
+  } catch (error) {
+    console.error('获取课程列表失败:', error)
+    ElMessage.error('获取课程列表失败')
+    courseOptions.value = []
+  }
+}
+
+// 获取报名列表数据
+const fetchEnrollmentList = async () => {
+  loading.value = true;
+  try {
+    const res = await getCourseEnrollmentList();
+    if (res.success) {
+      // 存储原始数据并反转
+      originalData.value = [...(res.data.list || [])].reverse().map(item => ({
+        id: item.id,
+        courseName: item.course_title,
+        userName: item.real_name || item.username,
+        userId: item.user_id,
+        enrollmentTime: item.enrollment_time,
+        startTime: item.start_time,
+        progress: item.progress,
+        status: item.status
+      }));
+      // 更新表格数据
+      tableData.value = filteredData.value;
+      total.value = res.data.pagination.total || 0;
+    } else {
+      console.error('获取失败:', res.message);
+      ElMessage.error(res.message || '获取报名列表失败');
+    }
+  } catch (error) {
+    console.error('获取报名列表失败:', error);
+    ElMessage.error('获取报名列表失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 查询方法
+const handleSearch = () => {
+  searchForm.currentPage = 1;
+  // 更新表格数据
+  tableData.value = filteredData.value;
+};
+
+// 查看详情
+const handleDetail = (row) => {
+  detailData.value = { ...row }
+  detailDialogVisible.value = true
+}
+
+// 重置表单
+const resetForm = () => {
+  searchForm.courseId = '';
+  searchForm.status = '';
+  searchForm.currentPage = 1;
+  // 重置后自动获取数据
+  fetchEnrollmentList();
+};
+
+// 分页方法
+const handleSizeChange = (val) => {
+  searchForm.pageSize = val
+  fetchEnrollmentList()
+}
+
+const handleCurrentChange = (val) => {
+  searchForm.currentPage = val
+  fetchEnrollmentList()
+}
+
+// 格式化日期时间
+const formatDateTime = (datetime) => {
+  if (!datetime) return '-'
+  return new Date(datetime).toLocaleString()
+}
+
+// 获取状态标签类型
+const getStatusType = (status) => {
+  const statusMap = {
+    0: 'info',
+    1: 'primary',
+    2: 'success'
+  }
+  return statusMap[status]
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    0: '已取消',
+    1: '学习中',
+    2: '已完成'
+  }
+  return statusMap[status]
+}
+
+// 导出报名记录
+const handleExport = async () => {
+  try {
+    const params = {
+      courseId: searchForm.courseId || undefined,
+      startTime: searchForm.enrollmentTimeRange?.[0],
+      endTime: searchForm.enrollmentTimeRange?.[1],
+      status: searchForm.status
+    }
+
+    const res = await exportCourseEnrollments(params)
+    // 创建Blob对象
+    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+    // 创建下载链接
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    // 生成文件名
+    const now = new Date()
+    const fileName = `报名记录_${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}.xlsx`
+    link.setAttribute('download', fileName)
+    // 添加到body
+    document.body.appendChild(link)
+    // 触发点击
+    link.click()
+    // 移除元素
+    document.body.removeChild(link)
+    // 释放URL对象
+    window.URL.revokeObjectURL(url)
+
+    ElMessage.success('文件下载已开始')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败')
+  }
+}
+
+// 页面加载时获取课程列表和报名列表
+onMounted(async () => {
+  await fetchCourseOptions()
+  fetchEnrollmentList()
+})
+</script>
+
+<template>
+  <div class="course-application">
+    <div class="search-form">
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item label="课程名称">
+          <el-select
+            v-model="searchForm.courseId"
+            placeholder="请选择课程"
+            clearable
+            style="width: 220px;"
+            @change="handleSearch"
+          >
+            <el-option
+              v-for="item in courseOptions"
+              :key="item.id"
+              :label="item.title"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 220px;" @change="handleSearch">
+            <el-option label="学习中" :value="1"></el-option>
+            <el-option label="已完成" :value="2"></el-option>
+            <el-option label="已取消" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleSearch">搜索</el-button>
+          <el-button @click="resetForm">重置</el-button>
+          <el-button type="warning" @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table-container">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        v-loading="loading"
+      >
+        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
+        <el-table-column prop="courseName" label="课程名称" min-width="180" align="center"></el-table-column>
+        <el-table-column prop="userName" label="学员姓名" width="120" align="center"></el-table-column>
+        <el-table-column prop="enrollmentTime" label="报名时间" width="160" align="center">
+          <template #default="scope">
+            {{ formatDateTime(scope.row.enrollmentTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" label="开始学习时间" width="160" align="center">
+          <template #default="scope">
+            {{ formatDateTime(scope.row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="progress" label="学习进度" width="120" align="center">
+          <template #default="scope">
+            <el-progress :percentage="Number(scope.row.progress)"></el-progress>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right" align="center">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click="handleDetail(scope.row)"
+            >查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination-container" v-if="total > 10">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          :current-page="searchForm.currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="报名详情"
+      width="600px"
+    >
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="ID">{{ detailData.id }}</el-descriptions-item>
+        <el-descriptions-item label="课程名称">{{ detailData.courseName }}</el-descriptions-item>
+        <el-descriptions-item label="学员姓名">{{ detailData.userName }}</el-descriptions-item>
+        <el-descriptions-item label="报名时间">{{ formatDateTime(detailData.enrollmentTime) }}</el-descriptions-item>
+        <el-descriptions-item label="开始学习时间">{{ formatDateTime(detailData.startTime) }}</el-descriptions-item>
+        <el-descriptions-item label="学习进度">
+          <el-progress :percentage="Number(detailData.progress)"></el-progress>
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="getStatusType(detailData.status)">
+            {{ getStatusText(detailData.status) }}
+          </el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.course-application {
+  padding: 20px;
+}
+
+.search-form {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.table-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.el-button + .el-button {
+  margin-left: 8px;
+}
+</style>
diff --git a/src/views/activity/course/index.vue b/src/views/course/index.vue
similarity index 100%
rename from src/views/activity/course/index.vue
rename to src/views/course/index.vue
diff --git a/src/views/monitor/species/index.vue b/src/views/monitor/species/index.vue
index 6d53446..eee2f6e 100644
--- a/src/views/monitor/species/index.vue
+++ b/src/views/monitor/species/index.vue
@@ -1,436 +1,960 @@
 <script setup>
-import { ref, reactive } from "vue";
-import * as echarts from "echarts";
-import { onMounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, PictureFilled, Delete } from '@element-plus/icons-vue'
+import * as echarts from 'echarts'
+import { sortArrayByField, reverseArray } from '@/utils/sort'
+import { getSpeciesList, addSpecies, updateSpecies, getSpeciesStatistics, updateSpeciesStatus } from '@/api/monitor/species'
+import { ElImageViewer } from 'element-plus'
 
-const tableData = ref([
-  {
-    id: 1,
-    name: "东方白鹳",
-    type: "鸟类",
-    count: 12,
-    location: "A区湿地",
-    time: "2024-03-20 10:30",
-  },
-  {
-    id: 2,
-    name: "黑鹳",
-    type: "鸟类",
-    count: 8,
-    location: "B区湿地",
-    time: "2024-03-20 11:20",
-  },
-]);
+// 查询参数
+const queryParams = reactive({
+  page: 1,
+  page_size: 10,
+  species_code: '',
+  chinese_name: '',
+  category: undefined,
+  protection_level: undefined,
+  status: undefined
+})
 
-const initChart = () => {
-  const chartDom = document.getElementById("speciesChart");
-  if (!chartDom) return;
+// 数据列表
+const loading = ref(false)
+const speciesList = ref([])
+const pagination = reactive({
+  total: 0,
+  page: 1,
+  pageSize: 10
+})
 
-  const myChart = echarts.init(chartDom);
-  const option = {
+// 物种类别选项
+const categoryOptions = [
+  { label: '鸟类', value: 'bird' },
+  { label: '哺乳类', value: 'mammal' },
+  { label: '鱼类', value: 'fish' },
+  { label: '两栖类', value: 'amphibian' },
+  { label: '爬行类', value: 'reptile' },
+  { label: '昆虫类', value: 'insect' },
+  { label: '植物', value: 'plant' }
+]
+
+// 保护等级选项
+const protectionLevelOptions = [
+  { label: '国家一级', value: 'national_first' },
+  { label: '国家二级', value: 'national_second' },
+  { label: '省级', value: 'provincial' },
+  { label: '普通', value: 'normal' }
+]
+
+// 弹窗显示控制
+const dialogVisible = ref(false)
+const dialogType = ref('add') // 'add' 或 'edit'
+const dialogTitle = ref('添加物种')
+
+// 表单数据
+const formRef = ref()
+const formData = ref({
+  chinese_name: '',
+  latin_name: '',
+  category: '',
+  protection_level: 'national_first',
+  characteristics: '',
+  habits: '',
+  distribution: '',
+  image_urls: [],
+  images: [],
+  fileList: [],
+  status: 1
+})
+
+// 表单校验规则
+const rules = {
+  chinese_name: [
+    { required: true, message: '请输入中文名称', trigger: 'blur' },
+    { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
+  ],
+  latin_name: [
+    { required: true, message: '请输入拉丁名称', trigger: 'blur' }
+  ],
+  category: [
+    { required: true, message: '请选择物种类别', trigger: 'change' }
+  ],
+  protection_level: [
+    { required: true, message: '请选择保护等级', trigger: 'change' }
+  ],
+  characteristics: [
+    { required: true, message: '请输入特征描述', trigger: 'blur' }
+  ],
+  habits: [
+    { required: true, message: '请输入生活习性', trigger: 'blur' }
+  ],
+  distribution: [
+    { required: true, message: '请输入分布区域', trigger: 'blur' }
+  ]
+}
+
+// 添加统计信息的响应式数据
+const statistics = ref({
+  categories: {},
+  protection_levels: {}
+})
+
+// 图表实例
+const categoryChartRef = ref(null)
+const protectionChartRef = ref(null)
+let categoryChart = null
+let protectionChart = null
+
+// 基础URL
+const baseUrl = computed(() => import.meta.env.VITE_API_BASE_URL || '')
+
+// 获取完整的图片URL
+const getFullImageUrl = (url) => {
+  if (!url) return ''
+  if (url.startsWith('http')) return url
+  if (url.startsWith('data:')) return url
+  if (url.startsWith('blob:')) return url
+
+  // 移除URL开头的斜杠，避免重复
+  const cleanUrl = url.startsWith('/') ? url.slice(1) : url
+  // 确保不会重复添加 uploads 路径
+  if (cleanUrl.startsWith('uploads/')) {
+    return `${baseUrl.value}/${cleanUrl}`
+  }
+  return `${baseUrl.value}/uploads/${cleanUrl}`
+}
+
+// 初始化图表
+const initCharts = () => {
+  if (categoryChartRef.value) {
+    categoryChart = echarts.init(categoryChartRef.value)
+  }
+  if (protectionChartRef.value) {
+    protectionChart = echarts.init(protectionChartRef.value)
+  }
+}
+
+// 更新图表数据
+const updateCharts = () => {
+  // 物种类别图表数据
+  const categoryData = reverseArray(
+    Object.entries(statistics.value.categories)
+      .filter(([_, count]) => count.total_count > 0)
+      .map(([category, count]) => ({
+        name: categoryOptions.find(item => item.value === category)?.label || category,
+        value: count.total_count
+      }))
+      .sort((a, b) => a.value - b.value)
+  )
+
+  // 保护等级图表数据
+  const protectionData = reverseArray(
+    Object.entries(statistics.value.protection_levels)
+      .filter(([_, count]) => count > 0)
+      .map(([level, count]) => ({
+        name: protectionLevelOptions.find(item => item.value === level)?.label || level,
+        value: count
+      }))
+      .sort((a, b) => a.value - b.value)
+  )
+
+  // 设置物种类别图表
+  categoryChart?.setOption({
     title: {
-      text: '物种分布统计',
-      textStyle: {
-        fontSize: 16,
-        fontWeight: 500,
-        color: '#303133'
+      text: '物种类别统计',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}种'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      top: 'middle'
+    },
+    series: [
+      {
+        name: '物种数量',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['60%', '50%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter: '{b}: {c}种'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        },
+        data: categoryData
       }
+    ]
+  })
+
+  // 设置保护等级图表
+  protectionChart?.setOption({
+    title: {
+      text: '保护等级统计',
+      left: 'center'
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       },
-      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-      borderColor: '#eee',
-      padding: [10, 15],
-      textStyle: {
-        color: '#666'
+      formatter: '{b}: {c}种'
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: protectionData.map(item => item.name),
+      axisLabel: {
+        interval: 0,
+        rotate: 30
       }
     },
-    grid: [{
-      left: '8%',
-      right: '52%',
-      top: '15%',
-      bottom: '10%'
-    }],
-    xAxis: [{
-      type: 'category',
-      data: ['鸟类', '鱼类', '两栖类', '植物', '昆虫'],
-      axisLine: {
-        lineStyle: {
-          color: '#DCDFE6'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: '#909399',
-        interval: 0
-      },
-      gridIndex: 0
-    }],
-    yAxis: [{
+    yAxis: {
       type: 'value',
-      name: '数量',
-      nameTextStyle: {
-        color: '#909399',
-        padding: [0, 30, 0, 0]
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#EBEEF5',
-          type: 'dashed'
-        }
-      },
-      axisLabel: {
-        color: '#909399'
-      },
-      gridIndex: 0
-    }],
+      name: '物种数量',
+      minInterval: 1
+    },
     series: [
       {
         name: '物种数量',
         type: 'bar',
         barWidth: '40%',
-        data: [
-          {
-            value: 52,
-            itemStyle: { color: '#409EFF' }
-          },
-          {
-            value: 38,
-            itemStyle: { color: '#67C23A' }
-          },
-          {
-            value: 32,
-            itemStyle: { color: '#E6A23C' }
-          },
-          {
-            value: 42,
-            itemStyle: { color: '#F56C6C' }
-          },
-          {
-            value: 28,
-            itemStyle: { color: '#909399' }
+        data: protectionData.map(item => ({
+          value: item.value,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#83bff6' },
+              { offset: 0.5, color: '#409EFF' },
+              { offset: 1, color: '#2c76c5' }
+            ])
           }
-        ],
+        })),
         label: {
           show: true,
           position: 'top',
-          color: '#666'
-        },
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.2)'
-          }
-        },
-        xAxisIndex: 0,
-        yAxisIndex: 0
-      },
-      {
-        name: '分布占比',
-        type: 'pie',
-        radius: ['50%', '70%'],
-        center: ['76%', '50%'],
-        label: {
-          show: true,
-          position: 'outside',
-          formatter: function(params) {
-            return `${params.name}\n${params.percent.toFixed(1)}%`;
-          },
-          color: '#666',
-          fontWeight: 'bold',
-          fontSize: 13,
-          padding: [4, 8],
-          backgroundColor: 'rgba(255, 255, 255, 0.8)',
-          borderRadius: 4,
-        },
-        labelLine: {
-          length: 15,
-          length2: 15,
-          smooth: true
-        },
-        itemStyle: {
-          borderWidth: 2,
-          borderColor: '#fff'
-        },
-        animation: true,
-        animationDuration: 1000,
-        animationDurationUpdate: 500,
-        animationType: 'expansion',
-        animationEasing: 'cubicInOut',
-        animationDelay: function(idx) {
-          return idx * 100;
-        },
-        animationDelayUpdate: function(idx) {
-          return idx * 100;
-        },
-        emphasis: {
-          scale: true,
-          scaleSize: 10,
-          focus: 'self',
-          blurScope: 'coordinateSystem',
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.2)'
-          }
-        },
-        data: [
-          { value: 52, name: '鸟类', itemStyle: { color: '#409EFF' } },
-          { value: 38, name: '鱼类', itemStyle: { color: '#67C23A' } },
-          { value: 32, name: '两栖类', itemStyle: { color: '#E6A23C' } },
-          { value: 42, name: '植物', itemStyle: { color: '#F56C6C' } },
-          { value: 28, name: '昆虫', itemStyle: { color: '#909399' } }
-        ]
+          formatter: '{c}种'
+        }
       }
     ]
-  };
+  })
+}
 
-  myChart.setOption(option);
+// 监听窗口大小变化
+const handleResize = () => {
+  categoryChart?.resize()
+  protectionChart?.resize()
+}
 
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-};
+// 获取列表数据
+const getList = async () => {
+  loading.value = true
+  try {
+    // 处理查询参数，移除中文名称，因为我们将在前端过滤
+    const params = {
+      ...queryParams,
+      category: queryParams.category || undefined,
+      protection_level: queryParams.protection_level || undefined,
+      status: queryParams.status === '' ? undefined : queryParams.status
+    }
+
+    // 移除所有 undefined 的参数和中文名称参数
+    delete params.chinese_name
+    Object.keys(params).forEach(key =>
+      params[key] === undefined && delete params[key]
+    )
+
+    const res = await getSpeciesList(params)
+    if (res.success && res.data) {
+      // 确保数据是数组
+      let list = Array.isArray(res.data.list) ? [...res.data.list] : []
+
+      // 如果有中文名称搜索条件，在前端进行过滤
+      const searchText = queryParams.chinese_name?.trim().toLowerCase()
+      if (searchText) {
+        list = list.filter(item =>
+          item.chinese_name?.toLowerCase().includes(searchText)
+        )
+      }
+
+      // 反转数组顺序
+      speciesList.value = reverseArray(list)
+
+      // 更新分页信息
+      if (res.data.pagination) {
+        // 使用过滤后的数据长度作为总数
+        pagination.total = searchText ? list.length : Number(res.data.pagination.total) || 0
+        pagination.page = Number(res.data.pagination.current) || 1
+        pagination.pageSize = Number(res.data.pagination.page_size) || 10
+      }
+    } else {
+      speciesList.value = []
+      ElMessage.error(res.message || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('获取物种列表失败：', error)
+    speciesList.value = []
+    ElMessage.error('获取物种列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置查询
+const resetQuery = () => {
+  queryParams.species_code = ''
+  queryParams.chinese_name = ''
+  queryParams.category = undefined
+  queryParams.protection_level = undefined
+  queryParams.status = undefined
+  getList()
+}
+
+// 处理添加/编辑
+const handleAddOrEdit = (type, row) => {
+  dialogType.value = type
+  dialogTitle.value = type === 'add' ? '添加物种' : '编辑物种'
+  dialogVisible.value = true
+
+  if (type === 'edit' && row) {
+    formData.value = { ...row }
+    // 为已有图片创建文件列表
+    const fileList = []
+    if (row.image_urls && Array.isArray(row.image_urls)) {
+      row.image_urls.forEach((url, index) => {
+        const fullUrl = getFullImageUrl(url)
+        fileList.push({
+          uid: `-${index}`, // 添加唯一标识
+          name: url.split('/').pop(),
+          url: fullUrl,
+          status: 'success',
+          response: { url: fullUrl }
+        })
+      })
+    }
+    formData.value.fileList = fileList
+    formData.value.image_urls = row.image_urls || []
+    formData.value.images = []
+  } else {
+    formData.value = {
+      chinese_name: '',
+      latin_name: '',
+      category: '',
+      protection_level: 'national_first',
+      characteristics: '',
+      habits: '',
+      distribution: '',
+      image_urls: [],
+      images: [],
+      fileList: [],
+      status: 1
+    }
+  }
+}
+
+// 处理文件上传
+const handleFileUpload = (uploadFile) => {
+  const file = uploadFile.raw || uploadFile
+  if (!file) return
+
+  // 验证文件类型
+  const isImage = file.type.startsWith('image/')
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件！')
+    return false
+  }
+
+  // 验证文件大小（5MB）
+  const isLt5M = file.size / 1024 / 1024 < 5
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB！')
+    return false
+  }
+
+  // 添加到图片列表
+  if (!formData.value.images.some(f => f.uid === file.uid)) {
+    formData.value.images.push(file)
+  }
+  return true
+}
+
+// 处理文件移除
+const handleFileRemove = (uploadFile) => {
+  // 如果是新上传的文件，从images中移除
+  const imageIndex = formData.value.images.findIndex(file => file.uid === uploadFile.uid)
+  if (imageIndex !== -1) {
+    formData.value.images.splice(imageIndex, 1)
+  }
+
+  // 如果是已有的图片，从image_urls中移除
+  if (uploadFile.url) {
+    const urlIndex = formData.value.image_urls.findIndex(url => getFullImageUrl(url) === uploadFile.url)
+    if (urlIndex !== -1) {
+      formData.value.image_urls.splice(urlIndex, 1)
+    }
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        // 创建 FormData 对象
+        const formDataObj = new FormData()
+
+        // 添加基本字段
+        formDataObj.append('chinese_name', formData.value.chinese_name)
+        formDataObj.append('latin_name', formData.value.latin_name)
+        formDataObj.append('category', formData.value.category)
+        formDataObj.append('protection_level', formData.value.protection_level)
+        formDataObj.append('characteristics', formData.value.characteristics)
+        formDataObj.append('habits', formData.value.habits)
+        formDataObj.append('distribution', formData.value.distribution)
+        formDataObj.append('status', formData.value.status)
+
+        // 添加已有的图片URL
+        formData.value.image_urls.forEach(url => {
+          formDataObj.append('existing_image_urls', url)
+        })
+
+        // 添加新上传的图片文件
+        formData.value.images.forEach((file) => {
+          formDataObj.append('image_urls', file)
+        })
+
+        // 调用API
+        const api = dialogType.value === 'add' ? addSpecies : (id) => updateSpecies(formData.value.id, formDataObj)
+        await api(formDataObj)
+
+        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '修改成功')
+        dialogVisible.value = false
+        getList()
+      } catch (error) {
+        console.error('提交失败：', error)
+        ElMessage.error('提交失败')
+      }
+    }
+  })
+}
+
+// 获取统计信息
+const getStatistics = async () => {
+  try {
+    const res = await getSpeciesStatistics()
+    statistics.value = res.data
+    // 更新图表数据
+    updateCharts()
+  } catch (error) {
+    console.error('获取统计信息失败：', error)
+  }
+}
+
+// 处理状态更新
+const handleStatusChange = async (row) => {
+  const newStatus = row.status === 1 ? 0 : 1
+  try {
+    await updateSpeciesStatus(row.id, { status: newStatus })
+    ElMessage.success('状态更新成功')
+    getList()
+  } catch (error) {
+    console.error('状态更新失败：', error)
+    ElMessage.error('状态更新失败')
+  }
+}
+
+// 处理页码改变
+const handleCurrentChange = (val) => {
+  queryParams.page = Number(val)
+  getList()
+}
+
+// 处理每页条数改变
+const handleSizeChange = (val) => {
+  queryParams.page_size = Number(val)
+  queryParams.page = 1
+  getList()
+}
+
+// 添加排序处理函数
+const handleSortChange = ({ prop, order }) => {
+  if (prop && order) {
+    const sortOrder = order === 'ascending' ? 'asc' : 'desc'
+    const sortedList = sortArrayByField(speciesList.value, prop, sortOrder)
+    speciesList.value = sortedList
+  }
+}
 
 onMounted(() => {
-  initChart();
-});
+  getList()
+  // 初始化图表
+  initCharts()
+  getStatistics()
+  window.addEventListener('resize', handleResize)
+})
 
-// 添加导出相关的数据和方法
-const exportDialogVisible = ref(false);
-const exportForm = reactive({
-  timeRange: [],
-  format: "excel",
-});
-
-const handleExport = () => {
-  exportDialogVisible.value = true;
-};
-
-const handleExportConfirm = () => {
-  console.log("导出数据:", exportForm);
-  exportDialogVisible.value = false;
-};
+onUnmounted(() => {
+  // 销毁图表实例
+  categoryChart?.dispose()
+  protectionChart?.dispose()
+  window.removeEventListener('resize', handleResize)
+})
 </script>
 
 <template>
-  <div class="species-container">
-    <!-- 统计卡片 -->
-    <el-row :gutter="20" class="mb-4">
-      <el-col :span="6" v-for="(item, index) in speciesStats" :key="index">
-        <el-card class="stats-card" shadow="hover">
-          <div class="stats-value">{{ item.value }}</div>
-          <div class="stats-label">{{ item.label }}</div>
-          <div class="stats-trend" :class="item.trend > 0 ? 'up' : 'down'">
-            {{ Math.abs(item.trend) }}%
-            <el-icon>
-              <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
-            </el-icon>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 图表区域 -->
-    <el-card class="chart-card" shadow="hover">
-      <div id="speciesChart" style="height: 400px;"></div>
-    </el-card>
-
-    <el-row :gutter="20" class="mt-20">
-      <el-col :span="24">
+  <div class="app-container">
+    <!-- 统计信息展示 -->
+    <el-row :gutter="20" class="statistics-container">
+      <el-col :span="12">
         <el-card>
-          <template #header>
-            <div class="card-header">
-              <span>识别记录</span>
-              <div>
-                <el-button type="primary" @click="handleExport">导出数据</el-button>
-              </div>
-            </div>
-          </template>
-
-          <el-table :data="tableData" style="width: 100%">
-            <el-table-column prop="id" label="ID" width="80" />
-            <el-table-column prop="name" label="物种名称" min-width="120" />
-            <el-table-column prop="type" label="类型" width="100" />
-            <el-table-column prop="count" label="数量" width="100" />
-            <el-table-column prop="location" label="位置" min-width="120" />
-            <el-table-column prop="time" label="识别时间" min-width="180" />
-          </el-table>
+          <div ref="categoryChartRef" style="height: 400px"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div ref="protectionChartRef" style="height: 400px"></div>
         </el-card>
       </el-col>
     </el-row>
 
-    <!-- 添加导出弹窗 -->
-    <el-dialog v-model="exportDialogVisible" title="导出数据" width="500px">
-      <el-form :model="exportForm" label-width="80px">
-        <el-form-item label="时间范围">
-          <el-date-picker
-            v-model="exportForm.timeRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="width: 100%"
+    <!-- 搜索区域 -->
+    <el-card class="search-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-form-item label="中文名称" prop="chinese_name">
+          <el-input
+            v-model="queryParams.chinese_name"
+            placeholder="请输入中文名称"
+            clearable
+            style="width: 200px"
           />
         </el-form-item>
-        <el-form-item label="导出格式">
-          <el-radio-group v-model="exportForm.format">
-            <el-radio label="excel">Excel</el-radio>
-            <el-radio label="csv">CSV</el-radio>
+        <el-form-item label="物种类别" prop="category">
+          <el-select
+            v-model="queryParams.category"
+            placeholder="请选择物种类别"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="保护等级" prop="protection_level">
+          <el-select
+            v-model="queryParams.protection_level"
+            placeholder="请选择保护等级"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in protectionLevelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 操作按钮区域 -->
+    <el-card class="table-container">
+      <template #header>
+        <el-button type="primary" @click="handleAddOrEdit('add')">添加物种</el-button>
+      </template>
+
+      <!-- 表格区域 -->
+      <el-table
+        v-loading="loading"
+        :data="speciesList"
+        border
+        style="width: 100%"
+        row-key="id"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="species_code" label="物种编号" width="120" align="center" />
+        <el-table-column prop="chinese_name" label="中文名称" width="150" show-overflow-tooltip align="center"/>
+        <el-table-column prop="latin_name" label="拉丁名称" width="180" show-overflow-tooltip align="center"/>
+        <el-table-column prop="category" label="物种类别" width="100" align="center">
+          <template #default="{ row }">
+            {{ categoryOptions.find(item => item.value === row.category)?.label || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="protection_level" label="保护等级" width="120" align="center">
+          <template #default="{ row }">
+            {{ protectionLevelOptions.find(item => item.value === row.protection_level)?.label || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="characteristics" label="特征描述" show-overflow-tooltip align="center"/>
+        <el-table-column label="图片" width="100" align="center">
+          <template #default="{ row }">
+            <el-image
+              v-if="row.image_urls && row.image_urls.length > 0"
+              :src="getFullImageUrl(row.image_urls[0])"
+              :preview-src-list="row.image_urls.map(url => getFullImageUrl(url))"
+              preview-teleported
+              :initial-index="0"
+              fit="cover"
+              class="species-image"
+              loading="lazy"
+              :hide-on-click-modal="false"
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+            >
+              <template #error>
+                <div class="image-error">
+                  <el-icon><picture-filled /></el-icon>
+                </div>
+              </template>
+            </el-image>
+            <div v-else class="no-image">
+              <el-icon><picture-filled /></el-icon>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'">
+              {{ row.status === 1 ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleAddOrEdit('edit', row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 添加/编辑弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="700px"
+      append-to-body
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="中文名称" prop="chinese_name">
+          <el-input v-model="formData.chinese_name" placeholder="请输入中文名称" />
+        </el-form-item>
+        <el-form-item label="拉丁名称" prop="latin_name">
+          <el-input v-model="formData.latin_name" placeholder="请输入拉丁名称" />
+        </el-form-item>
+        <el-form-item label="物种类别" prop="category">
+          <el-select v-model="formData.category" placeholder="请选择物种类别" style="width: 100%">
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="保护等级" prop="protection_level">
+          <el-select v-model="formData.protection_level" placeholder="请选择保护等级" style="width: 100%">
+            <el-option
+              v-for="item in protectionLevelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="特征描述" prop="characteristics">
+          <el-input
+            v-model="formData.characteristics"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入特征描述"
+          />
+        </el-form-item>
+        <el-form-item label="生活习性" prop="habits">
+          <el-input
+            v-model="formData.habits"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入生活习性"
+          />
+        </el-form-item>
+        <el-form-item label="分布区域" prop="distribution">
+          <el-input
+            v-model="formData.distribution"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入分布区域"
+          />
+        </el-form-item>
+        <el-form-item label="图片" prop="image_urls">
+          <el-upload
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            :on-change="handleFileUpload"
+            :on-remove="handleFileRemove"
+            :file-list="formData.fileList"
+            accept=".jpg,.jpeg,.png"
+            :multiple="true"
+            :before-upload="() => false"
+            :http-request="() => {}"
+          >
+            <el-icon><Plus /></el-icon>
+            <template #file="{ file }">
+              <div class="upload-file-card">
+                <img
+                  :src="file.url"
+                  class="upload-file-image"
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                />
+                <span class="upload-file-actions">
+                  <el-icon @click.stop="handleFileRemove(file)"><Delete /></el-icon>
+                </span>
+              </div>
+            </template>
+          </el-upload>
+        </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>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="exportDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleExportConfirm">确认导出</el-button>
-        </span>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use "../../../styles/variables.scss" as *;
-
-.species-container {
+.app-container {
   padding: 20px;
 
-  .stats-card {
-    text-align: center;
-    padding: 20px;
-
-    .stats-value {
-      font-size: 24px;
-      font-weight: 600;
-      color: #303133;
-      margin-bottom: 8px;
-    }
-
-    .stats-label {
-      font-size: 14px;
-      color: #909399;
-      margin-bottom: 12px;
-    }
-
-    .stats-trend {
-      font-size: 13px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-
-      &.up {
-        color: #67C23A;
-      }
-
-      &.down {
-        color: #F56C6C;
-      }
-    }
+  .search-container {
+    margin-bottom: 20px;
   }
 
-  .chart-card {
+  .table-container {
+    margin-bottom: 20px;
+  }
+
+  .pagination-container {
     margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
   }
 
-  .mb-4 {
-    margin-bottom: 16px;
+  :deep(.el-card__header) {
+    padding: 10px 20px;
   }
 
-  .el-card {
-    background: #ffffff;
-    border: none;
-    border-radius: 8px;
+  .statistics-container {
+    margin-bottom: 20px;
+
+    .card-header {
+      font-weight: bold;
+    }
+
+    .statistics-content {
+      .statistics-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        span {
+          margin-right: 10px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .species-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+    cursor: pointer;
+    object-fit: cover;
     transition: all 0.3s;
-    box-shadow: $box-shadow;
+    border: 1px solid #e4e7ed;
 
     &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
-    }
-
-    .el-card__header {
-      padding: 16px 20px;
-      border-bottom: 1px solid $border-color;
+      transform: scale(1.05);
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     }
   }
 
-  .el-table {
-    :deep(tbody tr) {
+  .image-error,
+  .no-image {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    border: 1px dashed #dcdfe6;
+    color: #909399;
+
+    .el-icon {
+      font-size: 20px;
+    }
+  }
+
+  .image-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+
+    .preview-image {
+      width: 100px;
+      height: 100px;
+      border-radius: 4px;
+      object-fit: cover;
+      cursor: pointer;
       transition: all 0.3s;
+      border: 1px solid #e4e7ed;
 
       &:hover {
-        background-color: rgba(64, 158, 255, 0.1) !important;
+        transform: scale(1.05);
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       }
     }
   }
 
-  :deep(.el-button) {
-    transition: all 0.3s;
+  .upload-file-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .upload-file-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .upload-file-actions {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 4px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 0 4px 0 4px;
+      opacity: 0;
+      transition: opacity 0.3s;
+
+      .el-icon {
+        color: #fff;
+        font-size: 16px;
+        cursor: pointer;
+
+        &:hover {
+          color: #f56c6c;
+        }
+      }
+    }
 
     &:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    span {
-      font-size: 16px;
-      font-weight: 500;
-      color: $text-primary;
-      position: relative;
-      padding-left: 12px;
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 4px;
-        height: 16px;
-        background: $primary-color;
-        border-radius: 2px;
+      .upload-file-actions {
+        opacity: 1;
       }
     }
   }
+}
 
-  .mt-20 {
-    margin-top: 20px;
-  }
+.dialog-footer {
+  text-align: right;
+  padding-top: 20px;
+}
 
-  :deep(.el-table) {
-    th.el-table__cell {
-      background-color: #fafafa;
-      color: $text-primary;
-      font-weight: 500;
-    }
+:deep(.el-image-viewer__wrapper) {
+  .el-image-viewer__close {
+    color: #fff;
+    font-size: 30px;
 
-    .el-table__cell {
-      padding: 12px 0;
+    &:hover {
+      color: #409EFF;
     }
   }
 
-  .dialog-footer {
-    .el-button {
-      margin-left: 12px;
+  .el-image-viewer__actions {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .el-image-viewer__prev,
+  .el-image-viewer__next {
+    font-size: 36px;
+    color: #fff;
+
+    &:hover {
+      color: #409EFF;
     }
   }
 
-  .el-card__body {
-    padding: 20px;
+  .el-image-viewer__mask {
+    background-color: rgba(0, 0, 0, 0.8);
   }
 }
-</style>
+</style>
\ No newline at end of file