xframelib 0.7.3 → 0.7.6

package/README.md

@@ -2,10 +2,13 @@
 
 基于 VUE3+Hprose+Typescript 的前端框架
 
+- v0.7.6 为LayoutManager增加卸载全部组件unloadAllWidgets、批量卸载组件unloadWidgets、获得已经加载组件ID列表getWidgetLoadedIDList;解决H5Tool的windowResizeHandler和offWindowResizeHandler内部调用错误方法的问题。
+- ~~v0.7.5 解决上一版LayoutContainer存在问题：CSS样式对应上，调整层级顺序；加入组件引用，changeWidgetVisible能控制Widget组件可见性；修改getWidgetComponent方法，实现对Widget组件的defineExpose方法调用;增加isWidgetVisible判断组件是否可见。~~
+- ~~ v0.7.4 完善Axios异常捕捉（对接后端Furion包装异常）;更新完善LayoutContainer；H5Tool增加removeHandler和offWindowResizeHandler方法；升级依赖基础库。~~
 - v0.7.3 升级依赖库；loadWidget失败输出日志和事件SysEvents.WidgetLoadedErrorEvent；优化系统权限相关模型；增加GetSignalRClient、ValidateTool、WaterMark等工具。
 - v0.7.2 解决v0.7.0的deepMerge方法存在复制对象的BUG。
 - v0.7.0 修改requestPost无法使用FormData参数；修改deepMerge方法；修改isObjectX方法;更新rollup-plugin-scss应用版本。
-- v0.6.9 默认引入loglevel,为Global增加Logger()方法，使用例如：Global.Logger().warn('123')。
+- ~~v0.6.9 默认引入loglevel,为Global增加Logger()方法，使用例如：Global.Logger().warn('123')。~~
 - v0.6.8 解决Axios 0.x升级为1.x后，序列化时带来的AxiosError: options must be an object错误 
 - v0.6.7 解决ExitLogin时报415错误；SysEvents.AxiosRequestErrorEvent、SysEvents.WebAPIErrorEvent、SysEvents.HproseServiceErrorEvent改为默认为后台记录，不主动弹框提示，需要提示使用Global.EventBus自主监听事件；升级依赖库版本;
 - v0.6.6 解决requestGet里params参数为数组解析错误问题;更改Layout布局层次为100;解决提示XXTEA未导出的问题;copyText默认改用Clipboard方式，支持根据元素ID复制内容;
@@ -85,16 +88,21 @@ import { createApp } from 'vue';
 import App from './App.vue';
 //模板添加的
 import { setupRouter } from './router/index';
-import { init } from 'xframelib';
+import {setupGlobDirectives} from './directives/index';
+import { init, Global } from 'xframelib';
 import 'xframelib/dist/index.css';
+import { getSystemPKG, getSystemID } from '@/utils/sysTool';
+import { createPinia } from 'pinia';
 import { message } from 'ant-design-vue';
-import 'ant-design-vue/es/message/style/index.css';
-import 'ant-design-vue/es/modal/style/index.css';
-import { setupI18n } from '@/locales/setupI18n';
+import {Icon} from '@iconify/vue';
 //dev阶段打开，build注销
 import 'ant-design-vue/dist/antd.css';
