From 0f626d0688ca2dc8661ab02af9236cda45cb7170 Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 3 Dec 2024 11:40:39 +0800 Subject: [PATCH] docs: add algolia search --- .../sites/demos/pc/webdoc/develop-demo-en.md | 6 +- .../sites/demos/pc/webdoc/develop-demo.md | 6 +- .../demos/pc/webdoc/envpreparation-open-en.md | 6 +- .../demos/pc/webdoc/envpreparation-open.md | 6 +- examples/sites/demos/pc/webdoc/faq-en.md | 4 +- examples/sites/demos/pc/webdoc/faq.md | 4 +- .../sites/demos/pc/webdoc/form-valid-en.md | 38 ++++++------ examples/sites/demos/pc/webdoc/form-valid.md | 38 ++++++------ examples/sites/demos/pc/webdoc/i18n-en.md | 6 +- examples/sites/demos/pc/webdoc/i18n.md | 10 ++-- .../demos/pc/webdoc/import-components-en.md | 10 ++-- .../demos/pc/webdoc/import-components.md | 14 ++--- .../sites/demos/pc/webdoc/installation-en.md | 8 +-- .../sites/demos/pc/webdoc/installation.md | 10 ++-- examples/sites/demos/pc/webdoc/theme-en.md | 6 +- examples/sites/demos/pc/webdoc/theme.md | 22 +++---- examples/sites/index.html | 12 ++++ examples/sites/src/App.vue | 7 +++ examples/sites/src/style.css | 58 +++++++++++++++++++ .../sites/src/views/components/components.vue | 8 +-- examples/sites/src/views/components/demo.vue | 2 +- examples/sites/src/views/layout/layout.vue | 1 + 22 files changed, 180 insertions(+), 102 deletions(-) diff --git a/examples/sites/demos/pc/webdoc/develop-demo-en.md b/examples/sites/demos/pc/webdoc/develop-demo-en.md index 0c6b4da8b5..dc6bc05fd4 100644 --- a/examples/sites/demos/pc/webdoc/develop-demo-en.md +++ b/examples/sites/demos/pc/webdoc/develop-demo-en.md @@ -1,10 +1,10 @@ -## Development Example +# Development Example This article is based on[Vite](https://cn.vitejs.dev/) Project example to show how to use`TinyVue`components. -### Building the Vite project +## Building the Vite project Create a`Vite`Works: @@ -30,7 +30,7 @@ After the browser is started, if the following interface is displayed, it indica

-### Install and use`TinyVue`Components +## Install and use`TinyVue`Components Run the following command to install the`Vue 3.0`version of`TinyVue`Component library: diff --git a/examples/sites/demos/pc/webdoc/develop-demo.md b/examples/sites/demos/pc/webdoc/develop-demo.md index 8917c3248f..d4ffcdde5a 100644 --- a/examples/sites/demos/pc/webdoc/develop-demo.md +++ b/examples/sites/demos/pc/webdoc/develop-demo.md @@ -1,10 +1,10 @@ -## 开发示例 +# 开发示例 本文以 [Vite](https://cn.vitejs.dev/) 工程为例，展示如何使用 `TinyVue` 组件。 -### 搭建 Vite 项目 +## 搭建 Vite 项目 使用以下命令创建 `Vite` 工程： @@ -30,7 +30,7 @@ npm run dev

