feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · ConfirmModal(普通 H5)</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="ConfirmModal.css" />
|
||||
<style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="open">删除确认</button>
|
||||
|
||||
<div class="aa-modal-mask" id="mask" style="display:none">
|
||||
<div class="aa-confirm is-danger">
|
||||
<div class="aa-confirm-head">
|
||||
<span class="aa-confirm-icon">!</span>
|
||||
<div class="aa-confirm-title">删除该成员?</div>
|
||||
</div>
|
||||
<div class="aa-confirm-content">删除后该成员将无法访问系统,且不可恢复。</div>
|
||||
<label class="aa-confirm-extra"><input type="checkbox" id="dont" /> 不再提示</label>
|
||||
<div class="aa-confirm-footer">
|
||||
<button class="aa-confirm-btn" id="cancel">取消</button>
|
||||
<button class="aa-confirm-btn danger" id="ok">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var mask = document.getElementById('mask');
|
||||
document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };
|
||||
document.getElementById('cancel').onclick = function () { mask.style.display = 'none'; };
|
||||
document.getElementById('ok').onclick = function () {
|
||||
alert('已删除' + (document.getElementById('dont').checked ? '(不再提示)' : ''));
|
||||
mask.style.display = 'none';
|
||||
};
|
||||
mask.addEventListener('click', function (e) { if (e.target === mask) mask.style.display = 'none'; });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
import React, { useState } from 'react';
|
||||
import './ConfirmModal.css';
|
||||
|
||||
export default function ConfirmModal({
|
||||
visible = false, title = '确认操作', content = '', confirmType = 'danger',
|
||||
confirmText = '确定', cancelText = '取消', loading = false, dontAsk = false,
|
||||
onConfirm, onCancel
|
||||
}) {
|
||||
const [checked, setChecked] = useState(false);
|
||||
if (!visible) return null;
|
||||
return (
|
||||
<div className="aa-modal-mask" onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
|
||||
<div className={`aa-confirm ${confirmType === 'danger' ? 'is-danger' : 'is-primary'}`}>
|
||||
<div className="aa-confirm-head">
|
||||
<span className="aa-confirm-icon">!</span>
|
||||
<div className="aa-confirm-title">{title}</div>
|
||||
</div>
|
||||
<div className="aa-confirm-content">{content}</div>
|
||||
{dontAsk ? (
|
||||
<label className="aa-confirm-extra">
|
||||
<input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} /> 不再提示
|
||||
</label>
|
||||
) : null}
|
||||
<div className="aa-confirm-footer">
|
||||
<button className="aa-confirm-btn" disabled={loading} onClick={onCancel}>{cancelText}</button>
|
||||
<button
|
||||
className={`aa-confirm-btn ${confirmType === 'danger' ? 'danger' : 'primary'}`}
|
||||
disabled={loading}
|
||||
onClick={() => onConfirm && onConfirm(checked)}
|
||||
>
|
||||
{loading ? '处理中…' : confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="aa-modal-mask" v-if="visible" @click.self="$emit('cancel')">
|
||||
<div class="aa-confirm" :class="confirmType === 'danger' ? 'is-danger' : 'is-primary'">
|
||||
<div class="aa-confirm-head">
|
||||
<span class="aa-confirm-icon">!</span>
|
||||
<div class="aa-confirm-title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="aa-confirm-content">{{ content }}</div>
|
||||
<label v-if="dontAsk" class="aa-confirm-extra">
|
||||
<input type="checkbox" v-model="dontAskChecked" /> 不再提示
|
||||
</label>
|
||||
<div class="aa-confirm-footer">
|
||||
<button class="aa-confirm-btn" :disabled="loading" @click="$emit('cancel')">{{ cancelText }}</button>
|
||||
<button class="aa-confirm-btn" :class="confirmType === 'danger' ? 'danger' : 'primary'"
|
||||
:disabled="loading" @click="$emit('confirm', dontAskChecked)">
|
||||
{{ loading ? '处理中…' : confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaConfirmModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
title: { type: String, default: '确认操作' },
|
||||
content: { type: String, default: '' },
|
||||
confirmType: { type: String, default: 'danger' },
|
||||
confirmText: { type: String, default: '确定' },
|
||||
cancelText: { type: String, default: '取消' },
|
||||
loading: { type: Boolean, default: false },
|
||||
dontAsk: { type: Boolean, default: false }
|
||||
},
|
||||
data: function () { return { dontAskChecked: false }; }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./ConfirmModal.css"></style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="aa-modal-mask" v-if="visible" @click.self="emit('cancel')">
|
||||
<div class="aa-confirm" :class="confirmType === 'danger' ? 'is-danger' : 'is-primary'">
|
||||
<div class="aa-confirm-head">
|
||||
<span class="aa-confirm-icon">!</span>
|
||||
<div class="aa-confirm-title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="aa-confirm-content">{{ content }}</div>
|
||||
<label v-if="dontAsk" class="aa-confirm-extra">
|
||||
<input type="checkbox" v-model="dontAskChecked" /> 不再提示
|
||||
</label>
|
||||
<div class="aa-confirm-footer">
|
||||
<button class="aa-confirm-btn" :disabled="loading" @click="emit('cancel')">{{ cancelText }}</button>
|
||||
<button class="aa-confirm-btn" :class="confirmType === 'danger' ? 'danger' : 'primary'"
|
||||
:disabled="loading" @click="emit('confirm', dontAskChecked)">
|
||||
{{ loading ? '处理中…' : confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
title: { type: String, default: '确认操作' },
|
||||
content: { type: String, default: '' },
|
||||
confirmType: { type: String, default: 'danger' },
|
||||
confirmText: { type: String, default: '确定' },
|
||||
cancelText: { type: String, default: '取消' },
|
||||
loading: { type: Boolean, default: false },
|
||||
dontAsk: { type: Boolean, default: false }
|
||||
});
|
||||
const emit = defineEmits(['cancel', 'confirm']);
|
||||
const dontAskChecked = ref(false);
|
||||
</script>
|
||||
|
||||
<style src="./ConfirmModal.css"></style>
|
||||
Reference in New Issue
Block a user