feat: 更新icon使用，替换iview的Icon组件，使用class方式，以便后续扩展

KintonDo · Feb 18, 2021 · 3e189b0 · 3e189b0
1 parent 29ad3be
commit 3e189b0
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 94 deletions.
diff --git a/src/components/fullscreen/index.vue b/src/components/fullscreen/index.vue
@@ -2,7 +2,7 @@
 .ep-fullscreen(v-show='visible')
   .ep-fullscreen-header(v-if='$slots.header')
     slot(name='header')
-    span.ep-fullscreen-close(@click='onClose') X
+    span.ep-fullscreen-close.ep-icon.ep-icon-close(@click='onClose')
   .ep-fullscreen-body
     slot
 </template>

diff --git a/src/components/setting-background/index.vue b/src/components/setting-background/index.vue
@@ -21,22 +21,19 @@ ep-setting-block(:title='title')
     h4.ep-style-background-item-title
       span 背景-{{index + 1}}
       .ep-style-background-item-option
-        Icon.ep-style-background-up(
-          type='arrow-up-c'
+        i.ep-style-background-up.ep-icon.ep-icon-up(
           title='上移'
           :class='{ disabled: index === 0 }'
-          @click.native='moveBackground(index - 1)'
+          @click='moveBackground(index - 1)'
         )
-        Icon.ep-style-background-down(
-          type='arrow-down-c'
+        i.ep-style-background-down.ep-icon.ep-icon-down(
           title='下移'
           :class='{ disabled: index + 1 === schema.style.container.background.length }'
-          @click.native='moveBackground(index)'
+          @click='moveBackground(index)'
         )
-        Icon.ep-style-background-delete(
-          type='close-round'
+        i.ep-style-background-delete.ep-icon.ep-icon-close(
           title='删除'
-          @click.native='deleteBackground(index)'
+          @click='deleteBackground(index)'
         )
 
     Row(style='padding-top: 8px;' )

diff --git a/src/index.vue b/src/index.vue
@@ -101,11 +101,6 @@ import {
   EpSetting,
   EpHeader
 } from './panel'
-import {
-  getIcon,
-  IVIEW_V3,
-  MAIN_VERSION
-} from './util/iview-patch'
 
 const defaultHeader = () => ({
   left: {},
@@ -176,12 +171,6 @@ export default {
       settingState: {
         fold: false,
         text: '收起'
-      },
-      icon: {
-        design: 'compose',
-        preview: 'eye',
-        logic: 'network',
-        schema: 'code-working'
       }
     }
   },
@@ -210,7 +199,6 @@ export default {
     this.settings = ext.settings
     this.design.view = ext.view || 'pc'
     this.setReady()
-    this.setIcon()
   },
 
   mounted () {
@@ -330,12 +318,6 @@ export default {
         this.settingState = { fold: true, text: '展开' }
       }
     },
-    setIcon () {
-      // 兼容iview@3+ 新icon方案
-      if (MAIN_VERSION >= IVIEW_V3) {
-        Object.assign(this.icon, getIcon(2, this.icon))
-      }
-    },
     onAddWidget (widget) {
       this.store.addWidget(widget)
     }

diff --git a/src/panel/header/index.vue b/src/panel/header/index.vue
@@ -72,7 +72,7 @@
         href='http://epage.didichuxing.com'
         target='_blank'
       )
-        Icon(type="help")
+        i.ep-icon.ep-icon-help
         span &nbsp;帮助
 
 </template>

diff --git a/src/panel/logic/LogicForm.vue b/src/panel/logic/LogicForm.vue
@@ -65,16 +65,16 @@
             Button(
               type='text'
               size="small"
-              icon='plus'
               @click='onAddEffect'
             )
+              i.ep-icon.ep-icon-plus
             Button(
               v-show="controlledWidgetEffects.length > 1"
               type='text'
               size="small"
-              icon='minus'
               @click='onRemoveEffect(i)'
             )
+              i.ep-icon.ep-icon-minus
 </template>
 <script>
 import { helper, Logic } from 'epage-core'

diff --git a/src/panel/logic/index.vue b/src/panel/logic/index.vue
@@ -39,17 +39,17 @@
             size='small'
             type='ghost'
             @click='onEdit(logic, key)'
-            icon="edit"
-            title='编辑'
             style='margin-right: 6px;'
           )
+            i.ep-icon.ep-icon-edit &nbsp;
+            span 编辑
           Button(
             size='small'
             type='ghost'
             @click='onDelete(key)'
-            icon="trash-a"
-            title='删除'
           )
+            i.ep-icon.ep-icon-trash &nbsp;
+            span 删除
 
   .ep-logic-table-empty(v-if='!schema.logics || schema.logics.length === 0') 暂无逻辑配置
 

diff --git a/src/panel/schema/index.vue b/src/panel/schema/index.vue
@@ -5,17 +5,19 @@
       .ep-schema-btns
         Button(
           size='small'
-          icon='code-download'
           title='点击导入'
           @click.native='onImportShow'
           style='margin-right: 10px;'
-        ) 导入
+        )
+          i.ep-icon.ep-icon-code &nbsp;
+          span 导入
         Button(
           size='small'
-          icon='ios-copy'
           title='点击复制'
           @click.native='onCopy'
-        ) 复制
+        )
+          i.ep-icon.ep-icon-copy &nbsp;
+          span 复制
 
   Modal(
     title='导入schema'

diff --git a/src/style/icon.less b/src/style/icon.less
@@ -0,0 +1,60 @@
+.ep-icon{
+  display: inline-block;
+  font-family: "Ionicons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &-trash:before{
+    content: "\f252";
+  }
+  &-copy:before{
+    content: "\f41b";
+  }
+  &-code:before{
+    content: "\f26f";
+  }
+  &-close:before{
+    content: "\f404";
+  }
+  &-edit:before{
+    content: "\f2bf";
+  }
+  &-up:before{
+    content: "\f10e";
+  }
+  &-down:before{
+    content: "\f105";
+  }
+  &-plus:before{
+    content: "\f218";
+  }
+  &-minus:before{
+    content: "\f209";
+  }
+  &-help:before{
+    content: "\f143";
+  }
+
+  /* -o */
+  &-up-o:before{
+    content: "\f366";
+  }
+  &-down-o:before{
+    content: "\f35d";
+  }
+  &-minus-o:before{
+    content: "\f463";
+  }
+  &-plus-o:before{
+    content: "\f48a";
+  }
+  &-info-o:before{
+    content: "\f44c";
+  }
+}
diff --git a/src/style/main.less b/src/style/main.less
@@ -1,5 +1,6 @@
 @import url('./var.less');
 @import url('./common.less');
