iov-pro-components 0.0.3

package/src/packages/table/src/search.vue

@@ -0,0 +1,90 @@
+<script>
+import { getComponentNames } from '@/utils/config-center'
+
+export default {
+  name: 'IovProTableSearch',
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      value: '',
+      isActived: false
+    }
+  },
+  methods: {
+    /**
+     * 点击重置方法
+     * @time 2024-11-21 20:17:46
+     */
+    onReset() {
+      // 先清空数据
+      this.value = ''
+      // 标记当前不需要激活状态
+      this.isActived = false
+      // 抛出去重置方法
+      this.$emit('reset')
+      // 关闭popover
+      this.visible = false
+    },
+
+    /**
+     * 点击搜索方法
+     * @time 2024-11-21 20:18:49
+     */
+    onConfirm() {
+      // 如果啥都没输入，就不搜索
+      if (!this.value) return
+      // 标记当前需要激活状态
+      this.isActived = true
+      // 抛出去搜索方法
+      this.$emit('confirm', this.value)
+      // 关闭popover
+      this.visible = false
+    }
+  },
+  render() {
+    const [Popover, Input, Button] = getComponentNames(['popover', 'input', 'button'])
+    return (
+      <Popover
+        value={this.visible}
+        placement={this.placement}
+        width='256'
+        trigger='click'
+        popper-class='iov-pro-table-search__popper'
+        onInput={val => (this.visible = val)}
+      >
+        <i
+          slot='reference'
+          class={{
+            'iov-pro-table-search__icon': true,
+            'is-actived': this.isActived,
+            'iov-icon-fill-search': true
+          }}
+        />
+        <div class='iov-pro-table-search__input-wrapper'>
+          <Input
+            value={this.value}
+            placeholder='请输入查询内容'
+            size='mini'
+            class='iov-pro-table-search__input'
+            onInput={val => (this.value = val)}
+          />
+        </div>
+        <div class='iov-pro-table-search__operation'>
+          <Button size='mini' onClick={this.onReset}>重置</Button>
+          <Button type='info' size='mini' icon='iov-icon-search' onClick={this.onConfirm}>搜索</Button>
+        </div>
+      </Popover>
+    )
+  }
+}
+</script>

package/src/packages/table/src/sort.vue

@@ -0,0 +1,118 @@
+<script>
+import isNil from 'lodash/isNil'
+import { getComponentNames } from '@/utils/config-center'
+
+// 排序枚举
+export const SORT_ORDER = {
+  ASCENDING: 'ascending',
+  DESCENDING: 'descending'
+}
+
+// 默认排序顺序
+const DEFAULT_SORT_ORDERS = [SORT_ORDER.ASCENDING, SORT_ORDER.DESCENDING, null]
+
+export default {
+  name: 'IovProTableSort',
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      value: [],
+      sortOrder: null
+    }
+  },
+  computed: {
+    /**
+     * 下一步排序的方式
+     * @time 2024-11-22 10:58:59
+     */
+    nextSortOrder() {
+      // 当前需要排序的顺序
+      const sortOrders = this.column.sortOrders || DEFAULT_SORT_ORDERS
+      // 取出当前下一步排序的所
+      let nextSortOrderIndex = sortOrders.findIndex(order => order === this.sortOrder) + 1
+      // 如果超出了排序数组的顺序
+      if (nextSortOrderIndex >= sortOrders.length) {
+        nextSortOrderIndex = 0
+      }
+      return sortOrders[nextSortOrderIndex]
+    },
+
+    /**
+     * tooltip的内容
+     * @time 2024-11-22 10:53:54
+     */
+    tooltipContent() {
+      // 当前需要排序的顺序
+      let content = ''
+      // 下一步需要排序的方式
+      switch (this.nextSortOrder) {
+        case SORT_ORDER.ASCENDING: // 如果下一步需要升序
+          content = '点击升序'
+          break
+        case SORT_ORDER.DESCENDING: // 如果下一步需要降序
+          content = '点击降序'
+          break
+        default:
+          content = `取消${this.sortOrder === SORT_ORDER.ASCENDING ? '升序' : '降序'}`
+          break
+      }
+      return content
+    }
+  },
+  created() {
+    // 默认排序方式
+    const { defaultSort } = this.column
+    // 如果当前设置了默认排序
+    if (!isNil(defaultSort)) {
+      // 记录当前默认排序
+      this.sortOrder = defaultSort
+      // 开始派发事件
+      this.$emit('sort', defaultSort)
+    }
+  },
+  methods: {
+    /**
+     * 点击排序方法
+     * @time 2024-11-21 20:17:46
+     */
+    onSort() {
+      // 当前需要排序的顺序
+      this.sortOrder = this.nextSortOrder
+      // 抛出去重置方法
+      this.$emit('sort', this.sortOrder)
+    },
+
+    /**
+     * 重置排序方法
+     * @time 2024-11-22 14:24:09
+     */
+    onReset() {
+      // 当前需要排序的顺序
+      this.sortOrder = null
+    }
+  },
+  render() {
+    const [Tooltip] = getComponentNames(['tooltip'])
+    return (
+      <Tooltip
+        effect='dark'
+        content={this.tooltipContent}
+        placement='top'
+      >
+        <div
+          class={['iov-pro-table-sort', this.sortOrder].join(' ')}
+          onClick={this.onSort}
+        >
+          <i class='iovprofont iov-icon-sort-up' />
+          <i class='iovprofont iov-icon-sort-down' />
+        </div>
+      </Tooltip>
+    )
+  }
+}
+</script>

