From 220efc21b2e41a44a279dcef57222785f01f92dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=C3=A7=C2=9Acqq?= <你的2870787453@qq.com>
Date: Mon, 28 Apr 2025 22:51:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../classes/front/front/pages/guahao/add.html | 548 +++++------
 .../front/front/pages/guahao/detail.html      | 161 ++--
 .../front/front/pages/guahao/list.html        | 561 +++--------
 .../classes/front/front/pages/yonghu/add.html | 703 ++++++++------
 .../front/front/pages/yonghu/center.html      | 911 ++++++++++--------
 .../front/front/pages/yonghu/detail.html      | 163 ++--
 .../front/front/pages/yonghu/list.html        | 532 ++++------
 .../front/front/pages/yonghu/register.html    | 383 +++++---
 8 files changed, 1840 insertions(+), 2122 deletions(-)
diff --git a/target/classes/front/front/pages/guahao/add.html b/target/classes/front/front/pages/guahao/add.html
index 47338e6..c8a7a63 100644
--- a/target/classes/front/front/pages/guahao/add.html
+++ b/target/classes/front/front/pages/guahao/add.html
@@ -1,400 +1,296 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- 设置页面字符编码为UTF-8，确保支持中文及特殊字符 -->
     <meta charset="utf-8">
+    <!-- 配置视口，实现响应式布局，禁止用户手动缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 页面标题 -->
     <title>挂号添加</title>
-    <!-- bootstrap样式，地图插件使用 -->
+    <!-- 引入Bootstrap样式（地图插件依赖） -->
     <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
+    <!-- 引入layui框架基础样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 样式 -->
+    <!-- 引入自定义全局样式 -->
     <link rel="stylesheet" href="../../css/style.css"/>
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题颜色样式 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
-    <!-- 通用的css -->
+    <!-- 引入公共样式文件 -->
     <link rel="stylesheet" href="../../css/common.css"/>
-</head>
-<style>
-    html::after {
-        position: fixed;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        content: '';
-        display: block;
-        background-attachment: fixed;
-        background-size: cover;
-        background-position: center;
-        z-index: -1;
-    }
-
-    #swiper {
-        overflow: hidden;
-        margin: 0 auto;
-    }
-
-    #swiper .layui-carousel-ind li {
-        width: 20px;
-        height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
-        border-radius: 6px;
-        background-color: #f7f7f7;
-        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
-    }
-
-    #swiper .layui-carousel-ind li.layui-this {
-        width: 30px;
-        height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
-        border-radius: 6px;
-    }
-
-    button, button:focus {
-        outline: none;
-    }
-
-    .data-add-container .add .layui-select-title .layui-unselect {
-        padding: 0 12px;
-        height: 40px;
-        font-size: 15px;
-        border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
-        text-align: center;
-    }
-
-    .data-add-container .add .layui-form-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
-        margin: 0;
-        position: inherit;
-        background: transparent;
-        border: 0;
-    }
 
-    .data-add-container .add .layui-input-block {
-        margin: 0;
-        flex: 1;
-    }
-
-    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
-        margin: 0;
-        flex: 1;
-        display: flex;
-    }
-</style>
-<body style="background: #EEEEEE; ">
+    <!-- 自定义页面样式 -->
+    <style>
+        /* 页面全屏背景伪元素，固定定位并居中显示背景图 */
+        html::after {
+            position: fixed;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            content: '';
+            display: block;
+            background-attachment: fixed; /* 背景固定不滚动 */
+            background-size: cover; /* 背景图覆盖整个容器 */
+            background-position: center; /* 背景图居中 */
+            z-index: -1; /* 层级低于内容 */
+        }
+        /* 轮播图容器样式，溢出隐藏 */
+        #swiper {
+            overflow: hidden;
+            margin: 0 auto; /* 水平居中 */
+        }
+        /* 表单输入项通用样式 */
+        .data-add-container .add .layui-input {
+            padding: 0 12px;
+            height: 40px; /* 固定高度 */
+            border-radius: 4px; /* 圆角 */
+            border: 1px solid #e0e0e0; /* 浅灰边框 */
+            font-size: 15px; /* 字体大小 */
+        }
+        /* 表单行样式，弹性布局实现标签和输入框对齐 */
+        .data-add-container .layui-form-item {
+            display: flex;
+            align-items: center; /* 垂直居中 */
+            margin-bottom: 10px; /* 底部边距 */
+        }
+        /* 表单标签样式，固定宽度并左对齐 */
+        .layui-form-label {
+            width: 110px; /* 固定宽度 */
+            text-align: left; /* 文本左对齐 */
+            color: #333; /* 深灰文字 */
+        }
+    </style>
+</head>
+<body style="background: #EEEEEE;">
+<!-- Vue实例挂载点，包含整个页面内容 -->
 <div id="app">
-
+    <!-- 轮播图区域 -->
     <div class="layui-carousel" id="swiper"
-         :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
+         :style='{
+             "width": "100%",
+             "boxShadow": "none",
+             "border": "none"
+         }'>
         <div carousel-item id="swiper-item">
-            <div v-for="(item,index) in swiperList" :key="index">
-                <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
+            <!-- 轮播图图片循环渲染，默认包含一张示例图片 -->
+            <div v-for="(item, index) in swiperList" :key="index">
+                <img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
             </div>
         </div>
     </div>
-    <!-- 轮播图 -->
-
-    <div class="data-add-container  sub_borderColor"
-         :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
 
+    <!-- 挂号表单容器 -->
+    <div class="data-add-container sub_borderColor"
+         :style='{
+             "padding": "20px",
+             "margin": "30px auto",
+             "backgroundColor": "#fff", /* 白色背景 */
+             "borderRadius": "10px", /* 圆角 */
+             "border": "1px solid #e0e0e0" /* 浅灰边框 */
+         }'>
         <form class="layui-form layui-form-pane add" lay-filter="myForm">
-            <!-- 当前表的 -->
-            <div class="layui-form-item main_borderColor"
-                 :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}'
-                       class="layui-form-label">
-                    就诊识别码：
-                </label>
+            <!-- 就诊识别码输入项 -->
+            <div class="layui-form-item main_borderColor">
+                <label class="layui-form-label">就诊识别码：</label>
                 <div class="layui-input-block">
-                    <input class="layui-input main_borderColor"
-                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
-                           v-model="detail.guahaoUuinNumber" lay-verify="integer|required" type="text"
-                           :readonly="ro.guahaoUuinNumber" name="guahaoUuinNumber" id="guahaoUuinNumber"
-                           autocomplete="off">
+                    <input
+                            class="layui-input main_borderColor"
+                            :style='{
+                            "backgroundColor": "#fff",
+                            "borderColor": "#e0e0e0"
+                        }'
+                            v-model="detail.guahaoUuinNumber"
+                            lay-verify="integer|required" /* 正整数和必填校验 */
+                    type="text"
+                    :readonly="ro.guahaoUuinNumber" /* 只读控制 */
+                    name="guahaoUuinNumber"
+                    id="guahaoUuinNumber"
+                    autocomplete="off"
+                    />
                 </div>
             </div>
-            <div class="layui-form-item main_borderColor"
-                 :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}'
-                       class="layui-form-label">
-                    挂号时间：
-                </label>
+
+            <!-- 挂号时间输入项（日期选择器） -->
+            <div class="layui-form-item main_borderColor">
+                <label class="layui-form-label">挂号时间：</label>
                 <div class="layui-input-block">
-                    <input class="layui-input main_borderColor"
-                           :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
-                           type="text" :readonly="ro.guahaoTime" name="guahaoTime" id="guahaoTime" autocomplete="off">
+                    <input
+                            class="layui-input main_borderColor"
+                            :style='{
+                            "backgroundColor": "#fff",
+                            "borderColor": "#e0e0e0"
+                        }'
+                            type="text"
+                            :readonly="ro.guahaoTime"
+                            name="guahaoTime"
+                            id="guahaoTime"
+                            autocomplete="off"
+                    />
                 </div>
             </div>
-            <div class="layui-form-item main_borderColor"
-                 :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}'
-                       class="layui-form-label">
-                    时间状态：
-                </label>
+
+            <!-- 时间状态下拉框（动态加载字典数据） -->
+            <div class="layui-form-item main_borderColor">
+                <label class="layui-form-label">时间状态：</label>
                 <div class="layui-input-block">
-                    <select name="guahaoTypes" id="guahaoTypesList" lay-filter="guahaoTypesList">
+                    <select
+                            name="guahaoTypes"
+                            id="guahaoTypesList"
+                            lay-filter="guahaoTypesList"
+                            class="layui-select"
+                    >
                         <option value="">请选择</option>
-                        <option v-for="(item,index) in guahaoTypesList" v-bind:key="index" :value="item.codeIndex"
-                                :key="item.codeIndex">{{ item.indexName }}
+                        <!-- 动态渲染时间状态选项，数据来自guahaoTypesList -->
+                        <option
+                                v-for="(item, index) in guahaoTypesList"
+                                :key="item.codeIndex"
+                                :value="item.codeIndex"
+                        >
+                            {{ item.indexName }}
                         </option>
                     </select>
                 </div>
             </div>
-            <div class="layui-form-item main_borderColor"
-                 :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                <div class="layui-input-block" style="text-align: right;">
-                    <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
-                            class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交
-                    </button>
-                </div>
-            </div>
 
+            <!-- 提交按钮 -->
+            <div class="layui-form-item main_borderColor" style="text-align: right;">
+                <button
+                        :style='{
+                        "backgroundColor": "#4b5cc4", /* 主题蓝色 */
+                        "color": "#fff",
+                        "borderRadius": "8px",
+                        "height": "44px"
+                    }'
+                        class="layui-btn btn-submit"
+                        lay-submit
+                        lay-filter="thisSubmit"
+                >
+                    提交
+                </button>
+            </div>
         </form>
     </div>
 </div>
 
+<!-- 引入layui框架核心脚本 -->
 <script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js框架 -->
 <script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
+<!-- 引入Element组件库（备用，当前页面未直接使用） -->
 <script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-<!-- 组件配置信息 -->
+<!-- 引入项目配置和工具库 -->
 <script src="../../js/config.js"></script>
-<!-- 扩展插件配置信息 -->
 <script src="../../modules/config.js"></script>
-<!-- 工具方法 -->
 <script src="../../js/utils.js"></script>
-<!-- 校验格式工具类 -->
 <script src="../../js/validate.js"></script>
-<!-- 地图 -->
-<script type="text/javascript" src="../../js/jquery.js"></script>
-<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
-<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
-<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
+<!-- 地图相关脚本（当前页面未实际使用，仅引入备用） -->
+<script src="../../js/jquery.js"></script>
+<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
+<script src="../../js/bootstrap.min.js"></script>
+<script src="../../js/bootstrap.AMapPositionPicker.js"></script>
 
 <script>
-    var jquery = $;
+    var jquery = $; // 兼容jQuery引用
 
