@idooel/components 0.0.1 → 0.0.2-beta.10

package/packages/table/src/index.vue

@@ -1,24 +1,30 @@
 <template>
-  <div class="g-table__wrapper">
+  <div class="g-table__wrapper" :style="wrapperStyle" :class="{ 'g-table--no-scroll-y': !needScrollY }">
     <a-table
+      :bordered="bordered"
+      :class="[isNoData && 'g-table__no-data']"
       :pagination="false"
       :loading="loading"
-      :columns="columns"
+      size="middle"
+      :columns="innerColumns"
+      :row-selection="rowSelection"
       :row-class-name="setRowClassName"
       :data-source="dataSource"
-      :scroll="{ x: 1500, y: 500 }">
+      :scroll="getScroll">
       <template slot="action" slot-scope="record">
         <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
       </template>
     </a-table>
     <div class="g-table__pagination">
       <a-pagination
-        :show-total="total => `共 ${total} 条数据`"
+        :show-total="all => `共 ${all} 条数据`"
         show-size-changer 
         show-quick-jumper
-        :pageSize="pageSize"
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
         :pageSizeOptions="pageSizeOptions"
-        @change="onChangePagination" 
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
         :total="total">
       </a-pagination>
     </div>
@@ -33,6 +39,27 @@ export default {
     Actions
   },
   props: {
+    // ant table wrapper
+    height: {
+      type: Number
+    },
+    width: {
+      type: Number
+    },
+    x: {
+      type: Number,
+      default: 1200
+    },
+    y: {
+      type: Number,
+      default: 200
+    },
+    scroll: {
+      type: Object
+    },
+    rowSelection: {
+      type: Object
+    },
     actions: {
       type: Array,
       default: () => []
@@ -60,30 +87,234 @@ export default {
     pageSizeOptions: {
       type: Array,
       default: () => ['10', '20', '30', '40']
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableHeaderHeight: 0,
+      paginationHeight: 0,
+      innerPageSize: 10,
+      innerCurrentPage: 1,
+      tableContentHeight: 0,
+      obs: []
+    }
+  },
+  computed: {
+    wrapperStyle () {
+      // 外层容器样式：确保分页始终可见，表格充满剩余空间
+      if (!this.height) return {}
+      return { height: `${this.height}px` }
+    },
+    needScrollY () {
+      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估
+      if (!this.height) return false
+      
+      const availableHeight = this.getScrollHeightByHeight
+      if (availableHeight <= 0) return false
+      
+      // 预估每行高度（包含边框），antd 默认约 54px
+      const estimatedRowHeight = 54
+      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight
+      
+      return estimatedTableHeight > availableHeight
+    },
+    innerColumns () {
+      return this.columns.filter(col => !Object.keys(col).includes('multiple'))
+    },
+    isNoData () {
+      return !this.dataSource.length
+    },
+    getScrollHeightByHeight () {
+      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
+      return this.height - this.tableHeaderHeight - this.paginationHeight
+    },
+    isFlexColumn () {
+      return this.columns.every(col => !col.width)
+    },
+    getScroll () {
+      if (this.scroll) {
+        return this.scroll
+      } else {
+        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)
+        if (this.height) {
+          // 计算表体可用高度
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
+            ? this.getScrollHeightByHeight 
+            : this.height - 100 // 预估值，给表头和分页留空间
+          
+          if (availableHeight > 50) { // 确保有足够的最小高度
+            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })
+            return { x: baseX, y: availableHeight }
+          }
+        }
+        return { x: baseX }
+      }
+    }
+  },
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.innerPageSize = pageSize
+      },
+      immediate: true
     }
   },
   methods: {
+    onShowSizeChange (current, pageSize) {
+      this.innerCurrentPage = current
+      this.innerPageSize = pageSize
+      this.$emit('change-page', current, pageSize)
+    },
+    setPaginationHeight () {
+      this.$nextTick(() => {
+        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
+        this.paginationHeight = height
+      })
+    },
+    setTableHeaderHeight () {
+      this.$nextTick(() => {
+        const el = document.querySelector('.ant-table-header')
+        if (!el) return
+        const { height } = el.getBoundingClientRect()
+        this.tableHeaderHeight = height
+      })
+    },
+    setTableTbodyHeight () {
+      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
+      this.$nextTick(() => {
+        this.setTableHeaderHeight()
+      })
+    },
     setRowClassName (record, idx) {
       return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
     },
-    onChangePagination (page, pagrSize) {
-      this.$emit('change-page', page, pagrSize)
+    onChangePagination (page, pageSize) {
+      this.innerCurrentPage = page
+      this.innerPageSize = pageSize
+      this.$emit('change-page', page, pageSize)
     }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setPaginationHeight()
+      setTimeout(() => {
+        this.setTableTbodyHeight()
+        // 再测一次分页高度，确保初次渲染完成后数值准确
+        this.setPaginationHeight()
+      }, 200)
+    })
+  },
+  destroyed () {
+    this.obs.forEach(ob => ob.disconnect())
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .g-table__wrapper {
-  padding: 16px;
-  padding-top: unset;
-  .g-table__row--even {}
-  .g-table__row--odd {}
+  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* 表格区域占满剩余空间，启用纵向滚动 */
+  ::v-deep .ant-table-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-spin-nested-loading {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-spin-container {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-table {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 确保表体能够正常纵向滚动 */
+  ::v-deep .ant-table-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  ::v-deep .ant-table-scroll {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::v-deep .ant-table-header {
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
+  ::v-deep .ant-table-fixed {
+    .ant-table-tbody {
+      .g-table__row--odd {
+        &.ant-table-row-hover {
+          td {
+            background-color: var(--idooel-row-hover-color);
+          }
+          .ant-table-selection-column {
+            background-color: var(--idooel-row-hover-color) !important;
+          }
+          .ant-table-row-cell-break-word {
+            background-color: var(--idooel-row-hover-color) !important;
+          }
+        }
+        td {
+          background-color: var(--idooel-row-odd-color);
+        }
+        .ant-table-selection-column {
+          background-color: var(--idooel-row-odd-color) !important;
+        }
+        .ant-table-row-cell-break-word {
+          background-color: var(--idooel-row-odd-color) !important;
+        }
+      }
+    }
+    .ant-table-thead {
+      background: rgba(0, 0, 0, 0.03) !important;
+    }
+  }
+
+  ::v-deep .ant-table-body {
+    flex: 1 1 auto;
+    overflow: auto !important;
+    /* 确保滚动条稳定，避免列宽抖动 */
+    scrollbar-gutter: stable;
+  }
+
+  /* 分页区域固定在底部，不被挤出视口 */
   .g-table__pagination {
-    margin-top: 8px;
+    flex: 0 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: end;
+    border-top: unset;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background: #fff;
+    z-index: 999;
   }
 }
 </style>

package/packages/tabs/index.js

@@ -0,0 +1,5 @@
+import EleTabs from './src/index.vue'
+
+EleTabs.install = Vue => Vue.component(EleTabs.name, EleTabs)
+
+export default EleTabs

package/packages/tabs/src/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <a-tabs :default-active-key="activeKey" :tabBarGutter="tabBarGutter" :tabBarStyle="tabBarStyle" @change="changeHandle">
+      <a-tab-pane v-for="(item, index) in tabsList" :key="index" :tab="item.tabName" :disabled="item.disabled">
+        <template #tab>
+          <component  v-if="item.renderHeader" :is="item.renderHeader" ></component>
+          <span v-else>{{ item.tabName }}</span>
+        </template>
+        <component :is="item.content"></component>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tabs',
+  components: {},
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    activeKey: {
+      type: Number,
+      default: 0
+    },
+    tabsList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    tabBarStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    tabBarGutter: {
+      type: Number
+    }
+  },
+  methods: {
+    changeHandle (key) {
+      this.$emit('changeActiveKey', key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ant-tabs-nav-scroll {
+  float: left !important;
+}
+</style>

package/packages/text/index.js

@@ -0,0 +1,5 @@
+import EleText from './src/index.vue'
+
+EleText.install = Vue => Vue.component(EleText.name, EleText)
+
+export default EleText

package/packages/text/src/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="['ele-text__wrapper', type]">
+    <ele-icon theme="filled" :type="icon"></ele-icon>
+    <span class="message">{{ message }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-text',
+  props: {
+    type: {
+      String,
+      // default success error warning info
+      default: 'default'
+    },
+    message: {
+      type: String
+    }
+  },
+  computed: {
+    icon() {
+      return 'info-circle'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+//
+.ele-text__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &.default {
+    .anticon, .message {
+      color: var(--idoole-black-064);
+    }
+  }
+  .anticon {
+    font-size: 16px;
+  }
+  .message {
+    font-size: 14px;
+    margin-left: 4px;
+  }
+}
+</style>

package/packages/text-editor/index.js

@@ -0,0 +1,5 @@
+import EleTextEditor from './src/index.vue'
+
+EleTextEditor.install = Vue => Vue.component(EleTextEditor.name, EleTextEditor)
+
+export default EleTextEditor

package/packages/text-editor/src/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="ele-editor__wrapper" :style="{width: editorWidth, height: editorHeight}">
+    <Vueditor :ref="getVueditor" :style="{width: editorWidth, height: editorHeight}"></Vueditor>
+    <div class="ele-editor__bottom">
+      <span>{{ innerContent.length }}字</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+export default {
+  name: 'ele-text-editor',
+  props: {
+    editorWidth: {
+      type: String
+    },
+    editorHeight: {
+      type: String
+    },
+    maxLength: {
+      type: Number,
+      default () {
+        return 10
+      }
+    }
+  },
+  data() {
+    return {
+      editorConfig: {},
+      textEditorRef: null
+    }
+  },
+  computed: {
+    innerContent () {
+      let content = this.textEditorRef ? this.textEditorRef.getContent() : ''
+      if (this.textEditorRef && content.length > this.maxLength) {
+        content = content.substring(0, this.maxLength)
+        this.$nextTick(() => {
+          this.textEditorRef.setContent(content)
+        })
+      }
+      this.$emit('input', content)
+      return content
+    },
+    getVueditor () {
+      return uuidv4()
+    }
+  },
+  watch: {},
+  methods: {},
+  mounted () {
+    this.textEditorRef = this.$refs[this.getVueditor]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele-editor__bottom {
+  height: 40px;
+  padding: 8px 20px 8px 8px;
+  border: 1px solid var(--idooel-form-title-border-color);
+  border-top: 0px;
+  span {
+    color: var(--idoole-black-088);
+    text-align: right;
+    font-size: 12px;
+    line-height: 20px;
+    width: 100%;
+    display: inline-block;
+  }
+}
+</style>

package/packages/textarea/index.js

@@ -0,0 +1,5 @@
+import EleTextarea from './src/index.vue'
+
+EleTextarea.install = Vue => Vue.component(EleTextarea.name, EleTextarea)
+
+export default EleTextarea

package/packages/textarea/src/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-textarea 
+    :value="value"
+    :disabled="disabled"
+    :auto-size="autosize"
+    :max-length="maxLength"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    @change="onChange">
+  </a-textarea>
+</template>
+
+<script>
+export default {
+  name: 'ele-textarea',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    maxLength: {
+      type: Number
+    },
+    placeholder: {
+      type: String
+    },
+    allowClear: {
+      type: Boolean,
+      default: false
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: () => ({
+        minRows: 4,
+        maxRows: 4
+      })
+    },
+    value: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onChange (e) {
+      const value = e.target.value
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/packages/theme/form.scss

@@ -0,0 +1,22 @@
+.has-error {
+  .ele-upload__wrapper {
+    .ele-upload__inner {
+      border-color: $error-06;
+      .ele-upload__area {
+        .ele-upload__area--icon {
+          .anticon-cloud-upload {
+            color: $error-06;
+          }
+        }
+        .ele-upload__area--text {
+          .ele-upload__message {
+            color: $error-06;
+          }
+          .ele-upload__ext {
+            color: $error-03;
+          }
+        }
+      }
+    }
+  }
+}

package/packages/theme/index.scss

@@ -0,0 +1,44 @@
+@import 'variables.scss';
+@import 'form.scss';
+@import 'styleClass.scss';
+
+$primary: $primary-06;
+
+:root {
+  --idooel-primary-color: #{$primary};
+  --idoole-black-02: #{$black-02};
+  --idoole-black-06: #{$black-06};
+  --idoole-black-07: #{$black-07};
+  --idoole-black-064: #{$black-07};
+  --idoole-black-088: #{$black-08};
+  --idoole-black-016: #{$black-04};
+  --idooel-disabled-border-color: #{$black-04};
+
+  --idoole-success-06: #{$success-06};
+  --idoole-warning-06: #{$warning-06};
+  --idoole-error-06: #{$error-06};
+  //Table
+  --idooel-border-width: 2;
+  --idooel-border-color: #53a8ff;
+  --idooel-column-border-width: 1;
+  --idooel-column-border-color: #d9ecff;
+  --idooel-row-odd-color: #{$black-02};
+  --idooel-row-even-color: #FFF;
+  --idooel-row-hover-color: #{$primary-01};
+
+  //Form
+  --idooel-form-title-border-color: #{$black-04};
+  --idooel-form-upload-bg-color: #{$black-01};
+  --idooel-form-upload-border-hover-color: #{$primary-05};
+  --idooel-form-border-radius: #{$border-radius-base}px;
+  --idooel-form-border-err-color: #{$error-06};
+
+  //Link
+  --idooel-link-06: #{$link-06};
+  --idooel-link-03: #{$link-03};
+
+  //img-crop
+  --idooel-img-crop-err-color: #{$error-03};
+}
+
+@import './overrid.scss';

package/packages/theme/overrid.scss

@@ -0,0 +1,8 @@
+.ant-input-disabled {
+  border-color: var(--idooel-disabled-border-color) !important;
+}
+.ant-select-disabled {
+  .ant-select-selection {
+    border-color: var(--idooel-disabled-border-color) !important;
+  }
+}

package/packages/theme/styleClass.scss

@@ -0,0 +1,3 @@
+.margin-t-8 {
+  margin-top: 8px;
+}