iov-pro-components 0.0.3

package/rollup.config.mjs

@@ -0,0 +1,79 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import vue from 'rollup-plugin-vue'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import terser from '@rollup/plugin-terser'
+import babel from '@rollup/plugin-babel'
+import alias from '@rollup/plugin-alias'
+import scss from 'rollup-plugin-scss'
+import VueJsx from 'unplugin-vue-jsx/rollup'
+
+// 获取当前文件的绝对路径
+const __filename = fileURLToPath(import.meta.url)
+// 获取当前目录路径
+const __dirname = path.dirname(__filename)
+
+export default {
+  input: 'src/packages/index.js',
+  external: ['vue', 'iov-design'],
+  output: {
+    dir: 'lib',
+    format: 'es',
+    entryFileNames: 'iov-pro-components.min.js'
+  },
+  treeshake: {
+    moduleSideEffects: false
+  },
+  plugins: [
+    alias({
+      entries: [
+        { find: '@', replacement: path.resolve(__dirname, 'src') }
+      ],
+      resolve: ['.vue', '.scss', '.js']
+    }),
+    VueJsx({ version: 2 }),
+    vue({
+      // 动态注入css到js中
+      css: false,
+      // 将template编译为render函数
+      compileTemplate: true
+    }),
+    scss({
+      fileName: 'iov-pro-components.css',
+      outputStyle: 'compressed'
+    }),
+    // 查找并打包node_modules中的第三方模块
+    resolve(),
+    babel({
+      presets: [
+        ['@vue/babel-preset-jsx', {
+          // 强制注入 h 函数
+          injectH: true
+        }]
+      ],
+      plugins: [
+        ['@babel/plugin-transform-runtime', {
+          corejs: false,
+          helpers: true,
+          useEsModules: true
+        }]
+      ],
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.vue'],
+      babelHelpers: 'runtime'
+    }),
+    // 将 CommonJS 转换成 ES6 模块
+    commonjs(),
+    replace({
+      preventAssignment: true,
+      values: {
+        // 设置环境变量
+        'process.env.NODE_ENV': JSON.stringify('production')
+      }
+    }),
+    // 压缩代码
+    terser()
+  ]
+}

package/src/App.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-container class="iov-pro-components">
+    <el-header class="iov-pro-components__header">
+      <div class="iov-pro-components__logo">IOV Pro Components</div>
+    </el-header>
+    <el-container>
+      <el-aside
+        width="240px"
+        class="iov-pro-components__navbar"
+      >
+        <router-link
+          v-for="route in routes"
+          :key="route.path"
+          :to="route.path"
+          :class="{ 'is-actived': $route.path === route.path }"
+          class="iov-pro-components__nav-link"
+        >{{ route.meta.title }}</router-link>
+      </el-aside>
+      <el-container>
+        <el-main class="iov-pro-components__container">
+          <el-scrollbar>
+            <router-view />
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  computed: {
+    routes() {
+      return this.$router.options.routes
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+html, body {
+  padding: 0;
+  margin: 0;
+}
+.iov-pro-components {
+  display: flex;
+  width: 1280px;
+  height: 100vh;
+  margin: 0 auto;
+  &__header {
+    align-items: center;
+    border-bottom: 1px solid #E5E6EB;
+    display: flex;
+  }
+  &__logo {
+    align-items: center;
+    background: linear-gradient(#4A6FFF 0%, #2F48FF 100%);
+    box-shadow: inset 0px -2px 3px 0px rgba(223, 233, 255, 0.46);
+    border-radius: 4px;
+    color: #fff;
+    display: flex;
+    font-style: italic;
+    font-weight: 600;
+    height: 36px;
+    padding: 0 16px;
+  }
+  &__navbar.el-aside {
+    border-right: 1px solid #E5E6EB;
+    width: 240px;
+    padding: 12px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &__nav-link {
+    align-items: center;
+    color: #212026;
+    display: flex;
+    width: 100%;
+    height: 40px;
+    text-decoration: none;
+    padding: 0 12px;
+    &.is-actived {
+      background-color: #F0F4FD;
+      color: #2F48FF;
+    }
+    &:hover {
+      color: #2F48FF;
+    }
+  }
+  &__container.el-main {
+    flex: 1;
+    height: calc(100vh - 60px);
+    padding: 0;
+    .el-scrollbar {
+      height: 100%;
+      &__view {
+        padding: 12px;
+      }
+    }
+  }
+}
+</style>

package/src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import App from './App.vue'
+import ElementUI from 'iov-design'
+import router from './router'
+import 'iov-design/lib/theme-chalk/index.css'
+import './views/directive/number'
+
+import IovProComponents from '@/packages'
+
+Vue.use(VueRouter)
+
+Vue.config.productionTip = false
+
+Vue.use(ElementUI)
+Vue.use(IovProComponents, {
+  preview: {
+    request: (params) => {
+      console.log(params)
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve('https://prod-common-public.obs-helf.cucloud.cn/mall/goods/893f1000000000114669556')
+        }, 1000)
+      })
+    },
+    cacheTime: 3600
+  }
+})
+
+new Vue({
+  render: h => h(App),
+  router
+}).$mount('#app')