+@import url('./icon.less');
 @import url('./components/main.less');
 @import url('./panel/main.less');
 @import url('./widgets/main.less');
diff --git a/src/style/panel/fullscreen.less b/src/style/panel/fullscreen.less
@@ -29,7 +29,7 @@
     height: @ep-header-height;
     line-height: @ep-header-height;
     width: @ep-header-height;
-    font-size: 18px;
+    font-size: 32px;
     font-weight: 200;
     // background-color:rgba(0,0,0,.1);
     transition: .2s ease all;

diff --git a/src/style/panel/setting.less b/src/style/panel/setting.less
@@ -110,7 +110,7 @@
   }
   &-move-btn{
     font-size: 14px;
-    .ivu-icon{
+    .ep-icon{
       margin-left: 4px;
       cursor: pointer;
     }

diff --git a/src/style/panel/style.less b/src/style/panel/style.less
@@ -93,7 +93,7 @@
       }
     }
     &-delete{
-      font-size: 12px;
+      font-weight: bold;
       color: #d00;
     }
   }

diff --git a/src/style/panel/work.less b/src/style/panel/work.less
@@ -69,23 +69,23 @@
       pointer-events: none;
     }
     .@{eppre}-widget-ghost{
-      height: 0;
-      &:before{
-        content: '';
-        display: block;
-        clear: both;
-        height: 3px;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        background-color:@primary-color;
-      }
-      &.@{eppre}-widget-item{
-        padding: 0;
-      }
-      *{
-        display: none;
-      }
+      // height: 0;
+      // &:before{
+      //   content: '';
+      //   display: block;
+      //   clear: both;
+      //   height: 3px;
+      //   position: absolute;
+      //   bottom: 0;
+      //   width: 100%;
+      //   background-color:@primary-color;
+      // }
+      // &.@{eppre}-widget-item{
+      //   padding: 0;
+      // }
+      // *{
+      //   display: none;
+      // }
     }
 
     .@{eppre}-widget-btn{

diff --git a/src/widget/base/grid/Setting.vue b/src/widget/base/grid/Setting.vue
@@ -46,7 +46,7 @@ setting-form(:store='store')
 
   FormItem(v-if='!$slots.children' label='列')
     Row(v-for='(item, k) in selectedSchema.children' :key='k')
-      Col(span='8')
+      Col(span='10')
         InputNumber(
           v-model='selectedSchema.children[k].span'
           size='small'

diff --git a/src/widget/components/move-btn/index.vue b/src/widget/components/move-btn/index.vue
@@ -1,35 +1,26 @@
 <template lang="pug">
 .ep-setting-move-btn
-  Icon(
+  i.ep-icon.ep-icon-up-o(
     title='上移'
-    :type='icon.moveUp'
-    @click.native='onMoveUp(index)'
+    @click='onMoveUp(index)'
     :class='{"ep-setting-move-btn-disabled": index === 0 }'
   )
-  Icon(
+  i.ep-icon.ep-icon-down-o(
     title='下移'
-    :type='icon.moveDown'
-    @click.native='onMoveDown(index)'
+    @click='onMoveDown(index)'
     :class='{"ep-setting-move-btn-disabled": index === list.length - 1 }'
   )
-  Icon(
+  i.ep-icon.ep-icon-minus-o(
     title='删除'
-    :type='icon.remove'
-    @click.native='onDelete(index)'
+    @click='onDelete(index)'
     :class='{"ep-setting-move-btn-disabled": list.length === 1 }'
   )
-  Icon(
+  i.ep-icon.ep-icon-plus-o(
     title='添加'
-    :type='icon.add'
-    @click.native='onAdd(index)'
+    @click='onAdd(index)'
   )
 </template>
 <script>
-import {
-  getIcon,
-  IVIEW_V3,
-  MAIN_VERSION
-} from '../../../util/iview-patch'
 
 export default {
   props: {
@@ -43,25 +34,9 @@ export default {
     }
   },
   data () {
-    return {
-      icon: {
-        moveUp: 'android-arrow-up',
-        moveDown: 'android-arrow-down',
-        remove: 'ios-minus-outline',
-        add: 'ios-plus-outline'
-      }
-    }
-  },
-  beforeMount () {
-    this.setIcon()
+    return {}
   },
   methods: {
-    setIcon () {
-      // 兼容iview@3+ 新icon方案
-      if (MAIN_VERSION >= IVIEW_V3) {
-        Object.assign(this.icon, getIcon(2, this.icon))
-      }
-    },
     onMoveUp (index) {
       this.$emit('on-move-up', index)
     },