sohelp-eleplus 1.1.26 → 1.1.28

package/sohelp-process/README.md

@@ -1,24 +1,37 @@
-# SohelpProcess 进度条组件
+# SohelpProcess 进度条
 
-可拖拽的进度条组件，支持只读模式和动画效果。
+自定义进度条组件，支持拖拽交互修改进度值、动画效果和自定义颜色。
 
 ## 基础用法
 
-```html
-<sohelp-process v-model="percent" :color="'#35b558'" />
+```vue
+<template>
+  <sohelp-process v-model="progress" color="#35b558" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const progress = ref(50);
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | Number | 0 | 进度值 (0-100) |
-| readonly | Boolean | false | 是否只读（不可拖拽） |
-| height | Number | 8 | 进度条高度 |
-| color | String | '#35b558' | 进度条颜色 |
-| animate | Boolean | false | 是否启用动画 |
-| showPercent | Boolean | false | 是否显示百分比文字 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String / Number | `0` | 否 | 进度值（0-100） |
+| readonly | Boolean | `false` | 否 | 是否只读（禁用拖拽） |
+| height | Number / String | `8` | 否 | 进度条高度 |
+| color | String | `'#35b558'` | 否 | 进度条颜色 |
+| delay | Number | `1` | 否 | 动画延迟秒数 |
+| duration | Number | `1` | 否 | 动画持续时间（秒） |
+| animate | Boolean | `false` | 否 | 是否开启动画 |
+| track | String | `'ease-out'` | 否 | 动画轨迹（CSS transition-timing-function） |
+| margin | String | `'10px 0'` | 否 | 外边距 |
+| showPercent | Boolean | `false` | 否 | 是否显示百分比文字 |
 
 ## 事件 (Events)
 
-| 事件名 | 说明 | 回调参数 |
-| update:modelValue | 拖拽改变进度时触发 | (value: Number) |
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `value: Number` | 进度值变化时触发 |

package/sohelp-process/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sohelp-progress-c">
-    <view class="sohelp-progress-wrap">
-      <view class="sohelp-progress-box" ref="progressBox" @mousedown="onDragStart" @touchstart="onDragStart">
-        <view class="sohelp-progress" :style="style"></view>
+    <div class="sohelp-progress-wrap">
+      <div class="sohelp-progress-box" ref="progressBox" @mousedown="onDragStart" @touchstart="onDragStart">
+        <div class="sohelp-progress" :style="style"></div>
         <!-- 拖拽句柄 -->
         <div
           v-if="!props.readonly"
@@ -11,9 +11,9 @@
           @mousedown.stop="onHandleDown"
           @touchstart.stop="onHandleDown"
         ></div>
-      </view>
-      <view class="percent">{{ Number(value) || 0 }}%</view>
-    </view>
+      </div>
+      <div class="percent">{{ Number(value) || 0 }}%</div>
+    </div>
   </div>
 </template>
 

package/sohelp-rate/README.md

@@ -1,23 +1,35 @@
-# SohelpRate 评分组件
+# SohelpRate 评分
 
-支持两种模式：星星评分和下拉选择评分。
+基于 `el-rate` 封装的评分组件，支持星星评分和下拉选择两种模式，默认显示文字提示。
 
 ## 基础用法
 
-```html
-<!-- 星星模式 -->
-<sohelp-rate v-model="score" />
+```vue
+<template>
+  <!-- 星星评分模式（默认） -->
+  <sohelp-rate v-model="score" />
 
-<!-- 下拉模式 -->
-<sohelp-rate v-model="score" type="select" />
+  <!-- 下拉选择模式 -->
+  <sohelp-rate v-model="score" type="select" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const score = ref(3);
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | Number/String | - | 评分值 |
-| type | String | 'rate' | 显示模式：'rate' (星星) 或 'select' (下拉) |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | Number / String / Array | - | 否 | 绑定值（支持 v-model） |
+| type | String | `'rate'` | 否 | 显示模式：`'rate'` 星星评分，`'select'` 下拉选择 |
+
+> `rate` 模式下支持通过 `v-bind="$attrs"` 透传所有 `el-rate` 原生属性；`select` 模式下透传给 `sohelp-select`。
 
