@blocklet/ui-react 3.4.14 → 3.5.0

package/docs/how-to-guides.zh.md

@@ -1,413 +0,0 @@
-# 操作指南
-
-本节提供了使用该库的组件完成常见任务和实现特定工作流的实用分步指南。每个指南都设计为一套独立的操作说明，旨在帮助您高效地实现特定目标。
-
-<x-cards data-columns="2">
-  <x-card data-title="如何向 Header 添加自定义元素" data-icon="lucide:layout-template" data-href="#how-to-add-custom-elements-to-the-header">
-    学习如何使用 `addons` 渲染属性来扩展 `Header` 组件，添加自定义按钮、导航或其他交互元素。
-  </x-card>
-  <x-card data-title="如何处理可选组件依赖" data-icon="lucide:puzzle" data-href="#how-to-handle-optional-component-dependencies">
-    实现一个工作流，提示管理员按需安装所需组件，确保您的 Blocklet 功能顺利运行。
-  </x-card>
-  <x-card data-title="如何实现实时用户通知" data-icon="lucide:bell-ring" data-href="#how-to-implement-real-time-user-notifications">
-    使用 WebSockets 建立一个实时通知系统，让用户随时了解应用内的重要事件。
-  </x-card>
-  <x-card data-title="如何使用 BlockletStudio 发布资源" data-icon="lucide:rocket" data-href="#how-to-publish-resources-with-blockletstudio">
-    集成 `BlockletStudio` 组件，为发布和管理资源及依赖组件提供用户界面。
-  </x-card>
-</x-cards>
-
----
-
-## 如何向 Header 添加自定义元素
-
-`Header` 组件被设计为可扩展的。您可以利用 `addons` 属性，直接在页眉中添加自定义按钮、搜索栏或其他 React 组件。
-
-### 目标
-
-在主应用页眉中添加一个自定义的“聊天”按钮、一个搜索输入框以及其他操作图标。
-
-### 前提条件
-
-- 一个已安装 `@arcblock/ux` 库并能正常运行的 React 应用。
-- 一个已有的 `<Header>` 组件实例。更多信息，请参阅 [Header 组件文档](./components-layout-header.md)。
-
-### 步骤
-
-`addons` 属性接受一个渲染函数。该函数接收默认插件（如会话管理器）作为其第一个参数，让您能够决定将自定义元素放置在默认元素的相对位置。
-
-1.  **定义 `addons` 渲染属性**
-
-    在您的 `Header` 组件中，向 `addons` 属性传递一个函数。该函数应返回您想要渲染的 JSX。
-
-    ```jsx
-    <Header
-      meta={meta}
-      addons={(defaultAddons, { navigation }) => {
-        // 您的自定义组件将放在这里
-        return (
-          <>
-            {/* 渲染您的自定义组件 */}
-            {defaultAddons}
-          </>
-        );
-      }}
-    />
-    ```
-
-2.  **添加自定义组件**
-
-    在渲染函数内部，您可以添加任何您需要的组件。在此示例中，我们将添加一个标准的 Material-UI `Button`、几个用于图标的 `AddonButton` 组件和一个 `Divider`。
-
-3.  **与默认插件结合**
-
-    通常的做法是渲染传入函数的 `defaultAddons`。这可以确保像区域设置切换器和会话管理器这样的基本元素仍然显示。您可以将自定义组件放置在 `defaultAddons` 之前或之后。
-
-### 完整示例
-
-以下是一个完整的示例，演示了如何向页眉添加多个自定义元素。这包括导航、按钮和图标，它们与默认的会话管理器一起渲染。
-
-```javascript How to Add Custom Elements to the Header icon=logos:react
-import { Box, Divider, Button } from '@mui/material';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import { AddonButton } from '@arcblock/ux/lib/Header/addon-button';
-import NavMenu from '@arcblock/ux/lib/NavMenu';
-import SessionManager from '@arcblock/ux/lib/SessionManager';
-import Header from '@arcblock/ux/lib/Header';
-import { Icon } from '@iconify/react';
-
-// 用于演示的模拟数据
-const mockBlockletMeta = {
-  title: 'My App',
-  description: 'A great application',
-  logoUrl: 'https://www.arcblock.io/image-bin/uploads/eb1cf5d60cd85c42362920c49e3768cb.svg'
-};
-
-const mockSessionContextValue = {
-  session: {
-    user: {
-      fullName: 'Demo User',
-      did: 'z1ex...',
-      role: 'admin',
-    },
-    // ... 其他会话属性
-  },
-};
-
-export default function CustomHeaderGuide() {
-  const meta = {
-    ...mockBlockletMeta,
-    enableConnect: true,
-    enableLocale: true,
-  };
-
-  return (
-    <SessionContext.Provider value={mockSessionContextValue}>
-      <Header
-        meta={meta}
-        homeLink="https://www.arcblock.io"
-        addons={(defaultAddons, { navigation }) => (
-          <>
-            {/* 1. 添加自定义导航 */}
-            {navigation.navItems?.length > 0 && (
-              <NavMenu
-                activeId={navigation.activeId}
-                items={navigation.navItems}
-                className="header-nav"
-              />
-            )}
-            {/* 2. 添加自定义按钮 */}
-            <Button variant="contained" color="primary" size="small">
-              Button
-            </Button>
-            {/* 3. 添加自定义图标按钮 */}
-            <AddonButton icon={<Icon icon="tabler:message-circle" />}>Chat</AddonButton>
-            <AddonButton icon={<Icon icon="tabler:bell" />} />
-            <Divider orientation="vertical" flexItem sx={{ height: 12, alignSelf: 'center' }} />
-            {/* 4. 渲染默认插件（包括会话管理器） */}
-            {defaultAddons}
-          </>
-        )}
-      />
-    </SessionContext.Provider>
-  );
-}
-```
-
----
-
-## 如何处理可选组件依赖
-
-许多 Blocklet 依赖其他组件来提供特定功能。`ComponentInstaller` 允许您构建依赖于可选组件的功能，如果这些组件未安装，它会为管理员提供一个用户友好的安装方式。
-
-### 目标
-
-保护一个需要安装其他 Blocklet 组件才能使用的功能。如果该组件缺失，管理员将看到一个安装界面，而其他用户则什么也看不到。
-
-### 前提条件
-
-- 您的应用中有一个依赖于其他组件的功能（例如，一个需要“媒体套件”Blocklet 的“媒体管理器”）。
-- 组件依赖项的 DID。
-- 熟悉用户角色（`owner`、`admin`）。
-
-### 步骤
-
-1.  **导入 `ComponentInstaller`**
-
-    首先，从库中导入该组件。
-
-    ```javascript
-    import ComponentInstaller from '@arcblock/ux/lib/ComponentInstaller';
-    ```
-
-2.  **包裹您的功能**
-
-    用 `ComponentInstaller` 包裹具有依赖项的组件或功能。
-
-3.  **提供组件 DID**
-
-    将所需组件的 DID 传递给 `did` 属性。如果存在多个依赖项，这可以是一个字符串，也可以是一个字符串数组。
-
-4.  **为非管理员配置行为**
-
-    使用 `noPermissionMute` 属性。当设置为 `true` 时，没有权限安装组件的用户（即非管理员）将不会看到安装提示。您可以提供一个 `fallback` 组件来替代显示。
-
-### 完整示例
-
-在此场景中，我们有一个 `MyFeatureButton`，它只应在 DID 为 `z8ia...` 的组件安装后才渲染。
-
-```javascript How to Handle Optional Component Dependencies icon=logos:react
-import ComponentInstaller from '@arcblock/ux/lib/ComponentInstaller';
-import { Button } from '@mui/material';
-
-const REQUIRED_COMPONENT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9'; // 示例 DID
-
-// 这是需要依赖项的组件
-function MyFeatureButton() {
-  return <Button variant="contained">Use Awesome Feature</Button>;
-}
-
-export default function OptionalComponentGuide() {
-  return (
-    <ComponentInstaller
-      // 要检查的组件的 DID
-      did={REQUIRED_COMPONENT_DID}
-      // 允许查看安装程序 UI 的角色列表
-      roles={['owner', 'admin']}
-      // 如果为 true，非管理员将看不到安装程序 UI
-      noPermissionMute
-      // 可选：如果组件未安装，向非管理员显示的内容
-      fallback={<div>This feature is not available.</div>}
-      // 成功安装后触发的回调
-      onInstalled={() => console.log('Component was installed successfully!')}
-    >
-      {/* 只有在组件已安装的情况下才会渲染此子组件 */}
-      <MyFeatureButton />
-    </ComponentInstaller>
-  );
-}
-```
-
-当管理员访问此页面且组件未安装时，他们会看到一个允许他们安装的弹出窗口。普通用户将看到回退消息。一旦安装，所有用户都将看到 `MyFeatureButton`。
-
----
-
-## 如何实现实时用户通知
-
-您可以通过监听来自 Blocklet Server 的 WebSocket 事件，为用户提供实时反馈和通知。`NotificationAddon` 组件是一个即用型解决方案，用于在页眉中显示未读通知计数。
-
-### 目标
-
-在应用页眉中添加一个通知铃铛图标，该图标会显示带有未读通知数量的徽章，并实时更新。
-
-### 前提条件
-
-- 您的 Blocklet 必须运行在支持通知服务的 Blocklet Server 版本上（`1.16.42` 或更高）。
-- 一个用于放置通知图标的 `<Header>` 组件。
-- 一个提供用户信息的会话上下文。
-
-### 关键概念
-
-- **WebSocket 事件**：当通知被创建或读取时，Blocklet Server 会广播事件。
-- **`useListenWsClient`**：一个用于获取特定频道（例如 'user'）的 WebSocket 客户端实例的钩子。
-- **事件命名**：事件的作用域限定于用户和 Blocklet。新通知的格式为 `${blocklet.did}/${user.did}/notification:blocklet:create`。
-
-### 步骤
-
-`NotificationAddon` 组件封装了监听 WebSocket 事件和显示未读计数所需的所有逻辑。
-
-1.  **导入 `NotificationAddon`**
-
-    ```javascript
-    import NotificationAddon from '@arcblock/ux/lib/common/notification-addon';
-    ```
-
-2.  **添加到 Header `addons`**
-
-    使用此组件最简单的方法是将其添加到 `Header` 的 `addons` 渲染属性中。
-
-3.  **传递会话对象**
-
-    `NotificationAddon` 组件需要 `session` 对象来识别当前用户并管理未读计数状态。
-
-### 完整示例
-
-此示例展示了如何将 `NotificationAddon` 集成到 `Header` 中。它将自动连接到 WebSocket，监听事件，并更新徽章计数。
-
-```javascript How to Implement Real-time User Notifications icon=logos:react
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Header from '@arcblock/ux/lib/Header';
-import NotificationAddon from '@arcblock/ux/lib/common/notification-addon';
-
-// 用于演示的模拟数据
-const mockBlockletMeta = {
-  title: 'My App',
-  description: 'A great application',
-  logoUrl: 'https://www.arcblock.io/image-bin/uploads/eb1cf5d60cd85c42362920c49e3768cb.svg'
-};
-
-const mockSessionContextValue = {
-  session: {
-    user: {
-      fullName: 'Demo User',
-      did: 'z1ex...',
-      role: 'admin',
-    },
-    unReadCount: 3, // 初始未读计数
-    setUnReadCount: () => {}, // 状态设置函数
-    // ... 其他会话属性
-  },
-};
-
-export default function NotificationGuide() {
-  const meta = { ...mockBlockletMeta, enableConnect: true };
-
-  return (
-    <SessionContext.Provider value={mockSessionContextValue}>
-      <Header
-        meta={meta}
-        addons={(defaultAddons) => (
-          <>
-            {/* NotificationAddon 将处理实时更新 */}
-            <NotificationAddon session={mockSessionContextValue.session} />
-            {defaultAddons}
-          </>
-        )}
-      />
-    </SessionContext.Provider>
-  );
-}
-```
-
-当为已登录用户创建新通知时，铃铛图标上的徽章计数将自动增加。点击该图标将导航用户到他们的通知页面。
-
----
-
-## 如何使用 BlockletStudio 发布资源
-
-`BlockletStudio` 组件提供了一个完整的、可嵌入的 UI，用于发布资源和组件。它处理用户连接、资源选择和发布流程，将一个复杂的工作流简化为一个单一的组件。
-
-### 目标
-
-添加一个按钮，该按钮可以打开一个对话框，允许用户从 Blocklet 中选择并发布文件和依赖组件。
-
-### 前提条件
-
-- 您的 Blocklet 中有一个 API 端点，用于返回可用资源列表。
-- 提供发布 UI 的组件（“工作室”组件）的 DID。
-
-### 步骤
-
-1.  **导入 `BlockletStudio` 并管理状态**
-
-    您需要使用组件状态来管理工作室对话框的可见性。
-
-    ```javascript
-    import { useState } from 'react';
-    import { BlockletStudio } from '@arcblock/ux/lib/BlockletStudio';
-    import { Button, CircularProgress } from '@mui/material';
-    ```
-
-2.  **渲染组件**
-
-    将 `<BlockletStudio />` 组件放置在您的应用中，并使用 `open` 和 `setOpen` 属性控制其可见性。
-
-3.  **配置基本属性**
-
-    - `componentDid`：提供发布服务的工作室 Blocklet 的 DID。
-    - `title`、`description`：正在发布的项目的元数据。
-    - `resourcesParams`：作为查询参数传递给您的资源获取 API 的对象。
-    - `components`：要预选或必须包含的组件数组。
-    - `resources`：指定要预选的资源的对象。
-
-4.  **处理生命周期事件**
-
-    使用 `onOpened`、`onUploaded` 和 `onReleased` 回调来响应发布生命周期中的事件，例如隐藏加载指示器或显示成功消息。
-
-### 完整示例
-
-此示例展示了一个按钮，点击后会打开 `BlockletStudio` 对话框。它还演示了如何管理加载状态以提供更好的用户体验。
-
-```javascript How to Publish Resources with BlockletStudio icon=logos:react
-import { useState } from 'react';
-import { Button, CircularProgress } from '@mui/material';
-import { BlockletStudio } from '@arcblock/ux/lib/BlockletStudio';
-
-// 提供工作室/发布 UI 的 Blocklet 的 DID
-const AI_STUDIO_COMPONENT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9'; // 示例 DID
-
-export default function PublisherGuide() {
-  const [isStudioOpen, setStudioOpen] = useState(false);
-  const [isOpening, setOpening] = useState(false);
-
-  const handleShowDialog = () => {
-    setOpening(true);
-    setStudioOpen(true);
-  };
-
-  return (
-    <>
-      <Button
-        variant="contained"
-        onClick={handleShowDialog}
-        disabled={isOpening}
-        startIcon={isOpening ? <CircularProgress size={16} /> : null}>
-        Publish to Studio
-      </Button>
-
-      <BlockletStudio
-        // 控制对话框的可见性
-        open={isStudioOpen}
-        setOpen={setStudioOpen}
-        // 已发布项目的基本信息
-        title="My Demo Project"
-        description="This is a project published from my blocklet."
-        // 工作室服务组件的 DID
-        componentDid={AI_STUDIO_COMPONENT_DID}
-        // 发送到您的 Blocklet 资源 API 的参数
-        resourcesParams={{ projectId: 'test-project-123' }}
-        // 预选组件
-        components={[
-          { did: 'z8ia3xzq2tMq8CRHfaXj1BTYJyYnEcHbqP8cJ', included: true, required: true },
-          { did: 'z2qZyjnsRffFtn2PDnDwDHTRbAu53RpKqDtFZ', included: true, required: false },
-        ]}
-        // 预选资源
-        resources={{
-          // 键是资源提供者 Blocklet 的 DID
-          z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB: [
-            'template-448698592710885376',
-            'example-448698592710885376',
-          ],
-        }}
-        // 事件处理程序
-        onOpened={() => setOpening(false)}
-        onUploaded={() => alert('Upload complete!')}
-        onReleased={() => {
-          alert('Successfully released!');
-          setStudioOpen(false);
-        }}
-      />
-    </>
-  );
-}
-```

