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

和文档站点 docs.xxyopen.com 风格保持一致

templates/green/static/layui/css/modules/code.css

@@ -0,0 +1,2 @@
+/** layui-v2.4.5 MIT License By https://www.layui.com */
+ html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}

templates/green/static/layui/css/modules/layer/default/layer.css

@@ -0,0 +1,919 @@
+/** layui-v2.4.5 MIT License By https://www.layui.com */
+.layui-layer-imgbar, .layui-layer-imgtit a, .layui-layer-tab .layui-layer-title span, .layui-layer-title {
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+html #layuicss-layer {
+    display: none;
+    position: absolute;
+    width: 1989px
+}
+
+.layui-layer, .layui-layer-shade {
+    position: fixed;
+    _position: absolute;
+    pointer-events: auto
+}
+
+.layui-layer-shade {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    _height: expression(document.body.offsetHeight+"px")
+}
+
+.layui-layer {
+    -webkit-overflow-scrolling: touch;
+    top: 150px;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    -webkit-background-clip: content;
+    border-radius: 2px;
+    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3)
+}
+
+.layui-layer-close {
+    position: absolute
+}
+
+.layui-layer-content {
+    position: relative
+}
+
+.layui-layer-border {
+    border: 1px solid #B2B2B2;
+    border: 1px solid rgba(0, 0, 0, .1);
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2)
+}
+
+.layui-layer-load {
+    background: url(loading-1.gif) center center no-repeat #eee
+}
+
+.layui-layer-ico {
+    background: url(icon.png) no-repeat
+}
+
+.layui-layer-btn a, .layui-layer-dialog .layui-layer-ico, .layui-layer-setwin a {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    vertical-align: top
+}
+
+.layui-layer-move {
+    display: none;
+    position: fixed;
+    *position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    cursor: move;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    background-color: #fff;
+    z-index: 2147483647
+}
+
+.layui-layer-resize {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize
+}
+
+.layer-anim {
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-duration: .3s;
+    animation-duration: .3s
+}
+
+@-webkit-keyframes layer-bounceIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.5);
+        transform: scale(.5)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+@keyframes layer-bounceIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.5);
+        -ms-transform: scale(.5);
+        transform: scale(.5)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+.layer-anim-00 {
+    -webkit-animation-name: layer-bounceIn;
+    animation-name: layer-bounceIn
+}
+
+@-webkit-keyframes layer-zoomInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.1) translateY(-2000px);
+        transform: scale(.1) translateY(-2000px);
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(.475) translateY(60px);
+        transform: scale(.475) translateY(60px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out
+    }
+}
+
+@keyframes layer-zoomInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.1) translateY(-2000px);
+        -ms-transform: scale(.1) translateY(-2000px);
+        transform: scale(.1) translateY(-2000px);
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(.475) translateY(60px);
+        -ms-transform: scale(.475) translateY(60px);
+        transform: scale(.475) translateY(60px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out
+    }
+}
+
+.layer-anim-01 {
+    -webkit-animation-name: layer-zoomInDown;
+    animation-name: layer-zoomInDown
+}
+
+@-webkit-keyframes layer-fadeInUpBig {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(2000px);
+        transform: translateY(2000px)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0)
+    }
+}
+
+@keyframes layer-fadeInUpBig {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(2000px);
+        -ms-transform: translateY(2000px);
+        transform: translateY(2000px)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        -ms-transform: translateY(0);
+        transform: translateY(0)
+    }
+}
+
+.layer-anim-02 {
+    -webkit-animation-name: layer-fadeInUpBig;
+    animation-name: layer-fadeInUpBig
+}
+
+@-webkit-keyframes layer-zoomInLeft {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.1) translateX(-2000px);
+        transform: scale(.1) translateX(-2000px);
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(.475) translateX(48px);
+        transform: scale(.475) translateX(48px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out
+    }
+}
+
+@keyframes layer-zoomInLeft {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(.1) translateX(-2000px);
+        -ms-transform: scale(.1) translateX(-2000px);
+        transform: scale(.1) translateX(-2000px);
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(.475) translateX(48px);
+        -ms-transform: scale(.475) translateX(48px);
+        transform: scale(.475) translateX(48px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out
+    }
+}
+
+.layer-anim-03 {
+    -webkit-animation-name: layer-zoomInLeft;
+    animation-name: layer-zoomInLeft
+}
+
+@-webkit-keyframes layer-rollIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(-100%) rotate(-120deg);
+        transform: translateX(-100%) rotate(-120deg)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateX(0) rotate(0);
+        transform: translateX(0) rotate(0)
+    }
+}
+
+@keyframes layer-rollIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(-100%) rotate(-120deg);
+        -ms-transform: translateX(-100%) rotate(-120deg);
+        transform: translateX(-100%) rotate(-120deg)
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translateX(0) rotate(0);
+        -ms-transform: translateX(0) rotate(0);
+        transform: translateX(0) rotate(0)
+    }
+}
+
+.layer-anim-04 {
+    -webkit-animation-name: layer-rollIn;
+    animation-name: layer-rollIn
+}
+
+@keyframes layer-fadeIn {
+    0% {
+        opacity: 0
+    }
+    100% {
+        opacity: 1
+    }
+}
+
+.layer-anim-05 {
+    -webkit-animation-name: layer-fadeIn;
+    animation-name: layer-fadeIn
+}
+
+@-webkit-keyframes layer-shake {
+    0%, 100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    10%, 30%, 50%, 70%, 90% {
+        -webkit-transform: translateX(-10px);
+        transform: translateX(-10px)
+    }
+    20%, 40%, 60%, 80% {
+        -webkit-transform: translateX(10px);
+        transform: translateX(10px)
+    }
+}
+
+@keyframes layer-shake {
+    0%, 100% {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0)
+    }
+    10%, 30%, 50%, 70%, 90% {
+        -webkit-transform: translateX(-10px);
+        -ms-transform: translateX(-10px);
+        transform: translateX(-10px)
+    }
+    20%, 40%, 60%, 80% {
+        -webkit-transform: translateX(10px);
+        -ms-transform: translateX(10px);
+        transform: translateX(10px)
+    }
+}
+
+.layer-anim-06 {
+    -webkit-animation-name: layer-shake;
+    animation-name: layer-shake
+}
+
+@-webkit-keyframes fadeIn {
+    0% {
+        opacity: 0
+    }
+    100% {
+        opacity: 1
+    }
+}
+
+.layui-layer-title {
+    padding: 0 80px 0 20px;
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #eee;
+    font-size: 14px;
+    color: #333;
+    overflow: hidden;
+    background-color: #F8F8F8;
+    border-radius: 2px 2px 0 0
+}
+
+.layui-layer-setwin {
+    position: absolute;
+    right: 15px;
+    *right: 0;
+    top: 15px;
+    font-size: 0;
+    line-height: initial
+}
+
+.layui-layer-setwin a {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+    font-size: 12px;
+    _overflow: hidden
+}
+
+.layui-layer-setwin .layui-layer-min cite {
+    position: absolute;
+    width: 14px;
+    height: 2px;
+    left: 0;
+    top: 50%;
+    margin-top: -1px;
+    background-color: #2E2D3C;
+    cursor: pointer;
+    _overflow: hidden
+}
+
+.layui-layer-setwin .layui-layer-min:hover cite {
+    background-color: #2D93CA
+}
+
+.layui-layer-setwin .layui-layer-max {
+    background-position: -32px -40px
+}
+
+.layui-layer-setwin .layui-layer-max:hover {
+    background-position: -16px -40px
+}
+
+.layui-layer-setwin .layui-layer-maxmin {
+    background-position: -65px -40px
+}
+
+.layui-layer-setwin .layui-layer-maxmin:hover {
+    background-position: -49px -40px
+}
+
+.layui-layer-setwin .layui-layer-close1 {
+    background-position: 1px -40px;
+    cursor: pointer
+}
+
+.layui-layer-setwin .layui-layer-close1:hover {
+    opacity: .7
+}
+
+.layui-layer-setwin .layui-layer-close2 {
+    position: absolute;
+    right: -28px;
+    top: -28px;
+    width: 30px;
+    height: 30px;
+    margin-left: 0;
+    background-position: -149px -31px;
+    *right: -18px;
+    _display: none
+}
+
+.layui-layer-setwin .layui-layer-close2:hover {
+    background-position: -180px -31px
+}
+
+.layui-layer-btn {
+    text-align: right;
+    padding: 0 15px 12px;
+    pointer-events: auto;
+    user-select: none;
+    -webkit-user-select: none
+}
+
+.layui-layer-btn a {
+    height: 28px;
+    line-height: 28px;
+    margin: 5px 5px 0;
+    padding: 0 15px;
+    border: 1px solid #dedede;
+    background-color: #fff;
+    color: #333;
+    border-radius: 2px;
+    font-weight: 400;
+    cursor: pointer;
+    text-decoration: none
+}
+
+.layui-layer-btn a:hover {
+    opacity: .9;
+    text-decoration: none
+}
+
+.layui-layer-btn a:active {
+    opacity: .8
+}
+
+.layui-layer-btn .layui-layer-btn0 {
+    border-color: #3eaf7c;
+    background-color: #3eaf7c;
+    color: #fff
+}
+
+.layui-layer-btn-l {
+    text-align: left
+}
+
+.layui-layer-btn-c {
+    text-align: center
+}
+
+.layui-layer-dialog {
+    min-width: 260px
+}
+
+.layui-layer-dialog .layui-layer-content {
+    position: relative;
+    padding: 20px;
+    line-height: 24px;
+    word-break: break-all;
+    overflow: hidden;
+    font-size: 14px;
+    overflow-x: hidden;
+    overflow-y: auto
+}
+
+.layui-layer-dialog .layui-layer-content .layui-layer-ico {
+    position: absolute;
+    top: 16px;
+    left: 15px;
+    _left: -40px;
+    width: 30px;
+    height: 30px
+}
+
+.layui-layer-ico1 {
+    background-position: -30px 0
+}
+
+.layui-layer-ico2 {
+    background-position: -60px 0
+}
+
+.layui-layer-ico3 {
+    background-position: -90px 0
+}
+
+.layui-layer-ico4 {
+    background-position: -120px 0
+}
+
+.layui-layer-ico5 {
+    background-position: -150px 0
+}
+
+.layui-layer-ico6 {
+    background-position: -180px 0
+}
+
+.layui-layer-rim {
+    border: 6px solid #8D8D8D;
+    border: 6px solid rgba(0, 0, 0, .3);
+    border-radius: 5px;
+    box-shadow: none
+}
+
+.layui-layer-msg {
+    min-width: 180px;
+    border: 1px solid #D3D4D3;
+    box-shadow: none
+}
+
+.layui-layer-hui {
+    min-width: 100px;
+    background-color: #000;
+    filter: alpha(opacity=60);
+    background-color: rgba(0, 0, 0, .6);
+    color: #fff;
+    border: none
+}
+
+.layui-layer-hui .layui-layer-content {
+    padding: 12px 25px;
+    text-align: center
+}
+
+.layui-layer-dialog .layui-layer-padding {
+    padding: 20px 20px 20px 55px;
+    text-align: left
+}
+
+.layui-layer-page .layui-layer-content {
+    position: relative;
+    overflow: auto
+}
+
+.layui-layer-iframe .layui-layer-btn, .layui-layer-page .layui-layer-btn {
+    padding-top: 10px
+}
+
+.layui-layer-nobg {
+    background: 0 0
+}
+
+.layui-layer-iframe iframe {
+    display: block;
+    width: 100%
+}
+
+.layui-layer-loading {
+    border-radius: 100%;
+    background: 0 0;
+    box-shadow: none;
+    border: none
+}
+
+.layui-layer-loading .layui-layer-content {
+    width: 60px;
+    height: 24px;
+    background: url(loading-0.gif) no-repeat
+}
+
+.layui-layer-loading .layui-layer-loading1 {
+    width: 37px;
+    height: 37px;
+    background: url(loading-1.gif) no-repeat
+}
+
+.layui-layer-ico16, .layui-layer-loading .layui-layer-loading2 {
+    width: 32px;
+    height: 32px;
+    background: url(loading-2.gif) no-repeat
+}
+
+.layui-layer-tips {
+    background: 0 0;
+    box-shadow: none;
+    border: none
+}
+
+.layui-layer-tips .layui-layer-content {
+    position: relative;
+    line-height: 22px;
+    min-width: 12px;
+    padding: 8px 15px;
+    font-size: 12px;
+    _float: left;
+    border-radius: 2px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
+    background-color: #000;
+    color: #fff
+}
+
+.layui-layer-tips .layui-layer-close {
+    right: -2px;
+    top: -1px
+}
+
+.layui-layer-tips i.layui-layer-TipsG {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-color: transparent;
+    border-style: dashed;
+    *overflow: hidden
+}
+
+.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {
+    left: 5px;
+    border-right-style: solid;
+    border-right-color: #000
+}
+
+.layui-layer-tips i.layui-layer-TipsT {
+    bottom: -8px
+}
+
+.layui-layer-tips i.layui-layer-TipsB {
+    top: -8px
+}
+
+.layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR {
+    top: 5px;
+    border-bottom-style: solid;
+    border-bottom-color: #000
+}
+
+.layui-layer-tips i.layui-layer-TipsR {
+    left: -8px
+}
+
+.layui-layer-tips i.layui-layer-TipsL {
+    right: -8px
+}
+
+.layui-layer-lan[type=dialog] {
+    min-width: 280px
+}
+
+.layui-layer-lan .layui-layer-title {
+    background: #4476A7;
+    color: #fff;
+    border: none
+}
+
+.layui-layer-lan .layui-layer-btn {
+    padding: 5px 10px 10px;
+    text-align: right;
+    border-top: 1px solid #E9E7E7
+}
+
+.layui-layer-lan .layui-layer-btn a {
+    background: #fff;
+    border-color: #E9E7E7;
+    color: #333
+}
+
+.layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
+    background: #C9C5C5
+}
+
+.layui-layer-molv .layui-layer-title {
+    background: #009f95;
+    color: #fff;
+    border: none
+}
+
+.layui-layer-molv .layui-layer-btn a {
+    background: #009f95;
+    border-color: #009f95
+}
+
+.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
+    background: #92B8B1
+}
+
+.layui-layer-iconext {
+    background: url(icon-ext.png) no-repeat
+}
+
+.layui-layer-prompt .layui-layer-input {
+    display: block;
+    width: 230px;
+    height: 36px;
+    margin: 0 auto;
+    line-height: 30px;
+    padding-left: 10px;
+    border: 1px solid #e6e6e6;
+    color: #333
+}
+
+.layui-layer-prompt textarea.layui-layer-input {
+    width: 300px;
+    height: 100px;
+    line-height: 20px;
+    padding: 6px 10px
+}
+
+.layui-layer-prompt .layui-layer-content {
+    padding: 20px
+}
+
+.layui-layer-prompt .layui-layer-btn {
+    padding-top: 0
+}
+
+.layui-layer-tab {
+    box-shadow: 1px 1px 50px rgba(0, 0, 0, .4)
+}
+
+.layui-layer-tab .layui-layer-title {
+    padding-left: 0;
+    overflow: visible
+}
+
+.layui-layer-tab .layui-layer-title span {
+    position: relative;
+    float: left;
+    min-width: 80px;
+    max-width: 260px;
+    padding: 0 20px;
+    text-align: center;
+    overflow: hidden;
+    cursor: pointer
+}
+
+.layui-layer-tab .layui-layer-title span.layui-this {
+    height: 43px;
+    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+    background-color: #fff;
+    z-index: 10
+}
+
+.layui-layer-tab .layui-layer-title span:first-child {
+    border-left: none
+}
+
+.layui-layer-tabmain {
+    line-height: 24px;
+    clear: both
+}
+
+.layui-layer-tabmain .layui-layer-tabli {
+    display: none
+}
+
+.layui-layer-tabmain .layui-layer-tabli.layui-this {
+    display: block
+}
+
+.layui-layer-photos {
+    -webkit-animation-duration: .8s;
+    animation-duration: .8s
+}
+
+.layui-layer-photos .layui-layer-content {
+    overflow: hidden;
+    text-align: center
+}
+
+.layui-layer-photos .layui-layer-phimg img {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    vertical-align: top
+}
+
+.layui-layer-imgbar, .layui-layer-imguide {
+    display: none
+}
+
+.layui-layer-imgnext, .layui-layer-imgprev {
+    position: absolute;
+    top: 50%;
+    width: 27px;
+    _width: 44px;
+    height: 44px;
+    margin-top: -22px;
+    outline: 0;
+    blr: expression(this.onFocus=this.blur())
+}
+
+.layui-layer-imgprev {
+    left: 10px;
+    background-position: -5px -5px;
+    _background-position: -70px -5px
+}
+
+.layui-layer-imgprev:hover {
+    background-position: -33px -5px;
+    _background-position: -120px -5px
+}
+
+.layui-layer-imgnext {
+    right: 10px;
+    _right: 8px;
+    background-position: -5px -50px;
+    _background-position: -70px -50px
+}
+
+.layui-layer-imgnext:hover {
+    background-position: -33px -50px;
+    _background-position: -120px -50px
+}
+
+.layui-layer-imgbar {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    background-color: rgba(0, 0, 0, .8);
+    background-color: #000 \9;
+    filter: Alpha(opacity=80);
+    color: #fff;
+    overflow: hidden;
+    font-size: 0
+}
+
+.layui-layer-imgtit * {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    vertical-align: top;
+    font-size: 12px
+}
+
+.layui-layer-imgtit a {
+    max-width: 65%;
+    overflow: hidden;
+    color: #fff
+}
+
+.layui-layer-imgtit a:hover {
+    color: #fff;
+    text-decoration: underline
+}
+
+.layui-layer-imgtit em {
+    padding-left: 10px;
+    font-style: normal
+}
+
+@-webkit-keyframes layer-bounceOut {
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(.7);
+        transform: scale(.7)
+    }
+    30% {
+        -webkit-transform: scale(1.05);
+        transform: scale(1.05)
+    }
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+@keyframes layer-bounceOut {
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(.7);
+        -ms-transform: scale(.7);
+        transform: scale(.7)
+    }
+    30% {
+        -webkit-transform: scale(1.05);
+        -ms-transform: scale(1.05);
+        transform: scale(1.05)
+    }
+    0% {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+.layer-anim-close {
+    -webkit-animation-name: layer-bounceOut;
+    animation-name: layer-bounceOut;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-duration: .2s;
+    animation-duration: .2s
+}
+
+@media screen and (max-width: 1100px) {
+    .layui-layer-iframe {
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}

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>

templates/green/static/layui/css/modules/layim/html/find.html

@@ -0,0 +1,38 @@
+ 
+ 
+<!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>
+
+</style>
+</head>
+<body>
+
+<div style="margin: 15px;">
+  <blockquote class="layui-elem-quote">此为自定义的【查找】页面，因需求不一，所以官方暂不提供该模版结构与样式，实际使用时，可移至该文件到你的项目中，对页面自行把控。
+  <br>文件所在目录（相对于layui.js）：/css/modules/layim/html/find.html</blockquote>
+</div>
+
+
+
+<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;
+  
+  //一些添加好友请求之类的交互参见文档
+  
+});
+</script>
+</body>
+</html>

