diff --git a/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java b/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
index f92fe38c8..409d32c88 100644
--- a/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
+++ b/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
@@ -47,6 +47,7 @@ public interface ErrorCodeConstants {
     ErrorCode DRAFT_LIST_FAIL = new ErrorCode(1006007000, "获得草稿列表失败，原因：{}");
     ErrorCode DRAFT_CREATE_FAIL = new ErrorCode(1006007001, "创建草稿失败，原因：{}");
     ErrorCode DRAFT_UPDATE_FAIL = new ErrorCode(1006007002, "更新草稿失败，原因：{}");
+    ErrorCode DRAFT_DELETE_FAIL = new ErrorCode(1006007002, "删除草稿失败，原因：{}");
 
     // TODO 要处理下
     ErrorCode MENU_NOT_EXISTS = new ErrorCode(1006001002, "菜单不存在");
diff --git a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/news/MpDraftController.java b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/news/MpDraftController.java
index ba2323716..148b5a5fe 100644
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/news/MpDraftController.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/news/MpDraftController.java
@@ -1,10 +1,14 @@
 package cn.iocoder.yudao.module.mp.controller.admin.news;
 
+import cn.hutool.core.collection.CollUtil;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
 import cn.iocoder.yudao.framework.common.util.object.PageUtils;
 import cn.iocoder.yudao.module.mp.controller.admin.news.vo.MpDraftPageReqVO;
+import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
 import cn.iocoder.yudao.module.mp.framework.mp.core.MpServiceFactory;
+import cn.iocoder.yudao.module.mp.service.material.MpMaterialService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiImplicitParam;
 import io.swagger.annotations.ApiImplicitParams;
@@ -12,17 +16,21 @@ import io.swagger.annotations.ApiOperation;
 import me.chanjar.weixin.common.error.WxErrorException;
 import me.chanjar.weixin.mp.api.WxMpService;
 import me.chanjar.weixin.mp.bean.draft.*;
+import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
+import java.util.HashSet;
 import java.util.List;
+import java.util.Map;
+import java.util.Set;
 
 import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
 import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
+import static cn.iocoder.yudao.framework.common.util.collection.MapUtils.findAndThen;
 import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.*;
 
-// TODO 芋艿：权限
 @Api(tags = "管理后台 - 公众号草稿")
 @RestController
 @RequestMapping("/mp/draft")
@@ -32,8 +40,12 @@ public class MpDraftController {
     @Resource
     private MpServiceFactory mpServiceFactory;
 
+    @Resource
+    private MpMaterialService mpMaterialService;
+
     @GetMapping("/page")
     @ApiOperation("获得草稿分页")
+    @PreAuthorize("@ss.hasPermission('mp:draft:query')")
     public CommonResult<PageResult<WxMpDraftItem>> getDraftPage(MpDraftPageReqVO reqVO) {
         // 从公众号查询草稿箱
         WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId());
@@ -43,16 +55,35 @@ public class MpDraftController {
         } catch (WxErrorException e) {
             throw exception(DRAFT_LIST_FAIL, e.getError().getErrorMsg());
         }
+        // 查询对应的图片地址。目的：解决公众号的图片链接无法在我们后台展示
+        setDraftThumbUrl(draftList.getItems());
 
         // 返回分页
         return success(new PageResult<>(draftList.getItems(), draftList.getTotalCount().longValue()));
     }
 
+    private void setDraftThumbUrl(List<WxMpDraftItem> items) {
+        // 1.1 获得 mediaId 数组
+        Set<String> mediaIds = new HashSet<>();
+        items.forEach(item -> item.getContent().getNewsItem().forEach(newsItem -> mediaIds.add(newsItem.getThumbMediaId())));
+        if (CollUtil.isEmpty(mediaIds)) {
+            return;
+        }
+        // 1.2 批量查询对应的 Media 素材
+        Map<String, MpMaterialDO> materials = CollectionUtils.convertMap(mpMaterialService.getMaterialListByMediaId(mediaIds),
+                MpMaterialDO::getMediaId);
+
+        // 2. 设置回 WxMpDraftItem 记录
+        items.forEach(item -> item.getContent().getNewsItem().forEach(newsItem ->
+                findAndThen(materials, newsItem.getThumbMediaId(), material -> newsItem.setThumbUrl(material.getUrl()))));
+    }
+
     @PostMapping("/create")
     @ApiOperation("创建草稿")
     @ApiImplicitParam(name = "accountId", value = "公众号账号的编号", required = true,
             example = "1024", dataTypeClass = Long.class)
-    public CommonResult<String> createDraft(@RequestParam("accountId") Long accountId,
+    @PreAuthorize("@ss.hasPermission('mp:draft:create')")
+    public CommonResult<String> deleteDraft(@RequestParam("accountId") Long accountId,
                                             @RequestBody WxMpAddDraft draft) {
         WxMpService mpService = mpServiceFactory.getRequiredMpService(accountId);
         try {
@@ -71,7 +102,8 @@ public class MpDraftController {
             @ApiImplicitParam(name = "mediaId", value = "草稿素材的编号", required = true,
                     example = "xxx", dataTypeClass = String.class),
     })
-    public CommonResult<Boolean> createDraft(@RequestParam("accountId") Long accountId,
+    @PreAuthorize("@ss.hasPermission('mp:draft:update')")
+    public CommonResult<Boolean> deleteDraft(@RequestParam("accountId") Long accountId,
                                              @RequestParam("mediaId") String mediaId,
                                              @RequestBody List<WxMpDraftArticles> articles) {
         WxMpService mpService = mpServiceFactory.getRequiredMpService(accountId);
@@ -86,4 +118,24 @@ public class MpDraftController {
         }
     }
 
+    @DeleteMapping("/delete")
+    @ApiOperation("删除草稿")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "accountId", value = "公众号账号的编号", required = true,
+                    example = "1024", dataTypeClass = Long.class),
+            @ApiImplicitParam(name = "mediaId", value = "草稿素材的编号", required = true,
+                    example = "xxx", dataTypeClass = String.class),
+    })
+    @PreAuthorize("@ss.hasPermission('mp:draft:delete')")
+    public CommonResult<Boolean> deleteDraft(@RequestParam("accountId") Long accountId,
+                                             @RequestParam("mediaId") String mediaId) {
+        WxMpService mpService = mpServiceFactory.getRequiredMpService(accountId);
+        try {
+            mpService.getDraftService().delDraft(mediaId);
+            return success(true);
+        } catch (WxErrorException e) {
+            throw exception(DRAFT_DELETE_FAIL, e.getError().getErrorMsg());
+        }
+    }
+
 }
