From c05cf5d961b74b50cc423eaffc6eb3a219a2c527 Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Thu, 12 Jan 2023 16:48:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=9F=A5=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                            |  32 ++
 src/components/RadioCard/index.vue         |  71 ++++
 src/router/menu.ts                         |  22 +-
 src/views/notice/Config/Detail/index.vue   | 405 +++++++++++++++++++++
 src/views/notice/Config/Detail/regionId.ts | 119 ++++++
 src/views/notice/Config/index.vue          |   8 +
 src/views/notice/Config/types.d.ts         |  37 ++
 src/views/notice/Template/Detail/index.vue |   8 +
 src/views/notice/Template/index.vue        |   8 +
 src/views/notice/const.ts                  | 126 +++++++
 10 files changed, 833 insertions(+), 3 deletions(-)
 create mode 100644 src/components/RadioCard/index.vue
 create mode 100644 src/views/notice/Config/Detail/index.vue
 create mode 100644 src/views/notice/Config/Detail/regionId.ts
 create mode 100644 src/views/notice/Config/index.vue
 create mode 100644 src/views/notice/Config/types.d.ts
 create mode 100644 src/views/notice/Template/Detail/index.vue
 create mode 100644 src/views/notice/Template/index.vue
 create mode 100644 src/views/notice/const.ts

diff --git a/components.d.ts b/components.d.ts
index 40a545e5..68ac7aef 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,12 +7,44 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
     PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
