sohelp-eleplus 1.1.26 → 1.1.28

package/sohelp-cry-input/README.md

@@ -1,211 +1,35 @@
-# 货币金额输入框 (SohelpCryInput)
+# SohelpCryInput 货币金额输入框
 
-支持国旗前缀、千分符、币别符、保留小数位数的货币数值输入组件。
+基于 `el-input` 封装的货币金额输入组件，支持千分符格式化显示、币别国旗前缀图标、自定义小数位数，失焦时自动格式化并更新绑定值。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | Number/String | '' | 绑定值（纯数字） |
-| separator | String | ',' | 千分符分隔符，如 "," |
-| cry | String | 'cny' | 币别代码，如 'usd', 'cny', 'eur' |
-| digits | Number | 2 | 保留小数位数 |
-| showFlag | Boolean | true | 是否显示币别国旗 |
-
-**其他属性**：支持通过 `v-bind` 传递所有 el-input 的原生属性，如 `placeholder`、`disabled`、`readonly`、`clearable`、`size`、`autofocus` 等
-
-## 事件 (Events)
-
-| 事件名 | 说明 | 回调参数 |
-| :--- | :--- | :--- |
-| update:modelValue | 失焦时触发，更新绑定值 | (value: number \| string \| '') |
-
-**其他事件**：支持通过 `v-on` 绑定所有 el-input 的原生事件，如 `focus`、`blur`、`clear`、`change` 等
-
-## 功能特性
-
-- ✅ 支持千分符格式化显示
-- ✅ 自动处理浮点数精度问题
-- ✅ 支持自定义千分符分隔符
-- ✅ 支持自定义小数位数
-- ✅ 支持 25 种主流货币
-- ✅ 国旗图标动态加载
-- ✅ 默认自动获取焦点（可通过 `:autofocus="false"` 禁用）
-- ✅ 完整透传 el-input 的所有属性和事件
-
-## 支持的币别 (Currency Codes)
-
-| 代码 | 国旗 | 货币 |
-| :--- | :--- | :--- |
-| usd | 🇺🇸 | 美元 USD |
-| cny | 🇨🇳 | 人民币 CNY |
-| eur | 🇪🇺 | 欧元 EUR |
-| gbp | 🇬🇧 | 英镑 GBP |
-| jpy | 🇯🇵 | 日元 JPY |
-| krw | 🇰🇷 | 韩元 KRW |
-| hkd | 🇭🇰 | 港币 HKD |
-| aud | 🇦🇺 | 澳元 AUD |
-| cad | 🇨🇦 | 加元 CAD |
-| sgd | 🇸🇬 | 新币 SGD |
-| myr | 🇲🇾 | 马来西亚林吉特 MYR |
-| thb | 🇹🇭 | 泰铢 THB |
-| inr | 🇮🇳 | 印度卢比 INR |
-| rub | 🇷🇺 | 俄罗斯卢布 RUB |
-| brl | 🇧🇷 | 巴西雷亚尔 BRL |
-| zar | 🇿🇦 | 南非兰特 ZAR |
-| mxn | 🇲🇽 | 墨西哥比索 MXN |
-| php | 🇵🇭 | 菲律宾比索 PHP |
-| idr | 🇮🇩 | 印尼盾 IDR |
-| vnd | 🇻🇳 | 越南盾 VND |
-| nzd | 🇳🇿 | 新西兰元 NZD |
-| try | 🇹🇷 | 土耳其里拉 TRY |
-| pln | 🇵🇱 | 波兰兹罗提 PLN |
-| sek | 🇸🇪 | 瑞典克朗 SEK |
-| nok | 🇳🇴 | 挪威克朗 NOK |
-| dkk | 🇩🇰 | 丹麦克朗 DKK |
-
-## 使用示例
-
-### 基础用法
-
-```vue
-<template>
-  <sohelp-cry-input
-    v-model="value"
-    separator=","
-    cry="usd"
-    :digits="2"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(1234567.89);
-</script>
-```
-
-### 不同币别
+## 基础用法
 
 ```vue
 <template>
-  <div class="demo">
-    <div class="item">
-      <label>美元 (USD)</label>
-      <sohelp-cry-input v-model="usd" separator="," cry="usd" :digits="2" />
-    </div>
-    <div class="item">
-      <label>人民币 (CNY)</label>
-      <sohelp-cry-input v-model="cny" separator="," cry="cny" :digits="2" />
-    </div>
-    <div class="item">
-      <label>欧元 (EUR)</label>
-      <sohelp-cry-input v-model="eur" separator="," cry="eur" :digits="2" />
-    </div>
-    <div class="item">
-      <label>日元 (JPY)</label>
-      <sohelp-cry-input v-model="jpy" separator="," cry="jpy" :digits="0" />
-    </div>
-  </div>
+  <sohelp-cry-input v-model="amount" cry="usd" :digits="2" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
-
-const usd = ref(1234567.89);
-const cny = ref(1234567.89);
-const eur = ref(1234567.89);
-const jpy = ref(1234567);
+const amount = ref(1234567.89);
 </script>
 ```
 
