FOF开屏代码

admin

<!文档类型 网页类型>
<网页 语言代码="zh">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度, 初始缩放值=1.0" />
        <网页标题>智能门店管理系统</网页标题>
        <样式>
            /* 原有样式保持不变 */
            * {
                外边距: 0;
                内边距: 0;
                盒子模型: 边界框;
            }

            网页主体 {
                高度: 100vh;
                溢出: 隐藏;
                背景: #000;
            }

            .info-bar {
                定位: 固定;
                顶部: 20px;
                左侧: 50%;
                转换: 平移x轴(-50%);
                颜色: white;
                字体-组: Arial;
                字体-大小: 16px;
                堆叠顺序: 100;
                背景: 颜色通道(0, 0, 0, 0.5);
                内边距: 12px 24px;
                边框-圆角: 8px;
                光标: 指针箭头;
                过渡: 背景 0.3s;
                显示模式: 弹性布局;
                gap: 20px;
            }

            .info-bar:鼠标移入 {
                背景: 颜色通道(0, 0, 0, 0.7);
            }

            .slider {
                宽度: 100vw;
                高度: 100vh;
                定位: 相对定位;
            }

            .slide {
                定位: 绝对定位;
                顶部: 0;
                左侧: 0;
                宽度: 100%;
                高度: 100%;
                对象-适应: 宽高覆盖缩放;
                不透明度: 0;
                过渡: 不透明度 1s;
            }

            .slide.active {
                不透明度: 1;
            }

            .counter {
                定位: 固定;
                底部: 20px;
                左侧: 50%;
                转换: 平移x轴(-50%);
                背景: 颜色通道(0, 0, 0, 0.7);
                颜色: white;
                内边距: 8px 16px;
                边框-圆角: 16px;
                字体-组: Arial;
            }
        </样式>
    </网页头部>
    <网页主体>
        <区块 类名="info-bar">
            <行内元素>店号: <行内元素 id="storeId">10000</行内元素></行内元素>
            <行内元素 id="datetime"></行内元素>
        </区块>

        <区块 类名="slider">
            <图片框 图像地址="https://picsum.photos/id/1015/1920/1080" 类名="slide active" 错替文本="图片1" />
            <图片框 图像地址="https://picsum.photos/id/1016/1920/1080" 类名="slide" 错替文本="图片2" />
            <图片框 图像地址="https://picsum.photos/id/1018/1920/1080" 类名="slide" 错替文本="图片3" />
            <区块 类名="counter">1/3</区块>
        </区块>

        <脚本>
            // 设备ID管理模块
            常量 DeviceIdManager = {
                STORAGE_KEY: "deviceIdentifier",

                init() {
                    本对象.ensureDeviceId();
                    本对象.setupKeyListener();
                },

                generateUUID() {
                    开始俘获异常 {
                        如果 (crypto && crypto.randomUUID) {
                            返回 crypto.randomUUID();
                        }
                    } 俘获异常 (e) {
                        console.warn("Crypto API不可用，使用替代方案");
                    }

                    // 兼容方案
                    返回 日期类.取时间戳2().转字符串(36) + 计算类.取随机数().转字符串(36).截取文本(2, 9) + performance.now().转字符串(36).替换(".", "");
                },

                ensureDeviceId() {
                    局部变量 deviceId = localStorage.getItem(本对象.STORAGE_KEY);
                    如果 (!deviceId) {
                        deviceId = 本对象.generateUUID();
                        localStorage.setItem(本对象.STORAGE_KEY, deviceId);
                    }
                    返回 deviceId;
                },

                showDeviceId() {
                    常量 id = 本对象.ensureDeviceId();
                    alert(`设备唯一标识：\n${id}\n\n（该标识存储在本地）`);
                },

                setupKeyListener() {
                    document.addEventListener("keydown", (e) => {
                        如果 (e.key === "U" || e.key === "u") {
                            e.preventDefault();
                            本对象.showDeviceId();
                        }
                    });
                }
            };

            // 修改后的店号管理模块（增加防冲突）
            常量 StoreManager = {
                key: "storeConfig",
                defaultId: "10000",

                init() {
                    本对象.loadStoreId();
                    本对象.setupListeners();
                },

                loadStoreId() {
                    常量 savedData = localStorage.getItem(本对象.key);
                    常量 displayElement = document.getElementById("storeId");

                    开始俘获异常 {
                        如果 (savedData) {
                            常量 { id } = JSON类.解析(savedData);
                            displayElement.textContent = id;
                        } 否则 {
                            本对象.saveStoreId(本对象.defaultId);
                        }
                    } 俘获异常 (e) {
                        console.error("数据解析失败，重置为默认值");
                        本对象.saveStoreId(本对象.defaultId);
                    }
                },

                saveStoreId(newId) {
                    // 检查与设备ID的冲突
                    如果 (newId === localStorage.getItem(DeviceIdManager.STORAGE_KEY)) {
                        alert("警告：店号不能与设备ID相同！");
                        返回;
                    }

                    常量 data = {
                        id: newId || 本对象.defaultId,
                        timestamp: 新建对象 日期类().取ISO时间()
                    };
                    localStorage.setItem(本对象.key, JSON类.到可读JSON文本(data));
                    document.getElementById("storeId").textContent = data.id;
                },

                showEditDialog() {
                    常量 currentId = document.getElementById("storeId").textContent;
                    常量 promptText = ["请输入新的店号：", "------------------------", "可用操作：", "• Enter 键 - 确认修改", "• ESC 键 - 取消修改"].到可读文本("\n");

                    常量 newId = prompt(promptText, currentId);

                    如果 (newId !== 空对象) {
                        如果 (newId.删首尾空()) {
                            本对象.saveStoreId(newId.删首尾空());
                            alert("店号修改成功！");
                        } 否则 {
                            alert("错误：店号不能为空！");
                        }
                    }
                },

                setupListeners() {
                    document.addEventListener("keydown", (e) => {
                        如果 (e.key === "Enter") {
                            e.preventDefault();
                            本对象.showEditDialog();
                        }
                    });

                    document.querySelector(".info-bar").addEventListener("click", () => {
                        本对象.showEditDialog();
                    });
                }
            };

            // 时间管理模块（保持不变）
            常量 TimeManager = {
                init() {
                    本对象.updateDateTime();
                    setInterval(() => 本对象.updateDateTime(), 1000);
                },

                updateDateTime() {
                    常量 date = 新建对象 日期类();
                    常量 weekDays = ["日", "一", "二", "三", "四", "五", "六"];

                    常量 dateStr =
                        date
                            .取年月日时间("zh-CN", {
                                year: "numeric",
                                month: "2-digit",
                                day: "2-digit"
                            }).替换(/\//g, "年").替换("年", "月") + "日";

                    常量 timeStr = date.取时分秒时间("zh-CN", {
                        hour12: 假,
                        hour: "2-digit",
                        minute: "2-digit",
                        second: "2-digit"
                    });

                    document.getElementById("datetime").textContent = `${dateStr} ${timeStr} 周${weekDays[date.getDay()]}`;
                }
            };

            // 轮播管理模块（保持不变）
            常量 Carousel = {
                currentIndex: 0,
                interval: 空对象,

                init() {
                    本对象.slides = document.querySelectorAll(".slide");
                    本对象.counter = document.querySelector(".counter");
                    本对象.total = 本对象.slides.长度;

                    本对象.updateCounter();
                    本对象.startAutoPlay();
                    window.addEventListener("resize", () => 本对象.handleResize());
                    本对象.handleResize();
                },

                updateCounter() {
                    本对象.counter.textContent = `${this.currentIndex + 1}/${this.total}`;
                },

                switchSlide() {
                    本对象.slides[本对象.currentIndex].classList.remove("active");
                    本对象.currentIndex = (本对象.currentIndex + 1) % 本对象.total;
                    本对象.slides[本对象.currentIndex].classList.add("active");
                    本对象.updateCounter();
                },

                startAutoPlay() {
                    本对象.interval = setInterval(() => 本对象.switchSlide(), 8000);
                },

                handleResize() {
                    document.querySelector(".slider").style.height = window.innerHeight + "px";
                }
            };

            // 初始化所有模块
            DeviceIdManager.init();
            StoreManager.init();
            TimeManager.init();
            Carousel.init();
        </脚本>
    </网页主体>
</网页>

admin

<!文档类型 网页类型>
<网页 语言代码="zh">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度, 初始缩放值=1.0" />
        <网页标题>智能门店管理系统</网页标题>
        <样式>
            /* 重置所有元素的默认边距和内边距，并设置盒模型为边框盒 */
            * {
                外边距: 0;
                内边距: 0;
                盒子模型: 边界框;
            }

            /* 设置页面高度为视口高度，禁止滚动条，背景颜色为黑色 */
            网页主体 {
                高度: 100vh;
                溢出: 隐藏;
                背景: #000;
            }

            /* 信息栏的样式设置 */
            .info-bar {
                定位: 固定; /* 固定定位 */
                顶部: 20px; /* 距离顶部20px */
                左侧: 50%; /* 距离左侧50% */
                转换: 平移x轴(-50%); /* 向左移动自身宽度的一半，使信息栏居中 */
                颜色: white; /* 文字颜色为白色 */
                字体-组: Arial; /* 字体为Arial */
                字体-大小: 16px; /* 字号为16px */
                堆叠顺序: 100; /* 层叠顺序为100，确保在其他元素之上 */
                背景: 颜色通道(0, 0, 0, 0.5); /* 半透明黑色背景 */
                内边距: 12px 24px; /* 内边距 */
                边框-圆角: 8px; /* 圆角 */
                光标: 指针箭头; /* 鼠标悬停时显示指针 */
                过渡: 背景 0.3s; /* 背景颜色过渡效果 */
                显示模式: 弹性布局; /* 使用弹性布局 */
                gap: 20px; /* 子元素之间的间距 */
            }

            /* 信息栏悬停时的背景颜色加深 */
            .info-bar:鼠标移入 {
                背景: 颜色通道(0, 0, 0, 0.7);
            }

            /* 轮播图容器的样式设置 */
            .slider {
                宽度: 100vw; /* 宽度为视口宽度 */
                高度: 100vh; /* 高度为视口高度 */
                定位: 相对定位; /* 相对定位 */
            }

            /* 每个轮播图项的样式设置 */
            .slide {
                定位: 绝对定位; /* 绝对定位 */
                顶部: 0; /* 距离顶部0px */
                左侧: 0; /* 距离左侧0px */
                宽度: 100%; /* 宽度为100% */
                高度: 100%; /* 高度为100% */
                对象-适应: 宽高覆盖缩放; /* 图片覆盖整个区域 */
                不透明度: 0; /* 初始透明度为0 */
                过渡: 不透明度 1s; /* 透明度过渡效果 */
            }

            /* 当前显示的轮播图项的样式设置 */
            .slide.active {
                不透明度: 1; /* 透明度为1，即完全显示 */
            }

            /* 轮播图计数器的样式设置 */
            .counter {
                定位: 固定; /* 固定定位 */
                底部: 20px; /* 距离底部20px */
                左侧: 50%; /* 距离左侧50% */
                转换: 平移x轴(-50%); /* 向左移动自身宽度的一半，使计数器居中 */
                背景: 颜色通道(0, 0, 0, 0.7); /* 半透明黑色背景 */
                颜色: white; /* 文字颜色为白色 */
                内边距: 8px 16px; /* 内边距 */
                边框-圆角: 16px; /* 圆角 */
                字体-组: Arial; /* 字体为Arial */
            }
        </样式>
    </网页头部>
    <网页主体>
        <!-- 信息栏，包含店号和时间 -->
        <区块 类名="info-bar">
            <行内元素>店号: <行内元素 id="storeId">10000</行内元素></行内元素>
            <行内元素 id="datetime"></行内元素>
        </区块>

        <!-- 轮播图容器 -->
        <区块 类名="slider">
            <图片框 图像地址="https://picsum.photos/id/1015/1920/1080" 类名="slide active" 错替文本="图片1" />
            <图片框 图像地址="https://picsum.photos/id/1016/1920/1080" 类名="slide" 错替文本="图片2" />
            <图片框 图像地址="https://picsum.photos/id/1018/1920/1080" 类名="slide" 错替文本="图片3" />
            <区块 类名="counter">1/3</区块>
        </区块>

        <脚本>
            // 设备ID管理模块
            常量 DeviceIdManager = {
                STORAGE_KEY: "deviceIdentifier", // 存储设备ID的本地存储键名

                // 初始化方法
                init() {
                    本对象.ensureDeviceId(); // 确保设备ID存在
                    本对象.setupKeyListener(); // 设置键盘监听
                },

                // 生成UUID的方法
                generateUUID() {
                    开始俘获异常 {
                        如果 (crypto && crypto.randomUUID) {
                            返回 crypto.randomUUID(); // 使用现代浏览器的UUID生成方法
                        }
                    } 俘获异常 (e) {
                        console.warn("Crypto API不可用，使用替代方案");
                    }

                    // 兼容方案
                    返回 日期类.取时间戳2().转字符串(36) + 计算类.取随机数().转字符串(36).截取文本(2, 9) + performance.now().转字符串(36).替换(".", "");
                },

                // 确保设备ID存在的方法
                ensureDeviceId() {
                    局部变量 deviceId = localStorage.getItem(本对象.STORAGE_KEY); // 从本地存储获取设备ID
                    如果 (!deviceId) {
                        deviceId = 本对象.generateUUID(); // 如果不存在，生成新的设备ID
                        localStorage.setItem(本对象.STORAGE_KEY, deviceId); // 存储到本地存储
                    }
                    返回 deviceId; // 返回设备ID
                },

                // 显示设备ID的方法
                showDeviceId() {
                    常量 id = 本对象.ensureDeviceId(); // 获取设备ID

                    信息框(`设备唯一标识：\n${id}\n\n（该标识存储在本地）`); // 弹出提示框显示设备ID
                },

                // 设置键盘监听的方法

                setupKeyListener() {
                    $(Dom文档).绑定事件("keydown", (event) => {
                        如果 (event.key === "U" || event.key === "u") {
                            调试输出("U 或 u 键被按下");
                            event.preventDefault(); // 阻止默认行为
                            本对象.showDeviceId(); // 显示设备ID
                        }
                    });
                }
            };

            // 修改后的店号管理模块（增加防冲突）
            常量 StoreManager = {
                key: "storeConfig", // 存储店号配置的本地存储键名
                defaultId: "10000", // 默认店号

                // 初始化方法
                init() {
                    本对象.loadStoreId(); // 加载店号
                    本对象.setupListeners(); // 设置事件监听
                },

                // 加载店号的方法
                loadStoreId() {
                    常量 savedData = localStorage.getItem(本对象.key); // 从本地存储获取店号配置
                    常量 displayElement = document.getElementById("storeId"); // 获取显示店号的DOM元素

                    开始俘获异常 {
                        如果 (savedData) {
                            常量 { id } = JSON类.解析(savedData); // 解析保存的数据
                            displayElement.textContent = id; // 显示店号
                        } 否则 {
                            本对象.saveStoreId(本对象.defaultId); // 如果没有保存的数据，保存默认店号
                        }
                    } 俘获异常 (e) {
                        console.error("数据解析失败，重置为默认值");
                        本对象.saveStoreId(本对象.defaultId); // 数据解析失败，重置为默认值
                    }
                },

                // 保存店号的方法
                saveStoreId(newId) {
                    // 检查与设备ID的冲突
                    如果 (newId === localStorage.getItem(DeviceIdManager.STORAGE_KEY)) {
                        信息框("警告：店号不能与设备ID相同！"); // 提示警告
                        返回;
                    }

                    常量 data = {
                        id: newId || 本对象.defaultId, // 新店号或默认店号
                        timestamp: 新建对象 日期类().取ISO时间() // 当前时间戳
                    };
                    localStorage.setItem(本对象.key, JSON类.到可读JSON文本(data)); // 保存到本地存储
                    document.getElementById("storeId").textContent = data.id; // 更新显示的店号
                },

                // 显示编辑对话框的方法
                showEditDialog() {
                    常量 currentId = document.getElementById("storeId").textContent; // 获取当前显示的店号
                    常量 promptText = ["请输入新的店号：", "------------------------", "可用操作：", "• Enter 键 - 确认修改", "• ESC 键 - 取消修改"].到可读文本("\n"); // 编辑对话框的提示文本

                    常量 newId = 输入对话框(promptText, currentId); // 弹出提示框获取新店号

                    如果 (newId !== 空对象) {
                        如果 (newId.删首尾空()) {
                            本对象.saveStoreId(newId.删首尾空()); // 保存新店号
                            信息框("店号修改成功！"); // 提示修改成功
                        } 否则 {
                            信息框("错误：店号不能为空！"); // 提示错误
                        }
                    }
                },

                // 设置事件监听的方法
                setupListeners() {
                    document.addEventListener("keydown", (e) => {
                        如果 (e.key === "Enter") {
                            e.preventDefault(); // 阻止默认行为
                            本对象.showEditDialog(); // 显示编辑对话框
                        }
                    });

                    document.querySelector(".info-bar").addEventListener("click", () => {
                        本对象.showEditDialog(); // 点击信息栏时显示编辑对话框
                    });
                }
            };

            // 时间管理模块（保持不变）
            常量 TimeManager = {
                // 初始化方法
                init() {
                    本对象.updateDateTime(); // 更新时间
                    启动时钟(() => 本对象.updateDateTime(), 1000); // 每秒更新时间
                },

                // 更新时间的方法
                updateDateTime() {
                    常量 date = 新建对象 日期类(); // 获取当前日期和时间
                    常量 weekDays = ["日", "一", "二", "三", "四", "五", "六"]; // 星期数组

                    常量 dateStr =
                        date
                            .取年月日时间("zh-CN", {
                                year: "numeric",
                                month: "2-digit",
                                day: "2-digit"
                            }).替换(/\//g, "年").替换("年", "月") + "日"; // 格式化日期

                    常量 timeStr = date.取时分秒时间("zh-CN", {
                        hour12: 假,
                        hour: "2-digit",
                        minute: "2-digit",
                        second: "2-digit"
                    }); // 格式化时间

                    document.getElementById("datetime").textContent = `${dateStr} ${timeStr} 周${weekDays[date.getDay()]}`; // 更新时间显示
                }
            };

            // 轮播管理模块（保持不变）
            常量 Carousel = {
                currentIndex: 0, // 当前显示的轮播图索引
                interval: 空对象, // 自动播放的定时器

                // 初始化方法
                init() {
                    本对象.slides = document.querySelectorAll(".slide"); // 获取所有轮播图项
                    本对象.counter = document.querySelector(".counter"); // 获取轮播图计数器
                    本对象.total = 本对象.slides.长度; // 轮播图项总数

                    本对象.updateCounter(); // 更新计数器
                    本对象.startAutoPlay(); // 开始自动播放
                    浏览器窗口.添加事件侦听器("resize", () => 本对象.handleResize()); // 监听窗口大小变化
                    本对象.handleResize(); // 处理初始窗口大小
                },

                // 更新计数器的方法
                updateCounter() {
                    本对象.counter.textContent = `${this.currentIndex + 1}/${this.total}`; // 更新计数器显示
                },

                // 切换轮播图的方法
                switchSlide() {
                    本对象.slides[本对象.currentIndex].classList.remove("active"); // 移除当前轮播图项的活动状态
                    本对象.currentIndex = (本对象.currentIndex + 1) % 本对象.total; // 计算下一个轮播图项的索引
                    本对象.slides[本对象.currentIndex].classList.add("active"); // 添加下一个轮播图项的活动状态
                    本对象.updateCounter(); // 更新计数器
                },

                // 开始自动播放的方法
                startAutoPlay() {
                    本对象.interval = 启动时钟(() => 本对象.switchSlide(), 8000); // 每8秒切换一次轮播图
                },

                // 处理窗口大小变化的方法
                handleResize() {
                    document.querySelector(".slider").style.height = 浏览器窗口.文档显示区高度 + "px"; // 调整轮播图容器的高度
                }
            };

            // 初始化所有模块
            DeviceIdManager.init();
            StoreManager.init();
            TimeManager.init();
            Carousel.init();
        </脚本>
    </网页主体>
</网页>