增加单页应用的layui-admin

This commit is contained in:
2024-01-22 12:22:41 +08:00
parent acf64a0c71
commit 1b2929f32e
344 changed files with 21782 additions and 3 deletions

View File

@@ -0,0 +1,108 @@
<title>柱状图</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>高级</cite></a>
<a><cite>Echarts集成</cite></a>
<a><cite>柱状图</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">标准柱状图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-normcol">
<div carousel-item id="LAY-index-normcol">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">堆积柱状图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapcol">
<div carousel-item id="LAY-index-heapcol">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">不等距柱形图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-diffcol">
<div carousel-item id="LAY-index-diffcol">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">彩虹柱形图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-colorline">
<div carousel-item id="LAY-index-colorline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">标准条形图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-normbar">
<div carousel-item id="LAY-index-normbar">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">堆积条形图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapbar">
<div carousel-item id="LAY-index-heapbar">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">旋风条形图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-windline">
<div carousel-item id="LAY-index-windline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('senior', layui.factory('senior'));
</script>

View File

@@ -0,0 +1,97 @@
<title>折线图</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>高级</cite></a>
<a><cite>Echarts集成</cite></a>
<a><cite>折线图</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">标准折线图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-normline">
<div carousel-item id="LAY-index-normline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">堆积折线图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heapline">
<div carousel-item id="LAY-index-heapline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">不等距折线图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-diffline">
<div carousel-item id="LAY-index-diffline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">堆积面积图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-heaparea">
<div carousel-item id="LAY-index-heaparea">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">面积图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-area">
<div carousel-item id="LAY-index-area">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">对数轴</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-logline">
<div carousel-item id="LAY-index-logline">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('senior', layui.factory('senior'));
</script>

View File

@@ -0,0 +1,34 @@
<title>地图</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>高级</cite></a>
<a><cite>Echarts集成</cite></a>
<a><cite>地图</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-sm12">
<div class="layui-card">
<div class="layui-card-header">地图</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-plat">
<div carousel-item id="LAY-index-plat">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('senior', layui.factory('senior'));
</script>

View File