package/docs/overview.ja.md

@@ -1,51 +0,0 @@
-# 概要
-
-`@blocklet/ui-react`ライブラリは、Blockletと呼ばれるアプリケーションの開発を加速するために設計された、必須のReactコンポーネントのコレクションを提供します。これは、Blockletのメタデータをインテリジェントに使用することで、一般的なユーザーインターフェース要素の作成を合理化し、開発者が最小限の労力で一貫性のある機能豊富なUIを構築できるようにします。
-
-このライブラリは、Material-UIのテーマ付き拡張である`@arcblock/ux`を基盤として構築されています。この基盤により、すべてのコンポーネントが堅牢で、アクセシビリティが高く、アプリケーションのブランディングに合わせて簡単にカスタマイズできることが保証されます。
-
-## 解決する課題
-
-現代のWebアプリケーションでは、レイアウト、ユーザー管理、通知のために標準的なUIコンポーネントのセットがしばしば必要とされます。これらをプロジェクトごとにゼロから実装するのは時間がかかり、一貫性の欠如につながる可能性があります。Blocklet UI Reactライブラリは、Blockletのメタデータ（`blocklet.yml`）に基づいて自動的に設定される、事前に構築されたコンポーネントを提供することで、この問題に対処します。
-
-このメタデータ駆動のアプローチは、アプリケーション名、ロゴ、ナビゲーションリンク、テーマカラーなどの要素がコンポーネント全体に自動的に適用されることを意味し、定型的なコードを大幅に削減し、ブランドの一貫性を確保します。
-
-## コアアーキテクチャ
-
-このライブラリのアーキテクチャは、シンプルさと自動化を目的として設計されています。`Header`や`Footer`のようなコンポーネントがレンダリングされると、`window.blocklet`オブジェクトから設定データを読み取ります。このオブジェクトは、Blocklet Serverによって`blocklet.yml`ファイルから読み込まれます。これにより、UIの構造とブランディングを中央の設定ファイルで定義でき、コンポーネントはそれに応じて適応します。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-diagram-0.ja.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 主な機能
-
--   **メタデータ駆動:** `blocklet.yml`で定義されたBlockletの名前、ロゴ、ナビゲーション構造を使用して、`Header`や`Footer`などのコンポーネントを自動的に設定します。
--   **統合されたセッション管理:** コンポーネントはDID Connectセッションとシームレスに統合し、ユーザープロファイル情報、セッションコントロール、およびナビゲーションリンクへのロールベースのアクセスを自動的に表示します。
--   **レスポンシブレイアウト:** `Dashboard`のような強力なレイアウトコンポーネントが含まれており、管理インターフェースのためのレスポンシブな構造をすぐに提供します。
--   **コンポーネント管理:** `ComponentInstaller`や`BlockletStudio`などのツールを提供し、Blockletエコシステム内での依存関係やリソースの管理を支援します。
-
-## コアコンポーネント
-
-ライブラリはいくつかの主要なモジュールに整理されており、それぞれがアプリケーションUIの特定の領域に対応しています。
-
-<x-cards data-columns="2">
-  <x-card data-title="Layout" data-icon="lucide:layout-template" data-href="/components/layout">
-    Header、Footer、Dashboardのような主要コンポーネントで、Blockletアプリケーションの主要な構造を形成します。
-  </x-card>
-  <x-card data-title="User Management" data-icon="lucide:users" data-href="/components/user-management">
-    ユーザープロファイル、セッション管理、組織の切り替えを処理するための一連のコンポーネント。
-  </x-card>
-  <x-card data-title="Component Management" data-icon="lucide:box" data-href="/components/component-management">
-    アプリケーション内でBlockletコンポーネントを動的にインストール、公開、管理するためのツール。
-  </x-card>
-  <x-card data-title="Utilities" data-icon="lucide:wrench" data-href="/components/utilities">
-    多機能なIconコンポーネントやテーマプロバイダーなど、ヘルパーコンポーネントとユーティリティのコレクション。
-  </x-card>
-</x-cards>
-
-## まとめ
-
-`@blocklet/ui-react`ライブラリを活用することで、開発時間を大幅に短縮し、アプリケーション独自の機能に集中することができます。メタデータ駆動のアプローチは一貫性を確保し、一般的なUI要素の管理を簡素化します。
-
-アプリケーションの構築を開始するには、[はじめに](./getting-started.md)ガイドに進み、ライブラリのインストールと最初のコンポーネントのレンダリングに関するステップバイステップのチュートリアルをご覧ください。

