@neatui/vue 4.8.1 → 5.0.0

package/MIGRATION-5.0.md

@@ -0,0 +1,66 @@
+# NeatUI Vue 5.0 迁移说明
+
+5.0 重整 FormLoader 的配置组合方式。基础节点使用 `label / field / value / child / attrs / clear / enums / array / event`，控件和校验由 `model / rules` 表达；保留 `media / vertical / paths`。组标题、按钮、折叠和装饰均可由这些节点组合。核心实现为 `FormLoader.vue`、`FormRender.vue` 两个文件。
+
+## 安装
+
+```sh
+npm install @neatui/vue@^5.0.0 @neatui/css@^5.0.0
+```
+
+Vue 包依赖 CSS 5.0 新增的 `@neatui/css/query` Sass 入口。移除业务项目中指向旧版 CSS 的 `resolutions` / `overrides`，两个包应一起升级。包仍以 Vue SFC 和 TypeScript 源码交付，应用需要 Vue 编译插件和 Sass；没有改为预编译 JS 入口。
+
+Vue 最低版本声明统一为 3.5.11，与已有 Pinia 3 的要求一致；同时需要 Pinia 3 和 Vue Router 4。
+
+## 从已发布的 4.8.2 升级
+
+| 旧配置 | 5.0 写法 |
+| --- | --- |
+| 字段的 `slot: 'custom'` | `model: 'Custom'` 配合 `#Custom`，或使用同名字段插槽 |
+| 字段级 `colon` | 用 `label` 节点树精确输出文字；表单级 `colon` 继续支持 |
+| 只读取 `col` 的自定义插槽 | `col` 继续提供；通过 `bind / update` 接入双向绑定、转换和只读状态 |
+
+例如将 `{ field: 'name', slot: 'custom' }` 改为 `{ field: 'name', model: 'Custom' }`：
+
+```vue
+<FormLoader :form="form" :data="data">
+  <template #Custom="{ bind }">
+    <Input v-bind="bind" />
+  </template>
+</FormLoader>
+```
+
+旧联动签名 `(data, item, route, router)` 继续可用。第三参数的 `path` 始终是网址路径，`formPath` 是表单数据路径；它还提供 `root / data / index / array / route / router`。事件、值转换和插槽里的 `ctx.path` 仍是表单数据路径。
+
+`model[1].rules` 继续覆盖节点 `rules`，空数组表示关闭该节点校验。`verify: true` 显示统一校验图标；不会再同时触发控件和 FormLoader 两套校验。
+
+## 从桌面旧组件或中间扩展配置迁移
+
+以下是能力迁移，并非所有旧配置都能原样复制：
+
+| 旧写法 | 新写法 |
+| --- | --- |
+| `required` | `rules: [{ required: true, msg: '必填' }]` |
+| `default / transform` | `value: { default, get, set }` |
+| `value(data, value, node)` 读写转换 | `value.get(value, ctx)` 与 `value.set(value, ctx)` 分别配置 |
+| `on` | `event`；回调接收 `(ctx, ...事件参数)` |
+| `labelClass / labelWidth` | `label: ['标题', { class, style: { width } }]` |
+| `transverse` | `label` 属性中的 `style.width: 'auto'` |
+| `before / prefix / suffix / extra / childAttrs` | 使用 `child` 内容节点与 `attrs` 容器 |
+| 节点 `rows` | `attrs: { 'ui-row': '…' }` |
+| `restore` | `clear: () => ({ value: 是否清空, restore: true })` |
+| `array.media` | `array.attrs: { 'ui-col': '…' }` |
+| `every-label` 插槽 | `label` 插槽，接收 `col / node / data / text` |
+
+`TextArea / view` 兼容为 `Textarea / View`，`rules.message` 兼容为 `msg`（显式 `msg` 优先），`array.lists` 兼容为 `array.child`。
+
+## 新增与行为修复
+
+- 标题与内容均可递归组合；数组支持默认值、数量限制、增删排序和行上下文。
+- `validate()` 等待异步联动并检查最新数据；`reset()` 恢复当前数据对象的初始状态；`clearValidate()` 取消未完成校验。
+- 换一条记录时替换 `data` 对象，建立新的重置基线；对同一对象 `Object.assign` 视为编辑。
+- `paths` 缺失时补全对象，已有非对象路径明确报错。
+- 增加 Radio、Gallery（别名 SelectImg）、RichTextInput；TimePicker 使用浏览器原生时间输入并校验范围与步长。
+- Gallery 提供通用图片选择与搜索事件，不包含旧业务素材库的接口、分页和后台管理。RichTextInput 默认支持文本格式、列表、链接和撤销重做，未配置图片上传或表格扩展。
+
+示例与完整 API 见仓库的 `web/app/pages/components/formloader.vue`。

