feat：管理页删除确认接入自定义弹窗，标签文字不换行

mini-program/src/pages/onboarding/tag-manage.vue

@@ -42,6 +42,15 @@
         </view>
       </view>
     </scroll-view>
+
+    <TagDialog
+      v-model:visible="dialogVisible"
+      mode="confirm"
+      :title="dialogTitle"
+      :content="dialogContent"
+      @confirm="onDialogConfirm"
+      @cancel="onDialogCancel"
+    />
   </view>
 </template>
 
@@ -49,11 +58,16 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useAppStore } from '../../stores/app.js'
 import { useMenuButtonSafeArea } from '../../composables/useMenuButtonSafeArea.js'
+import TagDialog from '../../components/TagDialog.vue'
 
 const store = useAppStore()
 const { capsuleTopReservePx } = useMenuButtonSafeArea({ extraTopPx: 2 })
 
 const type = ref('personality')
+const dialogVisible = ref(false)
+const dialogTitle = ref('确认删除')
+const dialogContent = ref('')
+const pendingTag = ref(null)
 const library = ref([])
 const selected = ref([])
 const swipeOffsets = reactive({})
@@ -125,17 +139,31 @@ const onTouchEnd = (event, index) => {
 }
 
 /**
- * 删除确认
+ * 打开删除确认弹窗
  */
 const confirmDelete = (tag) => {
-  uni.showModal({
+  pendingTag.value = tag
-    title: '确认删除',
+  dialogContent.value = `确定删除「${tag}」吗？删除后不可恢复`
-    content: `确定删除「${tag}」吗？删除后不可恢复`,
+  dialogVisible.value = true
-    success: (res) => {
+}
-      if (!res.confirm) return
+
-      deleteTag(tag)
+/**
-    }
+ * 弹窗确认回调
-  })
+ */
+const onDialogConfirm = () => {
+  if (pendingTag.value) {
+    deleteTag(pendingTag.value)
+    pendingTag.value = null
+  }
+  dialogVisible.value = false
+}
+
+/**
+ * 弹窗取消回调
+ */
+const onDialogCancel = () => {
+  pendingTag.value = null
+  dialogVisible.value = false
 }
 
 /**
@@ -311,6 +339,9 @@ onMounted(() => {
 .tag-text {
   color: rgba(255, 255, 255, 0.9);
   font-size: 26rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tag-row-delete {