Feat: 图标

src/components/Icon.vue

@@ -1,27 +1,39 @@
 <!-- 彩色/图片图标 -->
-<template>
-  <img
-    v-if="imgIcon"
-    :width="size"
-    :height="size"
-    :src="imgIcon"
-  >
-  <svg
-    v-else-if="icon"
-    :class="$style.icon"
-    :style="style"
-  >
-    <use :xlink:href="'#' + icon" />
-  </svg>
-</template>
-
-<script lang="ts">
+<script lang="tsx">
 // @ts-nocheck
 /// import 顺序: 依赖库/vue组件/其他/CSS Module
-import(/* webpackChunkName: "icon" */ '@/scss/font/iconfont.min')
+import Vue, { CreateElement } from 'vue'
 
 /// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)
 const REG_NUM = /\s*([\d.]+)(\w+)/
+const loadingStatus = Vue.observable({ state: 0 })
+import(/* webpackChunkName: "icon" */ '@/scss/font/fonts').then(res => {
+  const container = document.createElement('i')
+  container.innerHTML =
+    '<svg aria-hidden=true style=position:absolute;width:0;height:0;overflow:hidden>' +
+    res.default +
+    '</svg>'
+  res.default = null
+  document.body.appendChild(container.firstChild)
+  loadingStatus.state = 1
+}).catch(err => {
+  console.error(err)
+  loadingStatus.state = 2
+})
+
+function isSymbol(id: string) {
+  return document.getElementById(id) // symbol 只保留不能字体图标呈现的, 比如带颜色等的
+
+  // const svg = document.getElementById(id)
+  // // 完整版应过滤更多元素与属性 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element
+  // if (svg && (
+  //   svg.querySelector('style') ||
+  //   svg.querySelector('stop') ||
+  //   svg.querySelector('[fill]')
+  // )) {
+  //   return true
+  // }
+}
 
 /** <Icon icon="i-shibai" size="16px" />
  * emit: (事件名: [参数列表, ...])
@@ -51,14 +63,59 @@ export default {
         result[2]}`
     },
   },
+  // see: https://github.com/vuejs/jsx
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render(h: CreateElement) {
+    const STYLE = this.$style
+    const imgIcon = this.imgIcon
+    if (imgIcon) {
+      const size = this.size
+      return <img
+        width={size}
+        height={size}
+        src={imgIcon}
+        class={STYLE.i + ' ' + STYLE.img}
+      />
+    }
+
+    let icon = this.icon
+    if (isSymbol(icon)) {
+      switch (loadingStatus.state) {
+        case 1:
+          return <svg
+            class={STYLE.svg + ' ' + STYLE.i}
+            style={this.style}
+          >
+            {h('use', { attrs: { 'xlink:href': '#' + icon } })}
+          </svg>
+        case 2:
+          return
+        default:
+          icon = 'el-icon-loading'
+      }
+    }
+
+    return <i
+      class={icon + ' ' + STYLE.i}
+      style={'font-size:' + this.size}
+    />
+  },
 }
 </script>
 
 <style lang="scss" module>
-.icon {
+.i {
+  display: inline-block;
+  overflow: hidden;
+}
+
+.img {
+  background-size: cover;
+}
+
+.svg {
   width: 1rem;
   height: 1rem;
-  overflow: hidden;
   vertical-align: -0.15rem;
   fill: currentColor;
 }

src/config/index.ts

@@ -117,4 +117,12 @@ export default {
   /*! 最大页面缓存时间 */
   /** 最大页面缓存时间 */
   pageAlive: 30 * 1000,
+
+  /*! 通用筛选表单标签宽度 */
+  /** 通用筛选表单标签宽度 */
+  labelWidth: '125px',
+
+  /*! 通用输入框字数限制 */
+  /** 通用输入框字数限制 */
+  maxLength: 60,
 }

src/functions/main.ts

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import { Store } from 'vuex'
 import Router, { RouteRecord } from 'vue-router'
 
+import CONFIG, { SPA } from '@/config'
 import { isString } from '@/utils'
 import { on, off, once, emit } from '@/utils/eventBus'
 import { fit, has } from '@/functions/auth'
