From 3cb06033e2c1ed26e031d0e93d1f383edba541ae Mon Sep 17 00:00:00 2001
From: zerosaturation <zerosaturation@163.com>
Date: Mon, 13 Apr 2026 11:30:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/ConfirmModal.vue    | 143 ++++++++++++++++++++++++
 frontend/pages/castlove/create.vue      |  55 ++++++++-
 frontend/pages/castlove/index.vue       |  55 ++++++++-
 frontend/pages/discover/create-feed.vue |  65 ++++++++++-
 frontend/pages/profile/selectRole.vue   |  55 ++++++++-
 frontend/pages/square/debug-grid.vue    |  58 +++++++++-
 frontend/pages/square/square.vue        |   4 +-
 7 files changed, 421 insertions(+), 14 deletions(-)
 create mode 100644 frontend/components/ConfirmModal.vue

diff --git a/frontend/components/ConfirmModal.vue b/frontend/components/ConfirmModal.vue
new file mode 100644
index 0000000..bfa8a6d
--- /dev/null
+++ b/frontend/components/ConfirmModal.vue
@@ -0,0 +1,143 @@
+<template>
+  <view v-show="visible" class="modal-overlay" :class="{ 'modal-visible': visible }" @tap="handleCancel">
+    <view class="modal-box" @tap.stop>
+      <!-- 标题 -->
+      <view v-if="title" class="modal-title">
+        <text>{{ title }}</text>
+      </view>
+
+      <!-- 内容 -->
+      <view class="modal-body">
+        <text class="modal-content">{{ content }}</text>
+      </view>
+
+      <!-- 按钮区 -->
+      <view class="modal-actions">
+        <view v-if="showCancel" class="btn btn-cancel" @tap="handleCancel">
+          <text>{{ cancelText }}</text>
+        </view>
+        <view class="btn btn-confirm" @tap="handleConfirm">
+          <text>{{ confirmText }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  confirmText: {
+    type: String,
+    default: '确认'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  showCancel: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['confirm', 'cancel'])
+
+function handleConfirm() {
+  emit('confirm', { confirm: true })
+}
+
+function handleCancel() {
+  emit('cancel', { confirm: false })
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+
+.modal-overlay.modal-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.modal-box {
+  width: 560rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+  padding: 48rpx 40rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modal-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 32rpx;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 40rpx;
+}
+
+.modal-content {
+  font-size: 28rpx;
+  color: #555;
+  text-align: center;
+  white-space: pre-line;
+}
+
+.modal-actions {
+  width: 100%;
+  display: flex;
+  gap: 24rpx;
+}
+
+.btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+}
+
+.btn-cancel {
+  background: #f0f0f0;
+  color: #666;
+}
+
+.btn-confirm {
+  background: linear-gradient(to right, #F08399, #B94E73);
+  color: #fff;
+}
+</style>
diff --git a/frontend/pages/castlove/create.vue b/frontend/pages/castlove/create.vue
index 428f984..2573389 100644
--- a/frontend/pages/castlove/create.vue
+++ b/frontend/pages/castlove/create.vue
@@ -86,16 +86,69 @@
 		</scroll-view>
 
 	</view>
+
+	<!-- 通用确认弹窗 -->
+	<ConfirmModal
+		:visible="confirmModal.visible"
+		:title="confirmModal.title"
+		:content="confirmModal.content"
+		:confirmText="confirmModal.confirmText"
+		:cancelText="confirmModal.cancelText"
+		:showCancel="confirmModal.showCancel"
+		@confirm="onConfirmModal"
+		@cancel="onCancelModal"
+	/>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import { getOssSignatureApi, createMintOrderApi } from '@/utils/api.js';
+import ConfirmModal from '@/components/ConfirmModal.vue';
 
 // 获取页面参数
 const pageType = ref('');
 const pageName = ref('');
 
+// 通用确认弹窗状态
+const confirmModal = ref({
+	visible: false,
+	title: '',
+	content: '',
+	confirmText: '确认',
+	cancelText: '取消',
+	showCancel: true,
+	confirmCallback: null
+});
+
+// 弹窗确认回调
+const onConfirmModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: true });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 弹窗取消回调
+const onCancelModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: false });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 显示通用确认弹窗
+const showConfirmModal = (options) => {
+	confirmModal.value = {
+		visible: true,
+		title: options.title || '',
+		content: options.content || '',
+		confirmText: options.confirmText || '确认',
+		cancelText: options.cancelText || '取消',
+		showCancel: options.showCancel !== false,
+		confirmCallback: options.success || null
+	};
+};
+
 // 表单数据
 const uploadedImage = ref('');
 const uploadedImageBase64 = ref('');
