mirror of
https://github.com/eyebluecn/tank-front
synced 2026-10-19 16:16:18 +00:00
add webpack theme change and dynamic antd style import
This commit is contained in:
Simba
+139
-112
@@ -1,44 +1,44 @@
|
||||
'use strict';
|
||||
"use strict";
|
||||
|
||||
const fs = require('fs');
|
||||
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 fs = require("fs");
|
||||
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 postcssNormalize = require('postcss-normalize');
|
||||
const postcssNormalize = require("postcss-normalize");
|
||||
|
||||
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 isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
|
||||
const isExtendingEslintConfig = process.env.EXTEND_ESLINT === "true";
|
||||
|
||||
const imageInlineSizeLimit = parseInt(
|
||||
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
|
||||
process.env.IMAGE_INLINE_SIZE_LIMIT || "10000"
|
||||
);
|
||||
|
||||
// Check if TypeScript is setup
|
||||
@@ -55,14 +55,14 @@ const lessModuleRegex = /\.module\.less$/;
|
||||
|
||||
// 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');
|
||||
isEnvProduction && process.argv.includes("--profile");
|
||||
|
||||
// We will provide `paths.publicUrlOrPath` to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
@@ -73,33 +73,33 @@ module.exports = function(webpackEnv) {
|
||||
// common function to get style loaders
|
||||
const getStyleLoaders = (cssOptions, preProcessor) => {
|
||||
const loaders = [
|
||||
isEnvDevelopment && require.resolve('style-loader'),
|
||||
isEnvDevelopment && require.resolve("style-loader"),
|
||||
isEnvProduction && {
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
// css is located in `static/css`, use '../../' to locate index.html folder
|
||||
// in production `paths.publicUrlOrPath` can be a relative path
|
||||
options: paths.publicUrlOrPath.startsWith('.')
|
||||
? { publicPath: '../../' }
|
||||
options: paths.publicUrlOrPath.startsWith(".")
|
||||
? { publicPath: "../../" }
|
||||
: {},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
loader: require.resolve("css-loader"),
|
||||
options: cssOptions,
|
||||
},
|
||||
{
|
||||
// Options for PostCSS as we reference these options twice
|
||||
// Adds vendor prefixing based on your specified browser support in
|
||||
// package.json
|
||||
loader: require.resolve('postcss-loader'),
|
||||
loader: require.resolve("postcss-loader"),
|
||||
options: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebook/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
ident: "postcss",
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
require('postcss-preset-env')({
|
||||
require("postcss-flexbugs-fixes"),
|
||||
require("postcss-preset-env")({
|
||||
autoprefixer: {
|
||||
flexbox: 'no-2009',
|
||||
flexbox: "no-2009",
|
||||
},
|
||||
stage: 3,
|
||||
}),
|
||||
@@ -115,31 +115,26 @@ module.exports = function(webpackEnv) {
|
||||
if (preProcessor) {
|
||||
loaders.push(
|
||||
{
|
||||
loader: require.resolve('resolve-url-loader'),
|
||||
loader: require.resolve("resolve-url-loader"),
|
||||
options: {
|
||||
sourceMap: isEnvProduction && shouldUseSourceMap,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve(preProcessor),
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
}
|
||||
preProcessor
|
||||
);
|
||||
}
|
||||
return loaders;
|
||||
};
|
||||
|
||||
return {
|
||||
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
|
||||
mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
|
||||
// Stop compilation early in production
|
||||
bail: isEnvProduction,
|
||||
devtool: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
? 'source-map'
|
||||
? "source-map"
|
||||
: false
|
||||
: isEnvDevelopment && 'cheap-module-source-map',
|
||||
: isEnvDevelopment && "cheap-module-source-map",
|
||||
// These are the "entry points" to our application.
|
||||
// This means they will be the "root" imports that are included in JS bundle.
|
||||
entry: [
|
||||
@@ -154,7 +149,7 @@ module.exports = function(webpackEnv) {
|
||||
// require.resolve('webpack-dev-server/client') + '?/',
|
||||
// require.resolve('webpack/hot/dev-server'),
|
||||
isEnvDevelopment &&
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
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
|
||||
@@ -169,32 +164,33 @@ module.exports = function(webpackEnv) {
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// In development, it does not produce real files.
|
||||
filename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].js'
|
||||
: isEnvDevelopment && 'static/js/bundle.js',
|
||||
? "static/js/[name].[contenthash:8].js"
|
||||
: isEnvDevelopment && "static/js/bundle.js",
|
||||
// TODO: remove this when upgrading to webpack 5
|
||||
futureEmitAssets: true,
|
||||
// There are also additional JS chunk files if you use code splitting.
|
||||
chunkFilename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].chunk.js'
|
||||
: isEnvDevelopment && 'static/js/[name].chunk.js',
|
||||
? "static/js/[name].[contenthash:8].chunk.js"
|
||||
: isEnvDevelopment && "static/js/[name].chunk.js",
|
||||
// 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.
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||
devtoolModuleFilenameTemplate: isEnvProduction
|
||||
? info =>
|
||||
? (info) =>
|
||||
path
|
||||
.relative(paths.appSrc, info.absoluteResourcePath)
|
||||
.replace(/\\/g, '/')
|
||||
.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}`,
|
||||
// this defaults to 'window', but by setting it to 'this' then
|
||||
// module chunks which are built will work in web workers as well.
|
||||
globalObject: 'this',
|
||||
globalObject: "this",
|
||||
},
|
||||
optimization: {
|
||||
minimize: isEnvProduction,
|
||||
@@ -260,7 +256,7 @@ module.exports = function(webpackEnv) {
|
||||
: false,
|
||||
},
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
|
||||
preset: ["default", { minifyFontValues: { removeQuotes: false } }],
|
||||
},
|
||||
}),
|
||||
],
|
||||
@@ -268,14 +264,14 @@ module.exports = function(webpackEnv) {
|
||||
// https://twitter.com/wSokra/status/969633336732905474
|
||||
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
chunks: "all",
|
||||
name: false,
|
||||
},
|
||||
// Keep the runtime chunk separated to enable long term caching
|
||||
// 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: {
|
||||
@@ -283,7 +279,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: ["node_modules", paths.appNodeModules].concat(
|
||||
modules.additionalModulePaths || []
|
||||
),
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
@@ -293,16 +289,16 @@ 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/
|
||||
'react-native': 'react-native-web',
|
||||
"react-native": "react-native-web",
|
||||
// Allows for better profiling with ReactDevTools
|
||||
...(isEnvProductionProfile && {
|
||||
'react-dom$': 'react-dom/profiling',
|
||||
'scheduler/tracing': 'scheduler/tracing-profiling',
|
||||
"react-dom$": "react-dom/profiling",
|
||||
"scheduler/tracing": "scheduler/tracing-profiling",
|
||||
}),
|
||||
...(modules.webpackAliases || {}),
|
||||
},
|
||||
@@ -335,17 +331,16 @@ module.exports = function(webpackEnv) {
|
||||
// It's important to do this before Babel processes the JS.
|
||||
{
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
enforce: 'pre',
|
||||
enforce: "pre",
|
||||
use: [
|
||||
{
|
||||
options: {
|
||||
cache: true,
|
||||
formatter: require.resolve('react-dev-utils/eslintFormatter'),
|
||||
eslintPath: require.resolve('eslint'),
|
||||
formatter: require.resolve("react-dev-utils/eslintFormatter"),
|
||||
eslintPath: require.resolve("eslint"),
|
||||
resolvePluginsRelativeTo: __dirname,
|
||||
|
||||
},
|
||||
loader: require.resolve('eslint-loader'),
|
||||
loader: require.resolve("eslint-loader"),
|
||||
},
|
||||
],
|
||||
include: paths.appSrc,
|
||||
@@ -360,10 +355,10 @@ module.exports = function(webpackEnv) {
|
||||
// A missing `test` is equivalent to a match.
|
||||
{
|
||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
||||
loader: require.resolve('url-loader'),
|
||||
loader: require.resolve("url-loader"),
|
||||
options: {
|
||||
limit: imageInlineSizeLimit,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
name: "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
},
|
||||
// Process application JS with Babel.
|
||||
@@ -371,20 +366,20 @@ module.exports = function(webpackEnv) {
|
||||
{
|
||||
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
||||
include: paths.appSrc,
|
||||
loader: require.resolve('babel-loader'),
|
||||
loader: require.resolve("babel-loader"),
|
||||
options: {
|
||||
customize: require.resolve(
|
||||
'babel-preset-react-app/webpack-overrides'
|
||||
"babel-preset-react-app/webpack-overrides"
|
||||
),
|
||||
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-named-asset-import'),
|
||||
require.resolve("babel-plugin-named-asset-import"),
|
||||
{
|
||||
loaderMap: {
|
||||
svg: {
|
||||
ReactComponent:
|
||||
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
|
||||
"@svgr/webpack?-svgo,+titleProp,+ref![path]",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -404,14 +399,14 @@ module.exports = function(webpackEnv) {
|
||||
{
|
||||
test: /\.(js|mjs)$/,
|
||||
exclude: /@babel(?:\/|\\{1,2})runtime/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
loader: require.resolve("babel-loader"),
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
compact: false,
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-react-app/dependencies'),
|
||||
require.resolve("babel-preset-react-app/dependencies"),
|
||||
{ helpers: true },
|
||||
],
|
||||
],
|
||||
@@ -469,7 +464,12 @@ module.exports = function(webpackEnv) {
|
||||
importLoaders: 3,
|
||||
sourceMap: isEnvProduction && shouldUseSourceMap,
|
||||
},
|
||||
'sass-loader'
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
}
|
||||
),
|
||||
// Don't consider CSS imports dead code even if the
|
||||
// containing package claims to have no side effects.
|
||||
@@ -489,7 +489,12 @@ module.exports = function(webpackEnv) {
|
||||
getLocalIdent: getCSSModuleLocalIdent,
|
||||
},
|
||||
},
|
||||
'sass-loader'
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
}
|
||||
),
|
||||
},
|
||||
|
||||
@@ -502,7 +507,18 @@ module.exports = function(webpackEnv) {
|
||||
importLoaders: 2,
|
||||
sourceMap: isEnvProduction && shouldUseSourceMap,
|
||||
},
|
||||
'less-loader'
|
||||
{
|
||||
loader: "less-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
'primary-color': '#215891',
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
),
|
||||
sideEffects: true,
|
||||
},
|
||||
@@ -516,7 +532,18 @@ module.exports = function(webpackEnv) {
|
||||
modules: true,
|
||||
getLocalIdent: getCSSModuleLocalIdent,
|
||||
},
|
||||
'less-loader'
|
||||
{
|
||||
loader: "less-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
'primary-color': '#215891',
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
),
|
||||
},
|
||||
// "file" loader makes sure those assets get served by WebpackDevServer.
|
||||
@@ -525,14 +552,14 @@ module.exports = function(webpackEnv) {
|
||||
// This loader doesn't use a "test" so it will catch all modules
|
||||
// that fall through the other loaders.
|
||||
{
|
||||
loader: require.resolve('file-loader'),
|
||||
loader: require.resolve("file-loader"),
|
||||
// Exclude `js` files to keep "css" loader working as it injects
|
||||
// its runtime that would otherwise be processed through "file" loader.
|
||||
// Also exclude `html` and `json` extensions so they get processed
|
||||
// by webpacks internal loaders.
|
||||
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
|
||||
options: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
name: "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
},
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
@@ -605,8 +632,8 @@ module.exports = function(webpackEnv) {
|
||||
new MiniCssExtractPlugin({
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
filename: 'static/css/[name].[contenthash:8].css',
|
||||
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
|
||||
filename: "static/css/[name].[contenthash:8].css",
|
||||
chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
|
||||
}),
|
||||
// Generate an asset manifest file with the following content:
|
||||
// - "files" key: Mapping of all asset filenames to their corresponding
|
||||
@@ -615,7 +642,7 @@ module.exports = function(webpackEnv) {
|
||||
// - "entrypoints" key: Array of files which are included in `index.html`,
|
||||
// can be used to reconstruct the HTML if necessary
|
||||
new ManifestPlugin({
|
||||
fileName: 'asset-manifest.json',
|
||||
fileName: "asset-manifest.json",
|
||||
publicPath: paths.publicUrlOrPath,
|
||||
generate: (seed, files, entrypoints) => {
|
||||
const manifestFiles = files.reduce((manifest, file) => {
|
||||
@@ -623,7 +650,7 @@ module.exports = function(webpackEnv) {
|
||||
return manifest;
|
||||
}, seed);
|
||||
const entrypointFiles = entrypoints.main.filter(
|
||||
fileName => !fileName.endsWith('.map')
|
||||
(fileName) => !fileName.endsWith(".map")
|
||||
);
|
||||
|
||||
return {
|
||||
@@ -644,22 +671,22 @@ module.exports = function(webpackEnv) {
|
||||
new WorkboxWebpackPlugin.GenerateSW({
|
||||
clientsClaim: true,
|
||||
exclude: [/\.map$/, /asset-manifest\.json$/],
|
||||
importWorkboxFrom: 'cdn',
|
||||
navigateFallback: paths.publicUrlOrPath + 'index.html',
|
||||
importWorkboxFrom: "cdn",
|
||||
navigateFallback: paths.publicUrlOrPath + "index.html",
|
||||
navigateFallbackBlacklist: [
|
||||
// Exclude URLs starting with /_, as they're likely an API call
|
||||
new RegExp('^/_'),
|
||||
new RegExp("^/_"),
|
||||
// Exclude any URLs whose last part seems to be a file extension
|
||||
// as they're likely a resource and not a SPA route.
|
||||
// URLs containing a "?" character won't be blacklisted as they're likely
|
||||
// a route with query params (e.g. auth callbacks).
|
||||
new RegExp('/[^/?]+\\.[^/]+$'),
|
||||
new RegExp("/[^/?]+\\.[^/]+$"),
|
||||
],
|
||||
}),
|
||||
// TypeScript type checking
|
||||
useTypeScript &&
|
||||
new ForkTsCheckerWebpackPlugin({
|
||||
typescript: resolve.sync('typescript', {
|
||||
typescript: resolve.sync("typescript", {
|
||||
basedir: paths.appNodeModules,
|
||||
}),
|
||||
async: isEnvDevelopment,
|
||||
@@ -673,11 +700,11 @@ module.exports = function(webpackEnv) {
|
||||
: undefined,
|
||||
tsconfig: paths.appTsConfig,
|
||||
reportFiles: [
|
||||
'**',
|
||||
'!**/__tests__/**',
|
||||
'!**/?(*.)(spec|test).*',
|
||||
'!**/src/setupProxy.*',
|
||||
'!**/src/setupTests.*',
|
||||
"**",
|
||||
"!**/__tests__/**",
|
||||
"!**/?(*.)(spec|test).*",
|
||||
"!**/src/setupProxy.*",
|
||||
"!**/src/setupTests.*",
|
||||
],
|
||||
silent: true,
|
||||
// The formatter is invoked directly in WebpackDevServerUtils during development
|
||||
@@ -687,14 +714,14 @@ module.exports = function(webpackEnv) {
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
module: 'empty',
|
||||
dgram: 'empty',
|
||||
dns: 'mock',
|
||||
fs: 'empty',
|
||||
http2: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
child_process: 'empty',
|
||||
module: "empty",
|
||||
dgram: "empty",
|
||||
dns: "mock",
|
||||
fs: "empty",
|
||||
http2: "empty",
|
||||
net: "empty",
|
||||
tls: "empty",
|
||||
child_process: "empty",
|
||||
},
|
||||
// Turn off performance processing because we utilize
|
||||
// our own hints via the FileSizeReporter
|
||||
|
||||
@@ -54,6 +54,16 @@
|
||||
"babel": {
|
||||
"presets": [
|
||||
"react-app"
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
},
|
||||
"antd"
|
||||
]
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -69,6 +79,7 @@
|
||||
"@typescript-eslint/parser": "^2.10.0",
|
||||
"babel-eslint": "10.1.0",
|
||||
"babel-loader": "8.1.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-named-asset-import": "^0.3.6",
|
||||
"babel-preset-react-app": "^9.1.2",
|
||||
"case-sensitive-paths-webpack-plugin": "2.3.0",
|
||||
|
||||
+1
-3
@@ -1,4 +1,2 @@
|
||||
//import antd style.
|
||||
@import '~antd/dist/antd.css';
|
||||
//import global style.
|
||||
@import './assets/css/index';
|
||||
@import './assets/css/index.less';
|
||||
|
||||
+3
-1
@@ -1,10 +1,12 @@
|
||||
import React from 'react';
|
||||
import './App.less';
|
||||
import {BrowserRouter as Router} from "react-router-dom";
|
||||
import {ConfigProvider} from 'antd';
|
||||
import Frame from "./pages/Frame";
|
||||
import en_US from 'antd/es/locale/en_US';
|
||||
|
||||
// global less 须放在Frame组件之后，不然会出现按需加载的less文件覆盖样式问题
|
||||
import './App.less';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
.text-danger{ color: @brand-danger; }
|
||||
.text-gray{ color: @brand-gray; }
|
||||
.text-laxative{ color: @brand-laxative; }
|
||||
.text-theme { color: @primary-color; }
|
||||
|
||||
.bg-navy { background-color: #001F3F;}
|
||||
.bg-blue { background-color: #0074D9;}
|
||||
|
||||
@@ -8,8 +8,11 @@
|
||||
@brand-gray: #c2c2c2;
|
||||
@brand-laxative: #B3EE3A;
|
||||
|
||||
//主题默认颜色
|
||||
@primary-color: @brand-primary;
|
||||
|
||||
//左侧菜单宽度
|
||||
@sidebar-width: 220px;
|
||||
@sidebar-width: 200px;
|
||||
|
||||
//顶部导航栏宽度
|
||||
@top-navigation-height: 45px;
|
||||
|
||||
@@ -14,7 +14,6 @@ import DateUtil from '../../common/util/DateUtil';
|
||||
import SortDirection from "../../common/model/base/SortDirection";
|
||||
import FileUtil from "../../common/util/FileUtil";
|
||||
import Matter from '../../common/model/matter/Matter';
|
||||
import Moon from "../../common/model/global/Moon";
|
||||
import Lang from "../../common/model/global/Lang";
|
||||
|
||||
Echarts.registerTheme('tank_theme', theme);
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
left: @sidebar-width;
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item {
|
||||
margin-right: 10px;
|
||||
|
||||
@@ -40,16 +40,15 @@ export default class BottomLayout extends TankComponent<IProps, IState> {
|
||||
<span dangerouslySetInnerHTML={{ __html: preference.record }} />
|
||||
</span>
|
||||
<span className="item">
|
||||
<span className="link" onClick={BottomLayout.changeLang}>
|
||||
<a className="text-theme" onClick={BottomLayout.changeLang}>
|
||||
{Lang.getSingleton().lang === "zh" ? "English" : "中文"}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
{/*开源不易，请不要移除掉这里的代码，蓝眼云盘谢谢您! ^_^*/}
|
||||
{/*It is not easy to open source，please do not remove the following code, thank you! ^_^ */}
|
||||
<span className="brand">
|
||||
Powered by <a target="_blank" href="https://github.com/eyebluecn/tank">
|
||||
<img alt="logo" className="w30" src={DefaultLogoPng} />
|
||||
{Lang.t("eyeblueTank")}
|
||||
<img alt="logo" className="w30" src={DefaultLogoPng} /> {Lang.t("eyeblueTank")}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
+12
-15
@@ -1,19 +1,16 @@
|
||||
.matter-list {
|
||||
padding: 5px;
|
||||
|
||||
|
||||
.obscure {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.obscure {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.ant-upload {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -415,7 +415,7 @@ export default class List extends TankComponent<IProps, IState> {
|
||||
) : null}
|
||||
<BreadcrumbPanel breadcrumbModels={this.breadcrumbModels} />
|
||||
|
||||
<Row className="mb10 mt15">
|
||||
<Row className="mt10">
|
||||
<Col xs={24} sm={24} md={14} lg={16}>
|
||||
<Space className="buttons">
|
||||
{selectedMatters.length !== pager.data.length ? (
|
||||
@@ -503,6 +503,7 @@ export default class List extends TankComponent<IProps, IState> {
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={10} lg={8}>
|
||||
<Input.Search
|
||||
className="mb10"
|
||||
placeholder={Lang.t("matter.searchFile")}
|
||||
onSearch={(value) => this.searchFile(value)}
|
||||
onChange={this.changeSearch}
|
||||
|
||||
@@ -137,3 +137,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anticon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -10,16 +10,15 @@ import AnimateUtil from "../../../common/util/AnimateUtil";
|
||||
import MessageBoxUtil from "../../../common/util/MessageBoxUtil";
|
||||
import Expanding from "../../widget/Expanding";
|
||||
import {
|
||||
LockFilled,
|
||||
UnlockFilled,
|
||||
LockOutlined,
|
||||
UnlockOutlined,
|
||||
DownloadOutlined,
|
||||
ExclamationCircleFilled,
|
||||
LinkOutlined,
|
||||
DeleteOutlined,
|
||||
InfoCircleTwoTone,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined,
|
||||
EllipsisOutlined
|
||||
EllipsisOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Modal, Checkbox, Tooltip } from "antd";
|
||||
import { CheckboxChangeEvent } from "antd/es/checkbox";
|
||||
@@ -217,7 +216,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
<div className="right-part">
|
||||
<Tooltip title={Lang.t("download")}>
|
||||
<DownloadOutlined
|
||||
className="btn-action blue"
|
||||
className="btn-action text-theme"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(matter.download())
|
||||
}
|
||||
@@ -239,11 +238,11 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
);
|
||||
return (
|
||||
<div className="right-part">
|
||||
<span className="matter-operation">
|
||||
<span className="matter-operation text-theme">
|
||||
{!matter.dir && matter.privacy && (
|
||||
<Tooltip title={Lang.t("matter.setPublic")}>
|
||||
<UnlockFilled
|
||||
className="btn-action blue"
|
||||
<UnlockOutlined
|
||||
className="btn-action"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
|
||||
}
|
||||
@@ -252,8 +251,8 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
)}
|
||||
{!matter.dir && !matter.privacy && (
|
||||
<Tooltip title={Lang.t("matter.setPrivate")}>
|
||||
<LockFilled
|
||||
className="btn-action blue"
|
||||
<LockOutlined
|
||||
className="btn-action"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
|
||||
}
|
||||
@@ -261,8 +260,8 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title={Lang.t("matter.fileDetail")}>
|
||||
<InfoCircleTwoTone
|
||||
className="btn-action blue"
|
||||
<InfoCircleOutlined
|
||||
className="btn-action"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(
|
||||
Sun.navigateTo("/matter/detail/" + matter.uuid)
|
||||
@@ -272,7 +271,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
</Tooltip>
|
||||
<Tooltip title={Lang.t("matter.rename")}>
|
||||
<EditOutlined
|
||||
className="btn-action blue"
|
||||
className="btn-action"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.prepareRename())
|
||||
}
|
||||
@@ -280,13 +279,13 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
</Tooltip>
|
||||
<Tooltip title={Lang.t("matter.copyPath")}>
|
||||
<LinkOutlined
|
||||
className="btn-action blue"
|
||||
className="btn-action"
|
||||
onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title={Lang.t("matter.download")}>
|
||||
<DownloadOutlined
|
||||
className="btn-action blue"
|
||||
className="btn-action"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(matter.download())
|
||||
}
|
||||
@@ -294,7 +293,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
</Tooltip>
|
||||
<Tooltip title={Lang.t("matter.delete")}>
|
||||
<DeleteOutlined
|
||||
className="btn-action red"
|
||||
className="btn-action text-danger"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
|
||||
}
|
||||
@@ -351,7 +350,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
|
||||
}
|
||||
>
|
||||
<UnlockFilled className="btn-action mr5" />
|
||||
<UnlockOutlined className="btn-action mr5" />
|
||||
{Lang.t("matter.setPublic")}
|
||||
</div>
|
||||
)}
|
||||
@@ -363,7 +362,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
|
||||
}
|
||||
>
|
||||
<LockFilled className="btn-action mr5" />
|
||||
<LockOutlined className="btn-action mr5" />
|
||||
{Lang.t("matter.setPrivate")}
|
||||
</div>
|
||||
)}
|
||||
@@ -401,7 +400,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
{Lang.t("matter.download")}
|
||||
</div>
|
||||
<div
|
||||
className="cell-btn red"
|
||||
className="cell-btn text-danger"
|
||||
onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.deleteMatter())}
|
||||
>
|
||||
<DeleteOutlined className="btn-action mr5" />
|
||||
@@ -472,7 +471,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
|
||||
{matter.name}
|
||||
{!matter.dir && !matter.privacy && (
|
||||
<Tooltip title={Lang.t("matter.publicFileEveryoneCanVisit")}>
|
||||
<UnlockFilled className="icon" />
|
||||
<UnlockOutlined className="icon" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
|
||||
@@ -81,7 +81,7 @@ export default class ShareBar extends TankComponent<IProps, IState> {
|
||||
<span className="share-operation">
|
||||
<Tooltip title={Lang.t("share.shareDetail")}>
|
||||
<InfoCircleOutlined
|
||||
className="btn-action mr5 blue"
|
||||
className="btn-action mr5 text-theme"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.showShare())
|
||||
}
|
||||
@@ -89,7 +89,7 @@ export default class ShareBar extends TankComponent<IProps, IState> {
|
||||
</Tooltip>
|
||||
<Tooltip title={Lang.t("delete")}>
|
||||
<DeleteOutlined
|
||||
className="btn-action red"
|
||||
className="btn-action text-danger"
|
||||
onClick={(e) =>
|
||||
SafeUtil.stopPropagationWrap(e)(this.delShare())
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import {Link, RouteComponentProps} from 'react-router-dom';
|
||||
import './List.less';
|
||||
import SortDirection from '../../common/model/base/SortDirection';
|
||||
import Pager from '../../common/model/base/Pager';
|
||||
import Table, {ColumnProps} from 'antd/lib/table';
|
||||
import StringUtil from '../../common/util/StringUtil';
|
||||
import FileUtil from '../../common/util/FileUtil';
|
||||
import DateUtil from '../../common/util/DateUtil';
|
||||
@@ -12,7 +11,8 @@ import TableEmpty from '../widget/TableEmpty';
|
||||
import User from "../../common/model/user/User";
|
||||
import TankComponent from "../../common/component/TankComponent";
|
||||
import TankTitle from "../widget/TankTitle";
|
||||
import {Button, Modal, Tag, Tooltip} from "antd";
|
||||
import {ColumnProps} from 'antd/lib/table';
|
||||
import {Table, Button, Modal, Tag, Tooltip} from "antd";
|
||||
import {CheckCircleOutlined, PlusOutlined, StopOutlined, UserSwitchOutlined} from '@ant-design/icons';
|
||||
import {UserRoleMap} from "../../common/model/user/UserRole";
|
||||
import {UserStatus, UserStatusMap} from "../../common/model/user/UserStatus";
|
||||
|
||||
Reference in New Issue
Block a user