-### 不显示国旗
-
-```vue
-<template>
-  <sohelp-cry-input
-    v-model="value"
-    separator=","
-    cry="usd"
-    :digits="2"
-    :show-flag="false"
-  />
-</template>
-```
-
-### 不同小数位数
-
-```vue
-<template>
-  <sohelp-cry-input
-    v-model="value"
-    separator=","
-    cry="cny"
-    :digits="4"
-  />
-</template>
-```
-
-### 使用 v-bind 传递原生属性
-
-```vue
-<template>
-  <sohelp-cry-input
-    v-model="value"
-    v-bind="inputProps"
-    @focus="handleFocus"
-    @blur="handleBlur"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-
-const inputProps = {
-  placeholder: '请输入金额',
-  disabled: false,
-  clearable: true,
-  size: 'large'
-};
-
-const handleFocus = () => {
-  console.log('获得焦点');
-};
+## 属性 (Props)
 
-const handleBlur = () => {
-  console.log('失去焦点');
-};
-</script>
-```
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | Number / String | `''` | 否 | 绑定值（纯数字，支持 v-model） |
+| separator | String | `','` | 否 | 千分符分隔符 |
+| cry | String | `'cny'` | 否 | 币别代码（如 `'usd'`、`'cny'`、`'eur'`），用于显示对应国旗 |
+| digits | Number | `2` | 否 | 保留小数位数 |
+| showFlag | Boolean | `true` | 否 | 是否在输入框前缀显示币别国旗图标 |
+| autofocus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
 
-### 禁用自动聚焦
+> 支持通过 `v-bind="$attrs"` 透传所有 `el-input` 原生属性（如 `placeholder`、`disabled`、`readonly`、`clearable`、`size` 等）。
 
-```vue
-<template>
-  <sohelp-cry-input
-    v-model="value"
-    :autofocus="false"
-  />
-</template>
-```
-
-### 禁用/只读状态
+## 事件 (Events)
 
-```vue
-<template>
-  <div>
-    <sohelp-cry-input
-      v-model="value1"
-      disabled
-      placeholder="禁用状态"
-    />
-    <sohelp-cry-input
-      v-model="value2"
-      readonly
-      placeholder="只读状态"
-    />
-  </div>
-</template>
-```
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `(value: Number / String)` | 输入框失焦时触发，返回解析后的纯数字值 |

package/sohelp-cry-input/index.vue

@@ -10,7 +10,7 @@
 
 <script setup>
   import { ref, computed, watch, defineAsyncComponent, onMounted, nextTick } from 'vue';
