Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改文件的新建和编辑

This commit is contained in:
sylor_huang@126.com 2020-05-27 17:07:36 +08:00
parent d3ba91983d
commit 4b2cfb21fd
13 changed files with 807 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
config/webpack.config.dev.js
View File

@ -1,24 +1,26 @@
'use strict'; "use strict";
const autoprefixer = require('autoprefixer'); const autoprefixer = require("autoprefixer");
const path = require('path'); const path = require("path");
const webpack = require('webpack'); const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin");
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const getClientEnvironment = require('./env');
const paths = require('./paths');
const publicPath = '/'; const getClientEnvironment = require("./env");
const env = getClientEnvironment('/');
const paths = require("./paths");
const publicPath = "/";
const env = getClientEnvironment("/");
module.exports = { module.exports = {
optimization: { optimization: {
splitChunks: { splitChunks: {
chunks: 'async', chunks: "async",
// 大于30KB才单独分离成chunk // 大于30KB才单独分离成chunk
minSize: 30000, minSize: 30000,
maxAsyncRequests: 5, maxAsyncRequests: 5,
@ -30,24 +32,24 @@ module.exports = {
reuseExistingChunk: true, reuseExistingChunk: true,
}, },
vendors: { vendors: {
name: 'vendors', name: "vendors",
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
priority: -10, priority: -10,
chunks: "all" chunks: "all",
} },
} },
}, },
runtimeChunk: true runtimeChunk: true,
}, },
mode: 'development', mode: "development",
// 开启调试 // 开启调试
devtool: "source-map", // 开启调试 devtool: "source-map", // 开启调试
// These are the "entry points" to our application. // These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle. // This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS. // The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [ entry: [
// We ship a few polyfills by default: // We ship a few polyfills by default:
require.resolve('./polyfills'), require.resolve("./polyfills"),
// Include an alternative client for WebpackDevServer. A client's job is to // Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes. // connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case // When you save a file, the client will either apply hot updates (in case
@ -58,7 +60,7 @@ module.exports = {
// the line below with these two lines if you prefer the stock client: // the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'), // require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve("react-dev-utils/webpackHotDevClient"),
// Finally, this is your app's code: // Finally, this is your app's code:
paths.appIndexJs, paths.appIndexJs,
// We include the app code last so that if there is a runtime error during // We include the app code last so that if there is a runtime error during
@ -68,25 +70,25 @@ module.exports = {
output: { output: {
// Add /* filename */ comments to generated require()s in the output. // Add /* filename */ comments to generated require()s in the output.
pathinfo: true, pathinfo: true,
globalObject: 'this', globalObject: "this",
// This does not produce a real file. It's just the virtual path that is // This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle // served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime. // containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js', filename: "static/js/bundle.js",
// There are also additional JS chunk files if you use code splitting. // There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js', chunkFilename: "static/js/[name].chunk.js",
// This is the URL that app is served from. We use "/" in development. // This is the URL that app is served from. We use "/" in development.
publicPath, publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info => devtoolModuleFilenameTemplate: (info) =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"),
}, },
resolve: { resolve: {
// This allows you to set a fallback for where Webpack should look for modules. // This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win" // We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism. // if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253 // https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat( modules: ["node_modules", paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js` // It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
), ),
@ -96,13 +98,12 @@ module.exports = {
// https://github.com/facebookincubator/create-react-app/issues/290 // https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support // `web` extension prefixes have been added for better support
// for React Native Web. // for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"],
alias: { alias: {
educoder: __dirname + "/../src/common/educoder.js",
"educoder": __dirname + "/../src/common/educoder.js",
// Support React Native Web // Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-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",
}, },
plugins: [ plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/). // Prevents users from importing files from outside of src/ (or node_modules/).
@ -126,10 +127,10 @@ module.exports = {
// A missing `test` is equivalent to a match. // A missing `test` is equivalent to a match.
{ {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'), loader: require.resolve("url-loader"),
options: { options: {
limit: 10000, limit: 10000,
name: 'static/media/[name].[hash:8].[ext]', name: "static/media/[name].[hash:8].[ext]",
}, },
}, },
// Process JS with Babel. // Process JS with Babel.
@ -137,19 +138,22 @@ module.exports = {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
include: paths.appSrc, include: paths.appSrc,
exclude: /node_modules/, exclude: /node_modules/,
loader: require.resolve('babel-loader'), loader: require.resolve("babel-loader"),
options: { options: {
// This is a feature of `babel-loader` for webpack (not Babel itself). // This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/ // It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds. // directory for faster rebuilds.
cacheDirectory: true, cacheDirectory: true,
"plugins": [ plugins: [
["import", { [
"libraryName": "antd", "import",
"libraryDirectory": "es", {
"style": "css" libraryName: "antd",
}] libraryDirectory: "es",
] style: "css",
},
],
],
}, },
}, },
// "postcss" loader applies autoprefixer to our CSS. // "postcss" loader applies autoprefixer to our CSS.
@ -160,29 +164,29 @@ module.exports = {
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
require.resolve('style-loader'), require.resolve("style-loader"),
{ {
loader: require.resolve('css-loader'), loader: require.resolve("css-loader"),
options: { options: {
importLoaders: 1, importLoaders: 1,
}, },
}, },
{ {
loader: require.resolve('postcss-loader'), loader: require.resolve("postcss-loader"),
options: { options: {
// Necessary for external CSS imports to work // Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677 // https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss', ident: "postcss",
plugins: () => [ plugins: () => [
require('postcss-flexbugs-fixes'), require("postcss-flexbugs-fixes"),
autoprefixer({ autoprefixer({
browsers: [ browsers: [
'>1%', ">1%",
'last 4 versions', "last 4 versions",
'Firefox ESR', "Firefox ESR",
'not ie < 9', // React doesn't support IE8 anyway "not ie < 9", // React doesn't support IE8 anyway
], ],
flexbox: 'no-2009', flexbox: "no-2009",
}), }),
], ],
}, },
@ -192,7 +196,7 @@ module.exports = {
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
require.resolve('style-loader'), require.resolve("style-loader"),
{ {
loader: require.resolve("css-loader"), loader: require.resolve("css-loader"),
options: { options: {
@ -200,8 +204,8 @@ module.exports = {
}, },
}, },
{ {
loader: require.resolve("sass-loader") loader: require.resolve("sass-loader"),
} },
], ],
}, },
// "file" loader makes sure those assets get served by WebpackDevServer. // "file" loader makes sure those assets get served by WebpackDevServer.
@ -215,9 +219,9 @@ module.exports = {
// Also exclude `html` and `json` extensions so they get processed // Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders. // by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'), loader: require.resolve("file-loader"),
options: { options: {
name: 'static/media/[name].[hash:8].[ext]', name: "static/media/[name].[hash:8].[ext]",
}, },
}, },
], ],
@ -261,17 +265,18 @@ module.exports = {
// You can remove this if you don't use Moment.js: // You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new MonacoWebpackPlugin({ new MonacoWebpackPlugin({
features: ['!gotoSymbol'], features: ["coreCommands", "find"],
}) languages: ['plaintext','apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']
}),
], ],
// Some libraries import Node modules but don't use them in the browser. // 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. // Tell Webpack to provide empty mocks for them so importing them works.
node: { node: {
dgram: 'empty', dgram: "empty",
fs: 'empty', fs: "empty",
net: 'empty', net: "empty",
tls: 'empty', tls: "empty",
child_process: 'empty', child_process: "empty",
}, },
// Turn off performance hints during development because we don't do any // Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become // splitting or minification in interest of speed. These warnings become

