first commit

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env

@@ -0,0 +1,2 @@
+BROWSER=none
+ESLINT=1

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-umi"
+}

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production

.prettierignore

@@ -0,0 +1,7 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.js

@@ -0,0 +1,33 @@
+
+// ref: https://umijs.org/config/
+export default {
+  history: 'hash',
+  treeShaking: true,
+  proxy: {
+    "/api": {
+      "target": "http://127.0.0.1:8088/",
+      "changeOrigin": true,
+      // "pathRewrite": { "^/api" : "" }
+    }
+  },
+  plugins: [
+    // ref: https://umijs.org/plugin/umi-plugin-react.html
+    ['umi-plugin-react', {
+      antd: true,
+      dva: true,
+      dynamicImport: { webpackChunkName: true },
+      title: 'miniapp-service',
+      dll: false,
+      
+      routes: {
+        exclude: [
+          /models\//,
+          /services\//,
+          /model\.(t|j)sx?$/,
+          /service\.(t|j)sx?$/,
+          /components\//,
+        ],
+      },
+    }],
+  ],
+}

package.json

@@ -0,0 +1,40 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "test": "umi test",
+    "lint": "eslint --ext .js src mock tests",
+    "precommit": "lint-staged"
+  },
+  "dependencies": {
+    "antd": "^3.15.0",
+    "dva": "^2.5.0-beta.2",
+    "md5": "^2.2.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "devDependencies": {
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.4.0",
+    "eslint-config-umi": "^1.4.0",
+    "eslint-plugin-flowtype": "^2.50.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.2",
+    "react-test-renderer": "^16.7.0",
+    "umi": "^2.6.3",
+    "umi-plugin-react": "^1.6.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

src/app.js

@@ -0,0 +1,9 @@
+
+export const dva = {
+  config: {
+    onError(err) {
+      err.preventDefault();
+      console.error(err.message);
+    },
+  },
+};

src/global.css

@@ -0,0 +1,13 @@
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+.main {
+  background: '#fff';
+  padding: 24;
+}

src/layouts/__tests__/index.test.js

@@ -0,0 +1,14 @@
+import BasicLayout from '..';
+import renderer from 'react-test-renderer';
+
+describe('Layout: BasicLayout', () => {
+  it('Render correctly', () => {
+    const wrapper = renderer.create(<BasicLayout />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0];
+    expect(outerLayer.type).toBe('div');
+    const title = outerLayer.children[0];
+    expect(title.type).toBe('h1');
+    expect(title.children[0]).toBe('Yay! Welcome to umi!');
+  });
+});

src/layouts/components/User.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Menu, Dropdown, Icon } from 'antd';
+
+const User = (props) => {
+  const handleMenuClick = ({ key }) => {
+    if (key === 'logout') {
+      props.onLogout()
+    }
+  }
+
+  const menu = (
+    <Menu onClick={handleMenuClick}>
+      <Menu.Item key="logout">退 出</Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu}>
+      <div style={{ color: '#fff' }}>
+        <span>{props.profile.userName} <Icon type="down" /></span>
+      </div>
+    </Dropdown>
+  );
+}
+
+export default User;

src/layouts/index.js

@@ -0,0 +1,51 @@
+import { Layout, Row, Col } from 'antd';
+import { connect } from 'dva';
+import withRouter from 'umi/withRouter';
+import router from 'umi/router';
+
+import User from './components/User';
+import styles from './index.less'
+import { getToken } from '../utils/token';
+
+const { Header, Footer, Content } = Layout;
+
+const BasicLayout = (props) => {
+  const token = getToken()
+  if (!token && props.location.pathname != '/login') {
+    router.push('/login')
+    return (<></>)
+  }
+
+  if (props.location.pathname === '/login') {
+    return (<>{ props.children }</>)
+  }
+
+  const tkUser = JSON.parse(token)
+
+  const handleUserLogout = () => {
+    props.dispatch({ type: 'app/logout' })
+    router.push('/login')
+  }
+
+  return (
+    <Layout className={styles.layout}>
+        <Header className={styles.header}>
+          <Row>
+            <Col span={20}>
+              <div className="logo" />
+              <h2>小程序微服务配置中心</h2>
+            </Col>
+            <Col span={4} style={{ textAlign: "right" }}>
+              <User profile={props.user || tkUser} onLogout={handleUserLogout} />
+            </Col>
+          </Row>
+        </Header>
+        <Content className={styles.content}>
+          { props.children }
+        </Content>
+        <Footer className={styles.footer}>©2019 Created by HuiFang</Footer>
+      </Layout>
+  )
+};
+
+export default withRouter(connect(s => ({ user: s.app.user }))(BasicLayout));

