Browse Source

feat: 全局 Toast/Confirm 切换到 TDesign

uiStore 封装 MessagePlugin/DialogPlugin,移除 App 自定义浮层。
main
xiaosi 3 weeks ago
parent
commit
812e7e3f23
  1. 17
      src/App.vue
  2. 2
      src/main.js
  3. 68
      src/stores/modules/uiStore.js

17
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>

2
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)

68
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 }
})

Loading…
Cancel
Save