617
config/webpack.config.prod.js
View File

@ -1,25 +1,25 @@
'use strict'; "use strict";
const autoprefixer = require('autoprefixer'); const autoprefixer = require("autoprefixer");
const path = require('path'); const path = require("path");
const webpack = require('webpack'); const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require('webpack-manifest-plugin'); const ManifestPlugin = require("webpack-manifest-plugin");
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
const eslintFormatter = require('react-dev-utils/eslintFormatter'); const eslintFormatter = require("react-dev-utils/eslintFormatter");
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const TerserJSPlugin = require('terser-webpack-plugin'); const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const paths = require('./paths'); const paths = require("./paths");
const getClientEnvironment = require('./env'); const getClientEnvironment = require("./env");
// Some apps do not use client-side routing with pushState. // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths. // For these, "homepage" can be set to "." to enable relative asset paths.
let publicPath = '/react/build/'; let publicPath = "/react/build/";
// let nodeEnv = process.env.NODE_ENV // let nodeEnv = process.env.NODE_ENV
// if (nodeEnv === 'testBuild') { // if (nodeEnv === 'testBuild') {
// publicPath = 'https://testforgeplus.trustie.net/react/build/'; // publicPath = 'https://testforgeplus.trustie.net/react/build/';
@ -28,7 +28,7 @@ let publicPath = '/react/build/';
// publicPath = 'https://forgeplus.trustie.net/react/build/'; // publicPath = 'https://forgeplus.trustie.net/react/build/';
// } // }
const publicUrl = publicPath.slice(0, -1); const publicUrl = publicPath.slice(0, -1);
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
const env = getClientEnvironment(publicPath); const env = getClientEnvironment(publicPath);
// This is the production configuration. // This is the production configuration.
@ -36,296 +36,301 @@ const env = getClientEnvironment(publicPath);
// The development configuration is different and lives in a separate file. // The development configuration is different and lives in a separate file.
// 上线用的 // 上线用的
module.exports = { module.exports = {
optimization: { optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: { splitChunks: {
chunks: 'async', chunks: "async",
// 大于30KB才单独分离成chunk // 大于30KB才单独分离成chunk
minSize: 30000, minSize: 30000,
maxAsyncRequests: 5, maxAsyncRequests: 5,
maxInitialRequests: 3, maxInitialRequests: 3,
name: true, name: true,
cacheGroups: { cacheGroups: {
default: { default: {
minChunks: 2, minChunks: 2,
priority: -20, priority: -20,
reuseExistingChunk: true, reuseExistingChunk: true,
}, },
// vendors: { // vendors: {
// name: 'vendors', // name: 'vendors',
// test: /[\\/]node_modules[\\/]/, // test: /[\\/]node_modules[\\/]/,
// priority: -10, // priority: -10,
// chunks: "all" // chunks: "all"
// } // }
} },
}, },
runtimeChunk: true runtimeChunk: true,
}, },
bail: true, bail: true,
mode: 'production', mode: "production",
devtool: false,//测试版 devtool: false, //测试版
entry: [require.resolve('./polyfills'), paths.appIndexJs], entry: [require.resolve("./polyfills"), paths.appIndexJs],
output: { output: {
path: paths.appBuild, path: paths.appBuild,
globalObject: 'this', globalObject: "this",
filename: './static/js/[name].[contenthash:8].js', filename: "./static/js/[name].[contenthash:8].js",
chunkFilename: './static/js/[name].[contenthash:8].chunk.js', chunkFilename: "./static/js/[name].[contenthash:8].chunk.js",
publicPath, publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info => devtoolModuleFilenameTemplate: (info) =>
path path
.relative(paths.appSrc, info.absoluteResourcePath) .relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'), .replace(/\\/g, "/"),
}, },
resolve: { resolve: {
// This allows you to set a fallback for where Webpack should look for modules. // This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win" // We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism. // if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253 // https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat( modules: ["node_modules", paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js` // It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
), ),
// These are the reasonable defaults supported by the Node ecosystem. // These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support // We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see: // some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290 // https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support // `web` extension prefixes have been added for better support
// for React Native Web. // for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"],
alias: { alias: {
"educoder": __dirname + "/../src/common/educoder.js", educoder: __dirname + "/../src/common/educoder.js",
// Support React Native Web // Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-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",
}, },
plugins: [ plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/). // Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel. // This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to, // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in. // please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way. // Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
], ],
}, },
module: { module: {
strictExportPresence: true, strictExportPresence: true,
rules: [ rules: [
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
enforce: 'pre', enforce: "pre",
use: [ use: [
{ {
options: { options: {
formatter: eslintFormatter, formatter: eslintFormatter,
eslintPath: require.resolve('eslint'), eslintPath: require.resolve("eslint"),
},
loader: require.resolve("eslint-loader"),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
exclude: /node_modules/,
loader: require.resolve("babel-loader"),
options: {
compact: true,
plugins: [
[
"import",
{
libraryName: "antd",
libraryDirectory: "es",
style: "css",
},
],
],
},
},
}, {
loader: require.resolve('eslint-loader'), test: /\.css$/,
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
compact: true,
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]
},
},
{ use: [
test: /\.css$/, {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath,
},
},
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9", // React doesn't support IE8 anyway
],
flexbox: "no-2009",
}),
],
},
},
],
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath,
},
},
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve("sass-loader"),
},
],
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve("file-loader"),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[contenthash:8].[ext]",
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: false,
template: paths.appHtml,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
use: [{ new MiniCssExtractPlugin({
loader: MiniCssExtractPlugin.loader, filename: "static/css/[name].[contenthash:8].css",
options: { chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
publicPath }),
}, // Generate a manifest file which contains a mapping of all asset filenames
}, // to their corresponding output file so that tools can pick it up without
{ // having to parse `index.html`.
loader: require.resolve("css-loader"), new ManifestPlugin({
options: { fileName: "asset-manifest.json",
importLoaders: 1, }),
sourceMap: shouldUseSourceMap, // Generate a service worker script that will precache, and keep up to date,
}, // the HTML & assets that are part of the Webpack build.
}, new SWPrecacheWebpackPlugin({
{ // By default, a cache-busting query parameter is appended to requests
loader: require.resolve('postcss-loader'), // used to populate the caches, to ensure the responses are fresh.
options: { // If a URL is already hashed by Webpack, then there is no concern
ident: 'postcss', // about it being stale, and the cache-busting can be skipped.
plugins: () => [ dontCacheBustUrlsMatching: /\.\w{8}\./,
require('postcss-flexbugs-fixes'), filename: "service-worker.js",
autoprefixer({ logger(message) {
browsers: [ if (message.indexOf("Total precache size is") === 0) {
'>1%', // This message occurs for every build and is a bit too noisy.
'last 4 versions', return;
'Firefox ESR', }
'not ie < 9', // React doesn't support IE8 anyway if (message.indexOf("Skipping static resource") === 0) {
], // This message obscures real errors so we ignore it.
flexbox: 'no-2009', // https://github.com/facebookincubator/create-react-app/issues/2612
}), return;
], }
}, // console.log(message);
} },
] minify: true,
}, // For unknown URLs, fallback to the index page
{ navigateFallback: publicUrl + "/index.html",
test: /\.scss$/, // Ignores URLs starting from /__ (useful for Firebase):
use: [{ // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
loader: MiniCssExtractPlugin.loader, navigateFallbackWhitelist: [/^(?!\/__).*/],
options: { // Don't precache sourcemaps (they're large) and build asset manifest:
publicPath staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}, }),
}, // Moment.js is an extremely popular library that bundles large locale files
{ // by default due to how Webpack interprets its code. This is a practical
loader: require.resolve("css-loader"), // solution that requires the user to opt into importing specific locales.
options: { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
importLoaders: 1, // You can remove this if you don't use Moment.js:
sourceMap: shouldUseSourceMap, new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
}, new MonacoWebpackPlugin({
}, features: ["coreCommands", "find"],
{ languages: ['plaintext','apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']
loader: require.resolve("sass-loader") }),
} new webpack.NamedChunksPlugin(),
], new webpack.HashedModuleIdsPlugin(),
}, ],
// "file" loader makes sure assets end up in the `build` folder. // Some libraries import Node modules but don't use them in the browser.
// When you `import` an asset, you get its filename. // Tell Webpack to provide empty mocks for them so importing them works.
// This loader doesn't use a "test" so it will catch all modules node: {
// that fall through the other loaders. dgram: "empty",
{ fs: "empty",
loader: require.resolve('file-loader'), net: "empty",
// Exclude `js` files to keep "css" loader working as it injects tls: "empty",
// it's runtime that would otherwise processed through "file" loader. child_process: "empty",
// Also exclude `html` and `json` extensions so they get processed },
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[contenthash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: false,
template: paths.appHtml,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern
// about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
logger(message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;
}
if (message.indexOf('Skipping static resource') === 0) {
// This message obscures real errors so we ignore it.
// https://github.com/facebookincubator/create-react-app/issues/2612
return;
}
// console.log(message);
},
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html',
// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/],
// Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new MonacoWebpackPlugin({
features: ['!gotoSymbol'],
}),
new webpack.NamedChunksPlugin(),
new webpack.HashedModuleIdsPlugin()
],
// 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: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
}; };