src/layouts/index.less

@@ -0,0 +1,18 @@
+.layout {
+  min-height: 100%;
+
+  .header {
+    h2 {
+      color: #fff;
+    }
+  }
+
+  .content {
+    padding: 50px;
+    // overflow: 'initial';
+  }
+
+  .footer {
+    text-align: center;
+  }
+}

src/models/app.js

@@ -0,0 +1,63 @@
+import md5 from 'md5';
+import request from '../utils/request';
+import { setToken, clearToken } from '../utils/token';
+
+export default {
+  namespace: 'app',
+  state: {
+    user: '',
+  },
+  reducers: {
+    syncState (state, { payload = {} }) {
+      return {
+        ...state,
+        ...payload,
+      }
+    }
+  },
+  effects: {
+    *login({ payload }, { call, put }) {
+      try {
+        const api = {
+          url: '/api/admin/login',
+          method: 'POST',
+          data: {
+            ...payload,
+            password: md5(payload.password),
+          }
+        }
+
+        const user = yield call(request, api);
+        yield put({
+          type: 'syncState',
+          payload: { user },
+        })
+
+        setToken(JSON.stringify(user))
+
+        return Promise.resolve(user)
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
+
+    *logout(_, { call, put }) {
+
+      try {
+        const api = {
+          url: '/api/admin/logout',
+          method: 'POST'
+        }
+        yield call(request, api);
+        yield put({
+          type: 'syncState',
+          payload: { user: '' },
+        })
+      } catch (err) {
+        console.log(err)
+      }
+
+      clearToken()
+    }
+  }
+}

src/pages/__tests__/index.test.js

@@ -0,0 +1,14 @@
+import Index from '..';
+import renderer from 'react-test-renderer';
+
+
+describe('Page: index', () => {
+  it('Render correctly', () => {
+    const wrapper = renderer.create(<Index />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0];
+    expect(outerLayer.type).toBe('div');
+    expect(outerLayer.children.length).toBe(2);
+    
+  });
+});

src/pages/components/IconText.js

@@ -0,0 +1,9 @@
+
+import { Icon } from 'antd';
+
+export default ({ type, text }) => (
+  <span>
+      <Icon type={type} style={{ marginRight: 8 }} />
+      {text}
+    </span>
+)

src/pages/components/MiniAppEdit.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Form, Input, Select, Modal, notification } from 'antd';
+
+import request from '../../utils/request';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 4 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 18 },
+  },
+};
+
+const MiniAppForm = (props) => {
+  const { data = {}, visible } = props || {};
+  const { getFieldDecorator } = props.form;
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  
+  const handleSubmit = (e) => {
+    // e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (err) return;
+
+      setConfirmLoading(true);
+
+      const appidForURL = data.appid ? `/${data.appid}` : '';
+
+      request({
+        url: `/api/admin/miniapp${appidForURL}`,
+        method: data.appid ? 'PUT' : 'POST',
+        data: values,
+      }).then((data) => {
+        setConfirmLoading(false);
+        props.onSuccess(data || values)
+      }).catch((err) => {
+        setConfirmLoading(false);
+        notification.error({
+          message: '编辑信息错误',
+          description: err.message,
+        })
+      })
+    });
+  }
+
+  const handleCancel = () => {
+    setConfirmLoading(false);
+    props.onCancel()
+  }
+  
+  return (
+    <Modal
+      title="小程序信息维护"
+      visible={visible}
+      confirmLoading={confirmLoading}
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+    >
+      <Form {...formItemLayout} onSubmit={e => e.preventDefault()}>
+        <Form.Item label="AppID">
+          {getFieldDecorator('appid', {
+            initialValue: data.appid,
+            rules: [
+              {
+                required: true,
+                message: '请输入 小程序 AppID',
+              },
+            ],
+          })(<Input disabled={data.appid} />)}
+        </Form.Item>
+        <Form.Item label="名称">
+          {getFieldDecorator('appname', {
+            initialValue: data.appname,
+            rules: [
+              {
+                required: true,
+                message: '请输入 小程序 名称',
+              },
+            ],
+          })(<Input />)}
+        </Form.Item>
+        <Form.Item label="Secret">
+          {getFieldDecorator('secret', {
+            initialValue: data.secret,
+            rules: [
+              {
+                required: true,
+                message: '请输入 小程序 Secret',
+              },
+            ],
+          })(<Input />)}
+        </Form.Item>
+        <Form.Item label="Token">
+          {getFieldDecorator('token', {
+            initialValue: data.token,
+          })(<Input />)}
+        </Form.Item>
+        <Form.Item label="AesKey">
+          {getFieldDecorator('aesKey', {
+            initialValue: data.aesKey,
+          })(<Input />)}
+        </Form.Item>
+        <Form.Item label="消息格式">
+          {getFieldDecorator('msgDataFormat', {
+            initialValue: data.msgDataFormat || 'json',
+          })(
+            <Select placeholder="请选择消息格式">
+              <Select.Option value="json">JSON</Select.Option>
+              <Select.Option value="xml">XML</Select.Option>
+            </Select>
+          )}
+        </Form.Item>
+        <Form.Item label="回调地址">
+          {getFieldDecorator('callbackUrl', {
+            initialValue: data.callbackUrl,
+            rules: [
+              {
+                required: true,
+                message: '请输入 回调地址',
+              },
+            ],
+          })(<Input />)}
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default Form.create()(MiniAppForm);

src/pages/components/MiniAppList.js

@@ -0,0 +1,69 @@
+import { Card, List, Row, Col } from 'antd';
+
+const cardStyle = {
+  width: '45%',
+  minWidth: 400,
+  display: 'inline-block',
+  margin: '0 24px 24px 0',
+}
+
+const MiniAppList = (props) => {
+  const handleEdit = (item) => () => {
+    props.onEdit(item)
+  }
+
+  return (
+    <>
+      {
+        props.data.map((item) => (
+          <Card key={item.appid} style={cardStyle} hoverable>
+            <Row>
+              <Col span={20}><h2>{item.appname}</h2></Col>
+              <Col span={4} style={{ textAlign: 'right' }}><a onClick={handleEdit(item)}>修改</a></Col>
+            </Row>
+            <List size="large">
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>AppID </Col>
+                  <Col span={18}>{item.appid}</Col>
+                </Row>
+              </List.Item>
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>Secret </Col>
+                  <Col span={18}>{item.secret}</Col>
+                </Row>
+              </List.Item>
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>Token </Col>
+                  <Col span={18}>{item.token}</Col>
+                </Row>
+              </List.Item>
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>AesKey </Col>
+                  <Col span={18}>{item.aesKey}</Col>
+                </Row>
+              </List.Item>
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>消息格式 </Col>
+                  <Col span={18}>{item.msgDataFormat}</Col>
+                </Row>
+              </List.Item>
+              <List.Item>
+                <Row style={{ width: '100%' }}>
+                  <Col span={4}>回调地址 </Col>
+                  <Col span={18}>{item.callbackUrl}</Col>
+                </Row>
+              </List.Item>
+            </List>
+          </Card>
+        ))
+      }
+    </>
+  );
+}
+
+export default MiniAppList;

src/pages/index.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import { Button, Icon, notification } from 'antd';
+
+import MiniAppList from './components/MiniAppList';
+import MiniAppEdit from './components/MiniAppEdit';
+import request from '../utils/request';
+
+class Index extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      list: [],
+      detail: {},
+      showMiniappForm: false,
+    }
+  }
+
+  getData = (params) => {    
+    request({
+      url: '/api/admin/miniapp',
+      params,
+    }).then((data) => {
+      const { records } = data
+      this.setState({ list: records })
+    }).catch((err) => {
+      notification.error({
+        message: '查询失败',
+        description: err.message,
+      })
+    })
+  }
+
+  handleCreate = () => {
+    this.setState({
+      detail: {},
+      showMiniappForm: true,
+    })
+  }
+
+  handleEdit = (item) => {
+    this.setState({
+      detail: item,
+      showMiniappForm: true,
+    })
+  }
+
+  handleMiniappFormSuccess = (item) => {
+    this.setState({
+      detail: {},
+      showMiniappForm: false,
+    })
+
+    if (item) {
+      const list = this.state.list.map((x) => (x.appid === item.appid ? item : x))
+      this.setState({list})
+    }
+  }
+
+  handleMiniappFormCancel = () => {
+    this.setState({
+      detail: {},
+      showMiniappForm: false,
+    })
+  }
+
+  componentDidMount() {
+    const page = this.props.location.query.page || 1;
+    this.getData({page})
+  }
+
+  render() {
+    return (
+      <div>
+        <div style={{ marginBottom: '24px' }}>
+          <Button size="large" onClick={this.handleCreate}><Icon type="plus" />新增</Button>
+        </div>
+
+        <MiniAppList
+          data={this.state.list}
+          onEdit={this.handleEdit}
+        />
+
+        <MiniAppEdit
+          data={this.state.detail}
+          visible={this.state.showMiniappForm}
+          onSuccess={this.handleMiniappFormSuccess}
+          onCancel={this.handleMiniappFormCancel}
+        />
+      </div>
+    );
+  }
+}
+
+export default Index;