-### 安装并使用 `TinyVue` 组件 +## 安装并使用 `TinyVue` 组件 执行以下命令安装 `Vue 3.0` 版本的 `TinyVue` 组件库 ： diff --git a/examples/sites/demos/pc/webdoc/envpreparation-open-en.md b/examples/sites/demos/pc/webdoc/envpreparation-open-en.md index 08622994e7..be8ec0b076 100644 --- a/examples/sites/demos/pc/webdoc/envpreparation-open-en.md +++ b/examples/sites/demos/pc/webdoc/envpreparation-open-en.md @@ -1,10 +1,10 @@ -## Environment Preparation +# Environment Preparation TinyVue is a`Vue`UI component library, which can also support`Vue 2.0`and`Vue 3.0`. Browser compatibility`TinyVue`The latest versions of mainstream browsers are supported: Chrome, Edge, Firefox, Opera, and Safari. No longer supported`Internet Explorer`. -### Installing Node.js +## Installing Node.js Recommended Installation`v16.13.0`version, if the local`Node.js`, run the following command to check whether the version is correct: @@ -12,7 +12,7 @@ Recommended Installation`v16.13.0`version, if the local`Node.js`, run the follow node -v ``` -### Installing Yarn +## Installing Yarn management`npm`There are two main tools for the package. One is the installation.`Node.js`When it comes`npm`, the other is the faster`yarn`, run the following command to install: diff --git a/examples/sites/demos/pc/webdoc/envpreparation-open.md b/examples/sites/demos/pc/webdoc/envpreparation-open.md index 04e6f73d76..caa4d9e2ec 100644 --- a/examples/sites/demos/pc/webdoc/envpreparation-open.md +++ b/examples/sites/demos/pc/webdoc/envpreparation-open.md @@ -1,10 +1,10 @@ -## 环境准备 +# 环境准备 TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。 浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器 -### 安装 Node.js +## 安装 Node.js 推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确： @@ -12,7 +12,7 @@ TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` node -v ``` -### 安装 Yarn +## 安装 Yarn 管理 `npm` 包的工具主要有两种，一种是安装 `Node.js` 时自带的 `npm` ，另一种是速度更快的 `yarn`，通过以下命令安装： diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md index 088e25ddc4..a30586a11b 100644 --- a/examples/sites/demos/pc/webdoc/faq-en.md +++ b/examples/sites/demos/pc/webdoc/faq-en.md @@ -1,6 +1,6 @@ -## FAQ +# FAQ -### 1、Popup element misaligned and flipped in wujie micro front-end +## 1、Popup element misaligned and flipped in wujie micro front-end _Reason:_ The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport, therefore, it can misjudge boundaries, leading to issues such as flipping and misalignment. diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md index b1fa18cfa6..9aef75100d 100644 --- a/examples/sites/demos/pc/webdoc/faq.md +++ b/examples/sites/demos/pc/webdoc/faq.md @@ -1,6 +1,6 @@ -## 常见问题 +# 常见问题 -### 1、弹出元素在无界微前端中发生错位、翻转 +## 1、弹出元素在无界微前端中发生错位、翻转 _原因：_ 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多， 因此会错误判断边界，导致翻转和错位等问题。 diff --git a/examples/sites/demos/pc/webdoc/form-valid-en.md b/examples/sites/demos/pc/webdoc/form-valid-en.md index 97e899ced0..a4f07c5e71 100644 --- a/examples/sites/demos/pc/webdoc/form-valid-en.md +++ b/examples/sites/demos/pc/webdoc/form-valid-en.md @@ -1,13 +1,13 @@ -## Form Verification Configuration +# Form Verification Configuration

