mooho-base-admin-plus 0.1.0

package/src/directive/focus.js

@@ -0,0 +1,10 @@
+export default {
+  update() {
+    setTimeout(() => {
+      // 聚焦元素
+      // if (el.offsetParent != null) {
+      //     el.getElementsByTagName('input')[0].focus();
+      // }
+    });
+  }
+};

package/src/directive/tabHide.js

@@ -0,0 +1,9 @@
+export default {
+  update(el, binding) {
+    setTimeout(() => {
+      if (binding.value === true) {
+        el.getElementsByTagName('div')[0].style.display = 'none';
+      }
+    });
+  }
+};

package/src/i18n/index.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n/index';
+import store from '../store/index';
+import messages from './locale';
+
+store.dispatch('admin/i18n/getLocale');
+
+const locale = store.state.admin.i18n.locale;
+
+export default createI18n({
+  allowComposition: true,
+  globalInjection: true,
+  legacy: false,
+  locale,
+  messages
+});

package/src/i18n/locale/en-US.js

@@ -0,0 +1 @@
+import{s as e}from"./lang.js";const t={i:{locale:"en-US",select:{placeholder:"Select",noMatch:"No matching data",loading:"Loading"},table:{noDataText:"No Data",noFilteredDataText:"No filter data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},datepicker:{selectDate:"Select date",selectTime:"Select time",startTime:"Start Time",endTime:"End Time",clear:"Clear",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Month",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",year:"Year",weekStartDay:"0",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"May",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Oct",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"Source",target:"Target"},filterPlaceholder:"Search here",notFoundText:"Not Found"},modal:{okText:"OK",cancelText:"Cancel"},poptip:{okText:"OK",cancelText:"Cancel"},page:{prev:"Previous Page",next:"Next Page",total:"Total",item:"item",items:"items",prev5:"Previous 5 Pages",next5:"Next 5 Pages",page:"/page",goto:"Goto",p:""},rate:{star:"Star",stars:"Stars"},time:{before:" ago",after:" after",just:"just now",seconds:" seconds",minutes:" minutes",hours:" hours",days:" days"},tree:{emptyText:"No Data"}}};e(t);export{t as default};

package/src/i18n/locale/lang.js

@@ -0,0 +1 @@
+const e=typeof window!="undefined";function n(i){e&&typeof window.viewuiplus!="undefined"&&("langs"in viewuiplus||(viewuiplus.langs={}),viewuiplus.langs[i.i.locale]=i)}export{n as s};

package/src/i18n/locale/zh-CN.js

@@ -0,0 +1 @@
+import{s as e}from"./lang.js";const t={i:{locale:"zh-CN",select:{placeholder:"\u8BF7\u9009\u62E9",noMatch:"\u65E0\u5339\u914D\u6570\u636E",loading:"\u52A0\u8F7D\u4E2D"},table:{noDataText:"\u6682\u65E0\u6570\u636E",noFilteredDataText:"\u6682\u65E0\u7B5B\u9009\u7ED3\u679C",confirmFilter:"\u7B5B\u9009",resetFilter:"\u91CD\u7F6E",clearFilter:"\u5168\u90E8",sumText:"\u5408\u8BA1"},datepicker:{selectDate:"\u9009\u62E9\u65E5\u671F",selectTime:"\u9009\u62E9\u65F6\u95F4",startTime:"\u5F00\u59CB\u65F6\u95F4",endTime:"\u7ED3\u675F\u65F6\u95F4",clear:"\u6E05\u7A7A",ok:"\u786E\u5B9A",datePanelLabel:"[yyyy\u5E74] [m\u6708]",month:"\u6708",month1:"1 \u6708",month2:"2 \u6708",month3:"3 \u6708",month4:"4 \u6708",month5:"5 \u6708",month6:"6 \u6708",month7:"7 \u6708",month8:"8 \u6708",month9:"9 \u6708",month10:"10 \u6708",month11:"11 \u6708",month12:"12 \u6708",year:"\u5E74",weekStartDay:"0",weeks:{sun:"\u65E5",mon:"\u4E00",tue:"\u4E8C",wed:"\u4E09",thu:"\u56DB",fri:"\u4E94",sat:"\u516D"},months:{m1:"1\u6708",m2:"2\u6708",m3:"3\u6708",m4:"4\u6708",m5:"5\u6708",m6:"6\u6708",m7:"7\u6708",m8:"8\u6708",m9:"9\u6708",m10:"10\u6708",m11:"11\u6708",m12:"12\u6708"}},transfer:{titles:{source:"\u6E90\u5217\u8868",target:"\u76EE\u7684\u5217\u8868"},filterPlaceholder:"\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",notFoundText:"\u5217\u8868\u4E3A\u7A7A"},modal:{okText:"\u786E\u5B9A",cancelText:"\u53D6\u6D88"},poptip:{okText:"\u786E\u5B9A",cancelText:"\u53D6\u6D88"},page:{prev:"\u4E0A\u4E00\u9875",next:"\u4E0B\u4E00\u9875",total:"\u5171",item:"\u6761",items:"\u6761",prev5:"\u5411\u524D 5 \u9875",next5:"\u5411\u540E 5 \u9875",page:"\u6761/\u9875",goto:"\u8DF3\u81F3",p:"\u9875"},rate:{star:"\u661F",stars:"\u661F"},time:{before:"\u524D",after:"\u540E",just:"\u521A\u521A",seconds:"\u79D2",minutes:"\u5206\u949F",hours:"\u5C0F\u65F6",days:"\u5929"},tree:{emptyText:"\u6682\u65E0\u6570\u636E"}}};e(t);export{t as default};

