feat(通知配置): 右侧文案样式优化

src/pages/device/Instance/index.tsx

@@ -67,6 +67,8 @@ const Instance = () => {
   const [bindKeys, setBindKeys] = useState<any[]>([]);
   const history = useHistory<Record<string, string>>();
   const { permission } = PermissionButton.usePermission('device/Instance');
+  const [jumpParams, setJumpParams] = useState<SearchTermsServer | undefined>(undefined);
+
   const intl = useIntl();
   const location = useLocation();
 
@@ -79,9 +81,12 @@ const Instance = () => {
           value: location.state[key],
         });
       });
-      setSearchParams({
-        terms: _terms,
-      });
+      setJumpParams([
+        {
+          terms: _terms,
+          type: 'or',
+        },
+      ]);
     }
   }, [location]);
 
@@ -194,7 +199,7 @@ const Instance = () => {
         id: 'pages.table.productName',
         defaultMessage: '产品名称',
       }),
-      dataIndex: 'productName',
+      dataIndex: 'productId',
       width: 200,
       ellipsis: true,
       valueType: 'select',
@@ -205,6 +210,7 @@ const Instance = () => {
         }
         return [];
       },
+      render: (_, row) => row.productName,
       filterMultiple: true,
     },
     {
@@ -274,6 +280,8 @@ const Instance = () => {
     },
   ];
 
