Add WeChat draft publishing

ruoyi-ui/src/api/office/wechat.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function listWechatAccounts(query) {
+  return request({ url: '/office/wechat/account/list', method: 'get', params: query })
+}
+
+export function listEnabledWechatAccounts() {
+  return request({ url: '/office/wechat/account/enabled', method: 'get' })
+}
+
+export function getWechatAccount(accountId) {
+  return request({ url: '/office/wechat/account/' + accountId, method: 'get' })
+}
+
+export function addWechatAccount(data) {
+  return request({ url: '/office/wechat/account', method: 'post', data })
+}
+
+export function updateWechatAccount(data) {
+  return request({ url: '/office/wechat/account', method: 'put', data })
+}
+
+export function deleteWechatAccount(accountIds) {
+  return request({ url: '/office/wechat/account/' + accountIds, method: 'delete' })
+}
+
+export function testWechatAccount(accountId) {
+  return request({ url: '/office/wechat/account/' + accountId + '/test', method: 'post', timeout: 30000 })
+}
+
+export function previewWechatDraft(data) {
+  return request({ url: '/office/wechat/draft/preview', method: 'post', data, timeout: 30000 })
+}
+
+export function pushWechatDraft(data) {
+  return request({ url: '/office/wechat/draft', method: 'post', data, timeout: 180000 })
+}
+
+export function listWechatDrafts(query) {
+  return request({ url: '/office/wechat/draft/list', method: 'get', params: query })
+}
+
+export function retryWechatDraft(articleId) {
+  return request({ url: '/office/wechat/draft/' + articleId + '/retry', method: 'post', timeout: 180000 })
+}

ruoyi-ui/src/views/office/code/index.vue

@@ -146,6 +146,14 @@
             v-hasPermi="['office:code:edit']"
           >同步网站
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-chat-dot-round"
+            @click="handleWechatDraft(scope.row)"
+            v-hasPermi="['office:wechat:draft:push']"
+          >公众号草稿
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -367,6 +375,86 @@
       </div>
     </el-dialog>
 
