From 63e17084039bdba0272d4a0b5909ed545f75dcbf Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Tue, 28 Oct 2025 17:28:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BC=9A=E8=AE=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=90=8E=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 management/src/App.vue                       |   5 +
 management/src/router/index.ts               |  11 +
 management/src/views/meeting/meetingView.vue | 615 +++++++++++++++++++
 3 files changed, 631 insertions(+)
 create mode 100644 management/src/views/meeting/meetingView.vue

diff --git a/management/src/App.vue b/management/src/App.vue
index b6439d86..d408547d 100644
--- a/management/src/App.vue
+++ b/management/src/App.vue
@@ -59,7 +59,12 @@
             <el-icon><Memo /></el-icon>
             <template #title>编辑科学研究</template>
           </el-menu-item>
+          <el-menu-item index="/meeting">
+            <el-icon><Memo /></el-icon>
+            <template #title>编辑会议</template>
+          </el-menu-item>
     </el-menu>
+
       </el-aside>
 
       <!-- 右侧主内容容器 -->
diff --git a/management/src/router/index.ts b/management/src/router/index.ts
index ccbe3541..38037e37 100644
--- a/management/src/router/index.ts
+++ b/management/src/router/index.ts
@@ -11,6 +11,7 @@ const CommunityView = () => import('../views/community/CommunityView.vue')
 const ResourceView = () => import('../views/resource/ResourceView.vue')
 const BaseOverview = ()=> import('../views/baseoverview/BaseOverView.vue')
 const DevProjectView = ()=> import('../views/devproject/devprojectView.vue')
+const MeetingView = ()=> import('../views/meeting/meetingView.vue')
 
 // 定义路由规则（现在 RouteRecordRaw 导入正确）
 const routes: RouteRecordRaw[] = [
@@ -96,6 +97,16 @@ const routes: RouteRecordRaw[] = [
             title: '编辑科学研究',
             requiresAuth: false
         }
+    },
+    {
+
+        path: '/meeting',
+        name: 'meeting',
+        component: MeetingView,
+        meta: {
+            title: '编辑会议',
+            requiresAuth: false
+        }
     }
 
 ]
