preface

Upgrade for the user experience has come, now, theme customization, transition, history TAB page, page caching, the sidebar menu, return to the top, and the border around the table, long text ellipsis, fixed column operation, fixed, full screen, page header, not only the developer’s exclusive, the user can also on the page with a simple operation to custom configuration page, Let the user have a sense of belonging, dazzle up at the same time can also have a kind of this is customized for him.

This framework allows you to focus more on your business and separate out activities that are not relevant to the business. I’m also just repackaging an existing framework based on the ANTD VUE component library. Predecessors planted trees, and later generations were cool and stood on the shoulders of giants, just to walk faster and stronger.

It’s not really a framework, after all, it’s just a little bit of functionality, and what I did was just icing on the cake.

But it must be explained that not all projects need to have such a function, because now there are a lot of websites are not particularly favored, but with these functions of the website instant tall still rise, let you understand the user, even if it is the user’s own biochemical configuration.

The following is a full display of the framework, and the small functions mentioned above are the [site Settings] function on the right, and the TAB history TAB at the bottom of the header.

Project online: : Dormitory.yunkus.com

An overview of customizations

The basic configuration

  1. Online change skin
  2. Customize the transition effect for entering and leaving the page
  3. The display of the history TAB is hidden
  4. The side bar menu collapses and expands
  5. Return to top function on off

form

  1. Is there a border
  2. Text is too long and omitted
  3. Whether to enable the operation column is fixed
  4. Whether to enable table header fixation

Full screen

  1. Full screen on/off

These configurations, once configured by the user, are saved to the status management and local cache in real time. As long as the cache is not deleted, the user’s own configuration is retained.

The realization idea of website configuration

When users perform configuration operations, the modified configurations are automatically saved to the status management (Store) and the config configurations are updated to the local cache. When the page is refreshed (F5), the configuration items are first fetched from the local cache and then assigned to the state management. The related configurations in the page are uniformly fetched from the state management.

Functional specifications

In the skin

Theme color switch using the Webpack-theme-color-replacer module, this module implementation ideas I think is better.

NPM address: www.npmjs.com/package/web…

Thinking a

Generate styles online and in real time with the power of less.js.

Advantages: Styles are generated online, no redundant style files are generated, and there is no style overwriting problem.

Disadvantages: Because the entire style is generated online, it is time-consuming and takes up resources.

Idea 2

All themes are packaged locally into a theme directory, each containing a complete set of styles, which are dynamically imported into the stylesheet online.

Advantages: Pregeneration in the local development environment, rather than live generation online, also without style overwriting issues.

Disadvantages: Generate multiple sets of theme files, without the use of skin, these files are quite useless files.

Thought three

Webpack – theme – color – replacer

Advantages: do not generate redundant theme files, compared with the first method, the performance will be better, some of the page layout will not appear jitter when skin, only generate a style file only related to the theme color, and then generate the theme color system online, and then replace the theme color style file.

Disadvantages: Even though it is faster than the first method to generate coverage for classes with theme colors, it takes time to process. We also need to deal with repeated overwriting styles in Wepack, but this is a once and for all configuration.

The implementation of webpack-theme-color-replacer is similar to that of less. Js, which generates styles in real time through JS, but less. Webpack-theme-color-replacer, as its name suggests, covers only color styles, which is a compromise between the two methods.

Why do I personally think the third way is better? The reasons are as follows:

  1. Skin changing function is not a common function
  2. The skin is generated in real time. Even if we need to wait for the dynamic generation of the program, this time is acceptable as long as we give enough waiting feedback to the user.
  3. The page layout is smooth and silky without jitter.

Think about it. If an infrequently used feature makes you feel a little uncomfortable every time you use it, the experience is bound to be disappointing, even in small details.

But there is also a presentation problem with using the Webpack-theme-color-replacer approach: style overwriting.

Such as:

  1. If the type of the button is link, the border of the button is covered with the value of transparent, whilewebpack-theme-color-replacerPlugins do not handle attributes other than colors.
  2. White-related classes are also not processed. This is not to say that it can’t be handled, we could also manually append white to the theme color, but this would create a bigger style mess.

To better solve the above two problems, in addition to using changeSelector callback, we can also use resolveCss callback, manual style overwriting.

