@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.6

package/src/HeaderBar/components/BarTooltip.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-tooltip
+    class="box-item"
+    effect="dark"
+    :content="content"
+    placement="bottom"
+    :show-after="showAfter"
+    :disabled="disabled"
+  >
+    <slot></slot>
+    <template #content>
+      <slot name="content"></slot>
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    showAfter?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    showAfter: 1000,
+    disabled: false,
+  }
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/HeaderBar/index.vue

@@ -0,0 +1,513 @@
+<template>
+  <div class="header-bar">
+    <div class="header-bar__left">
+      <div class="title">
+        <span :class="functionData?.status?.value === '已发布' ? '' : 'status'">
+          {{ `${functionData?.status?.value ?? ''} · ` }}
+        </span>
+        <bar-tooltip
+          :show-after="0"
+          :content="functionData?.title?.value ?? ''"
+        >
+          <span>{{ functionData?.title?.value ?? '' }}</span>
+        </bar-tooltip>
+      </div>
+      <img
+        class="title-edit"
+        src="../assets/img/header/edit.png"
+        :class="[readOnly ? 'read-only' : '']"
+        @click="emitFunc('editTitle', functionData?.title?.key)"
+      />
+    </div>
+    <div class="header-bar__center">
+      <div class="history-btn" v-if="showDoBtn">
+        <bar-tooltip content="撤销">
+          <div
+            :class="[
+              'undo',
+              functionData?.undo?.clickable ? '' : 'disable',
+              readOnly ? 'read-only' : '',
+            ]"
+            @click="onUndo"
+          >
+            <img src="../assets/img/header/undo.svg" />
+          </div>
+        </bar-tooltip>
+        <bar-tooltip content="重做">
+          <div
+            :class="[
+              'redo',
+              functionData?.redo?.clickable ? '' : 'disable',
+              readOnly ? 'read-only' : '',
+            ]"
+            @click="onRedo"
+          >
+            <img src="../assets/img/header/redo.svg" />
+          </div>
+        </bar-tooltip>
+      </div>
+      <div class="label">页面尺寸</div>
+      <el-select
+        v-if="functionData && functionData.simulatorSizeList"
+        :key="functionData.simulatorSizeList.key"
+        v-model="curSelectViewPort.all"
+        style="width: 250px"
+        class="select-wrap"
+        placeholder="设备尺寸"
+        @change="selectView"
+      >
+        <el-option
+          v-for="opt in simulatorSizeList"
+          :key="opt.value.name"
+          :label="`${opt.value.label} (${opt.value.value.width} * ${opt.value.value.height})`"
+          :value="opt.value.name"
+        />
+      </el-select>
+      <bar-tooltip :content="`切换${viewPortTypeIsRow ? '竖屏' : '横屏'}`">
+        <div class="img-box" @click="onToggle">
+          <div :class="['box-1', viewPortTypeIsRow ? '' : 'inactive']" />
+          <div :class="['box-2', viewPortTypeIsRow ? 'inactive' : '']" />
+          <div :class="['box-3', viewPortTypeIsRow ? 'inactive' : '']" />
+        </div>
+      </bar-tooltip>
+      <bar-tooltip content="缩放画布">
+        <div class="scale-area">
+          <div
+            :class="['scale', percent < 15 ? 'disabled' : '']"
+            @click="onScale('-')"
+          >
+            -
+          </div>
+          <div class="percent">{{ percent }}%</div>
+          <div class="scale" @click="onScale('+')">+</div>
+        </div>
+      </bar-tooltip>
+    </div>
+    <div class="header-bar__right">
+      <div class="tips">
+        <bar-tooltip content="预览">
+          <div class="img-box" @click="$emit('preview')">
+            <img src="../assets/img/header/preview.svg" />
+          </div>
+        </bar-tooltip>
+        <bar-tooltip content="复制地址">
+          <div class="img-box" @click="$emit('copyUrl')">
+            <img src="../assets/img/header/link.svg" />
+          </div>
+        </bar-tooltip>
+      </div>
+      <div class="btns">
+        <bar-tooltip
+          :disabled="!showTooltip"
+          :show-after="0"
+          content="页面正在审核中，请完成审核后再来操作"
+        >
+          <span>
+            <el-button
+              :class="[readOnly ? 'read-only' : '']"
+              @click="emitFunc('save')"
+            >
+              保存
+            </el-button>
+          </span>
+        </bar-tooltip>
+        <bar-tooltip
+          :disabled="!showTooltip"
+          :show-after="0"
+          content="页面正在审核中，请完成审核后再来操作"
+        >
+          <span style="margin-left: 12px">
+            <el-button
+              type="primary"
+              :class="[readOnly ? 'read-only' : '']"
+              @click="emitFunc('publish')"
+              color="#F5DBC1"
+            >
+              发布
+            </el-button>
+          </span>
+        </bar-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import {
+  ref,
+  reactive,
+  watch,
+  defineProps,
+  withDefaults,
+  defineEmits,
+  computed,
+} from 'vue';
+
+import { FunctionData, Simulator } from '@cicctencent/low-code-core';
+import { changeEnum2Array } from '../utils';
+import BarTooltip from './components/BarTooltip.vue';
+import { debounce } from '@jt/ark-util';
+
+const props = withDefaults(
+  defineProps<{
+    functionData?: FunctionData;
+    readOnly?: boolean;
+    scalePercent?: number;
+  }>(),
+  {
+    functionData: null,
+    readOnly: false,
+    scalePercent: null,
+  }
+);
+
+const emits = defineEmits([
+  'updateScale',
+  'save',
+  'preview',
+  'publish',
+  'editTitle',
+  'copyUrl',
+  'undo',
+  'redo',
+]);
+
+const curSelectViewPort = reactive({
+  phone: '',
+  pad: '',
+  desktop: '',
+  all: '',
+});
+let curViewPortConfig = reactive<Simulator>(null);
+
+// 当前原始模拟器数据 没有则返回null😅 有什么用 => 只要切换竖屏或者改变百分比就返回null
+// 如果通讯器不更新数据这里是不会变化的
+const viewPort = computed(() => {
+  const width = parseInt(
+    props.functionData?.simulatorSizeList?.value?.data?.width
+  );
+  const height = parseInt(
+    props.functionData?.simulatorSizeList?.value?.data?.height
+  );
+  if (isNaN(width) || isNaN(height)) return null;
+  if (width && height) {
+    const viewPort = props.functionData.simulatorSizeList.value.options.find(
+      v => v.value.height === height && v.value.width === width
+    );
+    if (viewPort) return viewPort;
+  }
+  return null;
+});
+
+// 是否展示撤销重做按钮
+const showDoBtn = computed(() => {
+  const isShowUndo = props.functionData?.undo?.value;
+  const isShowRedo = props.functionData?.redo?.value;
+  return isShowRedo && isShowUndo;
+});
+
+// 撤销重做改变缩放比例
+watch(
+  () => props.scalePercent,
+  newVal => {
+    percent.value = newVal || 100;
+  }
+);
+
+// 当前原始模拟器宽高 重新选择和切换竖屏能改变它
+const viewSize = ref({
+  width: 414,
+  height: 736,
+});
+
+// 是否展示提示弹窗
+const showTooltip = computed(
+  () => props?.functionData?.status?.value === '审核中'
+);
+const simulatorSizeList = computed(() => {
+  if (props.functionData) {
+    return changeEnum2Array(props.functionData.simulatorSizeList.value.options);
+  }
+  return [];
+});
+
+watch(viewPort, val => {
+  if (val) {
+    curSelectViewPort.all = val.name;
+    curViewPortConfig = { ...val };
+    viewSize.value = { ...val.value };
+  }
+});
+
+const emitFunc = (key, value?) => {
+  if (!props.readOnly) emits(key, value);
+};
+
+const selectView = (name: string) => {
+  let curItem = {} as Simulator;
+  props.functionData.simulatorSizeList.value.options.forEach(item => {
+    if (item.name === name) {
+      const multiplier = percent.value / 100;
+      // 如果是竖屏
+      if (!viewPortTypeIsRow.value) {
+        curItem = Object.assign({
+          percent: percent.value,
+        }, item, {
+          value: {
+            normalWidth: item.value.width,
+            normalHeight: item.value.height,
+            width: item.value.width * multiplier,
+            height: item.value.height * multiplier,
+          },
+        });
+      } else {
+        curItem = Object.assign({
+          percent: percent.value,
+        }, item, {
+          value: {
+            normalWidth: item.value.width,
+            normalHeight: item.value.height,
+            width: item.value.height * multiplier,
+            height: item.value.width * multiplier,
+          },
+        });
+      }
+      curViewPortConfig = curItem;
+      viewSize.value = item.value;
+    }
+  });
+  emits('updateScale', {
+    key: props.functionData.simulatorSizeList.key,
+    scale: curItem.value,
+  });
+};
+
+// 缩放百分比
+const percent = ref(100);
+const onScale = (type: string) => {
+  percent.value =
+    type === '+'
+      ? percent.value + 15
+      : percent.value >= 15
+      ? percent.value - 15
+      : percent.value;
+  
+  if (curViewPortConfig?.name) {
+    // 需要用原始大小去计算 => 但是只要切换竖屏或者改变百分比就拿不到原始大小
+    const { width, height } = viewSize.value;
+    const curScale = {
+      normalWidth: width,
+      normalHeight: height,
+      width: (width * percent.value) / 100,
+      height: (height * percent.value) / 100,
+      percent: percent.value,
+    };
+    curViewPortConfig.value = curScale;
+    emits('updateScale', {
+      key: props.functionData.simulatorSizeList.key,
+      scale: curScale,
+    });
+  }
+};
+
+// 竖屏激活
+const viewPortTypeIsRow = ref(false);
+const onToggle = () => {
+  viewPortTypeIsRow.value = !viewPortTypeIsRow.value;
+  if (curViewPortConfig?.name) {
+    const { width, height } = curViewPortConfig.value;
+    const curScale = { width: height, height: width };
+    curViewPortConfig.value = curScale;
+    viewSize.value = curScale;
+    emits('updateScale', {
+      key: props.functionData.simulatorSizeList.key,
+      scale: curScale,
+    });
+  }
+};
+
+// 撤销
+const onUndo = debounce(() => {
+  emits('undo', {
+    key: props.functionData.undo.key,
+  });
+}, 100);
+
+// 重做
+const onRedo = debounce(() => {
+  emits('redo', {
+    key: props.functionData.redo.key,
+  });
+}, 100);
+</script>
+
+<style lang="scss" scoped>
+.header-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  white-space: nowrap;
+  // overflow-x: auto;
+  .read-only {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  &__left {
+    flex: 1 1 320px;
+    display: flex;
+    align-items: center;
+    .title {
+      margin-right: 10px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 22px;
+      color: #4b515e;
+      width: 300px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .status {
+        color: #b7b7b7;
+      }
+    }
+    .title-edit {
+      cursor: pointer;
+    }
+  }
+  &__center {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .label {
+      font-size: 14px;
+      line-height: 20px;
+      color: #1e1917;
+    }
+    .select-wrap {
+      margin: 0 24px 0 9px;
+    }
+    .img-box {
+      position: relative;
+      .box-1 {
+        @extend .box-2;
+        transform: rotate(90deg);
+        transform-origin: 6px 14px;
+      }
+      .box-2 {
+        box-sizing: border-box;
+        height: 20px;
+        width: 12px;
+        position: absolute;
+        left: 15px;
+        top: 10px;
+        border: 1px solid #4f5052;
+        border-radius: 2px;
+        background-color: #fff;
+        z-index: 10;
+      }
+      .box-3 {
+        position: absolute;
+        height: 1px;
+        width: 3px;
+        top: 26px;
+        left: 19px;
+        background-color: #4f5052;
+        z-index: 10;
+      }
+      .inactive {
+        opacity: 0.2;
+        z-index: 1;
+      }
+    }
+    .scale-area {
+      margin-left: 10px;
+      font-family: 'Noto Sans SC';
+      width: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      background-color: #fff;
+      border-radius: 6px;
+      .scale {
+        font-size: 20px;
+        cursor: pointer;
+        flex: 1;
+        text-align: center;
+      }
+      .disabled {
+        cursor: not-allowed;
+        color: #a8abb2;
+      }
+      .percent {
+        width: 62px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-left: 1px solid #dbdbdb;
+        border-right: 1px solid #dbdbdb;
+      }
+    }
+    .history-btn {
+      margin-left: 20px;
+      margin-right: 10px;
+      display: flex;
+      .undo,
+      .redo {
+        display: flex;
+        margin-right: 10px;
+        cursor: pointer;
+        line-height: 40px;
+        img {
+          width: 25px;
+          vertical-align: middle;
+        }
+      }
+      .disable {
+        pointer-events: none;
+        cursor: not-allowed !important;
+        opacity: 0.3;
+      }
+    }
+  }
+  &__right {
+    flex: 1 1 485px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .tips {
+      .img-box:first-child {
+        margin-right: 10px;
+      }
+    }
+    .btns {
+      .el-button:first-child {
+        &:focus,
+        &:hover {
+          color: #704528;
+          border-color: #f5dbc1;
+          background-color: #f5dbc1;
+        }
+      }
+      .el-button--primary {
+        color: #704528;
+      }
+    }
+  }
+
+  .img-box {
+    display: inline-block;
+    width: 51px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #fff;
+    cursor: pointer;
+    img {
+      vertical-align: middle;
+    }
+  }
+}
+</style>