package/docs/overview.md

@@ -1,51 +0,0 @@
-# Overview
-
-The `@blocklet/ui-react` library provides a collection of essential React components designed to accelerate the development of applications, known as Blocklets. It streamlines the creation of common user interface elements by intelligently using the blocklet's metadata, enabling developers to build consistent and feature-rich UIs with minimal effort.
-
-This library is built upon `@arcblock/ux`, which is a themed extension of Material-UI. This foundation ensures that all components are robust, accessible, and easily customizable to fit your application's branding.
-
-## The Problem It Solves
-
-Modern web applications often require a standard set of UI components for layout, user management, and notifications. Implementing these from scratch for every project is time-consuming and can lead to inconsistencies. The Blocklet UI React library addresses this by providing pre-built components that automatically configure themselves based on your blocklet's metadata (`blocklet.yml`).
-
-This metadata-driven approach means that elements like your application's name, logo, navigation links, and theme colors are automatically applied across components, drastically reducing boilerplate code and ensuring brand consistency.
-
-## Core Architecture
-
-The library's architecture is designed for simplicity and automation. When a component like `Header` or `Footer` is rendered, it reads configuration data from the `window.blocklet` object, which is populated by the Blocklet Server from your `blocklet.yml` file. This allows you to define your UI's structure and branding in a central configuration file, and the components adapt accordingly.
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## Key Features
-
--   **Metadata-Driven:** Automatically configures components like `Header` and `Footer` using your blocklet's name, logo, and navigation structure defined in `blocklet.yml`.
--   **Integrated Session Management:** Components seamlessly integrate with DID Connect sessions, automatically displaying user profile information, session controls, and role-based access to navigation links.
--   **Responsive Layouts:** Includes powerful layout components like `Dashboard` that provide a responsive structure for administrative interfaces out of the box.
--   **Component Management:** Offers tools like `ComponentInstaller` and `BlockletStudio` to help manage dependencies and resources within the Blocklet ecosystem.
-
-## Core Components
-
-The library is organized into several key modules, each addressing a specific area of application UI.
-
-<x-cards data-columns="2">
-  <x-card data-title="Layout" data-icon="lucide:layout-template" data-href="/components/layout">
-    Primary components like Header, Footer, and Dashboard that form the main structure of a blocklet application.
-  </x-card>
-  <x-card data-title="User Management" data-icon="lucide:users" data-href="/components/user-management">
-    A suite of components for handling user profiles, session management, and organization switching.
-  </x-card>
-  <x-card data-title="Component Management" data-icon="lucide:box" data-href="/components/component-management">
-    Tools for dynamically installing, publishing, and managing blocklet components within an application.
-  </x-card>
-  <x-card data-title="Utilities" data-icon="lucide:wrench" data-href="/components/utilities">
-    A collection of helper components and utilities, such as a versatile Icon component and theme providers.
-  </x-card>
-</x-cards>
-
-## Summary
-
-By leveraging the `@blocklet/ui-react` library, you can significantly reduce development time and focus on your application's unique features. The metadata-driven approach ensures consistency and simplifies the management of common UI elements.
-
-To start building your application, proceed to the [Getting Started](./getting-started.md) guide for a step-by-step tutorial on installing the library and rendering your first components.

