@jnrs/vue-core 1.2.23 → 1.2.25

package/AGENTS.md

@@ -368,13 +368,22 @@ console.log(routes)
 | showIndexColumn     | `boolean`                        | `false`                      | 是否显示序号列                                                                              |
 | showSelectionColumn | `boolean`                        | `false`                      | 是否显示选择列                                                                              |
 | showMouseSelection  | `boolean`                        | `false`                      | 是否开启鼠标框选                                                                            |
+| containerClass      | `string`                         | `'jn_table'`                 | 表格容器类名，用于鼠标框选功能，多个表格时需传入不同类名                                    |
 | pagination          | `IPagination`                    | `{ pageNo: 0, pageSize: 0 }` | 当前页码和每页大小（用于序号计算）                                                          |
+| isMainTable         | `boolean`                        | `false`                      | 是否为主表，启用行选中高亮样式（多栏布局中主表使用）                                        |
+
+**暴露方法 (Exposed)：**
+
+| 方法名         | 类型         | 说明           |
+| -------------- | ------------ | -------------- |
+| clearSelection | `() => void` | 清空所有选中项 |
 
 **使用示例：**
 
 ```vue
 <template>
   <JnTable
+    ref="tableRef"
     :data="tableData"
     :pagination="{ pageNo: 1, pageSize: 20 }"
     show-index-column
@@ -384,9 +393,60 @@ console.log(routes)
     <el-table-column prop="name" label="姓名" />
     <el-table-column prop="age" label="年龄" />
   </JnTable>
+  <el-button @click="handleClearSelection">清空选择</el-button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const handleClearSelection = () => {
+  tableRef.value?.clearSelection()
+}
+</script>
+```
+
+**主表样式示例（多栏布局）：**
+
+```vue
+<template>
+  <JnTable
+    :data="tableData"
+    :isMainTable="true"
+    :pagination="pagination"
+    :autoHeight="true"
+    :showScrollbar="true"
+    :showIndexColumn="true"
+    :rowClassName="tableRowClassName"
+    @row-click="handleRowClick"
+  >
+    <el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip />
+    <el-table-column prop="status" label="状态" />
+  </JnTable>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentId = (ref < string) | (undefined > undefined)
+
+const handleRowClick = (row) => {
+  if (currentId.value === row.id) {
+    currentId.value = undefined
+  } else {
+    currentId.value = row.id
+  }
+}
+
+const tableRowClassName = ({ row }) => {
+  return row.id === currentId.value ? 'jn-row-selected' : ''
+}
+</script>
 ```
 
+> `isMainTable` 启用后，会自动添加行 hover 高亮（`--jnrs-background-hover`）和选中行高亮（`--jnrs-color-primary`）样式，配合 `rowClassName` 实现主表行选中效果。
+
 ---
 
 #### JnSelectTemplate
@@ -696,11 +756,11 @@ const dialogVisible = ref(false)
 
 **参数：**
 
-| 参数名         | 类型                            | 默认值            | 说明           |
-| -------------- | ------------------------------- | ----------------- | -------------- |
-| containerClass | `string`                        | `'jn_table'`      | 表格或容器类名 |
-| rowClass       | `string`                        | `'el-table__row'` | 表格行类名     |
-| callback       | `(rows: HTMLElement[]) => void` | `handleSelection` | 框选后的回调   |
+| 参数名         | 类型                         | 默认值            | 说明                                               |
+| -------------- | ---------------------------- | ----------------- | -------------------------------------------------- |
+| containerClass | `string`                     | `'jn_table'`      | 表格或容器类名，多个表格时需传入不同类名           |
+| rowClass       | `string`                     | `'el-table__row'` | 表格行类名                                         |
+| callback       | `(row: HTMLElement) => void` | `handleSelection` | 框选后的回调，默认处理 input[type='checkbox'] 元素 |
 
 **返回值：**
 