src/pages/login/index.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Form, Icon, Button, Input, notification } from 'antd';
+import { connect } from 'dva';
+import router from 'umi/router';
+
+import styles from './style.less';
+import request from '../../utils/request';
+import { setToken } from '../../utils/token';
+
+const LogIn = (props) => {
+  const [ loginData, setData ] =  useState({ user: '', password: '' });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    props.dispatch({
+      type: 'app/login',
+      payload: loginData,
+    }).then(() => {
+      const from = props.location.query.from
+      if (from) {
+        router.push(decodeURIComponent(from))
+      } else {
+        router.push(decodeURIComponent('/'))
+      }
+    }).catch((err) => {
+      notification.error({
+        message: '登录错误',
+        description: err.message,
+      })
+    })
+  }
+
+  const syncData = (key) => (e) => {
+    setData({ ...loginData, [`${key}`]: e.target.value })
+  }
+
+  return (
+    <div className={styles.login}>
+      <div className={styles.logo}>
+        <h2>小程序微服务配置中心</h2>
+      </div>
+      <Form onSubmit={handleSubmit}>
+        <Form.Item>
+          <Input
+            size="large"
+            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+            placeholder="用户名"
+            onChange={syncData('user')}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Input
+            size="large"
+            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+            type="password"
+            placeholder="密码"
+            onChange={syncData('password')}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button size="large" type="primary" htmlType="submit">登 录</Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}
+
+export default connect()(LogIn);

