20260827173205

code/fms/fms-vue/src/components/ui/form/form.vue

@@ -23,6 +23,9 @@ const props = defineProps({
   labelWidth: { type: [String, Number], default: undefined },
   /** 每行字段列数（>1 时启用网格布局，字段按顺序从左到右自动换行） */
   columns: { type: Number, default: 1 },
+  /** 仅影响 FormItem 的 span 计算，不让 Form 自身变 grid（grid 由外部容器控制）：
+   *  用于「外部自定义栅格 + FormItem 跨列」的场景（如表单设计器预览） */
+  spanColumns: { type: Number, default: 0 },
   /** 表单最大宽度（Number 按 px 处理；不传则不限制） */
   maxWidth: { type: [String, Number], default: undefined },
   /** 必填红星标记 */
@@ -99,7 +102,7 @@ provide('fms-form', {
   layout: computed(() => props.layout),
   labelAlign: computed(() => props.labelAlign),
   labelWidth: computed(() => props.labelWidth),
-  columns: computed(() => props.columns),
+  columns: computed(() => props.spanColumns || props.columns),
   requiredMark: computed(() => props.requiredMark),
   validateTrigger: computed(() => props.validateTrigger),
   registerField,

code/fms/fms-vue/src/components/ui/index.js

@@ -0,0 +1,64 @@
+/**
+ * UI 组件库统一出口
+ * 用法：import { Button, Input, Modal, Message } from '@/components/ui'
+ */
+import Button from './button/button.vue'
+import ButtonGroup from './button-group/button-group.vue'
+import Checkbox from './checkbox/checkbox.vue'
+import DatePicker from './date/date-picker.vue'
+import RangePicker from './date/range-picker.vue'
+import TimeSelect from './date/time-select.vue'
+import Drawer from './drawer/drawer.vue'
+import Dropdown from './dropdown/dropdown.vue'
+import Form from './form/form.vue'
+import FormItem from './form/form-item.vue'
+import Input from './input/input.vue'
+import Modal from './modal/modal.vue'
+import Pagination from './pagination/pagination.vue'
+import Popover from './popover/popover.vue'
+import Radio from './radio/radio.vue'
+import RadioGroup from './radio/radio-group.vue'
+import Scrollbar from './scrollbar/scrollbar.vue'
+import Select from './select/select.vue'
+import Spin from './spin/spin.vue'
+import Splitter from './splitter/splitter.vue'
+import SplitterPanel from './splitter/panel.vue'
+import Switch from './switch/switch.vue'
+import Tabs from './tabs/tabs.vue'
+import TabPane from './tabs/tab-pane.vue'
+import Tag from './tag/tag.vue'
+import Tooltip from './tooltip/tooltip.vue'
+import Tree from './tree/tree.vue'
+
+import { Message } from './message/message-manager'
+
+export {
+  Button,
+  ButtonGroup,
+  Checkbox,
+  DatePicker,
+  RangePicker,
+  TimeSelect,
+  Drawer,
+  Dropdown,
+  Form,
+  FormItem,
+  Input,
+  Message,
+  Modal,
+  Pagination,
+  Popover,
+  Radio,
+  RadioGroup,
+  Scrollbar,
+  Select,
+  Spin,
+  Splitter,
+  SplitterPanel,
+  Switch,
+  Tabs,
+  TabPane,
+  Tag,
+  Tooltip,
+  Tree,
+}

code/fms/fms-vue/src/components/ui/modal/modal.vue

@@ -71,9 +71,12 @@ const isOpen = computed({
   },
 })
 
-const panelWidth = computed(() =>
-  typeof props.width === 'number' ? `${props.width}px` : props.width,
-)
+// number 按 px，纯数字字符串补 px，其余（如 480px / 60%）按 CSS 原样
+const panelWidth = computed(() => {
+  if (typeof props.width === 'number') return `${props.width}px`
+  const text = String(props.width).trim()
+  return /^\d+(\.\d+)?$/.test(text) ? `${text}px` : text
+})
 
 // 面板尺寸：缩放后使用实际宽高（px），否则用 width prop
 const panelStyle = computed(() => {