Merge pull request #9 from appletxm/1004431-icons

1004431 icons

examples/assets/style/doc.css

@@ -17055,7 +17055,6 @@ textarea {
 
 .container,
 .page-container {
-  width: 1140px;
   padding: 0;
   margin: 0 auto
 }

examples/css/frame.scss

@@ -1,5 +1,4 @@
 .#{$prefix}-my-app{
-  width: $page-width;
   margin: 0 auto;
 
   .#{$prefix}-module-all {
@@ -20,6 +19,7 @@
 
     .router-content {
       @extend %absolute-position;
+      right: auto;
       width: $page-width - 230px;
       right: auto;
       left: 230px;

examples/css/index.scss

@@ -23,4 +23,5 @@
 @import "../docs/color/style";
 @import "../docs/font/style";
 @import "../docs/theme/style";
+@import "../docs/icon/style";
 

examples/docs/icon/index.md

@@ -0,0 +1,82 @@
+<script>
+  import DemoBlock from 'components-biz/demo-block'
+
+  export default {
+    created() {
+      this.$getAllIcons()
+    },
+    mounted() {},
+    components: {
+      DemoBlock
+    },
+    methods: {
+      $getAllIcons() {
+        axios.get('/api/iconsList/get').then(res => {
+         this.iconsList = res.data.icons
+        }).catch(err => {
+          console.info('$getAllIcons:', err)
+        })
+      }
+    },
+    data() {
+      return {
+        iconsList: []
+      }
+    },
+    watch: {}
+  }
+</script>
+
+<template>
+  <h2>Icon 图标</h2>
+  <p>提供了一套常用的图标集合。</p>
+  <h3>使用方法</h3>
+  <p>与标准的html标签使用</p>
+  <demo-block class="hf-ui-doc-icon">
+    <div slot="source" class="icon-html-example">
+      <span class="hf-ui-icon ui-icon-home"></span>
+      <span class="hf-ui-icon ui-icon-arrowdown"></span>
+    </div>
+    <template slot="highlight">
+      <pre>
+        <code class="html hljs xml">
+          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hf-ui-icon ui-icon-home"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hf-ui-icon ui-icon-arrowdown"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+        </code>
+      </pre>
+    </template>
+  </demo-block>
+  <p>与组件使用</p>
+  <demo-block class="hf-ui-doc-icon">
+    <div slot="source">
+      <hf-ui-button size="big" icon="ui-icon-home" type="primary">回主页</hf-ui-button>
+      <hf-ui-icon icon="ui-icon-home"></hf-ui-icon>
+    </div>
+    <div slot="highlight">
+      <pre>
+        <code class="html hljs xml">
+          <span class="hljs-tag">&lt;<span class="hljs-name">hf-ui-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"big"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"ui-icon-home"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">hf-ui-button</span>&gt;</span>
+          <span class="hljs-tag">&lt;<span class="hljs-name">hf-ui-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"ui-icon-home"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">hf-ui-icon</span>&gt;</span>
+        </code>
+      </pre>
+    </div>
+  </demo-block>
+  <h3 id="attributes"><a href="#attributes" aria-hidden="true" class="header-anchor">¶</a>Attributes</h3>
+  <table>
+    <thead>
+      <tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>icon</td> <td>以下图标集合对应图标名称</td> <td>string</td> <td>-</td> <td>-</td></tr>
+    </tbody>
+  </table>
+  <h3>图标集合</h3>
+  <div class="rf-ui-doc-icon-list">
+    <ul>
+      <li v-for="(icon, index) in iconsList" :key="index">
+        <span :class="['hf-ui-icon', icon.class]"></span>
+        <i>{{icon.label}}</i>
+      </li>
+    </ul>
+  </div>
+</template>

examples/docs/icon/style.scss

@@ -0,0 +1,50 @@
+.hf-ui-doc-icon {
+  .icon-html-example {
+    .hf-ui-icon {
+      padding: 10px;
+      &:before {
+        font-size: $font-24;
+      }
+    }
+  }
+
+  .html{
+    margin: -30px auto auto -70px!important;
+  }
+}
+
+.rf-ui-doc-icon-list {
+  margin-bottom: 20px;
+  ul {
+    list-style: none;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    border: 1px solid $clr-border-color;
+    border-radius: 3px;
+
+    li {
+      width: 150px;
+      height: 100px;
+      text-align: center;
+      color: $clr-font-text-color;
+      @include transition(all .5s ease);
+
+      .hf-ui-icon {
+        display: block;
+        line-height: 60px;
+        font-weight: 600;
+        &:before {
+          font-size: $font-24;
+        }
+      }
+      i {
+        font-style: normal;
+      }
+
+      &:hover {
+        color: $clr-error-color;
+      }
+    }
+  }
+}

examples/docs/theme/style.scss

@@ -25,6 +25,10 @@
     border: 1px solid #f0f0f0;
     border-radius: 3px;
 
+    p {
+      padding: 0 0 0 10px;
+    }
+
     .btn-row {
       margin: 10px;
     }

examples/js/app/navigator-list.js

@@ -91,8 +91,19 @@ export default [
             label: '按钮 Button',
             icon: 'hf-iconfont icon-chakuaidi',
             component: 'Button',
-            next: '1_1_0',
+            next: '1_0_6',
             prev: '1_0_4'
+          },
+
+          {
+            id: '201007',
+            module: 'Components_Bsic_Icon',
+            path: '/components/basic/icon',
+            label: '图标 Icon',
+            icon: 'hf-iconfont icon-chakuaidi',
+            component: 'Icon',
+            next: '1_1_0',
+            prev: '1_0_5'
           }
         ]
       },
