About Statusbar Sections

CabloyJS abstracts the statusbar sections, which is not only convenient for flexible customization, but also convenient for developing new sections

The module a-layoutpc has two built-in sections, which are:

Name Description
Clock Show a clock
Copyright Show the copyright

Let’s take Copyright as an example to show how to develop a statusbar section

1. Create a Vue component

The Statusbar Section itself is a Vue component, but it cleverly uses multiple syntax features of Vue. In order to explain it more clearly, all the source codes are pasted here before detailed explanation

src/module/a-layoutpc/front/src/components/sections/copyright.vue

<template>
  <span>{{$text('CopyrightTip')}}</span>
</template>
<script>
// export
export default {
  install,
};

// install
function install(_Vue) {
  const Vue = _Vue;
  const ebLayoutSectionBase = Vue.prototype.$meta.module.get('a-layoutpc').options.mixins.ebLayoutSectionBase;
  return {
    mixins: [ebLayoutSectionBase],
  };
}

</script>

1.1 export default

First of all, we do not export Options object directly like ordinary Vue component, but export an object with the install method like Vue plugin

1.2 mixins: [ebLayoutSectionBase]

ebLayoutSectionBase is the base component provided by module a-layoutpc. All sections must mixin this base component

Here we can explain why we can’t export the Options object directly. Because module a-layoutpc is a module loaded asynchronously, and all sections must mixin ebLayoutSectionBase. If export Options object directly, you will not obtain ebLayoutSectionBase at compile time, so mixin will fail

2. Reference Vue component

In order for the system to find this Vue component, you need to reference it in the component list

src/module/a-layoutpc/front/src/components.js

import sectionCopyright from './components/sections/copyright.vue';

export default {
  sectionCopyright,
};

3. Definition of Function at backend

In a complex system, the problem of data authorization will be involved. We need to control the authority of sections. Then, we need to define the function corresponding to the section at backend so that the section can be authorized

3.1 Definition of Function

src/module/a-layoutpc/backend/src/meta.js

...
sectionCopyright: {
  title: 'Copyright',
  component: 'sectionCopyright',
  menu: 4,
  public: 1,
},
...
Name Description
title Section’s title
component Section’s Vue component
menu const 4: Function’s type which means section
public Public or not. If it is public, no authorization is required, and all users can access it

3.2 Initialization

src/module/a-layoutpc/backend/src/service/version.js

      if (options.version === 1) {

        // roleFunctions: sections
        const roleSections = [
          { roleName: null, name: 'sectionCopyright' },
          { roleName: null, name: 'sectionClock' },
        ];
        await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions: roleSections });

      }

    }

We need to add the authorization record of the section to the database when the module data version is initialized. Because the public of the section is true, the roleName here should be null

  1. About Module Data Version, please refer to: Module Data Version
  2. About Definition of Function, please refer to: Function & Menu
  3. About Function Authorization, please refer to: Function Authorization