+    RadioCard: typeof import('./src/components/RadioCard/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchItem: typeof import('./src/components/Search/Item.vue')['default']
diff --git a/src/components/RadioCard/index.vue b/src/components/RadioCard/index.vue
new file mode 100644
index 00000000..2d27ba0b
--- /dev/null
+++ b/src/components/RadioCard/index.vue
@@ -0,0 +1,71 @@
+<!-- 单选卡片 -->
+<template>
+    <div class="m-radio">
+        <div
+            class="m-radio-item"
+            :class="{ active: myValue === item.value }"
+            v-for="(item, index) in options"
+            :key="index"
+            @click="myValue = item.value"
+        >
+            <img class="img" :src="item.logo" alt="" />
+            <span>{{ item.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+interface IOption {
+    label: string;
+    value: string;
+    logo: string;
+}
+
+type Emits = {
+    (e: 'update:modelValue', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    options: {
+        type: Array as PropType<IOption[]>,
+        default: () => [],
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const myValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+</script>
+
+<style lang="less" scoped>
+.m-radio {
+    display: flex;
+    &-item {
+        padding: 10px 15px;
+        margin-right: 15px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 5px;
+        cursor: pointer;
+        .img {
+            width: 100px;
+            height: 100px;
+        }
+        &.active {
+            color: #1d39c4;
+            border-color: #1d39c4;
+        }
+    }
+}
+</style>
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 8bb794ae..6936fb5f 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -48,6 +48,22 @@ export default [
         path: '/search',
         component: () => import('@/views/demo/Search.vue')
     },
+    {
+        path: '/notice/Config',
+        component: () => import('@/views/notice/Config/index.vue')
+    },
+    {
+        path: '/notice/Config/detail/:id',
+        component: () => import('@/views/notice/Config/Detail/index.vue')
+    },
+    {
+        path: '/notice/Template',
+        component: () => import('@/views/notice/Template/index.vue')
+    },
+    {
+        path: '/notice/Template/detail/:id',
+        component: () => import('@/views/notice/Template/Detail/index.vue')
+    },
     // end: 测试用, 可删除
 
     // link 运维管理
@@ -73,7 +89,7 @@ export default [
     },
     // 初始化
     {
-      path: '/init-home',
-      component: () => import('@/views/init-home/index.vue')
-  },
+        path: '/init-home',
+        component: () => import('@/views/init-home/index.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/notice/Config/Detail/index.vue b/src/views/notice/Config/Detail/index.vue
new file mode 100644
index 00000000..c39d92be
--- /dev/null
+++ b/src/views/notice/Config/Detail/index.vue
@@ -0,0 +1,405 @@
+<!-- 通知配置详情 -->
+<template>
+    <div class="page-container">
+        <a-card>
+            <a-row>
+                <a-col :span="10">
+                    <a-form layout="vertical">
+                        <a-form-item
+                            label="通知方式"
+                            v-bind="validateInfos.type"
+                        >
+                            <a-select
+                                v-model:value="formData.type"
+                                placeholder="请选择通知方式"
+                            >
+                                <a-select-option
+                                    v-for="(item, index) in NOTICE_METHOD"
+                                    :key="index"
+                                    :value="item.value"
+                                >
+                                    {{ item.label }}
+                                </a-select-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item label="名称" v-bind="validateInfos.name">
+                            <a-input
+                                v-model:value="formData.name"
+                                placeholder="请输入名称"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="类型"
+                            v-bind="validateInfos.provider"
+                            v-if="formData.type !== 'email'"
+                        >
+                            <RadioCard
+                                :options="msgType"
+                                v-model="formData.provider"
+                            />
+                        </a-form-item>
+                        <!-- 钉钉 -->
+                        <template v-if="formData.type === 'dingTalk'">
+                            <template
+                                v-if="formData.provider === 'dingTalkMessage'"
+                            >
+                                <a-form-item
+                                    label="AppKey"
+                                    v-bind="
+                                        validateInfos['configuration.appKey']
+                                    "
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.appKey
+                                        "
+                                        placeholder="请输入AppKey"
+                                    />
+                                </a-form-item>
+                                <a-form-item
+                                    label="AppSecret"
+                                    v-bind="
+                                        validateInfos['configuration.appSecret']
+                                    "
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.appSecret
+                                        "
+                                        placeholder="请输入AppSecret"
+                                    />
+                                </a-form-item>
+                            </template>
+                            <template
+                                v-if="
+                                    formData.provider === 'dingTalkRobotWebHook'
+                                "
+                            >
+                                <a-form-item
+                                    label="webHook"
+                                    v-bind="validateInfos['configuration.url']"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.url
+                                        "
+                                        placeholder="请输入webHook"
+                                    />
+                                </a-form-item>
+                            </template>
+                        </template>
+                        <!-- 微信 -->
+                        <template v-if="formData.type === 'weixin'">
+                            <a-form-item
+                                label="corpId"
+                                v-bind="validateInfos['configuration.corpId']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.corpId
+                                    "
+                                    placeholder="请输入corpId"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="corpSecret"
+                                v-bind="
+                                    validateInfos['configuration.corpSecret']
+                                "
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.corpSecret
+                                    "
+                                    placeholder="请输入corpSecret"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- 邮件 -->
+                        <template v-if="formData.type === 'email'">
+                            <a-form-item
+                                label="服务器地址"
+                                v-bind="validateInfos['configuration.host']"
+                            >
+                                <a-space>
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.host
+                                        "
+                                        placeholder="请输入服务器地址"
+                                    />
+                                    <a-input-number
+                                        v-model:value="
+                                            formData.configuration.port
+                                        "
+                                    />
+                                    <a-checkbox
+                                        v-model:value="
+                                            formData.configuration.ssl
+                                        "
+                                    >
+                                        开启SSL
+                                    </a-checkbox>
+                                </a-space>
+                            </a-form-item>
+                            <a-form-item
+                                label="发件人"
+                                v-bind="validateInfos['configuration.sender']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.sender
+                                    "
+                                    placeholder="请输入发件人"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="用户名"
+                                v-bind="validateInfos['configuration.username']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.username
+                                    "
+                                    placeholder="请输入用户名"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="密码"
+                                v-bind="validateInfos['configuration.password']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.password
+                                    "
+                                    placeholder="请输入密码"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- 语音/短信 -->
+                        <template
+                            v-if="
+                                formData.type === 'voice' ||
+                                formData.type === 'sms'
+                            "
+                        >
+                            <a-form-item
+                                label="RegionId"
+                                v-bind="validateInfos['configuration.regionId']"
+                            >
+                                <a-select
+                                    v-model:value="
+                                        formData.configuration.regionId
+                                    "
+                                    placeholder="请选择RegionId"
+                                >
+                                    <a-select-option
+                                        v-for="(item, index) in regionList"
+                                        :key="index"
+                                        :value="item.value"
+                                    >
+                                        {{ item.label }}
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-item>
+                            <a-form-item
+                                label="AccessKeyId"
+                                v-bind="
+                                    validateInfos['configuration.accessKeyId']
+                                "
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.accessKeyId
+                                    "
+                                    placeholder="请输入AccessKeyId"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="Secret"
+                                v-bind="validateInfos['configuration.secret']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.secret
+                                    "
+                                    placeholder="Secret"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- webhook -->
+                        <template v-if="formData.type === 'webhook'">
+                            <a-form-item
+                                label="Webhook"
+                                v-bind="validateInfos['configuration.url']"
+                            >
+                                <a-input
+                                    v-model:value="formData.configuration.url"
+                                    placeholder="请输入Webhook"
+                                />
+                            </a-form-item>
+                        </template>
+                        <a-form-item label="说明">
+                            <a-textarea
+                                v-model:value="formData.description"
+                                show-count
+                                :maxlength="200"
+                                :rows="5"
+                                placeholder="请输入说明"
+                            />
+                        </a-form-item>
+                        <a-form-item :wrapper-col="{ offset: 0, span: 3 }">
+                            <a-button
+                                type="primary"
+                                @click="handleSubmit"
+                                style="width: 100%"
+                            >
+                                保存
+                            </a-button>
+                        </a-form-item>
+                    </a-form>
+                </a-col>
+                <a-col :span="12" :push="2"></a-col>
+            </a-row>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getImage, LocalStore } from '@/utils/comm';
+import { Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
+import { ConfigFormData } from '../types';
+import {
+    NOTICE_METHOD,
+    CONFIG_FIELD_MAP,
+    MSG_TYPE,
+} from '@/views/notice/const';
+import regionList from './regionId';
+
+const useForm = Form.useForm;
+
+// 消息类型
+const msgType = ref([
+    {
+        label: '钉钉消息',
+        value: 'dingTalkMessage',
+        logo: getImage('/notice/dingtalk.png'),
+    },
+    {
+        label: '群机器人消息',
+        value: 'dingTalkRobotWebHook',
+        logo: getImage('/notice/dingTalk-rebot.png'),
+    },
+]);
+
+// 表单数据
+const formData = ref<ConfigFormData>({
+    configuration: {
+        appKey: '',
+        appSecret: '',
+        url: '',
+    },
+    description: '',
+    name: '',
+    provider: 'dingTalkMessage',
+    type: NOTICE_METHOD[0].value,
+});
+
+// 根据通知方式展示对应的字段
+watch(
+    () => formData.value.type,
+    (val) => {
+        formData.value.configuration = CONFIG_FIELD_MAP[val];
+        msgType.value = MSG_TYPE[val];
+
+        formData.value.provider = msgType.value[0].value;
+    },
+);
+
+// 验证规则
+const formRules = ref({
+    type: [{ required: true, message: '请选择通知方式' }],
+    name: [
+        { required: true, message: '请输入名称' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    provider: [{ required: true, message: '请选择类型' }],
+    // 钉钉
+    'configuration.appKey': [
+        { required: true, message: '请输入AppKey' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.appSecret': [
+        { required: true, message: '请输入AppSecret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 'configuration.url': [{ required: true, message: '请输入WebHook' }],
+    // 微信
+    'configuration.corpId': [
+        { required: true, message: '请输入corpId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.corpSecret': [
+        { required: true, message: '请输入corpSecret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 阿里云语音/短信
+    'configuration.regionId': [
+        { required: true, message: '请输入RegionId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.accessKeyId': [
+        { required: true, message: '请输入AccessKeyId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.secret': [
+        { required: true, message: '请输入Secret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 邮件
+    'configuration.host': [{ required: true, message: '请输入服务器地址' }],
+    'configuration.sender': [{ required: true, message: '请输入发件人' }],
+    'configuration.username': [
+        { required: true, message: '请输入用户名' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.password': [
+        { required: true, message: '请输入密码' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // webhook
+    'configuration.url': [
+        { required: true, message: '请输入Webhook' },
+        {
+            pattern:
+                /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
+            message: 'Webhook需要是一个合法的URL',
+            trigger: 'blur',
+        },
+    ],
+    description: [{ max: 200, message: '最多可输入200个字符' }],
+});
+
+const { resetFields, validate, validateInfos } = useForm(
+    formData.value,
+    formRules.value,
+);
+console.log('validateInfos: ', validateInfos);
+
+/**
+ * 表单提交
+ */
+const handleSubmit = () => {
+    validate()
+        .then(async () => {})
+        .catch((err) => {});
+};
+</script>
+
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>
diff --git a/src/views/notice/Config/Detail/regionId.ts b/src/views/notice/Config/Detail/regionId.ts
new file mode 100644
index 00000000..2437c5f7
--- /dev/null
+++ b/src/views/notice/Config/Detail/regionId.ts
@@ -0,0 +1,119 @@
+//  数据来源 https://help.aliyun.com/document_detail/188196.html
+export default [
+  /** 公共云 */
+  //中国地区（包含中国香港、中国澳门，不包含中国台湾）
+  {
+    value: 'cn-qingdao',
+    label: '华北1（青岛）',
+  },
+  {
+    value: 'cn-beijing',
+    label: '华北2（北京）',
+  },
+  {
+    value: 'cn-zhangjiakou',
+    label: '华北3（张家口）',
+  },
+  {
+    value: 'cn-huhehaote',
+    label: '华北5（呼和浩特）',
+  },
+  {
+    value: 'cn-wulanchabu',
+    label: '华北6（乌兰察布）',
+  },
+  {
+    value: 'cn-hangzhou',
+    label: '华东1（杭州）',
+  },
+  {
+    value: 'cn-shanghai',
+    label: '华东2（上海）',
+  },
+  {
+    value: 'cn-nanjing',
+    label: '华东5 （南京-本地地域）',
+  },
+  {
+    value: 'cn-fuzhou',
+    label: '华东6（福州-本地地域）',
+  },
+  {
+    value: 'cn-shenzhen',
+    label: '华南1（深圳）',
+  },
+  {
+    value: 'cn-heyuan',
+    label: '华南2（河源）',
+  },
+  {
+    value: 'cn-guangzhou',
+    label: '华南3（广州）',
+  },
+  {
+    value: 'cn-chengdu',
+    label: '西南1（成都）',
+  },
+  {
+    value: 'cn-hongkong',
+    label: '中国香港',
+  },
+
+  //其他国家和地区
+  {
+    value: 'ap-southeast-1',
+    label: '新加坡',
+  },
+  {
+    value: 'ap-southeast-2',
+    label: '澳大利亚（悉尼）',
+  },
+  {
+    value: 'ap-southeast-3',
+    label: '马来西亚（吉隆坡）',
+  },
+  {
+    value: 'ap-southeast-5',
+    label: '印度尼西亚（雅加达）',
+  },
+  {
+    value: 'ap-southeast-6',
+    label: '菲律宾（马尼拉）',
+  },
+  {
+    value: 'ap-southeast-7',
+    label: '泰国（曼谷）',
+  },
+  {
+    value: 'ap-south-1',
+    label: '印度（孟买）',
+  },
+  {
+    value: 'ap-northeast-1',
+    label: '日本（东京）',
+  },
+  {
+    value: 'ap-northeast-2',
+    label: '韩国（首尔）',
+  },
+  {
+    value: 'us-west-1',
+    label: '美国（硅谷）',
+  },
+  {
+    value: 'us-east-1',
+    label: '美国（弗吉尼亚）',
+  },
+  {
+    value: 'eu-central-1',
+    label: '德国（法兰克福）',
+  },
+  {
+    value: 'eu-west-1',
+    label: '英国（伦敦）',
+  },
+  {
+    value: 'me-east-1',
+    label: '阿联酋（迪拜）',
+  },
+];
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
new file mode 100644
index 00000000..c45743e0
--- /dev/null
+++ b/src/views/notice/Config/index.vue
@@ -0,0 +1,8 @@
+<!-- 通知配置 -->
+<template>
+    <div class="page-container">通知配置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/notice/Config/types.d.ts b/src/views/notice/Config/types.d.ts
new file mode 100644
index 00000000..4c0f1d6f
--- /dev/null
+++ b/src/views/notice/Config/types.d.ts
@@ -0,0 +1,37 @@
+interface IHeaders {
+    key: string;
+    value: string;
+}
+export type ConfigFormData = {
+    configuration: {
+        // 钉钉
+        appKey?: string;
+        appSecret?: string;
+        url?: string;
+        // 微信
+        corpId?: string;
+        corpSecret?: string;
+        // 邮件
+        host?: string;
+        port?: number;
+        ssl?: boolean;
+        sender?: string;
+        username?: string;
+        password?: string;
+        // 语音
+        regionId?: string;
+        accessKeyId?: string;
+        secret?: string;
+        // 短信
+        regionId?: string;
+        accessKeyId?: string;
+        secret?: string;
+        // webhook
+        // url?: string;
+        headers?: IHeaders[];
+    };
+    description: string;
+    name: string;
+    provider: string;
+    type: string;
+};
diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
new file mode 100644
index 00000000..c2a1ee68
--- /dev/null
+++ b/src/views/notice/Template/Detail/index.vue
@@ -0,0 +1,8 @@
+<!-- 通知模板详情 -->
+<template>
+    <div class="page-container">通知模板详情</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/notice/Template/index.vue b/src/views/notice/Template/index.vue
new file mode 100644
index 00000000..93e4d46b
--- /dev/null
+++ b/src/views/notice/Template/index.vue
@@ -0,0 +1,8 @@
+<!-- 通知模板 -->
+<template>
+    <div class="page-container">通知模板</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/notice/const.ts b/src/views/notice/const.ts
new file mode 100644
index 00000000..47a86c03
--- /dev/null
+++ b/src/views/notice/const.ts
@@ -0,0 +1,126 @@
+import { getImage } from '@/utils/comm';
+
+interface INoticeMethod {
+    label: string;
+    value: string;
+}
+
+// 通知方式
+export const NOTICE_METHOD: INoticeMethod[] = [
+    {
+        label: '钉钉',
+        value: 'dingTalk',
+    },
+    {
+        label: '微信',
+        value: 'weixin',
+    },
+    {
+        label: '邮件',
+        value: 'email',
+    },
+    {
+        label: '语音',
+        value: 'voice',
+    },
+    {
+        label: '短信',
+        value: 'sms',
+    },
+    {
+        label: 'webhook',
+        value: 'webhook',
+    },
+];
+
+// 消息类型
+export const MSG_TYPE = {
+    dingTalk: [
+        {
+            label: '钉钉消息',
+            value: 'dingTalkMessage',
+            logo: getImage('/notice/dingtalk.png'),
+        },
+        {
+            label: '群机器人消息',
+            value: 'dingTalkRobotWebHook',
+            logo: getImage('/notice/dingTalk-rebot.png'),
+        },
+    ],
+    weixin: [
+        {
+            label: '企业消息',
+            value: 'corpMessage',
+            logo: getImage('/notice/weixin-corp.png'),
+        },
+        // {
+        //   label: '服务号消息',
+        //   value: 'officialMessage'
+        //   logo: getImage('/notice/weixin-official.png'),
+        // }
+    ],
+    voice: [
+        {
+            label: '阿里云语音',
+            value: 'aliyun',
+            logo: getImage('/notice/voice.png'),
+        },
+    ],
+    sms: [
+        {
+            label: '阿里云短信',
+            value: 'aliyunSms',
+            logo: getImage('/notice/sms.png'),
+        },
+    ],
+    webhook: [
+        {
+            label: 'webhook',
+            value: 'http',
+            logo: getImage('/notice/webhook.png'),
+        },
+    ],
+    email: [
+        {
+            label: 'email',
+            value: 'embedded',
+            logo: getImage('/notice/email.png'),
+        },
+    ],
+}
+
+// 字段关系映射
+// 配置
+export const CONFIG_FIELD_MAP = {
+    dingTalk: {
+        appKey: undefined,
+        appSecret: undefined,
+        url: undefined,
+    },
+    weixin: {
+        corpId: undefined,
+        corpSecret: undefined,
+    },
+    email: {
+        host: undefined,
+        port: 25,
+        ssl: false,
+        sender: undefined,
+        username: undefined,
+        password: undefined,
+    },
+    voice: {
+        regionId: undefined,
+        accessKeyId: undefined,
+        secret: undefined,
+    },
+    sms: {
+        regionId: undefined,
+        accessKeyId: undefined,
+        secret: undefined,
+    },
+    webhook: {
+        url: undefined,
+        headers: [],
+    },
+}; 
\ No newline at end of file