u

code/base-project/base-vue/packages/ao-design/src/modal/index.scss

@@ -0,0 +1,67 @@
+@use '../_styles/_variables.scss' as *;
+
+$modal-prefix: '#{$prefix}-modal';
+
+.#{$modal-prefix}-wrapper {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.#{$modal-prefix}-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.#{$modal-prefix} {
+  position: relative;
+  z-index: 1001;
+  background: #fff;
+  border-radius: 8px;
+  min-width: 300px;
+  max-width: 90%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.#{$modal-prefix}-header {
+  padding: 12px 16px;
+  font-weight: 600;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.#{$modal-prefix}-close {
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.#{$modal-prefix}-body {
+  padding: 16px;
+}
+
+.#{$modal-prefix}-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #eee;
+  text-align: right;
+}
+
+.#{$modal-prefix}-fade-enter-active,
+.#{$modal-prefix}-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.#{$modal-prefix}-fade-enter-from,
+.#{$modal-prefix}-fade-leave-to {
+  opacity: 0;
+}

code/base-project/base-vue/packages/ao-design/src/modal/index.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, ref, Teleport, Transition, watch } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import { addModal, getMaskZIndex, removeModal } from './modalManager'
+
+export default defineComponent({
+  name: 'Modal',
+  props: {
+    visible: { type: Boolean, default: false },
+    mask: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    class: { type: [String, Array, Object], default: '' },
+    style: { type: Object, default: () => ({}) },
+    lazy: { type: Boolean, default: true }, // 是否懒加载
+  },
+  emits: ['update:visible', 'close'],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('modal')
+    const zIndex = ref(0)
+    const isMounted = ref(false) // DOM 是否挂载
+
+    // 打开 Modal
+    const openModal = () => {
+      zIndex.value = addModal()
+      isMounted.value = true
+    }
+
+    // 关闭 Modal
+    const closeModal = () => {
+      removeModal(zIndex.value)
+      zIndex.value = 0
+      // 不卸载 DOM，仍保持 isMounted = true
+    }
+
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val)
+          openModal()
+        else closeModal()
+      },
+      { immediate: true },
+    )
+
+    const handleMaskClick = () => {
+      if (props.maskClosable) {
+        emit('update:visible', false)
+        emit('close')
+      }
+    }
+
+    const handleClose = () => {
+      emit('update:visible', false)
+      emit('close')
+    }
+
+    return () => (
+      <Teleport to="body">
+        {/* DOM 永远挂载，只用 v-show 控制显示 */}
+        <div
+          class={`${prefixCls}-wrapper`}
+          style={{
+            zIndex: zIndex.value,
+            display: props.visible ? 'flex' : 'none',
+          }}
+        >
+          {props.mask && (
+            <div
+              class={`${prefixCls}-mask`}
+              style={{ zIndex: getMaskZIndex() }}
+              onClick={handleMaskClick}
+            />
+          )}
+          <div class={[prefixCls, props.class]} style={{ ...props.style, zIndex: zIndex.value }}>
+            <div class={`${prefixCls}-header`}>
+              <span class={`${prefixCls}-title`}>{slots.title?.()}</span>
+              <button class={`${prefixCls}-close`} onClick={handleClose}>×</button>
+            </div>
+            <div class={`${prefixCls}-body`}>{slots.default?.()}</div>
+            {slots.footer && <div class={`${prefixCls}-footer`}>{slots.footer()}</div>}
+          </div>
+        </div>
+      </Teleport>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/modal/modalManager.ts

@@ -0,0 +1,31 @@
+let zIndexBase = 1000
+const modalStack: number[] = [] // 当前打开的 Modal zIndex
+const freeZIndex: number[] = [] // 已关闭 Modal 可复用 zIndex
+
+export function addModal() {
+  let zIndex: number
+  if (freeZIndex.length > 0) {
+    zIndex = freeZIndex.pop()!
+  }
+  else {
+    zIndex = ++zIndexBase
+  }
+  modalStack.push(zIndex)
+  return zIndex
+}
+
+export function removeModal(zIndex: number) {
+  const idx = modalStack.indexOf(zIndex)
+  if (idx !== -1) {
+    modalStack.splice(idx, 1)
+    freeZIndex.push(zIndex) // 回收 zIndex
+  }
+}
+
+export function getTopZIndex() {
+  return modalStack.length > 0 ? modalStack[modalStack.length - 1] : zIndexBase
+}
+
+export function getMaskZIndex() {
+  return modalStack.length > 0 ? modalStack[modalStack.length - 1] - 1 : zIndexBase
+}