diff --git a/.env.development b/.env.development index ef33dfcc..38f5461e 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ #开发环境 NODE_ENV = 'development' -VITE_APP_LI_DAO_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' \ No newline at end of file diff --git a/.env.production b/.env.production index c66d1305..8a099cff 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ #生产环境 NODE_ENV = 'production' -VITE_APP_LI_DAO_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' \ No newline at end of file diff --git a/.env.test b/.env.test index b72cc11b..1fdbfc7b 100644 --- a/.env.test +++ b/.env.test @@ -1,4 +1,4 @@ #测试环境 NODE_ENV = 'test' -VITE_APP_LI_DAO_URL = 'api/' \ No newline at end of file +VITE_APP_URL = 'api/' \ No newline at end of file diff --git a/README.md b/README.md index e8850e53..998fd3bb 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ ## 预览地址 -[**`点击预览`**](https://xiaodaigua-ray.github.io/#/) +[**

`点击预览`

**](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` 组件封装的可折叠操作栏 ## 项目结构 diff --git a/src/components/RayCollapseGrid/index.ts b/src/components/RayCollapseGrid/index.ts new file mode 100644 index 00000000..bbe54ee2 --- /dev/null +++ b/src/components/RayCollapseGrid/index.ts @@ -0,0 +1,3 @@ +import RayCollapseGrid from './src/index' + +export default RayCollapseGrid diff --git a/src/components/RayCollapseGrid/src/index.scss b/src/components/RayCollapseGrid/src/index.scss new file mode 100644 index 00000000..5bf1654c --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx new file mode 100644 index 00000000..bfbdd761 --- /dev/null +++ b/src/components/RayCollapseGrid/src/index.tsx @@ -0,0 +1,94 @@ +/** + * + * @author 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 = () => ( +
+ + {modelCollapsed.value + ? props.collapseToggleText[0] + : props.collapseToggleText[1]} + + +
+ ) + + return { + modelCollapsed, + handleCollapse, + CollapseIcon, + } + }, + render() { + return ( + + {{ + default: () => ( + + {this.$slots.default?.()} + + + {this.$slots.action?.()} + {this.CollapseIcon()} + + + + ), + }} + + ) + }, +}) + +export default RayCollapseGrid + +/** + * + * + * + * 可折叠操作栏 + * + * 可以结合表单或者表格使用 + * + * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素 + */ diff --git a/src/components/RayCollapseGrid/src/props.ts b/src/components/RayCollapseGrid/src/props.ts new file mode 100644 index 00000000..1c156b48 --- /dev/null +++ b/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, + default: () => ['展开', '收起'], + }, + bordered: { + /** + * + * 卡片边框 + * + * 默认 `true` + */ + type: Boolean, + default: true, + }, + ...gridProps, +} as const + +/** + * + * 基于 `NGird` 实现 + * + * 继承该组件所有属性和方法, + * + * `xGap` 默认 `12` + * + * `yGap` 默认 `18` + */ diff --git a/src/components/RayCollapseGrid/src/type.ts b/src/components/RayCollapseGrid/src/type.ts new file mode 100644 index 00000000..f7596007 --- /dev/null +++ b/src/components/RayCollapseGrid/src/type.ts @@ -0,0 +1 @@ +export type CollapseToggleText = [string, string] diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx index ecb24136..1fbd77e3 100644 --- a/src/components/RayTable/src/index.tsx +++ b/src/components/RayTable/src/index.tsx @@ -186,7 +186,7 @@ const RayTable = defineComponent({ {{ default: () => ( -
+ <> + ), header: () => this.title, 'header-extra': () => @@ -252,7 +252,9 @@ export default RayTable /** * - * 完全继承 `NDataTable`, 所以该组件可以使用所有 `NDataTable Props` + * + * + * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法 * * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel` * diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts index 93c487a8..8c0aa8b7 100644 --- a/src/components/RayTable/src/props.ts +++ b/src/components/RayTable/src/props.ts @@ -175,5 +175,5 @@ export default rayTableProps * * `Ray Table Props` * - * 继承 `Naive UI Data Table` + * 继承 `Naive UI Data Table` */ diff --git a/src/icons/expanded.svg b/src/icons/expanded.svg new file mode 100644 index 00000000..09c0c573 --- /dev/null +++ b/src/icons/expanded.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx index e08cf326..845cd16e 100644 --- a/src/views/table/index.tsx +++ b/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 中查看相关代码与注释

+

该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏

+ + + 该组件基于 NGird 实现, 但是由于 css grid 限制, 不能对于 NGridItem + 组件进行二次封装, 所以使用时必须配合 NGirdItem + 使用才能实现示例效果(使用 NGirdItem 包裹元素即可). + + + + 数量 + + + 行数 + + + + window.$message.info( + `我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`, + ) + } + > + {{ + action: () => ( + <> + 搜索 + 重置 + + ), + default: () => ( + <> + + + + + + + + + + + + + + + + + ), + }} + +