diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 152420a0..58efea27 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -27,6 +27,7 @@ const iconKeys = [
     'SyncOutlined',
     'ExclamationCircleOutlined',
     'UploadOutlined',
+    'LoadingOutlined',
     'PlusCircleOutlined',
     'QuestionCircleOutlined',
     'DisconnectOutlined',
diff --git a/src/components/JUpload/index.vue b/src/components/JUpload/index.vue
index c7f612de..94cfe30b 100644
--- a/src/components/JUpload/index.vue
+++ b/src/components/JUpload/index.vue
@@ -1,70 +1,213 @@
 <template>
-    <a-upload
-        v-model:file-list="fileList"
-        name="avatar"
-        list-type="picture-card"
-        class="avatar-uploader"
-        :show-upload-list="false"
-        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-        :before-upload="beforeUpload"
-        @change="handleChange"
-    >
-        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
-        <div v-else>
-            <loading-outlined v-if="loading"></loading-outlined>
-            <plus-outlined v-else></plus-outlined>
-            <div class="ant-upload-text">Upload</div>
+    <div class="upload-image-warp">
+        <div class="upload-image-border">
+            <a-upload
+                name="file"
+                list-type="picture-card"
+                class="avatar-uploader"
+                :show-upload-list="false"
+                :before-upload="beforeUpload"
+                @change="handleChange"
+                :action="FILE_UPLOAD"
+                :headers="{
+                    'X-Access-Token': LocalStore.get(TOKEN_KEY)
+                }"
+                v-bind="props"
+            >
+                <div class="upload-image-content" :style="props.style">
+                    <template v-if="myValue">
+                        <!-- <div class="upload-image"
+                        :style="{
+                            backgroundSize: props.backgroundSize,
+                            backgroundImage: `url(${imageUrl})`
+                        }"
+                        ></div> -->
+                        <img :src="myValue" class="upload-image" />
+                        <div class="upload-image-mask">点击修改</div>
+                    </template>
+                    <template v-else>
+                        <AIcon type="LoadingOutlined" v-if="loading" style="font-size: 20px" />
+                        <AIcon v-else type="PlusOutlined" style="font-size: 20px" />
+                    </template>
+                </div>
+            </a-upload>
+            <div class="upload-loading-mask" v-if="props.disabled"></div>
+            <div class="upload-loading-mask" v-if="myValue && loading">
+                <AIcon type="LoadingOutlined" style="font-size: 20px" />
+            </div>
         </div>
-    </a-upload>
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
+import { FILE_UPLOAD } from '@/api/comm'
+import { TOKEN_KEY  } from '@/utils/variable';
+import { LocalStore } from '@/utils/comm';
+import { CSSProperties } from 'vue';
+
+type Emits = {
+    (e: 'update:modelValue', data: string): void;
+};
+interface JUploadProps extends UploadProps {
+    modelValue: string;
+    disabled?: boolean;
+    types?: string[];
+    errorMessage?: string;
+    size?: number;
+    style?: CSSProperties;
+    backgroundSize?: string;
+}
+
+const emit = defineEmits<Emits>();
+
+const props: JUploadProps = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+})
+
+const loading = ref<boolean>(false)
+const imageUrl = ref<string>(props?.modelValue || '')
+const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];
+
+const myValue = computed({
+    get: () => {
+        return props.modelValue;
+    },
+    set: (val: any) => {
+        imageUrl.value = val;
+        emit('update:modelValue', val);
+    },
+});
 
 const handleChange = (info: UploadChangeParam) => {
-    //   if (info.file.status === 'uploading') {
-    //     loading.value = true;
-    //     return;
-    //   }
-    //   if (info.file.status === 'done') {
-    //     // Get this url from response in real world.
-    //     getBase64(info.file.originFileObj, (base64Url: string) => {
-    //       imageUrl.value = base64Url;
-    //       loading.value = false;
-    //     });
-    //   }
-    //   if (info.file.status === 'error') {
-    //     loading.value = false;
-    //     message.error('upload error');
-    //   }
+      if (info.file.status === 'uploading') {
+        loading.value = true;
+      }
+      if (info.file.status === 'done') {
+        myValue.value = info.file.response?.result
+        loading.value = false;
+        emit('update:modelValue', imageUrl.value)
+      }
+      if (info.file.status === 'error') {
+        loading.value = false;
+        message.error('上传失败');
+      }
 };
 
 const beforeUpload = (file: UploadProps['fileList'][number]) => {
-    //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-    //   if (!isJpgOrPng) {
-    //     message.error('You can only upload JPG file!');
-    //   }
-    //   const isLt2M = file.size / 1024 / 1024 < 2;
-    //   if (!isLt2M) {
-    //     message.error('Image must smaller than 2MB!');
-    //   }
-    //   return isJpgOrPng && isLt2M;
+      const isType = imageTypes.includes(file.type);
+      if (!isType) {
+      if (props.errorMessage) {
+        message.error(props.errorMessage);
+      } else {
+        message.error(`请上传正确格式的图片`);
+      }
+      return false;
+    }
+    const isSize = file.size / 1024 / 1024 < (props.size || 4);
+    if (!isSize) {
+      message.error(`图片大小必须小于${props.size || 4}M`);
+    }
+    return isType && isSize;
 };
 </script>
 
 <style lang="less" scoped>
