@kgdata/static-resource/src/index.md

static-resource

---
mobile: false
nav:
  title: static-resource
  path: /static-resource
---

# **静态资源配置**

## StaticResource

```tsx
import React from 'react';
import StaticResource from './StaticResource/index.tsx';
import { Switch } from 'antd';
import { useState, useEffect } from 'react';

const Home = () => {
  const [formItem, setFormItem] = useState(null);
  const [status, setStatus] = useState('read');
  const onRollBack = (type) => {
    console.log(type, '回滚');
  };
  const onFinish = (data: any) => {
    console.log(data, '提交');
  };
  const onReset = (type) => {
    getResourceData();
    console.log(type, '重置');
  };
  const getResourceData = () => {
    const value = {
      applicationName: '项目名称',
      productType: 'KGINFORMATIONBASE',
      isShowLogo: false,
      logo: 'https://avatars2.githubusercontent.com/u/8186664?s=60&v=4',
      icon: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      version: '当前版本',
      copyright: '版权',
      meta: '{\n  "string":1213,\n  "swm":{"wyq":2189,"设计":"2ej"}\n}',
      lastModifyTime: 1677553053913,
    };
    setFormItem(value);
  };
  useEffect(() => {
    getResourceData();
  }, []);
  return (
    formItem !== null && (
      <StaticResource
        {...formItem}
        stateStatus={status}
        // notEditableKeys={['meta']}
        // hiddenKeys={['productType','version']}
        maxLength={10}
        onRollBack={() => {
          onRollBack, setStatus('read');
        }}
        onFinish={onFinish}
        onReset={onReset}
        onChangeStatus={setStatus}
      />
    )
  );
};

export default Home;
```

#### StaticResource(props)

| 名称            | 是否必填 | 类型                                                                                   | 备注                                               |
| :-------------- | :------- | :------------------------------------------------------------------------------------- | :------------------------------------------------- |
| applicationName | 是       | string                                                                                 | 项目名称                                           |
| productType     | 是       | 'KGDATA' &#124; 'KGQA' &#124; 'KGRECOMMEND' &#124; 'KGINFORMATIONBASE'&#124; 'KGMODEL' | 平台类型                                           |
| isShowLogo      | 是       | boolean                                                                                | 是否无 logo                                        |
| logo            | 否       | string                                                                                 | logo 地址                                          |
| icon            | 否       | string                                                                                 | icon 地址                                          |
| version         | 是       | 'current' &#124; 'previous'                                                            | 版本号                                             |
| copyright       | 否       | string                                                                                 | 版权                                               |
| meta            | 否       | string                                                                                 | 扩展字段                                           |
| stateStatus     | 是       | 'read'&#124;'edit'                                                                     | 可读编辑状态                                       |
| hiddenKeys      | 否       | string[]&#124;例: ['meta']                                                             | 表单字段是否可见,默认都可见                        |
| notEditableKey  | 否       | string[]&#124;例: ['productType','version']                                            | 表单字段是否可编辑,默认为['productType','version'] |

#### 事件

| 事件           | 描述           | 回调参数 |
| :------------- | :------------- | :------- |
| onRollBack     | 回滚事件的调用 | type     |
| onFinish       | 提交表单的调用 | data     |
| onReset        | 重置默认数据   | type     |
| onChangeStatus | 改变状态       | action   |

## ProStaticResourse

```tsx
import React, { useState } from 'react';
import ProStaticResource from './ProStaticResource';
const value = {
  applicationName: '项目名称',
  productType: 'KGINFORMATIONBASE',
  isShowLogo: false,
  logo: 'https://avatars2.githubusercontent.com/u/8186664?s=60&v=4',
  icon: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  version: '当前版本',
  copyright: '版权',
  meta: '"{\\n  \\"strig\\": 123,\\n  \\"array\\":{ \\"dewi\\": 2318 }\\n}"',

  lastModifyTime: 1677553053913,
};
export default () => {
  const [visible, setVisible] = useState(false);
  const [status, setStatus] = useState('read');
  return (
    <ProStaticResource
      permissionVisible={true}
      contentProps={value}
      stateStatus={status}
      visible={visible}
      onChangeVisible={setVisible}
      onReset={(type) => {
        console.log('type', type);
      }}
      onRollBack={(type) => {
        console.log('type', type);
        setStatus('read');
      }}
      onFinish={(data) => {
        console.log('data', data);
        setVisible(false);
      }}
      onChangeStatus={setStatus}
      // trigger={<>对话框按钮文字</>}
      // modalTitle={'对话框标题'}
    />
  );
};
```

#### ProStaticResource(props)

| 名称              | 类型               | 备注                                                |
| :---------------- | :----------------- | :-------------------------------------------------- |
| permissionVisible | string             | 是否展示触发进去条件的按钮, 默认值为 false          |
| contentProps      | object             | 展示的数据,里面的字段类型; 同 StaticResource(props) |
| visible           | boolean            | 对话框是否可见                                      |
| trigger           | ReactNode          | 配置按钮的文字、图案等等                            |
| modalTitle        | string             | 对话框的标题                                        |
| stateStatus       | 'read'&#124;'edit' | 可读编辑状态                                        |

#### 事件

| 事件            | 描述               | 回调参数 |
| :-------------- | :----------------- | :------- |
| onChangeVisible | 控制对话框是否可见 | 无       |
| onRollBack      | 回滚事件的调用     | type     |
| onFinish        | 提交表单的调用     | data     |
| onReset         | 重置默认数据       | type     |
| onChangeStatus  | 改变状态           | action   |

## **组件说明以及数据使用**

- 组件说明:
  用于修改前端页面的静态资源,也用于功能字段的添加等等;

- 数据使用:

<p>对于icon title的修改:  使用umi中的@umijs/plugin-helmet的插件(最低umi3版本),其余的版本或其他均需要下载react-helmet插件(yarn add react-helmet),两种用法一样,例:</p>

```js
<Helmet>
  <meta charSet="utf-8" />
  <link rel="canonical" href="http://mysite.com/example" />
</Helmet>
```

> 注: icon 修改,将获取的地址,放到 link 标签中即可; title 修改,将获取的名称标题放到 title 标签即可.
> 特别注意: 使用此插件之前,需要给 umi 中 title 以及 icon 的配置进行去除(title 配置: [title: false]; icon 配置: 只需注释到即可)其他数据的修改,只需在代码中替换成变量即可