@ibiz-template/vue3-components 0.7.41-alpha.136 → 0.7.41-alpha.138

package/src/common/back-top/back-top.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable no-lonely-if */
+import {
+  ref,
+  watch,
+  PropType,
+  Teleport,
+  computed,
+  onMounted,
+  Transition,
+  onUnmounted,
+  CSSProperties,
+  defineComponent,
+} from 'vue';
+import { useNamespace, useUIStore } from '@ibiz-template/vue3-util';
+import './back-top.scss';
+
+export const IBizBackTop = defineComponent({
+  name: 'IBizBackTop',
+  props: {
+    mode: {
+      type: String as PropType<'top' | 'bottom' | 'auto'>,
+      default: 'bottom',
+    },
+    target: {
+      type: [String, Object] as PropType<string | HTMLElement>,
+      default: '',
+    },
+    right: {
+      type: [Number, String] as PropType<number | string>,
+      default: 30,
+    },
+    bottom: {
+      type: [Number, String] as PropType<number | string>,
+      default: 40,
+    },
+    offset: {
+      type: Number,
+      default: 200,
+    },
+    teleport: {
+      type: [String, Object] as PropType<string | HTMLElement>,
+      default: '',
+    },
+    immediate: {
+      type: Boolean,
+      default: false,
+    },
+    zIndex: {
+      type: [Number, String] as PropType<number | string>,
+      default: 5,
+    },
+  },
+  setup(props, { slots }) {
+    const { zIndex } = useUIStore();
+    const ns = useNamespace('back-top');
+    const zIndexVal = zIndex.increment();
+    // 状态
+    const isVisible = ref(false);
+    const isAtBottom = ref(false);
+    const scrollContainer = ref<HTMLElement | null>(null);
+
+    // 计算位置样式
+    const positionStyle = computed<CSSProperties>(() => {
+      const rightVal =
+        typeof props.right === 'number' ? `${props.right}px` : props.right;
+      const bottomVal =
+        typeof props.bottom === 'number' ? `${props.bottom}px` : props.bottom;
+      return {
+        right: rightVal,
+        bottom: bottomVal,
+        zIndex: props.zIndex || zIndexVal,
+      };
+    });
+
+    // 获取滚动容器
+    const getScrollContainer = () => {
+      if (!props.target) return document.documentElement;
+      if (typeof props.target === 'string') {
+        return document.querySelector(props.target) as HTMLElement;
+      }
+      return props.target;
+    };
+
+    // 获取滚动数据
+    const getScrollData = () => {
+      const el = scrollContainer.value;
+      if (!el) return { scrollTop: 0, scrollHeight: 0, clientHeight: 0 };
+
+      return {
+        scrollTop: el.scrollTop,
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+      };
+    };
+
+    // 滚动监听处理
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = getScrollData();
+
+      // 判断是否在底部
+      const atBottom = scrollTop + clientHeight >= scrollHeight - props.offset;
+      isAtBottom.value = atBottom;
+
+      if (props.mode === 'top') {
+        isVisible.value = scrollTop > props.offset;
+      } else if (props.mode === 'bottom') {
+        const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+        isVisible.value = distanceToBottom > props.offset;
+      } else {
+        if (atBottom) {
+          // 如果当前在底部，显示“回到顶部”按钮
+          isVisible.value = scrollTop > props.offset;
+        } else {
+          // 如果当前不在底部，显示“回到底部”按钮
+          if (scrollHeight - scrollTop - clientHeight > props.offset)
+            isVisible.value = true;
+        }
+      }
+    };
+
+    // 滚动操作
+    const scrollTo = () => {
+      const el = scrollContainer.value;
+      if (!el) return;
+
+      let targetPosition = 0;
+
+      if (props.mode === 'bottom') {
+        targetPosition = getScrollData().scrollHeight;
+      } else if (props.mode === 'auto') {
+        targetPosition = isAtBottom.value ? 0 : getScrollData().scrollHeight;
+      } else {
+        targetPosition = 0;
+      }
+
+      el.scrollTo({
+        top: targetPosition,
+        behavior: props.immediate ? 'auto' : 'smooth',
+      });
+    };
+
+    // 绑定与解绑事件
+    const bindEvents = () => {
+      scrollContainer.value = getScrollContainer();
+      if (scrollContainer.value) {
+        scrollContainer.value.addEventListener('scroll', handleScroll, {
+          passive: true,
+        });
+        // 初始化时执行一次，防止刷新后位置不对
+        setTimeout(() => handleScroll(), 300);
+      }
+    };
+
+    const unbindEvents = () => {
+      if (scrollContainer.value) {
+        scrollContainer.value.removeEventListener('scroll', handleScroll);
+      }
+    };
+
+    // 监听 target 变化重新绑定
+    watch(
+      () => props.target,
+      () => {
+        unbindEvents();
+        bindEvents();
+      },
+    );
+
+    onMounted(() => {
+      bindEvents();
+    });
+
+    onUnmounted(() => {
+      zIndex.decrement();
+      unbindEvents();
+    });
+
+    /**
+     * @description 绘制图标
+     * @returns {*}
+     */
+    const renderIcon = () => {
+      if (props.mode === 'bottom')
+        return <ion-icon name='chevron-down-outline'></ion-icon>;
+      if (props.mode === 'top')
+        return <ion-icon name='chevron-up-outline'></ion-icon>;
+      if (isAtBottom.value)
+        return <ion-icon name='chevron-up-outline'></ion-icon>;
+      return <ion-icon name='chevron-down-outline'></ion-icon>;
+    };
+
+    /**
+     * @description 绘制内容
+     * @returns {*}
+     */
+    const renderContent = () => {
+      return (
+        <Transition name='fade'>
+          {isVisible.value && (
+            <div class={ns.b()} onClick={scrollTo} style={positionStyle.value}>
+              {slots.default ? slots.default() : renderIcon()}
+            </div>
+          )}
+        </Transition>
+      );
+    };
+    return {
+      ns,
+      isVisible,
+      positionStyle,
+      scrollTo,
+      renderIcon,
+      renderContent,
+    };
+  },
+  render() {
+    if (!this.teleport) return this.renderContent();
+    return (
+      <Teleport to={this.teleport} disabled={!this.teleport}>
+        {this.renderContent()}
+      </Teleport>
+    );
+  },
+});

