create-jnrs-vue 1.2.26 → 1.2.27

package/jnrs-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-vue",
-  "version": "1.2.26",
+  "version": "1.2.27",
   "description": "JNRS 信息化管理系统",
   "author": "talia_tan",
   "private": true,
@@ -20,8 +20,8 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
     "@jnrs/lingshu-smart": "2.2.7",
-    "@jnrs/shared": "1.1.20",
-    "@jnrs/vue-core": "1.2.14",
+    "@jnrs/shared": "1.1.23",
+    "@jnrs/vue-core": "1.2.15",
     "@vueuse/core": "^14.1.0",
     "element-plus": "^2.13.3",
     "pinia": "^3.0.4",

package/jnrs-vue/public/system/menu.json

@@ -27,6 +27,15 @@
           },
           "component": "/demos/simpleTable/index"
         },
+        {
+          "path": "/compositionTable",
+          "name": "compositionTable",
+          "meta": {
+            "title": "简单数据表格 - 组合式",
+            "todoCount": 0
+          },
+          "component": "/demos/compositionTable/index"
+        },
         {
           "path": "/crud",
           "name": "Crud",
@@ -36,6 +45,15 @@
           },
           "component": "/demos/crud/index"
         },
+        {
+          "path": "/compositionCrud",
+          "name": "compositionCrud",
+          "meta": {
+            "title": "完整增删改查 - 组合式",
+            "todoCount": 0
+          },
+          "component": "/demos/compositionCrud/index"
+        },
         {
           "path": "/testRedirect",
           "name": "TestRedirect",

package/jnrs-vue/src/api/demos/ai_agent_context.ts

@@ -0,0 +1,159 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : project/ai_agent_context.ts
+ * @Date   : 2026/03/01
+ * @Desc.  : 示例模块接口文档（对于标准业务功能可作为 AI Agent 上下文）
+ */
+
+import type {
+  // 列表数据及数据总数
+  IPageTableData,
+  // 分页
+  IPagination,
+  // 附件
+  IFile
+} from '@/types'
+import {
+  // axios 请求方法泛型拓展封装
+  axiosRequest
+} from '../request'
+import {
+  // 将对象转为 FormData
+  objectToFormData
+} from '@/utils'
+
+export interface Project extends IFile {
+  id: string
+  programCode: string
+  program: string
+  code: string
+  name: string
+  description: string
+  projectType?: '敏捷型' | '瀑布型' | '混合型'
+  manager: string
+  budget: number
+  plannedStartDate: string
+  plannedFinishDate: string
+  progress: string
+  status: '进行中' | '已完成' | '未开始' | '已暂停'
+}
+
+type ProjectReadOnly =
+  | 'programCode'
+  | 'program'
+  | 'code'
+  | 'manager'
+  | 'plannedFinishDate'
+  | 'progress'
+  | 'status'
+  | 'imageDocument'
+  | 'attachmentDocument'
+
+export type EditProject = Omit<Project, ProjectReadOnly> & {
+  newAttachmentFile: []
+  newImageFiles: []
+}
+
+export interface ProjectQuery extends IPagination {
+  code?: string
+  projectType?: '敏捷型' | '瀑布型' | '混合型'
+  manager?: string
+}
+
+/**
+ * 项目 - 列表数据
+ */
+export const ProjectListApi = (params?: ProjectQuery): Promise<IPageTableData<Project>> => {
+  return axiosRequest({
+    url: '/project/table',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 项目 - 详情数据
+ */
+export const DataApiTest = (params: { id: string }): Promise<Project> => {
+  return axiosRequest({
+    url: '/project/info',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 项目 - 新增
+ */
+export const CreateProjectApi = (data: Omit<Project, 'id'>) => {
+  return axiosRequest({
+    url: '/project/save',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 项目 - 编辑
+ */
+export const EditProjectApi = (data: EditProject) => {
+  return axiosRequest({
+    url: '/project/save',
+    method: 'post',
+    data: objectToFormData(data) // 请求体如果为 formData 类型，使用 objectToFormData 方法转换
+  })
+}
+
+/**
+ * 项目 - 更新
+ */
+export const UpdateProjectApi = (data: Project) => {
+  return axiosRequest({
+    url: '/project/update',
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * 项目 - 删除
+ */
+export const DeleteProjectApi = (id: string) => {
+  return axiosRequest({
+    url: `/project/delete/${id}`,
+    method: 'delete'
+  })
+}
+
+/**
+ * 项目 - 导入
+ */
+export const ImportDataApi = (data: FormData) => {
+  return axiosRequest({
+    url: '/project/import',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 项目 - 导出
+ */
+export const ExportApi = (data: Record<string, unknown>): Promise<Blob> => {
+  return axiosRequest({
+    url: '/project/export',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 项目 - 文件下载
+ */
+export const DownloadFileApi = (): Promise<Blob> => {
+  return axiosRequest({
+    url: '/project/files',
+    method: 'post'
+  })
+}

package/jnrs-vue/src/api/demos/index.ts

@@ -3,10 +3,10 @@
  * @WeChat : Tan578853789
  * @File   : demos/index.ts
  * @Date   : 2026/03/01
- * @Desc.  : 示例模块接口文档（可作为 AI Agent 上下文来源）
+ * @Desc.  : 示例模块接口文档（非标业务功能人工编码参考）
  */
 
-import type { IBusinessResponse } from '@jnrs/shared'
+import type { IFullResponse } from '@jnrs/shared'
 import type { IPagination, IPageTableData, IFile, IUser } from '@/types'
 import { axiosRequest } from '../request'
 import { objectToFormData } from '@/utils'
@@ -15,7 +15,7 @@ import { objectToFormData } from '@/utils'
  * 项目 - 详情
  */
 export interface Project extends IFile {
-  id: string
+  id: number
   programCode: string
   program: string
   code: string
@@ -31,10 +31,9 @@ export interface Project extends IFile {
 }
 
 /**
- * 新增项目 - 忽略字段
+ * 创建时不能修改的属性
  */
-type CreateProjectOmit =
-  | 'id'
+type ProjectReadOnly =
   | 'programCode'
   | 'program'
   | 'code'
@@ -48,8 +47,7 @@ type CreateProjectOmit =
 /**
  * 项目 - 创建
  */
-export type EditProject = Omit<Project, CreateProjectOmit> & {
-  id?: string
+export type EditProject = Omit<Project, ProjectReadOnly> & {
   managerId?: Record<string, unknown> | number
   newAttachmentFile: []
   newImageFiles: []
@@ -62,27 +60,24 @@ export interface ProjectQuery extends IPagination {
   code?: string
   projectType?: '敏捷型' | '瀑布型' | '混合型'
   manager?: string
+  plannedStartDate?: string
 }
 
 // 测试 获取数据
-export const DataApiTest = (id: string): Promise<IUser> => {
+export const DataApiTest = (params: { id: string }): Promise<IUser> => {
   return axiosRequest({
     url: '/auth/user-info',
     method: 'get',
-    params: {
-      id
-    }
+    params
   })
 }
 
 // 测试 获取全量数据
-export const FullDataApiTest = (id: string): Promise<IBusinessResponse<IUser>> => {
+export const FullDataApiTest = (params: { id: string }): Promise<IFullResponse<IUser>> => {
   return axiosRequest({
     url: '/auth/user-info',
     method: 'get',
-    params: {
-      id
-    },
+    params,
     returnFullResponse: true // 需要返回完整响应数据时使用该选项
   })
 }
@@ -154,7 +149,7 @@ export const UpdateProjectApi = (data: Project) => {
 /**
  * 删除数据
  */
-export const DeleteProjectApi = (id: string) => {
+export const DeleteProjectApi = (id: number) => {
   return axiosRequest({
     url: `/demos/delete/${id}`,
     method: 'delete'

package/jnrs-vue/src/api/request.ts

@@ -6,7 +6,7 @@
  * @Desc.  : axios 网络请求实例
  */
 
-import type { IBusinessRequest, IBusinessResponse } from '@jnrs/shared'
+import type { IBusinessRequest, IFullResponse } from '@jnrs/shared'
 import { createAxiosInstance } from '@jnrs/shared/request'
 import { useMockStore } from '@jnrs/vue-core/pinia'
 import { useAuthStore } from '@/stores'
@@ -32,7 +32,7 @@ const axiosInstance = createAxiosInstance({
  * @param options 请求配置项
  * @returns Promise<T> 响应数据
  */
-const axiosRequest = <T = IBusinessResponse>(options: IBusinessRequest): Promise<T> => {
+const axiosRequest = <T = IFullResponse>(options: IBusinessRequest): Promise<T> => {
   if (!axiosInstance) {
     throw new Error('请先调用 createRequest 初始化 axios 实例')
   }

package/jnrs-vue/src/components/common/DictTag.vue

@@ -12,7 +12,7 @@ import { getDictLabel, getDictColor } from '@/utils'
 
 export interface Props {
   dictName: string
-  value: string | number
+  value?: string | number
   /**
    * 是否使用颜色
    */

package/jnrs-vue/src/composables/useCrud.ts

@@ -1,58 +1,177 @@
-import { ref, type Ref } from 'vue'
-import type { FormInstance } from 'element-plus'
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useCrud.ts
+ * @Date   : 2026/04/16
+ * @Desc.  : 通用 CRUD 组合式 API - 适用于所有业务模块
+ */
+
+import { ref, nextTick } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { debounce } from '@jnrs/shared/lodash'
 import { objectMatchAssign } from '@jnrs/shared'
+import { useI18n } from '@/locales'
 import type { IPagination, IPageTableData } from '@/types'
 
+/**
+ * CRUD 配置选项
+ */
 interface CrudOptions<TItem, TForm, TQuery> {
-  // 初始值
-  defaultForm: () => TForm
+  // ========== 必需配置 ==========
+  /** 表单默认值工厂函数 */
+  defaultForm?: () => TForm
+  /** 列表查询 API */
+  listApi?: (params: Partial<IPagination> & TQuery) => Promise<IPageTableData<TItem> | TItem[]>
+  /** 保存 API（新增/编辑） */
+  saveApi?: (data: TForm) => Promise<unknown>
+
+  // ========== 可选配置 ==========
+  /** 查询表单默认值工厂函数 */
   defaultQuery?: () => TQuery
-  // API
-  listApi: (params: Partial<IPagination> & TQuery) => Promise<IPageTableData<TItem> | TItem[]>
-  saveApi: (data: TForm) => Promise<unknown>
+  /** 删除 API */
   deleteApi?: (id: number) => Promise<unknown>
-  // 可选：是否启用分页，默认 true
-  pagination?: boolean
-  // 可选：数据转换
+  /** 是否启用分页，默认 true */
+  usePagination?: boolean
+  /** 初始页码，默认 1 */
+  initialPageNo?: number
+  /** 初始每页条数，默认 20 */
+  initialPageSize?: number
+  /** 防抖延迟（毫秒），默认 300 */
+  debounceDelay?: number
+
+  // ========== 数据处理钩子 ==========
+  /** 列表项数据转换函数（用于处理附件等字段映射） */
   transformItem?: (item: TItem) => TItem
+  /** 编辑前数据处理（用于 Select 组件等特殊字段回填） */
   beforeEdit?: (row: TItem, form: TForm) => TForm
+  /** 提交前数据处理（用于 Select 组件等特殊字段转换） */
+  beforeSubmit?: (form: TForm) => TForm
+
+  // ========== UI 配置 ==========
+  /** 成功提示消息 */
+  successMessage?: {
+    save?: string
+    delete?: string
+  }
+  /** 删除确认配置 */
+  deleteConfirm?: {
+    title?: string
+    message?: string
+    confirmText?: string
+    cancelText?: string
+  }
 }
 
-export function useCrud<TItem, TForm, TQuery = object>(options: CrudOptions<TItem, TForm, TQuery>) {
+/**
+ * 通用 CRUD 组合式 API
+ *
+ * 适用于所有具有增删改查功能的业务模块，提供统一的表格管理、表单编辑、删除确认等功能。
+ *
+ * @example
+ * ```typescript
+ * // 基础用法
+ * const {
+ *   loading, tableData, total, pagination, queryForm,
+ *   dialogRef, formRef, form,
+ *   getList, openCreate, openEdit, submitForm, handleDelete
+ * } = useCrud<TItem, TForm, TQuery>({
+ *   defaultForm: () => ({ id: '', name: '' }),
+ *   listApi: YourListApi,
+ *   saveApi: YourSaveApi,
+ *   deleteApi: YourDeleteApi
+ * })
+ *
+ * // 高级用法：带数据转换和钩子
+ * const { ... } = useCrud<TItem, TForm, TQuery>({
+ *   defaultForm: () => ({ ... }),
+ *   defaultQuery: () => ({ code: '', status: undefined }),
+ *   listApi: DeviceListApi,
+ *   saveApi: SaveDeviceApi,
+ *   deleteApi: DeleteDeviceApi,
+ *
+ *   // 数据转换：处理附件字段
+ *   transformItem: (item) => ({
+ *     ...item,
+ *     images: item.imageDocument?.attachments
+ *   }),
+ *
+ *   // 编辑前：Select 组件回填
+ *   beforeEdit: (row, form) => ({
+ *     ...form,
+ *     categoryId: { id: row.categoryId, name: row.categoryName }
+ *   }),
+ *
+ *   // 提交前：Select 组件转换
+ *   beforeSubmit: (form) => ({
+ *     ...form,
+ *     categoryId: extractFieldId(form.categoryId, 'id')
+ *   })
+ * })
+ * ```
+ */
+export function useCrud<TItem, TForm, TQuery>(options: CrudOptions<TItem, TForm, TQuery>) {
+  const { t: $t } = useI18n()
+
   const {
-    defaultForm,
-    defaultQuery,
+    defaultForm = () => ({}) as TForm,
+    defaultQuery = () => ({}) as TQuery,
     listApi,
     saveApi,
     deleteApi,
-    pagination: enablePagination = true,
+    usePagination = true,
+    initialPageNo = 1,
+    initialPageSize = 20,
+    debounceDelay = 300,
     transformItem,
-    beforeEdit
+    beforeEdit,
+    beforeSubmit,
+    successMessage = {
+      save: '数据已保存',
+      delete: '删除成功'
+    },
+    deleteConfirm = {
+      title: '确定要删除吗？',
+      message: '<p style="color: #f30">请注意，您尚未保存的数据将会丢失。</p>',
+      confirmText: $t('global.action.confirm'),
+      cancelText: $t('global.action.cancel')
+    }
   } = options
 
-  // 列表状态
+  // ==================== 列表状态 ====================
   const loading = ref(false)
-  const tableData = ref<TItem[]>([]) as Ref<TItem[]>
+  const tableData = ref<TItem[]>([])
   const total = ref(0)
-  const pagination = ref<IPagination>({ pageNo: 1, pageSize: 20 })
-  const queryForm = ref(defaultQuery?.() ?? {}) as Ref<TQuery>
+  const pagination = ref<IPagination>({
+    pageNo: initialPageNo,
+    pageSize: initialPageSize
+  })
+  const queryForm = ref<TQuery>(defaultQuery?.())
 
-  // 表单状态
+  // ==================== 表单状态 ====================
   const dialogRef = ref()
   const formRef = ref<FormInstance>()
-  const form = ref(defaultForm()) as Ref<TForm>
+  const form = ref(defaultForm())
+
+  // ==================== 核心方法 ====================
 
-  // 获取列表
+  /**
+   * 获取列表数据（带防抖）
+   */
   const getList = debounce(async () => {
+    if (!listApi) {
+      return
+    }
+
     loading.value = true
     try {
       const params = {
-        ...(enablePagination ? pagination.value : {}),
+        ...(usePagination ? pagination.value : {}),
         ...queryForm.value
       } as Partial<IPagination> & TQuery
+
       const res = await listApi(params)
+
       // 支持返回数组或 { list, count } 格式
       if (Array.isArray(res)) {
         tableData.value = transformItem ? res.map(transformItem) : res
@@ -61,78 +180,128 @@ export function useCrud<TItem, TForm, TQuery = object>(options: CrudOptions<TIte
         tableData.value = transformItem ? res.list.map(transformItem) : res.list
         total.value = res.count ?? res.list.length
       }
-    } catch (e) {
-      console.error(e)
+    } catch (error) {
+      console.error('获取列表失败:', error)
     } finally {
       loading.value = false
     }
-  }, 300)
+  }, debounceDelay)
 
-  // 打开新增
+  /**
+   * 打开新增弹窗
+   */
   const openCreate = () => {
     dialogRef.value?.open()
-    queueMicrotask(() => {
+    nextTick(() => {
       formRef.value?.resetFields()
-      form.value = defaultForm() as TForm
+      form.value = defaultForm()
     })
   }
 
-  // 打开编辑
+  /**
+   * 打开编辑弹窗
+   * @param row 要编辑的行数据
+   */
   const openEdit = (row: TItem) => {
     dialogRef.value?.open()
-    queueMicrotask(() => {
+    nextTick(() => {
       formRef.value?.resetFields()
-      const matched = objectMatchAssign(
-        defaultForm() as Record<string, unknown>,
-        row as Record<string, unknown>
-      ) as TForm
-      form.value = (beforeEdit ? beforeEdit(row, matched) : matched) as TForm
+      const matched = objectMatchAssign(defaultForm(), row)
+      form.value = beforeEdit ? beforeEdit(row, matched) : matched
     })
   }
 
-  // 提交表单
-  const submitForm = async () => {
-    const valid = await formRef.value?.validate().catch(() => false)
-    if (!valid) return
+  /**
+   * 提交表单（新增或编辑）
+   * @param rules 表单验证规则（可选）
+   */
+  const submitForm = async (rules?: FormRules) => {
+    // 如果有传入 rules，则进行表单验证
+    if (rules && formRef.value) {
+      const valid = await formRef.value.validate().catch(() => false)
+      if (!valid) return
+    }
 
     loading.value = true
     try {
-      await saveApi(form.value)
-      ElMessage.success('保存成功')
+      // 提交前数据处理
+      const submitData = beforeSubmit ? beforeSubmit(form.value) : form.value
+
+      await saveApi?.(submitData)
+
+      ElMessage({
+        message: successMessage.save,
+        grouping: true,
+        showClose: true,
+        type: 'success'
+      })
+
       dialogRef.value?.close()
       getList()
-    } catch (e) {
-      console.error(e)
+    } catch (error) {
+      console.error('保存失败:', error)
     } finally {
       loading.value = false
     }
   }
 
-  // 删除
+  /**
+   * 删除数据
+   * @param id 要删除的数据 ID
+   */
   const handleDelete = async (id: number) => {
-    if (!deleteApi) return
+    if (!deleteApi) {
+      console.warn('未配置 deleteApi')
+      return
+    }
 
     try {
-      await ElMessageBox.confirm('确定要删除吗?', '操作确认', {
-        confirmButtonText: '删除',
-        cancelButtonText: '取消',
-        type: 'warning'
+      await ElMessageBox.confirm(deleteConfirm.message, deleteConfirm.title, {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: deleteConfirm.confirmText,
+        cancelButtonText: deleteConfirm.cancelText,
+        confirmButtonType: 'danger'
       })
 
       loading.value = true
       await deleteApi(id)
-      ElMessage.success('删除成功')
+
+      ElMessage({
+        message: successMessage.delete,
+        grouping: true,
+        showClose: true,
+        type: 'success'
+      })
+
       getList()
-    } catch (e) {
-      if (e !== 'cancel') {
-        console.error(e)
+    } catch (error) {
+      if (error !== 'cancel') {
+        console.error('删除失败:', error)
       }
     } finally {
       loading.value = false
     }
   }
 
+  /**
+   * 处理表格选择变化
+   */
+  const handleSelectionChange = (rows: TItem[]) => {
+    console.log('选中的行:', rows)
+  }
+
+  /**
+   * 重置查询条件
+   */
+  const resetQuery = () => {
+    queryForm.value = defaultQuery?.()
+    pagination.value.pageNo = initialPageNo
+    getList()
+  }
+
+  // ==================== 返回 ====================
   return {
+    // 状态
     loading,
     tableData,
     total,
@@ -141,10 +310,14 @@ export function useCrud<TItem, TForm, TQuery = object>(options: CrudOptions<TIte
     dialogRef,
     formRef,
     form,
+
+    // 方法
     getList,
     openCreate,
     openEdit,
     submitForm,
-    handleDelete
+    handleDelete,
+    handleSelectionChange,
+    resetQuery
   }
 }

package/jnrs-vue/src/utils/packages.ts

@@ -17,7 +17,7 @@ import { FileApi } from '@/api/common'
  */
 export const objectToFormData = (obj: object): FormData => {
   // 根据后端返回结果处理的映射关系
-  const mapConfig = {
+  const transMap = {
     // 图片
     newImageFiles: { finallyKey: 'originImageNames', valueKey: 'uniqueFileName' },
     // 通用附件
@@ -27,7 +27,7 @@ export const objectToFormData = (obj: object): FormData => {
     // 数据库
     databaseFile: { finallyKey: 'databaseFile', valueKey: 'uniqueFileName' }
   }
-  return _objectToFormData(obj as Record<string, unknown>, mapConfig)
+  return _objectToFormData(obj as Record<string, unknown>, transMap)
 }
 
 /**

package/jnrs-vue/src/views/demos/compositionCrud/index.vue

@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import type { FormRules } from 'element-plus'
+import { onActivated, ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { useRoute } from '@jnrs/vue-core/router'
+import { dateFormatsToObject, verifyNumberGtZero } from '@jnrs/shared'
+import { getDictList, downloadFile, extractFieldId } from '@/utils'
+import {
+  ProjectListApi,
+  EditProjectApi,
+  DeleteProjectApi,
+  DownloadTemplateApi,
+  ImportDataApi,
+  ExportApi
+} from '@/api/demos/index'
+import type { Project, EditProject, ProjectQuery } from '@/api/demos/index'
+import { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable, JnImportAndExport } from '@jnrs/vue-core/components'
+import ImageView from '@/components/common/ImageView.vue'
+import PdfView from '@/components/common/PdfView.vue'
+import DictTag from '@/components/common/DictTag.vue'
+import SelectManager from '@/components/select/SelectManager.vue'
+import { useCrud } from '@/composables/useCrud'
+
+const route = useRoute()
+
+// 使用通用 CRUD 组合式 API（让 TypeScript 自动推断类型）
+const {
+  loading,
+  tableData,
+  total,
+  pagination,
+  queryForm,
+  formRef,
+  dialogRef,
+  form,
+  getList,
+  openCreate,
+  openEdit,
+  handleDelete: crudHandleDelete,
+  submitForm: crudSubmitForm,
+  handleSelectionChange
+} = useCrud<Project, EditProject, ProjectQuery>({
+  // 表单默认值
+  defaultForm: () => ({
+    id: 0,
+    name: '',
+    projectType: undefined,
+    managerId: undefined,
+    budget: 0,
+    plannedStartDate: '',
+    description: '',
+    newImageFiles: [],
+    newAttachmentFile: []
+  }),
+
+  // 查询表单默认值
+  defaultQuery: () => ({
+    pageNo: 1,
+    pageSize: 20,
+    code: '',
+    projectType: undefined,
+    manager: '',
+    plannedStartDate: ''
+  }),
+
+  // API
+  listApi: ProjectListApi,
+  saveApi: EditProjectApi,
+  deleteApi: DeleteProjectApi,
+
+  // 数据转换：处理附件字段映射
+  transformItem: (item: Project) => ({
+    ...item,
+    newImageFiles: item.imageDocument?.attachments,
+    newAttachmentFile: item.attachmentDocument?.attachments
+  }),
+
+  // 编辑前处理：Select 组件数据回填
+  beforeEdit: (row: Project, form: EditProject) => {
+    if ('managerId' in row && 'manager' in row) {
+      return {
+        ...form,
+        managerId: {
+          managerId: row.managerId,
+          manager: row.manager
+        }
+      }
+    }
+    return form
+  },
+
+  // 提交前处理：Select 组件值转换
+  beforeSubmit: (form: EditProject) => ({
+    ...form,
+    managerId: extractFieldId(form.managerId, 'managerId') as number
+  })
+})
+
+// 表单验证规则
+const rules = ref<FormRules>({
+  name: [{ required: true, message: '请输入', trigger: 'change' }],
+  projectType: [{ required: true, message: '请选择', trigger: 'change' }],
+  plannedStartDate: [{ required: true, message: '请选择', trigger: 'change' }],
+  newImageFiles: [{ required: true, message: '请上传', trigger: 'change' }],
+  managerId: [{ required: true, message: '请选择', trigger: 'change' }],
+  budget: [
+    { required: true, message: '请输入', trigger: 'change' },
+    {
+      validator: verifyNumberGtZero,
+      trigger: 'change'
+    }
+  ]
+})
+
+// 包装删除方法，传递正确的 ID 类型
+const handleDelete = (row: Project) => {
+  crudHandleDelete(row.id)
+}
+
+// 包装提交方法，传入验证规则
+const submitForm = () => {
+  crudSubmitForm(rules.value)
+}
+
+onActivated(() => {
+  console.log(route.meta) // 获取路由元信息
+  getList()
+})
+</script>
+
+<template>
+  <!-- 编辑弹窗 -->
+  <JnDialog ref="dialogRef" title="项目管理" width="600px" :close-on-click-modal="false" :close-on-press-escape="true">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" v-loading="loading">
+      <el-form-item prop="id"></el-form-item>
+      <el-form-item label="项目名称" prop="name">
+        <el-input v-model.trim="form.name" maxlength="20" show-word-limit />
+      </el-form-item>
+      <el-form-item label="类型" prop="projectType">
+        <el-select v-model="form.projectType" filterable placeholder="">
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in getDictList('projectType')"
+            :key="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目经理" prop="managerId">
+        <SelectManager
+          v-model="form.managerId"
+          :formRef="formRef"
+          validateFieldName="managerId"
+          :limit="1"
+          :simpleValue="false"
+        ></SelectManager>
+      </el-form-item>
+      <el-form-item label="预算" prop="budget">
+        <el-input-number v-model="form.budget" :min="0" :precision="2" :step="10000" controls-position="right">
+          <template #prefix>
+            <span>￥</span>
+          </template>
+        </el-input-number>
+      </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="form.plannedStartDate"
+          type="datetime"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :disabled-date="
+            (time: Date) => {
+              return time.getTime() < Date.now() - 86400000
+            }
+          "
+        />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input
+          v-model="form.description"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          type="textarea"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="上传图片" prop="newImageFiles">
+        <JnFileUpload
+          v-model="form.newImageFiles"
+          :formRef="formRef"
+          validateFieldName="newImageFiles"
+          accept=".png,.jpg,.bmp,.gif"
+          :fileSizeMb="50"
+          :limit="3"
+          drag
+          :downloadFileFn="(file) => downloadFile(file.uniqueFileName, file.fileName)"
+        />
+      </el-form-item>
+      <el-form-item label="上传文件" prop="newAttachmentFile">
+        <JnFileUpload v-model="form.newAttachmentFile" accept=".pdf" :limit="1" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="success" icon="Select" :loading="loading" @click="submitForm()">提交</el-button>
+    </template>
+  </JnDialog>
+
+  <el-card v-loading="loading">
+    <template #header>
+      <div style="display: flex; justify-content: space-between; align-items: center">
+        <span>项目管理 - 组合式</span>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <JnImportAndExport
+            :importTemplateApi="DownloadTemplateApi"
+            importBtnName="导入项目"
+            :importApi="ImportDataApi"
+            exportBtnName="导出项目"
+            :exportApi="ExportApi"
+            :exportParams="{
+              ...dateFormatsToObject(queryForm.plannedStartDate || '')
+            }"
+            :exportDynamicParamsConfig="{
+              label: '项目编号',
+              prop: 'code'
+            }"
+            :exportDisabled="tableData.length === 0"
+            size="small"
+            @change="getList()"
+          />
+          <el-button type="primary" size="small" :icon="Plus" @click="openCreate()" style="margin-left: 12px">
+            新增
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <!-- 查询条件 -->
+    <el-form :model="queryForm" size="small" inline v-loading="loading">
+      <el-form-item label="项目编号" prop="code">
+        <el-input v-model="queryForm.code" clearable style="width: 200px">
+          <template #append>
+            <el-button icon="Search" @click="getList()" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="项目名称" prop="projectType">
+        <el-select
+          v-model="queryForm.projectType"
+          filterable
+          placeholder=""
+          clearable
+          style="width: 200px"
+          @change="getList()"
+        >
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in getDictList('projectType')"
+            :key="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目经理" prop="manager">
+        <SelectManager
+          v-model="queryForm.manager"
+          :initialParams="{ role: 1 }"
+          size="small"
+          width="200px"
+          @change="getList()"
+        ></SelectManager>
+      </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="queryForm.plannedStartDate"
+          value-format="YYYY-MM-DD"
+          size="small"
+          style="width: 200px"
+          @change="getList()"
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据列表 -->
+    <JnTable
+      :data="tableData"
+      :pagination="pagination"
+      :autoHeight="true"
+      :showScrollbar="true"
+      :showIndexColumn="true"
+      :showSelectionColumn="true"
+      :showMouseSelection="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="code" label="项目编号" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="projectType" :value="row.projectType" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
+      <el-table-column prop="budget" label="预算(¥)" width="100" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.budget }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedStartDate" label="计划开始时间" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <JnDatetime :value="row.plannedStartDate" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedFinishDate" label="计划完成日期" width="130" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.plannedFinishDate }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="progress" label="进度" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.progress }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="status" :value="row.status" :showColor="false" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="imageDocument" label="图片" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <ImageView :loadKeys="row.newImageFiles" preview maxHeight="50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <PdfView :loadKeys="row.newAttachmentFile" isPdf />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click.stop="openEdit(row)">编辑</el-button>
+          <el-button link type="danger" @click.stop="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </JnTable>
+
+    <!-- 表格分页 -->
+    <JnPagination :total="total" v-model="pagination" @change="getList" />
+  </el-card>
+</template>

package/jnrs-vue/src/views/demos/compositionTable/index.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onActivated } from 'vue'
+import { ProjectListApi } from '@/api/demos/index'
+import { JnDatetime, JnPagination, JnTable } from '@jnrs/vue-core/components'
+import ImageView from '@/components/common/ImageView.vue'
+import PdfView from '@/components/common/PdfView.vue'
+import DictTag from '@/components/common/DictTag.vue'
+import { useCrud } from '@/composables/useCrud'
+
+const { loading, tableData, total, pagination, getList } = useCrud({
+  listApi: ProjectListApi
+})
+
+onActivated(() => {
+  getList()
+})
+</script>
+
+<template>
+  <el-card v-loading="loading">
+    <template #header>
+      <div style="display: flex; justify-content: space-between; align-items: center">
+        <span>项目列表 - 组合式</span>
+      </div>
+    </template>
+
+    <!-- 数据列表 -->
+    <JnTable
+      :data="tableData"
+      :pagination="pagination"
+      :autoHeight="true"
+      :showScrollbar="true"
+      :showIndexColumn="true"
+    >
+      <el-table-column prop="code" label="项目编号" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="projectType" :value="row.projectType" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
+      <el-table-column prop="budget" label="预算(¥)" width="100" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.budget }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedStartDate" label="计划开始时间" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <JnDatetime :value="row.plannedStartDate" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedFinishDate" label="计划完成日期" width="130" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.plannedFinishDate }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="progress" label="进度" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.progress }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="status" :value="row.status" :showColor="false" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="imageDocument" label="图片" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <ImageView :loadKeys="row.newImageFiles" preview maxHeight="50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <PdfView :loadKeys="row.newAttachmentFile" isPdf />
+        </template>
+      </el-table-column>
+    </JnTable>
+
+    <!-- 表格分页 -->
+    <JnPagination :total="total" v-model="pagination" @change="getList" />
+  </el-card>
+</template>

package/jnrs-vue/src/views/demos/crud/index.vue

@@ -6,7 +6,7 @@ import { ref, onActivated, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { useRoute } from '@jnrs/vue-core/router'
-import { objectMatchAssign, dateFormatsToObject, isNumberGtZero } from '@jnrs/shared'
+import { objectMatchAssign, dateFormatsToObject, verifyNumberGtZero } from '@jnrs/shared'
 import { debounce } from '@jnrs/shared/lodash'
 import { getDictList, downloadFile, extractFieldId } from '@/utils'
 import { useI18n } from '@/locales'
@@ -40,7 +40,7 @@ const route = useRoute()
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = ref<EditProject>({
-  id: '',
+  id: 0,
   name: '',
   projectType: undefined,
   managerId: undefined,
@@ -59,7 +59,7 @@ const rules = ref<FormRules>({
   budget: [
     { required: true, message: '请输入', trigger: 'change' },
     {
-      validator: isNumberGtZero,
+      validator: verifyNumberGtZero,
       trigger: 'change'
     }
   ]
@@ -223,8 +223,8 @@ onActivated(() => {
           format="YYYY-MM-DD HH:mm:ss"
           value-format="YYYY-MM-DD HH:mm:ss"
           :disabled-date="
-            (time: number) => {
-              return time < Date.now() - 86400000
+            (time: Date) => {
+              return time.getTime() < Date.now() - 86400000
             }
           "
         />

package/jnrs-vue/src/views/demos/unitTest/RequestPage.vue

@@ -17,7 +17,7 @@ const loginParams = ref({
 
 const handleDataApi = async () => {
   try {
-    const res = await DataApiTest('123')
+    const res = await DataApiTest({ id: '123' })
     console.log(res)
     console.log(res.name)
     ElMessage({
@@ -33,7 +33,7 @@ const handleDataApi = async () => {
 
 const handleFullDataApi = async () => {
   try {
-    const res = await FullDataApiTest('123')
+    const res = await FullDataApiTest({ id: '123' })
     console.log(res)
     console.log(res.data?.name)
     ElMessage({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jnrs-vue",
-  "version": "1.2.26",
+  "version": "1.2.27",
   "description": "巨能前端工程化开发，Vue 项目模板脚手架",
   "keywords": [
     "vue",