feat: antd菜单模块迁移

2025-11-03 14:04:00 +08:00
parent 8f5c928ab1
commit 3e826de4aa
54 changed files with 3781 additions and 54 deletions
--- a/apps/web-antd/src/views/mp/modules/wx-reply/components/TabMusic.vue
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/components/TabMusic.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { Reply } from './types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Upload,
+} from 'ant-design-vue';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+// import { getAccessToken } from '@/utils/auth'
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+// 消息弹窗
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  type: 'thumb', // 音乐类型为thumb
+  title: '',
+  introduction: '',
+});
+
+/** 图片上传前校验 */
+function beforeImageUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Image, 2)(file as any);
+}
+
+/** 上传成功 */
+function onUploadSuccess(info: any) {
+  const res = info.response || info;
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = [];
+  uploadData.title = '';
+  uploadData.introduction = '';
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data);
+}
+
+/** 选择素材 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+
+  reply.value.thumbMediaId = item.mediaId;
+  reply.value.thumbMediaUrl = item.url;
+}
+</script>
+
+<template>
+  <div>
+    <Row align="middle" justify="center">
+      <Col :span="6">
+        <Row align="middle" justify="center" class="thumb-div">
+          <Col :span="24">
+            <Row align="middle" justify="center">
+              <img
+                style="width: 100px"
+                v-if="reply.thumbMediaUrl"
+                :src="reply.thumbMediaUrl"
+              />
+              <IconifyIcon v-else icon="ep:plus" />
+            </Row>
+            <Row align="middle" justify="center" style="margin-top: 2%">
+              <div class="thumb-but">
+                <Upload
+                  :action="UPLOAD_URL"
+                  :headers="HEADERS"
+                  :file-list="fileList"
+                  :data="uploadData"
+                  :before-upload="beforeImageUpload"
+                  @change="
+                    (info) => {
+                      if (info.file.status === 'done') {
+                        onUploadSuccess(info.file.response || info.file);
+                      }
+                    }
+                  "
+                >
+                  <template #default>
+                    <Button type="link">本地上传</Button>
+                  </template>
+                </Upload>
+                <Button
+                  type="link"
+                  @click="showDialog = true"
+                  style="margin-left: 5px"
+                >
+                  素材库选择
+                </Button>
+              </div>
+            </Row>
+          </Col>
+        </Row>
+        <Modal
+          title="选择图片"
+          v-model:open="showDialog"
+          width="80%"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <Col :span="18">
+        <Input v-model:value="reply.title as string" placeholder="请输入标题" />
+        <div style="margin: 20px 0"></div>
+        <Input
+          v-model:value="reply.description as string"
+          placeholder="请输入描述"
+        />
+      </Col>
+    </Row>
+    <div style="margin: 20px 0"></div>
+    <Input
+      v-model:value="reply.musicUrl as string"
+      placeholder="请输入音乐链接"
+    />
+    <div style="margin: 20px 0"></div>
+    <Input
+      v-model:value="reply.hqMusicUrl as string"
+      placeholder="请输入高质量音乐链接"
+    />
+  </div>
+</template>