20260827173205

code/fms/fms-vue/src/components/FpsMonitor.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { RotateCcw } from '@lucide/vue'
-import Button from '@/components/ui/button/button.vue'
+import { Button } from '@/components/ui'
 
 defineOptions({ inheritAttrs: false })
 

code/fms/fms-vue/src/components/fms-file/FileCard.vue

@@ -1,10 +1,7 @@
 <script setup>
 import { computed, h } from 'vue'
 import { Trash2, Download, Eye, MoreHorizontal } from '@lucide/vue'
-import Button from '@/components/ui/button/button.vue'
-import Checkbox from '@/components/ui/checkbox/checkbox.vue'
-import Tag from '@/components/ui/tag/tag.vue'
-import Dropdown from '@/components/ui/dropdown/dropdown.vue'
+import { Button, Checkbox, Tag, Dropdown } from '@/components/ui'
 import { getPreviewUrl } from '@/services/fileService'
 import {
   extFromName,

code/fms/fms-vue/src/components/fms-file/FileCategoryPanel.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import Tree from '@/components/ui/tree/tree.vue'
-import Spin from '@/components/ui/spin/spin.vue'
+import { Tree, Spin } from '@/components/ui'
 
 const props = defineProps({
   treeData: { type: Array, default: () => [] },

code/fms/fms-vue/src/components/fms-file/FileListPanel.vue

@@ -1,14 +1,16 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import { Message } from '@/components/ui/message/message-manager'
-import Modal from '@/components/ui/modal/modal.vue'
-import Button from '@/components/ui/button/button.vue'
-import ButtonGroup from '@/components/ui/button-group/button-group.vue'
-import Checkbox from '@/components/ui/checkbox/checkbox.vue'
-import Spin from '@/components/ui/spin/spin.vue'
-import Tag from '@/components/ui/tag/tag.vue'
-import Tooltip from '@/components/ui/tooltip/tooltip.vue'
-import Pagination from '@/components/ui/pagination/pagination.vue'
+import {
+  Message,
+  Modal,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Spin,
+  Tag,
+  Tooltip,
+  Pagination,
+} from '@/components/ui'
 import {
   Download,
   Trash2,

code/fms/fms-vue/src/components/fms-file/FilePreviewPanel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import { ChevronLeft, ChevronRight, FileText } from '@lucide/vue'
-import Button from '@/components/ui/button/button.vue'
+import { Button } from '@/components/ui'
 import { getPreviewUrl } from '@/services/fileService'
 import { extColor, formatSize } from './fileVisual'
 

code/fms/fms-vue/src/components/fms-file/FmsFile.vue

@@ -1,8 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import Splitter from '@/components/ui/splitter/splitter.vue'
-import SplitterPanel from '@/components/ui/splitter/panel.vue'
-import Spin from '@/components/ui/spin/spin.vue'
+import { Splitter, SplitterPanel, Spin } from '@/components/ui'
 import { loadDataApi } from '@/services/api'
 import FileCategoryPanel from './FileCategoryPanel.vue'
 import FileListPanel from './FileListPanel.vue'

code/fms/fms-vue/src/components/fms-file/FmsFileModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Modal from '@/components/ui/modal/modal.vue'
+import { Modal } from '@/components/ui'
 import { useFileModal } from './useFileModal'
 import FmsFile from './FmsFile.vue'
 

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(() => {