Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

# Conflicts:
#	src/api/device/product.ts

config/config.ts

@@ -2,6 +2,15 @@ export default {
   theme: {
     'primary-color': '#1d39c4',
   },
-  logo: '/favicon.ico',
-  title: 'Jetlinks'
+  logo: '/favicon.ico', // 浏览器标签页logo
+  title: 'Jetlinks', // 浏览器标签页title
+  layout: {
+    title: '物联网平台', // 平台title
+    logo: '/icons/icon-192x192.png', // 平台logo
+    siderWidth: 208, // 左侧菜单栏宽度
+    headerHeight: 48, // 头部高度
+    collapsedWidth: 48,
+    mode: 'inline',
+    theme: 'light', // 'dark' 'light'
+  }
 }

src/App.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-</script>
-
 <template>
   <router-view />
 </template>
 
+<script setup lang="ts">
+</script>
+
 <style scoped>
 </style>

src/api/comm.ts

@@ -23,3 +23,8 @@ export const getSearchHistory = (target:string) => server.get<SearchHistoryList[
  * @param target
  */
 export const deleteSearchHistory = (target:string, id:string) => server.remove<SearchHistoryList[]>(`/user/settings/${target}/${id}`)
+
+/**
+ * 获取当前系统版本
+ */
+export const systemVersion = () => server.get<{edition?: string}>('/system/version')

src/api/device/instance.ts

@@ -1,6 +1,7 @@
+import { LocalStore } from '@/utils/comm'
 import server from '@/utils/request'
-import { BASE_API_PATH } from '@/utils/variable'
-import { DeviceInstance } from '@/views/device/instance/typings'
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
+import { DeviceInstance } from '@/views/device/Instance/typings'
 
 /**
  * 删除设备物模型
@@ -97,5 +98,5 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
   * @param type 文件类型
   * @returns 
   */
-  export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
+export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
  

src/api/device/product.ts

@@ -109,4 +109,9 @@ export const deleteProduct = (id: string) => server.patch(`/device-product/${id}
  * @param id 产品ID
  */
  export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
- 
+/**
+ * 保存产品
+ * @param data 产品信息
+ * @returns 
+ */
+export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)

src/api/home.ts

@@ -12,4 +12,6 @@ export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
 // 产品数量
 export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
 // 查询产品列表
-export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
+export const getProductList_api = (data:object={}) => server.get(`/device/product/_query/no-paging?paging=false`, data);
+// 查询设备列表
+export const getDeviceList_api = (data:object) => server.post(`/device-instance/_query/`, data);

src/api/iot-card/cardManagement.ts

@@ -0,0 +1,67 @@
+import server from '@/utils/request'
+
+/**
+ * 不分页查询平台对接
+ * @param data
+ */
+export const queryPlatformNoPage = (data: any) => server.post(`/network/card/platform/_query/no-paging`, data)
+
+/**
+ * 分页查询物联卡管理列表
+ * @param data
+ */
+export const query = (data: any) => server.post(`/network/card/_query`, data)
+
+/**
+ * 激活待激活物联卡
+ * @param cardId
+ */
+export const changeDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_activation`);
+
+/**
+ * 停用已激活物联卡
+ * @param cardId
+ */
+export const unDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_deactivate`);
+
+/**
+ * 复机已停机物联卡
+ * @param cardId 
+ */
+export const resumption = (cardId: string) => server.get(`/network/card/${cardId}/_resumption`);
+
+/**
+ * 删除物联卡
+ * @param id 
+ */
+export const del = (id: string) => server.remove(`/network/card/${id}`);
+
+
+/**
+ * 激活待激活物联卡(批量)
+ * @param data
+ */
+export const changeDeployBatch = (data: any) => server.get(`/network/card/_activation/_bitch`, data);
+
+/**
+ * 停用已激活物联卡(批量)
+ * @param data
+ */
+export const unDeployBatch = (data: any) => server.get(`/network/card/_deactivate/_bitch`, data);
+
+/**
+ * 复机已停机物联卡(批量)
+ * @param data
+ */
+export const resumptionBatch = (data: any) => server.get(`/network/card/_resumption/_bitch`, data);
+
+/**
+ * 同步物联卡状态
+ */
+export const sync = () => server.get(`/network/card/state/_sync`);
+
+/**
+ * 批量删除物联卡
+ * @param data
+ */
+export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);

src/api/login.ts

@@ -46,4 +46,9 @@ export const bindInfo = () => server.get(`/application/sso/_all`)
  * 查询配置信息
  * @returns 
  */
-export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
+export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
+
+/**
+ * 获取当前登录用户信息
+ */
+export const userDetail = () => server.get<any>('/user/detail')

src/api/notice/config.ts

@@ -1,4 +1,5 @@
 import { patch, post, get, remove } from '@/utils/request'
+import { TemplateFormData } from '@/views/notice/Template/types'
 
 export default {
     // 列表
@@ -10,14 +11,14 @@ export default {
     // 修改
     update: (data: any) => patch(`/notifier/config`, data),
     del: (id: string) => remove(`/notifier/config/${id}`),
-    getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
-    getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
+    getTemplate: (data: any, id: string) => post<TemplateFormData[]>(`/notifier/template/${id}/_query`, data),
+    getTemplateDetail: (id: string) => get<TemplateFormData>(`/notifier/template/${id}/detail`),
     debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
     getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
     // 获取所有平台用户
-    getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
+    getPlatformUsers: () => post<any>(`/user/_query/no-paging`, { paging: false }),
     // 钉钉部门
-    dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
+    dingTalkDept: (id: string) => get<any>(`/notifier/dingtalk/corp/${id}/departments/tree`),
     // 钉钉部门人员
     getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
     // 钉钉已经绑定的人员
@@ -25,7 +26,7 @@ export default {
     // 钉钉绑定用户
     dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
     // 微信部门
-    weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
+    weChatDept: (id: string) => get<any>(`/notifier/wechat/corp/${id}/departments`),
     // 微信部门人员
     getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
     // 微信已经绑定的人员

src/api/notice/template.ts

@@ -16,12 +16,12 @@ export default {
     debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
     getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
     // 钉钉/微信, 根据配置获取部门和用户
-    getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
-    getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
+    getDept: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/departments`),
+    getUser: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/users`),
     // 微信获取标签推送
-    getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
+    getTags: (id: string) => get<any>(`/notifier/wechat/corp/${id}/tags`),
     // 语音/短信获取阿里云模板
-    getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
+    getAliTemplate: (id: any) => get(`/notifier/sms/aliyun/${id}/templates`),
     // 短信获取签名
-    getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
+    getSigns: (id: any) => get(`/notifier/sms/aliyun/${id}/signs`)
 }

src/api/system/menu.ts

@@ -0,0 +1,3 @@
+import server from '@/utils/request'
+
+export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)

src/api/system/permission.ts

@@ -1,6 +1,15 @@
 import server from '@/utils/request';
 
 // 获取权限列表
-export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
-// 修改权限信息
-export const editPermission_api = (data:object) => server.patch(`/permission`,data);
+export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
+// 新增时校验标识id是否可用
+export const checkId_api = (data: object) => server.get(`/permission/id/_validate`, data);
+// 修改权限 | 导入文件内容
+export const editPermission_api = (data: object) => server.patch(`/permission`, data);
+// 添加权限
+export const addPermission_api = (data: object) => server.post(`/permission`, data);
+// 删除权限
+export const delPermission_api = (id: string) => server.remove(`/permission/${id}`);
+
+// 导出权限数据
+export const exportPermission_api = (data: object) => server.post(`/permission/_query/no-paging`, data);

src/components/AIcon/index.tsx

@@ -27,8 +27,23 @@ const iconKeys = [
     'SyncOutlined',
     'ExclamationCircleOutlined',
     'UploadOutlined',
+    'LoadingOutlined',
     'PlusCircleOutlined',
-    'QuestionCircleOutlined'
+    'QuestionCircleOutlined',
+    'DisconnectOutlined',
+    'LinkOutlined',
+    'PoweroffOutlined',
+    'SwapOutlined',
+    'BugOutlined',
+    'BarsOutlined',
+    'ArrowDownOutlined',
+    'SmallDashOutlined',
+    'TeamOutlined',
+    'MenuUnfoldOutlined',
+    'MenuFoldOutlined',
+    'QuestionCircleOutlined',
+    'InfoCircleOutlined',
+    'SearchOutlined',
 ]
 
 const Icon = (props: {type: string}) => {

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>

src/components/Layout/BasicLayout.tsx

@@ -0,0 +1,226 @@
+import {
+  computed,
+  reactive,
+  unref,
+  defineComponent,
+  toRefs,
+  provide
+} from 'vue'
+
+import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue'
+import { Layout } from 'ant-design-vue'
+import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
+import { defaultSettingProps, defaultSettings } from './defaultSetting'
+import type { PureSettings } from './defaultSetting'
+import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
+import type {
+  BreadcrumbRender,
+  CollapsedButtonRender, CustomRender,
+  FooterRender,
+  HeaderContentRender,
+  HeaderRender,
+  MenuContentRender,
+  MenuExtraRender,
+  MenuFooterRender,
+  MenuHeaderRender,
+  MenuItemRender,
+  RightContentRender,
+  SubMenuItemRender
+} from './typings'
+import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
+import { getSlot } from '@/utils/comm'
+import { getMenuFirstChildren } from 'components/Layout/utils'
+import { pick } from 'lodash-es'
+import { routeContextInjectKey } from './RouteContext'
+import { HeaderView, headerViewProps } from './components/Header'
+
+export const basicLayoutProps = {
+  ...defaultSettingProps,
+  ...siderMenuProps,
+  ...headerViewProps,
+
+  breadcrumb: {
+    type: [Object, Function] as PropType<BreadcrumbProps>,
+    default: () => null
+  },
+  breadcrumbRender: {
+    type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
+    default() {
+      return null
+    }
+  },
+  contentStyle: {
+    type: [String, Object] as PropType<CSSProperties>,
+    default: () => {
+      return null
+    }
+  },
+  pure: {
+    type: Boolean,
+    default: () => false
+  }
+}
+
+export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>>;
+
+export default defineComponent({
+  name: 'ProLayout',
+  inheritAttrs: false,
+  props: basicLayoutProps,
+  emits: [
+    'update:collapsed',
+    'update:open-keys',
+    'update:selected-keys',
+    'collapse',
+    'openKeys',
+    'select',
+    'menuHeaderClick',
+    'menuClick'
+  ],
+  setup(props, { emit, attrs, slots }) {
+    const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth))
+
+    const onCollapse = (collapsed: boolean) => {
+      emit('update:collapsed', collapsed)
+      emit('collapse', collapsed)
+    }
+    const onOpenKeys = (openKeys: string[] | false) => {
+      emit('update:open-keys', openKeys)
+      emit('openKeys', openKeys)
+    }
+    const onSelect = (selectedKeys: string[] | false) => {
+      emit('update:selected-keys', selectedKeys)
+      emit('select', selectedKeys)
+    }
+    const onMenuHeaderClick = (e: MouseEvent) => {
+      emit('menuHeaderClick', e)
+    }
+    const onMenuClick = (args: any) => {
+      emit('menuClick', args)
+    }
+    const headerRender = (
+      p: BasicLayoutProps & {
+        hasSiderMenu: boolean;
+        headerRender: HeaderRender;
+        rightContentRender: RightContentRender;
+      },
+      matchMenuKeys?: string[]
+    ): CustomRender | null => {
+      if (p.headerRender === false) {
+        return null
+      }
+      return <HeaderView {...p} />
+    }
+
+    const breadcrumb = computed<BreadcrumbProps>(() => ({
+      ...props.breadcrumb,
+      itemRender: getSlot<BreadcrumbRender>(slots, props, 'breadcrumbRender') as BreadcrumbRender
+    }))
+
+    const flatMenuData = computed(
+      () => (props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || [])
+
+    const routeContext = reactive<RouteContextProps>({
+      ...(pick(toRefs(props), [
+        'menuData',
+        'openKeys',
+        'selectedKeys',
+        'contentWidth',
+        'headerHeight'
+      ]) as any),
+      siderWidth,
+      breadcrumb,
+      flatMenuData
+    })
+
+    provide(routeContextInjectKey, routeContext)
+
+    return () => {
+      const {
+        pure,
+        onCollapse: propsOnCollapse,
+        onOpenKeys: propsOnOpenKeys,
+        onSelect: propsOnSelect,
+        onMenuClick: propsOnMenuClick,
+        ...restProps
+      } = props
+
+      const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
+      const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
+      const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
+
+      // menu
+      const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
+      const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
+      const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
+      const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender')
+      const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender')
+
+      const headerDom = computed(() =>
+        headerRender(
+          {
+            ...props,
+            hasSiderMenu: true,
+            menuItemRender,
+            subMenuItemRender,
+            menuData: props.menuData,
+            onCollapse,
+            onOpenKeys,
+            onSelect,
+            onMenuHeaderClick,
+            rightContentRender,
+            collapsedButtonRender,
+            menuExtraRender,
+            menuContentRender,
+            headerRender: customHeaderRender,
+            theme: props.navTheme
+          },
+          []
+        )
+      )
+
+      return (
+        <>
+          {
+            pure ? (
+              slots.default?.()
+            ) : (
+              <Layout
+                class={'pro-layout'}
+                style={{
+                  minHeight: '100vh'
+                }}
+              >
+                <SiderMenuWrapper
+                  {...restProps}
+                  theme={props.navTheme}
+                  menuHeaderRender={menuHeaderRender}
+                  menuExtraRender={menuExtraRender}
+                  menuContentRender={menuContentRender}
+                  menuItemRender={menuItemRender}
+                  subMenuItemRender={subMenuItemRender}
+                  collapsedButtonRender={collapsedButtonRender}
+                  onCollapse={onCollapse}
+                  onSelect={onSelect}
+                  onOpenKeys={onOpenKeys}
+                  onMenuClick={onMenuClick}
+                />
+
+                <Layout>
+                  {headerDom.value}
+                  <Layout>
+                    {slots.default?.()}
+                  </Layout>
+                </Layout>
+              </Layout>
+            )
+          }
+        </>
+      )
+    }
+  }
+})
+
+
+
+

src/components/Layout/BasicLayoutPage.vue

@@ -0,0 +1,83 @@
+<template>
+  <ProLayout
+    v-bind='layoutConf'
+    v-model:openKeys="state.openKeys"
+    v-model:collapsed="state.collapsed"
+    v-model:selectedKeys="state.selectedKeys"
+    :pure='state.pure'
+    :breadcrumb='{ routes: breadcrumb }'
+  >
+    <template #breadcrumbRender='slotProps'>
+      <a v-if='slotProps.route.index !== 0'>{{slotProps.route.breadcrumbName}}</a>
+      <span v-else>{{slotProps.route.breadcrumbName}}</span>
+    </template>
+    <router-view v-slot='{ Component}'>
+      <component :is='Component' />
+    </router-view>
+  </ProLayout>
+</template>
+
+<script setup lang="ts" name='BasicLayoutPage'>
+import { ProLayout } from '@/components/Layout'
+import DefaultSetting from '../../../config/config'
+import { useMenuStore } from '@/store/menu'
+
+type StateType = {
+  collapsed: boolean
+  openKeys: string[]
+  selectedKeys: string[]
+  pure: boolean
+}
+
+const router = useRouter()
+const route = useRoute()
+
+const menu = useMenuStore()
+
+const layoutConf = reactive({
+  navTheme: DefaultSetting.layout.theme,
+  siderWidth: DefaultSetting.layout.siderWidth,
+  logo: DefaultSetting.layout.logo,
+  title: DefaultSetting.layout.title,
+  menuData: menu.menus,
+});
+
+const state = reactive<StateType>({
+  pure: false,
+  collapsed: false, // default value
+  openKeys: [],
+  selectedKeys: [],
+});
+
+const breadcrumb = computed(() =>
+  router.currentRoute.value.matched.concat().map((item, index) => {
+    return {
+      index,
+      path: item.path,
+      breadcrumbName: item.meta.title || ''
+    }
+  })
+)
+
+watchEffect(() => {
+  if (router.currentRoute) {
+    const matched = router.currentRoute.value.matched.concat()
+    state.selectedKeys = matched.map(r => r.path)
+    state.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map(r => r.path)
+    console.log(state.selectedKeys)
+  }
+  // TODO 获取当前路由中参数，用于控制pure
+})
+
+watchEffect(() => {
+  if (route.query && 'layout' in route.query && route.query.layout === 'false') {
+    state.pure = true
+  } else {
+    state.pure = false
+  }
+})
+
+</script>
+
+<style scoped>
+</style>

src/components/Layout/BlankLayoutPage.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'BlankLayoutPage'
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Layout/RouteContext.tsx

@@ -0,0 +1,45 @@
+import type { ComputedRef, VNodeChild, InjectionKey } from 'vue'
+import type { PureSettings } from 'components/Layout/defaultSetting'
+import type { MenuDataItem } from 'components/Layout/typings'
+import { useContext } from 'components/Layout/hooks/context'
+
+export interface Route {
+  path: string;
+  breadcrumbName: string;
+  children?: Omit<Route, 'children'>[];
+}
+
+export interface BreadcrumbProps {
+  prefixCls?: string;
+  routes?: Route[];
+  params?: any;
+  separator?: VNodeChild;
+  itemRender?: (opts: { route: Route; params: any; routes: Array<Route>; paths: Array<string> }) => VNodeChild;
+}
+
+export type BreadcrumbListReturn = Pick<BreadcrumbProps, Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>>;
+
+export interface MenuState {
+  selectedKeys: string[];
+  openKeys: string[];
+}
+
+export interface RouteContextProps extends Partial<PureSettings>, MenuState {
+  menuData: MenuDataItem[];
+  flatMenuData?: MenuDataItem[];
+
+  getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
+  breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
+  collapsed?: boolean;
+  hasSideMenu?: boolean;
+  siderWidth?: number;
+  headerHeight?: number;
+  /* 附加属性 */
+  [key: string]: any;
+}
+
+export const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
+
+export const useRouteContext = () =>
+  useContext<Required<RouteContextProps>>(routeContextInjectKey, {});
+

src/components/Layout/components/Header/Header.tsx

@@ -0,0 +1,128 @@
+import type { ExtractPropTypes, FunctionalComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
+import { defaultRenderLogo, siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
+import BaseMenu from '../SiderMenu/BaseMenu'
+import { useRouteContext } from 'components/Layout/RouteContext'
+import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
+import { defaultSettingProps } from 'components/Layout/defaultSetting'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
+import './index.less'
+import { omit } from 'lodash-es'
+import { RouteRecordRaw } from 'vue-router'
+import { clearMenuItem } from 'components/Layout/utils'
+
+export const headerProps = {
+  ...defaultSettingProps,
+  collapsed: PropTypes.looseBool,
+  menuData: {
+    type: Array as PropType<MenuDataItem[]>,
+    default: () => [],
+  },
+  logo: siderMenuProps.logo,
+  logoStyle: siderMenuProps.logoStyle,
+  menuRender: {
+    type: [Object, Function] as PropType<
+      WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>
+      >,
+    default: () => undefined,
+  },
+  menuItemRender: siderMenuProps.menuItemRender,
+  subMenuItemRender: siderMenuProps.subMenuItemRender,
+  rightContentRender: {
+    type: [Object, Function] as PropType<RightContentRender>,
+    default: () => undefined,
+  },
+  siderWidth: PropTypes.number.def(208),
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onCollapse: siderMenuProps.onCollapse,
+  onOpenKeys: siderMenuProps.onOpenKeys,
+  onSelect: siderMenuProps.onSelect,
+}
+
+export type HeaderProps = ExtractPropTypes<typeof headerProps>;
+
+export default defineComponent({
+  name: 'Header',
+  emits: [
+    'menuHeaderClick', 'collapse', 'openKeys', 'select'
+  ],
+  inheritAttrs: false,
+  props: headerProps,
+  setup(props, { slots, emit}) {
+
+    const {
+      onSelect,
+      onMenuHeaderClick,
+      onOpenKeys,
+      logo,
+      logoStyle,
+      menuData,
+      navTheme,
+      contentWidth,
+      title,
+      rightContentRender
+    } = props;
+
+    const rightSize = ref<number | string>('auto')
+
+    const context = useRouteContext();
+
+    const noChildrenMenuData = (menuData || []).map((item) => ({
+      ...item,
+      children: undefined,
+    })) as RouteRecordRaw[];
+
+    const clearMenuData = clearMenuItem(noChildrenMenuData);
+
+    return () => (
+      <>
+        <div
+          class={`header-content ${navTheme}`}
+        >
+          <div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
+            <div class={'header-main-left'} onClick={onMenuHeaderClick}>
+              <div class={'header-logo'}>
+                <a>
+                  {defaultRenderLogo(logo, logoStyle)}
+                  <h1 title={title}>{ title }</h1>
+                </a>
+              </div>
+            </div>
+            <div style={{ flex: 1 }} class={'header-menu'}>
+              <BaseMenu
+                theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme}
+                menuData={clearMenuData}
+                mode={'horizontal'}
+                menuItemRender={props.menuItemRender}
+                subMenuItemRender={props.subMenuItemRender}
+                openKeys={context.openKeys}
+                selectedKeys={context.selectedKeys}
+                {...{
+                  'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
+                  'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
+                }}
+              />
+            </div>
+            <div class={'header-right'} style={{ minWidth: rightSize.value }}>
+              <div>
+                <ResizeObserver
+                  onResize={({ width }: { width: number}) => {
+                    rightSize.value = width
+                  }}
+                >
+                  {
+                    rightContentRender && typeof rightContentRender === 'function' ? (
+                      <div>{rightContentRender({...props})}</div>
+                    ) : rightContentRender
+                  }
+                </ResizeObserver>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/components/Layout/components/Header/index.less

@@ -0,0 +1,64 @@
+.header-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
+  transition: background .3s,width .2s;
+
+  &.light {
+    background-color: #fff;
+  }
+
+  &.dark {
+    .header-logo {
+      >a {
+        > h1 {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+
+  .header-main {
+    padding-left: 16px;
+    display: flex;
+    height: 100%;
+
+    .header-main-left {
+      display: flex;
+      min-width: 192px;
+
+      .header-logo {
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        min-width: 165px;
+        overflow: hidden;
+
+        > a {
+          color: @primary-color;
+          text-decoration: none;
+          background-color: transparent;
+          outline: none;
+          cursor: pointer;
+          transition: color .3s;
+
+          > h1 {
+            vertical-align: top;
+            display: inline-block;
+            margin: 0 0 0 12px;
+            font-size: 16px;
+            color: rgba(0,0,0,.85);
+          }
+        }
+
+        img {
+          display: inline-block;
+          height: 32px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}

src/components/Layout/components/Header/index.tsx

@@ -0,0 +1,64 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import type { MenuDataItem, WithFalse, ProProps, CustomRender, RightContentRender } from '../../typings'
+import { siderMenuProps } from '../SiderMenu/SiderMenu'
+import { defaultSettingProps } from 'components/Layout/defaultSetting'
+import Header, { headerProps } from './Header'
+import { useRouteContext } from 'components/Layout/RouteContext'
+import type { RouteRecordRaw } from 'vue-router'
+import { clearMenuItem } from 'components/Layout/utils'
+import DefaultSetting from '../../../../../config/config'
+import { Layout } from 'ant-design-vue'
+
+export const headerViewProps = {
+  ...headerProps
+}
+
+export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps>>;
+
+export const HeaderView = defineComponent({
+  name: 'HeaderView',
+  inheritAttrs: false,
+  props: headerViewProps,
+  setup(props) {
+    const { headerHeight, onCollapse } = toRefs(props);
+
+    const context = useRouteContext();
+
+    const clearMenuData = computed(
+      () => (context.menuData && clearMenuItem(context.menuData as RouteRecordRaw[])) || []
+    );
+
+    return () => (
+      <>
+        <Layout.Header
+          style={{
+            padding: 0,
+            height: `${headerHeight.value}px`,
+            lineHeight: `${headerHeight.value}px`,
+            width: `100%`,
+
+          }}
+        />
+        <Layout.Header
+          style={{
+            padding: 0,
+            height: `${headerHeight.value}px`,
+            lineHeight: `${headerHeight.value}px`,
+            width: `100%`,
+            zIndex: 19,
+            position: 'fixed',
+            top: 0,
+            right: 0
+          }}
+        >
+          <Header
+            {...props}
+            onCollapse={onCollapse.value}
+            menuData={clearMenuData.value}
+          />
+        </Layout.Header>
+      </>
+    )
+}
+})

src/components/Layout/components/PageContainer/index.less

@@ -0,0 +1,23 @@
+.page-container {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .page-container-grid-content {
+    padding: 24px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    > div, .page-container-children-content, .page-container-full-height {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .children-full-height {
+      > :nth-child(1) {
+        min-height: 100%;
+      }
+    }
+  }
+}

src/components/Layout/components/PageContainer/index.tsx

@@ -0,0 +1,248 @@
+import { TabPaneProps } from 'ant-design-vue'
+import type { ExtractPropTypes, FunctionalComponent, PropType, VNodeChild } from 'vue'
+import { pageHeaderProps } from 'ant-design-vue/es/page-header';
+import type { DefaultPropRender, PageHeaderRender } from 'components/Layout/typings'
+import type { AffixProps, TabBarExtraContent } from 'components/Layout/components/PageContainer/types'
+import { useRouteContext } from 'components/Layout/RouteContext'
+import { getSlotVNode } from '@/utils/comm'
+import { Affix, Spin, PageHeader, Tabs } from 'ant-design-vue';
+import './index.less'
+
+export const pageHeaderTabConfig = {
+  /**
+   * @name tabs 的列表
+   */
+  tabList: {
+    type: [Object, Function, Array] as PropType<(Omit<TabPaneProps, 'id'> & { key?: string })[]>,
+    default: () => undefined,
+  },
+  /**
+   * @name 当前选中 tab 的 key
+   */
+  tabActiveKey: String, //PropTypes.string,
+  /**
+   * @name tab 上多余的区域
+   */
+  tabBarExtraContent: {
+    type: [Object, Function] as PropType<TabBarExtraContent>,
+    default: () => undefined,
+  },
+  /**
+   * @name tabs 的其他配置
+   */
+  tabProps: {
+    type: Object, //as PropType<TabsProps>,
+    default: () => undefined,
+  },
+  /**
+   * @name 固定 PageHeader 到页面顶部
+   */
+  fixedHeader: Boolean, //PropTypes.looseBool,
+  // events
+  onTabChange: Function, //PropTypes.func,
+};
+export type PageHeaderTabConfig = Partial<ExtractPropTypes<typeof pageHeaderTabConfig>>;
+
+
+export const pageContainerProps = {
+  ...pageHeaderTabConfig,
+  ...pageHeaderProps,
+  prefixCls: {
+    type: String,
+    default: 'ant-pro',
+  }, //PropTypes.string.def('ant-pro'),
+  title: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  subTitle: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  content: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  extra: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  extraContent: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  header: {
+    type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
+    default: () => null,
+  },
+  pageHeaderRender: {
+    type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
+    default: () => undefined,
+  },
+  affixProps: {
+    type: [Object, Function] as PropType<AffixProps>,
+  },
+  ghost: {
+    type: Boolean,
+    default: () => false,
+  }, //PropTypes.looseBool,
+  loading: {
+    type: Boolean,
+    default: () => undefined,
+  }, //PropTypes.looseBool,
+  childrenFullHeight: {
+    type: Boolean,
+    default: () => true,
+  }
+};
+
+export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
+
+const renderFooter = (
+  props: Omit< PageContainerProps, 'title' >
+): VNodeChild | JSX.Element => {
+  const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps } = props;
+  if (tabList && tabList.length) {
+    return (
+      <Tabs
+        class={`page-container-tabs`}
+        activeKey={tabActiveKey}
+        onChange={(key: string | number) => {
+          if (onTabChange) {
+            onTabChange(key);
+          }
+        }}
+        tabBarExtraContent={tabBarExtraContent}
+        {...tabProps}
+      >
+        {tabList.map((item) => (
+          <Tabs.TabPane {...item} tab={item.tab} key={item.key} />
+        ))}
+      </Tabs>
+    );
+  }
+  return null;
+}
+
+const ProPageHeader: FunctionalComponent<PageContainerProps> = (props) => {
+  const {
+    title,
+    tabList,
+    tabActiveKey,
+    content,
+    pageHeaderRender,
+    header,
+    extraContent,
+    prefixCls,
+    fixedHeader: _,
+    ...restProps
+  } = props;
+
+  const value = useRouteContext()
+
+  if (pageHeaderRender === false) {
+    return null;
+  }
+
+  if (pageHeaderRender) {
+    return pageHeaderRender({ ...props });
+  }
+  let pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+
+  const unrefBreadcrumb = unref(value.breadcrumb || {});
+  const breadcrumb = (props as any).breadcrumb || {
+    ...unrefBreadcrumb,
+    routes: unrefBreadcrumb.routes,
+    itemRender: unrefBreadcrumb.itemRender,
+  };
+
+  return (
+    <div class={`page-container-wrap`}>
+      <PageHeader
+        {...restProps}
+        // {...value}
+        title={pageHeaderTitle}
+        breadcrumb={breadcrumb}
+        footer={renderFooter({
+          ...restProps,
+          tabList,
+          tabActiveKey
+        })}
+        prefixCls={prefixCls}
+      >
+        {/*{header || renderPageHeader(content, extraContent)}*/}
+        { header }
+      </PageHeader>
+    </div>
+  );
+}
+
+const PageContainer = defineComponent({
+  name: 'PageContainer',
+  inheritAttrs: false,
+  props: pageContainerProps,
+  setup(props, { slots }) {
+    const { loading, affixProps, ghost, childrenFullHeight } = toRefs(props);
+
+    const value = useRouteContext();
+
+    const headerDom = computed(() => {
+      // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
+      const headerContent = getSlotVNode<DefaultPropRender>(slots, props, 'content');
+      const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
+      const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
+      const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
+
+      // @ts-ignore
+      return (
+        <ProPageHeader
+          {...props}
+          prefixCls={undefined}
+          ghost={ghost.value}
+          subTitle={subTitle}
+          content={headerContent}
+          // tags={tags}
+          extra={extra}
+          extraContent={extraContent}
+        />
+      );
+    })
+
+    return () => {
+      const { fixedHeader } = props;
+      return (
+        <div class={'page-container'}>
+          {fixedHeader && headerDom.value ? (
+            <Affix {...affixProps.value} offsetTop={value.hasHeader && value.fixedHeader ? value.headerHeight : 0}>
+              {headerDom.value}
+            </Affix>
+          ) : (
+            headerDom.value
+          )}
+          <div class={'page-container-grid-content'}>
+            {loading.value ? (
+              <Spin />
+            ) : slots.default ? (
+              <div>
+                <div class={`page-container-children-content ${childrenFullHeight.value ? 'children-full-height' : ''}`}>{slots.default()}</div>
+                {value.hasFooterToolbar && (
+                  <div
+                    style={{
+                      height: 48,
+                      marginTop: 24,
+                    }}
+                  />
+                )}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      );
+    };
+  }
+})
+
+export default PageContainer

src/components/Layout/components/PageContainer/types.d.ts

@@ -0,0 +1,56 @@
+import type { VNodeChild, CSSProperties, VNode } from 'vue';
+
+export interface Tab {
+  key: string;
+  tab: string | VNode | JSX.Element;
+}
+
+export type TabBarType = 'line' | 'card' | 'editable-card';
+export type TabSize = 'default' | 'large' | 'small';
+export type TabPosition = 'left' | 'right';
+export type TabBarExtraPosition = TabPosition;
+
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
+
+export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
+
+export interface TabsProps {
+  prefixCls?: string;
+  class?: string | string[];
+  style?: CSSProperties;
+  id?: string;
+
+  activeKey?: string;
+  hideAdd?: boolean;
+  // Unchangeable
+  // size?: TabSize;
+  tabBarStyle?: CSSProperties;
+  tabPosition?: TabPosition;
+  type?: TabBarType;
+  tabBarGutter?: number;
+}
+
+export interface AffixProps {
+  offsetBottom: number;
+  offsetTop: number;
+  target?: () => HTMLElement;
+
+  onChange?: (affixed: boolean) => void;
+}
+
+export interface TabPaneProps {
+  tab?: string | VNodeChild | JSX.Element;
+  class?: string | string[];
+  style?: CSSProperties;
+  disabled?: boolean;
+  forceRender?: boolean;
+  closable?: boolean;
+  closeIcon?: VNodeChild | JSX.Element;
+
+  prefixCls?: string;
+  tabKey?: string;
+  id: string;
+  animated?: boolean;
+  active?: boolean;
+  destroyInactiveTabPane?: boolean;
+}

src/components/Layout/components/SiderMenu/BaseMenu.tsx

@@ -0,0 +1,217 @@
+import { isVNode, defineComponent, getCurrentInstance, withCtx } from 'vue'
+import type { FunctionalComponent, PropType, VNodeChild, ComponentInternalInstance, ConcreteComponent, ExtractPropTypes, VNode } from 'vue'
+import type {
+  MenuDataItem,
+  WithFalse,
+  MenuItemRender,
+  LayoutType,
+  MenuTheme,
+  SubMenuItemRender,
+  MenuMode
+} from '../../typings'
+import type {
+  SelectEventHandler,
+  MenuClickEventHandler,
+  SelectInfo,
+  MenuInfo,
+} from 'ant-design-vue/es/menu/src/interface';
+import type { Key } from 'ant-design-vue/es/_util/type';
+import IconFont from '@/components/AIcon'
+import { Menu } from 'ant-design-vue';
+import { isUrl } from '@/utils/regular'
+
+export const baseMenuProps = {
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: 'inline',
+  },
+  menuData: {
+    type: Array as PropType<MenuDataItem[]>,
+    default: () => [],
+  },
+  layout: {
+    type: String as PropType<LayoutType>,
+    default: 'side',
+  },
+  theme: {
+    type: String as PropType<MenuTheme | 'realDark'>,
+    default: 'dark',
+  },
+  collapsed: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: () => false,
+  },
+  openKeys: {
+    type: Array as PropType<WithFalse<string[]>>,
+    default: () => undefined,
+  },
+  selectedKeys: {
+    type: Array as PropType<WithFalse<string[]>>,
+    default: () => undefined,
+  },
+  menuProps: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => null,
+  },
+  menuItemRender: {
+    type: [Object, Function, Boolean] as PropType<MenuItemRender>,
+    default: () => undefined,
+  },
+  subMenuItemRender: {
+    type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
+    default: () => undefined,
+  },
+  onClick: [Function, Object] as PropType<(...args: any) => void>,
+}
+
+export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
+
+const LazyIcon: FunctionalComponent<{ icon:  VNodeChild | string;}> = (props) => {
+  const {icon} = props
+  if (!icon) return null
+  if (typeof icon === 'string' && icon !== '') {
+    return <IconFont type={icon} />;
+  }
+  if (isVNode(icon)) {
+    return icon;
+  }
+}
+
+class MenuUtil {
+  props: BaseMenuProps;
+  ctx: ComponentInternalInstance | null;
+  RouterLink: ConcreteComponent;
+
+  constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
+    this.props = props
+    this.ctx = ctx
+    this.RouterLink = resolveComponent('router-link') as ConcreteComponent
+  }
+
+  getNavMenuItems = (menusData: MenuDataItem[] = []) => {
+    return menusData.map((item) => this.getSubMenuOrItem(item)).filter((item) => item);
+  };
+
+  getSubMenuOrItem = (item: MenuDataItem): VNode => {
+    if (
+      Array.isArray(item.children) &&
+      item.children.length > 0 &&
+      !item?.meta?.hideInMenu &&
+      !item?.meta?.hideChildrenInMenu
+    ) {
+      if (this.props.subMenuItemRender) {
+        const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
+        return subMenuItemRender({
+          item,
+          children: this.getNavMenuItems(item.children),
+        }) as VNode;
+      }
+      const menuTitle = item.meta?.title
+
+
+      const defaultTitle = item.meta?.icon ? (
+        <span class={`header-menu-item`}>
+          <span class={`header-menu-item-title`}>{menuTitle}</span>
+        </span>
+      ) : (
+        <span class={`header-menu-item`}>{menuTitle}</span>
+      );
+
+      return (
+        <Menu.SubMenu
+          title={defaultTitle}
+          key={item.path}
+          icon={<LazyIcon icon={item.meta?.icon} />}
+        >
+          {this.getNavMenuItems(item.children)}
+        </Menu.SubMenu>
+      )
+    }
+
+    const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
+
+    const [title, icon] = this.getMenuItem(item);
+
+    return (
+      (menuItemRender && (menuItemRender({ item, title, icon }) as VNode)) || (
+        <Menu.Item disabled={item.meta?.disabled} danger={item.meta?.danger} key={item.path}>
+          {title}
+        </Menu.Item>
+      )
+    )
+  }
+
+  getMenuItem = (item: MenuDataItem) => {
+    const meta = { ...item.meta };
+    const target = (meta.target || null) as string | null;
+    const hasUrl = isUrl(item.path);
+    const CustomTag: any = (target && 'a') || this.RouterLink;
+    const props = { to: { path: item.path, ...item.meta } };
+    const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
+
+    const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined;
+    const menuTitle = item.meta?.title;
+    const defaultTitle = item.meta?.icon ? (
+      <CustomTag {...attrs} {...props} class={`header-menu-item`}>
+        {icon}
+        <span class={`header-menu-item-title`}>{menuTitle}</span>
+      </CustomTag>
+    ) : (
+      <CustomTag {...attrs} {...props} class={`header-menu-item`}>
+        <span>{menuTitle}</span>
+      </CustomTag>
+    );
+
+    return [defaultTitle, icon];
+  }
+
+  conversionPath = (path: string) => {
+    if (path && path.indexOf('http') === 0) {
+      return path;
+    }
+    return `/${path || ''}`.replace(/\/+/g, '/');
+  }
+}
+
+export default defineComponent({
+  name: 'BaseMenu',
+  props: baseMenuProps,
+  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
+  setup(props, { emit }) {
+    const ctx = getCurrentInstance()
+
+    const menuUtil = new MenuUtil(props, ctx);
+
+    const handleOpenChange = (openKeys: Key[]): void => {
+      emit('update:openKeys', openKeys);
+    };
+
+    const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
+      // ignore https? link handle selectkeys
+      if (isUrl(args.key as string)) {
+        return;
+      }
+      emit('update:selectedKeys', args.selectedKeys);
+    };
+
+    const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
+      emit('click', args);
+    };
+
+    return () => (
+      <Menu
+        {...props}
+        key='Menu'
+        inlineIndent={16}
+        theme={props.theme as 'dark' | 'light'}
+        openKeys={props.openKeys === false ? [] : props.openKeys}
+        selectedKeys={props.selectedKeys || []}
+        onOpenChange={handleOpenChange}
+        onSelect={handleSelect}
+        onClick={handleClick}
+      >
+        {menuUtil.getNavMenuItems(props.menuData)}
+      </Menu>
+    )
+  }
+})

src/components/Layout/components/SiderMenu/SiderMenu.less

@@ -0,0 +1,16 @@
+.pro-layout-sider {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+
+  .ant-layout-sider-children {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}

src/components/Layout/components/SiderMenu/SiderMenu.tsx

@@ -0,0 +1,192 @@
+import { Layout, Menu } from 'ant-design-vue';
+import type { CSSProperties, ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
+import type {
+  LogoRender,
+  MenuHeaderRender,
+  MenuExtraRender,
+  MenuContentRender,
+  CollapsedButtonRender,
+  WithFalse,
+  CustomRender
+} from '../../typings'
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import { baseMenuProps } from 'components/Layout/components/SiderMenu/BaseMenu'
+import AIcon from '@/components/AIcon'
+import { useRouteContext } from 'components/Layout/RouteContext'
+import BaseMenu from './BaseMenu'
+import './SiderMenu.less'
+import { computed } from 'vue'
+import { omit } from 'lodash-es'
+
+export type PrivateSiderMenuProps = {
+  matchMenuKeys?: string[];
+}
+
+const { Sider } = Layout
+
+export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
+  if (!logo) {
+    return null;
+  }
+  if (typeof logo === 'string') {
+    return <img src={logo} alt="logo" style={logoStyle} />;
+  }
+  if (typeof logo === 'function') {
+    // @ts-ignore
+    return logo();
+  }
+  return logo;
+};
+
+export const siderMenuProps = {
+  ...baseMenuProps,
+  logo: {
+    type: [Object, String, Function] as PropType<LogoRender>,
+    default: () => '',
+  },
+  logoStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => undefined,
+  },
+  siderWidth: PropTypes.number.def(208),
+  headerHeight: PropTypes.number.def(48),
+  collapsedWidth: PropTypes.number.def(48),
+  menuHeaderRender: {
+    type: [Function, Object, Boolean] as PropType<MenuHeaderRender>,
+    default: () => undefined,
+  },
+  menuContentRender: {
+    type: [Function, Object, Boolean] as PropType<MenuContentRender>,
+    default: () => undefined,
+  },
+  menuExtraRender: {
+    type: [Function, Object, Boolean] as PropType<MenuExtraRender>,
+    default: () => undefined,
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean] as PropType<CollapsedButtonRender>,
+    default: () => undefined,
+  },
+  onMenuHeaderClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  onCollapse: {
+    type: Function as PropType<(collapsed: boolean) => void>,
+  },
+  onOpenKeys: {
+    type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
+  },
+  onSelect: {
+    type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>,
+  },
+}
+
+export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>;
+
+export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender =>
+  collapsed ? <AIcon type={'MenuUnfoldOutlined'} /> : <AIcon type={'MenuFoldOutlined'} />;
+
+const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => {
+  const {
+    collapsed,
+    collapsedWidth = 48,
+    menuExtraRender = false,
+    menuContentRender = false,
+    collapsedButtonRender = defaultRenderCollapsedButton,
+  } = props;
+
+  const context = useRouteContext();
+  const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
+
+  const extraDom = menuExtraRender && menuExtraRender(props);
+
+  const handleSelect = ($event: string[]) => {
+    if (props.onSelect) {
+      props.onSelect([context.selectedKeys[0], ...$event]);
+    }
+  }
+
+  const defaultMenuDom = (
+    <BaseMenu
+      theme={props.theme as 'dark' | 'light'}
+      mode="inline"
+      menuData={context.flatMenuData}
+      collapsed={props.collapsed}
+      openKeys={context.openKeys}
+      selectedKeys={context.selectedKeys}
+      menuItemRender={props.menuItemRender}
+      subMenuItemRender={props.subMenuItemRender}
+      onClick={props.onMenuClick}
+      style={{
+        width: '100%',
+      }}
+      {...{
+        'onUpdate:openKeys': ($event: string[]) => props.onOpenKeys && props.onOpenKeys($event),
+        'onUpdate:selectedKeys': handleSelect,
+      }}
+    />
+  )
+
+  const Style = computed(() => {
+    return {
+      overflow: 'hidden',
+      height: '100vh',
+      zIndex: 18,
+      paddingTop: `${props.headerHeight}px`,
+      flex: `0 0 ${sSideWidth.value}px`,
+      minWidth: `${sSideWidth.value}px`,
+      maxWidth: `${sSideWidth.value}px`,
+      width: `${sSideWidth.value}px`,
+      transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
+    }
+  })
+
+  return (
+    <>
+      <div
+        style={Style.value}
+      ></div>
+      <Sider
+        collapsible
+        trigger={null}
+        collapsed={collapsed}
+        onCollapse={(collapse: boolean) => {
+          props.onCollapse?.(collapse);
+        }}
+        collapsedWidth={collapsedWidth}
+        style={omit(Style.value, ['transition'])}
+        width={sSideWidth.value}
+        theme={props.theme as 'dark' | 'light'}
+        class={'pro-layout-sider'}
+      >
+        <div style="flex: 1; overflow: hidden auto;">
+          {(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
+        </div>
+        <div class={`header-links`}>
+          {collapsedButtonRender !== false ? (
+            <Menu
+              class={`header-link-menu`}
+              inlineIndent={16}
+              theme={props.theme as 'light' | 'dark'}
+              selectedKeys={[]}
+              openKeys={[]}
+              mode="inline"
+              onClick={() => {
+                if (props.onCollapse) {
+                  props.onCollapse(!props.collapsed);
+                }
+              }}
+            >
+              <Menu.Item key={'collapsed-button'} class={`header-collapsed-button`} title={false}>
+                {collapsedButtonRender && typeof collapsedButtonRender === 'function'
+                  ? collapsedButtonRender(collapsed)
+                  : collapsedButtonRender}
+              </Menu.Item>
+            </Menu>
+          ) : null}
+        </div>
+      </Sider>
+    </>
+  )
+}
+
+export default SiderMenu

src/components/Layout/defaultSetting.ts

@@ -0,0 +1,68 @@
+import type { PropType } from 'vue'
+import config from '../../../config/config'
+
+export interface PureSettings {
+  title: string
+  /**
+   * theme for nav menu
+   */
+  navTheme: 'dark' | 'light' | 'realDark' | undefined;
+  /**
+   * nav menu position: `side` or `top`
+   */
+  headerHeight?: number;
+  /**
+   * customize header height
+   */
+  layout: 'side' | 'top' | 'mix';
+  /**
+   * layout of content: `Fluid` or `Fixed`, only works when layout is top
+   */
+  contentWidth: 'Fluid' | 'Fixed';
+  menu: { locale?: boolean; defaultOpenAll?: boolean };
+  splitMenus?: boolean;
+}
+
+export const defaultSettings = {
+  navTheme: 'dark',
+  layout: 'side',
+  contentWidth: 'Fluid',
+  fixedHeader: false,
+  fixSiderbar: false,
+  menu: {},
+  headerHeight: 48,
+  iconfontUrl: '',
+  title: config.title
+};
+
+export const defaultSettingProps = {
+  navTheme: {
+    type: String as PropType<PureSettings['navTheme']>,
+    default: defaultSettings.navTheme,
+  },
+  title: {
+    type: String as PropType<PureSettings['title']>,
+    default: () => defaultSettings.title,
+  },
+  layout: {
+    type: String as PropType<PureSettings['layout']>,
+    default: defaultSettings.layout,
+  },
+  contentWidth: {
+    type: String as PropType<PureSettings['contentWidth']>,
+    default: defaultSettings.contentWidth,
+  },
+  menu: {
+    type: Object as PropType<PureSettings['menu']>,
+    default: () => {
+      return {
+        locale: true,
+      };
+    },
+  },
+  headerHeight: {
+    type: Number as PropType<PureSettings['headerHeight']>,
+    default: defaultSettings.headerHeight,
+  },
+}
+

src/components/Layout/hooks/context.ts

@@ -0,0 +1,10 @@
+import { InjectionKey } from 'vue'
+
+export type ContextType<T> = any;
+
+export const useContext = <T>(
+  contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
+  defaultValue?: ContextType<T>
+): T => {
+  return inject(contextInjectKey, defaultValue || ({} as T));
+};

src/components/Layout/index.ts

@@ -0,0 +1,4 @@
+export { default as ProLayout } from './BasicLayout';
+export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
+export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
+export { default as PageContainer } from './components/PageContainer'

src/components/Layout/typings.ts

@@ -0,0 +1,68 @@
+import type { VNode, Slots } from 'vue';
+import { BreadcrumbProps } from 'components/Layout/RouteContext'
+import { VueNode } from 'ant-design-vue/es/_util/type'
+
+export interface MetaRecord {
+  /**
+   * @name 菜单的icon
+   */
+  icon?: string | VNode;
+  /**
+   * @name 自定义菜单的国际化 key，如果没有则返回自身
+   */
+  title?: string;
+  /**
+   * @name 在菜单中隐藏子节点
+   */
+  hideChildInMenu?: boolean;
+  /**
+   * @name 在菜单中隐藏自己和子节点
+   */
+  hideInMenu?: boolean;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+export interface MenuDataItem {
+  /**
+   * @name 用于标定选中的值，默认是 path
+   */
+  path: string;
+  name?: string | symbol;
+  meta?: MetaRecord;
+  /**
+   * @name 子菜单
+   */
+  children?: MenuDataItem[];
+}
+export type Theme = 'dark' | 'light';
+
+export type MenuTheme = Theme;
+export type MenuMode = 'horizontal' | 'vertical' | 'inline';
+export type LayoutType = 'side' | 'top' | 'mix';
+export type ProProps = Record<never, never>;
+export type TargetType = '_blank' | '_self' | unknown;
+export type BreadcrumbRender = BreadcrumbProps['itemRender'];
+
+export type CustomRender = VueNode;
+export type WithFalse<T> = T | false;
+export type LogoRender = WithFalse<CustomRender>;
+
+export type DefaultPropRender = WithFalse<CustomRender>;
+export type HeaderContentRender = WithFalse<() => CustomRender>;
+export type HeaderRender = WithFalse<(props: ProProps) => CustomRender>;
+export type FooterRender = WithFalse<(props: ProProps) => CustomRender>;
+export type RightContentRender = WithFalse<(props: ProProps) => CustomRender>;
+export type MenuItemRender = WithFalse<
+  (args: { item: MenuDataItem; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
+  >;
+export type SubMenuItemRender = WithFalse<(args: { item: MenuDataItem; children?: CustomRender[] }) => CustomRender>;
+export type MenuHeaderRender = WithFalse<(logo: CustomRender, title: CustomRender, props?: ProProps) => CustomRender>;
+export type MenuContentRender = WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>;
+export type MenuFooterRender = WithFalse<(props?: ProProps) => CustomRender>;
+export type MenuExtraRender = WithFalse<(props?: ProProps) => CustomRender>;
+
+export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => CustomRender>;
+
+export type PageHeaderRender = WithFalse<(props?: ProProps) => CustomRender>;
+

src/components/Layout/utils.ts

@@ -0,0 +1,48 @@
+import type { MenuDataItem } from 'components/Layout/typings'
+import type { RouteRecord, RouteRecordRaw } from 'vue-router'
+
+export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
+  return key === undefined ? [] : (menus[menus.findIndex((menu) => menu.path === key)] || {}).children || [];
+}
+
+export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
+  return menusData
+    .map((item: RouteRecord | RouteRecordRaw) => {
+      const finalItem = { ...item };
+      if (finalItem.meta?.hideInMenu) {
+        return null;
+      }
+
+      if (finalItem && finalItem?.children) {
+        if (
+          !finalItem.meta?.hideChildInMenu &&
+          finalItem.children.some(
+            (child: RouteRecord | RouteRecordRaw) => child && !child.meta?.hideInMenu
+          )
+        ) {
+          return {
+            ...item,
+            children: clearMenuItem(finalItem.children),
+          };
+        }
+        delete finalItem.children;
+      }
+      return finalItem;
+    })
+    .filter((item) => item) as RouteRecordRaw[];
+}
+
+export function flatMap(menusData: RouteRecord[]): MenuDataItem[] {
+  return menusData
+    .map((item) => {
+      const finalItem = { ...item } as MenuDataItem;
+      if (!finalItem.name || finalItem.meta?.hideInMenu) {
+        return null;
+      }
+      if (finalItem.children) {
+        delete finalItem.children;
+      }
+      return finalItem;
+    })
+    .filter((item) => item) as MenuDataItem[];
+}

src/components/PermissionButton/index.vue

@@ -4,25 +4,50 @@
       <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
         <a-tooltip v-if="tooltip" v-bind="tooltip">
           <slot v-if="noButton"></slot>
-          <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
+          <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+            <slot></slot>
+            <template #icon>
+              <slot name="icon"></slot>
+            </template>
+          </a-button>
         </a-tooltip>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+          <slot></slot>
+          <template #icon>
+            <slot name="icon"></slot>
+          </template>
+        </a-button>
       </a-popconfirm>
     </template>
     <template v-else-if="tooltip">
       <a-tooltip v-bind="tooltip">
         <slot v-if="noButton"></slot>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+          <slot></slot>
+          <template #icon>
+            <slot name="icon"></slot>
+          </template>
+        </a-button>
       </a-tooltip>
     </template>
     <template v-else>
       <slot v-if="noButton"></slot>
-      <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
+      <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <slot></slot>
+        <template #icon>
+          <slot name="icon"></slot>
+        </template>
+      </a-button>
     </template>
   </template>
   <a-tooltip v-else title="没有权限">
     <slot v-if="noButton"></slot>
-    <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
+    <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+      <slot></slot>
+      <template #icon>
+        <slot name="icon"></slot>
+      </template>
+    </a-button>
   </a-tooltip>
 </template>
 <script setup lang="ts" name="PermissionButton">
@@ -49,13 +74,13 @@ const isPermission = computed(() => {
   return permissionStore.hasPermission(props.hasPermission)
 })
 const _isPermission = computed(() =>
-  'hasPermission' in props && isPermission
+  'hasPermission' in props && isPermission.value
     ? 'disabled' in buttonProps
       ? buttonProps.disabled
       : false
     : true
 )
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 
 </style>

src/components/Table/index.tsx

@@ -54,7 +54,7 @@ export interface JTableProps extends TableProps{
     rowSelection?: TableProps['rowSelection'];
     cardProps?:  Record<string, any>;
     dataSource?:  Record<string, any>[];
-    gridColumn: number;
+    gridColumn?: number;
     /**
      * 用于不同分辨率
      * gridColumns[0] 1366 ~ 1440 分辨率；

src/components/ValueItem/index.vue

@@ -109,7 +109,7 @@ const props = defineProps({
     // 组件类型
     itemType: {
         type: String,
-        default: () => 'geoPoint',
+        default: () => 'string',
     },
     // 下拉选择框下拉数据
     options: {

src/components/index.ts

@@ -9,6 +9,7 @@ import Search from './Search'
 import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
 import JUpload from './JUpload/index.vue'
+import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'
 
 export default  {
     install(app: App) {
@@ -22,5 +23,8 @@ export default  {
             .component('NormalUpload', NormalUpload)
             .component('FileFormat', FileFormat)
             .component('JUpload', JUpload)
+            .component('BasicLayoutPage', BasicLayoutPage)
+            .component('BlankLayoutPage', BlankLayoutPage)
+            .component('PageContainer', PageContainer)
     }
 }

src/router/index.ts

@@ -1,11 +1,12 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router'
 import menus, { LoginPath } from './menu'
-import { LocalStore } from "@/utils/comm";
-import { TOKEN_KEY } from "@/utils/variable";
+import { getToken } from '@/utils/comm'
+import { useUserInfo } from '@/store/userInfo'
+import { useSystem } from '@/store/system'
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes: menus
+  history: createWebHashHistory(),
+  routes: menus
 })
 
 const filterPath = [
@@ -14,17 +15,45 @@ const filterPath = [
 ]
 
 router.beforeEach((to, from, next) => {
-    const token = LocalStore.get(TOKEN_KEY)
-    // TODO 切换路由取消请求
-    if (token || filterPath.includes(to.path)) {
-        next()
-    } else {
-        if (to.path === LoginPath) {
-            next()
+  // TODO 切换路由取消请求
+  const isFilterPath = filterPath.includes(to.path)
+  if (isFilterPath) {
+    next()
+  } else {
+    const token = getToken()
+    if (token) {
+      if (to.path === LoginPath) {
+        next({ path: '/' })
+      } else {
+        const userInfo = useUserInfo()
+        const system = useSystem()
+        if (!userInfo.$state.userInfos.username) {
+          userInfo.getUserInfo()
+          system.getSystemVersion().then((menuData: any[]) => {
+            menuData.forEach(r => {
+              router.addRoute('main', r)
+            })
+            const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
+            if(to.path === redirect) {
+              next({ ...to, replace: true })
+            } else {
+              next({ path: redirect })
+            }
+          })
+
         } else {
-            next({ path: LoginPath })
+          next()
         }
+      }
+
+    } else {
+      if (to.path === LoginPath) {
+        next()
+      } else {
+        next({ path: LoginPath })
+      }
     }
+  }
 })
 
 export default router

src/router/menu.ts

@@ -127,6 +127,10 @@ export default [
       path: '/iot-card/Dashboard',
       component: () => import('@/views/iot-card/Dashboard/index.vue')
     },
+    {
+      path: '/iot-card/CardManagement',
+      component: () => import('@/views/iot-card/CardManagement/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',

src/store/instance.ts

@@ -1,4 +1,4 @@
-import { DeviceInstance, InstanceModel } from "@/views/device/instance/typings";
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
 import { defineStore } from "pinia";
 
 export const useInstanceStore = defineStore({
@@ -7,6 +7,7 @@ export const useInstanceStore = defineStore({
   actions: {
     setCurrent(current: Partial<DeviceInstance>) {
       this.current = current
+      this.detail = current
     }
   }
 })

src/store/menu.ts

@@ -1,9 +1,12 @@
 import { defineStore } from "pinia";
+import { queryOwnThree } from '@/api/system/menu'
+import { filterAsnycRouter } from '@/utils/menu'
 
 export const useMenuStore = defineStore({
   id: 'menu',
   state: () => ({
-    menus: {} as {[key: string]: string},
+    menus: {},
+    menusKey: []
   }),
   getters:  {
     hasPermission(state) {
@@ -19,6 +22,47 @@ export const useMenuStore = defineStore({
         }
         return false
       }
+    },
+  },
+  actions: {
+    queryMenuTree(isCommunity = false): Promise<any[]> {
+      return new Promise(async (res) => {
+        //过滤非集成的菜单
+        const params = [
+          {
+            terms: [
+              {
+                terms: [
+                  {
+                    column: 'owner',
+                    termType: 'eq',
+                    value: 'iot',
+                  },
+                  {
+                    column: 'owner',
+                    termType: 'isnull',
+                    value: '1',
+                    type: 'or',
+                  },
+                ],
+              },
+            ],
+          },
+        ];
+        const resp = await queryOwnThree({ paging: false, terms: params })
+        if (resp.success) {
+          const menus = filterAsnycRouter(resp.result)
+          menus.push({
+            path: '/',
+            redirect: menus[0]?.path,
+            meta: {
+              hideInMenu: true
+            }
+          })
+          this.menus = menus
+          res(menus)
+        }
+      })
     }
   }
 })

src/store/metadata.ts

@@ -0,0 +1,31 @@
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
+import { defineStore } from "pinia";
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+
+type MetadataModelType = {
+  item: MetadataItem | unknown;
+  edit: boolean;
+  type: MetadataType;
+  action: 'edit' | 'add';
+  import: boolean;
+  importMetadata: boolean;
+};
+
+export const useMetadataStore = defineStore({
+  id: 'metadata',
+  state: () => ({ 
+    model: {
+      item: undefined,
+      edit: false,
+      type: 'events',
+      action: 'add',
+      import: false,
+      importMetadata: false,
+    } as MetadataModelType 
+  }),
+  actions: {
+    set(key: string, value: any) {
+      this.model[key] = value
+    }
+  }
+})

src/store/system.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { systemVersion } from '@/api/comm'
+import { useMenuStore } from './menu'
+
+export const useSystem = defineStore('system', {
+  state: () => ({
+    isCommunity: false
+  }),
+  actions: {
+    getSystemVersion(): Promise<any[]> {
+      return new Promise(async(res, rej) => {
+        const resp = await systemVersion()
+        if (resp.success && resp.result) {
+          const isCommunity = resp.result.edition === 'community'
+          this.isCommunity = isCommunity
+          //  获取菜单
+          const menu = useMenuStore()
+          const menuData: any[] = await menu.queryMenuTree(isCommunity)
+          res(menuData)
+        }
+      })
+    }
+  }
+})

src/store/userInfo.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { authLogin } from '@/api/login';
+import { authLogin, userDetail } from '@/api/login';
 import { LocalStore } from '@/utils/comm';
 import { TOKEN_KEY } from '@/utils/variable';
 
@@ -38,5 +38,17 @@ export const useUserInfo = defineStore('userInfo', {
                     });
             });
         },
+        getUserInfo() {
+            return new Promise((res, rej) => {
+                userDetail().then(resp => {
+                    if (resp.success) {
+                        res(true)
+                        this.userInfos = resp.result
+                    } else {
+                        rej()
+                    }
+                }).catch(() => rej())
+            })
+        }
     },
 });

src/utils/comm.ts

@@ -1,41 +1,43 @@
+import type { Slots } from 'vue'
 import { TOKEN_KEY } from '@/utils/variable'
 import { Terms } from 'components/Search/types'
+import { urlReg } from '@/utils/regular'
 
 /**
  * 静态图片资源处理
  * @param path {String} 路径
  */
 export const getImage = (path: string) => {
-    return new URL('/images'+path, import.meta.url).href
+    return new URL('/images' + path, import.meta.url).href
 }
 
 export const LocalStore = {
-    set(key: string, data: any) {
-        localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
-    },
-    get(key: string) {
-        const dataStr = localStorage.getItem(key)
-        try {
-            if (dataStr) {
-                const data = JSON.parse(dataStr)
-                return data && typeof data === 'object' ? data : dataStr
-            } else {
-                return dataStr
-            }
-        } catch (e) {
-            return dataStr
-        }
-    },
-    remove(key: string) {
-        localStorage.removeItem(key)
-    },
-    removeAll() {
-        localStorage.clear()
+  set(key: string, data: any) {
+    localStorage.setItem(key, typeof data === 'string' ? data : JSON.stringify(data))
+  },
+  get(key: string) {
+    const dataStr = localStorage.getItem(key)
+    try {
+      if (dataStr) {
+        const data = JSON.parse(dataStr)
+        return data && typeof data === 'object' ? data : dataStr
+      } else {
+        return dataStr
+      }
+    } catch (e) {
+      return dataStr
     }
+  },
+  remove(key: string) {
+    localStorage.removeItem(key)
+  },
+  removeAll() {
+    localStorage.clear()
+  }
 }
 
 export const getToken = () => {
-    return LocalStore.get(TOKEN_KEY)
+  return LocalStore.get(TOKEN_KEY)
 }
 
 /**
@@ -45,7 +47,7 @@ export const getToken = () => {
  * @param key
  */
 export const filterTreeSelectNode = (value: string, treeNode: any, key: string = 'name'): boolean => {
-    return treeNode[key]?.includes(value)
+  return treeNode[key]?.includes(value)
 }
 
 /**
@@ -55,5 +57,47 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
  * @param key
  */
 export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
-    return option[key]?.includes(value)
+  return option[key]?.includes(value)
+}
+
+export function getSlot<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
+  if (props[prop] === false) {
+    // force not render
+    return false
+  }
+  return (props[prop] || slots[prop]) as T
+}
+
+export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, prop = 'default'): T | false {
+  if (props[prop] === false) {
+    return false;
+  }
+  return (props[prop] || slots[prop]?.()) as T;
+}
+
+/**
+ * 时间转换为'2022-01-02 14:03:05'
+ * @param date 时间对象
+ * @returns
+ */
+export const dateFormat = (dateSouce:any):string|Error => {
+    let date = null
+    try {
+        date = new Date(dateSouce)
+    } catch (error) {
+        return new Error('请传入日期格式数据')
+    }
+    let year = date.getFullYear();
+    let month: number | string = date.getMonth() + 1;
+    let day: number | string = date.getDate();
+    let hour: number | string = date.getHours();
+    let minutes: number | string = date.getMinutes();
+    let seconds: number | string = date.getSeconds();
+    month = (month < 10) ? '0' + month : month;
+    day = (day < 10) ? '0' + day : day;
+    hour = (hour < 10) ? '0' + hour : hour;
+    minutes = (minutes < 10) ? '0' + minutes : minutes;
+    seconds = (seconds < 10) ? '0' + seconds : seconds;
+    return year + "-" + month + "-" + day
+      + " " + hour + ":" + minutes + ":" + seconds;
 }

src/utils/encodeQuery.ts

@@ -1,3 +1,5 @@
+import { isObject } from 'lodash-es'
+
 export default function encodeQuery(params: any) {
   if (!params) return {};
   const queryParam = {
@@ -15,7 +17,7 @@ export default function encodeQuery(params: any) {
             terms[k] === '' ||
             terms[k] === undefined ||
             terms[k].length === 0 ||
-            terms[k] === {} ||
+            (isObject(terms[k]) && Object.keys(terms[k]).length === 0) ||
             terms[k] === null
           )
         ) {

src/utils/menu.ts

@@ -0,0 +1,111 @@
+const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
+import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
+
+type ExtraRouteItem = {
+  code: string
+  name: string
+  url?: string
+}
+// 额外子级路由
+const extraRouteObj = {
+  'media/Cascade': {
+    children: [
+      { code: 'Save', name: '新增' },
+      { code: 'Channel', name: '选择通道' },
+    ],
+  },
+  'media/Device': {
+    children: [
+      { code: 'Save', name: '详情' },
+      { code: 'Channel', name: '通道列表' },
+      { code: 'Playback', name: '回放' },
+    ],
+  },
+  'rule-engine/Scene': {
+    children: [
+      { code: 'Save', name: '详情' },
+      { code: 'Save2', name: '测试详情' },
+    ],
+  },
+  'rule-engine/Alarm/Configuration': {
+    children: [{ code: 'Save', name: '详情' }],
+  },
+  'device/Firmware': {
+    children: [{ code: 'Task', name: '升级任务' }],
+  },
+  demo: {
+    children: [{ code: 'AMap', name: '地图' }],
+  },
+  'system/Platforms': {
+    children: [
+      { code: 'Api', name: '赋权' },
+      { code: 'View', name: 'Api详情' },
+    ],
+  },
+  'system/DataSource': {
+    children: [{ code: 'Management', name: '管理' }],
+  },
+  'system/Menu': {
+    children: [{ code: 'Setting', name: '菜单配置' }],
+  },
+  'system/Apply': {
+    children: [
+      { code: 'Api', name: '赋权' },
+      { code: 'View', name: 'Api详情' },
+      { code: 'Save', name: '详情' },
+    ],
+  },
+};
+
+
+const resolveComponent = (name: any) => {
+  // TODO 暂时用system进行测试
+  const importPage = pagesComponent[`../views/${name}/index.vue`];
+  // if (!importPage) {
+  //   throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
+  // }
+
+  //@ts-ignore
+  return !importPage ? BlankLayoutPage :  importPage.default
+  // return importPage.default
+}
+
+const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
+  if (extraRouteObj[code]) {
+    return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
+      return {
+        url: `${url}/${route.code}`,
+        code: route.code,
+        name: route.name
+      }
+    })
+  }
+  return []
+}
+
+export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
+  return asyncRouterMap.map((route: any) => {
+
+    route.path = `${route.url}`
+    route.meta = {
+      icon: route.icon,
+      title: route.name
+    }
+
+    // 查看是否有隐藏子路由
+    route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
+
+    // TODO 查看是否具有详情页
+    // route.children = [...route.children, ]
+
+    if (route.children && route.children.length) {
+      route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
+      route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
+      route.redirect = route.children[0].url
+    } else {
+      route.component = resolveComponent(route.code);
+    }
+    console.log(route.code, route)
+    return route
+  })
+}

src/utils/regular.ts

@@ -0,0 +1,4 @@
+// 用于校验 url
+export const urlReg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+
+export const isUrl = (path: string): boolean => urlReg.test(path)

src/utils/request.ts

@@ -118,6 +118,7 @@ const errorHandler = (error: any) => {
         const status = error.response.status
         if (status === 403) {
             Notification.error({
+                key: '403',
                 message: 'Forbidden',
                 description: (data.message + '').substr(0, 90)
             })
@@ -129,22 +130,25 @@ const errorHandler = (error: any) => {
             }, 0)
         } else if (status === 500) {
             Notification.error({
+                key: '500',
                 message: 'Server Side Error',
                 description: (data.message + '').substr(0, 90)
             })
         } else if (status === 400) {
             Notification.error({
+                key: '400',
                 message: 'Request Error',
                 description: (data.message + '').substr(0, 90)
             })
         } else if (status === 401) {
             Notification.error({
+                key: '401',
                 message: 'Unauthorized',
                 description: 'Authorization verification failed'
             })
             setTimeout(() => {
                 router.replace({
-                    name: 'login'
+                    path: LoginPath
                 })
             }, 0)
         }

src/utils/utils.ts

@@ -55,4 +55,21 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.removeChild(formElement);
 };
 // 是否不是community版本
-export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
+
+
+/**
+ * 生成随机数
+ * @param length 
+ * @returns 
+ */
+export const randomString = (length?: number) => {
+  const tempLength = length || 32;
+  const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+  const maxPos = chars.length;
+  let pwd = '';
+  for (let i = 0; i < tempLength; i += 1) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+};

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(

src/views/device/components/Metadata/Base/Edit/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-drawer :mask-closable="false" width="25vw" visible :title="`新增${typeMapping[metadataStore.model.type]}`"
+    @close="close" destroy-on-close :z-index="1000" placement="right">
+    <template #extra>
+      <a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
+    </template>
+    <a-form ref="addFormRef" :model="form.model"></a-form>
+  </a-drawer>
+</template>
+<script lang="ts" setup name="Edit">
+import { useInstanceStore } from '@/store/instance';
+import { useMetadataStore } from '@/store/metadata';
+import { useProductStore } from '@/store/product';
+import { MetadataItem, ProductItem } from '@/views/device/Product/typings';
+import { message } from 'ant-design-vue/es';
+import type { FormInstance } from 'ant-design-vue/es';
+import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
+import { Store } from 'jetlinks-store';
+import { SystemConst } from '@/utils/consts';
+import { detail } from '@/api/device/instance';
+
+interface Props {
+  type: 'product' | 'device';
+  tabs?: string;
+}
+const props = defineProps<Props>()
+const route = useRoute()
+
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+const metadataStore = useMetadataStore()
+const typeMapping: Record<string, string> = {
+  properties: '属性',
+  events: '事件',
+  functions: '功能',
+  tags: '标签',
+};
+const close = () => {
+  metadataStore.set('edit', false)
+  metadataStore.set('item', {})
+}
+
+const addFormRef = ref<FormInstance>()
+/**
+ * 保存按钮
+ */
+const save = reactive({
+  loading: false,
+  saveMetadata: (deploy?: boolean) => {
+    save.loading = true
+    addFormRef.value?.validateFields().then(async (formValue) => {
+      const type = metadataStore.model.type
+      const _metadata = JSON.parse((props.type === 'device' ? instanceStore.detail.metadata : productStore.current?.metadata) || '{}')
+      const list = _metadata[type] as any[]
+      if (formValue.id) {
+        if (metadataStore.model.action === 'add' && list.some(item => item.id === formValue.id)) {
+          message.error('标识已存在')
+          save.loading = false
+          return
+        }
+      }
+      const updateStore = (metadata: string) => {
+        if (props.type === 'device') {
+          const detail = instanceStore.current
+          detail.metadata = metadata
+          instanceStore.setCurrent(detail)
+        } else {
+          const detail = productStore.current || {} as ProductItem
+          detail.metadata = metadata
+          productStore.setCurrent(detail)
+        }
+      }
+      const _data = updateMetadata(type, [formValue], _metadata, updateStore)
+      const result = await asyncUpdateMetadata(props.type, _data)
+      if (result.status === 200) {
+        if ((window as any).onTabSaveSuccess) {
+          if (result) {
+            (window as any).onTabSaveSuccess(result);
+            setTimeout(() => window.close(), 300);
+          }
+        } else {
+          Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
+          if (deploy) {
+            Store.set('product-deploy', deploy);
+          } else {
+            save.resetMetadata();
+            message.success({
+              key: 'metadata',
+              content: '操作成功！',
+            });
+          }
+          metadataStore.set('edit', false)
+          metadataStore.set('item', {})
+          if (instanceStore.detail) {
+            instanceStore.detail.independentMetadata = true;
+          }
+        }
+      } else {
+        message.error('操作失败！');
+      }
+      save.loading = false
+    })
+  },
+  resetMetadata: async () => {
+    const { id } = route.params
+    const resp = await detail(id as string);
+    if (resp.status === 200) {
+      instanceStore.detail = resp?.result || [];
+    }
+  }
+})
+
+const form = reactive({
+  model: {}
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/device/components/Metadata/Base/columns.ts

@@ -0,0 +1,91 @@
+import { JColumnProps } from "@/components/Table";
+
+const SourceMap = {
+  device: '设备',
+  manual: '手动',
+  rule: '规则',
+};
+
+const type = {
+  read: '读',
+  write: '写',
+  report: '上报',
+};
+
+const BaseColumns: JColumnProps[] = [
+  {
+    title: '标识',
+    dataIndex: 'id',
+    ellipsis: true,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '说明',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+];
+
+const EventColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '事件级别',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const FunctionColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '是否异步',
+    dataIndex: 'async',
+    scopedSlots: true,
+  },
+  // {
+  //   title: '读写类型',
+  //   dataIndex: 'expands',
+  //   render: (text: any) => (text?.type || []).map((item: string | number) => <Tag>{type[item]}</Tag>),
+  // },
+]);
+
+const PropertyColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '属性来源',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const TagColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const MetadataMapping = new Map<string, JColumnProps[]>();
+MetadataMapping.set('properties', PropertyColumns);
+MetadataMapping.set('events', EventColumns);
+MetadataMapping.set('tags', TagColumns);
+MetadataMapping.set('functions', FunctionColumns);
+
+export default MetadataMapping;

src/views/device/components/Metadata/Base/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <JTable :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id">
+    <template #headerTitle>
+      <a-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></a-input-search>
+      <PermissionButton :has-permission="permission" key="add" @click="handleAddClick"
+        :disabled="operateLimits('add', type)" type="primary" :tooltip="{
+          title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
+        }">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        新增
+      </PermissionButton>
+      <Edit
+        v-if="metadataStore.model.edit"
+        :type="target"
+        :tabs="type"
+      ></Edit>
+    </template>
+  </JTable>
+</template>
+<script setup lang="ts" name="BaseMetadata">
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+import MetadataMapping from './columns'
+import JTable, { JColumnProps } from '@/components/Table'
+import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product'
+import { useMetadataStore } from '@/store/metadata'
+import PermissionButton from '@/components/PermissionButton/index.vue'
+// import { detail } from '@/api/device/instance'
+// import { detail as productDetail } from '@/api/device/product'
+interface Props {
+  type: MetadataType;
+  target: 'product' | 'device';
+  permission: string | string[];
+}
+const props = defineProps<Props>()
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const loading = ref(false)
+const data = ref<MetadataItem[]>([])
+const { type, target = 'product' } = props
+const actions: JColumnProps[] = [
+  {
+    title: '操作',
+    align: 'left',
+    width: 200,
+    scopedSlots: true,
+  },
+];
+const columns = computed(() => MetadataMapping.get(type)!.concat(actions))
+const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}') as MetadataItem[])
+const searchValue = ref<string>()
+const handleSearch = (searchValue: string) => {
+  if (searchValue) {
+    const arr = items.value.filter(item => item.name!.indexOf(searchValue) > -1).sort((a, b) => b?.sortsIndex - a?.sortsIndex)
+    data.value = arr
+  } else {
+    data.value = items.value
+  }
+}
+
+onMounted(() => {
+
+})
+
+watch([route.params.id, type], () => {
+  // const res = target === 'product'
+  //       ? await productDetail(route.params.id as string)
+  //       : await detail(route.params.id as string);
+  const result = target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata
+  const item = JSON.parse(result || '{}') as MetadataItem[]
+  data.value = item[type]?.sort((a: any, b: any) => b?.sortsIndex - a?.sortsIndex)
+  loading.value = false
+}, { immediate: true })
+
+const metadataStore = useMetadataStore()
+const handleAddClick = () => {
+  metadataStore.set('edit', true)
+  metadataStore.set('item', undefined)
+  metadataStore.set('type', type)
+  metadataStore.set('action', 'add')
+}
+
+const limitsMap = new Map<string, any>();
+limitsMap.set('events-add', 'eventNotInsertable');
+limitsMap.set('events-updata', 'eventNotModifiable');
+limitsMap.set('properties-add', 'propertyNotInsertable');
+limitsMap.set('properties-updata', 'propertyNotModifiable');
+const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
+  return (
+    target === 'device' &&
+    (instanceStore.detail.features || []).find((item: { id: string; name: string }) => item.id === limitsMap.get(`${types}-${action}`))
+  );
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/device/components/Metadata/Import/index.vue

@@ -47,14 +47,16 @@ import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
 import { UploadProps } from 'ant-design-vue/es';
-import type { DeviceMetadata } from '@/views/device/Product/typings'
+import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
+const productStore = useProductStore()
 
 interface Props {
   visible: boolean,
@@ -191,8 +193,10 @@ const handleImport = async () => {
         const { id } = route.params || {}
         if (props?.type === 'device') {
           await saveMetadata(id as string, metadata)
+          instanceStore.setCurrent(JSON.parse(metadata || '{}'))
         } else {
           await modify(id as string, { metadata: metadata })
+          productStore.setCurrent(JSON.parse(metadata || '{}'))
         }
         loading.value = false
         // MetadataAction.insert(JSON.parse(metadata || '{}'));
@@ -231,10 +235,12 @@ const handleImport = async () => {
           if (props?.type === 'device') {
             const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}')
             // MetadataAction.insert(metadata);
+            instanceStore.setCurrent(metadata)
             message.success('导入成功')
           } else {
-            const metadata: DeviceMetadata = JSON.parse(params?.metadata || '{}')
+            const metadata: ProductItem = JSON.parse(params?.metadata || '{}')
             // MetadataAction.insert(metadata);
+            productStore.setCurrent(metadata)
             message.success('导入成功')
           }
         }

src/views/device/components/Metadata/metadata.ts

@@ -0,0 +1,61 @@
+import { saveProductMetadata } from "@/api/device/product";
+import { saveMetadata } from "@/api/device/instance";
+import type { DeviceInstance } from "../../Instance/typings";
+import type { DeviceMetadata, MetadataItem, MetadataType, ProductItem } from "../../Product/typings";
+
+/**
+ * 更新物模型
+ * @param type 物模型类型 events
+ * @param item 物模型数据 【{a},{b},{c}】
+ // * @param target product、device
+ * @param data product 、device [{event:[1,2,3]]
+ * @param onEvent 数据更新回调：更新数据库、发送事件等操作
+ *
+ */
+ export const updateMetadata = (
+  type: MetadataType,
+  item: MetadataItem[],
+  // target: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+  onEvent?: (item: string) => void,
+): ProductItem | DeviceInstance => {
+  if (!data) return data;
+  const metadata = JSON.parse(data.metadata || '{}') as DeviceMetadata;
+  const config = (metadata[type] || []) as MetadataItem[];
+  if (item.length > 0) {
+    item.forEach((i) => {
+      const index = config.findIndex((c) => c.id === i.id);
+      if (index > -1) {
+        config[index] = i;
+        // onEvent?.('update', i);
+      } else {
+        config.push(i);
+        // onEvent?.('add', i);
+      }
+    });
+  } else {
+    console.warn('未触发物模型修改');
+  }
+  // @ts-ignore
+  metadata[type] = config.sort((a, b) => b?.sortsIndex - a?.sortsIndex);
+  data.metadata = JSON.stringify(metadata);
+  onEvent?.(data.metadata)
+  return data;
+};
+
+/**
+ * 保存物模型数据到服务器
+ * @param type 类型
+ * @param data 数据
+ */
+export const asyncUpdateMetadata = (
+  type: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+): Promise<any> => {
+  switch (type) {
+    case 'product':
+      return saveProductMetadata(data);
+    case 'device':
+      return saveMetadata(data.id, JSON.parse(data.metadata || '{}'));
+  }
+};

src/views/home/components/StatusLabel.vue

@@ -0,0 +1,38 @@
+<template>
+    <span class="status-label-container">
+        <i class="circle" :style="{ background: bjColor }"></i>
+        <span>{{ props.statusLabel }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: string;
+    statusLabel: string;
+}>();
+
+const bjColor = computed(() => {
+    switch (props.statusValue) {
+        case 'online':
+            return '#52c41a';
+        case 'offline':
+            return '#ff4d4f';
+        case 'notActive':
+            return '#1890ff';
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>

src/views/home/components/StepCard.vue

@@ -21,11 +21,11 @@
         </div>
 
         <div class="dialogs">
-            <AccessMethodDialog
+            <ProductChooseDialog
                 :open-number="openAccess"
                 @confirm="againJumpPage"
             />
-            <FuncTestDialog
+            <DeviceChooseDialog
                 :open-number="openFunc"
                 @confirm="againJumpPage"
             />
@@ -38,8 +38,8 @@ import { PropType } from 'vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 
-import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
-import FuncTestDialog from './dialogs/FuncTestDialog.vue';
+import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
+import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
 
 import { recommendList } from '../index';
 
@@ -73,9 +73,8 @@ const jumpPage = (row: recommendList) => {
     }
 };
 // 弹窗返回后的二次跳转
-const againJumpPage = (paramsSource: object) => {
-    const params = { ...(selectRow.params || {}), ...paramsSource };
-    router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
+const againJumpPage = (params: string) => {
+    router.push(`${selectRow.linkUrl}/${params}`);
 };
 
 const objToParams = (source: object): string => {

src/views/home/components/dialogs/DeviceChooseDialog.vue

@@ -0,0 +1,181 @@
+<template>
+    <div ref="modal" class="func-test-dialog-container"></div>
+    <a-modal
+        v-model:visible="visible"
+        title="选择产品"
+        style="width: 1000px"
+        @ok="handleOk"
+        :getContainer="getContainer"
+        :maskClosable="false"
+    >
+        <Search type="simple" :columns="query.columns" @search="query.search" />
+        <JTable
+            model="TABLE"
+            :request="getDeviceList_api"
+            :columns="table.columns"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: table.selectedKeys,
+                onChange: table.onSelect,
+                type: 'radio',
+            }"
+        >
+            <template #modifyTime="slotProps">
+                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+            </template>
+            <template #state="slotProps">
+                <StatusLabel
+                    :status-value="slotProps.state.value"
+                    :status-label="slotProps.state.text"
+                />
+            </template>
+        </JTable>
+
+        <template #footer>
+            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="handleOk"
+                >确认</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import StatusLabel from '../StatusLabel.vue';
+
+import { ComponentInternalInstance } from 'vue';
+import { getDeviceList_api } from '@/api/home';
+import { dateFormat } from '@/utils/comm';
+import { message } from 'ant-design-vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['confirm']);
+const props = defineProps({
+    openNumber: Number,
+});
+
+// 弹窗控制
+const visible = ref<boolean>(false);
+const getContainer = () => proxy?.$refs.modal as HTMLElement;
+const handleOk = () => {
+    if (table.selectedKeys.length < 1) return message.warn('请选择设备');
+    emits('confirm', table.selectedKeys[0]);
+    visible.value = false;
+};
+watch(
+    () => props.openNumber,
+    () => {
+        visible.value = true;
+    },
+);
+
+const query = reactive({
+    params: {},
+    columns: [
+        {
+            title: '设备ID',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            ellipsis: true,
+            search: {
+                rename: 'state',
+                type: 'select',
+                options: [
+                    {
+                        label: '在线',
+                        value: 'online',
+                    },
+                    {
+                        label: '离线',
+                        value: 'offline',
+                    },
+                ],
+            },
+        },
+    ],
+    search: (params: object) => {
+        query.params = params;
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '设备Id',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            scopedSlots: true,
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            scopedSlots: true,
+        },
+    ],
+    selectedKeys: [] as string[],
+    onSelect: (keys: string[]) => {
+        table.selectedKeys = [...keys];
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.func-test-dialog-container {
+    .search {
+        display: flex;
+    }
+}
+</style>

src/views/home/components/dialogs/FuncTestDialog.vue

@@ -1,98 +0,0 @@
-<template>
-    <div ref="modal" class="func-test-dialog-container"></div>
-    <a-modal
-        v-model:visible="visible"
-        title="选择产品"
-        style="width: 1000px"
-        @ok="handleOk"
-        :getContainer="getContainer"
-        :maskClosable="false"
-    >
-        <Search />
-        <JTable :columns="columns" model="TABLE"> </JTable>
-
-        <template #footer>
-            <a-button key="back" @click="visible = false">取消</a-button>
-            <a-button key="submit" type="primary" @click="handleOk"
-                >确认</a-button
-            >
-        </template>
-    </a-modal>
-</template>
-
-<script setup lang="ts">
-import { ComponentInternalInstance } from 'vue';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['confirm']);
-const props = defineProps({
-    openNumber: Number,
-});
-
-// 弹窗控制
-const visible = ref<boolean>(false);
-const getContainer = () => proxy?.$refs.modal as HTMLElement;
-const handleOk = () => {
-    emits('confirm', form.value);
-    visible.value = false;
-};
-watch(
-    () => props.openNumber,
-    () => {
-        visible.value = true;
-        clickReset();
-        clickSearch();
-    },
-);
-
-// 搜索部分
-const form = ref({
-    key: '',
-    relation: '',
-    keyValue: '',
-});
-
-const clickSearch = () => {};
-const clickReset = () => {
-    Object.entries(form.value).forEach(([prop]) => {
-        form.value[prop] = '';
-    });
-};
-
-// 表格部分
-const columns = [
-    {
-        title: '设备Id',
-        dataIndex: 'deviceId',
-        key: 'deviceId',
-    },
-    {
-        title: '设备名称',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
-    },
-    {
-        title: '产品名称',
-        dataIndex: 'productName',
-        key: 'productName',
-    },
-    {
-        title: '注册时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-    },
-    {
-        title: '状态',
-        dataIndex: 'status',
-        key: 'status',
-    },
-];
-</script>
-
-<style lang="less" scoped>
-.func-test-dialog-container {
-    .search {
-        display: flex;
-    }
-}
-</style>

src/views/home/components/dialogs/ProductChooseDialog.vue

@@ -53,7 +53,7 @@ const productList = ref<[productItem] | []>([]);
 
 const getContainer = () => proxy?.$refs.modal as HTMLElement;
 const getOptions = () => {
-    getProductList_api().then((resp) => {
+    getProductList_api().then((resp:any) => {
         productList.value = resp.result
             .filter((i: any) => !i?.accessId)
             .map((item: { name: any; id: any }) => ({
@@ -63,7 +63,7 @@ const getOptions = () => {
     });
 };
 const handleOk = () => {
-    emits('confirm', form.value);
+    emits('confirm', form.value.productId);
     visible.value = false;
 };
 const filterOption = (input: string, option: any) => {

src/views/home/index.d.ts

@@ -8,7 +8,11 @@ export interface recommendList {
     auth: boolean;
     dialogTag?: 'accessMethod' | 'funcTest';
 }
-
+// 产品列表里的每项
+export interface productItem {
+    label: string;
+    value: string
+}
 export interface deviceInfo {
     deviceId: string,
     deviceName: string,

src/views/home/modules/config.ts

@@ -1,9 +1,10 @@
 // import {getImage} from '@/utils/comm'
+import { useMenuStore } from "@/store/menu";
 import { usePermissionStore } from "@/store/permission";
 import { recommendList, bootConfig } from "../index";
 
 
-// 权限控制
+// 按钮权限控制
 const hasPermission = usePermissionStore().hasPermission;
 const productPermission = (action: string) =>
     hasPermission(`device/Product:${action}`);
@@ -11,6 +12,8 @@ const devicePermission = (action: string) =>
     hasPermission(`device/Instance:${action}`);
 const rulePermission = (action: string) =>
     hasPermission(`rule-engine/Instance:${action}`);
+// 页面权限控制
+const menuPermission = useMenuStore().hasPermission
 
 
 // 物联网引导-数据
@@ -18,7 +21,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '创建产品',
-        link: '/a',
+        link: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -27,7 +30,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP2',
         label: '创建设备',
-        link: '/b',
+        link: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -36,7 +39,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '规则引擎',
-        link: '/c',
+        link: '/iot/rule-engine/Instance',
         auth: rulePermission('add'),
         params: {
             save: true,
@@ -50,7 +53,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -61,7 +64,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product/detail',
         auth: productPermission('update'),
         dialogTag: 'accessMethod',
     },
@@ -69,7 +72,7 @@ export const deviceStepDetails: recommendList[] = [
         title: '添加测试设备',
         details: '添加单个设备，用于验证产品模型是否配置正确。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -80,15 +83,16 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/a',
-        auth: devicePermission('update'),
+        linkUrl: '/iot/device/Instance/detail',
+        // auth: devicePermission('update'),
+        auth: true,
         dialogTag: 'funcTest',
     },
     {
         title: '批量添加设备',
         details: '批量添加同一产品下的设备',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('import'),
         params: {
             import: true,
@@ -102,14 +106,14 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '设备接入配置',
-        link: '/a',
-        auth: true,
+        link: '/iot/link/accessConfig',
+        auth: menuPermission('link/accessConfig'),
     },
     {
         english: 'STEP2',
         label: '日志排查',
-        link: '/b',
-        auth: true,
+        link: '/iot/link/Log',
+        auth: menuPermission('link/Log'),
         params: {
             key: 'system',
         },
@@ -117,8 +121,8 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '实时监控',
-        link: '/c',
-        auth: false,
+        link: '/iot/link/dashboard',
+        auth: menuPermission('link/dashboard'),
         params: {
             save: true,
         },
@@ -131,44 +135,38 @@ export const opsStepDetails: recommendList[] = [
         details:
             '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
-        auth: true,
-        params: {
-            a: 1,
-            save: true,
-        },
+        linkUrl: '/iot/link/protocol',
+        auth: menuPermission('link/Protocol'),
+        
     },
     {
         title: '证书管理',
         details: '统一维护平台内的证书，用于数据通信加密。',
         iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/a',
-        auth: true,
-        params: {
-            a: 1,
-            save: false,
-        },
+        linkUrl: '/iot/link/Certificate',
+        auth: menuPermission('link/Certificate'),
+        
     },
     {
         title: '网络组件',
         details: '根据不同的传输类型配置平台底层网络组件相关参数。',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
-        auth: true,
+        linkUrl: '/iot/link/type',
+        auth: menuPermission('link/Type'),
     },
     {
         title: '设备接入网关',
         details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
-        auth: true,
+        linkUrl: '/iot/link/accessConfig',
+        auth: menuPermission('link/AccessConfig'),
     },
     {
         title: '日志管理',
         details: '监控系统日志，及时处理系统异常。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
-        auth: false,
+        linkUrl: '/iot/link/Log',
+        auth: menuPermission('Log'),
         params: {
             key: 'system',
         }

src/views/iot-card/CardManagement/index.vue

@@ -0,0 +1,571 @@
+<!-- 物联卡管理 -->
+<template>
+    <div class="page-container">
+        <Search
+            :columns="columns"
+            target="iot-card-management-search"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="cardManageRef"
+            :columns="columns"
+            :request="query"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            @cancelSelect="cancelSelect"
+            :params="params"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="handleAdd">
+                        <AIcon type="PlusOutlined" />新增
+                    </a-button>
+                    <a-dropdown>
+                        <a-button>
+                            批量操作
+                            <AIcon type="DownOutlined" />
+                        </a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item>
+                                    <a-button @click="exportVisible = true">
+                                        <AIcon type="ExportOutlined" />
+                                        批量导出
+                                    </a-button>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button @click="importVisible = true"
+                                        ><AIcon
+                                            type="ImportOutlined"
+                                        />批量导入</a-button
+                                    >
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleActive"
+                                        title="确认激活吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="CheckCircleOutlined" />
+                                            批量激活
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleStop"
+                                        title="确认停用吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="StopOutlined" />
+                                            批量停用
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleResumption"
+                                        title="确认复机吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="PoweroffOutlined" />
+                                            批量复机
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleSync"
+                                        title="确认同步状态吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="SwapOutlined" />
+                                            同步状态
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item v-if="_selectedRowKeys.length > 0">
+                                    <a-popconfirm
+                                        @confirm="handelRemove"
+                                        title="确认删除吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="DeleteOutlined" />
+                                            批量删除
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </a-space>
+            </template>
+            <template #totalFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.totalFlow
+                            ? slotProps.totalFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #usedFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.usedFlow
+                            ? slotProps.usedFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #residualFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.residualFlow
+                            ? slotProps.residualFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #cardType="slotProps">
+                {{ slotProps.cardType.text }}
+            </template>
+            <template #cardStateType="slotProps">
+                {{ slotProps.cardStateType.text }}
+            </template>
+            <template #activationDate="slotProps">
+                {{
+                    slotProps.activationDate
+                        ? moment(slotProps.activationDate).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #updateTime="slotProps">
+                {{
+                    slotProps.updateTime
+                        ? moment(slotProps.updateTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <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>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ActionsType } from '@/components/Table';
+import moment from 'moment';
+import {
+    query,
+    queryPlatformNoPage,
+    changeDeploy,
+    unDeploy,
+    resumption,
+    del,
+    changeDeployBatch,
+    unDeployBatch,
+    resumptionBatch,
+    sync,
+    removeCards,
+} from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const cardManageRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const _selectedRow = ref<any[]>([]);
+const visible = ref<boolean>(false);
+const exportVisible = ref<boolean>(false);
+const importVisible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: '卡号',
+        dataIndex: 'id',
+        key: 'id',
+        width: 300,
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: 'ICCID',
+        dataIndex: 'iccId',
+        key: 'iccId',
+        ellipsis: true,
+        width: 200,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '绑定设备',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        ellipsis: true,
+        width: 200,
+    },
+    {
+        title: '平台对接',
+        dataIndex: 'platformConfigName',
+        key: 'platformConfigName',
+        width: 200,
+        search: {
+            rename: 'platformConfigId',
+            type: 'select',
+            options: async () => {
+                return new Promise((resolve) => {
+                    queryPlatformNoPage({
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                        terms: [{ column: 'state', value: 'enabled' }],
+                    }).then((resp: any) => {
+                        const list = resp.result.map((item: any) => ({
+                            label: item.name,
+                            value: item.id,
+                        }));
+                        resolve(list);
+                    });
+                });
+            },
+        },
+    },
+    {
+        title: '运营商',
+        dataIndex: 'operatorName',
+        key: 'operatorName',
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '移动', value: '移动' },
+                { label: '电信', value: '电信' },
+                { label: '联通', value: '联通' },
+            ],
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'cardType',
+        key: 'cardType',
+        scopedSlots: true,
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '年卡', value: 'year' },
+                { label: '季卡', value: 'season' },
+                { label: '月卡', value: 'month' },
+                { label: '其他', value: 'other' },
+            ],
+        },
+    },
+    {
+        title: '总流量',
+        dataIndex: 'totalFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '使用流量',
+        dataIndex: 'usedFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '剩余流量',
+        dataIndex: 'residualFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '激活日期',
+        dataIndex: 'activationDate',
+        key: 'activationDate',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'cardStateType',
+        key: 'cardStateType',
+        width: 180,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '正常', value: 'using' },
+                { label: '未激活', value: 'toBeActivated' },
+                { label: '停机', value: 'deactivate' },
+            ],
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+        },
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+        },
+        {
+            key: 'bindDevice',
+            text: data.deviceId ? '解绑设备' : '绑定设备',
+            tooltip: {
+                title: data.deviceId ? '解绑设备' : '绑定设备',
+            },
+            icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+        },
+        {
+            key: 'activation',
+            text:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? '激活'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? '复机'
+                    : '停用',
+            tooltip: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '激活'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '复机'
+                        : '停用',
+            },
+            icon:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? 'CheckCircleOutlined'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? 'PoweroffOutlined'
+                    : 'StopOutlined',
+            popConfirm: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '确认激活？'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '确认复机？'
+                        : '确认停用?',
+                onConfirm: async () => {
+                    if (data.cardStateType?.value === 'toBeActivated') {
+                        changeDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else if (data.cardStateType?.value === 'deactivate') {
+                        resumption(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else {
+                        unDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            tooltip: {
+                title: '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp: any = await del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        cardManageRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (keys: string[], rows: []) => {
+    _selectedRowKeys.value = [...keys];
+    _selectedRow.value = [...rows];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+/**
+ * 新增
+ */
+const handleAdd = () => {};
+
+/**
+ * 批量激活
+ */
+const handleActive = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        changeDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量停用
+ */
+const handleStop = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        unDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量复机
+ */
+const handleResumption = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        resumptionBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 同步状态
+ */
+const handleSync = () => {
+    sync().then((res: any) => {
+        if (res.status === 200) {
+            cardManageRef.value?.reload();
+            message.success('同步状态成功');
+        }
+    });
+};
+
+/**
+ * 批量删除
+ */
+const handelRemove = async () => {
+    const resp = await removeCards(_selectedRow.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        _selectedRow.value = [];
+        cardManageRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.search {
+    width: calc(100% - 330px);
+}
+</style>

src/views/link/AccessConfig/Detail/index.vue

@@ -16,6 +16,12 @@
                 />
                 <Media v-if="showType === 'media'" :provider="provider" />
                 <Channel v-if="showType === 'channel'" :provider="provider" />
+                <Edge v-if="showType === 'edge'" :provider="provider" />
+                <Cloud
+                    v-if="showType === 'cloud'"
+                    :provider="provider"
+                    :data="data"
+                />
             </div>
         </a-card>
     </a-spin>
@@ -28,6 +34,8 @@ import Provider from '../components/Provider/index.vue';
 import { getProviders, detail } from '@/api/link/accessConfig';
 import Media from '../components/Media/index.vue';
 import Channel from '../components/Channel/index.vue';
+import Edge from '../components/Edge/index.vue';
+import Cloud from '../components/Cloud/index.vue';
 
 // const router = useRouter();
 const route = useRoute();

src/views/link/AccessConfig/components/Channel/index.vue

@@ -82,10 +82,11 @@
     </div>
 </template>
 
-<script lang="ts" setup name="AccessMedia">
+<script lang="ts" setup name="AccessChannel">
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { update, save } from '@/api/link/accessConfig';
+import { ProtocolMapping } from '../../Detail/data';
 
 interface FormState {
     name: string;
@@ -113,7 +114,7 @@ const onFinish = async (values: any) => {
         ...values,
         provider: providerId,
         protocol: providerId,
-        transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
+        transport: ProtocolMapping.get(providerId),
         channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
     };
     const resp = !!id ? await update({ ...params, id }) : await save(params);
@@ -145,8 +146,8 @@ const onFinish = async (values: any) => {
 }
 .config-right {
     padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
 
     .config-right-item {
         margin-bottom: 10px;

src/views/link/AccessConfig/components/Cloud/Ctwing.vue

@@ -0,0 +1,624 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过CTWing平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="接口地址"
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appKey"
+                                            name="appKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.appKey"
+                                                placeholder="请输入appKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appSecret"
+                                            name="appSecret"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appSecret',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="
+                                                    formState.appSecret
+                                                "
+                                                placeholder="请输入appSecret"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12"> </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、CTWing端创建产品、设备，以及一个第三方应用
+                                </div>
+                                <div>
+                                    2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
+                                    <div style="word-wrap: break-word">
+                                        {{
+                                            `${origin}/api/ctwing/${randomString()}/notify`
+                                        }}
+                                    </div>
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img1" />
+                                </div>
+                                <div>
+                                    3、IOT端创建类型为CTWing的设备接入网关
+                                </div>
+                                <div>
+                                    4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img2" />
+                                </div>
+                                <div>
+                                    5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img3" />
+                                </div>
+                                <h1>设备接入网关配置说明</h1>
+                                <div>
+                                    1.请将CTWing的AEP平台-应用管理中的App
+                                    Key和App Secret复制到当前页面
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img4" />
+                                </div>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudCtwing">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img1 = getImage('/network/01.png');
+const img2 = getImage('/network/02.jpg');
+const img3 = getImage('/network/03.png');
+const img4 = getImage('/network/04.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    appKey: string;
+    appSecret: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://ag-api.ctwing.cn/',
+    appKey: '',
+    appSecret: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+    // onFinish(data);
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+</style>

src/views/link/AccessConfig/components/Cloud/OneNet.vue

@@ -0,0 +1,736 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过OneNet平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                接口地址
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            同步物联网平台设备数据到OneNet
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="apiKey"
+                                            name="apiKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入apiKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.apiKey"
+                                                placeholder="请输入apiKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="validateToken"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入通知Token',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                通知Token
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            接收OneNet推送的Token地址
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="
+                                                    formState.validateToken
+                                                "
+                                                placeholder="请输入通知Token"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="aesKey"
+                                            :rules="[
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                aesKey
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            OneNet
+                                                            端生成的消息加密key
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="formState.aesKey"
+                                                placeholder="请输入aesKey"
+                                            /> </a-form-item
+                                    ></a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、OneNet端创建产品、设备，并配置HTTP推送
+                                </div>
+                                <div>
+                                    2、IOT端创建类型为OneNet的设备接入网关
+                                </div>
+                                <div>
+                                    3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img5" />
+                                </div>
+                                <div>
+                                    4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img6" />
+                                </div>
+                                <h1>HTTP推送配置说明</h1>
+                                <div class="image">
+                                    <a-image width="100%" :src="img" />
+                                </div>
+                                <div>
+                                    HTTP推送配置路径：应用开发&gt;数据推送
+                                </div>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="实例名称"
+                                        >推送实例的名称</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="推送地址">
+                                        用于接收OneNet推送设备数据的地址物联网平台地址:
+                                        <div style="word-wrap: break-word">
+                                            {{
+                                                `${origin}/api/one-net/${randomString()}/notify`
+                                            }}
+                                        </div>
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="Token">
+                                        自定义token,可用于验证请求是否来自OneNet
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="消息加密">
+                                        采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
+                                    </a-descriptions-item>
+                                </a-descriptions>
+
+                                <h1>设备接入网关配置说明</h1>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="apiKey"
+                                        >OneNet平台中具体产品的Key</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="通知Token">
+                                        填写OneNet数据推送配置中设置的Token
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="aesKey">
+                                        若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
+                                    </a-descriptions-item>
+                                </a-descriptions>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <!-- <a-form-item>
+                                <a-button
+                                    v-if="current !== 1"
+                                    type="primary"
+                                    html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item> -->
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudOneNet">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import {
+    InfoCircleOutlined,
+    QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img5 = getImage('/network/05.jpg');
+const img6 = getImage('/network/06.jpg');
+const img = getImage('/network/OneNet.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    apiKey: string;
+    validateToken: string;
+    aesKey: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://api.heclouds.com/',
+    apiKey: '',
+    validateToken: '',
+    aesKey: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+</style>

src/views/link/AccessConfig/components/Cloud/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <Ctwing
+            v-if="channel === 'Ctwing'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+        <OneNet
+            v-if="channel === 'OneNet'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloud">
+import Ctwing from './Ctwing.vue';
+import OneNet from './OneNet.vue';
+
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = props.provider.channel;
+</script>
+
+<style lang="less" scoped></style>

src/views/link/AccessConfig/components/Edge/index.vue

@@ -0,0 +1,492 @@
+<template>
+    <div v-if="type === 'edge'" class="container">
+        <a-steps
+            v-if="channel !== 'edge-child-device'"
+            class="steps-steps"
+            :current="stepCurrent"
+        >
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div v-if="channel !== 'edge-child-device'" class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <question-circle-outlined />
+                    选择与设备通信的网络组件
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="networkSearch"
+                    />
+                    <a-button type="primary" @click="addNetwork">新增</a-button>
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in networkList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="checkedChange"
+                                :checked="networkCurrent"
+                                :data="{
+                                    ...item,
+                                    description: item.description
+                                        ? item.description
+                                        : descriptionList[provider.id],
+                                }"
+                            >
+                                <template #other>
+                                    <div class="other">
+                                        <a-tooltip placement="topLeft">
+                                            <div
+                                                v-if="
+                                                    (item.addresses || [])
+                                                        .length > 1
+                                                "
+                                            >
+                                                <div
+                                                    v-for="i in item.addresses ||
+                                                    []"
+                                                    :key="i.address"
+                                                    class="item"
+                                                >
+                                                    <a-badge
+                                                        :color="
+                                                            i.health === -1
+                                                                ? 'red'
+                                                                : 'green'
+                                                        "
+                                                    />{{ i.address }}
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-for="i in (
+                                                    item.addresses || []
+                                                ).slice(0, 1)"
+                                                :key="i.address"
+                                                class="item"
+                                            >
+                                                <a-badge
+                                                    :color="
+                                                        i.health === -1
+                                                            ? 'red'
+                                                            : 'green'
+                                                    "
+                                                    :text="i.address"
+                                                />
+                                                <span
+                                                    v-if="
+                                                        (item.addresses || [])
+                                                            .length > 1
+                                                    "
+                                                    >...</span
+                                                >
+                                            </div>
+                                        </a-tooltip>
+                                    </div>
+                                </template>
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div
+            v-if="channel === 'edge-child-device' || current === 1"
+            class="card-last"
+        >
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="formState"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            @finish="onFinish"
+                            ref="formRef"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="formState.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="formState.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <a-form-item>
+                                <a-button
+                                    v-if="current !== 1"
+                                    type="primary"
+                                    html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ provider.id }}
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div
+            v-if="channel !== 'edge-child-device'"
+            :class="current !== 1 ? 'steps-action' : 'steps-action-save'"
+        >
+            <a-button v-if="[0].includes(current)" @click="next">
+                下一步
+            </a-button>
+            <a-button v-if="current === 1" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessEdge">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import {
+    descriptionList,
+    ProtocolMapping,
+    NetworkTypeMapping,
+} from '../../Detail/data';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+
+//测试数据1
+const networkListTest = {
+    message: 'success',
+    result: [
+        {
+            id: '1585192878304051200',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8101',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1583268266806009856',
+            name: '我的第一个MQTT服务组件',
+            description: '',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8100',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1570335308902912000',
+            name: '0915MQTT网络组件_勿动',
+            description: '测试，勿动！',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1567062350140858368',
+            name: '网络组件20220906160907',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1556563257890742272',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://0.0.0.0:8104',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1534774770408108032',
+            name: 'MQTT',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8088',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+    ],
+    status: 200,
+    timestamp: 1674960624150,
+};
+
+interface FormState {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const type = ref(props.provider.type);
+const channel = ref(props.provider.channel);
+
+const formState = reactive<FormState>({
+    name: '',
+    description: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['网络组件', '完成']);
+const networkCurrent = ref('');
+const networkList = ref([]);
+
+const onFinish = async (values: any) => {
+    const providerId = props.provider.id;
+    const params = {
+        ...values,
+        protocol: 'official-edge-protocol',
+        provider: providerId,
+        transport: ProtocolMapping.get(providerId),
+    };
+    if (networkCurrent.value) params.channelId = networkCurrent.value;
+    console.log(1112, networkCurrent.value, params);
+
+    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // if (params.get('save')) {
+        // if ((window as any).onTabSaveSuccess) {
+        //   if (resp.result) {
+        //     (window as any).onTabSaveSuccess(resp.result);
+        //     setTimeout(() => window.close(), 300);
+        //   }
+        // }
+        //   } else {
+        history.back();
+        //   }
+    }
+};
+
+const checkedChange = (id: string) => {
+    networkCurrent.value = id;
+};
+
+const queryNetworkList = async (id: string, include: string, data = {}) => {
+    // const resp = await getNetworkList(
+    //     NetworkTypeMapping.get(id),
+    //     include,
+    //     data,
+    // );
+    // if (resp.status === 200) {
+    //     networkList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    networkList.value = networkListTest.result;
+};
+
+const networkSearch = (value: string) => {
+    queryNetworkList(props.provider.id, networkCurrent.value || '', {
+        terms: [
+            {
+                column: 'name$LIKE',
+                value: `%${value}%`,
+            },
+        ],
+    });
+};
+
+const saveData = async () => {
+    const data: any = await formRef.value?.validate();
+    onFinish(data);
+};
+
+const addNetwork = () => {
+    // const url = this.$store.state.permission.routes['Link/Type/Detail']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?type=${
+            NetworkTypeMapping.get(props.provider?.id) || ''
+        }`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            networkCurrent.value = value.result.id;
+            queryNetworkList(props.provider?.id, networkCurrent.value || '');
+        }
+    };
+};
+
+const next = async () => {
+    if (!networkCurrent.value) {
+        message.error('请选择网络组件！');
+    } else {
+        current.value = current.value + 1;
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+onMounted(() => {
+    if (props.provider.id === 'official-edge-gateway') {
+        queryNetworkList(props.provider.id, '');
+    }
+}),
+    watch(
+        current,
+        (v) => {
+            stepCurrent.value = v;
+        },
+        {
+            deep: true,
+            immediate: true,
+        },
+    );
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+</style>

src/views/link/AccessConfig/components/Media/GB28181.vue

@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     配置设备信令参数
                 </div>
                 <div>
@@ -511,7 +511,12 @@
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import {
+    DeleteOutlined,
+    PlusOutlined,
+    QuestionCircleOutlined,
+    InfoCircleOutlined,
+} from '@ant-design/icons-vue';
 import { update, save } from '@/api/link/accessConfig';
 
 interface Form2 {

src/views/link/AccessConfig/components/Network.vue

@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     选择与设备通信的网络组件
                 </div>
                 <div class="search">
@@ -93,7 +93,7 @@
             </div>
             <div class="steps-box" v-else-if="current === 1">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
                 </div>
                 <div class="search">
@@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance, TableColumnType } from 'ant-design-vue';
 import Markdown from 'vue3-markdown-it';
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 //测试数据1
 const resultList1 = [
     {

src/views/notice/Config/Debug/index.vue

@@ -0,0 +1,201 @@
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="调试"
+        cancelText="取消"
+        okText="确定"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <a-form layout="vertical">
+            <a-form-item label="通知模版" v-bind="validateInfos.templateId">
+                <a-select
+                    v-model:value="formData.templateId"
+                    placeholder="请选择通知模版"
+                    @change="getTemplateDetail"
+                >
+                    <a-select-option
+                        v-for="(item, index) in templateList"
+                        :key="index"
+                        :value="item.id"
+                    >
+                        {{ item.name }}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item
+                label="变量"
+                v-bind="validateInfos.variableDefinitions"
+                v-if="templateDetailTable && templateDetailTable.length"
+            >
+                <a-table
+                    ref="myTable"
+                    class="debug-table"
+                    :columns="columns"
+                    :data-source="templateDetailTable"
+                    :pagination="false"
+                    :rowKey="
+                        (record, index) => {
+                            return record.id;
+                        }
+                    "
+                >
+                    <template #bodyCell="{ column, text, record }">
+                        <template
+                            v-if="['id', 'name'].includes(column.dataIndex)"
+                        >
+                            <span>{{ record[column.dataIndex] }}</span>
+                        </template>
+                        <template v-else>
+                            <ValueItem
+                                v-model:modelValue="record.value"
+                                :itemType="record.type"
+                            />
+                        </template>
+                    </template>
+                </a-table>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'ant-design-vue';
+import { PropType } from 'vue';
+import ConfigApi from '@/api/notice/config';
+import {
+    TemplateFormData,
+    IVariableDefinitions,
+} from '@/views/notice/Template/types';
+import { message } from 'ant-design-vue';
+
+const useForm = Form.useForm;
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+/**
+ * 获取通知模板
+ */
+const templateList = ref<TemplateFormData[]>([]);
+const getTemplateList = 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;
+};
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) getTemplateList();
+    },
+);
+
+/**
+ * 获取模板详情
+ */
+const templateDetailTable = ref<IVariableDefinitions[]>();
+const getTemplateDetail = async () => {
+    const { result } = await ConfigApi.getTemplateDetail(
+        formData.value.templateId,
+    );
+    templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
+        ...m,
+        value: undefined,
+    }));
+};
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        scopedSlots: { customRender: 'id' },
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        scopedSlots: { customRender: 'name' },
+    },
+    {
+        title: '值',
+        dataIndex: 'type',
+        width: 160,
+        scopedSlots: { customRender: 'type' },
+    },
+];
+
+// 表单数据
+const formData = ref({
+    templateId: '',
+    variableDefinitions: '',
+});
+
+// 验证规则
+const formRules = ref({
+    templateId: [{ required: true, message: '请选择通知模板' }],
+    variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
+/**
+ * 提交
+ */
+const btnLoading = ref(false);
+const handleOk = () => {
+    validate()
+        .then(async () => {
+            const params = {};
+            templateDetailTable.value?.forEach((item) => {
+                params[item.id] = item.value;
+            });
+            // console.log('params: ', params);
+            btnLoading.value = true;
+            ConfigApi.debug(params, props.data.id, formData.value.templateId)
+                .then((res) => {
+                    if (res.success) {
+                        message.success('操作成功');
+                        handleCancel();
+                    }
+                })
+                .finally(() => {
+                    btnLoading.value = false;
+                });
+        })
+        .catch((err) => {
+            console.log('err: ', err);
+        });
+};
+
+const handleCancel = () => {
+    _vis.value = false;
+    templateDetailTable.value = [];
+    resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/Log/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
+        <Search
+            type="simple"
+            :columns="columns"
+            target="product"
+            @search="handleSearch"
+        />
+
+        <JTable
+            ref="instanceRef"
+            :columns="columns"
+            :request="(e:any) => configApi.getHistory(e, data.id)"
+            :defaultParams="{
+                sorts: [{ name: 'notifyTime', order: 'desc' }],
+                terms: [{ column: 'notifyType$IN', value: data.type }],
+            }"
+            :params="params"
+            model="table"
+        >
+            <template #notifyTime="slotProps">
+                {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #state="slotProps">
+                <a-space>
+                    <a-badge
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                    ></a-badge>
+                    <AIcon
+                        v-if="slotProps.state.value === 'error'"
+                        type="ExclamationCircleOutlined"
+                        style="color: #1d39c4; cursor: pointer"
+                        @click="handleError(slotProps.errorStack)"
+                    />
+                </a-space>
+            </template>
+            <template #action="slotProps">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="handleDetail(slotProps.context)"
+                />
+            </template>
+        </JTable>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import configApi from '@/api/notice/config';
+import { PropType } from 'vue';
+import moment from 'moment';
+import { Modal } from 'ant-design-vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) handleSearch({ terms: [] });
+    },
+);
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '发送时间',
+        dataIndex: 'notifyTime',
+        key: 'notifyTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '成功', value: 'success' },
+                { label: '失败', value: 'error' },
+            ],
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+
+const params = ref<Record<string, any>>({});
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    // console.log('handleSearch e:', e);
+    params.value = e;
+    // console.log('params.value: ', params.value);
+};
+
+/**
+ * 查看错误信息
+ */
+const handleError = (e: any) => {
+    Modal.info({
+        title: '错误信息',
+        content: JSON.stringify(e),
+    });
+};
+/**
+ * 查看详情
+ */
+const handleDetail = (e: any) => {
+    Modal.info({
+        title: '详情信息',
+        content: JSON.stringify(e),
+    });
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/SyncUser/index.vue

@@ -0,0 +1,374 @@
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="同步用户"
+        :footer="null"
+        @cancel="_vis = false"
+        width="80%"
+    >
+        <a-row :gutter="10">
+            <a-col :span="4">
+                <a-input
+                    v-model:value="deptName"
+                    @keyup.enter="getDepartment"
+                    allowClear
+                    placeholder="请输入部门名称"
+                    style="margin-bottom: 8px"
+                >
+                    <template #addonAfter>
+                        <AIcon
+                            type="SearchOutlined"
+                            style="cursor: pointer"
+                            @click="getDepartment"
+                        />
+                    </template>
+                </a-input>
+                <a-tree
+                    :tree-data="deptTreeData"
+                    :fieldNames="{ title: 'name', key: 'id' }"
+                    :selectedKeys="[deptId]"
+                    @select="onTreeSelect"
+                >
+                </a-tree>
+                <a-empty v-if="!deptTreeData.length" />
+            </a-col>
+            <a-col :span="20">
+                <JTable
+                    ref="tableRef"
+                    :columns="columns"
+                    :dataSource="dataSource"
+                    :loading="tableLoading"
+                    model="table"
+                >
+                    <template #headerTitle>
+                        <a-button type="primary" @click="handleAutoBind">
+                            自动绑定
+                        </a-button>
+                    </template>
+                    <template #status="slotProps">
+                        <a-space>
+                            <a-badge
+                                :status="slotProps.status.value"
+                                :text="slotProps.status.text"
+                            ></a-badge>
+                            <AIcon
+                                v-if="slotProps.status.value === 'error'"
+                                type="ExclamationCircleOutlined"
+                                style="color: #1d39c4; cursor: pointer"
+                                @click="handleError(slotProps.errorStack)"
+                            />
+                        </a-space>
+                    </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-col>
+        </a-row>
+    </a-modal>
+</template>
+
+<script setup lang="ts" name="SyncUser">
+import configApi from '@/api/notice/config';
+import { PropType } from 'vue';
+import moment from 'moment';
+import { Modal, message } from 'ant-design-vue';
+import type { ActionsType } from '@/components/Table/index.vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) {
+            getDepartment();
+        }
+    },
+);
+
+// 左侧部门
+const deptTreeData = ref([]);
+const deptName = ref('');
+const deptId = ref('');
+
+/**
+ * 获取部门
+ */
+const getDepartment = async () => {
+    let res = null;
+    if (props.data.type === 'dingTalk') {
+        res = await configApi.dingTalkDept(props.data.id);
+    } else if (props.data.type === 'weixin') {
+        res = await configApi.weChatDept(props.data.id);
+    }
+    let _result = res?.result;
+    if (deptName.value) {
+        _result = res?.result?.filter(
+            (f: any) => f.name.indexOf(deptName.value) > -1,
+        );
+    }
+
+    // deptTreeData.value = arrayToTree(_result, _result[0]?.parentId);
+    deptTreeData.value = _result;
+    deptId.value = _result[0]?.id;
+};
+
+/**
+ * 扁平数据转树形结构
+ */
+// const arrayToTree = (arr: any, pid: string | number) => {
+//     return arr
+//         .filter((item: any) => item.parentId === pid)
+//         .map((item: any) => ({
+//             ...item,
+//             children: arrayToTree(arr, item.id),
+//         }));
+// };
+
+/**
+ * 部门点击
+ */
+const onTreeSelect = (keys: any) => {
+    deptId.value = keys[0];
+};
+
+// 右侧表格
+
+const columns = [
+    {
+        title: '钉钉用户名',
+        dataIndex: 'thirdPartyUserName',
+        key: 'thirdPartyUserName',
+    },
+    {
+        title: '用户',
+        dataIndex: 'userName',
+        key: 'userName',
+        scopedSlots: true,
+    },
+    {
+        title: '绑定状态',
+        dataIndex: 'status',
+        key: 'status',
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'bind',
+            text: '绑定',
+            tooltip: {
+                title: '绑定',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                // visible.value = true;
+                // current.value = data;
+            },
+        },
+        {
+            key: 'unbind',
+            text: '解绑',
+            icon: 'DisconnectOutlined',
+            popConfirm: {
+                title: '确认解绑?',
+                onConfirm: async () => {
+                    configApi
+                        .unBindUser({ bindingId: data.bindId }, data.bindId)
+                        .then(() => {
+                            message.success('操作成功');
+                            getTableData();
+                        });
+                },
+            },
+        },
+    ];
+    if (data.status.value === 'success') return actions;
+    return actions.filter((i: ActionsType) => i.key !== 'unbind');
+};
+
+/**
+ * 自动绑定
+ */
+const handleAutoBind = () => {
+    configApi.dingTalkBindUser([], props.data.id).then(() => {
+        message.success('操作成功');
+        getTableData();
+    });
+};
+
+/**
+ * 获取钉钉部门用户
+ */
+const getDeptUsers = async () => {
+    let res = null;
+    if (props.data.type === 'dingTalk') {
+        res = await configApi.getDingTalkUsers(props.data.id, deptId.value);
+    } else if (props.data.type === 'weixin') {
+        res = await configApi.getWeChatUsers(props.data.id, deptId.value);
+    }
+    return res?.result;
+};
+/**
+ * 获取已经绑定的用户
+ */
+const getBindUsers = async () => {
+    let res = null;
+    if (props.data.type === 'dingTalk') {
+        res = await configApi.getDingTalkBindUsers(props.data.id);
+    } else if (props.data.type === 'weixin') {
+        res = await configApi.getWeChatBindUsers(props.data.id);
+    }
+    return res?.result;
+};
+/**
+ * 获取所有用户
+ */
+const allUserList = ref([]);
+const getAllUsers = async () => {
+    const { result } = await configApi.getPlatformUsers();
+    allUserList.value = result.map((m: any) => ({
+        label: m.name,
+        value: m.id,
+    }));
+    return result;
+};
+
+/**
+ * 处理列表数据
+ */
+const dataSource = ref<any>([]);
+const tableLoading = ref(false);
+const getTableData = () => {
+    tableLoading.value = true;
+    Promise.all<any>([getDeptUsers(), getBindUsers(), getAllUsers()]).then(
+        (res) => {
+            dataSource.value = [];
+            const [deptUsers, bindUsers, allUsers] = res;
+            (deptUsers || []).forEach((item: any) => {
+                // 绑定的用户
+                const bindUser = bindUsers.find(
+                    (f: any) => f.thirdPartyUserId === item.id,
+                );
+                // 平台用户
+                const allUser = allUsers.find(
+                    (f: any) => f.id === bindUser?.userId,
+                );
+                dataSource.value.push({
+                    thirdPartyUserId: item.id,
+                    thirdPartyUserName: item.name,
+                    userId: bindUser?.userId,
+                    userName: allUser
+                        ? `${allUser.name}(${allUser.username})`
+                        : '',
+                    status: {
+                        text: bindUser?.providerName ? '已绑定' : '未绑定',
+                        value: bindUser?.providerName ? 'success' : 'error',
+                    },
+                    bindId: bindUser?.id,
+                });
+            });
+            console.log('dataSource.value: ', dataSource.value);
+        },
+    );
+    tableLoading.value = false;
+};
+
+watch(
+    () => deptId.value,
+    () => {
+        getTableData();
+    },
+    { immediate: true },
+);
+
+/**
+ * 绑定用户
+ */
+const bindVis = ref(false);
+const formData = ref({});
+const handleBind = (row: any) => {
+    bindVis.value = true;
+    formData.value = row;
+    getAllUsers();
+};
+
+/**
+ * 查看错误信息
+ */
+const handleError = (e: any) => {
+    Modal.info({
+        title: '错误信息',
+        content: JSON.stringify(e),
+    });
+};
+/**
+ * 查看详情
+ */
+const handleDetail = (e: any) => {
+    Modal.info({
+        title: '详情信息',
+        content: JSON.stringify(e),
+    });
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/index.vue

@@ -1,22 +1,405 @@
-<!-- 通知配置 -->
 <template>
-    <div class="page-container">通知配置</div>
+    <div class="page-container">
+        <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"
+                    >
+                        <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-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>
+
+        <Debug v-model:visible="debugVis" :data="currentConfig" />
+        <Log v-model:visible="logVis" :data="currentConfig" />
+        <SyncUser v-model:visible="syncVis" :data="currentConfig" />
+    </div>
 </template>
 
 <script setup lang="ts">
-import configApi from '@/api/notice/config';
+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 { 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';
+import SyncUser from './SyncUser/index.vue';
+import Debug from './Debug/index.vue';
+import Log from './Log/index.vue';
+import { downloadObject } from '@/utils/utils';
+
+let providerList: any = [];
+Object.keys(MSG_TYPE).forEach((key) => {
+    providerList = [...providerList, ...MSG_TYPE[key]];
+});
+
+const router = useRouter();
+
+const configRef = 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;
+    console.log('params.value: ', params.value);
 };
-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 = (file: any) => {
+    console.log('file: ', file);
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = async (result) => {
+        const text = result.target?.result;
+        console.log('text: ', text);
+        if (!file.type.includes('json')) {
+            message.error('请上传json格式文件');
+            return false;
+        }
+        try {
+            const data = JSON.parse(text || '{}');
+            const { success } = await ConfigApi.update(data);
+            if (success) {
+                message.success('操作成功');
+                configRef.value.reload();
+            }
+            return true;
+        } catch {
+            // message.error('请上传json格式文件');
+        }
+        return true;
+    };
+    return false;
+};
+
+/**
+ * 导出
+ */
+const handleExport = () => {
+    downloadObject(configRef.value.dataSource, `通知配置`);
+};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
+const syncVis = ref(false);
+const debugVis = ref(false);
+const logVis = ref(false);
+const currentConfig = ref<Partial<Record<string, any>>>();
+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;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'debug',
+            text: '通知记录',
+            tooltip: {
+                title: '通知记录',
+            },
+            icon: 'BarsOutlined',
+            onClick: () => {
+                logVis.value = true;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'debug',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+            icon: 'ArrowDownOutlined',
+            onClick: () => {
+                downloadObject(data, `通知配置`);
+            },
+        },
+        {
+            key: 'sync',
+            text: '同步用户',
+            tooltip: {
+                title: '同步用户',
+            },
+            icon: 'TeamOutlined',
+            onClick: () => {
+                syncVis.value = true;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await ConfigApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        configRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    if (data.provider === 'dingTalkMessage' || data.provider === 'corpMessage')
+        return actions;
+    return actions.filter((i: ActionsType) => i.key !== 'sync');
+};
+</script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/notice/Template/Debug/index.vue

@@ -0,0 +1,202 @@
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="调试"
+        cancelText="取消"
+        okText="确定"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <a-form layout="vertical">
+            <a-form-item label="通知配置" v-bind="validateInfos.configId">
+                <a-select
+                    v-model:value="formData.configId"
+                    placeholder="请选择通知配置"
+                >
+                    <a-select-option
+                        v-for="(item, index) in configList"
+                        :key="index"
+                        :value="item.id"
+                    >
+                        {{ item.name }}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item
+                label="变量"
+                v-bind="validateInfos.variableDefinitions"
+                v-if="templateDetailTable && templateDetailTable.length"
+            >
+                <a-table
+                    ref="myTable"
+                    class="debug-table"
+                    :columns="columns"
+                    :data-source="templateDetailTable"
+                    :pagination="false"
+                    :rowKey="
+                        (record, index) => {
+                            return record.id;
+                        }
+                    "
+                >
+                    <template #bodyCell="{ column, text, record }">
+                        <template
+                            v-if="['id', 'name'].includes(column.dataIndex)"
+                        >
+                            <span>{{ record[column.dataIndex] }}</span>
+                        </template>
+                        <template v-else>
+                            <ValueItem
+                                v-model:modelValue="record.value"
+                                :itemType="record.type"
+                            />
+                        </template>
+                    </template>
+                </a-table>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'ant-design-vue';
+import { PropType } from 'vue';
+import TemplateApi from '@/api/notice/template';
+import {
+    TemplateFormData,
+    IVariableDefinitions,
+    BindConfig,
+} from '@/views/notice/Template/types';
+import { message } from 'ant-design-vue';
+
+const useForm = Form.useForm;
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+/**
+ * 获取通知模板
+ */
+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 TemplateApi.getConfig(params);
+    configList.value = result;
+};
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) {
+            getConfigList();
+            getTemplateDetail();
+        }
+    },
+);
+
+/**
+ * 获取模板详情
+ */
+const templateDetailTable = ref<IVariableDefinitions[]>();
+const getTemplateDetail = async () => {
+    const { result } = await TemplateApi.getTemplateDetail(props.data.id);
+    templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
+        ...m,
+        value: undefined,
+    }));
+};
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        scopedSlots: { customRender: 'id' },
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        scopedSlots: { customRender: 'name' },
+    },
+    {
+        title: '值',
+        dataIndex: 'type',
+        width: 160,
+        scopedSlots: { customRender: 'type' },
+    },
+];
+
+// 表单数据
+const formData = ref({
+    configId: '',
+    variableDefinitions: '',
+});
+
+// 验证规则
+const formRules = ref({
+    configId: [{ required: true, message: '请选择通知模板' }],
+    variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
+/**
+ * 提交
+ */
+const btnLoading = ref(false);
+const handleOk = () => {
+    validate()
+        .then(async () => {
+            const params = {};
+            templateDetailTable.value?.forEach((item) => {
+                params[item.id] = item.value;
+            });
+            // console.log('params: ', params);
+            btnLoading.value = true;
+            TemplateApi.debug(params, formData.value.configId, props.data.id)
+                .then((res) => {
+                    if (res.success) {
+                        message.success('操作成功');
+                        handleCancel();
+                    }
+                })
+                .finally(() => {
+                    btnLoading.value = false;
+                });
+        })
+        .catch((err) => {
+            console.log('err: ', err);
+        });
+};
+
+const handleCancel = () => {
+    _vis.value = false;
+    templateDetailTable.value = [];
+    resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/ToOrg.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择收信部门"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toParty', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getDept(props.type, props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toParty', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/ToTag.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择标签推送，多个标签用,号分隔"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toTag', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getTags(props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toTag', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/ToUser.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择收信人"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toUser', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getUser(props.type, props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toUser', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/index.vue

@@ -50,6 +50,7 @@
                             <a-select
                                 v-model:value="formData.configId"
                                 placeholder="请选择绑定配置"
+                                @change="handleConfigChange"
                             >
                                 <a-select-option
                                     v-for="(item, index) in configList"
@@ -179,58 +180,33 @@
                             <a-row :gutter="10">
                                 <a-col :span="12">
                                     <a-form-item label="收信人">
-                                        <a-select
-                                            v-model:value="
+                                        <ToUser
+                                            v-model:to-user="
                                                 formData.template.toUser
                                             "
-                                            placeholder="请选择收信人"
-                                        >
-                                            <a-select-option
-                                                v-for="(
-                                                    item, index
-                                                ) in ROBOT_MSG_TYPE"
-                                                :key="index"
-                                                :value="item.value"
-                                            >
-                                                {{ item.label }}
-                                            </a-select-option>
-                                        </a-select>
+                                            :type="formData.type"
+                                            :config-id="formData.configId"
+                                        />
                                     </a-form-item>
                                 </a-col>
                                 <a-col :span="12">
                                     <a-form-item label="收信部门">
-                                        <a-select
-                                            v-model:value="
+                                        <ToOrg
+                                            v-model:to-user="
                                                 formData.template.toParty
                                             "
-                                            placeholder="请选择收信部门"
-                                        >
-                                            <a-select-option
-                                                v-for="(
-                                                    item, index
-                                                ) in ROBOT_MSG_TYPE"
-                                                :key="index"
-                                                :value="item.value"
-                                            >
-                                                {{ item.label }}
-                                            </a-select-option>
-                                        </a-select>
+                                            :type="formData.type"
+                                            :config-id="formData.configId"
+                                        />
                                     </a-form-item>
                                 </a-col>
                             </a-row>
                             <a-form-item label="标签推送">
-                                <a-select
-                                    v-model:value="formData.template.toTag"
-                                    placeholder="请选择标签推送"
-                                >
-                                    <a-select-option
-                                        v-for="(item, index) in ROBOT_MSG_TYPE"
-                                        :key="index"
-                                        :value="item.value"
-                                    >
-                                        {{ item.label }}
-                                    </a-select-option>
-                                </a-select>
+                                <ToTag
+                                    v-model:to-user="formData.template.toTag"
+                                    :type="formData.type"
+                                    :config-id="formData.configId"
+                                />
                             </a-form-item>
                         </template>
                         <!-- 邮件 -->
@@ -325,11 +301,11 @@
                                 />
                             </a-form-item>
                             <a-form-item
-                                label="模板内容"
+                                label="模版内容"
                                 v-if="formData.template.templateType === 'tts'"
                             >
                                 <a-textarea
-                                    v-model:value="formData.template.ttsCode"
+                                    v-model:value="formData.template.message"
                                     show-count
                                     :rows="5"
                                     placeholder="内容中的变量将用于阿里云语音验证码"
@@ -353,11 +329,11 @@
                                             <a-select-option
                                                 v-for="(
                                                     item, index
-                                                ) in ROBOT_MSG_TYPE"
+                                                ) in templateList"
                                                 :key="index"