+    <!-- 公众号草稿预览 -->
+    <el-dialog
+      title="推送公众号草稿"
+      :visible.sync="wechatDraftOpen"
+      width="94%"
+      custom-class="wechat-draft-dialog"
+      append-to-body
+    >
+      <div v-loading="wechatDraftLoading">
+        <el-form :model="wechatDraftForm" label-width="90px" size="small">
+          <el-row :gutter="16">
+            <el-col :span="6">
+              <el-form-item label="公众号" required>
+                <el-select v-model="wechatDraftForm.accountId" style="width:100%" placeholder="请选择账号" @change="handleWechatAccountChange">
+                  <el-option v-for="item in wechatAccounts" :key="item.accountId" :label="item.accountName" :value="item.accountId" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="文案模板" required>
+                <el-select v-model="wechatDraftForm.templateId" style="width:100%" @change="handleWechatTemplateChange">
+                  <el-option v-for="tpl in copyTemplates" :key="tpl.templateId" :label="tpl.templateName" :value="tpl.templateId" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="排版主题">
+                <el-radio-group v-model="wechatDraftForm.themeName" size="small" @change="refreshWechatPreview">
+                  <el-radio-button label="default">经典</el-radio-button>
+                  <el-radio-button label="grace">优雅</el-radio-button>
+                  <el-radio-button label="simple">简洁</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="主题色">
+                <el-color-picker v-model="wechatDraftForm.themeColor" @change="refreshWechatPreview" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="16">
+            <el-col :span="10"><el-form-item label="标题" required><el-input v-model="wechatDraftForm.title" maxlength="32" show-word-limit /></el-form-item></el-col>
+            <el-col :span="6"><el-form-item label="作者"><el-input v-model="wechatDraftForm.author" maxlength="16" show-word-limit /></el-form-item></el-col>
+            <el-col :span="8">
+              <el-form-item label="字号">
+                <el-radio-group v-model="wechatDraftForm.fontSize" size="small" @change="refreshWechatPreview">
+                  <el-radio-button :label="14" title="14px">更小</el-radio-button>
+                  <el-radio-button :label="15" title="15px">稍小</el-radio-button>
+                  <el-radio-button :label="16" title="16px">推荐</el-radio-button>
+                  <el-radio-button :label="17" title="17px">稍大</el-radio-button>
+                  <el-radio-button :label="18" title="18px">更大</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="摘要"><el-input v-model="wechatDraftForm.digest" maxlength="120" show-word-limit placeholder="默认留空，由微信生成摘要" /></el-form-item>
+          <el-form-item label="阅读原文"><el-input v-model="wechatDraftForm.contentSourceUrl" /></el-form-item>
+          <el-form-item label="评论">
+            <el-switch v-model="wechatDraftForm.needOpenComment" :active-value="1" :inactive-value="0" active-text="开启评论" />
+            <el-switch v-model="wechatDraftForm.onlyFansCanComment" :active-value="1" :inactive-value="0" active-text="仅粉丝" style="margin-left:20px" />
+          </el-form-item>
+        </el-form>
+        <div class="wechat-draft-editor">
+          <div class="wechat-draft-pane">
+            <div class="wechat-draft-pane-title">Markdown</div>
+            <el-input v-model="wechatDraftForm.contentMarkdown" type="textarea" resize="none" class="wechat-markdown-input" />
+          </div>
+          <div class="wechat-draft-pane">
+            <div class="wechat-draft-pane-title">公众号预览</div>
+            <div class="wechat-html-preview" v-html="wechatDraftForm.contentHtml" />
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button icon="el-icon-refresh" @click="refreshWechatPreview">刷新预览</el-button>
+        <el-button type="primary" :loading="wechatDraftPushing" @click="submitWechatDraft">推送到草稿箱</el-button>
+        <el-button @click="wechatDraftOpen = false">取消</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 封面预览对话框 -->
     <el-dialog :title="'封面预览'" :visible.sync="coverDialogVisible" width="500px" append-to-body>
       <el-form label-width="80px">
@@ -404,6 +492,7 @@
   import {html2Text} from "../../../utils";
   import {getToken} from "@/utils/auth";
   import {blobValidate} from "@/utils/ruoyi";
+  import {listEnabledWechatAccounts, previewWechatDraft, pushWechatDraft} from "@/api/office/wechat";
 
   export default {
     name: "Code",
@@ -476,12 +565,19 @@
         // 正在同步网站的源码ID，防止重复点击
         syncingCodeId: null,
         // 是否正在打包下载项目截图
-        downloadingScreenshots: false
+        downloadingScreenshots: false,
+        // 公众号草稿
+        wechatAccounts: [],
+        wechatDraftOpen: false,
+        wechatDraftLoading: false,
+        wechatDraftPushing: false,
+        wechatDraftForm: {}
       };
     },
     created() {
       this.getList();
       this.loadCopyTemplates();
+      this.loadWechatAccounts();
     },
     beforeDestroy() {
       if (this.copywritingCopyTimer) {
@@ -884,6 +980,87 @@
           this.syncingCodeId = null;
         });
       },
