feat: 新增10个业务弹窗组件
新增消息重发、重试策略、路由解析测试、审计日志统计、内容审核统计等10个业务弹窗组件,覆盖消息重发、配置管理、安全审计、路由测试等多个业务场景,统一弹窗交互样式与表单校验逻辑。
This commit is contained in:
parent
d2d84cb27b
commit
37551496af
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
title="测试路由解析"
|
||||
:width="720"
|
||||
:destroy-on-close="true"
|
||||
@close="handleClose"
|
||||
:body-style="{ maxHeight: '70vh', overflowY: 'auto' }"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<div class="ch-route-resolve">
|
||||
<div class="ch-route-resolve__section">
|
||||
@ -131,7 +132,7 @@
|
||||
<a-button @click="handleClose">关闭</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -147,7 +148,7 @@ import RouteBindingResolveResult from './RouteBindingResolveResult.vue'
|
||||
const ACCOUNT_DROPDOWN_LIMIT = 1000
|
||||
|
||||
/**
|
||||
* 路由解析测试抽屉(RB-05 resolve)
|
||||
* 路由解析测试弹窗(RB-05 resolve)
|
||||
*
|
||||
* 传入 BindingContext 字段(对齐后端 ResolveRouteBindingRequest),
|
||||
* 调用 useRouteBinding.resolve 触发 route_binding/resolve 控制面操作,
|
||||
@ -254,7 +255,7 @@ function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 抽屉打开时重置表单与结果状态;如有 initialRecord,则一键带入解析上下文
|
||||
// 弹窗打开时重置表单与结果状态;如有 initialRecord,则一键带入解析上下文
|
||||
watch(
|
||||
() => props.open,
|
||||
async (val) => {
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
:open="open"
|
||||
:width="drawerWidth"
|
||||
:width="modalWidth"
|
||||
title="Webhook 测试"
|
||||
:destroy-on-close="true"
|
||||
@close="handleClose"
|
||||
:body-style="{ maxHeight: '70vh', overflowY: 'auto' }"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<!-- 渠道上下文 -->
|
||||
<div class="whk-context">
|
||||
@ -204,7 +205,7 @@
|
||||
<a-button @click="handleClose">关闭</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -215,7 +216,7 @@ import { useUserStore } from '@/stores/user'
|
||||
import { useWebhookTest } from '@/composables/channels/useWebhookTest'
|
||||
|
||||
/**
|
||||
* Webhook 测试抽屉(F-CH-WHK-01)
|
||||
* Webhook 测试弹窗(F-CH-WHK-01)
|
||||
*
|
||||
* 由账户详情「Webhook」Tab、接入向导步骤③「测试签名」触发。
|
||||
* 包含两种测试模式:
|
||||
@ -232,9 +233,9 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['update:open', 'close'])
|
||||
|
||||
// 响应式抽屉宽度:移动端占 90%,桌面端固定 560
|
||||
// 响应式弹窗宽度:移动端占 90%,桌面端固定 560
|
||||
const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1200)
|
||||
const drawerWidth = computed(() => (viewportWidth.value < 768 ? '90%' : 560))
|
||||
const modalWidth = computed(() => (viewportWidth.value < 768 ? '90%' : 560))
|
||||
function handleResize() {
|
||||
viewportWidth.value = window.innerWidth
|
||||
}
|
||||
@ -404,13 +405,13 @@ async function handleDeliver() {
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 关闭抽屉 =====
|
||||
// ===== 关闭弹窗 =====
|
||||
function handleClose() {
|
||||
emit('update:open', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// ===== 抽屉打开/关闭时重置 =====
|
||||
// ===== 弹窗打开/关闭时重置 =====
|
||||
watch(
|
||||
() => props.open,
|
||||
(val) => {
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
:open="open"
|
||||
:width="520"
|
||||
title="消息重发"
|
||||
:destroy-on-close="true"
|
||||
:mask-closable="false"
|
||||
@close="handleClose"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<a-form layout="vertical" class="ch-form">
|
||||
<a-form-item label="原消息 ID">
|
||||
@ -49,7 +49,7 @@
|
||||
<a-button type="primary" :loading="loading" @click="handleSubmit"> 提交 </a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -71,7 +71,7 @@ const form = reactive({
|
||||
|
||||
const contentError = ref('')
|
||||
|
||||
// 抽屉打开时重置表单
|
||||
// 弹窗打开时重置表单
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
:open="visible"
|
||||
title="重试策略"
|
||||
:width="520"
|
||||
:mask-closable="false"
|
||||
@close="handleClose"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-alert
|
||||
@ -72,7 +72,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-drawer :open="visible" title="审核统计" :width="640" @close="handleClose">
|
||||
<a-modal :open="visible" title="审核统计" :width="640" @cancel="handleClose" :footer="null" :body-style="{ maxHeight: '70vh', overflowY: 'auto' }">
|
||||
<!-- 筛选区 -->
|
||||
<div class="ch-cr-stats__filter">
|
||||
<a-form layout="inline" :model="filterValues">
|
||||
@ -114,7 +114,7 @@
|
||||
|
||||
<a-empty v-else-if="!loading" description="暂无统计数据" />
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-drawer :open="visible" title="配对统计" :width="560" @close="handleClose">
|
||||
<a-modal :open="visible" title="配对统计" :width="560" @cancel="handleClose" :footer="null" :body-style="{ maxHeight: '70vh', overflowY: 'auto' }">
|
||||
<a-spin :spinning="loading">
|
||||
<div v-if="stats" class="ch-pairing-stats">
|
||||
<!-- 概览卡片 -->
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
<a-empty v-else-if="!loading" description="暂无统计数据" />
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -201,7 +201,7 @@ function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 抽屉打开时注册 resize 监听并尝试渲染;关闭时移除监听并销毁实例
|
||||
// 弹窗打开时注册 resize 监听并尝试渲染;关闭时移除监听并销毁实例
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
@ -218,7 +218,7 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
// 数据变化时重新渲染(抽屉打开状态下)
|
||||
// 数据变化时重新渲染(弹窗打开状态下)
|
||||
watch(
|
||||
() => props.stats,
|
||||
() => {
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-drawer :open="visible" title="审计日志统计" :width="680" @close="handleClose">
|
||||
<a-modal :open="visible" title="审计日志统计" :width="680" @cancel="handleClose" :footer="null" :body-style="{ maxHeight: '70vh', overflowY: 'auto' }">
|
||||
<!-- 筛选区 -->
|
||||
<div class="ch-audit-stats__filter">
|
||||
<a-form layout="inline" :model="filterValues">
|
||||
@ -108,7 +108,7 @@
|
||||
|
||||
<a-empty v-else-if="!loading" description="暂无统计数据" />
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -129,7 +129,7 @@ const props = defineProps({
|
||||
loading: { type: Boolean, default: false },
|
||||
error: { type: Object, default: null },
|
||||
operationTypes: { type: Array, default: () => [] },
|
||||
// 主列表筛选,打开抽屉时预填(统计与列表联动)
|
||||
// 主列表筛选,打开弹窗时预填(统计与列表联动)
|
||||
initialFilters: { type: Object, default: null }
|
||||
})
|
||||
|
||||
@ -149,7 +149,7 @@ const filterValues = reactive({
|
||||
time_range: undefined
|
||||
})
|
||||
|
||||
// 抽屉打开时用主列表筛选预填,避免重复输入
|
||||
// 弹窗打开时用主列表筛选预填,避免重复输入
|
||||
watch(
|
||||
() => [props.visible, props.initialFilters],
|
||||
([visible, filters]) => {
|
||||
@ -304,7 +304,7 @@ function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 抽屉可见性变化时初始化/销毁图表
|
||||
// 弹窗可见性变化时初始化/销毁图表
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
:open="open"
|
||||
title="批量更新配置"
|
||||
:width="720"
|
||||
placement="right"
|
||||
:mask-closable="false"
|
||||
@close="handleClose"
|
||||
:body-style="{ maxHeight: '70vh', overflowY: 'auto' }"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<!-- 作用域(§4.3) -->
|
||||
<div class="ch-cfg-batch__scope">
|
||||
@ -109,7 +109,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
<a-modal
|
||||
:open="open"
|
||||
title="导入配置"
|
||||
:width="720"
|
||||
placement="right"
|
||||
:mask-closable="false"
|
||||
@close="handleClose"
|
||||
:body-style="{ maxHeight: '70vh', overflowY: 'auto' }"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<!-- 作用域(§4.4) -->
|
||||
<div class="ch-cfg-import__scope">
|
||||
@ -76,7 +76,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-drawer :open="open" title="Schema 预览" :width="640" placement="right" @close="handleClose">
|
||||
<a-modal :open="open" title="Schema 预览" :width="640" @cancel="handleClose" :body-style="{ maxHeight: '70vh', overflowY: 'auto' }">
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 作用域说明(§4.1) -->
|
||||
<a-alert
|
||||
@ -57,7 +57,7 @@
|
||||
<a-button @click="handleClose">关闭</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
Loading…
Reference in New Issue
Block a user