src/pages/login/style.less

@@ -0,0 +1,22 @@
+.login {
+  background: #f0f2f5;
+  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
+  width: 100%;
+  height: 100%;
+
+  .logo {
+    width: 100%;
+    height: 200px;
+    text-align: center;
+    padding-top: 100px;
+  }
+
+  form {
+    width: 400px;
+    margin: 0 auto;
+
+    button {
+      width: 100%;
+    }
+  }
+}

src/utils/request.js

@@ -0,0 +1,85 @@
+import fetch from 'dva/fetch';
+
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  error.response = response;
+  throw error;
+}
+
+function checkResult ({ code, message, data }) {
+  if (code === 0) {
+    return data;
+  }
+
+  throw new Error(message);
+}
+
+function transformOpt(options) {
+  const { url, data, body, params, headers = {}, ...others } = options || {};
+
+  let config = {
+    url,
+    credentials: 'include',
+    ...others
+  }
+
+  if (body) {
+    // body 发送 multipart 数据
+    config.body = Object.keys(data).reduce((form, k) => {
+      if (Array.isArray(data[k])) {
+        data[k].forEach((v) => form.append(k, v))
+      } else {
+        form.append(k, data[k])
+      }
+
+      return form
+    }, new FormData)
+
+    config.headers = {
+      ...headers,
+      'content-type': 'multipart/form-data',
+    }
+  } else if (data) {
+    // body 发送 json 数据
+    config.body = JSON.stringify(data)
+
+    config.headers = {
+      ...headers,
+      'content-type': 'application/json',
+    }
+  }
+
+  if (params) {
+    // 仅支持 param 是对象
+    // 且不支持数组元素
+    const searchStr = Object.keys(params).map((k) => `${k}=${params[k]}`).join('&')
+
+    config.url = url.indexOf('?') > 0 ? `${url}&${searchStr}` : `${url}?${searchStr}`
+  }
+
+  return config;
+}
+
+/**
+ * Requests a URL, returning a promise.
+ *
+ * @param  {object} [options] The options we want to pass to "fetch"
+ * @return {object}           An object containing either "data" or "err"
+ */
+async function request(options) {
+  const { url, ...config } = transformOpt(options);
+
+  const response = await fetch(url, config); // eslint-disable-line
+
+  checkStatus(response);
+
+  const data = await response.json();
+
+  return checkResult(data);
+}
+
+export default request;

src/utils/token.js

@@ -0,0 +1,12 @@
+
+export function getToken() {
+  return localStorage.getItem('miniapp-token')
+}
+
+export function setToken(tk) {
+  localStorage.setItem('miniapp-token', tk)
+}
+
+export function clearToken() {
+  localStorage.removeItem('miniapp-token')
+}

webpack.config.js

@@ -0,0 +1,12 @@
+/**
+ * 不是真实的 webpack 配置，仅为兼容 webstorm 和 intellij idea 代码跳转
+ * ref: https://github.com/umijs/umi/issues/1109#issuecomment-423380125
+ */
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': require('path').resolve(__dirname, 'src'),
+    },
+  },
+};