-import { getSystemPKG, getSystemID } from '@/utils/sysTool';
-import { createPinia } from 'pinia';
+
+
+if(window.global===undefined)
+{
+  window.global=globalThis;
+}
 message.config({
   top: `100px`,
   duration: 1,
@@ -105,24 +113,21 @@ message.config({
 const sysID = getSystemID();
 //分组名，工程名
 const sysGroup = getSystemPKG().name;
-//初始化
 init(message, sysID, sysGroup);
+
 // 创建pinia 实例
 const pinia = createPinia();
 const app = createApp(App);
 // 挂载到 Vue 根实例上
 app.use(pinia);
-//注册全局常用的ant-design-vue组件
-if (import.meta.env.DEV) {
-  import('ant-design-vue/dist/antd.js').then(it => {
-    app.use(it.default);
-  });
-}
+//定义v-drag命令
+setupGlobDirectives(app);
+setupRouter(app);
+//注册全局组件
+app.component('Icon',Icon);
+
+app.mount('#app');
 
-setupI18n(app).then(() => {
-  setupRouter(app);
-  app.mount('#app');
-});
 ```
 
 ### Working with hprose

package/dist/api/Token.d.ts

@@ -1,15 +1,15 @@
-import { IDoubleToken } from '../model/IUserModel';
-/**
- * 刷新Token
- */
-export declare function doRefreshToken(): void;
-/**
- * 检查和刷新Token
- * @param userToken
- */
-export declare function checkDoRefreshToken(): void;
-/**
- * 存储Token对象
- * @param userToken
- */
-export declare function setLocalToken(userToken: IDoubleToken): void;
+import { IDoubleToken } from '../model/IUserModel';
+/**
+ * 刷新Token
+ */
+export declare function doRefreshToken(): void;
+/**
+ * 检查和刷新Token
+ * @param userToken
+ */
+export declare function checkDoRefreshToken(): void;
+/**
+ * 存储Token对象
+ * @param userToken
+ */
+export declare function setLocalToken(userToken: IDoubleToken): void;

package/dist/api/User.d.ts

@@ -1,49 +1,49 @@
-interface IChangPwdInfo {
-    /**
-     * 用户名
-     */
-    oldpwd: string;
-    newpwd: string;
-}
-export interface IUser {
-    username: string;
-    pwd: string;
-    /**
-     * 所属系统
-     */
-    system?: string;
-}
-/**
- * 用户登录
- * @param data 用户信息
- * @returns
- */
-export declare function login(data: IUser): Promise<any>;
-/**
- * 检查某一系统的用户
- * @param data 用户对象
- * @returns
- */
-/**
- * 修改自己的密码
- * @param data 用户数据
- * @returns
- */
-export declare function changeMyPWD(data: IChangPwdInfo): Promise<any>;
-/**
- * 获取加密后的密码
- * @param data
- * @returns
- */
-export declare function getEncryptPWD(data: string): string;
-/**
- * 退出登录
- */
-export declare function logout(): void;
-/**
- * 验证 已有的token
- * @param token 需要验证的token
- * @returns
- */
-export declare function checkToken(token: string): Promise<any>;
-export {};
+interface IChangPwdInfo {
+    /**
+     * 用户名
+     */
+    oldpwd: string;
+    newpwd: string;
+}
+export interface IUser {
+    username: string;
+    pwd: string;
+    /**
+     * 所属系统
+     */
+    system?: string;
+}
+/**
+ * 用户登录
+ * @param data 用户信息
+ * @returns
+ */
+export declare function login(data: IUser): Promise<any>;
+/**
+ * 检查某一系统的用户
+ * @param data 用户对象
+ * @returns
+ */
+/**
+ * 修改自己的密码
+ * @param data 用户数据
+ * @returns
+ */
+export declare function changeMyPWD(data: IChangPwdInfo): Promise<any>;
+/**
+ * 获取加密后的密码
+ * @param data
+ * @returns
+ */
+export declare function getEncryptPWD(data: string): string;
+/**
+ * 退出登录
+ */
+export declare function logout(): void;
+/**
+ * 验证 已有的token
+ * @param token 需要验证的token
+ * @returns
+ */
+export declare function checkToken(token: string): Promise<any>;
+export {};

package/dist/api/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Token';
-export * from './User';
+export * from './Token';
+export * from './User';

package/dist/assets/output-ad5f5cbf.css

@@ -0,0 +1,307 @@
+.splitpanes {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.splitpanes--vertical {
+  flex-direction: row;
+}
+.splitpanes--horizontal {
+  flex-direction: column;
+}
+.splitpanes--dragging * {
+  user-select: none;
+}
+.splitpanes__pane {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.splitpanes--vertical .splitpanes__pane {
+  transition: width 0.2s ease-out;
+}
+.splitpanes--horizontal .splitpanes__pane {
+  transition: height 0.2s ease-out;
+}
+.splitpanes--dragging .splitpanes__pane {
+  transition: none;
+}
+.splitpanes__splitter {
+  touch-action: none;
+}
+.splitpanes--vertical > .splitpanes__splitter {
+  min-width: 1px;
+  cursor: col-resize;
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  min-height: 1px;
+  cursor: row-resize;
+}
+
+.splitpanes.default-theme .splitpanes__pane {
+  background-color: #f2f2f2;
+}
+.splitpanes.default-theme .splitpanes__splitter {
+  background-color: #fff;
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+}
+.splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: rgba(0, 0, 0, 0.15);
+  transition: background-color 0.3s;
+}
+.splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.splitpanes.default-theme .splitpanes__splitter:first-child {
+  cursor: auto;
+}
+
+.default-theme.splitpanes .splitpanes .splitpanes__splitter {
+  z-index: 1;
+}
+.default-theme.splitpanes--vertical > .splitpanes__splitter,
+.default-theme .splitpanes--vertical > .splitpanes__splitter {
+  width: 7px;
+  border-left: 1px solid #eee;
+  margin-left: -1px;
+}
+.default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
+.default-theme .splitpanes--vertical > .splitpanes__splitter:before,
+.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
+  transform: translateY(-50%);
+  width: 1px;
+  height: 30px;
+}
+.default-theme.splitpanes--vertical > .splitpanes__splitter:before,
+.default-theme .splitpanes--vertical > .splitpanes__splitter:before {
+  margin-left: -2px;
+}
+.default-theme.splitpanes--vertical > .splitpanes__splitter:after,
+.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
+  margin-left: 1px;
+}
+.default-theme.splitpanes--horizontal > .splitpanes__splitter,
+.default-theme .splitpanes--horizontal > .splitpanes__splitter {
+  height: 7px;
+  border-top: 1px solid #eee;
+  margin-top: -1px;
+}
+.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
+.default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
+.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
+  transform: translateX(-50%);
+  width: 30px;
+  height: 1px;
+}
+.default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
+.default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
+  margin-top: -2px;
+}
+.default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
+.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
+  margin-top: 1px;
+}
+
+.vcpg {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  width: 100%;
+}
+.vcpg ::v-deep(.vcp) * {
+  box-sizing: border-box;
+}
+.vcpg ::v-deep(.vcp) .vcp__header {
+  background-color: var(--bg-color-header);
+  height: 30px;
+  border-bottom: 2px solid #c6bebd;
+  transition: background-color 0.3s ease;
+}
+.vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
+  background-color: var(--bg-color-header-hover);
+}
+.vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
+  background-color: var(--bg-color-header-active);
+}
+.vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
+  border-top: 2px solid var(--border-color);
+}
+.vcpg ::v-deep(.vcp) .vcp__header-title {
+  font-weight: 500;
+}
+.vcpg ::v-deep(.vcp) .vcp__body {
+  border-top: 1px solid var(--border-color);
+  background-color: var(--bg-color-body);
+}
+
+.vcp__header {
+  display: flex;
+  padding: 12px;
+  pointer-events: none;
+}
+.vcp--expandable .vcp__header {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.vcp__header-title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.vcp__header-icon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
+}
+.vcp--expanded .vcp__header-icon {
+  transform-origin: center;
+  transform: rotate(180deg);
+}
+.vcp__header-icon > span {
+  display: flex;
+  height: 24px;
+  width: 24px;
+}
+.vcp__header-icon ::v-deep(svg) {
+  height: 100%;
+  width: 100%;
+}
+.vcp__body {
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
+}
+.vcp__body-content {
+  padding: 12px;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0.25;
+}
+
+.window {
+  display: flex;
+  flex-flow: column;
+  position: absolute;
+  border-radius: 4pt 4pt 0 0;
+}
+
+.titlebar {
+  display: flex;
+  flex-flow: row nowrap;
+  border-radius: 4pt 4pt 0 0;
+  font-family: sans-serif;
+  padding: 0.5em;
+  flex: 0 0 auto;
+}
+
+.title {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content {
+  flex-grow: 1;
+  padding: 0.5em;
+}
+
+.draggable-handle {
+  cursor: move;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.2s;
+}
+
+.layoutContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  --layout-top-zindex: 100;
+  --layout-bottom-zindex: 100;
+  --layout-centermain-zindex:70;
+  --layout-centerback-zindex: 80;
+  --layout-centerfront-zindex: 90;
+  --layout-left-zindex: 100;
+  --layout-right-zindex: 100;
+}
+
+.topContainer {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  z-index: var(--layout-top-zindex);
+}
+
+.bottomContainer {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  z-index: var(--layout-bottom-zindex);
+}
+
+.leftContainer {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: var(--layout-left-zindex);
+  height: 100%;
+}
+
+.rightContainer {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: var(--layout-right-zindex);
+  height: 100%;
+}
+
+.centerdiv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.mainContainer {
+  bottom: 0;
+  width: 100%;
+  z-index: var(--layout-centermain-zindex);
+}
+
+.backContainer {
+  z-index: var(--layout-centerback-zindex);
+}
+
+.centerFrontContainer {
+  z-index: var(--layout-centerfront-zindex);
+}
+
+.btn {
+  background-color: transparent;
+  border: none;
+  font-size: medium;
+  margin: 0;
+  padding: 0 0.25em;
+  border-radius: 4pt;
+}

package/dist/controls/collapsepanel/VCollapsiblePanel.vue.d.ts

@@ -1,27 +1,27 @@
-declare const _default: import("vue").DefineComponent<{
-    expanded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    body: import("vue").ComputedRef<{
-        hasContent: boolean | undefined;
-        dataKey: string;
-    }>;
-    panelRef: import("vue").Ref<HTMLElement | undefined>;
-    bodyRef: import("vue").Ref<HTMLElement | undefined>;
-    bodyContentRef: import("vue").Ref<HTMLElement | undefined>;
-    isExpanded: import("vue").ComputedRef<boolean | undefined>;
-    collapse: (element: HTMLElement) => void;
-    expand: (element: HTMLElement) => void;
-    toggle: () => void;
-    toggleIcon: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    expanded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    expanded: boolean;
-}>;
-export default _default;
+declare const _default: import("vue").DefineComponent<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    body: import("vue").ComputedRef<{
+        hasContent: boolean | undefined;
+        dataKey: string;
+    }>;
+    panelRef: import("vue").Ref<HTMLElement | undefined>;
+    bodyRef: import("vue").Ref<HTMLElement | undefined>;
+    bodyContentRef: import("vue").Ref<HTMLElement | undefined>;
+    isExpanded: import("vue").ComputedRef<boolean | undefined>;
+    collapse: (element: HTMLElement) => void;
+    expand: (element: HTMLElement) => void;
+    toggle: () => void;
+    toggleIcon: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    expanded: boolean;
+}, {}>;
+export default _default;

package/dist/controls/collapsepanel/VCollapsiblePanelGroup.vue.d.ts

@@ -1,33 +1,33 @@
-declare const _default: import("vue").DefineComponent<{
-    accordion: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    baseColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    idGroup: import("vue").Ref<string>;
-    cssColorVars: {
-        '--base-color': string;
-        '--border-color': string;
-        '--bg-color-header': string;
-        '--bg-color-header-hover': string;
-        '--bg-color-header-active': string;
-        '--bg-color-body': string;
-    };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    accordion: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    baseColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    accordion: boolean;
-    baseColor: string;
-}>;
-export default _default;
+declare const _default: import("vue").DefineComponent<{
+    accordion: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    baseColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    idGroup: import("vue").Ref<string>;
+    cssColorVars: {
+        '--base-color': string;
+        '--border-color': string;
+        '--bg-color-header': string;
+        '--bg-color-header-hover': string;
+        '--bg-color-header-active': string;
+        '--bg-color-body': string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    accordion: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    baseColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    accordion: boolean;
+    baseColor: string;
+}, {}>;
+export default _default;

package/dist/controls/collapsepanel/color.util.d.ts

@@ -1 +1 @@
-export declare const lightenDarkenColor: (hexColor: string, amount: number) => string;
+export declare const lightenDarkenColor: (hexColor: string, amount: number) => string;

package/dist/controls/collapsepanel/composables/store.d.ts

@@ -1,7 +1,7 @@
-export declare const useCollapsiblePanelStore: () => {
-    useGroupAccordion: (idGroup: string) => import("vue").ComputedRef<boolean>;
-    setGroupAccordionStatus: (idGroup: string, status: boolean) => void;
-    panelExpanded: (idGroup: string, idPanel: string) => import("vue").ComputedRef<boolean>;
-    setPanelExpandedStatus: (idGroup: string, idPanel: string, status: boolean) => void;
-    togglePanelExpandedStatus: (idGroup: string, idPanel: string) => void;
-};
+export declare const useCollapsiblePanelStore: () => {
+    useGroupAccordion: (idGroup: string) => import("vue").ComputedRef<boolean>;
+    setGroupAccordionStatus: (idGroup: string, status: boolean) => void;
+    panelExpanded: (idGroup: string, idPanel: string) => import("vue").ComputedRef<boolean>;
+    setPanelExpandedStatus: (idGroup: string, idPanel: string, status: boolean) => void;
+    togglePanelExpandedStatus: (idGroup: string, idPanel: string) => void;
+};

package/dist/controls/collapsepanel/constant.d.ts

@@ -1 +1 @@
-export declare const toggleIcon = "\n    <svg\n        width=\"24px\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M6.34292 7.75734L4.92871 9.17155L11.9998 16.2426L19.0708 9.17158L17.6566 7.75737L11.9998 13.4142L6.34292 7.75734Z\"/>\n    </svg>\n";
+export declare const toggleIcon = "\n    <svg\n        width=\"24px\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M6.34292 7.75734L4.92871 9.17155L11.9998 16.2426L19.0708 9.17158L17.6566 7.75737L11.9998 13.4142L6.34292 7.75734Z\"/>\n    </svg>\n";

package/dist/controls/collapsepanel/index.d.ts

@@ -1,3 +1,3 @@
-import VCollapsiblePanelGroup from './VCollapsiblePanelGroup.vue';
-import VCollapsiblePanel from './VCollapsiblePanel.vue';
-export { VCollapsiblePanel, VCollapsiblePanelGroup };
+import VCollapsiblePanelGroup from './VCollapsiblePanelGroup.vue';
+import VCollapsiblePanel from './VCollapsiblePanel.vue';
+export { VCollapsiblePanel, VCollapsiblePanelGroup };