Merge pull request #48 from WeBankFinTech/branch_joy

feat: 新增columnTip组件

Author: mayinrain

docs/.vitepress/components/BMetricTip/index.md

@@ -0,0 +1,18 @@
+# BTagsPanel
+图标悬浮提示说明
+
+## 组件注册
+
+```js
+import { BMetricTip } from '@fesjs/traction-widget';
+app.use(BMetricTip);
+```
+## 代码演示
+### 基础用法
+使用场景：
+1. 常规文字后追加
+2. 在表格的列名后追加，说明列名含义
+
+--USE
+
+--CODE

docs/.vitepress/components/BMetricTip/use.vue

@@ -0,0 +1,43 @@
+<template>
+    <span>
+        一个表格
+        <BMetricTip tipText="一个表格的描述"></BMetricTip>
+    </span>
+    <f-table :data="tableShowLists">
+        <f-table-column prop="id" label="ID" :width="80" ellipsis />
+        <f-table-column prop="cn_name" :width="160" ellipsis>
+            <template #header>
+                中文名称
+                <BMetricTip :tipText="tipText"></BMetricTip>
+            </template>
+        </f-table-column>
+        <f-table-column prop="en_name" :width="160" ellipsis>
+            <template #header>
+                英文名称
+                <BMetricTip :tipText="tipTextEn"></BMetricTip>
+            </template>
+        </f-table-column>
+    </f-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BMetricTip } from '@fesjs/traction-widget';
+import { FTable, FTableColumn } from '@fesjs/fes-design';
+
+console.log('MetricTip 加载')
+const tipText = "这是中文名称的描述"
+const tipTextEn = "这是英文名称的描述这是英文名称的描述，这是英文名称的描述这是英文名称的描述，这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述这是英文名称的描述"
+const tableShowLists = ref([
+    {
+        id: 'id1',
+        cn_name: '张三',
+        en_name: 'zhansan'
+    },
+    {
+        id: 'id2',
+        cn_name: '李四',
+        en_name: 'lisi'
+    },
+])
+
+</script>

docs/.vitepress/config.js

@@ -93,6 +93,7 @@ export default defineConfig({
                         { text: 'BTableHeaderConfig', link: '/components/BTableHeaderConfig' },
                         { text: 'BSearch', link: '/components/BSearch' },
                         { text: 'BDynamicForms', link: '/components/BDynamicForms'},
+                        { text: 'BMetricTip', link: '/components/BMetricTip'},
                     ]
                 },
                 {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.9.5",
+  "version": "1.10.0",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
     "docs:dev": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress dev docs",

packages/traction-widget/components/MetricTip/MetricTip.vue

@@ -0,0 +1,26 @@
+<template>
+    <span class="wd-column-tip">
+        <FTooltip mode="popover">
+            <InfoCircleOutlined class="wd-hint-icon-column" />
+            <template #content>
+                <div style="width: 300px;">
+                    {{tipText}}
+                </div>
+            </template>
+        </FTooltip>
+    </span>
+</template>
+<script setup>
+import {
+    defineProps
+} from 'vue';
+import { InfoCircleOutlined } from '@fesjs/fes-design/icon';
+import { FTooltip } from '@fesjs/fes-design';
+
+defineProps({
+    tipText: {
+        type: String,
+        default: ''
+    }
+});
+</script>

packages/traction-widget/components/MetricTip/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '../_util/withInstall';
+import MetricTip from './MetricTip.vue';
+
+import type { SFCWithInstall } from '../_util/interface';
+
+type MetricTipType = SFCWithInstall<typeof MetricTip>;
+export const BMetricTip = withInstall<MetricTipType>(MetricTip as MetricTipType);
+
+export default BMetricTip;

packages/traction-widget/components/MetricTip/style/index.less

@@ -0,0 +1,10 @@
+.wd-column-tip {
+    position:relative;
+    .wd-hint-icon-column {
+        position: absolute;
+        transform: translateY(-50%);
+        top: 55%;
+        color: #B7B7BC;
+        margin: 0px 6px;
+    }
+  }

packages/traction-widget/components/MetricTip/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

packages/traction-widget/components/_style.ts

@@ -8,3 +8,4 @@ import './TablePage/style';
 import './TagSelector/style';
 import './VerticalLayout/style';
 import './TagsPanel/style';
+import './MetricTip/style';

packages/traction-widget/components/index.ts

@@ -9,6 +9,7 @@ import { BSearch } from './Search';
 import { BTablePage } from './TablePage';
 import { BNavBar } from './NavBar';
 import { BNavHeader } from './NavHeader';
+import { BMetricTip } from './MetricTip';
 
 const components = [
     BTagsPanel,
@@ -19,7 +20,8 @@ const components = [
     BSearch,
     BTablePage,
     BNavBar,
-    BNavHeader
+    BNavHeader,
+    BMetricTip
 ];
 
 const install = (app: any): any => {
@@ -46,7 +48,8 @@ export {
     BSearch,
     BTablePage,
     BNavBar,
-    BNavHeader
+    BNavHeader,
+    BMetricTip
 };
 
 export default {
@@ -66,5 +69,6 @@ export default {
     BSearch,
     BTablePage,
     BNavBar,
-    BNavHeader
+    BNavHeader,
+    BMetricTip
 };