feat: 图文草稿箱迁移

apps/web-ele/src/views/mp/draft/modules/cover-select.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  isFirst: boolean;
+  modelValue: NewsItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem): void;
+}>();
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const newsItem = computed<NewsItem>({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const accountId = inject<number>('accountId');
+const showImageDialog = ref(false);
+
+const fileList = ref<UploadFiles>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+/** 素材选择完成事件*/
+function onMaterialSelected(item: any) {
+  showImageDialog.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+
+const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  useBeforeUpload(UploadType.Image, 2)(rawFile);
+
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    ElMessage.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+function onUploadError(err: Error) {
+  ElMessage.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <div class="thumb-div">
+      <ElImage
+        v-if="newsItem.thumbUrl"
+        style="width: 300px; max-height: 300px"
+        :src="newsItem.thumbUrl"
+        fit="contain"
+      />
+      <IconifyIcon
+        v-else
+        icon="ep:plus"
+        class="avatar-uploader-icon"
+        :class="isFirst ? 'avatar' : 'avatar1'"
+      />
+      <div class="thumb-but">
+        <ElUpload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="onBeforeUpload"
+          :on-error="onUploadError"
+          :on-success="onUploadSuccess"
+        >
+          <template #trigger>
+            <ElButton size="small" type="primary">本地上传</ElButton>
+          </template>
+          <ElButton
+            size="small"
+            type="primary"
+            @click="showImageDialog = true"
+            style="margin-left: 5px"
+          >
+            素材库选择
+          </ElButton>
+          <template #tip>
+            <div class="el-upload__tip">
+              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+            </div>
+          </template>
+        </ElUpload>
+      </div>
+      <ElDialog
+        title="选择图片"
+        v-model="showImageDialog"
+        width="80%"
+        append-to-body
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </ElDialog>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-upload__tip {
+  margin-left: 5px;
+}
+
+.thumb-div {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    font-size: 28px;
+    line-height: 120px;
+    color: #8c939d;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .avatar {
+    width: 230px;
+    height: 120px;
+  }
+
+  .avatar1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .thumb-but {
+    margin: 5px;
+  }
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/draft-table.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import WxNews from '#/views/mp/modules/wx-news';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="draft-content">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <WxNews :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.draft-content {
+  padding: 10px;
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/form.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import * as MpDraftApi from '#/api/mp/draft';
+
+import NewsForm from './news-form.vue';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<{
+  accountId: number;
+  isCreating: boolean;
+  mediaId?: string;
+  newsList?: NewsItem[];
+}>();
+const newsList = ref<NewsItem[]>([]);
+const isSubmitting = ref(false);
+const isSaved = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating ? '新建图文' : '修改图文';
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+
+    isSubmitting.value = true;
+    modalApi.lock();
+    try {
+      if (formData.value.isCreating) {
+        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
+        ElMessage.success('新增成功');
+      } else if (formData.value.mediaId) {
+        await MpDraftApi.updateDraft(
+          formData.value.accountId,
+          formData.value.mediaId,
+          newsList.value,
+        );
+        ElMessage.success('更新成功');
+      }
+      isSaved.value = true;
+      await modalApi.close();
+      emit('success');
+    } finally {
+      isSubmitting.value = false;
+      modalApi.unlock();
+    }
+  },
+  async onBeforeClose() {
+    // 如果已经成功保存，直接关闭，不显示提示
+    if (isSaved.value) {
+      return true;
+    }
+    try {
+      await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      newsList.value = [];
+      isSaved.value = false;
+      return;
+    }
+    isSaved.value = false;
+    const data = modalApi.getData<{
+      accountId: number;
+      isCreating: boolean;
+      mediaId?: string;
+      newsList?: NewsItem[];
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    newsList.value = data.newsList || [];
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
+    <NewsForm
+      v-if="formData"
+      v-model="newsList"
+      v-loading="isSubmitting"
+      :is-creating="formData.isCreating"
+    />
+  </Modal>
+</template>

apps/web-ele/src/views/mp/draft/modules/news-form.vue

@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAside,
+  ElButton,
+  ElCol,
+  ElContainer,
+  ElInput,
+  ElMain,
+  ElMessageBox,
+  ElRow,
+} from 'element-plus';
+
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
+import CoverSelect from './cover-select.vue';
+import { createEmptyNewsItem } from './types';
+
+defineOptions({ name: 'NewsForm' });
+
+const props = defineProps<{
+  isCreating: boolean;
+  modelValue: NewsItem[] | null;
+}>();
+
+// v-model=newsList
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem[]): void;
+}>();
+
+const newsList = computed<NewsItem[]>({
+  get() {
+    return props.modelValue === null
+      ? [createEmptyNewsItem()]
+      : props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const activeNewsIndex = ref(0);
+const activeNewsItem = computed(() => {
+  const item = newsList.value[activeNewsIndex.value];
+  if (!item) {
+    return createEmptyNewsItem();
+  }
+  return item;
+});
+
+// 将图文向下移动
+function moveDownNews(index: number) {
+  const current = newsList.value[index];
+  const next = newsList.value[index + 1];
+  if (current && next) {
+    newsList.value[index] = next;
+    newsList.value[index + 1] = current;
+    activeNewsIndex.value = index + 1;
+  }
+}
+
+// 将图文向上移动
+function moveUpNews(index: number) {
+  const current = newsList.value[index];
+  const prev = newsList.value[index - 1];
+  if (current && prev) {
+    newsList.value[index] = prev;
+    newsList.value[index - 1] = current;
+    activeNewsIndex.value = index - 1;
+  }
+}
+
+// 删除指定 index 的图文
+async function removeNews(index: number) {
+  try {
+    await ElMessageBox.confirm('确定删除该图文吗?');
+    newsList.value.splice(index, 1);
+    if (activeNewsIndex.value === index) {
+      activeNewsIndex.value = 0;
+    }
+  } catch {
+    // empty
+  }
+}
+
+// 添加一个图文
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <ElContainer>
+    <ElAside width="40%">
+      <div class="select-item">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="news-main father"
+            v-if="index === 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content">
+              <img class="material-img" :src="news.thumbUrl" />
+              <div class="news-content-title">{{ news.title }}</div>
+            </div>
+            <div class="child" v-if="newsList.length > 1">
+              <ElButton
+                type="info"
+                circle
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                circle
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+          <div
+            class="news-main-item father"
+            v-if="index > 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content-item">
+              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="news-content-item-img">
+                <img class="material-img" :src="news.thumbUrl" width="100%" />
+              </div>
+            </div>
+            <div class="child">
+              <ElButton
+                v-if="newsList.length > index + 1"
+                circle
+                type="info"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="index > 0"
+                type="info"
+                circle
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-up-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                size="small"
+                circle
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+        </div>
+        <ElRow justify="center" class="ope-row">
+          <ElButton
+            type="primary"
+            circle
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="ep:plus" />
+          </ElButton>
+        </ElRow>
+      </div>
+    </ElAside>
+    <ElMain>
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <ElRow :gutter="20">
+          <ElInput
+            v-model="activeNewsItem.title"
+            placeholder="请输入标题（必填）"
+          />
+          <ElInput
+            v-model="activeNewsItem.author"
+            placeholder="请输入作者"
+            style="margin-top: 5px"
+          />
+          <ElInput
+            v-model="activeNewsItem.contentSourceUrl"
+            placeholder="请输入原文地址"
+            style="margin-top: 5px"
+          />
+        </ElRow>
+        <!-- 封面和摘要 -->
+        <ElRow :gutter="20">
+          <ElCol :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </ElCol>
+          <ElCol :span="12">
+            <p>摘要:</p>
+            <ElInput
+              :rows="8"
+              type="textarea"
+              v-model="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="digest"
+              maxlength="120"
+            />
+          </ElCol>
+        </ElRow>
+        <!--富文本编辑器组件-->
+        <ElRow>
+          <RichTextarea v-model="activeNewsItem.content" />
+        </ElRow>
+      </div>
+    </ElMain>
+  </ElContainer>
+</template>
+
+<style lang="scss" scoped>
+.ope-row {
+  padding-top: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+.el-row {
+  margin-bottom: 20px;
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+
+.digest {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+/* 新增图文 */
+.news-main {
+  width: 100%;
+  height: 120px;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 98%;
+  height: 25px;
+  padding: 1%;
+  overflow: hidden;
+  font-size: 15px;
+  color: #fff;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  width: 100%;
+  padding: 5px 0;
+  margin: auto;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  font-size: 12px;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+
+  .activeAddNews {
+    border: 5px solid #2bb673;
+  }
+}
+
+.father .child {
+  position: relative;
+  bottom: 25px;
+  display: none;
+  text-align: center;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/types.ts

@@ -0,0 +1,41 @@
+interface NewsItem {
+  title: string;
+  thumbMediaId: string;
+  author: string;
+  digest: string;
+  showCoverPic: number;
+  content: string;
+  contentSourceUrl: string;
+  needOpenComment: number;
+  onlyFansCanComment: number;
+  thumbUrl: string;
+  picUrl?: string; // 用于预览封面
+}
+
+interface NewsItemList {
+  newsItem: NewsItem[];
+}
+
+interface Article {
+  mediaId: string;
+  content: NewsItemList;
+  updateTime: number;
+}
+
+const createEmptyNewsItem = (): NewsItem => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
+};
+
+export type { Article, NewsItem, NewsItemList };
+export { createEmptyNewsItem };