-                                                :value="item.value"
+                                                :value="item.templateCode"
                                             >
-                                                {{ item.label }}
+                                                {{ item.templateName }}
                                             </a-select-option>
                                         </a-select>
                                     </a-form-item>
@@ -377,10 +353,18 @@
                                 label="签名"
                                 v-bind="validateInfos['template.signName']"
                             >
-                                <a-input
+                                <a-select
                                     v-model:value="formData.template.signName"
-                                    placeholder="请输入签名"
-                                />
+                                    placeholder="请选择签名"
+                                >
+                                    <a-select-option
+                                        v-for="(item, index) in signsList"
+                                        :key="index"
+                                        :value="item.signName"
+                                    >
+                                        {{ item.signName }}
+                                    </a-select-option>
+                                </a-select>
                             </a-form-item>
                         </template>
                         <!-- webhook -->
@@ -416,7 +400,8 @@
                             label="模版内容"
                             v-if="
                                 formData.type !== 'sms' &&
-                                formData.type !== 'webhook'
+                                formData.type !== 'webhook' &&
+                                formData.type !== 'voice'
                             "
                         >
                             <a-textarea
@@ -473,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,
@@ -486,6 +471,9 @@ import Doc from './doc/index';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import Attachments from './components/Attachments.vue';
 import VariableDefinitions from './components/VariableDefinitions.vue';
