ztab/app/src/config/layout.ts

export const layoutConfig = {
  // Muuri 网格系统尺寸。
  grid: {
    // 1x1 单元格宽高（像素）。
    cellSize: 106,
    // 单元格间距（像素）。
    gap: 16,
  },
  // 左侧栏布局。
  sidebar: {
    // 侧栏宽度（像素）。
    width: 68,
    // 侧栏上下内边距（像素）。
    paddingY: 20,
    // 头像占位尺寸（像素）。
    profileSize: 40,
    // 头像下方间距（像素）。
    profileMarginBottom: 30,
    // 导航项正方形尺寸（像素）。
    navItemSize: 44,
    // 导航项间距（像素）。
    navGap: 16,
    // 激活指示条水平偏移（可为负）。
    activeIndicatorOffset: -8,
    // 激活指示条宽度（像素）。
    activeIndicatorWidth: 4,
    // 激活指示条高度（像素）。
    activeIndicatorHeight: 20,
    // “新增”按钮额外上边距（像素）。
    addItemMarginTop: 10,
  },
  // 主内容区边界。
  content: {
    // 最大宽度（像素）。
    maxWidth: 1600,
    // 内容区内边距（像素）。
    padding: 40,
  },
  // 搜索栏尺寸。
  searchBar: {
    // 最大宽度（像素）。
    maxWidth: 560,
    // 高度（像素）。
    height: 52,
    // 水平内边距（像素）。
    paddingX: 16,
    // 搜索栏下方间距（像素）。
    marginBottom: 40,
  },
  // 图标卡片尺寸与字体。
  icon: {
    // 图标方块尺寸（像素）。
    size: 72,
    // 图标首字母字体大小（像素）。
    fontSize: 28,
    // 卡片内边距（像素）。
    padding: 0,
    // 图标卡片圆角（像素）。
    radius: 12,
    // 标签字体大小（像素）。
    labelFontSize: 13,
    // 图标与标签间距（像素）。
    labelMarginTop: 8,
  },
  // 组件卡片尺寸与字体。
  widget: {
    // 内容区内边距（像素）。
    contentPadding: 16,
    // 标签字体大小（像素）。
    labelFontSize: 13,
    // 标签上下内边距（像素）。
    labelPaddingY: 8,
  },
  // 时钟尺寸。
  clock: {
    // 时间字体大小（像素）。
    timeFontSize: 82,
    // 日期字体大小（像素）。
    dateFontSize: 16,
    // 时钟下方间距（像素）。
    marginBottom: 30,
    // 字母间距（像素）。
    letterSpacing: 2,
    // 日期上方间距（像素）。
    dateMarginTop: 8,
  },
  // 右键菜单尺寸。
  contextMenu: {
    // 菜单宽度（像素）。
    width: 180,
    // 菜单内边距（像素）。
    padding: 8,
    // 菜单项上下内边距（像素）。
    itemPaddingY: 10,
    // 菜单项左右内边距（像素）。
    itemPaddingX: 16,
    // 图标尺寸（像素）。
    iconSize: 16,
    // 图标与文字间距（像素）。
    iconMarginRight: 12,
    // 布局区块上下内边距（像素）。
    layoutSectionPaddingY: 6,
    // 布局区块左右内边距（像素）。
    layoutSectionPaddingX: 12,
    // 布局标题下方间距（像素）。
    layoutTitleMarginBottom: 8,
    // 布局选项间距（像素）。
    layoutOptionsGap: 6,
    // 布局选项胶囊宽度（像素）。
    layoutOptionWidth: 40,
    // 布局选项上下内边距（像素）。
    layoutOptionPaddingY: 4,
  },
} as const;

// 设置根元素上的像素级样式变量。
const setPx = (root: HTMLElement, name: string, value: number) => {
  root.style.setProperty(name, `${value}px`);
};

