feat: website 调试完成

Logan/LoganSite/.env.development

@@ -0,0 +1 @@
+API_BASE_URL=/api/

Logan/LoganSite/.gitignore

@@ -17,7 +17,6 @@
 .env.development.local
 .env.test.local
 .env.production.local
-.env.development
 
 npm-debug.log*
 yarn-debug.log*

Logan/LoganSite/config/webpack.config.js

@@ -1,65 +1,62 @@
-'use strict';
+'use strict'
 
-const fs = require('fs');
-const isWsl = require('is-wsl');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const eslint = require('eslint');
+const fs = require('fs')
+const isWsl = require('is-wsl')
+const path = require('path')
+const webpack = require('webpack')
+const resolve = require('resolve')
+const PnpWebpackPlugin = require('pnp-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
+const paths = require('./paths')
+const modules = require('./modules')
+const getClientEnvironment = require('./env')
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin')
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter')
+const eslint = require('eslint')
 
-const postcssNormalize = require('postcss-normalize');
+const postcssNormalize = require('postcss-normalize')
 
-const appPackageJson = require(paths.appPackageJson);
+const appPackageJson = require(paths.appPackageJson)
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'
 
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
-);
+const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000')
 
 // Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
+const useTypeScript = fs.existsSync(paths.appTsConfig)
 
 // style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
+const cssRegex = /\.css$/
+const cssModuleRegex = /\.module\.css$/
+const sassRegex = /\.(scss|sass)$/
+const sassModuleRegex = /\.module\.(scss|sass)$/
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
+module.exports = function (webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development'
+  const isEnvProduction = webpackEnv === 'production'
 
   // Variable used for enabling profiling in Production
   // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes('--profile');
+  const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile')
 
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -67,19 +64,17 @@ module.exports = function(webpackEnv) {
   // const publicPath = isEnvProduction
   //   ? paths.servedPath
   //   : isEnvDevelopment && '/';
-  const publicPath = './';
+  const publicPath = './'
   // Some apps do not use client-side routing with pushState.
   // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
+  const shouldUseRelativeAssetPaths = publicPath === './'
 
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
+  const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && ''
   // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
+  const env = getClientEnvironment(publicUrl)
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -118,7 +113,7 @@ module.exports = function(webpackEnv) {
           sourceMap: isEnvProduction && shouldUseSourceMap,
         },
       },
-    ].filter(Boolean);
+    ].filter(Boolean)
     if (preProcessor) {
       loaders.push(
         {
@@ -133,13 +128,24 @@ module.exports = function(webpackEnv) {
             sourceMap: true,
           },
         }
-      );
+      )
     }