+import ToUser from './components/ToUser.vue';
+import ToOrg from './components/ToOrg.vue';
+import ToTag from './components/ToTag.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -600,7 +588,7 @@ watch(
                       format: '%s',
                   },
         );
-        formData.value.variableDefinitions = result;
+        formData.value.variableDefinitions = result as IVariableDefinitions[];
     },
     { deep: true },
 );
@@ -630,6 +618,36 @@ const getConfigList = async () => {
 };
 getConfigList();
 
+/**
+ * 配置选择改变
+ */
+const handleConfigChange = () => {
+    getTemplateList();
+    getSignsList();
+};
+
+/**
+ * 获取阿里模板
+ */
+const templateList = ref();
+const getTemplateList = async () => {
+    const { result } = await templateApi.getAliTemplate(
+        formData.value.configId,
+    );
+    templateList.value = result;
+};
+getTemplateList();
+
+/**
+ * 获取签名
+ */
+const signsList = ref();
+const getSignsList = async () => {
+    const { result } = await templateApi.getSigns(formData.value.configId);
+    signsList.value = result;
+};
+getSignsList();
+
 /**
  * 表单提交
  */
@@ -638,6 +656,8 @@ const handleSubmit = () => {
     validate()
         .then(async () => {
             // console.log('formData.value: ', formData.value);
+            formData.value.template.ttsCode =
+                formData.value.template.templateCode;
             btnLoading.value = true;
             let res;
             if (!formData.value.id) {

src/views/notice/Template/Log/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
+        <Search
+            type="simple"
+            :columns="columns"
+            target="product"
+            @search="handleSearch"
+        />
+
+        <JTable
+            ref="instanceRef"
+            :columns="columns"
+            :request="(e:any) => templateApi.getHistory(e, data.id)"
+            :defaultParams="{
+                sorts: [{ name: 'notifyTime', order: 'desc' }],
+                terms: [{ column: 'notifyType$IN', value: data.type }],
+            }"
+            :params="params"
+            model="table"
+        >
+            <template #notifyTime="slotProps">
+                {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #state="slotProps">
+                <a-space>
+                    <a-badge
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                    ></a-badge>
+                    <AIcon
+                        v-if="slotProps.state.value === 'error'"
+                        type="ExclamationCircleOutlined"
+                        style="color: #1d39c4; cursor: pointer"
+                        @click="handleError(slotProps.errorStack)"
+                    />
+                </a-space>
+            </template>
+            <template #action="slotProps">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="handleDetail(slotProps.context)"
+                />
+            </template>
+        </JTable>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+import { PropType } from 'vue';
+import moment from 'moment';
+import { Modal } from 'ant-design-vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) handleSearch({ terms: [] });
+    },
+);
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '发送时间',
+        dataIndex: 'notifyTime',
+        key: 'notifyTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '成功', value: 'success' },
+                { label: '失败', value: 'error' },
+            ],
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+
+const params = ref<Record<string, any>>({});
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    // console.log('handleSearch e:', e);
+    params.value = e;
+    // console.log('params.value: ', params.value);
+};
+
+/**
+ * 查看错误信息
+ */
+const handleError = (e: any) => {
+    Modal.info({
+        title: '错误信息',
+        content: JSON.stringify(e),
+    });
+};
+/**
+ * 查看详情
+ */
+const handleDetail = (e: any) => {
+    Modal.info({
+        title: '详情信息',
+        content: JSON.stringify(e),
+    });
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/index.vue

@@ -1,22 +1,390 @@
-<!-- 通知模板 -->
 <template>
-    <div class="page-container">通知模板</div>
+    <div class="page-container">
+        <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"
+                    >
+                        <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-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>
+
+        <Debug v-model:visible="debugVis" :data="currentConfig" />
+        <Log v-model:visible="logVis" :data="currentConfig" />
+    </div>
 </template>
 
 <script setup lang="ts">
-import templateApi from '@/api/notice/template';
+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';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
-const getList = async () => {
-    const res = await templateApi.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';
+
+import Debug from './Debug/index.vue';
+import Log from './Log/index.vue';
+import { downloadObject } from '@/utils/utils';
+
+let providerList: any = [];
+Object.keys(MSG_TYPE).forEach((key) => {
+    providerList = [...providerList, ...MSG_TYPE[key]];
+});
+
+const router = useRouter();
+
+const configRef = 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;
+    // console.log('params.value: ', params.value);
 };
-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 = (file: any) => {
+    console.log('file: ', file);
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = async (result) => {
+        const text = result.target?.result;
+        console.log('text: ', text);
+        if (!file.type.includes('json')) {
+            message.error('请上传json格式文件');
+            return false;
+        }
+        try {
+            const data = JSON.parse(text || '{}');
+            const { success } = await TemplateApi.update(data);
+            if (success) {
+                message.success('操作成功');
+                configRef.value.reload();
+            }
+            return true;
+        } catch {
+            // message.error('请上传json格式文件');
+        }
+        return true;
+    };
+    return false;
+};
+
+/**
+ * 导出
+ */
+const handleExport = () => {
+    downloadObject(configRef.value.dataSource, `通知配置`);
+};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
+const syncVis = ref(false);
+const debugVis = ref(false);
+const logVis = ref(false);
+const currentConfig = ref<Partial<Record<string, any>>>();
+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;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'debug',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+            icon: 'ArrowDownOutlined',
+            onClick: () => {
+                downloadObject(data, `通知配置`);
+            },
+        },
+        {
+            key: 'debug',
+            text: '通知记录',
+            tooltip: {
+                title: '通知记录',
+            },
+            icon: 'BarsOutlined',
+            onClick: () => {
+                logVis.value = true;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await TemplateApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        configRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return actions;
+};
+</script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/notice/Template/types.d.ts

@@ -14,6 +14,7 @@ interface IVariableDefinitions {
     name: string;
     type: string;
     format: string;
+    value?: string;
 }
 
 interface IMarkDown {

src/views/system/Basis/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <page-container>
     <a-card class="basis-container">
         <a-form
             layout="vertical"
@@ -277,6 +278,7 @@
             >保存</a-button
         >
     </a-card>
+  </page-container>
 </template>
 
 <script setup lang="ts" name="Basis">
@@ -289,6 +291,7 @@ import { LocalStore } from '@/utils/comm';
 
 import { save_api, getDetails_api } from '@/api/system/basis';
 import { usePermissionStore } from '@/store/permission';
+import PageContainer from 'components/Layout/components/PageContainer'
 
 const action = ref<string>(`${BASE_API_PATH}/file/static`);
 const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });

