chain-saasui 1.0.12-alpha.5 → 1.0.12

package/COMPONENTS.md

@@ -47,21 +47,43 @@
 
 ### `<s-table-buttons>`
 
-行内操作按钮组，**表格操作列强制使用**。超出 `maxLength` 自动收起到下拉更多。
+行内操作按钮组，**表格操作列强制使用**（禁止手写 `el-button` 列表）。默认把操作收进「操作 ⏷」下拉，`mode="flat"` 则平铺展示。点击 emit `@action(action, row)`，页面在一个 `handleAction` 里按 `action` 分发。
+
+| 参数       | 类型      | 默认值                    | 说明                                                          |
+| -------- | ------- | ---------------------- | ----------------------------------------------------------- |
+| list     | Array   | []                     | 按钮配置数组，见下方字段                                                |
+| row      | Object  | {}                     | 当前行，透传给 `show/tip/disabled` 等函数，并随 `@action` 带出（含 `row._index`） |
+| index    | Number  | 0                      | 行下标，点击时写入 `row._index`                                       |
+| mode     | String  | 'dropdown'             | `dropdown`=收进「操作」下拉；`flat`=平铺展示所有按钮                         |
+| text     | String  | $t('TableData.action') | `mode='dropdown'` 时下拉触发按钮的文案                                |
+| showIcon | Boolean | true                   | 下拉触发按钮是否带 ⏷ 箭头                                              |
+| btnProps | Object  | { type: 'text' }       | 触发按钮 / 各按钮的默认属性                                             |
+
+**`list` 项字段：**
+
+| 字段      | 类型                          | 说明                                                             |
+| ------- | --------------------------- | -------------------------------------------------------------- |
+| label   | String                      | 按钮文案                                                          |
+| action  | String                      | 点击 emit 的命令（`@action` 第一个参数），页面按它分发                          |
+| show    | Boolean \| (row) => boolean | 是否显示，省略默认显示；函数入参当前行                                          |
+| tip     | String \| (row) => string   | 悬浮提示内容（`dropdown` 模式）；函数入参当前行                                |
+| showTip | Boolean \| (row) => boolean | 是否显示 tip（配合 `tip`）                                            |
+| attrs   | Object                      | 透传到按钮/下拉项（`type`/`icon` 等）；`attrs.disabled` 支持 Boolean 或 `(row) => boolean` |
 
-| 参数        | 类型     | 默认值  | 说明            |
-| --------- | ------ | ---- | ------------- |
-| list      | Array  | []   | 按钮配置数组，见下方字段  |
-| row       | Object | -    | 当前行，透传到 onClick |
-| maxLength | Number | 2    | 最多显示几个，其余进入更多 |
-| moreType  | String | text | `text` / `more`（更多按钮样式） |
-
-`list` 项：`{ label, onClick, show?, tip?, attrs? }`，`show` 支持布尔或函数。
+```js
+// 配置示例：show / attrs.disabled 支持函数入参 row，按权限/行状态动态控制
+actionList: [
+    { label: this.$t('buttonGroup.edit'), action: 'edit', show: () => this.checkPermi(['xxx:edit']) },
+    { label: this.$t('buttonGroup.del'), action: 'del', show: row => row.editable, attrs: { disabled: row => row.locked } },
+]
+```
 
 ```vue
-<s-table-buttons :list="actionList" :row="row" @action="handleAction" />
+<s-table-buttons :list="actionList" :row="row" :index="$index" @action="handleAction" />
 ```
 
+`handleAction(action, row)` 里 `switch (action)` 分发到各方法。
+
 ---
 
 ## 二、分页 / 布局 / 容器
@@ -120,7 +142,50 @@
 
 ### `<s-page-button>`
 