package/src/i18n/locale.js

@@ -0,0 +1,102 @@
+/**
+ * 自动配置各类语言包
+ * */
+import { merge } from 'lodash';
+import Setting from '../setting';
+//import { I18nList } from '../api/i18n';
+
+// 导入 View UI Plus 语言包
+const ViewUIPlusLocale = import.meta.globEager('./locale/*-*.js');
+
+// 导入布局语言包
+import layoutLocale from '../layouts/basic-layout/i18n';
+
+// // 页面语言包
+// const pageLocale = import.meta.globEager('../pages/i18n.js');
+
+// // 菜单语言包
+// const menuLocale = import.meta.globEager('../menu/i18n.js');
+
+// // 组件语言包
+// const componentLocale = import.meta.globEager('../components/i18n.js');
+
+/**
+ * @description 配置本地语言包
+ * */
+function loadNativeLocaleMessages() {
+  const messages = {};
+
+  for (const lang of Setting.i18n.list) {
+    messages[lang.locale] = {
+      page: {},
+      menu: {},
+      component: {}
+    };
+
+    // 设置 View UI Plus 语言包
+    Object.keys(ViewUIPlusLocale).forEach(path => {
+      const currentLocale = ViewUIPlusLocale[path].default;
+      if (currentLocale.i.locale === lang.locale) {
+        Object.keys(currentLocale).forEach(key => {
+          messages[lang.locale][key] = currentLocale[key];
+        });
+      }
+    });
+
+    // 设置 Layout 语言包
+    Object.keys(layoutLocale).forEach(locale => {
+      if (lang.locale === locale) {
+        Object.keys(layoutLocale[locale]).forEach(key => {
+          messages[lang.locale][key] = layoutLocale[locale][key];
+        });
+      }
+    });
+
+    // // 设置页面语言包
+    // Object.keys(pageLocale).forEach(path => {
+    //   const currentPage = pageLocale[path].default[lang.locale];
+    //   if (currentPage) {
+    //     Object.keys(currentPage).forEach(key => {
+    //       messages[lang.locale].page[key] = currentPage[key];
+    //     });
+    //   }
+    // });
+
+    // // 设置菜单语言包
+    // Object.keys(menuLocale).forEach(path => {
+    //   const currentMenu = menuLocale[path].default[lang.locale];
+    //   if (currentMenu) {
+    //     Object.keys(currentMenu).forEach(key => {
+    //       messages[lang.locale].menu[key] = currentMenu[key];
+    //     });
+    //   }
+    // });
+
+    // // 设置组件语言包
+    // Object.keys(componentLocale).forEach(path => {
+    //   const currentComponent = componentLocale[path].default[lang.locale];
+    //   if (currentComponent) {
+    //     console.log('currentComponent', currentComponent);
+    //     Object.keys(currentComponent).forEach(key => {
+    //       messages[lang.locale].component[key] = currentComponent[key];
+    //     });
+    //   }
+    // });
+  }
+  return messages;
+}
+
+export default loadNativeLocaleMessages();
+
+/**
+ * @description 配置远程接口语言包
+ * */
+export async function loadRemoteLocaleMessages(i18n) {
+  const nativeMessages = loadNativeLocaleMessages();
+  //const remoteMessages = await I18nList();
+  const remoteMessages = [];
+  const messages = merge({}, nativeMessages, remoteMessages);
+  Object.keys(messages).forEach(key => {
+    i18n.global.setLocaleMessage(key, messages[key]);
+  });
+}

