编辑器-基础：图标提供到位后，完善自定义按钮功能。

packages/code/public/static/lib/iconfontQJ1.1.0/demo_index.html

@@ -55,6 +55,42 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe6f4;</span>
+                <div class="name">eye_on</div>
+                <div class="code-name">&amp;#xe6f4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f5;</span>
+                <div class="name">eye_off</div>
+                <div class="code-name">&amp;#xe6f5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">show_more_finish</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67c;</span>
+                <div class="name">show_more_music</div>
+                <div class="code-name">&amp;#xe67c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67e;</span>
+                <div class="name">show_more</div>
+                <div class="code-name">&amp;#xe67e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67f;</span>
+                <div class="name">show_more_vr</div>
+                <div class="code-name">&amp;#xe67f;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe6f3;</span>
                 <div class="name">top</div>
                 <div class="code-name">&amp;#xe6f3;</div>
@@ -750,9 +786,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1642757115929') format('woff2'),
-       url('iconfont.woff?t=1642757115929') format('woff'),
-       url('iconfont.ttf?t=1642757115929') format('truetype');
+  src: url('iconfont.woff2?t=1657783922543') format('woff2'),
+       url('iconfont.woff?t=1657783922543') format('woff'),
+       url('iconfont.ttf?t=1657783922543') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -779,6 +815,60 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-eye_on"></span>
+            <div class="name">
+              eye_on
+            </div>
+            <div class="code-name">.icon-eye_on
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-eye_off"></span>
+            <div class="name">
+              eye_off
+            </div>
+            <div class="code-name">.icon-eye_off
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-show_more_finish"></span>
+            <div class="name">
+              show_more_finish
+            </div>
+            <div class="code-name">.icon-show_more_finish
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-show_more_music"></span>
+            <div class="name">
+              show_more_music
+            </div>
+            <div class="code-name">.icon-show_more_music
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-show_more"></span>
+            <div class="name">
+              show_more
+            </div>
+            <div class="code-name">.icon-show_more
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-show_more_vr"></span>
+            <div class="name">
+              show_more_vr
+            </div>
+            <div class="code-name">.icon-show_more_vr
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-top"></span>
             <div class="name">
               top
@@ -1824,6 +1914,54 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-eye_on"></use>
+                </svg>
+                <div class="name">eye_on</div>
+                <div class="code-name">#icon-eye_on</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-eye_off"></use>
+                </svg>
+                <div class="name">eye_off</div>
+                <div class="code-name">#icon-eye_off</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-show_more_finish"></use>
+                </svg>
+                <div class="name">show_more_finish</div>
+                <div class="code-name">#icon-show_more_finish</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-show_more_music"></use>
+                </svg>
+                <div class="name">show_more_music</div>
+                <div class="code-name">#icon-show_more_music</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-show_more"></use>
+                </svg>
+                <div class="name">show_more</div>
+                <div class="code-name">#icon-show_more</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-show_more_vr"></use>
+                </svg>
+                <div class="name">show_more_vr</div>
+                <div class="code-name">#icon-show_more_vr</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-top"></use>
                 </svg>
                 <div class="name">top</div>

packages/code/public/static/lib/iconfontQJ1.1.0/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2947721 */
-  src: url('iconfont.woff2?t=1642757115929') format('woff2'),
-       url('iconfont.woff?t=1642757115929') format('woff'),
-       url('iconfont.ttf?t=1642757115929') format('truetype');
+  src: url('iconfont.woff2?t=1657783922543') format('woff2'),
+       url('iconfont.woff?t=1657783922543') format('woff'),
+       url('iconfont.ttf?t=1657783922543') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-eye_on:before {
+  content: "\e6f4";
+}
+
+.icon-eye_off:before {
+  content: "\e6f5";
+}
+
+.icon-show_more_finish:before {
+  content: "\e67a";
+}
+
+.icon-show_more_music:before {
+  content: "\e67c";
+}
+
+.icon-show_more:before {
+  content: "\e67e";
+}
+
+.icon-show_more_vr:before {
+  content: "\e67f";
+}
+
 .icon-top:before {
   content: "\e6f3";
 }

packages/code/public/static/lib/iconfontQJ1.1.0/iconfont.json