-    return loaders;
-  };
+    return loaders
+  }
 
   return {
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    devServer: {
+      logLevel: 'debug',
+      proxy: {
+        '/api': {
+          target: 'http://pengyi.w1.luyouxia.net/api/service-logan',
+          pathRewrite: { '^/api': '' },
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
     // Stop compilation early in production
     bail: isEnvProduction,
     devtool: isEnvProduction
@@ -160,8 +166,7 @@ module.exports = function(webpackEnv) {
       // the line below with these two lines if you prefer the stock client:
       // require.resolve('webpack-dev-server/client') + '?/',
       // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
+      isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
       // Finally, this is your app's code:
       paths.appIndexJs,
       // We include the app code last so that if there is a runtime error during
@@ -189,12 +194,9 @@ module.exports = function(webpackEnv) {
       publicPath: publicPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
+        ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
         : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+          ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
       // Prevents conflicts when multiple Webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
@@ -281,7 +283,7 @@ module.exports = function(webpackEnv) {
       // https://twitter.com/wSokra/status/969679223278505985
       // https://github.com/facebook/create-react-app/issues/5358
       runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
+        name: (entrypoint) => `runtime-${entrypoint.name}`,
       },
     },
     resolve: {
@@ -289,9 +291,7 @@ module.exports = function(webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
-      ),
+      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
@@ -299,8 +299,8 @@ module.exports = function(webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes('ts')),
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -349,7 +349,6 @@ module.exports = function(webpackEnv) {
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
-                
               },
               loader: require.resolve('eslint-loader'),
             },
@@ -379,18 +378,15 @@ module.exports = function(webpackEnv) {
               include: paths.appSrc,
               loader: require.resolve('babel-loader'),
               options: {
-                customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
-                ),
-                
+                customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+
                 plugins: [
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                          ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                         },
                       },
                     },
@@ -416,15 +412,12 @@ module.exports = function(webpackEnv) {
                 configFile: false,
                 compact: false,
                 presets: [
-                  [
-                    require.resolve('babel-preset-react-app/dependencies'),
-                    { helpers: true },
-                  ],
+                  [require.resolve('babel-preset-react-app/dependencies'), { helpers: true }],
                 ],
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-                
+
                 // If an error happens in a package, it's possible to be
                 // because it was compiled. Thus, we don't want the browser
                 // debugger to show the original code. Instead, the code
@@ -568,9 +561,9 @@ module.exports = function(webpackEnv) {
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin({
         ...env.stringified,
-        "process.defineEnv": {
-          API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
-        }
+        'process.defineEnv': {
+          API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
+        },
       }),
       // This is necessary to emit hot updates (currently CSS only):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
@@ -582,8 +575,7 @@ module.exports = function(webpackEnv) {
       // to restart the development server for Webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
@@ -602,17 +594,15 @@ module.exports = function(webpackEnv) {
         publicPath: publicPath,
         generate: (seed, files, entrypoints) => {
           const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
-          );
+            manifest[file.name] = file.path
+            return manifest
+          }, seed)
+          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'))
 
           return {
             files: manifestFiles,
             entrypoints: entrypointFiles,
-          };
+          }
         },
       }),
       // Moment.js is an extremely popular library that bundles large locale files
@@ -648,9 +638,7 @@ module.exports = function(webpackEnv) {
           async: isEnvDevelopment,
           useTypescriptIncrementalApi: true,
           checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
+          resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
           resolveTypeReferenceDirectiveModule: process.versions.pnp
             ? `${__dirname}/pnpTs.js`
             : undefined,
@@ -682,5 +670,5 @@ module.exports = function(webpackEnv) {
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
-  };
-};
+  }
+}

Logan/LoganSite/config/webpackDevServer.config.js

@@ -1,16 +1,17 @@
-'use strict';
+'use strict'
 
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const paths = require('./paths');
-const fs = require('fs');
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware')
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
+const ignoredFiles = require('react-dev-utils/ignoredFiles')
+const paths = require('./paths')
+const fs = require('fs')
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+const host = process.env.HOST || '0.0.0.0'
 
-module.exports = function(proxy, allowedHost) {
+module.exports = function (proxy, allowedHost) {
+  console.log('proxy: ', proxy)
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -28,8 +29,7 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
     // Enable gzip compression of generated files.
     compress: true,
     // Silence WebpackDevServer's own logs since they're generally not useful.
@@ -81,24 +81,31 @@ module.exports = function(proxy, allowedHost) {
       disableDotRule: true,
     },
     public: allowedHost,
-    proxy,
+    proxy: {
+      '/api': {
+        target: 'http://pengyi.w1.luyouxia.net/api/service-logan',
+        pathRewrite: { '^/api': '' },
+        changeOrigin: true,
+        secure: false,
+      },
+    },
     before(app, server) {
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(app)
       }
 
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      app.use(evalSourceMapMiddleware(server))
       // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
+      app.use(errorOverlayMiddleware())
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      app.use(noopServiceWorkerMiddleware())
     },
-  };
-};
+  }
+}

Logan/LoganSite/scripts/start.js

@@ -1,47 +1,47 @@
-'use strict';
+'use strict'
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
+process.on('unhandledRejection', (err) => {
+  throw err
+})
 
 // Ensure environment variables are read.
