@yqg/simple 1.0.1-beta.1.0 → 1.0.1-beta.1.2

package/README.md

@@ -63,8 +63,35 @@ Vue.component('yqg-simple-form', YqgSimpleForm)
 
 ## 混入 (Mixins)
 
+### 引入方式
+
+```javascript
+import { table, modal, watermark } from '@yqg/simple/mixin'
+
+export default {
+  mixins: [table, modal, watermark],
+  // ...
+}
+```
+
+### 可用的混入
+
+- `table` - 表格混入，提供表格相关的通用方法
+- `tableSelection` - 表格选择混入
+- `modal` - 模态框混入，提供模态框相关的通用方法
+- `watermark` - 水印混入，提供水印功能
+- `commonTable` - 通用表格混入
+- `clientTable` - 客户端表格混入
+- `enumType` - 枚举类型混入
+- `cardList` - 卡片列表混入
+
+### 按需引入
+
 ```javascript
-import { table, modal, watermark } from '@yqg/simple'
+// 引入单个混入
+import table from '@yqg/simple/src/mixin/table'
+import modal from '@yqg/simple/src/mixin/modal'
+import watermark from '@yqg/simple/src/mixin/watermark'
 
 export default {
   mixins: [table, modal, watermark],
@@ -92,9 +119,8 @@ export default {
 ```javascript
 import { util, formatMap, object, constant } from '@yqg/simple'
 
-// 使用加密工具
-const encrypted = util.aesEncrypt('secret message')
-const decrypted = util.aesDecrypt(encrypted)
+// 使用字符串工具
+const snakeCase = util.camelCaseToUnderscore('userName') // 'user_name'
 
 // 使用对象工具
 const value = object.pickValue(data, 'user.name')
@@ -109,10 +135,9 @@ const formatted = formatMap.formatValue(value, options)
 支持通过子路径按需引入工具函数，减少打包体积：
 
 ```javascript
-// 加密和字符串工具
-import { aesEncrypt, aesDecrypt, camelCaseToUnderscore } from '@yqg/simple/util/tool'
+// 字符串工具
+import { camelCaseToUnderscore } from '@yqg/simple/util/tool'
 
-const encrypted = aesEncrypt('secret message')
 const snakeCase = camelCaseToUnderscore('userName') // 'user_name'
 
 // 对象操作工具
@@ -166,10 +191,10 @@ const data = myStorage.get()
 所有工具函数都提供完整的 TypeScript 类型声明，开发时会有智能提示：
 
 ```typescript
-import { aesEncrypt, pickValue, merge } from '@yqg/simple/util'
+import { camelCaseToUnderscore, pickValue, merge } from '@yqg/simple/util'
 
-// ✅ 编辑器自动提示：aesEncrypt(message: string, key?: string): string
-const encrypted = aesEncrypt('hello')
+// ✅ 编辑器自动提示：camelCaseToUnderscore(camelStr: string): string
+const snakeCase = camelCaseToUnderscore('userName')
 
 // ✅ 编辑器自动提示：pickValue<T = any>(obj: any, keyString: string): T | undefined
 const value = pickValue<number>({ a: { b: 1 } }, 'a.b')
@@ -180,10 +205,8 @@ const merged = merge({ a: 1 }, { b: 2 })
 
 ### 工具函数 API
 
-#### 加密工具 (`util/tool`)
+#### 字符串工具 (`util/tool`)
 
-- `aesEncrypt(message: string, key?: string): string` - AES 加密
-- `aesDecrypt(ciphertext: string, key?: string): string` - AES 解密
 - `camelCaseToUnderscore(camelStr: string): string` - 驼峰转下划线
 
 #### 对象工具 (`util/object`)
