【fix】修改例子、API 页面UI，review by luoxiao

Author: chenxianhuii

build/jsdocs/template/static/styles/jaguar.css

@@ -2,7 +2,7 @@ html,
 body {
     font-size: 1em;
     font-family: "Helvetica Neue", Helvetica, Arial, "Heiti SC", "Microsoft Yahei", sans-serif;
-    background-color: #fff;
+    background-color: var(--wrapper-background-color);
 }
 
 ul,
@@ -45,10 +45,10 @@ a:hover, a:active, a:focus{
 .main-sidebar {
     position: fixed;
     float: left;
-    width: 250px;
+    width: 240px;
     height: 100%;
     padding-top: 0px;
-    background-color: #424242;
+    background-color: var(--background-color);
 
 }
 
@@ -65,32 +65,56 @@ a:hover, a:active, a:focus{
 }
 
 .main-sidebar .search {
-    padding: 10px 15px;
-    z-index: 1;
-    position: relative;
+    padding: 0px 20px;
+}
+.main-sidebar .search .split-line{
+    height: 1px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    background: rgba(0,0,0,0.06);
+}
+.main-sidebar .search #searchBox{
+    height: 40px;
+    border-radius: 4px;
+    /* border-bottom: 1px solid rgba(0,0,0,0.1); */
+    /* padding: 0px 20px 12px 20px; */
+}
+
+.main-sidebar .apiTitile {
+  font-size: 24px;
+  font-family: MicrosoftYaHeiSemibold;
+  line-height: 32px;
+  color: var(--text-color);
+  padding: 16px 20px;
 }
 
 .main-sidebar .list {
     height: 100%;
-    padding: 5px 5px 10px 5px;
+    /* padding: 5px 5px 0 5px; */
     position: relative;
     overflow: auto;
     width: 100%;
 }
 