-require('../config/env');
+require('../config/env')
 
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const fs = require('fs')
+const chalk = require('react-dev-utils/chalk')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const clearConsole = require('react-dev-utils/clearConsole')
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
 const {
   choosePort,
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
+} = require('react-dev-utils/WebpackDevServerUtils')
+const openBrowser = require('react-dev-utils/openBrowser')
+const paths = require('../config/paths')
+const configFactory = require('../config/webpack.config')
+const createDevServerConfig = require('../config/webpackDevServer.config')
 
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
+const useYarn = fs.existsSync(paths.yarnLockFile)
+const isInteractive = process.stdout.isTTY
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
+  process.exit(1)
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
+const HOST = process.env.HOST || '0.0.0.0'
 
 if (process.env.HOST) {
   console.log(
@@ -50,42 +50,36 @@ if (process.env.HOST) {
         chalk.bold(process.env.HOST)
       )}`
     )
-  );
-  console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
-  console.log(
-    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
-  );
-  console.log();
+  )
+  console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`)
+  console.log(`Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`)
+  console.log()
 }
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper')
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
     // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
+    return choosePort(HOST, DEFAULT_PORT)
   })
-  .then(port => {
+  .then((port) => {
     if (port == null) {
       // We have not found a port.
-      return;
+      return
     }
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-    const urls = prepareUrls(protocol, HOST, port);
+    const config = configFactory('development')
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+    const appName = require(paths.appPackageJson).name
+    const useTypeScript = fs.existsSync(paths.appTsConfig)
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'
+    const urls = prepareUrls(protocol, HOST, port)
     const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
+      warnings: (warnings) => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: (errors) => devServer.sockWrite(devServer.sockets, 'errors', errors),
+    }
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
@@ -96,23 +90,20 @@ checkBrowsers(paths.appPath, isInteractive)
       useTypeScript,
       tscCompileOnError,
       webpack,
-    });
+    })
     // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const proxySetting = require(paths.appPackageJson).proxy
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic)
     // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig)
+    const devServer = new WebpackDevServer(compiler, serverConfig)
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
+    devServer.listen(port, HOST, (err) => {
       if (err) {
-        return console.log(err);
+        return console.log(err)
       }
       if (isInteractive) {
-        clearConsole();
+        clearConsole()
       }
 
       // We used to support resolving modules according to `NODE_PATH`.
@@ -123,24 +114,23 @@ checkBrowsers(paths.appPath, isInteractive)
           chalk.yellow(
             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
           )
-        );
-        console.log();
+        )
+        console.log()
       }
 
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
-        devServer.close();
-        process.exit();
-      });
-    });
+      console.log(chalk.cyan('Starting the development server...\n'))
+      openBrowser(urls.localUrlForBrowser)
+    })
+    ;['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close()
+        process.exit()
+      })
+    })
   })
-  .catch(err => {
+  .catch((err) => {
     if (err && err.message) {
-      console.log(err.message);
+      console.log(err.message)
     }
-    process.exit(1);
-  });
+    process.exit(1)
+  })

Logan/LoganSite/src/common/api.js

@@ -1,185 +1,179 @@
-import axios from "axios";
-import { message } from 'antd';
+import axios from 'axios'
+import { message } from 'antd'
 
