feat: 第五阶段办公协同/统计报表/知识库模块

- 新增3个migration(9张表): office(6表)/report(1表)/kb(2表) - 新增9个Model + 9个Controller - 新增43条API路由(总计305条) - 新增3个前端API模块 + 10个管理页面 - 迁移运行通过, vite build验证通过
2026-03-13 21:43:10 +08:00
parent fb5e0daf1a
commit 058ee507fa
34 changed files with 2595 additions and 0 deletions
@@ -0,0 +1,21 @@
+import request from '@/utils/request.js'
+
+// ─── KB Categories ───────────────────────────────────────────────────────────
+export const kbCategoryApi = {
+  getList: (params) => request.get('/kb/categories', { params }),
+  getDetail: (id) => request.get(`/kb/categories/${id}`),
+  create: (data) => request.post('/kb/categories', data),
+  update: (id, data) => request.put(`/kb/categories/${id}`, data),
+  delete: (id) => request.delete(`/kb/categories/${id}`)
+}
+
+// ─── KB Articles ─────────────────────────────────────────────────────────────
+export const kbArticleApi = {
+  getList: (params) => request.get('/kb/articles', { params }),
+  getDetail: (id) => request.get(`/kb/articles/${id}`),
+  create: (data) => request.post('/kb/articles', data),
+  update: (id, data) => request.put(`/kb/articles/${id}`, data),
+  delete: (id) => request.delete(`/kb/articles/${id}`),
+  publish: (id) => request.put(`/kb/articles/${id}/publish`),
+  offline: (id) => request.put(`/kb/articles/${id}/offline`)
+}
@@ -0,0 +1,44 @@
+import request from '@/utils/request.js'
+
+// ─── Approval Templates ──────────────────────────────────────────────────────
+export const approvalTemplateApi = {
+  getList: (params) => request.get('/office/approval-templates', { params }),
+  getDetail: (id) => request.get(`/office/approval-templates/${id}`),
+  create: (data) => request.post('/office/approval-templates', data),
+  update: (id, data) => request.put(`/office/approval-templates/${id}`, data),
+  delete: (id) => request.delete(`/office/approval-templates/${id}`)
+}
+
+// ─── Approvals ───────────────────────────────────────────────────────────────
+export const approvalApi = {
+  getList: (params) => request.get('/office/approvals', { params }),
+  getDetail: (id) => request.get(`/office/approvals/${id}`),
+  create: (data) => request.post('/office/approvals', data),
+  approve: (id, data) => request.put(`/office/approvals/${id}/approve`, data),
+  reject: (id, data) => request.put(`/office/approvals/${id}/reject`, data),
+  withdraw: (id) => request.put(`/office/approvals/${id}/withdraw`)
+}
+
+// ─── Announcements ───────────────────────────────────────────────────────────
+export const announcementApi = {
+  getList: (params) => request.get('/office/announcements', { params }),
+  getDetail: (id) => request.get(`/office/announcements/${id}`),
+  create: (data) => request.post('/office/announcements', data),
+  update: (id, data) => request.put(`/office/announcements/${id}`, data),
+  delete: (id) => request.delete(`/office/announcements/${id}`),
+  publish: (id) => request.put(`/office/announcements/${id}/publish`)
+}
+
+// ─── Handovers ───────────────────────────────────────────────────────────────
+export const handoverApi = {
+  getList: (params) => request.get('/office/handovers', { params }),
+  create: (data) => request.post('/office/handovers', data),
+  confirm: (id) => request.put(`/office/handovers/${id}/confirm`)
+}
+
+// ─── Notifications ───────────────────────────────────────────────────────────
+export const notificationApi = {
+  getList: (params) => request.get('/office/notifications', { params }),
+  markRead: (id) => request.put(`/office/notifications/${id}/read`),
+  markAllRead: () => request.put('/office/notifications/read-all')
+}
@@ -0,0 +1,15 @@
+import request from '@/utils/request.js'
+
+// ─── Report Dashboards ───────────────────────────────────────────────────────
+export const reportApi = {
+  overview: (params) => request.get('/report/overview', { params }),
+  revenue: (params) => request.get('/report/revenue', { params }),
+  occupancy: (params) => request.get('/report/occupancy', { params }),
+  crmConversion: (params) => request.get('/report/crm-conversion', { params })
+}
+
+// ─── Report Exports ──────────────────────────────────────────────────────────
+export const reportExportApi = {
+  getList: (params) => request.get('/report/exports', { params }),
+  create: (data) => request.post('/report/exports', data)
+}
@@ -0,0 +1,174 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { kbArticleApi, kbCategoryApi } from '@/api/kb.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const categoryList = ref([])
+
+const searchForm = reactive({ keyword: '', category_id: '', status: '', visibility: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ id: null, title: '', category_id: '', content: '', visibility: 1, cover_image: '' })
+const isEdit = ref(false)
+const formRules = {
+  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }]
+}
+
+const statusMap = { 0: '草稿', 1: '待审核', 2: '已发布', 3: '已下架' }
+const statusType = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
+const visibilityMap = { 1: '内部', 2: '公开' }
+
+async function fetchCategories() {
+  try {
+    const res = await kbCategoryApi.getList({ per_page: 200 })
+    categoryList.value = res.data?.list || res.data?.data || []
+  } catch { categoryList.value = [] }
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await kbArticleApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { keyword: '', category_id: '', status: '', visibility: '' }); handleSearch() }
+
+function handleAdd() {
+  isEdit.value = false
+  Object.assign(form, { id: null, title: '', category_id: '', content: '', visibility: 1, cover_image: '' })
+  dialogVisible.value = true
+}
+
+async function handleEdit(row) {
+  isEdit.value = true
+  Object.assign(form, {
+    id: row.id,
+    title: row.title,
+    category_id: row.category_id || '',
+    content: row.content || '',
+    visibility: row.visibility || 1,
+    cover_image: row.cover_image || ''
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) { await kbArticleApi.update(form.id, form); ElMessage.success('更新成功') }
+      else { await kbArticleApi.create(form); ElMessage.success('创建成功') }
+      dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除文章「${row.title}」吗？`, '删除确认', { type: 'warning' })
+  await kbArticleApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
+}
+
+async function handlePublish(row) {
+  await ElMessageBox.confirm(`确定发布文章「${row.title}」吗？`, '发布确认', { type: 'info' })
+  await kbArticleApi.publish(row.id); ElMessage.success('发布成功'); fetchList()
+}
+
+async function handleOffline(row) {
+  await ElMessageBox.confirm(`确定下架文章「${row.title}」吗？`, '下架确认', { type: 'warning' })
+  await kbArticleApi.offline(row.id); ElMessage.success('下架成功'); fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+onMounted(() => { fetchCategories(); fetchList() })
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-input v-model="searchForm.keyword" placeholder="标题搜索" style="width:180px" clearable @keydown.enter="handleSearch" />
+      <el-select v-model="searchForm.category_id" placeholder="分类" clearable style="width:150px">
+        <el-option v-for="c in categoryList" :key="c.id" :label="c.name" :value="c.id" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-select v-model="searchForm.visibility" placeholder="可见范围" clearable style="width:120px">
+        <el-option v-for="(v, k) in visibilityMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+    <div class="table-container">
+      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增文章</el-button></div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
+        <el-table-column prop="title" label="标题" min-width="200" />
+        <el-table-column label="分类" width="120" align="center">
+          <template #default="{ row }">{{ row.category?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="作者" width="100" align="center">
+          <template #default="{ row }">{{ row.author?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="可见范围" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.visibility === 1 ? 'warning' : 'success'" size="small">{{ visibilityMap[row.visibility] || '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="views" label="浏览" width="70" align="center" />
+        <el-table-column prop="likes" label="点赞" width="70" align="center" />
+        <el-table-column prop="published_at" label="发布时间" min-width="160" />
+        <el-table-column label="操作" width="220" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button v-if="row.status <= 1" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
+            <el-button v-if="row.status <= 1" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
+            <el-button v-if="row.status < 2" size="small" type="success" link @click="handlePublish(row)">发布</el-button>
+            <el-button v-if="row.status === 2" size="small" type="warning" link @click="handleOffline(row)">下架</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑文章' : '新增文章'" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="文章标题" prop="title"><el-input v-model="form.title" placeholder="请输入文章标题" /></el-form-item>
+        <el-form-item label="所属分类">
+          <el-select v-model="form.category_id" placeholder="请选择分类" clearable style="width:100%">
+            <el-option v-for="c in categoryList" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文章内容">
+          <el-input v-model="form.content" type="textarea" :rows="10" placeholder="请输入文章内容" />
+        </el-form-item>
+        <el-form-item label="可见范围">
+          <el-select v-model="form.visibility" style="width:100%">
+            <el-option v-for="(v, k) in visibilityMap" :key="k" :label="v" :value="Number(k)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="封面图片">
+          <el-input v-model="form.cover_image" placeholder="请输入封面图片URL" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,127 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { kbCategoryApi } from '@/api/kb.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ status: '' })
+const pagination = reactive({ page: 1, per_page: 50 })
+
+const formRef = ref(null)
+const form = reactive({ id: null, name: '', parent_id: 0, sort: 0, status: 1 })
+const isEdit = ref(false)
+const formRules = {
+  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await kbCategoryApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { status: '' }); handleSearch() }
+
+function handleAdd() {
+  isEdit.value = false
+  Object.assign(form, { id: null, name: '', parent_id: 0, sort: 0, status: 1 })
+  dialogVisible.value = true
+}
+
+async function handleEdit(row) {
+  isEdit.value = true
+  Object.assign(form, {
+    id: row.id,
+    name: row.name,
+    parent_id: row.parent_id || 0,
+    sort: row.sort || 0,
+    status: row.status
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) { await kbCategoryApi.update(form.id, form); ElMessage.success('更新成功') }
+      else { await kbCategoryApi.create(form); ElMessage.success('创建成功') }
+      dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除分类「${row.name}」吗？`, '删除确认', { type: 'warning' })
+  await kbCategoryApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+onMounted(() => fetchList())
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option label="启用" :value="1" />
+        <el-option label="停用" :value="0" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+    <div class="table-container">
+      <div class="table-actions"><el-button type="primary" @click="handleAdd">新增分类</el-button></div>
+      <el-table v-loading="loading" :data="tableData" border stripe row-key="id" style="width:100%">
+        <el-table-column prop="name" label="分类名称" min-width="180" />
+        <el-table-column label="上级分类" width="120" align="center">
+          <template #default="{ row }">{{ row.parent_id === 0 ? '顶级' : row.parent_id }}</template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="80" align="center" />
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '启用' : '停用' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
+            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑分类' : '新增分类'" width="450px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="分类名称" prop="name"><el-input v-model="form.name" placeholder="请输入分类名称" /></el-form-item>
+        <el-form-item label="上级分类">
+          <el-input-number v-model="form.parent_id" :min="0" style="width:100%" />
+          <div style="font-size:12px;color:var(--color-text-secondary)">0 表示顶级分类</div>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="9999" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { announcementApi } from '@/api/office.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const isEdit = ref(false)
+
+const searchForm = reactive({ type: '', publish_status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ id: null, title: '', content: '', type: 1, is_top: 0 })
+
+const typeMap = { 1: '通知', 2: '公告', 3: '制度' }
+const typeTagType = { 1: '', 2: 'warning', 3: 'danger' }
+const publishStatusMap = { 0: '草稿', 1: '已发布' }
+const publishStatusType = { 0: 'info', 1: 'success' }
+
+const formRules = {
+  title: [{ required: true, message: '请输入标题' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await announcementApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { type: '', publish_status: '' }); handleSearch() }
+
+function handleAdd() {
+  isEdit.value = false
+  Object.assign(form, { id: null, title: '', content: '', type: 1, is_top: 0 })
+  dialogVisible.value = true
+}
+
+function handleEdit(row) {
+  isEdit.value = true
+  Object.assign(form, { id: row.id, title: row.title, content: row.content, type: row.type, is_top: row.is_top })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      if (isEdit.value) { await announcementApi.update(form.id, form) } else { await announcementApi.create(form) }
+      ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handlePublish(row) {
+  await ElMessageBox.confirm('确定发布该公告吗？发布后不可编辑或删除。', '发布确认', { type: 'warning' })
+  await announcementApi.publish(row.id)
+  ElMessage.success('发布成功'); fetchList()
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm('确定删除该公告吗？', '删除确认', { type: 'warning' })
+  await announcementApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+onMounted(() => { fetchList() })
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px">
+        <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-select v-model="searchForm.publish_status" placeholder="发布状态" clearable style="width:130px">
+        <el-option v-for="(v, k) in publishStatusMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleAdd">新增公告</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
+        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
+        <el-table-column label="类型" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeTagType[row.type]" size="small">{{ typeMap[row.type] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="置顶" width="70" align="center">
+          <template #default="{ row }">{{ row.is_top ? '是' : '否' }}</template>
+        </el-table-column>
+        <el-table-column label="发布状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="publishStatusType[row.publish_status]" size="small">{{ publishStatusMap[row.publish_status] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="作者" min-width="100">
+          <template #default="{ row }">{{ row.author?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="published_at" label="发布时间" min-width="160" />
+        <el-table-column label="操作" width="200" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button v-if="row.publish_status === 0" size="small" type="success" link @click="handlePublish(row)">发布</el-button>
+            <el-button v-if="row.publish_status === 0" size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
+            <el-button v-if="row.publish_status === 0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑公告' : '新增公告'" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入标题" />
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input v-model="form.content" type="textarea" :rows="5" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="form.type" style="width:100%">
+            <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="置顶">
+          <el-switch v-model="form.is_top" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,174 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { approvalTemplateApi } from '@/api/office.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('新增审批模板')
+const submitLoading = ref(false)
+const isEdit = ref(false)
+
+const searchForm = reactive({ type: '', status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({
+  id: null, name: '', type: '', form_fields: '', flow_nodes: '', status: 1, sort: 0
+})
+
+const typeMap = { 1: '请假', 2: '采购', 3: '合同', 4: '退款', 5: '换房' }
+
+const formRules = {
+  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择模板类型', trigger: 'change' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await approvalTemplateApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { type: '', status: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  isEdit.value = false
+  dialogTitle.value = '新增审批模板'
+  Object.assign(form, { id: null, name: '', type: '', form_fields: '', flow_nodes: '', status: 1, sort: 0 })
+  dialogVisible.value = true
+}
+
+async function handleEdit(row) {
+  isEdit.value = true
+  dialogTitle.value = '编辑审批模板'
+  const res = await approvalTemplateApi.getDetail(row.id)
+  const d = res.data
+  Object.assign(form, {
+    id: d.id, name: d.name, type: d.type,
+    form_fields: d.form_fields ? (typeof d.form_fields === 'string' ? d.form_fields : JSON.stringify(d.form_fields, null, 2)) : '',
+    flow_nodes: d.flow_nodes ? (typeof d.flow_nodes === 'string' ? d.flow_nodes : JSON.stringify(d.flow_nodes, null, 2)) : '',
+    status: d.status, sort: d.sort || 0
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      const payload = { ...form }
+      if (payload.form_fields) {
+        try { payload.form_fields = JSON.parse(payload.form_fields) } catch { /* keep string */ }
+      }
+      if (payload.flow_nodes) {
+        try { payload.flow_nodes = JSON.parse(payload.flow_nodes) } catch { /* keep string */ }
+      }
+      if (isEdit.value) {
+        await approvalTemplateApi.update(form.id, payload)
+        ElMessage.success('更新成功')
+      } else {
+        await approvalTemplateApi.create(payload)
+        ElMessage.success('创建成功')
+      }
+      dialogVisible.value = false
+      fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleDelete(row) {
+  await ElMessageBox.confirm(`确定删除审批模板「${row.name}」吗？`, '删除确认', { type: 'warning' })
+  await approvalTemplateApi.delete(row.id)
+  ElMessage.success('删除成功')
+  fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList() })
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-select v-model="searchForm.type" placeholder="模板类型" clearable style="width:140px">
+        <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
+        <el-option label="启用" :value="1" />
+        <el-option label="停用" :value="0" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleAdd">新增模板</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
+        <el-table-column prop="name" label="模板名称" min-width="160" />
+        <el-table-column label="类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small">{{ typeMap[row.type] || '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">{{ row.status === 1 ? '启用' : '停用' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="80" align="center" />
+        <el-table-column label="操作" width="160" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
+            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入模板名称" />
+        </el-form-item>
+        <el-form-item label="模板类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择类型" style="width:100%">
+            <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="表单字段">
+          <el-input v-model="form.form_fields" type="textarea" :rows="4" placeholder="JSON格式，如：[{&quot;label&quot;:&quot;天数&quot;,&quot;type&quot;:&quot;number&quot;}]" />
+        </el-form-item>
+        <el-form-item label="审批节点">
+          <el-input v-model="form.flow_nodes" type="textarea" :rows="4" placeholder="JSON格式，如：[{&quot;name&quot;:&quot;主管审批&quot;,&quot;role&quot;:&quot;manager&quot;}]" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" :max="9999" style="width:100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,149 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { approvalApi } from '@/api/office.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ title: '', template_id: '', form_data: '' })
+
+const statusMap = { 0: '待审批', 1: '审批中', 2: '已通过', 3: '已驳回', 4: '已撤回' }
+const statusType = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'danger', 4: 'info' }
+
+const formRules = {
+  title: [{ required: true, message: '请输入审批标题', trigger: 'blur' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await approvalApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() {
+  Object.assign(searchForm, { status: '' })
+  handleSearch()
+}
+
+function handleAdd() {
+  Object.assign(form, { title: '', template_id: '', form_data: '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      const payload = { ...form }
+      if (payload.form_data) {
+        try { payload.form_data = JSON.parse(payload.form_data) } catch { /* keep string */ }
+      }
+      await approvalApi.create(payload)
+      ElMessage.success('提交成功')
+      dialogVisible.value = false
+      fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleApprove(row) {
+  await ElMessageBox.confirm('确定通过该审批吗？', '审批确认', { type: 'warning' })
+  await approvalApi.approve(row.id, { status: 2 })
+  ElMessage.success('审批已通过')
+  fetchList()
+}
+
+async function handleReject(row) {
+  await ElMessageBox.confirm('确定驳回该审批吗？', '驳回确认', { type: 'warning' })
+  await approvalApi.reject(row.id, { status: 3 })
+  ElMessage.success('审批已驳回')
+  fetchList()
+}
+
+async function handleWithdraw(row) {
+  await ElMessageBox.confirm('确定撤回该审批吗？', '撤回确认', { type: 'warning' })
+  await approvalApi.withdraw(row.id)
+  ElMessage.success('审批已撤回')
+  fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(() => { fetchList() })
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-select v-model="searchForm.status" placeholder="审批状态" clearable style="width:140px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleAdd">发起审批</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
+        <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip />
+        <el-table-column label="申请人" min-width="100">
+          <template #default="{ row }">{{ row.applicant?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="审批模板" min-width="120">
+          <template #default="{ row }">{{ row.template?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" min-width="160" />
+        <el-table-column label="操作" width="200" fixed="right" align="center">
+          <template #default="{ row }">
+            <template v-if="row.status <= 1">
+              <el-button size="small" type="success" link @click="handleApprove(row)">通过</el-button>
+              <el-button size="small" type="danger" link @click="handleReject(row)">驳回</el-button>
+              <el-button size="small" type="warning" link @click="handleWithdraw(row)">撤回</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+
+    <el-dialog v-model="dialogVisible" title="发起审批" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
+        <el-form-item label="审批标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入审批标题" />
+        </el-form-item>
+        <el-form-item label="审批模板">
+          <el-input v-model="form.template_id" placeholder="请输入模板ID" />
+        </el-form-item>
+        <el-form-item label="表单数据">
+          <el-input v-model="form.form_data" type="textarea" :rows="4" placeholder="JSON格式" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,133 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { handoverApi } from '@/api/office.js'
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ shift_date: '', shift_type: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ shift_date: '', shift_type: 1, content: '', issues: '' })
+
+const shiftTypeMap = { 1: '早班', 2: '中班', 3: '晚班', 4: '夜班' }
+const shiftTagType = { 1: '', 2: 'warning', 3: 'danger', 4: 'info' }
+const statusMap = { 0: '待确认', 1: '已确认' }
+const statusType = { 0: 'warning', 1: 'success' }
+
+const formRules = {
+  shift_date: [{ required: true, message: '请选择交接日期' }],
+  shift_type: [{ required: true, message: '请选择班次' }],
+  content: [{ required: true, message: '请输入交接内容' }]
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await handoverApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { shift_date: '', shift_type: '' }); handleSearch() }
+
+function handleAdd() {
+  Object.assign(form, { shift_date: '', shift_type: 1, content: '', issues: '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      await handoverApi.create(form)
+      ElMessage.success('创建成功'); dialogVisible.value = false; fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+async function handleConfirm(row) {
+  await ElMessageBox.confirm('确定确认接班吗？', '确认接班', { type: 'warning' })
+  await handoverApi.confirm(row.id)
+  ElMessage.success('确认成功'); fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+onMounted(() => { fetchList() })
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="search-bar">
+      <el-date-picker v-model="searchForm.shift_date" type="date" value-format="YYYY-MM-DD" placeholder="交接日期" clearable style="width:160px" />
+      <el-select v-model="searchForm.shift_type" placeholder="班次" clearable style="width:120px">
+        <el-option v-for="(v, k) in shiftTypeMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleAdd">新增交接</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
+        <el-table-column prop="shift_date" label="交接日期" width="120" />
+        <el-table-column label="班次" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="shiftTagType[row.shift_type]" size="small">{{ shiftTypeMap[row.shift_type] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="交班人" min-width="100">
+          <template #default="{ row }">{{ row.handover_user?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="接班人" min-width="100">
+          <template #default="{ row }">{{ row.receiver_user?.name || '待确认' }}</template>
+        </el-table-column>
+        <el-table-column prop="content" label="交接内容" min-width="200" show-overflow-tooltip />
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button v-if="row.status === 0" size="small" type="success" link @click="handleConfirm(row)">确认接班</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
+    </div>
+    <el-dialog v-model="dialogVisible" title="新增交接记录" width="600px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="交接日期" prop="shift_date">
+          <el-date-picker v-model="form.shift_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width:100%" />
+        </el-form-item>
+        <el-form-item label="班次" prop="shift_type">
+          <el-select v-model="form.shift_type" style="width:100%">
+            <el-option v-for="(v, k) in shiftTypeMap" :key="k" :label="v" :value="Number(k)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="交接内容" prop="content">
+          <el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入交接内容" />
+        </el-form-item>
+        <el-form-item label="遗留问题">
+          <el-input v-model="form.issues" type="textarea" :rows="3" placeholder="请输入遗留问题（选填）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -0,0 +1,135 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { notificationApi } from '@/api/office.js'
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+
+const searchForm = reactive({ type: '', is_read: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const typeMap = { 1: '系统', 2: '审批', 3: '待办', 4: '提醒' }
+const typeStyle = { 1: '', 2: 'warning', 3: 'danger', 4: 'success' }
+
+// ─── Methods ──────────────────────────────────────────────────────────────────
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await notificationApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { type: '', is_read: '' }); handleSearch() }
+
+async function handleMarkRead(row) {
+  await notificationApi.markRead(row.id)
+  ElMessage.success('已标记为已读')
+  fetchList()
+}
+
+async function handleMarkAllRead() {
+  await notificationApi.markAllRead()
+  ElMessage.success('全部标记为已读')
+  fetchList()
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(fetchList)
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- Search -->
+    <div class="search-bar">
+      <el-select v-model="searchForm.type" placeholder="通知类型" clearable style="width: 140px">
+        <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-select v-model="searchForm.is_read" placeholder="读取状态" clearable style="width: 130px">
+        <el-option label="未读" :value="0" />
+        <el-option label="已读" :value="1" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- Table -->
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleMarkAllRead">全部标记已读</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
+        <el-table-column prop="title" label="标题" min-width="180" />
+        <el-table-column prop="content" label="内容" min-width="260" show-overflow-tooltip />
+        <el-table-column label="类型" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeStyle[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <span class="read-dot" :class="row.is_read ? 'read' : 'unread'" />
+            <span>{{ row.is_read ? '已读' : '未读' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" min-width="160" />
+        <el-table-column label="操作" width="120" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="!row.is_read"
+              size="small"
+              type="primary"
+              link
+              @click="handleMarkRead(row)"
+            >标记已读</el-button>
+            <span v-else class="text-muted">-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.per_page"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.read-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.read-dot.unread {
+  background-color: #67c23a;
+}
+
+.read-dot.read {
+  background-color: #c0c4cc;
+}
+
+.text-muted {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+</style>
@@ -0,0 +1,176 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { reportExportApi } from '@/api/report.js'
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+const searchForm = reactive({ type: '', status: '' })
+const pagination = reactive({ page: 1, per_page: 20 })
+
+const formRef = ref(null)
+const form = reactive({ name: '', type: '', params: '' })
+const formRules = {
+  name: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
+}
+
+const typeOptions = [
+  { label: '经营概览', value: 'overview' },
+  { label: '营收报表', value: 'revenue' },
+  { label: '入住率报表', value: 'occupancy' },
+  { label: 'CRM转化报表', value: 'crm' }
+]
+
+const statusMap = { 0: '生成中', 1: '已完成', 2: '失败' }
+const statusType = { 0: 'warning', 1: 'success', 2: 'danger' }
+
+// ─── Methods ──────────────────────────────────────────────────────────────────
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await reportExportApi.getList({ ...searchForm, ...pagination })
+    tableData.value = res.data?.list || res.data?.data || []
+    total.value = res.data?.total || 0
+  } finally { loading.value = false }
+}
+
+function handleSearch() { pagination.page = 1; fetchList() }
+function handleReset() { Object.assign(searchForm, { type: '', status: '' }); handleSearch() }
+
+function handleAdd() {
+  Object.assign(form, { name: '', type: '', params: '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    submitLoading.value = true
+    try {
+      const payload = { ...form }
+      if (payload.params) {
+        try { payload.params = JSON.parse(payload.params) } catch { /* send as string */ }
+      }
+      await reportExportApi.create(payload)
+      ElMessage.success('导出任务已创建')
+      dialogVisible.value = false
+      fetchList()
+    } finally { submitLoading.value = false }
+  })
+}
+
+function handleDownload(row) {
+  if (row.file_path) {
+    window.open(row.file_path, '_blank')
+  }
+}
+
+function handlePageChange(val) { pagination.page = val; fetchList() }
+function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
+
+onMounted(fetchList)
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- Search -->
+    <div class="search-bar">
+      <el-input v-model="searchForm.type" placeholder="报表类型" style="width: 160px" clearable @keydown.enter="handleSearch" />
+      <el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 130px">
+        <el-option v-for="(v, k) in statusMap" :key="k" :label="v" :value="Number(k)" />
+      </el-select>
+      <el-button type="primary" @click="handleSearch">查询</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- Table -->
+    <div class="table-container">
+      <div class="table-actions">
+        <el-button type="primary" @click="handleAdd">新建导出</el-button>
+      </div>
+      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
+        <el-table-column prop="name" label="报表名称" min-width="160" />
+        <el-table-column prop="type" label="类型" min-width="120" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] || '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作人" min-width="100">
+          <template #default="{ row }">{{ row.operator?.name || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" min-width="160" />
+        <el-table-column label="操作" width="100" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.status === 1 && row.file_path"
+              size="small"
+              type="primary"
+              link
+              @click="handleDownload(row)"
+            >下载</el-button>
+            <span v-else class="text-muted">-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.per_page"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+
+    <!-- Create Dialog -->
+    <el-dialog v-model="dialogVisible" title="新建导出" width="550px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
+        <el-form-item label="报表名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入报表名称" />
+        </el-form-item>
+        <el-form-item label="报表类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择报表类型" style="width: 100%">
+            <el-option
+              v-for="opt in typeOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="参数">
+          <el-input
+            v-model="form.params"
+            type="textarea"
+            :rows="4"
+            placeholder="可选，JSON 格式参数"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.text-muted {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+</style>
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { reportApi } from '@/api/report.js'
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const loading = ref(false)
+
+const cards = ref([
+  { key: 'customer_count', title: '客户数', value: '--', unit: '位', color: '#E8A87C', bg: '#FBE8D5' },
+  { key: 'contract_amount', title: '合同金额', value: '--', unit: '元', color: '#67C23A', bg: '#E8F5E1' },
+  { key: 'total_rooms', title: '总房间数', value: '--', unit: '间', color: '#409EFF', bg: '#E0EFFF' },
+  { key: 'occupied_rooms', title: '入住房间数', value: '--', unit: '间', color: '#E6A23C', bg: '#FDF0D6' },
+  { key: 'today_revenue', title: '今日营收', value: '--', unit: '元', color: '#F56C6C', bg: '#FDE2E2' },
+  { key: 'month_revenue', title: '月度营收', value: '--', unit: '元', color: '#C97B5E', bg: '#F9E8E0' }
+])
+
+// ─── Methods ──────────────────────────────────────────────────────────────────
+
+async function fetchOverview() {
+  loading.value = true
+  try {
+    const res = await reportApi.overview()
+    const data = res.data || {}
+    cards.value.forEach(card => {
+      if (data[card.key] !== undefined && data[card.key] !== null) {
+        card.value = data[card.key]
+      }
+    })
+  } finally { loading.value = false }
+}
+
+onMounted(fetchOverview)
+</script>
+
+<template>
+  <div class="page-container" v-loading="loading">
+    <div class="section-title">经营概览</div>
+
+    <el-row :gutter="16" class="mt-16">
+      <el-col
+        v-for="card in cards"
+        :key="card.key"
+        :xs="24"
+        :sm="12"
+        :md="8"
+        :lg="8"
+        :xl="4"
+      >
+        <el-card shadow="hover" class="overview-card">
+          <div class="card-inner">
+            <div class="card-icon-wrap" :style="{ background: card.bg }">
+              <span class="card-icon-text" :style="{ color: card.color }">{{ card.title.charAt(0) }}</span>
+            </div>
+            <div class="card-info">
+              <div class="card-label">{{ card.title }}</div>
+              <div class="card-value">
+                <span class="card-number" :style="{ color: card.color }">{{ card.value }}</span>
+                <span class="card-unit">{{ card.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  padding-left: 8px;
+  border-left: 3px solid var(--color-primary);
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.overview-card {
+  margin-bottom: 16px;
+}
+
+.overview-card :deep(.el-card__body) {
+  padding: 20px;
+}
+
+.card-inner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.card-icon-wrap {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.card-icon-text {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.card-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.card-value {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.card-number {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.card-unit {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+</style>