From 4d15b63e324ed023a5689226519d17425e23a922 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Thu, 27 Jul 2023 16:29:04 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(category):=20=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E4=B8=8E=E5=88=97=E8=A1=A8=E6=94=AF=E6=8C=81=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/category/demo.vue          | 148 +++++++++---------
 src/packages/__VUE/category/doc.en-US.md      |  56 +------
 src/packages/__VUE/category/doc.md            |  56 +------
 src/packages/__VUE/category/doc.taro.md       |  48 +-----
 src/packages/__VUE/category/index.scss        |  14 +-
 src/packages/__VUE/category/index.taro.vue    |  45 ++----
 src/packages/__VUE/category/index.vue         |  46 ++----
 src/packages/__VUE/category/types.ts          |   1 +
 src/packages/__VUE/categorypane/index.scss    |   4 +-
 .../__VUE/categorypane/index.taro.vue         |  22 +--
 src/packages/__VUE/categorypane/index.vue     |  22 +--
 11 files changed, 140 insertions(+), 322 deletions(-)
 create mode 100644 src/packages/__VUE/category/types.ts

diff --git a/src/packages/__VUE/category/demo.vue b/src/packages/__VUE/category/demo.vue
index 49839c11ca..b1344a8356 100644
--- a/src/packages/__VUE/category/demo.vue
+++ b/src/packages/__VUE/category/demo.vue
@@ -1,24 +1,33 @@
 <template>
-  <div class="demo">
-    <h2>{{ translate('title1') }}</h2>
-    <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild1" @onChange="onChange"> </nut-category-pane>
-    </nut-category>
-    <h2>{{ translate('title2') }}</h2>
-    <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild2" @onChange="onChange"> </nut-category-pane
-    ></nut-category>
+  <div class="demo full category-demo">
+    <div v-if="tabIndex === 0">
+      <nut-category :category="category" @change="change" style="height: 500px">
+        <nut-category-pane :categoryChild="data.categoryChild1" @change="onChange"></nut-category-pane>
+      </nut-category>
+    </div>
 
-    <h2>{{ translate('title3') }}</h2>
-    <nut-category
-      ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
-    ></nut-category>
+    <template v-if="tabIndex === 1">
+      <nut-category :category="category" @change="changeText">
+        <nut-category-pane type="text" :categoryChild="data.categoryChild2" @change="onChange"> </nut-category-pane
+      ></nut-category>
+    </template>
+
+    <Tabbar safeAreaInsetBottom bottom placeholder v-model="tabIndex">
+      <nut-tabbar-item
+        v-for="item in List"
+        :tab-title="item.title"
+        :icon="item.icon"
+        :key="item.title"
+      ></nut-tabbar-item>
+    </Tabbar>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { reactive, h, ref, onMounted } from 'vue';
+import { Tabbar } from '@/packages/nutui.vue';
+import { Home, Category } from '@nutui/icons-vue';
 const { translate } = createComponent('cmt');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -34,71 +43,56 @@ const initTranslate = () =>
       title3: 'Custom taxonomy'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const data = reactive({
-      categoryInfo1: {},
-      category: [{}],
-      categoryChild1: [{}],
-      customCategory: [{}],
-      categoryInfo2: {},
-      categoryChild2: [{}]
-    });
-
-    onMounted(() => {
-      setTimeout(() => {
-        getData();
-      }, 500);
-    });
-
-    const getData = () => {
-      fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-        .then((response) => response.json())
-        .then((res) => {
-          const { categoryInfo, categoryChild, customCategory } = res;
-          data.categoryInfo1 = categoryInfo;
-          data.category = categoryInfo.category;
-          data.categoryChild1 = categoryChild;
-          data.customCategory = customCategory;
-          data.categoryInfo2 = categoryInfo;
-          data.categoryChild2 = categoryChild;
-        })
-        .catch((err) => console.log('Oh, error', err));
-    };
+initTranslate();
+const category = ref([]);
+const data = reactive({
+  categoryInfo1: {},
+  category: [{}],
+  categoryChild1: [{}],
+  categoryInfo2: {},
+  categoryChild2: [{}]
+});
+const tabIndex = ref(0);
+onMounted(() => {
+  setTimeout(() => {
+    getData();
+  }, 500);
+});
 
