@ctzy-web-client/web-base-client-vue 1.0.1

package/src/application/micro-application.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-once ref="el" :class="ns.b('mcrio')"></div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { useGlobalConfig, useNamespace } from '../hooks';
+
+defineOptions({
+  name: 'BwaMcrioApplication',
+});
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  entry: {
+    type: String,
+    required: true,
+  },
+  extendOptions: {
+    type: Object,
+  },
+});
+
+const ns = useNamespace('application');
+const application = useGlobalConfig(applicationKey);
+
+/** @type {import("vue").Ref<HTMLElement>} */
+const el = ref(null);
+
+const microApplication = computed(
+  () =>
+    application.value.getMicroApplication(props.name) ||
+    application.value.createMicroApplication({
+      name: props.name,
+      entry: props.entry,
+      extendOptions: props.extendOptions,
+    })
+);
+
+const mountApplicationPromise = microApplication.value.mountApplication();
+
+onMounted(() => {
+  el.value.appendChild(microApplication.value.container);
+});
+
+onBeforeUnmount(() => {
+  el.value.removeChild(microApplication.value.container);
+  microApplication.value.unmountApplication();
+});
+
+await mountApplicationPromise;
+</script>

package/src/hooks/index.js

@@ -0,0 +1,9 @@
+export * from './use-global-config';
+export * from './use-namespace';
+export * from './use-data-form';
+export * from './use-data-table';
+export * from './use-service';
+export * from './use-value';
+export * from './use-keydown';
+export * from './use-event-dispatcher';
+export * from './use-data-table-page';

package/src/hooks/use-data-form/index.js

@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+import { DataForm } from '@ctzy-web-client/data-model';
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { useGlobalConfig } from '../use-global-config';
+
+/**
+ * 创建数据表单
+ * @template T
+ * @param {T} dataForm datamodel类定义或者 DataForm 实例
+ * @param {object} options
+ * @returns {import('vue').InjectionKey<DataForm>} data form
+ */
+export const useDataForm = (model, options = {}) => {
+  const application = useGlobalConfig(applicationKey);
+  const dataForm = ref(
+    application.value.createInstance(DataForm, {
+      args: [{ model, ...options }],
+    })
+  );
+
+  dataForm.value.init();
+
+  return dataForm;
+};

package/src/hooks/use-data-table/index.js

@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+import { DataTable } from '@ctzy-web-client/data-model';
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { useGlobalConfig } from '../use-global-config';
+
+/**
+ * 创建数据表格
+ * @template T
+ * @param {T} model datamodel类定义或者DataTable实例
+ * @param {object} options
+ * @returns {import("vue").Ref<DataTable>} data table
+ */
+export const useDataTable = (model, options = {}) => {
+  const application = useGlobalConfig(applicationKey);
+  const dataTable = ref(
+    application.value.createInstance(DataTable, { args: [{ model, ...options }] })
+  );
+
+  dataTable.value.init();
+
+  return dataTable;
+};

package/src/hooks/use-data-table-page/index.js

@@ -0,0 +1,48 @@
+import { unref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useEventDispatcher } from '../use-event-dispatcher';
+
+export const useDataTablePage = (dataTable, options = {}) => {
+  options = { ...options };
+  options.currentPage = options.currentPage || 'currentPage';
+  options.pageSize = options.pageSize || 'pageSize';
+
+  const router = useRouter();
+  const route = useRoute();
+
+  let {
+    currentPage = unref(dataTable).pageNum,
+    pageSize = unref(dataTable).pageSize,
+  } = unref(route).query;
+
+  currentPage = parseInt(currentPage);
+  pageSize = parseInt(pageSize);
+  if (isNaN(currentPage)) {
+    currentPage = unref(dataTable).pageNum;
+  }
+  if (isNaN(pageSize)) {
+    pageSize = unref(dataTable).pageSize;
+  }
+
+  unref(dataTable).pageNum = currentPage;
+  unref(dataTable).pageSize = pageSize;
+
+  useEventDispatcher(dataTable, 'current-page-change', (currentPage) => {
+    const query = unref(router.currentRoute).query;
+    router.replace({
+      query: {
+        ...query,
+        currentPage,
+      },
+    });
+  });
+  useEventDispatcher(dataTable, 'page-size-change', (pageSize) => {
+    const query = unref(router.currentRoute).query;
+    router.replace({
+      query: {
+        ...query,
+        pageSize,
+      },
+    });
+  });
+};

