fix: bug

config/proxy.ts

@@ -12,13 +12,13 @@ export default {
       // target: 'http://192.168.32.28:8844/',
       // ws: 'ws://192.168.32.28:8844/',
       // 开发环境
-      // target: 'http://47.109.52.230:8844/',
-      // ws: 'ws://47.109.52.230:8844/',
+      // target: 'http://120.79.18.123:8844/',
+      // ws: 'ws://120.79.18.123:8844/',
       // 测试环境
       target: 'http://120.77.179.54:8844/',
       ws: 'ws://120.77.179.54:8844/',
-      // target: 'http://47.109.52.230:8844/',
-      // ws: 'ws://47.109.52.230:8844/',
+      // target: 'http://192.168.66.5:8844/',
+      // ws: 'ws://192.168.66.5:8844/',
       // ws: 'ws://demo.jetlinks.cn/jetlinks',
       // target: 'http://demo.jetlinks.cn/jetlinks',
       changeOrigin: true,

src/components/ProTableCard/CardItems/AccessConfig/index.tsx

@@ -22,7 +22,8 @@ const defaultImage = require('/public/images/device-access.png');
 export default (props: AccessConfigCardProps) => {
   return (
     <TableCard
-      showMask={false}
+      // showMask={false}
+      detail={props.detail}
       actions={props.actions}
       status={props.state.value}
       statusText={props.state.text}

src/components/ProTableCard/CardItems/aliyun.tsx

@@ -23,7 +23,7 @@ export default (props: AliyunCardProps) => {
         enabled: StatusColorEnum.success,
         disabled: StatusColorEnum.error,
       }}
-      showMask={false}
+      // showMask={false}
     >
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>

src/components/ProTableCard/CardItems/duerOs.tsx

@@ -25,7 +25,7 @@ export default (props: DuerOSProps) => {
         enabled: StatusColorEnum.success,
         disabled: StatusColorEnum.error,
       }}
-      showMask={false}
+      // showMask={false}
     >
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>

src/components/ProTableCard/CardItems/networkCard.tsx

@@ -56,7 +56,7 @@ export default (props: NoticeCardProps) => {
         disabled: StatusColorEnum.error,
         enabled: StatusColorEnum.success,
       }}
-      showMask={false}
+      // showMask={false}
     >
       <div className={'pro-table-card-item'}>
         <div className={'card-item-avatar'}>

src/components/ProTableCard/CardItems/scene.tsx

@@ -7,6 +7,7 @@ import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
 
 export interface DeviceCardProps extends SceneItem {
   tools: React.ReactNode[];
+  detail?: React.ReactNode;
 }
 
 const defaultImage = require('/public/images/scene.png');
