wip: VbenComponent first commit

package.json

@@ -35,25 +35,26 @@
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons-vue": "^6.1.0",
     "@iconify/iconify": "^2.2.1",
-    "@logicflow/core": "^1.1.13",
-    "@logicflow/extension": "^1.1.13",
+    "@logicflow/core": "^1.1.15",
+    "@logicflow/extension": "^1.1.15",
     "@vue/runtime-core": "^3.2.33",
     "@vue/shared": "^3.2.33",
-    "@vueuse/core": "^8.3.0",
-    "@vueuse/shared": "^8.3.0",
+    "@vueuse/core": "^8.4.2",
+    "@vueuse/shared": "^8.4.2",
     "@zxcvbn-ts/core": "^2.0.1",
-    "ant-design-vue": "^3.2.0",
+    "ant-design-vue": "^3.2.3",
     "axios": "^0.26.1",
     "codemirror": "^5.65.3",
     "cropperjs": "^1.5.12",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.1",
+    "dayjs": "^1.11.2",
     "echarts": "^5.3.2",
     "intro.js": "^5.1.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
+    "naive-ui": "^2.28.4",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.2.0",
+    "path-to-regexp": "^6.2.1",
     "pinia": "2.0.12",
     "print-js": "^1.6.0",
     "qrcode": "^1.5.0",
@@ -61,21 +62,21 @@
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "tinymce": "^5.10.3",
-    "vditor": "^3.8.13",
+    "tinymce": "^5.10.4",
+    "vditor": "^3.8.14",
     "vue": "^3.2.33",
-    "vue-i18n": "^9.1.9",
-    "vue-json-pretty": "^2.0.6",
-    "vue-router": "^4.0.14",
+    "vue-i18n": "^9.1.10",
+    "vue-json-pretty": "^2.1.0",
+    "vue-router": "^4.0.15",
     "vue-types": "^4.1.1",
-    "vxe-table": "^4.2.3-beta.0",
+    "vxe-table": "^4.2.3",
     "xe-utils": "^3.5.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.30",
+    "@commitlint/cli": "^16.2.4",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@iconify/json": "^2.1.41",
     "@purge-icons/generated": "^0.8.1",
     "@types/codemirror": "^5.60.5",
     "@types/crypto-js": "^4.1.1",
@@ -84,52 +85,52 @@
     "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
     "@types/mockjs": "^1.0.6",
-    "@types/node": "^17.0.25",
+    "@types/node": "^17.0.32",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
     "@types/showdown": "^1.9.4",
-    "@types/sortablejs": "^1.10.7",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@vitejs/plugin-legacy": "^1.8.1",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@types/sortablejs": "^1.13.0",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "@vitejs/plugin-legacy": "^1.8.2",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.33",
     "@vue/test-utils": "^2.0.0-rc.21",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.7",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.0.0",
-    "eslint": "^8.13.0",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.6.0",
+    "eslint-plugin-vue": "^8.7.1",
     "esno": "^0.14.1",
     "fs-extra": "^10.1.0",
     "husky": "^7.0.4",
-    "inquirer": "^8.2.2",
+    "inquirer": "^8.2.4",
     "less": "^4.1.2",
     "lint-staged": "12.3.7",
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.13",
     "postcss-html": "^1.4.1",
     "postcss-less": "^6.0.0",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.70.2",
+    "rollup": "^2.72.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "stylelint": "^14.7.1",
+    "stylelint": "^14.8.2",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.9",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-imagemin": "^0.6.1",

src/main.ts

@@ -5,10 +5,6 @@ import 'virtual:windi-utilities.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 
-import 'xe-utils';
-import VXETable from 'vxe-table';
-import 'vxe-table/lib/style.css';
-
 import App from './App.vue';
 import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