package/src/common/index.ts

@@ -44,6 +44,7 @@ import { IBizCropping } from './cropping/cropping';
 import { IBizEditorEmptyText } from './editor-empty-text/editor-empty-text';
 import { IBizKanbanSetting } from './kanben-setting/kanben-setting';
 import { IBizHighLightCode } from './high-light-code/high-light-code';
+import { IBizBackTop } from './back-top/back-top';
 
 export * from './col/col';
 export * from './row/row';
@@ -57,6 +58,7 @@ export { DoingNotice } from './doing-notice/doing-notice';
 
 export const IBizCommonComponents = {
   install: (v: App): void => {
+    v.component(IBizBackTop.name, IBizBackTop);
     v.component(IBizKanbanSetting.name, IBizKanbanSetting);
     v.component(IBizEditorEmptyText.name, IBizEditorEmptyText);
     v.component(IBizCropping.name, IBizCropping);

package/src/control/data-view/data-view.tsx

@@ -31,6 +31,8 @@ import {
   IMDControlGroupState,
   DataViewControlController,
   getMDCtrlItemProvider,
+  filterPresetAttrs,
+  ScriptFactory,
 } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import draggable from 'vuedraggable';
@@ -1053,12 +1055,23 @@ export const DataViewControl = defineComponent({
       return renderDefaultStyle();
     };
 
+    function renderAttrs(): IParams {
+      const attrs: IParams = {};
+      filterPresetAttrs(c.model.controlAttributes).forEach(item => {
+        attrs[item.attrName!] = ScriptFactory.execSingleLine(item.attrValue!, {
+          ...c.getEventArgs(),
+        });
+      });
+      return attrs;
+    }
+
     return {
       c,
       ns,
       semanticClass,
       semanticStyle,
       infiniteScroll,
+      renderAttrs,
       renderLayoutByStyle,
     };
   },
@@ -1074,6 +1087,13 @@ export const DataViewControl = defineComponent({
           controller={this.c}
         >
           {this.renderLayoutByStyle()}
+          {this.c.state.isLoaded && this.c.showScrollTo !== 'none' && (
+            <iBizBackTop
+              target={this.infiniteScroll}
+              mode={this.c.showScrollTo}
+              {...this.renderAttrs()}
+            />
+          )}
         </iBizControlBase>
       </iBizControlNavigation>
     );

package/src/control/list/list.tsx

@@ -27,6 +27,8 @@ import {
   IControlProvider,
   IMDControlGroupState,
   getMDCtrlItemProvider,
+  ScriptFactory,
+  filterPresetAttrs,
 } from '@ibiz-template/runtime';
 import draggable from 'vuedraggable';
 import { showTitle } from '@ibiz-template/core';
@@ -912,6 +914,16 @@ export const ListControl = defineComponent({
       );
     };
 
+    function renderAttrs(): IParams {
+      const attrs: IParams = {};
+      filterPresetAttrs(c.model.controlAttributes).forEach(item => {
+        attrs[item.attrName!] = ScriptFactory.execSingleLine(item.attrValue!, {
+          ...c.getEventArgs(),
+        });
+      });
+      return attrs;
+    }
+
     return {
       c,
       ns,
@@ -920,6 +932,7 @@ export const ListControl = defineComponent({
       semanticStyle,
       reverseScroll,
       infiniteScroll,
+      renderAttrs,
       renderNoData,
       onPageChange,
       onPageRefresh,
@@ -988,6 +1001,13 @@ export const ListControl = defineComponent({
             )
           ) : null}
           {!this.reverseScroll && this.renderCollapseExpandIcon()}
+          {this.c.state.isLoaded && this.c.showScrollTo !== 'none' && (
+            <iBizBackTop
+              target={this.infiniteScroll}
+              mode={this.c.showScrollTo}
+              {...this.renderAttrs()}
+            />
+          )}
         </iBizControlBase>
       </iBizControlNavigation>
     );

package/src/editor/text-box/input/input.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable no-nested-ternary */
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
 import { debounce } from 'lodash-es';
+import { createUUID } from 'qx-util';
 import {
   useUIStore,
   useNamespace,
@@ -411,6 +412,21 @@ export const IBizInput = defineComponent({
 
     useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
 
+    // 当前实例唯一标识
+    const curInstanceUUID = ref('');
+    const initCurInstanceUUID = () => {
+      const { predefinedType } = c.model;
+      if (predefinedType === 'AUTH_USERID') {
+        curInstanceUUID.value = 'login-username';
+      } else if (predefinedType === 'AUTH_PASSWORD') {
+        curInstanceUUID.value = 'login-password';
+      } else {
+        curInstanceUUID.value = createUUID();
+      }
+    };
+    // 初始化当前实例唯一标识
+    initCurInstanceUUID();
+
     return {
       c,
       ns,
@@ -430,6 +446,7 @@ export const IBizInput = defineComponent({
       currentFormatVal,
       shouldAutoComplete,
       showFormDefaultContent,
+      curInstanceUUID,
       onBlur,
       onFocus,
       onClick,
@@ -507,6 +524,7 @@ export const IBizInput = defineComponent({
           autocomplete={this.shouldAutoComplete}
           v-child-class={this.childClass}
           v-child-style={this.childStyle}
+          id={this.curInstanceUUID}
           {...this.$attrs}
         >
           {slots}

package/src/panel-component/index.ts

@@ -74,6 +74,23 @@ export { PanelRememberMeController } from './panel-remember-me/panel-remember-me
 export { PanelTabPanelController } from './panel-tab-panel/panel-tab-panel.controller';
 export { SearchFormButtonsController } from './searchform-buttons/searchform-buttons.controller';
 export { ViewMsgPosController } from './view-msg-pos/view-msg-pos.controller';
+// 添加面板组件状态对象导出
+export { ExtendMenuBase } from './app-extend-menu/extend-menu-base/extend-menu-base.state';
+export { AppSwitchState } from './app-switch/app-switch.state';
+export { AuthCaptchaState } from './auth-captcha/auth-captcha.state';
+export { CoopPosState } from './coop-pos/coop-pos.state';
+export { GlobalSearchState } from './global-search/global-search.state';
+export { IndexBlankPlaceholderState } from './index-blank-placeholder/index-blank-placeholder.state';
+export { NavBreadcrumbState } from './nav-breadcrumb/nav-breadcrumb.state';
+export { NavTabsState } from './nav-tabs/nav-tabs.state';
+export { PanelAppLoginViewState } from './panel-app-login-view/panel-app-login-view.state';
+export { PanelAppTitleState } from './panel-app-title/panel-app-title.state';
+export { PanelButtonListState } from './panel-button-list/panel-button-list.state';
+export { PanelButtonState } from './panel-button/panel-button.state';
+export { PanelContainerGroupState } from './panel-container-group/panel-container-group.state';
+export { PanelRememberMeState } from './panel-remember-me/panel-remember-me.state';
+export { PanelTabPanelState } from './panel-tab-panel/panel-tab-panel.state';
+export { SplitContainerState } from './split-container/split-container.state';
 
 export * from './auth-userinfo';
 export * from './nav-pos-index';

package/src/panel-component/panel-button/panel-button.tsx

@@ -1,3 +1,4 @@
+import { createUUID } from 'qx-util';
 import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { IPanelButton } from '@ibiz/model-core';
 import { defineComponent, PropType, computed, ref } from 'vue';
@@ -78,6 +79,18 @@ export const PanelButton = defineComponent({
       }
     };
 
+    // 当前实例唯一标识
+    const curInstanceUUID = ref('');
+    const initCurInstanceUUID = () => {
+      if (props.modelData && props.modelData.uiactionId === 'app_login') {
+        curInstanceUUID.value = 'login-submit';
+      } else {
+        curInstanceUUID.value = createUUID();
+      }
+    };
+    // 初始化当前实例唯一标识
+    initCurInstanceUUID();
+
     return {
       ns,
       isText,
@@ -94,6 +107,7 @@ export const PanelButton = defineComponent({
       itemStyle,
       semanticClass,
       semanticStyle,
+      curInstanceUUID,
     };
   },
   render() {
@@ -115,6 +129,7 @@ export const PanelButton = defineComponent({
             text={this.isText}
             data-id={this.modelData.id}
             title={showTitle(this.tooltip)}
+            id={this.curInstanceUUID}
             disabled={this.state.disabled}
             loading={this.state.loading}
             onClick={this.handleButtonClick}

package/src/util/ai-chat-util/ai-chat-util.ts

@@ -83,28 +83,25 @@ export class AIChatUtil implements IApiAIChatUtil {
     chatOptions: IData;
   }> {
     // 容器参数
-    const containerOptions: IData = {};
-    // 窗口是否启用最小化
-    if (editorParams.enableaiminimize) {
-      containerOptions.enableAIMinimize =
-        editorParams.enableaiminimize === 'true';
-    }
-    // 窗口的打开模式(禁用窗口最小化不识别)
-    if (editorParams.openmode) {
-      containerOptions.openMode = containerOptions.enableAIMinimize
-        ? editorParams.openmode
-        : 'default';
-    } else {
-      containerOptions.enableAIMinimize = ibiz.config.common.enableAIMinimize;
-    }
+    const containerOptions: IData = {
+      minimizeOptions: {
+        enable:
+          editorParams.enableaiminimize === 'true' ||
+          ibiz.config.common.enableAIMinimize,
+        openMode: editorParams.openmode || 'default',
+        containerId:
+          editorParams.minimizecontainerid ||
+          ibiz.config.common.aiMinimizeContainerId,
+      },
+    };
     // 窗口的自动关闭模式(禁用窗口最小化不识别窗口最小化关闭模式)
     if (editorParams.autoclose) {
       try {
         const autoClose = JSON.parse(editorParams.autoclose);
         if (
-          !containerOptions.enableAIMinimize &&
           autoClose &&
-          autoClose.mode === 'minimize'
+          autoClose.mode === 'minimize' &&
+          !containerOptions.minimizeOptions.enable
         ) {
           autoClose.mode = 'close';
         }
@@ -852,29 +849,30 @@ export class AIChatUtil implements IApiAIChatUtil {
     chatOptions: IData;
   }> {
     // 容器参数
-    const containerOptions: IData = {};
-    // 窗口是否启用最小化
-    if (params.hasOwnProperty('enableaiminimize')) {
-      containerOptions.enableAIMinimize = params.enableaiminimize === 'true';
-      delete params.disableminimize;
-    } else {
-      containerOptions.enableAIMinimize = ibiz.config.common.enableAIMinimize;
-    }
-    // 窗口的打开模式(禁用窗口最小化不识别)
-    if (params.hasOwnProperty('openmode')) {
-      containerOptions.openMode = containerOptions.enableAIMinimize
-        ? params.openmode
-        : 'default';
-      delete params.openmode;
-    }
+    const containerOptions: IData = {
+      minimizeOptions: {
+        enable:
+          params.enableaiminimize === 'true' ||
+          ibiz.config.common.enableAIMinimize,
+        openMode: params.openmode || 'default',
+        containerId:
+          params.minimizecontainerid ||
+          ibiz.config.common.aiMinimizeContainerId,
+      },
+    };
+    if (params.hasOwnProperty('enableaiminimize'))
+      delete params.enableaiminimize;
+    if (params.hasOwnProperty('openmode')) delete params.openmode;
+    if (params.hasOwnProperty('minimizecontainerid'))
+      delete params.minimizecontainerid;
     // 窗口的自动关闭模式(禁用窗口最小化不识别窗口最小化关闭模式)
     if (params.hasOwnProperty('autoclose')) {
       try {
         const autoClose = JSON.parse(params.autoclose);
         if (
-          !containerOptions.enableAIMinimize &&
           autoClose &&
-          autoClose.mode === 'minimize'
+          autoClose.mode === 'minimize' &&
+          !containerOptions.minimizeOptions.enable
         ) {
           autoClose.mode = 'close';
         }

package/src/view/login-view/login-view.tsx

@@ -212,6 +212,7 @@ export const LoginView = defineComponent({
                         v-model={loginData.username}
                         clearable
                         placeholder={ibiz.i18n.t('app.pleaseEnterAccount')}
+                        id='login-username'
                       >
                         {{
                           prefix: () => <ion-icon name='person'></ion-icon>,
@@ -224,6 +225,7 @@ export const LoginView = defineComponent({
                         v-model={loginData.password}
                         show-password
                         placeholder={ibiz.i18n.t('app.pleaseEnterPassword')}
+                        id='login-password'
                       >
                         {{
                           prefix: () => <ion-icon name='unlock-alt'></ion-icon>,
@@ -242,6 +244,7 @@ export const LoginView = defineComponent({
                         round
                         loading={loading.value}
                         onKeyup={(e: KeyboardEvent) => onKeyUp(e)}
+                        id='login-submit'
                       >
                         {ibiz.i18n.t('view.loginView.login')}
                       </el-button>