diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index ab50cf8c..4d97fdc9 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -28,7 +28,12 @@ const iconKeys = [
     'ExclamationCircleOutlined',
     'UploadOutlined',
     'PlusCircleOutlined',
-    'QuestionCircleOutlined'
+    'QuestionCircleOutlined',
+    'BugOutlined',
+    'BarsOutlined',
+    'ArrowDownOutlined',
+    'SmallDashOutlined',
+    'TeamOutlined',
 ]
 
 const Icon = (props: {type: string}) => {
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 691b1c42..0408912d 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -1,22 +1,364 @@
-<!-- 通知配置 -->
 <template>
-    <div class="page-container">通知配置</div>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search
+                :columns="columns"
+                target="notice-config"
+                @search="handleSearch"
+            />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="instanceRef"
+                :columns="columns"
+                :request="configApi.list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-space>
+                        <a-button type="primary" @click="handleAdd">
+                            新增
+                        </a-button>
+                        <a-upload
+                            name="file"
+                            accept="json"
+                            :showUploadList="false"
+                            :before-upload="beforeUpload"
+                        >
+                            <a-button>导入</a-button>
+                        </a-upload>
+                        <a-button @click="handleExport">导出</a-button>
+                    </a-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="false"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        getLogo(
+                                            slotProps.type,
+                                            slotProps.provider,
+                                        )
+                                    "
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <a-row>
+                                <a-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通知方式
+                                    </div>
+                                    <div>
+                                        {{ getMethodTxt(slotProps.type) }}
+                                    </div>
+                                </a-col>
+                                <a-col :span="12">
+                                    <div class="card-item-content-text">
+                                        说明
+                                    </div>
+                                    <div>{{ slotProps.description }}</div>
+                                </a-col>
+                            </a-row>
+                        </template>
+                        <template #actions="item">
+                            <a-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <a-popconfirm
+                                    v-if="item.popConfirm"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <a-button :disabled="item.disabled">
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </a-popconfirm>
+                                <template v-else>
+                                    <a-button
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                    >
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </template>
+                            </a-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                                :disabled="i.disabled"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </a-card>
+    </div>
 </template>
 
 <script setup lang="ts">
 import configApi from '@/api/notice/config';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage, LocalStore } from '@/utils/comm';
+import { message } from 'ant-design-vue';
+// import Import from './Import/index.vue';
+// import Export from './Export/index.vue';
+// import Process from './Process/index.vue';
+// import Save from './Save/index.vue';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
-const getList = async () => {
-    const res = await configApi.list({
-        current: 1,
-        pageIndex: 0,
-        pageSize: 12,
-        sorts: [{ name: 'createTime', order: 'desc' }],
-        terms: [],
-    });
-    console.log('res: ', res);
+import { NOTICE_METHOD, MSG_TYPE } from '@/views/notice/const';
+
+let providerList: any = [];
+Object.keys(MSG_TYPE).forEach((key) => {
+    providerList = [...providerList, ...MSG_TYPE[key]];
+});
+
+const router = useRouter();
+
+const instanceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: '配置名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '通知方式',
+        dataIndex: 'type',
+        key: 'type',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: NOTICE_METHOD,
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'provider',
+        key: 'provider',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: providerList,
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    console.log('handleSearch:', e);
+    params.value = e;
 };
-getList();
-</script>
 
-<style lang="less" scoped></style>
+/**
+ * 根据通知方式展示对应logo
+ */
+const getLogo = (type: string, provider: string) => {
+    return MSG_TYPE[type].find((f: any) => f.value === provider)?.logo;
+};
+/**
+ * 通知方式字段展示对应文字
+ */
+const getMethodTxt = (type: string) => {
+    return NOTICE_METHOD.find((f) => f.value === type)?.label;
+};
+
+/**
+ * 新增
+ */
+const handleAdd = () => {
+    router.push(`/notice/Config/detail/:id`);
+};
+
+/**
+ * 导入
+ */
+const beforeUpload = () => {};
+
+/**
+ * 导出
+ */
+const handleExport = () => {};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                // visible.value = true;
+                // current.value = data;
+                router.push(`/notice/Config/detail/${data.id}`);
+            },
+        },
+        {
+            key: 'debug',
+            text: '调试',
+            tooltip: {
+                title: '调试',
+            },
+            icon: 'BugOutlined',
+            onClick: () => {
+                // debugVis.value = true;
+            },
+        },
+        {
+            key: 'debug',
+            text: '通知记录',
+            tooltip: {
+                title: '通知记录',
+            },
+            icon: 'BarsOutlined',
+            onClick: () => {
+                // debugVis.value = true;
+            },
+        },
+        {
+            key: 'debug',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+            icon: 'ArrowDownOutlined',
+            onClick: () => {
+                // debugVis.value = true;
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            // disabled: data.state.value !== 'notActive',
+            // tooltip: {
+            //     title:
+            //         data.state.value !== 'notActive'
+            //             ? '已启用的设备不能删除'
+            //             : '删除',
+            // },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await configApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        // instanceRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    if (type === 'card')
+        return actions.filter((i: ActionsType) => i.key !== 'view');
+    return actions;
+};
+</script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>
diff --git a/src/views/notice/Template/Detail/index.vue b/src/views/notice/Template/Detail/index.vue
index abf7e47a..82ce27eb 100644
--- a/src/views/notice/Template/Detail/index.vue
+++ b/src/views/notice/Template/Detail/index.vue
@@ -458,7 +458,7 @@
 import { getImage } from '@/utils/comm';
 import { Form } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
-import { TemplateFormData } from '../types';
+import { IVariableDefinitions, TemplateFormData } from '../types';
 import {
     NOTICE_METHOD,
     TEMPLATE_FIELD_MAP,
@@ -588,7 +588,7 @@ watch(
                       format: '%s',
                   },
         );
-        formData.value.variableDefinitions = result;
+        formData.value.variableDefinitions = result as IVariableDefinitions[];
     },
     { deep: true },
 );