fix: add config yaml

Signed-off-by: liuying <[email protected]>

.gitignore

@@ -16,3 +16,4 @@ cypress/config/local_config.yaml
 coverage
 unitCoverage
 .history
+config/local_config.yaml

config/config.yaml

@@ -0,0 +1 @@
+devIp: "127.0.0.1:8080"

config/util.js

@@ -0,0 +1,92 @@
+const fs = require('fs');
+const path = require('path');
+
+const yaml = require('js-yaml');
+const { merge } = require('lodash');
+
+const root = (dir) =>
+  `${path.resolve(__dirname, './')}/${dir}`.replace(/(\/+)/g, '/');
+
+const frontendRoot = (dir) =>
+  `${path.resolve(__dirname, '../')}/${dir}`.replace(/(\/+)/g, '/');
+
+const styleRoot = (dir) =>
+  `${path.resolve(__dirname, '../packages')}/${dir}`.replace(/(\/+)/g, '/');
+
+const loadYaml = (filePath) => {
+  try {
+    return yaml.load(fs.readFileSync(filePath), 'utf8');
+  } catch (e) {
+    return false;
+  }
+};
+
+const getConfig = (key) => {
+  // parse config yaml
+  const config = loadYaml(root('./config.yaml')) || {};
+
+  const tryFile = root('./local_config.yaml');
+  if (fs.existsSync(tryFile)) {
+    // merge local_config
+    const local_config = loadYaml(tryFile);
+    if (typeof local_config === 'object') {
+      merge(config, local_config);
+    }
+  }
+
+  return key ? config[key] : config;
+};
+
+const getThemeConfig = (type = 'common') => {
+  const key = type === 'common' ? 'theme' : 'baseTheme';
+
+  const file = getConfig(key);
+
+  const themeFile = frontendRoot(file);
+
+  // eslint-disable-next-line no-console
+  console.log('themeFile', themeFile);
+
+  if (fs.existsSync(themeFile)) {
+    const config = require(themeFile);
+
+    return config;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('the theme file not exist');
+  return {};
+};
+
+const getCustomStyleVariables = () => {
+  const lessFile = getConfig('lessVariablesName');
+  const defaultLessFile = 'common/styles/variables';
+  if (lessFile === defaultLessFile) {
+    return false;
+  }
+  const customFile = styleRoot(`${lessFile}.less`);
+  // eslint-disable-next-line no-console
+  console.log('customFile', customFile);
+  const result = fs.existsSync(customFile) && lessFile;
+  // eslint-disable-next-line no-console
+  console.log('getCustomStyleVariables', result);
+  return result;
+};
+
+const getGlobalVariables = () => {
+  const variables = getConfig('globalVariables') || {};
+  const result = Object.keys(variables).reduce((pre, cur) => {
+    pre[cur] = JSON.stringify(variables[cur]);
+    return pre;
+  }, {});
+  console.log('globalVariables', result);
+  return result;
+};
+
+module.exports = {
+  getConfig,
+  root,
+  getThemeConfig,
+  getCustomStyleVariables,
+  getGlobalVariables,
+};

config/webpack.dev.js

@@ -23,9 +23,12 @@ const theme = require('./theme');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { devIp } = require('./common');
 const root = (path) => resolve(__dirname, `../${path}`);
 
+const util = require('./util');
+const { getConfig } = util;
+const { devIp } = getConfig();
+
 module.exports = (env = {}) => {
   const devServer = {
     host: 'localhost',
@@ -187,6 +190,7 @@ module.exports = (env = {}) => {
         'process.env': {
           NODE_ENV: JSON.stringify(process.env.NODE_ENV),
           env: JSON.stringify(env),
+          devIp: JSON.stringify(devIp),
         },
       }),
     ],

docs/1-ready-to-work.md

@@ -30,12 +30,10 @@
 - 准备好可用的后端
 
   - 准备好可访问的后端，举个例子：<https://172.20.150.52:8080>
-  - 修改`config/common.js`中的相应配置：
+  - 修改`config/config.yaml`中的相应配置：
 
     ```javascript
-    module.exports = {
-      devIp: '172.20.150.52:8080',
-    };
+    devIp: 'xxxx:8080',
     ```
 
 - 配置访问的 host 与 port

src/components/Terminal/index.jsx

@@ -16,7 +16,6 @@
 import React, { Suspense } from 'react';
 import { getWebSocketProtocol } from 'utils';
 import ContainerTerminal from './terminal';
-import { devIp } from '../../../config/common';
 
 const BG_COLOR = '#181d28';
 
@@ -27,7 +26,7 @@ export default function SessionTerminal(props) {
     const { protocol, host } = window.location;
 
     const wsIp = `${getWebSocketProtocol(protocol)}://${
-      process.env.NODE_ENV === 'development' ? devIp : host
+      process.env.NODE_ENV === 'development' ? process.env.devIp : host
     }`;
 
     return `${wsIp}${url}`;

src/stores/websocket.js

@@ -16,7 +16,6 @@
 import { action, observable, makeObservable } from 'mobx';
 import { getWebSocketProtocol } from 'utils';
 import SocketClient from 'utils/socket.client';
-import { devIp } from '../../config/common';
 
 export default class WebSocketStore {
   message = {};
@@ -30,7 +29,7 @@ export default class WebSocketStore {
 
   get host() {
     return process.env.NODE_ENV === 'development'
-      ? devIp
+      ? process.env.devIp
       : window.location.host;
   }