优化

client/packages/design/components/SensitiveText/index.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { SensitiveText } from '.';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Tailchat/SensitiveText',
+  component: SensitiveText,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof SensitiveText>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof SensitiveText> = (args) => (
+  <SensitiveText {...args} />
+);
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  text: 'fooooo',
+};

client/packages/design/components/SensitiveText/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+
+interface SensitiveTextProps {
+  className?: string;
+  text: string;
+}
+export const SensitiveText: React.FC<SensitiveTextProps> = React.memo(
+  (props) => {
+    const { className, text } = props;
+    const [show, setShow] = useState(false);
+
+    return (
+      <div
+        className={className}
+        style={{ display: 'flex', alignItems: 'center' }}
+      >
+        {show ? text : getMaskedText(text)}
+
+        <Icon
+          style={{ cursor: 'pointer', marginLeft: 4 }}
+          icon={show ? 'mdi:eye-off-outline' : 'mdi:eye-outline'}
+          onClick={() => setShow((before) => !before)}
+        />
+      </div>
+    );
+  }
+);
+SensitiveText.displayName = 'SensitiveText';
+
+function getMaskedText(text: string) {
+  const len = text.length;
+  if (len > 2) {
+    return `${text[0]}****${text[len - 1]}`;
+  } else if (len === 2) {
+    return `${text[0]}*`;
+  } else {
+    return '**';
+  }
+}