chore: update branches in GitHub actions

For example, when calling `get({}, 'button.small')`, it expects to return an empty string, but return a function (`''.small` is a native function, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small).

.gitee/ISSUE_TEMPLATE.zh-CN.md

@@ -2,4 +2,4 @@
 
 请移步 GitHub issues 进行反馈：
 
-https://github.com/youzan/vant/issues
+https://github.com/vant-ui/vant/issues

.github/CONTRIBUTING.md

@@ -29,7 +29,7 @@ It's welcomed to pull request, And there are some tips about that:
 You will need [Node.js >= 14](https://nodejs.org) and [pnpm](https://pnpm.io).
 
 ```bash
-git clone git@github.com:youzan/vant.git
+git clone git@github.com:vant-ui/vant.git
 
 # Install dependencies
 pnpm i

.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交 Bug 报告前，请注意：
 
         - 确认你的问题无法通过官方文档得到解决。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
-        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
+        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
 
   - type: input
     id: reproduce

.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交 Bug 报告前，请注意：
 
         - 确认你的问题无法通过官方文档得到解决。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
-        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
+        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
 
   - type: input
     id: reproduce

.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交功能需求前，请注意：
 
         - 确认这是一个通用功能，并且无法通过现有的 API 或 Slot 实现。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
-        - 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
+        - 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
 
   - type: textarea
     id: description

.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交功能需求前，请注意：
 
         - 确认这是一个通用功能，并且无法通过现有的 API 实现。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
-        - 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
+        - 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
 
   - type: textarea
     id: description

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ### Before submitting a pull request, please make sure the following is done:
 
-1. Read the [contributing guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md).
+1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes (`npm test`).

.github/workflows/deploy-v4-site.yml

@@ -1,4 +1,4 @@
-name: Deploy V3 Site
+name: Deploy V4 Site
 
 on:
   push:
@@ -15,7 +15,7 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
         with:
-          ref: 'dev'
+          ref: 'next'
 
       - name: Install pnpm
         run: npm i pnpm@7 -g
@@ -36,4 +36,5 @@ jobs:
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
+          target-folder: v4
           clean: false

.github/workflows/release-tag.yml

@@ -20,6 +20,6 @@ jobs:
         with:
           tag_name: ${{ github.ref }}
           body: |
-            更新内容参见 [CHANGELOG](https://youzan.github.io/vant/#/zh-CN/changelog)。
+            更新内容参见 [CHANGELOG](https://vant-ui.github.io/vant/#/zh-CN/changelog)。
 
-            Please refer to [CHANGELOG](https://youzan.github.io/vant/#/en-US/changelog) for details.
+            Please refer to [CHANGELOG](https://vant-ui.github.io/vant/#/en-US/changelog) for details.

.github/workflows/sync-gitee.yml

@@ -2,7 +2,9 @@ name: Sync to Gitee
 
 on:
   push:
-    branches: [dev, 2.x, gh-pages]
+    branches: [dev, 2.x, 3.x, gh-pages]
+
+  workflow_dispatch:
 
 jobs:
   build:
@@ -15,6 +17,6 @@ jobs:
           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
         with:
           # GitHub 源仓库地址
-          source-repo: git@github.com:youzan/vant.git
+          source-repo: git@github.com:vant-ui/vant.git
           # Gitee 目标仓库地址
           destination-repo: git@gitee.com:vant-contrib/vant.git

.github/workflows/test.yml

@@ -1,6 +1,15 @@
 name: CI
 
-on: [push]
+on:
+  push:
+    branches:
+      - '**'
+
+  pull_request:
+    branches:
+      - dev
+
+  workflow_dispatch:
 
 jobs:
   lint:

.gitignore

@@ -15,6 +15,5 @@ package-lock.json
 es
 lib
 dist
-vetur
 **/site-dist
 changelog.generated.md

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

.npmrc

@@ -1 +1,3 @@
 registry=https://registry.npmmirror.com/
+
+strict-peer-dependencies=false

.stylelintrc

@@ -1,3 +0,0 @@
-{
-  "extends": ["@vant/stylelint-config"]
-}

README.md

@@ -4,21 +4,20 @@
 
 <h1 align="center">Vant</h1>
 
-<p align="center">Mobile UI Components built on Vue</p>
+<p align="center">Lightweight Mobile UI Components built on Vue</p>
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
-    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
+    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
+    <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
   🔥 <a href="https://vant-contrib.gitee.io/vant">文档网站（国内）</a>
   &nbsp;
-  🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
+  🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
   &nbsp;
   🇨🇳 <a href="./README.zh-CN.md">中文版介绍</a>
 </p>
@@ -29,6 +28,7 @@
 
 - 🚀 1KB Component average size (min+gzip)
 - 🚀 70+ High quality components
+- 🚀 Zero third-party dependencies
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos
@@ -67,14 +67,18 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. Import the components you need
 import { Button } from 'vant';
+// 2. Import the components style
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. Register the components you need
 app.use(Button);
 ```
 
-See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
+See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
 
 ## Browser Support
 
@@ -86,11 +90,11 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 | Project | Description |
 | --- | --- |
-| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
+| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
-| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
-| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
-| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
 
 ## Community Ecosystem
 
@@ -106,8 +110,8 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 ## Links
 
-- [Documentation](https://youzan.github.io/vant)
-- [Changelog](https://youzan.github.io/vant#/en-US/changelog)
+- [Documentation](https://vant-ui.github.io/vant)
+- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
 - [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
 
 ## Preview
@@ -128,7 +132,7 @@ Core contributors of Vant and Vant Weapp:
 
 Thanks to the following friends for their contributions to Vant:
 
-<a href="https://github.com/youzan/vant/graphs/contributors">
+<a href="https://github.com/vant-ui/vant/graphs/contributors">
   <img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
 </a>
 

README.zh-CN.md

@@ -8,17 +8,16 @@
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
-    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
+    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
+    <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
   🔥 <a href="https://vant-contrib.gitee.io/vant">文档网站（国内）</a>
   &nbsp;
-  🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
+  🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
 </p>
 
 ---
@@ -33,6 +32,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景
+- 🚀 零外部依赖，不依赖三方 npm 包
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
 - 📖 提供丰富的中英文文档和组件示例
@@ -71,10 +71,14 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. 引入你需要的组件
 import { Button } from 'vant';
+// 2. 引入组件样式
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. 注册你需要的组件
 app.use(Button);
 ```
 
@@ -92,11 +96,11 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 | 项目 | 描述 |
 | --- | --- |
-| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
+| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
-| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
-| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
 
 ## 社区生态
 
@@ -136,7 +140,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 感谢以下小伙伴们为 Vant 发展做出的贡献：
 
-<a href="https://github.com/youzan/vant/graphs/contributors">
+<a href="https://github.com/vant-ui/vant/graphs/contributors">
   <img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
 </a>
 
@@ -144,7 +148,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
 
-使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+使用过程中发现任何问题都可以提 [Issue](https://github.com/vant-ui/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/vant-ui/vant/pulls)。
 
 ## 开源协议
 

package.json

@@ -9,22 +9,29 @@
     "build": "pnpm --dir ./packages/vant build",
     "build:site": "pnpm --dir ./packages/vant build:site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
-  "packageManager": "pnpm@7.1.6",
+  "packageManager": "pnpm@7.11.0",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
-    "@vant/stylelint-config": "workspace:*",
-    "eslint": "^8.2.0",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
-    "lint-staged": "^12.1.2",
-    "prettier": "^2.5.0",
-    "rimraf": "^3.0.2",
-    "stylelint": "^13.13.1"
+    "nano-staged": "^0.8.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "@types/react",
+        "react",
+        "react-dom"
+      ]
+    }
   }
 }

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -15,18 +15,17 @@
     "build": "vant-cli build",
     "release": "vant-cli release",
     "test:coverage": "open test/coverage/index.html",
-    "build-site": "vant-cli build-site && gh-pages -d site-dist"
+    "build-site": "vant-cli build-site && npx gh-pages -d site-dist"
   },
   "author": "",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "nano-staged",
       "commit-msg": "vant-cli commit-lint"
     }
   },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+  "nano-staged": {
+    "*.{ts,tsx,js,jsx,vue}": "eslint --fix"
   },
   "peerDependencies": {
     "vue": "^2.6.11",
@@ -43,11 +42,6 @@
       "@vant"
     ]
   },
-  "stylelint": {
-    "extends": [
-      "@vant/stylelint-config"
-    ]
-  },
   "prettier": {
     "singleQuote": true
   },

packages/create-vant-cli-app/generators/vue3/.gitignore.tpl

@@ -15,6 +15,5 @@ test/coverage
 es
 lib
 dist
-vetur
 site
 changelog.generated.md

packages/create-vant-cli-app/generators/vue3/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -17,16 +17,15 @@
     "build": "vant-cli build",
     "build:site": "vant-cli build-site",
     "release": "vant-cli release --tag next",
-    "release:site": "pnpm build:site && gh-pages -d site-dist",
+    "release:site": "pnpm build:site && npx gh-pages -d site-dist",
     "test:watch": "vant-cli test --watch",
     "test:coverage": "open test/coverage/index.html"
   },
   "author": "",
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -42,11 +41,6 @@
       "@vant"
     ]
   },
-  "stylelint": {
-    "extends": [
-      "@vant/stylelint-config"
-    ]
-  },
   "prettier": {
     "singleQuote": true
   },

packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue

@@ -7,3 +7,7 @@
     <demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
   </demo-block>
 </template>
+
+<script setup>
+import DemoButton from '../index.vue';
+</script>

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {
@@ -24,24 +24,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/create-vant-cli-app"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/inquirer": "^8.1.3",
-    "release-it": "^14.11.6",
-    "typescript": "~4.5.2"
+    "@types/inquirer": "^8.2.3",
+    "release-it": "^15.4.1",
+    "typescript": "^4.8.2"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
     "consola": "^2.11.3",
-    "fast-glob": "^3.2.4",
-    "fs-extra": "^10.0.0",
-    "inquirer": "^8.0.0"
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
+    "inquirer": "^8.2.4",
+    "picocolors": "^1.0.0"
   },
   "release-it": {
     "git": {

packages/create-vant-cli-app/src/generator.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import glob from 'fast-glob';
-import chalk from 'chalk';
+import color from 'picocolors';
 import consola from 'consola';
 import { prompt } from 'inquirer';
 import { sep, join } from 'path';
@@ -64,7 +64,7 @@ export class VanGenerator {
 
   writing() {
     console.log();
-    consola.info(`Creating project in ${chalk.green(this.outputDir)}\n`);
+    consola.info(`Creating project in ${color.green(this.outputDir)}\n`);
 
     // see https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows
     const templatePath = join(GENERATOR_DIR, this.inputs.vueVersion).replace(
@@ -99,16 +99,16 @@ export class VanGenerator {
     fs.writeFileSync(to, content);
 
     const name = to.replace(this.outputDir + sep, '');
-    consola.success(`${chalk.green('create')} ${name}`);
+    consola.success(`${color.green('create')} ${name}`);
   }
 
   end() {
     const { name } = this.inputs;
 
     console.log();
-    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(`Successfully created ${color.yellow(name)}.`);
     consola.success(
-      `Run ${chalk.yellow(
+      `Run ${color.yellow(
         `cd ${name} && git init && yarn && yarn dev`
       )} to start development!`
     );

packages/vant-area-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/area-data",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Vant 省市区数据",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -29,16 +29,16 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-area-data"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "esbuild": "^0.14.54",
+    "release-it": "^15.4.1",
+    "typescript": "^4.8.2"
   },
   "release-it": {
     "git": {

packages/vant-area-data/src/index.ts

@@ -1150,10 +1150,10 @@ export const areaList = {
     232701: '漠河市',
     232721: '呼玛县',
     232722: '塔河县',
-    232790: '松岭区',
-    232791: '呼中区',
-    232792: '加格达奇区',
-    232793: '新林区',
+    232761: '加格达奇区',
+    232762: '松岭区',
+    232763: '新林区',
+    232764: '呼中区',
     310101: '黄浦区',
     310104: '徐汇区',
     310105: '长宁区',

packages/vant-cli/README.md

@@ -10,7 +10,7 @@ Vant CLI is a tool for building vue component library. You can quickly build a f
 
 - Provides rich commands covering the complete process from development to deploy
 - Based on conventional directory structure. Generate elegant document website and component examples automatically.
-- ESlint Stylelint built-in.
+- ESlint built-in.
 - Support Tree Shaking/Theme Customization/Import on Demand
 
 ### Quickstart
@@ -47,19 +47,15 @@ Please add the followed config to `package.json` file.
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "eslintConfig": {
     "root": true,
     "extends": ["@vant"]
   },
-  "stylelint": {
-    "extends": ["@vant/stylelint-config"]
-  },
   "prettier": {
     "singleQuote": true
   },
@@ -69,7 +65,7 @@ Please add the followed config to `package.json` file.
 
 ## More Details
 
-- [cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
-- [config](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
-- [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
-- [CHANGELOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
+- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.md)
+- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
+- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
+- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)

packages/vant-cli/README.zh-CN.md

@@ -1,12 +1,13 @@
 # Vant CLI
 
-Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
+Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
 
 ### 特性
 
+- 基于 Vite 实现，享受愉悦的开发体验
 - 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
 - 基于约定的目录结构，自动生成优雅的文档站点和组件示例
-- 内置 ESLint、Stylelint 校验规则，提交代码时自动执行校验
+- 内置 ESLint 校验规则，提交代码时自动执行校验
 - 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
 
 ### 快速上手
@@ -43,19 +44,15 @@ pnpm add @vant/cli -D
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "eslintConfig": {
     "root": true,
     "extends": ["@vant"]
   },
-  "stylelint": {
-    "extends": ["@vant/stylelint-config"]
-  },
   "prettier": {
     "singleQuote": true
   },
@@ -65,7 +62,7 @@ pnpm add @vant/cli -D
 
 ## 详细文档
 
-- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
-- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
-- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
-- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
+- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
+- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
+- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
+- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)

packages/vant-cli/changelog.md

@@ -1,5 +1,52 @@
 # 更新日志
 
+## v5.0.0 (未发布)
+
+### 依赖升级
+
+对以下依赖进行了大版本升级：
+
+- vite v3
+- @vitejs/plugin-vue v3
+- @vitejs/plugin-vue-jsx v2
+
+### 依赖精简
+
+- 不再默认安装 `gh-pages` 依赖，请按照如下方式更新 `package.json`：
+
+```diff
+- "release:site": "pnpm build:site && gh-pages -d site-dist",
++ "release:site": "pnpm build:site && npx gh-pages -d site-dist",
+```
+
+- 不再默认内置 `stylelint`，需要的话可以自行安装：
+
+```bash
+yarn add stylelint@13 @vant/stylelint-config
+```
+
+### 移除 vetur 相关配置
+
+由于 Vue 3 推荐使用 volar 而不是 vetur，因此移除了 vetur 相关的配置文件。
+
+现在会默认生成 WebStorm 所需的 web-types.json 文件到 `lib/web-types.json` 目录下。
+
+## v4.0.4
+
+`2022-07-02`
+
+- 修复构建 sfc 文件的类型定义时报错的问题
+
+## v4.0.3
+
+`2022-07-02`
+
+- 新增 `build.bundleOptions` 配置项
+- 新增 `css.removeSourceFile` 配置项
+- 修复编译后的 script setup 中，引用的组件不生效的问题
+- 移除未使用的 esm bundle
+- 移除未使用的 ssr.js 文件
+
 ## v4.0.2
 
 `2022-05-14`
@@ -396,15 +443,15 @@ yarn add sass
 
 `2020-03-29`
 
-- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
+- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/vant-ui/vant/pull/5928))
 
 ### v2.3.0
 
 `2020-03-25`
 
-- build 命令支持编译 scoped 样式 ([#5910](https://github.com/youzan/vant/pull/5910))
-- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/youzan/vant/issues/5899))
-- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/youzan/vant/issues/5895))
+- build 命令支持编译 scoped 样式 ([#5910](https://github.com/vant-ui/vant/pull/5910))
+- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/vant-ui/vant/issues/5899))
+- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/vant-ui/vant/issues/5895))
 - 升级 @vant/markdown-vetur 2.0.0
 
 ### v2.2.8
@@ -438,7 +485,7 @@ yarn add sass
 
 `2020-02-14`
 
-- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
+- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/vant-ui/vant/pull/5655)
 
 ### v2.2.3
 
@@ -450,14 +497,14 @@ yarn add sass
 
 `2020-02-05`
 
-- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
+- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/vant-ui/vant/pull/5626))
 
 ### v2.2.1
 
 `2020-02-04`
 
 - 升级 babel@7.8
-- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
+- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/vant-ui/vant/pull/5620))
 
 ### v2.2.0
 

packages/vant-cli/docs/commands.md

@@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
 
 Build Vue component library.
 
-Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
+Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
 
 Please add the followed config to `package.json` when publish to npm.
 

packages/vant-cli/docs/commands.zh-CN.md

@@ -31,7 +31,7 @@ npx vant-cli dev
 
 构建组件库。
 
-运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
+运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
 
 发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
 

packages/vant-cli/docs/config.md

@@ -325,7 +325,7 @@ module.exports = {
     versions: [
       {
         label: 'v1',
-        link: 'https://youzan.github.io/vant/v1/',
+        link: 'https://vant-ui.github.io/vant/v1/',
       },
     ],
   },
@@ -380,12 +380,19 @@ Customize iframe URL.
 
 Customize HTML meta tag, key means name, value means content.
 
+### site.headHtml
+
+- Type: `string`
+- Default: `undefined`
+
+Insert a custom HTML content in the `<head>` tag.
+
 ### site.enableVConsole
 
 - Type: `boolean`
 - Default: `false`
 
-Should use [vConsole](https://github.com/Tencent/vConsole) to debug when dev. For mobile.
+Whether to enable [vConsole](https://github.com/Tencent/vConsole) debugging in dev, usually used for mobile debugging.
 
 ## PostCSS
 

packages/vant-cli/docs/config.zh-CN.md

@@ -327,7 +327,7 @@ module.exports = {
     versions: [
       {
         label: 'v1',
-        link: 'https://youzan.github.io/vant/v1/',
+        link: 'https://vant-ui.github.io/vant/v1/',
       },
     ],
   },
@@ -337,7 +337,7 @@ module.exports = {
 ### site.baiduAnalytics
 
 - Type: `object`
-- Default: `undefied`
+- Default: `undefined`
 
 文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
 
@@ -384,6 +384,13 @@ module.exports = {
 
 配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
 
+### site.headHtml
+
+- Type: `string`
+- Default: `undefined`
+
+在 `<head>` 标签中插入一段自定义的 HTML 内容。
+
 ### site.enableVConsole
 
 - Type: `boolean`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -32,67 +32,63 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-cli"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
+    "@jest/types": "^27.5.1",
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
-    "@jest/types": "^27",
-    "vue": "^3.2.27",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vue": "^3.2.38"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@docsearch/css": "^3.0.0",
-    "@docsearch/js": "^3.0.0",
-    "@types/jest": "^27.0.3",
-    "@vant/eslint-config": "^3.3.2",
-    "@vant/markdown-vetur": "^2.3.0",
-    "@vant/stylelint-config": "^1.4.2",
-    "@vant/touch-emulator": "^1.3.2",
-    "@vitejs/plugin-vue": "^2.0.0",
-    "@vitejs/plugin-vue-jsx": "^1.3.3",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-typescript": "^7.18.6",
+    "@docsearch/css": "^3.2.1",
+    "@docsearch/js": "^3.2.1",
+    "@types/jest": "^27.5.2",
+    "@vant/eslint-config": "^3.5.0",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "autoprefixer": "^10.4.0",
-    "chalk": "^4.1.2",
-    "commander": "^8.3.0",
+    "autoprefixer": "^10.4.8",
+    "commander": "^9.4.0",
     "consola": "^2.15.3",
-    "conventional-changelog": "^3.1.24",
-    "esbuild": "^0.14.29",
-    "eslint": "^8.1.0",
+    "conventional-changelog": "^3.1.25",
+    "esbuild": "^0.14.54",
+    "eslint": "^8.23.0",
     "execa": "^5.1.1",
-    "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.0",
-    "gh-pages": "^3.2.3",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
-    "jest": "^27.3.1",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.4.0",
     "jest-serializer-html": "^7.1.0",
-    "less": "^4.1.2",
-    "lint-staged": "^12.1.2",
-    "markdown-it": "^12.2.0",
-    "markdown-it-anchor": "^8.4.1",
-    "ora": "^6.0.1",
-    "postcss": "^8.3.11",
-    "postcss-load-config": "^3.1.0",
-    "prettier": "^2.5.0",
-    "release-it": "^14.11.6",
-    "stylelint": "^13.0.0",
-    "transliteration": "^2.2.0",
-    "typescript": "^4.5.2",
-    "vite": "^2.9.0",
-    "vite-plugin-html": "^2.1.1",
-    "vite-plugin-md": "^0.11.4",
-    "vue-router": "^4.0.12"
+    "less": "^4.1.3",
+    "markdown-it": "^12.3.2",
+    "markdown-it-anchor": "^8.6.4",
+    "nano-staged": "^0.8.0",
+    "nanospinner": "^1.1.0",
+    "picocolors": "^1.0.0",
+    "postcss": "^8.4.16",
+    "postcss-load-config": "^3.1.4",
+    "prettier": "^2.7.1",
+    "release-it": "^15.4.1",
+    "transliteration": "^2.3.5",
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9",
+    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-md": "^0.11.9",
+    "vue-router": "^4.1.5"
   },
   "release-it": {
     "git": {

packages/vant-cli/site/common/iframe-sync.js

@@ -1,7 +1,4 @@
-/**
- * 同步父窗口和 iframe 的 vue-router 状态
- */
-
+import { ref } from 'vue';
 import { config } from 'site-desktop-shared';
 
 let queue = [];
@@ -62,6 +59,49 @@ export function syncPathToChild() {
   }
 }
 
+export function syncThemeToChild(theme) {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(() => {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'updateTheme',
+          value: theme,
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function getDefaultTheme() {
+  const cache = window.localStorage.getItem('vantTheme');
+
+  if (cache) {
+    return cache;
+  }
+
+  const useDark =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return useDark ? 'dark' : 'light';
+}
+
+export function useCurrentTheme() {
+  const theme = ref(getDefaultTheme());
+
+  window.addEventListener('message', (event) => {
+    if (event.data?.type !== 'updateTheme') {
+      return;
+    }
+
+    const newTheme = event.data?.value || '';
+    theme.value = newTheme;
+  });
+
+  return theme;
+}
+
 export function listenToSyncPath(router) {
   window.addEventListener('message', (event) => {
     if (event.data?.type !== 'replacePath') {

packages/vant-cli/site/common/style/base.less

@@ -1,16 +1,15 @@
-@import './var';
-@import './font.less';
+@import './vars.less';
 
 body {
   min-width: 1100px;
   margin: 0;
   overflow-x: auto;
-  color: @van-doc-black;
+  color: var(--van-doc-text-color-2);
   font-size: 16px;
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
     Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-  background-color: @van-doc-background-color;
+  background-color: var(--van-doc-background);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -42,8 +41,8 @@ a {
 .van-doc-row {
   width: 100%;
 
-  @media (min-width: @van-doc-row-max-width) {
-    width: @van-doc-row-max-width;
+  @media (min-width: var(--van-doc-row-max-width)) {
+    width: var(--van-doc-row-max-width);
     margin: 0 auto;
   }
 }

packages/vant-cli/site/common/style/font.less

@@ -1,163 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}

packages/vant-cli/site/common/style/highlight.less

@@ -1,20 +1,18 @@
-@import './var';
-
 code {
   position: relative;
   display: block;
   padding: 16px 20px;
   overflow-x: auto;
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
   font-weight: 400;
   font-size: 14px;
-  font-family: @van-doc-code-font-family;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
   line-height: 26px;
   white-space: pre-wrap;
   word-wrap: break-word;
   -webkit-font-smoothing: auto;
-  background-color: #f8f8f8;
-  border-radius: @van-doc-border-radius;
+  background-color: var(--van-doc-code-background);
+  border-radius: var(--van-doc-border-radius);
 }
 
 pre {
@@ -33,7 +31,7 @@ pre {
 }
 
 .hljs-subst {
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
 }
 
 .hljs-string,
@@ -42,18 +40,18 @@ pre {
 .hljs-template-tag,
 .hljs-template-variable,
 .hljs-addition {
-  color: @van-doc-green;
+  color: var(--van-doc-green);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #999;
+  color: var(--van-doc-code-comment-color);
 }
 
 .hljs-params,
 .hljs-keyword,
 .hljs-attribute {
-  color: @van-doc-purple;
+  color: var(--van-doc-purple);
 }
 
 .hljs-deletion,

packages/vant-cli/site/common/style/var.less

@@ -1,27 +0,0 @@
-@van-doc-black: #323233;
-@van-doc-blue: #1989fa;
-@van-doc-purple: #8080ff;
-@van-doc-fuchsia: #a7419e;
-@van-doc-green: #4fc08d;
-@van-doc-text-color: #34495e;
-@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
-@van-doc-background-color: #f7f8fa;
-@van-doc-grey: #999;
-@van-doc-dark-grey: #666;
-@van-doc-light-grey: #ccc;
-@van-doc-border-color: #f1f4f8;
-@van-doc-code-color: #58727e;
-@van-doc-code-background-color: #f1f4f8;
-@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 24px;
-@van-doc-row-max-width: 1680px;
-@van-doc-nav-width: 220px;
-@van-doc-border-radius: 20px;
-
-// header
-@van-doc-header-top-height: 64px;
-@van-doc-header-bottom-height: 50px;
-
-// simulator
-@van-doc-simulator-width: 360px;
-@van-doc-simulator-height: 620px;

packages/vant-cli/site/common/style/vars.less

@@ -0,0 +1,74 @@
+body {
+  // colors
+  --van-doc-black: #000;
+  --van-doc-white: #fff;
+  --van-doc-gray-1: #f7f8fa;
+  --van-doc-gray-2: #f2f3f5;
+  --van-doc-gray-3: #ebedf0;
+  --van-doc-gray-4: #dcdee0;
+  --van-doc-gray-5: #c8c9cc;
+  --van-doc-gray-6: #969799;
+  --van-doc-gray-7: #646566;
+  --van-doc-gray-8: #323233;
+  --van-doc-blue: #1989fa;
+  --van-doc-green: #07c160;
+
+  // sizes
+  --van-doc-padding: 24px;
+  --van-doc-row-max-width: 1680px;
+  --van-doc-nav-width: 220px;
+  --van-doc-border-radius: 20px;
+  --van-doc-simulator-width: 360px;
+  --van-doc-simulator-height: 620px;
+  --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+  // text
+  --van-doc-text-color-1: var(--van-doc-black);
+  --van-doc-text-color-2: var(--van-doc-gray-8);
+  --van-doc-text-color-3: #34495e;
+  --van-doc-text-color-4: var(--van-doc-gray-6);
+  --van-doc-link-color: var(--van-doc-blue);
+
+  // background
+  --van-doc-background: #eff2f5;
+  --van-doc-background-2: var(--van-doc-white);
+  --van-doc-background-3: var(--van-doc-white);
+  --van-doc-header-background: #011f3c;
+  --van-doc-border-color: var(--van-doc-gray-2);
+
+  // code
+  --van-doc-code-color: #58727e;
+  --van-doc-code-comment-color: var(--van-doc-gray-6);
+  --van-doc-code-background: var(--van-doc-gray-1);
+
+  // blockquote
+  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+  // text
+  --van-doc-text-color-1: var(--van-doc-white);
+  --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
+  --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+  --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
+  --van-doc-link-color: #1bb5fe;
+
+  // background
+  --van-doc-background: #202124;
+  --van-doc-background-2: rgba(255, 255, 255, 0.06);
+  --van-doc-background-3: rgba(255, 255, 255, 0.1);
+  --van-doc-header-background: rgba(1, 31, 60, 0.3);
+  --van-doc-border-color: #3a3a3c;
+
+  // code
+  --van-doc-code-color: rgba(200, 200, 200, 0.85);
+  --van-doc-code-comment-color: var(--van-doc-gray-7);
+  --van-doc-code-background: rgba(0, 0, 0, 0.24);
+
+  // blockquote
+  --van-doc-blockquote-color: #bae6fd;
+  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}

packages/vant-cli/site/desktop/App.vue

@@ -8,6 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
     >
       <router-view />
     </van-doc>
@@ -27,6 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
+      darkModeClass: config.site.darkModeClass,
     };
   },
 
@@ -70,18 +72,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitleAndToogleSimulator();
+          this.setTitleAndToggleSimulator();
         }
       },
       immediate: true,
@@ -100,7 +102,7 @@ export default {
   },
 
   methods: {
-    setTitleAndToogleSimulator() {
+    setTitleAndToggleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(

packages/vant-cli/site/desktop/components/Container.vue

@@ -18,18 +18,18 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-container {
   box-sizing: border-box;
-  padding-left: @van-doc-nav-width;
+  padding-left: var(--van-doc-nav-width);
   overflow: hidden;
 
   &--with-simulator {
-    padding-right: @van-doc-simulator-width + @van-doc-padding;
+    padding-right: calc(
+      var(--van-doc-simulator-width) + var(--van-doc-padding)
+    );
 
     @media (max-width: 1100px) {
-      padding-right: @van-doc-simulator-width - 8px;
+      padding-right: calc(var(--van-doc-simulator-width) - 8px);
     }
   }
 }

packages/vant-cli/site/desktop/components/Content.vue

@@ -82,14 +82,12 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: #fff;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-2);
+  border-radius: var(--van-doc-border-radius);
+  overflow: auto;
 
   > pre code {
     position: relative;
@@ -144,15 +142,15 @@ export default {
   > table a,
   > blockquote a {
     margin: 0 1px;
-    color: @van-doc-blue;
+    color: var(--van-doc-link-color);
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: darken(@van-doc-blue, 10%);
+      opacity: 0.8;
     }
 
     &:active {
-      color: darken(@van-doc-blue, 20%);
+      opacity: 0.6;
     }
   }
 
@@ -160,7 +158,6 @@ export default {
   > h4,
   > h5,
   > h6 {
-    color: @van-doc-black;
     font-weight: normal;
     line-height: 1.6;
 
@@ -189,23 +186,19 @@ export default {
 
   > p {
     margin-top: 8px;
-  }
-
-  > p,
-  > blockquote p {
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
     strong {
-      color: black;
+      color: var(--van-doc-text-color-1);
     }
   }
 
   > table {
     width: 100%;
     margin-top: 12px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 14px;
     line-height: 1.5;
     border-collapse: collapse;
@@ -226,7 +219,7 @@ export default {
 
     td {
       padding: 8px;
-      border-top: 1px solid @van-doc-code-background-color;
+      border-top: 1px solid var(--van-doc-border-color);
 
       &:first-child {
         padding-left: 0;
@@ -235,10 +228,10 @@ export default {
         code {
           margin: 0;
           padding: 2px 6px;
-          color: @van-doc-blue;
+          color: var(--van-doc-blue);
           font-weight: 600;
           font-size: 11px;
-          background-color: fade(@van-doc-blue, 10%);
+          background-color: rgba(25, 137, 250, 0.15);
           border-radius: 20px;
         }
       }
@@ -250,9 +243,9 @@ export default {
 
     em {
       display: inline-block;
-      color: @van-doc-green;
+      color: var(--van-doc-green);
       font-size: 14px;
-      font-family: @van-doc-code-font-family;
+      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
       font-style: normal;
       max-width: 300px;
       -webkit-font-smoothing: auto;
@@ -268,7 +261,7 @@ export default {
     position: relative;
     margin: 5px 0 5px 10px;
     padding-left: 15px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
@@ -280,7 +273,7 @@ export default {
       width: 6px;
       height: 6px;
       margin-top: 10px;
-      border: 1px solid @van-doc-dark-grey;
+      border: 1px solid currentColor;
       border-radius: 50%;
       content: '';
     }
@@ -310,15 +303,17 @@ export default {
   > blockquote {
     margin: 16px 0 0;
     padding: 16px;
-    background-color: #ecf9ff;
-    border-radius: @van-doc-border-radius;
+    font-size: 14px;
+    color: var(--van-doc-blockquote-color);
+    background-color: var(--van-doc-blockquote-background);
+    border-radius: var(--van-doc-border-radius);
   }
 
   > img,
   > p img {
     width: 100%;
     margin: 16px 0;
-    border-radius: @van-doc-border-radius;
+    border-radius: var(--van-doc-border-radius);
   }
 }
 
@@ -333,7 +328,6 @@ export default {
 
     h1,
     h2 {
-      color: @van-doc-black;
       font-weight: normal;
       line-height: 1.5;
 

packages/vant-cli/site/desktop/components/Header.vue

@@ -24,6 +24,16 @@
             </a>
           </li>
 
+          <li v-if="darkModeClass" class="van-doc-header__top-nav-item">
+            <a
+              class="van-doc-header__link"
+              target="_blank"
+              @click="toggleTheme"
+            >
+              <img :src="themeImg" />
+            </a>
+          </li>
+
           <li
             ref="version"
             v-if="versions"
@@ -69,6 +79,7 @@
 <script>
 import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
+import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
@@ -82,10 +93,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
+    darkModeClass: String,
   },
 
   data() {
     return {
+      currentTheme: getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -112,9 +125,32 @@ export default {
     searchConfig() {
       return this.config.searchConfig;
     },
+
+    themeImg() {
+      if (this.currentTheme === 'light') {
+        return 'https://b.yzcdn.cn/vant/dark-theme.svg';
+      }
+      return 'https://b.yzcdn.cn/vant/light-theme.svg';
+    },
+  },
+
+  watch: {
+    currentTheme: {
+      handler(newVal, oldVal) {
+        window.localStorage.setItem('vantTheme', newVal);
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+        syncThemeToChild(newVal);
+      },
+      immediate: true,
+    },
   },
 
   methods: {
+    toggleTheme() {
+      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+    },
+
     toggleVersionPop() {
       const val = !this.showVersionPop;
 
@@ -147,18 +183,16 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-header {
   width: 100%;
-  background-color: #001938;
+  background-color: var(--van-doc-header-background);
   user-select: none;
 
   &__top {
     display: flex;
     align-items: center;
-    height: @van-doc-header-top-height;
-    padding: 0 @van-doc-padding;
+    height: var(--van-doc-header-top-height);
+    padding: 0 var(--van-doc-padding);
 
     &-nav {
       flex: 1;
@@ -234,7 +268,7 @@ export default {
         transition: 0.2s;
 
         &:hover {
-          color: @van-doc-blue;
+          color: var(--van-doc-link-color);
           background-color: #f7f8fa;
         }
       }
@@ -268,6 +302,8 @@ export default {
   }
 
   &__link {
+    cursor: pointer;
+
     span {
       color: #fff;
       font-size: 16px;

packages/vant-cli/site/desktop/components/Nav.vue

@@ -71,22 +71,19 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-nav {
   position: fixed;
   left: 0;
   z-index: 1;
-  min-width: @van-doc-nav-width;
-  max-width: @van-doc-nav-width;
-  padding: @van-doc-padding 0;
+  min-width: var(--van-doc-nav-width);
+  max-width: var(--van-doc-nav-width);
+  padding: 8px 0;
   overflow-y: scroll;
-  background-color: #fff;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-2);
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;
-    margin-left: -(@van-doc-row-max-width / 2);
+    margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
   &::-webkit-scrollbar {
@@ -110,8 +107,8 @@ export default {
   }
 
   &__title {
-    padding: 8px 0 8px @van-doc-padding;
-    color: #455a64;
+    padding: 24px 0 0 var(--van-doc-padding);
+    color: var(--van-doc-text-color-2);
     font-weight: 600;
     font-size: 15px;
     line-height: 28px;
@@ -121,21 +118,19 @@ export default {
     a {
       display: block;
       margin: 8px 0;
-      padding: 8px 0 8px @van-doc-padding;
-      color: #455a64;
+      padding: 6px 0 6px var(--van-doc-padding);
+      color: var(--van-doc-text-color-3);
       font-size: 14px;
       line-height: 20px;
       transition: color 0.2s;
 
       &:hover,
       &.active {
-        color: @van-doc-green;
+        color: var(--van-doc-link-color);
       }
 
       &.active {
         font-weight: 600;
-        background-color: #ebfff0;
-        border-radius: 999px;
       }
 
       span {

packages/vant-cli/site/desktop/components/SearchInput.vue

@@ -38,8 +38,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 #docsearch {
   display: inline-block;
   vertical-align: middle;

packages/vant-cli/site/desktop/components/Simulator.vue

@@ -44,34 +44,31 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-simulator {
   position: absolute;
-  top: @van-doc-padding + @van-doc-header-top-height;
-  right: @van-doc-padding;
+  top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
+  right: var(--van-doc-padding);
   z-index: 1;
   box-sizing: border-box;
-  width: @van-doc-simulator-width;
-  min-width: @van-doc-simulator-width;
+  width: var(--van-doc-simulator-width);
+  min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: #fafafa;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background: var(--van-doc-background-2);
+  border-radius: var(--van-doc-border-radius);
 
   @media (max-width: 1100px) {
     right: auto;
     left: 750px;
   }
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     right: 50%;
-    margin-right: -(@van-doc-row-max-width / 2) + 24px;
+    margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
   }
 
   &-fixed {
     position: fixed;
-    top: @van-doc-padding;
+    top: var(--van-doc-padding);
   }
 
   iframe {

packages/vant-cli/site/desktop/components/index.vue

@@ -5,6 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -39,8 +40,9 @@ export default {
     lang: String,
     versions: Array,
     simulator: String,
-    hasSimulator: Boolean,
     langConfigs: Array,
+    hasSimulator: Boolean,
+    darkModeClass: String,
     config: {
       type: Object,
       required: true,
@@ -108,7 +110,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import '../../common/style/var';
-</style>

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-sync';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);

packages/vant-cli/site/index.html

@@ -15,6 +15,9 @@
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
+    <% if (headHtml) { %>
+      <%- headHtml %>
+    <% } %>
     <% if (baiduAnalytics) { %>
     <script>
       var _hmt = _hmt || [];
@@ -27,7 +30,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/desktop/main.js"></script>
   </body>

packages/vant-cli/site/mobile.html

@@ -15,6 +15,9 @@
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
+    <% if (headHtml) { %>
+      <%- headHtml %>
+    <% } %>
     <% if (enableVConsole) { %>
     <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
     <script>
@@ -36,7 +39,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/mobile/main.js"></script>
   </body>

packages/vant-cli/site/mobile/App.vue

@@ -10,21 +10,49 @@
 </template>
 
 <script>
+import { watch } from 'vue';
 import DemoNav from './components/DemoNav.vue';
+import { useCurrentTheme } from '../common/iframe-sync';
+import { config } from 'site-mobile-shared';
 
 export default {
   components: { DemoNav },
+
+  setup() {
+    const theme = useCurrentTheme();
+
+    watch(
+      theme,
+      (newVal, oldVal) => {
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+
+        const { darkModeClass } = config.site;
+        if (darkModeClass) {
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+        }
+      },
+      { immediate: true }
+    );
+  },
 };
 </script>
 
 <style lang="less">
-@import '../common/style/var';
 @import '../common/style/base';
 
 body {
   min-width: 100vw;
 }
 
+.van-doc-theme-light {
+  background-color: var(--van-doc-gray-1);
+}
+
+.van-doc-theme-dark {
+  background-color: var(--van-doc-black);
+}
+
 ::-webkit-scrollbar {
   width: 0;
   background: transparent;

packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -20,13 +20,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-demo-block {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: @van-doc-text-light-blue;
+    color: var(--van-doc-text-color-4);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -52,14 +52,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home {
   box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
   padding: 46px 20px 20px;
-  background: #fff;
 
   &__title,
   &__desc {
@@ -94,7 +91,7 @@ export default {
 
   &__desc {
     margin: 0 0 40px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 }

packages/vant-cli/site/mobile/components/DemoHomeNav.vue

@@ -43,12 +43,10 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 
@@ -57,20 +55,20 @@ export default {
     display: flex;
     margin: 0 0 12px;
     padding-left: 20px;
-    color: #323233;
+    color: var(--van-doc-text-color-3);
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background: #f7f8fa;
+    background-color: var(--van-doc-background-3);
     border-radius: 99px;
-    transition: background 0.3s;
+    transition: opacity 0.3s;
 
     &:hover {
-      background: darken(#f7f8fa, 3%);
+      opacity: 0.8;
     }
 
     &:active {
-      background: darken(#f7f8fa, 6%);
+      opacity: 0.6;
     }
   }
 

packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-3);
 
   &__title {
     font-weight: 600;

packages/vant-cli/site/mobile/main.js

@@ -13,3 +13,8 @@ window.app = createApp(App)
 setTimeout(() => {
   window.app.mount('#app');
 }, 0);
+
+// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490
+document.addEventListener('touchstart', () => {}, {
+  passive: true,
+});

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-sync';
 
 const { locales, defaultLang } = config.site;
 

packages/vant-cli/src/cli.ts

@@ -1,25 +1,26 @@
 import { Command } from 'commander';
 
-import {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-  cliVersion,
-} from './index.js';
+import { cliVersion } from './index.js';
 
 const program = new Command();
 
 program.version(`@vant/cli ${cliVersion}`);
 
-program.command('dev').description('Run dev server').action(dev);
+program
+  .command('dev')
+  .description('Run dev server')
+  .action(async () => {
+    const { dev } = await import('./commands/dev.js');
+    return dev();
+  });
 
-program.command('lint').description('Run eslint and stylelint').action(lint);
+program
+  .command('lint')
+  .description('Run ESLint')
+  .action(async () => {
+    const { lint } = await import('./commands/lint.js');
+    return lint();
+  });
 
 program
   .command('test')
@@ -45,34 +46,58 @@ program
     'Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests'
   )
   .option('--debug', 'Print debugging info about your Jest config')
-  .action(test);
+  .action(async (options) => {
+    const { test } = await import('./commands/jest.js');
+    return test(options);
+  });
 
-program.command('clean').description('Clean all dist files').action(clean);
+program
+  .command('clean')
+  .description('Clean all dist files')
+  .action(async () => {
+    const { clean } = await import('./commands/clean.js');
+    return clean();
+  });
 
 program
   .command('build')
   .description('Compile components in production mode')
-  .action(build);
+  .action(async () => {
+    const { build } = await import('./commands/build.js');
+    return build();
+  });
 
 program
   .command('release')
   .description('Compile components and release it')
   .option('--tag <tag>', 'Release tag')
-  .action(release);
+  .action(async (options) => {
+    const { release } = await import('./commands/release.js');
+    return release(options);
+  });
 
 program
   .command('build-site')
   .description('Compile site in production mode')
-  .action(buildSite);
+  .action(async () => {
+    const { buildSite } = await import('./commands/build-site.js');
+    return buildSite();
+  });
 
 program
   .command('changelog')
   .description('Generate changelog')
-  .action(changelog);
+  .action(async () => {
+    const { changelog } = await import('./commands/changelog.js');
+    return changelog();
+  });
 
 program
   .command('commit-lint <gitParams>')
   .description('Lint commit message')
-  .action(commitLint);
+  .action(async (gitParams) => {
+    const { commitLint } = await import('./commands/commit-lint.js');
+    return commitLint(gitParams);
+  });
 
 program.parse();

packages/vant-cli/src/commands/build.ts

@@ -3,7 +3,7 @@ import execa from 'execa';
 import { join, relative } from 'path';
 import { clean } from './clean.js';
 import { CSS_LANG } from '../common/css.js';
-import { ora, consola } from '../common/logger.js';
+import { createSpinner, consola } from '../common/logger.js';
 import { installDependencies } from '../common/manager.js';
 import { compileSfc } from '../compiler/compile-sfc.js';
 import { compileStyle } from '../compiler/compile-style.js';
@@ -12,9 +12,9 @@ import { compileBundles } from '../compiler/compile-bundles.js';
 import { genPackageEntry } from '../compiler/gen-package-entry.js';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
-import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
+import { SRC_DIR, LIB_DIR, ES_DIR, getVantConfig } from '../common/constant.js';
 import { genPackageStyle } from '../compiler/gen-package-style.js';
-import { genVeturConfig } from '../compiler/gen-vetur-config.js';
+import { genWebStormTypes } from '../compiler/web-types/index.js';
 import {
   isDir,
   isSfc,
@@ -135,9 +135,10 @@ async function buildPackageStyleEntry() {
 }
 
 async function buildBundledOutputs() {
+  const config = getVantConfig();
   setModuleEnv('esmodule');
   await compileBundles();
-  genVeturConfig();
+  genWebStormTypes(config.build?.tagPrefix);
 }
 
 const tasks = [
@@ -178,14 +179,14 @@ const tasks = [
 async function runBuildTasks() {
   for (let i = 0; i < tasks.length; i++) {
     const { task, text } = tasks[i];
-    const spinner = ora(text).start();
+    const spinner = createSpinner(text).start();
 
     try {
       /* eslint-disable no-await-in-loop */
       await task();
-      spinner.succeed(text);
+      spinner.success({ text });
     } catch (err) {
-      spinner.fail(text);
+      spinner.error({ text });
       console.log(err);
       throw err;
     }

packages/vant-cli/src/commands/changelog.ts

@@ -1,7 +1,7 @@
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { ROOT } from '../common/constant.js';
-import { ora, slimPath } from '../common/logger.js';
+import { createSpinner, slimPath } from '../common/logger.js';
 import { createWriteStream, readFileSync } from 'fs';
 import conventionalChangelog from 'conventional-changelog';
 
@@ -48,7 +48,7 @@ function transform(item: any) {
 }
 
 export async function changelog(): Promise<void> {
-  const spinner = ora('Generating changelog...').start();
+  const spinner = createSpinner('Generating changelog...').start();
 
   return new Promise((resolve) => {
     conventionalChangelog(
@@ -68,7 +68,9 @@ export async function changelog(): Promise<void> {
     )
       .pipe(createWriteStream(DIST_FILE))
       .on('close', () => {
-        spinner.succeed(`Changelog generated at ${slimPath(DIST_FILE)}`);
+        spinner.success({
+          text: `Changelog generated at ${slimPath(DIST_FILE)}`,
+        });
         resolve();
       });
   });

packages/vant-cli/src/commands/clean.ts

@@ -3,7 +3,6 @@ import {
   ES_DIR,
   LIB_DIR,
   DIST_DIR,
-  VETUR_DIR,
   SITE_DIST_DIR,
 } from '../common/constant.js';
 
@@ -14,7 +13,6 @@ export async function clean() {
     remove(ES_DIR),
     remove(LIB_DIR),
     remove(DIST_DIR),
-    remove(VETUR_DIR),
     remove(SITE_DIST_DIR),
   ]);
 }

packages/vant-cli/src/commands/lint.ts

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import { consola, ora } from '../common/logger.js';
+import { consola, createSpinner } from '../common/logger.js';
 import { SCRIPT_EXTS } from '../common/constant.js';
 
 type RunCommandMessages = {
@@ -13,7 +13,7 @@ function runCommand(
   options: string[],
   messages: RunCommandMessages
 ) {
-  const spinner = ora(messages.start).start();
+  const spinner = createSpinner(messages.start).start();
 
   return new Promise((resolve) => {
     execa(cmd, options, {
@@ -21,11 +21,11 @@ function runCommand(
       env: { FORCE_COLOR: true },
     })
       .then(() => {
-        spinner.succeed(messages.succeed);
+        spinner.success({ text: messages.succeed });
         resolve(true);
       })
       .catch((err: any) => {
-        spinner.fail(messages.failed);
+        spinner.error({ text: messages.failed });
         consola.error(err.stderr || err.stdout);
         resolve(false);
       });
@@ -44,23 +44,10 @@ function eslint() {
   );
 }
 
-function stylelint() {
-  return runCommand(
-    'stylelint',
-    ['src/**/*.css', 'src/**/*.vue', 'src/**/*.less', 'src/**/*.sass', '--fix'],
-    {
-      start: 'Running stylelint...',
-      succeed: 'Stylelint Passed.',
-      failed: 'Stylelint failed!',
-    }
-  );
-}
-
 export async function lint() {
   const eslintPassed = await eslint();
-  const stylelintPassed = await stylelint();
 
-  if (!eslintPassed || !stylelintPassed) {
+  if (!eslintPassed) {
     process.exit(1);
   }
 }

packages/vant-cli/src/commands/release.ts

@@ -4,7 +4,7 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PLUGIN_PATH = join(__dirname, '../../cjs/vant-cli-release-plugin.cjs');
+const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
 
 export async function release(command: { tag?: string }) {
   await releaseIt({

packages/vant-cli/src/common/constant.ts

@@ -21,7 +21,6 @@ export const ROOT = findRootDir(CWD);
 export const ES_DIR = join(ROOT, 'es');
 export const LIB_DIR = join(ROOT, 'lib');
 export const DOCS_DIR = join(ROOT, 'docs');
-export const VETUR_DIR = join(ROOT, 'vetur');
 export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.mjs');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');

packages/vant-cli/src/common/logger.ts

@@ -1,10 +1,10 @@
-import ora from 'ora';
-import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
+import color from 'picocolors';
 import consola from 'consola';
 import { ROOT } from '../common/constant.js';
 
 export function slimPath(path: string) {
-  return chalk.yellow(path.replace(ROOT, ''));
+  return color.yellow(path.replace(ROOT, ''));
 }
 
-export { ora, consola };
+export { createSpinner, consola };

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -87,15 +87,13 @@ export async function compileSfc(filePath: string): Promise<any> {
       new Promise((resolve) => {
         let script = '';
 
-        // the generated render fn lacks type definitions
-        if (lang === 'ts') {
-          script += '// @ts-nocheck\n';
-        }
-
+        let bindingMetadata;
         if (descriptor.scriptSetup) {
-          script += compileScript(descriptor, {
+          const { bindings, content } = compileScript(descriptor, {
             id: scopeId,
-          }).content;
+          });
+          script += content;
+          bindingMetadata = bindings;
         } else {
           script += descriptor.script!.content;
         }
@@ -108,6 +106,9 @@ export async function compileSfc(filePath: string): Promise<any> {
             id: scopeId,
             source: template.content,
             filename: filePath,
+            compilerOptions: {
+              bindingMetadata,
+            },
           }).code;
 
           script = injectRender(script, render);
@@ -119,6 +120,12 @@ export async function compileSfc(filePath: string): Promise<any> {
 
         script += `\n${EXPORT} ${VUEIDS}`;
 
+        // ts-nocheck should be placed on the first line
+        // the generated render fn lacks type definitions
+        if (lang === 'ts') {
+          script = '// @ts-nocheck\n' + script;
+        }
+
         outputFile(scriptFilePath, script).then(resolve);
       })
     );

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import color from 'picocolors';
 import { createRequire } from 'module';
 import { createServer, build } from 'vite';
 import {
@@ -38,8 +38,8 @@ export async function compileSite(production = false) {
 
     const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');
-    const viteInfo = chalk.cyan(`vite v${version}`);
-    console.log(`\n  ${viteInfo}` + chalk.green(` dev server running at:\n`));
+    const viteInfo = color.cyan(`vite v${version}`);
+    console.log(`\n  ${viteInfo}` + color.green(` dev server running at:\n`));
     server.printUrls();
   }
 }

packages/vant-cli/src/compiler/gen-vetur-config.ts

@@ -1,25 +0,0 @@
-import markdownVetur from '@vant/markdown-vetur';
-import {
-  SRC_DIR,
-  VETUR_DIR,
-  getVantConfig,
-  getPackageJson,
-} from '../common/constant.js';
-
-// generate vetur tags & attributes
-export function genVeturConfig() {
-  const pkgJson = getPackageJson();
-  const vantConfig = getVantConfig();
-  const options = vantConfig.build?.vetur;
-
-  if (options) {
-    markdownVetur.parseAndWrite({
-      name: vantConfig.name,
-      path: SRC_DIR,
-      test: /README\.md/,
-      version: pkgJson.version,
-      outputDir: VETUR_DIR,
-      ...options,
-    });
-  }
-}

packages/vant-cli/src/compiler/vant-cli-release-plugin.ts

@@ -1,7 +1,7 @@
-const releaseIt = require('release-it');
-const { execSync } = require('child_process');
+import { Plugin } from 'release-it';
+import { execSync } from 'child_process';
 
-class VantCliReleasePlugin extends releaseIt.Plugin {
+class VantCliReleasePlugin extends Plugin {
   async beforeRelease() {
     // log an empty line
     console.log('');
@@ -11,4 +11,4 @@ class VantCliReleasePlugin extends releaseIt.Plugin {
   }
 }
 
-module.exports = VantCliReleasePlugin;
+export default VantCliReleasePlugin;

packages/vant-cli/src/compiler/web-types/formatter.ts

@@ -1,14 +1,19 @@
 /* eslint-disable no-continue */
-import { Articals } from './parser';
-import { formatOptions, formatType, removeVersion, toKebabCase } from './utils';
-import { VueEventArgument, VueTag } from './type';
+import { Articles } from './parser.js';
+import {
+  formatOptions,
+  formatType,
+  removeVersion,
+  toKebabCase,
+} from './utils.js';
+import { VueEventArgument, VueTag } from './type.js';
 
 function formatComponentName(name: string, tagPrefix: string) {
   return tagPrefix + toKebabCase(name);
 }
 
 /**
- * format arugments of events
+ * format arguments of events
  * input  = value: { foo: foo or 1, bar: bar or 2 }, value2: { one: 1 and 1, two: 2 and 2 }, foo: bar
  * output = [{ name: 'value', type: '{ foo: foo or 1, bar: bar or 2 }' }, { name: 'value2', type: '{ one: 1 and 1, two: 2 and 2 }'}, { name: 'foo', type: 'bar' }]
  */
@@ -73,29 +78,29 @@ function findTag(vueTags: VueTag[], name: string) {
 
 export function formatter(
   vueTags: VueTag[],
-  articals: Articals,
+  articles: Articles,
   tagPrefix = ''
 ) {
-  if (!articals.length) {
+  if (!articles.length) {
     return;
   }
 
-  const mainTitle = articals[0].content;
+  const mainTitle = articles[0].content;
   const defaultName = mainTitle
     ? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
     : '';
-  const tables = articals.filter((artical) => artical.type === 'table');
+  const tables = articles.filter((article) => article.type === 'table');
 
   tables.forEach((item) => {
     const { table } = item;
-    const prevIndex = articals.indexOf(item) - 1;
-    const prevArtical = articals[prevIndex];
+    const prevIndex = articles.indexOf(item) - 1;
+    const prevArticle = articles[prevIndex];
 
-    if (!prevArtical || !prevArtical.content || !table || !table.body) {
+    if (!prevArticle || !prevArticle.content || !table || !table.body) {
       return;
     }
 
-    const tableTitle = prevArtical.content;
+    const tableTitle = prevArticle.content;
 
     if (tableTitle.includes('Props')) {
       const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;

packages/vant-cli/src/compiler/web-types/index.ts

@@ -0,0 +1,55 @@
+import glob from 'fast-glob';
+import { join } from 'path';
+import fse from 'fs-extra';
+import { mdParser } from './parser.js';
+import { formatter } from './formatter.js';
+import { genWebTypes } from './web-types.js';
+import { Options, VueTag } from './type.js';
+import { normalizePath } from './utils.js';
+import {
+  SRC_DIR,
+  LIB_DIR,
+  getVantConfig,
+  getPackageJson,
+} from '../../common/constant.js';
+
+async function readMarkdown(options: Options) {
+  const mds = await glob(normalizePath(`${options.path}/**/*.md`));
+  return mds
+    .filter((md) => options.test.test(md))
+    .map((path) => fse.readFileSync(path, 'utf-8'));
+}
+
+export async function parseAndWrite(options: Options) {
+  if (!options.outputDir) {
+    throw new Error('outputDir can not be empty.');
+  }
+
+  const mds = await readMarkdown(options);
+  const vueTags: VueTag[] = [];
+
+  mds.forEach((md) => {
+    const parsedMd = mdParser(md);
+    formatter(vueTags, parsedMd, options.tagPrefix);
+  });
+
+  const webTypes = genWebTypes(vueTags, options);
+  fse.outputFileSync(
+    join(options.outputDir, 'web-types.json'),
+    JSON.stringify(webTypes, null, 2)
+  );
+}
+
+export function genWebStormTypes(tagPrefix?: string) {
+  const pkgJson = getPackageJson();
+  const vantConfig = getVantConfig();
+
+  parseAndWrite({
+    name: vantConfig.name,
+    path: SRC_DIR,
+    test: /README\.md/,
+    version: pkgJson.version,
+    outputDir: LIB_DIR,
+    tagPrefix,
+  });
+}

packages/vant-cli/src/compiler/web-types/parser.ts

@@ -9,14 +9,14 @@ type TableContent = {
   body: string[][];
 };
 
-export type Artical = {
+export type Article = {
   type: string;
   content?: string;
   table?: TableContent;
   level?: number;
 };
 
-export type Articals = Artical[];
+export type Articles = Article[];
 
 function readLine(input: string) {
   const end = input.indexOf('\n');
@@ -75,8 +75,8 @@ function tableParse(input: string) {
   };
 }
 
-export function mdParser(input: string): Articals {
-  const artical = [];
+export function mdParser(input: string): Articles {
+  const article = [];
   let start = 0;
   const end = input.length;
 
@@ -85,7 +85,7 @@ export function mdParser(input: string): Articals {
 
     let match;
     if ((match = TITLE_REG.exec(target))) {
-      artical.push({
+      article.push({
         type: 'title',
         content: match[2],
         level: match[1].length,
@@ -94,7 +94,7 @@ export function mdParser(input: string): Articals {
       start += match.index + match[0].length;
     } else if ((match = TABLE_REG.exec(target))) {
       const { table, usedLength } = tableParse(target.substr(match.index));
-      artical.push({
+      article.push({
         type: 'table',
         table,
       });
@@ -105,5 +105,5 @@ export function mdParser(input: string): Articals {
     }
   }
 
-  return artical;
+  return article;
 }

packages/vant-cli/src/compiler/web-types/type.ts

@@ -35,26 +35,6 @@ export type VueTag = {
   description?: string;
 };
 
-export type VeturTag = {
-  description?: string;
-  attributes: string[];
-};
-
-export type VeturTags = Record<string, VeturTag>;
-
-export type VeturAttribute = {
-  type: string;
-  description: string;
-  options?: string[];
-};
-
-export type VeturAttributes = Record<string, VeturAttribute>;
-
-export type VeturResult = {
-  tags: VeturTags;
-  attributes: VeturAttributes;
-};
-
 export type Options = {
   name: string;
   path: PathLike;

packages/vant-cli/src/compiler/web-types/web-types.ts

@@ -1,4 +1,4 @@
-import { VueTag, Options } from './type';
+import type { VueTag, Options } from './type.js';
 
 // create web-types.json to provide autocomplete in JetBrains IDEs
 export function genWebTypes(tags: VueTag[], options: Options) {

packages/vant-cli/src/config/vite.package.ts

@@ -14,12 +14,19 @@ export function getViteConfigForPackage({
   const { name, build } = getVantConfig();
   const entryExtension = build?.extensions?.esm || '.js';
   const entry = join(ES_DIR, `index${entryExtension}`);
+  const shouldReplaceEnv = minify || formats?.includes('umd');
 
   return {
     root: CWD,
 
     logLevel: 'silent',
 
+    define: shouldReplaceEnv
+      ? {
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }
+      : undefined,
+
     build: {
       lib: {
         name,
@@ -30,6 +37,7 @@ export function getViteConfigForPackage({
           return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
         },
       },
+
       // terser has better compression than esbuild
       minify: minify ? 'terser' : false,
       rollupOptions: {

packages/vant-cli/src/config/vite.site.ts

@@ -137,6 +137,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
   const vantConfig = getVantConfig();
   const siteConfig = getSiteConfig(vantConfig);
   const title = getTitle(siteConfig);
+  const headHtml = vantConfig.site?.headHtml;
   const baiduAnalytics = vantConfig.site?.baiduAnalytics;
   const enableVConsole = isDev() && vantConfig.site?.enableVConsole;
 
@@ -178,6 +179,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
           // `description` is used by the HTML ejs template,
           // so it needs to be written explicitly here to avoid error: description is not defined
           description: siteConfig.description,
+          headHtml,
           baiduAnalytics,
           enableVConsole,
           meta: getHTMLMeta(vantConfig),
@@ -202,9 +204,9 @@ export function getViteConfigForSiteProd(): InlineConfig {
     base: publicPath,
     build: {
       outDir,
-      brotliSize: false,
+      reportCompressedSize: false,
       emptyOutDir: true,
-      // https://github.com/youzan/vant/issues/9703
+      // https://github.com/vant-ui/vant/issues/9703
       cssTarget: ['chrome53'],
       rollupOptions: {
         input: {

packages/vant-cli/src/index.ts

@@ -1,30 +1,9 @@
 // @ts-ignore
 import fs from 'fs';
 import { URL, fileURLToPath } from 'url';
-import { dev } from './commands/dev.js';
-import { lint } from './commands/lint.js';
-import { test } from './commands/jest.js';
-import { clean } from './commands/clean.js';
-import { build } from './commands/build.js';
-import { release } from './commands/release.js';
-import { changelog } from './commands/changelog.js';
-import { buildSite } from './commands/build-site.js';
-import { commitLint } from './commands/commit-lint.js';
 
 const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
 const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
 export const cliVersion: string = packageJson.version;
 
 process.env.VANT_CLI_VERSION = cliVersion;
-
-export {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-};

packages/vant-cli/src/module.d.ts

@@ -4,4 +4,3 @@ declare module 'hash-sum';
 declare module '@babel/core';
 declare module 'release-it';
 declare module 'conventional-changelog';
-declare module '@vant/markdown-vetur';

packages/vant-compat/README.md

@@ -0,0 +1,32 @@
+# @vant/compat
+
+This package provides Vant 3 compatible behavior for Vant 4 users.
+
+## Install
+
+```shell
+# with npm
+npm i @vant/compat
+
+# with yarn
+yarn add @vant/compat
+
+# with pnpm
+pnpm add @vant/compat
+```
+
+## Usage
+
+```js
+// Same as Toast in Vant 3
+import { Toast } from '@vant/compat';
+
+// Same as Dialog in Vant 3
+import { Dialog } from '@vant/compat';
+
+// Same as Notify in Vant 3
+import { Notify } from '@vant/compat';
+
+// Same as ImagePreview in Vant 3
+import { ImagePreview } from '@vant/compat';
+```

packages/vant-compat/build.js

@@ -0,0 +1 @@
+require('../vant-use/build');

packages/vant-compat/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vant/compat",
+  "version": "1.0.0",
+  "description": "Provide Vant 3 compatible behavior for Vant 4",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dev": "node ./build.js -w",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node ./build.js",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "release": "pnpm build && release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vant-ui/vant.git",
+    "directory": "packages/vant-compat"
+  },
+  "bugs": "https://github.com/vant-ui/vant/issues",
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/runtime-core": "^3.2.27",
+    "vant": "workspace:*",
+    "vue": "^3.2.27",
+    "esbuild": "^0.14.29",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "release: @vant/compat ${version}"
+    }
+  }
+}

packages/vant-compat/src/dialog.ts

@@ -0,0 +1,30 @@
+import {
+  Dialog as VanDialog,
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Dialog = (...args: Parameters<typeof showDialog>) =>
+  showDialog(...args);
+
+Dialog.Component = VanDialog;
+Dialog.alert = Dialog;
+Dialog.config = showConfirmDialog;
+Dialog.close = closeDialog;
+Dialog.setDefaultOptions = setDialogDefaultOptions;
+Dialog.resetDefaultOptions = resetDialogDefaultOptions;
+
+Dialog.install = (app: App) => {
+  app.use(Dialog.Component);
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog;
+  }
+}

packages/vant-compat/src/image-preview.ts

@@ -0,0 +1,11 @@
+import { ImagePreview as VanImagePreview, showImagePreview } from 'vant';
+import type { App } from 'vue';
+
+export const ImagePreview = (...args: Parameters<typeof showImagePreview>) =>
+  showImagePreview(...args);
+
+ImagePreview.Component = VanImagePreview;
+
+ImagePreview.install = (app: App) => {
+  app.use(ImagePreview.Component);
+};

packages/vant-compat/src/index.ts

@@ -0,0 +1,4 @@
+export * from './toast';
+export * from './notify';
+export * from './dialog';
+export * from './image-preview';

packages/vant-compat/src/notify.ts

@@ -0,0 +1,27 @@
+import {
+  Notify as VanNotify,
+  showNotify,
+  closeNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Notify = (...args: Parameters<typeof showNotify>) =>
+  showNotify(...args);
+
+Notify.clear = closeNotify;
+Notify.Component = VanNotify;
+Notify.setDefaultOptions = setNotifyDefaultOptions;
+Notify.resetDefaultOptions = resetNotifyDefaultOptions;
+
+Notify.install = (app: App) => {
+  app.use(Notify.Component);
+  app.config.globalProperties.$notify = Notify;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof Notify;
+  }
+}

packages/vant-compat/src/toast.ts

@@ -0,0 +1,49 @@
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Toast = (...args: Parameters<typeof showToast>) => {
+  const toast = showToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.fail = (...args: Parameters<typeof showFailToast>) => {
+  const toast = showFailToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.success = (...args: Parameters<typeof showSuccessToast>) => {
+  const toast = showSuccessToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.clear = closeToast;
+Toast.allowMultiple = allowMultipleToast;
+Toast.setDefaultOptions = setToastDefaultOptions;
+Toast.resetDefaultOptions = resetToastDefaultOptions;
+
+Toast.install = (app: App) => {
+  app.config.globalProperties.$toast = Toast;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast;
+  }
+}

packages/vant-compat/tsconfig.json

@@ -1,9 +1,7 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
-    "target": "ES2019",
-    "outDir": "./lib",
-    "module": "commonjs",
+    "outDir": "./dist",
     "declaration": true
   },
   "include": ["src/**/*"]

packages/vant-eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/eslint-config",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "eslint config of vant",
   "main": "index.js",
   "publishConfig": {
@@ -13,24 +13,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-eslint-config"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "^8.4.0"
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^9.4.0"
   },
   "devDependencies": {
-    "enhanced-resolve": "^5.8.3",
-    "eslint": "^8.7.0",
-    "typescript": "~4.5.5"
+    "enhanced-resolve": "^5.10.0",
+    "eslint": "^8.23.0",
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "eslint": "^7.32.0 || ^8.2.0"

packages/vant-icons/README.md

@@ -15,5 +15,5 @@ pnpm add @vant/icons
 
 ## Document
 
-- [Usage in Vue](https://youzan.github.io/vant/#/zh-CN/icon)
-- [Usage in Weapp](https://youzan.github.io/vant-weapp/#/icon)
+- [Usage in Vue](https://vant-ui.github.io/vant/#/zh-CN/icon)
+- [Usage in Weapp](https://vant-ui.github.io/vant-weapp/#/icon)

packages/vant-icons/package.json

@@ -16,14 +16,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-icons"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "^14.11.6"
+    "release-it": "^15.4.1"
   },
   "release-it": {
     "git": {

packages/vant-icons/src/common.less

@@ -1,6 +1,3 @@
-/* stylelint-disable selector-pseudo-element-colon-notation */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
-
 .van-icon {
   position: relative;
   display: inline-block;

packages/vant-icons/src/encode-woff2.less

@@ -1,7 +1,5 @@
 @import './common.less';
 
-/* stylelint-disable selector-pseudo-element-colon-notation */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
 @font-face {
   font-weight: normal;
   font-family: 'vant-icon';

packages/vant-markdown-vetur/README.md

@@ -1,37 +0,0 @@
-# Vant Markdown Vetur
-
-将 .md 文件转换成能描述 vue 组件的 .json 文件，供 WebStorm 和 vscode 的 `vetur` 插件读取，从而可以在 vue 模版语法中拥有自动补全的功能。
-
-## Install
-
-```shell
-# with npm
-npm i @vant/markdown-vetur -D
-
-# with yarn
-yarn add @vant/markdown-vetur -D
-
-# with pnpm
-pnpm add @vant/markdown-vetur -D
-```
-
-## API
-
-#### parseAndWrite
-
-解析目录下所有匹配的文件，并输出为 tags.json 和 attributes.json
-
-```ts
-interface Options {
-  // 需要解析的文件夹路径
-  path: PathLike;
-  // 文件匹配正则
-  test: RegExp;
-  // 输出目录
-  outputDir: string;
-  // 递归的目录最大深度
-  maxDeep?: number;
-  // 解析出来的组件名前缀
-  tagPrefix?: string;
-}
-```

packages/vant-markdown-vetur/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "@vant/markdown-vetur",
-  "version": "2.3.0",
-  "description": "simple parse markdown to vue component description for vetur auto-completion",
-  "main": "lib/index.js",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "rimraf ./lib && tsc",
-    "release": "pnpm build && npm publish",
-    "prepare": "pnpm build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/youzan/vant.git",
-    "directory": "packages/vant-markdown-vetur"
-  },
-  "bugs": "https://github.com/youzan/vant/issues",
-  "author": "zhangshuai",
-  "license": "MIT",
-  "dependencies": {
-    "fast-glob": "^3.2.2",
-    "fs-extra": "^10.0.0"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^9.0.13"
-  }
-}

packages/vant-markdown-vetur/src/index.ts

@@ -1,49 +0,0 @@
-import glob from 'fast-glob';
-import { join } from 'path';
-import { mdParser } from './parser';
-import { formatter } from './formatter';
-import { genWebTypes } from './web-types';
-import { readFileSync, outputFileSync } from 'fs-extra';
-import { Options, VueTag } from './type';
-import { normalizePath } from './utils';
-import { genVeturTags, genVeturAttributes } from './vetur';
-
-async function readMarkdown(options: Options) {
-  const mds = await glob(normalizePath(`${options.path}/**/*.md`));
-  return mds
-    .filter((md) => options.test.test(md))
-    .map((path) => readFileSync(path, 'utf-8'));
-}
-
-export async function parseAndWrite(options: Options) {
-  if (!options.outputDir) {
-    throw new Error('outputDir can not be empty.');
-  }
-
-  const mds = await readMarkdown(options);
-  const vueTags: VueTag[] = [];
-
-  mds.forEach((md) => {
-    const parsedMd = mdParser(md);
-    formatter(vueTags, parsedMd, options.tagPrefix);
-  });
-
-  const webTypes = genWebTypes(vueTags, options);
-  const veturTags = genVeturTags(vueTags);
-  const veturAttributes = genVeturAttributes(vueTags);
-
-  outputFileSync(
-    join(options.outputDir, 'tags.json'),
-    JSON.stringify(veturTags, null, 2)
-  );
-  outputFileSync(
-    join(options.outputDir, 'attributes.json'),
-    JSON.stringify(veturAttributes, null, 2)
-  );
-  outputFileSync(
-    join(options.outputDir, 'web-types.json'),
-    JSON.stringify(webTypes, null, 2)
-  );
-}
-
-export default { parseAndWrite };

packages/vant-markdown-vetur/src/vetur.ts

@@ -1,36 +0,0 @@
-import { VueTag, VeturTags, VeturAttributes, VeturAttribute } from './type';
-
-export function genVeturTags(tags: VueTag[]) {
-  const veturTags: VeturTags = {};
-
-  tags.forEach((tag) => {
-    veturTags[tag.name] = {
-      attributes: tag.attributes ? tag.attributes.map((item) => item.name) : [],
-    };
-  });
-
-  return veturTags;
-}
-
-export function genVeturAttributes(tags: VueTag[]) {
-  const veturAttributes: VeturAttributes = {};
-
-  tags.forEach((tag) => {
-    if (tag.attributes) {
-      tag.attributes.forEach((attr) => {
-        const attribute: VeturAttribute = {
-          type: attr.value.type,
-          description: `${attr.description}, Default: ${attr.default}`,
-        };
-
-        if (attr.options.length > 0) {
-          attribute.options = attr.options;
-        }
-
-        veturAttributes[`${tag.name}/${attr.name}`] = attribute;
-      });
-    }
-  });
-
-  return veturAttributes;
-}