src/views/system/Permission/components/EditDialog.vue

@@ -9,7 +9,10 @@
         <a-form ref="formRef" :model="form.data" layout="vertical">
             <a-form-item
                 name="id"
-                :rules="[{ required: true, message: '请输入标识' }]"
+                :rules="[
+                    { required: true, message: '请输入标识(ID)' },
+                    { validator: form.rules.idCheck, trigger: 'blur' },
+                ]"
                 class="question-item"
             >
                 <template #label>
@@ -62,6 +65,7 @@
                 </template>
                 <template v-else-if="column.key === 'act'">
                     <a-button
+                        class="delete-btn"
                         style="padding: 0"
                         type="link"
                         @click="table.clickRemove(index)"
@@ -71,17 +75,17 @@
                 </template>
             </template>
         </a-table>
-        <div class="pager">
+        <div class="pager" v-show="pager.total > pager.pageSize">
+            <a-select v-model:value="pager.current" style="width: 60px">
+                <a-select-option v-for="(val, i) in pageArr" :value="i + 1">{{
+                    i + 1
+                }}</a-select-option>
+            </a-select>
             <a-pagination
                 v-model:current="pager.current"
                 :page-size="pager.pageSize"
                 :total="pager.total"
             />
-            <a-select v-model:value="pager.current" style="width: 60px">
-                <a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
-                    i + 1
-                }}</a-select-option>
-            </a-select>
         </div>
 
         <a-button type="dashed" style="width: 100%" @click="table.clickAdd">
