From 67b1b78f1f4c9007a7ad1068b187051011042cdc Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 16 Jul 2026 13:28:46 +0800
Subject: [PATCH] feat(aigc): add shared work page and AIGC sharing

- add new shared work page to view shared AIGC generated images and videos
- add createAigcGeneratorTaskShare and getAigcGeneratorTaskShareDetail APIs
- update ResultActions component to add share preparation state and native share support
- remove deprecated SharePreviewPopup component and its associated styles
- update AIGC detail page to generate share keys and adjust native share metadata
- register the new shared work page in pages.json
---
 .../detail/components/ResultActions/index.vue |  21 +-
 .../components/SharePreviewPopup/index.vue    |  99 ---------
 .../SharePreviewPopup/styles/index.scss       | 200 ------------------
 src/pages-aigc/detail/detail.vue              |  57 +++--
 src/pages-aigc/sharedWork/sharedWork.vue      | 118 +++++++++++
 src/pages-aigc/sharedWork/styles/index.scss   | 116 ++++++++++
 src/pages.json                                |   6 +
 src/request/api/AigcApi.js                    |  10 +
 8 files changed, 313 insertions(+), 314 deletions(-)
 delete mode 100644 src/pages-aigc/detail/components/SharePreviewPopup/index.vue
 delete mode 100644 src/pages-aigc/detail/components/SharePreviewPopup/styles/index.scss
 create mode 100644 src/pages-aigc/sharedWork/sharedWork.vue
 create mode 100644 src/pages-aigc/sharedWork/styles/index.scss

diff --git a/src/pages-aigc/detail/components/ResultActions/index.vue b/src/pages-aigc/detail/components/ResultActions/index.vue
index 331804f..2f17258 100644
--- a/src/pages-aigc/detail/components/ResultActions/index.vue
+++ b/src/pages-aigc/detail/components/ResultActions/index.vue
@@ -4,7 +4,10 @@
       {{ saving ? "保存中..." : "保存图片" }}
     </view>
 
-    <button class="result-action is-secondary" hover-class="none" @tap="emit('share')">分享好友</button>
+    <button class="result-action is-secondary" :class="{ 'is-disabled': sharePreparing }"
+      :open-type="shareReady ? 'share' : undefined" hover-class="none" @tap="handleShare">
+      {{ sharePreparing ? "准备分享..." : "分享好友" }}
+    </button>
   </view>
 </template>
 
@@ -14,15 +17,29 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  shareReady: {
+    type: Boolean,
+    default: false,
+  },
+  sharePreparing: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(["save", "share"]);
+const emit = defineEmits(["save", "prepare-share"]);
 
 const handleSave = () => {
   if (!props.saving) {
     emit("save");
   }
 };
