perf(web): 优化告警模板类型选项卡

aide-family · Apr 1, 2024 · 05ef04d · 05ef04d
1 parent 0563f83
commit 05ef04d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/web/src/apis/data.tsx b/web/src/apis/data.tsx
@@ -116,34 +116,40 @@ export const NotifyTemplateTypeData: Record<
     React.ReactNode
 > = {
     [NotifyTemplateType.NotifyTemplateTypeEmail]: (
-        <Button type="text" icon={<IconFont type="icon-youjian" />}>
+        <span>
+            <IconFont type="icon-youjian" />
             邮件
-        </Button>
+        </span>
     ),
     [NotifyTemplateType.NotifyTemplateTypeCustom]: (
-        <Button type="text" icon={<IconFont type="icon-zidingyi" />}>
+        <span>
+            <IconFont type="icon-zidingyi" />
             自定义hook
-        </Button>
+        </span>
     ),
     [NotifyTemplateType.NotifyTemplateTypeDingDing]: (
-        <Button type="text" icon={<IconFont type="icon-dingding" />}>
+        <span>
+            <IconFont type="icon-dingding" />
             钉钉
-        </Button>
+        </span>
     ),
     [NotifyTemplateType.NotifyTemplateTypeSms]: (
-        <Button type="text" icon={<IconFont type="icon-duanxin" />}>
+        <span>
+            <IconFont type="icon-duanxin" />
             短信
-        </Button>
+        </span>
     ),
     [NotifyTemplateType.NotifyTemplateTypeFeiShu]: (
-        <Button type="text" icon={<IconFont type="icon-feishu" />}>
+        <span>
+            <IconFont type="icon-feishu" />
             飞书
-        </Button>
+        </span>
     ),
     [NotifyTemplateType.NotifyTemplateTypeWeChatWork]: (
-        <Button type="text" icon={<IconFont type="icon-qiyeweixin" />}>
+        <span>
+            <IconFont type="icon-qiyeweixin" />
             企业微信
-        </Button>
+        </span>
     )
 }
 

diff --git a/web/src/components/Data/DataInput/DataInput.tsx b/web/src/components/Data/DataInput/DataInput.tsx
@@ -7,9 +7,18 @@ import type {
     InputProps,
     RadioGroupProps,
     RadioProps,
+    SegmentedProps,
     SelectProps
 } from 'antd'
-import { Input, Select, Radio, Checkbox, DatePicker, ColorPicker } from 'antd'
+import {
+    Input,
+    Select,
+    Radio,
+    Checkbox,
+    DatePicker,
+    ColorPicker,
+    Segmented
+} from 'antd'
 import { PasswordProps, TextAreaProps } from 'antd/lib/input'
 import FetchSelect, { FetchSelectProps } from '../FetchSelect'
 import TimeUintInput, { TimeUintInputProps } from '../TimeValue'
@@ -49,6 +58,10 @@ export type DataInputProps =
                 type: 'radio-group'
                 parentProps?: RadioGroupProps
             }
+          | {
+                type: 'segmented'
+                parentProps?: SegmentedProps
+            }
           | {
                 type: 'checkbox'
                 parentProps?: CheckboxProps
@@ -194,6 +207,16 @@ const DataInput: FC<DataInputProps> = (props) => {
                         {...parentProps}
                     />
                 )
+            case 'segmented':
+                return (
+                    <Segmented
+                        {...parentProps}
+                        value={value}
+                        defaultValue={defaultValue}
+                        onChange={onChange}
+                        options={parentProps?.options || []}
+                    />
+                )
             default:
                 return (
                     <Input

diff --git a/web/src/pages/home/monitor/strategy/options.tsx b/web/src/pages/home/monitor/strategy/options.tsx
@@ -1009,9 +1009,8 @@ export const bindNotifyTemplateDataFormOptions: DataFormItem[] = [
             tooltip: '配置不同通知对象的模板'
         },
         dataProps: {
-            type: 'select',
+            type: 'segmented',
             parentProps: {
-                placeholder: '请选择通知模板类型',
                 options: Object.entries(NotifyTemplateTypeData).map(
                     ([key, value]) => {
                         return {
@@ -1042,7 +1041,10 @@ export const bindNotifyTemplateDataFormOptions: DataFormItem[] = [
         dataProps: {
             type: 'template-auto-complete',
             parentProps: {
-                placeholder: '请输入通知模板内容'
+                placeholder: '请输入通知模板内容',
+                autoCompleteProps: {
+                    rows: 8
+                }
             }
         },
         rules: [