iov-pro-components 0.0.3

package/src/packages/form-collapse/index.js

@@ -0,0 +1,7 @@
+import ProFormCollapse from '@/packages/form/src/collapse.vue'
+
+ProFormCollapse.install = function(Vue) {
+  Vue.component(ProFormCollapse.name, ProFormCollapse)
+}
+
+export default ProFormCollapse

package/src/packages/index.js

@@ -0,0 +1,86 @@
+import * as config from '../utils/config-center'
+
+import ColumnTooltip from './column-tooltip/index.js'
+import Description from './description/index.js'
+import DialogSelect from './dialog-select/index.js'
+import Display from './display/index.js'
+import Enums from './enums/index.js'
+import Export from './export/index.js'
+import FixedButtonGroup from './fixed-button-group/index.js'
+import Form from './form/index.js'
+import FormCollapse from './form-collapse/index.js'
+import LinkGroup from './link-group/index.js'
+import PageDetail from './page-detail/index.js'
+import PageModule from './page-module/index.js'
+import Preview from './preview/index.js'
+import Request from './request/index.js'
+import SearchTable from './search-table/index.js'
+import SearchTableInnerTabs from './search-table-inner-tabs/index.js'
+import SearchTableOuterTabs from './search-table-outer-tabs/index.js'
+import Space from './space/index.js'
+import SubTitle from './sub-title/index.js'
+import SubmitModule from './submit-module/index.js'
+import Table from './table/index.js'
+import Toolbar from './toolbar/index.js'
+
+import './theme/index.scss'
+
+const components = [
+  ColumnTooltip,
+  Description,
+  DialogSelect,
+  Display,
+  Enums,
+  Export,
+  FixedButtonGroup,
+  Form,
+  FormCollapse,
+  LinkGroup,
+  PageDetail,
+  PageModule,
+  Preview,
+  Request,
+  SearchTable,
+  SearchTableInnerTabs,
+  SearchTableOuterTabs,
+  Space,
+  SubTitle,
+  SubmitModule,
+  Table,
+  Toolbar
+]
+
+const install = function(Vue, componentConfig) {
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+
+  config.init(Vue, componentConfig)
+}
+
+export default {
+  install,
+  version: '0.1.0',
+  ColumnTooltip,
+  Description,
+  DialogSelect,
+  Display,
+  Enums,
+  Export,
+  FixedButtonGroup,
+  Form,
+  FormCollapse,
+  LinkGroup,
+  PageDetail,
+  PageModule,
+  Preview,
+  Request,
+  SearchTable,
+  SearchTableInnerTabs,
+  SearchTableOuterTabs,
+  Space,
+  SubTitle,
+  SubmitModule,
+  Table,
+  Toolbar
+}

package/src/packages/link-group/index.js

@@ -0,0 +1,7 @@
+import LinkGroup from './src/main.vue'
+
+LinkGroup.install = function(Vue) {
+  Vue.component(LinkGroup.name, LinkGroup)
+}
+
+export default LinkGroup

package/src/packages/link-group/src/main.vue

@@ -0,0 +1,52 @@
+<script>
+import Space from '@/packages/space'
+import { getComponentName } from '@/utils/config-center'
+
+export default {
+  name: 'IovProLinkGroup',
+  props: {
+    max: {
+      type: [Number, String],
+      default: 2
+    },
+    space: {
+      type: [Number, String],
+      default: 12
+    }
+  },
+  render() {
+    // 默认插槽
+    const defaultSlots = this.$slots.default.filter(slot => slot.tag)
+    // 如果小于等于最大数量，直接喧嚷
+    if (defaultSlots.length <= this.max) {
+      return (
+        <div class='iov-pro-link-group'>
+          <Space space={this.space} direction='horizontal'>{defaultSlots}</Space>
+        </div>
+      )
+    }
+    // 获取对应ui库的组件名
+    const Dropdown = getComponentName('dropdown')
+    const DropdownMenu = getComponentName('dropdown-menu')
+    const DropdownItem = getComponentName('dropdown-item')
+    // 只渲染前2个
+    return (
+      <div class='iov-pro-link-group'>
+        <Space space={this.space} direction='horizontal'>
+          {defaultSlots.slice(0, this.max)}
+          <Dropdown>
+            <i class='iov-pro-link-group__more iov-icon-vertical-more' />
+            <DropdownMenu slot='dropdown' class='iov-pro-link-group__dropdown-menu'>
+              {
+                defaultSlots
+                  .slice(this.max)
+                  .map(slot => <DropdownItem>{slot}</DropdownItem>)
+              }
+            </DropdownMenu>
+          </Dropdown>
+        </Space>
+      </div>
+    )
+  }
+}
+</script>

package/src/packages/page-detail/index.js

@@ -0,0 +1,7 @@
+import PageDetail from './src/main.vue'
+
+PageDetail.install = function(Vue) {
+  Vue.component(PageDetail.name, PageDetail)
+}
+
+export default PageDetail

