import Koa from "koa";
import consola from "consola";
import websockify from "koa-websocket";

const wsOptions = {};
const app = websockify(new Koa(), wsOptions);

app.ws.use((ctx, next) => {
  return next(ctx);
});

app.ws.use((ctx) => {
  ctx.websocket.send("===Hello");
  ctx.websocket.on("message", function (msg) {
    console.log("===recive msg", msg);
  });
  ctx.websocket.on("close", () => {
    console.log("===close websocket");
  });
});

/**
 * Create HTTP server.
 */
const host = process.env.HOST || "localhost";
const port = Number(process.env.PORT) || 3001;

const server = app.listen(port, host, () => {
  consola.ready({
    message: `websocket server listening on ws://${host}:${port}`,
    badge: true,
  });
});

//...
app.use(homeRouter.routes()).use(homeRouter.allowedMethods());
app.use(userRouter.routes()).use(router.allowedMethods());

// app.ts
import koaBody from "koa-body";
//...
app.use(
  koaBody({
    multipart: true,
    formidable: {
      // the max size of uploading file
      maxFileSize: 200 * 1024 * 1024,
    },
  })
);
// homeRouter.ts
function saveFile(file) {
  // 文件读写流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, "/static/upload/") + `/${file.name}`;
  const upStream = fs.createWriteStream(filePath);
  reader.pipe(upStream);
}

homeRouter.post("/upload", async (ctx, next) => {
  // console.log(ctx.request.files);
  const files = ctx.request.files.file;
  // 支持多文件
  if (files.length > 1) {
    for (let file of files) {
      saveFile(file);
    }
  } else if (files) {
    saveFile(files);
  }
  ctx.body = "Upload successfully.";
});

import send from "koa-send";
// homeRouter.ts
homeRouter.get("/download/:filename", async (ctx, next) => {
  let filename = ctx.params.filename;
  let filePath = `./static/download/${filename}`;
  // mime type, active the download window in browser
  ctx.attachment(filePath);
  await send(ctx, filePath);
  console.log("download successfully.");
});

import cors from "koa2-cors";
//...
app.use(
  cors({
    origin: function (ctx) {
      // 设置允许来自指定域名请求
      if (ctx.url === "/test") {
        return "*";
      }
      return "http://localhost:8080";
    },
    maxAge: 5,
    credentials: true,
    allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allowHeaders: ["Content-Type", "Authorization", "Accept"],
    exposeHeaders: ["WWW-Authenticate", "Server-Authorization"],
  })
);
//...

import views from "koa-views";
//...
app.use(
  views(path.join(__dirname, "./views"), {
    extension: "ejs",
  })
);

import koaStatic from "koa-static";
//...
// 静态资源目录(相对入口文件app.ts)
const staticPath = "./static";
app.use(koaStatic(path.join(__dirname, staticPath)));

const path = require('path');
const Koa = require('koa');
const staticServe = require('koa-static');
const router = require('koa-router')();
const send = require('koa-send');
const app = new Koa();
const staticPath = '/static';
const absolutePath = path.join(__dirname + staticPath);

// 指定静态目录
app.use(staticServe(absolutePath));
app.use(async (ctx) => {
    ctx.body = 'hello word'
});
router.get('/file/:name', async (ctx){
    const name = ctx.params.name;
    const path = `static/${name}`;
    ctx.attachment(path);
    await send(ctx, path);
})

app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
  console.log('server is listening in 3000...');
})

fetch()
  .then((res) => {
    return res.blob();
    // txt、base64或其他文本类的文件可用以下方式解析
    // return res.text()
  })
  .then((res) => {
    // 下载文件示例
    let url = URL.createObjectURL(new Blob([res]));
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.download = `image.png`;
    document.body.appendChild(link);
    link.click();
    // 解析base64
    // const data = window.atob(res)
  });

const koaBody = require('koa-body');
// ...
app.use(koaBody({
    multipart: true,
    // formidable: {
    //   默认限制只有2M，超过会报错
    //   maxFileSize: 100*1024*1024
    // }
}));
router.post('/upload', async (ctx){
    const file = ctx.request.body.files.file;
    const reader = fs.createReadStream(file.path);
    const upStream = fs.createWriteStream(`upload/${file.name}`);
    reader.pipe(upStream);
    return ctx.body = '上传成功';
})
// ...

const formData = new FormData();
formData.append("file", input.files[0]);
formData.append("user", "Lucas");
fetch(url, {
  method: "POST",
  body: formData,
});

import { registerMicroApps, start, setDefaultMountApp } from "qiankun";

registerMicroApps([
  {
    name: "reactApp",
    // 需要确保斜线结尾，防止资源加载异常
    entry: "/project/app1/",
    container: "#app1-root",
    activeRule: "/app1",
  },
  {
    name: "vueApp",
    entry: "/project/app2/",
    container: "#app2-root",
    activeRule: "/app2",
  },
]);

// 启动 qiankun
start({
  // 去除baidu脚本的跨域限制
  // 注意：这种方式只支持异步引入baidu sdk，不支持在script标签引入
  excludeAssetFilter: (url) => {
    return url.indexOf("api.map.baidu.com") !== -1;
  },
});
// 设置默认启动应用
setDefaultMountApp("/app1");