package/README.md

@@ -4,6 +4,9 @@ NeatUI Vue component package for Vue 3 and Nuxt projects.
 
 Nuxt users should use `@neatui/vue` directly.
 
+Upgrading from 4.x or the legacy FormLoader: see [5.0 migration notes](./MIGRATION-5.0.md).
+This package ships Vue SFC / TypeScript source and requires a Vue build plugin and Sass.
+
 ## Installation
 
 ```bash

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@neatui/vue",
-  "version": "4.8.1",
+  "version": "5.0.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
   "author": "xiaojunbo",
   "peerDependencies": {
     "pinia": "^3.0.3",
-    "vue": "^3.2.0",
+    "vue": "^3.5.11",
     "vue-router": "^4.0.0"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.js"
+    "build": "rollup -c rollup.config.js",
+    "type-check": "vue-tsc --noEmit -p tsconfig.release.json"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",
@@ -23,7 +24,8 @@
     "sass": "^1.80.7",
     "typescript": "^5.1.6",
     "vue": "^3.5.18",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^3.1.1"
   },
   "dependencies": {
     "@fekit/floor": "^3.0.1",
@@ -34,9 +36,13 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^4.8.1",
+    "@neatui/css": "^5.0.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@tiptap/vue-3": "^3.31.3",
     "@vue/compiler-sfc": "^3.4.30",
     "compressorjs": "^1.2.1",
     "echarts": "^5.5.0",
@@ -47,7 +53,9 @@
     "swiper": "^11.0.4",
     "vue-cropper": "^0.6.4"
   },
-  "resolutions": {
-    "@neatui/css": "4.7.1"
-  }
+  "files": [
+    "src",
+    "README.md",
+    "MIGRATION-5.0.md"
+  ]
 }

package/src/components/basic/IFollowView.vue

@@ -352,7 +352,7 @@
   });
 </script>
 <style lang="scss">
-  @use '@neatui/css' as neatui;
+  @use '@neatui/css/query' as neatui;
   @include neatui.mob {
     .fekit-follow-mobile {
       position: fixed !important;

package/src/components/basic/LayerView/Layer.vue

@@ -893,8 +893,6 @@
 </script>
 
 <style lang="scss">
-  @use '@neatui/css' as neatui;
-
   // 弹层
   @keyframes am-layer-dark-show {
     0% {

package/src/components/display/Avatar.vue

@@ -1 +1,124 @@
-<template><div></div></template>
+<template>
+  <span :ui-avatar="attr" :style="style" :role="showImage ? undefined : 'img'" :aria-label="showImage ? undefined : label" :title="title">
+    <img
+      v-if="showImage"
+      :src="src"
+      :alt="label"
+      :loading="loading"
+      :referrerpolicy="referrerpolicy"
+      :crossorigin="crossorigin"
+      @error="imageFailed = true"
+    />
+    <slot v-else-if="$slots.default"></slot>
+    <span v-else aria-hidden="true">{{ initials }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, useSlots, PropType } from 'vue';
+
+  type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number | string;
+
+  const props = defineProps({
+    theme: { type: String, default: '@a' },
+    // 图片地址，加载失败时回退到文字
+    src: { type: String, default: '' },
+    // 用户名，用于生成首字母、背景色与无障碍标签
+    name: { type: String, default: '' },
+    // 替代文本，默认取 name
+    alt: { type: String, default: '' },
+    // 自定义显示文字，覆盖自动生成的首字母
+    text: { type: String, default: '' },
+    // name 为空时显示的文字
+    fallback: { type: String, default: '' },
+    // 预设尺寸 xs/s/m/l/xl，或数字(px)/任意 CSS 长度
+    size: { type: [String, Number] as PropType<AvatarSize>, default: '' },
+    shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
+    // 主题色名(main/well/warn/risk/info)或任意 CSS 颜色；留空则按 name 自动取色
+    color: { type: String, default: '' },
+    loading: { type: String as PropType<'lazy' | 'eager'>, default: 'lazy' },
+    referrerpolicy: { type: String as PropType<ReferrerPolicy>, default: undefined },
+    crossorigin: { type: String as PropType<'' | 'anonymous' | 'use-credentials'>, default: undefined },
+    title: { type: String, default: undefined },
+  });
+
+  const slots = useSlots();
+  const presetSizes = ['xs', 's', 'm', 'l', 'xl'];
+  const themeColors = ['main', 'well', 'warn', 'risk', 'info'];
+  // 白字对比度均 ≥ 4.5:1
+  const palette = [
+    '#D32F2F',
+    '#C2185B',
+    '#AD1457',
+    '#7B1FA2',
+    '#512DA8',
+    '#303F9F',
+    '#1976D2',
+    '#0277BD',
+    '#00838F',
+    '#00796B',
+    '#2E7D32',
+    '#BF360C',
+    '#5D4037',
+    '#455A64',
+  ];
+
+  const imageFailed = ref(false);
+  watch(
+    () => props.src,
+    () => (imageFailed.value = false),
+  );
+
+  const name = computed(() => props.name.trim());
+  const showImage = computed(() => !!props.src && !imageFailed.value);
+  const label = computed(() => props.alt || name.value || props.fallback);
+
+  // 多个词取各词首字母；单个英文词取前两位；其它（如中文）取首字
+  const initials = computed(() => {
+    if (props.text) return props.text;
+    if (!name.value) return props.fallback;
+    const words = name.value.split(/[\s\-_]+/).filter(Boolean);
+    if (words.length > 1) {
+      return words
+        .slice(0, 2)
+        .map((w) => Array.from(w)[0])
+        .join('')
+        .toUpperCase();
+    }
+    const chars = Array.from(name.value);
+    return (/^[\x20-\x7E]+$/.test(name.value) ? chars.slice(0, 2).join('') : chars[0]).toUpperCase();
+  });
+
+  const hashColor = (s: string) => {
+    let hash = 0;
+    for (const ch of s) hash = ((hash << 5) - hash + (ch.codePointAt(0) || 0)) | 0;
+    return palette[Math.abs(hash) % palette.length];
+  };
+
+  // 仅文字头像需要着色；图片与插槽内容保持中性底色
+  const colored = computed(() => !showImage.value && !slots.default && !!initials.value);
+
+  const attr = computed(() => {
+    const list = [props.theme];
+    if (presetSizes.includes(String(props.size))) list.push(String(props.size));
+    if (props.shape === 'square') list.push(':square');
+    if (colored.value && themeColors.includes(props.color)) list.push(props.color);
+    return list.join(' ');
+  });
+
+  const style = computed(() => {
+    const out: Record<string, string> = {};
+    const { size, color } = props;
+    if (size !== '' && !presetSizes.includes(String(size))) {
+      out['--avatar-size'] = typeof size === 'number' || /^\d+(\.\d+)?$/.test(size) ? `${size}px` : size;
+    }
+    if (colored.value && !themeColors.includes(color)) {
+      const bg = color || (name.value ? hashColor(name.value) : '');
+      if (bg) {
+        out.color = '#fff';
+        out.background = bg;
+      }
+    }
+    return out;
+  });
+</script>

package/src/components/display/Tree.vue

@@ -74,14 +74,14 @@
         <slot name="tools" :data="node"></slot>
       </div>
       <template v-if="node[options.children || 'children']?.length > 0 && node._fold">
-        <TreeNode :key="node[options.id || 'id']" v-model="state.selected" v-bind="$props" :treeData="node[options.children || 'children']" :root="false" @select="tranSelect">
-          <template #tools="{ data = {} }: any = {}">
+        <TreeNode :key="node[options.id || 'id']" v-bind="$props" v-model="state.selected" :treeData="node[options.children || 'children']" :root="false" @select="tranSelect">
+          <template #tools="{ data }: { data: any }">
             <slot name="tools" :data="data"></slot>
           </template>
-          <template #suffix="{ data = {} }: any = {}">
+          <template #suffix="{ data }: { data: any }">
             <slot name="suffix" :data="data"></slot>
           </template>
-          <template #prefix="{ data = {} }: any = {}">
+          <template #prefix="{ data }: { data: any }">
             <slot name="prefix" :data="data"></slot>
           </template>
         </TreeNode>
@@ -96,6 +96,12 @@
   import { isObject, isFunction, isArray, deepcopy } from '@fekit/utils';
   import { useRoute, useRouter } from 'vue-router';
 
+  defineSlots<{
+    prefix?: (props: { data: any }) => any;
+    suffix?: (props: { data: any }) => any;
+    tools?: (props: { data: any }) => any;
+  }>();
+
   /**
    * 入参说明
    * modelValue     值

package/src/components/display/TreeView.vue

@@ -14,7 +14,7 @@
               </template>
               <slot name="prefix" :data="item"></slot>
             </div>
-            <slot name="label">
+            <slot name="label" :data="item">
               <i v-if="item.icon" :class="`icon icon-${item.icon}`"></i> <span>{{ item.label }}{{ item.__folding ? ' ⋯' : '' }}</span>
             </slot>
             <div ui-form-suffix="">
@@ -43,16 +43,16 @@
         @click="(data: any) => emits('click', data)"
         @select="(data: any) => emits('select', data)"
       >
-        <template #prefix="{ data = {} }: any = {}">
+        <template #prefix="{ data }: { data: any }">
           <slot name="prefix" :data="data"></slot>
         </template>
-        <template #label="{ data = {} }: any = {}">
+        <template v-if="$slots.label" #label="{ data }: { data: any }">
           <slot name="label" :data="data"></slot>
         </template>
-        <template #suffix="{ data = {} }: any = {}">
+        <template #suffix="{ data }: { data: any }">
           <slot name="suffix" :data="data"></slot>
         </template>
-        <template #tools="{ data = {} }: any = {}">
+        <template #tools="{ data }: { data: any }">
           <slot name="tools" :data="data"></slot>
         </template>
       </TreeView>
@@ -66,6 +66,13 @@
   import { isObject, isFunction } from '@fekit/utils';
   import { useRoute, useRouter } from 'vue-router';
 
+  defineSlots<{
+    prefix?: (props: { data: any }) => any;
+    label?: (props: { data: any }) => any;
+    suffix?: (props: { data: any }) => any;
+    tools?: (props: { data: any }) => any;
+  }>();
+
   const route = useRoute();
   const router = useRouter();
 

package/src/components/display/index.ts

@@ -1,3 +1,4 @@
+import Avatar from './Avatar.vue';
 import Image from './Image.vue';
 import Tree from './Tree.vue';
 import Calendar from './Calendar.vue';
@@ -5,4 +6,4 @@ import PhotoEditor from './PhotoEditor.vue';
 import TreeView from './TreeView.vue';
 // import ChartView from './ChartView.vue';
 
-export { Image, Tree, Calendar, PhotoEditor, TreeView };
+export { Avatar, Image, Tree, Calendar, PhotoEditor, TreeView };

package/src/components/form/Cascader.vue

@@ -342,7 +342,7 @@
 
     if (checked) {
       const labelList = state.selectd?.label === '' ? [] : state.selectd?.label?.split(' | ');
-      const _label = [...new Set([...labelList, ...labels])] || [];
+      const _label = [...new Set([...labelList, ...labels])];
       state.selectd.label = _label?.length > 0 ? _label.join(' | ') : '';
       state.selectd.value = [...new Set([...state.selectd.value, ...values])];
     } else {

package/src/components/form/DateRangeView.vue

@@ -20,13 +20,13 @@
             </div>
           </div>
           <div ui-flex="row rm">
-            <div v-if="idate(sta.panel).update({ m: 1 }).time < idate(end.panel).time" ui-btn="@a s none :square" @click="next(1, { m: 1 })">
+            <div v-if="(idate(sta.panel).update({ m: 1 }).time ?? NaN) < (idate(end.panel).time ?? NaN)" ui-btn="@a s none :square" @click="next(1, { m: 1 })">
               <Icon name="arrow-right" />
             </div>
             <div v-else ui-btn="@a s none :square" class="o-sl">
               <Icon name="arrow-right" />
             </div>
-            <div v-if="idate(sta.panel).update({ y: 1 }).time < idate(end.panel).time" ui-btn="@a s none :square" @click="next(1, { y: 1 })">
+            <div v-if="(idate(sta.panel).update({ y: 1 }).time ?? NaN) < (idate(end.panel).time ?? NaN)" ui-btn="@a s none :square" @click="next(1, { y: 1 })">
               <Icon name="double-arrow-right" />
             </div>
             <div v-else ui-btn="@a s none :square" class="o-sl">
@@ -78,13 +78,13 @@
       <div class="w-sm*m flex-fixed" ui-flex="col xy">
         <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid b-back" ui-flex="row xm">
           <div ui-flex="row lm">
-            <div v-if="idate(sta.panel).time < idate(end.panel).update({ y: -1 }).time" ui-btn="@a s none :square" @click="prev(2, { y: -1 })">
+            <div v-if="(idate(sta.panel).time ?? NaN) < (idate(end.panel).update({ y: -1 }).time ?? NaN)" ui-btn="@a s none :square" @click="prev(2, { y: -1 })">
               <Icon name="double-arrow-left" />
             </div>
             <div v-else ui-btn="@a s none :square" class="o-sl">
               <Icon name="double-arrow-left" />
             </div>
-            <div v-if="idate(sta.panel).time < idate(end.panel).update({ m: -1 }).time" ui-btn="@a s none :square" @click="prev(2, { m: -1 })">
+            <div v-if="(idate(sta.panel).time ?? NaN) < (idate(end.panel).update({ m: -1 }).time ?? NaN)" ui-btn="@a s none :square" @click="prev(2, { m: -1 })">
               <Icon name="arrow-left" />
             </div>
             <div v-else ui-btn="@a s none :square" class="o-sl">
@@ -211,7 +211,7 @@
   }
   interface Props {
     modelValue?: Array<string | number>;
-    frame: boolean;
+    frame?: boolean;
     tools?: boolean;
     range?: boolean;
     pickerRange?: PickerRange;
@@ -358,7 +358,7 @@
     if (!sta.value) {
       sta.value = idate(item.date).format(props.format);
     } else {
-      if (idate(item.date).time < idate(sta.value).time) {
+      if ((idate(item.date).time ?? NaN) < (idate(sta.value).time ?? NaN)) {
         end.value = idate(sta.value).format(props.format);
         sta.value = idate(item.date).format(props.format);
       } else {

package/src/components/form/Gallery.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="neat-gallery" :aria-busy="loading">
+    <input v-if="searchable && !readonly" v-model="query" type="search" aria-label="搜索图片" placeholder="搜索图片" :disabled="disabled" @input="emit('search', query)" />
+    <p v-if="loading" role="status">加载中…</p>
+    <div class="neat-gallery-grid">
+      <button v-for="item in filtered" :key="item.value" type="button" :aria-label="item.label || item.value" :aria-pressed="selected.includes(item.value)"
+        :disabled="disabled || readonly || item.disabled || (!selected.includes(item.value) && multiple && !!limit && selected.length >= limit)"
+        :class="{ 'b-main': selected.includes(item.value) }" @click="toggle(item.value)">
+        <img :src="item.src || item.value" :alt="item.label || ''" loading="lazy" />
+        <span>{{ item.label || item.value }}</span>
+      </button>
+    </div>
+    <slot v-if="!loading && !filtered.length" name="empty"><p>暂无图片</p></slot>
+    <div v-if="selected.length" class="mt-sm" ui-flex="row lm">
+      <span>已选 {{ selected.length }} 项</span>
+      <button v-if="!disabled && !readonly" type="button" ui-btn="@a s" @click="setValue([])">清空选择</button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  const props = withDefaults(defineProps<{
+    modelValue?: string | string[]; options?: Array<string | { value: string; src?: string; label?: string; disabled?: boolean }>;
+    multiple?: boolean; limit?: number; disabled?: boolean; readonly?: boolean; searchable?: boolean; loading?: boolean;
+  }>(), { modelValue: '', options: () => [], multiple: false, limit: 0, disabled: false, readonly: false, searchable: true, loading: false });
+  const emit = defineEmits(['update:modelValue', 'change', 'search']);
+  const query = ref('');
+  const selected = computed(() => Array.isArray(props.modelValue) ? props.modelValue : props.modelValue ? [props.modelValue] : []);
+  const filtered = computed(() => props.options.map(item => typeof item === 'string' ? { value: item, src: item, label: item, disabled: false } : item)
+    .filter(item => (!props.readonly || selected.value.includes(item.value)))
+    .filter(item => (item.label || item.value).toLowerCase().includes(props.readonly ? '' : query.value.toLowerCase())));
+  const setValue = (values: string[]) => {
+    if (props.disabled || props.readonly) return;
+    const value = props.multiple ? values : values[0] || '';
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+  const toggle = (value: string) => {
+    const found = selected.value.includes(value);
+    if (!found && props.multiple && props.limit && selected.value.length >= props.limit) return;
+    setValue(found ? selected.value.filter(item => item !== value) : props.multiple ? [...selected.value, value] : [value]);
+  };
+</script>
+<style scoped>
+  .neat-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; margin-top: .5rem; }
+  .neat-gallery-grid button { padding: .4rem; border: 1px solid currentColor; border-radius: .3rem; overflow: hidden; }
+  .neat-gallery-grid img { display: block; width: 100%; height: 5rem; object-fit: cover; }
+  .neat-gallery-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .neat-gallery-grid button:disabled { opacity: .5; }
+</style>

package/src/components/form/Input.vue

@@ -81,6 +81,7 @@
    * prefix         前缀内容
    * suffix         后缀内容
    * interacted     用户是否交互
+   * emptyValue     清空或删空内容时回传的值，默认 null；字符串 v-model 可传 ''
    */
 
   // 类型
@@ -106,6 +107,7 @@
     prefix?: Array<any>;
     suffix?: Array<any>;
     interacted?: boolean | number | null;
+    emptyValue?: null | string;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
@@ -129,6 +131,7 @@
     prefix: () => [],
     suffix: () => [],
     interacted: null,
+    emptyValue: null,
   });
 
   const hasClearValue = computed(() => props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined);
@@ -221,7 +224,7 @@
 
   // 清空
   function clear() {
-    emits('update:modelValue', null);
+    emits('update:modelValue', props.emptyValue);
     emits('clear');
   }
 
@@ -246,7 +249,7 @@
     }
     // 输入事件
     emits('input', e, state);
-    emits('update:modelValue', value || null);
+    emits('update:modelValue', value || props.emptyValue);
   };
   // 失焦
   const blur = (e: any) => {

package/src/components/form/PageSelect.vue

@@ -41,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+  import type { PropType } from 'vue';
   import { reactive, ref, computed, watch } from 'vue';
   import Input from './Input.vue';
   import { IFollowView } from '../basic';
@@ -54,7 +55,7 @@
       default: false,
     },
     theme: { type: String, default: '@a' },
-    sz: { type: String, default: 'm' },
+    sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },
     // 提示文案
@@ -80,7 +81,7 @@
     },
     // 校验规则
     rules: {
-      type: Array,
+      type: Array as PropType<object[]>,
       default: () => [],
     },
     // 是否是示校验图标

package/src/components/form/Radio.vue

@@ -0,0 +1,27 @@
+<template>
+  <div role="radiogroup" :aria-label="label" :aria-disabled="disabled || undefined" class="m-sm-sub">
+    <label v-for="(item, i) in items" :key="i" :ui-form="`${theme} type:radio`">
+      <input type="radio" :name="groupName" :value="item.value" :checked="modelValue === item.value"
+        :disabled="disabled || readonly || item.disabled" :aria-readonly="readonly || undefined"
+        @click="readonly && $event.preventDefault()" @change="select(item.value)" />
+      <slot :item="item" :index="i"><span>{{ item.label }}</span></slot>
+    </label>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, getCurrentInstance } from 'vue';
+  const props = withDefaults(defineProps<{
+    modelValue?: string | number | boolean;
+    options?: Array<string | number | boolean | { label: string; value: string | number | boolean; disabled?: boolean }>;
+    name?: string; label?: string; disabled?: boolean; readonly?: boolean; theme?: string;
+  }>(), { options: () => [], theme: '@a', disabled: false, readonly: false });
+  const emit = defineEmits(['update:modelValue', 'change']);
+  const uid = getCurrentInstance()!.uid;
+  const groupName = computed(() => props.name || `neat-radio-${uid}`);
+  const items = computed(() => props.options.map(item => typeof item === 'object' ? item : { label: String(item), value: item, disabled: false }));
+  const select = (value: string | number | boolean) => {
+    if (props.disabled || props.readonly || value === props.modelValue) return;
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+</script>