@peng_kai/kit 0.0.15 → 0.1.0

package/antd/hooks/useAntdTable.ts

@@ -1,27 +1,27 @@
-import { computed } from 'vue'
-import type { UseQueryReturnType } from '@tanstack/vue-query'
-import type { Table, TableProps } from 'ant-design-vue'
-import type { ColumnType } from 'ant-design-vue/es/table/interface'
-import type { ComponentProps } from 'vue-component-type-helpers'
+import { computed } from 'vue';
+import type { UseQueryReturnType } from '@tanstack/vue-query';
+import type { Table, TableProps } from 'ant-design-vue';
+import type { ColumnType } from 'ant-design-vue/es/table/interface';
+import type { ComponentProps } from 'vue-component-type-helpers';
 
 export function useAntdTable<
   UQRR extends UseQueryReturnType<any, any>,
-  QP extends Partial<{ page?: string | number; page_size?: string | number }>,
+  QP extends Partial<{ page?: string | number, page_size?: string | number }>,
 >(uqrt: UQRR, queryParams: QP = ({} as any)) {
-  type RecordType = GetRecordType<UQRR>
-  type LocalTableProps = TableProps<RecordType>
-  type LocalColumnsType = NonNullable<LocalTableProps['columns']>
+  type RecordType = GetRecordType<UQRR>;
+  type LocalTableProps = TableProps<RecordType>;
+  type LocalColumnsType = NonNullable<LocalTableProps['columns']>;
 
-  const { data, isFetching, isLoading } = uqrt
+  const { data, isFetching, isLoading } = uqrt;
 
   const onPaginationChange: ComponentProps<typeof Table>['onChange'] = (pagination) => {
-    const page = queryParams.page_size !== pagination.pageSize ? 1 : pagination.current
-    Object.assign(queryParams, { page, page_size: pagination.pageSize ?? 10 })
-  }
-  const defineColumns = (columnsFn: () => LocalColumnsType) => computed(columnsFn)
+    const page = queryParams.page_size !== pagination.pageSize ? 1 : pagination.current;
+    Object.assign(queryParams, { page, page_size: pagination.pageSize ?? 10 });
+  };
+  const defineColumns = (columnsFn: () => LocalColumnsType) => computed(columnsFn);
 
   const tableProps = computed<LocalTableProps>(() => {
-    const { list, pagination } = data.value ?? {}
+    const { list, pagination } = data.value ?? {};
 
     return {
       dataSource: list,
@@ -35,20 +35,20 @@ export function useAntdTable<
       scroll: { x: 'max-content' },
       sticky: true,
       onChange: onPaginationChange as any,
-    }
-  })
+    };
+  });
   const dataIndexs = new Proxy({} as Record<keyof RecordType, string>, {
     get(_, p) {
-      return p
+      return p;
     },
-  })
+  });
   const bodyCellType = {} as {
     index: number
     text: any
     value: any
     record: RecordType
     column: ColumnType<RecordType>
-  }
+  };
 
   return {
     /** ATable 的预设 Props */
@@ -60,11 +60,11 @@ export function useAntdTable<
     /** 【类型辅助】用于定义出类型精确的 columns  */
     defineColumns,
     onPaginationChange,
-  }
+  };
 }
 
 type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
   ? D extends Api.PageData
     ? NonNullable<D['list']>[0]
     : never
-  : never
+  : never;

package/antd/hooks/useAntdTheme.ts