-页面级按钮区容器，用于 `s-pagetable` 顶部操作栏排布。
+页面级按钮区**布局容器**（底层）：`gap`(默认 8) / `direction`(`horizontal`\|`vertical`) / `align`(默认 center) / `wrap`。只管间距对齐，内容全走插槽。一般不直接用，优先用下面的 `s-page-buttons`。
+
+### `<s-page-buttons>`
+
+列表页操作栏的 **JSON 配置版**（内部包了 `s-page-button` + `s-space`）：左侧主操作 `buttons`、右侧次操作 `rightButtons`。权限写进 `show`；上传/徽标等复杂按钮用插槽兜底。
+
+| 参数           | 类型    | 默认值 | 说明                                             |
+| ------------ | ----- | --- | ---------------------------------------------- |
+| buttons      | Array | []  | 左侧主操作，渲染 `el-button`；见下方 item 字段                |
+| rightButtons | Array | []  | 右侧次操作，渲染 `s-button-text`（有 `path` 则渲染成跳转 link） |
+
+**item 字段：**`{ label, click, show, icon, type, disabled, loading, id, path, children }`
+
+| 字段       | 类型                         | 说明                                                            |
+| -------- | -------------------------- | ------------------------------------------------------------- |
+| label    | String                     | 按钮文案                                                          |
+| click    | Function                   | 点击回调（`() => vm.xxx()`）                                        |
+| show     | Boolean \| () => boolean   | 是否显示，缺省显示；**权限写这里**：`show: () => vm.checkPermi(['xxx:add'])` |
+| icon     | String                     | 图标 class                                                      |
+| type     | String                     | `el-button` 的 type                                            |
+| disabled | Boolean                    | 禁用                                                            |
+| loading  | Boolean                    | 加载态（仅左侧 `buttons`）                                            |
+| id       | String                     | dom id（埋点等）                                                   |
+| path     | String                     | 仅 `rightButtons`：跳转路由，渲染成 link                                |
+| children | Array                      | 传了则该项渲染成**下拉**，children 项：`{ label, click, disabled, show }`；可见子项为空（空数组或全被 `show` 过滤）则整项隐藏 |
+
+**插槽：** 默认插槽（替代 `buttons`，放上传/徽标等复杂左侧按钮）、`#right`（追加在 `rightButtons` 之后）。传了插槽就用插槽。
+
+```js
+// 配置示例：show 收口权限，children 渲染下拉
+buttons: [
+    { label: this.$t('buttonGroup.add'), type: 'primary', icon: 'smart-add', show: () => this.checkPermi(['xxx:add']), click: () => this.handleAdd() },
+    { label: this.$t('buttonGroup.import'), show: () => this.checkPermi(['xxx:import']), children: [
+        { label: this.$t('saasmenu.xxx'), click: () => this.handleImport() },
+    ] },
+]
+```
+
+```vue
+<s-page-buttons :buttons="buttons" :right-buttons="rightButtons">
+    <!-- 复杂左侧按钮（上传等）用默认插槽；右侧追加用 #right -->
+    <template #right><!-- 自定义右侧内容 --></template>
+</s-page-buttons>
+```
 
 ### `<s-card>`
 

package/components/css/form.scss

@@ -23,6 +23,45 @@
     width: 100%;
 }
 
+// input-select 可输入可选择
+.el-input-group__prepend {
+    .saas-input-select {
+        .el-input__inner {
+            border-top: none;
+            border-bottom: none;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}
+.saas-input-select {
+    width: 100%;
+
+    .saas-input-select-dropdown {
+        display: block;
+        width: 100%;
+    }
+
+    .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+    }
+}
+
+// 下拉菜单挂载在 body 上，非 scoped
+.saas-input-select-menu {
+    max-height: 274px;
+    overflow-y: auto;
+
+    .saas-input-select-empty {
+        padding: 10px 0;
+        margin: 0;
+        text-align: center;
+        color: #909399;
+        font-size: 14px;
+    }
+}
+
 // 文本
 .saas-text-mode {
     display: inline;
@@ -149,10 +188,19 @@
     }
 }
 
