feat: Nav支持layout可视化 (#6063)

Co-authored-by: wanglinfang <[email protected]>
baidu · Jan 31, 2023 · 168989f · 168989f
1 parent 63b98c9
commit 168989f
Show file tree

Hide file tree

Showing 20 changed files with 5,310 additions and 1,143 deletions.
diff --git a/docs/zh-CN/components/nav.md b/docs/zh-CN/components/nav.md
@@ -157,9 +157,17 @@ order: 58
             "label": "Nav 7",
             "to": "?to=nav7"
         },
-         {
+        {
             "label": "Nav 8",
             "to": "?to=nav8"
+        },
+        {
+            "label": "Nav 9",
+            "to": "?to=nav9"
+        },
+        {
+            "label": "Nav 10",
+            "to": "?to=nav10"
         }
     ]
 }

diff --git a/examples/nav/index-vite.html b/examples/nav/index-vite.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <title>导航示例</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link
+      type="image/x-icon"
+      rel="shortcut icon"
+      href="../static/favicon.png"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <link rel="stylesheet" href="../static/iconfont.css" />
+    <link
+      rel="stylesheet"
+      href="../../node_modules/@fortawesome/fontawesome-free/css/all.css"
+    />
+    <link
+      rel="stylesheet"
+      href="../../node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
+    />
+    <style>
+      .app-wrapper,
+      .schema-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      .cxd-Layout-asideWrap {
+        background: #fff;
+      }
+      .cxd-Layout .cxd-Layout-header {
+        padding-left: 180px;
+      }
+    </style>
+    <script type="module">
+      let theme = localStorage.getItem('amis-theme') || 'cxd';
+      if (theme === 'default') {
+        theme = 'cxd';
+      }
+
+      ['ang', 'cxd', 'dark', 'antd'].forEach(key => {
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('title', key);
+        if (theme !== key) {
+          link.setAttribute('disabled', 'disabled');
+        }
+        link.setAttribute(
+          'href',
+          new URL(
+            `../../packages/amis-ui/scss/themes/${key}.scss`,
+            import.meta.url
+          ).href
+        );
+        document.head.appendChild(link);
+      });
+    </script>
+    <link rel="stylesheet" href="../../packages/amis-ui/scss/helper.scss" />
+  </head>
+
+  <body>
+    <div id="root" class="app-wrapper"></div>
+    <script type="module">
+      import {bootstrap} from './index.tsx';
+      const initialState = {};
+      bootstrap(document.getElementById('root'), initialState);
+    </script>
+  </body>
+</html>