diff --git a/src/views/notice/Config/Detail/doc/DingTalk.tsx b/src/views/notice/Config/Detail/doc/DingTalk.tsx
new file mode 100644
index 00000000..9e28894f
--- /dev/null
+++ b/src/views/notice/Config/Detail/doc/DingTalk.tsx
@@ -0,0 +1,50 @@
+import { Image } from 'ant-design-vue';
+import './index.less';
+import { getImage } from '@/utils/comm';
+
+const DingTalk = () => {
+    const appKey = getImage(
+        '/notice/doc/config/dingTalk-message/01-AppKey.jpg',
+    );
+    const appSecret = getImage(
+        '/notice/doc/config/dingTalk-message/02-AppSecret.jpg',
+    );
+    return (
+        <div class={'doc'}>
+            <div class={'url'}>
+                钉钉开放平台：
+                <a
+                    href="https://open-dev.dingtalk.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    https://open-dev.dingtalk.com
+                </a>
+            </div>
+            <h1>1. 概述</h1>
+            <div>
+                通知配置可以结合通知配置为告警消息通知提供支撑。也可以用于系统中其他自定义模块的调用。
+            </div>
+            <h1>2.通知配置说明</h1>
+            <div>
+                <h2>1、AppKey</h2>
+                <div>
+                    企业内部应用的唯一身份标识。在钉钉开发者后台创建企业内部应用后，系统会自动生成一对AppKey和AppSecret。
+                </div>
+                <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
+                <div class={'image'}>
+                    <Image width="100%" src={appKey} />
+                </div>
+            </div>
+            <h2>2、AppSecret</h2>
+            <div>
+                <div>钉钉应用对应的调用密钥</div>
+                <div>获取路径：“钉钉开放平台”--“应用开发”--“应用信息”</div>
+                <div class={'image'}>
+                    <Image width="100%" src={appSecret} />
+                </div>
+            </div>
+        </div>
+    );
+};
+export default DingTalk;
diff --git a/src/views/notice/Config/Detail/doc/index.less b/src/views/notice/Config/Detail/doc/index.less
new file mode 100644
index 00000000..995762cb
--- /dev/null
+++ b/src/views/notice/Config/Detail/doc/index.less
@@ -0,0 +1,35 @@
+.doc {
+  height: 750px;
+  padding: 24px;
+  overflow-y: auto;
+  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;
+  }
+}
diff --git a/src/views/notice/Config/Detail/doc/index.tsx b/src/views/notice/Config/Detail/doc/index.tsx
new file mode 100644
index 00000000..c4517898
--- /dev/null
+++ b/src/views/notice/Config/Detail/doc/index.tsx
@@ -0,0 +1,6 @@
+import DingTalk from './DingTalk';
+
+const Doc = () => {
+    return <DingTalk />;
+};
+export default Doc;
diff --git a/src/views/notice/Config/Detail/index.vue b/src/views/notice/Config/Detail/index.vue
index a834d08b..c7988aaa 100644
--- a/src/views/notice/Config/Detail/index.vue
+++ b/src/views/notice/Config/Detail/index.vue
@@ -267,14 +267,16 @@
                         </a-form-item>
                     </a-form>
                 </a-col>
-                <a-col :span="12" :push="2"></a-col>
+                <a-col :span="12" :push="2">
+                    <Doc />
+                </a-col>
             </a-row>
         </a-card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { getImage, LocalStore } from '@/utils/comm';
+import { getImage } from '@/utils/comm';
 import { Form } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
 import { ConfigFormData } from '../types';
@@ -285,8 +287,8 @@ import {
 } from '@/views/notice/const';
 import regionList from './regionId';
 import EditTable from './components/EditTable.vue';
-
 import configApi from '@/api/notice/config';
+import Doc from './doc/index';
 
 const router = useRouter();
 const route = useRoute();