-  import { FlagMap } from '@/components/sohelp-eleplus/icons/flag';
+  import { FlagMap } from '../icons/flag';
 
   // 组件属性定义
   const props = defineProps({
@@ -33,6 +33,10 @@
     showFlag: {
       type: Boolean,
       default: true
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   });
 
@@ -97,7 +101,7 @@
   // 组件挂载后自动获取焦点（可通过 :autofocus="false" 禁用）
   onMounted(() => {
     nextTick(() => {
-      if (props.autofocus !== false && inputRef.value) {
+      if (props.autofocus && inputRef.value) {
         inputRef.value.focus();
       }
     });

package/sohelp-date/README.md

@@ -1,27 +1,24 @@
-# 日期选择器 (Date)
+# SohelpDate 日期选择器
 
-基于 `el-date-picker` 封装的日期选择组件，默认格式为 `YYYY-MM-DD`。
+基于 `el-date-picker` 封装的日期选择组件，默认值格式为 `YYYY-MM-DD`，支持自动聚焦，并透传所有 `el-date-picker` 属性。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| focus | Boolean | false | 组件挂载后是否自动获取焦点。 |
-| ... | - | - | 支持 `el-date-picker` 的所有属性。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-date
-    v-model="createDate"
-    placeholder="选择日期"
-  />
+  <sohelp-date v-model="date" placeholder="请选择日期" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const createDate = ref('');
+const date = ref('');
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| focus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
+| — | — | — | — | 支持 `el-date-picker` 的所有属性（通过 `v-bind="$attrs"` 透传） |

package/sohelp-datetime/README.md

@@ -1,29 +1,27 @@
-# 日期时间选择器 (Datetime)
+# SohelpDatetime 日期时间选择器
 
-基于 `el-date-picker` 封装的日期时间选择组件，默认类型为 `datetime`。
+基于 `el-date-picker` 封装的日期时间选择组件，默认类型为 `datetime`，默认值格式为 `YYYY-MM-DD HH:mm:ss`，支持自动聚焦及透传所有 `el-date-picker` 属性。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | String/Date | '' | 绑定的日期时间值 (v-model)。 |
-| type | String | 'datetime' | 选择器类型。 |
-| valueFormat | String | 'YYYY-MM-DD HH:mm:ss' | 绑定值的格式。 |
-| focus | Boolean | false | 组件挂载后是否自动获取焦点。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-datetime
-    v-model="meetingTime"
-    placeholder="选择会议时间"
-  />
+  <sohelp-datetime v-model="dateTime" placeholder="请选择日期时间" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const meetingTime = ref('');
+const dateTime = ref('');
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String | `''` | 否 | 绑定值，支持 `v-model` 双向绑定 |
+| type | String | `'datetime'` | 否 | 日期选择器类型，对应 `el-date-picker` 的 `type` |
+| valueFormat | String | `'YYYY-MM-DD HH:mm:ss'` | 否 | 绑定值的格式 |
+| focus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
+| — | — | — | — | 支持 `el-date-picker` 的所有属性（通过 `v-bind="$attrs"` 透传） |

package/sohelp-datetime-picker/README.md

@@ -1,28 +1,13 @@
-# 日期时间选择器 (Datetime Picker)
+# SohelpDatetimePicker 日期时间快捷选择器
 
-基于 `el-date-picker` 封装，预设了常用的日期范围快捷选项（如今天、昨天、本周、本月等）。
+基于 `el-date-picker` 封装的日期时间范围选择组件，内置常用日期快捷选项（今天、昨天、前天、本周、上周、本月、上月、本年、去年），并透传所有 `el-date-picker` 属性。
 
-## 功能特性
-
-- **快捷选项**：内置今天、昨天、前天、本周、上周、本月、上月、本年、去年等快捷选择。
-- **灵活配置**：支持自定义类型和格式。
-
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | String/Array | '' | 绑定的值 (v-model)。 |
-| type | String | 'datetimerange' | 选择器类型。 |
-| valueFormat | String | 'YYYY-MM-DD HH:mm:ss' | 绑定值的格式。 |
-| ... | - | - | 支持 `el-date-picker` 的其他属性。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
   <sohelp-datetime-picker
     v-model="dateRange"
-    type="datetimerange"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
   />
@@ -34,3 +19,18 @@ import { ref } from 'vue';
 const dateRange = ref([]);
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String | `''` | 否 | 绑定值，支持 `v-model` |
+| type | String | `'datetimerange'` | 否 | 日期选择器类型，对应 `el-date-picker` 的 `type` |
+| valueFormat | String | `'YYYY-MM-DD HH:mm:ss'` | 否 | 绑定值的格式 |
+| — | — | — | — | 支持 `el-date-picker` 的所有属性（通过 `v-bind="$attrs"` 透传） |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `value: String / Array` | 值变化时触发 |

package/sohelp-datetime-picker/index.vue

@@ -12,8 +12,10 @@
   import { ref, reactive, watch } from 'vue';
   import dayjs from 'dayjs';
   const props = defineProps({
-    modelValue: String,
-    default: '',
+    modelValue: {
+      type: String,
+      default: ''
+    },
     type: {
       type: String,
       default: 'datetimerange'
@@ -24,7 +26,7 @@
     }
   });
 
-  const emit = defineEmits('update:modelValue');
+  const emit = defineEmits(['update:modelValue']);
   const value = ref([]);
   const now = dayjs();
   const dateType = reactive([
@@ -73,8 +75,13 @@
     () => props.modelValue,
     (val) => {
       value.value = val;
-    }
+    },
+    { immediate: true }
   );
+
+  watch(value, (val) => {
+    emit('update:modelValue', val);
+  });
 </script>
 
 <script>

package/sohelp-datetime-range/README.md

@@ -1,35 +1,32 @@
-# 日期时间范围 (Datetime Range)
+# SohelpDatetimeRange 日期时间范围选择器
 
-由两个独立的日期时间选择器组成的范围选择组件，中间支持自定义分隔符。
+由两个 `sohelp-datetime` 组件组合而成的日期时间范围选择组件，支持自定义分隔符和日期格式。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | Array | [] | 绑定的时间范围数组 [start, end]。 |
-| format | String | 'YYYY-MM-DD HH:mm:ss' | 日期时间格式。 |
-| separator | String | '-' | 中间的分隔符。 |
-
-## 事件 (Events)
-
-| 事件名 | 说明 | 回调参数 |
-| :--- | :--- | :--- |
-| update:modelValue | 值变化时触发。 | `value: Array` |
-| change | 值变化时触发。 | - |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-datetime-range
-    v-model="range"
-    separator="至"
-  />
+  <sohelp-datetime-range v-model="range" separator="至" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const range = ref(['2023-01-01 00:00:00', '2023-01-31 23:59:59']);
+const range = ref(['2024-01-01 00:00:00', '2024-01-31 23:59:59']);
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number / Array | — | 否 | 绑定值，支持 `v-model`；数组时为 `[开始时间, 结束时间]` |
+| format | String | `'YYYY-MM-DD HH:mm:ss'` | 否 | 日期时间的显示格式和值格式 |
+| separator | String | `'-'` | 否 | 两个选择器之间的分隔符文本 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `value: Array` | 任一选择器值变化时触发，返回 `[开始时间, 结束时间]` 数组 |
+| change | — | 任一选择器值变化时触发 |

package/sohelp-demo-block/README.md

@@ -0,0 +1,43 @@
+# SohelpDemoBlock 示例展示块
+
+基于 `ele-card` 封装的组件演示展示块，支持展示组件示例、查看源码、复制代码和内嵌 API 文档。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-demo-block
+    title="按钮示例"
+    description="这是一个基础按钮的演示"
+    :code="codeStr"
+    :props="propsData"
+    :events="eventsData"
+  >
+    <el-button type="primary">按钮</el-button>
+  </sohelp-demo-block>
+</template>
+
+<script setup>
+const codeStr = '<el-button type="primary">按钮</el-button>';
+const propsData = [{ name: 'type', type: 'String', default: '-', required: false, desc: '按钮类型' }];
+const eventsData = [{ name: 'click', params: 'event', desc: '点击事件' }];
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| title | String | `''` | 否 | 示例标题 |
+| description | String | `''` | 否 | 示例描述 |
+| code | String | `''` | 否 | 示例源码 |
+| props | Array | `[]` | 否 | Props API 数据，每项含 `name/type/default/required/desc` |
+| events | Array | `[]` | 否 | Events API 数据，每项含 `name/params/desc` |
+| methods | Array | `[]` | 否 | Methods API 数据，每项含 `name/params/desc` |
+| slots | Array | `[]` | 否 | Slots API 数据，每项含 `name/params/desc` |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 演示内容区域 |