+  console.log(jumpParams);
+
   const menu = (
     <Menu>
       <Menu.Item key="1">
@@ -391,6 +399,7 @@ const Instance = () => {
       <SearchComponent<DeviceInstance>
         field={columns}
         target="device-instance"
+        initParam={jumpParams}
         onSearch={(data) => {
           actionRef.current?.reset?.();
           setSearchParams(data);

src/pages/device/Product/index.tsx

@@ -198,12 +198,9 @@ const Product = observer(() => {
           defaultMessage: '是否删除?',
         }),
         onConfirm: async () => {
-          if (record.state === 0) {
-            await deleteItem(record.id);
-          } else {
-            message.error('已发布的产品不能进行删除操作');
-          }
+          await deleteItem(record.id);
         },
+        disabled: record.state === 1,
       }}
       tooltip={{
         title: intl.formatMessage({
@@ -498,12 +495,9 @@ const Product = observer(() => {
                     defaultMessage: '是否删除?',
                   }),
                   onConfirm: async () => {
-                    if (record.state === 0) {
-                      await deleteItem(record.id);
-                    } else {
-                      message.error('已发布的产品不能进行删除操作');
-                    }
+                    await deleteItem(record.id);
                   },
+                  disabled: record.state === 1,
                 }}
               >
                 <DeleteOutlined />

src/pages/notice/Config/Detail/doc/AliyunSms.tsx

@@ -1,37 +1,31 @@
 import { Image } from 'antd';
+import './index.less';
 
 const AliyunSms = () => {
   const accessKey = require('/public/images/notice/doc/config/aliyun-sms-voice/AccesskeyIDSecret.jpg');
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: '#e9eaeb',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+    <div className={'doc'}>
+      <div className={'url'}>
         阿里云管理控制台：
         <a href="https://home.console.aliyun.com">https://home.console.aliyun.com</a>
       </div>
-      <b>1. 概述</b>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div>1. RegionID</div>
+        <h2>1. RegionID</h2>
         <div>阿里云内部给每台机器设置的唯一编号。请根据购买的阿里云服务器地址进行填写。</div>
         <div>
           阿里云地域和可用区对照表地址：https://help.aliyun.com/document_detail/40654.html?spm=a2c6h.13066369.0.0.54a174710O7rWH
         </div>
       </div>
-      <b>2、AccesskeyID/Secret</b>
+      <h2>2. AccesskeyID/Secret</h2>
       <div>
         <div>用于程序通知方式调用云服务费API的用户标识和秘钥</div>
         <div>获取路径：“阿里云管理控制台”--“用户头像”--“”--“AccessKey管理”--“查看”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={accessKey} />
         </div>
       </div>

src/pages/notice/Config/Detail/doc/AliyunVoice.tsx

@@ -1,38 +1,32 @@
 import { Image } from 'antd';
+import './index.less';
 
 const AliyunVoice = () => {
   const accessKey = require('/public/images/notice/doc/config/aliyun-sms-voice/AccesskeyIDSecret.jpg');
 
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: '#e9eaeb',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+    <div className={'doc'}>
+      <div className={'url'}>
         阿里云管理控制台：
         <a href="https://home.console.aliyun.com">https://home.console.aliyun.com</a>
       </div>
-      <b>1. 概述</b>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div>1. RegionID</div>
+        <h2>1. RegionID</h2>
         <div>
           阿里云内部给每台机器设置的唯一编号。请根据购买的阿里云服务器阿里云地域和可用区对照表地址：https://help.aliyun.com/document_detail/40654.html?spm=a2c6h.13066369.0.0.54a174710O7rWH获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”
         </div>
       </div>
-      <b>2、AccesskeyID/Secret</b>
+      <h2>2、AccesskeyID/Secret</h2>
       <div>
         <div>用于程序通知方式调用云服务费API的用户标识和秘钥公众号开发者身份的密码</div>
         <div>获取路径：“阿里云管理控制台”--“用户头像”--“”--“AccessKey管理”--“查看”</div>
       </div>
-      <div>
+      <div className={'image'}>
         <Image width="100%" src={accessKey} />
       </div>
     </div>

src/pages/notice/Config/Detail/doc/DingTalk.tsx

@@ -1,40 +1,34 @@
 import { Image } from 'antd';
+import './index.less';
 
 const DingTalk = () => {
   const appKey = require('/public/images/notice/doc/config/dingTalk-message/01-AppKey.jpg');
   const appSecret = require('/public/images/notice/doc/config/dingTalk-message/02-AppSecret.jpg');
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: '#e9eaeb',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+    <div className={'doc'}>
+      <div className={'url'}>
         钉钉管理后台：<a href="https://open-dev.dingtalk.com">https://open-dev.dingtalk.com</a>
       </div>
-      <b>1. 概述</b>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div>1. AppKey</div>
+        <h2>1. AppKey</h2>
         <div>
           企业内部应用的唯一身份标识。在钉钉开发者后台创建企业内部应用后，系统会自动生成一对AppKey和AppSecret。
         </div>
         <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={appKey} />
         </div>
       </div>
-      <b>2. AppSecret</b>
+      <h2>2. AppSecret</h2>
       <div>
         <div>钉钉应用对应的调用密钥</div>
         <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={appSecret} />
         </div>
       </div>

src/pages/notice/Config/Detail/doc/DingTalkRebot.tsx

@@ -1,4 +1,5 @@
 import { Image } from 'antd';
+import './index.less';
 
 const DingTalkRebot = () => {
   const groupSetting = require('/public/images/notice/doc/config/dingTalk-rebot/01-group-setting.jpg');
@@ -7,25 +8,25 @@ const DingTalkRebot = () => {
 
   const webhook = require('/public/images/notice/doc/config/dingTalk-rebot/03-Webhook.jpg');
   return (
-    <div>
-      <b>1. 概述</b>
+    <div className={'doc'}>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div> 1. WebHook</div>
+        <h2> 1. WebHook</h2>
         <div>在钉钉群内每创建一个钉钉群自定义机器人都会产生唯一的WebHook地址。</div>
         <div>获取路径：“钉钉桌面客户端”--“群设置”--“智能群助手”--“机器人信息”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={rebot} />
         </div>
-        <div>1、登录钉钉桌面客户端，进入群设置</div>
-        <div>
+        <h2>1、登录钉钉桌面客户端，进入群设置</h2>
+        <div className={'image'}>
           <Image width="100%" src={groupSetting} />
         </div>
-        <div>2、点击智能群助手，查看机器人信息</div>
-        <div>
+        <h2>2、点击智能群助手，查看机器人信息</h2>
+        <div className={'image'}>
           <Image width="100%" src={webhook} />
         </div>
       </div>

src/pages/notice/Config/Detail/doc/Email.tsx

@@ -1,21 +1,23 @@
+import './index.less';
+
 const Email = () => {
   return (
-    <div>
-      <b>1. 概述</b>
+    <div className={'doc'}>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
-      <div>1. 服务器地址</div>
+      <h1>2.通知配置说明</h1>
+      <h2>1. 服务器地址</h2>
       <div>下拉可选择国内常用的邮箱服务配置，也支持手动输入其他地址。</div>
       <div>
         系统POP协议。POP允许电子邮件客户端下载服务器上的邮件，但是您在电子邮件客户端的操作（如：移动邮件、标记已读等），这是不会反馈到服务器上。
       </div>
-      <div>2、发件人</div>
+      <h2>2. 发件人</h2>
       <div>用于发送邮件时“发件人“信息的显示</div>
-      <div>3、用户名</div>
+      <h2>3. 用户名</h2>
       <div>用该账号进行发送邮件。</div>
-      <div>4、密码</div>
+      <h2>4. 密码</h2>
       <div>用与账号身份认证，认证通过后可通过该账号进行发送邮件。</div>
     </div>
   );

src/pages/notice/Config/Detail/doc/WeixinApp.tsx

@@ -1,39 +1,33 @@
 import { Image } from 'antd';
+import './index.less';
 
 const WeixinApp = () => {
   const appId = require('/public/images/notice/doc/config/weixin-official/01-AppID.jpg');
   const appSecret = require('/public/images/notice/doc/config/weixin-official/02-AppSecret.jpg');
 
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: '#e9eaeb',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+    <div className={'doc'}>
+      <div className={'url'}>
         微信公众平台：<a href="https://mp.weixin.qq.com/">https://mp.weixin.qq.com/</a>
       </div>
-      <b>1. 概述</b>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div>1. AppID</div>
+        <h2>1. AppID</h2>
         <div>微信服务号的唯一专属编号。</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={appId} />
         </div>
       </div>
-      <b>2. AppSecret</b>
+      <h2>2. AppSecret</h2>
       <div>
         <div>公众号开发者身份的密码</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={appSecret} />
         </div>
       </div>

src/pages/notice/Config/Detail/doc/WeixinCorp.tsx

@@ -1,39 +1,33 @@
 import { Image } from 'antd';
+import './index.less';
 
 const WeixinCorp = () => {
   const corpId = require('/public/images/notice/doc/config/weixin-corp/01-corpId.jpg');
   const corpSecret = require('/public/images/notice/doc/config/weixin-corp/02-corpSecret.jpg');
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: '#e9eaeb',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+    <div className={'doc'}>
+      <div className={'url'}>
         企业微信管理后台：<a href="https://work.weixin.qq.com">https://work.weixin.qq.com</a>
       </div>
-      <b>1. 概述</b>
+      <h1>1. 概述</h1>
       <div>
         通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
       </div>
-      <b>2.通知配置说明</b>
+      <h1>2.通知配置说明</h1>
       <div>
-        <div>1. corpId</div>
+        <h2>1. corpId</h2>
         <div>企业号的唯一专属编号。</div>
         <div>获取路径：“企业微信”管理后台--“我的企业”--“企业ID”</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={corpId} />
         </div>
       </div>
 
-      <b>2. corpSecret</b>
+      <h2>2. corpSecret</h2>
       <div>
         <div>应用的唯一secret,一个企业微信中可以有多个corpSecret</div>
         <div>获取路径：“企业微信”--“应用与小程序”--“自建应用”中获取</div>
-        <div>
+        <div className={'image'}>
           <Image width="100%" src={corpSecret} />
         </div>
       </div>

src/pages/notice/Config/Detail/doc/index.less

@@ -0,0 +1,33 @@
+.doc {
+  padding: 24px;
+  color: rgba(#000, 0.8);
+  font-size: 14px;
+  background-color: #fafafa;
+
+  .url {
+    padding: 8px 16px;
+    color: #2f54eb;
+    background-color: rgba(#a7bdf7, 0.2);
+  }
+
+  h1 {
+    margin: 16px 0;
+    color: rgba(#000, 0.85);
+    font-weight: bold;
+    font-size: 14px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h2 {
+    margin: 6px 0;
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 14px;
+  }
+
+  .image {
+    margin: 16px 0;
+  }
+}