package/src/packages/column-tooltip/index.js

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

package/src/packages/column-tooltip/src/main.vue

@@ -0,0 +1,127 @@
+<script>
+import { getComponentName } from '@/utils/config-center'
+
+export default {
+  name: 'IovProColumnTooltip',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 默认提供的主题
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    // Tooltip 的出现位置
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    // 可显示的最大宽度
+    maxWidth: {
+      type: [Number, String],
+      default: 444
+    },
+    // 可显示的最大高度
+    maxHeight: {
+      type: [Number, String],
+      default: 134
+    },
+    // 超出显示
+    overflow: {
+      type: String,
+      default: 'hidden'
+    },
+    // 是否显示省略号
+    ellipsis: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      showEllipsis: false,
+      visible: false
+    }
+  },
+  computed: {
+    /**
+     * 展示的文案
+     * @time 2024-10-10 11:43:53
+     */
+    displayText() {
+      return this.data.join('; ')
+    }
+  },
+  watch: {
+    /**
+     * 等待tooltip展示了后
+     * @time 2024-10-17 18:09:31
+     */
+    visible() {
+      // 等待data渲染完成后
+      this.$nextTick(() => {
+        // 如果当前没有，则不处理
+        if (!this.visible) {
+          return
+        }
+        // 总高度
+        const totalHeight = Array.from(
+          this.$refs.columnTooltipContent
+            .querySelectorAll('.iov-pro-column-tooltip__wrapper')
+        )
+          .reduce(
+            (memo, dom) => {
+              memo += dom.getBoundingClientRect().height
+              return memo
+            }, 0
+          )
+        // 如果总高度大于139，则显示省略号
+        this.showEllipsis = totalHeight > +this.maxHeight
+      })
+    }
+  },
+  render() {
+    // 如果数据不存在
+    if (!this.data || this.data.length === 0) {
+      return null
+    }
+    // 内容样式
+    const contentClassName = ['iov-pro-column-tooltip__container']
+    // 如果需要显示省略号
+    if (this.showEllipsis && this.ellipsis && this.overflow === 'hidden') {
+      contentClassName.push('ellipsis')
+    }
+    // 获取tooltip组件
+    const Tooltip = getComponentName('tooltip')
+    return (
+      <Tooltip
+        value={this.visible}
+        placement={this.placement}
+        effect={this.effect}
+        class='iov-pro-column-tooltip'
+        onInput={value => (this.visible = value)}
+      >
+        <div
+          slot='content'
+          ref='columnTooltipContent'
+          style={{
+            maxHeight: `${this.maxHeight}px`,
+            maxWidth: `${this.maxWidth}px`,
+            overflowY: this.overflow
+          }}
+          class={contentClassName.join(' ')}
+        >
+          { // 便利数据
+            this.data.map((item, index) => (
+              <div key={index} class='iov-pro-column-tooltip__wrapper'>{item}</div>
+            ))
+          }
+        </div>
+        <div class='iov-pro-column-tooltip__text'>{ this.displayText }</div>
+      </Tooltip>
+    )
+  }
+}
+</script>

package/src/packages/description/index.js

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