feat(omi-templates): breadcrumb & icon & switch

Tencent · Apr 1, 2024 · 1474e14 · 1474e14
1 parent b5c1c39
commit 1474e14
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 35 deletions.
diff --git a/packages/omi-templates/package-lock.json b/packages/omi-templates/package-lock.json
diff --git a/packages/omi-templates/package.json b/packages/omi-templates/package.json
@@ -19,7 +19,7 @@
     "copy-to-clipboard": "^3.3.3",
     "echarts": "^5.5.0",
     "markdown-it": "^14.0.0",
-    "omi": "7.6.5",
+    "omi": "7.6.7",
     "omi-router": "latest",
     "omi-suspense": "latest",
     "prismjs": "^1.29.0",

diff --git a/packages/omi-templates/src/components/component-layout.tsx b/packages/omi-templates/src/components/component-layout.tsx
@@ -24,28 +24,61 @@ export function ComponentLayout(props: { hideFooter?: boolean; current?: string;
           </div>
 
           <div class="flex items-center">
-            <NavbarWrapper.tagName />
+            <NavbarWrapper />
           </div>
         </div>
       </header>
 
       <div class="flex gap-6">
         <div class="w-64  text-[#00000066] py-4 px-2 border-r">
-          <div class="text-xs uppercase px-2 py-1 mb-2">基础</div>
+          <div>
+            <div class="text-xs uppercase px-2 py-1 mb-2">基础</div>
 
-          <nav class="text-sm text-[#00000099]">
-            <a href="#" class="block px-2 py-3 mb-1 rounded bg-primary text-white  transition-colors duration-200">
-             Button 按钮
-            </a>
-            <a href="#" class="block px-2 py-3 mb-1 rounded hover:bg-zinc-100 hover:text-black/90 transition-colors duration-200">
-              Icon 图标
-            </a>
-            <a href="#" class="block px-2 py-3 mb-1 rounded hover:bg-zinc-100 hover:text-black/90 transition-colors duration-200">
-              Link 链接
-            </a>
-          </nav>
+            <nav class="text-sm text-[#00000099]">
+              <a href="#/components/button" class="block px-2 py-3 mb-1 rounded bg-primary text-white  transition-colors duration-200">
+                Button 按钮
+              </a>
+              <a
+                href="#/components/icon"
+                class="block px-2 py-3 mb-1 rounded hover:bg-zinc-100 hover:text-black/90 transition-colors duration-200"
+              >
+                Icon 图标
+              </a>
+
+            </nav>
+          </div>
+
+
+
+          <div>
+            <div class="text-xs uppercase px-2 py-1 mb-2">导航</div>
+
+            <nav class="text-sm text-[#00000099]">
+
+              <a
+                href="#/components/breadcrumb"
+                class="block px-2 py-3 mb-1 rounded hover:bg-zinc-100 hover:text-black/90 transition-colors duration-200"
+              >
+                Breadcrumb 面包屑
+              </a>
+            </nav>
+          </div>
+
+          <div>
+            <div class="text-xs uppercase px-2 py-1 mb-2">输入</div>
+
+            <nav class="text-sm text-[#00000099]">
+
+              <a
+                href="#/components/switch"
+                class="block px-2 py-3 mb-1 rounded hover:bg-zinc-100 hover:text-black/90 transition-colors duration-200"
+              >
+                Switch 开关
+              </a>
+            </nav>
+          </div>
         </div>
-        <div class='w-full'>{props.children}</div>
+        <div class="w-full min-h-[calc(100vh-343px)]">{props.children}</div>
       </div>
 
       {!props.hideFooter && (

diff --git a/packages/omi-templates/src/pages/components/breadcrumb.tsx b/packages/omi-templates/src/pages/components/breadcrumb.tsx
@@ -0,0 +1,30 @@
+import '@/components/omiu/breadcrumb'
+
+export function Questionnaire() {
+  return (
+    <div class="max-w-[800px] mx-auto text-left px-4 py-10">
+
+      <h1 class="text-3xl font-bold my-6">Breadcrumb 面包屑</h1>
+      <p>显示当前页面在系统层级结构的位置，并能返回之前任意层级的页面。</p>
+
+      <h2 class="text-2xl font-bold my-6">默认</h2>
+      <div class="flex gap-6 items-center">
+        <o-breadcrumb
+          items={[
+            {
+              label: 'Home',
+              icon: 'home',
+              href: '#/',
+            },
+            {
+              label: 'Project',
+            },
+            {
+              label: 'OMI',
+            },
+          ]}
+        ></o-breadcrumb>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/omi-templates/src/pages/components/button.tsx b/packages/omi-templates/src/pages/components/button.tsx
@@ -1,7 +1,4 @@
-import '@/components/omiu/calendar/index'
 import '@/components/omiu/button'
-import '@/components/omiu/switch'
-import '@/components/omiu/breadcrumb'
 
 export function Questionnaire() {
   return (
@@ -105,8 +102,6 @@ export function Questionnaire() {
           </o-button>
         </div>
       </div>
-
-
     </div>
   )
 }