pafphgrb2
/
ssgl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'cff'

Browse Source
main
unknown 4 months ago
parent 5521de137d
commit e1d8787f9c
8 changed files with 0 additions and 8862 deletions
Show Stats Download Patch File Download Diff File

515
cff/echartsTheme.js
Unescape View File

@ -1,515 +0,0 @@
layui.define(function(exports) { // 定义一个模块，使用layui的模块化机制
exports('echartsTheme', // 导出名为'echartsTheme'的模块
{
"color": [ // 设置图表的颜色数组
"#3fb1e3", // 蓝色
"#6be6c1", // 绿色
"#626c91", // 深蓝色
"#a0a7e6", // 浅蓝色
"#c4ebad", // 浅绿色
"#96dee8" // 浅蓝色
],
"backgroundColor": "rgba(252,252,252,0)", // 设置背景颜色为透明白色
"textStyle": {}, // 文本样式，此处为空对象表示默认样式
"title": { // 标题样式配置
"textStyle": { // 主标题样式
"color": "#666666" // 主标题颜色为灰色
},
"subtextStyle": { // 副标题样式
"color": "#999999" // 副标题颜色为浅灰色
}
},
"line": {
// 设置线条的样式
"itemStyle": {
// 正常状态下的样式
"normal": {
// 边框宽度为3
"borderWidth": "3"
}
},
// 设置线条的样式
"lineStyle": {
// 正常状态下的样式
"normal": {
// 线宽为4
"width": "4"
}
},
// 设置符号的大小为10
"symbolSize": "10",
// 设置符号的形状为空圆
"symbol": "emptyCircle",
// 启用平滑曲线
"smooth": true
},
"radar": {
// 设置雷达图的样式
"itemStyle": {
// 正常状态下的样式
"normal": {
// 边框宽度为3
"borderWidth": "3"
}
},
// 设置线条样式
"lineStyle": {
// 正常状态下的线条样式
"normal": {
// 线条宽度为4
"width": "4"
}
},
// 设置符号大小
"symbolSize": "10",
// 设置符号类型为空心圆
"symbol": "emptyCircle",
// 设置曲线平滑
"smooth": true
},
// 设置柱状图样式
"bar": {
// 设置项目样式
"itemStyle": {
// 正常状态下的柱状图样式
"normal": {
// 柱状图边框宽度为0
"barBorderWidth": 0,
// 柱状图边框颜色为#ccc
"barBorderColor": "#ccc"
},
// 强调状态下的柱状图样式
"emphasis": {
// 柱状图边框宽度为0
"barBorderWidth": 0,
// 柱状图边框颜色为#ccc
"barBorderColor": "#ccc"
}
}
}
"pie": { // 饼图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"scatter": { // 散点图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"boxplot": { // 箱线图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"parallel": { // 平行坐标系配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
}
"sankey": { // 桑基图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"funnel": { // 漏斗图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"gauge": { // 仪表盘配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
},
"emphasis": { // 强调状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色（#ccc）
}
}
},
"candlestick": { // 定义K线图样式
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"color": "#e6a0d2", // K线图颜色为粉红色
"color0": "transparent", // 下跌部分的颜色为透明
"borderColor": "#e6a0d2", // 边框颜色为粉红色
"borderColor0": "#3fb1e3", // 下跌部分的边框颜色为蓝色
"borderWidth": "2" // 边框宽度为2
}
}
},
"graph": { // 定义关系图样式
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"borderWidth": 0, // 边框宽度为0
"borderColor": "#ccc" // 边框颜色为灰色
}
},
"lineStyle": { // 线条样式配置
"normal": { // 正常状态下的样式
"width": "1", // 线条宽度为1
"color": "#cccccc" // 线条颜色为浅灰色
}
},
"symbolSize": "10", // 节点大小为10
"symbol": "emptyCircle", // 节点形状为空心圆
"smooth": true, // 是否平滑曲线
"color": [ // 节点颜色数组
"#3fb1e3", // 第一个颜色为蓝色
"#6be6c1", // 第二个颜色为绿色
"#626c91", // 第三个颜色为深蓝色
"#a0a7e6", // 第四个颜色为淡蓝色
"#c4ebad", // 第五个颜色为淡绿色
"#96dee8" // 第六个颜色为浅蓝色
],
"label": { // 标签样式配置
"normal": { // 正常状态下的样式
"textStyle": { // 文本样式配置
"color": "#ffffff" // 文本颜色为白色
}
}
}
}
},
"map": { // 地图配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"areaColor": "#eeeeee", // 区域颜色为浅灰色（#eeeeee）
"borderColor": "#aaaaaa", // 边框颜色为中灰色（#aaaaaa）
"borderWidth": 0.5 // 边框宽度为0.5
},
"emphasis": { // 强调状态下的样式
"areaColor": "rgba(63,177,227,0.25)", // 区域颜色为半透明蓝色（rgba(63,177,227,0.25)）
"borderColor": "#3fb1e3", // 边框颜色为蓝色（#3fb1e3）
"borderWidth": 1 // 边框宽度为1
}
},
"label": { // 标签配置项
"normal": { // 正常状态下的标签样式
"textStyle": { // 文本样式
"color": "#ffffff" // 文本颜色为白色（#ffffff）
}
},
"emphasis": { // 强调状态下的标签样式
"textStyle": { // 文本样式
"color": "rgb(63,177,227)" // 文本颜色为蓝色（rgb(63,177,227)）
}
}
}
},
"geo": { // 地理坐标系组件配置项
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"areaColor": "#eeeeee", // 区域颜色为浅灰色（#eeeeee）
"borderColor": "#aaaaaa", // 边框颜色为中灰色（#aaaaaa）
"borderWidth": 0.5 // 边框宽度为0.5
},
"emphasis": { // 强调状态下的样式
"areaColor": "rgba(63,177,227,0.25)", // 区域颜色为半透明蓝色（rgba(63,177,227,0.25)）
"borderColor": "#3fb1e3", // 边框颜色为蓝色（#3fb1e3）
"borderWidth": 1 // 边框宽度为1
}
}
} "label": { // 标签配置项
"normal": { // 正常状态下的样式
"textStyle": { // 文本样式
"color": "#ffffff" // 文本颜色为白色（#ffffff）
}
},
"emphasis": { // 强调状态下的样式
"textStyle": { // 文本样式
"color": "rgb(63,177,227)" // 文本颜色为蓝色（rgb(63,177,227)）
}
}
}
},
"categoryAxis": { // 类目轴配置项
"axisLine": { // 轴线配置
"show": true, // 显示轴线
"lineStyle": { // 线条样式
"color": "#cccccc" // 轴线颜色为浅灰色（#cccccc）
}
},
"axisTick": { // 刻度线配置
"show": false, // 不显示刻度线
"lineStyle": { // 线条样式
"color": "#333" // 刻度线颜色为深灰色（#333）
}
},
"axisLabel": { // 轴标签配置
"show": true, // 显示轴标签
"textStyle": { // 文本样式
"color": "#999999" // 轴标签颜色为浅灰色（#999999）
}
},
"splitLine": { // 分隔线配置
"show": true, // 显示分隔线
"lineStyle": { // 线条样式
"color": [ // 分隔线颜色数组
"#eeeeee" // 分隔线颜色为浅灰色（#eeeeee）
]
}
},
"splitArea": { // 分隔区域配置项
"show": false, // 是否显示分隔区域，默认为false
"areaStyle": { // 分隔区域的样式配置
"color": [ // 分隔区域的颜色数组
"rgba(250,250,250,0.05)", // 第一个颜色值，半透明白色
"rgba(200,200,200,0.02)" // 第二个颜色值，半透明灰色
]
}
},
"valueAxis": { // 数值轴配置项
"axisLine": { // 轴线配置
"show": true, // 是否显示轴线，默认为true
"lineStyle": { // 轴线的样式配置
"color": "#cccccc" // 轴线的颜色，灰色
}
},
"axisTick": { // 刻度线配置
"show": false, // 是否显示刻度线，默认为false
"lineStyle": { // 刻度线的样式配置
"color": "#333" // 刻度线的颜色，深灰色
}
},
"axisLabel": { // 轴标签配置
"show": true, // 是否显示轴标签，默认为true
"textStyle": { // 轴标签文本的样式配置
"color": "#999999" // 轴标签文本的颜色，浅灰色
}
},
"splitLine": { // 分隔线配置
"show": true, // 是否显示分隔线，默认为true
"lineStyle": { // 分隔线的样式配置
"color": [ // 分隔线的颜色数组
"#eeeeee" // 分隔线的颜色，浅灰色
]
}
},
"splitArea": { // 配置图表的分隔区域
"show": false, // 是否显示分隔区域，这里设置为不显示
"areaStyle": { // 分隔区域的样式设置
"color": [ // 分隔区域的颜色数组
"rgba(250,250,250,0.05)", // 第一个颜色值，半透明白色
"rgba(200,200,200,0.02)" // 第二个颜色值，半透明灰色
]
}
},
"logAxis": { // 对数轴的配置
"axisLine": { // 坐标轴线的配置
"show": true, // 是否显示坐标轴线，这里设置为显示
"lineStyle": { // 坐标轴线的样式设置
"color": "#cccccc" // 坐标轴线的颜色，设置为浅灰色
}
},
"axisTick": { // 坐标轴刻度的配置
"show": false, // 是否显示坐标轴刻度，这里设置为不显示
"lineStyle": { // 坐标轴刻度的样式设置
"color": "#333" // 坐标轴刻度的颜色，设置为深灰色
}
},
"axisLabel": { // 坐标轴标签的配置
"show": true, // 是否显示坐标轴标签，这里设置为显示
"textStyle": { // 坐标轴标签文本的样式设置
"color": "#999999" // 坐标轴标签文本的颜色，设置为浅灰色
}
},
"splitLine": { // 分隔线的设置
"show": true, // 是否显示分隔线，这里设置为显示
"lineStyle": { // 分隔线的样式设置
"color": [ // 分隔线的颜色数组
"#eeeeee" // 分隔线的颜色，设置为浅灰色
]
}
},
"splitArea": { // 分隔区域配置项
"show": false, // 是否显示分隔区域，默认为false
"areaStyle": { // 分隔区域的样式配置
"color": [ // 分隔区域的颜色数组
"rgba(250,250,250,0.05)", // 第一个颜色值，半透明白色
"rgba(200,200,200,0.02)" // 第二个颜色值，半透明灰色
]
}
},
"timeAxis": { // 时间轴配置项
"axisLine": { // 轴线配置
"show": true, // 是否显示轴线，默认为true
"lineStyle": { // 轴线的样式配置
"color": "#cccccc" // 轴线的颜色，灰色
}
},
"axisTick": { // 刻度线配置
"show": false, // 是否显示刻度线，默认为false
"lineStyle": { // 刻度线的样式配置
"color": "#333" // 刻度线的颜色，深灰色
}
},
"axisLabel": { // 标签配置
"show": true, // 是否显示标签，默认为true
"textStyle": { // 标签文本的样式配置
"color": "#999999" // 标签文本的颜色，浅灰色
}
},
"splitLine": { // 分隔线配置
"show": true, // 是否显示分隔线，默认为true
"lineStyle": { // 分隔线的样式配置
"color": [ // 分隔线的颜色数组
"#eeeeee" // 分隔线的颜色，浅灰色
]
}
},
"splitArea": { // 分隔区域配置项
"show": false, // 是否显示分隔区域，默认为false
"areaStyle": { // 分隔区域的样式配置
"color": [ // 分隔区域的颜色数组
"rgba(250,250,250,0.05)", // 第一个颜色值，半透明白色
"rgba(200,200,200,0.02)" // 第二个颜色值，半透明灰色
]
}
},
"toolbox": { // 工具箱配置项
"iconStyle": { // 图标样式配置
"normal": { // 正常状态下的样式
"borderColor": "#999999" // 边框颜色为深灰色（#999999）
},
"emphasis": { // 强调状态下的样式
"borderColor": "#666666" // 边框颜色为中灰色（#666666）
}
}
},
"legend": { // 图例配置项
"textStyle": { // 文本样式配置
"color": "#999999" // 文本颜色为深灰色（#999999）
}
},
"tooltip": { // 提示框配置项
"axisPointer": { // 坐标轴指示器配置
"lineStyle": { // 线条样式配置
"color": "#cccccc", // 线条颜色为浅灰色（#cccccc）
"width": 1 // 线条宽度为1
},
"crossStyle": { // 十字准星样式配置
"color": "#cccccc", // 颜色为浅灰色（#cccccc）
"width": 1 // 宽度为1
}
}
},
"timeline": { // 时间轴配置项
"lineStyle": { // 轴线样式配置
"color": "#626c91", // 轴线颜色，深蓝色
"width": 1 // 轴线宽度为1
},
"itemStyle": { // 项目样式配置
"normal": { // 正常状态下的样式
"color": "#626c91", // 项目颜色，深蓝色
"borderWidth": 1 // 边框宽度为1
},
"emphasis": { // 强调状态下的样式
"color": "#626c91" // 强调状态下的项目颜色，深蓝色
}
},
"controlStyle": { // 控制按钮样式配置
"normal": { // 正常状态下的样式
"color": "#626c91", // 控制按钮颜色，深蓝色
"borderColor": "#626c91", // 控制按钮边框颜色，深蓝色
"borderWidth": 0.5 // 控制按钮边框宽度为0.5
},
"emphasis": { // 强调状态下的样式
"color": "#626c91", // 强调状态下的控制按钮颜色，深蓝色
"borderColor": "#626c91", // 强调状态下的控制按钮边框颜色，深蓝色
"borderWidth": 0.5 // 强调状态下的控制按钮边框宽度为0.5
}
},
"checkpointStyle": { // 检查点样式配置
"color": "#3fb1e3", // 检查点颜色，浅蓝色
"borderColor": "rgba(63,177,227,0.15)" // 检查点边框颜色，半透明浅蓝色
},
"label": { // 标签样式配置
"normal": { // 正常状态下的标签样式
"textStyle": { // 文本样式配置
"color": "#626c91" // 标签文本颜色，深蓝色
}
},
"emphasis": { // 强调状态下的标签样式
"textStyle": { // 文本样式配置
"color": "#626c91" // 强调状态下的标签文本颜色，深蓝色
}
}
}
},
"visualMap": { // 视觉映射组件配置项
"color": [ // 颜色数组，用于定义视觉映射的颜色范围
"#2a99c9", // 起始颜色，蓝色
"#afe8ff" // 结束颜色，浅蓝色
]
},
"dataZoom": { // 数据区域缩放组件配置项
"backgroundColor": "rgba(255,255,255,0)", // 背景颜色，完全透明
"dataBackgroundColor": "rgba(222,222,222,1)", // 数据区域的背景颜色，灰色
"fillerColor": "rgba(114,230,212,0.25)", // 填充颜色，半透明的绿色
"handleColor": "#cccccc", // 手柄颜色，灰色
"handleSize": "100%", // 手柄大小，占满容器
"textStyle": { // 文本样式配置
"color": "#999999" // 文本颜色，深灰色
}
},
"markPoint": { // 标记点组件配置项
"label": { // 标签配置
"normal": { // 正常状态下的标签样式
"textStyle": { // 文本样式
"color": "#ffffff" // 文本颜色，白色
}
},
"emphasis": { // 强调状态下的标签样式
"textStyle": { // 文本样式
"color": "#ffffff" // 文本颜色，白色
}
}
}
}
}); // 结束配置对象
}); // 结束函数调用