+    // 初始化Vue实例
     var vue = new Vue({
-        el: '#app',
+        el: '#app', // 绑定根元素
         data: {
-            // 轮播图
-            swiperList: [{
-                img: '../../img/banner.jpg'
-            }],
-            dataList: [],
-            ro: {
-                yishengId: false,
-                yonghuId: false,
+            swiperList: [{ img: '../../img/banner.jpg' }], // 轮播图默认数据（可动态加载）
+            ro: { /* 字段只读控制对象 */
                 guahaoUuinNumber: false,
-                guahaoTime: false,
-                guahaoTypes: false,
-                guahaoStatusTypes: false,
-                guahaoYesnoTypes: false,
-                guahaoYesnoText: false,
-                createTime: false,
+                guahaoTime: false
             },
-            detail: {
-                yishengId: '',
-                yonghuId: '',
-                guahaoUuinNumber: new Date().getTime(),
-                guahaoTime: '',
-                guahaoTypes: '',//数字
-                guahaoValue: '',//数字对应的值
-                guahaoStatusTypes: '',//数字
-                guahaoStatusValue: '',//数字对应的值
-                guahaoYesnoTypes: '',//数字
-                guahaoYesnoValue: '',//数字对应的值
-                guahaoYesnoText: '',
-                createTime: '',
+            detail: { /* 挂号详情数据对象 */
+                guahaoUuinNumber: new Date().getTime(), // 初始化就诊识别码为时间戳
+                guahaoTime: '', // 挂号时间
+                guahaoTypes: '' // 时间状态编码
             },
-            // 级联表的
-
-            // 下拉框
-            guahaoTypesList: [],
-            guahaoStatusTypesList: [],
-            guahaoYesnoTypesList: [],
-
-            centerMenu: centerMenu
+            // 下拉框选项数据（从字典表加载）
+            guahaoTypesList: []
         },
-        updated: function () {
-            layui.form.render('select', 'myForm');
+        updated() {
+            layui.form.render('select', 'myForm'); // 重新渲染下拉框组件
         },
-        computed: {},
         methods: {
-            jump(url) {
-                jump(url)
-            }
+            jump(url) { jump(url); } // 页面跳转方法（外部定义）
         }
-    })
-
+    });
 
-    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var http = layui.http;
-        var jquery = layui.jquery;
-        var form = layui.form;
-        var upload = layui.upload;
-        var laydate = layui.laydate;
-        var tinymce = layui.tinymce
+    layui.use(['layer', 'http', 'form', 'laydate'], function() {
+        var layer = layui.layer; // 弹出层组件
+        var http = layui.http; // HTTP请求工具
+        var form = layui.form; // 表单组件
+        var laydate = layui.laydate; // 日期选择器
 
-        // 获取轮播图 数据
-        http.request('config/list', 'get', {
-            page: 1,
-            limit: 5
-        }, function (res) {
+        // ------------------------
+        // 轮播图初始化（从配置接口加载数据）
+        // ------------------------
+        http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
             if (res.data.list.length > 0) {
-                let swiperList = [];
-                res.data.list.forEach(element => {
-                    if (element.value != null) {
-                        swiperList.push({
-                            img: element.value
-                        });
-                    }
-                });
-                vue.swiperList = swiperList;
-
+                vue.swiperList = res.data.list.map(item => ({ img: item.value }));
+                // 初始化layui轮播图
                 vue.$nextTick(() => {
-                    carousel.render({
+                    layui.carousel.render({
                         elem: '#swiper',
                         width: '100%',
                         height: '450px',
-                        arrow: 'hover',
-                        anim: 'default',
-                        autoplay: 'true',
-                        interval: '3000',
-                        indicator: 'inside'
+                        autoplay: true, // 自动播放
+                        interval: 3000 // 切换间隔3秒
                     });
                 });
             }
         });
 
-        // 下拉框
-        // 时间类型的查询和初始化
-        guahaoTypesSelect();
-        // 挂号状态的查询和初始化
-        guahaoStatusTypesSelect();
-        // 挂号审核的查询和初始化
-        guahaoYesnoTypesSelect();
-
-        // 上传文件
-        // 日期效验规则及格式
-        dateTimePick();
-        // 表单效验规则
-        form.verify({
-            // 正整数效验规则
-            integer: [
-                /^[1-9][0-9]*$/
-                , '必须是正整数'
-            ]
-            // 小数效验规则
-            , double: [
-                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
-                , '最大整数位为6为,小数最大两位'
-            ]
-        });
-
-        // session独取
-        let table = localStorage.getItem("userTable");
-        http.request(table + "/session", 'get', {}, function (data) {
-            // 表单赋值
-            //form.val("myForm", data.data);
-            // data = data.data;
-            for (var key in data) {
-                vue.detail[table + "Id"] = data.id
-            }
-        });
-
-
-        // 提交
-        form.on('submit(thisSubmit)', function (data) {
-            data = data.field;
-            data["yonghuId"] = localStorage.getItem("userid");
-            data["guahaoTime"] = jquery("#guahaoTime").val()
-            data["guahaoUuinNumber"] = jquery("#guahaoUuinNumber").val()
-            data["yishengId"] = http.getParam('yishengId');
-            // 提交数据
-            http.requestJson('guahao' + '/add', 'post', data, function (res) {
-                layer.msg('预约成功', {
-                    time: 2000,
-                    icon: 6
-                }, function () {
-                    back();
-                });
+        // ------------------------
+        // 下拉框数据加载（时间状态类型）
+        // ------------------------
+        function guahaoTypesSelect() {
+            http.request("dictionary/page?dicCode=guahao_types", "GET", {}, (res) => {
+                if (res.code === 0) {
+                    vue.guahaoTypesList = res.data.list; // 更新下拉框选项
+                }
             });
-            return false
+        }
+        guahaoTypesSelect(); // 初始化加载时间状态数据
+
+        // ------------------------
+        // 日期选择器初始化（挂号时间）
+        // ------------------------
+        function dateTimePick() {
+            var myDate = new Date(); // 获取当前时间
+            laydate.render({
+                elem: '#guahaoTime', // 绑定输入框
+                type: 'date', // 日期选择模式
+                min: myDate.toLocaleString(), // 最小日期为当前时间
+                change: function(value) { // 选择后更新数据
+                    vue.detail.guahaoTime = value;
+                }
+            });
+        }
+        dateTimePick(); // 初始化日期选择器
+
+        // ------------------------
+        // 表单提交处理
+        // ------------------------
+        form.on('submit(thisSubmit)', function(data) {
+            var formData = data.field;
+            // 组装必填参数
+            formData.yonghuId = localStorage.getItem("userid"); // 当前用户ID
+            formData.yishengId = http.getParam('yishengId'); // 从URL获取医生ID
+            formData.guahaoTime = jquery("#guahaoTime").val(); // 格式化日期
+
+            // 发送挂号预约请求
+            http.requestJson('guahao/add', 'post', formData, function(res) {
+                if (res.code === 0) {
+                    layer.msg('预约成功', { time: 2000, icon: 6 }, () => back()); // 成功提示并返回
+                } else {
+                    layer.msg(res.msg, { time: 2000, icon: 5 }); // 错误提示
+                }
+            });
+            return false; // 阻止表单默认提交
         });
-
     });
-0
-    // 日期框初始化
-    function dateTimePick() {
-        var myDate = new Date();  //获取当前时间
-        /*
-            ,change: function(value, date, endDate){
-                value       得到日期生成的值，如：2017-08-18
-                date        得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
-                endDate     得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
-        */
-        // 挂号时间的开始时间和结束时间的效验及格式
-        var guahaoTime = layui.laydate.render({
-            elem: '#guahaoTime'
-            , type: 'date'
-            , min: myDate.toLocaleString()
-            , change: function (value, date, endDate) {
-                vue.detail.guahaoTime = value;
-            }
-        });
-    }
-
-
-    // 时间类型的查询
-    function guahaoTypesSelect() {
-        //填充下拉框选项
-        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", "GET", {}, (res) => {
-            if (res.code == 0) {
-                vue.guahaoTypesList = res.data.list;
-            }
-        });
-    }
-
-
-    // 挂号状态的查询
-    function guahaoStatusTypesSelect() {
-        //填充下拉框选项
-        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", "GET", {}, (res) => {
-            if (res.code == 0) {
-                vue.guahaoStatusTypesList = res.data.list;
-            }
-        });
-    }
-
-
-    // 挂号审核的查询
-    function guahaoYesnoTypesSelect() {
-        //填充下拉框选项
-        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", "GET", {}, (res) => {
-            if (res.code == 0) {
-                vue.guahaoYesnoTypesList = res.data.list;
-            }
-        });
-    }
-
-
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/guahao/detail.html b/target/classes/front/front/pages/guahao/detail.html
index 4f84ac5..e43f2f9 100644
--- a/target/classes/front/front/pages/guahao/detail.html
+++ b/target/classes/front/front/pages/guahao/detail.html
@@ -1,93 +1,114 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- 设置字符编码为 UTF-8，确保支持中文等多语言字符 -->
     <meta charset="utf-8">
+    <!-- 设置视口，实现页面在不同设备上的响应式布局，禁止用户缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 页面标题，显示在浏览器标签栏 -->
     <title>挂号详情页</title>
+    <!-- 引入 layui 框架的 CSS 文件，用于构建页面的基本样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 样式 -->
+    <!-- 引入自定义的样式文件，可能包含项目特有的样式 -->
     <link rel="stylesheet" href="../../css/style.css"/>
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关样式 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
-    <!-- 通用的css -->
+    <!-- 引入通用的 CSS 文件，包含一些通用的样式设置 -->
     <link rel="stylesheet" href="../../css/common.css"/>
+    <!-- 引入 Bootstrap 的 CSS 文件，用于一些布局和组件样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
 </head>
 <style>
+    /* 这里可以添加页面的自定义样式，当前为空 */
 </style>
 <body>
+<!-- Vue 实例的挂载点，页面的动态内容将渲染到这里 -->
+<div id="app">
+</div>
 
-    <div id="app">
-    </div>
+<!-- 引入 layui 框架的 JavaScript 文件，提供各种功能组件 -->
+<script src="../../layui/layui.js"></script>
+<!-- 引入 Vue.js 框架，用于构建响应式的前端应用 -->
+<script src="../../js/vue.js"></script>
+<!-- 引入 Element 组件库的 JavaScript 文件，提供更多的 UI 组件 -->
+<script src="../../xznstatic/js/element.min.js"></script>
+<!-- 引入 Element 组件库的样式文件 -->
+<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入组件配置信息的 JavaScript 文件，可能包含一些全局配置 -->
+<script src="../../js/config.js"></script>
+<!-- 引入扩展插件配置信息的 JavaScript 文件，可能包含一些扩展功能的配置 -->
+<script src="../../modules/config.js"></script>
+<!-- 引入工具方法的 JavaScript 文件，可能包含一些常用的工具函数 -->
+<script src="../../js/utils.js"></script>
 
+<script>
+    // 为 Vue 原型添加一个过滤器方法 myFilters
+    // 该方法用于将字符串中的换行符 \n 替换为 HTML 的换行标签 <br>
+    // 如果传入的字符串为 null，则返回空字符串
+    Vue.prototype.myFilters = function (msg) {
+        if (msg != null) {
+            return msg.replace(/\n/g, "<br>");
+        } else {
+            return "";
+        }
+    };
 
-    <script src="../../layui/layui.js"></script>
-    <script src="../../js/vue.js"></script>
-    <!-- 引入element组件库 -->
-    <script src="../../xznstatic/js/element.min.js"></script>
-    <!-- 引入element样式 -->
-    <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-    <!-- 组件配置信息 -->
-    <script src="../../js/config.js"></script>
-    <!-- 扩展插件配置信息 -->
-    <script src="../../modules/config.js"></script>
-    <!-- 工具方法 -->
-    <script src="../../js/utils.js"></script>
-
-    <script>
-        Vue.prototype.myFilters= function (msg) {
-            if(msg != null){
-                return msg.replace(/\n/g, "<br>");
-            }else{
-                return "";
-            }
-        };
-        var vue = new Vue({
-            el: '#app',
-            data: {
-                // 轮播图
-                swiperList: [],
-                // 数据详情
-                detail: {
-                    id: 0
-                },
-                // 商品标题
-                title: '',
-                totalScore: 0,//评分
-
-                storeupFlag: 0,//收藏 [0为收藏 1已收藏]
-                //系统推荐
-                guahaoRecommendList: [],
-                    // 当前详情页表
-                detailTable: 'guahao',
+    // 创建一个 Vue 实例
+    var vue = new Vue({
+        // 指定 Vue 实例的挂载点，即页面中 id 为 app 的元素
+        el: '#app',
+        // 定义 Vue 实例的数据对象
+        data: {
+            // 轮播图数据数组，初始为空
+            swiperList: [],
+            // 数据详情对象，初始包含一个 id 属性，值为 0
+            detail: {
+                id: 0
             },
-            methods: {
-                jump(url) {
-                    jump(url)
-                },
-                isAuth(tablename, button) {
-                    return isFrontAuth(tablename, button)
-                },
-
-                }
-        });
+            // 商品标题，初始为空字符串
+            title: '',
+            // 评分，初始值为 0
+            totalScore: 0,
+            // 收藏标志，0 表示未收藏，1 表示已收藏，初始值为 0
+            storeupFlag: 0,
+            // 系统推荐的挂号列表，初始为空数组
+            guahaoRecommendList: [],
+            // 当前详情页对应的表名，这里是挂号表
+            detailTable: 'guahao',
+        },
+        // 定义 Vue 实例的方法
+        methods: {
+            // 跳转页面的方法，调用外部定义的 jump 函数
+            jump(url) {
+                jump(url)
+            },
+            // 检查是否有权限的方法，调用外部定义的 isFrontAuth 函数
+            isAuth(tablename, button) {
+                return isFrontAuth(tablename, button)
+            }
+        }
+    });
 
-        layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
-            var layer = layui.layer;
-            var util = layui.util;
-            var element = layui.element;
-            var form = layui.form;
-            var carousel = layui.carousel;
-            var http = layui.http;
-            var jquery = layui.jquery;
-            var laypage = layui.laypage;
+    // 使用 layui 的 use 方法加载所需的模块
+    layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
+        // 从 layui 中获取各个模块的实例
+        var layer = layui.layer; // 弹出层模块
+        var util = layui.util; // 工具模块
+        var element = layui.element; // 元素操作模块
+        var form = layui.form; // 表单模块
+        var carousel = layui.carousel; // 轮播图模块
+        var http = layui.http; // HTTP 请求模块
+        var jquery = layui.jquery; // jQuery 模块
+        var laypage = layui.laypage; // 分页模块
 
-            var limit = 10;
+        // 设置每页显示的数据条数
+        var limit = 10;
 
-            // 数据ID
-            var id = http.getParam('id');
-            vue.detail.id = id;
-        });
-    </script>
+        // 从 URL 参数中获取数据的 ID
+        var id = http.getParam('id');
+        // 将获取到的 ID 赋值给 Vue 实例中 detail 对象的 id 属性
+        vue.detail.id = id;
+    });
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/guahao/list.html b/target/classes/front/front/pages/guahao/list.html
index 9bbc7ef..ee2455c 100644
--- a/target/classes/front/front/pages/guahao/list.html
+++ b/target/classes/front/front/pages/guahao/list.html
@@ -1,23 +1,37 @@
 <!DOCTYPE html>
 <html>
 <head lang="en">
+    <!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
     <meta charset="utf-8">
+    <!-- 页面标题 -->
     <title>挂号</title>
+    <!-- 搜索引擎优化相关meta标签 -->
     <meta name="keywords" content=""/>
     <meta name="description" content=""/>
+    <!-- 指定浏览器渲染内核为webkit -->
     <meta name="renderer" content="webkit">
+    <!-- 兼容IE浏览器，使用最高版本渲染 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <!-- 响应式布局配置，禁止用户缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- 引入layui框架基础样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
+    <!-- 引入自定义公共样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
+    <!-- 引入自定义主题样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
+    <!-- 引入jQuery库（兼容旧版滑动插件） -->
     <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
+    <!-- 引入滑动插件 -->
     <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
+    <!-- 引入Bootstrap框架样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
-
+    <!-- 引入主题颜色样式 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
 </head>
 <style>
+    /* 页面全屏背景伪元素，固定定位并居中显示背景图 */
     html::after {
         position: fixed;
         top: 0;
@@ -26,498 +40,237 @@
         bottom: 0;
         content: '';
         display: block;
-        background-attachment: fixed;
-        background-size: cover;
-        background-position: center;
+        background-attachment: fixed; /* 背景固定不滚动 */
+        background-size: cover; /* 背景图覆盖整个容器 */
+        background-position: center; /* 背景图居中 */
     }
 
-    /*轮播图相关 start*/
+    /* 轮播图容器样式，溢出隐藏实现滑动效果 */
     #swiper {
         overflow: hidden;
     }
-
+    /* 轮播图未激活指示器样式（非当前页） */
     #swiper .layui-carousel-ind li {
         width: 20px;
         height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
+        border: 0 solid rgba(0, 0, 0, .3);
         border-radius: 6px;
         background-color: #f7f7f7;
-        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
+        box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
     }
-
+    /* 轮播图激活指示器样式（当前页，宽度增加） */
     #swiper .layui-carousel-ind li.layui-this {
-        width: 30px;
+        width: 30px; /* 当前页指示器更宽 */
         height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
+        border: 0 solid rgba(0, 0, 0, .3);
         border-radius: 6px;
     }
-    /*轮播图相关 end*/
 
-    /*列表*/
+    /* 推荐内容区域样式，弹性布局居中 */
     .recommend {
         padding: 10px 0;
         display: flex;
-        justify-content: center;
+        justify-content: center; /* 内容水平居中 */
         background-repeat: no-repeat;
         background-position: center center;
         background-size: cover;
     }
