.gitignore

@@ -20,6 +20,5 @@ dist
 *.sln
 *.sw?
 build
-docs
 coverage
 package.lock.json

README.CN.md

@@ -4,6 +4,7 @@
 <h2 align="center">Omi - Web Components 框架</h2>
 
 - 📶 信号 **Signal** 驱动的响应式编程，[reactive-signal](https://github.com/Tencent/omi/tree/master/packages/reactive-signal)强力驱动
+- 🧱 [TDesign Web 组件](https://github.com/TDesignOteam/tdesign-web-components) 
 - ⚡ **微小的**尺寸，**极速的**性能
 - 💗 [目标 100+ 模板](https://omi.cdn-go.cn/templates/latest/) & [OMI 模板源码](https://github.com/Tencent/omi/tree/master/packages/omi-templates)
 - 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form 游乐场](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi 图标](https://github.com/omijs/lucide-omi)

README.md

@@ -4,6 +4,7 @@ English | [简体中文](./README.CN.md)
 <h2 align="center">Omi - Web Components Framework</h2>
 
 - 📶 **Signal**-driven reactive programming by [reactive-signal](https://github.com/Tencent/omi/tree/master/packages/reactive-signal)
+- 🧱 [TDesign Web Components](https://github.com/TDesignOteam/tdesign-web-components) 
 - 💗 [100+ OMI Templates](https://omi.cdn-go.cn/templates/latest/) & [OMI Templates Source Code](https://github.com/Tencent/omi/tree/master/packages/omi-templates)
 - 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi Icons](https://github.com/omijs/lucide-omi)
 - ⚡ **Tiny** size, **Fast** performance

packages/omi-router/README.md

@@ -151,7 +151,8 @@ import '../tailwind'
 
 const router = new Router({
   routes,
-  renderTo: 'body'
+  renderTo: 'body',
+  hash: false
 })
 ```
 

packages/omi-router/examples/simple/main.tsx

@@ -5,4 +5,5 @@ import '../tailwind'
 const router = new Router({
   routes,
   renderTo: 'body',
+  // hash: false,
 })

packages/omi-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi-router",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "type": "module",
   "description": "Router for Omi",
   "main": "dist/index.es.js",

packages/omi-router/src/router-view.tsx

@@ -20,6 +20,7 @@ export interface Route {
 interface Props {
   routes: Route[]
   base?: string
+  hash?: boolean
 }
 
 @tag('router-view')
@@ -41,6 +42,7 @@ export class RouterView extends Component<Props> {
       router: this,
     })
     this.base = this.props.base || ''
+    this.isHashMode = this.props.hash === false ? false : true
 
     this.routes = this.props.routes.map((route) => {
       const keys: Key[] = []

packages/omi-router/src/router.tsx

@@ -8,7 +8,7 @@ type CSSItem = CSSStyleSheet | Module | string
 export class Router {
   el: RouterView
 
-  constructor(options: { routes: Route[]; renderTo: string; css?: CSSItem[]; base?: string }) {
+  constructor(options: { routes: Route[]; renderTo: string; css?: CSSItem[]; base?: string, hash?: boolean}) {
     this.el = render(
       <router-view
         onInstall={(evt: CustomEvent) => {
@@ -17,6 +17,7 @@ export class Router {
         }}
         routes={options.routes}
         base={options.base}
+        hash={options.hash}
       />,
       options.renderTo,
     )

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",

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

@@ -1,4 +1,4 @@
-import { Component, VNode, tag } from 'omi'
+import { Component, VNode, classNames, tag } from 'omi'
 import './navbar.tsx'
 import { navbarItems, activeMenuItem } from '../store.ts'
 import { CustomizeButton } from './customize-button.tsx'
@@ -24,28 +24,75 @@ 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 class="w-64  text-[#00000066] py-4 px-2 border-r h-[calc(100vh-60px)] overflow-auto">
+          <div>
+            <div class="text-xs uppercase px-2 py-1 my-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={classNames({
+                  'block px-2 py-3 mb-1 rounded  transition-colors duration-200': true,
+                  'bg-primary text-white': props.current === '/components/button',
+                  'hover:bg-zinc-100 hover:text-black/90': props.current !== '/components/button',
+                })}
+              >
+                Button 按钮
+              </a>
+              <a
+                href="#/components/icon"
+                class={classNames({
+                  'block px-2 py-3 mb-1 rounded  transition-colors duration-200': true,
+                  'bg-primary text-white': props.current === '/components/icon',
+                  'hover:bg-zinc-100 hover:text-black/90': props.current !== '/components/icon',
+                })}
+              >
+                Icon 图标
+              </a>
+            </nav>
+          </div>
+
+          <div>
+            <div class="text-xs uppercase px-2 py-1 my-2">导航</div>
+
+            <nav class="text-sm text-[#00000099]">
+              <a
+                href="#/components/breadcrumb"
+                class={classNames({
+                  'block px-2 py-3 mb-1 rounded  transition-colors duration-200': true,
+                  'bg-primary text-white': props.current === '/components/breadcrumb',
+                  'hover:bg-zinc-100 hover:text-black/90': props.current !== '/components/breadcrumb',
+                })}
+              >
+                Breadcrumb 面包屑
+              </a>
+            </nav>
+          </div>
+
+          <div>
+            <div class="text-xs uppercase px-2 py-1 my-2">输入</div>
+
+            <nav class="text-sm text-[#00000099]">
+              <a
+                href="#/components/switch"
+                class={classNames({
+                  'block px-2 py-3 mb-1 rounded  transition-colors duration-200': true,
+                  'bg-primary text-white': props.current === '/components/switch',
+                  'hover:bg-zinc-100 hover:text-black/90': props.current !== '/components/switch',
+                })}
+              >
+                Switch 开关
+              </a>
+            </nav>
+          </div>
         </div>
-        <div class='w-full'>{props.children}</div>
+        <div class="w-full h-[calc(100vh-60px)] overflow-auto">{props.children}</div>
       </div>
 
       {!props.hideFooter && (

packages/omi-templates/src/docs/config.ts

@@ -0,0 +1,59 @@
+export const docsConfig = {
+  zh: {
+    sidebar: [
+      {
+        text: '介绍',
+        children: [
+          {
+            text: '开始',
+            path: '#/product-docs/zh/getting-started',
+            value: 'getting-started',
+          },
+          {
+            text: '响应式',
+            path: '#/product-docs/zh/reactivity',
+            value: 'reactivity',
+          },
+        ],
+      },
+      {
+        text: '核心概念',
+        children: [
+          {
+            text: '属性',
+            path: '#/product-docs/zh/props',
+            value: 'props',
+          },
+        ],
+      },
+    ],
+  },
+  en: {
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/introduction' },
+          { text: 'Reactivity', link: '/reactivity' },
+          { text: 'OOP & DOP', link: '/oop-dop' },
+        ],
+      },
+      {
+        text: 'Core API',
+        items: [
+          { text: 'Props', link: '/props' },
+          { text: 'CSS', link: '/css' },
+          { text: 'Event', link: '/event' },
+          { text: 'Ref', link: '/ref' },
+          { text: 'Slot', link: '/slot' },
+          { text: 'Provide-Inject', link: '/provide-inject' },
+          { text: 'Lifecycle', link: '/lifecycle' },
+          { text: 'Directive', link: 'directive' },
+          { text: 'Mixin', link: 'mixin' },
+          { text: 'Update', link: '/update' },
+          { text: 'Cross Frameworks', link: '/cross-frameworks' },
+        ],
+      },
+    ],
+  },
+}