@@ -20,9 +16,24 @@ import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
+import 'xe-utils';
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+
+import { initVbenComponent } from '/@/vbenComponents';
+import { NTag, NCard, NDivider, NSpace, NPopover, NButton } from 'naive-ui';
+
 async function bootstrap() {
   const app = createApp(App);
 
+  initVbenComponent(app, {
+    Tag: NTag,
+    Card: NCard,
+    Divider: NDivider,
+    Space: NSpace,
+    Popover: NPopover,
+    Button: NButton,
+  });
   // Configure store
   setupStore(app);
 

src/vbenComponents/button/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Button from './src/Button.vue';
+
+export const VbenButton = withInstall(Button);

src/vbenComponents/button/src/Button.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenButton">
+  import { maps } from '/@/vbenComponents';
+  const Tag = maps.get('Tag');
+</script>
+<template>
+  <Tag v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Tag>
+</template>
+
+<style scoped></style>

src/vbenComponents/card/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Card from './src/Card.vue';
+
+export const VbenCard = withInstall(Card);

src/vbenComponents/card/src/Card.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup name="VbenCard">
+  import { maps } from '/@/vbenComponents';
+  import { NSkeleton } from 'naive-ui';
+  const Card = maps.get('Card');
+  const props = defineProps({
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  });
+</script>
+<template>
+  <Card v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <NSkeleton v-if="loading" text />
+      <slot :name="item" v-bind="data || {}" v-else></slot> </template
+  ></Card>
+</template>
+
+<style scoped></style>

src/vbenComponents/divider/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Divider from './src/Divider.vue';
+
+export const VbenDivider = withInstall(Divider);

src/vbenComponents/divider/src/Divider.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenDivider">
+  import { maps } from '/@/vbenComponents';
+  const Divider = maps.get('Divider');
+</script>
+<template>
+  <Divider v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Divider>
+</template>
+
+<style scoped></style>

src/vbenComponents/index.ts

@@ -0,0 +1,30 @@
+import type { Component, App } from 'vue';
+
+//组件map
+export const maps = new Map<String, Component>();
+
+// 引入组件
+import { VbenPopover } from './popover';
+import { VbenDivider } from './divider';
+import { VbenTag } from './tag';
+import { VbenTable } from './table';
+import { VbenCard } from './card';
+import { VbenSpace } from './space';
+import { VbenButton } from './button';
+
+// 初始化组件
+// global 是否全局注册
+export function initVbenComponent(app: App, comp: Object, global: boolean = true) {
+  Object.keys(comp).forEach((k) => {
+    maps.set(k, comp[k]);
+  });
+  if (!global) return;
+  app
+    .use(VbenCard)
+    .use(VbenTable)
+    .use(VbenTag)
+    .use(VbenDivider)
+    .use(VbenSpace)
+    .use(VbenPopover)
+    .use(VbenButton);
+}

src/vbenComponents/popover/index.ts

@@ -0,0 +1,3 @@
+import Popover from './src/Popover.vue';
+import { withInstall } from '/@/utils';
+export const VbenPopover = withInstall(Popover);

src/vbenComponents/popover/src/Popover.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenPopover">
+  import { maps } from '/@/vbenComponents';
+  const Popover = maps.get('Popover');
+</script>
+<template>
+  <Popover v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Popover>
+</template>
+
+<style scoped></style>

src/vbenComponents/space/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Space from './src/Space.vue';
+
+export const VbenSpace = withInstall(Space);

src/vbenComponents/space/src/Space.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenSpace">
+  import { maps } from '/@/vbenComponents';
+  const Space = maps.get('Space');
+</script>
+<template>
+  <Space v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Space>
+</template>
+
+<style scoped></style>

src/vbenComponents/table/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import Table from './src/Table.vue';
+
+export * from './src/type';
+
+export const VbenTable = withInstall(Table);

src/vbenComponents/table/src/Table.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup name="VbenTable">
+  import type { VbenTableProps } from './type';
+  import { computed, PropType, ref } from 'vue';
+  import { isFunction, isBoolean } from '/@/utils/is';
+
+  const props = defineProps({
+    options: {
+      type: Object as PropType<VbenTableProps>,
+      default: {},
+    },
+  });
+  const title = ref('');
+  const getProps = computed(() => {
+    const { options } = props;
+    title.value = options?.title || '';
+    delete options?.title;
+    getProxyConfig(options);
+    getPageConfig(options);
+    console.log(options);
+    return {
+      ...options,
+    };
+  });
+
+  const getProxyConfig = (options: VbenTableProps) => {
+    const { api, proxyConfig, data, afterFetch } = options;
+    if (proxyConfig || data) return;
+    if (api && isFunction(api)) {
+      options.proxyConfig = {
+        props: {
+          result: 'items', // 配置响应结果列表字段
+          total: 'total', // 配置响应结果总页数字段
+        },
+        ajax: {
+          query: async ({ page, sorts, filters, form }) => {
+            const { currentPage, pageSize } = page;
+            let res = await api({ ...options.params, page: currentPage, pageSize });
+            if (afterFetch && isFunction(afterFetch)) {
+              res = afterFetch(res);
+            }
+            return res || [];
+          },
+        },
+      };
+    }
+  };
+  const getPageConfig = (options: VbenTableProps) => {
+    const { pagination, pagerConfig } = options;
+    if (pagerConfig) return;
+
+    if (pagination) {
+      if (isBoolean(pagination)) {
+        options.pagerConfig = {
+          pageSize: 50,
+          pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
+        };
+        return;
+      }
+      options.pagerConfig = pagination;
+    }
+  };
+</script>
+<template>
+  <div class="m-2 p-2 bg-white">
+    <div v-if="title" class="flex m-2">
+      <div class="ml-2 text-xl">{{ title }}</div>
+    </div>
+    <vxeGrid v-bind="getProps">
+      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </vxeGrid>
+  </div>
+</template>

src/vbenComponents/table/src/type.ts

@@ -0,0 +1,11 @@
+import type { VxeGridProps } from 'vxe-table';
+import { VxeGridPropTypes } from 'vxe-table';
+
+export type VbenTableProps<D = any> = VxeGridProps<D> & {
+  api?: Function;
+  Params?: Object;
+
+  title?: string;
+  pagination?: boolean | VxeGridPropTypes.PagerConfig;
+  afterFetch?: Fn;
+};

src/vbenComponents/tag/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Tag from './src/Tag.vue';
+
+export const VbenTag = withInstall(Tag);

src/vbenComponents/tag/src/Tag.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup name="VbenTag">
+  import { maps } from '/@/vbenComponents';
+  const Tag = maps.get('Tag');
+</script>
+<template>
+  <Tag v-bind="$attrs">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"></slot> </template
+  ></Tag>
+</template>
+
+<style scoped></style>