From 9220fd15ff88d38214f6dc3592c95dc32bd5095c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 28 Mar 2022 21:36:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20FullModalField=20=E5=A2=9E=E5=8A=A0tip?=
 =?UTF-8?q?=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FullModal/Field.tsx | 17 +++++++++++++++--
 web/src/components/TipIcon.tsx         | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/TipIcon.tsx

diff --git a/web/src/components/FullModal/Field.tsx b/web/src/components/FullModal/Field.tsx
index d137feed..e67409c3 100644
--- a/web/src/components/FullModal/Field.tsx
+++ b/web/src/components/FullModal/Field.tsx
@@ -5,6 +5,7 @@ import { Input, Space } from 'antd';
 import { t } from 'tailchat-shared';
 import { DelayTip } from '../DelayTip';
 import { IconBtn } from '../IconBtn';
+import { TipIcon } from '../TipIcon';
 
 export type FullModalFieldEditorRenderComponent = React.FC<{
   value: string;
@@ -17,6 +18,11 @@ interface FullModalFieldProps {
    */
   title: React.ReactNode;
 
+  /**
+   * 提示信息
+   */
+  tip: React.ReactNode;
+
   /**
    * 字段内容
    * 如果没有则向下取value的值
@@ -116,8 +122,15 @@ export const FullModalField: React.FC<FullModalFieldProps> = React.memo(
 
     return (
       <div className="mb-4">
-        <div className="text-xs text-gray-400 mb-2">{props.title}</div>
-        <div className="h-10 text-base truncate">
+        <div className="text-xs text-gray-400 mb-2 flex items-center">
+          <span>{props.title}</span>
+          {props.tip && (
+            <span className="ml-1 text-sm">
+              <TipIcon content={props.tip} />
+            </span>
+          )}
+        </div>
+        <div className="min-h-10 text-base truncate">
           {allowEditor === true ? (
             <FullModalFieldEditor {...props} />
           ) : (
diff --git a/web/src/components/TipIcon.tsx b/web/src/components/TipIcon.tsx
new file mode 100644
index 00000000..23455e4f
--- /dev/null
+++ b/web/src/components/TipIcon.tsx
@@ -0,0 +1,14 @@
+import { Icon } from './Icon';
+import React from 'react';
+import { DelayTip } from './DelayTip';
+
+export const TipIcon: React.FC<{
+  content: React.ReactNode;
+}> = React.memo(({ content }) => {
+  return (
+    <DelayTip overlay={content}>
+      <Icon icon="mdi:alert-circle-outline" />
+    </DelayTip>
+  );
+});
+TipIcon.displayName = 'TipIcon';