diff --git a/yudao-ui-admin/src/api/mp/draft.js b/yudao-ui-admin/src/api/mp/draft.js
index 9e2376f64..2358932dc 100644
--- a/yudao-ui-admin/src/api/mp/draft.js
+++ b/yudao-ui-admin/src/api/mp/draft.js
@@ -28,3 +28,11 @@ export function updateDraft(accountId, mediaId, articles) {
     data: articles
   })
 }
+
+// 删除草稿
+export function deleteDraft(accountId, mediaId) {
+  return request({
+    url: '/mp/draft/delete?accountId=' + accountId + '&mediaId=' + mediaId,
+    method: 'delete',
+  })
+}
diff --git a/yudao-ui-admin/src/api/mp/freePublish.js b/yudao-ui-admin/src/api/mp/freePublish.js
index 558a9493f..211a66a66 100644
--- a/yudao-ui-admin/src/api/mp/freePublish.js
+++ b/yudao-ui-admin/src/api/mp/freePublish.js
@@ -16,3 +16,11 @@ export function deleteFreePublish(accountId, articleId) {
     method: 'delete'
   })
 }
+
+// 发布公众号素材
+export function submitFreePublish(accountId, mediaId) {
+  return request({
+    url: '/mp/free-publish/submit?accountId=' + accountId + '&mediaId=' + mediaId,
+    method: 'post'
+  })
+}
diff --git a/yudao-ui-admin/src/views/mp/draft/index.vue b/yudao-ui-admin/src/views/mp/draft/index.vue
index ecb79ad8d..dcac01487 100644
--- a/yudao-ui-admin/src/views/mp/draft/index.vue
+++ b/yudao-ui-admin/src/views/mp/draft/index.vue
@@ -22,6 +22,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
   芋道源码：
   ① 优化代码，和项目的代码保持一致
