feat(omi-templates): add route of components

packages/omi-templates/src/components/component-layout.tsx

@@ -0,0 +1,125 @@
+import { Component, VNode, tag } from 'omi'
+import './navbar.tsx'
+import { navbarItems, activeMenuItem } from '../store.ts'
+import { CustomizeButton } from './customize-button.tsx'
+import tdesignLogo from '../assets/tdesign.svg?raw'
+
+/* Because the menu needs to update user avatars, a separate component is packaged for local updates */
+@tag('navbar-wrpapper')
+class NavbarWrapper extends Component {
+  render() {
+    return (
+      <o-navbar items={navbarItems.value} active={activeMenuItem.value} onInstalled={window.refreshDark}></o-navbar>
+    )
+  }
+}
+
+export function ComponentLayout(props: { hideFooter?: boolean; current?: string; children?: VNode | VNode[] }) {
+  return (
+    <div class="bg-[#fafafa] pt-[56px] dark:bg-background dark:text-foreground">
+      <header class="bg-white dark:bg-background/10 dark:text-foreground bg-opacity-40 backdrop-filter backdrop-blur-md py-2 top-0 shadow fixed w-full px-4 md:px-0 z-[100000]">
+        <div class="container mx-auto flex justify-between items-center">
+          <div class="text-xl font-bold">
+            <a class="text-zinc-800 dark:text-white" title="TDesign" unsafeHTML={{ html: tdesignLogo }} href="#/"></a>
+          </div>
+
+          <div class="flex items-center">
+            <NavbarWrapper.tagName />
+          </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>
+
+          <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>
+        </div>
+        <div class='w-full'>{props.children}</div>
+      </div>
+
+      {!props.hideFooter && (
+        <section class="bg-[#eeeeee] dark:bg-background dark:text-foreground px-4 md:px-0 border-t">
+          <div class="container  mx-auto py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <h2 class="text-xl font-bold mb-4">友情链接1</h2>
+              <ul class="text-zinc-600 dark:text-foreground">
+                <li>
+                  <a href="#">链接1</a>
+                </li>
+                <li>
+                  <a href="#">链接2</a>
+                </li>
+                <li>
+                  <a href="#">链接3</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h2 class="text-xl font-bold mb-4">友情链接2</h2>
+              <ul class="text-zinc-600 dark:text-foreground">
+                <li>
+                  <a href="#">链接1</a>
+                </li>
+                <li>
+                  <a href="#">链接2</a>
+                </li>
+                <li>
+                  <a href="#">链接3</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h2 class="text-xl font-bold mb-4">友情链接3</h2>
+              <ul class="text-zinc-600 dark:text-foreground">
+                <li>
+                  <a href="#">链接1</a>
+                </li>
+                <li>
+                  <a href="#">链接2</a>
+                </li>
+                <li>
+                  <a href="#">链接3</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h2 class="text-xl font-bold mb-4">友情链接4</h2>
+              <ul class="text-zinc-600 dark:text-foreground">
+                <li>
+                  <a href="#">链接1</a>
+                </li>
+                <li>
+                  <a href="#">链接2</a>
+                </li>
+                <li>
+                  <a href="#">链接3</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      )}
+
+      <CustomizeButton />
+
+      {!props.hideFooter && (
+        <footer class="bg-[#e7e7e7] border-t dark:bg-background dark:text-foreground py-6">
+          <div class="container mx-auto text-center">
+            <p class="text-zinc-600 dark:text-foreground">© 2024 Tencent OMI. All rights reserved.</p>
+          </div>
+        </footer>
+      )}
+    </div>
+  )
+}

packages/omi-templates/src/pages/components/button.tsx

