响应式尺寸

配置响应式表单尺寸

import { computed } from "vue";
import { useScreenSizeStore } from "@/store/modules/screen";

setupPageTemplate({
  ui: {
    // 传入 getter 函数实现响应式
    formItemSize: () => {
      const screenStore = useScreenSizeStore();
      return screenStore.isLargeScreen ? "large" : "default";
    },
  },
});

尺寸选项

值	说明
'small'	小尺寸
'default'	默认尺寸
'large'	大尺寸

静态配置

setupPageTemplate({
  ui: {
    formItemSize: "default", // 固定尺寸
  },
});

动态配置

setupPageTemplate({
  ui: {
    // 函数形式，每次渲染时调用
    formItemSize: () => {
      // 根据屏幕宽度动态返回
      if (window.innerWidth > 1920) return "large";
      if (window.innerWidth > 1280) return "default";
      return "small";
    },
  },
});

配合 Pinia Store

// store/modules/screen.ts
import { defineStore } from "pinia";

export const useScreenSizeStore = defineStore("screen", {
  state: () => ({
    width: window.innerWidth,
  }),
  getters: {
    isLargeScreen: (state) => state.width > 1920,
    isMediumScreen: (state) => state.width > 1280 && state.width <= 1920,
    isSmallScreen: (state) => state.width <= 1280,
  },
  actions: {
    updateWidth() {
      this.width = window.innerWidth;
    },
  },
});

// main.ts
window.addEventListener("resize", () => {
  useScreenSizeStore().updateWidth();
});