From 2b73f90a7f6a7603be7dbef040af7f5a6905b780 Mon Sep 17 00:00:00 2001
From: zhaojinfeng <121016171@qq.com>
Date: Sun, 23 Jul 2023 17:03:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=8F=E6=84=9F=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mask-text/index.vue | 47 ++++++++++++++++++++++++++++++++++++
 stories/MaskText.stories.ts  | 27 +++++++++++++++++++++
 types/auto-imports.d.ts      |  2 +-
 types/components.d.ts        |  1 +
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 packages/mask-text/index.vue
 create mode 100644 stories/MaskText.stories.ts

diff --git a/packages/mask-text/index.vue b/packages/mask-text/index.vue
new file mode 100644
index 0000000..7752c73
--- /dev/null
+++ b/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>
diff --git a/stories/MaskText.stories.ts b/stories/MaskText.stories.ts
new file mode 100644
index 0000000..6413d3d
--- /dev/null
+++ b/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 = {}
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
index 6cab96f..459da67 100644
--- a/types/auto-imports.d.ts
+++ b/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']
diff --git a/types/components.d.ts b/types/components.d.ts
index 5a9a5c1..d89108a 100644
--- a/types/components.d.ts
+++ b/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']