@@ -75,22 +76,25 @@ function routerEnvironment(proto: any, router: Router) {
     location: RawLocation,
     options?: {
       id?: string
+      SPA?: SPA
       refresh?: boolean
       replace?: boolean
       onComplete?: Function
       onAbort?: (err: Error) => void
     }
   ) => {
     options || (options = {})
-    if (options.id || options.refresh) {
+    if (options.id || options.refresh || options.SPA) {
       if (isString(location)) {
         location = {
           id: options.id,
+          SPA: options.SPA,
           path: location,
           refresh: options.refresh,
         }
       } else {
         location.id = options.id
+        location.SPA = options.SPA
         location.refresh = options.refresh
       }
     }
@@ -122,6 +126,8 @@ function routerEnvironment(proto: any, router: Router) {
 function inject(proto: any, id: string, router?: Router) {
   /// 标识 ///
   proto._$SPA = id
+  /// 全局配置 ///
+  proto.CONFIG = CONFIG
   /// 消息总线  ///
   proto.on = on
   proto.off = off
@@ -141,6 +147,8 @@ function inject(proto: any, id: string, router?: Router) {
   })
   /// 路由环境 ///
   router && routerEnvironment(proto, router)
+  /// 全局配置 ///
+  proto.CONFIG = CONFIG
 }
 
 export default <T>(id: string, App: any, router?: Router, store?: Store<T>) => {

src/functions/router/index.ts

@@ -2,6 +2,7 @@
 import Vue from 'vue'
 import Router, { Route, RouterOptions, RouteConfig, Location } from 'vue-router'
 
+import CONFIG, { SPA } from '@/config'
 import { isString } from '@/utils'
 import authenticate from './authenticate'
 import routerGuards from './routerGuards'
@@ -37,6 +38,8 @@ declare global {
 export interface ILocation extends Location {
   /** 模块id */
   id?: string
+  /** 目标SPA */
+  SPA?: SPA
   /** 是否刷新 */
   refresh?: boolean
 }
@@ -152,6 +155,7 @@ export default (config: RouterOptions, authority?: boolean) => {
       getPathById((location || 0).id) || router.currentRoute.path,
       location
     )
+    ;(location || 0).SPA && CONFIG.g((location || 0).SPA, (arguments[0] || 0).path)
     return originPush.apply(this, arguments as any)
   } as any) as typeof originPush
 
@@ -162,14 +166,15 @@ export default (config: RouterOptions, authority?: boolean) => {
       getPathById((location || 0).id) || router.currentRoute.path,
       location
     )
+    ;(location || 0).SPA && CONFIG.g((location || 0).SPA, arguments[0])
     return originReplace.apply(this, arguments as any)
   } as any) as typeof originReplace
 
   const originResolve = router.resolve
   router.resolve = (function(this: any) {
     const location = arguments[0]
     arguments[0] = resolveUrl(
-      getPathById((location as ILocation).id) || router.currentRoute.path,
+      getPathById((location as ILocation || 0).id) || router.currentRoute.path,
       arguments[2]
         ? isString(location)
           ? { path: location, append: true }

src/libs/components/senior.scss

@@ -47,6 +47,20 @@
 .el-form-item .el-form-item {
   margin-top: $gapNormal / 2;
 }
+// inline form
+.el-form.el-form--inline {
+  .el-form-item__label {
+    width: 125px;
+  }
+
+  .el-form-item__content {
+    margin: 0 $gapNormal $gapNormal / 2 0;
+
+    .el-input {
+      width: 220px;
+    }
+  }
+}
 
 // 滚动条
 .el-scrollbar > .el-scrollbar__bar {

src/pages/index/main.ts

@@ -8,11 +8,12 @@ import router from './router'
 import store from './store'
 import App from './App'
 
-import { SPA } from '@/config'
+import CONF, { SPA } from '@/config'
 import CONFIG from './config'
 import mount from '@/functions/main'
 import { setBase } from '@/utils/ajax'
 import './registerServiceWorker'
 
 setBase(CONFIG.baseUrl)
+Object.assign(CONF, CONFIG)
 mount(SPA.index, App, router, store)

src/pages/other/main.ts

@@ -8,11 +8,12 @@ import router from './router'
 import store from './store'
 import App from './App'
 
-import { SPA } from '@/config'
+import CONF, { SPA } from '@/config'
 import CONFIG from './config'
 import mount from '@/functions/main'
 import { setBase } from '@/utils/ajax'
 import './registerServiceWorker'
 
 setBase(CONFIG.baseUrl)
+Object.assign(CONF, CONFIG)
 mount(SPA.other, App, router, store)