@@ -105,27 +109,40 @@
 import { FormInstance, message } from 'ant-design-vue';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { Rule } from 'ant-design-vue/es/form';
+
+import {
+    checkId_api,
+    editPermission_api,
+    addPermission_api,
+} from '@/api/system/permission';
 
 const defaultAction = [
     { action: 'query', name: '查询', describe: '查询' },
     { action: 'save', name: '保存', describe: '保存' },
     { action: 'delete', name: '删除', describe: '删除' },
 ];
+const emits = defineEmits(['refresh']);
 // 弹窗相关
 const dialog = reactive({
     title: '',
     visible: false,
     handleOk: () => {
-        formRef.value?.validate().then(() => console.log('success'));
+        formRef.value?.validate().then(() => {
+            form.submit();
+        });
     },
     // 控制弹窗的打开与关闭
     changeVisible: (status: boolean, defaultForm: any = {}) => {
-        form.data = { name: '', description: '', ...defaultForm };
         dialog.title = defaultForm.id ? '编辑' : '新增';
+        form.data = { name: '', ...defaultForm };
         table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
         pager.total = table.data.length;
         pager.current = 1;
         dialog.visible = status;
+        nextTick(() => {
+            formRef.value?.clearValidate();
+        });
     },
 });
 // 表单相关