@@ -111,7 +122,7 @@ export default [
             icon: 'hf-iconfont icon-chakuaidi',
             component: 'Menu',
             next: '1_1_1',
-            prev: '1_0_5'
+            prev: '1_0_6'
           },
           {
             id: '202002',

examples/js/components/navigator/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <ul :class="[$store.state.appPrefix + '-c-navigator']">
-    <li
-      v-for="item in $store.state.navigatorList"
-      :key="item.id"
-      :class="[$store.state.currentModule === item.module ? 'actived' : '']"
-      @click="(event) => { $gotoPage(event, item) }"
-    >
-      <span class="text-inner">
-        <span :class="[item.icon]"></span>{{ item.label }}
-      </span>
-    </li>
-  </ul>
+  <div :class="[$store.state.appPrefix + '-c-navigator']">
+    <ul>
+      <li
+        v-for="item in $store.state.navigatorList"
+        :key="item.id"
+        :class="[$store.state.currentModule === item.module ? 'actived' : '']"
+        @click="(event) => { $gotoPage(event, item) }"
+      >
+        <span class="text-inner">
+          <span :class="[item.icon]"></span>{{ item.label }}
+        </span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>

examples/js/components/navigator/style.scss

@@ -1,13 +1,19 @@
 .#{$prefix}-c-navigator{
   font-size: $font-14;
-  list-style: none;
-  display: flex;
-  height: $nav-height;
-  line-height: $nav-height;
   position: sticky;
   top: 0;
   border-bottom: 1px solid $clr-divider-color;
   background-color: $clr-bg-page-color;
+  box-shadow: 0 0 5px rgba(0,0,0,.05);
+
+  ul {
+    list-style: none;
+    display: flex;
+    height: $nav-height;
+    line-height: $nav-height;
+    width: $page-width;
+    margin: 0 auto;
+  }
 
   li {
     flex: 50% 1 1;
@@ -26,29 +32,26 @@
       &:after {
         content: "";
         display: block;
-        height: 4px;
+        height: 2px;
         background-color: $clr-error-color;
         position: absolute;
-        bottom: -20px;
+        bottom: 0;
         left: 0;
         right: 0;
-        transition: all .2s ease-in-out;
+        transition: all .5s ease-in-out;
+        opacity: 0;
       }  
     }
 
     &:hover {
       .text-inner {
         color: $clr-error-color;
         &:after {
-          bottom: 0;
+          opacity: 1;
         }
       }
     }
 
-    span {
-      margin-right: 5px;
-    }
-
     &.actived {
       .text-inner {
         color: $clr-error-color;

examples/js/router/decorate.js

@@ -11,6 +11,7 @@ const MenuRoutes = {
   Color: () => import(/* webpackChunkName: "Color" */ 'docs/color/index.md'),
   Font: () => import(/* webpackChunkName: "Font" */ 'docs/Font/index.md'),
   Theme: () => import(/* webpackChunkNmae: "Theme" */ 'docs/theme/index.md'),
+  Icon: () => import(/* webpackChunkNmae: "Icon" */ 'docs/icon/index.md'),
   Tab: () => import(/* webpackChunkName: "DocTab" */ 'docs/Tab.md')
 }
 

package.json

@@ -19,6 +19,7 @@
     "clean:lib": "rimraf dist/lib/*",
     "start": "npm run clean:examples && node scripts/dev-server.js development",
     "dev": "npm run clean:examples && node scripts/dev-server.js development",
+    "nodeServer": "npm run clean:examples && node scripts/dev-server.js production",
     "build": "npm run clean:examples && node scripts/build.js production test current-branch",
     "buildForProd": "npm run clean:examples && node scripts/build.js production",
     "buildForTest": "npm run clean:examples && node scripts/build.js production test",

scripts/server-icons.js

@@ -0,0 +1,28 @@
+const path = require('path')
+const fs = require('fs')
+
+const srcPath = './src/theme/iconfont.css'
+
+function getIcons(req, res) {
+  const iconCssFile = fs.readFileSync(path.resolve(srcPath), 'utf8')
+  const reg = /\ui-icon-[^\:\;\}\]\]\"]+/g
+  const matchObj = iconCssFile.match(reg)
+  let resIconList = []
+
+  matchObj.forEach(item => {
+    resIconList.push({
+      label: item,
+      class: item
+    })
+  })
+
+  res.set('content-type', 'application/json')
+  res.send(JSON.stringify({
+    code: 200,
+    icons: resIconList
+  }))
+}
+
+module.exports = {
+  getIcons
+}