noob-components/.trellis/spec/plugs-config-store-i18n/sizes.md

# 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`

```typescript
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`

```typescript
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`

```typescript
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`

```typescript
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`

```typescript
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:

```typescript
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

```typescript
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

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

---

**Language**: English