iov-pro-components 0.0.3

package/docs/components/icon.md

@@ -0,0 +1,406 @@
+# 图标 Icon
+
+## 线性风格
+
+### 方向指向类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in directionIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 提示建议类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in tipsIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 交换按钮类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in interactionIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 编辑类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in editIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 通用类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in commonIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 运算符类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in operationIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+## 实底风格
+
+### 方向指向类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in solidbaseDirectionIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 提示建议类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in solidbaseTipsIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 交互按钮类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in solidbaseInteractionIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+### 通用类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in solidbaseCommonIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+## 多色风格
+### 通用类
+
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in colorsCommonIcons" :key="icon" @dblclick="copyIconName(icon)">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template>
+
+<!-- ### 老的
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in icons" :key="icon">
+      <i :class="icon" />
+      <span class="icon-name">{{ icon }}</span>
+    </li>
+  </ul>
+</template> -->
+
+<script>
+export default {
+  data() {
+    return {
+      directionIcons: [
+        'iov-icon-arrow-prev',
+        'iov-icon-arrow-next',
+        'iov-icon-arrow-left',
+        'iov-icon-arrow-right',
+        'iov-icon-arrow-rise',
+        'iov-icon-arrow-drop',
+        'iov-icon-arrow-down',
+        'iov-icon-arrow-up',
+        'iov-icon-left',
+        'iov-icon-right',
+        'iov-icon-double-left',
+        'iov-icon-double-right',
+        'iov-icon-double-left-mini',
+        'iov-icon-double-right-mini',
+        'iov-icon-arrow-half-right',
+        'iov-icon-switch',
+        'iov-icon-change',
+        'iov-icon-move',
+        'iov-icon-rotate-right',
+        'iov-icon-rotate-left',
+      ],
+      tipsIcons: [
+        'iov-icon-plus',
+        'iov-icon-mines',
+        'iov-icon-separator',
+        'iov-icon-close',
+        'iov-icon-close-mini',
+        'iov-icon-circle-explain',
+        'iov-icon-circle-warning',
+        'iov-icon-circle-fail',
+        'iov-icon-circle-success',
+        'iov-icon-circle-waiting',
+        'iov-icon-circle-plus',
+        'iov-icon-circle-minus',
+      ],
+      interactionIcons: [
+        'iov-icon-download',
+        'iov-icon-upload',
+        'iov-icon-export',
+        'iov-icon-import',
+        'iov-icon-time',
+        'iov-icon-date',
+        'iov-icon-send',
+        'iov-icon-sync',
+        'iov-icon-search',
+        'iov-icon-eye',
+        'iov-icon-eye-close',
+        'iov-icon-batch-listing',
+        'iov-icon-delisting',
+      ],
+      editIcons: [
+        'iov-icon-edit',
+        'iov-icon-update',
+        'iov-icon-delete',
+        'iov-icon-connect',
+      ],
+      commonIcons: [
+        'iov-icon-view',
+        'iov-icon-language',
+        'iov-icon-message',
+        'iov-icon-skin',
+        'iov-icon-lock',
+        'iov-icon-logout',
+        'iov-icon-project',
+        'iov-icon-required',
+        'iov-icon-to',
+        'iov-icon-role',
+        'iov-icon-user-group',
+        'iov-icon-book',
+        'iov-icon-bill',
+        'iov-icon-not-allowed',
+        'iov-icon-link',
+        'iov-icon-apn',
+        'iov-icon-info',
+        'iov-icon-settlement',
+        'iov-icon-application',
+        'iov-icon-gauge',
+        'iov-icon-location',
+        'iov-icon-version',
+        'iov-icon-page',
+        'iov-icon-operate',
+        'iov-icon-module',
+        'iov-icon-company',
+        'iov-icon-coin',
+        'iov-icon-flow',
+        'iov-icon-contact',
+        'iov-icon-classification',
+        'iov-icon-chart',
+        'iov-icon-download-file',
+        'iov-icon-grouping-props',
+        'iov-icon-time-interval',
+        'iov-icon-goods',
+        'iov-icon-coupon',
+        'iov-icon-tag',
+        'iov-icon-process',
+        'iov-icon-history',
+        'iov-icon-cny',
+        'iov-icon-seal',
+        'iov-icon-play',
+        'iov-icon-img-default',
+        'iov-icon-drag',
+        'iov-icon-scale',
+        'iov-icon-focus',
+        'iov-icon-config',
+        'iov-icon-fullscreen',
+        'iov-icon-zoom-in',
+        'iov-icon-zoom-out',
+        'iov-icon-zoom-reset',
+        'iov-icon-tips',
+        'iov-icon-data-role',
+        'iov-icon-organize',
+        'iov-icon-computer',
+        'iov-icon-notice',
+        'iov-icon-monitor',
+        'iov-icon-interface',
+        'iov-icon-select',
+        'iov-icon-branch',
+        'iov-icon-code',
+        'iov-icon-brush',
+      ],
+      operationIcons: [
+        'iov-icon-brace-left',
+        'iov-icon-brace-right',
+        'iov-icon-parenthesis-left',
+        'iov-icon-parenthesis-right',
+        'iov-icon-symbol-plus',
+        'iov-icon-symbol-minus',
+        'iov-icon-symbol-times',
+        'iov-icon-symbol-div',
+        'iov-icon-infinite',
+      ],
+      solidbaseDirectionIcons: [
+        'iov-icon-page-left',
+        'iov-icon-page-right',
+        'iov-icon-page-up',
+        'iov-icon-page-down',
+        'iov-icon-fill-half-rise',
+        'iov-icon-fill-half-drop',
+        'iov-icon-fill-rise',
+        'iov-icon-fill-drop',
+        'iov-icon-fill-move-first',
+        'iov-icon-fill-move-last',
+        'iov-icon-fill-move-up',
+        'iov-icon-fill-move-down',
+        'iov-icon-menu-fold',
+      ],
+      solidbaseTipsIcons: [
+        'iov-icon-success',
+        'iov-icon-fail',
+        'iov-icon-fill-explain',
+        'iov-icon-fill-warning',
+        'iov-icon-fill-fail',
+        'iov-icon-fill-success',
+        'iov-icon-fill-waiting',
+      ],
+      solidbaseInteractionIcons: [
+        'iov-icon-zoom',
+        'iov-icon-setting',
+        'iov-icon-refresh',
+        'iov-icon-wand',
+        'iov-icon-fill-search',
+        'iov-icon-filter',
+        'iov-icon-sort-up',
+        'iov-icon-sort-down',
+        'iov-icon-horizontal-more',
+        'iov-icon-vertical-more',
+        'iov-icon-more',
+        'iov-icon-line-drag',
+        'iov-icon-swap'
+      ],
+      solidbaseCommonIcons: [
+        'iov-icon-dashboard',
+        'iov-icon-home',
+        'iov-icon-form',
+        'iov-icon-list',
+        'iov-icon-profile',
+        'iov-icon-fill-user',
+        'iov-icon-target',
+        'iov-icon-organize',
+      ],
+      // 多色的展示都不正确
+      colorsCommonIcons: [
+        'iov-icon-file-excel',
+        'iov-icon-file-word',
+        'iov-icon-file-pdf',
+        'iov-icon-file-ppt',
+        'iov-icon-file-img',
+        'iov-icon-file-zip',
+        'iov-icon-file-other',
+        'iov-icon-img-fail',
+        'iov-icon-img-placeholder',
+        'iov-icon-clear',
+        'iov-icon-clear-hover',
+        'iov-icon-unfold',
+        'iov-icon-fold',
+      ]
+    }
+  },
+  methods: {
+    // 双击复制类名
+    async copyIconName(iconName) {
+      try {
+        await navigator.clipboard.writeText(iconName)
+        this.$message.success('复制成功')
+      } catch (error) {
+        this.$message.error('复制失败')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.icon-wrapper {
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
+  color: #5e6d82;
+  font-size: 14px;
+  overflow: hidden;
+  list-style: none;
+  line-height: 2em;
+  margin: 10px 0;
+  padding: 0;
+}
+.icon-wrapper li {
+  align-items: center;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  float: left;
+  flex-direction: column;
+  justify-content: center;
+  width: 16.66%;
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+  color: #666;
+  font-size: 13px;
+  margin-right: -1px;
+  margin-bottom: -1px;
+}
+.icon-wrapper li:nth-child(6n) {
+  border-right: 0px;
+}
+.icon-wrapper li:hover i, .icon-wrapper li:hover .icon-name {
+  color: #2A68FF;
+}
+.icon-wrapper li i {
+  color: #606266;
+  display: block;
+  font-size: 32px;
+  margin-bottom: 8px;
+  transition: color .15s linear;
+}
+.icon-wrapper li .icon-name {
+  color: #99a9bf;
+  display: block;
+  line-height: normal;
+  padding: 0 3px;
+  height: 1em;
+  transition: color .15s linear;
+}
+</style>

package/docs/components/link-group.md

@@ -0,0 +1,39 @@
+# 表格按钮组 LinkGroup
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-link-group>
+    <el-link type="primary">新增</el-link>
+    <el-link type="primary">编辑</el-link>
+    <el-link type="primary">启用</el-link>
+    <el-link type="primary">删除</el-link>
+  </iov-pro-link-group>
+</template>
+```
+:::
+
+最多展示3个
+
+::: demo
+```html
+<template>
+  <iov-pro-link-group max="3">
+    <el-link type="primary">新增</el-link>
+    <el-link type="primary">编辑</el-link>
+    <el-link type="primary">启用</el-link>
+    <el-link type="primary">删除</el-link>
+  </iov-pro-link-group>
+</template>
+```
+:::
+
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| max | 最多展示按钮数量 | String/Number | -  | 2 |
+| space | 按钮间隔 | String/Number | - | - |

package/docs/components/page-detail.md

@@ -0,0 +1,48 @@
+# 页面详情 PageDetail
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-page-detail
+    name="页面标题"
+    icon="https://element.eleme.cn/favicon.ico"
+    desc="页面描述"
+    status-text="启用"
+    status-type="success"
+    :help="['创建人：张三', '创建时间：2025-03-28 10:10:10']"
+  />
+</template>
+```
+:::
+
+## 内部附加内容
+
+::: demo
+```html
+<template>
+  <iov-pro-page-detail
+    name="页面标题"
+    icon="https://element.eleme.cn/favicon.ico"
+    desc="页面描述"
+    status-text="启用"
+    status-type="success"
+    :help="['创建人：张三', '创建时间：2025-03-28 10:10:10']"
+  >
+    <div>需要附加的内容</div>
+  </iov-pro-page-detail>
+</template>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| name | 页面标题 | String | -  | - |
+| icon | 页面icon，支持 url，require 本地图片 | String | - | - |
+| desc | 页面描述信息 | String | - | - |
+| status-text | 状态tag文案 | String | - | - |
+| status-type | 状态tag类型 | String | - | - |
+| help | 右上角文案 | Array | - | - |

package/docs/components/page-module.md

@@ -0,0 +1,51 @@
+# 页面模块 PageModule
+
+## 基本使用
+
+::: demo
+```html
+<template>
+  <iov-pro-page-module name="页面模块">
+    <template #suffix>页面小标题</template>
+    <div>页面模块内容</div>
+  </iov-pro-page-module>
+</template>
+```
+:::
+
+## 显示返回按钮
+
+::: demo
+```html
+<template>
+  <iov-pro-page-module name="页面模块" show-back>
+    <template #suffix>页面小标题</template>
+    <div>页面模块内容</div>
+  </iov-pro-page-module>
+</template>
+```
+:::
+
+## 标题右侧展示按钮
+
+::: demo
+```html
+<template>
+  <iov-pro-page-module name="页面模块">
+    <template #suffix>页面小标题</template>
+    <template #help>
+      <el-button type="primary" round small icon="iov-icon-plus">新增</el-button>
+    </template>
+    <div>页面模块内容</div>
+  </iov-pro-page-module>
+</template>
+```
+:::
+
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| name | 模块标题 | String | -  | - |
+| isSub | 是否是小模块 | Boolean | - | false |