@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.9

package/es/components/design-step-check/design-step-check.css

@@ -0,0 +1,133 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-step-check {
+  height: 40px;
+  border-radius: 20px;
+  background-color: rgb(232, 235, 240);
+  display: flex;
+  align-items: center;
+  padding: 3px 2px;
+  position: relative;
+  overflow: hidden;
+}
+.gct-design-step-check::before {
+  content: "";
+  display: var(--indicator-display, block);
+  position: absolute;
+  top: 2px;
+  left: var(--indicator-left, 3px);
+  width: var(--indicator-width, 130px);
+  height: 36px;
+  border-radius: 18px;
+  background-color: rgb(255, 255, 255);
+  z-index: 1;
+  pointer-events: none;
+}
+.gct-design-step-check__item {
+  position: relative;
+  height: 36px;
+  border-radius: 18px;
+  padding: 3px;
+  padding-right: 26px;
+  min-width: 131px;
+  max-width: max-content;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  z-index: 2;
+  color: var(--gct-color-text-1);
+}
+.gct-design-step-check__item.is-selected .gct-design-step-check__item-number {
+  background-color: var(--gct-color-primary);
+  color: #fff;
+}
+
+.gct-design-step-check__item.is-selected .gct-design-step-check__item-name {
+  font-weight: bold;
+  color: rgb(33, 37, 40);
+}
+
+.gct-design-step-check__item-number {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5A5F6B;
+  font-weight: normal;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.gct-design-step-check__item-name {
+  font-size: 16px;
+  color: #5A5F6B;
+  line-height: 22px;
+  font-weight: normal;
+  flex: 1;
+  white-space: nowrap;
+}

package/es/components/design-step-check/design-step-check.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { IViewStep } from '../../interface';
+/**
+ * 设计界面步骤选择
+ */
+export declare const DesignStepCheck: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    steps: {
+        type: PropType<IViewStep[]>;
+        default: () => never[];
+    };
+    currentStep: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:currentStep" | "stepChange")[], "update:currentStep" | "stepChange", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    steps: {
+        type: PropType<IViewStep[]>;
+        default: () => never[];
+    };
+    currentStep: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
+    onStepChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    steps: IViewStep[];
+    currentStep: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design-step-check/design-step-check.mjs