-    const change = (index: any) => {
-      data.categoryChild1 = [].concat(data?.categoryInfo1?.category[index]?.children as any);
-    };
+const List = [
+  {
+    title: translate('title1'),
+    icon: h(Home)
+  },
+  {
+    title: translate('title2'),
+    icon: h(Category)
+  }
+];
 
-    const changeText = (index: any) => {
-      data.categoryChild2 = [].concat(data.categoryInfo2.category[index].children as any);
-    };
+const getData = () => {
+  fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
+    .then((response) => response.json())
+    .then((res) => {
+      const { categoryInfo, categoryChild } = res;
+      data.categoryInfo1 = categoryInfo;
+      category.value = categoryInfo.category;
+      data.categoryChild1 = categoryChild;
+      data.categoryInfo2 = categoryInfo;
+      data.categoryChild2 = categoryChild;
+    })
+    .catch((err) => console.log('Oh, error', err));
+};
 
-    const changeCustom = (v: any) => {
-      console.log('点击分类数据:' + JSON.stringify(v));
-    };
+const change = (index: number) => {
+  data.categoryChild1 = data?.categoryInfo1?.category[index]?.children;
+};
 
-    const onChange = (v: any) => {
-      console.log('当前分类数据:' + JSON.stringify(v));
-    };
+const changeText = (index: number) => {
+  data.categoryChild2 = data.categoryInfo2.category[index].children;
+};
 
-    return {
-      change,
-      onChange,
-      changeText,
-      changeCustom,
-      ...toRefs(data),
-      translate
-    };
-  }
-});
+const onChange = (v: any) => {
+  console.log('当前分类数据:', v);
+};
 </script>
-
-<style lang="scss" scoped>
-.demo {
-  padding-left: 0 !important;
-  padding-right: 0px !important;
-}
-</style>
diff --git a/src/packages/__VUE/category/doc.en-US.md b/src/packages/__VUE/category/doc.en-US.md
index d43fb0f613..68772cce27 100644
--- a/src/packages/__VUE/category/doc.en-US.md
+++ b/src/packages/__VUE/category/doc.en-US.md
@@ -25,7 +25,7 @@ data defination
 ```html
 <template>
   <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+    <nut-category-pane :categoryChild="categoryChild" @change="onChange"> </nut-category-pane>
   </nut-category>
 </template>
 <script lang="ts">
@@ -82,7 +82,7 @@ data defination
 ```html
 <template>
   <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+    <nut-category-pane type="text" :categoryChild="categoryChild" @change="onChange"> </nut-category-pane
   ></nut-category>
 </template>
 <script lang="ts">
@@ -134,52 +134,6 @@ data defination
 
 :::
 
-### Custom taxonomy
-
-:::demo
-
-```html
-<template>
-  <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
-  ></nut-category>
-</template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { customCategory } = res;
-            data.customCategory = customCategory;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-      const changeCustom = () => {
-        console.log('Click to categorize data');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
-```
-
-:::
-
 ## API
 
 ### Category Props
@@ -206,9 +160,9 @@ data defination
 
 ### CategoryPane Events
 
-| Event     | Description                                | Arguments    |
-| --------- | ------------------------------------------ | ------------ |
-| on-change | Click on the right classified data trigger | Clicked data |
+| Event  | Description                                | Arguments    |
+| ------ | ------------------------------------------ | ------------ |
+| change | Click on the right classified data trigger | Clicked data |
 
 ### CategoryPane Slots
 
diff --git a/src/packages/__VUE/category/doc.md b/src/packages/__VUE/category/doc.md
index 470269dad8..6ef82c2251 100644
--- a/src/packages/__VUE/category/doc.md
+++ b/src/packages/__VUE/category/doc.md
@@ -25,7 +25,7 @@ data 数据格式可参考
 ```html
 <template>
   <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+    <nut-category-pane :categoryChild="categoryChild" @change="onChange"> </nut-category-pane>
   </nut-category>
 </template>
 <script lang="ts">
@@ -82,7 +82,7 @@ data 数据格式可参考
 ```html
 <template>
   <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+    <nut-category-pane type="text" :categoryChild="categoryChild" @change="onChange"> </nut-category-pane
   ></nut-category>
 </template>
 <script lang="ts">