+      loadWechatAccounts() {
+        listEnabledWechatAccounts().then(response => {
+          this.wechatAccounts = response.data || [];
+        }).catch(() => {
+          this.wechatAccounts = [];
+        });
+      },
+      handleWechatDraft(row) {
+        if (!this.wechatAccounts.length) {
+          this.$modal.msgError('请先在“公众号草稿”菜单配置并启用公众号账号');
+          return;
+        }
+        const preferredTemplate = this.copyTemplates.find(tpl => (tpl.templateGroup || '').indexOf('公众号') >= 0)
+          || this.copyTemplates.find(tpl => tpl.templateName === '南音')
+          || this.copyTemplates[0];
+        if (!preferredTemplate) {
+          this.$modal.msgError('请先配置启用的源码文案模板');
+          return;
+        }
+        this.wechatDraftForm = {
+          accountId: this.wechatAccounts[0].accountId,
+          codeId: row.codeId,
+          templateId: preferredTemplate.templateId,
+          requestNo: '',
+          title: '',
+          author: '',
+          digest: '',
+          contentMarkdown: '',
+          contentHtml: '',
+          contentSourceUrl: '',
+          themeName: 'default',
+          themeColor: '#07c160',
+          fontSize: 16,
+          showCoverPic: 0,
+          needOpenComment: null,
+          onlyFansCanComment: null
+        };
+        this.wechatDraftOpen = true;
+        this.refreshWechatPreview();
+      },
+      refreshWechatPreview() {
+        if (!this.wechatDraftForm.codeId || !this.wechatDraftForm.templateId) return;
+        this.wechatDraftLoading = true;
+        previewWechatDraft(this.wechatDraftForm).then(response => {
+          const preview = response.data || {};
+          this.wechatDraftForm = Object.assign({}, this.wechatDraftForm, preview);
+        }).finally(() => {
+          this.wechatDraftLoading = false;
+        });
+      },
+      handleWechatAccountChange() {
+        this.wechatDraftForm.author = '';
+        this.wechatDraftForm.contentSourceUrl = '';
+        this.wechatDraftForm.needOpenComment = null;
+        this.wechatDraftForm.onlyFansCanComment = null;
+        this.refreshWechatPreview();
+      },
+      handleWechatTemplateChange() {
+        this.wechatDraftForm.title = '';
+        this.wechatDraftForm.digest = '';
+        this.wechatDraftForm.contentMarkdown = '';
+        this.wechatDraftForm.contentHtml = '';
+        this.refreshWechatPreview();
+      },
+      submitWechatDraft() {
+        if (!this.wechatDraftForm.accountId) {
+          this.$modal.msgError('请选择公众号账号');
+          return;
+        }
+        if (!this.wechatDraftForm.title || !this.wechatDraftForm.contentMarkdown) {
+          this.$modal.msgError('标题和正文不能为空');
+          return;
+        }
+        this.wechatDraftPushing = true;
+        pushWechatDraft(this.wechatDraftForm).then(response => {
+          this.$modal.msgSuccess(response.msg || '已推送到公众号草稿箱');
+          this.wechatDraftOpen = false;
+        }).finally(() => {
+          this.wechatDraftPushing = false;
+        });
+      },
       /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
@@ -1094,6 +1271,53 @@
     color: #606266;
   }
 
