chain-saasui 1.0.10-alpha.2 → 1.0.10-alpha.3

package/components/css/button.scss

@@ -22,3 +22,12 @@
     padding-right: 8px;
     padding-left: 8px;
 }
+
+.saas-button-border__primary {
+    border-color: var(--saas-success-600);
+    color: var(--saas-success-600);
+}
+
+.saas-button-border__primary:hover {
+    background-color: var(--saas-success-50);
+}

package/components/css/index.scss

@@ -13,3 +13,5 @@
 @import './button.scss';
 @import './space.scss';
 @import './steps.scss';
+@import './sPageTabs.scss';
+@import './segmented.scss';

package/components/css/pagetable.scss

@@ -43,6 +43,9 @@
     border-radius: 0;
     border-top: 1px solid #dbdee7;
 }
+.saas-page-table--hasButton .saas-page-content__box {
+    overflow-y: auto;
+}
 
 .saas-page-table__sub {
     margin-top: 8px;
@@ -89,6 +92,9 @@
     flex: 1;
     min-height: 300px;
 }
+.saas-page-content__box {
+    height: 100%;
+}
 .saas-page-table__footer {
     flex-shrink: 0;
 }

package/components/css/sPageTabs.scss

@@ -0,0 +1,143 @@
+.saas-stabs {
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #E4E6ED;
+    position: relative; /* 为指示线提供定位上下文 */
+  padding-bottom: 8px;
+}
+
+.saas-stabs--no-border {
+    border-bottom: none;
+}
+
+.saas-stabs-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+// 滚动容器
+.saas-stabs-scroll-container {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.saas-stabs-nav {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  position: relative;
+  min-width: 100%;
+  
+  // 隐藏滚动条
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
+// 滑动按钮
+.saas-stabs-scroll-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #fff;
+  cursor: pointer;
+  color: #666;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  z-index: 2;
+  
+  &:hover {
+    color: var(--saas-success);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+  
+  &--left {
+    margin-right: 8px;
+  }
+  
+  &--right {
+    margin-left: 8px;
+  }
+}
+
+.saas-stabs-extra {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  flex-shrink: 0;
+}
+
+.stabs-nav-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--saas-gray-600);
+  font-size: 14px;
+  transition: all 0.3s ease;
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.stabs-nav-item:hover {
+    color: var(--saas-success);
+}
+
+.stabs-nav-item__active {
+    color: var(--saas-success);
+    font-weight: 600;
+}
+
+.stabs-nav-item__active:hover {
+    background-color: transparent;
+}
+
+.stabs-nav-item__disabled {
+    color: var(--saas-gray-400);
+    cursor: not-allowed;
+}
+
+.stabs-nav-item__disabled:hover {
+    color: var(--saas-gray-400);
+    background-color: transparent;
+}
+
+.stabs-nav-item-text {
+    height: 22px;
+}
+/* 滑动指示线 */
+.stabs-nav-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: var(--saas-success);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 1px;
+    z-index: 1;
+    pointer-events: none; /* 确保不影响点击事件 */
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .stabs-nav-item {
+    padding: 10px 0;
+    font-size: 13px;
+  }
+}

package/components/css/segmented.scss

@@ -0,0 +1,71 @@
+.saas-segmented {
+    display: inline-flex;
+    position: relative;
+    padding: 1px;
+    border-radius: 6px 6px 6px 6px;
+    border: 1px solid var(--saas-gray-border);
+    background-color: #ffffff;
+    width: fit-content;
+}
+
+.saas-segmented-slider {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    height: calc(100% - 2px);
+    background-color: var(--saas-success-100);
+    border-radius: 4px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1;
+}
+
+.saas-segmented-item {
+    position: relative;
+    padding: 6px 8px;
+    line-height: 1;
+    cursor: pointer;
+    z-index: 2;
+    transition: color 0.3s ease;
+    font-size: 14px;
+    color: var(--saas-gray-500);
+    white-space: nowrap;
+}
+
+/* 图标样式 */
+.saas-segmented-item__icon {
+    display: inline-block;
+    line-height: 1;
+}
+
+.saas-segmented-item__text {
+    display: inline-block;
+    line-height: 1;
+}
+
+
+.saas-segmented-item__active {
+    color: var(--saas-success);
+    font-weight: 500;
+}
+
+/* 带图标的项目样式 */
+.saas-segmented-item__with-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+/* 只显示图标的项目样式 */
+.saas-segmented-item__icon-only {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+}
+
+/* 图标和文字的垂直对齐 */
+.saas-segmented-item__with-icon .saas-segmented-item__icon,
+.saas-segmented-item__with-icon .saas-segmented-item__text {
+    vertical-align: middle;
+}