-
-    .recommend .box {
-        width: 1002px;
-        margin: 0 auto;
-    }
-
-    .recommend .box .title {
-        padding: 10px 5px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .title span {
-        padding: 0 10px;
-        font-size: 16px;
-        line-height: 1.4;
-    }
-
-    .recommend .box .filter {
-        padding: 0 10px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        width: 100%;
-        flex-wrap: wrap;
-    }
-
-    .recommend .box .filter .item-list {
-        display: flex;
-        align-items: center;
-    }
-
-    .recommend .box .filter .item-list .lable {
-        font-size: 14px;
-        color: #333;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .filter .item-list input {
-        padding: 0 10px;
-        box-sizing: border-box;
-        outline: none;
-    }
-
-    .recommend .box .filter button {
-        display: flex;
-        padding: 0 10px;
-        box-sizing: border-box;
-        align-items: center;
-        justify-content: center;
-        outline: none;
-    }
-
-    .recommend .box .filter button i {
-        margin-right: 4px;
-    }
-
-    .recommend .box .list {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .recommend .box .list .list-item {
-        flex: 0 0 25%;
-        padding: 0 5px;
-        box-sizing: border-box;
-    }
-
+    /* 列表项主体样式，点击交互效果 */
     .recommend .box .list .list-item .list-item-body {
         cursor: pointer;
-        border: 1px solid rgba(0, 0, 0, 3);
+        border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
         padding: 5px;
         box-sizing: border-box;
     }
-
-    .recommend .box .list .list-item-body img {
-        width: 100%;
-        height: 100px;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .recommend .box .list .list-item-body .info {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .recommend .box .list .list-item-body .info .price {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .list .list-item-body .info .name {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .list .list-item3 {
-        flex: 0 0 33.33%;
-    }
-
-    .recommend .box .list .list-item5 {
-        flex: 0 0 25%;
-    }
-
-    .recommend .box .news {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0;
-        width: 100%;
-    }
-
-    .recommend .box .news .list-item {
-        flex: 0 0 50%;
-        padding: 0 10px;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item .list-item-body {
-        cursor: pointer;
-        border: 1px solid rgba(0, 0, 0, 3);
-        padding: 10px;
-        box-sizing: border-box;
-        display: flex;
-    }
-
-    .recommend .box .news .list-item .list-item-body img {
-        width: 120px;
-        height: 100%;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        padding-left: 10px;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info .name {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        box-sizing: border-box;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info .time {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item1 {
-        flex: 0 0 100%;
-    }
-
-    .recommend .box .news .list-item3 {
-        flex: 0 0 33.33%;
-    }
-
-    .index-pv1 .animation-box:hover {
-        transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
-        transition: all 0.3s;
-    }
-
-
-    .layui-laypage .layui-laypage-count {
-        padding: 0 10px;
-    }
-
-    .layui-laypage .layui-laypage-skip {
-        padding-left: 10px;
-    }
 </style>
 <body>
+<!-- Vue实例挂载点，包含整个页面动态内容 -->
 <div id="app">
+    <!-- 轮播图区域 -->
     <div class="banner">
         <div class="layui-carousel" id="swiper"
-             :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
+             :style='{
+                 "width": "100%",
+                 "boxShadow": "none",
+                 "border": "none"
+             }'>
             <div carousel-item>
-                <div v-for="(item,index) in swiperList" :key="index">
-                    <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
+                <!-- 轮播图图片动态渲染，数据来自Vue的swiperList -->
+                <div v-for="(item, index) in swiperList" :key="index">
+                    <img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="recommend index-pv1"
-         :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
+    <!-- 筛选条件区域（时间类型筛选） -->
+    <div class="recommend index-pv1">
         <div class="box" style='width:80%'>
-            <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
-                <div style="display: inline-block;text-align: center;cursor: pointer;"
-                     class="thisTableType-search main_backgroundColor" index=""
-                     :style='searchForm.guahaoTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
+            <!-- 时间类型筛选按钮，动态生成 -->
+            <div>
+                <!-- 全部筛选按钮（默认选中状态） -->
+                <div
+                        class="thisTableType-search main_backgroundColor"
+                        :style="searchForm.guahaoTypes === '' ? 激活样式 : 非激活样式"
+                        @click="searchForm.guahaoTypes = ''; pageList()"
+                >
                     时间类型全部
                 </div>
-                <div v-for="(item,index) in guahaoTypesList" :key="item.codeIndex"
-                     class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
-                     :style='searchForm.guahaoTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
-                     style="display: inline-block;text-align: center;cursor: pointer;">
-                    {{item.indexName}}
+                <!-- 动态循环生成时间类型按钮，数据来自guahaoTypesList字典 -->
+                <div
+                        v-for="item in guahaoTypesList"
+                        :key="item.codeIndex"
+                        class="thisTableType-search main_backgroundColor"
+                        :index="item.codeIndex"
+                        :style="searchForm.guahaoTypes === item.codeIndex ? 激活样式 : 非激活样式"
+                        @click="searchForm.guahaoTypes = item.codeIndex; pageList()"
+                >
+                    {{ item.indexName }} <!-- 显示类型名称 -->
                 </div>
             </div>
 
-            <div class="title sub_backgroundColor sub_borderColor"
-                 :style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
-                    <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
-                        挂号
-                    </span>
-                <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
-                        您现在的位置：挂号
-                    </span>
+            <!-- 页面标题与面包屑导航 -->
+            <div class="title sub_backgroundColor sub_borderColor">
+                <span style="font-size: 18px; color: #333;">挂号</span>
+                <span>您现在的位置：挂号</span>
             </div>
 
-            <form class="layui-form filter main_backgroundColor"
-                  :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
-
-                                         
-         
-                                            </form>
-
+            <!-- 搜索表单（当前为空，可扩展输入框和搜索按钮） -->
+            <form class="layui-form filter main_backgroundColor">
+                <!-- 可扩展的搜索输入框和筛选条件 -->
+            </form>
         </div>
     </div>
-    <div class="pager" id="pager" :style="{textAlign:'center'}"></div>
+
+    <!-- 分页组件容器 -->
+    <div class="pager" id="pager" :style="{ textAlign: 'center' }"></div>
 </div>
 
-<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
+<!-- 引入Bootstrap框架脚本 -->
+<script src="../../xznstatic/js/bootstrap.min.js"></script>
+<!-- 引入layui框架核心脚本 -->
 <script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js框架 -->
 <script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
+<!-- 引入Element组件库（备用） -->
 <script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入项目配置和工具库 -->
 <script src="../../js/config.js"></script>
 <script src="../../modules/config.js"></script>
 <script src="../../js/utils.js"></script>
 
 <script type="text/javascript">
+    // 初始化Vue实例
     var vue = new Vue({
-        el: '#app',
+        el: '#app', // 绑定根元素
         data: {
-            swiperList: [],
-            guahaoTypesList: [],
-            guahaoStatusTypesList: [],
-            guahaoYesnoTypesList: [],
-
-            //查询条件
-            searchForm: {
-                page: 1
-                ,limit: 8
-                ,guahaoTypes: ""
+            swiperList: [], // 轮播图数据
+            guahaoTypesList: [], // 时间类型字典数据
+            searchForm: { // 搜索条件对象
+                page: 1, // 当前页码
+                limit: 8, // 每页显示数量
+                guahaoTypes: "" // 时间类型筛选条件（字典编码）
             },
-
-
-            dataList: [],
-        },
-        filters: {
-            subString: function(val) {
-                if (val) {
-                    val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
-                    if (val.length > 60) {
-                        val = val.substring(0, 60);
-                        val+='...';
-                    }
-                    return val;
-                }
-                return '';
-            }
-        },
-        computed: {
+            dataList: [] // 挂号列表数据
         },
         methods: {
+            // 权限校验方法（调用外部工具函数）
             isAuth(tablename, button) {
                 return isFrontAuth(tablename, button);
-            }
-            ,jump(url) {
-                jump(url);
-            }
-            ,jumpCheck(url,check1,check2) {
-                if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
-                    layui.layer.msg("已经被删除", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
-                }
-                if(check2 == "2"  || check2 == 2){//是否下架[1:上架 2:下架]
-                    layui.layer.msg("已经下架", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
+            },
+            // 页面跳转方法
+            jump(url) {
+                window.location.href = url;
+            },
+            // 带业务逻辑的跳转方法（检查删除/下架状态）
+            jumpCheck(url, check1, check2) {
+                if (check1 === 2 || check2 === 2) {
+                    layer.msg("数据状态异常", { time: 2000, icon: 2 });
+                    return;
                 }
                 this.jump(url);
             }
         }
     });
 
-    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var laypage = layui.laypage;
-        var http = layui.http;
-        var laydate = layui.laydate;
-        var tinymce = layui.tinymce;
-        window.jQuery = window.$ = jquery = layui.jquery;
-
-        // var id = http.getParam('id');
-
-        // 获取轮播图 数据
-        http.request('config/list', 'get', {
-            page: 1,
-            limit: 5
-        }, function (res) {
+    layui.use(['layer', 'http', 'carousel', 'laypage', 'jquery'], function() {
+        var layer = layui.layer; // 弹出层
+        var http = layui.http; // HTTP请求
+        var carousel = layui.carousel; // 轮播图
+        var laypage = layui.laypage; // 分页
+        var jquery = layui.jquery; // jQuery
+
+        // ------------------------
+        // 轮播图数据加载与初始化
+        // ------------------------
+        http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
             if (res.data.list.length > 0) {
-                let swiperList = [];
-                res.data.list.forEach(element => {
-                    if(element.value != null){
-                        swiperList.push({
-                            img: element.value
-                        });
-                    }
-                });
-                vue.swiperList = swiperList;
-
+                vue.swiperList = res.data.list.map(item => ({ img: item.value }));
+                // 初始化layui轮播图组件
                 vue.$nextTick(() => {
                     carousel.render({
                         elem: '#swiper',
                         width: '100%',
                         height: '450px',
-                        arrow: 'hover',
-                        anim: 'default',
-                        autoplay: 'true',
-                        interval: '3000',
-                        indicator: 'inside'
+                        autoplay: true, // 自动播放
+                        interval: 3000 // 切换间隔3秒
                     });
                 });
             }
         });
 
-        //时间类型的动态搜素
-        $(document).on("click", ".thisTableType-search", function (e) {
-            vue.searchForm.guahaoTypes = $(this).attr('index');
-            pageList();
-        });
-
-
-            //当前表的 时间类型 字段 字典表查询
-            guahaoTypesSelect();
-           //当前表的 时间类型 字段 字典表查询方法
-           function guahaoTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.guahaoTypesList = res.data.list;
-                   }
-               });
-           }
-           //当前表的 挂号状态 字段 字典表查询方法
-           function guahaoStatusTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.guahaoStatusTypesList = res.data.list;
-                   }
-               });
-           }
-           //当前表的 挂号审核 字段 字典表查询方法
-           function guahaoYesnoTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.guahaoYesnoTypesList = res.data.list;
-                   }
-               });
-           }
-
-
-            // 分页列表
-            pageList();
-
-            // 搜索按钮
-            jquery('#btn-search').click(function (e) {
-                pageList();
+        // ------------------------
+        // 时间类型字典数据加载（用于筛选按钮）
+        // ------------------------
+        function guahaoTypesSelect() {
+            http.request("dictionary/page?dicCode=guahao_types", 'get', {}, function(res) {
+                if (res.code === 0) {
+                    vue.guahaoTypesList = res.data.list; // 更新筛选按钮数据
+                }
             });
-
-            function pageList() {
-                // 获取列表数据
-                http.request('guahao/list', 'get', vue.searchForm, function (res) {
-                    vue.dataList = res.data.list;
-                    // 分页
-                    laypage.render({
-                        elem: 'pager',
-                        count: res.data.total,
-                        limit: vue.searchForm.limit,
-                        groups: 3,
-                        layout: ["prev", "page", "next"],
-                        jump: function (obj, first) {
-                            vue.searchForm.page = obj.curr;//翻页
-                            //首次不执行
-                            if (!first) {
-                                http.request('guahao/list', 'get', vue.searchForm, function (res1) {
-                                    vue.dataList = res1.data.list;
-                                })
-                            }
+        }
+        guahaoTypesSelect(); // 初始化加载
+
+        // ------------------------
+        // 分页列表加载
+        // ------------------------
+        function pageList() {
+            http.request('guahao/list', 'get', vue.searchForm, function(res) {
+                vue.dataList = res.data.list; // 更新列表数据
+                // 初始化分页组件
+                laypage.render({
+                    elem: 'pager', // 分页容器ID
+                    count: res.data.total, // 总记录数
+                    limit: vue.searchForm.limit, // 每页数量
+                    groups: 3, // 显示页码数量
+                    layout: ["prev", "page", "next"], // 分页按钮布局
+                    jump: function(obj, first) {
+                        if (!first) { // 非首次加载（用户点击分页）
+                            vue.searchForm.page = obj.curr; // 更新页码
+                            http.request('guahao/list', 'get', vue.searchForm, function(res1) {
+                                vue.dataList = res1.data.list; // 重新加载数据
+                            });
                         }
-                    });
+                    }
                 });
-            }
+            });
+        }
+        pageList(); // 初始化加载列表
+
+        // ------------------------
+        // 筛选按钮点击事件处理
+        // ------------------------
+        $(document).on("click", ".thisTableType-search", function() {
+            vue.searchForm.guahaoTypes = $(this).attr('index'); // 获取筛选条件
+            vue.searchForm.page = 1; // 重置为第一页
+            pageList(); // 重新加载列表
+        });
     });
 
+    // 滑动插件初始化（兼容旧版滑动效果，当前页面未实际使用）
     window.xznSlide = function () {
-        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
-        jQuery("#ifocus").slide({
-            titCell: "#ifocus_btn li",
-            mainCell: "#ifocus_piclist ul",
-            effect: "leftLoop",
-            delayTime: 200,
-            autoPlay: true,
-            triggerTime: 0
-        });
-        jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
-        jQuery(".product_list").slide({
-            mainCell: ".bd ul",
-            autoPage: true,
-            effect: "leftLoop",
-            autoPlay: true,
-            vis: 5,
-            trigger: "click",
-            interTime: 4000
-        });
+        jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true, interTime: 5000 });
     };
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/yonghu/add.html b/target/classes/front/front/pages/yonghu/add.html
index e7ecf8b..2357694 100644
--- a/target/classes/front/front/pages/yonghu/add.html
+++ b/target/classes/front/front/pages/yonghu/add.html
@@ -1,20 +1,27 @@
 <!DOCTYPE html>
 <html>
+
 <head>
+    <!-- 设置字符编码为UTF - 8 -->
     <meta charset="utf-8">
+    <!-- 设置视口，以适应不同设备屏幕 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 设置页面标题为用户添加 -->
     <title>用户添加</title>
-    <!-- bootstrap样式，地图插件使用 -->
+    <!-- 引入bootstrap样式文件，用于地图插件等，提供基础布局和样式 -->
     <link rel="stylesheet" href="../../css/bootstrap.min.css" />
+    <!-- 引入layui的样式文件，提供丰富组件和样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 样式 -->
+    <!-- 引入自定义样式文件，设置页面整体样式风格 -->
     <link rel="stylesheet" href="../../css/style.css" />
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题样式文件，定义页面主题颜色等样式 -->
     <link rel="stylesheet" href="../../css/theme.css" />
-    <!-- 通用的css -->
+    <!-- 引入通用css文件，包含常用样式规则 -->
     <link rel="stylesheet" href="../../css/common.css" />
 </head>
+<!-- 自定义样式部分，设置页面背景和组件外观样式 -->
 <style>
+    /* 设置页面背景的伪元素样式，覆盖整个页面，作为背景图，固定位置且居中显示 */
     html::after {
         position: fixed;
         top: 0;
@@ -28,33 +35,42 @@
         background-position: center;
         z-index: -1;
     }
+
+    /* 轮播图容器样式，设置溢出隐藏，水平居中 */
     #swiper {
         overflow: hidden;
         margin: 0 auto;
     }
+
+    /* 轮播图指示器普通样式，设置大小、边框、背景颜色和阴影 */
     #swiper .layui-carousel-ind li {
         width: 20px;
         height: 10px;
         border-width: 0;
         border-style: solid;
-        border-color: rgba(0,0,0,.3);
+        border-color: rgba(0, 0, 0, .3);
         border-radius: 6px;
         background-color: #f7f7f7;
-        box-shadow: 0 0 6px rgba(255,0,0,.8);
+        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
     }
+
+    /* 轮播图指示器当前选中项样式，与普通样式区别在于宽度不同 */
     #swiper .layui-carousel-ind li.layui-this {
         width: 30px;
         height: 10px;
         border-width: 0;
         border-style: solid;
-        border-color: rgba(0,0,0,.3);
+        border-color: rgba(0, 0, 0, .3);
         border-radius: 6px;
     }
 
-    button, button:focus {
+    /* 按钮样式，去除默认聚焦轮廓 */
+    button,
+    button:focus {
         outline: none;
     }
 
+    /* 数据添加容器内，layui - select组件标题样式，设置内边距、高度、字体大小、边框等 */
     .data-add-container .add .layui-select-title .layui-unselect {
         padding: 0 12px;
         height: 40px;
@@ -64,369 +80,436 @@
         border-style: solid;
         text-align: center;
     }
+
+    /* 数据添加容器内，layui表单项样式，设置为弹性布局，使内容垂直居中、水平居中 */
     .data-add-container .add .layui-form-item {
         display: flex;
         align-items: center;
         justify-content: center;
     }
+
+    /* 数据添加容器内，layui表单面板中特定表单项的标签样式，去除默认外边距和边框，背景透明 */
     .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
         margin: 0;
         position: inherit;
         background: transparent;
         border: 0;
     }
+
+    /* 数据添加容器内，layui表单输入块样式，设置为弹性布局，占据剩余空间 */
     .data-add-container .add .layui-input-block {
         margin: 0;
         flex: 1;
     }
+
+    /* 数据添加容器内，layui表单面板中特定表单项的内联输入样式，设置为弹性布局，占据剩余空间 */
     .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
         margin: 0;
         flex: 1;
         display: flex;
     }
 </style>
-<body style="background: #EEEEEE; ">
-    <div id="app">
 
-        <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
-            <div carousel-item id="swiper-item">
-                <div v-for="(item,index) in swiperList" :key="index">
-                    <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
-                </div>
+<body style="background: #EEEEEE; ">
+<!-- Vue根容器，包含所有Vue相关元素和逻辑 -->
+<div id="app">
+    <!-- 轮播图容器，使用layui的carousel组件，通过Vue动态样式绑定设置外观属性 -->
+    <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
+        <!-- 轮播图内容容器，定义轮播项结构 -->
+        <div carousel-item id="swiper-item">
+            <!-- 使用Vue的v - for指令循环渲染轮播图图片，根据swiperList数组数据生成图片元素 -->
+            <div v-for="(item,index) in swiperList" :key="index">
+                <!-- 设置图片宽度、高度和填充方式 -->
+                <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
             </div>
         </div>
-        <!-- 轮播图 -->
-
-        <div class="data-add-container  sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
-
-            <form class="layui-form layui-form-pane add" lay-filter="myForm">
-0
-    <!-- 当前表的 -->
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        账户：
-                    </label>
-                    <div class="layui-input-block">
-                        <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
+    </div>
+    <!-- 数据添加容器，包含用户信息输入表单，通过Vue动态样式绑定设置内边距、外边距、背景颜色等属性 -->
+    <div class="data-add-container  sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
+        <!-- layui表单，收集用户信息，设置表单过滤器myForm，用于表单验证等操作 -->
+        <form class="layui-form layui-form-pane add" lay-filter="myForm">
+            <!-- 用户账户输入项表单项，通过Vue动态样式绑定设置外观属性 -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <!-- 表单标签，显示“账户：”文本，通过Vue动态样式绑定设置宽度、颜色等属性 -->
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    账户：
+                </label>
+                <!-- 表单输入块，包含输入框，使用Vue双向绑定v - model将输入值与detail.username绑定，可根据ro.username设置只读属性 -->
+                <div class="layui-input-block">
+                    <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
                            v-model="detail.username" type="text" :readonly="ro.username" name="username" id="username" autocomplete="off">
-                    </div>
                 </div>
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        用户姓名：
-                    </label>
-                    <div class="layui-input-block">
-                        <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
+            </div>
+            <!-- 用户姓名输入项表单项，结构和功能与账户输入项类似 -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    用户姓名：
+                </label>
+                <div class="layui-input-block">
+                    <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
                            v-model="detail.yonghuName" type="text" :readonly="ro.yonghuName" name="yonghuName" id="yonghuName" autocomplete="off">
-                    </div>
                 </div>
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        头像：
-                    </label>
-                    <div class="layui-input-block">
-                        <div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
-                            <img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
-                            <input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
-                        </div>
-                        <button v-if="!ro.yonghuPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yonghuPhotoUpload">
-                            <i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
-                        </button>
+            </div>
+            <!-- 用户头像上传和显示部分表单项 -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    头像：
+                </label>
+                <div class="layui-input-block">
+                    <!-- 如果detail.yonghuPhoto有值，显示头像图片和隐藏输入框，用于存储头像文件路径 -->
+                    <div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
+                        <img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
+                        <input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
                     </div>
+                    <!-- 如果ro.yonghuPhoto为false，即头像可编辑，显示上传头像按钮，点击触发文件上传操作 -->
+                    <button v-if="!ro.yonghuPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yonghuPhotoUpload">
+                        <i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
+                    </button>
                 </div>
-    <!-- 手机号 -->
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        用户手机号：
-                    </label>
-                    <div class="layui-input-block">
-                        <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
+            </div>
+            <!-- 用户手机号输入项表单项，设置layui表单验证规则phone（手机号格式验证）和required（必填项验证） -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    用户手机号：
+                </label>
+                <div class="layui-input-block">
+                    <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
                            v-model="detail.yonghuPhone" lay-verify="phone|required" type="text" :readonly="ro.yonghuPhone" name="yonghuPhone" id="yonghuPhone" autocomplete="off">
-                    </div>
                 </div>
-    <!-- 身份证号 -->
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        用户身份证号：
-                    </label>
-                    <div class="layui-input-block">
-                        <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
+            </div>
+            <!-- 用户身份证号输入项表单项，设置layui表单验证规则identity（身份证号格式验证）和required（必填项验证） -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    用户身份证号：
+                </label>
+                <div class="layui-input-block">
+                    <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
                            v-model="detail.yonghuIdNumber" lay-verify="identity|required" type="text" :readonly="ro.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" autocomplete="off">
-                    </div>
                 </div>
-    <!-- 邮箱 -->
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        邮箱：
-                    </label>
-                    <div class="layui-input-block">
-                        <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
+            </div>
+            <!-- 用户邮箱输入项表单项，设置layui表单验证规则email（邮箱格式验证）和required（必填项验证） -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    邮箱：
+                </label>
+                <div class="layui-input-block">
+                    <input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
                            v-model="detail.yonghuEmail" lay-verify="email|required" type="text" :readonly="ro.yonghuEmail" name="yonghuEmail" id="yonghuEmail" autocomplete="off">
-                    </div>
                 </div>
-                    <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <label  :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        性别：
-                    </label>
-                    <div class="layui-input-block">
-                        <select name="sexTypes" id="sexTypes" lay-filter="sexTypes">
-                            <option value="">请选择</option>
-                            <option v-for="(item,index) in sexTypesList" v-bind:key="index" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
-                        </select>
-                    </div>
+            </div>
+            <!-- 用户性别选择表单项 -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
+                    性别：
+                </label>
+                <div class="layui-input-block">
+                    <!-- 下拉选择框，绑定数据为sexTypesList，通过lay - filter进行事件监听 -->
+                    <select name="sexTypes" id="sexTypes" lay-filter="sexTypes">
+                        <!-- 默认提示选项 -->
+                        <option value="">请选择</option>
+                        <!-- 使用Vue的v - for指令循环渲染下拉选项 -->
+                        <option v-for="(item,index) in sexTypesList" v-bind:key="index" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
+                    </select>
                 </div>
