@blocklet/ui-react 3.4.14 → 3.5.0

package/docs/components-layout-dashboard.ja.md

@@ -1,185 +0,0 @@
-# Dashboard
-
-`Dashboard` コンポーネントは、blocklet アプリケーション向けに、レスポンシブなレイアウトを事前に構築して提供します。これは通常、管理インターフェースやユーザー中心のビューに使用されます。blocklet のメタデータを解釈することで、サイドバー、ヘッダー、およびメインコンテンツエリアを持つ標準的なダッシュボードを自動的に構築します。このコンポーネントにより、一般的なアプリケーション構造を構築するための定型的なコードが大幅に削減されます。
-
-レイアウトは、ナビゲーション用の永続的なサイドバー、グローバルなアクションとユーザー情報用のヘッダー、そしてページ固有のコンテンツがレンダリングされるメインコンテンツエリアの3つの主要なセクションで構成されています。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Dashboard](assets/diagram/dashboard-diagram-0.ja.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 基本的な使用方法
-
-`Dashboard` コンポーネントを使用するには、ページのコンテンツをそれでラップするだけです。コンポーネントは自動的にコンテンツの周りにヘッダーとサイドバーをレンダリングします。
-
-```javascript MyDashboard.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-
-export default function MyDashboardPage() {
-  return (
-    <Dashboard>
-      <h1>Welcome to the Dashboard</h1>
-      <p>This is your main content area.</p>
-    </Dashboard>
-  );
-}
-```
-
-`Dashboard` コンポーネントに渡された children は、メインコンテンツエリアに表示されます。
-
-## Props
-
-`Dashboard` コンポーネントは、その動作と外観をカスタマイズするために、以下の props を受け入れます。
-
-<x-field-group>
-  <x-field data-name="children" data-type="React.ReactNode" data-required="true">
-    <x-field-desc markdown>ダッシュボードレイアウトのメインコンテンツエリア内にレンダリングされるコンテンツ。</x-field-desc>
-  </x-field>
-  <x-field data-name="meta" data-type="object" data-required="false">
-    <x-field-desc markdown>blocklet メタデータオブジェクト。指定された場合、デフォルトの `window.blocklet` メタデータとマージされ、上書きされます。これは、テストや blocklet 情報を動的に変更する場合に便利です。</x-field-desc>
-  </x-field>
-  <x-field data-name="fallbackUrl" data-type="string" data-required="false" data-default="publicPath">
-    <x-field-desc markdown>現在の認証済みユーザーがその役割に基づいてどのナビゲーションリンクにもアクセスできない場合にリダイレクトする URL。この自動リダイレクトを無効にするには `null` に設定します。</x-field-desc>
-  </x-field>
-  <x-field data-name="invalidPathFallback" data-type="function" data-required="false">
-    <x-field-desc markdown>現在の URL パスが利用可能なナビゲーションリンクのいずれとも一致しない場合に実行されるコールバック関数。デフォルトの動作は、利用可能な最初のリンクにリダイレクトすることです。</x-field-desc>
-  </x-field>
-  <x-field data-name="headerAddons" data-type="React.ReactNode | function" data-required="false">
-    <x-field-desc markdown>ヘッダーの右側のアドオンのカスタマイズを可能にします。ノードが提供された場合、すべてのデフォルトアドオンを置き換えます。関数が提供された場合、デフォルトのアドオン配列を引数として受け取り、それらを追加、削除、または並べ替えることができます。</x-field-desc>
-  </x-field>
-  <x-field data-name="sessionManagerProps" data-type="object" data-required="false">
-    <x-field-desc markdown>ヘッダー内の基盤となる `SessionUser` コンポーネントに直接渡される Props。これにより、`showRole` やカスタムの `onLogout` ハンドラの定義など、ユーザーセッションメニューのカスタマイズが可能になります。</x-field-desc>
-  </x-field>
-  <x-field data-name="links" data-type="array | function" data-required="false">
-    <x-field-desc markdown>サイドバーのナビゲーションリンクをプログラムで変更できるようにします。配列が提供された場合、そのアイテムはメタデータから生成されたリンクに追加されます。関数が提供された場合、メタデータから生成されたリンクを引数として受け取り、新しいリンクの配列を返す必要があります。</x-field-desc>
-  </x-field>
-  <x-field data-name="showDomainWarningDialog" data-type="boolean" data-required="false" data-default="true">
-    <x-field-desc markdown>`true` の場合、信頼できないドメインからアプリケーションにアクセスされた場合に警告ダイアログを表示します。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## 仕組み
-
-`Dashboard` コンポーネントは、「設定駆動型」で設計されており、その構造とコンテンツは主に blocklet のメタデータファイル (`blocklet.yml`) から派生します。
-
-### メタデータからのナビゲーション
-
-サイドバーのナビゲーションは、`blocklet.yml` の `navigation` 配列から自動的に生成されます。コンポーネントは、`section` プロパティに `dashboard` を含むナビゲーション項目を具体的に探します。
-
-以下は、ダッシュボードナビゲーションを定義する方法の例です。
-
-```yaml blocklet.yml icon=mdi:file-document
-navigation:
-  - title: 'Home'
-    link: '/'
-    section: 'dashboard'
-    icon: 'mdi:home'
-    role: ['owner', 'admin', 'guest']
-  - title: 'Analytics'
-    link: '/analytics'
-    section: 'dashboard'
-    icon: 'mdi:chart-bar'
-    role: ['owner', 'admin']
-  - title: 'Settings'
-    link: '/settings'
-    section: 'dashboard'
-    icon: 'mdi:cog'
-    role: ['owner']
-    items:
-      - title: 'Profile'
-        link: '/settings/profile'
-      - title: 'Billing'
-        link: '/settings/billing'
-```
-
-### ロールベースのアクセス制御
-
-`Dashboard` コンポーネントは、ナビゲーションリンクに対してロールベースのアクセス制御 (RBAC) を強制します。各ナビゲーション項目は `role` プロパティを持つことができ、これはリンクを見ることが許可されているロールの配列です。
-
-- ナビゲーション項目に `role` プロパティがない場合、それは誰にでも表示されます。
-- 現在のユーザーが認証されていない場合、`guest` ロールを含む項目のみを見ることができます。
-- 現在のユーザーが認証されている場合、コンポーネントは彼らの `user.role` を各ナビゲーション項目の `role` 配列と比較します。一致がある場合にのみ項目が表示されます。
-- 親ナビゲーション項目は、その子の少なくとも1つが表示される場合にのみ表示されます。
-
-上記の `blocklet.yml` の例を使用すると：
-- `guest` ロールのユーザーは「Home」リンクのみを見ることができます。
-- `admin` ロールのユーザーは「Home」と「Analytics」を見ることができます。
-- `owner` ロールのユーザーは、「Settings」の下にあるネストされた「Profile」と「Billing」リンクを含むすべてのリンクを見ることができます。
-
-### アイコン
-
-ナビゲーション項目の `icon` プロパティは、[Iconify](https://icon-sets.iconify.design/) ライブラリのアイコン名に対応する文字列（例：`mdi:home`）である必要があります。画像ファイルへの完全な URL を提供することもできます。
-
-## カスタマイズ
-
-`Dashboard` はメタデータですぐに使えるように設計されていますが、より高度なカスタマイズのためのいくつかの props を提供しています。
-
-### ヘッダーアドオンのカスタマイズ
-
-`headerAddons` prop を使用して、デフォルトのヘッダーアドオン（例：テーマ切り替え、ロケールセレクター、セッションマネージャー）を変更できます。関数を渡すことで、新しい要素を追加したり、既存の要素を並べ替えたりすることができます。
-
-```javascript CustomHeader.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Button from '@mui/material/Button';
-
-function MyCustomButton() {
-  return <Button color="inherit" onClick={() => alert('Help!')}>Help</Button>;
-}
-
-export default function CustomDashboard() {
-  return (
-    <Dashboard
-      headerAddons={(existingAddons) => {
-        const customAddon = <MyCustomButton key="custom-help" />;
-        // Add the custom button before the other addons
-        return [customAddon, ...existingAddons];
-      }}
-    >
-      <p>Dashboard with a custom header button.</p>
-    </Dashboard>
-  );
-}
-```
-
-### リンクのプログラムによる追加
-
-`links` prop を使用すると、コードから動的にサイドバーのナビゲーションリンクを追加または変更できます。これは、アプリケーションの状態に依存するリンクに便利です。
-
-```javascript DynamicLinks.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Icon from '@arcblock/ux/lib/Icon';
-
-const useFeatureFlag = () => {
-  // 実際のアプリでは、ここでフィーチャーフラグサービスをチェックします
-  return true;
-};
-
-export default function DynamicDashboard() {
-  const isBetaFeatureEnabled = useFeatureFlag();
-
-  return (
-    <Dashboard
-      links={(existingLinks) => {
-        if (isBetaFeatureEnabled) {
-          const betaLink = {
-            id: 'beta-feature',
-            title: 'Beta Feature',
-            url: '/beta',
-            icon: <Icon name="mdi:test-tube" />,
-            external: true, // クライアントサイドのルーティングに必要
-          };
-          return [...existingLinks, betaLink];
-        }
-        return existingLinks;
-      }}
-    >
-      <p>This dashboard may have dynamic links.</p>
-    </Dashboard>
-  );
-}
-
-```
-
-## まとめ
-
-`Dashboard` コンポーネントは、アプリケーションのレイアウトを迅速に構築するための強力なツールです。blocklet メタデータを活用することで、構造化され、ロールを認識するナビゲーションシステムをすぐに提供します。より基本的なレイアウトコンポーネントについては、[Header](./components-layout-header.md) と [Footer](./components-layout-footer.md) のドキュメントを参照してください。

package/docs/components-layout-dashboard.md

@@ -1,187 +0,0 @@
-# Dashboard
-
-The `Dashboard` component provides a pre-built, responsive layout for blocklet applications, typically used for administrative interfaces or user-centric views. It automatically constructs a standard dashboard with a sidebar, header, and main content area by interpreting your blocklet's metadata. This component significantly reduces boilerplate code for building common application structures.
-
-The layout is composed of three primary sections: a persistent sidebar for navigation, a header for global actions and user information, and a main content area where the page-specific content is rendered.
-
-The following diagram illustrates the component's structure and its relationship with the blocklet metadata:
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Dashboard](assets/diagram/dashboard-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## Basic Usage
-
-To use the `Dashboard` component, simply wrap your page's content with it. The component will automatically render the header and sidebar around your content.
-
-```javascript MyDashboard.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-
-export default function MyDashboardPage() {
-  return (
-    <Dashboard>
-      <h1>Welcome to the Dashboard</h1>
-      <p>This is your main content area.</p>
-    </Dashboard>
-  );
-}
-```
-
-The children passed to the `Dashboard` component will be displayed in the main content area.
-
-## Props
-
-The `Dashboard` component accepts the following props to customize its behavior and appearance.
-
-<x-field-group>
-  <x-field data-name="children" data-type="React.ReactNode" data-required="true">
-    <x-field-desc markdown>The content to be rendered within the main content area of the dashboard layout.</x-field-desc>
-  </x-field>
-  <x-field data-name="meta" data-type="object" data-required="false">
-    <x-field-desc markdown>A blocklet metadata object. If provided, it will be merged with and override the default `window.blocklet` metadata. This is useful for testing or dynamically altering blocklet information.</x-field-desc>
-  </x-field>
-  <x-field data-name="fallbackUrl" data-type="string" data-required="false" data-default="publicPath">
-    <x-field-desc markdown>The URL to redirect to if the current authenticated user has no access to any navigation links based on their role. Set to `null` to disable this automatic redirection.</x-field-desc>
-  </x-field>
-  <x-field data-name="invalidPathFallback" data-type="function" data-required="false">
-    <x-field-desc markdown>A callback function that is executed when the current URL path does not match any of the available navigation links. The default behavior is to redirect to the first available link.</x-field-desc>
-  </x-field>
-  <x-field data-name="headerAddons" data-type="React.ReactNode | function" data-required="false">
-    <x-field-desc markdown>Allows for customization of the header's right-side addons. If a node is provided, it replaces all default addons. If a function is provided, it receives the default addons array as an argument, allowing you to add, remove, or reorder them.</x-field-desc>
-  </x-field>
-  <x-field data-name="sessionManagerProps" data-type="object" data-required="false">
-    <x-field-desc markdown>Props to be passed directly to the underlying `SessionUser` component in the header. This allows for customization of the user session menu, such as `showRole` or defining a custom `onLogout` handler.</x-field-desc>
-  </x-field>
-  <x-field data-name="links" data-type="array | function" data-required="false">
-    <x-field-desc markdown>Allows for programmatic modification of the sidebar navigation links. If an array is provided, its items are appended to the links generated from metadata. If a function is provided, it receives the metadata-generated links as an argument and should return a new array of links.</x-field-desc>
-  </x-field>
-  <x-field data-name="showDomainWarningDialog" data-type="boolean" data-required="false" data-default="true">
-    <x-field-desc markdown>If `true`, displays a warning dialog if the application is accessed from an untrusted domain.</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## How It Works
-
-The `Dashboard` component is designed to be "configuration-driven," deriving its structure and content primarily from the blocklet's metadata file (`blocklet.yml`).
-
-### Navigation from Metadata
-
-The sidebar navigation is automatically generated from the `navigation` array in your `blocklet.yml`. The component specifically looks for navigation items that include `dashboard` in their `section` property.
-
-Here is an example of how to define dashboard navigation:
-
-```yaml blocklet.yml icon=mdi:file-document
-navigation:
-  - title: 'Home'
-    link: '/'
-    section: 'dashboard'
-    icon: 'mdi:home'
-    role: ['owner', 'admin', 'guest']
-  - title: 'Analytics'
-    link: '/analytics'
-    section: 'dashboard'
-    icon: 'mdi:chart-bar'
-    role: ['owner', 'admin']
-  - title: 'Settings'
-    link: '/settings'
-    section: 'dashboard'
-    icon: 'mdi:cog'
-    role: ['owner']
-    items:
-      - title: 'Profile'
-        link: '/settings/profile'
-      - title: 'Billing'
-        link: '/settings/billing'
-```
-
-### Role-Based Access Control
-
-The `Dashboard` component enforces role-based access control (RBAC) on navigation links. Each navigation item can have a `role` property, which is an array of roles that are permitted to see the link.
-
-- If a navigation item does not have a `role` property, it is visible to everyone.
-- If the current user is not authenticated, they can only see items that include the `guest` role.
-- If the current user is authenticated, the component compares their `user.role` with the `role` array of each navigation item. The item is only displayed if there is a match.
-- A parent navigation item is only visible if at least one of its children is visible.
-
-Using the `blocklet.yml` example above:
-- A user with the `guest` role will only see the "Home" link.
-- A user with the `admin` role will see "Home" and "Analytics".
-- A user with the `owner` role will see all links, including the nested "Profile" and "Billing" links under "Settings".
-
-### Icons
-
-The `icon` property for a navigation item should be a string that corresponds to an icon name from the [Iconify](https://icon-sets.iconify.design/) library (e.g., `mdi:home`). You can also provide a full URL to an image file.
-
-## Customization
-
-While the `Dashboard` is designed to work out-of-the-box with metadata, it offers several props for more advanced customization.
-
-### Customizing Header Addons
-
-You can modify the default header addons (e.g., Theme Toggle, Locale Selector, Session Manager) using the `headerAddons` prop. By passing a function, you can add new elements or rearrange the existing ones.
-
-```javascript CustomHeader.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Button from '@mui/material/Button';
-
-function MyCustomButton() {
-  return <Button color="inherit" onClick={() => alert('Help!')}>Help</Button>;
-}
-
-export default function CustomDashboard() {
-  return (
-    <Dashboard
-      headerAddons={(existingAddons) => {
-        const customAddon = <MyCustomButton key="custom-help" />;
-        // Add the custom button before the other addons
-        return [customAddon, ...existingAddons];
-      }}
-    >
-      <p>Dashboard with a custom header button.</p>
-    </Dashboard>
-  );
-}
-```
-
-### Programmatically Adding Links
-
-The `links` prop allows you to add or modify sidebar navigation links dynamically from your code. This is useful for links that depend on application state.
-
-```javascript DynamicLinks.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Icon from '@arcblock/ux/lib/Icon';
-
-const useFeatureFlag = () => {
-  // In a real app, this would check a feature flag service
-  return true;
-};
-
-export default function DynamicDashboard() {
-  const isBetaFeatureEnabled = useFeatureFlag();
-
-  return (
-    <Dashboard
-      links={(existingLinks) => {
-        if (isBetaFeatureEnabled) {
-          const betaLink = {
-            id: 'beta-feature',
-            title: 'Beta Feature',
-            url: '/beta',
-            icon: <Icon name="mdi:test-tube" />,
-            external: true, // Required for client-side routing
-          };
-          return [...existingLinks, betaLink];
-        }
-        return existingLinks;
-      }}
-    >
-      <p>This dashboard may have dynamic links.</p>
-    </Dashboard>
-  );
-}
-
-```
-
-## Summary
-
-The `Dashboard` component is a powerful tool for quickly scaffolding application layouts. By leveraging blocklet metadata, it provides a structured, role-aware navigation system out of the box. For more foundational layout components, see the documentation for [Header](./components-layout-header.md) and [Footer](./components-layout-footer.md).

package/docs/components-layout-dashboard.zh-TW.md

@@ -1,185 +0,0 @@
-# Dashboard
-
-`Dashboard` 元件為 blocklet 應用程式提供了一個預先建置、響應式的佈局，通常用於管理介面或以使用者為中心的視圖。它透過解析 blocklet 的元資料，自動建構一個包含側邊欄、頁首和主要內容區域的標準儀表板。此元件顯著減少了建構通用應用程式結構所需的樣板程式碼。
-
-該佈局由三個主要部分組成：一個用於導覽的常駐側邊欄、一個用於全域操作和使用者資訊的頁首，以及一個呈現特定頁面內容的主要內容區域。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Dashboard](assets/diagram/dashboard-diagram-0.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 基本用法
-
-若要使用 `Dashboard` 元件，只需將您的頁面內容包裹在其中即可。該元件將自動在您的內容周圍呈現頁首和側邊欄。
-
-```javascript MyDashboard.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-
-export default function MyDashboardPage() {
-  return (
-    <Dashboard>
-      <h1>Welcome to the Dashboard</h1>
-      <p>This is your main content area.</p>
-    </Dashboard>
-  );
-}
-```
-
-傳遞給 `Dashboard` 元件的 children 將顯示在主要內容區域中。
-
-## 屬性 (Props)
-
-`Dashboard` 元件接受以下屬性 (props) 以自訂其行為和外觀。
-
-<x-field-group>
-  <x-field data-name="children" data-type="React.ReactNode" data-required="true">
-    <x-field-desc markdown>要在儀表板佈局的主要內容區域內呈現的內容。</x-field-desc>
-  </x-field>
-  <x-field data-name="meta" data-type="object" data-required="false">
-    <x-field-desc markdown>一個 blocklet 元資料物件。若提供，它將與預設的 `window.blocklet` 元資料合併並覆寫。這對於測試或動態更改 blocklet 資訊很有用。</x-field-desc>
-  </x-field>
-  <x-field data-name="fallbackUrl" data-type="string" data-required="false" data-default="publicPath">
-    <x-field-desc markdown>如果目前已驗證的使用者根據其角色無權存取任何導覽連結，則重新導向到的 URL。設定為 `null` 可停用此自動重新導向。</x-field-desc>
-  </x-field>
-  <x-field data-name="invalidPathFallback" data-type="function" data-required="false">
-    <x-field-desc markdown>當前 URL 路徑不符合任何可用導覽連結時執行的回呼函式。預設行為是重新導向到第一個可用的連結。</x-field-desc>
-  </x-field>
-  <x-field data-name="headerAddons" data-type="React.ReactNode | function" data-required="false">
-    <x-field-desc markdown>允許自訂頁首右側的附加元件。如果提供一個節點，它將取代所有預設的附加元件。如果提供一個函式，它會接收預設的附加元件陣列作為參數，讓您可以新增、移除或重新排序它們。</x-field-desc>
-  </x-field>
-  <x-field data-name="sessionManagerProps" data-type="object" data-required="false">
-    <x-field-desc markdown>直接傳遞給頁首底層 `SessionUser` 元件的 props。這允許自訂使用者會話選單，例如 `showRole` 或定義自訂的 `onLogout` 處理常式。</x-field-desc>
-  </x-field>
-  <x-field data-name="links" data-type="array | function" data-required="false">
-    <x-field-desc markdown>允許以程式化方式修改側邊欄導覽連結。如果提供一個陣列，其項目將附加到從元資料生成的連結中。如果提供一個函式，它會接收元資料生成的連結作為參數，並應返回一個新的連結陣列。</x-field-desc>
-  </x-field>
-  <x-field data-name="showDomainWarningDialog" data-type="boolean" data-required="false" data-default="true">
-    <x-field-desc markdown>若為 `true`，則在從不受信任的網域存取應用程式時顯示警告對話方塊。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## 運作方式
-
-`Dashboard` 元件被設計為「設定驅動」，其結構和內容主要來自 blocklet 的元資料檔案 (`blocklet.yml`)。
-
-### 透過元資料產生導覽
-
-側邊欄導覽是根據您 `blocklet.yml` 中的 `navigation` 陣列自動產生的。該元件會特別尋找其 `section` 屬性中包含 `dashboard` 的導覽項目。
-
-以下是如何定義儀表板導覽的範例：
-
-```yaml blocklet.yml icon=mdi:file-document
-navigation:
-  - title: 'Home'
-    link: '/'
-    section: 'dashboard'
-    icon: 'mdi:home'
-    role: ['owner', 'admin', 'guest']
-  - title: 'Analytics'
-    link: '/analytics'
-    section: 'dashboard'
-    icon: 'mdi:chart-bar'
-    role: ['owner', 'admin']
-  - title: 'Settings'
-    link: '/settings'
-    section: 'dashboard'
-    icon: 'mdi:cog'
-    role: ['owner']
-    items:
-      - title: 'Profile'
-        link: '/settings/profile'
-      - title: 'Billing'
-        link: '/settings/billing'
-```
-
-### 角色型存取控制
-
-`Dashboard` 元件對導覽連結強制執行角色型存取控制 (RBAC)。每個導覽項目都可以有一個 `role` 屬性，這是一個允許查看該連結的角色陣列。
-
-- 如果導覽項目沒有 `role` 屬性，則所有人皆可見。
-- 如果目前使用者未經驗證，他們只能看到包含 `guest` 角色的項目。
-- 如果目前使用者已驗證，元件會將其 `user.role` 與每個導覽項目的 `role` 陣列進行比較。只有在匹配的情況下，該項目才會顯示。
-- 只有在父導覽項目至少有一個子項目可見時，該父項目才可見。
-
-使用上面的 `blocklet.yml` 範例：
-- 具有 `guest` 角色的使用者只會看到「Home」連結。
-- 具有 `admin` 角色的使用者將看到「Home」和「Analytics」。
-- 具有 `owner` 角色的使用者將看到所有連結，包括「Settings」下的巢狀「Profile」和「Billing」連結。
-
-### 圖示
-
-導覽項目的 `icon` 屬性應為一個字串，對應於 [Iconify](https://icon-sets.iconify.design/) 圖示庫中的圖示名稱（例如 `mdi:home`）。您也可以提供一個指向圖片檔案的完整 URL。
-
-## 自訂
-
-雖然 `Dashboard` 設計為可透過元資料開箱即用，但它也提供了幾個屬性以進行更進階的自訂。
-
-### 自訂頁首附加元件
-
-您可以使用 `headerAddons` 屬性修改預設的頁首附加元件（例如，主題切換、語系選擇器、會話管理器）。透過傳遞一個函式，您可以新增元素或重新排列現有元素。
-
-```javascript CustomHeader.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Button from '@mui/material/Button';
-
-function MyCustomButton() {
-  return <Button color="inherit" onClick={() => alert('Help!')}>Help</Button>;
-}
-
-export default function CustomDashboard() {
-  return (
-    <Dashboard
-      headerAddons={(existingAddons) => {
-        const customAddon = <MyCustomButton key="custom-help" />;
-        // Add the custom button before the other addons
-        return [customAddon, ...existingAddons];
-      }}
-    >
-      <p>Dashboard with a custom header button.</p>
-    </Dashboard>
-  );
-}
-```
-
-### 以程式化方式新增連結
-
-`links` 屬性允許您從程式碼中動態新增或修改側邊欄導覽連結。這對於依賴應用程式狀態的連結很有用。
-
-```javascript DynamicLinks.jsx icon=logos:react
-import Dashboard from '@arcblock/blocklet-ui-react/lib/Dashboard';
-import Icon from '@arcblock/ux/lib/Icon';
-
-const useFeatureFlag = () => {
-  // 在實際應用程式中，這裡會檢查功能旗標服務
-  return true;
-};
-
-export default function DynamicDashboard() {
-  const isBetaFeatureEnabled = useFeatureFlag();
-
-  return (
-    <Dashboard
-      links={(existingLinks) => {
-        if (isBetaFeatureEnabled) {
-          const betaLink = {
-            id: 'beta-feature',
-            title: 'Beta Feature',
-            url: '/beta',
-            icon: <Icon name="mdi:test-tube" />,
-            external: true, // 客戶端路由所需
-          };
-          return [...existingLinks, betaLink];
-        }
-        return existingLinks;
-      }}
-    >
-      <p>This dashboard may have dynamic links.</p>
-    </Dashboard>
-  );
-}
-
-```
-
-## 總結
-
-`Dashboard` 元件是快速建構應用程式佈局的強大工具。透過利用 blocklet 元資料，它提供了一個開箱即用的、具備角色感知能力的結構化導覽系統。若需更基礎的佈局元件，請參閱 [Header](./components-layout-header.md) 和 [Footer](./components-layout-footer.md) 的文件。