17
package-lock.json generated
View File

@ -14904,20 +14904,13 @@
} }
}, },
"react-monaco-editor": { "react-monaco-editor": {
"version": "0.25.1", "version": "0.36.0",
"resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.25.1.tgz", "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.36.0.tgz",
"integrity": "sha512-VLksQjt8fmeIZoET9fQgmR0sdCCBFaiss92MwW5JvgO3JfrnhHtrLBqrSQRjtbUmef1EmEKi4gZp5Mh0oidvVg==", "integrity": "sha512-JVA5SZhOoYZ0DCdTwYgagtRb3jHo4KN7TVFiJauG+ZBAJWfDSTzavPIrwzWbgu8ahhDqDk4jUcYlOJL2BC/0UA==",
"requires": { "requires": {
"@types/react": "*", "@types/react": "^16.x",
"monaco-editor": "^0.16.0", "monaco-editor": "*",
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
},
"dependencies": {
"monaco-editor": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.16.2.tgz",
"integrity": "sha512-NtGrFzf54jADe7qsWh3lazhS7Kj0XHkJUGBq9fA/Jbwc+sgVcyfsYF6z2AQ7hPqDC+JmdOt/OwFjBnRwqXtx6w=="
}
} }
}, },
"react-onclickoutside": { "react-onclickoutside": {

8
package.json
View File

@ -47,8 +47,8 @@
"katex": "^0.11.1", "katex": "^0.11.1",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"loglevel": "^1.6.8", "loglevel": "^1.6.8",
"material-ui": "^1.0.0-beta.40",
"marked": "^1.0.0", "marked": "^1.0.0",
"material-ui": "^1.0.0-beta.40",
"md5": "^2.2.1", "md5": "^2.2.1",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"moment": "^2.23.0", "moment": "^2.23.0",
@ -72,10 +72,10 @@
"rc-tree": "^1.15.3", "rc-tree": "^1.15.3",
"rc-upload": "^2.9.4", "rc-upload": "^2.9.4",
"react": "^16.13.1", "react": "^16.13.1",
"react-color": "^2.18.0",
"react-beautiful-dnd": "^10.0.4", "react-beautiful-dnd": "^10.0.4",
"react-codemirror": "^1.0.0", "react-codemirror": "^1.0.0",
"react-codemirror2": "^6.0.1", "react-codemirror2": "^6.0.1",
"react-color": "^2.18.0",
"react-content-loader": "^3.1.1", "react-content-loader": "^3.1.1",
"react-cookies": "^0.1.1", "react-cookies": "^0.1.1",
"react-datepicker": "^2.14.1", "react-datepicker": "^2.14.1",
@ -84,7 +84,7 @@
"react-hot-loader": "^4.12.20", "react-hot-loader": "^4.12.20",
"react-infinite-scroller": "^1.2.4", "react-infinite-scroller": "^1.2.4",
"react-loadable": "^5.3.1", "react-loadable": "^5.3.1",
"react-monaco-editor": "^0.25.1", "react-monaco-editor": "0.36",
"react-player": "^1.15.3", "react-player": "^1.15.3",
"react-redux": "5.0.7", "react-redux": "5.0.7",
"react-router": "^4.2.0", "react-router": "^4.2.0",
@ -194,4 +194,4 @@
"webpack": "^4.42.1", "webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.7.0" "webpack-bundle-analyzer": "^3.7.0"
} }
} }

