From 812e7e3f230230caff9c6711c414fe0e16f40ae2 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Fri, 28 Aug 2026 19:06:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=20Toast/Confirm=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=88=B0=20TDesign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

uiStore 封装 MessagePlugin/DialogPlugin，移除 App 自定义浮层。
---
 src/App.vue                   | 17 ---------
 src/main.js                   |  2 ++
 src/stores/modules/uiStore.js | 68 ++++++++++++++++++++++-------------
 3 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e809c43..87a7d19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,21 +45,4 @@
     <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></symbol>
   </svg>
   <router-view />
-
-  <div class="modal-backdrop" :class="{ open: ui.confirmVisible }" :aria-hidden="!ui.confirmVisible">
-    <div class="modal" role="dialog" aria-modal="true">
-      <div class="modal-icon"><svg><use href="#i-alert"/></svg></div>
-      <h3>{{ ui.confirmTitle }}</h3>
-      <p>{{ ui.confirmDesc }}</p>
-      <div class="safety-checks"><span v-for="c in ui.confirmChecks" :key="c"><i></i>{{ c }}</span></div>
-      <div class="modal-actions"><button class="cancel" @click="ui.resolveConfirm(false)">取消</button><button class="confirm" @click="ui.resolveConfirm(true)">确认执行</button></div>
-    </div>
-  </div>
-
-  <div class="toast" :class="{ show: ui.toastVisible }"><span></span><strong>{{ ui.toastMsg }}</strong></div>
 </template>
-
-<script setup>
-import { useUiStore } from '@/stores/modules/uiStore'
-const ui = useUiStore()
-</script>
diff --git a/src/main.js b/src/main.js
index 7adf515..ae5dbc0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,8 @@ import App from './App.vue'
 import router from './router'
 import { setupStore } from './stores'
 import './styles/prototype.css'
+import 'tdesign-vue-next/es/message/style/css.js'
+import 'tdesign-vue-next/es/dialog/style/css.js'
 
 const app = createApp(App)
 setupStore(app)
diff --git a/src/stores/modules/uiStore.js b/src/stores/modules/uiStore.js
index 3331569..3b31f28 100644
--- a/src/stores/modules/uiStore.js
+++ b/src/stores/modules/uiStore.js
@@ -1,33 +1,53 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next'
+import { h } from 'vue'
 
 export const useUiStore = defineStore('ui', () => {
-  const toastMsg = ref('')
-  const toastVisible = ref(false)
-  let toastTimer = null
   function toast(message) {
-    toastMsg.value = message
-    toastVisible.value = true
-    clearTimeout(toastTimer)
-    toastTimer = setTimeout(() => { toastVisible.value = false }, 2200)
+    MessagePlugin.info({ content: String(message ?? ''), duration: 2200 })
   }
 
-  const confirmVisible = ref(false)
-  const confirmTitle = ref('')
-  const confirmDesc = ref('')
-  const confirmChecks = ref([])
-  let confirmResolve = null
-  function confirm(title, desc = '系统将校验设备状态和流程互斥条件，确认通过后提交本次操作。', checks = ['设备在线', '无活动告警', '指令互斥检查']) {
-    confirmTitle.value = title
-    confirmDesc.value = desc
-    confirmChecks.value = checks
-    confirmVisible.value = true
-    return new Promise((resolve) => { confirmResolve = resolve })
-  }
-  function resolveConfirm(ok) {
-    confirmVisible.value = false
-    if (confirmResolve) { confirmResolve(ok); confirmResolve = null }
+  function confirm(
+    title,
+    desc = '系统将校验设备状态和流程互斥条件，确认通过后提交本次操作。',
+    checks = ['设备在线', '无活动告警', '指令互斥检查']
+  ) {
+    return new Promise((resolve) => {
+      const list = Array.isArray(checks) ? checks.filter(Boolean) : []
+      const body = list.length
+        ? () =>
+            h('div', { class: 'ui-confirm-body' }, [
+              h('p', desc),
+              h(
+                'div',
+                { class: 'ui-confirm-checks' },
+                list.map((item) => h('div', { class: 'ui-confirm-check' }, item))
+              ),
+            ])
+        : desc
+
+      const dialog = DialogPlugin.confirm({
+        header: title,
+        body,
+        confirmBtn: '确认执行',
+        cancelBtn: '取消',
+        theme: 'warning',
+        onConfirm: () => {
+          dialog.hide()
+          resolve(true)
+        },
+        onClose: () => {
+          resolve(false)
+        },
+        onCloseBtnClick: () => {
+          resolve(false)
+        },
+        onCancel: () => {
+          resolve(false)
+        },
+      })
+    })
   }
 
-  return { toastMsg, toastVisible, toast, confirmVisible, confirmTitle, confirmDesc, confirmChecks, confirm, resolveConfirm }
+  return { toast, confirm }
 })