@ibiz-template/vue3-util 0.0.3-beta.1 → 0.0.3-beta.3

package/out/util/route/route-listener.js

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { isFunction } from 'lodash-es';
+import { watch } from 'vue';
+/**
+ * 监听路由变更，提供下一次变更执行的一次性回调。
+ *
+ * @export
+ * @class RouteListener
+ */
+export class RouteListener {
+    constructor(route, wait) {
+        /**
+         * 回调集合
+         *
+         * @memberof RouteListener
+         */
+        this.callbacks = [];
+        /**
+         * 计时器集合
+         *
+         * @private
+         * @type {any[]}
+         * @memberof RouteListener
+         */
+        this.timers = [];
+        /**
+         * 等待路由响应时间
+         *
+         * @private
+         * @type {number}
+         * @memberof RouteListener
+         */
+        this.wait = 500;
+        if (wait) {
+            this.wait = wait;
+        }
+        watch(() => route.path, (newVal, oldVal) => {
+            if (newVal !== oldVal) {
+                // 执行所有回调
+                if (this.callbacks.length) {
+                    for (let index = 0; index < this.callbacks.length; index++) {
+                        const fn = this.callbacks[index];
+                        fn();
+                    }
+                }
+                // 清空所有回调
+                this.callbacks = [];
+                // 清空所有计时器
+                if (this.timers.length) {
+                    for (let index = 0; index < this.timers.length; index++) {
+                        const timer = this.timers[index];
+                        clearTimeout(timer);
+                    }
+                }
+                this.timers = [];
+            }
+        });
+    }
+    /**
+     * 下一次路由变更后执行回调，只执行一次
+     *
+     * @param {ChangeCallback} callback
+     * @memberof RouteListener
+     */
+    nextChange(callback) {
+        if (isFunction(callback)) {
+            // 设定计时器,经过一段时间等不到时，执行回调，并删除回调集合里的回调
+            this.timers.push(setTimeout(() => {
+                callback();
+                const index = this.callbacks.findIndex(item => item === callback);
+                this.callbacks.splice(index, 1);
+            }, this.wait));
+            // 存入回调集合等待被调用
+            this.callbacks.push(callback);
+        }
+    }
+}

package/out/util/route/route.d.ts