6
src/AppConfig.js
View File

@ -98,9 +98,9 @@ export function initAxiosInterceptors(props) {
// TODO 避免重复的请求 https://github.com/axios/axios#cancellation // TODO 避免重复的请求 https://github.com/axios/axios#cancellation
// TODO 读取到package.json中的配置？ // TODO 读取到package.json中的配置？
var proxy = "http://localhost:3000" // var proxy = "http://localhost:3000"
proxy = "https://pre-newweb.educoder.net" // proxy = "https://pre-newweb.educoder.net"
proxy = "https://testforgeplus.trustie.net/" var proxy = "https://testforgeplus.trustie.net/"
// 在这里使用requestMap控制，避免用户通过双击等操作发出重复的请求； // 在这里使用requestMap控制，避免用户通过双击等操作发出重复的请求；
// 如果需要支持重复的请求，考虑config里面自定义一个allowRepeat参考来控制 // 如果需要支持重复的请求，考虑config里面自定义一个allowRepeat参考来控制

291
src/forge/Main/CoderRootFileDetail.js
View File

@ -1,75 +1,82 @@
import React , { Component } from "react"; import React, { Component } from "react";
import { Popconfirm } from 'antd'; import { Popconfirm, Select } from "antd";
import './list.css'; import "./list.css";
import axios from 'axios'; import axios from "axios";
import Meditor from "../Newfile/m_editor" import Meditor from "../Newfile/m_editor";
function bytesToSize(bytes) { function bytesToSize(bytes) {
if (bytes === 0) return '0 B'; if (bytes === 0) return "0 B";
let k = 1024, let k = 1024,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
i = Math.floor(Math.log(bytes) / Math.log(k)); i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)). toFixed(2) + ' ' + sizes[i]; return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
} }
class CoderRootFileDetail extends Component{ class CoderRootFileDetail extends Component {
constructor(props){ constructor(props) {
super(props); super(props);
this.state={ this.state = {
readOnly:true, readOnly: true,
value:undefined value: undefined,
} language: undefined,
};
} }
componentDidMount=()=>{ componentDidMount = () => {
const { detail, readOnly } = this.props; const { detail, readOnly } = this.props;
this.setState({ this.setState({
value: detail.content, value: detail.content,
readOnly: readOnly readOnly: readOnly,
}) });
} };
select_language = (e) => {
EditFile=()=>{ console.log(e);
this.setState({ this.setState({
readOnly:false language: e,
}) });
} };
CancelEdit=()=>{ EditFile = () => {
this.setState({ this.setState({
readOnly:true readOnly: false,
}) });
} };
CancelEdit = () => {
this.setState({
readOnly: true,
});
};
// 编辑文件 // 编辑文件
changeMmirror=(e,e1,value)=>{ changeMmirror = (e, e1, value) => {
this.setState({ this.setState({
value value,
}) });
} };
deleteFile=()=>{ deleteFile = () => {
const { branch , detail }= this.props; const { branch, detail } = this.props;
const { projectsId } = this.props.match.params; const { projectsId } = this.props.match.params;
const url = `/repositories/${projectsId}/delete_file.json`; const url = `/repositories/${projectsId}/delete_file.json`;
axios.delete(url,{ axios
params:{ .delete(url, {
filepath:detail.path, params: {
branch, filepath: detail.path,
sha:detail.sha branch,
} sha: detail.sha,
}).then(result=>{ },
if(result){ })
this.props.showNotification("删除成功!"); .then((result) => {
this.props.history.push(`/projects/${projectsId}`); if (result) {
} this.props.showNotification("删除成功!");
}).catch(error=>{ this.props.history.push(`/projects/${projectsId}`);
console.log(error); }
}) })
} .catch((error) => {
console.log(error);
});
};
// // 确认修改文件 // // 确认修改文件
// UpdateFile=()=>{ // UpdateFile=()=>{
@ -93,70 +100,144 @@ class CoderRootFileDetail extends Component{
// console.log(error); // console.log(error);
// }) // })
// } // }
updateCode=(value)=> { updateCode = (value) => {
this.setState({ this.setState({
value, value,
}); });
} };
render(){ render() {
const { detail , current_user , isManager , isDeveloper } = this.props; const { detail, current_user, isManager, isDeveloper } = this.props;
const { readOnly } = this.state; const { readOnly, language } = this.state;
let flag = current_user && current_user.login && (isManager || isDeveloper); let flag = current_user && current_user.login && (isManager || isDeveloper);
// var options = { const Option = Select.Option;
// lineNumbers: true, const languages = [
// mode: 'javascript', "apex",
// readOnly:readOnly?'nocursor':false, "azcli",
// autofocus:readOnly?false:true, "bat",
// styleActiveLine:true "clojure",
// }; "coffee",
return( "cpp",
"csharp",
"csp",
"css",
"dockerfile",
"fsharp",
"go",
"handlebars",
"html",
"ini",
"java",
"javascript",
"json",
"less",
"lua",
"markdown",
"msdax",
"mysql",
"objective",
"perl",
"pgsql",
"php",
"postiats",
"powerquery",
"powershell",
"pug",
"python",
"r",
"razor",
"redis",
"redshift",
"ruby",
"rust",
"sb",
"scheme",
"scss",
"shell",
"solidity",
"sql",
"st",
"swift",
"typescript",
"vb",
"xml",
"yaml",
];
return (
<div className="mb20"> <div className="mb20">
<div className=""> <div className="grid-item branchTitle">
<p className="branchTitle f-wrap-alignCenter f-wrap-between"> <div className="grid-item">
<span>{bytesToSize(detail && detail.size)}</span> <span className="ml20 color-grey-6 font-16">{bytesToSize(detail && detail.size)}</span>
{ </div>
flag && <p className="text-right">
<span> {flag && (
{ <div>
readOnly ? {readOnly ? (
<a onClick={this.EditFile} className="ml20"><i className="iconfont icon-bianji1 font-15 color-grey-6"></i></a> <a onClick={this.EditFile} className="ml20">
: <i className="iconfont icon-bianji1 font-15 color-grey-6"></i>
<React.Fragment> </a>
<button type="button" className="ant-btn ant-btn-sm mr10" onClick={this.CancelEdit}><span>取 消</span> ) : (
</button> <React.Fragment>
{/* <button type="button" className="ant-btn ant-btn-primary ant-btn-sm" onClick={this.UpdateFile}><span>确 定</span> <Select
showSearch={true}
placeholder={"请选择文本语言"}
style={{ width: 200 }}
value={language}
onChange={this.select_language}
>
<Option value={undefined}>请选择文本语言</Option>
{languages.map((item, key) => {
return <Option value={item}>{item}</Option>;
})}
</Select>
<button
type="button"
className="ant-btn ant-btn-sm ml20"
onClick={this.CancelEdit}
>
<span>取 消</span>
</button>
{/* <button type="button" className="ant-btn ant-btn-primary ant-btn-sm" onClick={this.UpdateFile}><span>确 定</span>
</button> */} </button> */}
</React.Fragment> </React.Fragment>
} )}
<Popconfirm title="确认删除这个文件？" className="ml20" okText="确定" cancelText="取消" onConfirm={this.deleteFile}> <Popconfirm
<a><i className="iconfont icon-shanchu font-15 color-grey-6"></i></a> title="确认删除这个文件？"
className="ml20"
okText="确定"
cancelText="取消"
onConfirm={this.deleteFile}
>
<a>
<i className="iconfont icon-shanchu font-15 color-grey-6"></i>
</a>
</Popconfirm> </Popconfirm>
</span> </div>
} )}
</p> </p>
</div> </div>
<div> <div>
{ {detail.direct_download ? (
detail.direct_download ? <div className="text-center">
<div className="text-center"> <a href={detail.download_url} className="color-blue font-15">
<a href={detail.download_url} className="color-blue font-15">下载原始文件</a> 下载原始文件
</div> </a>
: </div>
<Meditor ) : (
{...this.props} <Meditor
{...this.state} {...this.props}
filepath={`/${detail.path}`} {...this.state}
content={detail.content} language={language ? language : "javascript"}
readOnly={readOnly} filepath={`/${detail.path}`}
editorType="update" content={detail.content}
> readOnly={readOnly}
</Meditor> editorType="update"
} ></Meditor>
)}
</div> </div>
</div> </div>
) );
} }
} }

