diff --git a/src/api/detail.js b/src/api/detail.js
new file mode 100644
index 0000000..840a3da
--- /dev/null
+++ b/src/api/detail.js
@@ -0,0 +1,6 @@
+import { get, post} from "@/util/request"
+
+export function getdetail(id) {
+    return post('/mailbox/detail',id)
+}
+
diff --git a/src/components/MailDetail.vue b/src/components/MailDetail.vue
new file mode 100644
index 0000000..9e3c73e
--- /dev/null
+++ b/src/components/MailDetail.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="detail-list" >
+        <label style="width: 100px; font-size: 30px; ">信件详情</label>
+        <el-button @click="back()" style="margin-left:1500px; width: 100px; font-size: 16px; border: solid;">返回</el-button>
+
+        <el-form ref="form" :model="form" label-width="120px" style="margin-top: 50px;">
+  <el-form-item label="案件编号">
+    <el-col :span="12" >
+        <el-input v-model="form.id" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="姓名">
+    <el-col :span="12">
+        <el-input   v-model="form.contactName" style="border: groove; font-size: 16px; " type="text" readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="手机号" >
+    <el-col :span="12">
+        <el-input v-model="form.contactPhone" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="身份证号码" >
+    <el-col :span="12">
+        <el-input v-model="form.contactIdCard" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="信件内容">
+    <el-col :span="12">
+        <el-input type="textarea" :rows="12" v-model="form.content" style="border: groove; font-size: 16px;"  readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="评价">
+    <el-col :span="12">
+        <el-input v-model="form.satisfaction" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input>
+    </el-col>
+  </el-form-item>
+  
+</el-form>
+
+            <!-- <h1>{{ mailID }}</h1> -->
+    </div>
+</template>
+
+<!-- <script setup>
+import { onMounted } from 'vue';
+import router from '../router';
+import axios from 'axios';
+const mailID = router.currentRoute.value.params.id;
+
+onMounted(() => {
+    console.log(mailID);
+    axios.post('/api/mailbox/detail', { id: mailID }).then(res => {
+        console.log(res.data);
+    }).catch(err => {
+        console.log(err);
+    });
+});
+
+</script> -->
+<script>
+import router from '../router';
+import { getdetail } from '@/api/detail'
+import axios from 'axios';
+  export default {
+    data() {
+      return {
+        mailID:router.currentRoute.value.params.id,
+        form: {
+          id: '',
+          date: '',
+          contactName: '',
+          contactPhone: '',
+          contactIdCard: '',
+          content: '',
+          satisfaction: '',
+        }
+      }
+    },
+    mounted(){
+        axios.post('/api/mailbox/detail', { id: this.mailID }).then(res => {
+        this.form = res.data
+        if(res.data.satisfaction == "SATISFIED"){
+            this.form.satisfaction = "满意"
+        }else if(res.data.satisfaction == "NOT_SATISFIED"){
+            this.form.satisfaction = "不满意"
+        }else if(res.data.satisfaction == "BASICALLY_SATISFIED"){
+            this.form.satisfaction = "基本满意"
+        }else{
+            this.form.satisfaction = "暂无评价"
+        }
+    }).catch(err => {
+        console.log(err);
+    });
+    
+  },
+    methods: {
+        back() {
+            router.push('/mailbox')
+      }
+    },
+    
+  }
+</script>
+
+<style>
+.detail-list .el-form-item__label{
+    margin-left:20px ;
+    width: 200px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/ManageMail.vue b/src/components/ManageMail.vue
new file mode 100644
index 0000000..d72de79
--- /dev/null
+++ b/src/components/ManageMail.vue
@@ -0,0 +1,204 @@
+<template>
+    <el-form :model="form" label-width="100px" :inline="true">
+        <el-form-item label="来信时间">
+            <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="群众姓名">
+            <el-input v-model="form.contactName"></el-input>
+        </el-form-item>
+        <el-form-item label="群众手机号">
+            <el-input v-model="form.contactPhone"></el-input>
+        </el-form-item>
+        <el-form-item label="群众身份证号">
+            <el-input v-model="form.contactIdCard"></el-input>
+        </el-form-item>
+        <el-form-item label="案件编号">
+            <el-input v-model="form.id"></el-input>
+        </el-form-item>
+        <el-form-item label="信件内容">
+            <el-input v-model="form.content"></el-input>
+        </el-form-item>
+        <el-form-item label="评价结果">
+            <el-input v-model="form.evaluate"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="search">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="default" @click="reset">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <el-button type="primary" @click="out">导出信件</el-button>
+    <el-table :data="tableData" border height="680px" table-layout="fixed"
+        :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
+        <el-table-column fixed="left" prop="id" label="案件编号" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="createTime" label="来信日期" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="contactName" label="联系人姓名" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="contactIdCard" label="联系人身份证号码" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="contactPhone" label="联系人手机号码" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="content" label="信件内容" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column prop="evaluate" label="评价结果" width="flexColumnWidth(label,prop)">
+        </el-table-column>
+        <el-table-column fixed="right" label="详情" width="100">
+            <template v-slot="scope">
+                <el-button @click="handleDetail(scope.$index + 1)">详情</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
+        :current-page="pageData.currentPage" :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageData.pageSize"
+        layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
+    </el-pagination>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import axios from 'axios'
+import { onMounted, onUpdated } from 'vue';
+import router from '../router';
+
+const form = ref({
+    date: '',
+    contactName: '',
+    contactPhone: '',
+    contactIdCard: '',
+    id: '',
+    content: '',
+    evaluate: ''
+})
+
+// 定义可变的tableData变量，并用axios请求数据
+const tableData = ref([])
+
+const pageData = ref({
+    currentPage: 1,
+    pageSize: 2,
+    totalSize: 0
+})
+
+
+onMounted(() => {
+    const data = JSON.stringify(pageData.value)
+    console.log(data)
+    axios.post('api/mailbox/list', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            console.log(response);
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
+})
+
+onUpdated(() => {
+    console.log('updated')
+})
+
+const flexColumnWidth = (label, prop) => {
+    const width = Math.max(label.length * 12, 120)
+    return `${width}px`
+}
+
+const handleDetail = (index) => {
+    console.log(index)
+    console.log(tableData.value[index - 1].id)
+    router.push('/mailbox/detail/' + tableData.value[index - 1].id)
+}
+
+const handleSizeChange = (size) => {
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    pageData.value.pageSize = size
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
+}
+
+const handlePageChange = (currentPage) => {
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    pageData.value.currentPage = currentPage
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
+}
+
+const search = () => {
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } })
+        .then(function (response) {
+            tableData.value = response.data.mails;
+            pageData.value.totalSize = response.data.pageSet.totalSize;
+        })
+        .catch(function (error) { console.log(error) })
+}
+
+const reset = () => {
+    form.value = {
+        date: '',
+        name: '',
+        phone: '',
+        id_card: '',
+        mail_id: '',
+        mail_context: '',
+        mail_appraise: ''
+    }
+}
+
+const out = () => {
+    const requestData = {
+        formData: form.value,
+        pageData: pageData.value
+    }
+    const data = JSON.stringify(requestData)
+    console.log(data)
+    axios.post('api/mailbox/exportexcel', data, { headers: { 'Content-Type': 'application/json'},responseType: 'blob' }).then(function (res) {
+        var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8'})
+      var contentDisposition = res.headers['content-disposition']
+      var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+      var result = patt.exec(contentDisposition)
+      var filename = result[1]
+      var downloadElement = document.createElement('a')
+      var href = window.URL.createObjectURL(blob) // 创建下载的链接
+      var reg = /^["](.*)["]$/g
+      downloadElement.style.display = 'none'
+      downloadElement.href = href
+      downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
+      document.body.appendChild(downloadElement)
+      downloadElement.click() // 点击下载
+      document.body.removeChild(downloadElement) // 下载完成移除元素
+      window.URL.revokeObjectURL(href)
+        })
+        
+        .catch(function (error) { console.log(error) })
+}
+
+</script>
+
+<style scoped></style>
\ No newline at end of file