package/src/hooks/use-event-dispatcher/index.js

@@ -0,0 +1,15 @@
+import { onMounted, onUnmounted, unref } from 'vue';
+
+export const useEventDispatcher = (eventDispatcher, eventName, handler) => {
+  onMounted(() => {
+    unref(eventDispatcher).on(eventName, handler);
+  });
+
+  const off = () => {
+    unref(eventDispatcher).off(eventName, handler);
+  };
+
+  onUnmounted(off);
+
+  return off;
+};

package/src/hooks/use-global-config/index.js

@@ -0,0 +1,49 @@
+import { computed, getCurrentInstance, inject, ref, unref, provide } from 'vue';
+import { configProviderContextKey } from '@ctzy-web-client/tokens';
+
+const globalConfig = ref();
+
+export function useGlobalConfig(key, defaultValue) {
+  const config = getCurrentInstance()
+    ? inject(configProviderContextKey, globalConfig)
+    : globalConfig;
+
+  if (key) {
+    return computed(() => config.value?.[key] ?? defaultValue);
+  } else {
+    return config;
+  }
+}
+
+export const provideGlobalConfig = (config, app, global = false) => {
+  const inSetup = !!getCurrentInstance();
+  const oldConfig = inSetup ? useGlobalConfig() : undefined;
+  const provideFn = app?.provide ?? (inSetup ? provide : undefined);
+  if (!provideFn) {
+    console.warn(
+      'provideGlobalConfig',
+      'provideGlobalConfig() can only be used inside setup().'
+    );
+    return;
+  }
+
+  const context = computed(() => {
+    const cfg = unref(config);
+    if (!oldConfig?.value) return cfg;
+    return mergeConfig(oldConfig.value, cfg);
+  });
+  provideFn(configProviderContextKey, context);
+  if (global || !globalConfig.value) {
+    globalConfig.value = context.value;
+  }
+  return context;
+};
+
+const mergeConfig = (a, b) => {
+  const keys = [...new Set([...Reflect.ownKeys(a), ...Reflect.ownKeys(b)])];
+  const obj = {};
+  for (const key of keys) {
+    obj[key] = b[key] ?? a[key];
+  }
+  return obj;
+};

package/src/hooks/use-keydown/index.js

@@ -0,0 +1,2 @@
+export * from './use-keydown';
+export * from './use-save-keydown';

package/src/hooks/use-keydown/use-keydown.js

@@ -0,0 +1,35 @@
+import { onBeforeUnmount, onMounted } from 'vue';
+
+let registeredHandlers = [];
+
+/**
+ *
+ * @param {KeyboardEvent} event
+ */
+const cacchedHandler = (event) => {
+  for (let registeredHandler of registeredHandlers) {
+    registeredHandler(event);
+  }
+};
+
+/**
+ * @param {(event: KeyboardEvent) => void} handler
+ */
+export const useKeydown = (handler) => {
+  onMounted(() => {
+    if (!registeredHandlers.length) {
+      document.addEventListener('keydown', cacchedHandler);
+    }
+    registeredHandlers.push(handler);
+  });
+
+  onBeforeUnmount(() => {
+    registeredHandlers = registeredHandlers.filter(
+      (registeredHandler) => registeredHandler !== handler
+    );
+
+    if (!registeredHandlers.length) {
+      document.removeEventListener('keydown', cacchedHandler);
+    }
+  });
+};

package/src/hooks/use-keydown/use-save-keydown.js

@@ -0,0 +1,13 @@
+import { useKeydown } from './use-keydown';
+
+export const useSaveKeydown = (handler) => {
+  useKeydown((event) => {
+    if (
+      event.key.toLocaleLowerCase() === 's' &&
+      (event.ctrlKey || event.metaKey)
+    ) {
+      event.preventDefault();
+      handler(event);
+    }
+  });
+};