diff --git a/management/src/views/meeting/meetingView.vue b/management/src/views/meeting/meetingView.vue
new file mode 100644
index 00000000..34bfe781
--- /dev/null
+++ b/management/src/views/meeting/meetingView.vue
@@ -0,0 +1,615 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
+
+      <div class="flex justify-between items-center mb-6">
+        <span class="text-2xl font-bold text-gray-700">会议管理列表</span>
+        <el-button type="primary" :icon="Plus" @click="handleAdd">新增会议</el-button>
+      </div>
+
+      <el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
+        <el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
+        <el-table-column label="会议封面" width="180">
+          <template #default="scope">
+            <el-image style="width: 120px; height: 70px; border-radius: 6px;" :src="scope.row.cover_url" :preview-src-list="[scope.row.cover_url]" fit="cover" :preview-teleported="true" hide-on-click-modal>
+              <template #error>
+                <div class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-500">无封面</div>
+              </template>
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="theme" label="会议主题" min-width="200" show-overflow-tooltip>
+          <template #default="scope">
+            <span class="font-semibold">{{ scope.row.theme }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subtitle" label="副标题" min-width="180" show-overflow-tooltip></el-table-column>
+        <el-table-column label="会议简介" min-width="250">
+          <template #default="scope">
+            <div class="content-preview" :title="scope.row.intro">
+              {{ scope.row.intro.length > 80 ? `${scope.row.intro.slice(0, 80)}...` : scope.row.intro }}
+            </div>
+            <el-button size="mini" type="text" class="mt-1 text-blue-600" @click="handleViewIntro(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="日程图" width="120">
+          <template #default="scope">
+            <el-image style="width: 80px; height: 40px; border-radius: 4px;" :src="scope.row.schedule_image_url" :preview-src-list="[scope.row.schedule_image_url]" fit="cover" v-if="scope.row.schedule_image_url">
+              <template #error>
+                <div class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-500 text-xs">加载失败</div>
+              </template>
+            </el-image>
+            <span class="text-gray-400 text-xs" v-else>无日程图</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="start_time" label="开始时间" width="180" sortable></el-table-column>
+        <el-table-column prop="end_time" label="结束时间" width="180" sortable></el-table-column>
+        <el-table-column prop="update_time" label="更新时间" width="180" sortable></el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <div class="action-buttons">
+              <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 简介详情对话框 -->
+      <el-dialog v-model="introDialogVisible" title="会议简介详情" :width="`800px`" :before-close="handleCloseDialog">
+        <h3 class="text-xl font-bold text-gray-800 mb-4">会议主题： {{ currentMeeting.theme }}</h3>
+        <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap" v-html="currentMeeting.intro || '当前会议暂无简介'">
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 分页组件 -->
+    <div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
+      <el-pagination class="custom-pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    </div>
+
+    <!-- 新增/编辑抽屉 -->
+    <el-drawer v-model="drawerVisible" :title="form.id ? '编辑会议' : '新增会议'" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
+      <div class="publish-form-container">
+        <div class="form-group title-group">
+          <label class="form-label required">会议主题</label>
+          <el-input v-model="form.theme" placeholder="请输入会议主题" clearable :disabled="isSubmitting" maxlength="255" />
+        </div>
+
+        <div class="form-group subtitle-group">
+          <label class="form-label">副标题</label>
+          <el-input v-model="form.subtitle" placeholder="请输入会议副标题（可选）" clearable :disabled="isSubmitting" maxlength="255" />
+        </div>
+
+        <div class="form-group cover-group">
+          <label class="form-label">会议封面</label>
+          <el-upload action="http://localhost:8080/api/upload/cover" name="image" :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" :on-error="handleCoverError" :disabled="isSubmitting">
+            <img v-if="form.cover_url" :src="form.cover_url" class="cover-preview" alt="封面"/>
+            <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+          <p class="text-xs text-gray-500 mt-2">支持JPG/PNG格式，大小不超过5MB</p>
+        </div>
+
+        <div class="form-group schedule-group">
+          <label class="form-label">日程图片</label>
+          <el-upload action="http://localhost:8080/api/upload/image" name="image" :show-file-list="false" :on-success="handleScheduleSuccess" :before-upload="beforeScheduleUpload" :on-error="handleScheduleError" :disabled="isSubmitting">
+            <img v-if="form.schedule_image_url" :src="form.schedule_image_url" class="schedule-preview" alt="日程图"/>
+            <el-icon v-else class="schedule-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+          <p class="text-xs text-gray-500 mt-2">支持JPG/PNG格式，大小不超过5MB（无日程图可不传）</p>
+        </div>
+
+        <div class="form-group time-group grid grid-cols-2 gap-4">
+          <div>
+            <label class="form-label required">开始时间</label>
+            <!-- 修复：添加 timezone="GMT+8" 明确指定东八区 -->
+            <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择会议开始时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT+8" />
+          </div>
+          <div>
+            <label class="form-label required">结束时间</label>
+            <!-- 修复：添加 timezone="GMT+8" 明确指定东八区 -->
+            <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择会议结束时间" :disabled="isSubmitting" value-format="YYYY-MM-DD HH:mm:ss" timezone="GMT+8" />
+          </div>
+        </div>
+
+        <div class="form-group intro-group">
+          <label class="form-label">会议简介</label>
+          <div ref="editorRef" class="quill-editor"></div>
+          <p class="text-xs text-gray-500 mt-2">支持Markdown格式，可输入长文本内容</p>
+        </div>
+      </div>
+
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="submitMeeting" :loading="isSubmitting">
+            {{ form.id ? '更新会议' : '创建会议' }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, nextTick } from 'vue';
+import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElUpload, ElDatePicker } from 'element-plus';
+import { Edit, Delete, Plus } from '@element-plus/icons-vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import type { UploadProps } from 'element-plus';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+
+// --- 类型定义（对齐meeting表结构）---
+interface Meeting {
+  id: number;
+  theme: string;
+  subtitle: string;
+  intro: string;
+  cover_url: string;
+  schedule_image_url: string;
+  start_time: string;
+  end_time: string;
+  create_time: string;
+  update_time: string;
+  is_delete: number;
+}
+
+interface ListMeetingReq {
+  page: number;
+  page_size: number;
+}
+
+// --- API 基地址 ---
+const API_BASE_URL = 'http://localhost:8080/api';
+
+// =================================================================
+//                      列表页相关状态与逻辑
+// =================================================================
+const loading = ref(true);
+const tableData = ref<Meeting[]>([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const introDialogVisible = ref(false);
+const currentMeeting = ref<Meeting>({
+  id: 0, theme: '', subtitle: '', intro: '', cover_url: '',
+  schedule_image_url: '', start_time: '', end_time: '',
+  create_time: '', update_time: '', is_delete: 0
+});
+
+// --- 获取会议列表（对齐GET /api/meetings 分页接口）---
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    // 构造请求体（POST请求通过body传递分页参数）
+    const reqData = {
+      page: currentPage.value,       // 对应分页页码
+      page_size: pageSize.value      // 对应每页条数
+    };
+
+    const response = await fetch(`${API_BASE_URL}/meetings/list`, {
+      method: 'POST',                // 改为POST方法
+      headers: {
+        'Content-Type': 'application/json'  // 明确JSON格式
+      },
+      body: JSON.stringify(reqData)   // 发送JSON格式的请求体
+    });
+
+    if (!response.ok) throw new Error(`请求失败！状态码：${response.status}`);
+    const data = await response.json();
+    tableData.value = data.meetings || [];  // 假设响应体中会议列表字段为meetings
+    total.value = data.total || 0;          // 假设响应体中总条数字段为total
+  } catch (error) {
+    console.error('[ERROR] 获取会议列表失败：', error);
+    ElMessage.error('获取会议列表失败，请检查接口或网络！');
+  } finally {
+    loading.value = false;  // 无论成功失败，都关闭加载状态
+  }
+};
+
+onMounted(fetchData);
+
+// --- 查看简介详情 ---
+const handleViewIntro = (row: Meeting) => {
+  currentMeeting.value = { ...row };
+  introDialogVisible.value = true;
+};
+
+const handleCloseDialog = () => {
+  introDialogVisible.value = false;
+};
+
+// --- 删除会议 ---
+const handleDelete = (row: Meeting) => {
+  ElMessageBox.confirm(`确定要删除会议《${row.theme}》吗？此操作无法撤销！`, '警告', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(async () => {
+        try {
+          const response = await fetch(`${API_BASE_URL}/meetings/${row.id}`, {
+            method: 'DELETE',
+          });
+
+          if (!response.ok) {
+            const errData = await response.json().catch(() => null);
+            throw new Error(errData?.message || '删除失败');
+          }
+
+          ElMessage.success('删除成功！');
+          fetchData();
+        } catch (error) {
+          console.error('[ERROR] 删除会议失败：', error);
+          ElMessage.error(`删除会议失败: ${(error as Error).message}`);
+        }
+      })
+      .catch(() => {
+        ElMessage.info('已取消删除');
+      });
+};
+
+// --- 分页事件 ---
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  fetchData();
+};
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  fetchData();
+};
+
+// =================================================================
+//                      抽屉新增/编辑相关状态与逻辑
+// =================================================================
+const drawerVisible = ref(false);
+const isSubmitting = ref(false);
+
+// --- 表单默认值（对齐meeting表字段）---
+const defaultFormState = () => ({
+  id: null as number | null,
+  theme: '',
+  subtitle: '',
+  cover_url: '',
+  schedule_image_url: '',
+  start_time: '',
+  end_time: '',
+  intro: '', // 对应富文本内容
+});
+const form = ref(defaultFormState());
+
+// --- 富文本编辑器（用于会议简介）---
+const editorRef = ref<HTMLDivElement | null>(null);
+let quillInstance: Quill | null = null;
+
+const initQuillEditor = () => {
+  if (editorRef.value && !quillInstance) {
+    quillInstance = new Quill(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: [
+            ['bold', 'italic', 'underline'],
+            ['link', 'image'],
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }]
+          ],
+          handlers: {
+            image: handleEditorImageUpload,
+          }
+        }
+      },
+      placeholder: '请输入会议简介（支持Markdown格式）...'
+    });
+
+    // 编辑时回显内容
+    if (form.value.intro) {
+      quillInstance.root.innerHTML = form.value.intro;
+    }
+
+    // 监听内容变化
+    quillInstance.on('text-change', (_, __, source) => {
+      if (source === 'user') {
+        form.value.intro = quillInstance?.root.innerHTML || '';
+      }
+    });
+  }
+};
+
+// --- 监听抽屉显示/隐藏 ---
+watch(drawerVisible, (visible) => {
+  if (visible) {
+    nextTick(() => {
+      initQuillEditor();
+    });
+  } else {
+    // 关闭时重置编辑器和表单
+    quillInstance = null;
+    form.value = defaultFormState();
+  }
+});
+
+// --- 新增会议 ---
+const handleAdd = () => {
+  form.value = defaultFormState();
+  drawerVisible.value = true;
+};
+
+// --- 编辑会议 ---
+const handleEdit = (row: Meeting) => {
+  form.value = {
+    id: row.id,
+    theme: row.theme,
+    subtitle: row.subtitle,
+    cover_url: row.cover_url,
+    schedule_image_url: row.schedule_image_url,
+    start_time: row.start_time,
+    end_time: row.end_time,
+    intro: row.intro,
+  };
+  drawerVisible.value = true;
+};
+
+const handleDrawerClose = () => {
+  drawerVisible.value = false;
+};
+
+// --- 提交会议（新增/更新）---
+const submitMeeting = async () => {
+  // 表单校验
+  if (!form.value.theme.trim()) {
+    ElMessage.warning('请输入会议主题');
+    return;
+  }
+  if (!form.value.start_time) {
+    ElMessage.warning('请选择会议开始时间');
+    return;
+  }
+  if (!form.value.end_time) {
+    ElMessage.warning('请选择会议结束时间');
+    return;
+  }
+  // 修复：使用日期对象直接比较，避免字符串格式问题
+  const startTime = new Date(form.value.start_time);
+  const endTime = new Date(form.value.end_time);
+  if (endTime < startTime) {
+    ElMessage.warning('结束时间不能早于开始时间');
+    return;
+  }
+
+  isSubmitting.value = true;
+  const submitData = {
+    theme: form.value.theme.trim(),
+    subtitle: form.value.subtitle.trim(),
+    intro: form.value.intro || '',
+    cover_url: form.value.cover_url || '',
+    schedule_image_url: form.value.schedule_image_url || '',
+    start_time: form.value.start_time,
+    end_time: form.value.end_time,
+  };
+
+  try {
+    let url = `${API_BASE_URL}/meetings`;
+    let method = 'POST';
+
+    // 编辑模式：添加ID参数
+    if (form.value.id) {
+      submitData['id'] = form.value.id;
+      method = 'PUT';
+    }
+
+    const response = await fetch(url, {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(submitData),
+    });
+
+    if (!response.ok) {
+      const errData = await response.json().catch(() => null);
+      throw new Error(errData?.message || (form.value.id ? '更新失败' : '创建失败'));
+    }
+
+    ElMessage.success(form.value.id ? '会议更新成功！' : '会议创建成功！');
+    drawerVisible.value = false;
+    fetchData();
+  } catch (error) {
+    const err = error as Error;
+    ElMessage.error(`${form.value.id ? '更新' : '创建'}失败: ${err.message}`);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+// =================================================================
+//                      上传相关逻辑
+// =================================================================
+// --- 封面上传 ---
+const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    form.value.cover_url = ossUrl;
+    ElMessage.success('封面上传成功');
+  } else {
+    ElMessage.error('封面上传失败');
+  }
+};
+
+const beforeCoverUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const isImage = rawFile.type.startsWith('image/');
+  if (!isImage) {
+    ElMessage.error('请上传图片文件！');
+    return false;
+  }
+  const isLt5M = rawFile.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB!');
+  }
+  return isImage && isLt5M;
+};
+
+const handleCoverError = () => {
+  ElMessage.error('封面上传失败');
+};
+
+// --- 日程图上传 ---
+const handleScheduleSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    form.value.schedule_image_url = ossUrl;
+    ElMessage.success('日程图上传成功');
+  } else {
+    ElMessage.error('日程图上传失败');
+  }
+};
+
+const beforeScheduleUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const isImage = rawFile.type.startsWith('image/');
+  if (!isImage) {
+    ElMessage.error('请上传图片文件！');
+    return false;
+  }
+  const isLt5M = rawFile.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB!');
+  }
+  return isImage && isLt5M;
+};
+
+const handleScheduleError = () => {
+  ElMessage.error('日程图上传失败');
+};
+
+// --- 编辑器图片上传（简介中插入图片）---
+function handleEditorImageUpload() {
+  const fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+
+  fileInput.onchange = () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+
+    const selection = quillInstance?.getSelection();
+    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;
+    uploadEditorImage(file, insertIndex);
+    fileInput.value = '';
+  };
+
+  fileInput.click();
+}
+
+async function uploadEditorImage(file: File, insertIndex: number) {
+  if (!quillInstance) return;
+
+  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#999', italic: true });
+
+  try {
+    const formData = new FormData();
+    formData.append('image', file);
+
+    const response = await fetch(`${API_BASE_URL}/upload/image`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error(`HTTP状态码：${response.status}`);
+    const result = await response.json();
+    const imageUrl = result.data?.url;
+
+    if (!imageUrl) throw new Error('未从响应中获取到图片地址');
+
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);
+    quillInstance.setSelection(insertIndex + 1);
+    form.value.intro = quillInstance.root.innerHTML;
+
+  } catch (err) {
+    const errMsg = err instanceof Error ? err.message : '未知错误';
+    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
+    quillInstance.insertText(insertIndex, `[图片上传失败：${errMsg}]`, { color: '#f56c6c', italic: true });
+    ElMessage.error(`编辑器图片上传失败：${errMsg}`);
+  }
+}
+
+// --- 粘贴图片处理 ---
+function getPastedBase64Image(delta: any): string | null {
+  if (!delta?.ops) return null;
+  for (const op of delta.ops) {
+    if (
+        op.insert &&
+        typeof op.insert === 'object' &&
+        op.insert.image &&
+        op.insert.image.startsWith('data:image')
+    ) {
+      return op.insert.image;
+    }
+  }
+  return null;
+}
+
+function base64ToBlob(base64: string): Blob | null {
+  try {
+    const [prefix, data] = base64.split(',');
+    if (!prefix || !data) throw new Error('base64格式错误');
+
+    const mimeMatch = prefix.match(/data:(.*?);/);
+    if (!mimeMatch) throw new Error('无法解析图片类型');
+    const mime = mimeMatch[1];
+
+    const binaryData = atob(data);
+    const bytes = new Uint8Array(binaryData.length);
+    for (let i = 0; i < binaryData.length; i++) {
+      bytes[i] = binaryData.charCodeAt(i);
+    }
+
+    return new Blob([bytes], { type: mime });
+  } catch (error) {
+    console.error('base64转Blob失败：', error);
+    ElMessage.error('解析粘贴的图片失败！');
+    return null;
+  }
+}
+</script>
+
+<style scoped>
+/* 基础样式复用，调整适配会议组件 */
+.el-table .el-table__cell { vertical-align: middle; }
+.el-table__header-wrapper th { background-color: #fafafa !important; font-weight: 600; color: #333; }
+.action-buttons .el-button { margin-right: 8px; }
+.content-preview { color: #666; line-height: 1.5; word-break: break-all; }
+.content-full { min-height: 300px; padding: 20px; background-color: #f9fafb; border-radius: 8px; }
+.el-dialog__title { font-size: 18px !important; font-weight: 600 !important; }
+
+/* 分页器样式 */
+.custom-pagination { justify-content: flex-end !important; }
+.custom-pagination .el-pagination__total,
+.custom-pagination .el-pagination__sizes,
+.custom-pagination .el-pagination__jump { margin-right: 16px !important; }
+.custom-pagination .el-pagination__jump .el-input { width: 60px !important; }
+
+/* 抽屉内表单样式 */
+.publish-form-container { padding: 0 20px; }
+.form-group { margin-bottom: 24px; }
+.form-label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; }
+.form-label.required::after { content: '*'; color: #f56c6c; margin-left: 4px; }
+.grid { display: grid; }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.gap-4 { gap: 16px; }
+
+/* 富文本编辑器 */
+.quill-editor { height: 300px; border-radius: 4px; border: 1px solid #dcdfe6; }
+
+/* 封面上传 */
+.cover-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; line-height: 178px; }
+.cover-preview { width: 178px; height: 178px; display: block; object-fit: cover; border-radius: 6px; }
+
+/* 日程图上传 */
+.schedule-uploader-icon { font-size: 24px; color: #8c939d; width: 120px; height: 80px; text-align: center; line-height: 80px; }
+.schedule-preview { width: 120px; height: 80px; display: block; object-fit: cover; border-radius: 6px; }
+
+/* 日期选择器 */
+.el-date-picker { width: 100%; }
+</style>
\ No newline at end of file