⚡ 修改 hook 位置.

orion-visor-ui/src/hooks/card.ts

@@ -0,0 +1,35 @@
+import type { PaginationProps } from '@arco-design/web-vue';
+import type { ColResponsiveValue } from '@/types/card';
+import { reactive } from 'vue';
+import { isNumber } from '@/utils/is';
+import { useAppStore } from '@/store';
+import { CardPageSizeOptions } from '@/types/const';
+
+/**
+ * 创建卡片列表列布局
+ */
+export const useCardColLayout = (): ColResponsiveValue => {
+  return reactive({
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 8,
+    xxl: 6,
+  });
+};
+
+/**
+ * 创建创建卡片列表分页
+ */
+export const useCardPagination = (): PaginationProps => {
+  const appStore = useAppStore();
+  return reactive({
+    total: 0,
+    current: 1,
+    pageSize: isNumber(appStore.defaultCardPageSize) ? appStore.defaultCardPageSize : CardPageSizeOptions[0],
+    showTotal: true,
+    showPageSize: true,
+    pageSizeOptions: CardPageSizeOptions
+  });
+};

orion-visor-ui/src/hooks/table.ts

@@ -0,0 +1,45 @@
+import type { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
+import type { TableExpandable } from '@arco-design/web-vue/es/table/interface';
+import { reactive } from 'vue';
+import { useAppStore } from '@/store';
+import { isNumber } from '@/utils/is';
+import { TablePageSizeOptions } from '@/types/const';
+
+/**
+ * 创建列表分页
+ */
+export const useTablePagination = (ext?: PaginationProps): PaginationProps => {
+  const appStore = useAppStore();
+  return reactive({
+    total: 0,
+    current: 1,
+    pageSize: isNumber(appStore.defaultTablePageSize) ? appStore.defaultTablePageSize : TablePageSizeOptions[0],
+    showTotal: true,
+    showPageSize: true,
+    pageSizeOptions: TablePageSizeOptions,
+    ...ext
+  });
+};
+
+/**
+ * 创建行选择器
+ */
+export const useRowSelection = (ext?: TableRowSelection): TableRowSelection => {
+  return reactive({
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: true,
+    ...ext
+  });
+};
+
+/**
+ * 创建表格展开
+ */
+export const useExpandable = (ext?: TableExpandable): TableExpandable => {
+  return reactive({
+    width: 50,
+    fixed: true,
+    ...ext
+  });
+};