From 288e681cca0b5e667ca56540a002db175ad0f1fa Mon Sep 17 00:00:00 2001
From: ozh <sylphy.ou@tfegroup.com.hk>
Date: Wed, 9 Sep 2026 14:56:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(family):=20=E6=96=B0=E5=A2=9E=20Modal=20?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E5=BC=B9=E7=AA=97=E5=9F=BA=E5=BA=A7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/index.module.scss | 23 +++++++++++++++++++++++
 src/components/modal/index.tsx         | 25 +++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/components/modal/index.module.scss
 create mode 100644 src/components/modal/index.tsx

diff --git a/src/components/modal/index.module.scss b/src/components/modal/index.module.scss
new file mode 100644
index 0000000..3aa7be3
--- /dev/null
+++ b/src/components/modal/index.module.scss
@@ -0,0 +1,23 @@
+// 项目 z-index 现状：内容层 ≤1、抽屉/遮罩 10~11；弹窗基座取 100/101
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $color-mask;
+  z-index: 100;
+}
+
+.panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: $color-bg-white;
+  border-radius: $radius-lg;
+  padding: 48px 32px;
+  min-width: 600px;
+  z-index: 101;
+  box-shadow: $shadow-popup;
+}
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
new file mode 100644
index 0000000..e6de8f7
--- /dev/null
+++ b/src/components/modal/index.tsx
@@ -0,0 +1,25 @@
+import { View } from '@tarojs/components'
+import type { CSSProperties, ReactNode } from 'react'
+import styles from './index.module.scss'
+
+interface Props {
+  visible: boolean
+  onClose: () => void
+  children: ReactNode
+  width?: string   // 默认 600px（编译为 600rpx）
+}
+
+export function Modal({ visible, onClose, children, width = '600px' }: Props) {
+  if (!visible) return null
+
+  const panelStyle: CSSProperties = { width }
+
+  return (
+    <>
+      <View className={styles.mask} onClick={onClose} />
+      <View className={styles.panel} style={panelStyle}>
+        {children}
+      </View>
+    </>
+  )
+}