@@ -0,0 +1,112 @@
+import '@/components/omiu/calendar/index'
+import '@/components/omiu/button'
+import '@/components/omiu/switch'
+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 mb-6">Button 按钮</h1>
+      <p>按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
+
+      <h2 class="text-2xl font-bold my-6">按钮 Variant 和 Theme</h2>
+
+      <div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="default">填充按钮</o-button>
+          <o-button variant="outline" theme="default">
+            描边按钮
+          </o-button>
+          <o-button variant="dashed" theme="default">
+            虚框按钮
+          </o-button>
+          <o-button variant="text" theme="default">
+            文字按钮
+          </o-button>
+        </div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="primary">填充按钮</o-button>
+          <o-button variant="outline" theme="primary">
+            描边按钮
+          </o-button>
+          <o-button variant="dashed" theme="primary">
+            虚框按钮
+          </o-button>
+          <o-button variant="text" theme="primary">
+            文字按钮
+          </o-button>
+        </div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="danger">填充按钮</o-button>
+          <o-button variant="outline" theme="danger">
+            描边按钮
+          </o-button>
+          <o-button variant="dashed" theme="danger">
+            虚框按钮
+          </o-button>
+          <o-button variant="text" theme="danger">
+            文字按钮
+          </o-button>
+        </div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="warning">填充按钮</o-button>
+          <o-button variant="outline" theme="warning">
+            描边按钮
+          </o-button>
+          <o-button variant="dashed" theme="warning">
+            虚框按钮
+          </o-button>
+          <o-button variant="text" theme="warning">
+            文字按钮
+          </o-button>
+        </div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="success">填充按钮</o-button>
+          <o-button variant="outline" theme="success">
+            描边按钮
+          </o-button>
+          <o-button variant="dashed" theme="success">
+            虚框按钮
+          </o-button>
+          <o-button variant="text" theme="success">
+            文字按钮
+          </o-button>
+        </div>
+      </div>
+
+      <h2 class="text-2xl font-bold my-6">图标按钮</h2>
+
+      <div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="primary">
+            <i class="t-icon t-icon-add text-base"></i>
+            新建
+          </o-button>
+          <o-button variant="outline" icon="cloud-upload">
+            上传文件
+          </o-button>
+          <o-button shape="circle" icon="discount" theme="primary"></o-button>
+          <o-button shape="circle" icon="cloud-download" theme="primary"></o-button>
+          <o-button variant="outline" icon="search">
+            搜索
+          </o-button>
+        </div>
+      </div>
+
+      <h2 class="text-2xl font-bold my-6">不同状态的按钮</h2>
+
+      <div>
+        <div class="flex gap-3 mb-2">
+          <o-button theme="primary" disabled>
+            禁用的按钮
+          </o-button>
+          <o-button theme="primary" loading>
+            加载中
+          </o-button>
+        </div>
+      </div>
+
+
+    </div>
+  )
+}

packages/omi-templates/src/pages/home.tsx

@@ -34,7 +34,7 @@ export function Home() {
               theme="default"
               href="https://github.com/Tencent/omi/tree/master/packages/omi-templates"
             >
-              <i class="t-icon t-icon-logo-github-filled mr-2 text-lg"></i>源代码
+              <i class="t-icon t-icon-logo-github-filled text-lg"></i>源代码
             </o-button>
             <o-button theme="primary" tag="a" href="#/admin/home">
               🎉 管理系统

packages/omi-templates/src/routes.tsx

@@ -2,6 +2,7 @@ import 'omi-suspense'
 import './index.css'
 import { SiteLayout } from './components/site-layout'
 import { AdminLayout } from './components/admin-layout'
+import { ComponentLayout } from './components/component-layout'
 import { pending } from './components/pending'
 import { fallback } from './components/fallback'
 import { Router } from 'omi-router'
@@ -29,6 +30,7 @@ export const routes = [
   createBaseRoute('/login', () => import('./pages/login')),
   createAdminRoute('/admin/home', () => import('./pages/admin/home')),
   createAdminRoute('/admin/chart', () => import('./pages/admin/chart')),
+  createComponentRoute('/components/button', () => import('./pages/components/button')),
   createRoute('*', () => import('./pages/results/not-found')),
   {
     path: '/before-enter/test',
@@ -77,6 +79,45 @@ function createRoute(path: string, componentImport: () => Promise<unknown>) {
   }
 }
 
+function createComponentRoute(path: string, componentImport: () => Promise<unknown>) {
+  return {
+    path,
+    render(router: Router) {
+      return (
+        <ComponentLayout current={router.currentRoute?.path}>
+          <o-suspense
+            minLoadingTime={400}
+            imports={[componentImport()]}
+            customRender={(results: { [x: string]: Function }[]) => {
+              const Module = results[0][Object.keys(results[0])[0]]
+              return (
+                <o-appear
+                  class="opacity-0 translate-y-4"
+                  onReady={() => {
+                    window.refreshDark()
+                    window.scrollTo(0, 0)
+                  }}
+                >
+                  {isClassOrFunction(Module) === 'Function' ? Module(router.params) : <Module></Module>}
+                </o-appear>
+              )
+            }}
+            fallback={fallback}
+            beforePending={async (suspense: Component) => {
+              suspense.shadowRoot?.firstElementChild?.classList.add('opacity-0', 'translate-y-4')
+              return new Promise((resolve) => setTimeout(resolve, 300))
+            }}
+            pending={pending}
+            onLoaded={() => {
+              window.refreshDark()
+            }}
+          ></o-suspense>
+        </ComponentLayout>
+      )
+    },
+  }
+}
+
 function createAdminRoute(path: string, componentImport: () => Promise<unknown>) {
   return {
     path,