-.saas-radio-group {
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: 8px;
+.saas-radio {
+    &.saas-radio-vertical {
+        .el-radio-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+    .saas-radio-group {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 8px;
+    }
 }
 
 // SDatePicker 弹框(挂在 body，作用域 class 由组件 popperClass 注入)。
@@ -164,4 +212,12 @@
         padding: 4px 4px;
         padding-left: 12px;
     }
+    // 佛历年份表：隐藏公历原文本（保留供 element 取值），伪元素显示佛历年
+    .el-year-table td .cell.be-cell {
+        font-size: 0;
+        &::after {
+            content: attr(data-be);
+            font-size: 14px;
+        }
+    }
 }

package/components/css/group.scss

@@ -1,33 +1,22 @@
 .saas-group {
     display: flex;
+    align-items: stretch; /* 各组等高：把行高拉到最高一组 */
     overflow-x: auto;
     min-height: 50px;
     padding-bottom: 4px;
     div {
         box-sizing: border-box;
     }
-
-    &::-webkit-scrollbar {
-        width: 3px;
-        height: 4px;
-        background-color: #fff;
-        cursor: pointer;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: rgba(144, 147, 153, 0.2);
-
-        &:hover {
-            background: rgba(144, 147, 153, 0.5);
-        }
-    }
-    /* 修改滚动条滑道的颜色 */
-    &::-webkit-scrollbar-track {
-        background-color: #fff; /* 设置滑道背景颜色 */
+    /* 每组外层 wrapper（v-for 的裸 div）：改列布局，好让内部 sort-group 撑满被拉伸的高度 */
+    > div {
+        display: flex;
+        flex-direction: column;
     }
+    /* 细滚动条外观由通用类 .saas-scroll 提供（配合 v-thin-scroll 现出），此处只管布局 */
 }
 .saas-sort-group {
     display: flex;
+    flex: 1; /* 填满 wrapper（标题下方）剩余高度，其内卡片再随之 stretch 等高 */
     border-radius: 6px 6px 6px 6px;
     margin-right: 8px;
     background: #f7f9fb;

package/components/css/index.scss

@@ -1,4 +1,5 @@
 @import './common.scss';
+@import './scroll.scss';
 @import './dialog.scss';
 @import './detail.scss';
 @import './unit.scss';

package/components/css/itemlist.scss

@@ -25,12 +25,14 @@
     margin-bottom: 4px;
     cursor: pointer;
 
+    // 悬浮只变绿字；选中浅绿底 + 绿字
     &:hover {
-        background-color: var(--saas-gray-50);
+        color: var(--saas-success);
     }
 
     &.active {
-        background-color: var(--saas-gray-50);
+        background-color: var(--saas-success-50);
+        color: var(--saas-success);
     }
 }
 
@@ -42,6 +44,7 @@
 
         &:hover {
             background-color: transparent;
+            color: inherit;
         }
     }
 }

package/components/css/pagetable.scss