@@ -419,7 +472,7 @@ const uploadImageToOss = async (base64Data, ossData) => {
 // 返回按钮
 const handleBack = async () => {
 	if (uploadedImage.value || nftInfo.value || aiDescription.value) {
-		uni.showModal({
+		showConfirmModal({
 			title: '提示',
 			content: '确定要返回吗？未保存的数据将会丢失',
 			success: async (res) => {
diff --git a/frontend/pages/castlove/index.vue b/frontend/pages/castlove/index.vue
index f4f1971..c593f15 100644
--- a/frontend/pages/castlove/index.vue
+++ b/frontend/pages/castlove/index.vue
@@ -85,16 +85,69 @@
 		
 		<BottomNav :activeTab="2" @update:activeTab="handleTabChange" :isExpanded="navExpanded" @update:isExpanded="navExpanded = $event" />
 	</view>
+
+	<!-- 通用确认弹窗 -->
+	<ConfirmModal
+		:visible="confirmModal.visible"
+		:title="confirmModal.title"
+		:content="confirmModal.content"
+		:confirmText="confirmModal.confirmText"
+		:cancelText="confirmModal.cancelText"
+		:showCancel="confirmModal.showCancel"
+		@confirm="onConfirmModal"
+		@cancel="onCancelModal"
+	/>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import Header from "../components/Header.vue";
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import BottomNav from "../components/BottomNav.vue";
 import { getOssSignatureApi, deleteMintOrderApi } from '@/utils/api.js';
 
 const navExpanded = ref(false);
 
+// 通用确认弹窗状态
+const confirmModal = ref({
+	visible: false,
+	title: '',
+	content: '',
+	confirmText: '确认',
+	cancelText: '取消',
+	showCancel: true,
+	confirmCallback: null
+});
+
+// 弹窗确认回调
+const onConfirmModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: true });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 弹窗取消回调
+const onCancelModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: false });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 显示通用确认弹窗
+const showConfirmModal = (options) => {
+	confirmModal.value = {
+		visible: true,
+		title: options.title || '',
+		content: options.content || '',
+		confirmText: options.confirmText || '确认',
+		cancelText: options.cancelText || '取消',
+		showCancel: options.showCancel !== false,
+		confirmCallback: options.success || null
+	};
+};
+
 // 表单数据
 const uploadedImage = ref(''); // 本地预览路径
 const uploadedImageUrl = ref(''); // OSS完整URL
@@ -436,7 +489,7 @@ const selectMaterialType = (index) => {
 const handleBack = async () => {
 	// 如果有未保存的数据，提示用户
 	if (uploadedImage.value || nftName.value || nftEvent.value || nftRemark.value) {
-		uni.showModal({
+		showConfirmModal({
 			title: '提示',
 			content: '确定要返回吗？未保存的数据将会丢失',
 			success: async (res) => {
diff --git a/frontend/pages/discover/create-feed.vue b/frontend/pages/discover/create-feed.vue
index bcebf3f..1d6c380 100644
--- a/frontend/pages/discover/create-feed.vue
+++ b/frontend/pages/discover/create-feed.vue
@@ -71,10 +71,23 @@
 			</view>
 		</view>
 	</view>
+
+	<!-- 通用确认弹窗 -->
+	<ConfirmModal
+		:visible="confirmModal.visible"
+		:title="confirmModal.title"
+		:content="confirmModal.content"
+		:confirmText="confirmModal.confirmText"
+		:cancelText="confirmModal.cancelText"
+		:showCancel="confirmModal.showCancel"
+		@confirm="onConfirmModal"
+		@cancel="onCancelModal"
+	/>
 </template>
 
 <script setup>
 import { ref, onMounted, nextTick } from 'vue';
+import ConfirmModal from '@/components/ConfirmModal.vue';
 
 // 梦境输入
 const dreamInput = ref('');
@@ -291,7 +304,7 @@ const initRecorderManager = () => {
 			if (err.errMsg && err.errMsg.includes('permission')) {
 				errorMsg = '请授予录音权限';
 				// 显示权限设置提示
-				uni.showModal({
+				showConfirmModal({
 					title: '需要录音权限',
 					content: '请在设置中开启录音权限后重试',
 					confirmText: '去设置',
@@ -363,7 +376,7 @@ const startRecording = () => {
 	} catch (error) {
 		console.error('[CreateFeed] 开始录音失败:', error);
 		stopSpeechRecognition();
-		uni.showModal({
+		showConfirmModal({
 			title: '录音失败',
 			content: '请确保已授予录音权限',
 			confirmText: '去设置',
@@ -533,7 +546,7 @@ const handleLongPress = () => {
 	// #endif
 	
 	// #ifndef APP-PLUS
-	uni.showModal({
+	showConfirmModal({
 		title: '提示',
 		content: '语音输入功能仅支持 App 端使用',
 		showCancel: false
@@ -549,7 +562,7 @@ const handleTouchStart = () => {
 	// #endif
 	
 	// #ifndef APP-PLUS
-	uni.showModal({
+	showConfirmModal({
 		title: '提示',
 		content: '语音输入功能仅支持 App 端使用',
 		showCancel: false
@@ -562,6 +575,46 @@ let isStopping = false;
 // 保存录音时长用于 onStop 回调
 let savedDuration = 0;
 
+// 通用确认弹窗状态
+const confirmModal = ref({
+	visible: false,
+	title: '',
+	content: '',
+	confirmText: '确认',
+	cancelText: '取消',
+	showCancel: true,
+	confirmCallback: null
+});
+
+// 弹窗确认回调
+const onConfirmModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: true });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 弹窗取消回调
+const onCancelModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: false });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 显示通用确认弹窗
+const showConfirmModal = (options) => {
+	confirmModal.value = {
+		visible: true,
+		title: options.title || '',
+		content: options.content || '',
+		confirmText: options.confirmText || '确认',
+		cancelText: options.cancelText || '取消',
+		showCancel: options.showCancel !== false,
+		confirmCallback: options.success || null
+	};
+};
+
 // 松开停止录音
 const handleTouchEnd = () => {
 	console.log('[CreateFeed] ========== touchend 触发 ==========');
@@ -658,7 +711,7 @@ const handleVoiceInput = () => {
 	// #endif
 	
 	// #ifndef APP-PLUS
-	uni.showModal({
+	showConfirmModal({
 		title: '提示',
 		content: '语音输入功能仅支持 App 端使用',
 		showCancel: false
@@ -712,7 +765,7 @@ const handleInputConfirm = () => {
 	}
 	
 	// 显示确认信息
-	uni.showModal({
+	showConfirmModal({
 		title: '确认发送',
 		content: `藏品名称: ${castloveFormData.value.name}\nAI描述: ${fullText}`,
 		success: (res) => {
diff --git a/frontend/pages/profile/selectRole.vue b/frontend/pages/profile/selectRole.vue
index 2cf12cf..f231c36 100644
--- a/frontend/pages/profile/selectRole.vue
+++ b/frontend/pages/profile/selectRole.vue
@@ -53,11 +53,24 @@
 			</view>
 		</view>
 	</view>
+
+	<!-- 通用确认弹窗 -->
+	<ConfirmModal
+		:visible="confirmModal.visible"
+		:title="confirmModal.title"
+		:content="confirmModal.content"
+		:confirmText="confirmModal.confirmText"
+		:cancelText="confirmModal.cancelText"
+		:showCancel="confirmModal.showCancel"
+		@confirm="onConfirmModal"
+		@cancel="onCancelModal"
+	/>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
+import ConfirmModal from '@/components/ConfirmModal.vue';
 
 const props = defineProps({
 	isWelcome: {
@@ -75,6 +88,46 @@ const currentIndex = ref(0);
 const startX = ref(0);
 const startY = ref(0);
 const isDragging = ref(false);
+
+// 通用确认弹窗状态
+const confirmModal = ref({
+	visible: false,
+	title: '',
+	content: '',
+	confirmText: '确认',
+	cancelText: '取消',
+	showCancel: true,
+	confirmCallback: null
+});
+
+// 弹窗确认回调
+const onConfirmModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: true });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 弹窗取消回调
+const onCancelModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: false });
+	}
+	confirmModal.value.visible = false;
+};
+
+// 显示通用确认弹窗
+const showConfirmModal = (options) => {
+	confirmModal.value = {
+		visible: true,
+		title: options.title || '',
+		content: options.content || '',
+		confirmText: options.confirmText || '确认',
+		cancelText: options.cancelText || '取消',
+		showCancel: options.showCancel !== false,
+		confirmCallback: options.success || null
+	};
+};
 const stars = ref([
 	{
 		id: 1,
@@ -269,7 +322,7 @@ const handleNext = async () => {
 
 		// 处理昵称已存在的情况（409错误）
 		if (error.code === 409 || error.message.includes('昵称') || error.message.includes('已存在')) {
-			uni.showModal({
+			showConfirmModal({
 				title: '昵称已存在',
 				content: '该昵称已被使用，请返回修改昵称',
 				showCancel: true,
diff --git a/frontend/pages/square/debug-grid.vue b/frontend/pages/square/debug-grid.vue
index e8bcc53..c9fa7db 100644
--- a/frontend/pages/square/debug-grid.vue
+++ b/frontend/pages/square/debug-grid.vue
@@ -157,11 +157,24 @@
       </view>
     </view>
   </view>
+
+  <!-- 通用确认弹窗 -->
+  <ConfirmModal
+    :visible="confirmModal.visible"
+    :title="confirmModal.title"
+    :content="confirmModal.content"
+    :confirmText="confirmModal.confirmText"
+    :cancelText="confirmModal.cancelText"
+    :showCancel="confirmModal.showCancel"
+    @confirm="onConfirmModal"
+    @cancel="onCancelModal"
+  />
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
 import { GRID_CONFIG, generateGridCoordinates, IMAGE_W, IMAGE_H } from './config/cabin.js'
+import ConfirmModal from '@/components/ConfirmModal.vue'
 
 const config = ref(JSON.parse(JSON.stringify(GRID_CONFIG)))
 const selectedIndex = ref(null)
@@ -175,7 +188,46 @@ const scale = ref(1)
 // 滑动相关
 const bgOffsetX = ref(0)
 let touchStartX = 0
-let lastMoveX = 0
+
+// 通用确认弹窗状态
+const confirmModal = ref({
+	visible: false,
+	title: '',
+	content: '',
+	confirmText: '确认',
+	cancelText: '取消',
+	showCancel: true,
+	confirmCallback: null
+})
+
+// 弹窗确认回调
+const onConfirmModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: true })
+	}
+	confirmModal.value.visible = false
+}
+
+// 弹窗取消回调
+const onCancelModal = () => {
+	if (confirmModal.value.confirmCallback) {
+		confirmModal.value.confirmCallback({ confirm: false })
+	}
+	confirmModal.value.visible = false
+}
+
+// 显示通用确认弹窗
+const showConfirmModal = (options) => {
+	confirmModal.value = {
+		visible: true,
+		title: options.title || '',
+		content: options.content || '',
+		confirmText: options.confirmText || '确认',
+		cancelText: options.cancelText || '取消',
+		showCancel: options.showCancel !== false,
+		confirmCallback: options.success || null
+	}
+}
 
 // 原始坐标（未缩放）
 const originalCoords = computed(() => {
@@ -354,7 +406,7 @@ const exportConfig = () => {
     console.log('}')
   }
   
-  uni.showModal({
+  showConfirmModal({
     title: '配置已导出',
     content: '请查看控制台输出，复制到 config/cabin.js',
     showCancel: false
@@ -362,7 +414,7 @@ const exportConfig = () => {
 }
 
 const resetConfig = () => {
-  uni.showModal({
+  showConfirmModal({
     title: '确认重置',
     content: '将重置所有参数和调整，是否继续？',
     success: (res) => {
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index c61ca37..4acdd30 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -181,8 +181,8 @@ const handleCabinClick = (cabin) => {
   if (!cabin.userId || !cabin.showNickname) return
   
   uni.navigateTo({
-    url: cabin.isMine 
-      ? '/pages/exhibition/exhibition' 
+    url: (cabin.isMine || cabin.nickname === currentUserNickname.value)
+      ? '/pages/exhibition/exhibition'
       : `/pages/exhibition/exhibition?target_uid=${cabin.userId}`,
   })
 }