@@ -255,12 +278,210 @@ class Storage {
 
 ## 常量
 
+组件库提供了丰富的常量定义，包括表单字段定义、表格配置等。
+
+### 引入方式
+
+#### 从主入口引入
+
 ```javascript
-import * as constant from '@yqg/simple/constant'
+import { constant } from '@yqg/simple'
+
+// 使用
+const dateDef = constant.dateTimeDef
+const requiredField = constant.required({ field: 'name', label: '姓名' })
+```
 
-// 或按需引入
-import * as commonFields from '@yqg/simple/constant/common-fields'
-import * as fields from '@yqg/simple/constant/fields'
+#### 按需引入（推荐）
+
+```javascript
+// 引入 fields.ts（包含 common-fields 的所有导出）
+import { 
+  extendsDefValue,
+  dateTimeDayStartDef,
+  dateTimeDayEndDef,
+  // 以下来自 common-fields
+  dateTimeDef,
+  required,
+  merge,
+  id,
+  timeCreate,
+  timeUpdate,
+  remark
+} from '@yqg/simple/constant/fields'
+
+// 引入 common-fields
+import { 
+  dateTimeDef,
+  required,
+  merge,
+  primaryStaticProps,
+  successStaticProps,
+  warningStaticProps,
+  fixedLeft,
+  fixedRight,
+  staticComp,
+  blockItem,
+  hiddenItem,
+  id,
+  time,
+  timeCreate,
+  timeUpdate,
+  remark
+} from '@yqg/simple/constant/common-fields'
+
+// 引入表格常量
+import { defaultPagination } from '@yqg/simple/constant/table'
+```
+
+### 常用常量 API
+
+#### fields 相关 (`constant/fields`)
+
+**字段定义辅助函数：**
+
+- `extendsDefValue(options)` - 扩展 DefValue 组件
+  ```javascript
+  const customDef = extendsDefValue({
+    props: { showTime: true },
+    filter: 'dateTime'
+  })
+  ```
+
+- `dateTimeDayStartDef` - 日期时间定义（默认 00:00:00）
+  ```javascript
+  // 用于搜索开始时间
+  const startTimeDef = {
+    ...dateTimeDayStartDef,
+    field: 'startTime',
+    label: '开始时间'
+  }
+  ```
+
+- `dateTimeDayEndDef` - 日期时间定义（默认 23:59:59）
+  ```javascript
+  // 用于搜索结束时间
+  const endTimeDef = {
+    ...dateTimeDayEndDef,
+    field: 'endTime',
+    label: '结束时间'
+  }
+  ```
+
+#### common-fields 相关 (`constant/common-fields`)
+
+**辅助函数：**
+
+- `merge<T>(...args)` - 合并字段定义
+  ```javascript
+  const customField = merge(dateTimeDef, { required: true, label: '创建时间' })
+  ```
+
+- `required(def)` - 标记字段为必填
+  ```javascript
+  const nameField = required({ field: 'name', label: '姓名' })
+  ```
+
+- `fixedLeft(def, width?)` - 固定列到左侧
+  ```javascript
+  const idColumn = fixedLeft(id, 100)
+  ```
+
+- `fixedRight(def, width?)` - 固定列到右侧
+  ```javascript
+  const opColumn = fixedRight(op, 150)
+  ```
+
+- `staticComp(def)` - 将字段转为静态组件（只读）
+  ```javascript
+  const readOnlyName = staticComp({ field: 'name', label: '姓名' })
+  ```
+
+**样式定义：**
+
+- `primaryStaticProps` - 主色文本样式
+- `successStaticProps` - 成功色文本样式
+- `warningStaticProps` - 警告色文本样式
+- `sizeLongProps` - 长宽度输入框样式
+
+**布局定义：**
+
+- `blockItem` - 块级表单项
+- `hiddenItem` - 隐藏表单项
+- `rangeItem` - 范围表单项
+
+**常用字段定义：**
+
+- `dateTimeDef` - 日期时间字段
+  ```javascript
+  { type: 'date', props: { showTime: true }, filter: 'dateTime' }
+  ```
+
+- `id` - ID 字段
+  ```javascript
+  { field: 'id', label: 'ID' }
+  ```
+
+- `time` - 时间字段
+- `timeCreate` - 创建时间字段
+- `timeUpdate` - 更新时间字段
+- `timeCreated` - 创建时间字段（别名）
+- `timeUpdated` - 更新时间字段（别名）
+- `remark` - 备注字段（文本域）
+- `op` - 操作列字段
+
+**七牛上传字段：**
+
+- `qiniuFileDef` - 七牛文件上传字段
+- `qiniuImageDef` - 七牛图片上传字段
+
+### 使用示例
+
+```javascript
+import { 
+  merge, 
+  required, 
+  dateTimeDayStartDef, 
+  dateTimeDayEndDef,
+  id,
+  timeCreate,
+  timeUpdate,
+  remark,
+  fixedLeft,
+  fixedRight
+} from '@yqg/simple/constant/fields'
+
+export default {
+  data() {
+    return {
+      // 表单字段定义
+      formFields: [
+        required(merge(id, { label: '用户ID' })),
+        required({ field: 'name', label: '姓名' }),
+        { 
+          ...dateTimeDayStartDef, 
+          field: 'startTime', 
+          label: '开始时间' 
+        },
+        {
+          ...dateTimeDayEndDef,
+          field: 'endTime',
+          label: '结束时间'
+        },
+        remark
+      ],
+      
+      // 表格列定义
+      tableColumns: [
+        fixedLeft(id, 80),
+        { field: 'name', label: '姓名' },
+        timeCreate,
+        timeUpdate,
+        fixedRight({ field: 'op', label: '操作' }, 120)
+      ]
+    }
+  }
+}
 ```
 
 ## 文档

package/dist/constant/fields.d.ts

@@ -1,6 +1,6 @@
 import type { Def } from '@yqg/type';
-import type { CommonObject } from './common-fields.ts';
-export * from './common-fields.ts';
+import type { CommonObject } from './common-fields';
+export * from './common-fields';
 export declare const extendsDefValue: (options: CommonObject) => CommonObject;
 export declare const dateTimeDayStartDef: Def;
 export declare const dateTimeDayEndDef: Def;