@@ -1,3 +1,11 @@
+.saas-page {
+    background: #fff;
+    height: calc(100% - 8px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 8px;
+    position: relative;
+}
 .saas-page-table {
     background: #fff;
     height: calc(100% - 8px);

package/components/css/scroll.scss

@@ -0,0 +1,25 @@
+/* 通用细滚动条：横竖通用，平时隐藏，hover/滚动时现出（轨道恒占 6px，无布局位移）。
+   现出靠指令 v-thin-scroll 切 .is-scroll-active（类切换强制重绘，稳）——
+   不用容器 :hover 伪类：子内容铺满时鼠标压在子元素上、容器 :hover 虽真但滚动条不重绘会漏显。
+   ⚠️ 要 hover 显隐必须同时：class 加 saas-scroll + 指令加 v-thin-scroll；只加 class 平时全隐。
+   只管滚动条外观；各处自行设 overflow-x/y 和 padding。 */
+.saas-scroll {
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+    /* 默认：thumb 有真颜色，但被 3px 透明边 + content-box 裁剪把可见部分收成 0 → 隐藏 */
+    &::-webkit-scrollbar-thumb {
+        background: var(--saas-gray-200);
+        background-clip: content-box;
+        border: 3px solid transparent;
+        border-radius: 6px;
+    }
+    /* v-thin-scroll 在 hover/滚动时加这个类 → 去掉透明边，thumb 现出 */
+    &.is-scroll-active::-webkit-scrollbar-thumb {
+        border-width: 0;
+    }
+    &.is-scroll-active::-webkit-scrollbar-thumb:hover {
+        background-color: var(--saas-gray-300);
+    }
+}

package/components/css/stepsNew.scss

@@ -3,12 +3,15 @@
     display: inline-flex;
     align-items: center;
     font-size: 14px;
+    // 不超过容器宽度：放不下时步骤项按标签收缩（标签省略 + tooltip），图标与连接线不缩
+    max-width: 100%;
 
     .s-steps-new-item {
         display: flex;
         align-items: center;
         gap: 8px;
-        flex-shrink: 0;
+        flex-shrink: 1;
+        min-width: 0;
 
         &__icon {
             width: 24px;
@@ -27,6 +30,9 @@
         &__label {
             color: #7c808a;
             white-space: nowrap;
+            // STooltipWrap 溢出省略需要可收缩的宿主
+            min-width: 0;
+            overflow: hidden;
         }
 
         &--active {

package/components/css/tooltipWrap.scss

@@ -1,15 +1,15 @@
 .saas-tooltip-wrap {
 }
 .saas-tooltip-wrap__content {
-    display: inline;
+    /* 必须块级：inline 下 overflow/text-overflow 不生效、clientWidth 为 0，会导致省略号不出/溢出检测失效 */
+    display: block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    word-break: break-word;
-    overflow-wrap: break-word;
+    word-break: normal;
 }
 .saas-tooltip-wrap__content-more {
-    word-break: break-word;
+    word-break: normal;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/components/src/SForm/SDatePicker/index.vue

@@ -72,6 +72,11 @@ export default {
             type: Object,
             default: null,
         },
+        isShortcuts: {
+            //是否需要快捷选项
+            type: Boolean,
+            default: true,
+        },
     },
     computed: {
         // 是否显示佛历（泰语）
@@ -101,7 +106,7 @@ export default {
         },
         dateAttrs() {
             const pickerOptions = this.attrs.pickerOptions || {};
-            if (!pickerOptions.disabledDate && this.type.indexOf('range') > 0 && !pickerOptions.shortcuts) {
+            if (!pickerOptions.disabledDate && this.type.indexOf('range') > 0 && !pickerOptions.shortcuts && this.isShortcuts) {
                 pickerOptions.shortcuts = this.buildShortcuts();
             }
             return {
@@ -149,17 +154,40 @@ export default {
         patchPanel() {
             const root = this.$refs.picker && this.$refs.picker.picker && this.$refs.picker.picker.$el;
             if (!root) return;
-            const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+            const isRange = this.type.indexOf('range') > -1;
+            // 年份表：element 靠 cell 的 textContent 取值。直接改文本会让选中值也 +543，
+            // 所以保留公历文本供取值，用伪元素显示佛历（见 form.scss .be-cell）。
+            root.querySelectorAll('.el-year-table td .cell').forEach(cell => {
+                const raw = cell.textContent.trim();
+                if (/^\d{4}$/.test(raw)) {
+                    cell.dataset.be = offsetYearStr(raw);
+                    cell.classList.add('be-cell');
+                }
+            });
+            // 跳过年份表内的文本节点，避免污染其取值来源
+            const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+                acceptNode: n => (n.parentElement && n.parentElement.closest('.el-year-table') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+            });
             let node;
             while ((node = walker.nextNode())) {
                 let next = offsetYearStr(node.nodeValue);
-                // element-ui 把表头拼成 "2569 ปี กรกฎาคม"（年+"ปี"+月，写死一个字符串，locale 改不了顺序）。
+                // 区间面板表头是拼好的单节点 "2569 ปี กรกฎาคม"（年+"ปี"+月，写死一个字符串）。
                 // 泰语里 "2569 ปี" 读作"2569 年（数量）"，且应月在前 —— 重排成 "กรกฎาคม 2569"，并去掉误导的 "ปี"。
-                next = next
-                    .replace(/^(\d{4})\s*ปี\s+([฀-๿][฀-๿.]*)\s*$/, '$2 $1') // 表头：月 年（月可含缩写点 ก.ค.）
-                    .replace(/\s*ปี/g, ''); // 其余（单选年份格、十年视图）去掉 "ปี"
+                if (isRange) {
+                    next = next.replace(/^(\d{4})\s*ปี\s+([฀-๿][฀-๿.]*)\s*$/, '$2 $1'); // 区间表头：月 年（月可含缩写点 ก.ค.）
+                }
+                next = next.replace(/\s*ปี/g, ''); // 去掉误导的 "ปี"（单选年份格、十年视图等）
                 if (next !== node.nodeValue) node.nodeValue = next;
             }
+            // 单选面板表头是「年 span + 月 span」两个独立节点，文本改不了顺序，把「月」DOM 移到「年」前面。
+            // 幂等：仅当第 1 个 label 含 4 位年、第 2 个不含数字(月名)时交换；交换后条件不再成立。
+            if (!isRange) {
+                const header = root.querySelector('.el-date-picker__header');
+                const labels = header ? header.querySelectorAll('.el-date-picker__header-label') : [];
+                if (labels.length === 2 && /\d{4}/.test(labels[0].textContent) && !/\d/.test(labels[1].textContent)) {
+                    header.insertBefore(labels[1], labels[0]);
+                }
+            }
         },
         onPickerFocus() {
             // 父组件绑定的 focus 由 v-on="onEvents" 自行触发；这里只给面板挂 observer（懒建一次）

package/components/src/SForm/SInputSelect/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="saas-input-select" :class="{ 'saas-text-mode': from === 'text' }">
+        <!-- text 展示模式 -->
+        <span v-if="from === 'text'" class="saas-input-text">
+            <STooltipWrap :text="getTextValue" />
+        </span>
+
+        <!-- 可输入 + 可选择模式 -->
+        <el-dropdown
+            v-else
+            ref="dropdown"
+            class="saas-input-select-dropdown"
+            trigger="click"
+            placement="bottom-start"
+            :disabled="disabled"
+            @command="handleSelect"
+            @visible-change="handleVisibleChange">
+            <el-input v-model="newValue" v-bind="attrs" v-on="onEvents" autocomplete="new-password" @keyup.native="forwardKeyup">
+                <template v-if="$slots.prepend" slot="prepend">
+                    <slot name="prepend"></slot>
+                </template>
+            </el-input>
+            <el-dropdown-menu slot="dropdown" class="saas-input-select-menu" :style="menuStyle">
+                <template v-if="optionsList.length">
+                    <el-dropdown-item v-for="item in optionsList" :key="item.value" :command="item" :disabled="item.disabled">
+                        {{ item.label }}
+                    </el-dropdown-item>
+                </template>
+                <li v-else class="saas-input-select-empty">
+                    <slot name="empty">{{ emptyText }}</slot>
+                </li>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+
+<script>
+import { Input } from 'element-ui';
+import { isEmpty, omit, formatIfJson } from 'chain-lodash';
+import attrsMixin from '../mixins/attrsMixin';
+export default {
+    name: 'SInputSelect',
+    mixins: [attrsMixin],
+    props: {
+        ...omit(Input.props, ['value', 'clearable']),
+        value: {
+            type: [String, Number],
+            default: '',
+        },
+        mode: {
+            type: String, // FORM | SEARCH
+            default: 'FORM',
+        },
+        clearable: {
+            type: Boolean,
+            default: true,
+        },
+        from: {
+            type: String, // 'input' | 'text'
+            default: 'input',
+        },
+        placeholder: {
+            type: String,
+            default() {
+                return this.$t('InputPlaceholder.pleasemsg');
+            },
+        },
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        props: {
+            type: Object,
+            default() {
+                return {
+                    label: 'label',
+                    value: 'value',
+                };
+            },
+        },
+        emptyText: {
+            type: String,
+            default() {
+                return this.$t('selectGroup.noData');
+            },
+        },
+    },
+    data() {
+        return {
+            menuWidth: 0,
+        };
+    },
+    computed: {
+        defaultAttrs() {
+            return {
+                maxlength: 120,
+            };
+        },
+        menuStyle() {
+            // 弹出框宽度与输入框保持一致
+            return this.menuWidth ? { width: `${this.menuWidth}px` } : {};
+        },
+        optionsList() {
+            const valueKey = (this.props && this.props.value) || 'value';
+            const labelKey = (this.props && this.props.label) || 'label';
+            return this.options
+                .filter(item => item && item.show !== false)
+                .map(item => {
+                    const value = item[valueKey];
+                    return {
+                        ...item,
+                        value: !isEmpty(value) ? String(value) : '',
+                        label: formatIfJson(item[labelKey]),
+                    };
+                });
+        },
+        getTextValue() {
+            const matched = this.optionsList.find(f => f.value === this.newValue);
+            return (matched && matched.label) || this.newValue || '-';
+        },
+    },
+    methods: {
+        handleSelect(item) {
+            this.newValue = item.value;
+            this.$emit('select', item);
+            this.$emit('change', item.value, { options: this.optionsList });
+        },
+        handleVisibleChange(visible) {
+            // 打开时同步触发器（输入框）宽度到弹出框
+            if (visible && this.$refs.dropdown) {
+                this.menuWidth = this.$refs.dropdown.$el.getBoundingClientRect().width;
+            }
+        },
+        forwardKeyup(e) {
+            this.$emit('keyup', e);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/src/SForm/SRadio/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="saas-radiobox" :class="[{ 'saas-text-mode': from === 'text' }, `saas-radio-${direction}`]">
+    <div class="saas-radio" :class="[{ 'saas-text-mode': from === 'text' }, `saas-radio-${direction}`]">
         <span v-if="from === 'text'" class="saas-input-text">
             <STooltipWrap :text="textValue" />
         </span>

package/components/src/SForm/index.js

@@ -9,3 +9,4 @@ export { default as SRadioGroup } from './SRadio/index';
 export { default as SCheckboxGroup } from './SCheckbox/index';
 export { default as FieldGroup } from './FieldGroup/index';
 export { default as SMaskInput } from './SMaskInput/index';
+export { default as SInputSelect } from './SInputSelect/index';

package/components/src/SGroup/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="saas-group">
+    <div class="saas-group saas-scroll" v-thin-scroll>
         <div v-for="(group, index) in list" :key="index">
             <div class="saas-group-title" v-if="group.label && showGroupTitle">{{ group.label }}</div>
             <div class="saas-sort-group">

package/components/src/SInputDialog/InputDialog.vue

@@ -11,7 +11,8 @@
                     :rows="rows"
                     :placeholder="placeholder"
                     :maxlength="maxlength"
-                    :autosize="autosize" />
+                    :autosize="autosize"
+                    :resize="resize" />
             </el-form-item>
         </el-form>
     </SDialog>
@@ -36,6 +37,8 @@ export default {
             rows: 5,
             maxlength: 500,
             autosize: false,
+            // textarea 缩放手柄（el-input resize：none/both/horizontal/vertical），缺省浏览器默认
+            resize: undefined,
             formData: {
                 value: '',
             },
@@ -53,7 +56,9 @@ export default {
             this.width = options.width || '500px';
             this.rows = options.rows || 5;
             this.maxlength = options.maxlength || 500;
-            this.autosize = options.autosize || { minRows: 5, maxRows: 10 };
+            // ?? 保留显式传入的 false（固定 rows 高度）
+            this.autosize = options.autosize ?? { minRows: 5, maxRows: 10 };
+            this.resize = options.resize;
             this.formData.value = options.defaultValue || '';
 
             // 设置校验规则