pap_web/view/admin/content/article_index.html

{% extends "../layout.html" %}

{% block title %}{{ columnInfo.name if columnInfo else '图文列表' }}{% endblock %}

{% block css %}
<!-- WangEditor CSS -->
<link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
/* 全屏弹窗 */
.fullscreen-dialog .el-dialog { margin: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; }
.fullscreen-dialog .el-dialog__body { height: calc(100vh - 120px); padding: 0 20px; overflow: hidden; }
.fullscreen-dialog .el-dialog__header { border-bottom: 1px solid #eee; }

/* 编辑器布局 */
.editor-layout { display: flex; gap: 20px; height: 100%; }
.editor-main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 0; }
.editor-side { width: 320px; flex-shrink: 0; overflow-y: auto; padding: 20px 0; }

/* 侧边区块 */
.side-section { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.side-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }

/* 封面上传 */
.cover-upload { width: 100%; aspect-ratio: 16/9; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafafa; transition: .2s; }
.cover-upload:hover { border-color: #ff7800; background: #fff7f0; }
.cover-upload img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #bbb; font-size: 12px; }

/* 富文本编辑器 */
.editor-container { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.editor-toolbar { border-bottom: 1px solid #ddd !important; }
.editor-content { height: 400px; overflow-y: auto; }

/* 列表缩略图 */
.thumb { width: 60px; height: 40px; border-radius: 4px; overflow: hidden; background: #f5f5f5; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
</style>
{% endblock %}

{% block content %}
<div id="articleApp">
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="font-medium">{{ columnInfo.name if columnInfo else '图文列表' }}</span>
          <el-tag type="primary" size="small">图文列表</el-tag>
        </div>
        <el-button type="primary" @click="openDialog()">+ 新增文章</el-button>
      </div>
    </template>

    <!-- 筛选栏 -->
    <div class="flex items-center gap-4 mb-4">
      <el-input v-model="query.keyword" placeholder="搜索标题..." style="width:200px;" clearable @keyup.enter="loadList"></el-input>
      <el-select v-model="query.status" placeholder="状态" style="width:100px;" clearable>
        <el-option label="已发布" :value="1"></el-option>
        <el-option label="待审核" :value="2"></el-option>
        <el-option label="草稿" :value="0"></el-option>
      </el-select>
      <el-button type="primary" @click="loadList">搜索</el-button>
      <el-button @click="resetQuery" class="ml-2">重置</el-button>
    </div>

    <!-- 信息栏 -->
    <div class="flex items-center gap-3 mb-3 text-sm text-gray-500">
      <span>已选择 <b class="text-orange-500">${ selectedIds.length }</b> 项，共 <b class="text-orange-500">${ total }</b> 条记录</span>
      <div class="flex-1"></div>
      <el-button size="small" :disabled="!selectedIds.length" @click="batchDelete">批量删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="list" v-loading="loading" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column prop="title" label="标题" min-width="300"></el-table-column>
      <el-table-column prop="category" label="分类" width="100"></el-table-column>
      <el-table-column label="封面图" width="80">
        <template #default="{ row }">
          <div class="thumb" v-if="row.cover"><img :src="row.cover" alt=""></div>
          <span v-else class="text-gray-300">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="statusMap[row.status]?.type" size="small">${ statusMap[row.status]?.text }</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_top" label="置顶" width="70">
        <template #default="{ row }">
          <el-tag :type="row.is_top ? 'primary' : 'info'" size="small">${ row.is_top ? '是' : '否' }</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publish_time" label="发布时间" width="140">
        <template #default="{ row }">${ row.publish_time?.slice(0,16) || '-' }</template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="openDialog(row)">编辑</el-button>
          <el-button type="primary" link size="small" @click="previewArticle(row)">查看</el-button>
          <el-button type="danger" link size="small" @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex justify-end mt-4" v-if="total > pageSize">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="page" @current-change="loadList"></el-pagination>
    </div>
  </el-card>

  <!-- 全屏编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" fullscreen class="fullscreen-dialog" destroy-on-close :close-on-click-modal="false">
    <div class="editor-layout">
      <!-- 左侧主区域 -->
      <div class="editor-main">
        <el-form :model="form" label-position="top">
          <el-form-item label="文章标题" required>
            <el-input v-model="form.title" placeholder="请输入文章标题" size="large"></el-input>
          </el-form-item>
          <el-form-item label="文章摘要">
            <el-input v-model="form.summary" type="textarea" :rows="3" placeholder="请输入文章摘要（选填，不填则自动截取正文前200字）"></el-input>
          </el-form-item>
          <el-form-item label="文章正文" required>
            <div class="editor-container">
              <div id="toolbar-container" class="editor-toolbar"></div>
              <div id="editor-container" class="editor-content"></div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 右侧属性区 -->
      <div class="editor-side">
        <div class="side-section">
          <div class="side-title">发布设置</div>
          <el-form :model="form" label-position="top" size="default">
            <el-form-item label="分类">
              <el-select v-model="form.category" placeholder="选择分类" style="width:100%;" filterable allow-create :teleported="false">
                <el-option v-for="c in categoryOptions" :key="c" :label="c" :value="c"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.status" style="width:100%;" :teleported="false">
                <el-option label="草稿" :value="0"></el-option>
                <el-option label="待审核" :value="2"></el-option>
                <el-option label="已发布" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker v-model="form.publish_time" type="datetime" placeholder="选择发布时间" style="width:100%;" value-format="YYYY-MM-DD HH:mm:ss" :teleported="false"></el-date-picker>
            </el-form-item>
            <el-form-item label="排序权重">
              <el-input-number v-model="form.sort" :min="0" style="width:100%;"></el-input-number>
            </el-form-item>
            <div class="flex gap-6">
              <el-checkbox v-model="form.is_top" :true-value="1" :false-value="0">置顶</el-checkbox>
              <el-checkbox v-model="form.is_recommend" :true-value="1" :false-value="0">推荐到首页</el-checkbox>
            </div>
          </el-form>
        </div>

        <div class="side-section">
          <div class="side-title">封面图</div>
          <div class="cover-upload" @click="triggerCoverUpload">
            <img v-if="form.cover" :src="form.cover" alt="封面图">
            <div v-else class="cover-placeholder">
              <el-icon :size="32"><Plus /></el-icon>
              <span>点击上传封面图</span>
            </div>
          </div>
          <input type="file" ref="coverInput" accept="image/*" style="display:none;" @change="handleCoverUpload">
          <el-button v-if="form.cover" size="small" class="mt-2 w-full" @click="form.cover = ''">移除封面</el-button>
        </div>

        <div class="side-section">
          <div class="side-title">SEO 设置</div>
          <el-form :model="form" label-position="top" size="default">
            <el-form-item label="SEO 标题">
              <el-input v-model="form.seo_title" placeholder="留空则使用文章标题"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="form.seo_keywords" placeholder="多个关键词用逗号分隔"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.seo_description" type="textarea" :rows="2" placeholder="留空则使用文章摘要"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="flex justify-between">
        <el-button @click="dialogVisible = false">返回</el-button>
        <div class="flex gap-2">
          <el-button @click="saveAsDraft" :loading="saving">保存草稿</el-button>
          <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</div>
{% endblock %}

{% block js %}
<!-- WangEditor JS -->
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const col = '{{ col }}';
const { createApp, ref, reactive, onMounted, onBeforeUnmount, nextTick } = Vue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(20);
    const query = reactive({ keyword: '', status: '' });
    const selectedIds = ref([]);

    const dialogVisible = ref(false);
    const dialogTitle = ref('新增文章');
    const saving = ref(false);
    const coverInput = ref(null);

    let editor = null;

    const categoryOptions = ['基金会动态', '行业资讯', '通知公告', '公益项目', '党建活动', '党建学习'];
    const statusMap = {
      1: { type: 'success', text: '已发布' },
      2: { type: 'warning', text: '待审核' },
      0: { type: 'info', text: '草稿' }
    };

    const defaultForm = {
      id: null, title: '', summary: '', content: '', cover: '', category: '',
      is_top: 0, is_recommend: 0, sort: 0, status: 0, publish_time: '',
      seo_title: '', seo_keywords: '', seo_description: ''
    };
    const form = reactive({ ...defaultForm });

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({ col, page: page.value, pageSize: pageSize.value, ...query });
        const res = await fetch('/admin/content/article/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
        }
      } finally { loading.value = false; }
    }

    function resetQuery() {
      query.keyword = '';
      query.status = '';
      page.value = 1;
      loadList();
    }

    function handleSelectionChange(rows) {
      selectedIds.value = rows.map(r => r.id);
    }

    async function openDialog(item) {
      if (item) {
        dialogTitle.value = '编辑文章';
        // 获取完整内容
        const res = await fetch('/admin/content/article/detail?id=' + item.id).then(r => r.json());
        if (res.code === 0 && res.data) {
          const data = res.data;
          Object.assign(form, {
            id: data.id, title: data.title, summary: data.summary || '', content: data.content || '',
            cover: data.cover || '', category: data.category || '', is_top: data.is_top,
            is_recommend: data.is_recommend, sort: data.sort || 0, status: data.status,
            publish_time: data.publish_time || '', seo_title: data.seo_title || '',
            seo_keywords: data.seo_keywords || '', seo_description: data.seo_description || ''
          });
        }
      } else {
        dialogTitle.value = '新增文章';
        Object.assign(form, { ...defaultForm });
      }
      dialogVisible.value = true;
      nextTick(() => initEditor());
    }

    function initEditor() {
      if (editor) {
        editor.destroy();
        editor = null;
      }
      const { createEditor, createToolbar } = window.wangEditor;
      editor = createEditor({
        selector: '#editor-container',
        html: form.content || '<p></p>',
        config: {
          placeholder: '请输入文章正文...',
          onChange(ed) {
            form.content = ed.getHtml();
          },
          MENU_CONF: {
            uploadImage: {
              async customUpload(file, insertFn) {
                const formData = new FormData();
                formData.append('file', file);
                try {
                  const res = await fetch('/admin/upload', { method: 'POST', body: formData }).then(r => r.json());
                  if (res.code === 0) {
                    insertFn(res.data.url, file.name, res.data.url);
                  } else {
                    ElementPlus.ElMessage.error(res.msg || '上传失败');
                  }
                } catch (e) {
                  ElementPlus.ElMessage.error('上传失败');
                }
              }
            }
          }
        }
      });
      createToolbar({
        editor,
        selector: '#toolbar-container',
        config: {}
      });
    }

    function triggerCoverUpload() {
      coverInput.value?.click();
    }

    async function handleCoverUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const formData = new FormData();
      formData.append('file', file);
      try {
        const res = await fetch('/admin/upload', { method: 'POST', body: formData }).then(r => r.json());
        if (res.code === 0) {
          form.cover = res.data.url;
          ElementPlus.ElMessage.success('上传成功');
        } else {
          ElementPlus.ElMessage.error(res.msg || '上传失败');
        }
      } catch (err) {
        ElementPlus.ElMessage.error('上传失败');
      }
      e.target.value = '';
    }

    async function saveAsDraft() {
      form.status = 0;
      await doSave();
    }

    async function saveItem() {
      await doSave();
    }

    async function doSave() {
      if (!form.title.trim()) { ElementPlus.ElMessage.warning('请输入文章标题'); return; }
      saving.value = true;
      try {
        const url = form.id ? '/admin/content/article/edit' : '/admin/content/article/add';
        const body = { ...form, col };
        const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          if (editor) { editor.destroy(); editor = null; }
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function deleteItem(item) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除"' + item.title + '"？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/article/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: item.id }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    async function batchDelete() {
      if (!selectedIds.value.length) return;
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除选中的 ' + selectedIds.value.length + ' 条记录？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/article/batchDelete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: selectedIds.value }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    function previewArticle(row) {
      // 可以打开新窗口预览
      ElementPlus.ElMessage.info('预览功能待实现');
    }

    onMounted(() => loadList());

    onBeforeUnmount(() => {
      if (editor) { editor.destroy(); editor = null; }
    });

    return {
      loading, list, total, page, pageSize, query, selectedIds,
      dialogVisible, dialogTitle, saving, form, coverInput,
      categoryOptions, statusMap,
      loadList, resetQuery, handleSelectionChange, openDialog,
      triggerCoverUpload, handleCoverUpload, saveAsDraft, saveItem,
      deleteItem, batchDelete, previewArticle
    };
  }
});

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#articleApp');
</script>
{% endblock %}