Project introduction

Dashboard is a project developed based on Vite + Vue3 + Typesript. It is a personalized browser navigation front page panel that supports custom adding components and editing various attributes of components. Responsive design, you can customize random wallpaper background or dynamic wallpaper.

  • ⚡ making
  • 💡 Demo

features

✨ Unit of component length

Panels can be laid out based on a responsive design, with optional FR units when adding components that dynamically calculate component widths based on the current screen width. It is also possible to use PX fixed length units, but the general recommendation is to use FR for width and PX for height.

💫 Layout Mode

There are currently two layout modes available. The default layout is based on document flow and can be dragged and dropped to change the order of components using VueDraggable. The other is Fixed mode, which is based on Fixed positioning, using @howdyjs/to-drag drag to change position.

🍭 Editing mode

The added components have a lot of customizable configurations beyond background colors, shadows, font color sizes, and component properties. Click the menu at the lower right to unlock the lock and enter the editing mode. In the editing mode, right-click the component to pop up the menu for editing (long press to pop up the menu at the mobile terminal). The right button menu is based on @howdyjs/mouse-menu.

🍌 Data synchronization

Click the auxiliary functions in the lower right to enter the import and export panel. Now it supports two synchronization methods, one is to generate random codes for synchronization, the other is to export JSON files for synchronization. It is possible to consider adding account functions for synchronization in the future.

🎉 Default Theme

When entering the site for the first time, the default theme will be displayed. Users can select a default theme and then create a second time.

🌟 Random images with live wallpapers

Random images can be used for website background and component background. The images are from random images of Unsplash, and you can choose to customize keywords. Dynamic wallpapers have been added recently. When selecting a background image, select a network image and enter a network video path to identify the dynamic wallpapers.

🌈 Multiple components

Currently, various components are provided, such as clock, weather, search bar, etc. More components will be added later. Component import is loaded on demand. Unused components are not loaded at initialization.

Material components

  • Empty: placeholder block component that supports some simple configuration and custom text

  • Clock: indicates a Clock component

  • Verse: Random ancient poetry component, API fromhttps://www.jinrishici.com/

  • Search: The Search bar supports user-defined Search engines. Press Tab to automatically switch to the next one, keyword association

  • Collection: keyboard favorites. After setting the website, press the corresponding key to automatically jump to the website Icon

  • Iframe: indicates the Iframe of an external website. The latest version of the browser supports only the Iframe of the same protocol (HTTPS)

  • TodoList: Cheat list, you can set different dates at the same time

  • Weather: indicates the Weather component, which can automatically obtain the city by IP or manually enter the city. In the future, GPS reading is considered

  • CountDown: The CountDown component supports three units: day, hour, and minute

  • JuejinList: Gold digger component that displays the latest hot list

  • WeiboList: Trending on Weibo

  • GithubTrending: GithubTrending, showing the top warehouses of the day

Project related

StandardForm form encapsulation

The ElementPlus framework is used in the project. To reduce the amount of code and extract reuse logic, a StandardForm component is encapsulated that can generate Element forms using JSX files.

Each material component shall provide its own setting. TSX file for the configuration of the component, and the reusable configuration items shall be removed.

Example: Setting.tsx for the Weather component

// @/materials/Weather/setting.tsx
import pick from '.. /base'
export default {
  formData: {
    weatherMode: 1.cityName: ' '.duration: 15.position: 5.baseFontSize: 16.textColor: '# 262626'.textShadow: '0 0 1px #464646'.iconShadow: '0 0 1px #464646'.fontFamily: ' '.padding: 10
  },
  formConf (formData: Record<string.any>) {
    return {
      weatherMode: {
        label: 'Weather City'.type: 'radio-group'.radio: {
          list: [{name: 'Automatically Obtain (IP)'.value: 1
            },
            {
              name: 'Manual input'.value: 2}].label: 'name'.value: 'value'}},cityName: {
        when: (formData: Record<string.any>) = > formData.weatherMode === 2.type: 'input'.attrs: {
          placeholder: 'Please enter city name (currently only Chinese city name is supported)'.clearable: true
        },
        rules: [{
          required: true.validator: (rule: any, value: any, callback: Function) = > {
            if (formData.weatherMode === 2 && !value) {
              callback(new Error('Please enter city name')) } callback(); }}},duration: {
        label: 'Auto refresh Rate'.type: 'input-number'.attrs: {
          'controls-position': 'right'.min: 5.max: 12 * 60
        },
        tips: 'Refresh frequency in minutes'
      },
      ...pick(formData, [
        'position'.'baseFontSize'.'textColor'.'textShadow'.'iconShadow'.'fontFamily'.'padding'])}}}Copy the code

FormConf needs to pass in a formData function as a two-way binding for vModel

Font selector

A common property of the component is to set the font, which needs to be retrieved from the user system’s own font list. After referring to tips: Using JS to check whether the user has installed a Font family font (Zhang Xinxu), extract the method getSupportFontFamilyList.

The principle is to use canvas to draw the font after setting and check whether it is the same as the default font. If it is the same, it indicates that it is not supported. If it is not, the new font setting takes effect and the user supports the font.

It is also possible to consider adding Google Font support for custom fonts later.

Todo

  • More material components
  • The Service worker stores the image cache(Completed)
  • Chrome Extension adds browser plug-in mode(Completed)
  • Electorn Desktop application mode(Completed)

The project is still under continuous development and optimization. If there is anything wrong in the article or project, please kindly point it out. Thank you very much. If Demo cannot be accessed, visit the standby site.

  • ⚡ making
  • 💡 Demo