feat: 敏感数据隐藏组件

packages/mask-text/index.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-23 16:27:37
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-23 17:03:29
+ * @FilePath: \vue3\packages\mask-text\index.vue
+ * @Description: 敏感数据隐藏组件
+ *
+-->
+<template>
+  <span :class="{ 'cursor-help': value }" @click="toggle(true)">
+    {{ data }}
+  </span>
+</template>
+
+<script lang="ts" setup name="ThMaskText">
+const props = withDefaults(defineProps<{
+  /** 带隐藏的文字 */
+  text?: string
+  /** 左侧可见的位数 */
+  left?: number
+  /** 右侧可见的位数 */
+  right?: number
+}>(), { left: 0, right: 0 })
+
+const [value, toggle] = useToggle(false)
+
+const data = computed(() => {
+  const left = props.left < 0 ? 0 : props.left
+  const right = props.right < 0 ? 0 : props.right
+  const textLength = props.text.length
+  if (!props.text
+    || left > textLength
+    || right > textLength
+    || right + left > textLength
+    || value.value
+  )
+    return props.text
+  const rightIndex = textLength - right
+  const centerLength = textLength - right - left
+  const leftText = props.text.slice(0, left)
+  const centerText = '*'.repeat(centerLength)
+  const rightText = props.text.slice(rightIndex)
+
+  return leftText + centerText + rightText
+})
+</script>

stories/MaskText.stories.ts

@@ -0,0 +1,27 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-23 16:27:37
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-23 16:39:56
+ * @FilePath: \vue3\stories\MaskText.stories.ts
+ * @Description:
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThMaskText from '../packages/mask-text/index.vue'
+
+const meta = {
+  title: '数据展示/MaskText',
+  component: ThMaskText,
+  tags: ['autodocs'],
+  args: {
+    text: '1234567890',
+    left: 2,
+    right: 2,
+  },
+} satisfies Meta<typeof ThMaskText>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {}

types/auto-imports.d.ts

@@ -4,8 +4,8 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const $: typeof import('vue/macros')['$']
   const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
   const $computed: typeof import('vue/macros')['$computed']
   const $customRef: typeof import('vue/macros')['$customRef']
   const $ref: typeof import('vue/macros')['$ref']

types/components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Header: typeof import('./../packages/header/index.vue')['default']
+    MaskText: typeof import('./../packages/mask-text/index.vue')['default']
     PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default']
     PreviewOfficeView: typeof import('./../packages/preview-office-view/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']