171
src/forge/Newfile/Index.js
View File

@ -1,60 +1,145 @@
import React , { Component } from "react"; import React, { Component } from "react";
import Meditor from "./m_editor" import Meditor from "./m_editor";
import Top from '../Main/DetailTop'; import Top from "../Main/DetailTop";
import './index.css'; import "./index.css";
import { Input } from 'antd'; import { Input, Select } from "antd";
class Index extends Component{ class Index extends Component {
constructor(props){ constructor(props) {
super(props); super(props);
this.state={ this.state = {
editorValue:"", editorValue: "",
filename:"" filename: "",
} language: undefined
};
} }
// 命名文件 // 命名文件
changeFileName=(e)=>{ changeFileName = (e) => {
this.setState({ this.setState({
filename:e.target.value filename: e.target.value,
}) });
} };
// 取消，弹框询问 // 取消，弹框询问
CancelAddFile=()=>{ CancelAddFile = () => {
this.props.history.goBack(); this.props.history.goBack();
} };
render(){ select_language = (e) => {
console.log(e)
this.setState({
language: e
})
}
render() {
const { pathname } = this.props.location; const { pathname } = this.props.location;
const { filename } = this.state; const { filename, language } = this.state;
const urlroot = pathname.split("newfile")[1]; const urlroot = pathname.split("newfile")[1];
const file_path = `${urlroot}/${filename}` const file_path = `${urlroot}/${filename}`;
const { projectDetail } = this.props; const { projectDetail } = this.props;
return( const Option = Select.Option;
const languages = [
"apex",
"azcli",
"bat",
"clojure",
"coffee",
"cpp",
"csharp",
"csp",
"css",
"dockerfile",
"fsharp",
"go",
"handlebars",
"html",
"ini",
"java",
"javascript",
"json",
"less",
"lua",
"markdown",
"msdax",
"mysql",
"objective",
"perl",
"pgsql",
"php",
"postiats",
"powerquery",
"powershell",
"pug",
"python",
"r",
"razor",
"redis",
"redshift",
"ruby",
"rust",
"sb",
"scheme",
"scss",
"shell",
"solidity",
"sql",
"st",
"swift",
"typescript",
"vb",
"xml",
"yaml",
];
return (
<React.Fragment> <React.Fragment>
<Top {...this.props} {...this.state}/> <Top {...this.props} {...this.state} />
<div className="main"> <div className="main">
<p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">新建文件</p> <p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">
新建文件
</p>
<div> <div>
<div className="f-wrap-alignCenter mb20"> <div className="grid-item mb20">
<div className="setInputAddon"> <div className="grid-item">
<Input addonBefore={`/${projectDetail && projectDetail.identifier}${urlroot}/`} value={filename} onChange={this.changeFileName} placeholder="命名文件..."/> <div className="setInputAddon">
<Input
addonBefore={`/${
projectDetail && projectDetail.identifier
}${urlroot}/`}
value={filename}
onChange={this.changeFileName}
placeholder="命名文件..."
/>
</div>
<a onClick={this.CancelAddFile} className="color-blue">
取消
</a>
</div>
<div className="text-right">
<Select showSearch={true} placeholder={"请选择文本语言"} style={{ width: 200 }} value={language} onChange={this.select_language}>
<Option value={undefined}>请选择文本语言</Option>
{languages.map((item, key) => {
return <Option value={item}>{item}</Option>;
})}
</Select>
</div>
</div> </div>
<a onClick={this.CancelAddFile} className="color-blue">取消</a> <Meditor
</div> {...this.props}
<Meditor {...this.state}
{...this.props} filepath={`${file_path}`}
{...this.state} language = {language}
filepath={`${file_path}`} content={undefined}
content={""} readOnly={false}
readOnly={false} editorType="new"
editorType="new" ></Meditor>
>
</Meditor>
</div> </div>
</div> </div>
</React.Fragment> </React.Fragment>
) );
} }
} }
export default Index; export default Index;