+  ② 清理冗余代码，保证代码整洁
+  ③ 增加注释，提升可读性
 -->
 <template>
   <div class="app-container">
@@ -53,11 +55,11 @@ SOFTWARE.
       <div v-if="item.content && item.content.newsItem" class="waterfall-item" v-for="item in list"
            :key='item.articleId'>
         <wx-news :articles="item.content.newsItem" />
-        <!-- TODO 芋艿：权限、样式（搜索框之类的） -->
+        <!-- 操作按钮 -->
         <el-row class="ope-row">
-          <el-button type="success" circle @click="handlePublishNews(item)">发布</el-button>
-          <el-button type="primary" icon="el-icon-edit" circle @click="handleUpdate(item)"></el-button>
-          <el-button type="danger" icon="el-icon-delete" circle @click="delMaterial(item)"></el-button>
+          <el-button type="success" circle @click="handlePublish(item)" v-hasPermi="['mp:free-publish:submit']">发布</el-button>
+          <el-button type="primary" icon="el-icon-edit" circle @click="handleUpdate(item)" v-hasPermi="['mp:draft:update']" />
+          <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(item)" v-hasPermi="['mp:draft:delete']" />
         </el-row>
       </div>
     </div>
@@ -147,7 +149,6 @@ SOFTWARE.
           <wx-editor v-model="articlesAdd[isActiveAddNews].content" :account-id="this.uploadData.accountId"
                      v-if="hackResetEditor"/>
         </el-row>
-        <!-- 原文地址 -->
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogNewsVisible = false">取 消</el-button>
@@ -158,13 +159,13 @@ SOFTWARE.
 </template>
 
 <script>
-// import { getPage as getPage1 } from '@/api/wxmp/wxmaterial'
 import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue';
 import WxNews from '@/views/mp/components/wx-news/main.vue';
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import {createDraft, getDraftPage, updateDraft} from "@/api/mp/draft";
+import {createDraft, deleteDraft, getDraftPage, updateDraft} from "@/api/mp/draft";
 import { getSimpleAccounts } from "@/api/mp/account";
+import {deleteFreePublish, submitFreePublish} from "@/api/mp/freePublish";
 
 export default {
   name: 'mpDraft',
@@ -221,7 +222,7 @@ export default {
         this.setAccountId(this.accounts[0].id);
       }
       // 加载数据
-      // this.getList(); // TODO 芋艿：开发完，放出来
+      this.getList();
     })
   },
   methods: {
@@ -434,44 +435,26 @@ export default {
     },
 
     // ======================== 草稿箱发布 ========================
-    handlePublishNews(item){
-      this.$confirm('你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+    handlePublish(item) {
+      const accountId = this.queryParams.accountId;
+      const mediaId = item.mediaId;
+      const content = '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
+      this.$modal.confirm(content).then(function() {
+        return submitFreePublish(accountId, mediaId);
       }).then(() => {
-        this.loading = true
-        publish(item.mediaId).then(response => {
-          this.loading = false
-          this.$message.success('发布任务提交成功')
-          this.getList(this.queryParams)
-        }).catch(() => {
-          this.loading = false
-        })
-      }).catch(() => {
-      })
+        this.getList();
+        this.$modal.msgSuccess("发布成功");
+      }).catch(() => {});
     },
-    delMaterial(item){
-      this.$confirm('此操作将永久删除该草稿, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+    handleDelete(item) {
+      const accountId = this.queryParams.accountId;
+      const mediaId = item.mediaId;
+      this.$modal.confirm('此操作将永久删除该草稿, 是否继续?').then(function() {
+        return deleteDraft(accountId, mediaId);
       }).then(() => {
-        this.loading = true
-        delObj({
-          id:item.mediaId
-        }).then(response => {
-          this.loading = false
-          if(response.code == 200){
-            this.getList(this.queryParams)
-          }else{
-            this.loading = false
-            this.$message.error('删除出错：' + response.msg)
-          }
-        }).catch(() => {
-          this.loading = false
-        })
-      })
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
     },
   }
 }