style: 图标按钮danger和openReconfirmModal

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)) {

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;
 }
-
+export function openConfirmModal(props: OpenConfirmModalProps) {
-/**
- * 打开再次确认操作modal
- */
-export function openReconfirmModal(props: OpenReconfirmModalProps) {
   const key = openModal(
-    <ModalWrapper title={t('确认要进行该操作么?')}>
+    <ModalWrapper title={props.title ?? t('确认操作')}>
-      <h3 className="text-center pb-6">{t('该操作无法被撤回')}</h3>
+      <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

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>
   );
 });

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';

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';