实现可折叠操作栏 RayCollapseGrid 组件，一些细小修改

.env.development

@@ -1,4 +1,4 @@
 #开发环境
 NODE_ENV = 'development'
 
-VITE_APP_LI_DAO_URL = 'api/'
+VITE_APP_URL = 'api/'

.env.production

@@ -1,4 +1,4 @@
 #生产环境
 NODE_ENV = 'production'
 
-VITE_APP_LI_DAO_URL = 'api/'
+VITE_APP_URL = 'api/'

.env.test

@@ -1,4 +1,4 @@
 #测试环境
 NODE_ENV = 'test'
 
-VITE_APP_LI_DAO_URL = 'api/'
+VITE_APP_URL = 'api/'

README.md

@@ -18,7 +18,7 @@
 
 ## 预览地址
 
-[**`点击预览`**](https://xiaodaigua-ray.github.io/#/)
+[**<h3>`点击预览`</h3>**](https://xiaodaigua-ray.github.io/#/)
 
 ## 拉取依赖
 
@@ -82,6 +82,7 @@ npm run build
 - `RayChart` 基于 `echarts5.x` 封装可视化组件
 - `RayTransitionComponent` 带过渡动画路由组件，效果与 `RouterView` 相同
 - `RayTable` 基于 `Naive UI DataTable` 组件封装，实现了一些小功能
+- `RayCollapseGrid` 基于 `Naive UI NGrid` 组件封装的可折叠操作栏
 
 ## 项目结构
 

src/components/RayCollapseGrid/index.ts

@@ -0,0 +1,3 @@
+import RayCollapseGrid from './src/index'
+
+export default RayCollapseGrid

src/components/RayCollapseGrid/src/index.scss

@@ -0,0 +1,20 @@
+.ray-collapse-grid {
+  box-sizing: border-box;
+
+  & .collapse-icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: color 0.3s var(--r-bezier);
+
+    > .collapse-icon--arrow {
+      margin-left: 0.5em;
+      transition: color 0.3s var(--r-bezier), transform 0.3s var(--r-bezier);
+
+      &.collapse-icon--arrow__expanded {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

src/components/RayCollapseGrid/src/index.tsx

@@ -0,0 +1,94 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-27
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { collapseGridProps } from './props'
+
+import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
+import RayIcon from '@/components/RayIcon'
+
+const RayCollapseGrid = defineComponent({
+  name: 'RayCollapseGrid',
+  props: collapseGridProps,
+  emits: ['updateValue'],
+  setup(props, { emit }) {
+    const modelCollapsed = ref(props.value)
+
+    const handleCollapse = () => {
+      modelCollapsed.value = !modelCollapsed.value
+
+      emit('updateValue', modelCollapsed.value)
+    }
+
+    const CollapseIcon = () => (
+      <div class="collapse-icon" onClick={handleCollapse.bind(this)}>
+        <span>
+          {modelCollapsed.value
+            ? props.collapseToggleText[0]
+            : props.collapseToggleText[1]}
+        </span>
+        <RayIcon
+          customClassName={`collapse-icon--arrow ${
+            modelCollapsed.value ? '' : 'collapse-icon--arrow__expanded'
+          }`}
+          name="expanded"
+          size="14"
+        />
+      </div>
+    )
+
+    return {
+      modelCollapsed,
+      handleCollapse,
+      CollapseIcon,
+    }
+  },
+  render() {
+    return (
+      <NCard bordered={this.bordered}>
+        {{
+          default: () => (
+            <NGrid
+              class="ray-collapse-grid"
+              collapsed={this.modelCollapsed}
+              xGap={this.xGap || 12}
+              yGap={this.yGap || 18}
+              cols={this.cols}
+              collapsedRows={this.collapsedRows}
+            >
+              {this.$slots.default?.()}
+              <NGridItem suffix class="ray-collapse-grid__suffix--btn">
+                <NSpace justify="end">
+                  {this.$slots.action?.()}
+                  {this.CollapseIcon()}
+                </NSpace>
+              </NGridItem>
+            </NGrid>
+          ),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default RayCollapseGrid
+
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * 可折叠操作栏
+ *
+ * 可以结合表单或者表格使用
+ *
+ * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
+ */

src/components/RayCollapseGrid/src/props.ts

@@ -0,0 +1,53 @@
+import { gridProps } from 'naive-ui'
+
+import type { PropType } from 'vue'
+import type { CollapseToggleText } from './type'
+
+export const collapseGridProps = {
+  value: {
+    /**
+     *
+     * 是否折叠操作栏
+     *
+     * 默认折叠
+     *
+     * `true` 收起, `false` 展开
+     */
+    type: Boolean,
+    default: true,
+  },
+  collapseToggleText: {
+    /**
+     *
+     * 自定义展开与收起文案
+     *
+     * 默认 `['展开', '收起']`
+     *
+     * 索引第一位为展开时显示内容, 所以第二位置为收起时显示内容
+     */
+    type: Array as unknown as PropType<CollapseToggleText>,
+    default: () => ['展开', '收起'],
+  },
+  bordered: {
+    /**
+     *
+     * 卡片边框
+     *
+     * 默认 `true`
+     */
+    type: Boolean,
+    default: true,
+  },
+  ...gridProps,
+} as const
+
+/**
+ *
+ * 基于 `NGird` 实现
+ *
+ * 继承该组件所有属性和方法, <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * `xGap` 默认 `12`
+ *
+ * `yGap` 默认 `18`
+ */

src/components/RayCollapseGrid/src/type.ts

@@ -0,0 +1 @@
+export type CollapseToggleText = [string, string]

src/components/RayTable/src/index.tsx

@@ -186,7 +186,7 @@ const RayTable = defineComponent({
       <NCard bordered={false}>
         {{
           default: () => (
-            <div>
+            <>
               <NDataTable
                 id={this.tableUUID}
                 {...this.$props}
@@ -212,7 +212,7 @@ const RayTable = defineComponent({
               ) : (
                 ''
               )}
-            </div>
+            </>
           ),
           header: () => this.title,
           'header-extra': () =>
@@ -252,7 +252,9 @@ export default RayTable
 
 /**
  *
- * 完全继承 `NDataTable`, 所以该组件可以使用所有 `NDataTable Props`
+ * <https://www.naiveui.com/zh-CN/dark/components/data-table>
+ *
+ * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
  *
  * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`
  *

src/components/RayTable/src/props.ts

@@ -175,5 +175,5 @@ export default rayTableProps
  *
  * `Ray Table Props`
  *
- * 继承 `Naive UI Data Table`
+ * 继承 `Naive UI Data Table` <https://www.naiveui.com/zh-CN/dark/components/data-table>
  */

src/icons/expanded.svg

@@ -0,0 +1,6 @@
+<svg t="1672122187346" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="6246" width="64" height="64">
+  <path fill="currentColor"
+    d="M806.4 319.2L512 613.6 221.6 323.2 176 368l290.4 290.4L512 704l45.6-45.6 294.4-294.4z"
+    p-id="6247"></path>
+</svg>

src/views/table/index.tsx

@@ -9,8 +9,20 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NLayout, NCard, NTag, NButton } from 'naive-ui'
+import {
+  NLayout,
+  NCard,
+  NTag,
+  NButton,
+  NGridItem,
+  NSelect,
+  NInput,
+  NDatePicker,
+  NInputNumber,
+  NSpace,
+} from 'naive-ui'
 import RayTable from '@/components/RayTable/index'
+import RayCollapseGrid from '@/components/RayCollapseGrid/index'
 
 import type { DataTableColumns } from 'naive-ui'
 
@@ -110,6 +122,8 @@ const TableView = defineComponent({
         key: 'delete',
       },
     ]
+    const gridItemCount = ref(4)
+    const gridCollapsedRows = ref(1)
 
     const handleMenuSelect = (key: string | number, idx: number) => {
       if (key === 'delete') {
@@ -123,6 +137,8 @@ const TableView = defineComponent({
       baseColumns,
       tableMenuOptions,
       handleMenuSelect,
+      gridItemCount,
+      gridCollapsedRows,
     }
   },
   render() {
@@ -138,7 +154,60 @@ const TableView = defineComponent({
             相关拓展 props 属性, 可以在源码位置
             src/components/RayTable/src/props.ts 中查看相关代码与注释
           </p>
+          <p>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</p>
         </NCard>
+        <NSpace vertical>
+          <NSpace style={['margin-top: 18px']}>
+            该组件基于 NGird 实现, 但是由于 css grid 限制, 不能对于 NGridItem
+            组件进行二次封装, 所以使用时必须配合 NGirdItem
+            使用才能实现示例效果(使用 NGirdItem 包裹元素即可).
+          </NSpace>
+          <NSpace style={['margin-top: 18px']}>
+            <NSpace align="center">
+              数量 <NInputNumber v-model:value={this.gridItemCount} />
+            </NSpace>
+            <NSpace align="center">
+              行数 <NInputNumber v-model:value={this.gridCollapsedRows} />
+            </NSpace>
+          </NSpace>
+          <RayCollapseGrid
+            collapsedRows={this.gridCollapsedRows}
+            cols={this.gridItemCount}
+            onUpdateValue={(value: boolean) =>
+              window.$message.info(
+                `我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`,
+              )
+            }
+          >
+            {{
+              action: () => (
+                <>
+                  <NButton>搜索</NButton>
+                  <NButton>重置</NButton>
+                </>
+              ),
+              default: () => (
+                <>
+                  <NGridItem>
+                    <NSelect />
+                  </NGridItem>
+                  <NGridItem>
+                    <NInput />
+                  </NGridItem>
+                  <NGridItem>
+                    <NDatePicker type="datetimerange" clearable />
+                  </NGridItem>
+                  <NGridItem>
+                    <NInput />
+                  </NGridItem>
+                  <NGridItem>
+                    <NInput />
+                  </NGridItem>
+                </>
+              ),
+            }}
+          </RayCollapseGrid>
+        </NSpace>
         <NCard title="基础使用" style={['margin-top: 18px']}>
           <RayTable
             title="基础表格"