sytle(仪表板): 更换仪表板编辑页面图标样式

frontend/src/components/canvas/components/Toolbar.vue

@@ -3,10 +3,10 @@
     <div class="switch-position">
       <el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
         <el-radio-button :label="false">
-          <svg-icon icon-class="icon_pc_outlined" class="toolbar-icon-active text16" />
+          <span class="icon iconfont icon-icon_pc_outlined icon16_only" />
         </el-radio-button>
         <el-radio-button :label="true">
-          <svg-icon icon-class="icon_phone_outlined" class="toolbar-icon-active text16" />
+          <span class="icon iconfont icon-icon_phone_outlined icon16_only" />
         </el-radio-button>
       </el-radio-group>
     </div>
@@ -47,14 +47,14 @@
       <el-divider style="margin-left: 20px" direction="vertical" />
       <span class="button_self">
         <el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start">
-          <span class="icon iconfont icon-gengduo insert margin-right20">
+          <span class="icon iconfont icon-icon-more insert margin-right20">
             <span class="icon-font-margin">{{ $t('panel.more') }}</span>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
               <el-dropdown placement="right-start">
                 <span>
-                  <svg-icon icon-class="icon_moments-categories_outlined" class="toolbar-icon-active text16" @click="clickPreview" />
+                  <span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
                   <span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
                   <svg-icon icon-class="icon_right_outlined" class="icon16 margin-left8" />
                 </span>
@@ -71,25 +71,25 @@
               </el-dropdown>
             </el-dropdown-item>
             <el-dropdown-item>
-              <svg-icon icon-class="icon_dialpad_outlined" class="icon16" />
+              <span class="icon iconfont icon-icon_dialpad_outlined icon16" />
               <span class="text14 margin-left8">{{ $t('panel.aided_grid') }}</span>
               <el-switch v-model="showGridSwitch" class="margin-left8" size="mini" @change="showGridChange" />
             </el-dropdown-item>
             <el-dropdown-item @click.native="openOuterParamsSet">
-              <svg-icon icon-class="icon-quicksetting" class="icon16" />
+              <span class="icon iconfont icon-icon-quicksetting icon16" />
               <span class="text14 margin-left8">{{ $t('panel.params_setting') }}</span>
             </el-dropdown-item>
             <el-dropdown-item @click.native="clearCanvas">
-              <svg-icon icon-class="icon_clear_outlined" class="icon16" />
+              <span class="icon iconfont icon-icon_clear_outlined icon16" />
               <span class="text14 margin-left8">{{ $t('panel.clean_canvas') }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </span>
-      <span class="icon iconfont icon-magic-line insert margin-right20" @click="showPanel">
+      <span class="icon iconfont icon-icon_effects_outlined insert margin-right20" @click="showPanel">
         <span class="icon-font-margin">{{ $t('panel.panel_style') }}</span>
       </span>
-      <span class="icon iconfont icon-piliang-copy insert margin-right20" @click="batchOption"><span
+      <span class="icon iconfont icon-icon_Batch_outlined insert margin-right20" @click="batchOption"><span
         class="icon-font-margin"
       >{{ $t('panel.batch_opt') }}</span></span>
       <span style="float: right;margin-right: 24px">
@@ -137,9 +137,6 @@ import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
 import { panelUpdate } from '@/api/panel/panel'
 import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
-import {
-  DEFAULT_COMMON_CANVAS_STYLE_STRING
-} from '@/views/panel/panel'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 
 export default {
@@ -595,7 +592,7 @@ export default {
 .switch-position {
   position: absolute;
   top: 13px;
-  right: 50%;
+  left: 48%;
   width: 100px;
 }
 
@@ -709,8 +706,12 @@ export default {
   color: var(--TextPrimary, #1F2329);
 }
 
+.icon16_only {
+  font-size: 16px!important;
+}
+
 .icon16 {
-  font-size: 16px;
+  font-size: 16px!important;
   color: var(--TextPrimary, #1F2329);
 }
 

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">icon_Batch_outlined</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe61d;</span>
                 <div class="name">icon_clear_outlined</div>
@@ -720,9 +726,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1657014969539') format('woff2'),
-       url('iconfont.woff?t=1657014969539') format('woff'),
-       url('iconfont.ttf?t=1657014969539') format('truetype');
+  src: url('iconfont.woff2?t=1657078050131') format('woff2'),
+       url('iconfont.woff?t=1657078050131') format('woff'),
+       url('iconfont.ttf?t=1657078050131') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -748,6 +754,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-icon_Batch_outlined"></span>
+            <div class="name">
+              icon_Batch_outlined
+            </div>
+            <div class="code-name">.icon-icon_Batch_outlined
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-icon_clear_outlined"></span>
             <div class="name">
@@ -1747,6 +1762,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_Batch_outlined"></use>
+                </svg>
+                <div class="name">icon_Batch_outlined</div>
+                <div class="code-name">#icon-icon_Batch_outlined</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-icon_clear_outlined"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1657014969539') format('woff2'),
-       url('iconfont.woff?t=1657014969539') format('woff'),
-       url('iconfont.ttf?t=1657014969539') format('truetype');
+  src: url('iconfont.woff2?t=1657078050131') format('woff2'),
+       url('iconfont.woff?t=1657078050131') format('woff'),
+       url('iconfont.ttf?t=1657078050131') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_Batch_outlined:before {
+  content: "\e630";
+}
+
 .icon-icon_clear_outlined:before {
   content: "\e61d";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "30342179",
+      "name": "icon_Batch_outlined",
+      "font_class": "icon_Batch_outlined",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
     {
       "icon_id": "30335147",
       "name": "icon_clear_outlined",

frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue

@@ -108,8 +108,7 @@
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px; float: left" @dblclick="setEdit">
-
+    <div class="title-main" @dblclick="setEdit">
       <div class="title-area">
         <el-input
           v-if="canEdit"
@@ -120,12 +119,12 @@
         />
         <span
           v-if="!canEdit"
-          style="margin-top: 8px;margin-left: 8px"
+          style="margin-top: 8px;margin-left: 8px;"
           :title="subjectItem.name"
         >{{ subjectItem.name }}</span>
-        <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
       </div>
     </div>
+    <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
   </div>
 </template>
 
@@ -408,10 +407,29 @@ export default {
 
 .delete-icon{
   position: absolute;
+  bottom: 8px;
   right: 8px;
-  top: 8px;
 }
 .delete-icon:hover{
   color: red;
 }
+.title-main{
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  height: 30px;
+  float: left
+}
+.subject-template:hover > .title-main {
+  width: 115px;
+}
+.subject-template:hover > .el-icon-delete {
+  z-index: 10;
+  display:block;
+}
+
+.subject-template ::v-deep .el-icon-delete {
+  display:none
+}
 </style>

frontend/src/views/panel/edit/index.vue

@@ -733,7 +733,7 @@ export default {
       const parent = evt.target.closest('.button-div-class')
       const self = evt.target.closest('.el-drawer__wrapper')
       // 点击样式按钮 排除
-      const stick = evt.target.closest('.icon-magic-line')
+      const stick = evt.target.closest('.icon-icon_effects_outlined')
       const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
       const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
       const suffix = evt.target.closest('.el-input__suffix')