function loadBaiduJssdk(url) {
  return new Promise((resolve, reject) => {
    const scriptEl = document.createElement("script");
    scriptEl.type = "text/javascript";
    scriptEl.src = url;
    document.body.appendChild(scriptEl);
    scriptEl.onload = resolve;
    scriptEl.onerror = reject;
  });
}
// 异步加载
async function initMap() {
  await loadBaiduJssdk("https://api.map.baidu.com/api?v=3.0&ak=你的密钥");
}

// config-overrides.js
const setOutputForQiankun = () => (config) => {
  config.output.library = `${name}`;
  config.output.libraryTarget = "umd";
  config.output.globalObject = "window";
  return config;
};
// ...
module.exports = {
    webpack: override(
        setOutputForQiankun(),
        // ...
    )
    devServer: overrideDevServer((config) => {
        config.historyApiFallback = true;
        config.open = false;
        config.headers = {
          "Access-Control-Allow-Origin": "*",
        };
        return config;
    }),
}

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// config-overrides.js
const addLessLoader = require("customize-cra-less-loader");
//...
addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    sourceMap: false,
  },
}),

// ...
rules: [
  {
    test: /\.png$/i,
    use: 'file-loader'
  },
  {
    test: /\.(jpg|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 1024,
        },
      },
    ],
  }
],
// 改成
// ...
rules: [
  {
    test: /\.png$/i,
    use: 'asset/resource'
  },
  {
    test: /\.(jpg|gif)$/i,
    type: 'asset',
    parser: {
      dataurlCondition: {
        maxSize: 1024 // 单位是B
      }
    }
  }
],

// config-overrides.js
// ...
  addWebpackModuleRule({
      test: /\.(png|jpe?g|gif|webp|svg|bmp|ttf|eot|woff|woff2)$/i,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 1024 * 1024,
        },
      },
      generator: {
        filename: "img/[name].[hash:4][ext]",
        publicPath: process.env.PUBLIC_URL,
      },
    }),
    addWebpackModuleRule({
      test: /\.(objs?|mtl)$/i,
      type: "asset/resource",
      generator: {
        filename: "model/[name].[hash:4][ext]",
        publicPath: process.env.PUBLIC_URL,
      },
    }),
// ...

cache: {
    // memory(内存)|filesystem(持久化缓存)
    type: "filesystem",
    buildDependencies: {
        config: [__filename],
    },
    version: '1.0'
}

const webpackMerge = require("webpack-merge");
const ManifestPlugin = require("webpack-manifest-plugin");
// 改成
const { merge: WebpackMerge } = require("webpack-merge");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");

// package.json
{
  "scripts": {
    "serve": "webpack-dev-server --config webpack.config.dev.js"
  }
}
// 改成
{
  "scripts": {
    "serve": "webpack server --config webpack.config.dev.js"
  }
}

devtool: "cheap-eval-module-source-map";
// 改成
devtool: "eval-cheap-module-source-map";

import { name } from "package.json";
// 改为
import pkgInfo from "package.json";
const { name } = pkgInfo;

// config-overrides.js
module.exports = {
  webpack: override(
    // ...
    isProduction &&
      setWebpackOptimizationSplitChunks({
        chunks: "all",
        cacheGroups: {
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)/,
            name: "react",
            priority: 1,
          },
          three: {
            test: /[\\/]node_modules[\\/](three)/,
            name: "three",
            priority: 1,
          },
          antd: {
            test: /[\\/]node_modules[\\/](antd|@ant-design)/,
            name: "antd",
            priority: 1,
          },
          echarts: {
            test: /[\\/]node_modules[\\/](echarts|zrender)/,
            name: "echarts",
            priority: -1,
          },
          antv: {
            test: /[\\/]node_modules[\\/](@antv)/,
            name: "antv",
            priority: -1,
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendor",
            priority: -5,
          },
        },
      })
  ),
};
// ...

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "no-var-requires": 0,
  },
};

module.exports = {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-less",
};

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

const { override, addWebpackAlias } = require("customize-cra");
const path = require("path");

module.exports = {
  webpack: override(
    // 配置alias
    addWebpackAlias({
      ["@"]: path.resolve(__dirname, "src"),
      ["components"]: path.resolve(__dirname, "src/components"),
      ["mock"]: path.resolve(__dirname, "src/mock"),
    })
  ),
};

// config-overrides.js
const { override } = require("customize-cra");
// 需要先安装 yarn add customize-cra-less-loader -D
const addLessLoader = require("customize-cra-less-loader");

module.exports = {
  webpack: override(
    // ...
    // 添加less解析器
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        sourceMap: false,
        // modifyVars: { '@primary-color': '#1DA57A' },
      },
    })
  ),
  // ...
};

declare module '*.less' {
 const content: { [className: string]: string };
 export default content;
}

const { override, adjustStyleLoaders } = require("customize-cra");

module.exports = {
  webpack: override(
    //...
    adjustStyleLoaders((rule) => {
      if (rule.test.toString().includes("less")) {
        rule.use.push({
          loader: "style-resources-loader",
          options: {
            patterns: path.resolve(__dirname, "src/styles/global.less"),
            injector: "append",
          },
        });
      }
    })
  ),
};

// config-overrides.js
const chalk = require('chalk');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
// ...
module.exports = {
  webpack: override(
    // ...
    addWebpackPlugin(
      new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`,
    }),
  ),
}