@@ -136,6 +153,46 @@ const form = reactive({
         name: '',
         id: '',
     },
+    rules: {
+        // 校验标识是否可用
+        idCheck: (_rule: Rule, id: string, cb: Function) => {
+            if (!id) return cb('请输入标识(ID)');
+            if (dialog.title === '编辑') return cb();
+            checkId_api({ id })
+                .then((resp: any) => {
+                    if (resp.status === 200 && !resp.result.passed)
+                        cb(resp.result.reason);
+                    else cb();
+                })
+                .catch(() => cb('验证失败'));
+
+            // return new Promise((resolve) => {
+            //     checkId_api({ id })
+            //         .then((resp: any) => {
+            //             if (resp.status === 200 && !resp.result.passed)
+            //                 resolve(resp.result.reason);
+            //             else resolve('');
+            //         })
+            //         .catch(() => resolve('验证失败'));
+            // });
+        },
+    },
+    submit: () => {
+        const params = {
+            ...form.data,
+            actions: table.data.filter((item: any) => item.action && item.name),
+        };
+        const api =
+            dialog.title === '编辑' ? editPermission_api : addPermission_api;
+
+        api(params).then((resp) => {
+            if (resp.status === 200) {
+                message.error('操作成功');
+                emits('refresh');
+                dialog.visible = false;
+            }
+        });
+    },
 });
 
 const table = reactive({
@@ -144,21 +201,26 @@ const table = reactive({
             title: '-',
             dataIndex: 'index',
             key: 'index',
+            width:80,
+            align:'center'
         },
         {
             title: '操作类型',
             dataIndex: 'action',
             key: 'action',
+            width: 220
         },
         {
             title: '名称',
             dataIndex: 'name',
             key: 'name',
+            width: 220
         },
         {
             title: '说明',
             dataIndex: 'describe',
             key: 'describe',
+            width: 220
         },
         {
             title: '操作',
@@ -230,5 +292,30 @@ defineExpose({
             }
         }
     }
+
+    .ant-table {
+        color: #ff4d4f;
+
+        .ant-table-tbody {
+            color: #ff4d4f;
+        }
+    }
+    .delete-btn {
+        color: #000000d9;
+        &:hover{
+            color: #415ed1;
+        }
+    }
+    .pager {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 12px;
+        .ant-pagination {
+            margin-left: 8px;
+            :deep(.ant-pagination-item) {
+                display: none;
+            }
+        }
+    }
 }
 </style>

src/views/system/Permission/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="permission-container">
-        <Search :columns="query.columns" />
+        <Search :columns="query.columns" @search="query.search" />
 
         <JTable
             ref="tableRef"
@@ -11,9 +11,40 @@
             :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
         >
             <template #headerTitle>
-                <a-button type="primary" @click="table.openDialog(undefined)"
+                <a-button
+                    type="primary"
+                    @click="table.openDialog(undefined)"
+                    style="margin-right: 10px"
                     ><plus-outlined />新增</a-button
                 >
+                <a-dropdown trigger="hover">
+                    <a-button>批量操作</a-button>
+                    <template #overlay>
+                        <a-menu>
+                            <a-menu-item>
+                                <a-upload
+                                    name="file"
+                                    action="#"
+                                    accept=".json"
+                                    :showUploadList="false"
+                                    :before-upload="table.clickImport"
+                                >
+                                    <a-button>导入</a-button>
+                                </a-upload>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-popconfirm
+                                    title="确认导出？"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="table.clickExport"
+                                >
+                                    <a-button>导出</a-button>
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
+                    </template>
+                </a-dropdown>
             </template>
             <template #status="slotProps">
                 <StatusLabel :status-value="slotProps.status" />
@@ -51,18 +82,27 @@
                     </a-popconfirm>
 
                     <a-popconfirm
-                        title="确定要删除吗？"
+                        title="确认删除"
                         ok-text="确定"
                         cancel-text="取消"
                         @confirm="table.clickDel(slotProps)"
                         :disabled="slotProps.status"
                     >
                         <a-tooltip>
-                            <template #title>删除</template>
+                            <template #title>{{
+                                systemPermission('delete')
+                                    ? slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除'
+                                    : '暂无权限，请联系管理员'
+                            }}</template>
                             <a-button
                                 style="padding: 0"
                                 type="link"