package/src/index.js

@@ -0,0 +1,222 @@
+//import '@babel/polyfill';
+
+// Vue
+import { createApp, h, getCurrentInstance } from 'vue';
+import App from './App';
+
+// 设置
+import setting from './setting';
+
+// 混合
+import mixinApp from './mixins/app';
+import mixinPage from './mixins/page';
+
+// 插件
+import plugins from './plugins';
+
+// store
+import store from './store';
+
+// ViewUIPlus
+import ViewUIPlus from 'view-ui-plus';
+
+// 菜单和路由
+import router from './router';
+import menuHeader from './menu/header';
+//import menuSider from './menu/sider';
+
+// 多语言
+import i18n from './i18n';
+
+// 方法
+//import { getHeaderName, getMenuSider, getSiderSubmenu } from './libs/system';
+
+// 组件
+import Copyright from './components/copyright';
+import Link from './components/link';
+import RichEditor from './components/richEditor';
+import DialogSelect from './components/input/dialog-select';
+import ItemSelect from './components/input/item-select';
+import AttachmentUpload from './components/upload/upload-attachment';
+import ImageUpload from './components/upload/upload-image';
+import FileUpload from './components/upload/file-upload';
+import ViewForm from './components/view/view-form';
+import ViewTable from './components/view/view-table';
+import ViewChart from './components/view/view-chart';
+import ModalForm from './components/view/modal-form';
+import ModalTable from './components/view/modal-table';
+import FormSetting from './components/view/form-setting';
+import FormSettingLayout from './components/view/form-setting-layout';
+import TableSetting from './components/view/table-setting';
+import ModalFormFilter from './components/view/modal-form-filter';
+import ModalFormSort from './components/view/modal-form-sort';
+import Shortcut from './components/home/shortcut';
+import NoticeList from './components/home/notice-list';
+
+// API
+import modelApi from './api/model';
+import dataSourceApi from './api/dataSource';
+import taskApi from './api/task';
+
+// 使用样式，修改主题可以在 styles 目录下创建新的主题包并修改 iView 默认的 less 变量
+// 参考 https://www.iviewui.com/docs/guide/theme
+import './styles/index.less';
+//import './libs/iview-pro/iview-pro.css';
+
+// 默认css
+import './styles/css/default.css';
+
+// fa图标
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+// CKEditor
+//import ckEditor from 'ckeditor4-vue';
+
+// 指令
+import focus from './directive/focus';
+import tabHide from './directive/tabHide';
+
+// 动态路由
+//import dynamicRouter from './router/dynamic';
+
+// 基础布局
+import basicLayout from './layouts/basic-layout';
+
+// libs
+import lodop from './libs/lodop';
+import * as echarts from 'echarts';
+import request from './libs/request';
+import util from './libs/util';
+
+const components = {
+  Copyright,
+  RichEditor,
+  DialogSelect,
+  ItemSelect,
+  AttachmentUpload,
+  ImageUpload,
+  FileUpload,
+  ViewForm,
+  ViewTable,
+  ViewChart,
+  ModalForm,
+  ModalTable,
+  FormSetting,
+  FormSettingLayout,
+  TableSetting,
+  ModalFormFilter,
+  ModalFormSort,
+  Shortcut,
+  NoticeList,
+  iLink: Link
+};
+
+const install = function (app) {
+  if (install.installed) return;
+  //locale.use(opts.locale);
+  //locale.i18n(opts.i18n);
+
+  //if (window) window.$t = (key, value) => i18n.t(key, value);
+
+  app.use(plugins);
+  app.use(ViewUIPlus, {
+    i18n
+  });
+
+  app.mixin(mixinApp);
+  //Vue.use(ckEditor);
+
+  // 组件
+  Object.keys(components).forEach(key => {
+    app.component(key, components[key]);
+  });
+
+  // 指令，自动获得焦点
+  app.directive('focus', focus);
+  // 指令，隐藏Tab标签，保留内容
+  app.directive('tab-hide', tabHide);
+
+  // eCharts图表
+  app.config.globalProperties.$echarts = echarts;
+};
+
+// auto install
+// if (typeof window !== 'undefined' && window.Vue) {
+//     install(window.Vue);
+// }
+
+const API = {
+  version: import.meta.env.VERSION,
+  // locale: locale.use,
+  // i18n: locale.i18n,
+  install
+  //...components
+};
+
+// 页面
+const files = import.meta.globEager('./pages/**/*.vue');
+const pages = {};
+
+Object.keys(files).forEach(key => {
+  pages[key.replace(/(\.\/pages\/)/g, '')] = files[key].default;
+});
+
+// 第一次进入时，取菜单数据用于更新
+let isFirstRouteChange = true;
+
+const created = async () => {
+  // 加载设置
+  //await store.dispatch('admin/setting/init');
+  // 初始化动态路由
+  //let dynamicRoutes = await dynamicRouter.init(router, pages, layout);
+  // 处理路由 得到每一级的路由设置
+  //store.commit('admin/page/init', [...frameInRoutes, ...dynamicRoutes]);
+  // 设置顶栏菜单
+  store.commit('admin/menu/setHeader', menuHeader);
+  // 加载用户登录的数据
+  store.dispatch('admin/account/load');
+  // 加载边栏菜单
+  //store.dispatch('admin/menu/loadSider');
+  // 初始化全屏监听
+  store.dispatch('admin/layout/listenFullscreen');
+
+  // // 加载远程 i18n
+  // if (Setting.i18n.remote) loadRemoteLocaleMessages(i18n);
+};
+
+const routeChanged = to => {
+  // 监听路由 控制侧边栏显示 标记当前顶栏菜单（如需要）
+  store.dispatch('admin/menu/setMenuList', to);
+
+  if (isFirstRouteChange) {
+    isFirstRouteChange = false;
+    // 每次进入 app 时，获取一次菜单
+    //store.dispatch('admin/menu/getMenuList', to);
+  }
+
+  //this.appRouteChange(to, from);
+};
+
+export default API;
+
+export {
+  pages,
+  createApp,
+  h,
+  getCurrentInstance,
+  App,
+  router,
+  store,
+  i18n,
+  setting,
+  basicLayout,
+  lodop,
+  request,
+  mixinPage,
+  modelApi,
+  dataSourceApi,
+  taskApi,
+  util,
+  created,
+  routeChanged
+};

