feat(doc): doc image preview

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const AliyunSms = () => {
   const accessKey = require('/public/images/notice/doc/config/aliyun-sms-voice/AccesskeyIDSecret.jpg');
   return (
@@ -30,7 +32,7 @@ const AliyunSms = () => {
         <div>用于程序通知方式调用云服务费API的用户标识和秘钥</div>
         <div>获取路径：“阿里云管理控制台”--“用户头像”--“”--“AccessKey管理”--“查看”</div>
         <div>
-          <img style={{ width: '100%' }} src={accessKey} alt="accessKey" />
+          <Image width="100%" src={accessKey} />
         </div>
       </div>
     </div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const AliyunVoice = () => {
   const accessKey = require('/public/images/notice/doc/config/aliyun-sms-voice/AccesskeyIDSecret.jpg');
 
@@ -31,7 +33,7 @@ const AliyunVoice = () => {
         <div>获取路径：“阿里云管理控制台”--“用户头像”--“”--“AccessKey管理”--“查看”</div>
       </div>
       <div>
-        <img style={{ width: '100%' }} src={accessKey} alt="accessKey" />
+        <Image width="100%" src={accessKey} />
       </div>
     </div>
   );

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 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');
@@ -25,7 +27,7 @@ const DingTalk = () => {
         </div>
         <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
         <div>
-          <img style={{ width: '100%' }} src={appKey} alt="appKey" />
+          <Image width="100%" src={appKey} />
         </div>
       </div>
       <b>2. AppSecret</b>
@@ -33,7 +35,7 @@ const DingTalk = () => {
         <div>钉钉应用对应的调用密钥</div>
         <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
         <div>
-          <img style={{ width: '100%' }} src={appSecret} alt="appSecret" />
+          <Image width="100%" src={appSecret} />
         </div>
       </div>
     </div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const DingTalkRebot = () => {
   const groupSetting = require('/public/images/notice/doc/config/dingTalk-rebot/01-group-setting.jpg');
 
@@ -16,15 +18,15 @@ const DingTalkRebot = () => {
         <div>在钉钉群内每创建一个钉钉群自定义机器人都会产生唯一的WebHook地址。</div>
         <div>获取路径：“钉钉桌面客户端”--“群设置”--“智能群助手”--“机器人信息”</div>
         <div>
-          <img style={{ width: '100%' }} src={rebot} alt="rebot" />
+          <Image width="100%" src={rebot} />
         </div>
         <div>1、登录钉钉桌面客户端，进入群设置</div>
         <div>
-          <img style={{ width: '100%' }} src={groupSetting} alt="groupSetting" />
+          <Image width="100%" src={groupSetting} />
         </div>
         <div>2、点击智能群助手，查看机器人信息</div>
         <div>
-          <img style={{ width: '100%' }} src={webhook} alt="webhook" />
+          <Image width="100%" src={webhook} />
         </div>
       </div>
     </div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 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');
@@ -24,7 +26,7 @@ const WeixinApp = () => {
         <div>微信服务号的唯一专属编号。</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
         <div>
-          <img style={{ width: '100%' }} src={appId} alt="appId" />
+          <Image width="100%" src={appId} />
         </div>
       </div>
       <b>2. AppSecret</b>
@@ -32,7 +34,7 @@ const WeixinApp = () => {
         <div>公众号开发者身份的密码</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
         <div>
-          <img style={{ width: '100%' }} src={appSecret} alt="appSercet" />
+          <Image width="100%" src={appSecret} />
         </div>
       </div>
     </div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 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');
@@ -23,7 +25,7 @@ const WeixinCorp = () => {
         <div>企业号的唯一专属编号。</div>
         <div>获取路径：“企业微信”管理后台--“我的企业”--“企业ID”</div>
         <div>
-          <img style={{ width: '100%' }} src={corpId} alt="corpId" />
+          <Image width="100%" src={corpId} />
         </div>
       </div>
 
@@ -32,7 +34,7 @@ const WeixinCorp = () => {
         <div>应用的唯一secret,一个企业微信中可以有多个corpSecret</div>
         <div>获取路径：“企业微信”--“应用与小程序”--“自建应用”中获取</div>
         <div>
-          <img style={{ width: '100%' }} src={corpSecret} alt="corpSecret" />
+          <Image width="100%" src={corpSecret} />
         </div>
       </div>
     </div>

src/pages/notice/Config/Detail/index.tsx

@@ -120,6 +120,7 @@ const Detail = observer(() => {
     properties: {
       name: {
         title: '名称',
+        required: true,
         'x-component': 'Input',
         'x-decorator': 'FormItem',
       },
@@ -152,6 +153,7 @@ const Detail = observer(() => {
                 title: 'corpId',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
+                required: true,
                 // 企业消息
                 'x-reactions': {
                   dependencies: ['provider'],
@@ -161,11 +163,18 @@ const Detail = observer(() => {
                     },
                   },
                 },
+                'x-component-props': {
+                  placeholder: '请输入corpId',
+                },
               },
               corpSecret: {
                 title: 'corpSecret',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入corpSecret',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -178,7 +187,11 @@ const Detail = observer(() => {
               appId: {
                 title: 'appID',
                 'x-component': 'Input',
+                required: true,
                 'x-decorator': 'FormItem',
+                'x-component-props': {
+                  placeholder: '请输入appId',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -191,7 +204,11 @@ const Detail = observer(() => {
               secret: {
                 title: 'AppSecret',
                 'x-component': 'Input',
+                required: true,
                 'x-decorator': 'FormItem',
+                'x-component-props': {
+                  placeholder: '请输入secret',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -212,7 +229,10 @@ const Detail = observer(() => {
                 title: 'AppKey',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 钉钉消息通知
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入AppKey',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -226,7 +246,10 @@ const Detail = observer(() => {
                 title: 'AppSecret',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 钉钉消息通知
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入AppSecret',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -240,7 +263,10 @@ const Detail = observer(() => {
                 title: 'webHook',
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
-                // 群机器人
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入webhook',
+                },
                 'x-reactions': {
                   dependencies: ['provider'],
                   fulfill: {
@@ -257,18 +283,30 @@ const Detail = observer(() => {
             type: 'void',
             'x-visible': id === 'voice' || id === 'sms',
             properties: {
-              RegionId: {
+              regionId: {
                 title: 'regionId',
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入regionId',
+                },
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
               },
-              AccessKeyId: {
+              accessKeyId: {
                 title: 'accessKeyId',
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入accessKeyId',
+                },
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
               },
-              Secret: {
+              secret: {
                 title: 'secret',
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入secret',
+                },
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
               },
@@ -290,11 +328,19 @@ const Detail = observer(() => {
                 properties: {
                   host: {
                     // title: '服务器地址',
+                    required: true,
+                    'x-component-props': {
+                      placeholder: '请输入服务器地址',
+                    },
                     'x-component': 'Input',
                     'x-decorator': 'FormItem',
                   },
                   port: {
                     // title: '端口',
+                    required: true,
+                    'x-component-props': {
+                      placeholder: '请输入端口',
+                    },
                     'x-component': 'NumberPicker',
                     'x-decorator': 'FormItem',
                   },
@@ -309,16 +355,28 @@ const Detail = observer(() => {
               },
               sender: {
                 title: '发件人',
+                required: true,
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
+                'x-component-props': {
+                  placeholder: '请输入发件人',
+                },
               },
               username: {
                 title: '用户名',
+                required: true,
                 'x-component': 'Input',
+                'x-component-props': {
+                  placeholder: '请输入用户名',
+                },
                 'x-decorator': 'FormItem',
               },
               password: {
                 title: '密码',
+                required: true,
+                'x-component-props': {
+                  placeholder: '请输入密码',
+                },
                 'x-component': 'Input',
                 'x-decorator': 'FormItem',
               },

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const DingTalk = () => {
   const agentId = require('/public/images/notice/doc/template/dingTalk-message/01-Agentid.jpg');
   const userId = require('/public/images/notice/doc/template/dingTalk-message/02-user-id.jpg');
@@ -26,7 +28,7 @@ const DingTalk = () => {
       <div> 2. Agentid</div>
       <div> 应用唯一标识</div>
       <div>
-        <img style={{ width: '100%' }} src={agentId} alt="agentId" />
+        <Image width="100%" src={agentId} />
       </div>
       <div> 获取路径：“钉钉开发平台”--“应用开发”--“查看应用”</div>
       <div> 3. 收信人ID、收信部门ID</div>
@@ -36,8 +38,8 @@ const DingTalk = () => {
       <div> 收信人ID获取路径：“钉钉管理后台”--“通讯录”--“查看用户”</div>
       <div> 收信部门ID获取路径：“钉钉管理后台”--“通讯录”--“编辑部门”</div>
       <div>
-        <img style={{ width: '100%' }} src={userId} alt="userId" />
-        <img style={{ width: '100%' }} src={dept} alt="dept" />
+        <Image width="100%" src={userId} />
+        <Image width="100%" src={dept} />
       </div>
       <div> 4. 模板内容</div>
       <div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const DingTalkRebot = () => {
   const text = require('/public/images/notice/doc/template/dingTalk-rebot/01-text.jpg');
   const markdown = require('/public/images/notice/doc/template/dingTalk-rebot/02-markdown.jpg');
@@ -26,9 +28,9 @@ const DingTalkRebot = () => {
         <div> 2、消息类型</div>
         <div> 目前支持text、markdown、link3种，对应的发送效果示例，如下图：</div>
         <div>
-          <img style={{ width: '100%' }} src={text} alt="text" />
-          <img style={{ width: '100%' }} src={markdown} alt="markdown" />
-          <img style={{ width: '100%' }} src={link} alt="link" />
+          <Image width="100%" src={text} />
+          <Image width="100%" src={markdown} />
+          <Image width="100%" src={link} />
         </div>
         <div> 3. 模板内容</div>
         <div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const WeixinApp = () => {
   const agentId = require('/public/images/notice/doc/template/weixin-official/01-Agentid.jpg');
   const appId = require('/public/images/notice/doc/template/weixin-official/02-mini-Program-Appid.jpg');
@@ -24,7 +26,7 @@ const WeixinApp = () => {
         <div>微信服务号的唯一专属编号。</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
         <div>
-          <img style={{ width: '100%' }} src={agentId} alt="agentId" />
+          <Image width="100%" src={agentId} />
         </div>
       </div>
       <b>2. AppSecret</b>
@@ -32,7 +34,7 @@ const WeixinApp = () => {
         <div>公众号开发者身份的密码</div>
         <div>获取路径：“微信公众平台”管理后台--“设置与开发”--“基本配置”</div>
         <div>
-          <img style={{ width: '100%' }} src={appId} alt="appId" />
+          <Image width="100%" src={appId} />
         </div>
       </div>
     </div>

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

@@ -1,3 +1,5 @@
+import { Image } from 'antd';
+
 const WeixinCorp = () => {
   const agentId = require('/public/images/notice/doc/template/weixin-corp/01-Agentid.jpg');
   const userId = require('/public/images/notice/doc/template/weixin-corp/02-userID.jpg');
@@ -28,7 +30,7 @@ const WeixinCorp = () => {
         <div> 应用唯一标识</div>
         <div> 获取路径：“企业微信”管理后台--“应用管理”--“应用”--“查看应用”</div>
         <div>
-          <img style={{ width: '100%' }} src={agentId} alt="agentId" />
+          <Image width="100%" src={agentId} />
         </div>
         <div> 3. 收信人ID、收信部门ID、标签推送</div>
         <div>
@@ -37,9 +39,9 @@ const WeixinCorp = () => {
         <div> 收信人ID获取路径：【通讯录】-{'>'}【成员信息】查看成员账号</div>
         <div> 收信部门ID获取路径：【通讯录】-{'>'}【部门信息】查看部门ID</div>
         <div>
-          <img style={{ width: '100%' }} src={userId} alt="userId" />
-          <img style={{ width: '100%' }} src={toDept} alt="toDept" />
-          <img style={{ width: '100%' }} src={toTags} alt="toTags" />
+          <Image width="100%" src={userId} />
+          <Image width="100%" src={toDept} />
+          <Image width="100%" src={toTags} />
         </div>
       </div>
     </div>