Form validation is based on`async-validator`Encapsulated, mainly used`validate`Function and`rules`Configuration rules of the. -### API +## API -#### validate +### validate When submitting a form, the system verifies the fields to be verified in the entire form to obtain the verification result. The following is an example: @@ -21,11 +21,11 @@ Parameter description: - `error`: Array type, including fields that do not pass the verification. -### Rules +## Rules Used to set the verification rules for each field to be verified in the form, including the verification type of each field, whether it is mandatory, and the prompt information indicating that the verification fails. -#### type +### type through`type`Set the verification type of the field to be verified. With this function, we can verify some specific fields without writing regular rules and making judgments. The following is an example: @@ -67,7 +67,7 @@ The values that can be set are as follows: - `any`: any type -#### required +### required `required`The attribute value of is of the Boolean type, which is used to set whether a field is mandatory, that is, non-empty verification. @@ -75,7 +75,7 @@ The values that can be set are as follows: - `false`: default value, indicating that the field is not mandatory. The label does not contain red asterisks \*. -#### pattern +### pattern Configure the regular expression used to verify the field. The following is an example: @@ -85,7 +85,7 @@ rules: { } ``` -#### min +### min For the string and array types, the lengths are compared. For the number type, the number cannot be less than`min`. An example is as follows: @@ -95,7 +95,7 @@ rules: { } ``` -#### max +### max For the string and array types, the lengths are compared. For the number type, the number cannot be greater than`max`. An example of the use is as follows: @@ -105,7 +105,7 @@ rules: { } ``` -#### len +### len To verify the exact length of the field, specify`len`Property. For string and array types, the length property is compared. For type number, this property indicates an exact match for that number, that is, it can only be strictly equal to`len`. If`len`Attribute vs.`min`and`max`Attributes are used together, then`len`Preferred. Examples of usage are as follows: @@ -115,7 +115,7 @@ rules: { } ``` -#### trigger +### trigger Configure the way to trigger the verification rules through `trigger`. When it is `change`, the verification is triggered when the input box value changes. When it is `blur`, the verification is triggered after the input box value is out of focus. Can be set to an array `['change', 'blur']` to trigger both scenarios. The default is to trigger both scenarios. @@ -137,7 +137,7 @@ The configurable values are as follows: - `change`: The verification is triggered when the value in the input box changes. -#### enum +### enum Enumerated value validation, which verifies whether the value of the field is in`enum`Attribute configuration array`['admin', 'user', 'guest']`Medium. For example: @@ -147,7 +147,7 @@ rules: { } ```` -#### whitespace +### whitespace Verify that mandatory fields have only spaces. Mandatory fields that contain only blanks are generally considered an error. To treat a string consisting only of spaces as an error, you can set`whitespace`for`true`If this parameter is not configured, the input value of all spaces is valid. @@ -157,7 +157,7 @@ rules: { } ``` -#### fields +### fields deep rule. If you need to validate deep object properties, you can assign nested rules to the rule's`fields`Attribute to validate an object or array validation rule. Note that if you do not specify on the parent rule`required`Property, the field is not declared to be fully valid on the source object, and the deep validation rule will not be enforced because there are no verifiable objects. For example: @@ -192,7 +192,7 @@ rules: { } ``` -#### defaultField +### defaultField `defaultField`Attributes can be used with array or object types to validate all values of the container. It can be an object or an array containing validation rules. For example: @@ -205,7 +205,7 @@ rules: { } ``` -#### transform +### transform Sometimes it is necessary to convert values before validation to force or in some way clean them up.`transform`, add a feature to the validation rule. Before validation, the attribute is converted and then reassigned to the source object to change the value of the attribute. For example, the space entered by the user is removed. @@ -222,7 +222,7 @@ rules: { } ``` -#### messages +### messages This parameter is used to configure the message displayed when field verification fails. Internationalization is supported. @@ -250,7 +250,7 @@ rules: { } ``` -#### validator +### validator By`validator`The options are customized for a field.`callback`Must be invoked. @@ -278,7 +278,7 @@ rules: { } ``` -#### asyncValidator +### asyncValidator By`asyncValidator`The option is to perform custom asynchronous validation for a field.`callback`Must be invoked. diff --git a/examples/sites/demos/pc/webdoc/form-valid.md b/examples/sites/demos/pc/webdoc/form-valid.md index 261329ad7d..5cee784a41 100644 --- a/examples/sites/demos/pc/webdoc/form-valid.md +++ b/examples/sites/demos/pc/webdoc/form-valid.md @@ -1,13 +1,13 @@ -## 表单校验配置 +# 表单校验配置