-                <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <div class="layui-input-block" style="text-align: right;">
-                        <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
-                    </div>
+            </div>
+            <!-- 表单提交按钮所在表单项 -->
+            <div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
+                <div class="layui-input-block" style="text-align: right;">
+                    <!-- 提交按钮，点击触发表单提交事件，通过lay - submit和lay - filter进行监听 -->
+                    <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
                 </div>
-
-            </form>
-        </div>
+            </div>
+        </form>
     </div>
+</div>
 
-    <script src="../../layui/layui.js"></script>
-    <script src="../../js/vue.js"></script>
-    <!-- 引入element组件库 -->
-    <script src="../../xznstatic/js/element.min.js"></script>
-    <!-- 引入element样式 -->
-    <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-    <!-- 组件配置信息 -->
-    <script src="../../js/config.js"></script>
-    <!-- 扩展插件配置信息 -->
-    <script src="../../modules/config.js"></script>
-    <!-- 工具方法 -->
-    <script src="../../js/utils.js"></script>
-    <!-- 校验格式工具类 -->
-    <script src="../../js/validate.js"></script>
-    <!-- 地图 -->
-    <script type="text/javascript" src="../../js/jquery.js"></script>
-    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
-    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
-
-    <script>
-        var jquery = $;
-
-        var vue = new Vue({
-            el: '#app',
-            data: {
-                // 轮播图
-                swiperList: [{
-                    img: '../../img/banner.jpg'
-                }],
-                dataList: [],
-                ro:{
-                    username: false,
-                    password: false,
-                    yonghuName: false,
-                    yonghuPhoto: false,
-                    yonghuPhone: false,
-                    yonghuIdNumber: false,
-                    yonghuEmail: false,
-                    sexTypes: false,
-                    newMoney: false,
-                    yonghuDelete: false,
-                    createTime: false,
-                },
-                detail: {
-                    username: '',
-                    password: '',
-                    yonghuName: '',
-                    yonghuPhoto: '',
-                    yonghuPhone: '',
-                    yonghuIdNumber: '',
-                    yonghuEmail: '',
-                    sexTypes: '',//数字
-                    sexValue: '',//数字对应的值
-                    newMoney: '',
-                    yonghuDelete: '',
-                    createTime: '',
-                },
-                // 级联表的
+<!-- 引入layui的核心脚本文件 -->
+<script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js库 -->
+<script src="../../js/vue.js"></script>
+<!-- 引入element组件库脚本文件 -->
+<script src="../../xznstatic/js/element.min.js"></script>
+<!-- 引入element组件库的样式文件 -->
+<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入组件配置信息脚本文件 -->
+<script src="../../js/config.js"></script>
+<!-- 引入扩展插件配置信息脚本文件 -->
+<script src="../../modules/config.js"></script>
+<!-- 引入工具方法脚本文件 -->
+<script src="../../js/utils.js"></script>
+<!-- 引入校验格式工具类脚本文件 -->
+<script src="../../js/validate.js"></script>
+<!-- 引入jQuery库 -->
+<script type="text/javascript" src="../../js/jquery.js"></script>
+<!-- 引入高德地图API，设置版本和密钥 -->
+<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
+<!-- 引入bootstrap的脚本文件 -->
+<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
+<!-- 引入bootstrap的地图定位选择器插件脚本文件 -->
+<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
 
-                // 下拉框
-                sexTypesList: [],
+<script>
+    // 将jQuery对象赋值给jquery变量
+    var jquery = $;
 
-                centerMenu: centerMenu
+    // 创建Vue实例
+    var vue = new Vue({
+        // 指定Vue实例的挂载点
+        el: '#app',
+        // 定义Vue实例的数据
+        data: {
+            // 轮播图数据数组
+            swiperList: [{
+                img: '../../img/banner.jpg'
+            }],
+            // 数据列表
+            dataList: [],
+            // 只读属性配置对象
+            ro: {
+                username: false,
+                password: false,
+                yonghuName: false,
+                yonghuPhoto: false,
+                yonghuPhone: false,
+                yonghuIdNumber: false,
+                yonghuEmail: false,
+                sexTypes: false,
+                newMoney: false,
+                yonghuDelete: false,
+                createTime: false,
             },
-            updated: function() {
-                layui.form.render('select', 'myForm');
+            // 用户详情数据对象
+            detail: {
+                username: '',
+                password: '',
+                yonghuName: '',
+                yonghuPhoto: '',
+                yonghuPhone: '',
+                yonghuIdNumber: '',
+                yonghuEmail: '',
+                sexTypes: '',//数字
+                sexValue: '',//数字对应的值
+                newMoney: '',
+                yonghuDelete: '',
+                createTime: '',
             },
-            computed: {
-            },
-            methods: {
-                jump(url) {
-                    jump(url)
-                }
+            // 下拉框数据数组
+            sexTypesList: [],
+            // 中心菜单数据
+            centerMenu: centerMenu
+        },
+        // 当Vue实例的数据更新后执行的钩子函数
+        updated: function() {
+            // 重新渲染layui的表单下拉框
+            layui.form.render('select', 'myForm');
+        },
+        // 计算属性
+        computed: {
+        },
+        // 定义Vue实例的方法
+        methods: {
+            // 跳转页面方法
+            jump(url) {
+                jump(url)
             }
-        })
-
+        }
+    })
 
-        layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
-            var layer = layui.layer;
-            var element = layui.element;
-            var carousel = layui.carousel;
-            var http = layui.http;
-            var jquery = layui.jquery;
-            var form = layui.form;
-            var upload = layui.upload;
-            var laydate = layui.laydate;
-            var tinymce = layui.tinymce
+    // 加载layui的相关模块
+    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
+        // 获取layer模块，用于弹出层等操作
+        var layer = layui.layer;
+        // 获取element模块，用于操作页面元素
+        var element = layui.element;
+        // 获取carousel模块，用于轮播图操作
+        var carousel = layui.carousel;
+        // 获取http模块，用于发起HTTP请求
+        var http = layui.http;
+        // 获取jquery模块，用于操作DOM
+        var jquery = layui.jquery;
+        // 获取form模块，用于表单操作
+        var form = layui.form;
+        // 获取upload模块，用于文件上传操作
+        var upload = layui.upload;
+        // 获取laydate模块，用于日期选择器操作
+        var laydate = layui.laydate;
+        // 获取tinymce模块，用于富文本编辑器操作
+        var tinymce = layui.tinymce;
 
-            // 获取轮播图 数据
-            http.request('config/list', 'get', {
-                page: 1,
-                limit: 5
-            }, function (res) {
-                if (res.data.list.length > 0) {
-                    let swiperList = [];
-                    res.data.list.forEach(element => {
-                        if(element.value != null){
-                            swiperList.push({
-                                img: element.value
-                            });
-                        }
-                    });
-                    vue.swiperList = swiperList;
-
-                    vue.$nextTick(() => {
-                        carousel.render({
-                            elem: '#swiper',
-                            width: '100%',
-                            height: '450px',
-                            arrow: 'hover',
-                            anim: 'default',
-                            autoplay: 'true',
-                            interval: '3000',
-                            indicator: 'inside'
+        // 发起HTTP请求获取轮播图数据
+        http.request('config/list', 'get', {
+            page: 1,
+            limit: 5
+        }, function (res) {
+            // 如果返回数据列表不为空
+            if (res.data.list.length > 0) {
+                // 初始化轮播图数据数组
+                let swiperList = [];
+                // 遍历返回的数据列表
+                res.data.list.forEach(element => {
+                    // 如果数据项的值不为空
+                    if(element.value != null){
+                        // 将数据项添加到轮播图数据数组中
+                        swiperList.push({
+                            img: element.value
                         });
+                    }
+                });
+                // 更新Vue实例中的轮播图数据
+                vue.swiperList = swiperList;
+
+                // 在DOM更新后执行回调函数
+                vue.$nextTick(() => {
+                    // 渲染轮播图组件
+                    carousel.render({
+                        elem: '#swiper',
+                        width: '100%',
+                        height: '450px',
+                        arrow: 'hover',
+                        anim: 'default',
+                        autoplay: 'true',
+                        interval: '3000',
+                        indicator: 'inside'
                     });
-                }
-            });
+                });
+            }
+        });
 
-            // 下拉框
-            // 性别的查询和初始化
-            sexTypesSelect();
+        // 调用性别下拉框数据查询和初始化函数
+        sexTypesSelect();
 
-           // 上传文件
-            // 头像的文件上传
-            upload.render({
-                //绑定元素
-                elem: '#yonghuPhotoUpload',
-                //上传接口
-                url: http.baseurl + 'file/upload',
-                // 请求头
-                headers: {
-                    Token: localStorage.getItem('Token')
-                },
-                // 允许上传时校验的文件类型
-                accept: 'images',
-                before: function () {
-                    //loading层
-                    var index = layer.load(1, {
-                        shade: [0.1, '#fff'] //0.1透明度的白色背景
+        // 初始化头像文件上传组件
+        upload.render({
+            // 绑定上传按钮元素
+            elem: '#yonghuPhotoUpload',
+            // 上传接口地址
+            url: http.baseurl + 'file/upload',
+            // 请求头，添加Token信息
+            headers: {
+                Token: localStorage.getItem('Token')
+            },
+            // 允许上传的文件类型为图片
+            accept: 'images',
+            // 上传前的回调函数
+            before: function () {
+                // 显示加载层
+                var index = layer.load(1, {
+                    shade: [0.1, '#fff'] //0.1透明度的白色背景
+                });
+            },
+            // 上传成功的回调函数
+            done: function (res) {
+                // 打印上传结果
+                console.log(res);
+                // 关闭所有加载层
+                layer.closeAll();
+                // 如果上传成功
+                if (res.code == 0) {
+                    // 弹出上传成功提示框
+                    layer.msg("上传成功", {
+                        time: 2000,
+                        icon: 6
                     });
-                },
-                // 上传成功
-                done: function (res) {
-                    console.log(res);
-                    layer.closeAll();
-                    if (res.code == 0) {
-                        layer.msg("上传成功", {
-                            time: 2000,
-                            icon: 6
-                        })
-                        var url = http.baseurl + 'upload/' + res.file;
-                        jquery('#yonghuPhoto').val(url);
-                        vue.detail.yonghuPhoto = url;
-                        jquery('#yonghuPhotoImg').attr('src', url);
-                    } else {
-                        layer.msg(res.msg, {
-                            time: 2000,
-                            icon: 5
-                        })
-                    }
-                },
-                //请求异常回调
-                error: function () {
-                    layer.closeAll();
-                    layer.msg("请求接口异常", {
+                    // 拼接头像文件的完整URL
+                    var url = http.baseurl + 'upload/' + res.file;
+                    // 设置隐藏输入框的值为头像文件的URL
+                    jquery('#yonghuPhoto').val(url);
+                    // 更新Vue实例中的头像数据
+                    vue.detail.yonghuPhoto = url;
+                    // 设置头像图片的src属性为头像文件的URL
+                    jquery('#yonghuPhotoImg').attr('src', url);
+                } else {
+                    // 弹出上传失败提示框
+                    layer.msg(res.msg, {
                         time: 2000,
                         icon: 5
-                    })
-                }
-            });
-            // 日期效验规则及格式
-            dateTimePick();
-            // 表单效验规则
-            form.verify({
-                // 正整数效验规则
-                integer: [
-                    /^[1-9][0-9]*$/
-                    ,'必须是正整数'
-                ]
-                // 小数效验规则
-                ,double: [
-                    /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
-                    ,'最大整数位为6为,小数最大两位'
-                ]
-            });
-
-            // session独取
-            let table = localStorage.getItem("userTable");
-            http.request(table+"/session", 'get', {}, function (data) {
-                // 表单赋值
-                //form.val("myForm", data.data);
-                // data = data.data;
-                for (var key in data) {
-                    vue.detail[table+"Id"] = data.id
+                    });
                 }
-            });
+            },
+            // 请求异常的回调函数
+            error: function () {
+                // 关闭所有加载层
+                layer.closeAll();
+                // 弹出请求接口异常提示框
+                layer.msg("请求接口异常", {
+                    time: 2000,
+                    icon: 5
+                });
+            }
+        });
+        // 调用日期框初始化函数
+        dateTimePick();
+        // 定义表单验证规则
+        form.verify({
+            // 正整数验证规则
+            integer: [
+                /^[1-9][0-9]*$/
+                ,'必须是正整数'
+            ],
+            // 小数验证规则
+            double: [
+                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
+                ,'最大整数位为6位,小数最大两位'
+            ]
+        });
 
+        // 从本地存储中获取用户表名
+        let table = localStorage.getItem("userTable");
+        // 发起HTTP请求获取用户会话数据
+        http.request(table+"/session", 'get', {}, function (data) {
+            // 遍历返回的数据
+            for (var key in data) {
+                // 将用户ID存储到Vue实例的detail对象中
+                vue.detail[table+"Id"] = data.id;
+            }
+        });
 
-            // 提交
-            form.on('submit(thisSubmit)', function (data) {
-                data = data.field;
-                data["Id"]= localStorage.getItem("userid");
-                // 提交数据
-                http.requestJson('yonghu' + '/add', 'post', data, function (res) {
-                    layer.msg('提交成功', {
-                        time: 2000,
-                        icon: 6
-                    }, function () {
-                        back();
-                    });
+        // 监听表单提交事件
+        form.on('submit(thisSubmit)', function (data) {
+            // 获取表单数据
+            data = data.field;
+            // 从本地存储中获取用户ID并添加到表单数据中
+            data["Id"]= localStorage.getItem("userid");
+            // 发起JSON格式的HTTP请求提交用户信息
+            http.requestJson('yonghu' + '/add', 'post', data, function (res) {
+                // 弹出提交成功提示框
+                layer.msg('提交成功', {
+                    time: 2000,
+                    icon: 6
+                }, function () {
+                    // 提交成功后执行返回操作
+                    back();
                 });
-                return false
             });
-
+            // 阻止表单默认提交行为
+            return false;
         });
-        // 日期框初始化
-        function dateTimePick(){
-            var myDate = new Date();  //获取当前时间
-            /*
-                ,change: function(value, date, endDate){
-                    value       得到日期生成的值，如：2017-08-18
-                    date        得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
-                    endDate     得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
-            */
-        }
-
-
-
-
-       // 性别的查询
-       function sexTypesSelect() {
-           //填充下拉框选项
-           layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
-               if(res.code == 0){
-                   vue.sexTypesList = res.data.list;
-               }
-           });
-       }
+    });
 
+    // 日期框初始化函数
+    function dateTimePick(){
+        // 获取当前时间
+        var myDate = new Date();
+        // 注释中给出了日期框change事件的回调函数示例
+        /*
+            ,change: function(value, date, endDate){
+                value       得到日期生成的值，如：2017-08-18
+                date        得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
+                endDate     得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
+        */
+    }
 
-    </script>
+    // 性别下拉框数据查询函数
+    function sexTypesSelect() {
+        // 发起HTTP请求获取性别下拉框数据
+        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
+            // 如果请求成功
+            if(res.code == 0){
+                // 更新Vue实例中的性别下拉框数据
+                vue.sexTypesList = res.data.list;
+            }
+        });
+    }
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/yonghu/center.html b/target/classes/front/front/pages/yonghu/center.html
index d08f62e..391e0c8 100644
--- a/target/classes/front/front/pages/yonghu/center.html
+++ b/target/classes/front/front/pages/yonghu/center.html
@@ -1,22 +1,27 @@
-
-<!-- 个人中心 -->
 <!DOCTYPE html>
 <html>
+
 <head>
+    <!-- 设置页面字符编码为UTF-8，确保支持中文及特殊字符正确显示 -->
     <meta charset="utf-8">
+    <!-- 配置视口参数，使页面适配不同设备屏幕尺寸，禁止用户缩放以保持布局一致性 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 定义页面标题，显示在浏览器标签栏 -->
     <title>个人中心</title>
+    <!-- 引入layui框架基础样式，提供组件化UI支持（如表单、导航、按钮等） -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 引入element样式 -->
+    <!-- 引入element-ui组件库样式，用于扩展表单选择框等组件的样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-    <!-- 样式 -->
+    <!-- 引入自定义全局样式文件，包含页面整体布局和通用样式规则 -->
     <link rel="stylesheet" href="../../css/style.css" />
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题样式文件，定义品牌色、背景色等主题相关样式 -->
     <link rel="stylesheet" href="../../css/theme.css" />
-    <!-- 通用的css -->
+    <!-- 引入公共样式文件，包含多个页面共享的基础样式（如字体、边距等） -->
     <link rel="stylesheet" href="../../css/common.css" />
 </head>
+<!-- 页面自定义样式区域，覆盖或补充第三方样式库的样式 -->
 <style>
+    /* 设置页面全屏背景伪元素，固定定位并居中显示背景图，z-index确保在内容层下方 */
     html::after {
         position: fixed;
         top: 0;
@@ -25,521 +30,591 @@
         bottom: 0;
         content: '';
         display: block;
-        background-attachment: fixed;
-        background-size: cover;
-        background-position: center;
-        z-index: -1;
+        background-attachment: fixed; /* 背景图固定不随滚动条移动 */
+        background-size: cover; /* 背景图等比缩放覆盖整个容器 */
+        background-position: center; /* 背景图居中显示 */
+        z-index: -1; /* 层级低于页面内容 */
     }
+    /* 轮播图容器样式，溢出隐藏以实现图片滑动切换效果 */
     #swiper {
         overflow: hidden;
     }
+    /* 轮播图未激活状态指示器样式，定义非当前页点的外观 */
     #swiper .layui-carousel-ind li {
-        width: 20px;
-        height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0,0,0,.3);
-        border-radius: 6px;
-        background-color: #f7f7f7;
-        box-shadow: 0 0 6px rgba(255,0,0,.8);
+        width: 20px; /* 指示器宽度 */
+        height: 10px; /* 指示器高度 */
+        border: 0 solid rgba(0, 0, 0, .3); /* 透明边框 */
+        border-radius: 6px; /* 圆角处理 */
+        background-color: #f7f7f7; /* 背景色 */
+        box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影效果 */
     }
+    /* 轮播图激活状态指示器样式，通过宽度变化突出当前页 */
     #swiper .layui-carousel-ind li.layui-this {
-        width: 30px;
+        width: 30px; /* 当前页指示器宽度略宽 */
         height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0,0,0,.3);
+        border: 0 solid rgba(0, 0, 0, .3);
         border-radius: 6px;
     }
 
+    /* 页面标题容器样式，使用flex布局实现垂直居中排列 */
     .index-title {
-        text-align: center;
-        box-sizing: border-box;
-        width: 980px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+        text-align: center; /* 文本居中 */
+        box-sizing: border-box; /* 盒模型包含内边距和边框 */
+        width: 980px; /* 固定宽度 */
+        display: flex; /* 弹性布局 */
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        flex-direction: column; /* 子元素垂直排列 */
     }
+    /* 标题内span元素样式，控制文字间距和行高 */
     .index-title span {
-        padding: 0 10px;
-        line-height: 1.4;
+        padding: 0 10px; /* 左右内边距 */
+        line-height: 1.4; /* 行高 */
     }
+    /* 个人中心导航树容器样式，占满父容器宽度 */
     .center-container .layui-nav-tree {
         width: 100%;
     }
+    /* 导航组件位置样式，继承父元素定位属性 */
     .center-container .layui-nav {
         position: inherit;
     }
+    /* 导航树单项基础样式，定义高度、行高、字体、边框等 */
     .center-container .layui-nav-tree .layui-nav-item {
-        height: 44px;
-        line-height: 44px;
-        font-size: 16px;
-        color: rgba(17, 17, 17, 1);
-        border-width: 0px 0px 1px 0px;
-        border-style: solid;
-        border-radius: 0;
-        background-color: #fff;
-        text-align: center;
+        height: 44px; /* 导航项高度 */
+        line-height: 44px; /* 行高等于高度实现垂直居中 */
+        font-size: 16px; /* 字体大小 */
+        color: rgba(17, 17, 17, 1); /* 文字颜色 */
+        border-bottom: 1px solid rgba(0, 0, 0, .3); /* 底部边框 */
+        border-radius: 0; /* 直角 */
+        background-color: #fff; /* 背景色 */
+        text-align: center; /* 文本居中 */
     }
+    /* 导航树激活状态样式，隐藏导航条并保持文字颜色一致 */
     .center-container .layui-nav-tree .layui-nav-bar {
-        height: 44px !important;
-        opacity: 0 !important;
+        height: 44px !important; /* 强制设置高度 */
+        opacity: 0 !important; /* 完全透明 */
     }
+    /* 导航树当前选中项样式，突出显示但不改变基础样式 */
     .center-container .layui-nav-tree .layui-nav-item.layui-this {
         font-size: 16px;
         color: rgba(17, 17, 17, 1);
-        border-width: 0;
-        border-style: solid;
-        border-radius: 0;
+        border: 0;
     }
+    /* 导航树悬停样式，缩小字体并改变文字颜色增强交互反馈 */
     .center-container .layui-nav-tree .layui-nav-item:hover {
-        font-size: 14px;
-        color: #fff;
-        border-width: 0;
-        border-style: solid;
-        border-radius: 0;
+        font-size: 14px; /* 悬停时字体缩小 */
+        color: #fff; /* 白色文字 */
+        border: 0;
     }
+    /* 导航链接样式，去除默认装饰并继承父级样式 */
     .center-container .layui-nav-tree .layui-nav-item a {
-        line-height: inherit;
-        height: auto;
-        background-color: inherit;
-        color: inherit;
-        text-decoration: none;
+        line-height: inherit; /* 继承父级行高 */
+        height: auto; /* 自动高度 */
+        background: inherit; /* 继承背景色 */
+        color: inherit; /* 继承文字颜色 */
+        text-decoration: none; /* 去除下划线 */
     }
+    /* 右侧内容容器样式，相对定位用于子元素绝对定位参考 */
     .right-container {
         position: relative;
     }
 
+    /* 表单行样式，使用flex布局使标签和输入框垂直居中对齐 */
     .right-container .layui-form-item {
         display: flex;
         align-items: center;
     }
+    /* 输入块样式，占据剩余空间实现弹性布局 */
     .right-container .layui-input-block {
         margin: 0;
-        flex: 1;
+        flex: 1; /* 弹性增长 */
     }
+    /* 输入框基础样式，定义内边距、高度、边框等 */
     .right-container .input .layui-input {
-        padding: 0 12px;
-        height: 40px;
-        font-size: 15px;
-        border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
-        background-color: #fff;
-        text-align: left;
+        padding: 0 12px; /* 左右内边距 */
+        height: 40px; /* 固定高度 */
+        font-size: 15px; /* 字体大小 */
+        border: 1px solid #e0e0e0; /* 细边框 */
+        border-radius: 4px; /* 圆角 */
+        background-color: #fff; /* 白色背景 */
+        text-align: left; /* 文本左对齐 */
     }
+    /* 选择框样式，与输入框保持一致外观 */
     .right-container .select .layui-input {
         padding: 0 12px;
         height: 40px;
         font-size: 15px;
+        border: 1px solid #e0e0e0;
         border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
         background-color: #fff;
         text-align: left;
     }
+    /* 日期输入框样式，通过颜色区分功能类型 */
     .right-container .date .layui-input {
         padding: 0 12px;
         height: 40px;
         font-size: 15px;
-        color: rgba(160, 67, 26, 1);
+        color: rgba(160, 67, 26, 1); /* 特殊颜色标识日期字段 */
+        border: 1px solid #e0e0e0;
         border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
         background-color: #fff;
-        box-shadow: 0 0 0px rgba(255,0,0,.8);
         text-align: left;
     }
 
-
-        .header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
-		#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
-		.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
-		#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
-		.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
-		#category a.active::before {display: none;}
-		#category a.active::after {display:none;}
-		#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
-		#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
-		#category li:last-child { border-bottom:none;}
-		#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
-		#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
-		#category a.active::before {display: none;}
-		#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
-		#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF;  transition: 0.3s; transform-origin: bottom;}
-		#category li:hover ul li{width: 136px;}
-		#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden;    background-color: rgb(34, 73, 160);    padding-left:0px;}
-		#category li ul li:hover a{  padding-left:0px; margin-left: 0px;}
-		#category li:hover a{color:#fff}
+    /* 头部区域样式，添加淡入向上动画和底部边框 */
+    .header {
+        animation: fadeInUp 0.5s ease-out; /* 动画效果 */
+        padding: 70px 0 26px; /* 上下内边距 */
+        position: relative; /* 相对定位 */
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部浅灰色边框 */
+        margin-bottom: 40px; /* 底部外边距 */
+    }
+    /* 头部标题容器样式，固定定位并设置圆角 */
+    #plheader {
+        top: 48px; /* 距离顶部位置 */
+        padding: 40px 0 40px; /* 上下内边距 */
+        width: 220px; /* 固定宽度 */
+        height: 70px; /* 固定高度 */
+        border-radius: 3px 3px 0 0; /* 顶部圆角 */
+    }
+    /* 头部主标题样式，白色粗体文字，底部带分隔线 */
+    .header p.title {
+        color: #fff; /* 白色文字 */
+        font-size: 25px; /* 较大字体 */
+        font-weight: bold; /* 加粗 */
+        margin: 0 0 8px 31px; /* 外边距 */
+        white-space: nowrap; /* 不换行 */
+        overflow: hidden; /* 溢出隐藏 */
+        border-bottom: 1px solid rgba(255, 255, 255, 0.16); /* 底部半透明边框 */
+    }
+    /* 分类导航容器样式，浮动布局实现左侧导航 */
+    #category {
+        padding: 136px 0 30px 15px; /* 内边距 */
+        width: 205px; /* 固定宽度 */
+        float: left; /* 左浮动 */
+        background-color: var(--publicMainColor); /* 主题背景色 */
+        border-radius: 0 0 3px 3px; /* 底部圆角 */
+    }
+    /* 头部副标题样式，右侧浮动显示，限制宽度 */
+    .header p.subtitle {
+        font-family: HELVETICANEUELTPRO-THEX, "微软雅黑"; /* 字体 */
+        letter-spacing: 1px; /* 字母间距 */
+        font-size: 15px; /* 字体大小 */
+        color: #fff; /* 白色文字 */
+        float: right; /* 右浮动 */
+        width: 156px; /* 固定宽度 */
+        overflow: hidden; /* 溢出隐藏 */
+    }
+    /* 分类链接激活状态伪元素隐藏，避免视觉干扰 */
+    #category a.active::before,
+    #category a.active::after {
+        display: none;
+    }
+    /* 分类链接激活及悬停样式，渐变背景和颜色变化 */
+    #category a.active,
+    #category a:hover {
+        background: var(--publicSubColor); /* 主题强调色 */
+        color: #FFFFFF; /* 白色文字 */
+        border-color: #838383; /* 深灰边框 */
+        transition: all 0.3s ease; /* 过渡效果 */
+    }
+    /* 分类列表项基础样式，带底部细边框和过渡动画 */
+    #category li {
+        height: 43px; /* 固定高度 */
+        line-height: 43px; /* 垂直居中 */
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 底部半透明边框 */
+        padding-left: 15px; /* 左内边距 */
+        transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* 缓动动画 */
+    }
+    /* 最后一个分类项去除底部边框，保持列表完整性 */
+    #category li:last-child {
+        border-bottom: none;
+    }
+    /* 分类链接基础样式，透明背景和灰色文字 */
+    #category a {
+        border: 0;
+        background: none;
+        color: #CFDCF9; /* 浅灰蓝色文字 */
+        font-size: 14px; /* 较小字体 */
+        display: block; /* 块级元素 */
+        height: 42px; /* 固定高度 */
+    }
+    /* 分类链接伪元素样式，用于悬停时的背景效果 */
+    #category a::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        left: -16px; /* 左侧偏移 */
+        width: 190px; /* 伪元素宽度 */
+        height: 42px; /* 伪元素高度 */
+        transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* 过渡效果 */
+    }
+    /* 分类项悬停时左内边距增大，显示强调背景 */
+    #category li:hover {
+        padding-left: 30px; /* 增大左内边距 */
+        background-color: var(--publicSubColor); /* 强调背景色 */
+    }
 </style>