+  .wechat-draft-editor {
+    display: flex;
+    height: 56vh;
+    min-height: 460px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .wechat-draft-pane {
+    display: flex;
+    width: 50%;
+    min-width: 0;
+    flex-direction: column;
+  }
+
+  .wechat-draft-pane + .wechat-draft-pane {
+    border-left: 1px solid #dcdfe6;
+  }
+
+  .wechat-draft-pane-title {
+    padding: 10px 14px;
+    border-bottom: 1px solid #ebeef5;
+    background: #f5f7fa;
+    color: #303133;
+    font-weight: 600;
+  }
+
+  .wechat-markdown-input,
+  .wechat-markdown-input ::v-deep .el-textarea__inner {
+    height: 100%;
+  }
+
+  .wechat-markdown-input ::v-deep .el-textarea__inner {
+    border: 0;
+    border-radius: 0;
+    font-family: Consolas, "Courier New", monospace;
+    line-height: 1.65;
+  }
+
+  .wechat-html-preview {
+    flex: 1;
+    padding: 18px 28px;
+    overflow-y: auto;
+    background: #fff;
+  }
+
   @media (max-width: 768px) {
     .copywriting-layout {
       height: 68vh;
@@ -1117,5 +1341,20 @@
       gap: 12px;
       flex-direction: column;
     }
+
+    .wechat-draft-editor {
+      height: auto;
+      flex-direction: column;
+    }
+
+    .wechat-draft-pane {
+      width: 100%;
+      min-height: 360px;
+    }
+
+    .wechat-draft-pane + .wechat-draft-pane {
+      border-top: 1px solid #dcdfe6;
+      border-left: 0;
+    }
   }
 </style>

ruoyi-ui/src/views/office/wechat/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="公众号账号" name="accounts">
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['office:wechat:account:add']">新增账号</el-button>
+          </el-col>
+        </el-row>
+        <el-table v-loading="accountLoading" :data="accounts">
+          <el-table-column label="账号名称" prop="accountName" min-width="140" />
+          <el-table-column label="AppID" prop="appId" min-width="180" />
+          <el-table-column label="默认作者" prop="defaultAuthor" width="120" />
+          <el-table-column label="密钥" width="90" align="center">
+            <template slot-scope="scope"><el-tag :type="scope.row.secretConfigured ? 'success' : 'danger'">{{ scope.row.secretConfigured ? '已配置' : '未配置' }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="状态" width="80" align="center">
+            <template slot-scope="scope"><el-tag :type="scope.row.status === '0' ? 'success' : 'info'">{{ scope.row.status === '0' ? '正常' : '停用' }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="操作" width="220" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" icon="el-icon-connection" @click="handleTest(scope.row)" v-hasPermi="['office:wechat:account:test']">测试</el-button>
+              <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-hasPermi="['office:wechat:account:edit']">修改</el-button>
+              <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['office:wechat:account:remove']">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+
+      <el-tab-pane label="草稿推送记录" name="drafts">
+        <el-form :inline="true" size="small" :model="draftQuery">
+          <el-form-item label="标题"><el-input v-model="draftQuery.title" clearable placeholder="文章标题" /></el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="draftQuery.pushStatus" clearable placeholder="全部">
+              <el-option label="成功" value="0" /><el-option label="失败" value="1" /><el-option label="处理中" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item><el-button type="primary" icon="el-icon-search" @click="loadDrafts">查询</el-button></el-form-item>
+        </el-form>
+        <el-table v-loading="draftLoading" :data="drafts">
+          <el-table-column label="标题" prop="title" min-width="220" show-overflow-tooltip />
+          <el-table-column label="公众号" prop="accountName" width="150" />
+          <el-table-column label="状态" width="90" align="center">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.pushStatus === '0' ? 'success' : (scope.row.pushStatus === '1' ? 'danger' : 'warning')">{{ statusText(scope.row.pushStatus) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="MediaID" prop="wechatMediaId" min-width="180" show-overflow-tooltip />
+          <el-table-column label="错误信息" prop="errorMessage" min-width="220" show-overflow-tooltip />
+          <el-table-column label="推送时间" prop="pushTime" width="165" />
+          <el-table-column label="操作" width="90" align="center">
+            <template slot-scope="scope"><el-button v-if="scope.row.pushStatus === '1'" type="text" @click="handleRetry(scope.row)" v-hasPermi="['office:wechat:draft:retry']">重试</el-button></template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="draftTotal > 0" :total="draftTotal" :page.sync="draftQuery.pageNum" :limit.sync="draftQuery.pageSize" @pagination="loadDrafts" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog :title="accountForm.accountId ? '修改公众号账号' : '新增公众号账号'" :visible.sync="accountOpen" width="620px" append-to-body>
+      <el-form ref="accountForm" :model="accountForm" :rules="accountRules" label-width="120px">
+        <el-form-item label="账号名称" prop="accountName"><el-input v-model="accountForm.accountName" /></el-form-item>
+        <el-form-item label="AppID" prop="appId"><el-input v-model="accountForm.appId" /></el-form-item>
+        <el-form-item label="AppSecret" :prop="accountForm.accountId ? '' : 'appSecret'">
+          <el-input v-model="accountForm.appSecret" type="password" show-password :placeholder="accountForm.accountId ? '留空表示不修改' : '请输入 AppSecret'" />
+        </el-form-item>
+        <el-form-item label="默认作者"><el-input v-model="accountForm.defaultAuthor" maxlength="16" /></el-form-item>
+        <el-form-item label="阅读原文"><el-input v-model="accountForm.defaultSourceUrl" /></el-form-item>
+        <el-form-item label="评论设置">
+          <el-checkbox v-model="openComment">开启评论</el-checkbox>
+          <el-checkbox v-model="fansOnly" :disabled="!openComment">仅粉丝可评论</el-checkbox>
+        </el-form-item>
+        <el-form-item label="状态"><el-radio-group v-model="accountForm.status"><el-radio label="0">正常</el-radio><el-radio label="1">停用</el-radio></el-radio-group></el-form-item>
+        <el-form-item label="备注"><el-input v-model="accountForm.remark" type="textarea" /></el-form-item>
+      </el-form>
+      <div slot="footer"><el-button type="primary" @click="submitAccount">保存</el-button><el-button @click="accountOpen = false">取消</el-button></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listWechatAccounts, getWechatAccount, addWechatAccount, updateWechatAccount, deleteWechatAccount, testWechatAccount, listWechatDrafts, retryWechatDraft } from '@/api/office/wechat'
+
+export default {
+  name: 'WechatDraftManagement',
+  data() {
+    return {
+      activeTab: 'accounts', accountLoading: false, draftLoading: false,
+      accounts: [], drafts: [], draftTotal: 0, accountOpen: false,
+      openComment: false, fansOnly: false,
+      accountForm: {},
+      accountRules: {
+        accountName: [{ required: true, message: '请输入账号名称', trigger: 'blur' }],
+        appId: [{ required: true, message: '请输入 AppID', trigger: 'blur' }],
+        appSecret: [{ required: true, message: '请输入 AppSecret', trigger: 'blur' }]
+      },
+      draftQuery: { pageNum: 1, pageSize: 10, title: null, pushStatus: null }
+    }
+  },
+  created() { this.loadAccounts(); this.loadDrafts() },
+  methods: {
+    loadAccounts() { this.accountLoading = true; listWechatAccounts({ pageNum: 1, pageSize: 100 }).then(r => { this.accounts = r.rows || [] }).finally(() => { this.accountLoading = false }) },
+    loadDrafts() { this.draftLoading = true; listWechatDrafts(this.draftQuery).then(r => { this.drafts = r.rows || []; this.draftTotal = r.total || 0 }).finally(() => { this.draftLoading = false }) },
+    resetAccount() { this.accountForm = { accountId: null, accountName: '', appId: '', appSecret: '', defaultAuthor: '', defaultSourceUrl: '', needOpenComment: 0, onlyFansCanComment: 0, status: '0', remark: '' }; this.openComment = false; this.fansOnly = false },
+    handleAdd() { this.resetAccount(); this.accountOpen = true },
+    handleEdit(row) { this.resetAccount(); getWechatAccount(row.accountId).then(r => { this.accountForm = r.data; this.accountForm.appSecret = ''; this.openComment = r.data.needOpenComment === 1; this.fansOnly = r.data.onlyFansCanComment === 1; this.accountOpen = true }) },
+    submitAccount() { this.$refs.accountForm.validate(valid => { if (!valid) return; this.accountForm.needOpenComment = this.openComment ? 1 : 0; this.accountForm.onlyFansCanComment = this.openComment && this.fansOnly ? 1 : 0; const action = this.accountForm.accountId ? updateWechatAccount : addWechatAccount; action(this.accountForm).then(() => { this.$modal.msgSuccess('保存成功'); this.accountOpen = false; this.loadAccounts() }) }) },
+    handleTest(row) { testWechatAccount(row.accountId).then(() => this.$modal.msgSuccess('连接成功')) },
+    handleDelete(row) { this.$modal.confirm('确认删除公众号账号“' + row.accountName + '”？').then(() => deleteWechatAccount(row.accountId)).then(() => { this.$modal.msgSuccess('删除成功'); this.loadAccounts() }).catch(() => {}) },
+    handleRetry(row) { this.$modal.confirm('确认重新推送该文章到草稿箱？').then(() => retryWechatDraft(row.articleId)).then(() => { this.$modal.msgSuccess('重试成功'); this.loadDrafts() }).catch(() => {}) },
+    statusText(status) { return status === '0' ? '成功' : (status === '1' ? '失败' : '处理中') }
+  }
+}
+</script>