fix: todo修复

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

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import { MaterialSelect } from '#/views/mp/modules';
+
+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 dialogVisible = ref(false);
+
+const accountId = inject<number>('accountId');
+
+const fileList = ref<UploadFile[]>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+function handleOpenDialog() {
+  dialogVisible.value = true;
+}
+
+/** 素材选择完成事件 */
+function onMaterialSelected(item: any) {
+  dialogVisible.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+// DONE @hw：注释都补充下哈；
+/** 上传前校验 */
+const onBeforeUpload = (file: UploadFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
+
+// DONE @hw：注释都补充下哈；
+/** 上传错误处理 */
+function onUploadChange(info: any) {
+  if (info.file.status === 'error') {
+    onUploadError(info.file.error || new Error('上传失败'));
+  }
+}
+
+// DONE @hw：注释都补充下哈；
+/** 上传成功处理 */
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+// DONE @hw：注释都补充下哈；
+/** 上传失败处理 */
+function onUploadError(err: Error) {
+  message.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
+    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+    <div class="flex w-full flex-col items-center justify-center text-center">
+      <Image
+        v-if="newsItem.thumbUrl"
+        class="max-h-[300px] w-[300px]"
+        :src="newsItem.thumbUrl"
+        :preview="false"
+      />
+      <IconifyIcon
+        v-else
+        icon="lucide:plus"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
+      />
+      <div class="m-[5px]">
+        <div class="flex items-center justify-center">
+          <Upload
+            :action="UPLOAD_URL"
+            :headers="HEADERS"
+            :file-list="fileList"
+            :data="{ ...uploadData }"
+            :before-upload="onBeforeUpload"
+            @success="onUploadSuccess"
+            @change="onUploadChange"
+          >
+            <template #default>
+              <Button size="small" type="primary">本地上传</Button>
+            </template>
+          </Upload>
+          <Button
+            size="small"
+            type="primary"
+            class="ml-[5px]"
+            @click="handleOpenDialog"
+          >
+            素材库选择
+          </Button>
+        </div>
+
+        <div class="ml-[5px] mt-[5px] text-xs text-[#999]">
+          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+        </div>
+      </div>
+      <!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
+      <Modal
+        v-model:open="dialogVisible"
+        title="图片选择"
+        width="65%"
+        :footer="null"
+      >
+        <MaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </Modal>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import { News } from '#/views/mp/modules';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="p-2.5">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <News :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>

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

@@ -1,35 +1,38 @@
 <script lang="ts" setup>
-import type { NewsItem } from '../components/types';
+import type { NewsItem } from './types';
 
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
-import { confirm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
 import { message, Spin } from 'ant-design-vue';
 
 import { createDraft, updateDraft } from '#/api/mp/draft';
 
-import NewsForm from '../components/news-form.vue';
+import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
+// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
 const formData = ref<{
   accountId: number;
-  // TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
-  isCreating: boolean;
   mediaId?: string;
   newsList?: NewsItem[];
 }>();
 const newsList = ref<NewsItem[]>([]);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
+// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
 const isSubmitting = ref(false);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
-const isSaved = ref(false);
 
 const getTitle = computed(() => {
-  return formData.value?.isCreating ? '新建图文' : '修改图文';
+  return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
     isSubmitting.value = true;
     modalApi.lock();
     try {
-      if (formData.value.isCreating) {
-        await createDraft(formData.value.accountId, newsList.value);
-        message.success('新增成功');
-      } else if (formData.value.mediaId) {
+      if (formData.value.mediaId) {
         await updateDraft(
           formData.value.accountId,
           formData.value.mediaId,
           newsList.value,
         );
         message.success('更新成功');
+      } else {
+        await createDraft(formData.value.accountId, newsList.value);
+        message.success('新增成功');
       }
-      isSaved.value = true;
       await modalApi.close();
       emit('success');
     } finally {
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  async onBeforeClose() {
-    // 如果已经成功保存，直接关闭，不显示提示
-    if (isSaved.value) {
-      return true;
-    }
-    try {
-      await 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;
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
     if (!data) {
       return;
     }
-    formData.value = data;
+    formData.value = {
+      accountId: data.accountId,
+      mediaId: data.mediaId,
+      newsList: data.newsList,
+    };
     newsList.value = data.newsList || [];
   },
 });
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
       <NewsForm
         v-if="formData"
         v-model="newsList"
-        :is-creating="formData.isCreating"
+        :is-creating="!formData.mediaId"
       />
     </Spin>
   </Modal>

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

@@ -0,0 +1,257 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Col, Input, Layout, Row, Textarea } from 'ant-design-vue';
+
+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;
+}>();
+
+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;
+});
+
+// DONE @hw：注释使用 /** */
+/** 将图文向下移动 */
+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) {
+  await confirm('确定删除该图文吗?');
+  newsList.value.splice(index, 1);
+  if (activeNewsIndex.value === index) {
+    activeNewsIndex.value = 0;
+  }
+}
+
+/** 添加一个图文 */
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <Layout>
+    <Layout.Sider width="40%" theme="light">
+      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
+            v-if="index === 0"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="relative h-[120px] w-full bg-[#acadae]">
+              <img class="h-full w-full" :src="news.thumbUrl" />
+              <div
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+              >
+                {{ news.title }}
+              </div>
+            </div>
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              v-if="newsList.length > 1"
+            >
+              <Button
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-down" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                shape="circle"
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+              </Button>
+            </div>
+          </div>
+          <div
+            class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
+            v-if="index > 0"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="relative -ml-[3px]">
+              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
+              <div class="inline-block w-[25%] bg-[#acadae]">
+                <img class="h-full w-full" :src="news.thumbUrl" />
+              </div>
+            </div>
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+            >
+              <Button
+                v-if="newsList.length > index + 1"
+                shape="circle"
+                type="default"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-down" />
+              </Button>
+              <Button
+                v-if="index > 0"
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-up" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                size="small"
+                shape="circle"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Row
+          justify="center"
+          class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
+        >
+          <Button
+            type="primary"
+            shape="circle"
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="lucide:plus" />
+          </Button>
+        </Row>
+      </div>
+    </Layout.Sider>
+    <Layout.Content class="bg-white">
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <Row :gutter="20">
+          <Col :span="24">
+            <Input
+              v-model:value="activeNewsItem.title"
+              placeholder="请输入标题（必填）"
+            />
+          </Col>
+          <Col :span="24" class="mt-[5px]">
+            <Input
+              v-model:value="activeNewsItem.author"
+              placeholder="请输入作者"
+            />
+          </Col>
+          <Col :span="24" class="mt-[5px]">
+            <Input
+              v-model:value="activeNewsItem.contentSourceUrl"
+              placeholder="请输入原文地址"
+            />
+          </Col>
+        </Row>
+        <!-- 封面和摘要 -->
+        <Row :gutter="20">
+          <Col :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </Col>
+          <Col :span="12">
+            <p>摘要:</p>
+            <Textarea
+              :rows="8"
+              v-model:value="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="inline-block w-full align-top"
+              :maxlength="120"
+              :show-count="true"
+            />
+          </Col>
+        </Row>
+        <!--富文本编辑器组件-->
+        <Row>
+          <Col :span="24">
+            <RichTextarea v-model="activeNewsItem.content" />
+          </Col>
+        </Row>
+      </div>
+    </Layout.Content>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-row) {
+  margin-bottom: 20px;
+}
+
+:deep(.ant-row:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,42 @@
+// DONE @hw：要不把 components 里的部分，拿到 modules 里。
+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 };