@@ -134,52 +134,6 @@ data 数据格式可参考
 
 :::
 
-### 自定义分类
-
-:::demo
-
-```html
-<template>
-  <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
-  ></nut-category>
-</template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const getData = () => {
-        fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
-          .then((response) => response.json())
-          .then((res) => {
-            const { customCategory } = res;
-            data.customCategory = customCategory;
-          })
-          .catch((err) => console.log('Oh, error', err));
-      };
-      const changeCustom = () => {
-        console.log('点击分类数据');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
-```
-
-:::
-
 ## API
 
 ### Category Props
@@ -206,9 +160,9 @@ data 数据格式可参考
 
 ### CategoryPane Events
 
-| 事件名    | 说明                 | 回调参数   |
-| --------- | -------------------- | ---------- |
-| on-change | 点击右侧分类数据触发 | 点击的数据 |
+| 事件名 | 说明                 | 回调参数   |
+| ------ | -------------------- | ---------- |
+| change | 点击右侧分类数据触发 | 点击的数据 |
 
 ### CategoryPane Slots
 
diff --git a/src/packages/__VUE/category/doc.taro.md b/src/packages/__VUE/category/doc.taro.md
index 544194e35e..00bbd64781 100644
--- a/src/packages/__VUE/category/doc.taro.md
+++ b/src/packages/__VUE/category/doc.taro.md
@@ -25,7 +25,7 @@ data 数据格式可参考
 ```html
 <template>
   <nut-category :category="category" @change="change">
-    <nut-category-pane :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane>
+    <nut-category-pane :categoryChild="categoryChild" @change="onChange"> </nut-category-pane>
   </nut-category>
 </template>
 <script lang="ts">
@@ -70,7 +70,7 @@ data 数据格式可参考
 ```html
 <template>
   <nut-category :category="category" @change="changeText">
-    <nut-category-pane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-category-pane
+    <nut-category-pane type="text" :categoryChild="categoryChild" @change="onChange"> </nut-category-pane
   ></nut-category>
 </template>
 <script lang="ts">
@@ -108,44 +108,6 @@ data 数据格式可参考
 
 :::
 
-### 自定义分类
-
-:::demo
-
-```html
-<template>
-  <nut-category @change="changeCustom"
-    ><nut-category-pane type="custom" :customCategory="customCategory" @onChange="changeCustom"> </nut-category-pane
-  ></nut-category>
-</template>
-<script lang="ts">
-  import { reactive, toRefs, onMounted } from 'vue';
-  import { categoryInfo, categoryChild, customCategory } from './data';
-
-  export default {
-    setup() {
-      const data = reactive({
-        customCategory: [{}]
-      });
-      onMounted(() => {
-        setTimeout(() => {
-          getData();
-        }, 500);
-      });
-      const changeCustom = () => {
-        console.log('点击分类数据');
-      };
-      return {
-        changeCustom,
-        ...toRefs(data)
-      };
-    }
-  };
-</script>
-```
-
-:::
-
 ## API
 
 ### Category Props
@@ -172,9 +134,9 @@ data 数据格式可参考
 
 ### CategoryPane Events
 
-| 事件名    | 说明                 | 回调参数   |
-| --------- | -------------------- | ---------- |
-| on-change | 点击右侧分类数据触发 | 点击的数据 |
+| 事件名 | 说明                 | 回调参数   |
+| ------ | -------------------- | ---------- |
+| change | 点击右侧分类数据触发 | 点击的数据 |
 
 ### CategoryPane Slots
 