-const BASE_URL = process.defineEnv.API_BASE_URL;
-const API_TIME_OUT = 30000;
-let pendingRequests = [];
+const BASE_URL = process.defineEnv.API_BASE_URL
+console.log('BASE_URL: ', BASE_URL)
+const API_TIME_OUT = 30000
+let pendingRequests = []
 
 // axios instance
 const instance = axios.create({
   baseURL: BASE_URL,
   timeout: API_TIME_OUT,
-  withCredentials: true
-});
-
+  withCredentials: true,
+})
 
 // Native Apis
 
 export function fetchNativeListInitData() {
-  return instance.get("/logan/latest.json");
+  return instance.get('/logan/latest.json')
 }
 
 export function fetchNativeTaskApi(deviceId, platform, beginTime, endTime) {
-  console.log( { deviceId, platform, beginTime, endTime })
-  return instance.get("/logan/task/search.json", {
+  console.log({ deviceId, platform, beginTime, endTime })
+  return instance.get('/logan/task/search.json', {
     params: {
       deviceId,
       platform,
       beginTime,
-      endTime
-    }
-  });
+      endTime,
+    },
+  })
 }
 
 export function fetchNativeTaskInfoByTaskIdApi(taskId) {
-  return instance.get(`/logan/task/${taskId}/info.json`);
+  return instance.get(`/logan/task/${taskId}/info.json`)
 }
 
 export function fetchNativeLogTypesApi() {
-  return instance.get("/logan/meta/logtypes.json");
+  return instance.get('/logan/meta/logtypes.json')
 }
 
 export function fetchNativeTaskBriefsByTaskIdApi(taskId, logTypes, keyword) {
   return instance.get(`/logan/task/${taskId}/brief.json`, {
     params: {
       logTypes,
-      keyword
-    }
-  });
+      keyword,
+    },
+  })
 }
 
 export function fetchNativeTaskDetailsByDetailIdsApi(detailIds) {
-  return instance.get("/logan/task/query/details.json", {
+  return instance.get('/logan/task/query/details.json', {
     params: {
-      detailIds: detailIds
-    }
-  });
+      detailIds: detailIds,
+    },
+  })
 }
 
 export function fetchNativeSingleLogDetailByLogIdApi(logId) {
-  return instance.get(`/logan/task/${logId}/detail.json`);
+  return instance.get(`/logan/task/${logId}/detail.json`)
 }
 
 export function fetchNativeDownloadUrlApi(taskId) {
-  return instance.get(`/logan/task/${taskId}/download.json`);
+  return instance.get(`/logan/task/${taskId}/download.json`)
 }
 
-
 // Web apis
 
-
 export function fetchWebDownloadUrlApi(tasks) {
-  return instance.get("/logan/web/getDownLoadUrl.json", {
+  return instance.get('/logan/web/getDownLoadUrl.json', {
     params: {
-      tasks: tasks
-    }
+      tasks: tasks,
+    },
   })
 }
 
 export function fetchWebListInitData() {
-  return instance.get("/logan/web/latest.json");
+  return instance.get('/logan/web/latest.json')
 }
 
 export function fetchWebTaskApi(deviceId, beginTime, endTime) {
-  return instance.get("/logan/web/search.json", {
+  return instance.get('/logan/web/search.json', {
     params: {
       deviceId,
       beginTime,
-      endTime
-    }
+      endTime,
+    },
   })
 }
 
 export function fetchWebBriefsApi(taskId, logTypes, keyword) {
-  return instance.get("/logan/web/detailIndex.json", {
+  return instance.get('/logan/web/detailIndex.json', {
     params: {
       tasks: taskId,
       logTypes: logTypes,
       keyword: keyword,
       beginTime: null,
-      endTime: null
-    }
+      endTime: null,
+    },
   })
 }
 
 export function fetchWebTaskDetailsByDetailIdsApi(detailIds) {
-  return instance.get("/logan/web/details.json", {
+  return instance.get('/logan/web/details.json', {
     params: {
-      detailIds
-    }
+      detailIds,
+    },
   })
 }
 
 export function fetchWebTaskInfoByTaskIdApi(taskId) {
-  return instance.get("/logan/web/taskDetail.json", {
+  return instance.get('/logan/web/taskDetail.json', {
     params: {
-      tasks: taskId
-    }
+      tasks: taskId,
+    },
   })
 }
 
 export function fetchWebSingleLogDetailByLogIdApi(detailId) {
-  return instance.get("/logan/web/logDetail.json", {
+  return instance.get('/logan/web/logDetail.json', {
     params: {
-      detailId
-    }
+      detailId,
+    },
   })
 }
 
-
 // private request configs
 
 const RemovePendingRequest = (config) => {
   pendingRequests.forEach((request, idx) => {
     if (request.id === config.url + '&' + config.method) {
-      request.cancel();
-      pendingRequests.splice(idx, 1);
+      request.cancel()
+      pendingRequests.splice(idx, 1)
     }
-  });
-};
+  })
+}
 
 const AddPendingRequest = (config) => {
-  return new axios.CancelToken(c => {
+  return new axios.CancelToken((c) => {
     pendingRequests.push({
       id: config.url + '&' + config.method,
-      cancel: c
-    });
-  });
-};
+      cancel: c,
+    })
+  })
+}
 
 instance.interceptors.request.use((config) => {
   if (config.headers.cancelOthers) {
-    delete config.headers.cancelOthers;
-    RemovePendingRequest(config);
-    config.cancelToken = AddPendingRequest(config);
+    delete config.headers.cancelOthers
+    RemovePendingRequest(config)
+    config.cancelToken = AddPendingRequest(config)
   }
   if (config.headers.removeXRequestedWith) {
-    delete config.headers.removeXRequestedWith;
-    delete config.headers['X-Requested-With'];
+    delete config.headers.removeXRequestedWith
+    delete config.headers['X-Requested-With']
   }
-  return config;
-});
+  return config
+})
 
 function onRequestFulfilled(response) {
-  RemovePendingRequest(response.config);
-  let {code, msg, data} = response.data;
+  RemovePendingRequest(response.config)
+  let { code, msg, data } = response.data
   if (Number(code) !== 200) {
-    message.warning(`请求出错：${msg}`);
-    return Promise.reject(response.data);
+    message.warning(`请求出错：${msg}`)
+    return Promise.reject(response.data)
   }
-  return data;
+  return data
 }
 
 function onRequestRejected(error) {
   if (!error.request) {
-    return null;
+    return null
   }
-  let status = error.response && error.response.status;
-  message.error(`请求出错${status || error.message}`);
-  return Promise.reject(error);
+  let status = error.response && error.response.status
+  message.error(`请求出错${status || error.message}`)
+  return Promise.reject(error)
 }
 