package/components/src/SButton/Button/index.vue

@@ -1,6 +1,6 @@
 <!-- TextElButton.vue -->
 <template>
-    <el-button :class="['saas-button', getButtonType]" v-bind="$attrs" v-on="filterListeners" @click="handleClick" :type="buttonTypeComputed">
+    <el-button :class="['saas-button', getButtonType, themeClass]" v-bind="$attrs" v-on="filterListeners" @click="handleClick" :type="buttonTypeComputed">
         <slot />
     </el-button>
 </template>
@@ -14,11 +14,18 @@ export default {
             type: String,
             default: 'default',
         },
+        border: {
+            type: String,
+            default: '',
+        },
     },
     computed: {
         buttonTypeComputed() {
             return this.type === 'icon' ? 'default' : this.type;
         },
+        themeClass() {
+            if (this.border) return `saas-button-border__${this.border}`;
+        },
         getButtonType() {
             return this.type ? `saas-button__${this.type}` : '';
         },

package/components/src/SIcon/Icon/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <span :class="['saas-icon', icon]" :style="iconStyle"></span>
+</template>
+
+<script>
+export default {
+    name: 'SIcon',
+    props: {
+        icon: { type: String, required: true }, // 传入icon类名，比如 "el-icon-edit"
+        size: { type: [Number, String], default: 16 }, // 图标大小，默认16px
+    },
+    computed: {
+        iconStyle() {
+            return {
+                fontSize: typeof this.size === 'number' ? this.size + 'px' : this.size,
+            };
+        },
+    },
+};
+</script>

package/components/src/SPage/PageTabs/index.vue

@@ -0,0 +1,322 @@
+<template>
+    <div class="saas-stabs" :class="{ 'saas-stabs--no-border': !showBorder }">
+        <div class="saas-stabs-container">
+            <!-- 左滑动按钮 -->
+            <div class="saas-stabs-scroll-btn saas-stabs-scroll-btn--left" v-show="showLeftButton" @click="scrollLeft">
+                <i class="el-icon-arrow-left"></i>
+            </div>
+
+            <!-- 滚动容器 -->
+            <div class="saas-stabs-scroll-container" ref="scrollContainer">
+                <div class="saas-stabs-nav" ref="tabsNav">
+                    <div
+                        v-for="(tab, index) in tabs"
+                        v-if="getTabShow(tab)"
+                        :key="getTabValue(tab) || index"
+                        class="stabs-nav-item"
+                        :class="{
+                            'stabs-nav-item__active': getTabValue(tab) === currentActiveKey,
+                            'stabs-nav-item__disabled': tab.disabled,
+                        }"
+                        :style="{ marginRight: index === tabs.length - 1 ? '0' : typeof gap === 'number' ? gap + 'px' : gap }"
+                        @click="handleTabClick(tab, index)"
+                        :ref="`tab-${getTabValue(tab)}`">
+                        <span class="stabs-nav-item-text">{{ getTabLabel(tab) }}</span>
+                        <slot name="tab-suffix" :tab="tab" :index="index"></slot>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右滑动按钮 -->
+            <div class="saas-stabs-scroll-btn saas-stabs-scroll-btn--right" v-show="showRightButton" @click="scrollRight">
+                <i class="el-icon-arrow-right"></i>
+            </div>
+
+            <!-- 右侧插槽 -->
+            <div class="saas-stabs-extra" v-if="$slots.extra">
+                <slot name="extra"></slot>
+            </div>
+        </div>
+        <!-- 滑动指示线 - 移动到容器级别 -->
+        <div class="stabs-nav-indicator" ref="indicator" :style="indicatorStyle"></div>
+    </div>
+</template>
+
+<script>
+/**
+ * STabs 标签页组件
+ *
+ * tabs 数组中每个对象支持的属性：
+ * - label: 标签显示文本
+ * - value: 标签的值（唯一标识）
+ * - disabled: 是否禁用（可选）
+ * - show: 控制标签是否显示（可选）
+ *   - 布尔值：true显示，false隐藏
+ *   - 函数：接收当前tab项作为参数，返回布尔值
+ *
+ * 示例：
+ * tabs: [
+ *   { label: '标签1', value: 'tab1', show: true },
+ *   { label: '标签2', value: 'tab2', show: false },
+ *   { label: '标签3', value: 'tab3', show: (tab) => checkPermission(tab.value) }
+ * ]
+ */
+export default {
+    name: 'SPageTabs',
+    props: {
+        // tabs 数据数组
+        tabs: {
+            type: Array,
+            default: () => [],
+        },
+        // 当前激活的 tab value (支持 v-model)
+        value: {
+            type: [String, Number],
+            default: '',
+        },
+        // 字段名配置
+        fieldNames: {
+            type: Object,
+            default: () => ({
+                label: 'label',
+                value: 'value',
+            }),
+        },
+        // 标签之间的间距
+        gap: {
+            type: [String, Number],
+            default: 32,
+        },
+        // 是否显示下边框
+        showBorder: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            indicatorStyle: {
+                transform: 'translateX(0px)',
+                width: '0px',
+            },
+            // 滚动相关状态
+            showLeftButton: false,
+            showRightButton: false,
+            scrollStep: 200, // 每次滚动的距离
+        };
+    },
+    computed: {
+        // 合并默认字段名配置
+        mergedFieldNames() {
+            return {
+                label: 'label',
+                value: 'value',
+                ...this.fieldNames,
+            };
+        },
+        currentActiveKey() {
+            return this.value;
+        },
+    },
+    methods: {
+        // 获取 tab 的显示文本
+        getTabLabel(tab) {
+            return tab[this.mergedFieldNames.label] || '';
+        },
+
+        // 获取 tab 的值
+        getTabValue(tab) {
+            return tab[this.mergedFieldNames.value];
+        },
+
+        // 获取 tab 的显示状态
+        getTabShow(tab) {
+            // 如果没有show属性，默认显示
+            if (tab.show === undefined) {
+                return true;
+            }
+            // 如果show是函数，调用函数并传入当前tab项
+            if (typeof tab.show === 'function') {
+                return tab.show(tab);
+            }
+            return Boolean(tab.show);
+        },
+        handleTabClick(tab, index) {
+            if (tab.disabled) return;
+            // 触发 tab 点击事件
+            this.$emit('tab-click', tab, index);
+            // 更新激活的 tab
+            const tabValue = this.getTabValue(tab);
+            if (tabValue !== this.currentActiveKey) {
+                // 支持 v-model (Vue 2)
+                this.$emit('input', tabValue);
+            }
+        },
+        // 更新指示线位置
+        updateIndicator() {
+            this.$nextTick(() => {
+                if (!this.currentActiveKey || !this.$refs.tabsNav) return;
+
+                const activeTabRef = this.$refs[`tab-${this.currentActiveKey}`];
+                if (!activeTabRef || !activeTabRef[0]) return;
+
+                const activeTab = activeTabRef[0];
+                const scrollContainer = this.$refs.scrollContainer;
+
+                // 获取各个容器的位置信息
+                const tabRect = activeTab.getBoundingClientRect();
+                const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+                // 计算标签相对于滚动容器的位置
+                const left = tabRect.left - scrollContainerRect.left + scrollContainer.scrollLeft;
+                const width = tabRect.width;
+
+                // 计算滚动容器相对于主容器的偏移（包括左侧按钮的宽度）
+                const leftButton = document.querySelector('.saas-stabs-scroll-btn--left');
+                const leftOffset = leftButton && leftButton.offsetWidth ? leftButton.offsetWidth + 8 : 0; // 8px是margin
+
+                // 更新指示线样式
+                this.indicatorStyle = {
+                    transform: `translateX(${left + leftOffset}px)`,
+                    width: `${width}px`,
+                };
+            });
+        },
+
+        // 检查是否需要显示滚动按钮
+        checkScrollButtons() {
+            this.$nextTick(() => {
+                const scrollContainer = this.$refs.scrollContainer;
+                const tabsNav = this.$refs.tabsNav;
+
+                if (!scrollContainer || !tabsNav) return;
+                const containerWidth = scrollContainer.clientWidth;
+                const navWidth = tabsNav.scrollWidth;
+                const scrollLeft = scrollContainer.scrollLeft;
+
+                // 判断是否需要显示左右按钮
+                this.showLeftButton = scrollLeft > 0;
+                this.showRightButton = scrollLeft < navWidth - containerWidth;
+            });
+        },
+
+        // 向左滚动
+        scrollLeft() {
+            const scrollContainer = this.$refs.scrollContainer;
+            if (!scrollContainer) return;
+
+            const newScrollLeft = Math.max(0, scrollContainer.scrollLeft - this.scrollStep);
+            scrollContainer.scrollTo({
+                left: newScrollLeft,
+                behavior: 'smooth',
+            });
+        },
+
+        // 向右滚动
+        scrollRight() {
+            const scrollContainer = this.$refs.scrollContainer;
+            const tabsNav = this.$refs.tabsNav;
+            if (!scrollContainer || !tabsNav) return;
+
+            const maxScrollLeft = tabsNav.scrollWidth - scrollContainer.clientWidth;
+            const newScrollLeft = Math.min(maxScrollLeft, scrollContainer.scrollLeft + this.scrollStep);
+            scrollContainer.scrollTo({
+                left: newScrollLeft,
+                behavior: 'smooth',
+            });
+        },
+
+        // 滚动到激活的tab
+        scrollToActiveTab() {
+            this.$nextTick(() => {
+                if (!this.currentActiveKey || !this.$refs.scrollContainer) return;
+
+                const activeTabRef = this.$refs[`tab-${this.currentActiveKey}`];
+                if (!activeTabRef || !activeTabRef[0]) return;
+
+                const activeTab = activeTabRef[0];
+                const scrollContainer = this.$refs.scrollContainer;
+
+                // 获取tab和容器的位置信息
+                const tabRect = activeTab.getBoundingClientRect();
+                const containerRect = scrollContainer.getBoundingClientRect();
+
+                // 计算tab相对于容器的位置
+                const tabLeft = activeTab.offsetLeft;
+                const tabWidth = activeTab.offsetWidth;
+                const containerWidth = scrollContainer.clientWidth;
+                const currentScrollLeft = scrollContainer.scrollLeft;
+
+                // 如果tab在可视区域外，则滚动到合适位置
+                if (tabLeft < currentScrollLeft) {
+                    // tab在左侧不可见，滚动到tab开始位置
+                    scrollContainer.scrollTo({
+                        left: tabLeft - 20, // 留一点边距
+                        behavior: 'smooth',
+                    });
+                } else if (tabLeft + tabWidth > currentScrollLeft + containerWidth) {
+                    // tab在右侧不可见，滚动到tab结束位置
+                    scrollContainer.scrollTo({
+                        left: tabLeft + tabWidth - containerWidth + 20, // 留一点边距
+                        behavior: 'smooth',
+                    });
+                }
+            });
+        },
+
+        // 处理滚动事件
+        handleScroll() {
+            this.checkScrollButtons();
+        },
+
+        // 处理窗口大小变化
+        handleResize() {
+            this.updateIndicator();
+            this.checkScrollButtons();
+        },
+    },
+
+    mounted() {
+        // 初始化指示线位置
+        this.updateIndicator();
+
+        // 初始化滚动按钮状态
+        this.checkScrollButtons();
+
+        // 监听窗口大小变化
+        window.addEventListener('resize', this.handleResize);
+
+        // 监听滚动事件
+        if (this.$refs.scrollContainer) {
+            this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
+        }
+    },
+
+    beforeDestroy() {
+        // 清理事件监听
+        window.removeEventListener('resize', this.handleResize);
+
+        if (this.$refs.scrollContainer) {
+            this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+    },
+
+    watch: {
+        // 监听激活标签变化
+        currentActiveKey() {
+            this.updateIndicator();
+            this.scrollToActiveTab();
+        },
+        // 监听标签数据变化
+        tabs: {
+            handler() {
+                this.$nextTick(() => {
+                    this.updateIndicator();
+                    this.checkScrollButtons();
+                });
+            },
+            deep: true,
+        },
+    },
+};
+</script>

package/components/src/SPage/Pagetable.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="['saas-page-table', { 'saas-page-table--hasButton': showFooterButton }]">
         <div class="saas-page-table__header">
-            <template v-if="showHeader">
+            <template v-if="showHeader || showClose">
                 <div v-if="$slots.header">
                     <slot name="header"></slot>
                 </div>
@@ -28,7 +28,9 @@
             </div>
         </div>
         <div class="saas-page-table__content">
-            <slot></slot>
+            <div class="saas-page-content__box">
+                <slot></slot>
+            </div>
         </div>
         <div class="saas-page-table__footer">
             <slot name="footer">
@@ -46,7 +48,7 @@ export default {
     props: {
         showHeader: {
             type: Boolean,
-            default: () => true,
+            default: () => false,
         },
         showFooter: {
             type: Boolean,

package/components/src/SPage/index.js

@@ -1,2 +1,3 @@
 export { default as SPageButton } from './PageButton/index';
+export { default as SPageTabs } from './PageTabs/index';
 export { default as SPagedetail } from './Pagedetail.vue';