Config Sizes

Size variant classes for responsive layout configuration.

Overview

Size classes define layout dimensions, spacing, and typography scaling. All sizes inherit from the base Normal class.

Size Hierarchy

Normal (base class)
├── Small
└── Large

Base Normal Class

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/size/normal.ts

export default class Normal {
  head = 50;
  aside = 180;
  size = 'default'; // 总体尺寸
  fontSize = '16px'; // 总体字体尺寸
  titleSize = '18px'; // 标题字体尺寸
  headIconSize = '20px'; // 头部图标尺寸
  headHeight = '50px'; // 头部高度
  closeTop = '10px'; // 展开收起菜单按钮
  headRightWidth = '400px'; // 头部右侧菜单宽度
  headLeftWidth = ''; // 头部左侧剩余宽度
  asideWidth = '180px'; // 左侧菜单宽度
  mainHeight = ''; // 通用页面组件高度
  mainPad = '5px'; // 通用页面组件内边距

  menuIconSize = '18px';

  loginHeight = '350px';
  loginWidth = '450px';

  searchRowHeight = '40px'; // 查询行高
  searchRowPad = '10px'; // 查询行内间距
  searchMargin = '15px'; // 查询元素水平间距
  searchWidth = '170px'; // 查询元素默认宽度

  tableHeight = 0; // 表格默认高度
  pTableHeight = 0; // 带分页表格默认高度
  pageHeight = 36; // 分页插件高度
  tablePad = '4px';
}

Normal Properties

Property	Type	Description
`head`	number	Header height in pixels
`aside`	number	Aside width in pixels
`size`	string	Size variant name
`fontSize`	string	Global font size
`titleSize`	string	Title font size
`headIconSize`	string	Header icon size
`headHeight`	string	Header height CSS value
`asideWidth`	string	Aside width CSS value
`mainHeight`	string	Main content area height
`mainPad`	string	Main content padding
`menuIconSize`	string	Menu icon size
`searchRowHeight`	string	Search row height
`searchRowPad`	string	Search row padding
`searchMargin`	string	Search element horizontal margin
`searchWidth`	string	Search element default width
`tableHeight`	number	Table default height
`pTableHeight`	number	Table height with pagination
`pageHeight`	number	Pagination component height
`tablePad`	string	Table padding

Small Size

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/size/small.ts

export default class Small extends Normal {
  head = 45;
  aside = 160;
  size = 'small';
  fontSize = '14px';
  titleSize = '16px';
  headIconSize = '16px';
  headHeight = '45px';
  closeTop = '35px';
  headRightWidth = '350px';
  asideWidth = '160px';

  menuIconSize = '16px';

  searchRowHeight = '35px';
  searchRowPad = '7px';
  searchMargin = '10px';
  searchWidth = '150px';

  pageHeight = 28;
  tablePad = '2px';
}

Large Size

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/size/large.ts

export default class Small extends Normal {
  head = 60;
  aside = 200;
  size = 'large';
  fontSize = '18px';
  titleSize = '20px';
  headIconSize = '24px';
  headHeight = '60px';
  closeTop = '45px';
  headRightWidth = '450px';
  asideWidth = '200px';
  mainPad = '8px';

  menuIconSize = '20px';

  searchRowHeight = '45px';
  searchRowPad = '12px';
  searchWidth = '190px';

  tablePad = '8px';
}

Exports

File: /home/hechang27/Documents/sprt/noob-components/plugs/config/size/index.ts

import Normal from './normal';
import Small from './small';
import Large from './large';

export const normal = new Normal();
export const small = new Small();
export const large = new Large();

Dynamic Size Initialization

Sizes are initialized dynamically based on window dimensions in the login action:

File: /home/hechang27/Documents/sprt/noob-components/plugs/store/index.ts

login = (store) => {
  const { state, commit } = store;
  state.size.headHeight = state.size.head + "px";
  state.size.asideWidth = state.size.aside + "px";
  commit("initSize");
  this.getMenus(store);
};

The initSize mutation calculates derived values:

initSize = (state, param) => {
  const size = state.size;
  const aside = parseInt(size.asideWidth);
  const head = parseInt(size.headHeight);
  const mainPad = parseInt(size.mainPad);
  const searchRow = parseInt(size.searchRowHeight);
  const searchRowPad = parseInt(size.searchRowPad);
  const headRightWidth = parseInt(size.headRightWidth);
  if (param) {
    size.height = param[0];
    size.width = param[1];
  }
  size.mainHeight = Math.floor(size.height - head) + "px";
  size.tableHeight = size.height - 2 * (mainPad + searchRowPad) - 3 - searchRow - head;
  size.pTableHeight = size.tableHeight - size.pageHeight;

  size.headLeftWidth = size.width - aside - headRightWidth - 20 + "px";
};

Usage Pattern

import { Size } from '../config';

// Access current size
const currentSize = state.size; // State.size is of type Size.normal

// Use size properties for layout
header.style.height = currentSize.headHeight;
aside.style.width = currentSize.asideWidth;

Anti-Patterns

Do not hardcode pixel values - Use size properties for consistent responsive behavior
Do not skip initSize after changing size - The mutation recalculates derived values like mainHeight and tableHeight
Do not create new size variants without extending Normal - Missing properties will cause layout issues

Language: English

5.6 KiB Raw Blame History