@@ -722,8 +782,8 @@ import { useMouseSelection } from '@jnrs/vue-core/composables'
 
 const { handleMouseDown } = useMouseSelection({
   containerClass: 'jn_table',
-  callback: (rows) => {
-    console.log('框选的行', rows)
+  callback: (row) => {
+    console.log('选中的行', row)
   }
 })
 

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 发版日志
 
+## [1.2.25] - 2026-07-17
+
+### Features
+
+- `JnTable` 组件新增 `isMainTable` prop，启用行选中高亮样式（多栏布局主表使用）
+- `useReactivityTableHeight` 优化：支持多表格场景，自动生成唯一类名，支持 `elementRef` 参数
+
+### Documentation
+
+- `AGENTS.md` 新增 `isMainTable` prop 文档和主表样式示例
+
+## [1.2.24] - 2026-07-08
+
+### Fixed
+
+- `JnTable` 组件新增对于 MouseSelection 的支持，新增 clearSelection 方法
+
 ## [1.2.23] - 2026-07-08
 
 ### Fixed

package/README.md

@@ -4,12 +4,18 @@
 
 巨能前端工程化开发，Vue 专用核心功能包。
 
-- Pinia store
-- Vue composables
-- Vue Router
-- 全局指令
-- 插件
-- 公共 Vue 组件
+### 功能模块
+
+| 模块        | 路径                          | 说明                                                         |
+| ----------- | ----------------------------- | ------------------------------------------------------------ |
+| 主模块      | `@jnrs/vue-core`              | 基础类型定义（`IMenuItem`, `IPagination`, `IPageData`, `IAttachment`, `IDocument` 等） |
+| Pinia       | `@jnrs/vue-core/pinia`        | `useSystemStore`（主题/全屏/菜单折叠）+ `useMenuStore`（动态菜单/路由） |
+| Router      | `@jnrs/vue-core/router`       | `createVueRouter`（创建路由实例）+ `asyncGenerateRoute`（动态路由生成）+ `handleRouter`（跳转）+ `useRouter`/`useRoute` |
+| 组件        | `@jnrs/vue-core/components`   | `JnTable`（表格）、`JnPagination`（分页）、`JnDialog`（弹窗）、`JnFileUpload`（文件上传）、`JnSelectTemplate`（选择器）、`JnDatetime`（日期格式化）、`JnImportAndExport`（导入导出）等 |
+| Composables | `@jnrs/vue-core/composables`  | `useMouseSelection`（鼠标框选）、`useReactivityTableHeight`（表格高度自适应）、`useWebSocket`（WebSocket 连接） |
+| 常量        | `@jnrs/vue-core/constants`    | 主题选项配置                                                 |
+| 工具        | `@jnrs/vue-core/utils` / `lib` | 工具函数 / 类型守卫                                         |
+| 国际化      | `@jnrs/vue-core/locales`      | 组件内置文案的多语言支持                                     |
 
 ## 💻 技术栈
 
@@ -24,9 +30,20 @@ pnpm add @jnrs/vue-core
 ## 🔍 使用示例
 
 ```typescript
-import type { IPageData } from '@jnrs/vue-core'
-import { useRouter, useRoute } from '@jnrs/vue-core/router'
-import { useSystemStore } from '@jnrs/vue-core/pinia'
+// 类型
+import type { IPageData, IAttachment, IMenuItem } from '@jnrs/vue-core'
+
+// Pinia
+import { useSystemStore, useMenuStore } from '@jnrs/vue-core/pinia'
+
+// Router
+import { useRouter, useRoute, handleRouter, createVueRouter } from '@jnrs/vue-core/router'
+
+// 组件
+import { JnTable, JnPagination, JnDialog, JnFileUpload, JnDatetime, JnImportAndExport } from '@jnrs/vue-core/components'
+
+// Composables
+import { useWebSocket, useMouseSelection } from '@jnrs/vue-core/composables'
 ```
 
 ## 📋 API

package/dist/components/JnImportAndExport.vue.d.ts

@@ -5,7 +5,7 @@ export interface Props {
     /**
      * 下载导入模板文件的 api 函数
      */
-    importTemplateApi?: () => Promise<Blob>;
+    importTemplateApi?: () => Promise<IBlobItem>;
     /**
      * 数据导入 api 函数
      */

package/dist/components/JnTable.vue.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     rowKey?: string;
     /**
      * 总是显示横向滚动条
+     * @default false
      */
     showScrollbar?: boolean;
     /**
@@ -26,24 +27,39 @@ export interface Props {
     autoHeight?: boolean;
     /**
      * 表格高度自动计算配置项
+     * @default {}
      */
     autoHeightOptions?: UseReactivityTableHeightOptions;
     /**
      * 是否显示序号列
+     * @default false
      */
     showIndexColumn?: boolean;
     /**
      * 是否显示选择列
+     * @default false
      */
     showSelectionColumn?: boolean;
     /**
      * 是否开启鼠标框选
+     * @default false
      */
     showMouseSelection?: boolean;
+    /**
+     * 表格容器类名，用于鼠标框选功能，多个表格时需传入不同类名
+     * @default 'jn_table'
+     */
+    containerClass?: string;
     /**
      * 当前页码和每页大小（用于序号计算）
+     * @default { pageNo: 0, pageSize: 0 }
      */
     pagination?: IPagination;
+    /**
+     * 是否为主表，启用行选中高亮样式（多栏布局中主表使用）
+     * @default false
+     */
+    isMainTable?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -1565,7 +1581,9 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    clearSelection: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     jnTableRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         data: {
             type: import('vue').PropType<any[]>;