templates/green/static/layui/css/modules/layim/html/getmsg.json

@@ -0,0 +1,87 @@
+{
+    "code": 0,
+    "pages": 1,
+    "data": [
+        {
+            "id": 76,
+            "content": "申请添加你为好友",
+            "uid": 168,
+            "from": 166488,
+            "from_group": 0,
+            "type": 1,
+            "remark": "有问题要问",
+            "href": null,
+            "read": 1,
+            "time": "刚刚",
+            "user": {
+                "id": 166488,
+                "avatar": "http://q.qlogo.cn/qqapp/101235792/B704597964F9BD0DB648292D1B09F7E8/100",
+                "username": "李彦宏",
+                "sign": null
+            }
+        },
+        {
+            "id": 75,
+            "content": "申请添加你为好友",
+            "uid": 168,
+            "from": 347592,
+            "from_group": 0,
+            "type": 1,
+            "remark": "你好啊！",
+            "href": null,
+            "read": 1,
+            "time": "刚刚",
+            "user": {
+                "id": 347592,
+                "avatar": "http://q.qlogo.cn/qqapp/101235792/B78751375E0531675B1272AD994BA875/100",
+                "username": "麻花疼",
+                "sign": null
+            }
+        },
+        {
+            "id": 62,
+            "content": "雷军 拒绝了你的好友申请",
+            "uid": 168,
+            "from": null,
+            "from_group": null,
+            "type": 1,
+            "remark": null,
+            "href": null,
+            "read": 1,
+            "time": "10天前",
+            "user": {
+                "id": null
+            }
+        },
+        {
+            "id": 60,
+            "content": "马小云 已经同意你的好友申请",
+            "uid": 168,
+            "from": null,
+            "from_group": null,
+            "type": 1,
+            "remark": null,
+            "href": null,
+            "read": 1,
+            "time": "10天前",
+            "user": {
+                "id": null
+            }
+        },
+        {
+            "id": 61,
+            "content": "贤心 已经同意你的好友申请",
+            "uid": 168,
+            "from": null,
+            "from_group": null,
+            "type": 1,
+            "remark": null,
+            "href": null,
+            "read": 1,
+            "time": "10天前",
+            "user": {
+                "id": null
+            }
+        }
+    ]
+}