表单校验是基于 `async-validator` 封装的，主要用到 `validate` 函数和 `rules` 的配置规则。 -### API +## API -#### validate +### validate 常用于提交表单的时候，对整个表单需校验字段进行校验，得到校验结果，使用示例如下所示： @@ -21,11 +21,11 @@ this.$refs[formName].validate((valid, error) => {}) - `error`：Array 类型，包含校验不通过的字段。 -### Rules +## Rules 用于设置表单每个需校验字段的校验规则，可设置每个字段的校验类型，是否必填，校验不成功的提示信息等。 -#### type +### type 通过 `type` 设置需校验字段的校验类型，使用这个，我们就可以对一些特定的字段进行校验，而不用再像以前一样写正则，做判断。使用示例如下所示： @@ -67,7 +67,7 @@ rules: { - `any`：任意类型 -#### required +### required `required` 的属性值为 Boolean 类型，用于设置字段是否为必填项，即非空验证。 @@ -75,7 +75,7 @@ rules: { - `false`：默认值，表示该字段不是必填项，label 不会带红色 \* 号 -#### pattern +### pattern 配置用于校验该字段的正则表达式。使用示例如下所示： @@ -85,7 +85,7 @@ rules: { } ``` -#### min +### min 对于 string 和 array 类型，将对长度进行比较，对于 number 类型，数字不能小于 `min`。使用示例如下所示： @@ -95,7 +95,7 @@ rules: { } ``` -#### max +### max 对于 string 和 array 类型，将对长度进行比较，对于 number 类型，数字不能大于 `max`。使用示例如下所示： @@ -105,7 +105,7 @@ rules: { } ``` -#### len +### len 要验证字段的确切长度，请指定 `len` 属性。对于 string 和 array 类型，将对 length 属性进行比较。对于 number 类型，此属性表示该数字的精确匹配，即，它只能严格等于 `len`。如果 `len` 属性与 `min` 和 `max` 属性一起使用，则 `len` 优先。使用示例如下所示： @@ -115,7 +115,7 @@ rules: { } ``` -#### trigger +### trigger 通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。可设置成数组 `['change', 'blur']` 两种场景都触发，默认为两种场景都触发。 如果如果仅在主动调用校验方式时触发，可设置为空数组 `[]`。使用示例如下所示： @@ -134,7 +134,7 @@ rules: { - `change`：当输入框值改变即触发校验 -#### enum +### enum 枚举值验证，验证字段的值是否在 `enum` 属性配置的数组 `['admin', 'user', 'guest']` 中。例如： @@ -144,7 +144,7 @@ rules: { } ``` -#### whitespace +### whitespace 验证必填字段是否只有空格。通常将只包含空白的必填字段视为错误。若要将仅由空格组成的字符串视为错误，则可设置 `whitespace` 为 `true` ，如果没有该配置，则全空格的输入值也是有效的。 @@ -154,7 +154,7 @@ rules: { } ``` -#### fields +### fields 深层规则。如果需要验证深层对象属性，可以通过将嵌套规则分配给规则的 `fields` 属性来验证 object 或 array 类型的验证规则。请注意，如果不在父规则上指定 `required` 属性，则不在源对象上声明字段是完全有效的，并且深度验证规则将不会执行，因为没有任何可验证的对象。例如： @@ -189,7 +189,7 @@ rules: { } ``` -#### defaultField +### defaultField `defaultField` 属性可与 array 或 object 类型一起使用，以验证容器的所有值。它可以是包含验证规则的 object 或 array。例如： @@ -202,7 +202,7 @@ rules: { } ``` -#### transform +### transform 有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此 `transform` ，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。使用场景比如：去除用户输入的空格。 @@ -219,7 +219,7 @@ rules: { } ``` -#### messages +### messages 用于配置字段校验不成功时的提示信息，支持国际化。 @@ -247,7 +247,7 @@ rules: { } ``` -#### validator +### validator 通过 `validator` 选项为某个字段进行自定义校验，校验方法中 `callback` 必须被调用。 @@ -275,7 +275,7 @@ rules: { } ``` -#### asyncValidator +### asyncValidator 通过 `asyncValidator` 选项为某个字段进行自定义异步校验，校验方法中 `callback` 必须被调用。 diff --git a/examples/sites/demos/pc/webdoc/i18n-en.md b/examples/sites/demos/pc/webdoc/i18n-en.md index ff45096da6..7b264d742b 100644 --- a/examples/sites/demos/pc/webdoc/i18n-en.md +++ b/examples/sites/demos/pc/webdoc/i18n-en.md @@ -1,8 +1,8 @@ -## Internationalization +# Internationalization `TinyVue` uses the official internationalization plug-in of `Vue`. You need to install the `vue-i18n` plug-in. -### Vue 3.0 internationalization configuration +## Vue 3.0 internationalization configuration Step 1: You are advised to install the `vue-i18n` plug-in of the `^ 9.1.6' version by running the following command: @@ -48,7 +48,7 @@ app.use(initI18n({ locale: 'zhCN' })) app.use(router).mount('#app') ``` -### Vue 2.0 internationalization configuration +## Vue 2.0 internationalization configuration Step 1: You are advised to install the `vue-i18n` plug-in of the `8.15. 0` version by running the following command: diff --git a/examples/sites/demos/pc/webdoc/i18n.md b/examples/sites/demos/pc/webdoc/i18n.md index 425379b7cb..76f3bd9a7c 100644 --- a/examples/sites/demos/pc/webdoc/i18n.md +++ b/examples/sites/demos/pc/webdoc/i18n.md @@ -1,8 +1,8 @@ -## 国际化 +# 国际化 `TinyVue` 使用 `Vue` 的官方国际化插件，需要安装 `vue-i18n` 插件。 -### Vue 3.0 版本国际化配置 +## Vue 3.0 版本国际化配置 步骤一、推荐安装 `^9.1.6` 版本的`vue-i18n` 插件，通过以下命令安装： @@ -50,7 +50,7 @@ app.use(i18n) app.use(router).mount('#app') ``` -### Vue 2.0 版本国际化配置 +## Vue 2.0 版本国际化配置 步骤一、推荐安装 `8.15.0` 版本的`vue-i18n` 插件，通过以下命令安装： @@ -101,7 +101,7 @@ new Vue({ }).$mount('#app') ``` -### 自定义国际化配置 +## 自定义国际化配置 如果需要自定义国际化配置可以修改 `src/i18n/index.js` 如下以 `Vue 3.0` 版本为例（`Vue 2.0` 版本同理）： @@ -132,7 +132,7 @@ export default (i18n) => }) ``` -### 语言切换 +## 语言切换 配置国际化插件之后，可以通过以下方式在模板中使用国际化词条。 diff --git a/examples/sites/demos/pc/webdoc/import-components-en.md b/examples/sites/demos/pc/webdoc/import-components-en.md index fca471de8d..9f1f2cad65 100644 --- a/examples/sites/demos/pc/webdoc/import-components-en.md +++ b/examples/sites/demos/pc/webdoc/import-components-en.md @@ -1,10 +1,10 @@ -## Introduction Components +# Introduction Components `TinyVue` supports automatic import, multiple component import, single component import, and complete import. -### Auto import (recommended) +## Auto import (recommended) First, you need to install the plugin `@opentiny/unplugin-tiny-vue`. @@ -42,7 +42,7 @@ This way, you can directly use TinyVue components in your project. These compone For more information about automatic on-demand imports, please refer to [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import). -### Multi-component introduction +## Multi-component introduction

