ibsp-fg-page 4.0.2

package/src/styles/theme/nextui.less

@@ -0,0 +1,550 @@
+@font-face {
+    font-family: 'pinia';
+    src: url('../assets/font/pinia.ttf') format('ttf');
+    font-weight: 400;
+    font-style: normal;
+  
+  }
+  .ibsp-next-ui-dark-variant{
+    --ibspNextUi-bg: rgba(36, 36, 36, 0.4); // 主题背景色
+    --ibspNextUi-border-color: rgba(238, 238, 238, 0.19); // 主题边框色
+    --ibspNextUi-font-color: rgba(249, 249, 249, 0.25); // 主题字体颜色
+    --ibspNextUi-block-bg: #27272a68; // 主题按钮背景色
+    --theme-bg: var(--ibspNextUi-bg);
+    --theme-border-color: var(--ibspNextUi-border-color);
+    --theme-block-bg: #1e1f2252;
+  }
+
+  .ibsp-next-ui-dark.ibsp-next-ui{
+    [data-bg-type="color"]{
+      .ibsp-layout{
+        background-color: var(--theme-bg);
+      }
+    }
+    [data-bg-type="image"]{
+      .ibsp-layout{
+        header{
+          backdrop-filter: brightness(0.5);
+        }
+      }
+    
+      .ibsp-default-layout {
+        backdrop-filter: brightness(0.5);
+      }
+    }
+
+  }
+  
+  .ibsp-next-ui:not(#app-preview-wrap) {
+
+    font-family: pinia,'Microsoft YaHei', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  
+    --ibspNextUi-bg: var(--theme-bg); // 主题背景色
+    --ibspNextUi-border-color: var(--theme-border-color); // 主题边框色
+    --ibspNextUi-font-color: var(--theme-font-color); // 主题字体颜色
+    --ibspNextUi-block-bg: #27272a68; // 主题按钮背景色
+    // --theme-bg: var(--ibspNextUi-bg);
+    // --theme-border-color: var(--ibspNextUi-border-color);
+    --theme-block-bg: #1e1f2252;
+   
+    div.el-popper {
+      background-color: var(--ibspNextUi-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--ibspNextUi-border-color);
+    }
+  
+    .el-select__popper.el-popper {
+      background-color: var(--ibspNextUi-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--ibspNextUi-border-color);
+      border-radius: 6px;
+  
+      .el-input__wrapper {
+        border-radius: 6px;
+      }
+  
+      .el-select-dropdown__wrap {
+        padding: 6px;
+  
+        .el-select-dropdown__item {
+          border-radius: 6px;
+          height: 32px;
+          line-height: 32px;
+          margin: 2px 0;
+  
+          .el-select-row {
+            .el-select-row-code {
+              color: var(--ibspNextUi-font-color);
+              opacity: 0.8;
+            }
+  
+            &:hover {
+              .el-select-row-code {
+                opacity: 1 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  
+    .el-dropdown__popper.el-popper {
+      background-color: var(--ibspNextUi-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--ibspNextUi-border-color);
+      border-radius: 6px;
+  
+      .el-dropdown__list {
+        background-color: transparent !important;
+      }
+  
+      .el-dropdown-menu {
+        background-color: transparent !important;
+        padding: 6px;
+      }
+  
+      .el-dropdown-menu__item {
+        border-radius: 6px;
+        height: 32px;
+        line-height: 32px;
+        margin: 2px 0;
+  
+        .el-dropdown-menu__item__code {
+          color: var(--ibspNextUi-font-color);
+          opacity: 0.8;
+        }
+  
+        &:hover {
+          .el-dropdown-menu__item__code {
+            opacity: 1 !important;
+          }
+        }
+      }
+    }
+  
+    .el-cascader__dropdown.el-popper {
+      background-color: var(--ibspNextUi-bg);
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--ibspNextUi-border-color);
+      border-radius: 6px;
+  
+      .el-cascader-menu {
+        background-color: transparent !important;
+        padding: 6px;
+      }
+  
+      .el-cascader-menu__list {
+        padding: 0 !important;
+      }
+  
+      .el-cascader-node {
+        border-radius: 6px;
+        height: 32px;
+        line-height: 32px;
+        margin: 2px 0;
+      }
+    }
+  
+    .base-select,
+    .ibsp-select {
+      .el-select {
+        .el-input__wrapper {
+          border-radius: 6px;
+  
+          .el-input__inner {
+            height: 28px;
+            line-height: 28px;
+          }
+        }
+  
+      }
+    }
+  
+    .ibsp-button {
+      border-radius: 6px !important;
+      height: 30px !important;
+      background-color: rgba(63, 63, 70, .4);
+    }
+  
+    .theme-switch {
+      padding: 2px;
+      height: 30px !important;
+      border-radius: 6px !important;
+  
+      >div {
+        border-radius: 6px !important;
+      }
+  
+      >div:first-child {
+        margin-right: 2px;
+      }
+  
+    }
+  
+    .refresh,
+    .full-screen {
+      padding: 2px;
+      height: 30px !important;
+      width: 30px !important;
+      border-radius: 6px !important;
+  
+      svg,
+      i {
+        width: 22px !important;
+        height: 22px !important;
+        padding: 0 1px;
+      }
+    }
+  
+    .page-popup-container {
+      .page-menu-drag-container {
+        backdrop-filter: initial !important;
+      }
+  
+      .header-container {
+        border-top-left-radius: 12px !important;
+        border-top-right-radius: 12px !important;
+        border: 1px solid var(--ibspNextUi-border-color) !important;
+        background-color: var(--ibspNextUi-bg) !important;
+        backdrop-filter: blur(15px);
+  
+      }
+  
+      .main-container {
+        border-bottom-left-radius: 12px !important;
+        border-bottom-right-radius: 12px !important;
+        border: 1px solid var(--ibspNextUi-border-color) !important;
+        background-color: var(--ibspNextUi-bg) !important;
+        backdrop-filter: blur(15px);
+      }
+    }
+  
+    .base-switch {
+      .el-switch {
+        &.is-checked {
+          .el-switch__action {
+            left: calc(100% - 19px) !important;
+          }
+  
+          .el-switch__core {
+            background-color: var(--theme-gl-bg);
+  
+          }
+        }
+  
+        .el-switch__core {
+          background-color: #3E3E45;
+          border: none;
+          padding: 2px;
+          height: 22px;
+  
+          .el-switch__action {
+            background-color: #fff;
+            left: 3px;
+          }
+  
+        }
+      }
+  
+    }
+  
+    .component-lib-module {
+      .el-collapse-item {
+
+        .el-collapse-item__header {
+          background-color: transparent !important;
+        }
+      }
+    }
+  
+    .ibsp-dialog {
+      background-color: var(--ibspNextUi-bg) !important;
+    }
+  
+    .ibsp-contextmenu {
+      background-color: var(--ibspNextUi-bg) !important;
+      border: 1px solid var(--ibspNextUi-border-color) !important;
+      border-radius: 6px;
+  
+      .item-container:hover {
+        background-color: var(--theme-gl-bg) !important;
+        color: var(--theme-gl-color) !important;
+      }
+    }
+  
+    .script-index {
+      .el-tree {
+        background-color: transparent !important;
+      }
+  
+      header .head-left .nav-menu:hover {
+        background-color: var(--theme-gl-bg) !important;
+        color: var(--theme-gl-color) !important;
+      }
+    }
+
+  
+    .ibsp-default-layout {
+      // backdrop-filter:brightness(120%);
+      // background-color: var(--ibspNextUi-bg) !important;
+      // backdrop-filter: brightness(0.5);
+  
+      >header {
+        background-color: transparent !important;
+      }
+  
+      background-color: transparent;
+  
+      .left-module,
+      .right-module {
+        background-color: transparent !important;
+        backdrop-filter: blur(45px);
+      }
+
+      .right-module {
+        font-family: pinia, jetbrains-mono, Microsoft YaHei, monospace, sans-serif;
+        border-left: 1px solid var(--ibspNextUi-border-color) !important;
+
+        .el-input .el-input__wrapper,.el-select__wrapper {
+          background-color: var(--ibspNextUi-block-bg) !important;
+          border-radius: 6px;
+        }
+
+        .base-radio .el-radio-button {
+          .el-radio-button__inner {
+            background-color: var(--ibspNextUi-block-bg) !important;
+            border: none !important;
+
+            &:not(:first-child) {
+              // border-right: 1px solid var(--ibspNextUi-border-color) !important;
+            }
+
+            &:first-child {
+
+              border-left: 1px solid var(--ibspNextUi-border-color) !important;
+            }
+          }
+
+          &.is-active {
+            .el-radio-button__inner {
+              background-color: var(--theme-gl-bg) !important;
+              color: #fff !important;
+              border: none !important;
+              transition: none !important;
+              border-radius: 2px;
+              path{
+                fill: #fff !important;
+              }
+            }
+          }
+        }
+
+        .interaction {
+          background-color: transparent !important;
+
+          .action-list {
+            background-color: transparent !important;
+          }
+        }
+      }
+
+      .left-module {
+        border-right: 1px solid var(--ibspNextUi-border-color) !important;
+        user-select: none;
+
+      }
+
+      .props-config-index {
+        user-select: none;
+      }
+
+      .base-radio {
+        .el-radio-group {
+          margin-top: 3px;
+        }
+      }
+
+      .left-module main,.right-module main {
+        background-color: transparent !important;
+        backdrop-filter: blur(35px);
+
+        // 滚动条
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .app-wrapper {
+          background-color: transparent;
+
+          main {
+            background-color: transparent;
+          }
+        }
+
+        footer,
+        header {
+          background-color: transparent;
+
+        }
+      }
+      .el-collapse .el-collapse-item .el-collapse-item__wrap {
+        background-color: transparent;
+      }
+  
+      .el-collapse .el-collapse-item .el-collapse-item__header {
+        border-left: none !important;
+        border-right: none !important;
+        border: 1px solid var(--ibspNextUi-border-color);
+        overflow: hidden;
+      }
+  
+  
+  
+      .module-content header {
+        // border-bottom: 1px solid var(--ibspNextUi-border-color) !important;
+      }
+  
+      .common-props-config .el-collapse-item .el-input-number__increase,
+      .common-props-config .el-collapse-item .el-input-number__decrease {
+        background-color: transparent;
+        font-size: 18px;
+      }
+  
+      .base-input-number .el-input__inner {
+        height: 26px;
+      }
+  
+      .base-input-number .el-input-number__increase {
+        background-color: transparent !important;
+      }
+  
+      .base-input-number .el-input-number__decrease {
+        background-color: transparent !important;
+      }
+  
+      .el-input-number__decrease {
+        font-size: 18px !important;
+      }
+  
+      .drag-menu .drag-menu-container .active-drag-item {
+        background-color: #3333331f !important;
+      }
+  
+      .ant-tabs-tab {
+        .ant-tabs-tab-btn {
+          color: var(--theme-font-color);
+        }
+      }
+  
+  
+  
+  
+  
+    }
+  
+    // .designer-index-bg {
+    //   -webkit-clip-path: polygon(7% 5%, 4% 48%, 9% 92%, 78% 36%, 98% 90%, 48% 100%, 84% 49%, 32% 83%, 30% 10%, 100% 56%, 80% 5%, 32% 27%);
+    //   clip-path: polygon(7% 5%, 4% 48%, 9% 92%, 78% 36%, 98% 90%, 48% 100%, 84% 49%, 32% 83%, 30% 10%, 100% 56%, 80% 5%, 32% 27%);
+    //   background-image: linear-gradient(to top right, var(--ibsp-theme-color), var(--ibsp-theme-color2));
+    // }
+  
+    .ibsp-drawer {
+      background-color: transparent !important;
+      backdrop-filter: blur(15px);
+      border: 1px solid var(--ibspNextUi-border-color) !important;
+  
+      .el-drawer__header {
+        border-bottom: 1px solid var(--ibspNextUi-border-color) !important;
+      }
+  
+    }
+  
+    .el-overlay {
+      background-color: transparent !important;
+    }
+  
+  
+    .ibsp-search-input[data-v-8f98d3e0] .el-input__wrapper {
+      background-color: var(--ibspNextUi-block-bg) !important;
+      border-radius: 6px;
+    }
+  
+    .component-lib-module main .el-collapse .component-category-list .component-item {
+      border-radius: 6px;
+    }
+  
+    .ibsp-tree {
+  
+      header {
+        border-bottom: 1px solid var(--ibspNextUi-border-color) !important;
+        margin-top: 0;
+        height: 45px !important;
+        padding: 5px;
+  
+      }
+  
+      main {
+        height: calc(100% - 45px) !important;
+        .ant-tree {
+          background-color: transparent !important;
+    
+        }
+      }
+        .ant-tree-list-holder-inner {
+          padding: 10px !important;
+          padding-top: 0 !important;
+  
+          .ant-tree-treenode {
+            border-radius: 6px !important;
+          }
+        }
+      
+    }
+  
+    .script-edit-panel{
+      background-color: var(--ibspNextUi-bg) !important;
+    }
+  
+  
+    .float-module-card{
+      background-color: rgba(36, 36, 36, 0.8);
+  
+    }
+  
+  
+    ///////////////////////////////////////////////////////////////////// 亮色主题 /////////////////////////////////////////////////////////////////////
+    &.theme-light {
+      --ibspNextUi-bg: rgba(255, 255, 255, 0.3); // 主题背景色
+      --ibspNextUi-border-color: rgba(0, 0, 0, 0.19); // 主题边框色
+      --ibspNextUi-font-color: rgba(0, 0, 0, 0.15); // 主题字体颜色
+      --ibspNextUi-block-bg: #e9e9e921;
+      --theme-block-bg: #f7f8fa33;
+  
+      .float-module-card{
+        background-color: rgba(255, 255, 255, 0.8);
+    
+      }
+  
+      .base-switch {
+        .el-switch {
+          &.is-checked {
+            .el-switch__core {
+              background-color: var(--theme-gl-bg);
+  
+            }
+          }
+  
+          .el-switch__core {
+            background-color: #8B8B8F;
+          }
+        }
+  
+      }
+  
+      .drag-menu .drag-menu-container .active-drag-item {
+        background-color: #bfbfbf29 !important;
+      }
+    }
+  
+  
+  }

package/src/types/config.d.ts

@@ -0,0 +1,107 @@
+type IbspComponentConfigType = 'Input' | 'Select';
+type IbspBuiltinComponentType = 'DataModel';
+type ConfigOptions = any[] | ((params: {
+    component: IBSP.IComponent.DesignComponent;
+    page: IBSP.IPage.Page;
+    configValue: Record<string, any>;
+    config: Record<string, any>;
+}) => any[]);
+
+type ConfigInputProps = {
+    placeholder: string;
+    defaultValue: string;
+    disabled: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    maxlength: number;
+    showPassword: boolean;
+    showWordLimit: boolean;
+    showClear: boolean;
+};
+
+type ConfigSelectProps = {
+    placeholder: string;
+    defaultValue: string;
+    disabled: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    maxlength: number;
+    showPassword: boolean;
+    showWordLimit: boolean;
+    showClear: boolean;
+    options: ConfigOptions;
+};
+
+type IbspComponentConfigProps<T extends IbspComponentConfigType> = {
+    tip:string
+} & (T extends 'Input' ? ConfigInputProps : T extends 'Select' ? ConfigSelectProps : never)
+
+type BaseConfig<T extends IbspComponentConfigType = IbspComponentConfigType> = {
+    label: string;
+    key: string;
+    componentType: T;
+    builtinComponentType?: IbspBuiltinComponentType;
+    componentProps: Partial<IbspComponentConfigProps<T>>;
+};
+
+type DefineConfig<T extends IbspComponentConfigType> = (type:T,config:BaseConfig<T>) => BaseConfig;
+
+type IbspSetupParams = {
+    page:IBSP.IPage.Page;
+    created:(
+        callback:(
+            component:IBSP.IComponent.Component,
+        )=>void
+    )=>void;
+    configComponent:null | Record<string,any>;
+}
+
+
+type IbspSetupValues = {
+    /**css */
+    baseStyle:Partial<CSSStyleDeclaration> & {};
+    config:{
+        props?:Partial<BaseConfig> |  DefineConfig[];
+        data?:Partial<BaseConfig>[];
+        event?:{
+            key:string;
+            label:string;
+            value?:null | (()=>void);
+            category?:string;
+        }[]
+    }
+
+}
+
+type IbspSetup = (params: IbspSetupParams) => Partial<IbspSetupValues>;
+
+
+
+interface IbspConfig {
+    id: string;
+    type?: 'container' | 'component';
+    label: string;
+    visible?: boolean;
+    setup: IbspSetup;
+    icon?:{
+        type:string;
+        value:string;
+    };
+    isContainer?:boolean;
+    contentContainer?:boolean;
+    sort?:number;
+    render:(params:{
+        component:IBSP.IComponent.Component,
+        page:IBSP.IPage.Page
+    }) => Promise<any> | any;
+    option?:(values:any)=>any;
+}
+
+declare function defineIbspConfig<T extends IbspComponentConfigType>(config: BaseConfig<T>): BaseConfig<T>;
+
+
+declare global{
+    interface Window {
+        defineIbspConfig: typeof defineIbspConfig;
+    }
+}