编辑器-热点-个性标签：表单功能

packages/qjkankan-editor/src/assets/style/base/normalize.css

@@ -384,8 +384,7 @@
     display: none;
   }
   .el-color-picker__panel .el-input{
-    pointer-events: none;
-    
+    /* pointer-events: none; */
   }
   .el-color-picker__panel .el-input__inner{
     background-color: transparent;

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -43,7 +43,10 @@
           </div>
         </div>
 
-        <div class="title-setting">
+        <div
+          class="title-setting"
+          v-if="hotspot.hotspotIconType !== 'personalized_tag'"
+        >
           <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
           <div class="title-input-wrapper">
             <input
@@ -53,57 +56,53 @@
             />
             <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
           </div>
-          <template
-            v-if="hotspot.hotspotIconType !== 'personalized_tag'"
+          <div
+            class="remark"
           >
-            <div
-              class="remark"
-            >
-              {{ $i18n.t('hotspot.title_show_mode') }}
-            </div>
-            <TabbarSwitcher
-              class="display-mode-selector"
-              :tabList="[
-                $i18n.t('hotspot.show_on_hover'),
-                $i18n.t('hotspot.always_show'),
-                $i18n.t('hotspot.never_show'),
-              ]"
-              :activeIdx="currentTitleDispayModeIdx"
-              @select="onSelectTitleDisplayMode"
-            />
-            <div
-              class="remark"
-            >
-              {{ $i18n.t('hotspot.title_position') }}
-            </div>
-            <TabbarSwitcherIcon
-              class="display-mode-selector"
-              :tabList="[
-                {
-                  icon: 'icon-up',
-                  tip: $i18n.t('hotspot.title_top'),
-                },
-                {
-                  icon: 'icon-down',
-                  tip: $i18n.t('hotspot.title_bottom'),
-                },
-                {
-                  icon: 'icon-left',
-                  tip: $i18n.t('hotspot.title_left'),
-                },
-                {
-                  icon: 'icon-right',
-                  tip: $i18n.t('hotspot.title_right'),
-                },
-                {
-                  icon: 'icon-mobile',
-                  tip: $i18n.t('hotspot.title_custom'),
-                },
-              ]"
-              :activeIdx="currentTitlePositionIdx"
-              @select="onSelectTitlePosition"
-            />
-          </template>
+            {{ $i18n.t('hotspot.title_show_mode') }}
+          </div>
+          <TabbarSwitcher
+            class="display-mode-selector"
+            :tabList="[
+              $i18n.t('hotspot.show_on_hover'),
+              $i18n.t('hotspot.always_show'),
+              $i18n.t('hotspot.never_show'),
+            ]"
+            :activeIdx="currentTitleDispayModeIdx"
+            @select="onSelectTitleDisplayMode"
+          />
+          <div
+            class="remark"
+          >
+            {{ $i18n.t('hotspot.title_position') }}
+          </div>
+          <TabbarSwitcherIcon
+            class="display-mode-selector"
+            :tabList="[
+              {
+                icon: 'icon-up',
+                tip: $i18n.t('hotspot.title_top'),
+              },
+              {
+                icon: 'icon-down',
+                tip: $i18n.t('hotspot.title_bottom'),
+              },
+              {
+                icon: 'icon-left',
+                tip: $i18n.t('hotspot.title_left'),
+              },
+              {
+                icon: 'icon-right',
+                tip: $i18n.t('hotspot.title_right'),
+              },
+              {
+                icon: 'icon-mobile',
+                tip: $i18n.t('hotspot.title_custom'),
+              },
+            ]"
+            :activeIdx="currentTitlePositionIdx"
+            @select="onSelectTitlePosition"
+          />
         </div>
         
         <div class="effect-setting">

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized_tag.vue

@@ -1,25 +1,140 @@
 <template>
   <div class="hotspot-icon-personalized-tag">
-    <div class="line-show-setting">
+    <div class="line-show-setting switcher-wrap">
       <span class="label">是否显示标注线</span>
       <Switcher :value="isShowLine" @change="onSwitcherChange"></Switcher>
     </div>
+    
     <div class="svg-wrapper"></div>
