chore: chat hooks

2025-02-19 20:50:32 +08:00
parent 9e0634f449
commit f1ab927a7e
16 changed files with 827 additions and 756 deletions
@@ -0,0 +1,58 @@
+.alert-info-block {
+  padding: 6px 10px;
+  position: relative;
+  padding-top: 35px;
+  text-align: center;
+  border-radius: var(--border-radius-base);
+  margin: 0;
+  border: 1px solid transparent;
+
+  .ant-typography {
+    margin-bottom: 0;
+  }
+
+  &.danger {
+    border-color: var(--ant-color-error-border);
+    background-color: var(--ant-color-error-bg);
+  }
+
+  &.warning {
+    border-color: var(--ant-color-warning-border);
+    background-color: var(--ant-color-warning-bg);
+  }
+
+  .title {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    height: 30px;
+    width: 100%;
+    padding: 5px 10px;
+    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
+
+    &.danger {
+      background-color: var(--ant-color-error-bg-hover);
+    }
+
+    &.warning {
+      background-color: var(--ant-color-warning-bg-hover);
+    }
+
+    .info-icon {
+      margin-right: 8px;
+
+      &.danger {
+        color: var(--ant-color-error);
+      }
+
+      &.warning {
+        color: var(--ant-color-warning);
+      }
+    }
+
+    .text {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}
@@ -0,0 +1,48 @@
+import { WarningFilled } from '@ant-design/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import './block.less';
+interface AlertInfoProps {
+  type: 'danger' | 'warning';
+  message: string;
+  rows?: number;
+  icon?: React.ReactNode;
+  ellipsis?: boolean;
+  style?: React.CSSProperties;
+  title: React.ReactNode;
+}
+
+const AlertInfo: React.FC<AlertInfoProps> = (props) => {
+  const { message, type, rows = 1, ellipsis, style, title } = props;
+
+  return (
+    <>
+      {message ? (
+        <div
+          className={classNames('alert-info-block', type)}
+          style={{ ...style }}
+        >
+          <Typography.Paragraph
+            ellipsis={
+              ellipsis !== undefined
+                ? ellipsis
+                : {
+                    rows: rows,
+                    tooltip: message
+                  }
+            }
+          >
+            <div className={classNames('title', type)}>
+              <WarningFilled className={classNames('info-icon', type)} />
+              <span className="text">{title}</span>
+            </div>
+            {message}
+          </Typography.Paragraph>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default React.memo(AlertInfo);