@@ -0,0 +1,86 @@
+import { reactiveComputed, useStyleTag } from '@vueuse/core';
+import pickBy from 'lodash-es/pickBy';
+import { theme } from 'ant-design-vue';
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+import type { Ref } from 'vue';
+import { computed, unref } from 'vue';
+
+export function useAntdTheme(mode: Ref<string>, config: Ref<Record<string, any>>) {
+  const antdTheme = reactiveComputed<ThemeConfig>(() => {
+    const _mode = unref(mode);
+    const _config = unref(config);
+    const algorithm = ['dark'].includes(_mode) ? theme.darkAlgorithm : theme.defaultAlgorithm;
+    const screenXS = Number.parseFloat(_config.breakpoints.mobile);
+    const screenSM = Number.parseFloat(_config.breakpoints.mobilel);
+    const screenMD = Number.parseFloat(_config.breakpoints.tablet);
+    const screenLG = Number.parseFloat(_config.breakpoints.tabletl);
+    const screenXL = Number.parseFloat(_config.breakpoints.laptop);
+    const screenXXL = Number.parseFloat(_config.breakpoints.desktop);
+    const screenXXXL = Number.parseFloat(_config.breakpoints.desktop1k);
+    const token: ThemeConfig['token'] = {
+      ...algorithm({ ...theme.defaultSeed, colorPrimary: _config.colors.primary.DEFAULT }),
+      borderRadius: 2,
+      screenXS,
+      screenXSMin: screenXS,
+      screenXSMax: screenSM - 0.1,
+      screenSM,
+      screenSMMin: screenSM,
+      screenSMMax: screenMD - 0.1,
+      screenMD,
+      screenMDMin: screenMD,
+      screenMDMax: screenLG - 0.1,
+      screenLG,
+      screenLGMin: screenLG,
+      screenLGMax: screenXL - 0.1,
+      screenXL,
+      screenXLMin: screenXL,
+      screenXLMax: screenXXL - 0.1,
+      screenXXL,
+      screenXXLMin: screenXXL,
+      screenXXLMax: screenXXXL - 0.1,
+      screenXXXL,
+      screenXXXLMin: screenXXXL,
+    };
+
+    if (_mode === 'dark') {
+      Object.assign<typeof token, typeof token>(token, {
+        colorBgLayout: '#0a0a0a',
+      });
+    }
+
+    return { token };
+  });
+
+  const colorER = /.*color.*/;
+  const cssVariable = computed(() => {
+    return pickBy(antdTheme.token, (_v, k) => {
+      if (colorER.test(k))
+        return true;
+      if (['fontFamily'].includes(k))
+        return true;
+      return false;
+    });
+  });
+
+  useGlobalCssVariable('antd', cssVariable);
+
+  return antdTheme;
+}
+
+function useGlobalCssVariable(prefix: string, vars: Ref<Record<string, any>>) {
+  const cssVariable = computed(() => {
+    const _vars = unref(vars);
+    let wrapper = ':root{ /**/ }';
+
+    if (_vars) {
+      const tokens = Object.entries(_vars)
+        .map(([k, v]) => `--${prefix}-${String(k)}: ${String(v)};`)
+        .join(' ');
+      wrapper = wrapper.replace('/**/', tokens);
+    }
+
+    return wrapper;
+  });
+
+  return useStyleTag(cssVariable);
+}

package/antd/index.ts

@@ -1,7 +1,8 @@
-export { useAntdModal } from './hooks/useAntdModal'
-export { useAntdDrawer } from './hooks/useAntdDrawer'
-export { useAntdTable } from './hooks/useAntdTable'
-export { useAntdForm } from './hooks/useAntdForm'
-export { createAntdModal } from './hooks/createAntdModal'
-export { default as InputNumberRange } from './components/InputNumberRange.vue'
-export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts'
+export { useAntdModal } from './hooks/useAntdModal';
+export { useAntdDrawer } from './hooks/useAntdDrawer';
+export { useAntdTable } from './hooks/useAntdTable';
+export { useAntdForm } from './hooks/useAntdForm';
+export { useAntdTheme } from './hooks/useAntdTheme';
+export { createAntdModal } from './hooks/createAntdModal';
+export { default as InputNumberRange } from './components/InputNumberRange.vue';
+export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts';

package/eslint.config.js

@@ -0,0 +1,50 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    stylistic: {
+      indent: 2,
+      quotes: 'single',
+      semi: true,
+      jsx: true,
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      'no-console': ['off'],
+      'ts/no-use-before-define': ['off'],
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/attribute-hyphenation': ['error', 'never'],
+      'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
+      'vue/custom-event-name-casing': ['error', 'camelCase'],
+      'vue/prop-name-casing': ['error', 'camelCase'],
+      'vue/component-definition-name-casing': ['error', 'PascalCase'],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
+      'vue/max-attributes-per-line': ['error', {
+        singleline: { max: 3 },
+        multiline: { max: 3 },
+      }],
+      'vue/v-slot-style': ['error', {
+        atComponent: 'shorthand',
+        default: 'shorthand',
+        named: 'shorthand',
+      }],
+      'vue/block-lang': ['error', {
+        script: { lang: 'ts' },
+      }],
+      'vue/block-order': ['error', {
+        order: ['script:not([setup])', 'script[setup]', 'template', 'style[scoped]', 'style:not([scoped])'],
+      }],
+    },
+  },
+  {
+    rules: {
+      'eslint-comments/no-unlimited-disable': ['off'],
+    },
+  },
+);

