add helper

src/components/code/index.js

@@ -0,0 +1,30 @@
+import Intact from 'intact';
+import template from './index.vdt';
+import hljs from 'highlight.js/lib/highlight';
+import stylus from 'highlight.js/lib/languages/stylus';
+import js from 'highlight.js/lib/languages/javascript';
+import html from 'highlight.js/lib/languages/xml';
+import 'highlight.js/styles/color-brewer.css';
+
+hljs.registerLanguage('stylus', stylus);
+hljs.registerLanguage('js', js);
+hljs.registerLanguage('html', html);
+
+export default class Code extends Intact {
+    @Intact.template()
+    static template = template; 
+
+    defaults() {
+        return {
+            language: 'stylus',
+        };
+    }
+
+    _mount() {
+        this.on('$changed:code', () => {
+            hljs.highlightBlock(this.refs.code);
+        });
+        hljs.highlightBlock(this.refs.code);
+    }
+}
+

src/components/code/index.vdt

@@ -0,0 +1,5 @@
+<pre>
+    <code ref="code" class={{ self.get('language') }}>
+        {{ self.get('code') }}
+    </code>
+</pre>

src/components/codePreview/index.js

@@ -1,29 +1,8 @@
 import Intact from 'intact';
 import template from './index.vdt';
 import './index.styl';
-import hljs from 'highlight.js/lib/highlight';
-import stylus from 'highlight.js/lib/languages/stylus';
-import 'highlight.js/styles/color-brewer.css';
-
-hljs.registerLanguage('stylus', stylus);
-
-class Code extends Intact {
-    @Intact.template()
-    static template = `<pre><code ref="code" class="stylus">{self.get('code')}</code></pre>`;
-
-    _mount() {
-        this.on('$changed:code', () => {
-            hljs.highlightBlock(this.refs.code);
-        });
-        hljs.highlightBlock(this.refs.code);
-    }
-}
 
 export default class CodePreview extends Intact {
     @Intact.template()
     static template = template;
-
-    _init() {
-        this.Code = Code;
-    }
 }

src/components/codePreview/index.vdt

@@ -1,6 +1,5 @@
-import {Split } from 'kpc';
-
-const Code = self.Code;
+import {Split} from 'kpc';
+import Code from '../code';
 
 <Split class="code-preview">
     <b:first>

src/components/usage/index.js

@@ -0,0 +1,16 @@
+import Dialog from 'kpc/components/dialog';
+import Intact from 'intact';
+import template from './index.vdt';
+import './index.styl';
+
+export default class extends Dialog {
+    @Intact.template()
+    static template = template;
+
+    defaults() {
+        return {
+            ...super.defaults(),
+            title: '使用说明',
+        };
+    }
+}

src/components/usage/index.styl

@@ -0,0 +1,8 @@
+.usage-dialog
+    .k-body
+        max-height 400px
+        overflow auto
+    .links
+        margin-left 16px
+        a
+            margin 0 8px

src/components/usage/index.vdt

@@ -0,0 +1,37 @@
+import Code from '../code';
+
+const link = `<!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/kpc/dist/kpc.css" /> -->
+<link rel="stylesheet" type="text/css" href="path/to/theme/index.css" />
+`
+const code = `const path = require('path');
+
+...
+{
+    loader: 'stylus-loader',
+    options: {
+        'include css': true,
+        'resolve url': true,
+        'import': path.resolve(__dirname, 'path/to/theme/index.styl')
+    }
+}
+`;
+
+<t:parent class="usage-dialog">
+    <b:header>
+        <span class="k-title">使用说明</span>
+        <span class="links">
+            详情请参考kpc文档
+            <a target="_blank" href="https://design.ksyun.com/docs/getting-started/">Intact</a> /
+            <a target="_blank" href="https://design.ksyun.com/docs/vue/">Vue</a> /
+            <a target="_blank" href="https://design.ksyun.com/docs/react/">React</a>
+        </span>
+    </b:header>
+    <b:body>
+        <h4>全量引入主题</h4> 
+        <p>如果你没有通过webpack编译打包，则可以全量引入主题样式，使用index.css替换掉kpc.css即可</p>
+        <Code language="html" code={{ link }} />
+        <h4>通过webpack stylus-loader引入主题</h4>
+        <p>如果你通过webpack编译打包，则可以配置stylus-loader来按需引入主题样式</p>
+        <Code language="js" code={{ code }} />
+    </b:body>
+</t:parent>

src/pages/index/index.js

@@ -109,4 +109,10 @@ export default class Index extends Intact {
     _download() {
         window.open(`/api/download?id=${this.get('id')}`);
     }
+
+    async _helper() {
+        const Dialog = await import('@/components/usage');
+        const dialog = new Dialog.default();
+        dialog.show();
+    }
 }

src/pages/index/index.vdt

@@ -21,6 +21,7 @@ import CodePreview from '@/components/codePreview';
             KPC主题定制工具
         </div>
         <div class="download">
+            <Button ghost type="none" ev-click={{ self._helper }}>帮助</Button>
             <Button ghost circle ev-click={{ self._download }} disabled={{ !self.get('id') }}>
                 <Icon size="large" class="ion-ios-cloud-download-outline" />
                 下载主题