+
+    <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
+    <div class="title-input-wrapper">
+      <input
+        v-model.trim="hotspotTitle"
+        type="text" maxlength="15"
+        :placeholder="$i18n.t('hotspot.title_placeholder')"
+      />
+      <span class="count">{{ hotspotTitle.length }}/15</span>
+    </div>
+
+    <div class="remark">形状填充</div>
+    <div
+      class="color-picker-wrap"
+    >
+      <div class="color-value">{{ fillColor }}</div>
+      <div
+        class="color-preview"
+        :style="`background-color: ${fillColor};`"
+      />
+      <ColorPicker
+        show-alpha
+        :predefine="predefineColors"
+        :value="fillColor"
+        @active-change="onFillColorActiveChange"
+      />
+    </div>
+
+    <div class="remark">形状描边</div>
+    <div
+      class="color-picker-wrap"
+    >
+      <div class="color-value">{{ borderColor }}</div>
+      <div
+        class="color-preview"
+        :style="`background-color: ${borderColor};`"
+      />
+      <ColorPicker
+        show-alpha
+        :predefine="predefineColors"
+        :value="borderColor"
+        @active-change="onBorderColorActiveChange"
+      />
+    </div>
+
+    <div class="remark">文字颜色</div>
+    <div
+      class="color-picker-wrap"
+    >
+      <div class="color-value">{{ textColor }}</div>
+      <div
+        class="color-preview"
+        :style="`background-color: ${textColor};`"
+      />
+      <ColorPicker
+        show-alpha
+        :predefine="predefineColors"
+        :value="textColor"
+        @active-change="onTextColorActiveChange"
+      />
+    </div>
+
+    <div class="remark">文字排序</div>
+    <TabbarSwitcherIcon
+      class="text-direction-switcher"
+      :tabList="[
+        {
+          icon: 'icon-text_right',
+          tip: '从左到右',
+        },
+        {
+          icon: 'icon-text_down',
+          tip: '从上到下',
+        },
+      ]"
+      :activeIdx="currentTextDirectionIdx"
+      @select="onSelectTextDirection"
+    />
+
+    <div class="text-wrap-setting switcher-wrap">
+      <span class="label">是否换行显示</span>
+      <Switcher :value="isTextWrap" @change="onTextWrapChange"></Switcher>
+    </div>
+
+    <div
+      class="text-num-per-line-wrap"
+      :class="{
+        disable: !isTextWrap
+      }"
+    >
+      <div class="remark">每行显示</div>
+      <div class="value-wrap">
+        <input
+          v-model.trim.number="textNumPerLine"
+          @blur="onTextNumPerLineInputBlur"
+          type="number"
+          min="1"
+          :disabled="!isTextWrap"
+        >
+        <span class="remark">字</span>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script>
 import * as d3 from "d3";
+import { ColorPicker } from "element-ui";
 import Switcher from "@/components/shared/Switcher.vue";
+import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 
 export default {
   components: {
     Switcher,
+    ColorPicker,
+    TabbarSwitcherIcon,
   },
   data() {
     return {
       isShowLine: true,
       lineDirection: '',
+      hotspotTitle: '',
+      fillColor: 'rgba(0, 0, 0, 1)',
+      borderColor: 'rgba(0, 0, 0, 1)',
+      textColor: 'rgba(0, 0, 0, 1)',
+      textDirection: '',
+      isTextWrap: false,
+      textNumPerLine: 10,
       
       svgNode: null,
 
@@ -123,20 +238,38 @@ export default {
           x: '0%',
           y: 'calc(50% - 21px / 2)',
         },
-      ]
+      ],
+
+      predefineColors: [
+        "rgba(208, 2, 27, 1)",
+        "rgba(245, 166, 35, 1)",
+        "rgba(248, 231, 28, 1)",
+        "rgba(139, 87, 42, 1)",
+        "rgba(126, 211, 33, 1)",
+        "rgba(65, 117, 5, 1)",
+        "rgba(189, 16, 224, 1)",
+        "rgba(144, 19, 254, 1)",
+        "rgba(74, 144, 226, 1)",
+        "rgba(80, 227, 194, 1)",
+        "rgba(184, 233, 134, 1)",
+        "rgba(0, 0, 0, 1)",
+        "rgba(74, 74, 74, 1)",
+        "rgba(155, 155, 155, 1)",
+        "rgba(255, 255, 255, 1)",
+      ],
     }
   },
