| <link rel="stylesheet" href="https://lib.baomitu.com/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css"> |
| <link rel="stylesheet" href="https://lib.baomitu.com/highlight.js/9.16.2/styles/default.min.css"> |
| <link rel="stylesheet" href="https://lib.baomitu.com/highlight.js/9.16.2/styles/github.min.css"> |
| <link rel="stylesheet" href="./theme-builder/main.css"> |
| |
| <div id="theme-builder"> |
| <div class="container-fluid" id="content"> |
| <div class="row scroll-parent"> |
| <div class="col-md-3 col-sm-4 theme-config"> |
| |
| <div id="acc-port" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-port" href="#acc-port-body">功能</a> |
| </h4> |
| </div> |
| <div id="acc-port-body" class="panel-collapse collapse in"> |
| <div class="panel-body"> |
| <div class="port-row"> |
| <input type="file" @change="importFileChanged" id="input-file" style="display: none" /> |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-primary" data-target="#download-js-modal" data-toggle="modal" @click="useTheme()"> |
| <span class="glyphicon glyphicon-download-alt"></span> |
| 下载主题 |
| </button> |
| <button type="button" class="btn btn-default" @click="importJson()"> |
| <span class="glyphicon glyphicon-import"></span> |
| 导入配置 |
| </button> |
| <button type="button" class="btn btn-default" @click="exportJson()"> |
| <span class="glyphicon glyphicon-export"></span> |
| 导出配置 |
| </button> |
| </div> |
| </div> |
| <div class="port-row"> |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-default" @click="updateCharts(true)"> |
| <span class="glyphicon glyphicon-refresh"></span> |
| 刷新 |
| </button> |
| <button type="button" class="btn btn-default" @click="newTheme()"> |
| <span class="glyphicon glyphicon-repeat"></span> |
| 复原 |
| </button> |
| <button class="btn btn-default" data-toggle="modal" data-target="#download-modal"> |
| <span class="glyphicon glyphicon-question-sign"></span> |
| 帮助 |
| </button> |
| </div> |
| </div> |
| <form class="form form-horizontal"> |
| <div class="form-group"> |
| <label class="col-sm-3 control-label">主题名称</label> |
| <div class="col-sm-9"> |
| <input class="form-control" v-model="themeName" /> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label class="col-sm-3 control-label">系列数量</label> |
| <div class="col-sm-9"> |
| <input type="number" class="form-control" v-model="theme.seriesCnt" /> |
| </div> |
| </div> |
| </form> |
| <form class="form-horizontal"> |
| <hr /> |
| <h5>默认方案</h5> |
| <div class="row theme-plan-row"> |
| <div class="col-xs-6" v-for="group in preDefinedThemes"> |
| <a class="theme-plan-group"@click="selectPreDefinedTheme($index)" v-bind:style="{ backgroundColor: group.background }" title="{{ group.name }}"> |
| <div class="theme-plan-color" v-for="color in group.theme" v-bind:style="{ backgroundColor: color }"> |
| </div> |
| </a> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-port --> |
| |
| <div id="acc-theme" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-theme" href="#acc-theme-body">基本配置</a> |
| </h4> |
| </div> |
| <div id="acc-theme-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color title="背景" :color.sync="theme.backgroundColor"></config-color> |
| <config-color title="标题" :color.sync="theme.titleColor"></config-color> |
| <config-color title="副标题" :color.sync="theme.subtitleColor"></config-color> |
| <config-color-list title="主题" :colors.sync="theme.color"></config-color-list> |
| <config-color title="标签文字" :color.sync="theme.markTextColor"></config-color> |
| <config-number title="描边粗细" :value.sync="theme.borderWidth"></config-number> |
| <config-color title="描边" :color.sync="theme.borderColor"></config-color> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-theme --> |
| |
| <div id="acc-visualmap" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-visualmap" href="#acc-visualmap-body">视觉映射</a> |
| </h4> |
| </div> |
| <div id="acc-visualmap-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color-list title="视觉映射" :colors.sync="theme.visualMapColor"></config-color-list> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-visualmap --> |
| |
| <div id="acc-axis" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-axis" href="#acc-axis-body">坐标轴</a> |
| </h4> |
| </div> |
| <div id="acc-axis-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <div class="form-group"> |
| <div class="col-sm-12"> |
| <input v-model="theme.axisSeperateSetting" @change="axisSeperateSettingChanges()" type="checkbox" id="axisSeperateSetting" /> |
| <label for="axisSeperateSetting" class="control-label">为不同类型坐标轴分别设置</label> |
| </div> |
| </div> |
| <div class="axis-group" v-for="axis in theme.axis" v-if="$index > 0 || !theme.axisSeperateSetting"> |
| <h5 v-if="axis.type !== 'all'">{{ axis.name }}</h5> |
| <config-color can-disable :enabled.sync="axis.axisLineShow" title="轴线" :color.sync="axis.axisLineColor"></config-color> |
| <config-color can-disable :enabled.sync="axis.axisTickShow" title="刻度" :color.sync="axis.axisTickColor"></config-color> |
| <config-color-list can-disable :enabled.sync="axis.splitLineShow" title="网格" :colors.sync="axis.splitLineColor"></config-color-list> |
| <config-color-list can-disable :enabled.sync="axis.splitAreaShow" title="填充" :colors.sync="axis.splitAreaColor"></config-color-list> |
| <config-color can-disable :enabled.sync="axis.axisLabelShow" title="文字" :color.sync="axis.axisLabelColor"></config-color> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-axis --> |
| |
| <div id="acc-legend" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-legend" href="#acc-legend-body" title="legend">图例</a> |
| </h4> |
| </div> |
| <div id="acc-legend-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color :color.sync="theme.legendTextColor" title="文字"></config-color> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-legend --> |
| |
| <div id="acc-toolbox" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-toolbox" href="#acc-toolbox-body" title="toolbox">工具箱</a> |
| </h4> |
| </div> |
| <div id="acc-toolbox-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color :color.sync="theme.toolboxColor" title="图标"></config-color> |
| <config-color :color.sync="theme.toolboxEmphasisColor" title="悬停"></config-color> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-toolbox --> |
| |
| <div id="acc-tooltip" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-tooltip" href="#acc-tooltip-body" title="tooltip">提示框</a> |
| </h4> |
| </div> |
| <div id="acc-tooltip-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color :color.sync="theme.tooltipAxisColor" title="指示线"></config-color> |
| <config-number :value.sync="theme.tooltipAxisWidth" title="宽度"></config-number> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-tooltip --> |
| |
| <div id="acc-timeline" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-timeline" href="#acc-timeline-body" title="tooltip">时间轴</a> |
| </h4> |
| </div> |
| <div id="acc-timeline-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color title="标记" :color.sync="theme.timelineItemColor"></config-color> |
| <config-color title="标记悬停" :color.sync="theme.timelineItemColorE"></config-color> |
| <config-color title="标记选中" :color.sync="theme.timelineCheckColor"></config-color> |
| <config-color title="标记选中描边" :color.sync="theme.timelineCheckBorderColor"></config-color> |
| <config-number title="标记描边" :value.sync="theme.timelineItemBorderWidth"></config-number> |
| <config-color title="主轴" :color.sync="theme.timelineLineColor"></config-color> |
| <config-number title="主轴宽度" :value.sync="theme.timelineLineWidth"></config-number> |
| <config-color title="控件填充" :color.sync="theme.timelineControlColor"></config-color> |
| <config-color title="控件描边" :color.sync="theme.timelineControlBorderColor"></config-color> |
| <config-number title="控件描边宽度" :value.sync="theme.timelineControlBorderWidth"></config-number> |
| <config-color title="文字" :color.sync="theme.timelineLabelColor"></config-color> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-timeline --> |
| |
| <!-- <div id="acc-datazoom" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-datazoom" href="#acc-datazoom-body" title="tooltip">数据缩放</a> |
| </h4> |
| </div> |
| <div id="acc-datazoom-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color title="背景" :color.sync="theme.datazoomBackgroundColor"></config-color> |
| <config-color title="数据背景" :color.sync="theme.datazoomDataColor"></config-color> |
| <config-color title="填充" :color.sync="theme.datazoomFillColor"></config-color> |
| <config-color title="控制手柄" :color.sync="theme.datazoomHandleColor"></config-color> |
| <config-number title="控制手柄大小" :value.sync="theme.datazoomHandleWidth"></config-number> |
| <config-color title="文字" :color.sync="theme.datazoomLabelColor"></config-color> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> --> |
| <!-- end of acc-datazoom --> |
| |
| <div id="acc-line" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-line" href="#acc-line-body" title="line">折线图</a> |
| </h4> |
| </div> |
| <div id="acc-line-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <div class="form-group"> |
| <div class="col-sm-12"> |
| <input type="checkbox" v-model="theme.lineSmooth" id="lineSmooth" /> |
| <label for="lineSmooth" class="control-label" title="smooth">平滑曲线</label> |
| </div> |
| </div> |
| <config-number title="线条宽度" :value.sync="theme.lineWidth"></config-number> |
| <config-number title="图形描边" :value.sync="theme.symbolBorderWidth"></config-number> |
| <config-number title="图形大小" :value.sync="theme.symbolSize"></config-number> |
| <div class="form-group"> |
| <div class="col-sm-3"> |
| <label class="control-label">图形形状</label> |
| </div> |
| <div class="col-sm-12"> |
| <div class="row space-row"> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolCircle" value="circle" @change="updateSymbol('circle')" /> |
| <label for="symbolCircle">圆形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolCircleE" value="circle" checked @change="updateSymbol('emptyCircle')" /> |
| <label for="symbolCircleE">空心圆形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolRect" value="rect" @change="updateSymbol('rect')" /> |
| <label for="symbolRect">方形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolRectE" value="rect" @change="updateSymbol('emptyRect')" /> |
| <label for="symbolRectE">空心方形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolRoundRect" value="roundRect" @change="updateSymbol('roundRect')" /> |
| <label for="symbolRoundRect">圆角矩形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolRoundRectE" value="roundRect" @change="updateSymbol('emptyRoundRect')" /> |
| <label for="symbolRoundRectE">空心圆角矩形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolTri" value="triangle" @change="updateSymbol('triangle')" /> |
| <label for="symbolTri">三角形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolTriE" value="triangle" @change="updateSymbol('emptyTriangle')" /> |
| <label for="symbolTriE">空心三角形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolDiamond" value="diamond" @change="updateSymbol('diamond')" /> |
| <label for="symbolDiamond">菱形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolDiamondE" value="diamond" @change="updateSymbol('emptyDiamond')" /> |
| <label for="symbolDiamondE">空心菱形</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" /> |
| <label for="symbolPin">水滴</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" /> |
| <label for="symbolPinE">空心水滴</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" /> |
| <label for="symbolArrow">箭头</label> |
| </div> |
| <div class="col-sm-6"> |
| <input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" /> |
| <label for="symbolArrowE">空心箭头</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-line --> |
| |
| <div id="acc-k" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-k" href="#acc-k-body" title="k">K 线图</a> |
| </h4> |
| </div> |
| <div id="acc-k-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color title="阳线填充" :color.sync="theme.kColor"></config-color> |
| <config-color title="阴线填充" :color.sync="theme.kColor0"></config-color> |
| <config-color title="阳线描边" :color.sync="theme.kBorderColor"></config-color> |
| <config-color title="阴线描边" :color.sync="theme.kBorderColor0"></config-color> |
| <config-number title="描边宽度" :value.sync="theme.kBorderWidth"></config-number> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-k --> |
| |
| <div id="acc-graph" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-graph" href="#acc-graph-body" title="graph">力导图</a> |
| </h4> |
| </div> |
| <div id="acc-graph-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| <form class="form-horizontal"> |
| <config-color title="连线" :color.sync="theme.graphLineColor"></config-color> |
| <config-number title="连线宽度" :value.sync="theme.graphLineWidth"></config-number> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-graph --> |
| |
| <div id="acc-about" class="panel-group"> |
| <div class="panel panel-default"> |
| <div class="panel-heading"> |
| <h4 class="panel-title"> |
| <a data-toggle="collapse" data-parent="#acc-about" href="#acc-about-body" title="graph">关于</a> |
| </h4> |
| </div> |
| <div id="acc-about-body" class="panel-collapse collapse"> |
| <div class="panel-body"> |
| 项目源码：<a href="https://github.com/Ovilia/ECharts-Theme-Builder" target="_blank">GitHub</a> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of acc-about --> |
| |
| </div><!-- end of left --> |
| |
| <div class="col-md-9 col-sm-8 chart-container scroll-content" |
| v-bind:style="{ backgroundColor: chartDisplay.background, backgroundImage: themeName == 'halloween' ? 'url(img/pumpkin.png)' : 'none'}"> |
| |
| <h3 v-bind:style="{ color: chartDisplay.title }">示例预览</h3> |
| |
| <div class="row"> |
| <div v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12]" class="ec-container col-md-6"> |
| <div class="ec-panel"></div> |
| </div> |
| </div> |
| </div><!-- end of chart panel --> |
| |
| </div> |
| |
| <div class="modal fade" id="download-modal" tabindex="-1" role="dialog"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <h4 class="modal-title">帮助</h4> |
| </div> |
| <div class="modal-body"> |
| <h4>主题在线构建工具是什么？</h4> |
| <p>“主题”是 ECharts 图表的风格抽象，用于统一多个图表的风格样式。使用主题在线构建工具，可以快速直观地生成主题配置文件，并在 ECharts 中使用自定义的主题样式。</p> |
| <p>在此主题的基础上，你仍然可以使用 <code>setOption</code> 覆盖或设置主题样式。</p> |
| <p>ECharts 官方提供 <code>default</code>、<code>infographic</code>、<code>shine</code>、<code>roma</code>、<code>macarons</code>、<code>vintage</code> 等主题，可供<a href="http://echarts.baidu.com/download-theme.html" target="_blank">下载</a>使用。</p> |
| |
| <h4>导入、导出</h4> |
| <p>为了便于二次修改，我们的主题构建工具支持导入、导出配置项，导出的 JSON 文件仅用于在本工具中导入使用，而不能直接作为主题在 ECharts 中注册。</p> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of modal --> |
| |
| <div class="modal fade" id="download-js-modal" tabindex="-1" role="dialog"> |
| <div class="modal-dialog"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <h4 class="modal-title">主题下载</h4> |
| </div> |
| <div class="modal-body"> |
| <!-- tab nav --> |
| <ul class="nav nav-tabs" role="tablist"> |
| <li role="presentation" class="active"> |
| <a href="#modal-js" role="tab" data-toggle="tab"> |
| JS 版本 |
| </a> |
| </li> |
| <li role="presentation"> |
| <a href="#modal-json" role="tab" data-toggle="tab"> |
| JSON 版本 |
| </a> |
| </li> |
| </ul> |
| |
| <!-- tab content --> |
| <div class="tab-content"> |
| <div role="tabpanel" class="tab-pane active" id="modal-js"> |
| <ol id="how-to-use-js"> |
| <li><span v-if="downloadable">下载或</span>复制以下的主题保存至 <code>*.js</code> 文件；</li> |
| <li>将该文件在 HTML 中引用；</li> |
| <li>使用 <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> 创建图表，第二个参数即为 <code>*.js</code> 文件中注册的主题名字。</li> |
| </ol> |
| <div class="code-btn"> |
| <div class="btn-group" role="group"> |
| <a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJs()">下载</a> |
| <a class="btn btn-sm btn-default" @click="copyThemeJs()">复制</a> |
| </div> |
| <label id="copy-js-success">已复制到剪贴板，请保存至 <code>*.js</code> 文件</label> |
| <label id="copy-js-fail">请使用<kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd>复制，并保存至 <code>*.js</code> 文件</label> |
| </div> |
| <pre> |
| <code class="javascript" id="js-code"></code> |
| </pre> |
| </div> |
| <div role="tabpanel" class="tab-pane" id="modal-json"> |
| <ol id="how-to-use-json"> |
| <li><span v-if="downloadable">下载或</span>复制以下的主题保存至 <code>*.json</code> 文件；</li> |
| <li>读取该 JSON 文件，并使用 <code>obj = JSON.parse(data)</code> 将其转换成对象；</li> |
| <li>调用 <code>echarts.registerTheme('{{ themeName || 'customed' }}', obj)</code> 注册主题；</li> |
| <li>使用 <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> 创建图表，第二个参数即为刚才注册的主题名字。</li> |
| </ol> |
| <div class="code-btn"> |
| <div class="btn-group" role="group"> |
| <a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJson()">下载</a> |
| <a class="btn btn-sm btn-default" @click="copyThemeJson()">复制</a> |
| </div> |
| <label id="copy-json-success">已复制到剪贴板，请保存至 <code>*.json</code> 文件</label> |
| <label id="copy-json-fail">请使用<kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd>复制，并保存至 <code>*.json</code> 文件</label> |
| </div> |
| <pre> |
| <code class="json" id="json-code"></code> |
| </pre> |
| </div> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> |
| </div> |
| </div> |
| </div> |
| </div><!-- end of modal --> |
| </div> |
| |
| </div> |
| |
| <script src="https://registry.npmmirror.com/echarts/5/files/dist/echarts.min.js"></script> |
| <script src="https://lib.baomitu.com/lodash.js/4.17.21/lodash.min.js"></script> |
| <script src="https://lib.baomitu.com/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script> |
| <script src="https://lib.baomitu.com/vue/1.0.28/vue.min.js"></script> |
| <script src="https://lib.baomitu.com/highlight.js/9.16.2/highlight.min.js"></script> |
| <script src="https://lib.baomitu.com/FileSaver.js/2.0.5/FileSaver.min.js"></script> |
| |
| <script src="./theme-builder/app.min.js"></script> |
