packages/omi-elements/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
-    "omi": "^7.2.0",
+    "omi": "^7.3.1",
     "omi-router": "^4.0.3",
     "omi-suspense": "^0.0.3",
     "prismjs": "^1.29.0"

packages/omi-elements/src/components/code-showcase/index.tsx

@@ -49,7 +49,8 @@ export default class CodeShowcase extends Component<Props> {
 
   @bind
   onCopy() {
-    copyToClipboard(this.props.code)
+    copyToClipboard.default ? copyToClipboard.default(this.props.code) : copyToClipboard(this.props.code)
+
     clearTimeout(this.timeoutId as NodeJS.Timeout)
     this.copied = true
     this.update()

packages/omi-elements/src/components/content-nav.tsx

@@ -0,0 +1,108 @@
+import { tag, Component, signal } from 'omi'
+import { tailwind } from '@/tailwind'
+
+const contentMenu = signal({
+  menus: [
+    {
+      id: 'basic',
+      text: 'Theme22',
+    },
+    {
+      id: 'shades',
+      text: 'Shades',
+    },
+    {
+      id: 'background',
+      text: 'Background',
+    },
+    {
+      id: 'text',
+      text: 'Text',
+    },
+    {
+      id: 'section-related-resources',
+      text: 'Related resources',
+    },
+  ],
+  active: 'basic',
+})
+
+export function updateMenu(scopeEl) {
+  const h2Elements = scopeEl.shadowRoot.querySelectorAll('h2.mb-5.mt-0.text-3xl.font-semibold.leading-normal')
+  const menus = Array.from(h2Elements).map((h2) => {
+    return {
+      id: h2.textContent,
+      text: h2.textContent,
+    }
+  })
+  contentMenu.value.menus = menus
+  contentMenu.value.active = menus[0].id
+  contentMenu.update()
+}
+
+@tag('content-nav')
+export class ContentNav extends Component {
+  static css = [tailwind]
+
+  scrollTo(menu) {
+    // 修改 url 带上 query 参数
+    const element = findH2ByTextInShadowDom(document.body, menu.text)
+
+    // 如果找到了这样的 h2 元素，滚动到它的位置
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    contentMenu.value.active = menu.id
+    contentMenu.update()
+  }
+
+  render() {
+    return (
+      <div class="hidden px-4 lg:block">
+        <menu class="sticky top-20">
+          <ul class="dark:text-neutral-200">
+            {contentMenu.value.menus.map((menu) => {
+              return (
+                <li
+                  key={menu.id}
+                  onClick={() => this.scrollTo(menu)}
+                  class="mb-1 pl-[9px] text-[0.85rem] data-[te-spy-active]:border-l-2 data-[te-spy-active]:border-solid data-[te-spy-active]:border-l-primary data-[te-spy-active]:text-primary dark:data-[te-spy-active]:border-l-primary-400 dark:data-[te-spy-active]:text-primary-400"
+                  data-te-spy-active={contentMenu.value.active === menu.id}
+                >
+                  <a href="javascript:void(0)">{menu.text}</a>
+                </li>
+              )
+            })}
+          </ul>
+        </menu>
+      </div>
+    )
+  }
+}
+
+function findH2ByTextInShadowDom(root, text) {
+  // 创建 TreeWalker
+  const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
+
+  // 遍历 DOM 树
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode
+
+    // 如果找到了匹配的元素，返回它
+    if (node.tagName === 'H2' && node.textContent === text) {
+      return node
+    }
+
+    // 如果当前节点有 Shadow Root，递归遍历它
+    if (node.shadowRoot) {
+      const elementInShadowDom = findH2ByTextInShadowDom(node.shadowRoot, text)
+      if (elementInShadowDom) {
+        return elementInShadowDom
+      }
+    }
+  }
+
+  // 如果没有找到匹配的元素，返回 null
+  return null
+}

packages/omi-elements/src/demo/HomePage.tsx

@@ -2,7 +2,6 @@ import { tag, Component } from 'omi'
 import './components/button-link'
 import { tailwind } from '@/tailwind'
 import demoPages from './pages'
-import '../components/side-nav'
 
 @tag('home-page')
 export class ButtonLink extends Component {

packages/omi-elements/src/demo/pages/components/collapse/CollapsePage.tsx

@@ -40,7 +40,7 @@ export class CollapsePage extends Component {
         {/* <!-- Section: Horizontal --> */}
         <section>
           {/* <!-- Title --> */}
-          <h2 className="mb-5 mt-5 text-3xl font-semibold leading-normal" id="horizontal" data-te-spy-item>
+          <h2 className="mb-5 mt-0 text-3xl font-semibold leading-normal" id="horizontal" data-te-spy-item>
             Horizontal
           </h2>
           {/* <!-- Description --> */}
@@ -57,7 +57,7 @@ export class CollapsePage extends Component {
         {/* <!-- Section: Multiple Targets --> */}
         <section>
           {/* <!-- Title --> */}
-          <h2 className="mb-5 mt-5 text-3xl font-semibold leading-normal" id="multiple_targets" data-te-spy-item>
+          <h2 className="mb-5 mt-0 text-3xl font-semibold leading-normal" id="multiple_targets" data-te-spy-item>
             Multiple targets
           </h2>
           {/* <!-- Description --> */}

packages/omi-elements/src/routes.tsx

@@ -2,6 +2,8 @@ import './components/suspense'
 import './index.css'
 import './components/site-header'
 import './components/side-nav'
+import './components/content-nav'
+import { updateMenu } from './components/content-nav'
 
 declare global {
   interface Window {
@@ -262,11 +264,17 @@ components.forEach((component: { type?: string; name?: string; page?: string; de
           <div class="flex">
             <side-nav class="block w-0 lg:w-60" onClick={(evt) => evt.stopPropagation()}></side-nav>
             <o-suspense imports={[component.dep()]} onDataLoaded={window.refreshDark} class="flex-1 ml-10 mr-10 w-0">
-              <div slot="pending">Loading user profile...</div>
-              <div slot="fallback">
-                Sorry, we are unable to load the user profile at the moment. Please try again later.
+              <div slot="pending">Loading...</div>
+              <div slot="fallback">Sorry, we are unable to load the content at the moment. Please try again later.</div>
+              <div class="flex">
+                <component.page
+                  onInstalled={(evt) => {
+                    updateMenu(evt.detail)
+                  }}
+                  class="flex-grow overflow-auto pr-0 lg:pr-40"
+                />
+                <content-nav class="w-0 lg:w-40 fixed top-20 right-10"></content-nav>
               </div>
-              <component.page />
             </o-suspense>
           </div>
         </>