-                                :disabled="slotProps.status"
+                                :disabled="
+                                    !systemPermission('delete') ||
+                                    slotProps.status
+                                "
                             >
                                 <delete-outlined />
                             </a-button>
@@ -73,7 +113,7 @@
         </JTable>
 
         <div class="dialogs">
-            <EditDialog ref="editDialogRef" />
+            <EditDialog ref="editDialogRef" @refresh="table.refresh" />
         </div>
     </div>
 </template>
@@ -89,11 +129,22 @@ import {
     StopOutlined,
     PlayCircleOutlined,
 } from '@ant-design/icons-vue';
-import { getPermission_api, editPermission_api } from '@/api/system/permission';
+import {
+    getPermission_api,
+    editPermission_api,
+    delPermission_api,
+    exportPermission_api,
+} from '@/api/system/permission';
+import { downloadObject } from '@/utils/utils';
+import { usePermissionStore } from '@/store/permission';
 
 const editDialogRef = ref(); // 新增弹窗实例
 const tableRef = ref<Record<string, any>>({}); // 表格实例
 
+// 按钮权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const systemPermission = (code: string) =>
+    hasPermission('system/Permission:${code}');
 // 筛选
 const query = reactive({
     columns: [
@@ -138,6 +189,9 @@ const query = reactive({
         },
     ],
     params: {},
+    search: (params: object) => {
+        query.params = params;
+    },
 });
 
 // 表格
@@ -167,10 +221,55 @@ const table = reactive({
         },
     ],
     tableData: [],
+    // 打开编辑弹窗
     openDialog: (row: object | undefined = {}) => {
-        editDialogRef.value.openDialog(true, row);
+        let permissionCode = '';
+        if (Object.keys(row).length < 1) permissionCode = 'add';
+        else permissionCode = 'update';
+        if (systemPermission(permissionCode))
+            editDialogRef.value.openDialog(true, row);
+        else message.warn('暂无权限，请联系管理员');
     },
+    // 导入数据
+    clickImport: (file: File) => {
+        if (file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onload = (result: any) => {
+                try {
+                    const data = JSON.parse(result.target.result);
+                    editPermission_api(data).then((resp) => {
+                        if (resp.status === 200) {
+                            message.success('导入成功');
+                            table.refresh();
+                        }
+                    });
+                } catch (error) {
+                    message.error('导入失败，请重试！');
+                }
+            };
+        } else message.error('请上传json格式');
+        return false;
+    },
+    // 导出数据
+    clickExport: () => {
+        const params = {
+            paging: false,
+            ...query.params,
+        };
+        exportPermission_api(params).then((resp) => {
+            if (resp.status === 200) {
+                downloadObject(resp.result as any, '权限数据');
+                message.success('导出成功');
+            } else {
+                message.error('导出错误');
+            }
+        });
+    },
+    // 修改状态
     changeStatus: (row: any) => {
+        if (!systemPermission('action'))
+            return message.warn('暂无权限，请联系管理员');
         const params = {
             ...row,
             status: row.status ? 0 : 1,
@@ -180,14 +279,16 @@ const table = reactive({
             tableRef.value.reload();
         });
     },
+    // 删除
     clickDel: (row: any) => {
-        // delRole_api(row.id).then((resp: any) => {
-        //     if (resp.status === 200) {
-        //         tableRef.value?.reload();
-        //         message.success('操作成功!');
-        //     }
-        // });
+        delPermission_api(row.id).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                message.success('操作成功!');
+            }
+        });
     },
+    // 刷新列表
     refresh: () => {
         tableRef.value.reload();
     },

tsconfig.json

@@ -22,7 +22,7 @@
       "store/*": ["./src/store/*"],
       "style/*": ["./src/style/*"],
     },
-    "types": ["ant-design-vue/typings/global"],
+    "types": ["ant-design-vue/typings/global", "vite/client"],
     "suppressImplicitAnyIndexErrors": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

vite.config.ts

@@ -82,6 +82,7 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.33.22:8800',
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
+                //   target: 'http://120.77.179.54:8844', // 120测试
                   target: 'http://47.108.63.174:8845', // 测试
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')