@@ -73,7 +73,7 @@ Multi-component reference is from the dependency package.`@opentiny/vue`Multiple ``` -### Single component introduction +## Single component introduction `TinyVue`Each component can be installed and used independently. That is, only the dependency of a single component is installed and referenced independently. @@ -108,7 +108,7 @@ Use in Pages`Button`and`Alert`An example of a component is as follows: ``` -### Full introduction (not recommended) +## Full introduction (not recommended) Once the component is fully introduced, you do not need to import the component and register it locally on every page.`main.js`Global registration in, but as a result, it loses`tree-shaking`Capabilities. Redundant code is available after packaging. diff --git a/examples/sites/demos/pc/webdoc/import-components.md b/examples/sites/demos/pc/webdoc/import-components.md index d21fd7395e..5c848f1331 100644 --- a/examples/sites/demos/pc/webdoc/import-components.md +++ b/examples/sites/demos/pc/webdoc/import-components.md @@ -1,10 +1,10 @@ -## 引入组件 +# 引入组件 `TinyVue` 支持自动导入、多组件引入、单组件引入以及完整引入四种方式。 -### 自动导入（推荐） +## 自动导入（推荐） 首先你需要安装 `@opentiny/unplugin-tiny-vue` 这款插件。 @@ -82,7 +82,7 @@ module.exports = defineConfig({ 想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。 -### 多组件引入 +## 多组件引入