@@ -0,0 +1,474 @@
<title>社交聊天</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>高级</cite></a>
<a><cite>通讯系统</cite></a>
<a><cite>WebIM UI</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">面板外的操作示例</div>
<div class="layui-card-body">
<div class="layui-btn-container" id="LAY-layim-demo">
<button class="layui-btn layui-btn-primary" data-type="chat">自定义会话</button>
<button class="layui-btn layui-btn-primary" data-type="message">接受好友的消息</button>
<button class="layui-btn layui-btn-primary" data-type="messageAudio">接受音频消息</button>
<button class="layui-btn layui-btn-primary" data-type="messageVideo">接受视频消息</button>
<button class="layui-btn layui-btn-primary" data-type="messageTemp">接受临时会话消息</button>
<br>
<button class="layui-btn layui-btn-primary" data-type="add">申请好友</button>
<button class="layui-btn layui-btn-primary" data-type="addqun">申请加群</button>
<button class="layui-btn layui-btn-primary" data-type="addFriend">同意好友</button>
<button class="layui-btn layui-btn-primary" data-type="addGroup">增加群组到主面板</button>
<button class="layui-btn layui-btn-primary" data-type="removeFriend">删除主面板好友</button>
<button class="layui-btn layui-btn-primary" data-type="removeGroup">删除主面板群组</button>
<br>
<button class="layui-btn layui-btn-primary" data-type="setGray">置灰离线好友</button>
<button class="layui-btn layui-btn-primary" data-type="unGray">取消好友置灰</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.config({
layimPath: layui.cache.base + 'layim/', //配置 layim.js 所在目录
layimResPath: layui.cache.base + 'layim/res/' //layim 资源文件所在目录
}).use(['layim'], function(){
var layim = layui.layim;
// 演示自动回复
var autoReplay = [
'模拟消息 1',
'模拟消息 2',
'模拟消息 3',
'模拟消息 4',
'模拟消息 5',
'模拟消息 6',
'模拟消息 7',
'模拟消息 8',
'模拟消息 9'
];
//基础配置
layim.config({
//初始化接口
init: {
url: layui.setter.paths.base + 'json/layim/getList.js'
,data: {}
}
//查看群员接口
,members: {
url: layui.setter.paths.base + 'json/layim/getMembers.js'
,data: {}
}
//上传图片接口
,uploadImage: {
url: '' //(返回的数据格式见下文)
,type: '' //默认post
}
//上传文件接口
,uploadFile: {
url: '' //(返回的数据格式见下文)
,type: '' //默认post
}
,isAudio: true
,isVideo: true
//扩展工具栏
,tool: [{
alias: 'code'
,title: '代码'
,icon: '&#xe64e;'
}]
// 更多参数见 layim 文档
,msgbox: layui.cache.layimResPath + 'html/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可
,find: layui.cache.layimResPath + 'html/find.html' //发现页面地址,若不开启,剔除该项即可
,chatLog: layui.cache.layimResPath + 'html/chatLog.html' //聊天记录页面地址,若不开启,剔除该项即可
});
//事件 - 在线状态的切换事件
layim.on('online', function(data){
//console.log(data);
});
//事件 - 签名修改
layim.on('sign', function(value){
//console.log(value);
});
//事件 - 自定义工具栏点击,以添加代码为例
layim.on('tool(code)', function(insert){
layer.prompt({
title: '插入代码'
,formType: 2
,shade: 0
}, function(text, index){
layer.close(index);
insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
});
});
//事件 - layim建立就绪
layim.on('ready', function(res){
//console.log(res.mine);
layim.msgbox(5); //模拟消息盒子有新消息,实际使用时,一般是动态获得
// 向主面板添加群组
layim.addList({
type: 'group'
,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
,groupname: '前端开发'
,id: "12333333"
,members: 0
});
// 向主面板添加好友(如果检测到该 socket
layim.addList({
type: 'friend'
,avatar: layim.cache().base.defaultAvatar // 这里赋值默认头像,实际使用时请改成正式头像地址
,username: '测试222'
,groupid: 2
,id: "1233333312121212"
,remark: "remark"
});
setTimeout(function(){
//接受消息如果检测到该socket
//临时会话的消息,即消息发送者不在好友列表上
/*
layim.getMessage({
username: "Hi"
,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
,id: "10000111"
,type: "friend"
,cid: Math.random()*100000|0 //模拟消息id
,content: "临时:"+ new Date().getTime()
});*/
//好友的消息
layim.getMessage({
username: "测试1"
,avatar: ""
,id: "100001"
,type: "friend"
,cid: Math.random()*100000|0 //模拟消息 id会赋值在li的data-cid上以便完成一些消息的操作如撤回可不填
,content: "这是模拟接受的一段测试消息。标记:"+ new Date().getTime()
});
}, 1500);
});
//事件 - 发送消息
layim.on('sendMessage', function(data){
var To = data.to;
//console.log(data);
if(To.type === 'friend'){
layim.setChatStatus('<span style="color:#FF5722;">对方正在输入…</span>');
}
//演示自动回复
setTimeout(function(){
var obj = {};
if(To.type === 'group'){
obj = {
username: '模拟群员 ' +(Math.random()*100|0)
,avatar: layim.cache().base.defaultAvatar // 这里赋值默认头像,实际使用时请改成正式头像地址
,id: To.id
,type: To.type
,content: autoReplay[Math.random()*9|0]
}
} else {
obj = {
username: To.name
,avatar: To.avatar
,id: To.id
,type: To.type
,content: autoReplay[Math.random()*9|0]
}
layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
}
layim.getMessage(obj);
}, 1000);
});
//事件 - 查看群员
layim.on('members', function(data){
//console.log(data);
});
//事件 - 聊天窗口的切换
layim.on('chatChange', function(res){
var type = res.data.type;
//console.log(res.data.id)
if(type === 'friend'){
//模拟标注好友状态
//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
} else if(type === 'group'){
//模拟系统消息
layim.getMessage({
system: true
,id: res.data.id
,type: "group"
,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
});
}
});
//事件 - 更换背景
layim.on('setSkin', function(filename, src){
console.log(filename)
});
// 面板外的操作示例事件
layui.use('util', function(util){
util.on('data-type', {
chat: function(){
//自定义会话
layim.chat({
name: '小测试'
,type: 'friend'
,avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
,id: 1008612
});
layer.msg('即:会话对象不必非要在右下角主面板中');
}
,message: function(){
//制造好友消息
layim.getMessage({
username: "测试1"
,avatar: "//unpkg.com/outeres/demo/avatar/0.png"
,id: "100001"
,type: "friend"
,content: "这是一条测试内容。演示标记:"+ new Date().getTime()
,timestamp: new Date().getTime()
});
}
,messageAudio: function(){
//接受音频消息
layim.getMessage({
username: "测试1"
,avatar: "//unpkg.com/outeres/demo/avatar/0.png"
,id: "100001"
,type: "friend"
,content: "audio[//unpkg.com/outeres/audio/test.mp3]"
,timestamp: new Date().getTime()
});
}
,messageVideo: function(){
//接受视频消息
layim.getMessage({
username: "测试1"
,avatar: "//unpkg.com/outeres/demo/avatar/0.png"
,id: "100001"
,type: "friend"
,content: "video[http://www.w3school.com.cn//i/movie.ogg]"
,timestamp: new Date().getTime()
});
}
,messageTemp: function(){
//接受临时会话消息
layim.getMessage({
username: "测试X"
,avatar: "//unpkg.com/outeres/demo/avatar/0.png"
,id: "198909151014"
,type: "friend"
,content: "临时:"+ new Date().getTime()
});
}
,add: function(){
//实际使用时数据由动态获得
layim.add({
type: 'friend'
,username: '测试Y'
,avatar: '//unpkg.com/outeres/demo/avatar/0.png'
,submit: function(group, remark, index){
layer.msg('好友申请已发送,请等待对方确认', {
icon: 1
,shade: 0.5
}, function(){
layer.close(index);
});
//通知对方
/*
$.post('/im-applyFriend/', {
uid: info.uid
,from_group: group
,remark: remark
}, function(res){
if(res.status != 0){
return layer.msg(res.msg);
}
layer.msg('好友申请已发送,请等待对方确认', {
icon: 1
,shade: 0.5
}, function(){
layer.close(index);
});
});
*/
}
});
}
,addqun: function(){
layim.add({
type: 'group'
,username: '测试群组1'
,avatar: '//unpkg.com/outeres/demo/avatar/0.png'
,group: layim.cache().friend
,submit: function(group, remark, index){
layer.msg('申请已发送,请等待管理员确认', {
icon: 1
,shade: 0.5
}, function(){
layer.close(index);
});
//通知对方
/*
$.post('/im-applyGroup/', {
uid: info.uid
,from_group: group
,remark: remark
}, function(res){
});
*/
}
});
}
,addFriend: function(){
var user = {
type: 'friend'
,id: 1234560
,username: '测试A' //好友昵称若申请加群参数为groupname
,avatar: '//unpkg.com/outeres/demo/avatar/0.png' //头像
,sign: '测试内容'
}
layim.setFriendGroup({
type: user.type
,username: user.username
,avatar: user.avatar
,group: layim.cache().friend //获取好友列表数据
,submit: function(group, index){
//一般在此执行Ajax和WS以通知对方已经同意申请
//……
//同意后,将好友追加到主面板
layim.addList({
type: user.type
,username: user.username
,avatar: user.avatar
,groupid: group //所在的分组id
,id: user.id //好友ID
,sign: user.sign //好友签名
});
layer.close(index);
}
});
}
,addGroup: function(){
layer.msg('已成功把[测试群组33]添加到群组里', {
icon: 1
});
//增加一个群组
layim.addList({
type: 'group'
,avatar: "//unpkg.com/outeres/demo/avatar/0.png"
,groupname: '测试群组33'
,id: "12333333"
,members: 0
});
}
,removeFriend: function(){
layer.msg('已成功删除[测试2]', {
icon: 1
});
//删除一个好友
layim.removeList({
id: 100001222
,type: 'friend'
});
}
,removeGroup: function(){
layer.msg('已成功删除[测试群组33]', {
icon: 1
});
//删除一个群组
layim.removeList({
id: 12333333
,type: 'group'
});
}
//置灰离线好友
,setGray: function(){
layim.setFriendStatus(168168, 'offline');
layer.msg('已成功将好友[测试4]置灰', {
icon: 1
});
}
//取消好友置灰
,unGray: function(){
layim.setFriendStatus(168168, 'online');
layer.msg('成功取消好友[测试4]置灰状态', {
icon: 1
});
}
//移动端版本
,mobile: function(){
var device = layui.device();
var mobileHome = 'mobile.html';
if(device.android || device.ios){
return location.href = mobileHome;
}
var index = layer.open({
type: 2
,title: '移动版演示'
,content: mobileHome
,area: ['375px', '667px']
,shadeClose: true
,scrollbar: false
,shade: 0.8
,end: function(){
layer.close(index + 2);
}
});
}
});
});
});
</script>