450
cff/miniAdmin.js
Unescape View File

@ -1,450 +0,0 @@
layui.define(["jquery", "miniMenu", "element","miniPage", "miniTheme","axios","store"], function (exports) { // 定义一个模块，依赖列表包括 jQuery, miniMenu, element, miniPage, miniTheme, axios, store
var $ = layui.$, // 获取 jQuery 模块并赋值给变量 $
element = layui.element, // 获取 element 模块并赋值给变量 element
layer = layui.layer, // 获取 layer 模块并赋值给变量 layer
miniMenu = layui.miniMenu, // 获取 miniMenu 模块并赋值给变量 miniMenu
miniTheme = layui.miniTheme, // 获取 miniTheme 模块并赋值给变量 miniTheme
store = layui.store, // 获取 store 模块并赋值给变量 store
axios = layui.axios, // 获取 axios 模块并赋值给变量 axios
miniPage = layui.miniPage;
if (!/http(s*):\/\//.test(location.href)) { // 检查当前页面的URL是否以http或https开头，如果不是则执行以下代码块
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示"; // 定义提示信息，告知用户需要将项目部署到Web容器中
return layer.alert(tips); // 使用layer.alert方法弹出提示框，显示上述提示信息，并终止后续代码的执行
}
var miniAdmin = { // 定义一个名为miniAdmin的对象，用于存放后续的代码逻辑和功能实现
render: function (options) {
options.iniUrl = options.iniUrl || null; // 初始化URL，默认为null
options.logoInfo = options.logoInfo || null; // Logo信息，默认为null
options.homeInfo = options.homeInfo || null; // 首页信息，默认为null
options.clearUrl = options.clearUrl || null; // 清除URL，默认为null
options.renderPageVersion = options.renderPageVersion || false; // 是否渲染页面版本，默认为false
options.bgColorDefault = options.bgColorDefault || 0; // 默认背景颜色，默认为0
options.multiModule = options.multiModule || false; // 是否支持多模块，默认为false
options.menuChildOpen = options.menuChildOpen || false; // 菜单子项是否默认展开，默认为false
options.loadingTime = options.loadingTime || 1; // 加载时间，默认为1秒
options.pageAnim = options.pageAnim || false; // 页面动画效果，默认为false
}
// 使用axios发送GET请求获取初始化数据
axios.get(options.iniUrl).then(function (data) {
// 如果返回的数据为空，显示错误信息
if (data == null) {
miniAdmin.error('暂无菜单信息')
} else {
// 渲染logo信息
miniAdmin.renderLogo(options.logoInfo);
// 渲染清除按钮
miniAdmin.renderClear(options.clearUrl);
// 渲染页面动画效果
miniAdmin.renderAnim(options.pageAnim);
// 监听并处理首页信息和多模块信息
miniAdmin.listen({
// 监听homeInfo属性，并传递options对象中的homeInfo值
homeInfo: options.homeInfo,
// 监听multiModule属性，并传递options对象中的multiModule值
multiModule: options.multiModule,
})
miniMenu.render({
// 将数据列表传递给菜单渲染函数
menuList: data.data,
// 传递是否支持多模块的选项
multiModule: options.multiModule,
// 传递子菜单默认打开状态的选项
menuChildOpen: options.menuChildOpen
});
miniPage.render({
// 设置首页信息，从options对象中获取homeInfo属性
homeInfo: options.homeInfo,
// 设置菜单列表数据，从data对象的data属性中获取
menuList: data.data,
// 设置是否启用多模块功能，从options对象中获取multiModule属性
multiModule: options.multiModule,
// 设置页面渲染版本，从options对象中获取renderPageVersion属性
renderPageVersion: options.renderPageVersion,
// 设置子菜单是否默认打开，从options对象中获取menuChildOpen属性
menuChildOpen: options.menuChildOpen,
// 定义监听切换回调函数，当触发时调用miniAdmin的renderDevice方法
listenSwichCallback: function () {
miniAdmin.renderDevice();
}
});
miniTheme.render({
// 设置默认背景颜色
bgColorDefault: options.bgColorDefault,
// 监听事件
listen: true,
});
// 删除加载器，传入加载时间参数
miniAdmin.deleteLoader(options.loadingTime);
}
}).catch(function () {
// 捕获错误并显示错误信息
miniAdmin.error('菜单接口有误');
})
},
/**
* 初始化logo
* @param data
*/
renderLogo: function (data) {
// 生成包含logo图片和标题的HTML字符串
var html = '<a href="javascript:;"><img src="' + data.image + '" alt="logo"><h1>' + data.title + '</h1></a>';
// 将生成的HTML字符串插入到class为layuimini-logo的元素中
$('.layuimini-logo').html(html);
},
/**
* 初始化缓存地址
* @param clearUrl
*/
renderClear: function (clearUrl) {
// 将传入的URL设置为'.layuimini-clear'元素的data-href属性值
$('.layuimini-clear').attr('data-href', clearUrl);
},
/**
* 切换菜单动画
* @param anim
*/
renderAnim: function (anim) {
// 检查传入的动画参数是否存在
if (anim) {
// 在ID为'layuimini-bg-color'的元素之后插入一段样式代码，用于定义页面动画效果
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
// 定义动画名称和持续时间，以及填充模式
'.layuimini-page-anim {-webkit-animation-name:layuimini-upbit;-webkit-animation-duration:.3s;-webkit-animation-fill-mode:both;}\n' +
// 使用@keyframes定义动画关键帧
'@keyframes layuimini-upbit {0% {transform:translate3d(0,30px,0);opacity:.3;}\n' +
// 动画从初始状态到结束状态的变化
'100% {transform:translate3d(0,0,0);opacity:1;}\n' +
'}\n' +
'</style>');
}
},
/**
* 进入全屏
*/
fullScreen: function () {
// 获取文档的根元素
var el = document.documentElement;
// 获取不同浏览器的全屏请求方法
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
// 如果支持标准的全屏请求方法，则调用该方法
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
// 如果支持ActiveXObject（主要用于IE），则通过发送F11键实现全屏
else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
// 针对IE的msRequestFullscreen方法
else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
}
// 针对Opera的oRequestFullscreen方法
else if (el.oRequestFullscreen) {
el.oRequestFullscreen();
}
// 针对Webkit内核的webkitRequestFullscreen方法
else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
}
// 针对Firefox的mozRequestFullScreen方法
else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}
// 如果以上方法都不支持，则提示用户浏览器不支持全屏调用
else {
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 退出全屏
*/
exitFullScreen: function () {
// 获取文档对象
var el = document;
// 定义取消全屏的方法，兼容不同浏览器
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
// 如果存在取消全屏方法并且该方法可用
if (typeof cfs != "undefined" && cfs) {
// 调用取消全屏方法
cfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
// 针对IE浏览器的处理方式
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
// 发送F11键以退出全屏模式
wscript.SendKeys("{F11}");
}
} else if (el.msExitFullscreen) {
// 针对IE11及以下版本的处理方式
el.msExitFullscreen();
} else if (el.oRequestFullscreen) {
// 针对Opera浏览器的处理方式
el.oCancelFullScreen();
} else if (el.mozCancelFullScreen) {
// 针对Firefox浏览器的处理方式
el.mozCancelFullScreen();
} else if (el.webkitCancelFullScreen) {
// 针对Webkit内核的浏览器（如Chrome和Safari）的处理方式
el.webkitCancelFullScreen();
} else {
// 如果以上所有方法都不可用，提示用户浏览器不支持全屏调用
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 初始化设备端
*/
renderDevice: function () {
// 如果当前是移动设备
if (miniAdmin.checkMobile()) {
// 设置工具栏图标的属性为展开状态
$('.layuimini-tool i').attr('data-side-fold', 1);
// 更改工具栏图标的类名为“fa fa-outdent”
$('.layuimini-tool i').attr('class', 'fa fa-outdent');
// 移除布局主体的最小化样式
$('.layui-layout-body').removeClass('layuimini-mini');
// 添加布局主体的全部显示样式
$('.layui-layout-body').addClass('layuimini-all');
}
},
/**
* 初始化加载时间
* @param loadingTime
*/
deleteLoader: function (loadingTime) {
// 设置一个定时器，在指定的时间后执行回调函数
setTimeout(function () {
// 使用jQuery选择器找到类名为'layuimini-loader'的元素，并使其淡出
$('.layuimini-loader').fadeOut();
}, loadingTime * 1000) // 将传入的loadingTime参数转换为毫秒
},
/**
* 成功
* @param title
* @returns {*}
*/
success: function (title) {
// 调用layer.msg方法显示消息提示框
// title: 要显示的消息内容
// icon: 1 表示成功图标
// shade: 使用当前对象的shade属性作为遮罩层
// scrollbar: false 表示不显示滚动条
// time: 2000 表示消息提示框显示时间为2秒
// shadeClose: true 表示点击遮罩层可以关闭提示框
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
},
/**
* 失败
* @param title
* @returns {*}
*/
error: function (title) {
// 调用layer.msg方法显示错误消息
// title: 要显示的消息内容
// icon: 2 表示使用错误图标
// shade: 使用当前对象的shade属性值
// scrollbar: false 表示不显示滚动条
// time: 3000 表示消息显示时间为3秒
// shadeClose: true 表示点击遮罩层可以关闭消息框
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
},
/**
* 判断是否为手机
* @returns {boolean}
*/
checkMobile: function () {
// 获取用户代理字符串并转换为小写
var ua = navigator.userAgent.toLocaleLowerCase();
// 获取平台信息并转换为小写
var pf = navigator.platform.toLocaleLowerCase();
// 判断是否为Android设备
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|| (/ucweb.*linux/i.test(ua));
// 判断是否为iOS设备，排除Android设备
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
// 判断是否为Windows Phone设备
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
// 获取文档的宽度
var clientWidth = document.documentElement.clientWidth;
// 如果既不是Android、iOS也不是Windows Phone，并且宽度大于1024，则返回false
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
return false;
} else {
// 否则返回true
return true;
}
},
/**
* 监听
* @param options
*/
listen: function (options) {
// 如果 options 对象中没有 homeInfo 属性，则初始化为一个空对象
options.homeInfo = options.homeInfo || {};
}
/**
* 清理
*/
$('body').on('click', '[data-clear]', function () {
// 显示加载动画，设置2秒后自动关闭
var loading = layer.load(0, {shade: false, time: 2 * 1000});
// 清空浏览器的sessionStorage
sessionStorage.clear();
// 获取清理缓存的URL
var clearUrl = $(this).attr('data-href');
// 如果URL存在且不为空
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
// 发送GET请求到服务器清理缓存
$.getJSON(clearUrl, function (data, status) {
// 关闭加载动画
layer.close(loading);
// 根据服务器返回的状态码判断是否成功
if (data.code != 1) {
// 清理失败，显示错误信息
return miniAdmin.error(data.msg);
} else {
// 清理成功，显示成功信息
return miniAdmin.success(data.msg);
}
}).fail(function () {
// 请求失败，关闭加载动画并显示错误信息
layer.close(loading);
return miniAdmin.error('清理缓存接口有误');
});
} else {
// URL不存在或为空，直接关闭加载动画并显示成功信息
layer.close(loading);
return miniAdmin.success('清除缓存成功');
}
});
/**
* 刷新
*/
$('body').on('click', '[data-refresh]', function () {
// 当点击带有 data-refresh 属性的元素时，触发此事件处理函数
miniPage.refresh(options);
// 调用 miniPage 对象的 refresh 方法，并传入 options 参数进行页面刷新
miniAdmin.success('刷新成功');
// 调用 miniAdmin 对象的 success 方法，显示“刷新成功”的提示信息
});
/**
* 监听提示信息
*/
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
// 如果当前是移动设备，则不执行后续代码
if (miniAdmin.checkMobile()) {
return false;
}
// 获取当前元素的class属性值
var classInfo = $(this).attr('class'),
// 获取当前元素的HTML内容
tips = $(this).prop("innerHTML"),
// 获取工具栏的折叠状态
isShow = $('.layuimini-tool i').attr('data-side-fold');
// 如果工具栏未折叠且tips存在
if (isShow == 0 && tips) {
// 构建提示信息HTML结构
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>";
// 显示提示信息
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'], // 设置提示信息的位置和颜色
time: 300000, // 设置提示信息的显示时间
skin:"popup-tips", // 设置提示信息的样式
// 成功回调函数
success:function (el) {
// 调整提示信息的位置
var left = $(el).position().left - 10;
$(el).css({ left:left });
// 重新渲染元素
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
// 当鼠标离开具有类名 'popup-tips' 的元素时触发事件
if (miniAdmin.checkMobile()) {
// 如果当前设备是移动设备，则直接返回 false，不执行后续代码
return false;
}
// 获取具有类名 'layuimini-tool i' 的元素的 'data-side-fold' 属性值
var isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0) {
// 如果 'data-side-fold' 属性值为 0，表示侧边栏未展开
try {
// 尝试关闭弹出提示框
layer.close(window.openTips);
} catch (e) {
// 如果关闭过程中发生异常，捕获异常并打印错误信息到控制台
console.log(e.message);
}
}
});
/**
* 全屏
*/
$('body').on('click', '[data-check-screen]', function () {
// 获取当前元素的 data-check-screen 属性值
var check = $(this).attr('data-check-screen');
// 如果属性值为 'full'，则进入全屏模式
if (check == 'full') {
// 调用 miniAdmin 的 fullScreen 方法进入全屏模式
miniAdmin.fullScreen();
// 将属性值改为 'exit'
$(this).attr('data-check-screen', 'exit');
// 修改按钮图标为压缩图标
$(this).html('<i class="fa fa-compress"></i>');
} else {
// 否则退出全屏模式
miniAdmin.exitFullScreen();
// 将属性值改为 'full'
$(this).attr('data-check-screen', 'full');
// 修改按钮图标为箭头图标
$(this).html('<i class="fa fa-arrows-alt"></i>');
}
});
/**
* 点击遮罩层
*/
$('body').on('click', '.layuimini-make', function () {
// 调用 miniAdmin 的 renderDevice 方法重新渲染设备
miniAdmin.renderDevice();
});
}
};
// 导出 miniAdmin 模块
exports("miniAdmin", miniAdmin);
});

