From aa8b4dbbeb231034f14b24270e2a4c23071ac4a1 Mon Sep 17 00:00:00 2001
From: june <juenflbjpz@gamil.com>
Date: Sun, 21 Jul 2024 20:31:04 +0800
Subject: [PATCH] =?UTF-8?q?[2024-07-21](UPDATE):=20=E9=80=9A=E7=94=A8?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/modal.js | 40 ++++++++++++++++++++++++++++++++++++++++
 view/layout.html   | 31 ++++++++++++++++++++++---------
 view/picture.html  | 26 ++++++++++++++++++++++++--
 3 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 static/js/modal.js

diff --git a/static/js/modal.js b/static/js/modal.js
new file mode 100644
index 0000000..0e94cfc
--- /dev/null
+++ b/static/js/modal.js
@@ -0,0 +1,40 @@
+function Modal(modalTitle, fields, onSubmit) {
+    this.modalTitle = modalTitle
+    this.fields = fields
+    this.onSubmit = onSubmit
+}
+
+Modal.prototype.GenericModalForm = function () {
+    let self = this
+    // 设置表单标题
+    $('#genericFormModalLabel').text(self.modalTitle)
+    // 生成表单内容
+    let $form = $('#genericForm')
+    $form.empty()
+    self.fields.forEach(function(field) {
+        let $formGroup = $('<div class="form-group"></div>')
+        $formGroup.append('<label>' + field.label + '</label>')
+
+        let $input
+        if (field.type === 'textarea') {
+            $input = $('<textarea class="form-control" name="' + field.name + '"></textarea>')
+        } else {
+            $input = $('<input type="' + field.type + '" class="form-control" name="' + field.name + '">')
+        }
+
+        $formGroup.append($input)
+        $form.append($formGroup)
+    })
+    // 显示模态框
+    $('#genericFormModal').modal('show');
+
+    // 处理表单提交
+    $('#genericFormSubmit').off('click').on('click', function() {
+        let formData = {}
+        $form.serializeArray().forEach(function(item) {
+            formData[item.name] = item.value
+        })
+        self.onSubmit(formData)
+        $('#genericFormModal').modal('hide')
+    })
+}
\ No newline at end of file
diff --git a/view/layout.html b/view/layout.html
index 929f2db..0dfa2df 100644
--- a/view/layout.html
+++ b/view/layout.html
@@ -49,15 +49,28 @@
     {{ .csrfField }}
     {{template "content" .}}
 </div>
-<script>
-    $(function () {
-        let pathname = window.location.pathname
-        let links = $("nav-link");
-        for (let i = 0; i < links.length; i++) {
-
-        }
-    })
-</script>
+<!-- 弹出表单模态框 -->
+<div class="modal fade" id="genericFormModal" tabindex="-1" aria-labelledby="genericFormModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="genericFormModalLabel">表单标题</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form id="genericForm">
+                    <!-- 动态表单内容 -->
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="genericFormSubmit">提交</button>
+            </div>
+        </div>
+    </div>
+</div>
 {{template "script" .}}
 </body>
 </html>
diff --git a/view/picture.html b/view/picture.html
index 65916ad..8b89223 100644
--- a/view/picture.html
+++ b/view/picture.html
@@ -2,9 +2,31 @@
 {{end}}
 
 {{define "content"}}
-<h1 class="h2">Picture</h1>
-<p>Picture page content goes here.</p>
+<h2>通用弹出表单示例</h2>
+<!-- 触发按钮 -->
+<button id="openFormButton" class="btn btn-primary">打开表单</button>
 {{end}}
 
 {{define "script"}}
+<script src="/static/js/modal.js"></script>
+<script>
+    $(document).ready(function() {
+        // 示例字段配置
+        let fields = [
+            { label: '用户名', name: 'username', type: 'text' },
+            { label: '邮箱', name: 'email', type: 'email' },
+            { label: '密码', name: 'password', type: 'password' }
+        ]
+
+        // 初始化表单并显示
+        $('#openFormButton').on('click', function() {
+            let title = '用户注册'
+            let modal = new Modal(title, fields,function(data) {
+                console.log('表单提交数据：', data)
+                // 在此处处理表单提交，例如通过 AJAX 发送到服务器
+            })
+            modal.GenericModalForm()
+        })
+    })
+</script>
 {{end}}