+
+const handleShare = () => {
+  if (!props.shareReady && !props.sharePreparing) {
+    emit("prepare-share");
+  }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages-aigc/detail/components/SharePreviewPopup/index.vue b/src/pages-aigc/detail/components/SharePreviewPopup/index.vue
deleted file mode 100644
index 75c9809..0000000
--- a/src/pages-aigc/detail/components/SharePreviewPopup/index.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <uni-popup ref="popupRef" type="center" background-color="transparent"
-    mask-background-color="rgba(15, 23, 42, 0.58)" :safe-area="false" :is-mask-click="false">
-    <view class="share-preview-popup">
-      <text class="share-preview-badge">分享预览</text>
-      <text class="share-preview-heading">微信小程序分享卡片</text>
-
-      <view class="share-preview-card">
-        <view class="share-preview-brand">
-          <view class="share-preview-brand-mark">{{ brandInitial }}</view>
-          <view class="share-preview-brand-copy">
-            <text class="share-preview-brand-name">{{ displayAppName }}</text>
-            <text class="share-preview-brand-type">微信小程序</text>
-          </view>
-        </view>
-
-        <text class="share-preview-title">{{ displayTitle }}</text>
-        <text class="share-preview-variant">{{ displayVariantLabel }}</text>
-
-        <image v-if="imageUrl" class="share-preview-image" :src="imageUrl" mode="aspectFill" />
-        <view v-else class="share-preview-image share-preview-image-placeholder">
-          <text>作品预览</text>
-        </view>
-
-        <view class="share-preview-footer">
-          <text class="share-preview-footer-label">{{ displayAppName }}旅行作品</text>
-          <text class="share-preview-footer-action">打开小程序查看</text>
-        </view>
-      </view>
-
-      <button class="share-preview-share-button" open-type="share" hover-class="is-pressed"
-        @tap="handleShare">
-        分享给好友
-      </button>
-      <view class="share-preview-cancel-button" hover-class="is-pressed" @tap="handleCancel">
-        取消
-      </view>
-    </view>
-  </uni-popup>
-</template>
-
-<script setup>
-import { computed, nextTick, ref } from "vue";
-
-const props = defineProps({
-  appName: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  variantLabel: {
-    type: String,
-    default: "",
-  },
-  imageUrl: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["close", "share"]);
-const popupRef = ref(null);
-
-const displayAppName = computed(() => props.appName.trim() || "微信小程序");
-const displayTitle = computed(() => props.title.trim() || "旅行作品");
-const displayVariantLabel = computed(() => props.variantLabel.trim() || "生成作品");
-const brandInitial = computed(() => displayAppName.value.slice(-1) || "旅");
-
-const open = async () => {
-  await nextTick();
-  popupRef.value?.open();
-};
-
-const close = () => {
-  popupRef.value?.close();
-};
-
-const handleShare = () => {
-  close();
-  emit("share");
-};
-
-const handleCancel = () => {
-  close();
-  emit("close");
-};
-
-defineExpose({
-  open,
-  close,
-});
-</script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages-aigc/detail/components/SharePreviewPopup/styles/index.scss b/src/pages-aigc/detail/components/SharePreviewPopup/styles/index.scss
deleted file mode 100644
index 7232426..0000000
--- a/src/pages-aigc/detail/components/SharePreviewPopup/styles/index.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-.share-preview-popup {
-  width: calc(100vw - 28px);
-  max-width: 420px;
-  max-height: calc(100vh - 56px);
-  overflow-y: auto;
-  padding: 18px 16px 14px;
-  border: 1px solid rgba(73, 143, 205, 0.42);
-  border-radius: 20px;
-  background:
-    radial-gradient(90% 72% at 100% 0%, rgba(32, 207, 117, 0.15), rgba(32, 207, 117, 0) 60%),
-    linear-gradient(180deg, #dceeff 0%, #cfe7fb 100%);
-  box-shadow: 0 22px 54px rgba(16, 44, 73, 0.24);
-  box-sizing: border-box;
-}
-
-.share-preview-badge,
-.share-preview-heading,
-.share-preview-title,
-.share-preview-variant,
-.share-preview-brand-name,
-.share-preview-brand-type,
-.share-preview-footer-label,
-.share-preview-footer-action {
-  display: block;
-}
-
-.share-preview-badge {
-  width: max-content;
-  margin: 0 auto;
-  padding: 3px 9px;
-  border-radius: 999px;
-  background: rgba(32, 207, 117, 0.13);
-  color: #0e9f61;
-  font-size: 10px;
-  line-height: 16px;
-  font-weight: 900;
-}
-
-.share-preview-heading {
-  margin-top: 7px;
-  color: #173a5f;
-  font-size: 20px;
-  line-height: 26px;
-  font-weight: 900;
-  text-align: center;
-}
-
-.share-preview-card {
-  margin-top: 12px;
-  overflow: hidden;
-  border: 1px solid rgba(73, 143, 205, 0.26);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.62);
-  box-shadow: 0 10px 24px rgba(23, 58, 95, 0.08);
-}
-
-.share-preview-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 12px 7px;
-}
-
-.share-preview-brand-mark {
-  flex: 0 0 30px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: #20cf75;
-  color: #173a5f;
-  font-size: 15px;
-  line-height: 30px;
-  font-weight: 900;
-}
-
-.share-preview-brand-copy {
-  min-width: 0;
-}
-
-.share-preview-brand-name {
-  overflow: hidden;
-  color: #173a5f;
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 900;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.share-preview-brand-type {
-  margin-top: 1px;
-  color: #6b8299;
-  font-size: 9px;
-  line-height: 12px;
-  font-weight: 700;
-}
-
-.share-preview-title {
-  overflow: hidden;
-  padding: 4px 12px 0;
-  color: #172033;
-  font-size: 17px;
-  line-height: 23px;
-  font-weight: 900;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.share-preview-variant {
-  padding: 1px 12px 10px;
-  color: #4e7394;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 800;
-}
-
-.share-preview-image {
-  width: 100%;
-  height: 232px;
-  display: block;
-  background: #e8f2f8;
-}
-
-.share-preview-image-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background:
-    radial-gradient(80% 85% at 50% 15%, rgba(32, 207, 117, 0.18), rgba(32, 207, 117, 0) 70%),
-    #e8f2f8;
-  color: #6b8299;
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 800;
-}
-
-.share-preview-footer {
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-}
-
-.share-preview-footer-label,
-.share-preview-footer-action {
-  min-width: 0;
-  overflow: hidden;
-  color: #4e7394;
-  font-size: 10px;
-  line-height: 14px;
-  font-weight: 800;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.share-preview-footer-action {
-  flex: 0 0 auto;
-  color: #173a5f;
-}
-
-.share-preview-share-button,
-.share-preview-cancel-button {
-  width: 100%;
-  height: 44px;
-  margin: 12px 0 0;
-  padding: 0;
-  border: 0;
-  border-radius: 10px;
-  box-sizing: border-box;
-  font-size: 14px;
-  line-height: 44px;
-  font-weight: 900;
-  text-align: center;
-}
-
-.share-preview-share-button {
-  background: #20cf75;
-  color: #ffffff;
-  box-shadow: 0 8px 18px rgba(32, 207, 117, 0.2);
-}
-
-.share-preview-share-button::after {
-  border: 0;
-}
-
-.share-preview-cancel-button {
-  margin-top: 8px;
-  background: rgba(255, 255, 255, 0.45);
-  color: #385875;
-}
-
-.share-preview-share-button.is-pressed,
-.share-preview-cancel-button.is-pressed {
-  opacity: 0.82;
-}
diff --git a/src/pages-aigc/detail/detail.vue b/src/pages-aigc/detail/detail.vue
index 44826a1..225300c 100644
--- a/src/pages-aigc/detail/detail.vue
+++ b/src/pages-aigc/detail/detail.vue
@@ -6,7 +6,8 @@
       <template v-if="taskDetail">
         <ResultPreview v-if="result.cover" :result="result" />
         <ResultMeta :items="metaItems" />
-        <ResultActions :saving="isSaving" @save="handleSave" @share="handleOpenSharePreview" />
+        <ResultActions :saving="isSaving" :share-ready="Boolean(shareKey)" :share-preparing="isPreparingShare"
+          @save="handleSave" @prepare-share="handlePrepareShare" />
 
         <view class="aigc-detail-text-actions">
           <view class="aigc-detail-text-action" @tap="handleRegenerate">再生成一版</view>
@@ -16,29 +17,28 @@
       </template>
     </view>
 
-    <SharePreviewPopup ref="sharePreviewPopup" :app-name="currentClientName" :title="result.title"
-      :variant-label="result.variantLabel" :image-url="sharePreviewImage" />
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
 import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
-import { getCurrentConfig } from "@/constant/base.js";
 import AigcTopBar from "@/pages-aigc/components/AigcTopBar/index.vue";
 import { useCurrentCredit } from "@/pages-aigc/hooks/useCurrentCredit.js";
-import { getAigcGeneratorTaskDetail } from "@/request/api/AigcApi.js";
+import {
+  createAigcGeneratorTaskShare,
+  getAigcGeneratorTaskDetail,
+} from "@/request/api/AigcApi.js";
 import ResultActions from "./components/ResultActions/index.vue";
 import ResultMeta from "./components/ResultMeta/index.vue";
 import ResultPreview from "./components/ResultPreview/index.vue";
-import SharePreviewPopup from "./components/SharePreviewPopup/index.vue";
 
 const { pointBalance, fetchCurrentCredit } = useCurrentCredit();
 const taskId = ref("");
 const taskDetail = ref(null);
 const isSaving = ref(false);
-const sharePreviewPopup = ref(null);
-const currentClientName = String(getCurrentConfig()?.name || "").trim() || "微信小程序";
+const isPreparingShare = ref(false);
+const shareKey = ref("");
 
 const GENERATOR_TYPE_TEXT = {
   0: "图片版",
@@ -128,6 +128,7 @@ const fetchTaskDetail = async () => {
     const res = await getAigcGeneratorTaskDetail({ taskId: taskId.value });
     if (res?.code === 0 && res.data && typeof res.data === "object" && !Array.isArray(res.data)) {
       taskDetail.value = res.data;
+      prepareShareKey();
       return;
     }
 
@@ -159,9 +160,9 @@ onShow(() => {
 onShareAppMessage(() => {
   const shareInfo = {
     title: taskDetail.value?.itemTitle || "分享旅行作品",
-    path: taskId.value
-      ? `/pages-aigc/detail/detail?taskId=${encodeURIComponent(taskId.value)}`
-      : "/pages-aigc/home/home",
+    path: shareKey.value
+      ? `/pages-aigc/sharedWork/sharedWork?shareKey=${encodeURIComponent(shareKey.value)}`
+      : "/pages/index/index",
   };
   const imageUrl = sharePreviewImage.value;
 
@@ -172,8 +173,38 @@ onShareAppMessage(() => {
   return shareInfo;
 });
 
-const handleOpenSharePreview = () => {
-  sharePreviewPopup.value?.open();
+const prepareShareKey = async (showFeedback = false) => {
+  if (isPreparingShare.value || !taskId.value) return;
+  if (shareKey.value) return;
+
+  isPreparingShare.value = true;
+
+  try {
+    const res = await createAigcGeneratorTaskShare({ taskId: taskId.value });
+    const nextShareKey = String(res?.data?.shareKey || "").trim();
+    if (res?.code === 0 && nextShareKey) {
+      shareKey.value = nextShareKey;
+      if (showFeedback) {
+        showPlaceholderToast("分享已准备，请再次点击");
+      }
+      return;
+    }
+
+    if (showFeedback) {
+      showPlaceholderToast(res?.msg || "创建分享失败");
+    }
+  } catch (error) {
+    console.error("创建AIGC任务分享失败", error);
+    if (showFeedback) {
+      showPlaceholderToast("创建分享失败");
+    }
+  } finally {
+    isPreparingShare.value = false;
+  }
+};
+
+const handlePrepareShare = () => {
+  prepareShareKey(true);
 };
 
 const handleBack = () => {
diff --git a/src/pages-aigc/sharedWork/sharedWork.vue b/src/pages-aigc/sharedWork/sharedWork.vue
new file mode 100644
index 0000000..d2bf062
--- /dev/null
+++ b/src/pages-aigc/sharedWork/sharedWork.vue
@@ -0,0 +1,118 @@
+<template>
+  <view class="shared-work-page">
+    <view class="shared-work-nav">
+      <TopNavBar title="旅行作品" background="transparent" title-color="#173a5f" back-icon-color="#173a5f"
+        :align-with-menu-button="true" :z-index="3" @back="handleBack" />
+    </view>
+
+    <view class="shared-work-scroll" scroll-y>
+      <template v-if="shareDetail">
+        <video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl"
+          :poster="shareDetail.imageUrl" controls object-fit="cover" />
+        <image v-else-if="shareDetail.imageUrl" class="shared-work-media" :src="shareDetail.imageUrl" mode="widthFix" />
+
+        <view class="shared-work-meta">
+          <text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
+          <text class="shared-work-type">{{ generatorTypeText }}</text>
+        </view>
+      </template>
+    </view>
+
+    <view class="shared-work-cta-wrap">
+      <button class="shared-work-cta" hover-class="is-pressed" @tap="handleCreateOwn">
+        我也生成一个
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { checkToken } from "@/hooks/useGoLogin.js";
+import { getAigcGeneratorTaskShareDetail } from "@/request/api/AigcApi.js";
+
+const shareKey = ref("");
+const shareDetail = ref(null);
+
+const isVideo = computed(() => {
+  return Number(shareDetail.value?.generatorType) === 1 && Boolean(shareDetail.value?.videoUrl);
+});
+
+const generatorTypeText = computed(() => {
+  const generatorType = shareDetail.value?.generatorType;
+  if (Number(generatorType) === 0) return "图片版";
+  if (Number(generatorType) === 1) return "视频版";
+  return generatorType === undefined || generatorType === null || generatorType === ""
+    ? "生成作品"
+    : `类型${generatorType}`;
+});
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+const fetchShareDetail = async () => {
+  uni.showLoading({
+    title: "加载中",
+    mask: true,
+  });
+
+  try {
+    const res = await getAigcGeneratorTaskShareDetail({ shareKey: shareKey.value });
+    if (res?.code === 0 && res.data && typeof res.data === "object" && !Array.isArray(res.data)) {
+      shareDetail.value = res.data;
+      return;
+    }
+
+    shareDetail.value = null;
+    showToast(res?.msg || "获取分享作品失败");
+  } catch (error) {
+    console.error("获取AIGC分享作品失败", error);
+    shareDetail.value = null;
+    showToast("获取分享作品失败");
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+onLoad((query = {}) => {
+  shareKey.value = String(query.shareKey || "").trim();
+  if (!shareKey.value) {
+    showToast("缺少分享标识");
+    return;
+  }
+
+  fetchShareDetail();
+});
+
+const openAigcHome = () => {
+  uni.reLaunch({
+    url: "/pages-aigc/home/home",
+    fail: () => showToast("打开模板列表失败"),
+  });
+};
+
+const handleBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+    return;
+  }
+
+  openAigcHome();
+};
+
+const handleCreateOwn = async () => {
+  await checkToken();
+  openAigcHome();
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages-aigc/sharedWork/styles/index.scss b/src/pages-aigc/sharedWork/styles/index.scss
new file mode 100644
index 0000000..23b2f06
--- /dev/null
+++ b/src/pages-aigc/sharedWork/styles/index.scss
@@ -0,0 +1,116 @@
+.shared-work-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  color: #173a5f;
+  background: #c5e5f8;
+  box-sizing: border-box;
+}
+
+.shared-work-nav {
+  position: relative;
+  z-index: 3;
+  flex: 0 0 auto;
+  background: rgba(197, 229, 248, 0.96);
+}
+
+.shared-work-nav :deep(.top-nav-bar > .flex) {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.shared-work-nav :deep(.nav-bar-center text) {
+  font-size: 17px;
+  line-height: 23px;
+  font-weight: 900;
+}
+
+.shared-work-scroll {
+  flex: 1 1 0;
+  width: 100%;
+  height: 0;
+  min-height: 0;
+  padding-bottom: 104px;
+  box-sizing: border-box;
+}
+
+.shared-work-media {
+  width: 100%;
+  display: block;
+  background: #b8dced;
+}
+
+.shared-work-media.is-video {
+  height: min(500px, 66vh);
+}
+
+.shared-work-meta {
+  padding: 18px 18px 118px;
+}
+
+.shared-work-title,
+.shared-work-type {
+  display: block;
+}
+
+.shared-work-title {
+  overflow: hidden;
+  color: #173a5f;
+  font-size: 20px;
+  line-height: 27px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shared-work-type {
+  margin-top: 4px;
+  color: #0b7b60;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 800;
+}
+
+.shared-work-empty {
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shared-work-cta-wrap {
+  position: fixed;
+  z-index: 4;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
+  background: linear-gradient(180deg, rgba(197, 229, 248, 0) 0%, #c5e5f8 34%);
+  box-sizing: border-box;
+}
+
+.shared-work-cta {
+  width: 100%;
+  height: 54px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: #20c99a;
+  color: #173a5f;
+  font-size: 16px;
+  line-height: 54px;
+  font-weight: 900;
+  box-shadow: 0 10px 22px rgba(32, 201, 154, 0.2);
+}
+
+.shared-work-cta::after {
+  border: 0;
+}
+
+.shared-work-cta.is-pressed {
+  opacity: 0.84;
+}
diff --git a/src/pages.json b/src/pages.json
index ee05b64..7b81a9c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -182,6 +182,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "sharedWork/sharedWork",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "recharge/recharge",
           "style": {
diff --git a/src/request/api/AigcApi.js b/src/request/api/AigcApi.js
index 49cfe2d..ee4c224 100644
--- a/src/request/api/AigcApi.js
+++ b/src/request/api/AigcApi.js
@@ -36,6 +36,14 @@ function getCreditLedgerPage(args) {
   return request.post("/hotelBiz/credit/ledger/page", args);
 }
 
+function createAigcGeneratorTaskShare(args) {
+  return request.post("/hotelBiz/aigcGeneratorTask/share/create", args);
+}
+
+function getAigcGeneratorTaskShareDetail(args) {
+  return request.post("/hotelBiz/aigcGeneratorTask/share/detail", args, { noToken: true });
+}
+
 export {
   getAigcTemplateList,
   getAigcTemplateItemList,
@@ -46,4 +54,6 @@ export {
   getRechargeOptions,
   rechargeCredit,
   getCreditLedgerPage,
+  createAigcGeneratorTaskShare,
+  getAigcGeneratorTaskShareDetail,
 };