234
cff/miniMenu.js
Unescape View File

@ -1,234 +0,0 @@
layui.define(["element","laytpl" ,"jquery"], function (exports) { // 定义一个模块，依赖element、laytpl和jquery
var element = layui.element, // 获取layui的element模块
$ = layui.$, // 获取layui的jQuery模块
laytpl = layui.laytpl, // 获取layui的模板引擎模块
layer = layui.layer; // 获取layui的弹出层模块
var miniMenu = { // 定义miniMenu对象
render: function (options) { // 定义渲染函数
options.menuList = options.menuList || []; // 如果未传入menuList，则默认为空数组
options.multiModule = options.multiModule || false; // 如果未传入multiModule，则默认为false
options.menuChildOpen = options.menuChildOpen || false; // 如果未传入menuChildOpen，则默认为false
if (options.multiModule) { // 如果开启多模块
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen); // 调用多模块渲染函数
} else { // 否则
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen); // 调用单模块渲染函数
}
miniMenu.listen(); // 监听事件
},
renderSingleModule: function (menuList, menuChildOpen) { // 定义单模块渲染函数
menuList = menuList || []; // 如果未传入menuList，则默认为空数组
var leftMenuHtml = '', // 初始化左侧菜单HTML字符串
childOpenClass = '', // 初始化子菜单打开类名
leftMenuCheckDefault = 'layui-this'; // 设置默认选中样式类名
var me = this ; // 保存当前上下文
if (menuChildOpen) childOpenClass = ' layui-nav-itemed'; // 如果需要展开子菜单，添加对应的类名
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ; // 渲染左侧菜单HTML
$('.layui-layout-body').addClass('layuimini-single-module'); // 给布局主体添加单模块标识类名
$('.layuimini-header-menu').remove(); // 移除头部菜单
$('.layuimini-menu-left').html(leftMenuHtml); // 将渲染好的左侧菜单HTML插入到左侧菜单容器中
element.init(); // 初始化layui元素
},
compileMenu: function(menu,isSub){
// 定义菜单HTML模板，使用laytpl语法进行条件渲染
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}" {{#if( d.id){ }} id="{{d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }} <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}} </li>' ;
// 如果isSub为true，则使用不同的HTML模板
if(isSub){
menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }} id="{{d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}}</dd>'
}
// 使用laytpl渲染菜单HTML模板并返回结果
return laytpl(menuHtml).render(menu);
},
compileMenuContainer :function(menu,isSub){
// 定义菜单容器的HTML模板，使用laytpl语法进行条件渲染
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{d.children}}</ul>' ;
// 如果isSub为true，则使用不同的HTML模板
if(isSub){
wrapperHtml = '<dl class="layui-nav-child ">{{d.children}}</dl>' ;
}
// 如果菜单没有子项，则返回空字符串
if(!menu.children){
return "";
}
// 使用laytpl渲染菜单容器的HTML模板并返回结果
return laytpl(wrapperHtml).render(menu);
},
each:function(list,callback){ // 定义一个遍历函数，接收列表和回调函数作为参数
var _list = []; // 初始化一个空数组用于存储处理后的结果
for(var i = 0 ,length = list.length ; i<length ;i++ ){ // 遍历传入的列表
_list[i] = callback(i,list[i]) ; // 对每个元素执行回调函数，并将结果存入新数组
}
return _list ; // 返回处理后的数组
},
renderChildrenMenu:function(menuList,options){ // 定义渲染子菜单的函数，接收菜单列表和选项作为参数
var me = this ; // 保存当前上下文的引用
menuList = menuList || [] ; // 如果未传入菜单列表，则使用空数组
var html = this.each(menuList,function (idx,menu) { // 遍历菜单列表
if(menu.child && menu.child.length){ // 如果当前菜单有子菜单
menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' }); // 递归调用自身渲染子菜单
}
menu.className = "" ; // 清空菜单的类名
menu.childOpenClass = options.childOpenClass || '' // 设置子菜单打开时的类名
return me.compileMenu(menu,true) // 编译当前菜单并返回HTML字符串
}).join(""); // 将所有生成的HTML字符串连接成一个字符串
return me.compileMenuContainer({ children:html },true) // 将生成的HTML字符串包装在容器中并返回
},
renderLeftMenu :function(leftMenus,options){ // 定义渲染左侧菜单的函数，接收左侧菜单列表和选项作为参数
options = options || {}; // 如果未传入选项，则使用空对象
var me = this ; // 保存当前上下文的引用
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) { // 遍历左侧菜单列表
var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass }); // 渲染子菜单
var leftMenuHtml = me.compileMenu({ // 编译当前左侧菜单
href:leftMenu.href, // 设置链接地址
target:leftMenu.target, // 设置链接目标
childOpenClass:options.childOpenClass, // 设置子菜单打开时的类名
icon:leftMenu.icon, // 设置图标
title:leftMenu.title, // 设置标题
children:children // 设置子菜单
});
return leftMenuHtml ; // 返回编译后的HTML字符串
}).join(""); // 将所有生成的HTML字符串连接成一个字符串
leftMenusHtml = me.compileMenuContainer({
id: options.parentMenuId, // 设置菜单容器的ID为options对象中的parentMenuId属性值
className: options.leftMenuCheckDefault, // 设置菜单容器的类名为options对象中的leftMenuCheckDefault属性值
children: leftMenusHtml // 将当前leftMenusHtml作为子元素传递给compileMenuContainer方法
}) ;
return leftMenusHtml ; // 返回处理后的leftMenusHtml
},
renderrenderMultiModule: function (menuList, menuChildOpen) {
menuList = menuList || []; // 如果menuList未定义或为空，则初始化为空数组
var me = this; // 保存当前上下文的引用
var headerMenuHtml = '', // 初始化顶部菜单HTML字符串
headerMobileMenuHtml = '', // 初始化移动端顶部菜单HTML字符串
leftMenuHtml = '', // 初始化左侧菜单HTML字符串
leftMenuCheckDefault = 'layui-this', // 设置左侧菜单默认选中样式
childOpenClass = '', // 初始化子菜单打开类名
headerMenuCheckDefault = 'layui-this'; // 设置顶部菜单默认选中样式
if (menuChildOpen) childOpenClass = ' layui-nav-itemed'; // 如果需要展开子菜单，添加相应的类名
var headerMenuHtml = this.each(menuList, function (index, val) { // 遍历菜单列表进行顶部菜单渲染
var menu = 'multi_module_' + index; // 生成菜单ID
var id = menu + "HeaderId"; // 生成头部菜单ID
var topMenuItemHtml = ""; // 初始化顶部菜单项HTML字符串
topMenuItemHtml = me.compileMenu({
className: headerMenuCheckDefault, // 设置菜单项的类名
menu: menu, // 设置菜单ID
id: id, // 设置菜单项ID
title: val.title, // 设置菜单标题
href: "", // 设置链接地址（此处为空）
target: "", // 设置目标窗口（此处为空）
children: "" // 设置子菜单（此处为空）
});
leftMenuHtml += me.renderLeftMenu(val.child, { // 渲染左侧菜单并追加到leftMenuHtml
parentMenuId: menu, // 传递父菜单ID
childOpenClass: childOpenClass, // 传递子菜单打开类名
leftMenuCheckDefault: leftMenuCheckDefault // 传递左侧菜单默认选中样式
});
headerMobileMenuHtml += me.compileMenu({ id: id, menu: menu, id: id, icon: val.icon, title: val.title }, true); // 渲染移动端顶部菜单并追加到headerMobileMenuHtml
headerMenuCheckDefault = ""; // 清空顶部菜单默认选中样式
leftMenuCheckDefault = "layui-hide"; // 设置左侧菜单默认隐藏样式
return topMenuItemHtml; // 返回顶部菜单项HTML字符串
}).join(""); // 将所有顶部菜单项HTML字符串连接成一个字符串
$('.layui-layout-body').addClass('layuimini-multi-module'); // 给布局主体添加多模块标识类名
$('.layuimini-menu-header-pc').html(headerMenuHtml); // 将顶部菜单HTML添加到电脑端头部菜单容器中
$('.layuimini-menu-left').html(leftMenuHtml); // 将左侧菜单HTML添加到左侧菜单容器中
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); // 将移动端顶部菜单HTML添加到移动端头部菜单容器中
element.init(); // 初始化Layui元素
} },
listlisten: function () {
// 监听点击事件，当点击具有data-menu属性的元素时触发
$('body').on('click', '[data-menu]', function () {
// 显示加载动画，设置shade为false，持续时间为2秒
var loading = layer.load(0, {shade: false, time: 2 * 1000});
// 获取被点击元素的data-menu属性值，即菜单ID
var menuId = $(this).attr('data-menu');
// header部分：移除当前选中的菜单项的高亮样式
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
// 将被点击的菜单项设置为高亮状态
$(this).addClass('layui-this');
// left部分：隐藏所有菜单项
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
// 移除隐藏状态下的菜单项的高亮样式
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
// 显示被点击的菜单项对应的内容区域
$("#" + menuId).removeClass('layui-hide');
// 将被点击的菜单项设置为高亮状态
$("#" + menuId).addClass('layui-this');
// 关闭加载动画
layer.close(loading);
});
$('body').on('click', '.layuimini-site-mobile', function () { // 当点击类名为'layuimini-site-mobile'的元素时触发事件
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
if (isShow == 1) { // 如果当前状态为展开
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
$('.layui-layout-body').removeClass('layuimini-all'); // 移除全屏样式
$('.layui-layout-body').addClass('layuimini-mini'); // 添加缩放样式
} else { // 如果当前状态为缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1); // 设置'data-side-fold'属性为1（正常）
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
$('.layui-layout-body').removeClass('layuimini-mini'); // 移除缩放样式
$('.layui-layout-body').addClass('layuimini-all'); // 添加全屏样式
layer.close(window.openTips); // 关闭提示层
}
element.init(); // 重新初始化元素
layer.close(loading); // 关闭加载层
});
$('body').on('click', '[data-side-fold]', function () { // 当点击具有'data-side-fold'属性的元素时触发事件
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
if (isShow == 1) { // 如果当前状态为展开
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
$('.layui-layout-body').removeClass('layuimini-all'); // 移除全屏样式
$('.layui-layout-body').addClass('layuimini-mini'); // 添加缩放样式
// $(".menu-li").each(function (idx,el) {
// $(el).addClass("hidden-sub-menu"); // 隐藏子菜单项
// });
} else { // 如果当前状态为缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1); // 设置'data-side-fold'属性为1（正常）
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
$('.layui-layout-body').removeClass('layuimini-mini'); // 移除缩放样式
$('.layui-layout-body').addClass('layuimini-all'); // 添加全屏样式
// $(".menu-li").each(function (idx,el) {
// $(el).removeClass("hidden-sub-menu"); // 显示子菜单项
// });
layer.close(window.openTips); // 关闭提示层
}
element.init(); // 重新初始化元素
layer.close(loading); // 关闭加载层
});
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () { // 当点击具有特定类名的dd元素时触发事件
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载动画，持续时间为2秒
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取具有data-side-fold属性的元素的data-side-fold属性值
if(check === "1"){ // 如果data-side-fold属性值为"1"
$('.layuimini-site-mobile').trigger("click"); // 触发layuimini-site-mobile元素的点击事件
element.init(); // 重新初始化element模块
}
layer.close(loading); // 关闭加载动画
});
},
};
exports("miniMenu", miniMenu); // 导出miniMenu模块
});

