From 7e384ef6a70e2df68fafbf73c33c0d37c36889fb Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 3 Dec 2024 11:40:39 +0800 Subject: [PATCH 1/4] docs: add algolia search --- examples/sites/index.html | 12 +++++ examples/sites/src/style.css | 54 ++++++++++++++++++++++ examples/sites/src/views/layout/layout.vue | 1 + 3 files changed, 67 insertions(+) diff --git a/examples/sites/index.html b/examples/sites/index.html index f8b32c2dc0..510f77db4d 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/style.css b/examples/sites/src/style.css index d2702b80f9..a4b808b656 100644 --- a/examples/sites/src/style.css +++ b/examples/sites/src/style.css @@ -25,3 +25,57 @@ b, strong { .tiny-grid td,.tiny-grid th { vertical-align: middle; } + +/* Algolia 搜索 */ + +.search-box { + position: absolute; + z-index: 1000; + top: 12px; + left: 360px; +} + +.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/layout/layout.vue b/examples/sites/src/views/layout/layout.vue index 0527dc0645..616784a5bc 100644 --- a/examples/sites/src/views/layout/layout.vue +++ b/examples/sites/src/views/layout/layout.vue @@ -11,6 +11,7 @@ :data="menuOptions" :menu-collapsible="true" :filter-node-method="searchMenu" + :show-filter="false" @current-change="clickMenu" @collapse-change="collapseChange" > From f1ba5c88c589f8131071b5ab237179cb6fe1716d Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 3 Dec 2024 14:17:11 +0800 Subject: [PATCH 2/4] docs: optimize user experience --- examples/sites/index.html | 2 +- examples/sites/src/App.vue | 5 +++++ examples/sites/src/style.css | 4 ++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/examples/sites/index.html b/examples/sites/index.html index 510f77db4d..15fc4412d6 100644 --- a/examples/sites/index.html +++ b/examples/sites/index.html @@ -28,7 +28,7 @@
-
+ ``` -### 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 4d99d2ce86..09ad8e302b 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` 变量。 From 5bddcb5d76f07daa791cb898c890813d5a131581 Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 3 Dec 2024 20:41:17 +0800 Subject: [PATCH 4/4] docs: optimize demo/api header --- examples/sites/src/views/components/components.vue | 8 ++++---- examples/sites/src/views/components/demo.vue | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue index d95100bc20..46644f790b 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 }}