@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/view/table/index.ts

@@ -1,5 +1,2 @@
-export * from './config';
-export * from './typing';
-
 export * from './TableUserPreferWidget';
 export * from './TableWidget';

package/src/view/table/style/index.scss

@@ -4,6 +4,8 @@
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 
   .default-table-view-spin {
     .oio-spin-loading {
@@ -14,7 +16,7 @@
 
   .ant-spin-nested-loading {
     width: 100%;
-    height: 100%;
+    flex: 1;
 
     .ant-spin-container {
       width: 100%;
@@ -55,6 +57,35 @@
 
   .oio-table-footer {
     text-align: right;
+
+    .default-table-footer-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  &.default-main-table {
+    .oio-table-footer {
+      text-align: right;
+
+      .default-table-footer-content {
+        position: relative;
+        padding-top: var(--oio-padding);
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          left: calc(var(--oio-padding) * -1);
+          right: calc(var(--oio-padding) * -1);
+          height: 1px;
+          background-color: var(--oio-border-color);
+        }
+      }
+    }
   }
 
   .highlight {
@@ -92,6 +123,13 @@
       }
     }
   }
+
+  .default-table-line-height-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: var(--oio-row-gap);
+  }
 }
 
 .ant-form-item-has-error {

package/src/view/translate/translate-page-util/translate-box/TranslateBoxWidget.vue

@@ -153,7 +153,13 @@ import {
   OioFormInstance,
   OioSpin
 } from '@oinone/kunlun-vue-ui-antd';
-import { getUrlParamByKey, translateValueByKey, CurrentLanguage, genStaticPath, OioProvider } from '@oinone/kunlun-engine';
+import {
+  getUrlParamByKey,
+  translateValueByKey,
+  CurrentLanguage,
+  genStaticPath,
+  OioProvider
+} from '@oinone/kunlun-engine';
 import { IModelField, ModelFieldType } from '@oinone/kunlun-meta';
 import { buildSingleItemParam } from '@oinone/kunlun-service';
 import { queryTranslateBox, queryTranslateBoxUpdate, saveAndRefreshForBox, saveForBoxWithUpdate } from '../../service';
@@ -510,9 +516,9 @@ const onDeleteLabel = (index: number) => {
   }
 
   .translate-select-item-label {
-    color: var(--oio-text-color);
+    color: var(--oio-form-item-label-color);
     font-size: var(--oio-font-size);
-    font-weight: var(--oio-font-weight-bold);
+    font-weight: var(--oio-form-item-label-weight);
     margin-bottom: var(--oio-margin-sm);
   }
 

package/src/view/tree/AbstractTreeElementWidget.ts

@@ -1,8 +1,8 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
 import { ExpressionRunParam } from '@oinone/kunlun-expression';
 import { ViewType } from '@oinone/kunlun-meta';
-import { BooleanHelper, ReturnPromise, uniqueKeyGenerator } from '@oinone/kunlun-shared';
-import { OioTreeNode, StyleHelper } from '@oinone/kunlun-vue-ui-common';
+import { BooleanHelper, OioTreeNode, ReturnPromise, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import { StyleHelper } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { TreeNodeResponseBody, TreeService } from '../../service';
 import { TreeData, TreeNodeMetadata } from '../../typing';

package/src/view/tree/TableSearchTreeWidget.ts

@@ -2,9 +2,8 @@ import { isRelationField } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
 import { Condition } from '@oinone/kunlun-request';
 import { DEFAULT_FALSE_CONDITION, DEFAULT_TRUE_CONDITION } from '@oinone/kunlun-service';
-import { NumberHelper, ReturnPromise } from '@oinone/kunlun-shared';
+import { NumberHelper, OioTreeNode, ReturnPromise } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { BaseElementWidget } from '../../basic';
 import { DropMode, TreeData, TreeRefreshCallChainingParameters } from '../../typing';

package/src/view/tree/TreeWidget.ts

@@ -1,8 +1,8 @@
 import { ActiveRecord, ExperimentalConfigManager } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
-import { Widget } from '@oinone/kunlun-vue-widget';
+import { isTreeViewState, OioAnyViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { BaseElementWidget } from '../../basic';
 import { TreeData } from '../../typing';
 import { AbstractTreeElementWidget } from './AbstractTreeElementWidget';
@@ -54,4 +54,10 @@ export class TreeWidget extends AbstractTreeElementWidget {
     }
     return [];
   }
+
+  protected $$initViewState(state: OioAnyViewState): void {
+    if (isTreeViewState(state) && !state.tree) {
+      state.tree = this.currentHandle;
+    }
+  }
 }

package/src/view/tree/props.ts

@@ -1,4 +1,4 @@
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { PropType } from 'vue';
 import { TreeData } from '../../typing';
 

package/src/view/view/DefaultView.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
+import { isMinimalismTheme } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
-import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
 import { DEFAULT_PREFIX } from '@oinone/kunlun-theme';
 import { PropRecordHelper, StableSlotProp } from '@oinone/kunlun-vue-ui-common';
-import { DslRenderDefinition } from '@oinone/kunlun-vue-widget';
-import { createVNode, defineComponent, PropType, vShow, withDirectives } from 'vue';
+import { useOioState } from '@oinone/kunlun-vue-widget';
+import { computed, createVNode, defineComponent, PropType, vShow, withDirectives } from 'vue';
+import { ViewBizStyle } from '../../typing';
 
 export default defineComponent({
   name: 'DefaultView',
@@ -13,9 +14,6 @@ export default defineComponent({
     currentHandle: {
       type: String
     },
-    template: {
-      type: Object as PropType<DslRenderDefinition>
-    },
     viewType: {
       type: String as PropType<ViewType>
     },
@@ -26,10 +24,25 @@ export default defineComponent({
     invisible: {
       type: Boolean,
       default: false
+    },
+    bizStyle: {
+      type: String as PropType<ViewBizStyle>
     }
   },
+  setup(props) {
+    const { globalState, viewState } = useOioState(props.currentHandle!);
+
+    return {
+      fullScreen: computed(() => {
+        if (props.inline) {
+          return !!viewState?.fullscreen;
+        }
+        return viewState?.fullscreen || globalState.fullscreen;
+      })
+    };
+  },
   render() {
-    const { viewType, currentHandle } = this;
+    const { viewType, currentHandle, fullScreen, bizStyle } = this;
     const classList: string[] = [`${DEFAULT_PREFIX}-default-view`];
     if (viewType) {
       classList.push(`${DEFAULT_PREFIX}-default-${viewType.toLowerCase()}-view`);
@@ -37,16 +50,28 @@ export default defineComponent({
     if (this.inline) {
       classList.push(`${DEFAULT_PREFIX}-default-view-inline`);
     }
+
+    // 全屏
+    if (fullScreen) {
+      classList.push(`${DEFAULT_PREFIX}-full-screen-view`);
+    }
+
+    // 视图风格
+    if (bizStyle) {
+      if (bizStyle === ViewBizStyle.COMPACT) {
+        classList.push(`${DEFAULT_PREFIX}-default-minimalism-view`);
+      }
+      classList.push(`${DEFAULT_PREFIX}-default-${bizStyle.toLowerCase()}-view`);
+    } else if (isMinimalismTheme() && !this.inline && viewType !== ViewType.Search) {
+      classList.push(`${DEFAULT_PREFIX}-default-minimalism-view`);
+    }
+
     return withDirectives(
       createVNode(
         'div',
         {
-          id: currentHandle,
-          ...PropRecordHelper.collectionBasicProps(
-            this.$attrs,
-            StringHelper.append(classList, CastHelper.cast(this.template?.class)),
-            CastHelper.cast(this.template?.style)
-          )
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, classList),
+          id: currentHandle
         },
         {
           ...StableSlotProp,

package/src/view/view/DetailView.ts

@@ -3,4 +3,9 @@ import { SPI } from '@oinone/kunlun-spi';
 import { BaseObjectView, BaseView } from '../../basic';
 
 @SPI.ClassFactory(BaseView.Token({ type: ViewType.Detail }))
-export class DetailView extends BaseObjectView {}
+export class DetailView extends BaseObjectView {
+  protected $$created() {
+    super.$$created();
+    this.viewState!.fields = [];
+  }
+}

package/src/view/view/FormView.ts

@@ -10,6 +10,11 @@ export class FormView extends BaseObjectView {
   @Widget.Provide()
   protected formValidateCallChaining: CallChaining<FormValidateResult[]> | undefined;
 
+  protected $$created() {
+    super.$$created();
+    this.viewState!.fields = [];
+  }
+
   protected $$beforeMount() {
     super.$$beforeMount();
     this.formValidateCallChaining = new CallChaining();

package/src/view/view/SearchView.ts

@@ -7,7 +7,7 @@ import {
   UpdateEntity
 } from '@oinone/kunlun-engine';
 import { ViewMode, ViewType } from '@oinone/kunlun-meta';
-import { CSSStyle, CallChaining } from '@oinone/kunlun-shared';
+import { CallChaining } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { BaseObjectView, BaseView } from '../../basic';
@@ -83,6 +83,11 @@ export class SearchView extends BaseObjectView {
     return this;
   }
 
+  protected $$created() {
+    super.$$created();
+    this.viewState!.fields = [];
+  }
+
   protected $$mounted() {
     if (this.parentRefreshCallChaining && this.currentRefreshCallChaining) {
       this.currentRefreshCallChaining.callAfter(

package/src/view/view/TableView.ts

@@ -1,9 +1,9 @@
-import { ActiveRecords } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
 import { CallChaining } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { BaseListView, BaseView } from '../../basic';
+import { TableEventCallChaining } from '../../typing';
 
 /**
  * <h3>表格视图</h3>
@@ -16,10 +16,15 @@ import { BaseListView, BaseView } from '../../basic';
 export class TableView extends BaseListView {
   @Widget.Reactive()
   @Widget.Provide()
-  protected editRowCallChaining: CallChaining<[string, ActiveRecords]> | undefined;
+  protected tableEventCallChaining: TableEventCallChaining | undefined;
+
+  protected $$created() {
+    super.$$created();
+    this.viewState!.fields = [];
+  }
 
   protected $$beforeMount() {
     super.$$beforeMount();
-    this.editRowCallChaining = new CallChaining<[string, ActiveRecords]>();
+    this.tableEventCallChaining = new CallChaining();
   }
 }

package/src/view/view/style/index.scss

@@ -105,3 +105,161 @@ $treeMinWidth: 324px;
     }
   }
 }
+.oio-full-screen-view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--oio-background);
+  z-index: 10;
+
+  &.oio-default-view-inline {
+    padding: var(--oio-padding) 0;
+  }
+}
+
+.oio-draft-data-modal-confirm {
+  .ant-modal-close-x {
+    top: -4px;
+  }
+  .ant-modal-confirm-body {
+    display: flex;
+    gap: var(--oio-row-gap);
+  }
+}
+
+// 极简风格视图
+.oio-default-minimalism-view {
+  background: var(--oio-background);
+  border-radius: var(--oio-border-radius, 4px);
+  box-shadow: var(--oio-box-shadow);
+
+  & > .oio-default-view-container {
+    row-gap: 0;
+
+    // 表单、详情、画廊视图
+    & > .oio-default-search-view {
+      padding: var(--oio-padding) var(--oio-padding) var(--oio-padding) 0;
+      border-bottom: 1px solid var(--oio-border-color);
+    }
+    & > .action-bar {
+      height: auto;
+      padding: var(--oio-padding);
+      border-bottom: 1px solid var(--oio-border-color);
+    }
+
+    & > .oio-default-form {
+      padding: var(--oio-padding);
+    }
+    & > .default-gallery {
+      padding: var(--oio-padding);
+    }
+
+    .oio-tabs {
+      &.ant-tabs-top.oio-tabs-accent-card {
+        .ant-tabs-nav {
+          padding-left: 0;
+        }
+      }
+    }
+
+    // 分组
+    .oio-group {
+      &.oio-group-border {
+        border: none;
+        box-shadow: none;
+      }
+      .oio-group-title-wrapper {
+        padding: 0;
+      }
+
+      .oio-group-content {
+        padding: var(--oio-padding) 0 0 0;
+        .oio-group {
+          padding: 0 var(--oio-padding);
+        }
+      }
+    }
+  }
+
+  // 表格
+  &.oio-default-table-view {
+    .oio-default-view-container {
+      .oio-group {
+        &:last-child {
+          .oio-group-content {
+            padding-top: 0;
+
+            & > .oio-row {
+              row-gap: 0 !important;
+            }
+          }
+        }
+      }
+      .oio-default-search {
+        padding: 0 var(--oio-padding) var(--oio-padding) 0;
+        border-bottom: 1px solid var(--oio-border-color);
+        .oio-cate-search.oio-tabs.ant-tabs-top .ant-tabs-nav .ant-tabs-tab {
+          padding-top: 0;
+        }
+        .ant-tabs-nav-wrap,
+        .oio-cate-search-second {
+          padding-left: var(--oio-padding);
+        }
+      }
+      .action-bar:not(.action-bar-inline) {
+        padding: var(--oio-padding) var(--oio-padding) 0 var(--oio-padding);
+        height: auto;
+      }
+      .default-table {
+        padding: var(--oio-padding);
+      }
+
+      .default-tree-table {
+        padding: var(--oio-padding) 0 0 var(--oio-padding);
+        position: relative;
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: calc(var(--oio-padding) * -1);
+          width: 1px;
+          background-color: var(--oio-border-color);
+        }
+      }
+    }
+  }
+
+  // 画廊
+  &.oio-default-gallery-view {
+    & > .oio-default-view-container > .action-bar {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  // 树视图
+  &.oio-default-tree-view {
+    padding: var(--oio-padding);
+    .oio-default-view-container .oio-group .oio-group-content {
+      padding: 0;
+    }
+  }
+
+  .oio-group-toolbar-flex-end {
+    .default-view-control-icon.default-view-control-icon-has-action {
+      bottom: 100%;
+      margin-left: var(--oio-padding-md);
+      right: unset;
+    }
+  }
+
+  .default-view-control-icon {
+    &.default-view-control-icon-has-action {
+      bottom: 100%;
+      right: calc(var(--oio-padding-md));
+    }
+  }
+}

package/src/view/view-control/DefaultViewControl.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="default-view-control-icon"
+    :class="{
+      'default-view-control-icon-has-action': hasActions,
+      'default-view-control-icon-left': actionJustify === FlexRowJustify.END
+    }"
+  >
+    <div class="default-view-control-icon-inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { FlexRowJustify } from '@oinone/kunlun-vue-ui-common';
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    hasActions: {
+      type: Boolean,
+      default: true
+    },
+    actionJustify: {
+      type: String as PropType<FlexRowJustify>
+    }
+  },
+  setup(props) {
+    return { FlexRowJustify };
+  }
+});
+</script>
+<style lang="scss">
+$bottom: calc(100% + var(--oio-row-gap));
+
+.oio-group-toolbar-flex-end {
+  .default-view-control-icon {
+    &.default-view-control-icon-has-action {
+      left: 0;
+      right: unset;
+    }
+  }
+}
+.default-view-control-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: calc(var(--oio-row-gap) / 2);
+  justify-content: flex-end;
+
+  &.default-view-control-icon-has-action {
+    position: absolute;
+    right: 0;
+    margin-bottom: 0;
+    bottom: $bottom;
+  }
+
+  &.default-view-control-icon-left {
+    position: absolute;
+    left: 0;
+    right: unset;
+    margin-bottom: 0;
+    bottom: $bottom;
+  }
+
+  .default-view-control-icon-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .table-user-prefer {
+      position: unset;
+      margin-top: -2px;
+      .oio-icon {
+        font-size: 16px;
+        color: var(--oio-icon-color);
+        cursor: pointer;
+        padding: var(--oio-padding-sm);
+        border-radius: var(--oio-border-radius);
+
+        &:hover {
+          background: var(--oio-hover-background-color);
+          color: var(--oio-hover-text-color);
+        }
+      }
+    }
+  }
+
+  .default-view-control-item {
+    .oio-icon {
+      cursor: pointer;
+      padding: var(--oio-padding-sm);
+      border-radius: var(--oio-border-radius);
+
+      &:hover {
+        background: var(--oio-hover-background-color);
+        color: var(--oio-hover-text-color);
+      }
+    }
+  }
+}
+
+.oio-default-minimalism-view {
+  .default-view-control-icon-has-action-bar {
+    right: var(--oio-padding);
+    bottom: 100%;
+  }
+
+  .oio-default-view-inline {
+    .default-view-control-icon-has-action-bar {
+      right: 0;
+      bottom: $bottom;
+    }
+    .default-view-control-icon {
+      margin-bottom: calc(var(--oio-row-gap) / 2);
+    }
+  }
+}
+
+.default-view-control-popover {
+  width: 400px;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
+  border-radius: var(--oio-border-radius);
+  padding: 0;
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+</style>

package/src/view/view-control/ViewControlWidget.ts

@@ -0,0 +1,64 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { FlexRowJustify } from '@oinone/kunlun-vue-ui-common';
+import { OioActionBarState, OioTableViewState, Widget } from '@oinone/kunlun-vue-widget';
+import type { ActionBarWidget, ActionWidget } from '../../action';
+import { BaseElementWidget } from '../../basic';
+import DefaultViewControl from './DefaultViewControl.vue';
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'ViewControl'
+  })
+)
+export class ViewControlWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultViewControl);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected actionBarState: OioActionBarState | undefined;
+
+  @Widget.Reactive()
+  protected get visibleActions(): string[] {
+    const actions = this.actionBarState?.actions;
+    return (
+      actions?.filter((v) => {
+        const widget = Widget.select<ActionWidget>(v);
+        if (widget) {
+          return !widget.invisible;
+        }
+        return false;
+      }) || []
+    );
+  }
+
+  @Widget.Reactive()
+  protected get hasActions() {
+    return !!this.visibleActions.length;
+  }
+
+  @Widget.Reactive()
+  protected get actionJustify() {
+    let justify: string | undefined;
+    const actionBarHandle = (this.viewState as OioTableViewState)?.actionBar?.handle;
+    if (actionBarHandle) {
+      justify = Widget.select<ActionBarWidget>(actionBarHandle)?.justify;
+    }
+    if (justify === 'flex-start') {
+      return FlexRowJustify.START;
+    }
+    if (justify === 'flex-end') {
+      return FlexRowJustify.END;
+    }
+    return FlexRowJustify.START;
+  }
+
+  protected $$beforeMount() {
+    super.$$beforeMount();
+    if (!this.actionBarState) {
+      this.actionBarState = this.viewState?.getActionBarState();
+    }
+  }
+}