基本布局修改

首页的修改:

src--->page--->user---->login----> components----> login----> index----> render

  render() {
    const { className, children } = this.props;
    const { type, tabs = [] } = this.state;
    const TabChildren = [];
    const otherChildren = [];
    React.Children.forEach(children, child => {
      if (!child) {
        return;
      }

      if (child.type.typeName === 'LoginTab') {
        TabChildren.push(child);
      } else {
        otherChildren.push(child);
      }
    });
    return (
      <LoginContext.Provider value={this.getContext()}>
        <div className={classNames(className, styles.login)}>
          <Form onSubmit={this.handleSubmit}>
            {tabs.length ? (
              <React.Fragment>
                <Tabs
                  animated={false}
                  className={styles.tabs}
                  activeKey={type}
                  onChange={this.onSwitch}
                >
                  {TabChildren}
                </Tabs>
                {otherChildren}
              </React.Fragment>
            ) : (
              children
            )}
          </Form>
        </div>
      </LoginContext.Provider>
    );
  }

首页商标的修改

layout--->BlankLayout,注释掉下列代码

<CopyBlock id={Date.now()} />

首页背景颜色的修改

layout--->UserLayout.css----> background:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: @layout-body-background;
}

首页文字和登录框的修改

layout--->UserLayout.js---->return()里面的内容修改

 <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>

.desc {
  margin-top: 12px;
  margin-bottom: 40px;
  color: @text-color-secondary;
  font-size: @font-size-base;
}

首页修改背景图片

layout--->UserLayout.js---->return()里面的内容修改

layout--->UserLayout.css 加入下列样式

  background: url("图片url地址);

修改背景样式

修改layout--->UserLayout.css 中 .container的backgroud样式

@media (min-width: @screen-md-min) {
  .container {

    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
  }

修改登录页logo

修改layout--->UserLayout.js中的属性

<img alt="logo" className={styles.logo} src={'http://img3.imgtn.bdimg.com/it/u=33335323,2012764520&fm=26&gp=0.jpg'} />

修改登录页footer的修改

直接删除footer标签

修改导航栏(最上面的小图表)

page-document.ejs 文件中修改

  <title>蓝牙租床管理系统</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />

config\defaultSettings.js中修改
```
  title: '蓝牙租床管理系统',
```

修改首页其他登录方式

my-app\src\pages\user\login\index.jsx

<Icon type="alipay-circle" className={styles.icon} theme="outlined" />
<Icon type="taobao-circle" className={styles.icon} theme="outlined" />
<Icon type="weibo-circle" className={styles.icon} theme="outlined" />

用户页面的logo

src/layouts/BasicLayout.jsx

import logo from '../assets/logo.svg';
所以修改图片在
assets/logo.svg'
//在assets加入自己想要的图片
import bed from '../assets/bed.png';
修改渲染页的
logo={bed}

用户页面的右上角修改

  src/layouts/BasicLayout.jsx
  rightContentRender={rightProps => <RightContent {...rightProps} />}
  src/components/GlobalHeader/RightContent.jsx
  修改return 的渲染内容

用户页面的右上角头像修改

mock/user.js
 name: 'Serati Ma',
avatar'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',

修改查询咧白哦的

src/pages/list/table-list/components/CreateForm.jsx
更改渲染

左侧导航栏的修改

1. 在config里面添加路由
            {
              name: 'member',
              icon: 'usergroup-add',
              path: '/member',
              routes: [
                {
                  name: 'management',
                  icon: 'usergroup-add',
                  path: '/member/management',
                  component: './member/management',
                }
              ],
            },
2. 在page里面相对于的页面 member/management/index.jsx

3. 名称的修改：src/locales/zh-CN/menu.js
  'menu.member': '会员管理',
  'menu.member.management': '会员管理'

4.图表的修改：
config/config.js 里面修改 icon属性: 从组件库选好组件名，直接输入icon的组件名，而不是标签引用
正确： icon: 'usergroup-add',
错误： <Icon type="usergroup-add" />

ctrl shift - 缩进

页面内容添加数据的显示

//从service.js中 queryMember 方法
import { addRule, queryRule, removeRule, updateRule,queryMember } from './service';

const Model = {
  //命名空间
  namespace: 'MemberList',
  state: {
    data: {
      list: [],
      pagination: {},
    },
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryRule, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },

    *add({ payload, callback }, { call, put }) {
      const response = yield call(addRule, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      if (callback) callback();
    },

    *remove({ payload, callback }, { call, put }) {
      const response = yield call(removeRule, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      if (callback) callback();
    },

    *update({ payload, callback }, { call, put }) {
      const response = yield call(updateRule, payload);
      yield put({
        type: 'save',
        payload: response,
      });
      if (callback) callback();
    },
  },
  reducers: {
    save(state, action) {
      return { ...state, data: action.payload };
    },
  },
};
export default Model;

import request from '@/utils/request';

// export async function queryRule(params) {
//   return request('/api/rule', {
//     params,
//   });
// }

export async function queryRule(params) {
  return request('http://localhost/find_all_device', {
    params,
  });
}

//查询用户方法
export async function queryMember(params) {
  return request('http://localhost/find_all_device', {
    params,
  });
}

export async function removeRule(params) {
  return request('/api/rule', {
    method: 'POST',
    data: { ...params, method: 'delete' },
  });
}
export async function addRule(params) {
  return request('http://localhost/add_device', {
    method: 'POST',
    data: { ...params, method: 'post' },
  });
}
export async function updateRule(params) {
  return request('/api/rule', {
    method: 'POST',
    data: { ...params, method: 'update' },
  });
}