-instance.interceptors.response.use(onRequestFulfilled, onRequestRejected);
-
-
-
+instance.interceptors.response.use(onRequestFulfilled, onRequestRejected)

Logan/LoganSite/src/consts/logtypes.js

@@ -1,42 +1,55 @@
-
-
 export const nativeLogTypeConfigs = [
   {
     logType: 1,
-    logTypeName: "exception catch 日志",
-    displayColor: "#32CD32"
+    logTypeName: 'exception catch 日志',
+    displayColor: '#32CD32',
   },
   {
     logType: 2,
-    logTypeName: "custom 代码日志",
-    displayColor: "#2f54eb"
+    logTypeName: 'custom 代码日志',
+    displayColor: '#2f54eb',
   },
   {
     logType: 3,
-    logTypeName: "network日志",
-    displayColor: "#5c3317"
+    logTypeName: 'network日志',
+    displayColor: '#5c3317',
   },
   {
     logType: 84,
-    logTypeName: "性能日志",
-    displayColor: "#5c3317"
-  }
-];
+    logTypeName: '性能日志',
+    displayColor: '#5c3317',
+  },
+]
 
 export const webLogTypeConfigs = [
+  {
+    logType: 0,
+    logTypeName: '用户行为日志',
+    displayColor: '#32CD32',
+  },
   {
     logType: 1,
-    logTypeName: "日志类型1",
-    displayColor: "#32CD32"
+    logTypeName: '业务流程日志',
+    displayColor: '#2db7f5',
   },
   {
     logType: 2,
-    logTypeName: "日志类型2",
-    displayColor: "#2f54eb"
+    logTypeName: '异常日志',
+    displayColor: '#2f54eb',
   },
   {
     logType: 3,
-    logTypeName: "日志类型3",
-    displayColor: "#5c3317"
-  }
-];
+    logTypeName: '应用性能日志',
+    displayColor: '#5c3317',
+  },
+  {
+    logType: 4,
+    logTypeName: '网络请求日志',
+    displayColor: '#87d068',
+  },
+  {
+    logType: 5,
+    logTypeName: '页面访问日志',
+    displayColor: '#108ee9',
+  },
+]