package/kitDependencies.ts

@@ -1,11 +1,15 @@
-import type dayjs from "dayjs";
-import type { useMenu, usePage, usePageTab, usePermission } from "./admin/hooks";
-import type { useRoute, useRouter } from 'vue-router'
+import type dayjs from 'dayjs';
+import type { useRoute, useRouter } from 'vue-router';
+import type { useMenu, usePage, usePageTab } from './admin/hooks';
+import type { TRole, usePermission } from './admin/permission/usePermission';
 
-const KEY = '__PK_KIT_DEPENDENCIES__'
+const KEY = '__PK_KIT_DEPENDENCIES__';
 
 interface Dependencies {
   dayjs: typeof dayjs
+  appName: string
+  appId: string
+  roles: Record<string, TRole>
   useRoute: typeof useRoute
   useRouter: typeof useRouter
   useMenu: typeof useMenu
@@ -15,15 +19,25 @@ interface Dependencies {
 }
 
 export function setDependencies(deps: Partial<Dependencies>) {
-  window[KEY] = { ...window[KEY], ...deps }
+  window[KEY] = { ...window[KEY], ...deps };
 }
 
 export function getDependencies() {
-  return window[KEY]
+  if (window[KEY]) {
+    return new Proxy(window[KEY], {
+      get(target, prop: keyof Dependencies) {
+        if (prop in target)
+          return target[prop];
+        else
+          throw new Error(`未发现 kit 依赖 ${prop}`);
+      },
+    });
+  }
+  else { throw new Error('未发现 kit 依赖'); };
 }
 
 declare global {
   interface Window {
     [KEY]: Dependencies
   }
-}
+}

package/package.json

@@ -1,40 +1,46 @@
 {
   "name": "@peng_kai/kit",
-  "version": "0.0.15",
+  "type": "module",
+  "version": "0.1.0",
   "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": "4.37.1",
+    "@vueuse/core": "10.6.1",
+    "ant-design-vue": "4.0.7",
+    "axios": "1.6.2",
+    "bignumber.js": "9.1.2",
+    "dayjs": "1.11.10",
+    "lodash-es": "4.17.21",
+    "vue": "3.3.8",
+    "vue-router": "4.2.5"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "@tanstack/vue-query": "^4.37.1",
-    "@vueuse/core": "^10.5.0",
-    "ant-design-vue": "^4.0.6",
-    "axios": "^1.6.0",
+    "@vueuse/core": "^10.6.1",
+    "ant-design-vue": "^4.0.7",
+    "axios": "^1.6.2",
     "bignumber.js": "^9.1.2",
     "dayjs": "^1.11.10",
     "lodash-es": "^4.17.21",
-    "vue": "^3.3.7",
+    "nprogress": "^0.2.0",
+    "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.10",
+    "@antfu/eslint-config": "^1.2.1",
+    "@types/lodash-es": "^4.17.11",
     "@types/node": "18",
-    "type-fest": "^4.6.0",
+    "@types/nprogress": "^0.2.3",
+    "type-fest": "^4.8.1",
+    "typescript": "^5.2.2",
     "vue-component-type-helpers": "^1.8.22"
-  },
-  "peerDependencies": {
-    "@tanstack/vue-query": "4.x",
-    "@vueuse/core": "10.x",
-    "ant-design-vue": "4.0.x",
-    "axios": "1.6.x",
-    "bignumber.js": "9.x",
-    "dayjs": "1.x",
-    "lodash-es": "4.x",
-    "vue": "3.3.x",
-    "vue-router": "4.2.x"
   }
 }