// 将布局配置写入全局样式变量，供样式使用。
export const applyLayoutConfig = (root: HTMLElement = document.documentElement) => {
  setPx(root, '--grid-cell-size', layoutConfig.grid.cellSize);
  setPx(root, '--grid-gap', layoutConfig.grid.gap);

  setPx(root, '--sidebar-width', layoutConfig.sidebar.width);
  setPx(root, '--sidebar-padding-y', layoutConfig.sidebar.paddingY);
  setPx(root, '--sidebar-profile-size', layoutConfig.sidebar.profileSize);
  setPx(root, '--sidebar-profile-margin-bottom', layoutConfig.sidebar.profileMarginBottom);
  setPx(root, '--sidebar-nav-item-size', layoutConfig.sidebar.navItemSize);
  setPx(root, '--sidebar-nav-gap', layoutConfig.sidebar.navGap);
  setPx(root, '--sidebar-active-indicator-offset', layoutConfig.sidebar.activeIndicatorOffset);
  setPx(root, '--sidebar-active-indicator-width', layoutConfig.sidebar.activeIndicatorWidth);
  setPx(root, '--sidebar-active-indicator-height', layoutConfig.sidebar.activeIndicatorHeight);
  setPx(root, '--sidebar-add-margin-top', layoutConfig.sidebar.addItemMarginTop);

  setPx(root, '--content-max-width', layoutConfig.content.maxWidth);
  setPx(root, '--content-padding', layoutConfig.content.padding);

  setPx(root, '--search-max-width', layoutConfig.searchBar.maxWidth);
  setPx(root, '--search-height', layoutConfig.searchBar.height);
  setPx(root, '--search-padding-x', layoutConfig.searchBar.paddingX);
  setPx(root, '--search-margin-bottom', layoutConfig.searchBar.marginBottom);

  setPx(root, '--icon-size', layoutConfig.icon.size);
  setPx(root, '--icon-font-size', layoutConfig.icon.fontSize);
  setPx(root, '--icon-card-padding', layoutConfig.icon.padding);
  setPx(root, '--widget-card-padding', layoutConfig.icon.padding);
  setPx(root, '--icon-radius', layoutConfig.icon.radius);
  setPx(root, '--icon-label-font-size', layoutConfig.icon.labelFontSize);
  setPx(root, '--icon-label-margin-top', layoutConfig.icon.labelMarginTop);

  setPx(root, '--widget-content-padding', layoutConfig.widget.contentPadding);
  setPx(root, '--widget-label-font-size', layoutConfig.widget.labelFontSize);
  setPx(root, '--widget-label-padding-y', layoutConfig.widget.labelPaddingY);

  setPx(root, '--clock-time-font-size', layoutConfig.clock.timeFontSize);
  setPx(root, '--clock-date-font-size', layoutConfig.clock.dateFontSize);
  setPx(root, '--clock-margin-bottom', layoutConfig.clock.marginBottom);
  setPx(root, '--clock-letter-spacing', layoutConfig.clock.letterSpacing);
  setPx(root, '--clock-date-margin-top', layoutConfig.clock.dateMarginTop);

  setPx(root, '--context-menu-width', layoutConfig.contextMenu.width);
  setPx(root, '--context-menu-padding', layoutConfig.contextMenu.padding);
  setPx(root, '--context-menu-item-padding-y', layoutConfig.contextMenu.itemPaddingY);
  setPx(root, '--context-menu-item-padding-x', layoutConfig.contextMenu.itemPaddingX);
  setPx(root, '--context-menu-icon-size', layoutConfig.contextMenu.iconSize);
  setPx(root, '--context-menu-icon-margin-right', layoutConfig.contextMenu.iconMarginRight);
  setPx(root, '--context-menu-layout-section-padding-y', layoutConfig.contextMenu.layoutSectionPaddingY);
  setPx(root, '--context-menu-layout-section-padding-x', layoutConfig.contextMenu.layoutSectionPaddingX);
  setPx(root, '--context-menu-layout-title-margin-bottom', layoutConfig.contextMenu.layoutTitleMarginBottom);
  setPx(root, '--context-menu-layout-options-gap', layoutConfig.contextMenu.layoutOptionsGap);
  setPx(root, '--context-menu-layout-option-width', layoutConfig.contextMenu.layoutOptionWidth);
  setPx(root, '--context-menu-layout-option-padding-y', layoutConfig.contextMenu.layoutOptionPaddingY);
};