-.main-sidebar li.item {
-    margin-top: 8px;
-    padding-bottom: 8px;
-    margin-left: 5px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+.main-sidebar li.item{
+  margin-top: 12px;
+  padding: 5px ;
+  /* border-left: 2px solid transparent; */
 }
 
+/* .main-sidebar li.item:hover{
+    background-color: var(--active-background-color);
+    border-left-color: var(--active-color);
+} */
+.main-sidebar li.item .title:hover a {
+    color: var(--active-color);
+}
 .main-sidebar li.item a {
-    color: #fff;
+    color: var(--text-color);
 }
 
 .main-sidebar li.item a:hover {
-    color: #A1A1A1;
+    color: #282828 ;
 }
 
 .main-sidebar li.item .title {
@@ -99,23 +123,33 @@ a:hover, a:active, a:focus{
     display: block;
     font-size: 0.8em;
 }
-
 .sidebar-menu .treeview-menu {
-    padding-left: 25px
+  padding-left: 36px
+}
+
+.sidebar-menu .treeview-menu .treeview-menu {
+  padding-left: 16px
 }
 
+.sidebar-menu .treeview-menu>li {
+  margin-top: 12px;
+}
+.sidebar-menu>.treeview>.treeview-menu>li:first-child {
+  margin-top: 0px;
+}
 .sidebar-menu .treeview-menu > li > a {
+    color: var(--text-color);
     padding: 5px
 }
 
-.sidebar-menu li > a {
-    color: #f5f5f5;
-    padding: 10px 5px 10px 15px;
+.sidebar-menu > li > a {
+    line-height: 24px;
+    color: var(--text-color);
+    font-family: MicrosoftYaHeiSemibold;
+    font-size: 16px;
+    padding: 16px 44px 16px 20px;
 }
 
-.main-sidebar li.item .title a:hover {
-    color: #A1A1A1 ;
-}
 
 .main-sidebar li.item .title .static {
     display: block;
@@ -142,12 +176,13 @@ a:hover, a:active, a:focus{
 
 .main-sidebar li.item .itemMembers {
     display: none;
-    text-indent: 1em;
 }
 
 .main {
-    padding: 20px 26px;
-    margin-left: 250px;
+    min-height: calc(100vh - 48px);
+    padding: 40px;
+    margin: 24px 24px 0 274px; 
+    border-radius: 4px;
 }
 
 .main .page-title {
@@ -339,10 +374,6 @@ a:hover, a:active, a:focus{
     color: #fff;
 }
 
-.main .nameContainer .attribs {
-    margin-right: 5px;
-}
-
 .main pre {
     font-size: 11px;
 }
@@ -438,40 +469,31 @@ a:hover, a:active, a:focus{
     list-style-type: none;
 }
 
-.params tbody>tr:hover {
-    background-color: rgba(0,0,0,0.04);
-}
-
 .treeview > a {
     cursor: pointer;
 }
 
-a.sidebar-toggle {
-    width: 100%;
-    height: 36px;
-    line-height: 36px;
-    text-align: center;
-    background-color: #282828;
-    color: white !important;
-    display: block;
-}
 
 a.sidebar-toggle {
-    background-color: #282828;
+    background-color: var(--background-color);
     position: absolute;
     top: 50%;
     width: 26px;
     height: 36px;
     left: 100%;
     text-align: center;
-    color: white !important;
+    color: var(--text-color) !important;
     line-height: 36px;
+    display: block;
 
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar {
     transform: translate(-50px, 0);
 }
+.sidebar-mini.sidebar-collapse .main-sidebar .apiTitile {
+  visibility: hidden;
+}
 
 .main-sidebar {
     position: fixed;
@@ -484,7 +506,7 @@ a.sidebar-toggle {
 }
 
 .content-wrapper {
-    background-color: #fff;
+    background-color: var(--background-color);
 }
 
 footer {
@@ -498,7 +520,7 @@ footer {
 
 @media (max-width: 767px) {
     .main-sidebar {
-        transform: translate(-250px, 0);
+        transform: translate(-240px, 0);
     }
 
     .content-wrapper {
@@ -523,4 +545,4 @@ footer {
     font-size: 13px;
     margin-top: 14px;
     margin-bottom: 14px;
-}
+}

build/jsdocs/template/tmpl/layout.tmpl

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
+    <script src="../../../../examples/js/theme/themeConfig.js"></script>
+    <script src="../../../../examples/js/theme/theme.js"></script>
 <script type="text/javascript">
 
 </script>

build/jsdocs/template/tmpl/navigation.tmpl

@@ -142,10 +142,12 @@ function buildLi(obj){
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="fold">
             <div class="glyphicon glyphicon-menu-hamburger"></div>
         </a>
+    <div class="apiTitile">API</div>
     <div class="search">
         <input id="searchBox" type="text" class="form-control input-sm" placeholder="Search Documentations">
+        <div class="split-line"></div>
     </div>
-    <div style='width: 100%;position: absolute;top: 0px;bottom: 0px;left: 0px;padding-top:50px;height:100%' id='categories'>
+    <div style='width: 100%;position: absolute;top: 0px;bottom: 0px;left: 0px;margin-top:125px;height:100%' id='categories'>
     <div style='height:100%;overflow:auto'>
             <ul class="sidebar-menu tree list" data-widget='tree'>
                 <?js

build/server.js

@@ -43,6 +43,8 @@ const server = app.listen(8082, () => {
 });
 
 app.use(express.static('web'));
+app.use('/examples/css/common.css', express.static('web/css/common.css'));
+app.use('/examples/css/header.css', express.static('web/css/header.css'));
 app.use('/examples/template/header.html', express.static('web/template/header.html'));
 app.use('/examples', express.static('examples'), serveIndex('examples'));
 app.use('/examples-bug', express.static('examples-bug'), serveIndex('examples-bug'));
@@ -51,6 +53,8 @@ app.use('/build', express.static('build'), serveIndex('build'));
 app.use('/docs', express.static('docs'), serveIndex('docs'));
 app.use('/web', express.static('web'), serveIndex('web'));
 
+app.use('/en/examples/css/common.css', express.static('web/en/web/css/common.css'));
+app.use('/en/examples/css/header.css', express.static('web/en/web/css/header.css'));
 app.use('/en/examples/template/header.html', express.static('web/en/web/template/header.html'));
 app.use('/en/examples', express.static('examples'), serveIndex('examples'));
 app.use('/en/docs', express.static('docs'), serveIndex('docs'));

examples/3dwebgl/editor.html

@@ -24,7 +24,7 @@
     $('.wrapper').load("../template/editor.html", function () {
         var navigation = {
             nav: {
-                title: "SuperMap iClient 11i(2023)",
+                title: "11i(2023)",
                 path: "../../web/",
                 isLocal: window.isLocal
             }

examples/3dwebgl/examples.html

@@ -26,7 +26,7 @@
     $('.wrapper').load("../template/example.html", function () {
         var navigation = {
             nav: {
-                title: "SuperMap iClient 11i(2023)",
+                title: "11i(2023)",
                 path: "../../web/",
                 isLocal: window.isLocal
             }

examples/classic/editor-wechat.html

@@ -44,7 +44,7 @@
       $('.wrapper').load('../template/editor.html', function() {
         var navigation = {
           nav: {
-            title: 'SuperMap iClient 11i(2023)',
+            title: '11i(2023)',
             path: '../../web/',
             isLocal: window.isLocal
           }

examples/classic/editor.html

@@ -24,7 +24,7 @@
     $('.wrapper').load("../template/editor.html", function () {
         var navigation = {
             nav: {
-                title: "SuperMap iClient 11i(2023)",
+                title: "11i(2023)",
                 path: "../../web/",
                 isLocal: window.isLocal
             }

examples/classic/examples-wechat.html

@@ -66,7 +66,7 @@
       $('.wrapper').load('../template/example.html', function() {
         var navigation = {
           nav: {
-            title: 'SuperMap iClient 11i(2023)',
+            title: '11i(2023)',
             path: '../../web/',
             isLocal: window.isLocal
           }

examples/classic/examples.html

@@ -26,7 +26,7 @@
     $('.wrapper').load("../template/example.html", function () {
         var navigation = {
             nav: {
-                title: "SuperMap iClient 11i(2023)",
+                title: "11i(2023)",
                 path: "../../web/",
                 isLocal: window.isLocal
             }