增加单页应用的layui-admin

single/res/views/component/code/index.html

@@ -0,0 +1,237 @@
+<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>
+  </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">
+          <pre id="test" class="layui-test">
+            <textarea class="layui-hide">
+<div class="layui-btn-container">
+<button type="button" class="layui-btn">默认按钮</button>
+</div>
+
+<p class="layui-padding-3">
+AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
+</p>
+
+<div class="layui-btn-container">
+<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
+</div>
+<script type="text/html">
+<h3>{{= d.title }}</h3>
+<ul>
+{{#  layui.each(d.list, function(index, item){ }}
+<li>
+  <span>{{= item.modname }}</span>
+  <span>{{= item.alias }}：</span>
+  <span>{{= item.site || '' }}</span>
+</li>
+{{#  }); }}
+<p>{{#  if(d.list.length === 0){ }}
+无数据
+{{#  } }}</p>
+</ul>
+</script>
+<script>
+layui.use(function () {
+  var layer = layui.layer;
+  const a = '1'
+  function aa(a, b) {
+    return '11'
+  }
+  layer.msg(layui.v)
+})
+</script>
+            </textarea>
+          </pre>
+        </div>
+      </div>
+
+
+      <div class="layui-card">
+        <div class="layui-card-header">默认修饰</div>
+        <div class="layui-card-body">
+          <pre class="layui-code">// 在里面放置任意的文本内容
+test
+test
+          </pre>
+        </div>
+      </div>
+      
+      <div class="layui-card">
+        <div class="layui-card-header">深色模式</div>
+        <div class="layui-card-body">
+          <pre class="layui-code" lay-options="{title: 'Custom Title', skin: 'dark'}">// 在里面放置任意的文本内容
+test
+test
+          </pre>
+        </div>
+      </div>
+      
+      <div class="layui-card">
+        <div class="layui-card-header">固定高度</div>
+        <div class="layui-card-body">
+          <pre class="layui-code" lay-options="{height: '160px'}">// 在里面放置任意的文本内容
+test
+test
+test
+code line
+code line
+code line
+code line
+code line
+          </pre> 
+        </div>
+      </div>
+      
+      <div class="layui-card">
+        <div class="layui-card-header">不显示行号</div>
+        <div class="layui-card-body">
+          <pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
+test
+test
+          </pre>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+
+<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
+<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
+<script>
+layui.use(['code', 'dropdown'], function(){
+  var dropdown = layui.dropdown;
+  var $ = layui.$;
+
+  // return;
+
+  // 高亮主题 css 库
+  var themeData = $.map([
+    // hljs 主题库
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs2015.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github-dark.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-dark.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-light.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/monokai-sublime.min.css',
+    '-',
+    // prism 主题库
+    'https://cdn.staticfile.org/prism/1.29.0/themes/prism-dark.min.css',
+    'https://cdn.staticfile.org/prism/1.29.0/themes/prism.min.css'
+  ], function(v, index) {
+    return {
+      title: v,
+      link: v,
+      highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
+      type: v === '-' ? '-' : 'normal'
+    };
+  });
+
+  var codeInst = layui.code({
+    elem: '#test',
+    preview: true,
+    codeStyle: 'height: 510px;',
+    previewStyle: 'word-wrap: break-word;',
+    // theme: 'dark',
+    // header: true,
+    // wordWrap: false, // 是否自动换行
+    /*
+    lang: 'html',
+    highlighter: "hljs",
+    codeRender: function (code, opts) {
+      layui.link(themeData[1].link, 'layui-code-theme');
+      return hljs.highlight(code, {language: opts.lang}).value;
+    },*/
+    tools: [
+      'full',
+      {
+        title: ['文字换行'],
+        type: 'form',
+        event: function(obj) {
+          dropdown.render({
+            elem: obj.elem,
+            data: [{title: '自动换行', wordWrap: true}, {title: '不自动换行', wordWrap: false}],
+            show: true,
+            click: function(data, othis) {
+              codeInst.reload({
+                wordWrap: data.wordWrap
+              });
+            }
+          });
+        }
+      },
+      {
+        title: ['切换高亮主题'],
+        type: 'theme',
+        event: function(obj) {
+          dropdown.render({
+            elem: obj.elem,
+            data: themeData,
+            show: true,
+            click: function(data, othis) {
+              $('#layuicss-layui-code-theme').remove();
+              layui.link(data.link, 'layui-code-theme');
+
+              // 若高亮器有变化，则重载
+              if (data.highlighter !== codeInst.config.highlighter) {
+                var highlighter = {
+                  hljs: function(code, opts) {
+                    return hljs.highlight(code, {
+                      language: opts.lang
+                    }).value;
+                  },
+                  prism: function(code, opts) {
+                    return Prism.highlight(
+                      code,
+                      Prism.languages[opts.lang],
+                      opts.lang
+                    );
+                  }
+                };
+                // 重载
+                codeInst.reload({
+                  highlighter: data.highlighter,
+                  codeRender: function (code, opts) {
+                    return highlighter[data.highlighter](code, opts);
+                  }
+                });
+              }
+            }
+          });
+        }
+      }
+    ]
+  });
+
+  // 仅重载 code
+  layui.debounce(function() {
+    codeInst.reload({
+      lang: 'html',
+      highlighter: "hljs",
+      codeRender: function(code, opts) {
+        layui.link(themeData[1].link, 'layui-code-theme');
+        return hljs.highlight(code, {language: opts.lang}).value;
+      }
+    });
+  }, 300)();
+
+
+  // 通用实例，根据元素属性定制化参数
+  layui.code({
+    elem: '.layui-code'
+  });
+});
+</script>