@@ -62,7 +62,7 @@ export declare function parseRouteViewData(appModel: IPSApplication, route: Rout
  * @param {string} pathStr 以/开头的路径，即router的path
  * @returns {*}  {IRoutePath}
  */
-export declare function string2routePath(pathStr: string): IRoutePath;
+export declare function route2routePath(route: Route): IRoutePath;
 /**
  * 路由路径对象转路径字符串
  *

package/out/util/route/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../src/util/route/route.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAgB,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EAAE,6BAA6B,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE7E;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,KAAK,EACZ,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,EACjC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAC3B,MAAM,CA8CR;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,OAK5C;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,cAAc,GAAG,YAAY,EACvC,YAAY,EAAE,MAAM,0BAKrB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iCAuBtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,GACZ,cAAc,CAyDhB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAwC5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAwB9D"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../src/util/route/route.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAgB,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EAAE,6BAA6B,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE7E;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,KAAK,EACZ,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,EACjC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAC3B,MAAM,CA6CR;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,OAK5C;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,cAAc,GAAG,YAAY,EACvC,YAAY,EAAE,MAAM,0BAKrB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iCAuBtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,GACZ,cAAc,CAwDhB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,CAuCxD;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAmC9D"}

package/out/util/route/route.js

@@ -1,6 +1,7 @@
 import { notNilEmpty } from 'qx-util';
 import { RuntimeError } from '@ibiz-template/core';
 import qs from 'qs';
+import { calcRouteContext } from '@ibiz-template/runtime';
 /**
  * 生成route路径
  *
@@ -15,7 +16,7 @@ import qs from 'qs';
  */
 export function generateRoutePath(appView, route, context, params) {
     var _a;
-    const routePath = string2routePath(route.fullPath);
+    const routePath = route2routePath(route);
     // 如果上下文存在toRouteLevel时，使用上下文的层级，否则是第二级路由
     let level = 2;
     if (context === null || context === void 0 ? void 0 : context.toRouteLevel) {
@@ -23,9 +24,13 @@ export function generateRoutePath(appView, route, context, params) {
         // 使用完后删除，避免添加到首页上下文里
         delete context.toRouteLevel;
     }
-    // 删除自身层级和之后的路由，保留之前层级的路由
+    // 删除目标层级和之后的路由，保留之前层级的路由
     routePath.pathNodes.splice(level - 1, routePath.pathNodes.length - level + 1);
-    // 一级首页路由
+    // 修改当前层级路由的附加上下文参数
+    if (context === null || context === void 0 ? void 0 : context.currentRouteContext) {
+        routePath.pathNodes[level - 2].context = context.currentRouteContext;
+    }
+    // 重定向视图跳转的一级首页路由
     if (routePath.pathNodes[0].viewName === 'appredirectview') {
         if (params === null || params === void 0 ? void 0 : params.srfindexname) {
             routePath.pathNodes[0].viewName = params.srfindexname;
@@ -35,22 +40,18 @@ export function generateRoutePath(appView, route, context, params) {
             routePath.pathNodes[0].viewName = 'index';
         }
     }
-    // 计算自身视图path路径
+    // 计算目标视图path路径
     routePath.pathNodes.push({ viewName: appView.codeName.toLowerCase() });
-    const deName = (_a = appView.getPSAppDataEntity()) === null || _a === void 0 ? void 0 : _a.codeName.toLowerCase();
-    // 计算自身的context参数
-    if (context) {
-        const routeContext = context.getOwnContext();
-        // 如果有路由上下文参数的话，添加到path上
-        if (Object.values(routeContext).length > 0) {
-            // 有视图实体主键上下文时，
-            if (deName && routeContext[deName]) {
-                routePath.pathNodes[level - 1].context = routeContext[deName];
-                delete routeContext[deName];
-            }
-            // 除主键外的参数合并到首页的参数里去
-            Object.assign(routePath.pathNodes[0].context, routeContext);
-        }
+    const codeName = (_a = appView.getPSAppDataEntity()) === null || _a === void 0 ? void 0 : _a.codeName;
+    // 计算最新的上下文并更新到index后面
+    if (context && codeName) {
+        const app = ibiz.hub.getApp(appView.getPSModelService().app);
+        const paths = app.resourcePathUtil.calcPaths(codeName);
+        const routeContext = calcRouteContext(context, paths);
+        routePath.pathNodes[0].context = routeContext;
+    }
+    else {
+        routePath.pathNodes[0].context = {};
     }
     // 存在视图参数时补充视图参数
     routePath.params = params;
@@ -129,9 +130,9 @@ export function findView(appModel, viewCodeName) {
  * @returns {*}  {IRouteViewData}
  */
 export function parseRouteViewData(appModel, route, level) {
-    var _a, _b;
+    var _a;
     // 解析路由的视图参数
-    const routePath = string2routePath(route.fullPath);
+    const routePath = route2routePath(route);
     // 获取对应层级的视图名称参数
     const viewCodeName = routePath.pathNodes[level - 1].viewName;
     if (!viewCodeName) {
@@ -147,10 +148,16 @@ export function parseRouteViewData(appModel, route, level) {
     const { viewType } = viewModel.refM;
     // 解析上下文参数,整合当前层级之前所有的上下文参数
     const context = {};
-    // 合并应用上下文
+    // 合并appData里的应用上下文
     if ((_a = ibiz.appData) === null || _a === void 0 ? void 0 : _a.context) {
         Object.assign(context, ibiz.appData.context);
     }
+    // 合并路由上下文
+    // 合并路由应用上下文
+    if (routePath.appContext) {
+        Object.assign(context, routePath.appContext);
+    }
+    // 合并视图上下文
     for (let index = 0; index < level; index++) {
         const pathNode = routePath.pathNodes[index];
         if (notNilEmpty(pathNode.context)) {
@@ -158,14 +165,6 @@ export function parseRouteViewData(appModel, route, level) {
                 // 首页的context是对象直接合并
                 Object.assign(context, pathNode.context);
             }
-            else {
-                // 其他层级，如果存在context则是主键字符串
-                const view = findView(appModel, pathNode.viewName);
-                const deName = (_b = view.refM.resource) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                if (deName) {
-                    context[deName] = pathNode.context;
-                }
-            }
         }
     }
     // 最后一级路由对应的视图才会解析视图参数
@@ -189,47 +188,38 @@ export function parseRouteViewData(appModel, route, level) {
  * @param {string} pathStr 以/开头的路径，即router的path
  * @returns {*}  {IRoutePath}
  */
-export function string2routePath(pathStr) {
-    let queryIndex = pathStr.lastIndexOf('?');
-    queryIndex = queryIndex === -1 ? pathStr.length : queryIndex;
-    let path = pathStr.substring(0, queryIndex);
-    if (path.indexOf('/') === 0)
-        path = path.substring(1);
-    const queryPath = pathStr.substring(queryIndex + 1);
+export function route2routePath(route) {
+    // 一共匹配了几级路由
+    const level = route.matched.length;
     // 解析路径节点
     const pathNodes = [];
-    const paths = path.split('/');
-    let viewNum = 0;
-    paths.forEach((str, index) => {
-        // 第一级是首页
-        if (index === 0) {
-            pathNodes.push({ viewName: str.toLowerCase(), context: {} });
+    for (let index = 1; index <= level; index++) {
+        const viewName = route.params[`view${index}`];
+        let context = route.params[`params${index}`];
+        // context为占位符时置空
+        if (!context || context === ibiz.env.routePlaceholder) {
+            context = undefined;
         }
         else if (index === 1) {
-            // 第二级是上下文或者二级视图
-            if (/[^/]+=[^/]+/.test(str)) {
-                pathNodes[pathNodes.length - 1].context = qs.parse(str, {
-                    delimiter: ';',
-                });
-            }
-            else {
-                pathNodes.push({ viewName: str.toLowerCase() });
-                viewNum = 1;
-            }
-        }
-        else if (index % 2 === viewNum) {
-            pathNodes.push({ viewName: str.toLowerCase() });
-        }
-        else {
-            pathNodes[pathNodes.length - 1].context = str === '_' ? undefined : str;
+            // 首页上下文要解析
+            context = qs.parse(context, { delimiter: ';' });
         }
-    });
+        pathNodes.push({ viewName, context });
+    }
+    // 解析应用上下文
+    let appContext;
+    if (route.params.appContext &&
+        route.params.appContext !== ibiz.env.routePlaceholder) {
+        appContext = qs.parse(route.params.appContext, {
+            delimiter: ';',
+        });
+    }
     // 解析视图参数
     let params;
-    if (queryPath) {
-        params = qs.parse(queryPath);
+    if (route.query) {
+        params = Object.assign({}, route.query);
     }
-    return { pathNodes, params };
+    return { appContext, pathNodes, params };
 }
 /**
  * 路由路径对象转路径字符串
@@ -242,6 +232,14 @@ export function string2routePath(pathStr) {
  */
 export function routePath2string(routePath) {
     let pathStr = '';
+    // 应用上下文
+    if (routePath.appContext) {
+        pathStr += `/${qs.stringify(routePath.appContext, { delimiter: ';' })}`;
+    }
+    else {
+        pathStr += `/${ibiz.env.routePlaceholder}`;
+    }
+    // 每一层级的视图
     routePath.pathNodes.forEach((pathNode, index) => {
         pathStr += `/${pathNode.viewName}`;
         // 首页路由
@@ -251,12 +249,16 @@ export function routePath2string(routePath) {
                 // 对象转成a=11;b=222的格式，字符串直接附加在后面
                 pathStr += `/${qs.stringify(pathNode.context, { delimiter: ';' })}`;
             }
+            else {
+                pathStr += `/${ibiz.env.routePlaceholder}`;
+            }
         }
         else {
             // 非首页路由
-            pathStr += `/${pathNode.context || '_'}`;
+            pathStr += `/${pathNode.context || ibiz.env.routePlaceholder}`;
         }
     });
+    // 附加视图参数
     if (notNilEmpty(routePath.params)) {
         pathStr += qs.stringify(routePath.params, { addQueryPrefix: true });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.0.3-beta.1",
+  "version": "0.0.3-beta.3",
   "description": "vue3 工具包",
   "type": "module",
   "main": "out/index.js",
@@ -29,9 +29,9 @@
   "author": "chitanda",
   "license": "MIT",
   "devDependencies": {
-    "@ibiz-template/core": "^0.0.3-beta.1",
-    "@ibiz-template/model": "^0.0.3-beta.1",
-    "@ibiz-template/runtime": "^0.0.3-beta.1",
+    "@ibiz-template/core": "^0.0.3-beta.3",
+    "@ibiz-template/model": "^0.0.3-beta.3",
+    "@ibiz-template/runtime": "^0.0.3-beta.3",
     "@types/qs": "^6.9.7",
     "qs": "^6.11.0",
     "qx-util": "^0.4.4",
@@ -49,5 +49,5 @@
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
-  "gitHead": "c25c8bc45b7ff892e64e59359e7864d1ec800e3a"
+  "gitHead": "5db494cb73fa734ceb7d8988d63d886ddec2afee"
 }

package/src/interface/util/route/route.ts

@@ -81,6 +81,14 @@ export interface IRoutePathNode {
  * @interface IRoutePath
  */
 export interface IRoutePath {
+  /**
+   * 应用上下文
+   *
+   * @type {IContext}
+   * @memberof IRoutePath
+   */
+  appContext?: IContext;
+
   /**
    *
    * @author lxm

package/src/props/editor/index.ts

@@ -7,3 +7,8 @@ export * from './dropdown-list';
 export * from './radio-button-list';
 export * from './upload';
 export * from './data-picker';
+export * from './raw';
+export * from './stepper';
+export * from './rate';
+export * from './slider';
+export * from './switch';

package/src/props/editor/rate.ts

@@ -0,0 +1,24 @@
+import { RateEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取评分器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getRateProps<C = RateEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格评分器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridRateProps<C = RateEditorController>() {
+  return { ...getRateProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/raw.ts

@@ -0,0 +1,24 @@
+import { RawEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取直接内容的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getRawProps<C = RawEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格步进器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridRawProps<C = RawEditorController>() {
+  return { ...getRawProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/slider.ts

@@ -0,0 +1,24 @@
+import { SliderEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取滑动输入条的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getSliderProps<C = SliderEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格滑动输入条的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridSliderProps<C = SliderEditorController>() {
+  return { ...getSliderProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/stepper.ts

@@ -0,0 +1,24 @@
+import { StepperEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取步进器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getStepperProps<C = StepperEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格步进器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridStepperProps<C = StepperEditorController>() {
+  return { ...getStepperProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/props/editor/switch.ts

@@ -0,0 +1,24 @@
+import { SwitchEditorController } from '@ibiz-template/runtime';
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取开关的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getSwitchProps<C = SwitchEditorController>() {
+  return { ...getEditorProps<C>(), value: [String, Number] };
+}
+
+/**
+ * 获取表格步进器的props
+ *
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridSwitchProps<C = SwitchEditorController>() {
+  return { ...getSwitchProps<C>(), ...getGridEditorCommonProps() };
+}

package/src/use/route/route.ts

@@ -1,5 +1,7 @@
-import { useRoute } from 'vue-router';
+import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
 import qs from 'qs';
+import { ref, Ref, watch } from 'vue';
+import { RouteListener } from '../../util';
 
 /**
  * 获取路由上下文参数
@@ -41,3 +43,33 @@ export function useRouterQuery(): IParams {
   const { query } = route;
   return query;
 }
+
+/**
+ * 监听普通的key变更，在路由下次更新后再改变赋给新的RouteKey
+ * 第一次默认值会直接赋给routeKey
+ *
+ * @export
+ * @param {Ref<string>} originKey 监听的原始Ref
+ * @param {RouteLocationNormalizedLoaded} route 路由
+ * @param {Ref<string>} [routeKey] 预先提供的转换后的Ref
+ * @returns {*}  {Ref<string>}
+ */
+export function useRouteKey(
+  originKey: Ref<string>,
+  route: RouteLocationNormalizedLoaded,
+  routeKey?: Ref<string>,
+): Ref<string> {
+  if (!routeKey) {
+    routeKey = ref('');
+  }
+  routeKey.value = originKey.value;
+  const routeListener = new RouteListener(route);
+  watch(originKey, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      routeListener.nextChange(() => {
+        routeKey!.value = newVal;
+      });
+    }
+  });
+  return routeKey;
+}

package/src/use/view/index.ts

@@ -4,6 +4,8 @@ export { useEditViewController } from './use-edit-view/use-edit-view';
 export { useEditView3Controller } from './use-edit-view3/use-edit-view3';
 export { useOptViewController } from './use-opt-view/use-opt-view';
 export { useGridViewController } from './use-grid-view/use-grid-view';
+export { useDataViewViewController } from './use-dataview-view/use-dataview-view';
+export { useListViewController } from './use-list-view/use-list-view';
 export { usePickupGridViewController } from './use-pickup-grid-view/use-pickup-grid-view';
 export { usePickupViewController } from './use-pickup-view/use-pickup-view';
 export { useMPickupViewController } from './use-mpickup-view/use-mpickup-view';
@@ -14,3 +16,8 @@ export { useWFStepTraceViewController } from './use-wf-step-trace-view/use-wf-st
 export { useAppPortalViewController } from './use-app-portal-view/use-app-portal-view';
 export { useTreeExpViewController } from './use-tree-exp-view/use-tree-exp-view';
 export { useTabExpViewController } from './use-tab-exp-view/use-tab-exp-view';
+export { useGridExpViewController } from './use-grid-exp-view/use-grid-exp-view';
+export { useDashboardViewController } from './use-dashboard-view/use-dashboard-view';
+export { useWizardViewController } from './use-wizard-view/use-wizard-view';
+export { useListExpViewController } from './use-list-exp-view/use-list-exp-view';
+export { useKanbanViewController } from './use-kanban-view/use-kanban-view';

package/src/use/view/use-dashboard-view/use-dashboard-view.ts

@@ -0,0 +1,21 @@
+import { DashboardViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 实体数据看板视图控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:10
+ * @export
+ * @param {string} path
+ * @return {*}  {DashboardViewController}
+ */
+export function useDashboardViewController(
+  path: string,
+): DashboardViewController {
+  return useViewController<DashboardViewController>(
+    (context: IContext, params: IParams) => {
+      return new DashboardViewController(path, context, params);
+    },
+  );
+}

package/src/use/view/use-dataview-view/use-dataview-view.ts

@@ -0,0 +1,21 @@
+import { DataViewViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 数据视图控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:01
+ * @export
+ * @param {string} path
+ * @return {*}  {DataViewViewController}
+ */
+export function useDataViewViewController(
+  path: string,
+): DataViewViewController {
+  return useViewController<DataViewViewController>(
+    (context: IContext, params: IParams) => {
+      return new DataViewViewController(path, context, params);
+    },
+  );
+}

package/src/use/view/use-grid-exp-view/use-grid-exp-view.ts

@@ -0,0 +1,17 @@
+import { GridExpViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 表格导航视图控制器
+ *
+ * @export
+ * @param {string} path
+ * @return {*}  {GridExpViewController}
+ */
+export function useGridExpViewController(path: string): GridExpViewController {
+  return useViewController<GridExpViewController>(
+    (context: IContext, params: IParams) => {
+      return new GridExpViewController(path, context, params);
+    },
+  );
+}

package/src/use/view/use-kanban-view/use-kanban-view.ts

@@ -0,0 +1,19 @@
+import { KanbanViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 看板视图控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:01
+ * @export
+ * @param {string} path
+ * @return {*}  {KanbanViewController}
+ */
+export function useKanbanViewController(path: string): KanbanViewController {
+  return useViewController<KanbanViewController>(
+    (context: IContext, params: IParams) => {
+      return new KanbanViewController(path, context, params);
+    },
+  );
+}

package/src/use/view/use-list-exp-view/use-list-exp-view.ts

@@ -0,0 +1,17 @@
+import { ListExpViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 列表导航视图控制器
+ *
+ * @export
+ * @param {string} path
+ * @return {*}  {ListExpViewController}
+ */
+export function useListExpViewController(path: string): ListExpViewController {
+  return useViewController<ListExpViewController>(
+    (context: IContext, params: IParams) => {
+      return new ListExpViewController(path, context, params);
+    },
+  );
+}

package/src/use/view/use-list-view/use-list-view.ts

@@ -0,0 +1,17 @@
+import { ListViewController } from '@ibiz-template/runtime';
+import { useViewController } from '../use-view-controller/use-view-controller';
+
+/**
+ * 列表视图控制器
+ *
+ * @export
+ * @param {string} path
+ * @returns {*}  {ListViewController}
+ */
+export function useListViewController(path: string): ListViewController {
+  return useViewController<ListViewController>(
+    (context: IContext, params: IParams) => {
+      return new ListViewController(path, context, params);
+    },
+  );
+}