fix: 修复RayCollapseGrid组件一些小问题

.eslintrc.cjs

@@ -105,7 +105,12 @@ module.exports = {
     'no-labels': 2, // 禁止标签声明
     'no-lone-blocks': 2, // 禁止不必要的嵌套块
     'no-multi-spaces': 1, // 禁止使用多余的空格
-    'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行
+    'no-multiple-empty-lines': [
+      'error',
+      {
+        max: 2,
+      },
+    ], // 空行最多不能超过 `2` 行
     'no-new-func': 2, // 禁止使用 `new Function`
     'no-new-object': 2, // 禁止使用 `new Object`
     'no-new-require': 2, // 禁止使用 `new require`

src/components/RayCollapseGrid/src/index.tsx

@@ -9,6 +9,16 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * 可折叠操作栏
+ * 可以结合表单或者表格使用，让你快捷的实现高级搜索功能
+ *
+ * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
+ */
+
 import './index.scss'
 
 import { collapseGridProps } from './props'
@@ -76,14 +86,10 @@ const RayCollapseGrid = defineComponent({
             >
               {this.$slots.default?.()}
               <NGridItem suffix class="ray-collapse-grid__suffix--btn">
-                {{
+                <NSpace justify="end">
-                  default: ({ overflow }: { overflow: boolean }) => (
+                  {this.$slots.action?.()}
-                    <NSpace justify="end">
+                  {this.CollapseIcon()}
-                      {this.$slots.action?.()}
+                </NSpace>
-                      {overflow ? this.CollapseIcon() : ''}
-                    </NSpace>
-                  ),
-                }}
               </NGridItem>
             </NGrid>
           ),
@@ -94,14 +100,3 @@ const RayCollapseGrid = defineComponent({
 })
 
 export default RayCollapseGrid
-
-/**
- *
- * <https://www.naiveui.com/zh-CN/dark/components/grid>
- *
- * 可折叠操作栏
- *
- * 可以结合表单或者表格使用
- *
- * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
- */

src/views/demo/mock-demo/index.tsx

@@ -170,13 +170,13 @@ const MockDemo = defineComponent({
                   <NFormItemGi label="邮箱">
                     <NInput v-model:value={this.email} clearable />
                   </NFormItemGi>
-                  <NFormItemGi>
-                    <NButton type="primary" onClick={this.getPerson.bind(this)}>
-                      搜索
-                    </NButton>
-                  </NFormItemGi>
                 </>
               ),
+              action: () => (
+                <NButton type="primary" onClick={this.getPerson.bind(this)}>
+                  搜索
+                </NButton>
+              ),
             }}
           </RayCollapseGrid>
         </NForm>