+
 <body>
-    <div id="app">
-        <!-- 轮播图 -->
-        <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
-            <div carousel-item>
-                <div v-for="(item,index) in swiperList" :key="index">
-                    <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
-                </div>
+<!-- Vue根容器，绑定整个页面的Vue实例 -->
+<div id="app">
+    <!-- 轮播图容器，使用layui的carousel组件，动态绑定样式属性 -->
+    <div class="layui-carousel" id="swiper" :style='{
+            "boxShadow": "0 0 0px rgba(255,0,0,.8)",
+            "margin": "0 auto",
+            "borderColor": "rgba(0,0,0,.3)",
+            "borderRadius": "0px",
+            "borderWidth": "0",
+            "width": "100%",
+            "borderStyle": "solid"
+        }'>
+        <div carousel-item>
+            <!-- 轮播图内容项，通过v-for循环渲染图片数组 -->
+            <div v-for="(item, index) in swiperList" :key="index">
+                <img
+                        style="width: 100%; height: 100%; object-fit: cover;"
+                        :src="item.img"
+                        alt="轮播图图片"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- 个人中心主体容器，包含导航菜单和表单内容 -->
+    <div class="center-container">
+        <!-- 导航菜单容器，负边距调整位置 -->
+        <div style="width: auto; margin: -70px 10px 0px auto">
+            <!-- 菜单头部，显示标题和副标题 -->
+            <div class="header" id="plheader">
+                <p class="title">个人中心</p>
+                <p class="subtitle">USER / CENTER</p>
             </div>
+            <!-- 菜单列表，通过v-for生成导航项 -->
+            <ul id="category">
+                <li
+                        v-for="(item, index) in centerMenu"
+                        :key="index"
+                        :class="index === 0 ? 'bbbb' : ''"
+                >
+                    <!-- 菜单链接，点击时调用jump函数跳转页面 -->
+                    <a
+                            :href="'javascript:jump(\'' + item.url + '\')'"
+                            style="color: #FFFFFF;"
+                            :class="index === 0 ? 'aaaa' : ''"
+                    >
+                        {{ item.name }}
+                    </a>
+                </li>
+            </ul>
         </div>
-        <!-- 轮播图 -->
 
-        <!-- 标题 -->
-        <!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
-        <div class="line-container">
-            <p class="line" style="background: #EEEEEE;"> 个人中心 </p>
-        </div> -->
+        <!-- 右侧表单容器，包含用户信息输入区域 -->
+        <div class="right-container sub_borderColor" :style='{
+                "padding": "20px",
+                "boxShadow": "0px rgba(255,0,0,.8)",
+                "margin": "0",
+                "backgroundColor": "#fff",
+                "borderRadius": "0",
+                "borderWidth": "1px",
+                "borderStyle": "solid"
+            }'>
+            <form class="layui-form">
+                <!-- 隐藏域存储用户ID，用于表单提交时传递主键 -->
+                <input type="hidden" v-model="detail.id" name="id" id="id" />
 
-        <!-- 标题 -->
+                <!-- 账户输入项，带必填校验 -->
+                <div class="layui-form-item main_borderColor" :style='{
+                        "padding": "10px",
+                        "boxShadow": "0 0 0px rgba(255,0,0,.8)",
+                        "margin": "0 0 10px 0",
+                        "backgroundColor": "#fff",
+                        "borderRadius": "1px",
+                        "borderWidth": "0 0 1px 0",
+                        "borderStyle": "solid"
+                    }'>
+                    <label
+                            :style='{
+                                "width": "110px",
+                                "padding": "0 12px 0 0",
+                                "fontSize": "15px",
+                                "color": "#333",
+                                "textAlign": "left"
+                            }'
+                            class="layui-form-label"
+                    >
+                        账户
+                    </label>
+                    <div class="layui-input-block input">
+                        <input
+                                type="text"
+                                v-model="detail.username"
+                                name="username"
+                                id="username"
+                                lay-verify="required"
+                                placeholder="账户"
+                                autocomplete="off"
+                                class="layui-input"
+                        />
+                    </div>
+                </div>
 