-## 其他
+## 事件 (Events)
 
-支持 `el-rate` 或 `sohelp-select` 的相关属性。
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `(value: Number / String)` | 评分值变化时触发 |

package/sohelp-rate/index.vue

@@ -25,7 +25,7 @@
       },
       modelValue: [Number, String, Array]
     },
-    emit: ['update:modelValue'],
+    emits: ['update:modelValue'],
     setup(props, { emit, attrs }) {
       const datasource = Array.from({ length: 5 }, (_, i) => ({
         label: '*'.repeat(i + 1),
@@ -44,6 +44,10 @@
         }
       );
 
+      watch(value, (val) => {
+        emit('update:modelValue', val);
+      });
+
       return {
         value,
         datasource

package/sohelp-relation/README.md

@@ -1,7 +1,13 @@
-# SohelpRelation 外键关联组件
+# SohelpRelation 外键关联输入框
 
-*当前版本仅为占位组件。*
+外键关联输入框组件（待实现）。
 
-## 描述
+## 基础用法
 
-预留用于处理外键关联数据的输入组件。
+```vue
+<template>
+  <sohelp-relation />
+</template>
+```
+
+> 该组件当前为占位状态，功能待实现。

package/sohelp-relation/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <div>输入框，外键关键</div>
+  <div class="sohelp-relation">
+    <!-- TODO: 待实现 - 外键关联输入框 -->
+    <el-empty description="外键关联输入框 - 待实现" />
+  </div>
 </template>
+<script setup>
+  // TODO: 待实现
+</script>
 <script>
-export default {
-  name: "SohelpRelation"
-}
+  export default { name: 'SohelpRelation' };
 </script>
-<style scoped>
-
-</style>

package/sohelp-relation-modal-select/README.md

@@ -0,0 +1,41 @@
+# SohelpRelationModalSelect 关联选择器
+
+基于 `sohelp-modal-select` 封装的关联数据选择组件，支持自定义弹窗内容区域，以多选模式选择关联数据。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-relation-modal-select
+    v-model="selectedIds"
+    valueField="id"
+    labelField="name"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const selectedIds = ref([]);
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String / Array | `''` | 否 | 选中项的值 |
+| data | Array / Object | `[]` | 否 | 关联数据 |
+| valueField | String | `'id'` | 否 | 值字段名 |
+| labelField | String | `'user_name'` | 否 | 显示字段名 |
+| multiple | Boolean | `false` | 否 | 是否多选 |
+| beforeConfirm | Function | `() => true` | 否 | 确认前回调，返回 false 阻止确认 |
+| beforeOpen | Function | `() => true` | 否 | 打开前回调，返回 false 阻止打开 |
+| selectionTemplate | String | `'${username}'` | 否 | 已选列表显示模板 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| change | - | 值变化时触发 |
+| confirm | - | 确认选择后触发 |
+| cancel | - | 取消选择时触发 |

package/sohelp-relation-modal-select/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <sohelp-modal-select
+    v-model="modalSelectValue"
+    v-model:data="data"
+    :labelField="labelField"
+    :valueField="valueField"
+    :gridProps="{
+      datasource: datasource,
+      columns: columns
+    }"
+    :selectionTemplate="selectionTemplate"
+    multiple
+    :modalProps="{
+      title: '选择用户'
+    }"
+  >
+
+  <template #default>
+    grid
+  </template>
+
+  </sohelp-modal-select>
+</template>
+
+<script>
+  export default {
+    name: 'SohelpRelationModalSelect'
+  };
+</script>
+<script setup>
+  const modalSelectValue = defineModel('modelValue', {
+    type: [String, Array],
+    default: ''
+  });
+
+  const props = defineProps({
+    data:{
+        type: [Array,Object],
+        default: () => []
+    },
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    labelField: {
+      type: String,
+      default: 'user_name'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },    
+    beforeConfirm: {
+      type: Function,
+      default: () => true
+    },
+    beforeOpen:{
+        type: Function,
+        default: () => true
+    },
+    selectionTemplate: {
+        type: String,
+        default: '${username}'
+    }    
+  });
+
+  const emits = defineEmits(['change','confirm', 'cancel']);
+
+
+</script>

package/sohelp-rich-text/README.md

@@ -1,23 +1,41 @@
 # SohelpRichText 富文本编辑器
 
-基于 TinyMCE 封装的富文本编辑器，支持暗黑模式自动切换。
+基于 TinyMCE 封装的富文本编辑器组件，支持 v-model 双向绑定、暗黑主题自动切换、内联模式等功能。
 
 ## 基础用法
 
-```html
-<sohelp-rich-text v-model="content" />
+```vue
+<template>
+  <sohelp-rich-text v-model="content" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const content = ref('<p>Hello World</p>');
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | String | - | 绑定的 HTML 内容 |
-| disabled | Boolean | false | 是否禁用（只读） |
-| inline | Boolean | false | 是否开启内联模式 |
-| init | Object | - | TinyMCE 初始化配置对象 |
-| autoTheme | Boolean | true | 是否跟随系统主题自动切换 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| id | String | 自动生成 | 否 | 编辑器唯一ID |
+| modelValue (v-model) | String | - | 否 | 编辑器内容（HTML 字符串） |
+| init | Object | - | 否 | TinyMCE 初始化配置 |
+| inline | Boolean | `false` | 否 | 是否启用内联模式 |
+| modelEvents | String | `'change input undo redo'` | 否 | 触发 v-model 更新的事件 |
+| tagName | String | `'div'` | 否 | 内联模式下的容器标签名 |
+| disabled | Boolean | `false` | 否 | 是否禁用编辑器 |
+| autoTheme | Boolean | `true` | 否 | 是否跟随框架主题切换暗黑模式 |
+| darkTheme | Boolean | `false` | 否 | 不跟随框架主题时是否使用暗黑主题 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `value: String` | 编辑器内容变化时触发 |
 
 ## 公开方法 (Expose)
 
-- `editorIns`: 获取 TinyMCE 编辑器实例。
-- `alert(option)`: 弹出提示框。
+- `editorIns` - TinyMCE 编辑器实例
+- `alert(option)` - 弹出编辑器提示框

package/sohelp-rich-text/index.vue

@@ -5,14 +5,15 @@
 </template>
 
 <script setup>
-  import { watch, onMounted, onBeforeUnmount, onActivated, onDeactivated, nextTick, useAttrs } from 'vue';
+  import { shallowRef, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated, nextTick, useAttrs } from 'vue';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
   import 'tinymce/icons/default';
   import 'tinymce/plugins/code';
   import 'tinymce/plugins/preview';
   import 'tinymce/plugins/fullscreen';
-  import 'tinymce/plugins/paste';
+  // paste 和 hr 插件在 TinyMCE v6+ 中已内置，无需单独引入
+  //import 'tinymce/plugins/paste';
   import 'tinymce/plugins/searchreplace';
   //import 'tinymce/plugins/save';
   //import 'tinymce/plugins/autosave';
@@ -24,7 +25,7 @@
   import 'tinymce/plugins/codesample';
   import 'tinymce/plugins/lists';
   import 'tinymce/plugins/advlist';
-  import 'tinymce/plugins/hr';
+  //import 'tinymce/plugins/hr';
   import 'tinymce/plugins/charmap';
   import 'tinymce/plugins/emoticons';
   import 'tinymce/plugins/anchor';
@@ -80,7 +81,7 @@
   const elementId = props.id || uuid('tiny-vue');
 
   /** 编辑器实例 */
-  let editorIns = null;
+  const editorIns = shallowRef(null);
 
   /** 是否内联模式 */
   const inlineEditor = props.init?.inline || props.inline;
@@ -92,8 +93,8 @@
 
   /** 修改内容 */
   const setContent = (value) => {
-    if (editorIns && typeof value === 'string' && value !== editorIns.getContent()) {
-      editorIns.setContent(value);
+    if (editorIns.value && typeof value === 'string' && value !== editorIns.value.getContent()) {
+      editorIns.value.setContent(value);
     }
   };
 
@@ -108,7 +109,7 @@
       readonly: props.disabled,
       inline: inlineEditor,
       setup: (editor) => {
-        editorIns = editor;
+        editorIns.value = editor;
         editor.on('init', (e) => {
           // 回显初始值
           if (props.modelValue) {
@@ -129,16 +130,16 @@
   };
 
   /** 销毁编辑器 */
-  const destory = () => {
-    if (tinymce != null && editorIns != null) {
-      tinymce.remove(editorIns);
-      editorIns = null;
+  const destroy = () => {
+    if (tinymce != null && editorIns.value != null) {
+      tinymce.remove(editorIns.value);
+      editorIns.value = null;
     }
   };
 
   /** 弹出提示框 */
   const alert = (option) => {
-    openAlert(editorIns, option);
+    openAlert(editorIns.value, option);
   };
 
   defineExpose({ editorIns, alert });
@@ -155,11 +156,11 @@
   watch(
     () => props.disabled,
     (disable) => {
-      if (editorIns !== null) {
-        if (typeof editorIns.mode?.set === 'function') {
-          editorIns.mode.set(disable ? 'readonly' : 'design');
+      if (editorIns.value !== null) {
+        if (typeof editorIns.value.mode?.set === 'function') {
+          editorIns.value.mode.set(disable ? 'readonly' : 'design');
         } else {
-          editorIns.setMode(disable ? 'readonly' : 'design');
+          editorIns.value.setMode(disable ? 'readonly' : 'design');
         }
       }
     }
@@ -168,7 +169,7 @@
   watch(
     () => props.tagName,
     () => {
-      destory();
+      destroy();
       nextTick(() => {
         render();
       });
@@ -177,7 +178,7 @@
 
   watch(darkMode, () => {
     if (props.autoTheme) {
-      destory();
+      destroy();
       nextTick(() => {
         render();
       });
@@ -189,7 +190,7 @@
   });
 
   onBeforeUnmount(() => {
-    destory();
+    destroy();
   });
 
   onActivated(() => {
@@ -197,7 +198,7 @@
   });
 
   onDeactivated(() => {
-    destory();
+    destroy();
   });
 </script>
 

package/sohelp-richtext/README.md

@@ -1,3 +1,13 @@
-# SohelpRichtext 富文本组件 (Legacy)
+# SohelpRichtext 富文本编辑器（占位）
 
-*当前版本仅为占位组件，请使用 `sohelp-rich-text`。*
+富文本编辑器冗余副本，当前为占位状态。建议使用 `sohelp-rich-text` 组件。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-richtext />
+</template>
+```
+
+> 该组件当前为占位状态，功能待实现。考虑与 `sohelp-rich-text` 合并。

package/sohelp-richtext/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <div>Richtext</div>
+  <div class="sohelp-richtext">
+    <!-- TODO: 待实现 - 富文本编辑器（注意：sohelp-rich-text 已有实现，此组件可能为冗余副本） -->
+    <el-empty description="富文本编辑器（冗余副本） - 待实现" />
+  </div>
 </template>
-
 <script setup>
-
+  // TODO: 待实现 - 考虑是否与 sohelp-rich-text 合并
+</script>
+<script>
+  export default { name: 'SohelpRichtext' };
 </script>
-<style scoped>
-
-</style>

package/sohelp-role-modal-select/README.md

@@ -0,0 +1,45 @@
+# SohelpRoleModalSelect 角色选择器
+
+基于 `sohelp-modal-select` 封装的角色选择组件，预置了角色列表接口和列配置，支持单选/多选角色。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-role-modal-select
+    v-model="selectedRoles"
+    v-model:data="selectedRoleData"
+    multiple
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const selectedRoles = ref([]);
+const selectedRoleData = ref([]);
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String / Array | `''` | 否 | 选中角色的 ID 值 |
+| data (v-model:data) | Array / Object | `[]` | 否 | 选中角色的完整数据 |
+| valueField | String | `'id'` | 否 | 值字段名 |
+| labelField | String | `'role_name'` | 否 | 显示字段名 |
+| multiple | Boolean | `true` | 否 | 是否多选 |
+| selectionTemplate | String | `'${role_name}-${role_no}'` | 否 | 已选列表的显示模板 |
+| modalProps | Object | `{}` | 否 | 传递给弹窗的属性配置 |
+| gridProps | Object | `{}` | 否 | 传递给表格的属性配置，可覆盖默认列和接口 |
+
+> 默认请求接口：`/admin/system/role/page`，默认列：角色名称 (`role_name`)、角色标识 (`role_no`)。
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `(selectedIds)` | 选中值变化时触发 |
+| confirm | `(selectedIds, data)` | 确认选择后触发 |
+| change | - | 值变化时触发 |
+| cancel | - | 取消时触发 |

package/sohelp-role-modal-select/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <sohelp-modal-select
+    v-bind="$attrs"
+    v-model="modelValue"
+    v-model:data="data"
+    :labelField="labelField"
+    :valueField="valueField"
+    :multiple="multiple"
+    :gridProps="mergedGridProps"
+    :selectionTemplate="selectionTemplate"
+    :modalProps="mergedModalProps"
+    @confirm="handleConfirm"
+  ></sohelp-modal-select>
+</template>
+
+<script>
+  export default {
+    name: 'SohelpRoleModalSelect'
+  };
+</script>
+
+<script setup>
+  import { computed } from 'vue';
+  import SohelpModalSelect from '../sohelp-modal-select/index.vue';
+
+  const defaultGridProps = {
+    url: '/admin/system/role/page',
+    autoLoad: true,
+    gridOptions: {
+      pagerConfig: {
+        enabled: false
+      },
+      columns: [
+        { field: 'role_name', title: '岗位名称', minWidth: 120 },
+        { field: 'role_no', title: '岗位标识', minWidth: 120 }
+      ]
+    }
+  };
+
+  const mergedGridProps = computed(() => {
+    const userGridOptions = props.gridProps?.gridOptions || {};
+    return {
+      url: props.gridProps?.url ?? defaultGridProps.url,
+      autoLoad: props.gridProps?.autoLoad ?? defaultGridProps.autoLoad,
+      gridOptions: {
+        ...defaultGridProps.gridOptions,
+        ...userGridOptions,
+        columns: userGridOptions.columns ?? defaultGridProps.gridOptions.columns
+      }
+    };
+  });
+
+  const mergedModalProps = computed(() => {
+    const defaultWidth = props.multiple ? '900px' : '600px';
+    return {
+      title: '选择角色',
+      ...props.modalProps,
+      width: props.modalProps?.width ?? defaultWidth
+    };
+  });
+
+  const props = defineProps({
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    labelField: {
+      type: String,
+      default: 'role_name'
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    selectionTemplate: {
+      type: String,
+      default: '${role_name}-${role_no}'
+    },
+    modalProps: {
+      type: Object,
+      default: () => ({})
+    },
+    gridProps: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const emits = defineEmits([
+    'change',
+    'confirm',
+    'cancel',
+    'update:modelValue'
+  ]);
+
+  const modelValue = defineModel('modelValue', {
+    type: [String, Array],
+    default: ''
+  });
+
+  const data = defineModel('data', {
+    type: [Array, Object],
+    default: () => []
+  });
+
+  const handleConfirm = (selections, _data) => {
+    emits('update:modelValue', selections);
+    data.value = _data;
+    emits('confirm', selections, _data);
+  };
+</script>