mirror of
https://github.com/dream-num/univer.git
synced 2026-10-02 04:24:34 +08:00
docs: init doc site structure (#599)
* docs: init doc fold structure * docs: add online playground and images --------- Co-authored-by: Wenzhao Hu <wzhudev@gmail.com>
This commit is contained in:
Wenzhao Hu
@@ -10,7 +10,7 @@ Univer is an open source collaborative solution that aims to empower the collabo
|
||||
|
||||
We provide JavaScript part of code in the repository, including a canvas-based framework for building documents, spreadsheets, slides.
|
||||
|
||||
> ⚠️ This project is still in development, only for testing and learning, not for production.
|
||||
> ⚠️ This project is still in heavy development.
|
||||
|
||||
## Demo
|
||||
|
||||
@@ -18,22 +18,22 @@ We provide JavaScript part of code in the repository, including a canvas-based f
|
||||
|
||||
## Packages
|
||||
|
||||
| Name | Description | Version |
|
||||
| :--- | :---------- | :------ |
|
||||
| [base-doc](./packages/base-doc) | - | - |
|
||||
| [base-formula-engine](./packages/base-formula-engine) | - | - |
|
||||
| [base-numfmt-engine](./packages/base-numfmt-engine) | - | - |
|
||||
| [base-render](./packages/base-render) | - | - |
|
||||
| [base-sheets](./packages/base-sheets) | - | - |
|
||||
| [base-ui](./packages/base-ui) | - | - |
|
||||
| [core](./packages/core) | - | - |
|
||||
| [design](./packages/design) | - | - |
|
||||
| [rpc](./packages/rpc) | - | - |
|
||||
| [sheets-plugin-formula](./packages/sheets-plugin-formula) | - | - |
|
||||
| [sheets-plugin-formula-ui](./packages/sheets-plugin-formula-ui) | - | - |
|
||||
| [sheets-plugin-numfmt](./packages/sheets-plugin-numfmt) | - | - |
|
||||
| [ui-plugin-docs](./packages/ui-plugin-docs) | - | - |
|
||||
| [ui-plugin-sheets](./packages/ui-plugin-sheets) | - | - |
|
||||
| Name | Description | Version |
|
||||
| :-------------------------------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------- |
|
||||
| [base-doc](./packages/base-doc) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-doc) |
|
||||
| [base-formula-engine](./packages/base-formula-engine) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-formula-engine) |
|
||||
| [base-numfmt-engine](./packages/base-numfmt-engine) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-numfmt-engine) |
|
||||
| [base-render](./packages/base-render) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-render) |
|
||||
| [base-sheets](./packages/base-sheets) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-sheets) |
|
||||
| [base-ui](./packages/base-ui) | - | [](https://badge.fury.io/js/@univerjs%2Fbase-ui) |
|
||||
| [core](./packages/core) | - | [](https://badge.fury.io/js/@univerjs%2Fcore) |
|
||||
| [design](./packages/design) | - | [](https://badge.fury.io/js/@univerjs%2Fdesign) |
|
||||
| [rpc](./packages/rpc) | - | [](https://badge.fury.io/js/@univerjs%2Frpc) |
|
||||
| [sheets-plugin-formula](./packages/sheets-plugin-formula) | - | [](https://badge.fury.io/js/@univerjs%2Fsheets-plugin-formula) |
|
||||
| [sheets-plugin-formula-ui](./packages/sheets-plugin-formula-ui) | - | [](https://badge.fury.io/js/@univerjs%2Fsheets-plugin-formula-ai) |
|
||||
| [sheets-plugin-numfmt](./packages/sheets-plugin-numfmt) | - | [](https://badge.fury.io/js/@univerjs%2Fsheets-plugin-numfmt) |
|
||||
| [ui-plugin-docs](./packages/ui-plugin-docs) | - | [](https://badge.fury.io/js/@univerjs%2Fui-plugin-docs) |
|
||||
| [ui-plugin-sheets](./packages/ui-plugin-sheets) | - | [](https://badge.fury.io/js/@univerjs%2Fui-plugin-sheets) |
|
||||
|
||||
## Contribution
|
||||
|
||||
@@ -78,217 +78,3 @@ Univer formula engine, supports asynchronous calculation, lambda function and ra
|
||||
---
|
||||
|
||||
Copyright DreamNum Inc. 2023-present
|
||||
|
||||
<!--
|
||||
## Development Plan
|
||||
|
||||
### Sheets
|
||||
|
||||
> The goal of the first phase, [consistent with the function of luckysheet2.0 version](https://dream-num.github.io/LuckysheetDocs/guide/#features)
|
||||
|
||||
##### 🛠️Formatting
|
||||
|
||||
- **Styling** `done`
|
||||
- **Conditional formatting** `2023Q1`
|
||||
- **Align or rotate text** `done`
|
||||
- **Support text truncation, overflow, automatic line wrapping** `done`
|
||||
- **Data types** `done`
|
||||
- **currency, percentages, decimals, dates**
|
||||
- **Custom**
|
||||
- **Cell segmentation style** `done`
|
||||
|
||||
##### 🧬Cells
|
||||
|
||||
- **Move cells by drag and dropping** `done`
|
||||
- **Fill handle** `2023Q1`
|
||||
- **Auto Fill Options** `2023Q1`
|
||||
- **Multiple selection** `2023Q1`
|
||||
- **Find and replace** `2023Q2`
|
||||
- **Location** `2023Q4`
|
||||
- **Merge cells** `done`
|
||||
- **Data validation** `2023Q2`
|
||||
|
||||
##### 🖱️Row & columns
|
||||
|
||||
- **Hide, Insert, Delete rows and columns** `2023Q1`
|
||||
- **Frozen rows and columns** `2023Q1`
|
||||
- **Split text** `2023Q4`
|
||||
|
||||
##### 🔨Operation
|
||||
|
||||
- **Undo/Redo** `2023Q1`
|
||||
- **Copy/Paste/Cut** `2023Q1`
|
||||
- **Hot key** `2023Q2`
|
||||
- **Format Painter** `2023Q4`
|
||||
- **Selection by drag and dropping** `2023Q1`
|
||||
|
||||
##### ⚙️Formulas & functions
|
||||
|
||||
- **formula engine (array formula, named, lambda)** `done`
|
||||
- **Built-in formulas** `2023Q1 - 2023Q4 finished according to the frequency of use`
|
||||
- **Remote formulas** `2023Q4`
|
||||
- **Custom** `2023Q4`
|
||||
|
||||
##### 📐Tables
|
||||
|
||||
- **Filters** `2023Q2`
|
||||
- **Sort** `2023Q2`
|
||||
|
||||
##### 📈Pivot table
|
||||
|
||||
- **Arrange fields** `2023Q3`
|
||||
- **Aggregation** `2023Q3`
|
||||
- **Filter data** `2023Q4`
|
||||
- **Drill down** `2023Q4`
|
||||
- **Create a PivotChart** `2023Q4`
|
||||
|
||||
##### 📊Chart
|
||||
|
||||
- **Basic 6 Chart** `2023Q4 - 2024Q2`
|
||||
- **Advanced Chart** `2024Q4`
|
||||
- **SparkLines** `2024Q2`
|
||||
|
||||
##### ✍️Share
|
||||
|
||||
- **Comments** `2023Q3`
|
||||
- **Collaborate** `2023Q3`
|
||||
|
||||
##### 📚Insert object
|
||||
|
||||
- **Insert picture** (JPG,PNG,SVG and so on) `2023Q3`
|
||||
|
||||
##### ⚡Other
|
||||
|
||||
- **Matrix operation** `2023Q4`
|
||||
- **Screenshot** `2023Q4`
|
||||
- **Copy to** `2023Q3`
|
||||
- **EXCEL import/export** `2023Q1 - 2023Q4 Gradually enhance compatibility`
|
||||
|
||||
> New feature
|
||||
|
||||
- **Print** (Like excel print option, save to PDF) `2024Q2`
|
||||
- **Tree menu** (Just like the outline (group) function of excel) `2024Q1`
|
||||
- **Table new Features** (filter, slicer) `2024Q1`
|
||||
- **CSV,TXT import/export** (Specially adapted to Luckysheet) `2024Q1`
|
||||
- **Insert Shapes** ([Pen tool](https://github.com/mengshukeji/Pentool) Shapes) `2023Q2`
|
||||
|
||||
### Docs
|
||||
|
||||
#### 💌 Write & edit
|
||||
|
||||
- **Add and edit text** `2023Q1`
|
||||
- **Find and replace text** `2023Q4`
|
||||
- **Check grammar, spelling, and more** `2024Q2`
|
||||
- **Show word count** `2023Q1`
|
||||
- **Insert and remove hyperlinks** `2023Q2`
|
||||
|
||||
#### 🛀 Format text
|
||||
|
||||
- **Add and format text** `2023Q1`
|
||||
- **Create a bulleted or numbered list** `2023Q1`
|
||||
- **Change the line spacing** `2023Q1`
|
||||
- **Apply styles** `2023Q1`
|
||||
- **Apply themes** `2024Q1`
|
||||
|
||||
#### 🗺️ Lay out pages
|
||||
|
||||
- **Change margins** `2023Q1`
|
||||
- **Create newsletter columns** `2023Q1`
|
||||
- **Change page orientation to landscape or portrait** `2023Q2`
|
||||
- **Add a border to a page** `2023Q4`
|
||||
- **Insert a header or footer** `2023Q2`
|
||||
- **Insert page numbers** `2023Q2`
|
||||
- **Insert a page break** `2023Q2`
|
||||
- **Insert a table of contents** `2024Q2`
|
||||
|
||||
#### 🧭 Lay out pages
|
||||
|
||||
- **Insert a table** `2023Q2`
|
||||
- **Insert pictures** `2023Q1`
|
||||
- **Insert icons** `2023Q3`
|
||||
- **Insert WordArt** `2024Q3`
|
||||
- **Insert a watermark** `2023Q2`
|
||||
- **Show the ruler** `2023Q3`
|
||||
- **Rotate a picture or shape** `2023Q1`
|
||||
- **Wrap text around a picture in Word** `2023Q1`
|
||||
|
||||
#### 🛎️ For school
|
||||
|
||||
- **Write an equation or formula** `2024Q2`
|
||||
- **Indent the first line of a paragraph** `2023Q1`
|
||||
- **Double-space the lines in a document** `2023Q1`
|
||||
|
||||
#### 🧳 Edit & print &
|
||||
|
||||
- **Convert or save to PDF** `2024Q4`
|
||||
- **Edit a PDF** `2024Q4`
|
||||
- **Print your document** `2024Q4`
|
||||
- **Collaborate** `2023Q4`
|
||||
- **Comment** `2023Q4`
|
||||
- **mobile device** `2024Q4`
|
||||
|
||||
#### 🕰️ Other
|
||||
|
||||
- **Insert a Sheet** `2023Q2`
|
||||
- **Insert a Slide** `2023Q2`
|
||||
- **Word import/export** `2023Q4 - 2024Q4 Gradually enhance compatibility`
|
||||
|
||||
### Slides
|
||||
|
||||
#### 📻 Slides & layouts
|
||||
|
||||
- **Slide master** `2023Q3`
|
||||
- **Apply a slide layout** `2023Q3`
|
||||
- **Add color and design with Themes** `2023Q4`
|
||||
- **landscape and portrait** `2023Q4`
|
||||
- **Organize slides into sections** `2023Q4`
|
||||
- **Create, merge, and group objects on a slide** `2023Q2`
|
||||
- **Rotate or flip an object** `2023Q2`
|
||||
- **Change the order** `2023Q2`
|
||||
|
||||
#### 📱 Text & tables
|
||||
|
||||
- **WordArt** `2024Q3`
|
||||
- **Hyperlink** `2023Q3`
|
||||
- **Check spelling** `2024Q4`
|
||||
- **Table** `2023Q2`
|
||||
- **Add slide numbers, page numbers, or the date and time** `2023Q4`
|
||||
- **Set text direction and position in a shape or text box** `2023Q3`
|
||||
|
||||
#### 📀 Pictures & graphics
|
||||
|
||||
- **Insert a picture** `2023Q1`
|
||||
- **Edit pictures** `2024Q2`
|
||||
- **SmartArt** `2024Q2`
|
||||
- **Put a background picture** `2023Q2`
|
||||
- **Chart** `2023Q4 - 2024Q2`
|
||||
- **Shape** `2023Q2`
|
||||
- **Insert icons** `2023Q2`
|
||||
|
||||
#### 🧮 Present slideshows
|
||||
|
||||
- **Presenter view** `2023Q2`
|
||||
- **Speaker notes** `2023Q4`
|
||||
- **Rehearse and time the delivery of a presentation** `2024Q4`
|
||||
- **Record a slide show** `2024Q4`
|
||||
- **Print your PowerPoint slides, handouts, or notes** `2024Q4`
|
||||
- **Self-running presentation** `2024Q4`
|
||||
|
||||
#### 📒 Animation, video & audio
|
||||
|
||||
- **Transitions between slides** `2024Q2`
|
||||
- **Animate text or objects** `2024Q1`
|
||||
- **Morph transition** `2024Q4`
|
||||
- **Video** `2023Q4`
|
||||
- **Audio** `2023Q4`
|
||||
- **Record screen** `2024Q4`
|
||||
|
||||
#### 📫 Other
|
||||
|
||||
- **Collaborate** `2023Q4`
|
||||
- **Convert a presentation as a video** `2024Q4`
|
||||
- **Save as PDF** `2024Q4`
|
||||
- **PowerPoint import/export** `2023Q4`
|
||||
- **Mobile** `2023Q4`
|
||||
- **insert Sheets** `2023Q2`
|
||||
- **insert documents** `2023Q2` -->
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
sidebar_position: 11
|
||||
---
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
|
||||
# 贡献指南
|
||||
+3
-2
@@ -1,8 +1,9 @@
|
||||
{
|
||||
"label": "Tutorial - Basics",
|
||||
"position": 2,
|
||||
"label": "扩展 Univer",
|
||||
"position": 5,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "架构",
|
||||
"position": 1,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# 架构概要
|
||||
|
||||
## Univer 架构简介
|
||||
|
||||
Univer 通过插件化的方式组织代码，这使得用户可以按照其实际需要选择插件组合成为一个 Univer 应用，例如用户可以通过插件化的方式在传统的电子表格的基础上增加协同编辑、宏录制、AI 生成脚本语言等能力。用户开发插件将 Univer 的能力和用户自己的应用的能力融汇贯通。
|
||||
|
||||
## Univer 架构设计的核心需求
|
||||
|
||||
这些设计的需求部分来自于 Univer 的产品规划，部分来自于团队成员参与别的项目研发所得到的 learning
|
||||
|
||||
1. **100% 拥抱 web 技术栈**。Univer 需要运行在相当多的环境里，要满足快速的迭代需求并让客户、ISV、社区有二次开发的能力，能同时满足这些需求的只有以 web 技术为核心的技术栈。
|
||||
2. **插件化和高度可扩展性**。Univer 的各个模块应当尽可能地以插件的方式存在，尽可能解耦插件之间的耦合关系，做到降低适配不同的用户需求、不同的运行环境的成本，同时降低二次开发的门槛。
|
||||
3. **层次结构和单向依赖**。Univer 的模块之间不允许循环依赖，这使得我们可以按照不同环境的需要加载所需的层次和模块。
|
||||
4. **面向多平台做设计**。解耦代码和具体运行环境的耦合关系，方便迁移到不同的运行环境当中。
|
||||
5. **面向高可测试性做设计**。各个模块直接尽可能基于接口建立依赖关系，方便独立测试。
|
||||
|
||||
## 插件和依赖注入
|
||||
|
||||
<img width="962" alt="" src="/img/architecture.png" />
|
||||
|
||||
### 插件
|
||||
|
||||
Univer 的模块需按照 **业务类型（Sheet / Doc / Slide）、关注面（配置管理 / UI / 快捷键 / canvas 渲染）、功能（Sheet 基本操作 / Sheet 条件格式 / Sheet 筛选、运行环境（桌面端 / 移动端 / Node.js 等）** 等因素综合考虑，拆分成各个插件（plugin），组合成为一个 Univer 应用。
|
||||
|
||||
基于插件的设计能够使得 Univer 能够满足多样的运行环境（PC browser / Node / 移动端）、不同的功能需求、不同的配置要求、二次开发、三方插件等需要。
|
||||
|
||||
典型的插件及扩展能力可以参考文档 [Plugin 扩展能力](https://github.com/dream-num/univer/wiki/%5BWIP%5D-Plugin-%E6%89%A9%E5%B1%95%E8%83%BD%E5%8A%9B)。
|
||||
|
||||
### 依赖注入
|
||||
|
||||
插件内部可以根据实际需要将代码划分为下面 “层次结构” 一节中介绍的各个层次的模块，这些模块中的 service 和 controller 需要加入 Univer 的依赖注入系统，这样 Univer 就能自动解析这些模块之间的依赖关系并实例化这些模块。依赖注入系统的文档参考 [redi - redi](https://redi.wendell.fun/zh-CN)。
|
||||
|
||||
### 插件的公有私有模块
|
||||
|
||||
可以通过在每个插件的 index.ts 文件中导出这些模块的依赖注入标识符 identifier。如果一个模块的 identifier 被导出，那么其它的插件就可以 import 这些模块的 identifier，从而建立对这些模块的依赖关系，这些模块也就成为前一个插件的公有模块，反之就是私有模块。如果你熟悉 Angular 的话，很容易发现这跟 NgModule 的概念非常相似，只不过我们不用申明 exports 字段，而是用 es module 的 export 来区分公有模块。
|
||||
|
||||
### 插件生命周期
|
||||
|
||||
插件有如下四个生命周期
|
||||
|
||||
```ts
|
||||
export const enum LifecycleStages {
|
||||
Starting,
|
||||
Ready,
|
||||
Rendered,
|
||||
Steady,
|
||||
}
|
||||
```
|
||||
|
||||
* `Starting` plugin 挂载到 Univer 实例上的第一个生命周期，此时 Univer 业务实例尚未被创建。Plugin 在此生命周期中应该将自己模块加入到依赖注入系统当中。不建议在此生命周期之外初始化插件内部模块。
|
||||
* `Ready` Univer 的第一个业务实例已经创建，plugin 可以在此生命周期做大部分初始化工作。
|
||||
* `Rendered` 第一次渲染已经完成，plugin 可以在此生命周期进行需要依赖 DOM 的初始化工作。
|
||||
* `Steady` 在 `Rendered` 一段时间之后触发，plugin 可以在此生命周期进行非首屏必须的工作，以提升加载性能。
|
||||
|
||||
对应的，Plugin 类型上有四个生命周期勾子
|
||||
|
||||
```ts
|
||||
/**
|
||||
* Plug-in base class, all plug-ins must inherit from this base class. Provide basic methods.
|
||||
*/
|
||||
export abstract class Plugin {
|
||||
onStarting(_injector: Injector): void {}
|
||||
|
||||
onReady(): void {}
|
||||
|
||||
onRendered(): void {}
|
||||
|
||||
onSteady(): void {}
|
||||
}
|
||||
```
|
||||
|
||||
除了这四个生命周期勾子之外，插件内部的模块可以使用 `OnLifecycle` 装饰器声明自己需要在特定的生命周期阶段初始化，例如
|
||||
|
||||
```ts
|
||||
@OnLifecycle(LifecycleStages.Rendered, IMEInputController)
|
||||
export class IMEInputController extends Disposable {}
|
||||
```
|
||||
|
||||
另外也可以通过注入 `LifecycleService` 来监听生命周期事件。
|
||||
|
||||
```ts
|
||||
export class YourService {
|
||||
constructor(
|
||||
@Inject(LifecycleService) private _lifecycleService: LifecycleService,
|
||||
) {
|
||||
super();
|
||||
|
||||
this._lifecycleService.lifecycle$.subscribe((stage) => this._initModulesOnStage(stage));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 划分插件的依据
|
||||
|
||||
插件划分的主要依据是：在某些场景下，一些模块是否需要加载。例如在 Node.js 端运行时，可能不需要加载 UI 相关的模块，这样就可以将 UI 相关的模块放在一个插件中，然后在 Node.js 端不加载这个插件；又例如想让用户自行选择是否加载一个功能，那么就可以将这个功能放在一个插件中。
|
||||
|
||||
## 层次结构
|
||||
|
||||
|
||||
|
||||
插件内部的模块应当归属于以下层次：
|
||||
|
||||
* View 处理渲染和交互，包括 canvas 渲染和 React 组件
|
||||
* Controller 封装业务逻辑（特别是功能逻辑），派发 Command 等
|
||||
* Command 通过命令模式执行逻辑，修改下面 Service / Model 等层次的状态或数据
|
||||
* Service 按照关注点封装功能给上层模块使用，存储应用内部状态，操作底层数据等等
|
||||
* Model 存储业务数据
|
||||
|
||||
层次之间需要保持单向依赖关系，除部分 Controller 作为 MVVM 中的 view-model 之外可能持有对 UI 层对象的引用，其他层次禁止引用上层模块的代码。
|
||||
|
||||
注意：插件的代码并非只能属于一个层次，例如一个插件可能同时提供 View 和 Controller。
|
||||
|
||||
## 命令系统 Command
|
||||
|
||||
对应用状态和数据的变更需要通过命令系统执行。Univer core 中提供了命令服务，其依赖注入 token 为 `ICommandService`。上层模块可以将业务逻辑封装在 Command 里，并通过命令系统获取到其他 services 从而执行业务逻辑。基于命令系统，Univer 可以通过简单的方式实现协同编辑、宏录制、撤销重做、跟随浏览等能力。
|
||||
|
||||
plugin 可以通过 `ICommandService` 提供的 `registerCommand` 接口注册命令，并通过 `executeCommand` 接口执行命令：
|
||||
|
||||
```ts
|
||||
export interface ICommand<P extends object = object, R = boolean> {
|
||||
/**
|
||||
* ${businessName}.${type}.${name}
|
||||
*/
|
||||
readonly id: string;
|
||||
readonly type: CommandType;
|
||||
|
||||
handler(accessor: IAccessor, params?: P): Promise<R>;
|
||||
|
||||
/** When this command is unregistered, this function would be called. */
|
||||
onDispose?: () => void;
|
||||
}
|
||||
|
||||
export interface ICommandService {
|
||||
registerCommand(command: ICommand): IDisposable;
|
||||
|
||||
executeCommand<P extends object = object, R = boolean>(
|
||||
id: string,
|
||||
params?: P,
|
||||
options?: IExecutionOptions
|
||||
): Promise<R> | R;
|
||||
}
|
||||
```
|
||||
|
||||
`Command` 一共有三种类型
|
||||
|
||||
```ts
|
||||
export const enum CommandType {
|
||||
/** Command could generate some operations or mutations. */
|
||||
COMMAND = 0,
|
||||
/** An operation that do not require conflict resolve. */
|
||||
OPERATION = 1,
|
||||
/** An operation that need to be resolved before applied on peer client. */
|
||||
MUTATION = 2,
|
||||
}
|
||||
```
|
||||
|
||||
* `COMMAND` 负责根据特定的业务逻辑创建、编排和执行 `MUTATION` 或 `OPERATION`，例如一个 **删除行 `COMMAND`** 会生成一个 **删除行 `MUTATION`** 和用于 undo 的一个 **插入行 `MUTATION`** 及一个 **设置单元格内容 `MUTATION`**
|
||||
* `COMMAND` 是业务逻辑的主要承载者，如果对于一个 _用户操作行为_ 需要根据应用的状态来触发不同的 _底层行为_ —— 例如 _用户点击加粗文字按钮_ 时 需要根据当前选区范围来决定 _加粗操作的生效范围_ —— 相应的判断应该由 `COMMAND` 完成
|
||||
* 可以派发其他 `COMMAND` `OPERATION` `MUTATION`
|
||||
* 允许异步执行
|
||||
* `MUTATION` 是对落盘数据所做的变更，涉及协同编辑的冲突处理，例如插入行列，修改单元格内容，修改筛选范围等等操作
|
||||
* 不可以再派发其他任何命令
|
||||
* **必须同步执行**
|
||||
* `OPERATION` 是对不落盘数据（或称应用状态）所做的变更，不涉及冲突处理，例如修改滚动位置、修改侧边栏状态等等
|
||||
* 不可以再派发其他任何命令
|
||||
* **必须同步执行**
|
||||
|
||||
### 协同编辑
|
||||
|
||||
`ICommandService` 提供事件监听接口，插件可监听哪些命令被执行了，以及执行的参数是什么。实际上，命令执行后会派发这样一个事件：
|
||||
|
||||
```ts
|
||||
/**
|
||||
* The command info, only a command id and responsible params
|
||||
*/
|
||||
export interface ICommandInfo<T extends object = object> {
|
||||
id: string;
|
||||
|
||||
type: CommandType;
|
||||
|
||||
/**
|
||||
* Args should be serializable.
|
||||
*/
|
||||
params?: T;
|
||||
}
|
||||
```
|
||||
|
||||
对于协同编辑而言 collaboration-plugin 可以监听所有 `MUTATION` 类型命令，并通过协同编辑算法将 `MUTATION` 发送到其他协同端，再通过 `ICommandService` 重新执行这些 `MUTATION`。
|
||||
|
||||
### 操作录制和回放
|
||||
|
||||
通过监听 `OPERATION` 和 `MUTATION` 的执行，插件可以将用户的操作行为记录下来，并且可以在此基础上实现：
|
||||
|
||||
* 协同光标
|
||||
* 类似于飞书视频的 Magic Share
|
||||
* 宏录制
|
||||
* AppScript
|
||||
|
||||
等等。
|
||||
|
||||
## 交互
|
||||
|
||||
Univer 提供了一些机制简化 UI 的开发，降低菜单、快捷键等在不同的设备以及交互组件内的工作量。功能插件无需关心 UI 上的细节，只需要专注于业务逻辑即可。
|
||||
|
||||
### ShortcutService
|
||||
|
||||
通过向 `IShortcutService` 注入 `IShortcutItem` 可以注册一个快捷键，并且配置它的键位、优先级、触发条件、执行的 Command 等。
|
||||
|
||||
```ts
|
||||
export interface IShortcutItem<P extends object = object> {
|
||||
/** This should reuse the corresponding command's id. */
|
||||
id: string;
|
||||
description?: string;
|
||||
|
||||
priority?: number;
|
||||
/** A callback that will be triggered to examine if the shortcut should be invoked. */
|
||||
preconditions?: (contextService: IContextService) => boolean;
|
||||
|
||||
/** A command can be bound to several bindings, with different static parameters perhaps. */
|
||||
binding: number;
|
||||
mac?: number;
|
||||
win?: number;
|
||||
linux?: number;
|
||||
|
||||
/** Static parameters of this shortcut. Would be send to `CommandService.executeCommand`. */
|
||||
staticParameters?: P;
|
||||
}
|
||||
|
||||
export interface IShortcutService {
|
||||
registerShortcut(shortcut: IShortcutItem): IDisposable;
|
||||
|
||||
getCommandShortcut(id: string): string | null;
|
||||
}
|
||||
```
|
||||
|
||||
### MenuService
|
||||
|
||||
通过向 `IMenuService` 注册 `IMenuItem` 可以配置一个菜单项。
|
||||
|
||||
```ts
|
||||
interface IMenuItemBase<V> {
|
||||
/** ID of the menu item. Normally it should be the same as the ID of the command that it would invoke. */
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
tooltip?: string;
|
||||
|
||||
/** In what menu should the item display. */
|
||||
positions: OneOrMany<MenuPosition | string>;
|
||||
|
||||
/** @deprecated this type seems unnecessary */
|
||||
type: MenuItemType;
|
||||
/**
|
||||
* Custom label component id.
|
||||
* */
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
name: string;
|
||||
props?: Record<string, string | number>;
|
||||
};
|
||||
|
||||
hidden$?: Observable<boolean>;
|
||||
disabled$?: Observable<boolean>;
|
||||
|
||||
/** On observable value that should emit the value of the corresponding selection component. */
|
||||
value$?: Observable<V>;
|
||||
}
|
||||
|
||||
export interface IMenuService {
|
||||
menuChanged$: Observable<void>;
|
||||
|
||||
addMenuItem(item: IMenuItem): IDisposable;
|
||||
|
||||
/** Get menu items for display at a given position or a submenu. */
|
||||
getMenuItems(position: MenuPosition | string): Array<IDisplayMenuItem<IMenuItem>>;
|
||||
getMenuItem(id: string): IMenuItem | null;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# 扩展点
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Univer Sheet 架构
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# 鉴权
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# 后端
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# 扩展命令
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# 拓展 UI
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# 撰写新插件
|
||||
@@ -2,46 +2,84 @@
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
# Univer
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
TODO: Logo Here
|
||||
|
||||
## Getting Started
|
||||
Univer 是一套企业协同办公文档与数据解决方案。
|
||||
|
||||
Get started by **creating a new site**.
|
||||
[](https://badge.fury.io/js/@univerjs%2Fcore)
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
## 特性
|
||||
|
||||
### What you'll need
|
||||
* 📈 支持电子表格，后续还会支持文档和幻灯片
|
||||
* 🌌 高度可扩展的架构设计
|
||||
* 🔌 插件化架构，文档的能力可按需组合，支持自定义插件，方便二次开发
|
||||
* 💄 提供组件库和图标
|
||||
* ⚡ 高性能
|
||||
* ✏️ 统一高效的渲染引擎和公式引擎，基于 Canvas
|
||||
* 🧮 高性能的公式引擎，支持 web worker
|
||||
* 🌍 国际化支持
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
## 安装
|
||||
|
||||
## Generate a new site
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
|
||||
The classic template will automatically be added to your project after you run the command:
|
||||
Univer 的前端通过多个 npm 包发布，你可以通过以下命令安装核心包：
|
||||
|
||||
```bash
|
||||
npm init docusaurus@latest my-website classic
|
||||
npm install @univerjs/core
|
||||
```
|
||||
|
||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
||||
然后可以根据你的实际需要安装其它包。例如想要创建一个基本的电子表格，可以以如下命令安装相关的包：
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
|
||||
## Start your site
|
||||
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
cd my-website
|
||||
npm run start
|
||||
```zsh
|
||||
npm install @univerjs/base-docs \
|
||||
@univerjs/base-formula-engine \
|
||||
@univerjs/base-render \
|
||||
@univerjs/base-sheets \
|
||||
@univerjs/base-ui \
|
||||
@univerjs/design \
|
||||
@univerjs/sheets-plugin-formula \
|
||||
@univerjs/sheets-plugin-formula-ui \
|
||||
@univerjs/ui-plugin-sheets
|
||||
```
|
||||
|
||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
||||
## 如何使用
|
||||
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
请参考[快速上手](/docs/category/quick-start)。
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
## 在线 demo
|
||||
|
||||
我们准备了一个在线 IDE 来帮助你快速体验如何使用 Univer 开发，点击[这里](/playground)访问。
|
||||
|
||||
|
||||
## 链接
|
||||
|
||||
* [官网](https://univer.work)
|
||||
* [GitHub](https://github.com/dream-num/univer)
|
||||
* [知乎专栏](https://www.zhihu.com/org/meng-shu-ke-ji)
|
||||
|
||||
## 谁在使用
|
||||
|
||||
## 如何贡献
|
||||
|
||||
请在参与 Univer 的开发之前阅读[贡献指南](https://github.com/dream-num/univer/contributingguide)。
|
||||
|
||||
## 社区
|
||||
|
||||
如果你在使用过程中碰到问题，可以在以下社区寻求帮助：
|
||||
|
||||
1. [Discord 社区](https://discord.gg/XPGnMBmpd6)
|
||||
1. [GitHub Discussions](https://github.com/dream-num/univer/discussions)
|
||||
1. 加入 Univer 中文社群
|
||||
|
||||
你也可以在以下技术社区提出问题，建议带上 univer 标签：
|
||||
|
||||
1. stackoverflow
|
||||
1. segmentfault
|
||||
|
||||
## 商业授权
|
||||
|
||||
* 👨💻 支持多人协同编辑和协同浏览
|
||||
*
|
||||
|
||||
## 联系方式
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "插件",
|
||||
"position": 4,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"label": "快速上手",
|
||||
"position": 3,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# 创建一个 Sheet
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# 更新日志
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
|
||||
# 路线图
|
||||
|
||||
## Univer Sheet
|
||||
|
||||
### 已支持能力
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Congratulations!
|
||||
|
||||
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
|
||||
|
||||
Docusaurus has **much more to offer**!
|
||||
|
||||
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
|
||||
|
||||
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
|
||||
|
||||
## What's next?
|
||||
|
||||
- Read the [official documentation](https://docusaurus.io/)
|
||||
- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
|
||||
- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
|
||||
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
|
||||
- Add a [search bar](https://docusaurus.io/docs/search)
|
||||
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
|
||||
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Create a Blog Post
|
||||
|
||||
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
|
||||
|
||||
## Create your first Post
|
||||
|
||||
Create a file at `blog/2021-02-28-greetings.md`:
|
||||
|
||||
```md title="blog/2021-02-28-greetings.md"
|
||||
---
|
||||
slug: greetings
|
||||
title: Greetings!
|
||||
authors:
|
||||
- name: Joel Marcey
|
||||
title: Co-creator of Docusaurus 1
|
||||
url: https://github.com/JoelMarcey
|
||||
image_url: https://github.com/JoelMarcey.png
|
||||
- name: Sébastien Lorber
|
||||
title: Docusaurus maintainer
|
||||
url: https://sebastienlorber.com
|
||||
image_url: https://github.com/slorber.png
|
||||
tags: [greetings]
|
||||
---
|
||||
|
||||
Congratulations, you have made your first post!
|
||||
|
||||
Feel free to play around and edit this post as much you like.
|
||||
```
|
||||
|
||||
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Create a Document
|
||||
|
||||
Documents are **groups of pages** connected through:
|
||||
|
||||
- a **sidebar**
|
||||
- **previous/next navigation**
|
||||
- **versioning**
|
||||
|
||||
## Create your first Doc
|
||||
|
||||
Create a Markdown file at `docs/hello.md`:
|
||||
|
||||
```md title="docs/hello.md"
|
||||
# Hello
|
||||
|
||||
This is my **first Docusaurus document**!
|
||||
```
|
||||
|
||||
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
|
||||
|
||||
## Configure the Sidebar
|
||||
|
||||
Docusaurus automatically **creates a sidebar** from the `docs` folder.
|
||||
|
||||
Add metadata to customize the sidebar label and position:
|
||||
|
||||
```md title="docs/hello.md" {1-4}
|
||||
---
|
||||
sidebar_label: 'Hi!'
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Hello
|
||||
|
||||
This is my **first Docusaurus document**!
|
||||
```
|
||||
|
||||
It is also possible to create your sidebar explicitly in `sidebars.js`:
|
||||
|
||||
```js title="sidebars.js"
|
||||
export default {
|
||||
tutorialSidebar: [
|
||||
'intro',
|
||||
// highlight-next-line
|
||||
'hello',
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Tutorial',
|
||||
items: ['tutorial-basics/create-a-document'],
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Create a Page
|
||||
|
||||
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
|
||||
|
||||
- `src/pages/index.js` → `localhost:3000/`
|
||||
- `src/pages/foo.md` → `localhost:3000/foo`
|
||||
- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
|
||||
|
||||
## Create your first React Page
|
||||
|
||||
Create a file at `src/pages/my-react-page.js`:
|
||||
|
||||
```jsx title="src/pages/my-react-page.js"
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
export default function MyReactPage() {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>My React page</h1>
|
||||
<p>This is a React page</p>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
|
||||
|
||||
## Create your first Markdown Page
|
||||
|
||||
Create a file at `src/pages/my-markdown-page.md`:
|
||||
|
||||
```mdx title="src/pages/my-markdown-page.md"
|
||||
# My Markdown page
|
||||
|
||||
This is a Markdown page
|
||||
```
|
||||
|
||||
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Deploy your site
|
||||
|
||||
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
|
||||
|
||||
It builds your site as simple **static HTML, JavaScript and CSS files**.
|
||||
|
||||
## Build your site
|
||||
|
||||
Build your site **for production**:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
The static files are generated in the `build` folder.
|
||||
|
||||
## Deploy your site
|
||||
|
||||
Test your production build locally:
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
|
||||
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
|
||||
|
||||
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
|
||||
@@ -1,138 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Markdown Features
|
||||
|
||||
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
|
||||
|
||||
## Front Matter
|
||||
|
||||
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
||||
|
||||
```text title="my-doc.md"
|
||||
// highlight-start
|
||||
---
|
||||
id: my-doc-id
|
||||
title: My document title
|
||||
description: My document description
|
||||
slug: /my-custom-url
|
||||
---
|
||||
// highlight-end
|
||||
|
||||
## Markdown heading
|
||||
|
||||
Markdown text with [links](./hello.md)
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
Regular Markdown links are supported, using url paths or relative file paths.
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](/create-a-page).
|
||||
```
|
||||
|
||||
```md
|
||||
Let's see how to [Create a page](./create-a-page.md).
|
||||
```
|
||||
|
||||
**Result:** Let's see how to [Create a page](./create-a-page.md).
|
||||
|
||||
## Images
|
||||
|
||||
Regular Markdown images are supported.
|
||||
|
||||
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
|
||||
|
||||
## Code Blocks
|
||||
|
||||
Markdown code blocks are supported with Syntax highlighting.
|
||||
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return (
|
||||
<h1>Hello, Docusaurus!</h1>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx title="src/components/HelloDocusaurus.js"
|
||||
function HelloDocusaurus() {
|
||||
return <h1>Hello, Docusaurus!</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## Admonitions
|
||||
|
||||
Docusaurus has a special syntax to create admonitions and callouts:
|
||||
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
|
||||
:::tip My tip
|
||||
|
||||
Use this awesome feature option
|
||||
|
||||
:::
|
||||
|
||||
:::danger Take care
|
||||
|
||||
This action is dangerous
|
||||
|
||||
:::
|
||||
|
||||
## MDX and React Components
|
||||
|
||||
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
|
||||
|
||||
```jsx
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
padding: '10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
alert(`You clicked the color ${color} with label ${children}`)
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
||||
|
||||
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
||||
```
|
||||
|
||||
export const Highlight = ({children, color}) => (
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
padding: '10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
alert(`You clicked the color ${color} with label ${children}`);
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
||||
|
||||
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"label": "Tutorial - Extras",
|
||||
"position": 3,
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,55 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Manage Docs Versions
|
||||
|
||||
Docusaurus can manage multiple versions of your docs.
|
||||
|
||||
## Create a docs version
|
||||
|
||||
Release a version 1.0 of your project:
|
||||
|
||||
```bash
|
||||
npm run docusaurus docs:version 1.0
|
||||
```
|
||||
|
||||
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
|
||||
|
||||
Your docs now have 2 versions:
|
||||
|
||||
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
|
||||
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
|
||||
|
||||
## Add a Version Dropdown
|
||||
|
||||
To navigate seamlessly across versions, add a version dropdown.
|
||||
|
||||
Modify the `docusaurus.config.js` file:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'docsVersionDropdown',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The docs version dropdown appears in your navbar:
|
||||
|
||||
|
||||
|
||||
## Update an existing version
|
||||
|
||||
It is possible to edit versioned docs in their respective folder:
|
||||
|
||||
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
|
||||
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Translate your site
|
||||
|
||||
Let's translate `docs/intro.md` to French.
|
||||
|
||||
## Configure i18n
|
||||
|
||||
Modify `docusaurus.config.js` to add support for the `fr` locale:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'fr'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Translate a doc
|
||||
|
||||
Copy the `docs/intro.md` file to the `i18n/fr` folder:
|
||||
|
||||
```bash
|
||||
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
|
||||
|
||||
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
|
||||
```
|
||||
|
||||
Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
|
||||
|
||||
## Start your localized site
|
||||
|
||||
Start your site on the French locale:
|
||||
|
||||
```bash
|
||||
npm run start -- --locale fr
|
||||
```
|
||||
|
||||
Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
|
||||
|
||||
:::caution
|
||||
|
||||
In development, you can only use one locale at a time.
|
||||
|
||||
:::
|
||||
|
||||
## Add a Locale Dropdown
|
||||
|
||||
To navigate seamlessly across languages, add a locale dropdown.
|
||||
|
||||
Modify the `docusaurus.config.js` file:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
export default {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'localeDropdown',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The locale dropdown now appears in your navbar:
|
||||
|
||||
|
||||
|
||||
## Build your localized site
|
||||
|
||||
Build your site for a specific locale:
|
||||
|
||||
```bash
|
||||
npm run build -- --locale fr
|
||||
```
|
||||
|
||||
Or build your site to include all the locales at once:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
@@ -76,6 +76,11 @@ const config: Config = {
|
||||
position: 'left',
|
||||
label: 'API',
|
||||
},
|
||||
{
|
||||
to: 'playground',
|
||||
position: 'left',
|
||||
label: 'Playground',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/dream-num/univer',
|
||||
label: 'GitHub',
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
return (
|
||||
<Layout>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
style={{ width: '100% ' }}
|
||||
src="https://stackblitz.com/edit/typescript-uvcstu?embed=1&file=index.ts"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Reference in New Issue
Block a user