-  watch: {
-    isShowLine: {
-      handler(vNew) {
-        this.emit()
+  computed: {
+    currentTextDirectionIdx() {
+      switch (this.textDirection) {
+        case 'left-right':
+          return 0
+        case 'top-bottom':
+          return 1
+        default: 
+          return 0
       }
     },
-    lineDirection: {
-      handler() {
-        this.emit()
-      }
-    }
   },
   methods: {
     onSwitcherChange(v) {
@@ -150,7 +283,38 @@ export default {
           lineDirection: this.lineDirection,
         }
       })
-    }
+    },
+    onFillColorActiveChange(e) {
+      this.fillColor = e
+    },
+    onBorderColorActiveChange(e) {
+      this.borderColor = e
+    },
+    onTextColorActiveChange(e) {
+      this.textColor = e
+    },
+    onSelectTextDirection(idx) {
+      switch (idx) {
+        case 0:
+          this.textDirection = 'left-right'
+          break;
+        case 1:
+          this.textDirection = 'top-bottom'
+          break;
+        default:
+          break;
+      }
+    },
+    onTextWrapChange(v) {
+      this.isTextWrap = v
+    },
+    onTextNumPerLineInputBlur() {
+      if (this.textNumPerLine < 1) {
+        this.textNumPerLine = 1
+      } else {
+        this.textNumPerLine = Math.round(this.textNumPerLine)
+      }
+    },
   },
   mounted() {
     this.svgNode = d3.select('.svg-wrapper')
@@ -261,16 +425,29 @@ export default {
 
 <style lang="less" scoped>
 .hotspot-icon-personalized-tag {
-  > .line-show-setting {
+  .remark-highlight {
+    margin-top: 16px;
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .remark {
+    margin-top: 16px;
+    font-size: 14px;
+    color: #FFFFFF;
+    opacity: 0.6;
+  }
+
+  > .switcher-wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 18px;
+    margin-top: 16px;
     .label {
       color: rgba(255, 255, 255, 0.6);
       font-size: 14px;
     }
   }
+
   > .svg-wrapper {
     margin-top: 16px;
     height: 110px;
@@ -278,5 +455,105 @@ export default {
     border-radius: 2px;
     border: 1px solid #404040;
   }
+
+  >.title-input-wrapper {
+    position: relative;
+    border: 1px solid rgba(151, 151, 151, 0.2);
+    padding: 0 16px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    height: 36px;
+    width: 100%;
+    margin-top: 18px;
+    &:focus-within {
+      border-color: #0076F6;
+    }
+    >input {
+      border: none;
+      background: transparent;
+      outline: none;
+      height: 100%;
+      width: calc(100% - 50px);
+      padding: 0;
+      color: #fff;
+      letter-spacing: 1px;
+      font-size: 14px;
+    }
+    >.count {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 16px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  > .color-picker-wrap {
+    margin-top: 16px;
+    height: 36px;
+    background: #1a1b1d;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 16px;
+    align-items: center;
+    position: relative;
+    .color-value {
+      font-size: 14px;
+      color: #FFFFFF;
+    }
+    .color-preview {
+      width: 26px;
+      height: 26px;
+      border-radius: 2px;
+    }
+    /deep/.el-color-picker {
+      position: absolute;
+      top: 0;
+      left: 0;
+      // z-index: 10;
+      width: 100%;
+      height: 100%;
+    }
+    /deep/.el-color-picker__trigger {
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .text-direction-switcher {
+    margin-top: 16px;
+  }
+
+  .text-num-per-line-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    .remark {
+      margin-top: initial;
+    }
+    .value-wrap {
+      display: flex;
+      align-items: center;
+      > input {
+        width: 60px;
+        height: 36px;
+        background: #1A1B1D;
+        border-radius: 2px;
+        border: 1px solid #404040;
+        font-size: 14px;
+        color: #FFFFFF;
+        margin-right: 10px;
+        padding-left: 16px;
+        &:focus {
+          border-color: @color;
+        }
+      }
+    }
+  }
 }
 </style>