@@ -6,6 +6,48 @@
   "description": "全景看看1.1.0",
   "glyphs": [
     {
+      "icon_id": "30581503",
+      "name": "eye_on",
+      "font_class": "eye_on",
+      "unicode": "e6f4",
+      "unicode_decimal": 59124
+    },
+    {
+      "icon_id": "30581504",
+      "name": "eye_off",
+      "font_class": "eye_off",
+      "unicode": "e6f5",
+      "unicode_decimal": 59125
+    },
+    {
+      "icon_id": "19543927",
+      "name": "show_more_finish",
+      "font_class": "show_more_finish",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "19543929",
+      "name": "show_more_music",
+      "font_class": "show_more_music",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "19543931",
+      "name": "show_more",
+      "font_class": "show_more",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "19543932",
+      "name": "show_more_vr",
+      "font_class": "show_more_vr",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
       "icon_id": "27373469",
       "name": "top",
       "font_class": "top",

packages/code/src/views/base/customButtonSettings.vue

@@ -8,14 +8,19 @@
     <br/>
     
     <div v-for="(item, index) of info.customButton" :key="index" class="button-setting-item" :class="{expand: expandStatus[index]}">
-      <div class="title-bar">
+      <div
+        class="title-bar"
+        :class="info.customButton[index].isShow ? 'bright' : 'dark'"
+        @click="onRequestForChangeExpandStatus(index)"
+      >
         <div class="left">
           <i
             class="iconfont icon-edit_input_arrow icon-expand"
-            @click="onRequestForChangeExpandStatus(index)"
           ></i>
-          <img v-if="info.customButton[index].type === '电话'" :src="require('@/assets/images/icons/phone.png')" class="button-icon" alt="">
-          <img v-if="info.customButton[index].type === '链接'" :src="require('@/assets/images/icons/link.png')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '电话' && info.customButton[index].isShow" :src="require('@/assets/images/icons/phone.svg')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '电话' && !info.customButton[index].isShow" :src="require('@/assets/images/icons/phone-dark.svg')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '链接' && info.customButton[index].isShow" :src="require('@/assets/images/icons/link.svg')" class="button-icon" alt="">
+          <img v-if="info.customButton[index].type === '链接' && !info.customButton[index].isShow" :src="require('@/assets/images/icons/link-dark.svg')" class="button-icon" alt="">
           <span class="button-name">
             {{info.customButton[index].name}}
           </span>
@@ -23,30 +28,22 @@
         <div class="right">
           <i
             class="iconfont icon-editor_list_edit btn-edit"
-            @click="onRequestForEdit(index)"
+            @click.stop="onRequestForEdit(index)"
             v-tooltip="'编辑'"
           >
           </i>
-          <div
-            class="btn-show"
-            v-show="info.customButton[index].value && info.customButton[index].isShow"
-            v-tooltip="'显示'"
-          >
-            <img
-              class="eye-on" :src="require('@/assets/images/icons/eye_on.png')" alt=""
-              @click="info.customButton[index].isShow = !info.customButton[index].isShow"
-            >
-          </div>
-          <div
-            class="btn-hide"
-            v-show="info.customButton[index].value && !info.customButton[index].isShow"
+          <i
+            v-show="info.customButton[index].isShow"
+            class="iconfont icon-eye_on btn-show"
             v-tooltip="'隐藏'"
-          >
-            <img
-              class="eye-off" :src="require('@/assets/images/icons/eye_off.png')" alt=""
-              @click="info.customButton[index].isShow = !info.customButton[index].isShow"
-            >
-          </div>
+            @click.stop="info.customButton[index].isShow = false"
+          ></i>
+          <i
+            v-show="!info.customButton[index].isShow"
+            class="iconfont icon-eye_off btn-hide"
+            v-tooltip="'显示'"
+            @click.stop="onRequestForShow(index)"
+          ></i>
         </div>
       </div>
       <div class="edit-content">
@@ -68,7 +65,6 @@
           <span class="item-name">{{buttonValueTips[index]}}</span>
           <input
             class="value-input"
-            :placeholder="`请输入${buttonValueTips[index]}`"
             v-model="info.customButton[index].value"
           >
         </div>
@@ -257,6 +253,15 @@ export default {
       this.info.customButton[this.editingButtonIdx].value = this.editingInfo.value 
       this.$msg.success('操作成功')
       this.isEditing = false
+    },
+    onRequestForShow(index) {
+      if (!this.checkButtonName(this.info.customButton[index].name)) {
+        return
+      }
+      if (!this.checkButtonValue(this.info.customButton[index].value, this.info.customButton[index].type)) {
+        return
+      }
+      this.info.customButton[index].isShow = true
     }
   }
 }
@@ -293,6 +298,13 @@ export default {
       justify-content: space-between;
       align-items: center;
       padding: 0 16px;
+      cursor: pointer;
+      &.bright {
+        color: #fff;
+      }
+      &.dark {
+        color: #808080;
+      }
       > .left {
         display: flex;
         align-items: center;
@@ -303,12 +315,13 @@ export default {
           cursor: pointer;
         }
         > .button-icon {
-          width: 36px;
-          height: 36px;
+          width: 18px;
+          height: 18px;
+          margin-left: 6px;
         }
         > .button-name {
           font-size: 16px;
-          color: #fff;
+          margin-left: 6px;
         }
       }
       > .right {
@@ -324,19 +337,16 @@ export default {
         > .btn-show {
           margin-left: 16px;
           cursor: pointer;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          img {
-            height: 100%;
+          &:hover {
+            color: #0076F6;
           }
         }
         > .btn-hide {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
           margin-left: 16px;
           cursor: pointer;
+          &:hover {
+            color: #0076F6;
+          }
         }
       }
     }