cimos7-vue3-common 0.4.96 → 0.4.97

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cimos7-vue3-common",
     "private": false,
-    "version": "0.4.96",
+    "version": "0.4.97",
     "license": "MIT",
     "author": {
         "name": "miao_z"

package//347/273/204/344/273/266/344/275/277/347/224/250/346/226/207/346/241/243.md

@@ -144,7 +144,7 @@ const tData = ref([
 ]);
 
 const columns = [
-  { key: 'serialIndex', label: '序号', width: '80px', default: true },
+  { key: 'serialIndex', label: '序号', width: '5rem', default: true },
   { key: 'name', label: '姓名', default: true },
   { key: 'age', label: '年龄', default: true },
   { key: 'amount', label: '金额', default: false }, // 默认不显示
@@ -605,10 +605,9 @@ const handleReset = (form) => {
 ### Events 事件
 
 | 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| rowClick | 行点击 | (row, column, event, extraParam) |
-| search | 搜索 | (searchForm) |
-| reset | 重置 | (searchForm) |
+|--------|------|----------| rowClick | 行点击 | (row, column, event, extraParam) |
+| search | 搜索 | (searchForm, pageInfo) |
+| reset | 重置 | (searchForm, pageInfo) |
 | loadSuccess | 数据加载成功 | (data) |
 | loadData | 加载数据（仅在传入 data 时触发） | (pageInfo, searchForm) |
 | tapOpt | 批量操作按钮点击 | (checkedArray) |
@@ -710,6 +709,7 @@ console.log(tableRef.value.pageInfo); // { pageIndex, pageSize, total }
       
       <!-- 搜索栏左侧按钮 -->
       <template #searchLeft>
+          <el-input :span="6" placeholder="请输入用户名" v-model="searchParams.username" />
         <el-button type="primary">新增</el-button>
       </template>
       
@@ -725,15 +725,15 @@ console.log(tableRef.value.pageInfo); // { pageIndex, pageSize, total }
       
       <!-- 统计数据卡片 -->
       <template #chartCard>
-        <el-card style="margin-top: 12px;">
-          <div style="display: flex; gap: 24px;">
+        <el-card style="margin-top: .75rem;">
+          <div style="display: flex; gap: 1.5rem;">
             <div>
-              <div style="color: #999; font-size: 12px;">总记录数</div>
-              <div style="font-size: 24px; font-weight: bold;">{{ tData.length }}</div>
+              <div style="color: #999; font-size: .75rem;">总记录数</div>
+              <div style="font-size: 1.5rem; font-weight: bold;">{{ tData.length }}</div>
             </div>
             <div>
-              <div style="color: #999; font-size: 12px;">平均年龄</div>
-              <div style="font-size: 24px; font-weight: bold;">{{ avgAge }}</div>
+              <div style="color: #999; font-size: .75rem;">平均年龄</div>
+              <div style="font-size: 1.5rem; font-weight: bold;">{{ avgAge }}</div>
             </div>
           </div>
         </el-card>
@@ -772,7 +772,7 @@ const avgAge = computed(() => {
 });
 
 const columns = [
-  { key: 'serialIndex', label: '序号', width: '80px', show: true },
+  { key: 'serialIndex', label: '序号', width: '5rem', show: true },
   { key: 'name', label: '姓名', show: true },
   { key: 'age', label: '年龄', show: true },
   { key: 'action', label: '操作', width: 200, show: true },
@@ -794,12 +794,16 @@ const tapDelete = (scope) => {
   console.log('删除:', scope.row);
 };
 
-const handleSearch = (form) => {
-  console.log('搜索:', form);
+const handleSearch = (form, pageInfo) => {
+  console.log('搜索:', form, pageInfo);
+  // 请求列表数据时需要带上 pageInfo
+  fetchList({ ...form, pageInfo });
 };
 
-const handleReset = () => {
-  console.log('重置');
+const handleReset = (form, pageInfo) => {
+  console.log('重置:', form, pageInfo);
+  // 请求列表数据时需要带上 pageInfo
+  fetchList({ ...form, pageInfo });
 };
 
 const handleChangeColumns = (selectedKeys) => {
@@ -837,6 +841,7 @@ const handleBatchExport = () => {
       
       <!-- 搜索栏左侧按钮 -->
       <template #searchLeft>
+          <el-input :span="6" placeholder="请输入用户名" v-model="searchParams.username" />
         <el-button type="primary">新增</el-button>
       </template>
       
@@ -847,11 +852,11 @@ const handleBatchExport = () => {
       
       <!-- 统计数据 -->
       <template #chartCard>
-        <el-card style="margin-top: 12px;">
-          <div style="display: flex; gap: 24px;">
+        <el-card style="margin-top: .75rem;">
+          <div style="display: flex; gap: 1.5rem;">
             <div>
-              <div style="color: #999; font-size: 12px;">总记录数</div>
-              <div style="font-size: 24px; font-weight: bold;">{{ totalCount }}</div>
+              <div style="color: #999; font-size: .75rem;">总记录数</div>
+              <div style="font-size: 1.5rem; font-weight: bold;">{{ totalCount }}</div>
             </div>
           </div>
         </el-card>
@@ -880,7 +885,7 @@ const checkedColumn = ref([]);
 const totalCount = ref(0);
 
 const columns = [
-  { key: 'serialIndex', label: '序号', width: '80px', show: true },
+  { key: 'serialIndex', label: '序号', width: '5rem', show: true },
   { key: 'name', label: '姓名', show: true },
   { key: 'age', label: '年龄', show: true },
   { key: 'action', label: '操作', width: 200, show: true },
@@ -981,7 +986,7 @@ const tData = ref([
 ]);
 
 const columns = [
-  { key: 'serialIndex', label: '序号', width: '80px', show: true },
+  { key: 'serialIndex', label: '序号', width: '5rem', show: true },
   { key: 'name', label: '姓名', show: true },
   { key: 'age', label: '年龄', show: true },
   { key: 'action', label: '操作', width: 200, show: true },
@@ -1031,7 +1036,7 @@ const tableRef = ref(null);
 const checkedColumn = ref([]);
 
 const columns = [
-  { key: 'serialIndex', label: '序号', width: '80px' },
+  { key: 'serialIndex', label: '序号', width: '5rem' },
   { key: 'name', label: '姓名' },
   { key: 'age', label: '年龄' },
   { key: 'action', label: '操作', width: 160 },
@@ -1249,7 +1254,7 @@ const loadColumns = async () => {
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <h3>基础用法</h3>
     <IconPark name="Home" />
     
@@ -1279,7 +1284,7 @@ const loadColumns = async () => {
     <h3>自定义样式</h3>
     <IconPark 
       name="Home" 
-      :customStyle="{ marginRight: '10px', opacity: 0.8 }" 
+      :customStyle="{ marginRight: '.625rem', opacity: 0.8 }" 
     />
     
     <h3>带边框</h3>
@@ -1312,17 +1317,17 @@ const handleClick = (event) => {
 ```vue
 <template>
   <el-button type="primary">
-    <IconPark name="Add" style="margin-right: 4px;" />
+    <IconPark name="Add" style="margin-right: .25rem;" />
     新增
   </el-button>
   
   <el-button>
-    <IconPark name="Edit" style="margin-right: 4px;" />
+    <IconPark name="Edit" style="margin-right: .25rem;" />
     编辑
   </el-button>
   
   <el-button type="danger">
-    <IconPark name="Delete" style="margin-right: 4px;" />
+    <IconPark name="Delete" style="margin-right: .25rem;" />
     删除
   </el-button>
 </template>
@@ -1338,7 +1343,7 @@ import { IconPark } from 'cimos7-vue3-common';
 <template>
   <CTable :data="tableData" :columns="columns">
     <template #action="scope">
-      <span style="display: flex; gap: 8px;">
+      <span style="display: flex; gap: .5rem;">
         <IconPark 
           name="Edit" 
           color="#1890ff" 
@@ -1402,7 +1407,7 @@ const handleDelete = (row) => {
 | data | 数据对象 | Object | {} | 是 |
 | title | 标题文本 | String | '详情信息' | 否 |
 | columnsCount | 列数 | Number | 3 | 否 |
-| gap | 网格间距 | String | '12px 16px' | 否 |
+| gap | 网格间距 | String | '.75rem 1rem' | 否 |
 | tooltipProps | Tooltip 配置对象，支持 Element Plus el-tooltip 所有属性 | Object | { placement: 'top', effect: 'dark' } | 否 |
 
 ### fields 配置项
@@ -1443,13 +1448,13 @@ const handleDelete = (row) => {
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CFieldList
       :fields="fields"
       :data="data"
       title="用户详情"
       :columnsCount="2"
-      gap="16px 24px"
+      gap="1rem 1.5rem"
     />
   </div>
 </template>
@@ -1493,7 +1498,7 @@ const fields = ref([
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CFieldList
       :fields="fields"
       :data="data"
@@ -1552,7 +1557,7 @@ const tooltipProps = ref({
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CFieldList
       :fields="fields"
       :data="data"
@@ -1647,7 +1652,7 @@ CnUpload 组件主要通过配置使用，暂无额外插槽。
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CnUpload
       v-model="fileList"
       :uploadPath="uploadPath"
@@ -1684,7 +1689,7 @@ const handleError = (file) => {
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CnUpload
       v-model="fileList"
       :uploadPath="uploadPath"
@@ -1720,7 +1725,7 @@ const beforeUpload = (files) => {
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CnUpload
       v-model="fileList"
       :uploadPath="uploadPath"
@@ -1747,7 +1752,7 @@ const handleChange = (fileList) => {
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CnUpload
       v-model="fileList"
       :uploadPath="uploadPath"
@@ -1770,7 +1775,7 @@ const uploadPath = '/api/file/upload';
 
 ```vue
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem;">
     <CnUpload
       v-model="fileList"
       :uploadPath="uploadPath"
@@ -1831,6 +1836,11 @@ const handleProgress = (file) => {
 
 ## 更新日志
 
+### v1.6.0
+- TableLayout: search 和 reset 事件新增 pageInfo 参数传递
+- TableLayout: 父组件请求列表数据时需要带上 pageInfo（包含 pageIndex、pageSize、total）
+- TableLayout: 更新文档，说明 search/reset 事件新的参数格式和使用方法
+
 ### v1.5.0
 - 新增 CnUpload 组件：文件上传组件，支持多文件上传、拖拽上传、拖拽排序、上传进度、上传中断等功能
 - CnUpload: 内置多种文件类型图标（图片、视频、音频、PDF、Word、Excel、压缩包等）
@@ -1850,11 +1860,9 @@ const handleProgress = (file) => {
 ### v1.2.0
 - SearchHeader: 重构插槽的显示逻辑，插槽内容作为 el-col 参与 24 栅格布局
 - SearchHeader: 折叠时，插槽内容与搜索配置项一起计算显示（按顺序：searchLeft → 搜索项 → searchMiddle → searchBtnAfter）
-- SearchHeader: searchLeftSpan、searchMiddleSpan、searchBtnAfterSpan 现在表示插槽实际占用的 span
 - 更新组件使用文档，说明新的插槽折叠逻辑
 
 ### v1.1.0
-- SearchHeader: 新增 searchLeftSpan、searchMiddleSpan、searchBtnAfterSpan 属性
 - SearchHeader: 考虑插槽内容占用的 span，优化展开/收起逻辑
 - SearchHeader: 修复插槽内容影响行数计算的问题
 - 更新组件使用文档，添加插槽预留 span 的使用说明和示例