templates/green/static/layui/css/modules/layim/html/msgbox.html

@@ -0,0 +1,208 @@
+ 
+ 
+<!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="../../../layui.css?v=1">
+<style>
+.layim-msgbox{margin: 15px;}
+.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
+.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
+.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
+.layim-msgbox li p span{padding-left: 5px; color: #999;}
+.layim-msgbox li p em{font-style: normal; color: #FF5722;}
+
+.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
+.layim-msgbox-user{padding-top: 5px;}
+.layim-msgbox-content{margin-top: 3px;}
+.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
+.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
+</style>
+</head>
+<body>
+
+<ul class="layim-msgbox" id="LAY_view"></ul>
+
+<div style="margin: 0 15px;">
+  <blockquote class="layui-elem-quote">注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。
+  <br>该模版文件所在目录（相对于layui.js）：/css/modules/layim/html/msgbox.html</blockquote>
+</div>
+
+<textarea title="消息模版" id="LAY_tpl" style="display:none;">
+{{# layui.each(d.data, function(index, item){
+  if(item.from){ }}
+    <li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
+      <a href="/u/{{ item.from }}/" >
+        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
+      </a>
+      <p class="layim-msgbox-user">
+        <a href="/u/{{ item.from }}/" >{{ item.user.username||'' }}</a>
+        <span>{{ item.time }}</span>
+      </p>
+      <p class="layim-msgbox-content">
+        {{ item.content }} 
+        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
+      </p>
+      <p class="layim-msgbox-btn">
+        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
+        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
+      </p>
+    </li>
+  {{# } else { }}
+    <li class="layim-msgbox-system">
+      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
+    </li>
+  {{# }
+}); }}
+</textarea>
+
+<!-- 
+上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html 
+-->
+
+
+<script src="../../../../layui.js?v=1"></script>
+<script>
+layui.use(['layim', 'flow'], function(){
+  var layim = layui.layim
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,$ = layui.jquery
+  ,flow = layui.flow;
+
+  var cache = {}; //用于临时记录请求到的数据
+
+  //请求消息
+  var renderMsg = function(page, callback){
+    
+    //实际部署时，请将下述 getmsg.json 改为你的接口地址
+    
+    $.get('getmsg.json', {
+      page: page || 1
+    }, function(res){
+      if(res.code != 0){
+        return layer.msg(res.msg);
+      }
+
+      //记录来源用户信息
+      layui.each(res.data, function(index, item){
+        cache[item.from] = item.user;
+      });
+
+      callback && callback(res.data, res.pages);
+    });
+  };
+
+  //消息信息流
+  flow.load({
+    elem: '#LAY_view' //流加载容器
+    ,isAuto: false
+    ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
+    ,done: function(page, next){ //加载下一页
+      renderMsg(page, function(data, pages){
+        var html = laytpl(LAY_tpl.value).render({
+          data: data
+          ,page: page
+        });
+        next(html, page < pages);
+      });
+    }
+  });
+
+  //打开页面即把消息标记为已读
+  /*
+  $.post('/message/read', {
+    type: 1
+  });
+  */
+
+  //操作
+  var active = {
+    //同意
+    agree: function(othis){
+      var li = othis.parents('li')
+      ,uid = li.data('uid')
+      ,from_group = li.data('fromGroup')
+      ,user = cache[uid];
+
+      //选择分组
+      parent.layui.layim.setFriendGroup({
+        type: 'friend'
+        ,username: user.username
+        ,avatar: user.avatar
+        ,group: parent.layui.layim.cache().friend //获取好友分组数据
+        ,submit: function(group, index){
+          
+          //将好友追加到主面板
+          parent.layui.layim.addList({
+            type: 'friend'
+            ,avatar: user.avatar //好友头像
+            ,username: user.username //好友昵称
+            ,groupid: group //所在的分组id
+            ,id: uid //好友ID
+            ,sign: user.sign //好友签名
+          });
+          parent.layer.close(index);
+          othis.parent().html('已同意');
+        
+        
+          //实际部署时，请开启下述注释，并改成你的接口地址
+          /*
+          $.post('/im/agreeFriend', {
+            uid: uid //对方用户ID
+            ,from_group: from_group //对方设定的好友分组
+            ,group: group //我设定的好友分组
+          }, function(res){
+            if(res.code != 0){
+              return layer.msg(res.msg);
+            }
+
+            //将好友追加到主面板
+            parent.layui.layim.addList({
+              type: 'friend'
+              ,avatar: user.avatar //好友头像
+              ,username: user.username //好友昵称
+              ,groupid: group //所在的分组id
+              ,id: uid //好友ID
+              ,sign: user.sign //好友签名
+            });
+            parent.layer.close(index);
+            othis.parent().html('已同意');
+          });
+          */
+          
+        }
+      });
+    }
+
+    //拒绝
+    ,refuse: function(othis){
+      var li = othis.parents('li')
+      ,uid = li.data('uid');
+
+      layer.confirm('确定拒绝吗？', function(index){
+        $.post('/im/refuseFriend', {
+          uid: uid //对方用户ID
+        }, function(res){
+          if(res.code != 0){
+            return layer.msg(res.msg);
+          }
+          layer.close(index);
+          othis.parent().html('<em>已拒绝</em>');
+        });
+      });
+    }
+  };
+
+  $('body').on('click', '.layui-btn', function(){
+    var othis = $(this), type = othis.data('type');
+    active[type] ? active[type].call(this, othis) : '';
+  });
+});
+</script>
+</body>
+</html>