package/docs/overview.zh-TW.md

@@ -1,51 +0,0 @@
-# 概覽
-
-`@blocklet/ui-react` 程式庫提供了一系列必要的 React 元件，旨在加速應用程式（稱為 Blocklet）的開發。它透過智慧地使用 blocklet 的元資料，簡化了通用使用者介面元素的建立過程，讓開發者能以最少的精力建構出一致且功能豐富的使用者介面。
-
-此程式庫建構於 `@arcblock/ux` 之上，後者是 Material-UI 的主題化擴充。這個基礎確保了所有元件都堅固、易於存取且易於自訂，以符合您應用程式的品牌形象。
-
-## 解決的問題
-
-現代 Web 應用程式通常需要一套標準的 UI 元件來進行佈局、使用者管理和通知。為每個專案從頭開始實作這些元件既耗時又可能導致不一致。Blocklet UI React 程式庫透過提供預先建構的元件來解決此問題，這些元件會根據您的 blocklet 元資料（`blocklet.yml`）自動進行設定。
-
-這種由元資料驅動的方法意味著，諸如您應用程式的名稱、標誌、導覽連結和主題顏色等元素會自動應用於所有元件，從而大幅減少樣板程式碼並確保品牌一致性。
-
-## 核心架構
-
-此程式庫的架構設計旨在簡潔與自動化。當 `Header` 或 `Footer` 等元件被渲染時，它會從 `window.blocklet` 物件中讀取設定資料，該物件由 Blocklet Server 從您的 `blocklet.yml` 檔案中填入。這讓您可以在一個中央設定檔中定義 UI 的結構和品牌，而元件會相應地進行調整。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-diagram-0.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 主要特色
-
--   **元資料驅動：** 使用您在 `blocklet.yml` 中定義的 blocklet 名稱、標誌和導覽結構，自動設定 `Header` 和 `Footer` 等元件。
--   **整合式階段作業管理：** 元件與 DID Connect 階段作業無縫整合，自動顯示使用者個人資料資訊、階段作業控制，以及基於角色的導覽連結存取權限。
--   **響應式佈局：** 包含強大的佈局元件，如 `Dashboard`，可立即為管理介面提供響應式結構。
--   **元件管理：** 提供 `ComponentInstaller` 和 `BlockletStudio` 等工具，以協助在 Blocklet 生態系統中管理相依性和資源。
-
-## 核心元件
-
-此程式庫分為幾個關鍵模組，每個模組處理應用程式 UI 的特定領域。
-
-<x-cards data-columns="2">
-  <x-card data-title="佈局" data-icon="lucide:layout-template" data-href="/components/layout">
-    構成 blocklet 應用程式主要結構的核心元件，如 Header、Footer 和 Dashboard。
-  </x-card>
-  <x-card data-title="使用者管理" data-icon="lucide:users" data-href="/components/user-management">
-    一套用於處理使用者個人資料、階段作業管理和組織切換的元件。
-  </x-card>
-  <x-card data-title="元件管理" data-icon="lucide:box" data-href="/components/component-management">
-    用於在應用程式內動態安裝、發布和管理 blocklet 元件的工具。
-  </x-card>
-  <x-card data-title="公用程式" data-icon="lucide:wrench" data-href="/components/utilities">
-    一系列輔助元件和公用程式，例如多功能的圖示元件和主題提供者。
-  </x-card>
-</x-cards>
-
-## 總結
-
-透過利用 `@blocklet/ui-react` 程式庫，您可以大幅縮短開發時間，並專注於應用程式的獨特功能。由元資料驅動的方法確保了一致性，並簡化了通用 UI 元素的管理。
-
-要開始建構您的應用程式，請參閱 [入門指南](./getting-started.md)，以取得安裝程式庫和渲染第一個元件的逐步教學。

