docs(Cascader): add china area data demo (#11523)

* docs(Cascader): add china area data demo

* docs: upd

packages/vant/src/area/README.md

@@ -50,9 +50,9 @@ export default {
 };
 ```
 
-### @vant/area-data
+### China Area Data
 
-Vant officially provides a default China area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data):
+Vant officially provides a default china area data, which can be imported through [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data):
 
 ```bash
 # with npm

packages/vant/src/area/README.zh-CN.md

@@ -52,9 +52,9 @@ const areaList = {
 };
 ```
 
-### @vant/area-data
+### 中国省市区数据
 
-Vant 官方提供了一份默认的中国省市区数据，可以通过 [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data) 引入：
+Vant 提供了一份中国省市区数据，你可以安装 [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data) npm 包来引入：
 
 ```bash
 # 通过 npm

packages/vant/src/cascader/README.md

@@ -202,13 +202,15 @@ export default {
 ```html
 <van-cascader v-model="code" title="Select Area" :options="options">
   <template #options-top="{ tabIndex }">
-    <div class="current-level">Current level is {{ tabIndex }}</div>
+    <div class="current-level">Current level is {{ tabIndex + 1 }}</div>
   </template>
 </van-cascader>
 
 <style>
   .current-level {
-    padding: 10px 16px 0;
+    font-size: 14px;
+    padding: 16px 16px 0;
+    color: var(--van-gray-6);
   }
 </style>
 ```

packages/vant/src/cascader/README.zh-CN.md

@@ -80,6 +80,68 @@ export default {
 };
 ```
 
+### 中国省市区数据
+
+Cascader 组件常用于选择省市区，Vant 提供了一份中国省市区数据，你可以安装 [@vant/area-data](https://github.com/vant-ui/vant/tree/main/packages/vant-area-data) npm 包来引入：
+
+```bash
+# 通过 npm
+npm i @vant/area-data
+
+# 通过 yarn
+yarn add @vant/area-data
+
+# 通过 pnpm
+pnpm add @vant/area-data
+```
+
+```html
+<van-field
+  v-model="fieldValue"
+  is-link
+  readonly
+  label="地区"
+  placeholder="请选择所在地区"
+  @click="show = true"
+/>
+<van-popup v-model:show="show" round position="bottom">
+  <van-cascader
+    v-model="cascaderValue"
+    title="请选择所在地区"
+    :options="options"
+    @close="show = false"
+    @finish="onFinish"
+  />
+</van-popup>
+```
+
+```js
+import { ref } from 'vue';
+import { useCascaderAreaData } from '@vant/area-data';
+
+export default {
+  setup() {
+    const show = ref(false);
+    const fieldValue = ref('');
+    const cascaderValue = ref('');
+    const options = useCascaderAreaData();
+    const onFinish = ({ selectedOptions }) => {
+      show.value = false;
+      fieldValue.value = selectedOptions.map((option) => option.text).join('/');
+    };
+    return {
+      show,
+      options,
+      onFinish,
+      fieldValue,
+      cascaderValue,
+    };
+  },
+};
+```
+
+> Tips: 中国的行政区划每年都会有变动，如果发现省市区数据未及时更新，欢迎提 Pull Request 帮助我们更新。你可以在[「国家统计局 - 全国区划代码」](http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/) 和[「民政部 - 行政区划代码」](https://www.mca.gov.cn/article/sj/xzqh/1980/)上查询到最新数据，请根据官方数据进行核实。
+
 ### 自定义颜色
 
 通过 `active-color` 属性来设置选中状态的高亮颜色。
@@ -212,13 +274,15 @@ export default {
 ```html
 <van-cascader v-model="code" title="请选择所在地区" :options="options">
   <template #options-top="{ tabIndex }">
-    <div class="current-level">当前为第 {{ tabIndex }} 级</div>
+    <div class="current-level">当前为第 {{ tabIndex + 1 }} 级</div>
   </template>
 </van-cascader>
 
 <style>
   .current-level {
-    padding: 10px 16px 0;
+    font-size: 14px;
+    padding: 16px 16px 0;
+    color: var(--van-gray-6);
   }
 </style>
 ```

packages/vant/src/cascader/demo/index.vue

@@ -7,8 +7,14 @@ import { useTranslate } from '../../../docs/site';
 import { deepClone } from '../../utils/deep-clone';
 import zhCNOptions from './area-zh-CN';
 import enUSOptions from './area-en-US';
+import { useCurrentLang } from '../../locale';
+import { useCascaderAreaData } from '@vant/area-data';
 import type { Numeric } from '../../utils';
 
+const lang = useCurrentLang();
+
+const cascaderAreaData = useCascaderAreaData();
+
 const t = useTranslate({
   'zh-CN': {
     area: '地区',
@@ -28,6 +34,7 @@ const t = useTranslate({
       { text: '宁波市', value: '330200' },
     ],
     currentLevel: (level: number) => `当前为第 ${level} 级`,
+    chinaAreaData: '中国省市区数据',
     customContent: '自定义选项上方内容',
     customFieldNames: '自定义字段名',
   },
@@ -49,6 +56,7 @@ const t = useTranslate({
       { text: 'Ningbo', value: '330200' },
     ],
     currentLevel: (level: number) => `Current level is ${level}`,
+    chinaAreaData: 'China Area Data',
     customContent: 'Custom Content',
     customFieldNames: 'Custom Field Names',
   },
@@ -67,6 +75,11 @@ const baseState = reactive<StateItem>({
   value: '',
   result: '',
 });
+const chinaAreaDataState = reactive<StateItem>({
+  show: false,
+  value: '',
+  result: '',
+});
 const customColorState = reactive<StateItem>({
   show: false,
   value: undefined,
@@ -168,6 +181,31 @@ const onFinish = (
     </van-popup>
   </demo-block>
 
+  <demo-block v-if="lang === 'zh-CN'" card :title="t('chinaAreaData')">
+    <van-field
+      v-model="chinaAreaDataState.result"
+      is-link
+      readonly
+      :label="t('area')"
+      :placeholder="t('selectArea')"
+      @click="chinaAreaDataState.show = true"
+    />
+    <van-popup
+      v-model:show="chinaAreaDataState.show"
+      round
+      teleport="body"
+      position="bottom"
+    >
+      <van-cascader
+        v-model="chinaAreaDataState.value"
+        :title="t('selectArea')"
+        :options="cascaderAreaData"
+        @close="chinaAreaDataState.show = false"
+        @finish="onFinish(chinaAreaDataState, $event)"
+      />
+    </van-popup>
+  </demo-block>
+
   <demo-block card :title="t('customColor')">
     <van-field
       v-model="customColorState.result"
@@ -272,7 +310,7 @@ const onFinish = (
         @finish="onFinish(customContentState, $event)"
       >
         <template #options-top="{ tabIndex }">
-          <div class="current-level">{{ t('currentLevel', tabIndex) }}</div>
+          <div class="current-level">{{ t('currentLevel', tabIndex + 1) }}</div>
         </template>
       </van-cascader>
     </van-popup>
@@ -281,6 +319,8 @@ const onFinish = (
 
 <style lang="less">
 .current-level {
-  padding: 10px 16px 0;
+  font-size: 14px;
+  padding: 16px 16px 0;
+  color: var(--van-gray-6);
 }
 </style>