From e8c26025b4a33629dcc40f7eeb4d4617092ad2a7 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 1 Jun 2022 22:25:52 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=9B=BE=E6=A0=87=E6=8C=89=E9=92=AEda?=
 =?UTF-8?q?nger=E5=92=8CopenReconfirmModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/IconBtn.tsx     | 16 ++++++++++++----
 web/src/components/Modal.tsx       | 30 ++++++++++++++++++++++--------
 web/src/components/Problem.tsx     |  2 +-
 web/src/plugin/common/index.ts     |  6 ++++++
 web/src/plugin/component/index.tsx | 10 ++++++++++
 5 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/web/src/components/IconBtn.tsx b/web/src/components/IconBtn.tsx
index b7a2dcee..c2b7be2e 100644
--- a/web/src/components/IconBtn.tsx
+++ b/web/src/components/IconBtn.tsx
@@ -1,11 +1,9 @@
 import { Button, ButtonProps, Tooltip } from 'antd';
+import clsx from 'clsx';
 import React from 'react';
 import { isValidStr } from 'tailchat-shared';
 import { Icon } from './Icon';
 
-const btnClassName =
-  'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';
-
 type IconBtnShapeType = 'circle' | 'square';
 
 function calcShape(
@@ -35,7 +33,17 @@ export const IconBtn: React.FC<IconBtnProps> = React.memo(
     );
 
     const btnEl = (
-      <Button className={btnClassName} {...props} shape={shape} icon={iconEl} />
+      <Button
+        className={clsx(
+          'border-0 text-white text-opacity-80 hover:text-opacity-100',
+          props.danger
+            ? 'bg-red-600 bg-opacity-80 hover:bg-opacity-100'
+            : 'bg-black bg-opacity-20 hover:bg-opacity-60'
+        )}
+        {...props}
+        shape={shape}
+        icon={iconEl}
+      />
     );
 
     if (isValidStr(title)) {
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 017dea6f..cf1b704d 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -159,18 +159,16 @@ export function openModal(
   return key;
 }
 
-interface OpenReconfirmModalProps {
+interface OpenConfirmModalProps {
   onConfirm: () => void;
   onCancel?: () => void;
+  title?: string;
+  content?: string;
 }
-
-/**
- * 打开再次确认操作modal
- */
-export function openReconfirmModal(props: OpenReconfirmModalProps) {
+export function openConfirmModal(props: OpenConfirmModalProps) {
   const key = openModal(
-    <ModalWrapper title={t('确认要进行该操作么?')}>
-      <h3 className="text-center pb-6">{t('该操作无法被撤回')}</h3>
+    <ModalWrapper title={props.title ?? t('确认操作')}>
+      <h3 className="text-center pb-6">{props.content}</h3>
       <div className="space-x-2 text-right">
         <Button
           onClick={() => {
@@ -196,6 +194,22 @@ export function openReconfirmModal(props: OpenReconfirmModalProps) {
     }
   );
 }
+
+type OpenReconfirmModalProps = Pick<
+  OpenConfirmModalProps,
+  'onConfirm' | 'onCancel'
+>;
+/**
+ * 打开再次确认操作modal
+ */
+export function openReconfirmModal(props: OpenReconfirmModalProps) {
+  openConfirmModal({
+    onConfirm: props.onConfirm,
+    onCancel: props.onCancel,
+    title: t('确认要进行该操作么?'),
+    content: t('该操作无法被撤回'),
+  });
+}
 /**
  * 打开再次确认操作modal(Promise版本)
  * @example
diff --git a/web/src/components/Problem.tsx b/web/src/components/Problem.tsx
index 2fd45acd..182f0cf8 100644
--- a/web/src/components/Problem.tsx
+++ b/web/src/components/Problem.tsx
@@ -13,7 +13,7 @@ export const Problem: React.FC<ProblemProps> = React.memo((props) => {
     <div className="text-center w-full">
       <img className="w-32 h-32 m-auto mb-2" src={problemSvg} />
 
-      <p>{props.text}</p>
+      <div>{props.text}</div>
     </div>
   );
 });
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index b7962691..e78294b7 100644
--- a/web/src/plugin/common/index.ts
+++ b/web/src/plugin/common/index.ts
@@ -6,11 +6,17 @@
 import _pick from 'lodash/pick';
 export * from './reg';
 export { useGroupPanelParams } from '@/routes/Main/Content/Group/utils';
+
+/**
+ * @deprecated 从component引用
+ */
 export {
   openModal,
   closeModal,
   ModalWrapper,
   useModalContext,
+  openConfirmModal,
+  openReconfirmModal,
 } from '@/components/Modal';
 export { Loadable } from '@/components/Loadable';
 export { getGlobalState } from '@/utils/global-state-helper';
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index 1297e7e5..f7f304a2 100644
--- a/web/src/plugin/component/index.tsx
+++ b/web/src/plugin/component/index.tsx
@@ -9,10 +9,12 @@ export {
   Menu,
   Table,
   Switch,
+  Tooltip,
 } from 'antd';
 export const TextArea = Input.TextArea;
 export { Image } from '@/components/Image';
 export { Icon } from '@/components/Icon';
+export { IconBtn } from '@/components/IconBtn';
 export { PillTabs, PillTabPane } from '@/components/PillTabs';
 export { LoadingSpinner } from '@/components/LoadingSpinner';
 export {
@@ -29,6 +31,14 @@ export {
   DefaultFullModalInputEditorRender,
   DefaultFullModalTextAreaEditorRender,
 } from '@/components/FullModal/Field';
+export {
+  openModal,
+  closeModal,
+  ModalWrapper,
+  useModalContext,
+  openConfirmModal,
+  openReconfirmModal,
+} from '@/components/Modal';
 export { Loading } from '@/components/Loading';
 export { SidebarView } from '@/components/SidebarView';
 export { GroupPanelSelector } from '@/components/GroupPanelSelector';