diff --git a/src/packages/__VUE/category/index.scss b/src/packages/__VUE/category/index.scss
index b816a4b380..9c760d7c2a 100644
--- a/src/packages/__VUE/category/index.scss
+++ b/src/packages/__VUE/category/index.scss
@@ -1,8 +1,6 @@
 .nut-theme-dark {
   .nut-category {
-    &__cateList {
-      background: $dark-background2;
-    }
+    background: $dark-background2;
 
     &__cateListLeft {
       background: $dark-background4;
@@ -20,9 +18,12 @@
   }
 }
 .nut-category {
-  &__cateList {
-    display: flex;
-    background: $category-bg-color;
+  display: flex;
+  background: $category-bg-color;
+
+  &__nav {
+    min-width: 100px;
+    overflow-y: auto;
   }
 
   &__cateListLeft {
@@ -34,7 +35,6 @@
     width: 100px;
     height: 50px;
     font-size: 13px;
-    font-family: PingFangSC;
     font-weight: normal;
     color: $category-list-item-color;
     display: flex;
diff --git a/src/packages/__VUE/category/index.taro.vue b/src/packages/__VUE/category/index.taro.vue
index 8ef9df5052..0813eaa737 100644
--- a/src/packages/__VUE/category/index.taro.vue
+++ b/src/packages/__VUE/category/index.taro.vue
@@ -1,60 +1,43 @@
 <template>
   <div class="nut-category">
-    <div class="nut-category__cateList">
-      <div v-if="type == 'classify' || type == 'text'">
-        <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
-          <div
-            :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
-            @click="getChildList(index)"
-          >
-            {{ item.catName }}
-          </div>
+    <div class="nut-category__nav" v-if="type == 'classify' || type == 'text'">
+      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+        <div
+          :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
+          @click="getChildList(index)"
+        >
+          {{ item?.catName }}
         </div>
       </div>
-
-      <slot></slot>
     </div>
+
+    <slot></slot>
   </div>
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
+import { CategoryType } from './types';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('category');
 
-export type CategoryType = {
-  catName?: string;
-  [key: string]: any;
-};
-
 export default create({
   props: {
-    //分类模式
     type: {
-      type: String,
+      type: String as PropType<CategoryType>,
       default: 'classify'
     },
-
-    //左侧导航栏
     category: {
-      type: Array as PropType<CategoryType>,
+      type: Array,
       default: () => []
     }
   },
-
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const checkIndex = ref(0);
-    const categoryLeft = ref(false); //是否显示slot
-
     const getChildList = (index: any) => {
       checkIndex.value = index;
       emit('change', index);
     };
-
-    return {
-      getChildList,
-      checkIndex,
-      categoryLeft
-    };
+    return { getChildList, checkIndex };
   }
 });
 </script>
diff --git a/src/packages/__VUE/category/index.vue b/src/packages/__VUE/category/index.vue
index afa22626ea..0813eaa737 100644
--- a/src/packages/__VUE/category/index.vue
+++ b/src/packages/__VUE/category/index.vue
@@ -1,59 +1,43 @@
 <template>
   <div class="nut-category">
-    <div class="nut-category__cateList">
-      <div v-if="type == 'classify' || type == 'text'">
-        <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
-          <div
-            :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
-            @click="getChildList(index)"
-          >
-            {{ item.catName }}
-          </div>
+    <div class="nut-category__nav" v-if="type == 'classify' || type == 'text'">
+      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+        <div
+          :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
+          @click="getChildList(index)"
+        >
+          {{ item?.catName }}
         </div>
       </div>
-
-      <slot></slot>
     </div>
+
+    <slot></slot>
   </div>
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
+import { CategoryType } from './types';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('category');
 
-export type CategoryType = {
-  catName?: string;
-  [key: string]: any;
-};
-
 export default create({
   props: {
-    //分类模式
     type: {
-      type: String,
+      type: String as PropType<CategoryType>,
       default: 'classify'
     },
-    //左侧导航栏
     category: {
-      type: Array as PropType<CategoryType>,
-      default: []
+      type: Array,
+      default: () => []
     }
   },
-
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const checkIndex = ref(0);
-    const categoryLeft = ref(false); //是否显示slot
-
     const getChildList = (index: any) => {
       checkIndex.value = index;
       emit('change', index);
     };
-
-    return {
-      getChildList,
-      checkIndex,
-      categoryLeft
-    };
+    return { getChildList, checkIndex };
   }
 });
 </script>
diff --git a/src/packages/__VUE/category/types.ts b/src/packages/__VUE/category/types.ts
new file mode 100644
index 0000000000..571972f326
--- /dev/null
+++ b/src/packages/__VUE/category/types.ts
@@ -0,0 +1 @@
+export type CategoryType = 'classify' | 'text' | 'custom';
diff --git a/src/packages/__VUE/categorypane/index.scss b/src/packages/__VUE/categorypane/index.scss
index a4c4acc490..be9af4f966 100644
--- a/src/packages/__VUE/categorypane/index.scss
+++ b/src/packages/__VUE/categorypane/index.scss
@@ -9,6 +9,7 @@
   }
 }
 .nut-category-pane {
+  overflow-y: auto;
   &__cateListRight {
     padding-left: 15px;
     background: $category-bg-color;
@@ -17,7 +18,6 @@
     margin-top: 15px;
     margin-bottom: 15px;
     font-size: 13px;
-    font-family: PingFangSC;
     font-weight: 500;
     color: $category-pane-title-color;
   }
@@ -45,7 +45,6 @@
     border: 1px solid $category-pane-border-color;
     border-radius: 5px;
     font-size: 12px;
-    font-family: PingFangSC;
     font-weight: normal;
     color: $category-pane-gray-color;
     display: flex;
@@ -62,7 +61,6 @@
 
   &__skuImg {
     font-size: 12px;
-    font-family: PingFangSC;
     font-weight: normal;
     color: $category-pane-gray-color;
     margin-top: 10px;
diff --git a/src/packages/__VUE/categorypane/index.taro.vue b/src/packages/__VUE/categorypane/index.taro.vue
index c2fba5245c..5f45d9239d 100644
--- a/src/packages/__VUE/categorypane/index.taro.vue
+++ b/src/packages/__VUE/categorypane/index.taro.vue
@@ -48,6 +48,7 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { CategoryType } from '../category/types';
 const { create } = createComponent('category-pane');
 
 export type ChildType = {
@@ -62,33 +63,26 @@ export type CustomType = {
 
 export default create({
   props: {
-    //分类模式
     type: {
-      type: String,
+      type: String as PropType<CategoryType>,
       default: 'classify'
     },
-
-    //右侧导航数据
     categoryChild: {
       type: Array as PropType<ChildType>,
       default: () => []
     },
-
-    //模式传入自定义数据
     customCategory: {
       type: Array as PropType<CustomType>,
       default: () => []
     }
   },
-
-  setup(props, { emit }) {
-    const onChange = (sku: string) => {
-      emit('onChange', sku);
-    };
-
-    return {
-      onChange
+  emits: ['change', 'onChange'],
+  setup(_, { emit }) {
+    const onChange = (sku: any) => {
+      emit('change', sku);
+      emit('onChange', sku); // will be deprecated
     };
+    return { onChange };
   }
 });
 </script>
diff --git a/src/packages/__VUE/categorypane/index.vue b/src/packages/__VUE/categorypane/index.vue
index c2fba5245c..5f45d9239d 100644
--- a/src/packages/__VUE/categorypane/index.vue
+++ b/src/packages/__VUE/categorypane/index.vue
@@ -48,6 +48,7 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { CategoryType } from '../category/types';
 const { create } = createComponent('category-pane');
 
 export type ChildType = {
@@ -62,33 +63,26 @@ export type CustomType = {
 
 export default create({
   props: {
-    //分类模式
     type: {
-      type: String,
+      type: String as PropType<CategoryType>,
       default: 'classify'
     },
-
-    //右侧导航数据
     categoryChild: {
       type: Array as PropType<ChildType>,
       default: () => []
     },
-
-    //模式传入自定义数据
     customCategory: {
       type: Array as PropType<CustomType>,
       default: () => []
     }
   },
-
-  setup(props, { emit }) {
-    const onChange = (sku: string) => {
-      emit('onChange', sku);
-    };
-
-    return {
-      onChange
+  emits: ['change', 'onChange'],
+  setup(_, { emit }) {
+    const onChange = (sku: any) => {
+      emit('change', sku);
+      emit('onChange', sku); // will be deprecated
     };
+    return { onChange };
   }
 });
 </script>

From 34c7f794f1c3eeb82ed8c52c64b5959265953c7c Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Thu, 27 Jul 2023 20:07:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(category):=20=E6=96=B0=E5=A2=9E=20opti?=
 =?UTF-8?q?onKey?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/__VUE/category/doc.en-US.md   | 35 ++++++++++------------
 src/packages/__VUE/category/doc.md         | 35 ++++++++++------------
 src/packages/__VUE/category/doc.taro.md    | 35 ++++++++++------------
 src/packages/__VUE/category/index.taro.vue | 27 ++++++++++-------
 src/packages/__VUE/category/index.vue      | 27 ++++++++++-------
 src/packages/__VUE/category/types.ts       | 11 +++++++
 6 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/src/packages/__VUE/category/doc.en-US.md b/src/packages/__VUE/category/doc.en-US.md
index 68772cce27..58dc7910a4 100644
--- a/src/packages/__VUE/category/doc.en-US.md
+++ b/src/packages/__VUE/category/doc.en-US.md
@@ -134,42 +134,37 @@ data defination
 
 :::
 
-## API
+## Category
 
-### Category Props
+### Props
 
-| Attribute | Description                                       | Type   | Default    |
-| --------- | ------------------------------------------------- | ------ | ---------- |
-| type      | Classification mode: `classify`, `text`, `custom` | string | `classify` |
-| category  | Left navigation bar data list                     | Array  | `[]`       |
+| Attribute        | Description                             | Type   | Default                                  |
+| ---------------- | --------------------------------------- | ------ | ---------------------------------------- |
+| type             | Classification mode: `classify`, `text` | string | `classify`                               |
+| category         | Left navigation bar data list           | Array  | `[]`                                     |
+| optionKey`4.1.3` | Custom keys in `category`               | Object | `{ catId: 'catId', catName: 'catName' }` |
 
-### Category Events
+### Events
 
-| Event         | Description                                                                                     | Arguments        |
-| ------------- | ----------------------------------------------------------------------------------------------- | ---------------- |
-| change        | Classic classification, click on the left navigation bar to get the data list on the right      | Clicked data     |
-| change-text   | In text classification mode, click on the left navigation bar to get the data list on the right | Input data       |
-| change-custom | Customize, click the left navigation bar to get the data list on the right                      | Current quantity |
+| Event  | Description                                                                                | Arguments    |
+| ------ | ------------------------------------------------------------------------------------------ | ------------ |
+| change | Classic classification, click on the left navigation bar to get the data list on the right | Clicked data |
 
-### CategoryPane Props
+## CategoryPane
+
+### Props
 
 | Attribute       | Description                                               | Type  | Default |
 | --------------- | --------------------------------------------------------- | ----- | ------- |
 | category-child  | The current classification data is displayed on the right | Array | `[]`    |
 | custom-category | Custom categorical data                                   | Array | `[]`    |
 
-### CategoryPane Events
+### Events
 
 | Event  | Description                                | Arguments    |
 | ------ | ------------------------------------------ | ------------ |
 | change | Click on the right classified data trigger | Clicked data |
 
-### CategoryPane Slots
-
-| Name    | Description    |
-| ------- | -------------- |
-| default | Custom content |
-
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/category/doc.md b/src/packages/__VUE/category/doc.md
index 6ef82c2251..7b47f127bf 100644
--- a/src/packages/__VUE/category/doc.md
+++ b/src/packages/__VUE/category/doc.md
@@ -134,42 +134,37 @@ data 数据格式可参考
 
 :::
 
-## API
+## Category
 
-### Category Props
+### Props
 
-| 参数     | 说明                                   | 类型   | 默认值     |
-| -------- | -------------------------------------- | ------ | ---------- |
-| type     | 分类模式：`classify`，`text`，`custom` | string | `classify` |
-| category | 左侧导航栏数据列表                     | Array  | `[]`       |
+| 参数             | 说明                           | 类型   | 默认值                                   |
+| ---------------- | ------------------------------ | ------ | ---------------------------------------- |
+| type             | 分类模式：`classify`，`text`   | string | `classify`                               |
+| category         | 左侧导航栏数据列表             | Array  | `[]`                                     |
+| optionKey`4.1.3` | 自定义 `category` 中的参数 key | Object | `{ catId: 'catId', catName: 'catName' }` |
 
-### Category Events
+### Events
 
-| 事件名        | 说明                                             | 回调参数   |
-| ------------- | ------------------------------------------------ | ---------- |
-| change        | 经典分类，点击左侧导航栏，获取右侧数据列表       | 点击的数据 |
-| change-text   | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
-| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表         | 当前数量   |
+| 事件名 | 说明                                       | 回调参数   |
+| ------ | ------------------------------------------ | ---------- |
+| change | 经典分类，点击左侧导航栏，获取右侧数据列表 | 点击的数据 |
 
-### CategoryPane Props
+## CategoryPane
+
+### Props
 
 | 参数            | 说明                 | 类型  | 默认值 |
 | --------------- | -------------------- | ----- | ------ |
 | category-child  | 右侧展示当前分类数据 | Array | `[]`   |
 | custom-category | 自定义分类数据       | Array | `[]`   |
 
-### CategoryPane Events
+### Events
 
 | 事件名 | 说明                 | 回调参数   |
 | ------ | -------------------- | ---------- |
 | change | 点击右侧分类数据触发 | 点击的数据 |
 
-### CategoryPane Slots
-
-| 名称    | 说明       |
-| ------- | ---------- |
-| default | 自定义内容 |
-
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/category/doc.taro.md b/src/packages/__VUE/category/doc.taro.md
index 00bbd64781..f608547000 100644
--- a/src/packages/__VUE/category/doc.taro.md
+++ b/src/packages/__VUE/category/doc.taro.md
@@ -108,42 +108,37 @@ data 数据格式可参考
 
 :::
 
-## API
+## Category
 
-### Category Props
+### Props
 
-| 参数     | 说明                                   | 类型   | 默认值     |
-| -------- | -------------------------------------- | ------ | ---------- |
-| type     | 分类模式：`classify`，`text`，`custom` | string | `classify` |
-| category | 左侧导航栏数据列表                     | Array  | `[]`       |
+| 参数             | 说明                           | 类型   | 默认值                                   |
+| ---------------- | ------------------------------ | ------ | ---------------------------------------- |
+| type             | 分类模式：`classify`，`text`   | string | `classify`                               |
+| category         | 左侧导航栏数据列表             | Array  | `[]`                                     |
+| optionKey`4.1.3` | 自定义 `category` 中的参数 key | Object | `{ catId: 'catId', catName: 'catName' }` |
 
-### Category Events
+### Events
 
-| 事件名        | 说明                                             | 回调参数   |
-| ------------- | ------------------------------------------------ | ---------- |
-| change        | 经典分类，点击左侧导航栏，获取右侧数据列表       | 点击的数据 |
-| change-text   | 文本分类模式，更点击左侧导航栏，获取右侧数据列表 | 输入的数据 |
-| change-custom | 自定义，点击左侧导航栏，获取右侧数据列表         | 当前数量   |
+| 事件名 | 说明                                       | 回调参数   |
+| ------ | ------------------------------------------ | ---------- |
+| change | 经典分类，点击左侧导航栏，获取右侧数据列表 | 点击的数据 |
 
-### CategoryPane Props
+## CategoryPane
+
+### Props
 
 | 参数            | 说明                 | 类型  | 默认值 |
 | --------------- | -------------------- | ----- | ------ |
 | category-child  | 右侧展示当前分类数据 | Array | `[]`   |
 | custom-category | 自定义分类数据       | Array | `[]`   |
 
-### CategoryPane Events
+### Events
 
 | 事件名 | 说明                 | 回调参数   |
 | ------ | -------------------- | ---------- |
 | change | 点击右侧分类数据触发 | 点击的数据 |
 
-### CategoryPane Slots
-
-| 名称    | 说明       |
-| ------- | ---------- |
-| default | 自定义内容 |
-
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/category/index.taro.vue b/src/packages/__VUE/category/index.taro.vue
index 0813eaa737..929d5d205d 100644
--- a/src/packages/__VUE/category/index.taro.vue
+++ b/src/packages/__VUE/category/index.taro.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="nut-category">
-    <div class="nut-category__nav" v-if="type == 'classify' || type == 'text'">
-      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+    <div class="nut-category__nav" v-if="type === 'classify' || type === 'text'">
+      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="item?.[id] || index">
         <div
           :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
-          @click="getChildList(index)"
+          @click="getChildList(index, item)"
         >
-          {{ item?.catName }}
+          {{ item?.[name] }}
         </div>
       </div>
     </div>
-
     <slot></slot>
   </div>
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
-import { CategoryType } from './types';
+import { CategoryType, CategoryNavItem, CategoryOptionKey } from './types';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('category');
 
@@ -27,17 +26,23 @@ export default create({
       default: 'classify'
     },
     category: {
-      type: Array,
+      type: Array as PropType<Array<CategoryNavItem>>,
       default: () => []
+    },
+    optionKey: {
+      type: Object as PropType<CategoryOptionKey>,
+      default: () => ({})
     }
   },
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const checkIndex = ref(0);
-    const getChildList = (index: any) => {
+    const id = props.optionKey.catId || 'catId';
+    const name = props.optionKey.catName || 'catName';
+    const getChildList = (index: number, item: any) => {
       checkIndex.value = index;
-      emit('change', index);
+      emit('change', index, item);
     };
-    return { getChildList, checkIndex };
+    return { getChildList, checkIndex, id, name };
   }
 });
 </script>
diff --git a/src/packages/__VUE/category/index.vue b/src/packages/__VUE/category/index.vue
index 0813eaa737..929d5d205d 100644
--- a/src/packages/__VUE/category/index.vue
+++ b/src/packages/__VUE/category/index.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="nut-category">
-    <div class="nut-category__nav" v-if="type == 'classify' || type == 'text'">
-      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="index">
+    <div class="nut-category__nav" v-if="type === 'classify' || type === 'text'">
+      <div class="nut-category__cateListLeft" v-for="(item, index) in category" :key="item?.[id] || index">
         <div
           :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
-          @click="getChildList(index)"
+          @click="getChildList(index, item)"
         >
-          {{ item?.catName }}
+          {{ item?.[name] }}
         </div>
       </div>
     </div>
-
     <slot></slot>
   </div>
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
-import { CategoryType } from './types';
+import { CategoryType, CategoryNavItem, CategoryOptionKey } from './types';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('category');
 
@@ -27,17 +26,23 @@ export default create({
       default: 'classify'
     },
     category: {
-      type: Array,
+      type: Array as PropType<Array<CategoryNavItem>>,
       default: () => []
+    },
+    optionKey: {
+      type: Object as PropType<CategoryOptionKey>,
+      default: () => ({})
     }
   },
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const checkIndex = ref(0);
-    const getChildList = (index: any) => {
+    const id = props.optionKey.catId || 'catId';
+    const name = props.optionKey.catName || 'catName';
+    const getChildList = (index: number, item: any) => {
       checkIndex.value = index;
-      emit('change', index);
+      emit('change', index, item);
     };
-    return { getChildList, checkIndex };
+    return { getChildList, checkIndex, id, name };
   }
 });
 </script>
diff --git a/src/packages/__VUE/category/types.ts b/src/packages/__VUE/category/types.ts
index 571972f326..1755bf438b 100644
--- a/src/packages/__VUE/category/types.ts
+++ b/src/packages/__VUE/category/types.ts
@@ -1 +1,12 @@
 export type CategoryType = 'classify' | 'text' | 'custom';
+export type CategoryNavItem = {
+  catName?: string;
+  catId?: string;
+  // custom
+  [key: PropertyKey]: any;
+};
+
+export type CategoryOptionKey = {
+  catName?: string;
+  catId?: string;
+};