-.avatar-uploader {
-    width: 160px;
-    height: 160px;
-    padding: 8px;
-    background-color: rgba(0,0,0,.06);
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    :deep(.ant-upload.ant-upload-select-picture-card) {
+@border: 1px dashed @border-color-base;
+@mask-color: rgba(#000, 0.35);
+@with: 150px;
+@height: 150px;
+
+.flex-center() {
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-image-warp {
+  display: flex;
+  justify-content: flex-start;
+
+  .upload-image-border {
+    position: relative;
+    width: @with;
+    height: @height;
+    overflow: hidden;
+    //border-radius: 50%;
+    // border: @border;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: @primary-color-hover;
+    }
+
+    :deep(.ant-upload-picture-card-wrapper) {
         width: 100%;
         height: 100%;
     }
+    :deep(.ant-upload) {
+        width: 100%;
+        height: 100%;
+    }
+
+    .upload-image-content {
+      .flex-center();
+
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(#000, 0.06);
+      cursor: pointer;
+      padding: 8px;
+
+      .upload-image-mask {
+        .flex-center();
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: none;
+        width: 100%;
+        height: 100%;
+        color: #fff;
+        font-size: 16px;
+        background-color: @mask-color;
+      }
+
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        //border-radius: 50%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+      }
+
+      &:hover .upload-image-mask {
+        display: flex;
+      }
+    }
+  }
+
+  .upload-loading-mask {
+    .flex-center();
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    background-color: @mask-color;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/device/Instance/Save/index.vue b/src/views/device/Instance/Save/index.vue
index ff691bd1..1301e493 100644
--- a/src/views/device/Instance/Save/index.vue
+++ b/src/views/device/Instance/Save/index.vue
@@ -4,8 +4,8 @@
             <a-form :layout="'vertical'">
                 <a-row type="flex">
                     <a-col flex="180px">
-                        <a-form-item required>
-                            <JUpload />
+                        <a-form-item required name="photoUrl">
+                            <JUpload v-model:value="modelRef.photoUrl" />
                         </a-form-item>
                     </a-col>
                     <a-col flex="auto">
@@ -32,6 +32,7 @@
 
 <script lang="ts" setup>
 import { queryNoPagingPost } from '@/api/device/product'
+import { getImage } from '@/utils/comm';
 import { Form } from 'ant-design-vue';
 
 const emit = defineEmits(['close', 'save'])
@@ -49,7 +50,7 @@ const modelRef = reactive({
     id: '',
     name: '',
     describe: '',
-    photoUrl: ''
+    photoUrl: getImage('/device/instance/device-card.png')
 });
 
 watch(
diff --git a/src/views/notice/Config/index.vue b/src/views/notice/Config/index.vue
index 598235a9..73edffce 100644
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@@ -1,162 +1,153 @@
 <template>
     <div class="page-container">
-        <a-card style="margin-bottom: 20px">
-            <Search
-                :columns="columns"
-                target="notice-config"
-                @search="handleSearch"
-            />
-        </a-card>
-        <a-card>
-            <JTable
-                ref="configRef"
-                :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-popconfirm
-                            title="确认导出当前页数据？"
-                            ok-text="确定"
-                            cancel-text="取消"
-                            @confirm="handleExport"
-                        >
-                            <a-button>导出</a-button>
-                        </a-popconfirm>
-                    </a-space>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="false"
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
+        <Search
+            :columns="columns"
+            target="notice-config"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="configRef"
+            :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"
                     >
-                        <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-button>导入</a-button>
+                    </a-upload>
+                    <a-popconfirm
+                        title="确认导出当前页数据？"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="handleExport"
+                    >
+                        <a-button>导出</a-button>
+                    </a-popconfirm>
+                </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-for="i in getActions(slotProps, 'table')"
-                            :key="i.key"
-                            v-bind="i.tooltip"
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
                         >
                             <a-popconfirm
-                                v-if="i.popConfirm"
-                                v-bind="i.popConfirm"
-                                :disabled="i.disabled"
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
                             >
-                                <a-button
-                                    :disabled="i.disabled"
-                                    style="padding: 0"
-                                    type="link"
-                                    ><AIcon :type="i.icon"
-                                /></a-button>
+                                <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"
-                                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>
+                                ><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>
 
         <Debug v-model:visible="debugVis" :data="currentConfig" />
         <Log v-model:visible="logVis" :data="currentConfig" />
diff --git a/src/views/notice/Template/Debug/index.vue b/src/views/notice/Template/Debug/index.vue
index 4da9e494..b4c265ca 100644
--- a/src/views/notice/Template/Debug/index.vue
+++ b/src/views/notice/Template/Debug/index.vue
@@ -9,14 +9,13 @@
         :confirmLoading="btnLoading"
     >
         <a-form layout="vertical">
-            <a-form-item label="通知模版" v-bind="validateInfos.templateId">
+            <a-form-item label="通知配置" v-bind="validateInfos.configId">
                 <a-select
-                    v-model:value="formData.templateId"
-                    placeholder="请选择通知模版"
-                    @change="getTemplateDetail"
+                    v-model:value="formData.configId"
+                    placeholder="请选择通知配置"
                 >
                     <a-select-option
-                        v-for="(item, index) in templateList"
+                        v-for="(item, index) in configList"
                         :key="index"
                         :value="item.id"
                     >
@@ -63,10 +62,11 @@
 <script setup lang="ts">
 import { Form } from 'ant-design-vue';
 import { PropType } from 'vue';
-import ConfigApi from '@/api/notice/config';
+import TemplateApi from '@/api/notice/template';
 import {
     TemplateFormData,
     IVariableDefinitions,
+    BindConfig,
 } from '@/views/notice/Template/types';
 import { message } from 'ant-design-vue';
 
@@ -93,22 +93,25 @@ const _vis = computed({
 /**
  * 获取通知模板
  */
-const templateList = ref<TemplateFormData[]>([]);
-const getTemplateList = async () => {
+const configList = ref<BindConfig[]>([]);
+const getConfigList = async () => {
     const params = {
         terms: [
             { column: 'type', value: props.data.type },
             { column: 'provider', value: props.data.provider },
         ],
     };
-    const { result } = await ConfigApi.getTemplate(params, props.data.id);
-    templateList.value = result;
+    const { result } = await TemplateApi.getConfig(params);
+    configList.value = result;
 };
 
 watch(
     () => _vis.value,
     (val) => {
-        if (val) getTemplateList();
+        if (val) {
+            getConfigList();
+            getTemplateDetail();
+        }
     },
 );
 
@@ -117,9 +120,7 @@ watch(
  */
 const templateDetailTable = ref<IVariableDefinitions[]>();
 const getTemplateDetail = async () => {
-    const { result } = await ConfigApi.getTemplateDetail(
-        formData.value.templateId,
-    );
+    const { result } = await TemplateApi.getTemplateDetail(props.data.id);
     templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
         ...m,
         value: undefined,
@@ -147,13 +148,13 @@ const columns = [
 
 // 表单数据
 const formData = ref({
-    templateId: '',
+    configId: '',
     variableDefinitions: '',
 });
 
 // 验证规则
 const formRules = ref({
-    templateId: [{ required: true, message: '请选择通知模板' }],
+    configId: [{ required: true, message: '请选择通知模板' }],
     variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
 });
 
@@ -175,7 +176,7 @@ const handleOk = () => {
             });
             // console.log('params: ', params);
             btnLoading.value = true;
-            ConfigApi.debug(params, props.data.id, formData.value.templateId)
+            TemplateApi.debug(params, formData.value.configId, props.data.id)
                 .then((res) => {
                     if (res.success) {
                         message.success('操作成功');
diff --git a/src/views/notice/Template/Log/index.vue b/src/views/notice/Template/Log/index.vue
index 2be0156c..4718e6a7 100644
--- a/src/views/notice/Template/Log/index.vue
+++ b/src/views/notice/Template/Log/index.vue
@@ -10,7 +10,7 @@
         <JTable
             ref="instanceRef"
             :columns="columns"
-            :request="(e:any) => configApi.getHistory(e, data.id)"
+            :request="(e:any) => templateApi.getHistory(e, data.id)"
             :defaultParams="{
                 sorts: [{ name: 'notifyTime', order: 'desc' }],
                 terms: [{ column: 'notifyType$IN', value: data.type }],
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import configApi from '@/api/notice/config';
+import templateApi from '@/api/notice/template';
 import { PropType } from 'vue';
 import moment from 'moment';
 import { Modal } from 'ant-design-vue';
diff --git a/src/views/notice/Template/index.vue b/src/views/notice/Template/index.vue
index 5f2313fd..7af08260 100644
--- a/src/views/notice/Template/index.vue
+++ b/src/views/notice/Template/index.vue
@@ -1,162 +1,153 @@
 <template>
     <div class="page-container">
-        <a-card style="margin-bottom: 20px">
-            <Search
-                :columns="columns"
-                target="notice-config"
-                @search="handleSearch"
-            />
-        </a-card>
-        <a-card>
-            <JTable
-                ref="configRef"
-                :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-popconfirm
-                            title="确认导出当前页数据？"
-                            ok-text="确定"
-                            cancel-text="取消"
-                            @confirm="handleExport"
-                        >
-                            <a-button>导出</a-button>
-                        </a-popconfirm>
-                    </a-space>
-                </template>
-                <template #card="slotProps">
-                    <CardBox
-                        :showStatus="false"
-                        :value="slotProps"
-                        :actions="getActions(slotProps, 'card')"
-                        v-bind="slotProps"
+        <Search
+            :columns="columns"
+            target="notice-config"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="configRef"
+            :columns="columns"
+            :request="TemplateApi.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"
                     >
-                        <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-button>导入</a-button>
+                    </a-upload>
+                    <a-popconfirm
+                        title="确认导出当前页数据？"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="handleExport"
+                    >
+                        <a-button>导出</a-button>
+                    </a-popconfirm>
+                </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-for="i in getActions(slotProps, 'table')"
-                            :key="i.key"
-                            v-bind="i.tooltip"
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
                         >
                             <a-popconfirm
-                                v-if="i.popConfirm"
-                                v-bind="i.popConfirm"
-                                :disabled="i.disabled"
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
                             >
-                                <a-button
-                                    :disabled="i.disabled"
-                                    style="padding: 0"
-                                    type="link"
-                                    ><AIcon :type="i.icon"
-                                /></a-button>
+                                <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"
-                                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>
+                                ><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>
 
         <Debug v-model:visible="debugVis" :data="currentConfig" />
         <Log v-model:visible="logVis" :data="currentConfig" />
@@ -164,7 +155,7 @@
 </template>
 
 <script setup lang="ts">
-import ConfigApi from '@/api/notice/config';
+import TemplateApi from '@/api/notice/template';
 import type { ActionsType } from '@/components/Table/index.vue';
 import { getImage, LocalStore } from '@/utils/comm';
 import { message } from 'ant-design-vue';
@@ -188,7 +179,7 @@ const params = ref<Record<string, any>>({});
 
 const columns = [
     {
-        title: '配置名称',
+        title: '模板名称',
         dataIndex: 'name',
         key: 'name',
         search: {
@@ -243,9 +234,9 @@ const columns = [
  * @param params
  */
 const handleSearch = (e: any) => {
-    console.log('handleSearch:', e);
+    // console.log('handleSearch:', e);
     params.value = e;
-    console.log('params.value: ', params.value);
+    // console.log('params.value: ', params.value);
 };
 
 /**
@@ -284,7 +275,7 @@ const beforeUpload = (file: any) => {
         }
         try {
             const data = JSON.parse(text || '{}');
-            const { success } = await ConfigApi.update(data);
+            const { success } = await TemplateApi.update(data);
             if (success) {
                 message.success('操作成功');
                 configRef.value.reload();
@@ -347,6 +338,17 @@ const getActions = (
                 currentConfig.value = data;
             },
         },
+        {
+            key: 'debug',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+            icon: 'ArrowDownOutlined',
+            onClick: () => {
+                downloadObject(data, `通知配置`);
+            },
+        },
         {
             key: 'debug',
             text: '通知记录',
@@ -359,24 +361,13 @@ const getActions = (
                 currentConfig.value = data;
             },
         },
-        {
-            key: 'debug',
-            text: '导出',
-            tooltip: {
-                title: '导出',
-            },
-            icon: 'ArrowDownOutlined',
-            onClick: () => {
-                downloadObject(data, `通知配置`);
-            },
-        },
         {
             key: 'delete',
             text: '删除',
             popConfirm: {
                 title: '确认删除?',
                 onConfirm: async () => {
-                    const resp = await ConfigApi.del(data.id);
+                    const resp = await TemplateApi.del(data.id);
                     if (resp.status === 200) {
                         message.success('操作成功！');
                         configRef.value?.reload();