@@ -20,7 +21,8 @@ enum TriggerWayType {
 export default (props: DeviceCardProps) => {
   return (
     <TableCard
-      showMask={false}
+      // showMask={false}
+      detail={props.detail}
       actions={props.tools}
       status={props.state.value}
       statusText={props.state.text}

src/hooks/route/useLocation.tsx

@@ -8,11 +8,10 @@ const useLocations = () => {
   useEffect(() => {
     setLocation({
       ...umiLocation,
-      state: historyStateModel.state[umiLocation.pathname],
+      state: historyStateModel.state[umiLocation.pathname + umiLocation.search],
     });
-
     return () => {
-      delete historyStateModel.state[umiLocation.pathname];
+      delete historyStateModel.state[umiLocation.pathname + umiLocation.search];
     };
   }, [umiLocation]);
 

src/pages/Northbound/AliCloud/Detail/index.tsx

@@ -14,7 +14,7 @@ import type { Field } from '@formily/core';
 import { createForm, FormPath, onFieldChange, onFieldValueChange, onFormInit } from '@formily/core';
 import { createSchemaField, observer } from '@formily/react';
 import { Card, Col, Image, Row } from 'antd';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'umi';
 import { onlyMessage, useAsyncDataSource } from '@/utils/util';
 import './index.less';
@@ -22,10 +22,13 @@ import { service } from '@/pages/Northbound/AliCloud';
 import usePermissions from '@/hooks/permission';
 import { Store } from 'jetlinks-store';
 import { useModel } from '@@/plugin-model/useModel';
+import { useLocation } from '@/hooks';
 
 const Detail = observer(() => {
   const params = useParams<{ id: string }>();
   const { initialState } = useModel('@@initialState');
+  const location = useLocation();
+  const [view, setView] = useState<boolean>(false);
 
   const form = useMemo(
     () =>
@@ -427,6 +430,11 @@ const Detail = observer(() => {
       }
     }, 0);
   }, []);
+  useEffect(() => {
+    if (location && location.state) {
+      setView(location.state.view);
+    }
+  }, [location]);
 
   return (
     <PageContainer>
@@ -446,13 +454,15 @@ const Detail = observer(() => {
               />
               <FormButtonGroup.Sticky>
                 <FormButtonGroup.FormItem>
-                  <PermissionButton
-                    type="primary"
-                    isPermission={getOtherPermission(['add', 'update'])}
-                    onClick={() => handleSave()}
-                  >
-                    保存
-                  </PermissionButton>
+                  {!view && (
+                    <PermissionButton
+                      type="primary"
+                      isPermission={getOtherPermission(['add', 'update'])}
+                      onClick={() => handleSave()}
+                    >
+                      保存
+                    </PermissionButton>
+                  )}
                 </FormButtonGroup.FormItem>
               </FormButtonGroup.Sticky>
             </Form>

src/pages/Northbound/AliCloud/index.tsx

@@ -1,12 +1,12 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import SearchComponent from '@/components/SearchComponent';
 import { useRef, useState } from 'react';
-import { history } from 'umi';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import { PermissionButton, ProTableCard } from '@/components';
 import {
   DeleteOutlined,
   EditOutlined,
+  EyeOutlined,
   InfoCircleOutlined,
   PlayCircleOutlined,
   PlusOutlined,
@@ -18,6 +18,7 @@ import AliyunCard from '@/components/ProTableCard/CardItems/aliyun';
 import Service from './service';
 import { Badge } from 'antd';
 import { onlyMessage } from '@/utils/util';
+import { useHistory } from '@/hooks';
 
 export const service = new Service('device/aliyun/bridge');
 
@@ -25,6 +26,7 @@ const AliCloud = () => {
   const actionRef = useRef<ActionType>();
   const intl = useIntl();
   const [searchParams, setSearchParams] = useState<any>({});
+  const history = useHistory();
 
   const { permission } = PermissionButton.usePermission('Northbound/AliCloud');
 
@@ -34,6 +36,21 @@ const AliCloud = () => {
         key={'update'}
         type={'link'}
         style={{ padding: 0 }}
+        isPermission={permission.view}
+        tooltip={{
+          title: '查看',
+        }}
+        onClick={() => {
+          const url = `${getMenuPathByParams(MENUS_CODE['Northbound/AliCloud/Detail'], record.id)}`;
+          history.push(url, { view: true });
+        }}
+      >
+        <EyeOutlined />
+      </PermissionButton>,
+      <PermissionButton
+        key={'update'}
+        type={'link'}
+        style={{ padding: 0 }}
         isPermission={permission.update}
         tooltip={
           type === 'table'
@@ -243,6 +260,20 @@ const AliCloud = () => {
         cardRender={(record) => (
           <AliyunCard
             {...record}
+            detail={
+              <div
+                style={{ padding: 8, fontSize: 24 }}
+                onClick={() => {
+                  const url = `${getMenuPathByParams(
+                    MENUS_CODE['Northbound/AliCloud/Detail'],
+                    record.id,
+                  )}`;
+                  history.push(url, { view: true });
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
             actions={[
               <PermissionButton
                 type={'link'}

src/pages/Northbound/DuerOS/Detail/index.tsx

@@ -16,7 +16,7 @@ import {
   Select,
 } from '@formily/antd';
 import { PermissionButton } from '@/components';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   createForm,
   Field,
@@ -33,9 +33,12 @@ import Doc from '@/pages/Northbound/DuerOS/Detail/Doc';
 import _ from 'lodash';
 import FUpload from '@/components/Upload';
 import { useModel } from '@@/plugin-model/useModel';
+import { useLocation } from '@/hooks';
 
 const Save = () => {
   const { initialState } = useModel('@@initialState');
+  const location = useLocation();
+  const [view, setView] = useState<boolean>(false);
   const SchemaField = createSchemaField({
     components: {
       FormGrid,
@@ -681,6 +684,11 @@ const Save = () => {
       }
     }, 0);
   }, []);
+  useEffect(() => {
+    if (location && location.state) {
+      setView(location.state.view);
+    }
+  }, [location]);
 
   return (
     <PageContainer>
@@ -700,9 +708,11 @@ const Save = () => {
               />
               <FormButtonGroup.Sticky>
                 <FormButtonGroup.FormItem>
-                  <PermissionButton isPermission={true} type="primary" onClick={handleSave}>
-                    保存
-                  </PermissionButton>
+                  {!view && (
+                    <PermissionButton isPermission={true} type="primary" onClick={handleSave}>
+                      保存
+                    </PermissionButton>
+                  )}
                 </FormButtonGroup.FormItem>
               </FormButtonGroup.Sticky>
             </Form>

src/pages/Northbound/DuerOS/index.tsx

@@ -7,6 +7,7 @@ import {
   CloseCircleOutlined,
   DeleteOutlined,
   EditOutlined,
+  EyeOutlined,
   InfoCircleOutlined,
   PlayCircleOutlined,
   PlusOutlined,
@@ -15,7 +16,8 @@ import { useIntl } from '@@/plugin-locale/localeExports';
 import { Badge, Space } from 'antd';
 import { DuerOSItem } from '@/pages/Northbound/DuerOS/types';
 import DuerOSCard from '@/components/ProTableCard/CardItems/duerOs';
-import { history } from '@@/core/history';
+// import { history } from '@@/core/history';
+import useHistory from '@/hooks/route/useHistory';
 import { getMenuPathByCode, getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import Service from './service';
 import { onlyMessage } from '@/utils/util';
@@ -26,9 +28,10 @@ export default () => {
   const intl = useIntl();
   const [searchParams, setSearchParams] = useState<any>({});
   const { permission } = PermissionButton.usePermission('Northbound/DuerOS');
+  const history = useHistory();
 
   const Tools = (record: any, type: 'card' | 'table') => {
-    return [
+    const item = [
       <PermissionButton
         key={'update'}
         type={'link'}
@@ -126,6 +129,29 @@ export default () => {
         <DeleteOutlined />
       </PermissionButton>,
     ];
+    if (type === 'card') {
+      return item;
+    } else {
+      return [
+        <PermissionButton
+          key={'update'}
+          type={'link'}
+          style={{ padding: 0 }}
+          isPermission={permission.view}
+          tooltip={{
+            title: '查看',
+          }}
+          onClick={() => {
+            history.push(getMenuPathByParams(MENUS_CODE['Northbound/DuerOS/Detail'], record.id), {
+              view: true,
+            });
+          }}
+        >
+          <EyeOutlined />
+        </PermissionButton>,
+        ...item,
+      ];
+    }
   };
 
   const columns: ProColumns<DuerOSItem>[] = [
@@ -247,7 +273,25 @@ export default () => {
         request={(params) =>
           service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] })
         }
-        cardRender={(record) => <DuerOSCard {...record} action={Tools(record, 'card')} />}
+        cardRender={(record) => (
+          <DuerOSCard
+            {...record}
+            detail={
+              <div
+                style={{ padding: 8, fontSize: 24 }}
+                onClick={() => {
+                  history.push(
+                    getMenuPathByParams(MENUS_CODE['Northbound/DuerOS/Detail'], record.id),
+                    { view: true },
+                  );
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
+            action={Tools(record, 'card')}
+          />
+        )}
         headerTitle={
           <Space>
             <PermissionButton

src/pages/home/comprehensive/index.tsx

@@ -31,18 +31,18 @@ const Comprehensive = () => {
   const [jvmValue, setJvmValue] = useState<number>(0);
   const [productVisible, setProductVisible] = useState<boolean>(false);
   const [deviceVisible, setDeviceVisible] = useState<boolean>(false);
-  const [StatisticsList] = useState([
-    {
-      name: 'CPU使用率',
-      value: String(cpuValue) + '%',
-      children: <Pie value={cpuValue} />,
-    },
-    {
-      name: 'JVM内存',
-      value: String(jvmValue) + '%',
-      children: <Pie value={jvmValue} />,
-    },
-  ]);
+  // const [StatisticsList] = useState([
+  //   {
+  //     name: 'CPU使用率',
+  //     value: String(cpuValue) + '%',
+  //     children: <Pie value={cpuValue} />,
+  //   },
+  //   {
+  //     name: 'JVM内存',
+  //     value: String(jvmValue) + '%',
+  //     children: <Pie value={jvmValue} />,
+  //   },
+  // ]);
 
   const getProductCount = async () => {
     const resp = await service.productCount({});
@@ -212,7 +212,18 @@ const Comprehensive = () => {
           </Col>
           <Col span={12}>
             <Statistics
-              data={StatisticsList}
+              data={[
+                {
+                  name: 'CPU使用率',
+                  value: String(cpuValue) + '%',
+                  children: <Pie value={cpuValue} />,
+                },
+                {
+                  name: 'JVM内存',
+                  value: String(jvmValue) + '%',
+                  children: <Pie value={jvmValue} />,
+                },
+              ]}
               title="基础统计"
               extra={
                 <div style={{ fontSize: 14, fontWeight: 400 }}>

src/pages/link/AccessConfig/Detail/Access/index.tsx

@@ -18,6 +18,7 @@ interface Props {
   change: () => void;
   data: any;
   provider: any;
+  view?: boolean;
 }
 
 const Access = (props: Props) => {
@@ -286,27 +287,29 @@ const Access = (props: Props) => {
                 }}
                 style={{ width: 500, margin: '20px 0' }}
               />
-              <PermissionButton
-                isPermission={networkPermission.add}
-                onClick={() => {
-                  const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
-                  const tab: any = window.open(
-                    `${origin}/#${url}?type=${MetworkTypeMapping.get(props.provider?.id) || ''}`,
-                  );
-                  tab!.onTabSaveSuccess = (value: any) => {
-                    if (value.status === 200) {
-                      setNetworkCurrent(value.result?.id);
-                      queryNetworkList(props.provider?.id, {
-                        include: networkCurrent || '',
-                      });
-                    }
-                  };
-                }}
-                key="button"
-                type="primary"
-              >
-                新增
-              </PermissionButton>
+              {!props.view && (
+                <PermissionButton
+                  isPermission={networkPermission.add}
+                  onClick={() => {
+                    const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
+                    const tab: any = window.open(
+                      `${origin}/#${url}?type=${MetworkTypeMapping.get(props.provider?.id) || ''}`,
+                    );
+                    tab!.onTabSaveSuccess = (value: any) => {
+                      if (value.status === 200) {
+                        setNetworkCurrent(value.result?.id);
+                        queryNetworkList(props.provider?.id, {
+                          include: networkCurrent || '',
+                        });
+                      }
+                    };
+                  }}
+                  key="button"
+                  type="primary"
+                >
+                  新增
+                </PermissionButton>
+              )}
             </div>
             {networkList.length > 0 ? (
               <Row gutter={[16, 16]}>
@@ -447,23 +450,25 @@ const Access = (props: Props) => {
                 }}
                 style={{ width: 500, margin: '20px 0' }}
               />
-              <PermissionButton
-                isPermission={protocolPermission.add}
-                onClick={() => {
-                  const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
-                  const tab: any = window.open(`${origin}/#${url}?save=true`);
-                  tab!.onTabSaveSuccess = (resp: any) => {
-                    if (resp.status === 200) {
-                      setProcotolCurrent(resp.result?.id);
-                      queryProcotolList(props.provider?.id);
-                    }
-                  };
-                }}
-                key="button"
-                type="primary"
-              >
-                新增
-              </PermissionButton>
+              {!props.view && (
+                <PermissionButton
+                  isPermission={protocolPermission.add}
+                  onClick={() => {
+                    const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
+                    const tab: any = window.open(`${origin}/#${url}?save=true`);
+                    tab!.onTabSaveSuccess = (resp: any) => {
+                      if (resp.status === 200) {
+                        setProcotolCurrent(resp.result?.id);
+                        queryProcotolList(props.provider?.id);
+                      }
+                    };
+                  }}
+                  key="button"
+                  type="primary"
+                >
+                  新增
+                </PermissionButton>
+              )}
             </div>
             {procotolList.length > 0 ? (
               <Row gutter={[16, 16]}>
@@ -512,6 +517,8 @@ const Access = (props: Props) => {
                     暂无数据
                     {getButtonPermission('link/Protocol', ['add']) ? (
                       '请联系管理员进行配置'
+                    ) : props.view ? (
+                      ''
                     ) : (
                       <Button
                         type="link"
@@ -557,69 +564,71 @@ const Access = (props: Props) => {
                   <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                     上一步
                   </Button>
-                  <Button
-                    type="primary"
-                    disabled={
-                      !!props.data.id
-                        ? getButtonPermission('link/AccessConfig', ['update'])
-                        : getButtonPermission('link/AccessConfig', ['add'])
-                    }
-                    onClick={async () => {
-                      try {
-                        const values = await form.validateFields();
-                        // 编辑还是保存
-                        if (!props.data?.id) {
-                          service
-                            .save({
-                              name: values.name,
-                              description: values.description,
-                              provider: props.provider.id,
-                              protocol: procotolCurrent,
-                              transport:
-                                props.provider?.id === 'child-device'
-                                  ? 'Gateway'
-                                  : ProcotoleMapping.get(props.provider.id),
-                              channel: 'network', // 网络组件
-                              channelId: networkCurrent,
-                            })
-                            .then((resp: any) => {
-                              if (resp.status === 200) {
-                                onlyMessage('操作成功！');
-                                history.goBack();
-                                if ((window as any).onTabSaveSuccess) {
-                                  (window as any).onTabSaveSuccess(resp);
-                                  setTimeout(() => window.close(), 300);
+                  {!props.view && (
+                    <Button
+                      type="primary"
+                      disabled={
+                        !!props.data.id
+                          ? getButtonPermission('link/AccessConfig', ['update'])
+                          : getButtonPermission('link/AccessConfig', ['add'])
+                      }
+                      onClick={async () => {
+                        try {
+                          const values = await form.validateFields();
+                          // 编辑还是保存
+                          if (!props.data?.id) {
+                            service
+                              .save({
+                                name: values.name,
+                                description: values.description,
+                                provider: props.provider.id,
+                                protocol: procotolCurrent,
+                                transport:
+                                  props.provider?.id === 'child-device'
+                                    ? 'Gateway'
+                                    : ProcotoleMapping.get(props.provider.id),
+                                channel: 'network', // 网络组件
+                                channelId: networkCurrent,
+                              })
+                              .then((resp: any) => {
+                                if (resp.status === 200) {
+                                  onlyMessage('操作成功！');
+                                  history.goBack();
+                                  if ((window as any).onTabSaveSuccess) {
+                                    (window as any).onTabSaveSuccess(resp);
+                                    setTimeout(() => window.close(), 300);
+                                  }
                                 }
-                              }
-                            });
-                        } else {
-                          service
-                            .update({
-                              ...props.data,
-                              name: values.name,
-                              description: values.description,
-                              protocol: procotolCurrent,
-                              channel: 'network', // 网络组件
-                              channelId: networkCurrent,
-                            })
-                            .then((resp: any) => {
-                              if (resp.status === 200) {
-                                onlyMessage('操作成功！');
-                                history.goBack();
-                                if ((window as any).onTabSaveSuccess) {
-                                  (window as any).onTabSaveSuccess(resp);
-                                  setTimeout(() => window.close(), 300);
+                              });
+                          } else {
+                            service
+                              .update({
+                                ...props.data,
+                                name: values.name,
+                                description: values.description,
+                                protocol: procotolCurrent,
+                                channel: 'network', // 网络组件
+                                channelId: networkCurrent,
+                              })
+                              .then((resp: any) => {
+                                if (resp.status === 200) {
+                                  onlyMessage('操作成功！');
+                                  history.goBack();
+                                  if ((window as any).onTabSaveSuccess) {
+                                    (window as any).onTabSaveSuccess(resp);
+                                    setTimeout(() => window.close(), 300);
+                                  }
                                 }
-                              }
-                            });
+                              });
+                          }
+                        } catch (errorInfo) {
+                          console.error('Failed:', errorInfo);
                         }
-                      } catch (errorInfo) {
-                        console.error('Failed:', errorInfo);
-                      }
-                    }}
-                  >
-                    保存
-                  </Button>
+                      }}
+                    >
+                      保存
+                    </Button>
+                  )}
                 </div>
               </div>
             </Col>

src/pages/link/AccessConfig/Detail/Channel/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   change: () => void;
   data: any;
   provider: any;
+  view?: boolean;
 }
 
 const Media = (props: Props) => {
@@ -68,40 +69,42 @@ const Media = (props: Props) => {
                 </Form.Item>
               </Form>
               <div style={{ marginTop: 50 }}>
-                <Button
-                  type="primary"
-                  disabled={
-                    !!props.data.id
-                      ? getButtonPermission('link/AccessConfig', ['update'])
-                      : getButtonPermission('link/AccessConfig', ['add'])
-                  }
-                  onClick={async () => {
-                    try {
-                      const values = await form.validateFields();
-                      const param = {
-                        ...props.data,
-                        ...values,
-                        provider: props.provider?.id,
-                        protocol: procotol,
-                        transport: props.provider.id === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
-                        channel: props.provider.id === 'modbus-tcp' ? 'modbus' : 'opc-ua',
-                      };
-                      const resp: any = await service[!props.data?.id ? 'save' : 'update'](param);
-                      if (resp.status === 200) {
-                        onlyMessage('操作成功！');
-                        history.goBack();
-                        if ((window as any).onTabSaveSuccess) {
-                          (window as any).onTabSaveSuccess(resp);
-                          setTimeout(() => window.close(), 300);
+                {!props.view && (
+                  <Button
+                    type="primary"
+                    disabled={
+                      !!props.data.id
+                        ? getButtonPermission('link/AccessConfig', ['update'])
+                        : getButtonPermission('link/AccessConfig', ['add'])
+                    }
+                    onClick={async () => {
+                      try {
+                        const values = await form.validateFields();
+                        const param = {
+                          ...props.data,
+                          ...values,
+                          provider: props.provider?.id,
+                          protocol: procotol,
+                          transport: props.provider.id === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
+                          channel: props.provider.id === 'modbus-tcp' ? 'modbus' : 'opc-ua',
+                        };
+                        const resp: any = await service[!props.data?.id ? 'save' : 'update'](param);
+                        if (resp.status === 200) {
+                          onlyMessage('操作成功！');
+                          history.goBack();
+                          if ((window as any).onTabSaveSuccess) {
+                            (window as any).onTabSaveSuccess(resp);
+                            setTimeout(() => window.close(), 300);
+                          }
                         }
+                      } catch (errorInfo) {
+                        console.error('Failed:', errorInfo);
                       }
-                    } catch (errorInfo) {
-                      console.error('Failed:', errorInfo);
-                    }
-                  }}
-                >
-                  保存
-                </Button>
+                    }}
+                  >
+                    保存
+                  </Button>
+                )}
               </div>
             </div>
           </Col>

src/pages/link/AccessConfig/Detail/Cloud/Finish/index.tsx

@@ -14,6 +14,7 @@ interface Props {
   config: any;
   provider: any;
   procotol: string;
+  view?: boolean;
 }
 
 const Finish = (props: Props) => {
@@ -58,42 +59,44 @@ const Finish = (props: Props) => {
             >
               上一步
             </Button>
-            <Button
-              type="primary"
-              disabled={
-                !!props.data.id
-                  ? getButtonPermission('link/AccessConfig', ['update'])
-                  : getButtonPermission('link/AccessConfig', ['add'])
-              }
-              onClick={async () => {
-                try {
-                  const values = await form.validateFields();
-                  const param = {
-                    ...props.data,
-                    ...values,
-                    provider: props.provider.id,
-                    protocol: props.procotol,
-                    transport: 'HTTP_SERVER',
-                    configuration: {
-                      ...props.config,
-                    },
-                  };
-                  const resp: any = await service[!props.data?.id ? 'save' : 'update'](param);
-                  if (resp.status === 200) {
-                    onlyMessage('操作成功！');
-                    history.goBack();
-                    if ((window as any).onTabSaveSuccess) {
-                      (window as any).onTabSaveSuccess(resp);
-                      setTimeout(() => window.close(), 300);
+            {!props.view && (
+              <Button
+                type="primary"
+                disabled={
+                  !!props.data.id
+                    ? getButtonPermission('link/AccessConfig', ['update'])
+                    : getButtonPermission('link/AccessConfig', ['add'])
+                }
+                onClick={async () => {
+                  try {
+                    const values = await form.validateFields();
+                    const param = {
+                      ...props.data,
+                      ...values,
+                      provider: props.provider.id,
+                      protocol: props.procotol,
+                      transport: 'HTTP_SERVER',
+                      configuration: {
+                        ...props.config,
+                      },
+                    };
+                    const resp: any = await service[!props.data?.id ? 'save' : 'update'](param);
+                    if (resp.status === 200) {
+                      onlyMessage('操作成功！');
+                      history.goBack();
+                      if ((window as any).onTabSaveSuccess) {
+                        (window as any).onTabSaveSuccess(resp);
+                        setTimeout(() => window.close(), 300);
+                      }
                     }
+                  } catch (errorInfo) {
+                    console.error('Failed:', errorInfo);
                   }
-                } catch (errorInfo) {
-                  console.error('Failed:', errorInfo);
-                }
-              }}
-            >
-              保存
-            </Button>
+                }}
+              >
+                保存
+              </Button>
+            )}
           </div>
         </div>
       </Col>

src/pages/link/AccessConfig/Detail/Cloud/Protocol/index.tsx

@@ -25,6 +25,7 @@ interface Props {
   data: string;
   prev: () => void;
   next: (data: string) => void;
+  view?: boolean;
 }
 
 const Protocol = (props: Props) => {
@@ -66,22 +67,24 @@ const Protocol = (props: Props) => {
           }}
           style={{ width: 500, margin: '20px 0' }}
         />
-        <PermissionButton
-          isPermission={protocolPermission.add}
-          onClick={() => {
-            const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
-            const tab: any = window.open(`${origin}/#${url}?save=true`);
-            tab!.onTabSaveSuccess = (resp: any) => {
-              if (resp.status === 200) {
-                queryProcotolList(props.provider?.id);
-              }
-            };
-          }}
-          key="button"
-          type="primary"
-        >
-          新增
-        </PermissionButton>
+        {!props.view && (
+          <PermissionButton
+            isPermission={protocolPermission.add}
+            onClick={() => {
+              const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
+              const tab: any = window.open(`${origin}/#${url}?save=true`);
+              tab!.onTabSaveSuccess = (resp: any) => {
+                if (resp.status === 200) {
+                  queryProcotolList(props.provider?.id);
+                }
+              };
+            }}
+            key="button"
+            type="primary"
+          >
+            新增
+          </PermissionButton>
+        )}
       </div>
       {procotolList.length > 0 ? (
         <Row gutter={[16, 16]}>
@@ -113,6 +116,8 @@ const Protocol = (props: Props) => {
               暂无数据
               {getButtonPermission('link/Protocol', ['add']) ? (
                 '请联系管理员进行配置'
+              ) : props.view ? (
+                ''
               ) : (
                 <Button
                   type="link"

src/pages/link/AccessConfig/Detail/Cloud/index.tsx

@@ -11,6 +11,7 @@ interface Props {
   change: () => void;
   data: any;
   provider: any;
+  view?: boolean;
 }
 
 const Cloud = (props: Props) => {
@@ -64,6 +65,7 @@ const Cloud = (props: Props) => {
               <Protocol
                 data={procotolCurrent}
                 provider={props.provider}
+                view={props.view}
                 next={(param: string) => {
                   setProcotolCurrent(param);
                   setCurrent(current + 1);
@@ -81,6 +83,7 @@ const Cloud = (props: Props) => {
             data={props.data}
             config={config}
             prev={prev}
+            view={props.view}
           />
         );
       default:

src/pages/link/AccessConfig/Detail/Media/index.tsx

@@ -32,6 +32,7 @@ interface Props {
   change: () => void;
   data: any;
   provider: any;
+  view?: boolean;
 }
 
 const Media = (props: Props) => {
@@ -499,52 +500,54 @@ const Media = (props: Props) => {
                   上一步
                 </Button>
               )}
-              <Button
-                type="primary"
-                disabled={
-                  !!params.get('id')
-                    ? getButtonPermission('link/AccessConfig', ['update'])
-                    : getButtonPermission('link/AccessConfig', ['add'])
-                }
-                onClick={async () => {
-                  const values = await form.validateFields();
-                  const param: any = {
-                    name: values.name,
-                    description: values.description,
-                  };
-                  if (props?.provider?.id === 'fixed-media') {
-                    param.provider = 'fixed-media';
-                    param.transport = 'URL';
-                    param.channel = 'fixed-media';
-                  } else {
-                    param.provider = 'gb28181-2016';
-                    param.transport = 'SIP';
-                    param.channel = 'gb28181';
-                    param.configuration = configuration;
-                  }
-                  let resp = undefined;
-                  if (!!params.get('id')) {
-                    resp = await service.update({ ...param, id: params.get('id') || '' });
-                  } else {
-                    resp = await service.save({ ...param });
+              {!props.view && (
+                <Button
+                  type="primary"
+                  disabled={
+                    !!params.get('id')
+                      ? getButtonPermission('link/AccessConfig', ['update'])
+                      : getButtonPermission('link/AccessConfig', ['add'])
                   }
-                  if (resp.status === 200) {
-                    onlyMessage('操作成功！');
-                    if (params.get('save')) {
-                      if ((window as any).onTabSaveSuccess) {
-                        if (resp.result) {
-                          (window as any).onTabSaveSuccess(resp.result);
-                          setTimeout(() => window.close(), 300);
+                  onClick={async () => {
+                    const values = await form.validateFields();
+                    const param: any = {
+                      name: values.name,
+                      description: values.description,
+                    };
+                    if (props?.provider?.id === 'fixed-media') {
+                      param.provider = 'fixed-media';
+                      param.transport = 'URL';
+                      param.channel = 'fixed-media';
+                    } else {
+                      param.provider = 'gb28181-2016';
+                      param.transport = 'SIP';
+                      param.channel = 'gb28181';
+                      param.configuration = configuration;
+                    }
+                    let resp = undefined;
+                    if (!!params.get('id')) {
+                      resp = await service.update({ ...param, id: params.get('id') || '' });
+                    } else {
+                      resp = await service.save({ ...param });
+                    }
+                    if (resp.status === 200) {
+                      onlyMessage('操作成功！');
+                      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();
                       }
-                    } else {
-                      history.back();
                     }
-                  }
-                }}
-              >
-                保存
-              </Button>
+                  }}
+                >
+                  保存
+                </Button>
+              )}
             </div>
           </div>
         </Col>

src/pages/link/AccessConfig/Detail/index.tsx

@@ -1,6 +1,6 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'umi';
+// import { useLocation } from 'umi';
 import Access from './Access';
 import Provider from './Provider';
 import Media from './Media';
@@ -8,13 +8,11 @@ import { service } from '@/pages/link/AccessConfig';
 import { Spin } from 'antd';
 import Cloud from './Cloud';
 import Channel from './Channel';
-
-type LocationType = {
-  id?: string;
-};
+import { useLocation } from '@/hooks';
 
 const Detail = () => {
-  const location = useLocation<LocationType>();
+  const location = useLocation();
+  const [view, setView] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<any>({});
@@ -70,7 +68,13 @@ const Detail = () => {
         setLoading(false);
       }
     });
-  }, []);
+  }, [location]);
+
+  useEffect(() => {
+    if (location && location.state) {
+      setView(location.state.view);
+    }
+  }, [location]);
 
   const componentRender = () => {
     switch (type) {
@@ -79,6 +83,7 @@ const Detail = () => {
           <Access
             data={data}
             provider={provider}
+            view={view}
             change={() => {
               setVisible(true);
             }}
@@ -88,6 +93,7 @@ const Detail = () => {
         return (
           <Media
             data={data}
+            view={view}
             provider={provider}
             change={() => {
               setVisible(true);
@@ -99,6 +105,7 @@ const Detail = () => {
           <Cloud
             data={data}
             provider={provider}
+            view={view}
             change={() => {
               setVisible(true);
             }}
@@ -109,6 +116,7 @@ const Detail = () => {
           <Channel
             data={data}
             provider={provider}
+            view={view}
             change={() => {
               setVisible(true);
             }}

src/pages/link/AccessConfig/index.tsx

@@ -4,14 +4,20 @@ import { PageContainer } from '@ant-design/pro-layout';
 import type { ProColumns } from '@jetlinks/pro-table';
 import { Card, Col, Pagination, Row } from 'antd';
 import { useEffect, useState } from 'react';
-import { useHistory } from 'umi';
 import Service from './service';
-import { DeleteOutlined, EditOutlined, PlayCircleOutlined, StopOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EyeOutlined,
+  PlayCircleOutlined,
+  StopOutlined,
+} from '@ant-design/icons';
 import AccessConfigCard from '@/components/ProTableCard/CardItems/AccessConfig';
 import { Empty, PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
 import { Store } from 'jetlinks-store';
 import { onlyMessage } from '@/utils/util';
+import { useHistory } from '@/hooks';
 
 export const service = new Service('gateway/device');
 
@@ -123,6 +129,21 @@ const AccessConfig = () => {
                   <Col key={item.id} span={12}>
                     <AccessConfigCard
                       {...item}
+                      detail={
+                        <div
+                          style={{ padding: 8, fontSize: 24 }}
+                          onClick={() => {
+                            history.push(
+                              `${getMenuPathByCode(MENUS_CODE['link/AccessConfig/Detail'])}?id=${
+                                item.id
+                              }`,
+                              { view: true },
+                            );
+                          }}
+                        >
+                          <EyeOutlined />
+                        </div>
+                      }
                       actions={[
                         <PermissionButton
                           isPermission={permission.update}

src/pages/link/Certificate/Detail/index.tsx

@@ -5,7 +5,7 @@ import { Form, FormButtonGroup, FormItem } from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
 import { Card, Col, Input, Row } from 'antd';
 import { createSchemaField, observer } from '@formily/react';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { createForm } from '@formily/core';
 import CertificateFile from './components/CertificateFile';
 import Standard from './components/Standard';
@@ -13,9 +13,12 @@ import { service } from '@/pages/link/Certificate';
 import { useParams } from 'umi';
 import './index.less';
 import { onlyMessage } from '@/utils/util';
+import { useLocation } from '@/hooks';
 
 const Detail = observer(() => {
   const params = useParams<{ id: string }>();
+  const location = useLocation();
+  const [view, setView] = useState<boolean>(false);
   const form = useMemo(
     () =>
       createForm({
@@ -33,6 +36,11 @@ const Detail = observer(() => {
       });
     }
   }, [params.id]);
+  useEffect(() => {
+    if (location && location.state) {
+      setView(location.state.view);
+    }
+  }, [location]);
 
   const SchemaField = createSchemaField({
     components: {
@@ -138,22 +146,24 @@ const Detail = observer(() => {
               <SchemaField schema={schema} />
               <FormButtonGroup.Sticky>
                 <FormButtonGroup.FormItem>
-                  <PermissionButton
-                    type="primary"
-                    isPermission={getOtherPermission(['add', 'update'])}
-                    onClick={async () => {
-                      const data: any = await form.submit();
-                      const response: any = data.id
-                        ? await service.update(data)
-                        : await service.save(data);
-                      if (response.status === 200) {
-                        onlyMessage('操作成功');
-                        history.back();
-                      }
-                    }}
-                  >
-                    保存
-                  </PermissionButton>
+                  {!view && (
+                    <PermissionButton
+                      type="primary"
+                      isPermission={getOtherPermission(['add', 'update'])}
+                      onClick={async () => {
+                        const data: any = await form.submit();
+                        const response: any = data.id
+                          ? await service.update(data)
+                          : await service.save(data);
+                        if (response.status === 200) {
+                          onlyMessage('操作成功');
+                          history.back();
+                        }
+                      }}
+                    >
+                      保存
+                    </PermissionButton>
+                  )}
                 </FormButtonGroup.FormItem>
               </FormButtonGroup.Sticky>
             </Form>

src/pages/link/Certificate/index.tsx

@@ -3,13 +3,14 @@ import { useRef, useState } from 'react';
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import ProTable from '@jetlinks/pro-table';
 import { Tooltip } from 'antd';
-import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import SearchComponent from '@/components/SearchComponent';
 import PermissionButton from '@/components/PermissionButton';
 import usePermissions from '@/hooks/permission';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
-import { history } from 'umi';
+// import { history } from 'umi';
+import useHistory from '@/hooks/route/useHistory';
 import Service from '../service';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
@@ -21,6 +22,7 @@ const Certificate = () => {
   const actionRef = useRef<ActionType>();
   const [param, setParam] = useState({});
   const { permission } = usePermissions('link/Certificate');
+  const history = useHistory();
 
   const { minHeight } = useDomFullHeight(`.link-certificate`, 24);
 
@@ -66,6 +68,21 @@ const Certificate = () => {
           key={'update'}
           type={'link'}
           style={{ padding: 0 }}
+          isPermission={permission.view}
+          tooltip={{
+            title: '查看',
+          }}
+          onClick={() => {
+            const url = `${getMenuPathByParams(MENUS_CODE['link/Certificate/Detail'], record.id)}`;
+            history.push(url, { view: true });
+          }}
+        >
+          <EyeOutlined />
+        </PermissionButton>,
+        <PermissionButton
+          key={'update'}
+          type={'link'}
+          style={{ padding: 0 }}
           isPermission={permission.update}
           tooltip={{
             title: '编辑',

src/pages/link/Type/Detail/index.tsx

@@ -14,7 +14,7 @@ import {
   Select,
 } from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Field, FieldDataSource } from '@formily/core';
 import { onFormInit } from '@formily/core';
 import { createForm, onFieldReact, onFieldValueChange } from '@formily/core';
@@ -30,6 +30,7 @@ import usePermissions from '@/hooks/permission';
 import { action } from '@formily/reactive';
 import FMonacoEditor from '@/components/FMonacoEditor';
 import { useParams } from 'umi';
+import { useLocation } from '@/hooks';
 
 /**
  *  根据类型过滤配置信息
@@ -56,6 +57,8 @@ const filterConfigByType = (data: any[], type: string) => {
 };
 const Save = observer(() => {
   const param = useParams<{ id: string }>();
+  const location = useLocation();
+  const [view, setView] = useState<boolean>(false);
 
   const configRef = useRef([]);
 
@@ -64,7 +67,7 @@ const Save = observer(() => {
     services(field).then(
       action.bound!((resp: any) => {
         const type = location.href.split('?')?.pop()?.split('=')?.pop() || '';
-        const save = location.href.split('/');
+        const save = location?.href?.split('/');
         if (location.href.includes('type=') && !!type) {
           field.value = type;
         } else if (save[save.length - 1] === ':id') {
@@ -998,6 +1001,11 @@ const Save = observer(() => {
   };
 
   const { getOtherPermission } = usePermissions('link/Type');
+  useEffect(() => {
+    if (location && location.state) {
+      setView(location.state.view);
+    }
+  }, [location]);
   return (
     <PageContainer>
       <Card>
@@ -1017,13 +1025,15 @@ const Save = observer(() => {
               />
               <FormButtonGroup.Sticky>
                 <FormButtonGroup.FormItem>
-                  <PermissionButton
-                    type="primary"
-                    isPermission={getOtherPermission(['add', 'update'])}
-                    onClick={() => handleSave()}
-                  >
-                    保存
-                  </PermissionButton>
+                  {!view && (
+                    <PermissionButton
+                      type="primary"
+                      isPermission={getOtherPermission(['add', 'update'])}
+                      onClick={() => handleSave()}
+                    >
+                      保存
+                    </PermissionButton>
+                  )}
                 </FormButtonGroup.FormItem>
               </FormButtonGroup.Sticky>
             </Form>

src/pages/link/Type/index.tsx

@@ -5,6 +5,7 @@ import {
   CloseCircleOutlined,
   DeleteOutlined,
   EditOutlined,
+  EyeOutlined,
   PlayCircleOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
@@ -13,7 +14,8 @@ import type { NetworkItem } from '@/pages/link/Type/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import SearchComponent from '@/components/SearchComponent';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
-import { history } from 'umi';
+// import { history } from 'umi';
+import useHistory from '@/hooks/route/useHistory';
 import Service from '@/pages/link/service';
 import { PermissionButton, ProTableCard } from '@/components';
 import NetworkCard from '@/components/ProTableCard/CardItems/networkCard';
@@ -22,15 +24,6 @@ import { onlyMessage } from '@/utils/util';
 
 export const service = new Service('network/config');
 
-/**
- * 跳转详情页
- * @param id
- */
-const pageJump = (id?: string) => {
-  // 跳转详情
-  history.push(`${getMenuPathByParams(MENUS_CODE['link/Type/Detail'], id)}`);
-};
-
 export const networkMap = {
   UDP: 'udp://',
   TCP_SERVER: 'tcp://',
@@ -44,8 +37,17 @@ export const networkMap = {
 const Network = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
+  const history = useHistory();
 
   const { permission: networkPermission } = usePermissions('link/Type');
+  /**
+   * 跳转详情页
+   * @param id
+   */
+  const pageJump = (id?: string) => {
+    // 跳转详情
+    history.push(`${getMenuPathByParams(MENUS_CODE['link/Type/Detail'], id)}`);
+  };
   const columns: ProColumns<NetworkItem>[] = [
     {
       dataIndex: 'name',
@@ -162,6 +164,20 @@ const Network = () => {
       render: (text, record) => [
         <PermissionButton
           type="link"
+          isPermission={networkPermission.view}
+          style={{ padding: 0 }}
+          key="view"
+          onClick={() => {
+            const url = `${getMenuPathByParams(MENUS_CODE['link/Type/Detail'], record.id)}`;
+            history.push(url, { view: true });
+          }}
+        >
+          <Tooltip title="查看">
+            <EyeOutlined />
+          </Tooltip>
+        </PermissionButton>,
+        <PermissionButton
+          type="link"
           isPermission={networkPermission.update}
           style={{ padding: 0 }}
           // disabled={getButtonPermission('link/Type', ['view'])}
@@ -280,17 +296,19 @@ const Network = () => {
         cardRender={(record) => (
           <NetworkCard
             {...record}
-            // detail={
-            //   <div
-            //     style={{ fontSize: 18, padding: 8 }}
-            //     onClick={() => {
-            //       Store.set('current-network-data', record);
-            //       pageJump(record.id);
-            //     }}
-            //   >
-            //     <EyeOutlined />
-            //   </div>
-            // }
+            detail={
+              <div
+                style={{ fontSize: 18, padding: 8 }}
+                onClick={() => {
+                  const url = `${getMenuPathByParams(MENUS_CODE['link/Type/Detail'], record.id)}`;
+                  history.push(url, { view: true });
+                  // Store.set('current-network-data', record);
+                  // pageJump(record.id);
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
             actions={[
               <PermissionButton
                 isPermission={networkPermission.update}

src/pages/rule-engine/Scene/Save/action/VariableItems/builtIn.tsx

@@ -55,7 +55,7 @@ export default (props: BuiltInProps) => {
   const sourceChangeEvent = async () => {
     onChange(source, undefined);
     const data = props.form.getFieldsValue();
-    const triggerData = await props.triggerRef.getTriggerData();
+    const triggerData = await props.triggerRef?.getTriggerData();
     console.log(triggerData);
     data.terms = triggerData?.trigger;
     const params = props.name - 1 >= 0 ? { action: props.name - 1 } : undefined;

src/pages/rule-engine/Scene/Save/index.tsx

@@ -1,6 +1,6 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Card, Form, Input, InputNumber, Radio, Space, Switch, Tooltip } from 'antd';
-import { useHistory, useIntl, useLocation } from 'umi';
+import { useIntl } from 'umi';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { PermissionButton, TitleComponent } from '@/components';
 import ActionItems from './action/action';
@@ -16,6 +16,7 @@ import type { FormModelType } from '@/pages/rule-engine/Scene/typings';
 import { onlyMessage } from '@/utils/util';
 import Explanation from './Explanation';
 import { getMenuPathByCode } from '@/utils/menu';
+import { useLocation, useHistory } from '@/hooks';
 
 type ShakeLimitType = {
   enabled: boolean;
@@ -54,6 +55,7 @@ export default () => {
 
   const [actionsData, setActionsData] = useState<any[]>([]);
   const [isEdit, setIsEdit] = useState(false);
+  const [view, setView] = useState<boolean>(false);
 
   useEffect(() => {
     FormModel = {};
@@ -93,6 +95,9 @@ export default () => {
     if (id) {
       getDetail(id);
     }
+    if (location && location.state) {
+      setView(location.state.view);
+    }
   }, [location]);
 
   const saveData = useCallback(async () => {
@@ -405,15 +410,17 @@ export default () => {
               <Form.Item hidden name={'id'}>
                 <Input />
               </Form.Item>
-              <PermissionButton
-                isPermission={getOtherPermission(['add', 'update'])}
-                onClick={saveData}
-                type={'primary'}
-                loading={loading}
-                htmlType="submit"
-              >
-                保存
-              </PermissionButton>
+              {!view && (
+                <PermissionButton
+                  isPermission={getOtherPermission(['add', 'update'])}
+                  onClick={saveData}
+                  type={'primary'}
+                  loading={loading}
+                  htmlType="submit"
+                >
+                  保存
+                </PermissionButton>
+              )}
             </Form>
           </div>
           <div className={'scene-content-right'}>

src/pages/rule-engine/Scene/index.tsx

@@ -5,6 +5,7 @@ import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
 import {
   DeleteOutlined,
   EditOutlined,
+  EyeOutlined,
   PlayCircleOutlined,
   PlusOutlined,
   StopOutlined,
@@ -13,10 +14,11 @@ import { BadgeStatus, PermissionButton, ProTableCard } from '@/components';
 import SearchComponent from '@/components/SearchComponent';
 import SceneCard from '@/components/ProTableCard/CardItems/scene';
 import Service from './service';
-import { useHistory, useIntl } from 'umi';
+import { useIntl } from 'umi';
 import { getMenuPathByCode } from '@/utils/menu';
 import { StatusColorEnum } from '@/components/BadgeStatus';
 import { onlyMessage } from '@/utils/util';
+import useHistory from '@/hooks/route/useHistory';
 
 export const service = new Service('scene');
 
@@ -46,7 +48,7 @@ const Scene = () => {
   };
 
   const Tools = (record: any, type: 'card' | 'table'): React.ReactNode[] => {
-    return [
+    const item = [
       <PermissionButton
         key={'update'}
         type={'link'}
@@ -157,6 +159,28 @@ const Scene = () => {
         <DeleteOutlined />
       </PermissionButton>,
     ];
+    if (type === 'table') {
+      return [
+        <PermissionButton
+          key={'update'}
+          type={'link'}
+          style={{ padding: 0 }}
+          isPermission={permission.view}
+          tooltip={{
+            title: '查看',
+          }}
+          onClick={() => {
+            const url = getMenuPathByCode('rule-engine/Scene/Save');
+            history.push(`${url}?id=${record.id}`, { view: true });
+          }}
+        >
+          <EyeOutlined />
+        </PermissionButton>,
+        ...item,
+      ];
+    } else {
+      return item;
+    }
   };
 
   const columns: ProColumns<SceneItem>[] = [
@@ -295,7 +319,23 @@ const Scene = () => {
             })}
           </PermissionButton>,
         ]}
-        cardRender={(record) => <SceneCard {...record} tools={Tools(record, 'card')} />}
+        cardRender={(record) => (
+          <SceneCard
+            {...record}
+            detail={
+              <div
+                style={{ padding: 8, fontSize: 24 }}
+                onClick={() => {
+                  const url = getMenuPathByCode('rule-engine/Scene/Save');
+                  history.push(`${url}?id=${record.id}`, { view: true });
+                }}
+              >
+                <EyeOutlined />
+              </div>
+            }
+            tools={Tools(record, 'card')}
+          />
+        )}
       />
     </PageContainer>
   );