feat(templates): 新增绿色主题模版，并设置为默认模版

和文档站点 docs.xxyopen.com 风格保持一致
2025-06-24 04:46:37 +00:00 · 2023-10-13 21:21:21 +08:00
parent 00179359bd
commit 255b3f8c4b
575 changed files with 72292 additions and 955 deletions
--- a/templates/green/static/layui/css/modules/layim/html/chatlog.html
+++ b/templates/green/static/layui/css/modules/layim/html/chatlog.html
@ -0,0 +1,96 @@
+ 
+ 
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>聊天记录</title>
+
+<link rel="stylesheet" href="http://local.res.layui.com/layui/src/css/layui.css">
+<style>
+body .layim-chat-main{height: auto;}
+</style>
+</head>
+<body>
+
+<div class="layim-chat-main">
+  <ul id="LAY_view"></ul>
+</div>
+
+<div id="LAY_page" style="margin: 0 10px;"></div>
+
+
+<textarea title="消息模版" id="LAY_tpl" style="display:none;">
+{{# layui.each(d.data, function(index, item){
+  if(item.id == parent.layui.layim.cache().mine.id){ }}
+    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
+  {{# } else { }}
+    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
+  {{# }
+}); }}
+</textarea>
+
+<!-- 
+上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html
+
+-->
+
+
+<script src="http://local.res.layui.com/layui/src/layui.js"></script>
+<script>
+layui.use(['layim', 'laypage'], function(){
+  var layim = layui.layim
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,$ = layui.jquery
+  ,laypage = layui.laypage;
+  
+  //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
+  
+  
+  //开始请求聊天记录
+  var param =  location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
+  
+  //实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
+  ,res = {
+    code: 0
+    ,msg: ''
+    ,data: [{
+      username: '纸飞机'
+      ,id: 100000
+      ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
+      ,timestamp: 1480897882000
+      ,content: 'face[抱抱] face[心] 你好啊小美女'
+    }, {
+      username: 'Z_子晴'
+      ,id: 108101
+      ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
+      ,timestamp: 1480897892000
+      ,content: '你没发错吧？face[微笑]'
+    },{
+      username: 'Z_子晴'
+      ,id: 108101
+      ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
+      ,timestamp: 1480897898000
+      ,content: '你是谁呀亲。。我爱的是贤心！我爱的是贤心！我爱的是贤心！重要的事情要说三遍~'
+    },{
+      username: 'Z_子晴'
+      ,id: 108101
+      ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
+      ,timestamp: 1480897908000
+      ,content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layui.js）：\n/css/modules/layim/html/chatlog.html'
+    }]
+  }
+  
+  //console.log(param)
+  
+  var html = laytpl(LAY_tpl.value).render({
+    data: res.data
+  });
+  $('#LAY_view').html(html);
+  
+});
+</script>
+</body>
+</html>