584
cff/miniPage.js
Unescape View File

@ -1,584 +0,0 @@
layui.define(["element", "jquery"], function (exports) {
// 获取 layui 的 element 模块
var element = layui.element,
// 获取 layui 的 jQuery 模块
$ = layui.$,
// miniAdmin = layui.miniAdmin, // 注释掉的代码，可能是用于获取 miniAdmin 模块
// 获取 layui 的 layer 模块
layer = layui.layer;
var miniPage = {
/**
* 初始化tab
* @param options 配置选项对象，包含homeInfo、menuList、multiModule等属性
*/
render: function (options) {
// 如果options.homeInfo未定义，则设置为空对象
options.homeInfo = options.homeInfo || {};
// 如果options.menuList未定义，则设置为空数组
options.menuList = options.menuList || [];
// 如果options.multiModule未定义，则设置为false
options.multiModule = options.multiModule || false;
// 如果options.renderPageVersion未定义，则设置为false
options.renderPageVersion = options.renderPageVersion || false;
// 如果options.listenSwichCallback未定义，则设置为空函数
options.listenSwichCallback = options.listenSwichCallback || function () {};
// 获取当前URL的hash部分并去掉前缀'#/'
var href = location.hash.replace(/^#\//, '');
// 如果href为空或未定义，则渲染主页
if (href === null || href === undefined || href === '') {
miniPage.renderHome(options);
} else {
// 否则渲染指定页面
miniPage.renderPage(href, options);
// 根据是否多模块进行监听切换
if (options.multiModule) {
miniPage.listenSwitchMultiModule(href);
} else {
miniPage.listenSwitchSingleModule(href);
}
}
// 监听事件
miniPage.listen(options);
// 监听hash变化
miniPage.listenHash(options);
},
/**
* 初始化主页
* @param options
*/
/**
* 渲染主页函数
* @param {Object} options - 包含主页信息和其他选项的对象
*/
renderHome: function (options) {
// 如果options.homeInfo不存在，则初始化为空对象
options.homeInfo = options.homeInfo || {};
// 如果options.homeInfo.href不存在，则初始化为空字符串
options.homeInfo.href = options.homeInfo.href || '';
// 如果options.renderPageVersion不存在，则初始化为false
options.renderPageVersion = options.renderPageVersion || false;
// 隐藏页面头部元素
$('.layuimini-page-header').addClass('layui-hide');
// 渲染页面内容，传入主页链接和选项参数
miniPage.renderPageContent(options.homeInfo.href, options);
},
/**
* 初始化页面
* @param href
* @param options
*/
/**
* 渲染页面的函数
* @param {string} href - 页面的URL地址
* @param {Object} options - 渲染选项
*/
renderPage: function (href, options) {
// 调用miniPage对象的renderPageTitle方法，渲染页面标题
miniPage.renderPageTitle(href, options);
// 调用miniPage对象的renderPageContent方法，渲染页面内容
miniPage.renderPageContent(href, options);
}
/**
* 初始化页面标题
* @param href
* @param options
*/
renderPageTitle: function (href, options) {
// 初始化homeInfo对象，如果不存在则设置为空对象
options.homeInfo = options.homeInfo || {};
// 设置homeInfo的title属性，如果不存在则默认为'主页'
options.homeInfo.title = options.homeInfo.title || '主页';
// 初始化menuList数组，如果不存在则设置为空数组
options.menuList = options.menuList || [];
// 显示页面头部元素
$('.layuimini-page-header').removeClass('layui-hide');
// 构建初始的页面标题HTML，包含返回主页链接和分隔符
var pageTitleHtml = '<a lay-href="" href="javascript:;" class="layuimini-back-home">' + options.homeInfo.title + '</a><span lay-separator="">/</span>\n';
// 根据href和menuList生成页面标题数组
var pageTitleArray = miniPage.buildPageTitleArray(href, options.menuList);
// 如果页面标题数组不为空
if (pageTitleArray.length > 0) {
// 遍历页面标题数组
for (var key in pageTitleArray) {
key = parseInt(key); // 将key转换为整数类型
// 如果不是最后一个元素，添加链接和分隔符
if (key !== pageTitleArray.length - 1) {
pageTitleHtml += '<a><cite>' + pageTitleArray[key] + '</cite></a><span lay-separator="">/</span>\n';
} else {
// 如果是最后一个元素，只添加链接
pageTitleHtml += '<a><cite>' + pageTitleArray[key] + '</cite></a>\n';
}
}
} else {
// 如果页面标题数组为空，从sessionStorage中获取标题
var title = sessionStorage.getItem('layuimini_page_title');
// 如果标题为空或未定义，隐藏页面头部元素
if (title === null || title === undefined || title === '') {
$('.layuimini-page-header').addClass('layui-hide');
} else {
// 否则，添加标题到页面标题HTML中
pageTitleHtml += '<a><cite>' + title + '</cite></a>\n';
}
}
// 清空并更新页面头部的标题内容
$('.layuimini-page-header .layuimini-page-title').empty().html(pageTitleHtml);
},
/**
* 初始化页面内容
* @param options
* @param href
*/
renderPageContent: function (href, options) {
// 设置默认的 renderPageVersion 选项为 false，如果未提供该选项
options.renderPageVersion = options.renderPageVersion || false;
// 定义页面内容的容器选择器
var container = '.layuimini-content-page';
// 如果需要渲染页面版本，则在 URL 中添加时间戳参数
if (options.renderPageVersion) {
var v = new Date().getTime();
href = href.indexOf("?") > -1 ? href + '&v=' + v : href + '?v=' + v;
}
// 根据页面头部是否隐藏来调整内容容器的高度样式
if ($(".layuimini-page-header").hasClass("layui-hide")) {
$(container).removeAttr("style");
} else {
$(container).attr("style", "height: calc(100% - 36px)");
}
// 清空内容容器的 HTML 内容
$(container).html('');
// 发起 AJAX 请求获取页面内容
$.ajax({
url: href,
type: 'get',
dataType: 'html',
success: function (data) {
// 将获取到的内容插入到内容容器中，并初始化元素
$(container).html(data);
element.init();
},
error: function (xhr, textstatus, thrown) {
// 处理请求失败的情况，显示错误信息
return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
}
});
},
/**
* 刷新页面内容
* @param options
*/
refresh: function (options) {
// 获取当前URL的hash部分，并去掉开头的'#/'
var href = location.hash.replace(/^#\//, '');
// 如果href为空或未定义，则渲染主页内容
if (href === null || href === undefined || href === '') {
miniPage.renderHome(options);
} else {
// 否则根据href渲染相应的页面内容
miniPage.renderPageContent(href, options);
}
}
}
},
/**
* 构建页面标题数组
* @param href
* @param menuList
*/
/**
* 构建页面标题数组
* @param {string} href - 目标链接
* @param {Array} menuList - 菜单列表
* @returns {Array} - 包含页面标题的数组
*/
buildPageTitleArray: function (href, menuList) {
// 初始化空数组，用于存储最终结果
var array = [],
newArray = [];
// 遍历菜单列表中的每一项
for (key in menuList) {
// 获取当前项
var item = menuList[key];
// 如果当前项的链接与目标链接匹配
if (item.href === href) {
// 将当前项的标题添加到结果数组中
array.push(item.title);
// 终止循环
break;
}
// 如果当前项有子菜单
if (item.child) {
// 递归调用自身，处理子菜单
newArray = miniPage.buildPageTitleArray(href, item.child);
// 如果子菜单中有匹配项
if (newArray.length > 0) {
// 将当前项的标题添加到子菜单结果数组的开头
newArray.unshift(item.title);
// 合并当前项的标题和子菜单结果数组到最终结果数组中
array = array.concat(newArray);
// 终止循环
break;
}
}
}
// 返回最终结果数组
return array;
},
/**
* 获取指定链接内容
* @param href
* @returns {string}
*/
getHrefContent: function (href) {
// 初始化一个空字符串变量，用于存储获取的内容
var content = '';
// 获取当前时间的时间戳，用于防止缓存
var v = new Date().getTime();
// 发送AJAX请求以获取指定URL的内容
$.ajax({
// 根据URL是否包含查询参数来决定如何添加时间戳
url: href.indexOf("?") > -1 ? href + '&v=' + v : href + '?v=' + v,
// 设置请求类型为GET
type: 'get',
// 期望的响应数据类型为HTML
dataType: 'html',
// 设置请求为同步，等待响应后再继续执行后续代码
async: false,
// 请求成功时的回调函数
success: function (data) {
// 将获取到的数据赋值给content变量
content = data;
},
// 请求失败时的回调函数
error: function (xhr, textstatus, thrown) {
// 显示错误信息并返回提示消息
return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
}
});
// 返回获取到的内容
return content;
},
/**
* 获取弹出层的宽高
* @returns {jQuery[]}
*/
getOpenWidthHeight: function () {
// 获取页面内容区域的宽度
var clienWidth = $(".layuimini-content-page").width();
// 获取页面内容区域的高度
var clientHeight = $(".layuimini-content-page").height();
// 获取页面内容区域相对于文档的左偏移量
var offsetLeft = $(".layuimini-content-page").offset().left;
// 获取页面内容区域相对于文档的上偏移量
var offsetTop = $(".layuimini-content-page").offset().top;
// 返回包含宽度、高度、上偏移量和左偏移量的数组
return [clienWidth, clientHeight, offsetTop, offsetLeft];
},
/**
* 单模块切换
* @param tabId
*/
listenSwitchSingleModule: function (tabId) {
// 遍历所有具有layuimini-href属性的元素
$("[layuimini-href]").each(function () {
// 如果元素的layuimini-href属性值等于传入的tabId
if ($(this).attr("layuimini-href") === tabId) {
// 定义一个函数用于自动展开菜单栏
var addMenuClass = function ($element, type) {
if (type === 1) {
// 为当前元素添加layui-this类
$element.addClass('layui-this');
// 如果当前元素同时拥有layui-nav-item和layui-this类
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
// 将所有菜单项的类名设置为layui-nav-item
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
} else {
// 递归调用addMenuClass，处理父级元素
addMenuClass($element.parent().parent(), 2);
}
} else {
// 为当前元素添加layui-nav-itemed类
$element.addClass('layui-nav-itemed');
// 如果当前元素同时拥有layui-nav-item和layui-nav-itemed类
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
// 将所有菜单项的类名设置为layui-nav-item
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
} else {
// 递归调用addMenuClass，处理父级元素
addMenuClass($element.parent().parent(), 2);
}
}
};
// 调用addMenuClass函数，展开当前元素的菜单栏
addMenuClass($(this).parent(), 1);
// 终止each循环
return false;
}
});
},
/**
* 多模块切换
* @param tabId
*/
listenSwitchMultiModule: function (tabId) {
// 遍历所有具有 layuimini-href 属性的元素
$("[layuimini-href]").each(function () {
// 如果元素的 layuimini-href 属性值等于传入的 tabId
if ($(this).attr("layuimini-href") === tabId) {
// 定义一个函数，用于自动展开菜单栏
var addMenuClass = function ($element, type) {
if (type === 1) {
// 为元素添加 'layui-this' 类
$element.addClass('layui-this');
// 如果元素同时具有 'layui-nav-item' 和 'layui-this' 类
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
// 获取父元素的 id
var moduleId = $element.parent().attr('id');
// 设置头部菜单项的类名为 'layui-nav-item'
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
// 为对应的头部菜单项添加 'layui-this' 类
$("#" + moduleId + "HeaderId").addClass("layui-this");
// 隐藏左侧菜单树
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
// 显示当前模块的菜单树并添加 'layui-this' 类
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
} else {
// 递归调用 addMenuClass 函数，处理父级元素
addMenuClass($element.parent().parent(), 2);
}
} else {
// 为元素添加 'layui-nav-itemed' 类
$element.addClass('layui-nav-itemed');
// 如果元素同时具有 'layui-nav-item' 和 'layui-nav-itemed' 类
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
// 获取父元素的 id
var moduleId = $element.parent().attr('id');
// 设置头部菜单项的类名为 'layui-nav-item'
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
// 为对应的头部菜单项添加 'layui-this' 类
$("#" + moduleId + "HeaderId").addClass("layui-this");
// 隐藏左侧菜单树
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
// 显示当前模块的菜单树并添加 'layui-this' 类
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
} else {
// 递归调用 addMenuClass 函数，处理父级元素
addMenuClass($element.parent().parent(), 2);
}
}
};
// 调用 addMenuClass 函数，处理当前元素的父级元素
addMenuClass($(this).parent(), 1);
return false; // 终止 each 循环
}
});
},
/**
* 修改hash地址定位
* @param href
*/
hashChange: function (href) {
// 将传入的 href 参数拼接到当前 URL 的哈希部分，并更新浏览器地址栏
window.location.hash = "/" + href;
},
/**
* 修改hash地址为主页
*/
hashHome: function () {
// 将当前窗口的哈希值设置为根路径 "/"
window.location.hash = "/";
},
/**
* 监听
* @param options
*/
/**
* 监听函数，用于处理传入的选项参数。
* @param {Object} options - 配置选项对象。
*/
listen: function (options) {
// 方法体内容待补充
/**
* 打开新窗口
*/
$('body').on('click', '[layuimini-href]', function () {
// 显示加载动画，设置2秒后自动关闭
var loading = layer.load(0, {shade: false, time: 2 * 1000});
// 获取当前点击元素的layuimini-href属性值和target属性值
var href = $(this).attr('layuimini-href'),
target = $(this).attr('target');
// 如果href为空，则直接返回
if(!href) return;
// 保存当前点击的元素引用
var me = this;
// 查找左侧菜单中与当前点击元素href相同的元素
var el = $("[layuimini-href='"+href+"']",".layuimini-menu-left");
// 关闭之前打开的提示框
layer.close(window.openTips);
// 如果找到匹配的元素
if(el.length){
// 移除所有layui-this类名
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
// 给父元素添加layui-this类名
$(el).parent().addClass("layui-this");
}
// 如果target属性值为_blank，则在新窗口中打开链接
if (target === '_blank') {
// 关闭加载动画
layer.close(loading);
// 在新窗口中打开链接
window.open(href, "_blank");
return false;
}
// 调用miniPage对象的hashChange方法，改变页面URL的哈希值
miniPage.hashChange(href);
// 设置左侧菜单的layuimini-page-add属性为yes
$('.layuimini-menu-left').attr('layuimini-page-add', 'yes');
// 关闭加载动画
layer.close(loading);
});
/**
* 在子页面上打开新窗口
*/
$('body').on('click', '[layuimini-content-href]', function () {
// 显示加载动画，设置2秒后自动关闭
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
// 获取点击元素的href、title和target属性值
var href = $(this).attr('layuimini-content-href'),
title = $(this).attr('data-title'),
target = $(this).attr('target');
// 如果href为空，则直接返回
if(!href) return;
// 保存当前点击的元素引用
var me = this;
// 查找左侧菜单中匹配的href元素
var el = $("[layuimini-href='"+href+"']",".layuimini-menu-left");
// 关闭之前打开的提示框
layer.close(window.openTips);
// 如果找到匹配的元素
if(el.length){
// 移除所有同级元素的'layui-this'类
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
// 给父元素添加'layui-this'类
$(el).parent().addClass("layui-this");
}
// 如果target属性为'_blank'，则在新窗口中打开链接
if (target === '_blank') {
// 关闭加载动画
parent.layer.close(loading);
// 在新窗口中打开链接
window.open(href, "_blank");
return false;
}
// 将页面标题存储到sessionStorage中
sessionStorage.setItem('layuimini_page_title', title);
// 调用hashChange方法更新页面内容
miniPage.hashChange(href);
// 关闭加载动画
parent.layer.close(loading);
});
/**
* 返回主页
*/
$('body').on('click', '.layuimini-back-home', function () {
// 当点击事件触发时，调用 miniPage 对象的 hashHome 方法
miniPage.hashHome();
});
},
/**
* 监听hash变化
* @returns {boolean}
*/
listenHash: function (options) {
// 初始化homeInfo选项，如果未定义则设置为空对象
options.homeInfo = options.homeInfo || {};
// 初始化multiModule选项，如果未定义则设置为false
options.multiModule = options.multiModule || false;
// 初始化listenSwichCallback选项，如果未定义则设置为空函数
options.listenSwichCallback = options.listenSwichCallback || function () {};
// 监听hash变化事件
window.onhashchange = function () {
// 获取当前hash值并去掉前缀'#/'
var href = location.hash.replace(/^#\//, '');
// 如果listenSwichCallback是函数，则调用它
if (typeof options.listenSwichCallback === 'function') {
options.listenSwichCallback();
}
// 根据hash值判断要渲染的页面
if (href === null || href === undefined || href === '') {
// 如果hash值为空，移除layui-this类并渲染首页
$("[layuimini-href]").parent().removeClass('layui-this');
miniPage.renderHome(options);
} else {
// 否则渲染指定页面
miniPage.renderPage(href, options);
}
// 检查菜单是否添加了新页面
if ($('.layuimini-menu-left').attr('layuimini-page-add') === 'yes') {
// 如果是，则重置属性为'no'
$('.layuimini-menu-left').attr('layuimini-page-add', 'no');
} else {
// 如果不是，重新定位菜单焦点
$("[layuimini-href]").parent().removeClass('layui-this');
if (options.multiModule) {
// 多模块情况下处理菜单切换
miniPage.listenSwitchMultiModule(href);
} else {
// 单模块情况下处理菜单切换
miniPage.listenSwitchSingleModule(href);
}
}
};
},

576
cff/miniTheme.js
Unescape View File

@ -1,576 +0,0 @@
layui.define(["jquery", "layer"], function (exports) {
// 获取jQuery对象
var $ = layui.$,
// 获取Layer对象
layer = layui.layer;
// 定义miniTheme对象
var miniTheme = {
/**
* 主题配置项
* @param bgcolorId
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
*/
config: function (bgcolorId) {
// 定义一个名为bgColorConfig的数组，用于存储背景颜色配置
var bgColorConfig = [
{
headerRightBg: '#ffffff', //头部右侧背景色
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
headerRightColorThis: '#565656', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1E9FFF', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#565656', //头部缩放按钮样式,
headerLogoBg: '#192027', //logo背景颜色,
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#28333E', //左侧菜单背景,
leftMenuBgThis: '#1E9FFF', //左侧菜单选中背景,
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
},
{
headerRightBg: '#23262e', //头部右侧背景色
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#23262e', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffa4d1', //头部右侧背景色
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#e694bd', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
},
{
headerRightBg: '#1aa094', //头部右侧背景色
headerRightBgThis: '#197971', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
},
{
headerRightBg: '#1e9fff', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#586473', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
},
{
headerRightBg: '#2D8CF0', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0069b7', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d09600', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d91f1f', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#772c6a', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
}
];
// 检查bgcolorId是否未定义
if (bgcolorId === undefined) {
// 如果bgcolorId未定义，返回整个背景颜色配置对象
return bgColorConfig;
} else {
// 如果bgcolorId已定义，返回对应ID的背景颜色配置
return bgColorConfig[bgcolorId];
}
}
},
/**
* 初始化
* @param options
*/
render: function (options) {
// 设置默认背景颜色选项，如果未定义则设为false
options.bgColorDefault = options.bgColorDefault || false;
// 设置监听选项，如果未定义则设为false
options.listen = options.listen || false;
// 从sessionStorage中获取背景颜色ID
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
// 如果背景颜色ID不存在或为空字符串，则使用默认背景颜色ID
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
bgcolorId = options.bgColorDefault;
}
// 构建主题CSS文件
miniTheme.buildThemeCss(bgcolorId);
// 如果需要监听，则调用监听方法
if (options.listen) miniTheme.listen(options);
},
/**
* 构建主题样式
* @param bgcolorId
* @returns {boolean}
*/
buildThemeCss: function (bgcolorId) {
// 检查是否提供了背景颜色ID，如果没有则返回false
if (!bgcolorId) {
return false;
}
// 获取指定ID的背景颜色配置数据
var bgcolorData = miniTheme.config(bgcolorId);
// 构建CSS样式字符串
// 定义一个包含CSS样式的字符串，用于设置头部右侧背景色
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
'.layui-layout-admin .layui-header {\n' +
// 使用bgcolorData对象中的headerRightBg属性值设置背景颜色，并添加!important确保优先级
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧选中背景色 headerRightBgThis */\n' +
// 选择器：匹配layui-layout-admin类下的layui-header内的layuimini-header-content的子元素ul中的layui-nav-item类和layui-this类，以及layuimini-tool内的i元素在悬停时
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
// 设置背景颜色为bgcolorData对象中的headerRightBgThis属性值，并添加!important以覆盖其他样式
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧字体颜色 headerRightColor */\n' +
// 选择器：.layui-layout-admin 下的 .layui-header 中的 .layui-nav 的 .layui-nav-item 内的 a 元素
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
// 设置字体颜色为 bgcolorData 对象中的 headerRightColor 属性值
' color: ' + bgcolorData.headerRightColor + ';\n' +
'}\n' +
'\n' +
/**头部右侧下拉字体颜色 headerRightChildColor */
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
// 设置下拉菜单中链接的字体颜色，使用 !important 确保优先级最高
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
'}\n' +
'\n' +
// 定义CSS样式，当鼠标悬停在头部右侧菜单项上时，改变其颜色
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this {\n' +
// 设置颜色为bgcolorData对象中的headerRightColorThis属性值，并使用!important确保优先级最高
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
'}\n' +
'\n' +
// 定义头部右侧更多下拉颜色样式
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
'.layui-header .layui-nav .layui-nav-more {\n' +
// 设置边框顶部颜色为指定的颜色，并使用!important确保优先级最高
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
/**头部右侧更多下拉颜色 headerRightNavMore */
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
// 设置边框颜色，上和左为透明，右和下为指定的颜色
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav .layui-nav-child dd.layui-this,\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a,\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this {\n' +
// 设置背景颜色为 headerRightNavMoreBg，并使用 !important 提升优先级
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
// 设置文字颜色为 headerRightNavMoreColor，并使用 !important 提升优先级
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
'}\n' +
'\n' +
// 定义头部缩放按钮样式，使用传入的headerRightToolColor颜色值
'/*头部缩放按钮样式 headerRightToolColor */\n' +
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
// 设置头部工具图标的颜色
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
'}\n' +
'\n' +
// 生成包含logo背景颜色的CSS样式字符串
'/*logo背景颜色 headerLogoBg */\n' +
'.layui-layout-admin .layuimini-logo {\n' +
// 设置logo的背景颜色，使用bgcolorData对象中的headerLogoBg属性值
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
'}\n' +
'\n' +
// 定义一个CSS样式规则，用于设置layui-layout-admin类下的layuimini-logo中的h1元素的字体颜色
'/*logo字体颜色 headerLogoColor */\n' +
'.layui-layout-admin .layuimini-logo h1 {\n' +
// 将h1元素的颜色设置为bgcolorData对象中的headerLogoColor属性值
' color: ' + bgcolorData.headerLogoColor + ';\n' +
'}\n' +
'\n' +
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
// 选择左侧菜单中的更多按钮，并设置其顶部边框颜色
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
// 使用变量bgcolorData.leftMenuNavMore的值来设置顶部边框颜色
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
'}\n' +
'\n' +
/** 左侧菜单更多下拉样式 leftMenuNavMore */
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav .layui-nav-itemed > a .layui-nav-more {\n' +
// 设置边框颜色，上和左为透明，右和下为指定背景色
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单背景 leftMenuBg */\n' +
// 设置左侧菜单的背景颜色为黑色，并应用到指定的元素上
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
// 使用变量bgcolorData中的leftMenuBg值作为背景颜色，并添加!important确保优先级
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
'}\n' +
'\n' +
// 左侧菜单选中背景样式定义
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
// 设置左侧菜单中当前选中项的背景颜色
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-this a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,\n' +
// 设置左侧菜单缩放状态下当前选中项的背景颜色
'.layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.lavueimini-tabactiveColoryt a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this {\n' +
// 应用背景颜色，并使用!important确保优先级最高
' background-color: ' + bgcolorData.leftMenuBgThis + '!important\n' +
'}\n' +
'\n' +
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
// 选择左侧菜单中已展开的父菜单项下的子菜单
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
// 设置子菜单的背景颜色，并使用!important确保优先级最高
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单字体颜色 leftMenuColor */\n' +
// 选择左侧菜单中的所有导航项链接，并设置其字体颜色为bgcolorData.leftMenuColor
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
// 使用!important确保颜色设置不会被其他CSS规则覆盖
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
'}\n' +
'\n' +
// 定义左侧菜单选中字体颜色样式
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
// 设置鼠标悬停或当前选中的菜单项字体颜色，并使用!important确保优先级最高
' color:' + bgcolorData.leftMenuColorThis + '!important;\n' +
'}\n' +
'\n' +
/**
* 设置tab选项卡选中颜色
* @param {string} bgcolorData.tabActiveColor - tab选项卡选中时的背景颜色
*/
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
// 设置背景颜色为传入的tabActiveColor值
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
'}\n';
//将生成的CSS样式插入到页面中
// 将styleHtml的内容插入到ID为'layuimini-bg-color'的元素中
$('#layuimini-bg-color').html(styleHtml);
/**
* 构建主题选择html
* @param options
* @returns {string}
*/
/**
* 构建背景颜色HTML字符串
* @param {Object} options - 配置选项对象
* @param {number} options.bgColorDefault - 默认背景颜色ID
* @returns {string} 生成的背景颜色HTML字符串
*/
buildBgColorHtml: function (options) {
// 如果未定义默认背景颜色ID，则设置为0
options.bgColorDefault = options.bgColorDefault || 0;
// 从sessionStorage中获取当前背景颜色ID
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
// 如果获取到的背景颜色ID不是数字，则使用默认背景颜色ID
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
// 获取背景颜色配置
var bgColorConfig = miniTheme.config();
// 初始化HTML字符串
var html = '';
// 遍历背景颜色配置
$.each(bgColorConfig, function (key, val) {
// 如果当前背景颜色ID与配置中的ID相同，添加选中样式
if (key === bgcolorId) {
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
} else {
html += '<li data-select-bgcolor="' + key + '">\n';
}
// 构建背景颜色HTML片段
// 开始构建HTML字符串，添加一个链接元素，并设置其属性和样式
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
// 添加第一个div元素，包含两个span子元素，用于显示头部背景颜色
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
// 添加第二个div元素，包含两个span子元素，用于显示左侧菜单背景颜色和右侧白色背景
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
// 关闭链接元素
'</a>\n' +
// 关闭列表项元素
'</li>';
});
// 返回生成的HTML字符串
return html;
},
/**
* 监听
* @param options
*/
listen: function (options) {
// 为body元素绑定点击事件，当点击带有data-bgcolor属性的元素时触发
$('body').on('click', '[data-bgcolor]', function () {
// 显示加载动画，设置加载时间为2秒
var loading = layer.load(0, {shade: false, time: 2 * 1000});
// 获取当前文档高度减去60像素的值
var clientHeight = (document.documentElement.clientHeight) - 60;
// 调用miniTheme对象的buildBgColorHtml方法生成背景颜色HTML代码
var bgColorHtml = miniTheme.buildBgColorHtml(options);
// 构建配色方案的HTML结构
// 定义一个包含HTML结构的字符串变量html
var html = '<div class="layuimini-color">\n' +
// 添加一个包含配色方案标题的div元素
'<div class="color-title">\n' +
// 在标题div中添加一个span元素，显示文本“配色方案”
'<span>配色方案</span>\n' +
'</div>\n' +
// 添加一个包含配色内容的div元素
'<div class="color-content">\n' +
// 在内容div中添加一个ul元素，用于存放背景颜色选项
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>' +
'</div>';
// 打开一个layer弹出层，显示配色方案选择器
layer.open({
type: 1, // 弹出层类型为页面层
title: false, // 不显示标题
closeBtn: 0, // 不显示关闭按钮
shade: 0.2, // 遮罩透明度
anim: 2, // 弹出动画效果
shadeClose: true, // 点击遮罩区域是否允许关闭
id: 'layuiminiBgColor', // 弹出层ID
area: ['340px', clientHeight + 'px'], // 弹出层宽高
offset: 'rb', // 弹出层位置，右下角
content: html, // 弹出层内容
success: function (index, layero) {
// 弹出层成功打开后的回调函数
},
end: function () {
// 弹出层关闭后的回调函数，移除选中的背景颜色样式
$('.layuimini-select-bgcolor').removeClass('layui-this');
}
});
// 关闭加载动画
layer.close(loading);
});
}
$('body').on('click', '[data-select-bgcolor]', function () {
// 获取点击元素的 data-select-bgcolor 属性值，作为背景颜色ID
var bgcolorId = $(this).attr('data-select-bgcolor');
// 移除当前选中的背景颜色样式类
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
// 为点击的元素添加选中的样式类
$(this).attr('class', 'layui-this');
// 将背景颜色ID存储到 sessionStorage 中，以便后续使用
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
// 调用 miniTheme.render 方法，更新主题背景颜色
miniTheme.render({
// 设置默认背景颜色为选中的背景颜色ID
bgColorDefault: bgcolorId,
// 不监听变化
listen: false,
});
});
}
};
// 导出名为 "miniTheme" 的模块，供其他文件使用
exports("miniTheme", miniTheme);
})
;

47
cff/miniTongji.js
Unescape View File

@ -1,47 +0,0 @@
layui.define(["jquery"], function (exports) {
// 引入jQuery库，并赋值给变量$
var $ = layui.$;
// 定义一个名为miniTongji的对象
var miniTongji = {
/**
* 初始化
* @param options
*/
render: function (options) {
// 设置 options.specific 的默认值为 false
options.specific = options.specific || false;
// 设置 options.domains 的默认值为空数组
options.domains = options.domains || [];
// 获取当前窗口的主机名
var domain = window.location.hostname;
// 如果 options.specific 为 false，或者 options.specific 为 true 且域名在 options.domains 中
if (options.specific === false || (options.specific === true && options.domains.indexOf(domain) >=0)) {
// 调用 miniTongji 对象的 listen 方法
miniTongji.listen();
}
},
/**
* 监听统计代码
*/
listen: function () {
// 定义一个变量_hmt，如果_hmt未定义则初始化为空数组
var _hmt = _hmt || [];
(function () {
// 创建一个新的script元素
var hm = document.createElement("script");
// 设置script元素的src属性为百度统计的脚本URL
hm.src = "https://hm.baidu.com/hm.js?d97abf6d61c21d773f97835defbdef4e";
// 获取文档中第一个script标签
var s = document.getElementsByTagName("script")[0];
// 将新创建的script元素插入到第一个script标签之前
s.parentNode.insertBefore(hm, s);
})();
}
};
// 导出名为 "miniTongji" 的函数，供其他模块使用
exports("miniTongji", miniTongji);
});

308
cff/treetable.js
Unescape View File

@ -1,308 +0,0 @@
layui.define(['layer', 'table'], function (exports) {
// 获取jQuery对象
var $ = layui.jquery;
// 获取layer模块
var layer = layui.layer;
// 获取table模块
var table = layui.table;
var treetable = {
// 渲染树形表格
render: function (param) {
// 检查参数是否合法
if (!treetable.checkParam(param)) {
return; // 如果参数不合法，直接返回
}
// 获取数据
if (param.data) {
// 如果参数中包含数据，则直接初始化树形表格
treetable.init(param, param.data);
} else {
// 如果参数中没有数据，则通过AJAX请求获取数据
$.getJSON(param.url, param.where, function (res) {
// 使用获取到的数据初始化树形表格
treetable.init(param, res.data);
});
}
},
// 渲染表格
init: function (param, data) {
// 初始化一个空数组，用于存储处理后的数据
var mData = [];
// 获取回调函数done
var doneCallback = param.done;
// 将传入的数据赋值给tNodes变量
var tNodes = data;
// 遍历tNodes数组中的每一个元素
for (var i = 0; i < tNodes.length; i++) {
// 当前遍历到的元素
var tt = tNodes[i];
// 如果当前元素没有id字段
if (!tt.id) {
// 如果参数中没有treeIdName字段
if (!param.treeIdName) {
// 弹出提示信息，告知treeIdName不能为空
layer.msg('参数treeIdName不能为空', {icon: 5});
// 终止函数执行
return;
}
// 使用treeIdName对应的值作为id
tt.id = tt[param.treeIdName];
}
// 检查tt对象是否具有pid属性
if (!tt.pid) {
// 如果param对象没有treePidName属性，则提示错误信息并返回
if (!param.treePidName) {
layer.msg('参数treePidName不能为空', {icon: 5});
return;
}
// 将tt对象的pid属性设置为tt对象中对应treePidName属性的值
tt.pid = tt[param.treePidName];
}
}
// 对数据进行排序
var sort = function (s_pid, data) {
// 遍历数据数组
for (var i = 0; i < data.length; i++) {
// 如果当前元素的父ID等于目标父ID
if (data[i].pid == s_pid) {
// 获取mData数组的长度
var len = mData.length;
// 如果mData数组不为空且最后一个元素的ID等于目标父ID
if (len > 0 && mData[len - 1].id == s_pid) {
// 将最后一个元素的isParent属性设置为true
mData[len - 1].isParent = true;
}
// 将当前元素添加到mData数组中
mData.push(data[i]);
// 递归调用sort函数，处理当前元素的子元素
sort(data[i].id, data);
}
}
};
}
};
// 调用sort函数，对树形结构进行排序
// 参数param.treeSpid表示树的根节点ID
// tNodes是包含所有节点信息的数组
sort(param.treeSpid, tNodes);
// 重写参数
// 将param对象的url属性设置为undefined
param.url = undefined;
// 将param对象的data属性设置为mData
param.data = mData;
// 设置param对象的page属性，包含count和limit两个子属性
param.page = {
// count属性表示数据的总数量，等于data数组的长度
count: param.data.length,
// limit属性表示每页显示的数据量，等于data数组的长度
limit: param.data.length
};
param.cols[0][param.treeColIndex].templet = function (d) {
// 获取当前节点的ID
var mId = d.id;
// 获取当前节点的父节点ID
var mPid = d.pid;
// 判断当前节点是否为目录（是否有子节点）
var isDir = d.isParent;
// 计算当前节点前面需要填充的空白数量
var emptyNum = treetable.getEmptyNum(mPid, mData);
// 初始化图标HTML字符串
var iconHtml = '';
// 根据空白数量生成相应数量的空白图标
for (var i = 0; i < emptyNum; i++) {
iconHtml += '<span class="treeTable-empty"></span>';
}
if (isDir) {
// 如果是目录，添加两个图标：一个三角形和一个图层图标
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
} else {
// 如果是文件，添加一个文件图标
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
}
// 添加两个空格作为间隔
iconHtml += '&nbsp;&nbsp;';
// 根据是否是目录设置类型为'dir'或'file'
var ttype = isDir ? 'dir' : 'file';
// 创建包含图标和名称的HTML字符串
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
// 返回完整的HTML字符串
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
param.done = function (res, curr, count) {
// 在当前元素之后插入一个带有'class'为'treeTable'的元素
$(param.elem).next().addClass('treeTable');
// 隐藏'treeTable'中的分页控件
$('.treeTable .layui-table-page').css('display', 'none');
// 设置'treeTable'元素的'treeLinkage'属性
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
// 注释掉的代码：绑定点击事件，用于切换行显示状态
/*$('.treeTable .treeTable-icon').click(function () {
treetable.toggleRows($(this), param.treeLinkage);
});*/
// 如果设置了默认关闭树形结构，则折叠所有节点
if (param.treeDefaultClose) {
treetable.foldAll(param.elem);
}
// 如果存在回调函数，则执行回调函数
if (doneCallback) {
doneCallback(res, curr, count);
}
};
// 渲染表格
table.render(param);
},
// 计算缩进的数量
getEmptyNum: function (pid, data) {
// 初始化缩进数量为0
var num = 0;
// 如果pid不存在，直接返回缩进数量0
if (!pid) {
return num;
}
var tPid;
// 遍历数据数组
for (var i = 0; i < data.length; i++) {
// 如果当前元素的id与pid匹配
if (pid == data[i].id) {
// 增加缩进数量
num += 1;
// 更新tPid为当前元素的父id
tPid = data[i].pid;
// 跳出循环
break;
}
}
return num + treetable.getEmptyNum(tPid, data);
},
// 展开/折叠行
toggleRows: function ($dom, linkage) {
// 获取当前行的树类型
var type = $dom.attr('lay-ttype');
// 如果当前行是文件类型，则直接返回
if ('file' == type) {
return;
}
// 获取当前行的ID
var mId = $dom.attr('lay-tid');
// 判断当前行是否已经展开
var isOpen = $dom.hasClass('open');
// 如果已经展开，则移除展开类，否则添加展开类
if (isOpen) {
$dom.removeClass('open');
} else {
$dom.addClass('open');
}
// 遍历当前行所在的tbody中的所有行
$dom.closest('tbody').find('tr').each(function () {
// 获取当前行的图标元素
var $ti = $(this).find('.treeTable-icon');
// 获取当前行的父ID和类型
var pid = $ti.attr('lay-tpid');
var ttype = $ti.attr('lay-ttype');
// 判断当前行的图标是否已经展开
var tOpen = $ti.hasClass('open');
// 如果当前行的父ID与目标ID相同
if (mId == pid) {
// 如果目标行已经展开，则隐藏当前行
if (isOpen) {
$(this).hide();
// 如果当前行是目录且已经展开，则触发点击事件
if ('dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
} else {
// 如果目标行未展开，则显示当前行
$(this).show();
// 如果需要联动展开且当前行是目录且已经展开，则触发点击事件
if (linkage && 'dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
}
}
});
},
// 检查参数
checkParam: function (param) {
// 检查参数param的treeSpid属性是否为空或未定义，如果是则弹出提示信息并返回false
if (!param.treeSpid && param.treeSpid != 0) {
layer.msg('参数treeSpid不能为空', {icon: 5});
return false;
}
// 检查参数param的treeColIndex属性是否为空或未定义，如果是则弹出提示信息并返回false
if (!param.treeColIndex && param.treeColIndex != 0) {
layer.msg('参数treeColIndex不能为空', {icon: 5});
return false;
}
// 如果所有检查都通过，则返回true
return true;
}
},
// 展开所有
expandAll: function (dom) {
// 获取传入的DOM元素，并找到其下一个具有'.treeTable'类的元素
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
// 在当前行中找到具有'.treeTable-icon'类的元素
var $ti = $(this).find('.treeTable-icon');
// 获取该元素的'lay-ttype'属性值
var ttype = $ti.attr('lay-ttype');
// 检查该元素是否具有'open'类
var tOpen = $ti.hasClass('open');
// 如果'lay-ttype'属性值为'dir'且没有'open'类，则触发点击事件
if ('dir' == ttype && !tOpen) {
$ti.trigger('click');
}
});
},
// 折叠所有
foldAll: function (dom) {
// 获取传入的DOM元素，并找到其下一个具有'.treeTable'类的元素
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
// 在当前行中找到具有'.treeTable-icon'类的元素
var $ti = $(this).find('.treeTable-icon');
// 获取该元素的'lay-ttype'属性值
var ttype = $ti.attr('lay-ttype');
// 检查该元素是否具有'open'类
var tOpen = $ti.hasClass('open');
// 如果'lay-ttype'属性值为'dir'且该元素具有'open'类
if ('dir' == ttype && tOpen) {
// 触发该元素的点击事件
$ti.trigger('click');
}
});
}
};
// 加载并链接外部CSS文件，用于树形表格的样式
layui.link(layui.cache.base + 'treetable-lay/treetable.css');
// 给图标列绑定事件
$('body').on('click', '.treeTable .treeTable-icon', function () {
// 获取当前点击的图标所在的树表元素的 treeLinkage 属性值
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
// 如果 treeLinkage 属性值为 'true'，则调用 treetable.toggleRows 方法并传入 true 参数
if ('true' == treeLinkage) {
treetable.toggleRows($(this), true);
} else {
// 否则调用 treetable.toggleRows 方法并传入 false 参数
treetable.toggleRows($(this), false);
}
});
});
// 导出名为 'treetable' 的模块，并将其赋值为 treetable 函数或对象
exports('treetable', treetable);
});

6148
cff/ztree.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save