-        <div class="center-container">
-            <!-- 个人中心菜单 config.js-->
-<div style=" width:auto; margin:-70px 10px 0px auto">
-    <div class="header" id="plheader">
-        <p class="title">个人中心</p>
-        <p class="subtitle">USER / CENTER</p>
-    </div>
-    <ul id="category">
-        <li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
-            <a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
-        </li>
-    </ul>
-</div>            <!-- 个人中心菜单 -->
-            <!-- 个人中心 -->
-            <div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
-                <form class="layui-form">
-                    <!-- 主键 -->
-                    <input type="hidden" v-model="detail.id" name="id" id="id" />
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            账户
-                        </label>
-                        <div class="layui-input-block input">
-                            <input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
-                        </div>
+                <!-- 用户姓名输入项，带必填校验 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>用户姓名</label>
+                    <div class="layui-input-block input">
+                        <input ... v-model="detail.yonghuName" lay-verify="required" ... />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            用户姓名
-                        </label>
-                        <div class="layui-input-block input">
-                            <input type="text" v-model="detail.yonghuName" name="yonghuName" id="yonghuName" lay-verify="required" placeholder="用户姓名" autocomplete="off" class="layui-input">
-                        </div>
+                </div>
+
+                <!-- 头像显示区域，隐藏标签并显示图片预览 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label style="opacity: 0;">头像</label>
+                    <div class="layui-input-block">
+                        <img
+                                id="yonghuPhotoImg"
+                                :style='{
+                                    "width": "80px",
+                                    "height": "80px",
+                                    "borderRadius": "10px",
+                                    "borderWidth": "1px",
+                                    "borderStyle": "solid",
+                                    "boxShadow": "0 0 3px rgba(160, 67, 26, 1)"
+                                }'
+                                :src="detail.yonghuPhoto"
+                        />
+                        <input type="hidden" v-model="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
-                            头像
-                        </label>
-                        <div class="layui-input-block">
-                            <img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yonghuPhoto">
-                            <input type="hidden" v-model="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
-                        </div>
+                </div>
+
+                <!-- 头像上传按钮，隐藏标签并绑定上传事件 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label style="opacity: 0;">头像</label>
+                    <div class="layui-input-block">
+                        <button
+                                :style='{
+                                    "padding": "0 10px",
+                                    "boxShadow": "0 0 0px rgba(255,0,0,.5)",
+                                    "margin": "0 10px 0 0",
+                                    "borderRadius": "8px",
+                                    "backgroundColor": "var(--publicMainColor)",
+                                    "color": "#fff"
+                                }'
+                                type="button"
+                                class="layui-btn btn-theme"
+                                id="yonghuPhotoUpload"
+                        >
+                            <i class="layui-icon">&#xe67c;</i>上传头像
+                        </button>
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
-                            头像
-                        </label>
-                        <div class="layui-input-block">
-                            <button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
-                                    id="yonghuPhotoUpload">
-                                <i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
-                            </button>
-                        </div>
+                </div>
+
+                <!-- 手机号输入项，带必填和手机号格式校验 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>用户手机号</label>
+                    <div class="layui-input-block input">
+                        <input ... v-model="detail.yonghuPhone" lay-verify="required|phone" ... />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            用户手机号
-                        </label>
-                        <div class="layui-input-block input">
-                            <input type="text" v-model="detail.yonghuPhone" name="yonghuPhone" id="yonghuPhone" lay-verify="required|phone" placeholder="用户手机号" autocomplete="off" class="layui-input">
-                        </div>
+                </div>
+
+                <!-- 身份证号输入项，带必填和身份证格式校验 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>用户身份证号</label>
+                    <div class="layui-input-block input">
+                        <input ... v-model="detail.yonghuIdNumber" lay-verify="required|identity" ... />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            用户身份证号
-                        </label>
-                        <div class="layui-input-block input">
-                            <input type="text" v-model="detail.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" lay-verify="required|identity" placeholder="用户身份证号" autocomplete="off" class="layui-input">
-                        </div>
+                </div>
+
+                <!-- 邮箱输入项，带必填和邮箱格式校验 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>邮箱</label>
+                    <div class="layui-input-block input">
+                        <input ... v-model="detail.yonghuEmail" lay-verify="required|email" ... />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            邮箱
-                        </label>
-                        <div class="layui-input-block input">
-                            <input type="text" v-model="detail.yonghuEmail" name="yonghuEmail" id="yonghuEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
-                        </div>
+                </div>
+
+                <!-- 性别选择框，使用element-ui的select组件 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>性别</label>
+                    <div class="layui-input-block select">
+                        <el-select
+                                v-model="detail.sexTypes"
+                                filterable
+                                placeholder="请选择性别 Search111"
+                                :style='{ "borderColor": "var(--publicMainColor)" }'
+                                name="sexTypes"
+                                id="sexTypes"
+                        >
+                            <el-option
+                                    v-for="(item, index) in sexTypesList"
+                                    :key="item.codeIndex"
+                                    :label="item.indexName"
+                                    :value="item.codeIndex"
+                            />
+                        </el-select>
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                            性别
-                        </label>
-                        <div class="layui-input-block select">
-                            <el-select v-model="detail.sexTypes" filterable placeholder="请选择性别 Search111 " style="border-color: var(--publicMainColor, #808080);" name="sexTypes" id="sexTypes">
-                                <el-option
-                                        v-for="(item,index) in sexTypesList"
-                                        v-bind:key="item.codeIndex"
-                                        :label="item.indexName"
-                                        :value="item.codeIndex">
-                                </el-option>
-                            </el-select>
-                        </div>
+                </div>
+
+                <!-- 余额显示项，带充值链接 -->
+                <div class="layui-form-item main_borderColor" :style='{...}'>
+                    <label ...>余额</label>
+                    <div class="layui-input-inline input">
+                        <input type="number" v-model="detail.newMoney" disabled placeholder="余额" class="layui-input" />
                     </div>
-                    <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                        <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">余额</label>
-                        <div class="layui-input-inline input">
-                            <input type="number" v-model="detail.newMoney" name="newMoney" id="newMoney" placeholder="余额" autocomplete="off" class="layui-input" disabled="disabled">
-                        </div>
-                        <div class="layui-form-mid layui-word-aux">
-                            <i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
-                            <a id="btn-recharge" href="javascript:void(0)">点我充值</a>
-                        </div>
+                    <div class="layui-form-mid layui-word-aux">
+                        <i class="layui-icon" style="color: red;">&#xe65e;</i>
+                        <a id="btn-recharge" href="javascript:void(0)">点我充值</a>
                     </div>
+                </div>
 
-                    <div class="layui-form-item">
-                        <div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
-                            <button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
-                            <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
-                        </div>
+                <!-- 表单操作按钮，更新信息和退出登录 -->
+                <div class="layui-form-item">
+                    <div class="layui-input-block" style="display: flex; flex-wrap: wrap;">
+                        <button
+                                :style='{...}'
+                                class="layui-btn btn-submit btn-theme"
+                                lay-submit lay-filter="*"
+                        >
+                            更新信息
+                        </button>
+                        <button
+                                :style='{
+                                    "backgroundColor": "rgba(255, 0, 0, 1)",
+                                    "color": "#fff"
+                                }'
+                                @click="logout"
+                                class="layui-btn btn-submit"
+                        >
+                            退出登录
+                        </button>
                     </div>
-                </form>
-            </div>
-            <!-- 个人中心 -->
+                </div>
+            </form>
         </div>
-
     </div>
+</div>
 
-    <!-- layui -->
-    <script src="../../layui/layui.js"></script>
-    <!-- vue -->
-    <script src="../../js/vue.js"></script>
-    <!-- 引入element组件库 -->
-    <script src="../../xznstatic/js/element.min.js"></script>
-    <!-- 组件配置信息 -->
-    <script src="../../js/config.js"></script>
-    <!-- 扩展插件配置信息 -->
-    <script src="../../modules/config.js"></script>
-    <!-- 工具方法 -->
-    <script src="../../js/utils.js"></script>
-    <!-- 校验格式工具类 -->
-    <script src="../../js/validate.js"></script>
+<!-- 引入第三方库脚本，顺序影响初始化逻辑 -->
+<script src="../../layui/layui.js"></script> <!-- layui核心库 -->
+<script src="../../js/vue.js"></script> <!-- Vue框架 -->
+<script src="../../xznstatic/js/element.min.js"></script> <!-- element-ui组件库 -->
+<script src="../../js/config.js"></script> <!-- 项目配置文件 -->
+<script src="../../modules/config.js"></script> <!-- 模块配置文件 -->
+<script src="../../js/utils.js"></script> <!-- 工具方法库 -->
+<script src="../../js/validate.js"></script> <!-- 表单校验库 -->
 