package/docs/overview.zh.md

@@ -1,51 +0,0 @@
-# 概述
-
-`@blocklet/ui-react` 库提供了一系列核心 React 组件，旨在加速 Blocklet 应用程序的开发。它通过智能地利用 blocklet 的元数据来简化通用用户界面元素的创建，使开发人员能够以最少的工作量构建一致且功能丰富的 UI。
-
-该库基于 `@arcblock/ux` 构建，后者是 Material-UI 的一个主题扩展。这一基础确保了所有组件都功能强大、易于访问，并且可以轻松定制以适应您的应用程序品牌。
-
-## 它解决的问题
-
-现代 Web 应用程序通常需要一套标准的 UI 组件用于布局、用户管理和通知。为每个项目从头开始实施这些组件非常耗时，并可能导致不一致性。Blocklet UI React 库通过提供预构建的组件来解决这个问题，这些组件会根据您的 blocklet 元数据（`blocklet.yml`）自动进行配置。
-
-这种元数据驱动的方法意味着，诸如应用程序名称、徽标、导航链接和主题颜色等元素会自动应用于所有组件，从而极大地减少了样板代码并确保了品牌一致性。
-
-## 核心架构
-
-该库的架构设计旨在实现简洁和自动化。当渲染 `Header` 或 `Footer` 等组件时，它会从 `window.blocklet` 对象中读取配置数据，该对象由 Blocklet Server 从您的 `blocklet.yml` 文件中填充。这使您能够在一个中央配置文件中定义 UI 的结构和品牌，而组件会相应地进行调整。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-diagram-0.zh.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 主要特性
-
--   **元数据驱动：** 使用您在 `blocklet.yml` 中定义的 blocklet 名称、徽标和导航结构，自动配置 `Header` 和 `Footer` 等组件。
--   **集成会话管理：** 组件与 DID Connect 会话无缝集成，自动显示用户个人资料信息、会话控制以及基于角色的导航链接访问权限。
--   **响应式布局：** 包含 `Dashboard` 等强大的布局组件，为管理界面提供开箱即用的响应式结构。
--   **组件管理：** 提供 `ComponentInstaller` 和 `BlockletStudio` 等工具，帮助在 Blocklet 生态系统中管理依赖项和资源。
-
-## 核心组件
-
-该库分为几个关键模块，每个模块都针对应用程序 UI 的一个特定领域。
-
-<x-cards data-columns="2">
-  <x-card data-title="布局" data-icon="lucide:layout-template" data-href="/components/layout">
-    构成 blocklet 应用程序主要结构的主要组件，如 Header、Footer 和 Dashboard。
-  </x-card>
-  <x-card data-title="用户管理" data-icon="lucide:users" data-href="/components/user-management">
-    一套用于处理用户个人资料、会话管理和组织切换的组件。
-  </x-card>
-  <x-card data-title="组件管理" data-icon="lucide:box" data-href="/components/component-management">
-    用于在应用程序内动态安装、发布和管理 blocklet 组件的工具。
-  </x-card>
-  <x-card data-title="实用工具" data-icon="lucide:wrench" data-href="/components/utilities">
-    一系列辅助组件和实用工具，例如通用的 Icon 组件和主题提供程序。
-  </x-card>
-</x-cards>
-
-## 总结
-
-通过利用 `@blocklet/ui-react` 库，您可以显著减少开发时间，专注于应用程序的独特功能。元数据驱动的方法确保了一致性，并简化了常用 UI 元素的管理。
-
-要开始构建您的应用程序，请参阅 [入门指南](./getting-started.md)，其中提供了关于如何安装该库并渲染您的第一个组件的分步教程。

package/glossary.md

@@ -1,12 +0,0 @@
-## Component Name
-Header
-Footer
-Dashboard
-BlockletStudio
-ComponentInstaller
-PublishComponent
-AddComponent
-CheckComponent
-NotificationComponent
-UserCenter
-UserSessions