package/src/packages/theme/index.scss

@@ -0,0 +1,15 @@
+@import "./src/column-tooltip.scss";
+@import "./src/description.scss";
+@import "./src/dialog-select.scss";
+@import "./src/fixed-button-group.scss";
+@import "./src/form.scss";
+@import "./src/link-group.scss";
+@import "./src/page-detail.scss";
+@import "./src/page-module.scss";
+@import "./src/preview.scss";
+@import "./src/search-table.scss";
+@import "./src/space.scss";
+@import "./src/sub-title.scss";
+@import "./src/submit-module.scss";
+@import "./src/table.scss";
+@import "./src/toolbar.scss";

package/src/packages/theme/src/column-tooltip.scss

@@ -0,0 +1,23 @@
+.iov-pro-column-tooltip {
+  &__container {
+    line-height: 17px;
+    padding: 2px;
+    overflow-x: hidden;
+    position: relative;
+    &.ellipsis {
+      &:after {
+        bottom: 0;
+        content: "...";
+        display: block;
+        position: absolute;
+        right: -1px;
+      }
+    }
+  }
+  &__text {
+    height: 23px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+}

package/src/packages/theme/src/common/color.scss

@@ -0,0 +1,134 @@
+// --color-primary
+$--color-primary-1: #F0F4FD !default;
+$--color-primary-2: #E3EBFF !default;
+$--color-primary-3: #9EB3FF !default;
+$--color-primary-4: #7992FF !default;
+$--color-primary-5: #546EFF !default;
+$--color-primary-6: #2F48FF !default;
+$--color-primary-7: #1D2CD2 !default;
+$--color-primary-8: #0F17A6 !default;
+$--color-primary-9: #060879 !default;
+$--color-primary-10: #01004D !default;
+
+// --color-success
+$--color-success-1: #EFF9F3 !default;
+$--color-success-2: #B8F0C7 !default;
+$--color-success-3: #8CE0A5 !default;
+$--color-success-4: #65D189 !default;
+$--color-success-5: #42C170 !default;
+$--color-success-6: #23B25D !default;
+$--color-success-7: #17994F !default;
+$--color-success-8: #0D7F42 !default;
+$--color-success-9: #056635 !default;
+$--color-success-10: #004D29 !default;
+
+// --color-warning
+$--color-warning-1: #FFF7E8 !default;
+$--color-warning-2: #FFE4BA !default;
+$--color-warning-3: #FFCF8B !default;
+$--color-warning-4: #FFB65D !default;
+$--color-warning-5: #FF9A2E !default;
+$--color-warning-6: #FF7D00 !default;
+$--color-warning-7: #D25F00 !default;
+$--color-warning-8: #A64500 !default;
+$--color-warning-9: #792E00 !default;
+$--color-warning-10: #4D1B00 !default;
+
+// --color-danger
+$--color-danger-1: #FFF1F1 !default;
+$--color-danger-2: #FDCDC5 !default;
+$--color-danger-3: #FBACA3 !default;
+$--color-danger-4: #F98981 !default;
+$--color-danger-5: #F76560 !default;
+$--color-danger-6: #F53F3F !default;
+$--color-danger-7: #CB272D !default;
+$--color-danger-8: #A1151E !default;
+$--color-danger-9: #770813 !default;
+$--color-danger-10: #4D000A !default;
+
+// --color-gold
+$--color-gold-1: #FFFCE8 !default;
+$--color-gold-2: #FDF4BF !default;
+$--color-gold-3: #FCE996 !default;
+$--color-gold-4: #FADC6D !default;
+$--color-gold-5: #F9CC45 !default;
+$--color-gold-6: #F7BA1E !default;
+$--color-gold-7: #CC9213 !default;
+$--color-gold-8: #A26D0A !default;
+$--color-gold-9: #774B04 !default;
+$--color-gold-10: #4D2D00 !default;
+
+// --color-blue
+$--color-blue-1: #E8F7FF !default;
+$--color-blue-2: #BEE7FF !default;
+$--color-blue-3: #94D4FF !default;
+$--color-blue-4: #6ABEFF !default;
+$--color-blue-5: #40A6FF !default;
+$--color-blue-6: #168CFF !default;
+$--color-blue-7: #0E69D2 !default;
+$--color-blue-8: #074CA6 !default;
+$--color-blue-9: #033279 !default;
+$--color-blue-10: #001C4D !default;
+
+// --color-purple
+$--color-purple-1: #F5E8FF !default;
+$--color-purple-2: #DDBEF6 !default;
+$--color-purple-3: #C396ED !default;
+$--color-purple-4: #A871E3 !default;
+$--color-purple-5: #8D4EDA !default;
+$--color-purple-6: #722ED1 !default;
+$--color-purple-7: #551DB0 !default;
+$--color-purple-8: #3C108F !default;
+$--color-purple-9: #27066E !default;
+$--color-purple-10: #16004D !default;
+
+// --color-pink
+$--color-pink-1: #FFE8FB !default;
+$--color-pink-2: #F7BAEF !default;
+$--color-pink-3: #F08EE6 !default;
+$--color-pink-4: #E865DF !default;
+$--color-pink-5: #E13EDB !default;
+$--color-pink-6: #D91AD9 !default;
+$--color-pink-7: #B010B6 !default;
+$--color-pink-8: #8A0993 !default;
+$--color-pink-9: #650370 !default;
+$--color-pink-10: #42004D !default;
+
+// --color-gray
+$--color-gray-1: #E8F4FF !default;
+$--color-gray-2: #CED9E4 !default;
+$--color-gray-3: #B5BECA !default;
+$--color-gray-4: #9CA4AF !default;
+$--color-gray-5: #838A95 !default;
+$--color-gray-6: #6B707A !default;
+$--color-gray-7: #49546F !default;
+$--color-gray-8: #2C3A63 !default;
+$--color-gray-9: #132358 !default;
+$--color-gray-10: #000F4D !default;
+
+// --color-line
+$--color-line-1: #EDEFF3 !default;
+$--color-line-2: #DCDFE6 !default;
+$--color-line-3: #D2D5DF !default;
+$--color-line-4: #C3C7D1 !default;
+$--color-line-5: #E9EBF0 !default;
+
+// --color-fill
+$--color-fill-1: #F6F7F8 !default;
+$--color-fill-2: #F2F3F5 !default;
+$--color-fill-3: #E5E6EB !default;
+$--color-fill-4: #ABAFB5 !default;
+$--color-fill-5: #777D87 !default;
+$--color-fill-6: #494B53 !default;
+$--color-fill-7: #212026 !default;
+$--color-fill-8: #0D1722 !default;
+
+// --color-text
+$--color-text-1: #C6C7CA !default;
+$--color-text-2: #A2A3AA !default;
+$--color-text-3: #6B707A !default;
+$--color-text-4: #65677A !default;
+$--color-text-5: #3D4158 !default;
+$--color-text-6: #212026 !default;
+$--color-text-7: #0D1722 !default;
+

package/src/packages/theme/src/description.scss

@@ -0,0 +1,56 @@
+@import "./common/color.scss";
+
+.iov-pro-description {
+  &__col {
+    display: flex;
+    font-family: PingFangSC, PingFang SC;
+    font-size: 13px;
+    line-height: 18px;
+  }
+  &__label {
+    color: $--color-text-4;
+    flex-shrink: 0;
+    width: 144px;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  &__value {
+    color: $--color-text-6;
+    flex: 1;
+    width: 0;
+    word-break: break-all;
+  }
+  &__link.el-link.el-link--primary {
+    border-bottom: 1px dashed $--color-text-6;
+    color: $--color-text-6;
+    margin-left: 24px;
+    &:hover {
+      border-color: $--color-primary-6;
+      color: $--color-primary-6;
+    }
+    &.has-icon {
+      margin-left: 24px;
+    }
+  }
+  &__link-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+    margin-left: -24px;
+    vertical-align: bottom;
+  }
+  &__link-group {
+    .iov-pro-space {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+.iov-pro-text__content {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}

package/src/packages/theme/src/dialog-select.scss

@@ -0,0 +1,32 @@
+@import "./common/color.scss";
+
+.iov-pro-dialog-select {
+  .el-dialog__body {
+    padding: 16px 24px;
+    overflow: auto;
+    max-height: 488px;
+    box-sizing: content-box;
+  }
+  .el-dialog__footer {
+    padding: 16px 24px 20px;
+    text-align: center;
+  }
+  &__table {
+    min-height: 212px;
+  }
+  &__filter {
+    margin-bottom: 12px;
+    width: 40%;
+  }
+  .el-tabs {
+    width: 100%;
+  }
+  .el-tabs--card .el-tabs__item {
+    box-sizing: content-box;
+    &.is-active {
+      border-top: 2px solid $--color-primary-6;
+      color: $--color-primary-6;
+      background: linear-gradient( 180deg, #F0F4FD 0%, #fff 10%);
+    }
+  }
+}

package/src/packages/theme/src/fixed-button-group.scss

@@ -0,0 +1,25 @@
+.iov-pro-fixed-button-group {
+  height: 68px;
+  &__content {
+    align-items: center;
+    background-color: #ffffff;
+    box-shadow: 0px 0px 12px 0px rgba(196, 198, 207, 0.21);
+    bottom: 0;
+    border-radius: 0px 0px 8px 8px;
+    display: flex;
+    position: fixed;
+    height: 68px;
+    left: 204px;
+    right: 16px;
+    z-index: 1000;
+    &.center {
+      justify-content: center;
+    }
+    &.left {
+      justify-content: flex-start;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+  }
+}

package/src/packages/theme/src/form.scss

@@ -0,0 +1,11 @@
+.iov-pro-form {
+  &__form-item {
+    &.override.important {
+      margin-bottom: 0;
+    }
+  }
+
+  .iov-pro-form__form-item.important.override {
+    margin-bottom: 0;
+  }
+}

package/src/packages/theme/src/link-group.scss

@@ -0,0 +1,43 @@
+@import "./common/color.scss";
+
+.iov-pro-link-group {
+  .el-link, .el-dropdown {
+    display: block;
+  }
+  &__more {
+    color: $--color-primary-6;
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  &__dropdown-menu {
+    padding: 4px;
+    .el-dropdown-menu__item {
+      font-size: 13px;
+      line-height: 32px;
+      padding: 0 12px;
+      &:hover {
+        background-color: #F6F7F8;
+      }
+    }
+  }
+  .iov-pro-space__item {
+    position: relative;
+    &:after {
+      background: #DCDFE6;
+      content: "";
+      display: block;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 12px;
+      position: absolute;
+    }
+    &:last-child:after {
+      display: none;
+    }
+  }
+}

package/src/packages/theme/src/page-detail.scss

@@ -0,0 +1,61 @@
+@import "./common/color.scss";
+
+.iov-pro-page-detail {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  font-family: PingFangSC, PingFang SC;
+  position: relative;
+}
+.iov-pro-page-detail__head {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+.iov-pro-page-detail__icon {
+  margin-right: 12px;
+  width: 44px;
+  height: 44px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  font-style: normal;
+}
+.iov-pro-page-detail__head-info {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.iov-pro-page-detail__name {
+  margin-bottom: 4px;
+  height: 22px;
+  line-height: 22px;
+  .name {
+    margin-right: 8px;
+    font-weight: 600;
+    font-size: 16px;
+    color: $--color-text-6;
+  }
+}
+.iov-pro-page-detail__desc {
+  height: 18px;
+  line-height: 18px;
+  font-weight: 400;
+  font-size: 12px;
+  color: $--color-text-4;
+  .desc-item {
+    margin-right: 16px;
+  }
+}
+.iov-pro-page-detail__help {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  .help-item {
+    margin-left: 16px;
+    font-weight: 400;
+    font-size: 12px;
+    color: $--color-text-2;
+  }
+}

package/src/packages/theme/src/page-module.scss

@@ -0,0 +1,46 @@
+@import "./common/color.scss";
+
+.iov-pro-page-module {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  &.is-sub {
+    .iov-pro-page-module__name-text {
+      font-size: 14px;
+    }
+  }
+  &__back {
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+    color: $--color-fill-6;
+    width: 22px;
+    height: 22px;
+    margin-right: 8px;
+    text-align: center;
+    line-height: 22px;
+    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+    &:hover {
+      background-color: $--color-fill-1;
+    }
+  }
+  &__head {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__suffix {
+    margin-left: 10px;
+  }
+  &__name {
+    display: flex;
+    align-items: center;
+    &-text {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 16px;
+      color: #0D1722;
+    }
+  }
+}