67
src/forge/Newfile/UserSubmitComponent.js
View File

@ -10,7 +10,7 @@ class UserSubmitComponent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
submitType: "0" submitType: "0",
}; };
} }
@ -52,35 +52,40 @@ class UserSubmitComponent extends Component {
}); });
}; };
// 确认修改文件 // 确认修改文件
UpdateFile=()=>{ UpdateFile = () => {
const { branch , detail,content,filepath}= this.props; const { branch, detail, content, filepath } = this.props;
const { projectsId } = this.props.match.params; const { projectsId } = this.props.match.params;
const { submitType } = this.state; const { submitType } = this.state;
const url =`/repositories/${projectsId}/update_file.json`; const url = `/repositories/${projectsId}/update_file.json`;
this.props.form.validateFieldsAndScroll((err, values) => { this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
axios.put(url,{ axios
filepath:detail.path, .put(url, {
branch: branch, filepath: detail.path,
new_branch: submitType === "1" ? values.branchname : undefined, branch: branch,
content:content, new_branch: submitType === "1" ? values.branchname : undefined,
sha:detail.sha, content: content,
}).then(result=>{ sha: detail.sha,
if(result){ message: values.desc,
const url = `/projects/${projectsId}/coders?url=${detail.path.split("/")[0]}`; })
.then((result) => {
if (result && result.data.status === 1) {
// const url = `/projects/${projectsId}/coders?url=${detail.path.split("/")[0]}`;
// this.props.history.push(url);
const url = values.branchname
? `/projects/${projectsId}/coders?branch=${values.branchname}`
: `/projects/${projectsId}/coders`;
this.props.history.push(url); this.props.history.push(url);
this.props.showNotification("修改成功!"); this.props.showNotification("修改成功!");
}
} })
}).catch(error=>{ .catch((error) => {
console.log(error); console.log(error);
}) });
} }
}) });
};
}
render() { render() {
const { submitType } = this.state; const { submitType } = this.state;
@ -89,7 +94,7 @@ class UserSubmitComponent extends Component {
const { branch, projectsId } = this.props.match.params; const { branch, projectsId } = this.props.match.params;
const { current_user, filepath, projectDetail } = this.props; const { current_user, filepath, projectDetail } = this.props;
const {editor_type} = this.props const { editor_type } = this.props;
const changeSubmitBranch = () => { const changeSubmitBranch = () => {
if (submitType === "1") { if (submitType === "1") {
@ -128,7 +133,7 @@ class UserSubmitComponent extends Component {
alt="" alt=""
className="screwImg" className="screwImg"
/> />
<span className="color-grey-3"> <span className="color-grey-3 ver-middle">
{current_user && current_user.username}： {current_user && current_user.username}：
</span> </span>
</Link> </Link>
@ -138,7 +143,7 @@ class UserSubmitComponent extends Component {
<div className="userScrew"> <div className="userScrew">
<div className="screwPanel"> <div className="screwPanel">
<Form> <Form>
<Form.Item> <Form.Item style={{display: "none"}}>
{getFieldDecorator("path", { {getFieldDecorator("path", {
rules: [], rules: [],
})( })(
@ -155,12 +160,12 @@ class UserSubmitComponent extends Component {
rules: [ rules: [
{ {
required: true, required: true,
message: "请输入合并请求的描述内容", message: "请添加描述信息",
}, },
], ],
})( })(
<TextArea <TextArea
placeholder={`请输入合并请求的描述,(必填)`} placeholder={`必填,描述主要修改类型和内容`}
authSize={{ minRows: 3, maxRows: 5 }} authSize={{ minRows: 3, maxRows: 5 }}
/> />
)} )}
@ -181,7 +186,11 @@ class UserSubmitComponent extends Component {
</div> </div>
</div> </div>
<div className="mt50 text-center"> <div className="mt50 text-center">
<Button type="primary" onClick={editor_type==="new" ? this.subMitFrom : this.UpdateFile} className="mr30"> <Button
type="primary"
onClick={editor_type === "new" ? this.subMitFrom : this.UpdateFile}
className="mr30"
>
提交变更 提交变更
</Button> </Button>
<Button <Button

2
src/forge/Newfile/editor.css
View File

@ -5,4 +5,4 @@
.monaco-editor .margin-view-overlays .current-line{ .monaco-editor .margin-view-overlays .current-line{
background-color: rgba(48,232,132,0.15); background-color: rgba(48,232,132,0.15);
} }
.branchTable .margin-view-overlays{width: 35px !important;} .branchTable .margin-view-overlays{border-right: none !important; background-color: #fcfcfc !important;}

4
src/forge/Newfile/index.css
View File

@ -75,4 +75,6 @@
width: 100%; width: 100%;
margin-right: 0px; margin-right: 0px;
} }
} }
.grid-item{display: grid; align-items: center; grid-template-columns: max-content 1fr;}
.text-right{text-align: right;}

72
src/forge/Newfile/m_editor.js
View File

@ -1,60 +1,72 @@
import React , { Component } from "react"; import React, { Component } from "react";
import Editor from "react-monaco-editor"; import Editor from "react-monaco-editor";
import UserSubmitComponent from './UserSubmitComponent'; import UserSubmitComponent from "./UserSubmitComponent";
import './index.css'; import "./index.css";
import "./editor.css" import "./editor.css";
class m_editor extends Component{ class m_editor extends Component {
constructor(props){ constructor(props) {
super(props); super(props);
this.state={ this.state = {
editorValue:this.props.content, editorValue: this.props.content,
} };
} }
changeEditor=(editorValue)=>{ changeEditor = (editorValue) => {
this.setState({ this.setState({
editorValue editorValue,
}) });
} };
render(){ render() {
const { editorValue } = this.state; const { editorValue } = this.state;
const { readOnly, editorType } = this.props; const { readOnly, editorType, language } = this.props;
const editor_options = { const editor_options = {
lineNumbers: "on", lineNumbers: "on",
selectOnLineNumbers: true, selectOnLineNumbers: true,
lineHeight: 24, lineHeight: 24,
renderLineHighlight: "line",
revealHorizontalRightPadding: 5, revealHorizontalRightPadding: 5,
lineNumbersMinChars: 2,
readOnly: readOnly, readOnly: readOnly,
cursorStyle: readOnly ? "underline-thin" : "line" cursorStyle: readOnly ? "underline-thin" : "line",
} folding: true,
return( foldingStrategy: "indentation", // 代码可分小段折叠
automaticLayout: true, // 自适应布局
overviewRulerBorder: false, // 不要滚动条的边框
scrollBeyondLastLine: false, // 取消代码后面一大段空白
minimap: {
// 不要小地图
enabled: false,
},
};
return (
<React.Fragment> <React.Fragment>
<div> <div>
<div className="branchTable"> <div className="branchTable">
<Editor <Editor
height="320px" height="320px"
language={language ? language : "plaintext"}
theme={"vs-grey"} theme={"vs-grey"}
defaultValue="请输入内容"
value={editorValue} value={editorValue}
options={editor_options} options={editor_options}
onChange={this.changeEditor} onChange={this.changeEditor}
editorWillMount={this.editorWillMount}
/> />
</div> </div>
{!readOnly && <UserSubmitComponent {!readOnly && (
{...this.props} <UserSubmitComponent
{...this.state} {...this.props}
filepath={`${this.props.filepath}`} {...this.state}
content={editorValue} filepath={`${this.props.filepath}`}
editor_type={editorType} content={editorValue}
></UserSubmitComponent> editor_type={editorType}
} ></UserSubmitComponent>
)}
</div> </div>
</React.Fragment> </React.Fragment>
) );
} }
} }
export default m_editor; export default m_editor;

24
src/forge/Order/order.js
View File

@ -1,8 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Input, Dropdown, Menu, Icon, Pagination, Spin, Button} from "antd"; import { Input, Dropdown, Menu, Icon, Pagination, Spin, Button, DatePicker } from "antd";
import "./order.css"; import "./order.css";
// const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
import NoneData from "../Nodata"; import NoneData from "../Nodata";
import OrderItem from "./OrderItem"; import OrderItem from "./OrderItem";
@ -379,20 +379,20 @@ class order extends Component {
<div className="main"> <div className="main">
<div className="topWrapper" style={{ borderBottom: "none", padding: "0" }}> <div className="topWrapper" style={{ borderBottom: "none", padding: "0" }}>
<div> <div>
<span className="mr30"> <span className="mr40">
<span className="mr8 color-grey">所有:</span> <span className="mr8 color-grey">所有:</span>
<Button size="small" type={status_type==="0" ? "primary" : ""} ghost={status_type==="0" ? true : false} onClick={() => this.openorder("0")}>{data && data.all_count}</Button> <Button size="small">{data && data.all_count}</Button>
</span> </span>
<span className="mr30"> <span className="mr40">
<span className="mr8 color-grey">开启中:</span> <span className="mr8 color-grey">开启中:</span>
<Button size="small" type={status_type==="1" ? "primary" : ""} ghost={status_type==="1" ? true : false} onClick={() => this.openorder("1")}>{data && data.open_count}</Button> <Button size="small">{data && data.open_count}</Button>
</span> </span>
<span> <span>
<span className="mr8 color-grey">已关闭:</span> <span className="mr8 color-grey">已关闭:</span>
<Button size="small" type={status_type==="2" ? "primary" : ""} ghost={status_type==="2" ? true : false} onClick={() => this.openorder("2")}>{data && data.close_count}</Button> <Button size="small">{data && data.close_count}</Button>
</span> </span>
</div> </div>
<Button type="primary" onClick={() => this.islogin()} ghost><Icon type="plus" size="16"></Icon>创建任务</Button> <Button type="primary" onClick={() => this.islogin()}><Icon type="plus" size="16"></Icon>创建任务</Button>
</div> </div>
<div className="topWrapper" style={{ borderBottom: "none" }}> <div className="topWrapper" style={{ borderBottom: "none" }}>
@ -404,14 +404,14 @@ class order extends Component {
style={{ width: 350 }} style={{ width: 350 }}
/> />
</div> </div>
{/* <DatePicker showTime onChange={onChange} onOk={onOk} /> */} <DatePicker showTime onChange={onChange} onOk={onOk} />
{/* <br /> */} <br />
{/* <RangePicker <RangePicker
showTime={{ format: 'HH:mm' }} showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
onChange={onChange} onChange={onChange}
onOk={onOk} onOk={onOk}
/> */} />
{/* <p className="topWrapper_type"> {/* <p className="topWrapper_type">
<li <li
className={status_type === "1" ? "active" : ""} className={status_type === "1" ? "active" : ""}

3
src/forge/css/index.css
View File

@ -113,3 +113,6 @@ ul,ol,dl{
width: 100%; width: 100%;
} }
} }
.ver-middle{
vertical-align: middle;
}