fix(collapse、radio): 优化样式、文档 (#416)

* style: 样式修改

* fix: docs props name

* fix: 视觉走查修改

* upd: 折叠面板组件优化

* style: 折叠面板文档修改，单选多选样式调整

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/checkbox/demo.vue

@@ -123,7 +123,7 @@
           <nut-checkbox label="选项三"></nut-checkbox>
         </nut-checkboxgroup>
       </div>
-      <span>{{ result2 }}</span>
+      <span>{{ result4 }}</span>
     </div>
   </div>
 </template>
@@ -156,10 +156,10 @@ export default createDemo({
       checkboxGroup7: []
     });
     const result = reactive({
-      result1: '',
-      result2: '',
-      result3: '',
-      result4: ''
+      result1: 'false',
+      result2: '选中状态选项：',
+      result3: '选中状态选项：',
+      result4: '选中状态选项：'
     });
     const changeBox1 = (state: boolean) => {
       data.checkbox1 = state;
@@ -194,13 +194,18 @@ export default createDemo({
   }
 });
 </script>
-
+<style>
+#app {
+  height: auto;
+  background: #f6f7f9;
+}
+</style>
 <style lang="scss" scoped>
 .demo-list {
-  margin: 60px 0;
-  padding: 17px;
+  margin: 57px 0 60px 0;
+  padding: 0 17px 17px;
   h4 {
-    margin: 20px 0 10px;
+    margin: 25px 0 10px;
     line-height: 20px;
     color: #909ca4;
     font-size: 14px;
@@ -213,7 +218,8 @@ export default createDemo({
     box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
     p,
     span {
-      margin-top: 10px;
+      display: block;
+      margin-top: 15px;
       font-size: 14px;
       color: #636363;
     }

src/packages/collapse/demo.vue

@@ -47,7 +47,6 @@
       <nut-collapse
         v-model:active="active3"
         :accordion="true"
-        :expandIconPosition="expandIconPosition"
         icon="arrow-right2"
         rotate="90"
       >
@@ -92,7 +91,6 @@ export default createDemo({
       active3: 1,
       active4: 1,
       active5: 1,
-      expandIconPosition: 'left',
       title1: '标题1',
       title2: '标题2',
       title3: '标题3',

src/packages/collapse/doc.md

@@ -5,84 +5,162 @@
 通过`v-model`控制展开的面板列表，`activeNames`为数组格式
 
 ```html
-<nut-collapse v-model="activeNames">
-    <nut-collapse-item title="标题1" :name="1">
-        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府 
-    </nut-collapse-item>
-    <nut-collapse-item title="标题2" :name="2">
-        京东到家：教师节期间 创意花束销量增长53倍 
-    </nut-collapse-item>
-    <nut-collapse-item title="标题3" :name="3" disabled>
-    </nut-collapse-item>
+<nut-collapse v-model:active="active1" icon="down-arrow">
+  <nut-collapse-item :title="title1" :name="1">
+    京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2">
+    京东到家：教师节期间 创意花束销量增长53倍
+  </nut-collapse-item>
+  <nut-collapse-item :title="title3" :name="3" disabled>
+  </nut-collapse-item>
 </nut-collapse>
 ```
 
 ``` javascript
 setup() {
   const activeNames = reactive([1, 2]);
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
   return {
-    activeNames
+    activeNames,
+    ...toRefs(title)
   };
 }
 ```
+### 无icon样式
 
+```html
+<nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse-item :title="title1" :name="1">
+    2020年中国数字游戏市场规模超2786亿元
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2">
+    基于区块链技术的取证APP在浙江省杭州市发布
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+setup() {
+  const activeName = ref(1);
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
+  return {
+    activeName,
+    ...toRefs(title)
+  };
+}
+```
 
 ### 手风琴
 
 通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
 
 ```html
-<nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
-        华为终端操作系统EMUI 11发布，9月11日正式开启 
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-        中国服务机器人市场已占全球市场超1/4 
-    </nut-collapse-item>
-    <nut-collapse-item :title="title3" :name="3">
-        QuestMobile：90后互联网用户规模超越80后达3.62亿 
-    </nut-collapse-item>
+ <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
+  <nut-collapse-item :title="title1" :name="1">
+    华为终端操作系统EMUI 11发布，9月11日正式开启
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+    中国服务机器人市场已占全球市场超1/4
+  </nut-collapse-item>
+  <nut-collapse-item :title="title3" :name="3">
+    QuestMobile：90后互联网用户规模超越80后达3.62亿
+  </nut-collapse-item>
 </nut-collapse>
 ```
 
 ``` javascript
 setup() {
   const activeName = ref(1);
+  const subTitle = '副标题';
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
   return {
     activeName,
-    subTitle: '副标题'
+    subTitle,
+    ...toRefs(title)
   };
 }
 ```
 
 
-### 图标展示
+### 自定义折叠图标
 
-通过`expandIconPosition`可以设置图标的位置，icon设置自定义图标，rotate设置图标旋转的角度
+通过icon设置自定义图标，rotate设置图标旋转的角度
 
 ```html
-<nut-collapse v-model="activeName" :accordion="true" :expand-icon-position="expandIconPosition" :icon="icon" :rotate="rotate" :icon-width="iconWidth"
-        :icon-height="iconHeight">
-    <nut-collapse-item :title="title1" :name="1">
-        京东数科IPO将引入“绿鞋机制” 
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
-        世界制造业大会开幕，阿里巴巴与安徽合作再升级
-    </nut-collapse-item>
+<nut-collapse
+  v-model:active="activeName"
+  :accordion="true"
+  icon="arrow-right2"
+  rotate="90"
+>
+  <nut-collapse-item :title="title1" :name="1">
+    京东数科IPO将引入“绿鞋机制”
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    世界制造业大会开幕，阿里巴巴与安徽合作再升级
+  </nut-collapse-item>
 </nut-collapse>
 ```
 
 ``` javascript
-setup() {
-  return {
-    activeName: 1,
-    expandIconPosition: 'left',
-    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'
-    rotate: 180,
-    iconWidth: '20px',
-    iconHeight: '20px',
-  };
-}
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+})
+return {
+  activeName,
+  ...toRefs(title)
+};
+```
+
+
+### 自定义标题图标
+
+通过icon设置自定义图标，rotate设置图标旋转的角度
+
+```html
+<nut-collapse
+  v-model:active="activeName"
+  title-icon="issue"
+  title-icon-color="red"
+  title-icon-size="20px"
+  title-icon-position="left"
+  icon="down-arrow"
+  :accordion="true"
+>
+  <nut-collapse-item :title="title1" :name="1">
+    “森亿智能”获4亿元D轮融资
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    快看漫画与全球潮玩集合店X11达成战略合作
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+})
+return {
+  activeName,
+  ...toRefs(title)
+};
 ```
 
 ## Collapse Prop
@@ -91,26 +169,26 @@ setup() {
 |----- | ----- | ----- | ----- 
 | v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
 | accordion | 是否开启手风琴模式 | boolean | false |
-| border | 是否显示外边框 | boolean | true |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+| icon | 图标链接/或使用 NutUI 的 icon | string | ‘’ |
+| icon-size | 图标大小 | string | 16px |
+| icon-color | 图标颜色 | string | '' |
+| sub-title | 标题栏副标题 | string | - |
+| title-icon | 标题图标链接/或使用 NutUI 的 icon | string | ‘’ |
+| title-icon-size | 标题图标大小 | string | 16px |
+| title-icon-color | 标题图标颜色 | string | ’‘ |
+| title-icon-position | 标题图标位置 | string | ‘left' |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
 
 ### CollapseItem Prop
 | 参数 | 说明 | 类型 | 默认值 | 
 |------|------|------|------|
-| title | 标题栏左侧内容 | string | - |
 | name | 唯一标识符，必填 | string \ number | -1 |
-| expand-icon-position | 标题图标的位置 | string | right |
-| title-icon | 标题图标链接 | string | ‘’ 为不展示图标，默认 ‘’ |
-| title-icon-width | 标题图标宽度 | string | 13px |
-| title-icon-height | 标题图标高度 | string | 13px |
-| title-icon-position | 标题图标位置 | string | ‘left' 'right' |
+| title | 标题栏左侧内容 | string | - |
 | sub-title | 标题栏副标题 | string | - |
-| icon | 标题栏自定义图标链接 | string | ‘none’ 为不展示图标，默认 ‘’ |
-| icon-width | 标题栏自定义图标宽度 | string | 24px |
-| icon-height | 标题栏自定义图标高度 | string | 12px |
-| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
+| disabled | 标题栏是否禁用 | boolean | false |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |

src/packages/collapse/index.vue

@@ -17,10 +17,10 @@ export default create({
     accordion: {
       type: Boolean
     },
-    expandIconPosition: {
-      type: String,
-      default: 'right'
-    },
+    // expandIconPosition: {
+    //   type: String,
+    //   default: 'right'
+    // },
     titleIcon: {
       type: String,
       default: ''

src/packages/collapseitem/index.vue

@@ -91,7 +91,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}-left`]: parent.props.classDirection === 'left',
+        // [`${prefixCls}-left`]: parent.props.classDirection === 'left',
         [`${prefixCls}-icon`]: parent.props.icon
       };
     });
@@ -106,7 +106,7 @@ export default create({
       iconSize: parent.props.iconSize,
       iconColor: parent.props.iconColor,
       openExpanded: false,
-      classDirection: 'right',
+      // classDirection: 'right',
       iconStyle: {
         transform: 'rotate(0deg)',
         marginTop: parent.props.iconHeght
@@ -230,7 +230,7 @@ export default create({
         }
       }
 
-      proxyData.classDirection = parent.props.expandIconPosition;
+      // proxyData.classDirection = parent.props.expandIconPosition;
       // if (parent.props.icon && parent.props.icon != 'none') {
       //   proxyData.iconStyle['background-image'] =
       //     'url(' + parent.props.icon + ')';

src/packages/radio/demo.vue

@@ -124,12 +124,18 @@ export default createDemo({
 });
 </script>
 
+<style>
+#app {
+  height: auto;
+  background: #f6f7f9;
+}
+</style>
 <style lang="scss" scoped>
 .demo-list {
-  padding-top: 0;
-  margin: 60px 0;
+  margin: 57px 0 60px 0;
+  padding: 0 17px 17px;
   h4 {
-    margin: 20px 0 10px 25px;
+    margin: 25px 0 10px;
     line-height: 20px;
     color: #909ca4;
     font-size: 14px;