-    <script>
-        var vue = new Vue({
-            el: '#app',
-            data: {
-                // 轮播图
-                swiperList: [],
-                detail: {
-                    username: '',
-                    password: '',
-                    yonghuName: '',
-                    yonghuPhoto: '',
-                    yonghuPhone: '',
-                    yonghuIdNumber: '',
-                    yonghuEmail: '',
-                    sexTypes: '',//数字
-                    sexValue: '',//数字对应的值
-                    newMoney: '',
-                    yonghuDelete: '',
-                    createTime: '',
-                },
-                sexTypesList: [],
-                centerMenu: centerMenu
+<script>
+    // 初始化Vue实例，绑定页面根容器
+    var vue = new Vue({
+        el: '#app', // 绑定DOM元素
+        data: {
+            swiperList: [], // 轮播图图片数组
+            detail: {
+                // 用户详情数据对象，包含所有表单字段
+                username: '',
+                yonghuName: '',
+                yonghuPhoto: '',
+                yonghuPhone: '',
+                yonghuIdNumber: '',
+                yonghuEmail: '',
+                sexTypes: '',
+                newMoney: ''
             },
-            updated: function() {
-                // layui.form.render(null, 'myForm');
+            sexTypesList: [], // 性别选项列表
+            centerMenu: centerMenu // 导航菜单数据（从外部引入）
+        },
+        methods: {
+            // 页面跳转方法，接收URL参数
+            jump(url) {
+                window.location.href = url; // 跳转至指定URL
             },
-            methods: {
-                jump(url) {
-                    jump(url)
-                },
-                logout(){
-                    localStorage.removeItem('Token');
-                    localStorage.removeItem('role');
-                    localStorage.removeItem('sessionTable');
-                    localStorage.removeItem('adminName');
-                    localStorage.removeItem('userid');
-                    localStorage.removeItem('userTable');
-                    localStorage.removeItem('iframeUrl');
-                    window.parent.location.href = '../login/login.html';
-                }
+            // 退出登录方法，清除本地存储并返回登录页
+            logout() {
+                // 清除所有登录相关本地存储
+                localStorage.removeItem('Token');
+                localStorage.removeItem('role');
+                window.parent.location.href = '../login/login.html'; // 跳转登录页
             }
-        })
+        },
+        updated() {
+            // 表单更新后重新渲染layui组件（如下拉框）
+            layui.form.render();
+        }
+    });
 
-        layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
-            var layer = layui.layer;
-            var element = layui.element;
-            var carousel = layui.carousel;
-            var http = layui.http;
-            var jquery = layui.jquery;
-            var form = layui.form;
-            var upload = layui.upload;
+    // 初始化layui模块，按需加载所需组件
+    layui.use(['layer', 'http', 'form', 'upload', 'carousel'], function() {
+        var layer = layui.layer; // 弹出层组件
+        var http = layui.http; // 封装的HTTP请求工具
+        var form = layui.form; // 表单组件
+        var upload = layui.upload; // 文件上传组件
+        var carousel = layui.carousel; // 轮播图组件
 
-            // 充值
-            jquery('#btn-recharge').click(function(e) {
-                layer.open({
-                    type: 2,
-                    title: '用户充值',
-                    area: ['900px', '600px'],
-                    content: '../recharge/recharge.html'
-                });
+        // 充值按钮点击事件，打开充值弹窗
+        $('#btn-recharge').click(function() {
+            layer.open({
+                type: 2, // 弹出层类型（iframe）
+                title: '用户充值', // 弹窗标题
+                area: ['900px', '600px'], // 弹窗尺寸
+                content: '../recharge/recharge.html' // 弹窗内容页
             });
+        });
 
-            // 获取轮播图 数据
-            http.request('config/list', 'get', {
-                page: 1,
-                limit: 5
-            }, function(res) {
-                if (res.data.list.length > 0) {
-                    let swiperList = [];
-                    res.data.list.forEach(element => {
-                        if (element.value != null) {
-                        swiperList.push({
-                            img: element.value
-                        });
-                    }
-                });
-                    vue.swiperList = swiperList;
-                    // 轮播图
-                    vue.$nextTick(() => {
-                        carousel.render({
-                        elem: '#swiper',
+        // 获取轮播图数据并初始化轮播组件
+        http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
+            if (res.data.list.length > 0) {
+                vue.swiperList = res.data.list.map(item => ({ img: item.value }));
+                // DOM更新后初始化轮播图
+                vue.$nextTick(() => {
+                    carousel.render({
+                        elem: '#swiper', // 绑定轮播图容器
                         width: '100%',
                         height: '450px',
-                        arrow: 'hover',
-                        anim: 'default',
-                        autoplay: 'true',
-                        interval: '3000',
-                        indicator: 'inside'
+                        autoplay: 'true', // 自动播放
+                        interval: 3000 // 切换间隔
                     });
+                });
+            }
+        });
 
-                })
+        // 加载性别选项数据，填充下拉框
+        function sexTypesSelect() {
+            http.request('dictionary/page', 'get', { dicCode: 'sex_types' }, function(res) {
+                if (res.code === 0) {
+                    vue.sexTypesList = res.data.list; // 更新Vue数据
+                    form.render('select'); // 重新渲染下拉框
                 }
             });
+        }
 
-
-            // 查询字典表相关
-            // 性别的查询和初始化
-            sexTypesSelect();
-            // 日期效验规则及格式
-            dateTimePick();
-            // 表单效验规则
-            form.verify({
-                // 正整数效验规则
-                integer: [
-                    /^[1-9][0-9]*$/
-                    ,'必须是正整数'
-                ]
-                // 小数效验规则
-                ,double: [
-                    /^[0-9]{0,6}(\.[0-9]{1,2})?$/
-                    ,'最大整数位为6为,小数最大两位'
-                ]
-            });
-
-
-            // 上传 文件/图片
-            // 头像的文件上传
-            var yonghuPhotoUpload = upload.render({
-                //绑定元素
-                elem: '#yonghuPhotoUpload',
-                //上传接口
-                url: http.baseurl + 'file/upload',
-                // 请求头
-                headers: {
-                    Token: localStorage.getItem('Token')
-                },
-                // 允许上传时校验的文件类型
-                accept: 'images',
-                before: function() {
-                    //loading层
-                    var index = layer.load(1, {
-                        shade: [0.1, '#fff'] //0.1透明度的白色背景
-                    });
-                },
-                // 上传成功
-                done: function(res) {
-                    console.log(res);
-                    layer.closeAll();
-                    if (res.code == 0) {
-                        layer.msg("上传成功", {
-                            time: 2000,
-                            icon: 6
-                        })
-                        var url = http.baseurl + 'upload/' + res.file;
-                        vue.detail.yonghuPhoto = url;
-                    } else {
-                        layer.msg(res.msg, {
-                            time: 2000,
-                            icon: 5
-                        })
-                    }
-                },
-                //请求异常回调
-                error: function() {
-                    layer.closeAll();
-                    layer.msg("请求接口异常", {
-                        time: 2000,
-                        icon: 5
-                    })
+        // 初始化头像上传组件
+        upload.render({
+            elem: '#yonghuPhotoUpload', // 绑定上传按钮
+            url: http.baseurl + 'file/upload', // 上传接口
+            headers: { Token: localStorage.getItem('Token') }, // 请求头携带Token
+            accept: 'images', // 仅允许图片上传
+            done: function(res) {
+                // 上传成功处理
+                if (res.code === 0) {
+                    layer.msg('上传成功', { icon: 6 });
+                    vue.detail.yonghuPhoto = http.baseurl + 'upload/' + res.file; // 更新头像路径
+                } else {
+                    layer.msg(res.msg, { icon: 5 });
                 }
-            });
-            // 查询用户信息
-            let table = localStorage.getItem("userTable");
-
-            if(!table){
-                layer.msg('请先登录', {
-                    time: 2000,
-                    icon: 5
-                }, function() {
-                    window.parent.location.href = '../login/login.html';
-                });
             }
-
-            http.request(`yonghu/session`, 'get', {}, function(data) {
-                // 表单赋值
-                // form.val("myForm", data.data);
-                vue.detail = data.data
-                // 图片赋值
-                //jquery("#yonghuPhotoImg").attr("src", data.data.yonghuPhoto);
-            });
-
-            // 提交表单
-            form.on('submit(*)', function(data) {
-                data = vue.detail;
-                data['createTime']=jquery("#createTime").val();
-                http.requestJson(table + '/update', 'post', data, function(res) {
-                    layer.msg('修改成功', {
-                        time: 2000,
-                        icon: 6
-                    }, function() {
-                        window.location.reload();
-                    });
-                });
-                return false
-            });
-
         });
 
-        // 日期框初始化
-        function dateTimePick(){
-        }
-
-
-
-
-        //性别的查询
-        function sexTypesSelect() {
-            //填充下拉框选项
-            layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
-                if(res.code == 0){
-                    vue.sexTypesList = res.data.list;
+        // 表单提交事件处理
+        form.on('submit(*)', function(data) {
+            // 合并用户详情数据并提交更新
+            http.requestJson('yonghu/update', 'post', { ...vue.detail }, function(res) {
+                if (res.code === 0) {
+                    layer.msg('修改成功', { icon: 6 }, () => window.location.reload()); // 刷新页面
                 }
             });
-        }
-
-    </script>
+            return false; // 阻止表单默认提交
+        });
+    });
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/yonghu/detail.html b/target/classes/front/front/pages/yonghu/detail.html
index 7bfa380..91f9ad2 100644
--- a/target/classes/front/front/pages/yonghu/detail.html
+++ b/target/classes/front/front/pages/yonghu/detail.html
@@ -1,93 +1,114 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- 设置页面的字符编码为UTF-8，确保可以正确显示各种字符 -->
     <meta charset="utf-8">
+    <!-- 配置页面的视口信息，让页面在不同设备上有合适的显示效果，禁止用户手动缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 设置页面的标题，会显示在浏览器的标签页上 -->
     <title>用户详情页</title>
+    <!-- 引入layui框架的CSS文件，用于提供一些基础的样式和组件 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 样式 -->
+    <!-- 引入自定义的样式文件，可能包含了页面的整体布局样式 -->
     <link rel="stylesheet" href="../../css/style.css"/>
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关的样式 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
-    <!-- 通用的css -->
+    <!-- 引入通用的CSS文件，可能包含了多个页面都会用到的通用样式 -->
     <link rel="stylesheet" href="../../css/common.css"/>
+    <!-- 引入Bootstrap框架的CSS文件，用于提供一些响应式布局和组件的样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
 </head>
 <style>
+    /* 这里可以添加页面特定的样式，目前为空 */
 </style>
 <body>
+<!-- 定义一个id为app的div元素，作为Vue实例的挂载点 -->
+<div id="app">
+</div>
 
-    <div id="app">
-    </div>
+<!-- 引入layui框架的JavaScript文件，用于使用layui提供的各种组件和功能 -->
+<script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js库，用于构建响应式的用户界面 -->
+<script src="../../js/vue.js"></script>
+<!-- 引入Element组件库的JavaScript文件，用于使用Element提供的各种组件 -->
+<script src="../../xznstatic/js/element.min.js"></script>
+<!-- 引入Element组件库的样式文件，用于设置Element组件的样式 -->
+<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入组件配置信息的JavaScript文件，可能包含了一些组件的默认配置 -->
+<script src="../../js/config.js"></script>
+<!-- 引入扩展插件配置信息的JavaScript文件，可能包含了一些扩展插件的配置 -->
+<script src="../../modules/config.js"></script>
+<!-- 引入工具方法的JavaScript文件，可能包含了一些常用的工具函数 -->
+<script src="../../js/utils.js"></script>
 
-
-    <script src="../../layui/layui.js"></script>
-    <script src="../../js/vue.js"></script>
-    <!-- 引入element组件库 -->
-    <script src="../../xznstatic/js/element.min.js"></script>
-    <!-- 引入element样式 -->
-    <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-    <!-- 组件配置信息 -->
-    <script src="../../js/config.js"></script>
-    <!-- 扩展插件配置信息 -->
-    <script src="../../modules/config.js"></script>
-    <!-- 工具方法 -->
-    <script src="../../js/utils.js"></script>
-
-    <script>
-        Vue.prototype.myFilters= function (msg) {
-            if(msg != null){
-                return msg.replace(/\n/g, "<br>");
-            }else{
-                return "";
-            }
-        };
-        var vue = new Vue({
-            el: '#app',
-            data: {
-                // 轮播图
-                swiperList: [],
-                // 数据详情
-                detail: {
-                    id: 0
-                },
-                // 商品标题
-                title: '',
-                totalScore: 0,//评分
-
-                storeupFlag: 0,//收藏 [0为收藏 1已收藏]
-                //系统推荐
-                yonghuRecommendList: [],
-                    // 当前详情页表
-                detailTable: 'yonghu',
+<script>
+    // 为Vue的原型添加一个过滤器方法myFilters，用于处理文本中的换行符
+    Vue.prototype.myFilters= function (msg) {
+        // 如果传入的消息不为空
+        if(msg != null){
+            // 将消息中的换行符替换为HTML的换行标签<br>
+            return msg.replace(/\n/g, "<br>");
+        }else{
+            // 如果消息为空，返回空字符串
+            return "";
+        }
+    };
+    // 创建一个Vue实例
+    var vue = new Vue({
+        // 将Vue实例挂载到id为app的DOM元素上
+        el: '#app',
+        // 定义Vue实例的数据对象
+        data: {
+            // 存储轮播图的数据
+            swiperList: [],
+            // 存储数据详情的对象，初始包含一个id属性，值为0
+            detail: {
+                id: 0
             },
-            methods: {
-                jump(url) {
-                    jump(url)
-                },
-                isAuth(tablename, button) {
-                    return isFrontAuth(tablename, button)
-                },
-
-                }
-        });
+            // 存储商品标题
+            title: '',
+            // 存储商品的评分
+            totalScore: 0,
+            // 存储收藏状态，0表示未收藏，1表示已收藏
+            storeupFlag: 0,
+            // 存储系统推荐的用户列表
+            yonghuRecommendList: [],
+            // 当前详情页对应的表名
+            detailTable: 'yonghu',
+        },
+        // 定义Vue实例的方法
+        methods: {
+            // 定义一个跳转页面的方法，调用外部的jump函数
+            jump(url) {
+                jump(url)
+            },
+            // 定义一个判断是否有权限的方法，调用外部的isFrontAuth函数
+            isAuth(tablename, button) {
+                return isFrontAuth(tablename, button)
+            }
+        }
+    });
 
-        layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
-            var layer = layui.layer;
-            var util = layui.util;
-            var element = layui.element;
-            var form = layui.form;
-            var carousel = layui.carousel;
-            var http = layui.http;
-            var jquery = layui.jquery;
-            var laypage = layui.laypage;
+    // 使用layui的use方法加载所需的模块
+    layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
+        // 从加载的模块中获取对应的对象
+        var layer = layui.layer; // 弹出层组件
+        var util = layui.util; // 工具类
+        var element = layui.element; // 元素操作组件
+        var form = layui.form; // 表单组件
+        var carousel = layui.carousel; // 轮播图组件
+        var http = layui.http; // HTTP请求组件
+        var jquery = layui.jquery; // jQuery库
+        var laypage = layui.laypage; // 分页组件
 
-            var limit = 10;
+        // 定义每页显示的记录数
+        var limit = 10;
 
-            // 数据ID
-            var id = http.getParam('id');
-            vue.detail.id = id;
-        });
-    </script>
+        // 从URL参数中获取数据的ID
+        var id = http.getParam('id');
+        // 将获取到的ID赋值给Vue实例的detail对象的id属性
+        vue.detail.id = id;
+    });
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/yonghu/list.html b/target/classes/front/front/pages/yonghu/list.html
index 04c73f8..7d6d48d 100644
--- a/target/classes/front/front/pages/yonghu/list.html
+++ b/target/classes/front/front/pages/yonghu/list.html
@@ -1,23 +1,38 @@
 <!DOCTYPE html>
 <html>
 <head lang="en">
+    <!-- 设置页面字符编码为UTF-8 -->
     <meta charset="utf-8">
+    <!-- 页面标题 -->
     <title>用户</title>
+    <!-- 页面关键词，用于搜索引擎优化 -->
     <meta name="keywords" content=""/>
+    <!-- 页面描述，用于搜索引擎优化 -->
     <meta name="description" content=""/>
+    <!-- 指定使用webkit内核渲染 -->
     <meta name="renderer" content="webkit">
+    <!-- 兼容IE浏览器，使用最新渲染模式 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <!-- 视口配置，实现响应式布局 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- 引入layui框架样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
+    <!-- 引入自定义公共样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
+    <!-- 引入自定义主题样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
+    <!-- 引入jQuery库（用于兼容旧版插件） -->
     <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
+    <!-- 引入滑动插件 -->
     <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
+    <!-- 引入Bootstrap框架样式 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
-
+    <!-- 引入自定义主题颜色样式 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
 </head>
 <style>
+    /* 页面全屏背景伪元素，固定定位并居中显示背景图 */
     html::after {
         position: fixed;
         top: 0;
@@ -26,248 +41,93 @@
         bottom: 0;
         content: '';
         display: block;
-        background-attachment: fixed;
-        background-size: cover;
-        background-position: center;
+        background-attachment: fixed; /* 背景固定不滚动 */
+        background-size: cover; /* 背景图覆盖整个容器 */
+        background-position: center; /* 背景图居中 */
     }
 
-    /*轮播图相关 start*/
+    /* 轮播图容器样式，溢出隐藏 */
     #swiper {
         overflow: hidden;
     }
-
+    /* 轮播图未激活指示器样式 */
     #swiper .layui-carousel-ind li {
         width: 20px;
         height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
+        border: 0 solid rgba(0, 0, 0, .3);
         border-radius: 6px;
         background-color: #f7f7f7;
-        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
+        box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
     }
-
+    /* 轮播图激活指示器样式（当前页） */
     #swiper .layui-carousel-ind li.layui-this {
-        width: 30px;
+        width: 30px; /* 加宽以区分当前页 */
         height: 10px;
-        border-width: 0;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, .3);
+        border: 0 solid rgba(0, 0, 0, .3);
         border-radius: 6px;
     }
-    /*轮播图相关 end*/
 
-    /*列表*/
+    /* 推荐内容区域样式 */
     .recommend {
         padding: 10px 0;
         display: flex;
-        justify-content: center;
+        justify-content: center; /* 内容水平居中 */
         background-repeat: no-repeat;
         background-position: center center;
         background-size: cover;
     }
-
     .recommend .box {
         width: 1002px;
-        margin: 0 auto;
+        margin: 0 auto; /* 水平居中 */
     }
-
+    /* 标题栏样式，弹性布局实现左右分隔 */
     .recommend .box .title {
         padding: 10px 5px;
         display: flex;
-        justify-content: space-between;
+        justify-content: space-between; /* 内容左右分布 */
         align-items: center;
         box-sizing: border-box;
     }
 
-    .recommend .box .title span {
-        padding: 0 10px;
-        font-size: 16px;
-        line-height: 1.4;
-    }
-
+    /* 搜索过滤表单样式 */
     .recommend .box .filter {
         padding: 0 10px;
         display: flex;
         align-items: center;
-        box-sizing: border-box;
         width: 100%;
-        flex-wrap: wrap;
+        flex-wrap: wrap; /* 换行支持 */
     }
-
+    /* 搜索条件项样式 */
     .recommend .box .filter .item-list {
         display: flex;
         align-items: center;
     }
-
-    .recommend .box .filter .item-list .lable {
-        font-size: 14px;
-        color: #333;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .filter .item-list input {
-        padding: 0 10px;
-        box-sizing: border-box;
-        outline: none;
-    }
-
-    .recommend .box .filter button {
-        display: flex;
-        padding: 0 10px;
-        box-sizing: border-box;
-        align-items: center;
-        justify-content: center;
-        outline: none;
-    }
-
-    .recommend .box .filter button i {
-        margin-right: 4px;
-    }
-
-    .recommend .box .list {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .recommend .box .list .list-item {
-        flex: 0 0 25%;
-        padding: 0 5px;
-        box-sizing: border-box;
-    }
-
+    /* 列表项主体样式，点击交互效果 */
     .recommend .box .list .list-item .list-item-body {
         cursor: pointer;
-        border: 1px solid rgba(0, 0, 0, 3);
+        border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
         padding: 5px;
         box-sizing: border-box;
     }
 
-    .recommend .box .list .list-item-body img {
-        width: 100%;
-        height: 100px;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .recommend .box .list .list-item-body .info {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .recommend .box .list .list-item-body .info .price {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .list .list-item-body .info .name {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .list .list-item3 {
-        flex: 0 0 33.33%;
-    }
-
-    .recommend .box .list .list-item5 {
-        flex: 0 0 25%;
-    }
-
-    .recommend .box .news {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0;
-        width: 100%;
-    }
-
-    .recommend .box .news .list-item {
-        flex: 0 0 50%;
-        padding: 0 10px;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item .list-item-body {
-        cursor: pointer;
-        border: 1px solid rgba(0, 0, 0, 3);
-        padding: 10px;
-        box-sizing: border-box;
-        display: flex;
-    }
-
-    .recommend .box .news .list-item .list-item-body img {
-        width: 120px;
-        height: 100%;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info {
-        flex: 1;
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        padding-left: 10px;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info .name {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        box-sizing: border-box;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-    }
-
-    .recommend .box .news .list-item .list-item-body .item-info .time {
-        padding-top: 5px;
-        color: red;
-        font-size: 14px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        box-sizing: border-box;
-    }
-
-    .recommend .box .news .list-item1 {
-        flex: 0 0 100%;
-    }
-
-    .recommend .box .news .list-item3 {
-        flex: 0 0 33.33%;
-    }
-
-    .index-pv1 .animation-box:hover {
-        transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
-        transition: all 0.3s;
-    }
-
-
+    /* 分页组件样式调整 */
     .layui-laypage .layui-laypage-count {
         padding: 0 10px;
     }
-
-    .layui-laypage .layui-laypage-skip {
-        padding-left: 10px;
-    }
 </style>
 <body>
+<!-- Vue实例挂载点 -->
 <div id="app">
+    <!-- 轮播图区域 -->
     <div class="banner">
         <div class="layui-carousel" id="swiper"
-             :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
+             :style='{
+                "boxShadow":"0 0 0px rgba(255,0,0,.8)",
+                "margin":"0 auto",
+                "width":"100%"
+             }'>
             <div carousel-item>
+                <!-- 轮播图图片循环渲染，使用Vue的v-for指令 -->
                 <div v-for="(item,index) in swiperList" :key="index">
                     <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
                 </div>
@@ -275,243 +135,177 @@
         </div>
     </div>
 
-    <div class="recommend index-pv1"
-         :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
+    <!-- 搜索与列表区域 -->
+    <div class="recommend index-pv1">
         <div class="box" style='width:80%'>
-
-            <div class="title sub_backgroundColor sub_borderColor"
-                 :style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
-                    <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
-                        用户
-                    </span>
-                <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
-                        您现在的位置：用户
-                    </span>
+            <!-- 页面标题与面包屑导航 -->
+            <div class="title sub_backgroundColor sub_borderColor">
+                <span :style='{"fontSize":"18px"}'>用户</span>
+                <span>您现在的位置：用户</span>
             </div>
 
-            <form class="layui-form filter main_backgroundColor"
-                  :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
-
-                                 
+            <!-- 搜索过滤表单 -->
+            <form class="layui-form filter main_backgroundColor">
+                <!-- 用户姓名搜索框 -->
+                <div class="item-list">
+                    <div class="lable">用户姓名</div>
+                    <input type="text" v-model="searchForm.yonghuName" placeholder="用户姓名"
+                           class="layui-input"
+                           :style='{
+                               "borderRadius":"8px",
+                               "height":"44px"
+                           }'>
+                </div>
+                <!-- 性别筛选下拉框 -->
                 <div class="item-list">
-                    <div class="lable"
-                         :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
-                        用户姓名
-                    </div>
-                    <input type="text" v-model="searchForm.yonghuName"
-                           :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
-                           placeholder="用户姓名" autocomplete="off"
-                           class="layui-input">
+                    <div class="lable">性别</div>
+                    <select v-model="searchForm.sexTypes">
+                        <option value="">请选择</option>
+                        <!-- 性别选项循环渲染，数据来自Vue的sexTypesList -->
+                        <option v-for="item in sexTypesList" :key="item.codeIndex"
+                                :value="item.codeIndex">{{ item.indexName }}</option>
+                    </select>
                 </div>
-                                         
-                 <div class="item-list">
-                     <div class="lable"
-                          :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
-                         性别</div>
-                     <select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
-                             style="display:block"  v-model="searchForm.sexTypes">
-                         <option value="">请选择</option>
-                         <option v-for="(item,index) in sexTypesList" v-bind:key="index"
-                                 :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}
-                         </option>
-                     </select>
-                 </div>
-                        
-                <button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
-                    <i v-if="true" class="layui-icon layui-icon-search"></i>搜索
+                <!-- 搜索按钮与添加按钮 -->
+                <button id="btn-search" type="button" class="layui-btn layui-btn-normal sub_backgroundColor"
+                        @click="pageList">
+                    <i class="layui-icon layui-icon-search"></i>搜索
                 </button>
-                <button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
-                    <i v-if="true" class="layui-icon">&#xe654;</i>添加
+                <!-- 权限控制：仅有权限用户显示添加按钮 -->
+                <button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" class="layui-btn btn-theme">
+                    <i class="layui-icon">&#xe654;</i>添加
                 </button>
             </form>
-
         </div>
     </div>
+
+    <!-- 分页组件 -->
     <div class="pager" id="pager" :style="{textAlign:'center'}"></div>
 </div>
 
-<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
+<!-- 引入Bootstrap框架脚本 -->
+<script src="../../xznstatic/js/bootstrap.min.js"></script>
+<!-- 引入layui框架核心脚本 -->
 <script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js框架 -->
 <script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
+<!-- 引入Element组件库 -->
 <script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入项目配置文件 -->
 <script src="../../js/config.js"></script>
 <script src="../../modules/config.js"></script>
+<!-- 引入工具函数库 -->
 <script src="../../js/utils.js"></script>
 
 <script type="text/javascript">
+    // 初始化Vue实例
     var vue = new Vue({
-        el: '#app',
+        el: '#app', // 绑定根元素
         data: {
-            swiperList: [],
-            sexTypesList: [],
-
-            //查询条件
+            swiperList: [], // 轮播图数据
+            sexTypesList: [], // 性别选项列表
+            // 搜索条件对象
             searchForm: {
-                page: 1
-                ,limit: 8
-                ,yonghuDelete: 1
-                ,yonghuName: ""
-                ,sexTypes: ""
+                page: 1, // 当前页码
+                limit: 8, // 每页显示数量
+                yonghuDelete: 1, // 逻辑删除状态（1:未删除）
+                yonghuName: "", // 用户名搜索关键词
+                sexTypes: "" // 性别筛选条件
             },
-
-
-            dataList: [],
-        },
-        filters: {
-            subString: function(val) {
-                if (val) {
-                    val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
-                    if (val.length > 60) {
-                        val = val.substring(0, 60);
-                        val+='...';
-                    }
-                    return val;
-                }
-                return '';
-            }
-        },
-        computed: {
+            dataList: [] // 用户列表数据
         },
         methods: {
+            // 权限校验方法
             isAuth(tablename, button) {
-                return isFrontAuth(tablename, button);
-            }
-            ,jump(url) {
-                jump(url);
-            }
-            ,jumpCheck(url,check1,check2) {
-                if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
-                    layui.layer.msg("已经被删除", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
+                return isFrontAuth(tablename, button); // 调用外部权限校验函数
+            },
+            // 页面跳转方法
+            jump(url) {
+                window.location.href = url; // 路由跳转
+            },
+            // 带条件的跳转方法（处理删除和下架状态）
+            jumpCheck(url, check1, check2) {
+                if (check1 === 2) { // 已删除
+                    layer.msg("已经被删除", {time: 2000, icon: 2});
+                    return;
                 }
-                if(check2 == "2"  || check2 == 2){//是否下架[1:上架 2:下架]
-                    layui.layer.msg("已经下架", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
+                if (check2 === 2) { // 已下架
+                    layer.msg("已经下架", {time: 2000, icon: 2});
+                    return;
                 }
                 this.jump(url);
             }
         }
     });
 
-    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var laypage = layui.laypage;
-        var http = layui.http;
-        var laydate = layui.laydate;
-        var tinymce = layui.tinymce;
-        window.jQuery = window.$ = jquery = layui.jquery;
+    layui.use(['layer', 'http', 'laypage', 'carousel'], function() {
+        var layer = layui.layer; // 弹出层组件
+        var http = layui.http; // HTTP请求工具
+        var laypage = layui.laypage; // 分页组件
+        var carousel = layui.carousel; // 轮播图组件
 
-        // var id = http.getParam('id');
-
-        // 获取轮播图 数据
-        http.request('config/list', 'get', {
-            page: 1,
-            limit: 5
-        }, function (res) {
+        // 获取轮播图数据
+        http.request('config/list', 'get', {page: 1, limit: 5}, function(res) {
             if (res.data.list.length > 0) {
-                let swiperList = [];
-                res.data.list.forEach(element => {
-                    if(element.value != null){
-                        swiperList.push({
-                            img: element.value
-                        });
-                    }
-                });
-                vue.swiperList = swiperList;
-
+                vue.swiperList = res.data.list.map(item => ({img: item.value}));
+                // 初始化轮播图组件
                 vue.$nextTick(() => {
                     carousel.render({
                         elem: '#swiper',
                         width: '100%',
                         height: '450px',
-                        arrow: 'hover',
-                        anim: 'default',
-                        autoplay: 'true',
-                        interval: '3000',
-                        indicator: 'inside'
+                        autoplay: true, // 自动播放
+                        interval: 3000 // 切换间隔3秒
                     });
                 });
             }
         });
 
-
-            //当前表的 性别 字段 字典表查询
-            sexTypesSelect();
-           //当前表的 性别 字段 字典表查询方法
-           function sexTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.sexTypesList = res.data.list;
-                   }
-               });
-           }
-
-
-            // 分页列表
-            pageList();
-
-            // 搜索按钮
-            jquery('#btn-search').click(function (e) {
-                pageList();
+        // 加载性别选项数据（来自字典表）
+        function sexTypesSelect() {
+            http.request("dictionary/page?dicCode=sex_types", 'get', {}, function(res) {
+                if (res.code === 0) {
+                    vue.sexTypesList = res.data.list; // 更新性别选项列表
+                }
             });
-
-            function pageList() {
-                // 获取列表数据
-                http.request('yonghu/list', 'get', vue.searchForm, function (res) {
-                    vue.dataList = res.data.list;
-                    // 分页
-                    laypage.render({
-                        elem: 'pager',
-                        count: res.data.total,
-                        limit: vue.searchForm.limit,
-                        groups: 3,
-                        layout: ["prev", "page", "next"],
-                        jump: function (obj, first) {
-                            vue.searchForm.page = obj.curr;//翻页
-                            //首次不执行
-                            if (!first) {
-                                http.request('yonghu/list', 'get', vue.searchForm, function (res1) {
-                                    vue.dataList = res1.data.list;
-                                })
-                            }
+        }
+        sexTypesSelect(); // 初始化性别数据
+
+        // 分页列表加载函数
+        function pageList() {
+            http.request('yonghu/list', 'get', vue.searchForm, function(res) {
+                vue.dataList = res.data.list; // 更新列表数据
+                // 初始化分页组件
+                laypage.render({
+                    elem: 'pager', // 分页容器ID
+                    count: res.data.total, // 总记录数
+                    limit: vue.searchForm.limit, // 每页数量
+                    groups: 3, // 显示页码数量
+                    layout: ["prev", "page", "next"], // 分页布局
+                    jump: function(obj, first) {
+                        if (!first) { // 非首次加载（用户点击分页）
+                            vue.searchForm.page = obj.curr; // 更新当前页码
+                            http.request('yonghu/list', 'get', vue.searchForm, function(res1) {
+                                vue.dataList = res1.data.list; // 重新加载数据
+                            });
                         }
-                    });
+                    }
                 });
-            }
+            });
+        }
+        pageList(); // 初始化加载列表数据
+
+        // 搜索按钮点击事件
+        $('#btn-search').click(function() {
+            vue.searchForm.page = 1; // 重置为第一页
+            pageList(); // 重新加载列表
+        });
     });
 
+    // 滑动插件初始化（兼容旧版滑动效果）
     window.xznSlide = function () {
-        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
-        jQuery("#ifocus").slide({
-            titCell: "#ifocus_btn li",
-            mainCell: "#ifocus_piclist ul",
-            effect: "leftLoop",
-            delayTime: 200,
-            autoPlay: true,
-            triggerTime: 0
-        });
-        jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
-        jQuery(".product_list").slide({
-            mainCell: ".bd ul",
-            autoPage: true,
-            effect: "leftLoop",
-            autoPlay: true,
-            vis: 5,
-            trigger: "click",
-            interTime: 4000
-        });
+        $(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
     };
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/target/classes/front/front/pages/yonghu/register.html b/target/classes/front/front/pages/yonghu/register.html
index 9744c77..6989336 100644
--- a/target/classes/front/front/pages/yonghu/register.html
+++ b/target/classes/front/front/pages/yonghu/register.html
@@ -1,217 +1,292 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
     <meta charset="utf-8">
+    <!-- 配置视口，实现响应式布局，禁止用户缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 页面标题 -->
     <title>注册</title>
+    <!-- 引入layui框架基础样式 -->
     <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
+    <!-- 引入自定义公共样式 -->
     <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
+    <!-- 引入登录/注册页面专属样式 -->
     <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
-
+    <!-- 引入主题颜色样式 -->
     <link rel="stylesheet" href="../../css/theme.css" />
+
+    <!-- 自定义注册页面样式 -->
     <style type="text/css">
+        /* 注册页面整体容器，全屏背景图 */
         .register {
-            display: flex;
+            display: flex; /* 弹性布局，垂直水平居中 */
             justify-content: center;
             align-items: center;
             width: 100%;
-            height: 100%;
-            background-attachment: fixed;
-            background-size: cover;
-            background-position: center;
-            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg);
+            height: 100vh; /* 占满视口高度 */
+            background-attachment: fixed; /* 背景图固定 */
+            background-size: cover; /* 背景图覆盖整个容器 */
+            background-position: center; /* 背景图居中 */
+            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片路径 */
         }
+        /* 注册表单样式 */
         .register form {
             box-sizing: border-box;
             min-height: 400px;
-            display: flex;
+            display: flex; /* 弹性垂直布局 */
             flex-direction: column;
-            justify-content: center !important;
-        }
-        .register .logo, .register .title {
-            box-sizing: border-box;
-        }
-        .register .logo img {
-            display: block;
+            justify-content: center; /* 内容垂直居中 */
+            padding: 20px;
+            background-color: #fff; /* 白色背景 */
+            border-radius: 20px; /* 圆角 */
+            width: 400px; /* 固定表单宽度 */
         }
+        /* 表单标题样式 */
         .register .title {
-            text-align: center;
+            text-align: center; /* 文本居中 */
+            font-size: 17px; /* 字体大小 */
+            color: red; /* 红色标题 */
+            margin: 10px auto; /* 上下边距，水平居中 */
         }
+        /* 表单项容器样式 */
         .register .form-item {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            box-sizing: border-box;
-        }
-        .register .form-item input, .register .form-label {
-            box-sizing: border-box;
+            display: flex; /* 弹性布局，标签和输入框同行显示 */
+            align-items: center; /* 垂直居中 */
+            flex-wrap: wrap; /* 换行支持 */
+            margin-bottom: 15px; /* 底部边距 */
+            width: 100%; /* 占满表单宽度 */
         }
-        .register .btn-submit {
-            display: block;
-            box-sizing: border-box;
+        /* 输入框通用样式 */
+        .register .layui-input {
+            padding: 0 10px;
+            height: 44px; /* 固定高度 */
+            border: 1px solid rgba(135, 206, 250, 1); /* 蓝色边框 */
+            border-radius: 8px; /* 圆角 */
+            font-size: 14px; /* 字体大小 */
         }
-        .register form p.txt {
-            width: 100%;
-            margin: 0;
-            box-sizing: border-box;
-        }
-        .layui-unselect{
-            margin-left: -5px;
-            margin-top: 3px;
-            border: 0px;
+        /* 提交按钮样式 */
+        .btn-submit {
+            width: 60%; /* 按钮宽度 */
+            margin: 10px auto; /* 水平居中 */
+            background-color: var(--publicMainColor); /* 主题背景色 */
+            color: #fff; /* 白色文字 */
+            border-radius: 8px; /* 圆角 */
+            height: 44px; /* 固定高度 */
         }
     </style>
 </head>
 <body>
+<!-- Vue实例挂载点，包含整个注册表单 -->
 <div class="register" id="app">
-    <form class="layui-form login-form" lay-filter="myForm" :style='{"padding":"20px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"20px","borderWidth":"0","width":"400px","borderStyle":"solid","justifyContent":"center","height":"auto"}'>
-        <p class="title" v-if="true" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(247, 247, 247, 0)","color":"red","isshow":true,"borderRadius":"8px","borderWidth":"0","width":"110px","lineHeight":"32px","fontSize":"17px","borderStyle":"solid"}'>用户注册</p>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">账户：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" autocomplete="off" class="layui-input">
-                 </div>
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
-                    <input type="password" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
-                </div>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" autocomplete="off" class="layui-input">
-                 </div>
-                                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户姓名：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yonghuName" name="yonghuName" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
-                 </div>
-<!-- 手机号 -->
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户手机号：</label>
-                    <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="phone|required" type="text" id="yonghuPhone" name="yonghuPhone" placeholder="请输入用户手机号" autocomplete="off" class="layui-input">
-                </div>
-                <!-- 身份证号 -->
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">用户身份证号：</label>
-                    <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="identity|required" type="text" id="yonghuIdNumber" name="yonghuIdNumber" placeholder="请输入用户身份证号" autocomplete="off" class="layui-input">
-                </div>
-                <!-- 邮箱 -->
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">邮箱：</label>
-                    <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="email|required" type="text" id="yonghuEmail" name="yonghuEmail" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
-                </div>
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'>
-                    <div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'>
-                        <select name="sexTypes" id="sexTypes">
-                            <option value="">请选择性别</option>
-                            <option v-for="(item,index) in sexTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
-                        </select>
-                    </div>
-                </div>
-        <button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-submit lay-filter="register" style="width: 280px;">注册</button>
-        <p :style='{"color":"rgba(59, 46, 126, 1)","textAlign":"left","fontSize":"12px"}' class="txt"><a href="javascript:window.location.href='../login/login.html'">已有账号登录</a></p>
+    <form class="layui-form login-form" lay-filter="myForm"
+          :style='{
+              "padding": "20px",
+              "backgroundColor": "#fff",
+              "borderRadius": "20px",
+              "width": "400px"
+          }'>
+        <!-- 页面标题 -->
+        <p class="title" :style='{"color": "red", "fontSize": "17px"}'>用户注册</p>
+
+        <!-- 账户输入框 -->
+        <div class="form-item layui-form-text">
+            <input :style='{"width": "100%"}'
+                   lay-verify="required"
+                   type="text"
+                   id="username"
+                   name="username"
+                   placeholder="请输入账户"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 密码输入框 -->
+        <div class="form-item layui-form-text">
+            <input type="password"
+                   lay-verify="password1|required"
+                   id="password"
+                   name="password"
+                   placeholder="请输入密码"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 重复密码输入框 -->
+        <div class="form-item layui-form-text">
+            <input type="password"
+                   lay-verify="password2|required"
+                   id="password2"
+                   name="password2"
+                   placeholder="请重复输入密码"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 用户姓名输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required"
+                   type="text"
+                   id="yonghuName"
+                   name="yonghuName"
+                   placeholder="请输入用户姓名"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 手机号输入框（带格式校验） -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="phone|required"
+                   type="text"
+                   id="yonghuPhone"
+                   name="yonghuPhone"
+                   placeholder="请输入用户手机号"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 身份证号输入框（带格式校验） -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="identity|required"
+                   type="text"
+                   id="yonghuIdNumber"
+                   name="yonghuIdNumber"
+                   placeholder="请输入用户身份证号"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 邮箱输入框（带格式校验） -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="email|required"
+                   type="text"
+                   id="yonghuEmail"
+                   name="yonghuEmail"
+                   placeholder="请输入邮箱"
+                   autocomplete="off"
+                   class="layui-input">
+        </div>
+
+        <!-- 性别选择下拉框（动态加载字典数据） -->
+        <div>
+            <select name="sexTypes" id="sexTypes" class="layui-input">
+                <option value="">请选择性别</option>
+                <!-- 动态渲染性别选项，数据来自Vue的sexTypesList -->
+                <option v-for="(item, index) in sexTypesList"
+                        :value="item.codeIndex"
+                        :key="item.codeIndex">
+                    {{ item.indexName }}
+                </option>
+            </select>
+        </div>
+
+        <!-- 注册按钮，触发表单提交 -->
+        <button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit"
+                lay-submit
+                lay-filter="register"
+                :style='{"width": "280px"}'>
+            注册
+        </button>
+
+        <!-- 跳转登录链接 -->
+        <p class="txt">
+            <a href="javascript:window.location.href='../login/login.html'">已有账号登录</a>
+        </p>
     </form>
 </div>
 
+<!-- 引入layui框架核心脚本 -->
 <script src="../../layui/layui.js"></script>
+<!-- 引入Vue.js框架 -->
 <script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
+<!-- 引入Element组件库（用于下拉框等组件） -->
 <script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-<!-- 组件配置信息 -->
+<!-- 引入项目配置文件 -->
 <script src="../../js/config.js"></script>
-<!-- 扩展插件配置信息 -->
-<script src="../../modules/config.js"></script>
-<!-- 工具方法 -->
+<!-- 引入工具函数库 -->
 <script src="../../js/utils.js"></script>
-<!-- 校验格式工具类 -->
+<!-- 引入表单校验工具 -->
 <script src="../../js/validate.js"></script>
 
 <script>
+    // 初始化Vue实例
     var vue = new Vue({
-        el: '#app',
+        el: '#app', // 绑定根元素
         data: {
-            sexTypesList : [],
+            sexTypesList: [] // 存储性别选项数据（从字典表获取）
         },
-        updated: function() {
+        updated() {
+            // 表单更新后重新渲染layui表单组件（如下拉框）
             layui.form.render(null, 'myForm');
-        },
+        }
     });
 
-    layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var form = layui.form;
-        var http = layui.http;
-        var jquery = layui.jquery;
+    layui.use(['layer', 'form', 'http', 'jquery'], function() {
+        var layer = layui.layer; // 弹出层组件
+        var form = layui.form; // 表单组件
+        var http = layui.http; // HTTP请求工具
+        var jquery = layui.jquery; // jQuery库
 
+        // 获取URL中的表名参数（用于接口路径）
         var tablename = http.getParam('tablename');
-        //字典表数据容器
-        // 性别的查询和初始化
-        sexTypesSelect();
-        // 日期效验规则及格式
-        dateTimePick();
-        // 表单效验规则
+
+        // ------------------------
+        // 表单校验规则配置
+        // ------------------------
         form.verify({
-            // 正整数效验规则
-            integer: [
-                /^[1-9][0-9]*$/
-                ,'必须是正整数'
-            ]
-            // 小数效验规则
-            ,double: [
-                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
-                ,'最大整数位为6为,小数最大两位'
-            ]
-            ,password1: function(value, item){ //value：表单的值、item：表单的DOM对象
-            var password2 = jquery("#password2").val();
-                if(password2 != null && password2 != "" && password2 != "null"){
-                    if(value != password2){
-                        return '密码的两次密码不一致';
-                    }
+            // 密码一致性校验（两次输入需一致）
+            password1: function(value) {
+                var password2 = jquery("#password2").val();
+                if (password2 && value !== password2) {
+                    return '两次输入的密码不一致';
                 }
-            }
-            ,password2: function(value, item){ //value：表单的值、item：表单的DOM对象
-            var password1 = jquery("#password1").val();
-                if(password1 != null && password1 != "" && password1 != "null"){
-                    if(value != password1){
-                        return '密码的两次密码不一致';
-                    }
+            },
+            password2: function(value) {
+                var password1 = jquery("#password").val();
+                if (password1 && value !== password1) {
+                    return '两次输入的密码不一致';
                 }
             }
         });
 
-        // 注册
+        // ------------------------
+        // 注册表单提交处理
+        // ------------------------
         form.on('submit(register)', function(data) {
-            data = data.field;
-            http.requestJson(tablename + '/register', 'post', data, function(res) {
-                layer.msg('注册成功', {
-                    time: 2000,
-                    icon: 6
-                },function(){
-                    // 路径访问设置
-                    window.location.href = '../login/login.html';
-                });
+            // 组装提交数据
+            var formData = data.field;
+
+            // 发送注册请求
+            http.requestJson(`${tablename}/register`, 'post', formData, function(res) {
+                if (res.code === 0) {
+                    layer.msg('注册成功', {
+                        time: 2000, // 显示2秒
+                        icon: 6 // 成功图标
+                    }, function() {
+                        // 注册成功后跳转登录页
+                        window.location.href = '../login/login.html';
+                    });
+                } else {
+                    layer.msg(res.msg, { icon: 5 }); // 错误提示
+                }
             });
-            return false
+            return false; // 阻止表单默认提交
         });
 
-
-
-        // 日期框初始化
-        function dateTimePick(){
-        };
-
-      // 性别的查询
-      function sexTypesSelect() {
-          //填充下拉框选项
-          http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
-              if(res.code == 0){
-                vue.sexTypesList = res.data.list;
-              }
-          });
-      }
-
+        // ------------------------
+        // 加载性别选项数据（来自字典表）
+        // ------------------------
+        function sexTypesSelect() {
+            // 请求字典表数据（性别类型）
+            http.request("dictionary/page?dicCode=sex_types", "GET", {}, function(res) {
+                if (res.code === 0) {
+                    vue.sexTypesList = res.data.list; // 更新Vue数据
+                    form.render('select'); // 重新渲染下拉框
+                }
+            });
+        }
+        sexTypesSelect(); // 初始化加载性别数据
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
