sohelp-eleplus 1.1.26 → 1.1.28

package/sohelp-demo-block/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <ele-card :header="title" class="sohelp-demo-block" :bodyStyle="{ padding: '20px' }">
+    <!-- 演示内容 -->
+    <div class="demo-content">
+      <slot></slot>
+    </div>
+
+    <!-- 描述 -->
+    <div class="demo-desc" v-if="description">{{ description }}</div>
+
+    <!-- 底部工具栏 -->
+    <div class="demo-toolbar">
+      <el-tooltip content="API 文档" placement="top" :show-after="300">
+        <el-icon class="toolbar-icon" :class="{ active: showApi }" @click="showApi = !showApi"><Document /></el-icon>
+      </el-tooltip>
+      <el-tooltip content="查看源码" placement="top" :show-after="300">
+        <el-icon class="toolbar-icon" :class="{ active: showCode }" @click="showCode = !showCode"><CodeIcon /></el-icon>
+      </el-tooltip>
+      <el-tooltip content="复制代码" placement="top" :show-after="300">
+        <el-icon class="toolbar-icon" @click="copyCode"><CopyDocument /></el-icon>
+      </el-tooltip>
+    </div>
+
+    <!-- API 文档区 -->
+    <el-collapse-transition>
+      <div v-show="showApi" class="demo-api-section">
+        <!-- Props -->
+        <div v-if="props?.length" class="api-block">
+          <div class="api-title">Props 属性</div>
+          <el-table :data="props" border size="small" class="api-table">
+            <el-table-column prop="name" label="属性" width="180" />
+            <el-table-column prop="type" label="类型" width="150" />
+            <el-table-column prop="default" label="默认值" width="130" />
+            <el-table-column label="必填" width="55" align="center">
+              <template #default="{ row }">
+                <el-tag v-if="row.required" type="danger" size="small">是</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+        <!-- Events -->
+        <div v-if="events?.length" class="api-block">
+          <div class="api-title">Events 事件</div>
+          <el-table :data="events" border size="small" class="api-table">
+            <el-table-column prop="name" label="事件名" width="180" />
+            <el-table-column prop="params" label="回调参数" width="250" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+        <!-- Methods -->
+        <div v-if="methods?.length" class="api-block">
+          <div class="api-title">Methods 方法</div>
+          <el-table :data="methods" border size="small" class="api-table">
+            <el-table-column prop="name" label="方法名" width="180" />
+            <el-table-column prop="params" label="参数" width="250" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+        <!-- Slots -->
+        <div v-if="slots?.length" class="api-block">
+          <div class="api-title">Slots 插槽</div>
+          <el-table :data="slots" border size="small" class="api-table">
+            <el-table-column prop="name" label="插槽名" width="180" />
+            <el-table-column prop="params" label="作用域参数" width="250" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+      </div>
+    </el-collapse-transition>
+
+    <!-- 源码区 -->
+    <el-collapse-transition>
+      <div v-show="showCode" class="demo-code-section">
+        <pre class="code-block"><code>{{ code }}</code></pre>
+      </div>
+    </el-collapse-transition>
+  </ele-card>
+</template>
+
+<script>
+  export default { name: 'SohelpDemoBlock' };
+</script>
+
+<script setup>
+  import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { Document, CopyDocument } from '@element-plus/icons-vue';
+
+  // <> 图标用 SVG 内联
+  const CodeIcon = {
+    name: 'CodeIcon',
+    render() {
+      return h('svg', {
+        viewBox: '0 0 1024 1024',
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: '1em', height: '1em', fill: 'currentColor'
+      }, [
+        h('path', { d: 'M320 256l-256 256 256 256 64-64-192-192 192-192zM704 256l256 256-256 256-64-64 192-192-192-192z' }),
+        h('path', { d: 'M585.2 174.4l59.6 16 -152 568-59.6-16z' })
+      ]);
+    }
+  };
+
+  import { h } from 'vue';
+
+  defineProps({
+    title: { type: String, default: '' },
+    description: { type: String, default: '' },
+    code: { type: String, default: '' },
+    props: { type: Array, default: () => [] },
+    events: { type: Array, default: () => [] },
+    methods: { type: Array, default: () => [] },
+    slots: { type: Array, default: () => [] }
+  });
+
+  const showCode = ref(false);
+  const showApi = ref(false);
+
+  const copyCode = () => {
+    const codeEl = document.querySelector('.sohelp-demo-block .code-block code');
+    if (codeEl?.textContent) {
+      navigator.clipboard.writeText(codeEl.textContent).then(() => {
+        ElMessage.success('代码已复制');
+      }).catch(() => {
+        ElMessage.warning('复制失败，请手动复制');
+      });
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-demo-block {
+    margin-bottom: 16px;
+
+    .demo-content {
+      padding-bottom: 12px;
+    }
+
+    .demo-desc {
+      padding: 10px 14px;
+      margin-bottom: 12px;
+      background: var(--el-color-primary-light-9);
+      border-radius: 4px;
+      font-size: 13px;
+      color: var(--el-text-color-regular);
+      line-height: 1.6;
+      border-left: 3px solid var(--el-color-primary);
+    }
+
+    .demo-toolbar {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 2px;
+      padding: 8px 0 0;
+      border-top: 1px solid var(--el-border-color-lighter);
+
+      .toolbar-icon {
+        padding: 6px;
+        font-size: 16px;
+        color: var(--el-text-color-secondary);
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.2s;
+
+        &:hover {
+          color: var(--el-color-primary);
+          background: var(--el-color-primary-light-9);
+        }
+
+        &.active {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .demo-api-section {
+      padding: 16px 0;
+      border-top: 1px dashed var(--el-border-color-lighter);
+
+      .api-block {
+        margin-bottom: 16px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .api-title {
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          margin-bottom: 8px;
+          padding-left: 8px;
+          border-left: 3px solid var(--el-color-primary);
+        }
+      }
+
+      .api-table {
+        :deep(.el-table__cell) {
+          font-size: 12px;
+          padding: 5px 0;
+        }
+      }
+    }
+
+    .demo-code-section {
+      border-top: 1px dashed var(--el-border-color-lighter);
+
+      .code-block {
+        margin: 12px 0 0;
+        padding: 16px;
+        background: #1e1e1e;
+        border-radius: 6px;
+        overflow-x: auto;
+        max-height: 400px;
+
+        code {
+          font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
+          font-size: 13px;
+          line-height: 1.6;
+          color: #d4d4d4;
+          white-space: pre;
+          tab-size: 2;
+        }
+      }
+    }
+  }
+</style>

package/sohelp-dict/README.md

@@ -1,37 +1,22 @@
-# 字典组件 (Dict)
+# SohelpDict 字典组件
 
-通用字典组件，支持从缓存中加载字典数据，并以多种形式（下拉、单选、多选、标签、文本）展示。
+通用字典组件，根据字典编码自动从缓存加载字典数据，支持下拉选择（select）、多选下拉（multipleSelect）、单选（radio）、多选框（checkbox）、标签（tag）和纯文本（text）等多种展示模式。支持字典项自定义颜色和图标。
 
-## 功能特性
-
-- **多种展示模式**：支持 Select, Radio, Checkbox, Tag, Text。
-- **自动加载**：根据 `code` 自动从字典缓存获取数据。
-- **样式定制**：支持字典项配置颜色和图标。
-
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | String/Number/Array | '' | 绑定的值。 |
-| code | String | - | 字典编码 (Required)。 |
-| type | String | 'select' | 展示类型，可选值：'select', 'radio', 'checkbox', 'tag', 'text', 'multipleSelect'。 |
-| disabled | Boolean | false | 是否禁用。 |
-| placeholder | String | - | 占位文本。 |
-| teleported | Boolean | true | Select 下拉是否插入 body。 |
-| autoFocus | Boolean | false | 是否自动获取焦点。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <!-- 下拉选择 -->
+  <!-- 下拉选择（默认模式） -->
   <sohelp-dict v-model="status" code="sys_user_status" />
 
   <!-- 单选框 -->
   <sohelp-dict v-model="gender" code="sys_user_sex" type="radio" />
 
-  <!-- 仅展示文本 (用于列表页) -->
+  <!-- 纯文本展示（用于列表页） -->
   <sohelp-dict :modelValue="status" code="sys_user_status" type="text" />
+
+  <!-- 标签展示 -->
+  <sohelp-dict :modelValue="status" code="sys_user_status" type="tag" />
 </template>
 
 <script setup>
@@ -41,3 +26,23 @@ const status = ref('');
 const gender = ref('');
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number / Array | `''` | 否 | 绑定值（v-model） |
+| code | String | - | 是 | 字典编码，用于从缓存加载对应字典数据 |
+| type | String | - | 否 | 展示类型，可选：`'select'`、`'multipleSelect'`、`'radio'`、`'checkbox'`、`'tag'`、`'text'`；默认为下拉选择 |
+| disabled | Boolean | `false` | 否 | 是否禁用 |
+| placeholder | String | - | 否 | 占位文本 |
+| teleported | Boolean | `true` | 否 | select 下拉菜单是否插入到 body 下 |
+| autoFocus | Boolean | `false` | 否 | 是否自动获取焦点（仅 select 模式生效） |
+
+> 同时支持所有 `el-select`、`el-radio-group`、`el-checkbox-group` 等对应模式的原生属性，通过 `v-bind="$attrs"` 透传。
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| change | `(value: any)` | 选中值变化时触发（radio、checkbox、select 模式） |

package/sohelp-dict/index.vue

@@ -11,9 +11,9 @@
       >
         <div class="sohelp-dict-item">
           <el-icon v-if="item.icon">
-            <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-            <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-            <span :class="icon" v-else></span>
+            <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+            <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+            <span :class="item.icon" v-else></span>
           </el-icon>
 
           {{ item.label }}</div
@@ -33,9 +33,9 @@
       >
         <div class="sohelp-dict-item">
           <el-icon v-if="item.icon">
-            <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-            <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-            <span :class="icon" v-else></span>
+            <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+            <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+            <span :class="item.icon" v-else></span>
           </el-icon>
           {{ item.label }}</div
         >
@@ -53,9 +53,9 @@
     <el-radio v-for="item in data.value" :key="item.value" :label="item.value">
       <div class="sohelp-dict-item">
         <el-icon v-if="item.icon">
-          <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-          <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-          <span :class="icon" v-else></span>
+          <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+          <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+          <span :class="item.icon" v-else></span>
         </el-icon>
         {{ item.label }}</div
       >
@@ -72,9 +72,9 @@
     <el-checkbox v-for="item in data.value" :key="item.value" :label="item.value">
       <div class="sohelp-dict-item">
         <el-icon v-if="item.icon">
-          <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-          <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-          <span :class="icon" v-else></span>
+          <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+          <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+          <span :class="item.icon" v-else></span>
         </el-icon>
         {{ item.label }}</div
       >
@@ -101,9 +101,9 @@
         <el-tag v-for="item in valueData" :key="item" :style="getStyle(item)">
           <div class="sohelp-dict-item">
             <el-icon v-if="item.icon">
-              <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-              <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-              <span :class="icon" v-else></span>
+              <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+              <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+              <span :class="item.icon" v-else></span>
             </el-icon>
 
             {{ item.label }}</div
@@ -142,7 +142,7 @@
     type: [String, Number, Array],
     default: ''
   });
-  const emit = defineEmits('change');
+  const emit = defineEmits(['change']);
   const props = defineProps({
     /** 字典类型 */
     code: {
@@ -235,7 +235,7 @@
     const dictValueSet = new Set(dictData.map((d) => d.value));
     const matchedItems = dictData.filter((d) => values.includes(d.value));
     const customItems = values.filter((v) => !dictValueSet.has(v)).map((v) => ({ value: v, label: v }));
-    return [...matchedItems, ...customItems].filter((item) => item.id);
+    return [...matchedItems, ...customItems];
   });
 </script>
 

package/sohelp-drawer/README.md

@@ -1,34 +1,13 @@
-# 抽屉组件 (Drawer)
+# SohelpDrawer 抽屉
 
-对 `ele-drawer` 的简单封装，提供便捷的显示/隐藏控制。
+基于 `ele-drawer` 封装的抽屉组件，提供内容区和底部插槽的统一布局。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | Boolean | false | 控制抽屉显示隐藏 (v-model)。 |
-| ... | - | - | 支持 `ele-drawer` 的其他属性。 |
-
-## 方法 (Exposed Methods)
-
-| 方法名 | 说明 |
-| :--- | :--- |
-| show | 显示抽屉。 |
-| close | 关闭抽屉。 |
-
-## 插槽 (Slots)
-
-| 插槽名 | 说明 |
-| :--- | :--- |
-| default | 抽屉主体内容。 |
-| footer | 抽屉底部区域。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-drawer v-model="visible" title="详情">
-    <div>内容区域</div>
+  <sohelp-drawer v-model="visible" title="抽屉标题" size="40%">
+    <p>抽屉内容</p>
     <template #footer>
       <el-button @click="visible = false">关闭</el-button>
     </template>
@@ -40,3 +19,26 @@ import { ref } from 'vue';
 const visible = ref(false);
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | Boolean | `false` | 否 | 控制抽屉显示/隐藏 |
+
+> 支持透传 `ele-drawer` 的所有属性，如 `title`、`size`、`direction` 等。
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 抽屉主内容区域 |
+| footer | 底部操作区域 |
+
+## 公开方法 (Expose)
+
+| 方法名 | 说明 |
+| --- | --- |
+| show() | 打开抽屉 |
+| close() | 关闭抽屉 |
+| getValue() | 获取当前抽屉的显示状态 |

package/sohelp-drop-card/README.md

@@ -1,37 +1,16 @@
-# 下拉卡片 (Drop Card)
+# SohelpDropCard 下拉卡片
 
-点击按钮后展示下拉卡片的组件，基于 Tooltip 实现，适合用于复杂内容的下拉展示。
+基于 `ele-tooltip` 封装的下拉卡片组件，点击按钮后弹出包含自定义内容的卡片面板，适用于筛选、操作等场景。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| title | String | - | 按钮显示的标题。 |
-| icon | Object/String | - | 按钮图标。 |
-| placement | String | 'bottom-end' | 弹出位置。 |
-| trigger | String | 'click' | 触发方式。 |
-| effect | String | 'light' | Tooltip 主题。 |
-
-## 方法 (Exposed Methods)
-
-| 方法名 | 说明 |
-| :--- | :--- |
-| close | 关闭下拉卡片。 |
-
-## 插槽 (Slots)
-
-| 插槽名 | 说明 |
-| :--- | :--- |
-| default | 卡片主体内容。 |
-| footer | 卡片底部操作区。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-drop-card title="更多筛选" icon="Filter">
+  <sohelp-drop-card title="更多筛选" icon="Filter" ref="dropCardRef">
     <el-form>
-      <el-form-item label="名称"><el-input /></el-form-item>
+      <el-form-item label="名称">
+        <el-input />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="primary" size="small">查询</el-button>
@@ -39,3 +18,25 @@
   </sohelp-drop-card>
 </template>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| title | String | - | 否 | 触发按钮显示的文本 |
+| icon | Object / String | '' | 否 | 触发按钮的图标组件或图标名称 |
+| placement | String | 'bottom-end' | 否 | 弹出卡片的位置，窗口高度不足时自动切换为 'auto' |
+| trigger | String | 'click' | 否 | 触发方式 |
+| effect | String | 'light' | 否 | Tooltip 主题风格 |
+| modelValue | Boolean | - | 否 | 控制显示/隐藏 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 卡片主体内容 |
+| footer | 卡片底部操作区，右对齐显示 |
+
+## 公开方法 (Expose)
+
+- `close()` - 关闭下拉卡片

package/sohelp-drop-card/index.vue

@@ -26,7 +26,6 @@
   import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
   const props = defineProps({
     title: String,
-    icon: Object,
     placement: {
       default: 'bottom-end'
     },

package/sohelp-dyn-select/README.md

@@ -1,23 +1,12 @@
-# 动态下拉选择 (Dynamic Select)
+# SohelpDynSelect 动态下拉选择器
 
-支持从 URL、Promise 或函数动态加载数据源的下拉选择组件。
+基于 `sohelp-select` 封装的动态下拉选择组件，支持通过 URL 远程加载数据，也兼容数组、函数、Promise 数据源，并提供只读文本展示模式。
 
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | String/Number/Array | - | 绑定的值 (v-model)。 |
-| datasource | Array/Function/Promise | - | 数据源 (Required)。 |
-| url | String | - | 数据加载 URL (若 datasource 为空时使用)。 |
-| labelField | String | - | 显示字段名。 |
-| valueField | String | - | 值字段名。 |
-| readonly | Boolean | false | 是否只读 (只读模式下显示文本)。 |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <!-- 从 URL 加载 -->
+  <!-- 通过 URL 远程加载 -->
   <sohelp-dyn-select
     v-model="userId"
     url="/api/users"
@@ -25,7 +14,7 @@
     valueField="id"
   />
 
-  <!-- 从静态数组加载 -->
+  <!-- 通过静态数组 -->
   <sohelp-dyn-select
     v-model="type"
     :datasource="[{ label: 'A', value: 1 }, { label: 'B', value: 2 }]"
@@ -33,4 +22,30 @@
     valueField="value"
   />
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+const userId = ref('');
+const type = ref('');
+</script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number / Array / Object | - | 否 | 绑定值（v-model） |
+| datasource | Array / Function / Promise | `undefined` | 否 | 数据源，优先级高于 url |
+| url | String | `''` | 否 | 远程数据接口地址，当 datasource 未提供时使用 |
+| labelField | String | - | 否 | 选项显示文本对应的字段名 |
+| valueField | String | - | 否 | 选项值对应的字段名 |
+| readonly | Boolean | `false` | 否 | 是否只读模式，只读时仅展示文本 |
+
+> 同时支持所有 `sohelp-select` 和 `el-select` 原生属性，通过 `v-bind="$attrs"` 透传。
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `(value: any)` | 选中值变化时触发 |