@@ -113,7 +113,7 @@ module.exports = defineConfig({ ``` -### `vite` 工程多组件引入按需加载和打包配置方法 +## `vite` 工程多组件引入按需加载和打包配置方法 通过配置 `@opentiny/vue-vite-import` 插件可以按需只打包 pc 或者移动的组件，减少组件库打包后的体积。 @@ -158,7 +158,7 @@ export default { } ``` -#### 温馨提示 +### 温馨提示 因为 `pnpm` 工程的特点之一是：项目中显示引入的依赖需要提前在 `package.json` 中声明（防止幽灵依赖），所以在 `pnpm` 工程使用该插件时需要在 `package.json` 中声明项目用到的每一个 `TinyVue` 组件依赖（`TinyVue` 每个组件都是一个 `npm` 包）。依赖声明可以参考以下配置： @@ -173,7 +173,7 @@ export default { } ``` -### 单组件引入 +## 单组件引入 `TinyVue` 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。 @@ -208,7 +208,7 @@ npm install @opentiny/vue-button @opentiny/vue-alert ``` -### 完整引入（不推荐） +## 完整引入（不推荐） 完整引入组件后，就不需每个页面都 import 组件和局部注册，只需在 `main.js` 中全局注册，但因此会失去 `tree-shaking` 的能力，打包后会有冗余代码。 diff --git a/examples/sites/demos/pc/webdoc/installation-en.md b/examples/sites/demos/pc/webdoc/installation-en.md index 1cbceaaa1d..3f8c8cf2f6 100644 --- a/examples/sites/demos/pc/webdoc/installation-en.md +++ b/examples/sites/demos/pc/webdoc/installation-en.md @@ -1,6 +1,6 @@ -## Installation +# Installation `TinyVue`The component library also supports`Vue 2.0`and`Vue 3.0`Framework, unified dependency package:`@opentiny/vue`, please install different versions to fit your project according to the table below: @@ -13,7 +13,7 @@ For a long time, TinyVue only supports Vue 2.6.14. Starting from TinyVue 2.11.0, the project of Vue 2.7+ is also supported. Make sure that you have installed the correct Vue 2.x dependency. -### New Project Configuration +## New Project Configuration In the root directory of the project, open the console and execute the following command to`Vue 3.0`Project Installation`TinyVue`Component library: @@ -57,7 +57,7 @@ For example, "@opentiny/vue": "~3.12.0.

@opentiny/vue supports multiple modes. If your project is not a mobile project, you can declare the value of TINY_MODE in process.env in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, 'process.env': {... env,TINY_MODE:'pc'}.

-### Import through CDN +## Import through CDN In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows. @@ -103,7 +103,7 @@ Then you can import TinyVue and register the TinyVue plug-in globally through th ``` -### Historical Project Upgrade +## Historical Project Upgrade due to`TinyVue`of a large number of projects and`@opentiny/vue2`or`@opentiny/vue3`The two packages will not be upgraded. For projects that are still being developed or maintained, you are advised to upgrade the latest versions using either of the following methods: diff --git a/examples/sites/demos/pc/webdoc/installation.md b/examples/sites/demos/pc/webdoc/installation.md index f0c5148580..34538732af 100644 --- a/examples/sites/demos/pc/webdoc/installation.md +++ b/examples/sites/demos/pc/webdoc/installation.md @@ -1,6 +1,6 @@ -## 安装 +# 安装 `TinyVue` 组件库同时支持 `Vue 2.0` 和 `Vue 3.0` 框架，统一依赖包为`@opentiny/vue`,请根据下表安装不同的版本以适配您的项目： @@ -13,7 +13,7 @@ 长期以来，TinyVue 都是只支持 Vue 2.6.14 版本。 从 TinyVue 2.11.0 开始，也支持 Vue 2.7+的工程了，请确保你安装了正确的 Vue 2.x 的依赖。 -### 全新项目配置 +## 全新项目配置 在项目的根目录中，打开控制台，执行以下命令，为 `Vue 3.0` 的项目安装 `TinyVue` 组件库 ： @@ -57,7 +57,7 @@ export default defineConfig({

@opentiny/vue 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的process.env中，声明TINY_MODE的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 'process.env': { ...process.env,TINY_MODE:'pc' }。

-### 通过 CDN 方式引入 (v3.16.0及之前的版本可用) +## 通过 CDN 方式引入 (v3.16.0及之前的版本可用) 为了更快地体验 `TinyVue` 的组件，你也可以通过 `CDN` 方式直接在 HTML 页面中引入 `TinyVue`, 建议版本号写 `2` 个有效版本数字即可，具体配置如下: @@ -80,7 +80,7 @@ export default defineConfig({ ``` -### 通过 CDN 方式引入 (v3.17.0开始提供使用) +## 通过 CDN 方式引入 (v3.17.0开始提供使用) 为了应对不同的业务需要，`TinyVue` 提供多种形态的 `runtime`: @@ -134,7 +134,7 @@ export default defineConfig({ ``` -### 常见问题和解决方法： +## 常见问题和解决方法： 问题一：`v-model cannot be used on a prop, because local prop bindings are not writable.` diff --git a/examples/sites/demos/pc/webdoc/theme-en.md b/examples/sites/demos/pc/webdoc/theme-en.md index 2858214e0d..077140f2f9 100644 --- a/examples/sites/demos/pc/webdoc/theme-en.md +++ b/examples/sites/demos/pc/webdoc/theme-en.md @@ -1,4 +1,4 @@ -## Theme configuration +# Theme configuration
This section of the document only supports theme customization after @opentiny/vue@3.19.0 . For historical theme configuration, see Archive information at the bottom of the current document. @@ -13,7 +13,7 @@ A set of global CSS variables is defined in the TinyVue component library to uni By reading the above source code, you can see which styles of component libraries can be customized. -### Custom theme +## Custom theme In a user's project, if you need to customize the theme style, or override the style of some components, you can configure the theme of the user project using the 'TinyThemeTool' class provided by the component library. We will also provide more topics for you to choose from in the future. @@ -77,7 +77,7 @@ You are advised to use TinyThemeTool to override component styles.
-### Micro Frontends scene +## Micro Frontends scene By default, the 'themeTool.changeTheme' method will mount a custom style to the current 'document'. However, in microfront end frameworks, there is often a mechanism for style isolation, such as an unbounded microfront that encloses a 'Web Component' to mount child applications. If you customize the theme in this scenario, you must mount the style to the 'ShadowRoot' of the subapplication. diff --git a/examples/sites/demos/pc/webdoc/theme.md b/examples/sites/demos/pc/webdoc/theme.md index 6c52a719dc..1e03f0b83f 100644 --- a/examples/sites/demos/pc/webdoc/theme.md +++ b/examples/sites/demos/pc/webdoc/theme.md @@ -1,4 +1,4 @@ -## 主题配置 +# 主题配置
本节文档仅支持 @opentiny/vue@3.19.0 及其之后版本的主题定制，更早的历史版本的主题配置，请参阅当前文档底部的 历史版本的主题配置 @@ -15,7 +15,7 @@ 通过阅读以上源码，可以快速了解组件库有哪些`CSS 变量`可以定制。 -### 自定义主题 +## 自定义主题 在用户的工程中，如果需要定制主题风格，或者覆盖某些组件的样式，则可以使用组件库提供的 `TinyThemeTool` 类进行配置用户工程的主题。后续我们也将提供更多的主题供大家选择。 @@ -79,7 +79,7 @@ themeTool.changeTheme({
-### 微前端场景 +## 微前端场景 默认情况下,`themeTool.changeTheme` 方法，会将自定义样式挂载到当前`document`下。但是在微前端框架中，通常会有样式隔离的机制，比如无界微前端会封装一个 `Web Component` 组件挂载子应用。如果自定义这种场景下的主题时，就必须将样式挂载到子应用的`ShadowRoot`上，用法如下： @@ -133,7 +133,7 @@ const themeTool = new TinyThemeTool(tinyOldTheme) 基础样式变量 `npm` 仓库路径：`@opentiny/vue-theme/theme` -### 主题切换（推荐使用第一种） +## 主题切换（推荐使用第一种） 主题切换的方式有两种： @@ -147,7 +147,7 @@ const themeTool = new TinyThemeTool(tinyOldTheme) - 欧若拉主题 `tinyAuroraTheme` - XDesign 主题 `tinySmbTheme` -#### 1、使用预定义主题 (推荐) +### 1、使用预定义主题 (推荐) 通过 alias 使用预定义主题【目前仅支持：欧若拉主题 和 XDesign 主题】 @@ -175,7 +175,7 @@ resolve: { } ``` -#### 2、动态切换主题（不推荐） +### 2、动态切换主题（不推荐） 主题初始化和动态切换主题的具体使用方式如下文所示，在 main.ts 文件中增加以下代码。 @@ -233,9 +233,9 @@ new TinyThemeTool(tinyTestTheme, 'tinyStyleSheetId') theme.changeTheme(tinyTestTheme) ``` -### 自定义 cssvar 变量前缀（用于解决 cssvar 变量冲突的问题） +## 自定义 cssvar 变量前缀（用于解决 cssvar 变量冲突的问题） -#### vuecli 工程 +### vuecli 工程 自定义 loader 文件（custom-loader.js）内容： @@ -262,7 +262,7 @@ chainWebpack: (config) => { } ``` -#### vite 工程 +### vite 工程 vite.config.js 定义 @@ -285,7 +285,7 @@ plugins: [ ] ``` -### 配置 Design Config （解决交互规范的不同） +## 配置 Design Config （解决交互规范的不同） 有部分组件在不同主题下的图标或者交互不同，需要配置相应的 Design Config。 @@ -304,7 +304,7 @@ plugins: [ ``` -### 主题定制高阶使用方法 +## 主题定制高阶使用方法 在全局作用域下添加自定义 `css` 变量。 diff --git a/examples/sites/index.html b/examples/sites/index.html index f8b32c2dc0..15fc4412d6 100644 --- a/examples/sites/index.html +++ b/examples/sites/index.html @@ -21,12 +21,24 @@ window.DEPLOY_URL = '' window.process = { env: {} } +
+ + + diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue index 231b73a998..e2b1b75e14 100644 --- a/examples/sites/src/App.vue +++ b/examples/sites/src/App.vue @@ -17,6 +17,8 @@ import { iconClose } from '@opentiny/vue-icon' import { appData } from './tools' import useTheme from './tools/useTheme' +const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open' + export default defineComponent({ name: 'AppVue', props: [], @@ -40,6 +42,11 @@ export default defineComponent({ } }) common.renderHeader() + + const searchBox = document.querySelector('.search-box') + if (searchBox && envTarget === 'open') { + searchBox.style.display = 'block' + } }) const { designConfig, currentThemeKey } = useTheme() diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css index d2702b80f9..f17e943aa5 100644 --- a/examples/sites/src/style.css +++ b/examples/sites/src/style.css @@ -25,3 +25,61 @@ b, strong { .tiny-grid td,.tiny-grid th { vertical-align: middle; } + +/* Algolia 搜索 */ + +.search-box { + position: absolute; + z-index: 1000; + top: 12px; + left: 360px; +} + +.DocSearch-Container { + z-index: 1000; +} + +.DocSearch-Button { + border-radius: 6px; + transition: 0.4s +} + +.DocSearch-Button:hover { + box-shadow: inset 0 0 0 1px #1476ff; + background-color: #f5f5f5; +} + +.DocSearch-Button .DocSearch-Search-Icon { + width: 14px; +} + +.DocSearch-Button-Placeholder { + color: #969faf; +} + +:root { + --docsearch-primary-color: #1476ff; + --docsearch-searchbox-background: #f5f5f5; +} + +@media screen and (max-width: 1023px) { + .search-box { + left: 420px; + } +} + +@media screen and (max-width: 768px) { + .DocSearch-Modal { + margin-top: 60px; + } + + .search-box { + left: 360px; + } +} + +@media screen and (max-width: 430px) { + .search-box { + left: 300px; + } +} \ No newline at end of file diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue index 4009e4dbf2..cfc0828ef6 100644 --- a/examples/sites/src/views/components/components.vue +++ b/examples/sites/src/views/components/components.vue @@ -146,18 +146,18 @@
-
+

{{ oneGroup.name }} -

+
{{ oneGroup.type }}