Todo: Add color palette tool (or custom color values), let as many colors as possible, choose your choice, everyone loves it.

Transition effects

implementation

Vue Transition + Animate. CSS animation library

instructions

Custom transitions into and out of the page use the animate. CSS library. All transitions come from the animate. The antD Vue component library will be able to calculate the fixed column height with some of the animate. CSS transitions will affect the fixed column height of the antD Vue component library.

The history TAB.

implementation

State management

instructions

Many background management systems now have this interaction, and the history TAB makes it easier to click on the specified menu page again. Its implementation idea is also very simple, as long as you click on the sidebar menu, then the menu will automatically push to the history TAB if it is not in the history TAB. It’s true that this feature can improve your processing efficiency. Assuming you have a large menu, I’m not going to make it too complicated here. Here’s a simple example: A three-level menu is very common, isn’t it? Imagine a scene where you need to switch back and forth between the second-level and third-level menus of different top-level menus, and click the menu repeatedly for countless times, and your mood is not very helpless. If there is a history TAB, you can directly click the corresponding TAB to switch to the corresponding menu, click a direct destination, which page is not. The function of the TAB is to lay out the multi-level menu and nothing more.

The history TAB also records the click frequency and sorts the TAB data in real time. The higher the frequency, the later the data is.

Note: Although the state is saved in the state management, the data is also cleared when the page is refreshed, which can be modified according to the specific scenario in the project.

Todo: History TAB users can customize sorting (ascending, descending)

form

implementation

Table component coordination state management based on ANTD VUE component library

instructions

As mentioned earlier, if you enable fixed columns in the table, some transition effects will have a negative effect on the height of fixed columns (height exception), which directly affects the user experience of the page, so why do I include these transitions here?

First, the purpose of this post is to show that transition effects can be used with the animate. CSS library to achieve stunning transitions. Second, this wouldn’t be a problem if you didn’t have fixed columns enabled on your page, but a little effort is made here to make the animate.CSS look as attractive as possible.

Table operable items: table border, text too long omission, operation fixed column, table head fixed.

Full screen

instructions

Full screen here is not full screen at the browser level, but full screen at the website page level, leaving only the main content area of the page, but optionally leaving some items.

Todo: Adds browser-level full screen

other

The user authentication

Create a new permission.js file in the project root directory that holds the authentication code. Authentication is implemented through route interception.

Todo: Indicates that the local login data is automatically cleared after the user expires

Resource loading

Before the static resource loading is complete (before the VUE can be executed), there is an animation for the resource loading loading. If a website skin is set, the loading animation will disappear after the skin is set. Loading’s background color will also change as the theme color changes.

Return to the top

You can customize whether returning to the top is enabled or not, and you can set how far to scroll before triggering the display.

Code article

Project structure, code organization, and component encapsulation are, in my opinion, the three most important components of a project. The project structure, code organization, and component encapsulation will be shared later.

In addition, some commonly used code that is highly reusable is encapsulated in mixins. The benefits include but are not limited to the same purpose as component encapsulation:

  1. Code is highly reusable
  2. Reduce the number of bugs
  3. Improve development efficiency
  4. This ensures the simplicity of the page code

In this framework of secondary encapsulation:

  1. Editing (adding, modifying) pages is done in the list as a popover. So some of the repeated scene implementations of this popover can be drawn into Mxins

  2. The list page also has reusable scenarios, so pull common code into mixins as well (e.g., add, modify, delete)

  3. The list search bar is also component wrapped

The list only needs to define the interface and some common attributes, and introduce the corresponding mixins file of the list, so that the requirements of a list page can be quickly completed.

In fact, the search bar is only a few kinds, input box, drop-down box, date selection, etc., put these scenes into a component, in the list page through this component to achieve list search filtering, list business only need to introduce components, set data can, through the data driven component to generate multiple filtering conditions.

Code abstraction reuse, so that there is no difficult code to write, so that everything becomes easy, without any heart burden (repeat bug in the same scene), even if there is also likely to be just not considered the scene, it is good to improve in the mixins file, once fixed, lifetime benefit.

As for the specific implementation details, I will share them in the next article. The more likes you have, the faster the article will come. After all, my motivation comes from your silent likes, comments and exchanges.