package/src/layouts/basic-layout/header-breadcrumb/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <Breadcrumb class="i-layout-header-breadcrumb" v-if="!isLimit" ref="breadcrumb">
+    <BreadcrumbItem>
+      {{ title }}
+      <!-- <i-menu-head-title :item="topItem" :hide-icon="!showBreadcrumbIcon" /> -->
+    </BreadcrumbItem>
+    <BreadcrumbItem v-for="item in items" :key="item.path">
+      <i-menu-head-title :item="item" :hide-icon="!showBreadcrumbIcon" />
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+      <i-menu-head-title :item="siderMenuObject[activePath]" :hide-icon="!showBreadcrumbIcon" />
+    </BreadcrumbItem>
+  </Breadcrumb>
+</template>
+<script>
+  import { nextTick } from 'vue';
+  import { mapState } from 'vuex';
+  import { flattenSiderMenu } from '../../../libs/system';
+  import iMenuHeadTitle from '../menu-head/title';
+  import { on, off } from 'view-ui-plus/src/utils/dom';
+  import { findComponentUpward, getStyle } from 'view-ui-plus/src/utils/assist';
+  import { throttle } from 'lodash';
+  import Setting from '../../../setting';
+
+  export default {
+    name: 'iHeaderBreadcrumb',
+    components: { iMenuHeadTitle },
+    computed: {
+      ...mapState('admin/layout', ['showBreadcrumbIcon', 'menuCollapse']),
+      ...mapState('admin/menu', ['openNames', 'activePath', 'header', 'headerName', 'menuSider']),
+      siderMenuObject() {
+        let obj = {};
+        this.allSiderMenu.forEach(item => {
+          if ('path' in item) {
+            obj[item.path] = item;
+          }
+        });
+        return obj;
+      },
+      items() {
+        let items = [...this.openNames];
+        let newItems = [];
+        items.forEach(i => {
+          newItems.push(this.siderMenuObject[i]);
+        });
+        items = items.filter(item => item);
+        return newItems;
+      },
+      // 第一级，默认是 menu/header.js 中的第一项
+      title() {
+        return Setting.info.title;
+      },
+      topItem() {
+        return this.header.find(item => item.name === this.headerName);
+      },
+      // 得到所有侧边菜单，并转为平级，查询图标及显示对应内容
+      allSiderMenu() {
+        return flattenSiderMenu(this.menuSider, []);
+      }
+    },
+    data() {
+      return {
+        handleResize: () => {},
+        isLimit: false,
+        maxWidth: 560,
+        breadcrumbWidth: 0
+      };
+    },
+    methods: {
+      handleCheckWidth() {
+        const $header = findComponentUpward(this, 'Header');
+        if ($header) {
+          const headerWidth = parseInt(getStyle($header.$el, 'width'));
+          nextTick(() => {
+            this.isLimit = headerWidth - this.maxWidth <= this.breadcrumbWidth;
+          });
+        }
+      },
+      handleGetWidth() {
+        this.isLimit = false;
+        nextTick(() => {
+          const $breadcrumb = this.$refs.breadcrumb;
+          if ($breadcrumb) {
+            this.breadcrumbWidth = parseInt(getStyle($breadcrumb.$el, 'width'));
+          }
+        });
+      }
+    },
+    watch: {
+      topItem: {
+        handler() {
+          this.handleGetWidth();
+          this.handleCheckWidth();
+        },
+        deep: true
+      },
+      items: {
+        handler() {
+          this.handleGetWidth();
+          this.handleCheckWidth();
+        },
+        deep: true
+      },
+      activePath: {
+        handler() {
+          this.handleGetWidth();
+          this.handleCheckWidth();
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      this.handleResize = throttle(this.handleCheckWidth, 100, { leading: false });
+      on(window, 'resize', this.handleResize);
+      this.handleGetWidth();
+      this.handleCheckWidth();
+    },
+    beforeUnmount() {
+      off(window, 'resize', this.handleResize);
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-collapse/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showReload }" @click="handleToggleMenuSide">
+    <Icon custom="i-icon i-icon-menu-unfold" v-show="menuCollapse || isMobile" />
+    <Icon custom="i-icon i-icon-menu-fold" v-show="!menuCollapse && !isMobile" />
+  </span>
+</template>
+<script>
+  import { mapState, mapMutations } from 'vuex';
+
+  export default {
+    name: 'iHeaderCollapse',
+    emits: ['on-toggle-drawer'],
+    computed: {
+      ...mapState('admin/layout', ['isMobile', 'isTablet', 'isDesktop', 'menuCollapse', 'showReload'])
+    },
+    methods: {
+      ...mapMutations('admin/layout', ['updateMenuCollapse']),
+      // 展开/收起侧边栏
+      handleToggleMenuSide(state) {
+        if (this.isMobile) {
+          this.updateMenuCollapse(false);
+          this.$emit('on-toggle-drawer', state);
+        } else {
+          this.updateMenuCollapse(!this.menuCollapse);
+        }
+      }
+    },
+    watch: {
+      // 切换页面时，在移动端自动收起侧边栏
+      // 强行传参 false 是因为有的路由不是在菜单栏发生的，toggle 会使其显示
+      $route() {
+        if (this.isMobile) this.handleToggleMenuSide(false);
+      },
+      // 在平板时自动收起菜单
+      isTablet(state) {
+        if (!this.isMobile && state) this.updateMenuCollapse(true);
+      },
+      // 在桌面时自动展开菜单
+      isDesktop(state) {
+        if (!this.isMobile && state) this.updateMenuCollapse(false);
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-fullscreen/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="toggleFullscreen">
+    <Icon custom="i-icon i-icon-full-screen" v-show="!isFullscreen" />
+    <Icon custom="i-icon i-icon-exit-full-screen" v-show="isFullscreen" />
+  </span>
+</template>
+<script>
+  import { mapState, mapActions } from 'vuex';
+
+  export default {
+    name: 'iHeaderFullscreen',
+    computed: {
+      ...mapState('admin/layout', ['isFullscreen'])
+    },
+    methods: {
+      ...mapActions('admin/layout', ['toggleFullscreen'])
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-i18n/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-i18n" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
+    <span class="i-layout-header-trigger i-layout-header-trigger-min" :class="{ 'i-layout-header-trigger-no-height': outside }">
+      <Icon custom="i-icon i-icon-i18n" />
+    </span>
+    <template #list>
+      <DropdownMenu>
+        <DropdownItem v-for="item in languages" :key="item.locale" :name="item.locale" :selected="locale === item.locale">
+          <img v-if="item.icon" :src="item.icon" />
+          <span>{{ item.language }}</span>
+        </DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+<script>
+  import Setting from '../../../setting';
+  import { mapState, mapActions } from 'vuex';
+
+  export default {
+    name: 'iHeaderI18n',
+    props: {
+      outside: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        languages: Setting.i18n.list
+      };
+    },
+    computed: {
+      ...mapState('admin/i18n', ['locale']),
+      ...mapState('admin/layout', ['isMobile'])
+    },
+    methods: {
+      ...mapActions('admin/i18n', ['setLocale']),
+      handleClick(locale) {
+        if (locale === this.locale) return;
+        this.setLocale({ locale, vm: this });
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-log/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <Tooltip :content="tooltipContent" transfer>
+    <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="handleOpenLog">
+      <Badge :count="lengthError === 0 ? null : lengthError" :overflow-count="99" :dot="showDot" :offset="showDot ? [26, 2] : [20, 0]">
+        <Icon custom="i-icon i-icon-record" />
+      </Badge>
+    </span>
+  </Tooltip>
+</template>
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name: 'iHeaderLog',
+    computed: {
+      ...mapGetters('admin/log', ['length', 'lengthError']),
+      showDot() {
+        return !!this.length && this.lengthError === 0;
+      },
+      tooltipContent() {
+        if (!this.length) {
+          return '没有日志或异常';
+        } else {
+          let text = `${this.length} 条日志`;
+          if (this.lengthError) text += ` | 包含 ${this.lengthError} 个异常`;
+          return text;
+        }
+      }
+    },
+    methods: {
+      handleOpenLog() {
+        this.$router.push(
+          {
+            name: 'system-log'
+          },
+          () => {}
+        );
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-logo/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <i-link class="i-layout-header-logo" :class="{ 'i-layout-header-logo-stick': !isMobile }" to="/">
+    <img :src="rootPath + 'images/logo-small.png'" v-if="isMobile" />
+    <img :src="rootPath + 'images/logo.png'" v-else-if="headerTheme === 'light'" />
+    <img :src="rootPath + 'images/logo-dark.png'" v-else />
+  </i-link>
+</template>
+<script>
+  import { mapState } from 'vuex';
+  import mixinPage from '../../../mixins/page';
+  import Setting from '../../../setting';
+
+  export default {
+    name: 'iHeaderLogo',
+    mixins: [mixinPage],
+    computed: {
+      ...mapState('admin/layout', ['isMobile', 'headerTheme']),
+      rootPath() {
+        return Setting.rootPath;
+      }
+    }
+  };
+</script>