package/src/packages/page-detail/src/main.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="iov-pro-page-detail">
+    <div class="iov-pro-page-detail__head">
+      <i
+        v-if="$slots.icon"
+        class="iov-pro-page-detail__icon"
+      >
+        <slot name="icon" />
+      </i>
+      <i
+        v-else-if="icon"
+        class="iov-pro-page-detail__icon"
+        :style="iconStyle"
+      />
+      <div class="iov-pro-page-detail__head-info">
+        <div class="iov-pro-page-detail__name">
+          <span class="name">{{ name }}</span>
+          <el-tag
+            v-if="statusText"
+            :type="statusType"
+            hit
+            size="mini"
+          >{{ statusText }}</el-tag>
+        </div>
+        <div class="iov-pro-page-detail__desc">
+          <template v-if="desc && descList.length > 0">
+            <span
+              v-for="(item, index) in descList"
+              :key="index"
+              class="desc-item"
+            >{{ item }}</span>
+          </template>
+        </div>
+      </div>
+      <div class="iov-pro-page-detail__help">
+        <template v-if="help && help.length > 0">
+          <span
+            v-for="(item, index) in help"
+            :key="index"
+            class="help-item"
+          >{{ item }}</span>
+        </template>
+        <slot
+          v-else-if="$slots.help"
+          name="help"
+        />
+      </div>
+    </div>
+    <div class="iov-pro-page-detail__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { isUrl, isBase64Image } from '@/utils'
+
+// 当前icon
+const ICONS = {
+  1: 'https://prod-common-public.obs-helf.cucloud.cn/user/60741000000000128483327',
+  2: 'https://prod-common-public.obs-helf.cucloud.cn/user/6dff1000000000128483405'
+}
+
+export default {
+  name: 'IovProPageDetail',
+  props: {
+    // 名称
+    name: {
+      type: String,
+      default: ''
+    },
+    // icon
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 描述文本
+    desc: {
+      type: [String, Array],
+      default: ''
+    },
+    // 状态文本
+    statusText: {
+      type: String,
+      default: ''
+    },
+    // 状态颜色 success|info|warning|danger
+    statusType: {
+      type: String,
+      default: ''
+    },
+    // 右上角文本
+    help: {
+      type: Array,
+      default: () => { [] }
+    }
+  },
+  computed: {
+    iconStyle() {
+      if (!this.icon) {
+        return {}
+      }
+      // 如果传入的是链接
+      if (isUrl(this.icon)) {
+        return { backgroundImage: `url(${this.icon})` }
+      }
+      // 如果传入的是图片
+      if (isBase64Image(this.icon)) {
+        return { backgroundImage: `url(${this.icon})` }
+      }
+      return {
+        backgroundImage: `url(${ICONS[this.icon]})`
+      }
+    },
+    descList() {
+      if (typeof this.desc === 'string') {
+        return [this.desc]
+      }
+      return this.desc
+    }
+  }
+}
+</script>

package/src/packages/page-module/index.js

@@ -0,0 +1,7 @@
+import PageModule from './src/main.vue'
+
+PageModule.install = function(Vue) {
+  Vue.component(PageModule.name, PageModule)
+}
+
+export default PageModule

package/src/packages/page-module/src/main.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="{ 'is-sub': isSub }"
+    class="iov-pro-page-module"
+  >
+    <div class="iov-pro-page-module__head">
+      <div
+        v-if="name"
+        class="iov-pro-page-module__name"
+      >
+        <div
+          v-if="showBack"
+          class="iov-pro-page-module__back iov-icon-left"
+          @click="$emit('back')"
+        />
+        <span class="iov-pro-page-module__name-text">{{ name }}</span>
+        <div
+          v-if="$slots.suffix"
+          class="iov-pro-page-module__suffix"
+        >
+          <slot name="suffix" />
+        </div>
+      </div>
+      <div
+        v-if="$slots.help"
+        class="iov-pro-page-module__help"
+      >
+        <slot name="help" />
+      </div>
+    </div>
+    <div class="iov-pro-page-module__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+// 新UI页面模块
+export default {
+  name: 'IovProPageModule',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    isSub: {
+      type: Boolean,
+      default: false
+    },
+    showBack: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/src/packages/preview/index.js

@@ -0,0 +1,7 @@
+import Preview from './src/main.vue'
+
+Preview.install = function(Vue) {
+  Vue.component(Preview.name, Preview)
+}
+
+export default Preview

package/src/packages/preview/src/eval-image-viewer.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import ImageViewer from './image-viewer.vue'
+
+const ImageViewerConstructor = Vue.extend(ImageViewer)
+
+export default function(propsData) {
+  return new Promise((resolve) => {
+    /**
+     * 关闭方法
+     * @time 2025-02-28 11:30:51
+     */
+    const onClose = () => {
+      // 销毁组件
+      imageViewerVm.$destroy()
+      // 展示全屏
+      if (window.hooks) {
+        window.hooks.tap(window.hooks.FULL_SCREEN, false)
+      }
+      // 标记当前已经关闭
+      resolve()
+    }
+
+    // 先创建组件
+    const imageViewerVm = new ImageViewerConstructor({
+      propsData: {
+        ...propsData,
+        onClose
+      }
+    }).$mount()
+
+    // 如果有自定义样式
+    if (propsData.style) {
+      // 遍历自定义的样式
+      Object.keys(propsData.style).forEach(key => {
+        imageViewerVm.$el.style[key] = propsData.style[key]
+      })
+    }
+
+    // 如果有自定义的样式
+    if (propsData.className) {
+      imageViewerVm.$el.className.push(propsData.className)
+    }
+
+    // 展示全屏
+    if (window.hooks) {
+      window.hooks.tap(window.hooks.FULL_SCREEN, true)
+    }
+  })
+}
+