package/src/hooks/use-namespace/index.js

@@ -0,0 +1,90 @@
+import { useGlobalConfig } from '../use-global-config';
+
+export const defaultNamespace = 'web';
+const statePrefix = 'is-';
+
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+
+export const useNamespace = (block) => {
+  const namespace = useGlobalConfig('namespace', defaultNamespace);
+  const b = (blockSuffix = '') =>
+    _bem(namespace.value, block, blockSuffix, '', '');
+  const e = (element) =>
+    element ? _bem(namespace.value, block, '', element, '') : '';
+  const m = (modifier) =>
+    modifier ? _bem(namespace.value, block, '', '', modifier) : '';
+  const be = (blockSuffix, element) =>
+    blockSuffix && element
+      ? _bem(namespace.value, block, blockSuffix, element, '')
+      : '';
+  const em = (element, modifier) =>
+    element && modifier
+      ? _bem(namespace.value, block, '', element, modifier)
+      : '';
+  const bm = (blockSuffix, modifier) =>
+    blockSuffix && modifier
+      ? _bem(namespace.value, block, blockSuffix, '', modifier)
+      : '';
+  const bem = (blockSuffix, element, modifier) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace.value, block, blockSuffix, element, modifier)
+      : '';
+  const is = (name, ...args) => {
+    const state = args.length >= 1 ? args[0] : true;
+    return name && state ? `${statePrefix}${name}` : '';
+  };
+
+  // for css var
+  // --el-xxx: value;
+  const cssVar = (object) => {
+    const styles = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+  // with block
+  const cssVarBlock = (object) => {
+    const styles = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+
+  const cssVarName = (name) => `--${namespace.value}-${name}`;
+  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+
+  return {
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
+    // css
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName,
+  };
+};

package/src/hooks/use-service/index.js

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { useGlobalConfig } from '../use-global-config';
+
+/**
+ * 根据recid请求一条实例填充到模型
+ * @template T
+ * @param {T} key 模型定义
+ * @returns {InstanceType<T>}
+ */
+export const useService = function (key) {
+  return computed(() =>
+    useGlobalConfig(applicationKey).value.getIocContainer().getService(key)
+  );
+};

package/src/hooks/use-value/index.js

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { useGlobalConfig } from '../use-global-config';
+
+/**
+ * 根据recid请求一条实例填充到模型
+ * @template T
+ * @param {T} key 模型定义
+ * @returns {InstanceType<T>}
+ */
+export const useValue = function (key) {
+  return computed(() =>
+    useGlobalConfig(applicationKey).value.getIocContainer().getValue(key)
+  );
+};

package/src/index.js

@@ -0,0 +1,8 @@
+export * from './interceptors';
+export * from './application';
+export * from './hooks';
+
+export * from '@ctzy-web-client/data-model';
+export * from '@ctzy-web-client/ioc';
+export * from '@ctzy-web-client/support';
+export * from '@ctzy-web-client/tokens';

package/src/interceptors/RequestInterceptors.js

@@ -0,0 +1,46 @@
+export class RequestInterceptors {
+  /**
+   * 请求发起的处理程序
+   * @param {Object} config 请求配置
+   * @returns
+   */
+  request(config) {
+    return config;
+  }
+
+  /**
+   * 处理请求发起的错误
+   * @param {Error} e 错误
+   */
+  requestError(e) {
+    return Promise.reject(new Error('请求错误'));
+  }
+
+  /**
+   * 响应处理程序
+   * @param {Object} response 响应对象
+   * @param {Object} response.config 请求配置
+   * @param {Object} response.data 请求结果
+   * @param {Number} response.status 请求状态
+   * @param {String} response.statusText 请求状态描述
+   * @param {Object} response.request 请求对象
+   * @returns
+   */
+  response(response) {
+    let { data, status, statusText } = response;
+
+    if (status === 200) {
+      return data;
+    } else {
+      throw new Error(`请求异常:[${status}] ${statusText}`);
+    }
+  }
+
+  /**
+   * 处理系统级别响应错误 404  等等
+   * @param {Error} e 错误
+   */
+  responseError(e) {
+    return Promise.reject(new Error('请求错误'));
+  }
+}

package/src/interceptors/RouterInterceptors.js

@@ -0,0 +1,47 @@
+import { inject } from '@ctzy-web-client/ioc-annotations';
+
+export class RouterInterceptors {
+  @inject('Application')
+  application = null;
+
+  async needWaitRouteLoad(to) {
+    if (!to.matched.length && this.application._resolveRoutesPromise) {
+      await this.application._resolveRoutesPromise;
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 设置一个导航钩子，在每次导航后执行。
+   * @param {*} to 我们要导航到的路由地址
+   * @param {*} from 我们从哪里来的路由地址
+   * @param {*} failure next (可选) - 回调以验证导航
+   */
+  afterEach(to, from, failure) {}
+
+  /**
+   * 设置一个导航守卫，在任何导航前执行。
+   * @param {*} to 我们要导航到的路由地址
+   * @param {*} from 我们从哪里来的路由地址
+   * @param {*} next next (可选) - 回调以验证导航
+   */
+  async beforeEach(to, from, next) {
+    if (await this.needWaitRouteLoad(to)) {
+      return next(to);
+    }
+
+    return next();
+  }
+
+  /**
+   * 设置一个导航守卫，在导航即将解析之前执行。在这个状态下，所有的组件都已经被获取，并且其他导航守卫也已经成功。
+   * @param {*} to 我们要导航到的路由地址
+   * @param {*} from 我们从哪里来的路由地址
+   * @param {*} next next (可选) - 回调以验证导航
+   */
+  beforeResolve(to, from, next) {
+    return next();
+  }
+}

package/src/interceptors/index.js

@@ -0,0 +1,2 @@
+export * from './RequestInterceptors';
+export * from './RouterInterceptors';

package/src/ioc/ReactiveInstantiationService.js

@@ -0,0 +1,29 @@
+import { reactive, ref } from 'vue';
+import { InstantiationService } from '@ctzy-web-client/ioc';
+
+/**
+ * 服务工厂
+ */
+export class ReactiveInstantiationService extends InstantiationService {
+  /**
+   * 创建实例
+   * @template T
+   * @param {T} Clazz
+   * @param {Object} option 服务注册配置项
+   * @param {Boolean} option.reactive 是否创建响应对象
+   * @param {Boolean} option.overwrite 是否允许覆盖 默认不允许
+   * @param {String} option.type 注入的类型 function|class 主要是js编译成es5的代码时无法针对函数和类做区分
+   * @returns {InstanceType<T>}
+   */
+  createInstance(Clazz, option) {
+    let instance = super.createInstance(Clazz, option);
+    
+    //创建实例
+    if (option?.reactive) {
+      instance = reactive(instance);
+      // return typeof instance == 'object' ? reactive(instance) : ref(instance);
+    }
+
+    return instance;
+  }
+}

package/src/ioc/index.js

@@ -0,0 +1 @@
+export * from './ReactiveInstantiationService';

package/src/utils/index.js

@@ -0,0 +1 @@
+export * from './pageDataParser';

package/src/utils/pageDataParser.js

@@ -0,0 +1,27 @@
+/**
+ * 解析页面数据
+ * @param {Array<Object>|Object} pages 注册的页面
+ */
+export const pageDataParser = async function (pages) {
+  //找页面
+  if (typeof pages == 'object') {
+    const pageModules = await Promise.all(
+      Object.keys(pages).map((path) => pages[path]())
+    );
+
+    return pageModules.map((module) => {
+      module.default.inheritAttrs = false;
+      return {
+        parent: module.parent,
+        meta: module.meta,
+        route: module.route,
+        name: module.name || module.default.name,
+        component: module.default,
+        redirect: module.redirect,
+        props: module.props,
+      };
+    });
+  } else {
+    pageDeifnes.push(...pages);
+  }
+};