@@ -0,0 +1,122 @@
+import { defineComponent, toRefs, ref, watch, onMounted, createVNode, nextTick } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './design-step-check.css';/* empty css                        */
+
+/**
+ * 设计界面步骤选择
+ */
+const DesignStepCheck = /* @__PURE__ */ defineComponent({
+  name: 'DesignStepCheck',
+  props: {
+    // 步骤数据
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    // 当前步骤
+    currentStep: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  emits: ['update:currentStep', 'stepChange'],
+  setup(props, {
+    emit,
+    expose
+  }) {
+    const ns = useNamespace('design-step-check');
+    const {
+      steps,
+      currentStep
+    } = toRefs(props);
+    const containerRef = ref();
+
+    // 内部维护的当前步骤状态
+    const innerCurrentStep = ref(currentStep.value);
+    const offsetLeft = ref(0);
+    const width = ref(0);
+
+    // 更新动画指示器位置
+    const updateIndicatorPosition = async () => {
+      await new Promise(resolve => setTimeout(resolve, 100)); // 确保 DOM 更新完成
+      await nextTick();
+      if (!containerRef.value) return;
+      const selectedIndex = steps.value.findIndex(step => step.tag === innerCurrentStep.value);
+      if (selectedIndex === -1) return;
+      const items = containerRef.value.querySelectorAll(`.${ns.e('item')}`);
+      const selectedItem = items[selectedIndex];
+      if (selectedItem) {
+        // 计算偏移量和宽度
+        offsetLeft.value = 2;
+        for (let i = 0; i < selectedIndex; i++) {
+          const item = items[i];
+          offsetLeft.value += item.offsetWidth;
+        }
+        width.value = selectedItem.offsetWidth;
+      }
+    };
+
+    // 监听外部传入的当前步骤变化
+    watch(currentStep, newValue => {
+      innerCurrentStep.value = newValue;
+      updateIndicatorPosition();
+    });
+
+    // 如果没有传入当前步骤，默认选中第一个
+    watch(steps, newSteps => {
+      if (newSteps.length > 0 && !innerCurrentStep.value) {
+        innerCurrentStep.value = newSteps[0].tag;
+        emit('update:currentStep', innerCurrentStep.value);
+        emit('stepChange', innerCurrentStep.value, newSteps[0]);
+      }
+      updateIndicatorPosition();
+    });
+
+    // 处理步骤点击
+    const handleStepClick = step => {
+      innerCurrentStep.value = step.tag;
+      emit('update:currentStep', step.tag);
+      emit('stepChange', step.tag, step);
+      updateIndicatorPosition();
+    };
+    onMounted(() => {
+      updateIndicatorPosition();
+    });
+
+    /**
+     * 设置当前步骤，用于外部控制，不需要触发事件
+     *
+     * @param {string} tag
+     */
+    function setStep(tag) {
+      if (steps.value.some(step => step.tag === tag)) {
+        innerCurrentStep.value = tag;
+        updateIndicatorPosition();
+      }
+    }
+    expose({
+      setStep
+    });
+    return () => {
+      return createVNode("div", {
+        "ref": containerRef,
+        "class": ns.b(),
+        "style": {
+          '--indicator-display': currentStep.value ? 'block' : 'none',
+          '--indicator-left': `${offsetLeft.value || -40}px`,
+          '--indicator-width': `${width.value || -131}px`
+        }
+      }, [props.steps.map(step => createVNode("div", {
+        "key": step.tag,
+        "class": [ns.e('item'), ns.is('selected', step.tag === innerCurrentStep.value)],
+        "onClick": () => handleStepClick(step)
+      }, [createVNode("div", {
+        "class": ns.e('item-number')
+      }, [props.steps.findIndex(s => s.tag === step.tag) + 1]), createVNode("div", {
+        "class": ns.e('item-name')
+      }, [step.name])]))]);
+    };
+  }
+});
+
+export { DesignStepCheck };

package/es/components/design-view-layout/design-view-layout.css

@@ -0,0 +1,157 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+* 设计视图布局组件样式
+* 使用 BEM 命名规范
+*/
+.gct-design-view-layout {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.gct-design-view-layout :global(.gct-modal-name-editor__input .ant-input.ant-input-sm) {
+  color: rgb(26, 29, 35);
+}
+.gct-design-view-layout__header {
+  width: 100%;
+  height: 69px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 0 24px;
+  border-bottom: 1px solid #E0E3EB;
+}
+
+.gct-design-view-layout__header-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+.gct-design-view-layout__header-info {
+  display: inline-block;
+  margin-left: 16px;
+}
+
+.gct-design-view-layout__header-sub-title {
+  font-size: 12px;
+  color: rgb(90, 95, 107);
+}
+
+.gct-design-view-layout__header-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.gct-design-view-layout__header-left {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gct-design-view-layout__header-right {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-action-btn {
+  display: flex;
+  align-items: center;
+}
+.gct-design-view-layout__header-action-btn:focus {
+  border-color: #E0E3EB;
+  color: rgba(0, 0, 0, 0.85);
+}
+.gct-design-view-layout__header-action-btn :global(.gct-iconfont) {
+  font-size: 14px;
+  margin-right: 6px;
+}
+.gct-design-view-layout__header-action-btn :global(span) {
+  height: 22px;
+}
+
+.gct-design-view-layout__content {
+  height: calc(100% - 70px);
+}

package/es/components/design-view-layout/design-view-layout.d.ts

@@ -0,0 +1 @@
+export declare const DesignViewLayout: any;

package/es/components/design-view-layout/design-view-layout.mjs

@@ -0,0 +1,209 @@
+import { defineComponent, ref, toRefs, computed, createVNode, resolveComponent, Fragment, mergeProps, isVNode } from 'vue';
+import { useNamespace, t } from '@gct-paas/core';
+import { ModalNameEditor } from '../modal-name-editor/modal-name-editor.mjs';
+import { DesignStepCheck } from '../design-step-check/design-step-check.mjs';
+import './design-view-layout.css';/* empty css                         */
+
+// TODO: 需要修改实现，应该由外部传入，使用插槽模式修改
+// import sandboxBtn from '/@app-designer/views/sandbox/components/preview-btn.vue';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const DesignViewLayout = /* @__PURE__ */ defineComponent({
+  name: 'DesignViewLayout',
+  // components: { sandboxBtn },
+  props: {
+    // 当前数据的主要标题名称
+    name: {
+      type: String,
+      default: '未命名'
+    },
+    defaultName: {
+      type: String,
+      default: '未命名卡片名称'
+    },
+    editName: {
+      type: Boolean,
+      default: true
+    },
+    // 可修改名称上的副标题
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    // 当前步骤标识符
+    step: {
+      type: String,
+      default: ''
+    },
+    // 设计界面步骤
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    save: {
+      type: Function
+    },
+    next: {
+      type: Function
+    }
+  },
+  emits: ['changeName', 'back', 'stepChange'],
+  setup(props, {
+    slots,
+    emit,
+    expose
+  }) {
+    const ns = useNamespace('design-view-layout');
+    const stepCheckRef = ref();
+    const {
+      name,
+      subTitle,
+      step,
+      steps
+    } = toRefs(props);
+    // 是否正在操作中，下一步和保存按钮会根据这个状态来禁用
+    const isLoading = ref(false);
+    const val = computed({
+      get() {
+        return name.value;
+      },
+      set(val) {
+        if (name.value !== val) {
+          name.value = val;
+          emit('changeName', val);
+        }
+      }
+    });
+
+    // 判断浏览器是否可以后退，用来显示返回按钮
+    const isBack = computed(() => {
+      return history.length > 1 || !!window.$wujie;
+    });
+    const isLastStep = computed(() => {
+      return steps.value.length === 0 || steps.value[steps.value.length - 1]?.tag === step.value;
+    });
+
+    // async function onSaveName(name: string): Promise<void> {
+    //   emit('changeName', name);
+    // }
+
+    function onBack(e) {
+      e.stopPropagation();
+      // 触发返回事件
+      emit('back', e);
+    }
+    async function onNext() {
+      // 触发下一步事件
+      if (props.next) {
+        try {
+          isLoading.value = true;
+          await props.next();
+        } catch (error) {
+          console.error('DesignViewLayout: next function error', error);
+        } finally {
+          isLoading.value = false;
+        }
+      }
+    }
+    async function onSave() {
+      // 触发保存事件
+      if (props.save) {
+        try {
+          isLoading.value = true;
+          await props.save();
+        } catch (error) {
+          console.error('DesignViewLayout: save function error', error);
+        } finally {
+          isLoading.value = false;
+        }
+      }
+    }
+    function setStep(stepId) {
+      if (stepCheckRef.value) {
+        stepCheckRef.value.setStep(stepId);
+      }
+    }
+    expose({
+      setStep
+    });
+    return () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('header')
+      }, [createVNode("div", {
+        "class": ns.e('header-left')
+      }, [isBack.value ? createVNode("div", {
+        "class": ns.e('header-back'),
+        "onClick": onBack
+      }, [createVNode(resolveComponent("assets-svg-icon"), {
+        "src": "/assets/card-design/arrow_back.svg"
+      }, null)]) : null, props.editName ? createVNode("div", {
+        "class": ns.e('header-info')
+      }, [createVNode("div", {
+        "class": ns.e('header-sub-title')
+      }, [subTitle.value]), createVNode("div", {
+        "class": ns.e('header-title')
+      }, [createVNode(ModalNameEditor, {
+        "value": val.value,
+        "onUpdate:value": $event => val.value = $event,
+        "defaultName": props.defaultName
+      }, null)])]) : null]), createVNode("div", {
+        "class": ns.e('header-center')
+      }, [steps.value.length > 0 ? createVNode(DesignStepCheck, {
+        "ref": ref => stepCheckRef.value = ref,
+        "steps": steps.value,
+        "currentStep": step.value,
+        "onStepChange": (stepId, stepData) => {
+          emit('stepChange', stepId, stepData);
+        }
+      }, null) : null]), createVNode("div", {
+        "class": ns.e('header-right')
+      }, [slots.headerRight ? slots.headerRight() : null, createVNode("div", {
+        "class": ns.e('header-actions')
+      }, [props.steps.length > 0 ? isLastStep.value ? createVNode(Fragment, null, [props.actions.map(actionProps => {
+        // return !actionProps.isSupportSandbox ? (
+        //   <a-button
+        //     class={style.header__action_btn}
+        //     {...actionProps}
+        //   >
+        //     {actionProps.title}
+        //   </a-button>
+        // ) : (
+        //   <sandboxBtn {...actionProps} />
+        // );
+        return createVNode(resolveComponent("a-button"), mergeProps({
+          "class": ns.e('header-action-btn')
+        }, actionProps), {
+          default: () => [actionProps.title]
+        });
+      }), createVNode(resolveComponent("a-button"), {
+        "class": ns.e('header-action-btn'),
+        "type": "primary",
+        "loading": isLoading.value,
+        "onClick": onSave,
+        "icon": createVNode("i", {
+          "class": "gct-iconfont icon-icon_baocun_btn"
+        }, null)
+      }, _isSlot(_slot = t('sys.saveText')) ? _slot : {
+        default: () => [_slot]
+      })]) : createVNode(resolveComponent("a-button"), {
+        "type": "primary",
+        "onClick": onNext
+      }, _isSlot(_slot2 = t('sys.nextStep')) ? _slot2 : {
+        default: () => [_slot2]
+      }) : null])])]), createVNode("div", {
+        "class": ns.e('content')
+      }, [slots.default ? slots.default() : null])]);
+    };
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+});
+
+export { DesignViewLayout };

package/es/components/editor/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/components/editor/index.mjs

@@ -0,0 +1,15 @@
+import BorderEditor from './style/border-editor/border-editor.vue2.mjs';
+import SpacingEditor from './style/spacing-editor/spacing-editor.vue2.mjs';
+import PositionEditor from './style/position-editor/position-editor.vue2.mjs';
+import _sfc_main from './style/font-editor/font-editor.vue.mjs';
+
+const Editor = {
+  install(app) {
+    app.component("BorderEditor", BorderEditor);
+    app.component("SpacingEditor", SpacingEditor);
+    app.component("PositionEditor", PositionEditor);
+    app.component("FontEditor", _sfc_main);
+  }
+};
+
+export { Editor as default };