From 328cae4665aea161a128de1e9b0bdc6937a6ab78 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Wed, 22 Oct 2025 15:07:11 +0800 Subject: [PATCH] init --- .editorconfig | 13 ++++ .gitignore | 14 ++++ .vscode/settings.json | 47 ++++++++++++++ README.md | 75 +++++++++++++++++++++ blessed_by_buddha.js | 66 +++++++++++++++++++ eslint.config.js | 48 ++++++++++++++ jjb.babel.js | 23 +++++++ jjb.config.js | 75 +++++++++++++++++++++ jsconfig.json | 9 +++ package.json | 47 ++++++++++++++ public/index.html | 54 +++++++++++++++ src/api/global/index.js | 11 ++++ src/components/index.js | 1 + src/enumerate/constant/index.js | 5 ++ src/enumerate/context/index.js | 8 +++ src/enumerate/namespace/index.js | 7 ++ src/main.js | 47 ++++++++++++++ src/pages/Container/Entry/index.js | 31 +++++++++ src/pages/Container/index.js | 101 +++++++++++++++++++++++++++++ src/pages/index.js | 8 +++ webstorm.config.js | 16 +++++ 21 files changed, 706 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 blessed_by_buddha.js create mode 100644 eslint.config.js create mode 100644 jjb.babel.js create mode 100644 jjb.config.js create mode 100644 jsconfig.json create mode 100644 package.json create mode 100644 public/index.html create mode 100644 src/api/global/index.js create mode 100644 src/components/index.js create mode 100644 src/enumerate/constant/index.js create mode 100644 src/enumerate/context/index.js create mode 100644 src/enumerate/namespace/index.js create mode 100644 src/main.js create mode 100644 src/pages/Container/Entry/index.js create mode 100644 src/pages/Container/index.js create mode 100644 src/pages/index.js create mode 100644 webstorm.config.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..271822f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b840685 --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# production +/dist +/demo + +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.idea +yarn.lock \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..96ed201 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,47 @@ +{ + "prettier.enable": false, + "editor.formatOnSave": false, + + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" + }, + + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off", "fixable": true }, + { "rule": "format/*", "severity": "off", "fixable": true }, + { "rule": "*-indent", "severity": "off", "fixable": true }, + { "rule": "*-spacing", "severity": "off", "fixable": true }, + { "rule": "*-spaces", "severity": "off", "fixable": true }, + { "rule": "*-order", "severity": "off", "fixable": true }, + { "rule": "*-dangle", "severity": "off", "fixable": true }, + { "rule": "*-newline", "severity": "off", "fixable": true }, + { "rule": "*quotes", "severity": "off", "fixable": true }, + { "rule": "*semi", "severity": "off", "fixable": true } + ], + + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "markdown", + "json", + "json5", + "jsonc", + "yaml", + "toml", + "xml", + "gql", + "graphql", + "astro", + "svelte", + "css", + "less", + "scss", + "pcss", + "postcss" + ] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..a3da031 --- /dev/null +++ b/README.md @@ -0,0 +1,75 @@ +# 微应用模板说明文档 + +## 在线文档 + +https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko + + +## 安装依赖 +项目依赖可通过 **yarn** 或 **npm** 进行安装： + +```bash +# 使用 yarn +yarn + +# 或使用 npm +npm i +``` + +## 开发服务&打包应用 + +```bash +# 启动开发服务 +yarn serve: +# 或 +npm run serve: + +# 开发环境打包 +yarn build: +# 或 +npm run build: +``` + +## 路由配置&路由访问&自动化路由 +所有页面必须放在`src/pages/container`目录下，启动访问页面请在浏览器地址栏输入`//container/<你的路由页面文件名称>` +解释： +1. 所有页面组件命名为`index.js`或`index.jsx`，必须放在一个首字母大写的文件中。 +2. `container`为固定路径访问格式 +3. ``为应用的唯一标识符，也是应用路由的`basename`，在底座中用于区分其他应用。可在根目录 `jjb.config.js` 文件的 `appIdentifier` 节点中进行修改。 +4. 自动化路由将根据`pages/container`中的路由页面文件自动生成路由树。 +5. `id`匹配路由，文件夹命名`_id` + +## 应用接口环境配置 +应用接口环境相关配置在根目录 `jjb.config.js` 文件的 `environment` 节点中进行定义。 + +## 应用开发服务配置 +应用开发服务相关配置在根目录 `jjb.config.js` 文件的 `server` 节点中进行定义。 + +## Babel 配置 +应用的 `Babel` 配置在根目录 `jjb.babel.js` 文件中进行管理。 + +## 目录说明 + +1. `src/api/` 配置各个 store 模块的接口数据。 +2. `src/components/` 全局公共组件。 +3. `src/enumerate/` 全局各种枚举配置。 +4. `src/pages/` 页面文件目录。 +5. `src/main.js` 应用的入口文件。 + +## 核心依赖 +1. `@cqsjjb/jjb-common-decorator` + 1. 公共装饰器库，内部包含： + 1. 按钮权限处理 + 2. antd/Table 控制 + 3. 文本重命名处理 + 4. 具体使用方式可参考各个模块的 `d.ts`。 +2. `@cqsjjb/jjb-common-lib` + 1. 公共工具库，具体 API 使用请查看 `d.ts` +3. `@cqsjjb/jjb-dva-runtime` + 1. 核心运行时，基于 `dvajs` 实现。 + 1. 应用核心依赖模块 + 2. 应用的自动化路由 + 3. `store` 模块接口数据处理 + 4. 均基于此依赖实现，具体使用方式请查看 `d.ts`。 +4. `@cqsjjb/jjb-react-admin-component` + 1. 公共组件库，具体组件使用方式请查看 `d.ts`。 diff --git a/blessed_by_buddha.js b/blessed_by_buddha.js new file mode 100644 index 0000000..340fa53 --- /dev/null +++ b/blessed_by_buddha.js @@ -0,0 +1,66 @@ +/* + _ooOoo_ + o8888888o + 88" . "88 + (| -_- |) + O\ = /O + ____/`---'\____ + . ' \\| |// `. + / \\||| : |||// \ + / _||||| -:- |||||- \ + | | \\\ - /// | | + | \_| ''\---/'' | | + \ .-\__ `-` ___/-. / + ___`. .' /--.--\ `. . __ + ."" '< `.___\_<|>_/___.' >'"". + | | : `- \`.;`\ _ /`;.`/ - ` : | | + \ \ `-. \_ __\ /__ _/ .-` / / + ======`-.____`-.___\_____/___.-`____.-'====== + `=---=' + + ............................................. + 佛祖保佑 永无BUG + 佛曰: + 写字楼里写字间，写字间里程序员； + 程序人员写程序，又拿程序换酒钱。 + 酒醒只在网上坐，酒醉还来网下眠； + 酒醉酒醒日复日，网上网下年复年。 + 但愿老死电脑间，不愿鞠躬老板前； + 奔驰宝马贵者趣，公交自行程序员。 + 别人笑我忒疯癫，我笑自己命太贱； + 不见满街漂亮妹，哪个归得程序员？ + */ + +const blessedByBuddha + = "%c _ooOoo_\n" + + " o8888888o\n" + + " 88\" . \"88\n" + + " (| -_- |)\n" + + " O\\ = /O\n" + + " ____/`---'\\____\n" + + " . ' \\\\| |// `.\n" + + " / \\\\||| : |||// \\\n" + + " / _||||| -:- |||||- \\\n" + + " | | \\\\\\ - /// | |\n" + + " | \\_| ''\\---/'' | |\n" + + " \\ .-\\__ `-` ___/-. /\n" + + " ___`. .' /--.--\\ `. . __\n" + + " .\"\" '< `.___\\_<|>_/___.' >'\"\".\n" + + " | | : `- \\`.;`\\ _ /`;.`/ - ` : | |\n" + + " \\ \\ `-. \\_ __\\ /__ _/ .-` / /\n" + + " ======`-.____`-.___\\_____/___.-`____.-'======\n" + + " `=---='\n" + + "\n" + + "%c .............................................\n" + + " 佛祖保佑 永无BUG\n" + + "\n" + + "%c 佛曰:\n" + + " 写字楼里写字间，写字间里程序员；\n" + + " 程序人员写程序，又拿程序换酒钱。\n" + + " 酒醒只在网上坐，酒醉还来网下眠；\n" + + " 酒醉酒醒日复日，网上网下年复年。\n" + + " 但愿老死电脑间，不愿鞠躬老板前；\n" + + " 奔驰宝马贵者趣，公交自行程序员。\n" + + " 别人笑我忒疯癫，我笑自己命太贱；\n" + + " 不见满街漂亮妹，哪个归得程序员？"; +console.log(blessedByBuddha, "color:#ffd700", "color:red", "color:#1e80ff"); diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..06fcf00 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,48 @@ +import antfu from "@antfu/eslint-config"; + +export default antfu({ + formatters: { + html: false, + css: true, + }, + test: false, + typescript: true, + react: true, + vue: false, + markdown: false, + stylistic: { + semi: true, + quotes: "double", + }, + overrides: { + react: { + "react/no-comment-textnodes": "off", + "react-hooks-extra/no-unnecessary-use-prefix": "off", + "react-hooks-extra/prefer-use-state-lazy-initialization": "off", + "react-hooks/exhaustive-deps": "off", + }, + javascript: { + "no-console": process.env.NODE_ENV === "production" ? "error" : "warn", + "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn", + "no-alert": process.env.NODE_ENV === "production" ? "error" : "warn", + "no-restricted-syntax": [ + "error", + { + selector: "VariableDeclarator[id.name='pd']", + message: "不允许使用 pd，请改用有语义化的变量名", + }, + { + selector: "ObjectExpression > Property[key.name='pd']", + message: "不允许使用 pd，请改用有语义化的变量名", + }, + ], + "no-unused-vars": ["error", { varsIgnorePattern: "^React$" }], + }, + }, + rules: { + "antfu/top-level-function": "off", + "node/prefer-global/process": "off", + "dot-notation": "off", + "linebreak-style": ["off", "windows"], + }, +}); diff --git a/jjb.babel.js b/jjb.babel.js new file mode 100644 index 0000000..e58cbef --- /dev/null +++ b/jjb.babel.js @@ -0,0 +1,23 @@ +module.exports = { + compact: false, + // 插件 + plugins: [ + [ + "@babel/plugin-proposal-decorators", + { + legacy: true, + }, + ], + ], + // 预设 + presets: [ + ["@babel/preset-env", { + targets: { + browsers: ["ie >= 10"], + }, + }], + ["@babel/preset-react", { + runtime: "automatic", + }], + ], +}; diff --git a/jjb.config.js b/jjb.config.js new file mode 100644 index 0000000..7146147 --- /dev/null +++ b/jjb.config.js @@ -0,0 +1,75 @@ +module.exports = { + // 应用后端git地址，部署上线需要 + javaGit: "", + // 应用后端仓库名称，部署上线需要 + javaGitName: "", + // 环境配置 + environment: { + development: { + // 应用后端分支名称，部署上线需要 + javaGitBranch: "", + // 接口服务地址 + API_HOST: "开发环境后端地址", + }, + production: { + // 应用后端分支名称，部署上线需要 + javaGitBranch: "", + // 接口服务地址 + API_HOST: "", + }, + }, + // 应用唯一标识符 + appIdentifier: "唯一应用标识", + // 应用上下文注入全局变量 + contextInject: { + // 应用Key + appKey: "", + fileUrl: "附件地址", + }, + // public/index.html注入全局变量 + windowInject: { + // 应用标题 + title: "微应用模板", + // 注入css链接集合 + links: [], + element: { + root: { + // 挂载DOM元素ID + id: "root", + }, + }, + // 注入js链接集合 + scripts: [], + }, + // 开发服务 + server: { + // 监听端口号 + port: "8080", + // 服务地址 + host: "127.0.0.1", + // 是否自动打开浏览器 + open: true, + }, + // 框架 + framework: { + // ant-design + antd: { + // 全局antd-class-name前缀 + "ant-prefix": "micro-temp", + // 全局字体 + "fontFamily": "PingFangSC-Regular", + // 全局主题色 + "colorPrimary": "#1677ff", + // 全局圆角 + "borderRadius": 2, + }, + }, + // webpack + webpackConfig: { + // 单页面插件 + htmlWebpackPluginOption: { + // 自动注入编译后的文件到public/index.html中 + inject: true, + }, + }, +}; diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..4cf89dc --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "~/*": ["*"] + } + }, + "include": ["src"] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..eedcbd8 --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "micro-app", + "version": "2.0.0", + "description": "建教帮微应用模板", + "author": "JJB", + "license": "MIT", + "main": "index.js", + "scripts": { + "serve": "node node_modules/@cqsjjb/scripts/webpack.dev.server.js", + "build": "node node_modules/@cqsjjb/scripts/webpack.build.js", + "push": "jjb-cmd push java production", + "clean-cache": "rimraf node_modules/.cache/webpack", + "serve:development": "cross-env NODE_ENV=development npm run serve", + "serve:production": "cross-env NODE_ENV=production npm run serve", + "build:development": "cross-env NODE_ENV=development npm run build", + "build:production": "cross-env NODE_ENV=production npm run build", + "code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js", + "lint": "eslint --ext .js,.jsx,.tsx --fix src" + }, + "dependencies": { + "@ant-design/icons": "latest", + "@ant-design/pro-components": "^2.8.10", + "@cqsjjb/jjb-common-decorator": "latest", + "@cqsjjb/jjb-common-lib": "latest", + "@cqsjjb/jjb-dva-runtime": "latest", + "@cqsjjb/jjb-react-admin-component": "latest", + "ahooks": "^3.9.5", + "antd": "latest", + "dayjs": "^1.11.7", + "lodash-es": "^4.17.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "zy-react-library": "^1.0.0" + }, + "devDependencies": { + "@antfu/eslint-config": "^5.4.1", + "@babel/plugin-proposal-decorators": "^7.19.3", + "@cqsjjb/scripts": "latest", + "@eslint-react/eslint-plugin": "^2.2.2", + "cross-env": "^7.0.3", + "eslint": "^9.37.0", + "eslint-plugin-format": "^1.0.2", + "eslint-plugin-react-hooks": "^7.0.0", + "eslint-plugin-react-refresh": "^0.4.23", + "typescript": "^5.9.3" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..41c84f7 --- /dev/null +++ b/public/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + <% for (const item of $links) { %> + + <% } %> + -- + + + <% for (const item of $scripts) { %> + + <% } %> + + + + + + <% const { root } = $element; %> +
+ + diff --git a/src/api/global/index.js b/src/api/global/index.js new file mode 100644 index 0000000..ba35796 --- /dev/null +++ b/src/api/global/index.js @@ -0,0 +1,11 @@ +export {}; + +// export const riskList = declareRequest( +// "loading", +// "Post > @/xxx", +// "dataSource: [] | res.data || [] & total: 0 | res.totalCount || 0 & pageIndex: 1 | res.pageIndex || 1 & pageSize: 10 | res.pageSize || 10", +// ); +// export const riskDelete = declareRequest( +// "loading", +// "Delete > @/xxx/{id}", +// ); diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/src/components/index.js @@ -0,0 +1 @@ +export {}; diff --git a/src/enumerate/constant/index.js b/src/enumerate/constant/index.js new file mode 100644 index 0000000..f077757 --- /dev/null +++ b/src/enumerate/constant/index.js @@ -0,0 +1,5 @@ +/** + * 全局常量定义 + */ + +export {}; diff --git a/src/enumerate/context/index.js b/src/enumerate/context/index.js new file mode 100644 index 0000000..2b11e05 --- /dev/null +++ b/src/enumerate/context/index.js @@ -0,0 +1,8 @@ +/** + * 全局上下文定义 + */ + +import React from "react"; + +// 获取antd全局静态方法 +export const InjectContext = React.createContext({}); diff --git a/src/enumerate/namespace/index.js b/src/enumerate/namespace/index.js new file mode 100644 index 0000000..b392d90 --- /dev/null +++ b/src/enumerate/namespace/index.js @@ -0,0 +1,7 @@ +/** + * 全局数据状态管理模块定义 + */ + +import { defineNamespace } from "@cqsjjb/jjb-dva-runtime"; + +export const NS_GLOBAL = defineNamespace("global"); diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c1cdccb --- /dev/null +++ b/src/main.js @@ -0,0 +1,47 @@ +import { setJJBCommonAntdMessage } from "@cqsjjb/jjb-common-lib"; +import { setup } from "@cqsjjb/jjb-dva-runtime"; +import { message } from "antd"; +import dayjs from "dayjs"; +import "dayjs/locale/zh-cn"; +import "../blessed_by_buddha"; + +require("antd/dist/reset.css"); + +dayjs.locale("zh-cn"); +setJJBCommonAntdMessage(message); + +const app = setup(); + +// 非底座环境运行 +if (!window.__POWERED_BY_QIANKUN__) { + // 云组件默认依赖 + window.__coreLib = {}; + window.__coreLib.React = require("react"); + window.__coreLib.ReactDOM = require("react-dom"); + window.__coreLib.jjbCommonLib = require("@cqsjjb/jjb-common-lib"); +} + +/** + * @description 挂载 + * @param props {{ setGlobalState: ({ rendered: boolean }) => void }} + * @returns {Promise<*>} '' + */ +export const mount = async (props) => { + // 云组件默认依赖 + window.__coreLib.React = require("react"); + window.__coreLib.ReactDOM = require("react-dom"); + window.__coreLib.jjbCommonLib = require("@cqsjjb/jjb-common-lib"); + app.mount(props); +}; + +/** + * @description 卸载 + * @param props {object} + * @returns {Promise<*>} '' + */ +export const unmount = async props => app.unmount(props); +/** + * @description 启动 + * @param props + */ +export const bootstrap = async props => app.bootstrap(props); diff --git a/src/pages/Container/Entry/index.js b/src/pages/Container/Entry/index.js new file mode 100644 index 0000000..c51ecfd --- /dev/null +++ b/src/pages/Container/Entry/index.js @@ -0,0 +1,31 @@ +import { ImportCore } from "@cqsjjb/jjb-common-decorator/module"; +import React from "react"; + +export default class Entry extends React.Component { + state = { + Component: undefined, + }; + + componentDidMount() { + if (process.env.app.appKey) { + ImportCore({ + name: "$", + from: "https://cdn.cqjjb.cn/jcloud/use/plugin/b31c9840a57f11ef91cf7f3cabbb7484/latest", + }).then((res) => { + if (res.status) { + this.setState({ Component: res.module?.default }); + } + }); + } + } + + render() { + const { Component } = this.state; + return (Component && process.env.app.appKey) && ( + + ); + } +} diff --git a/src/pages/Container/index.js b/src/pages/Container/index.js new file mode 100644 index 0000000..c26d322 --- /dev/null +++ b/src/pages/Container/index.js @@ -0,0 +1,101 @@ +import { ImportCore } from "@cqsjjb/jjb-common-decorator/module"; +import { theme as antdTheme, App, ConfigProvider } from "antd"; +import language from "antd/locale/zh_CN"; +import React from "react"; + +import { InjectContext } from "~/enumerate/context"; + +export default class Container extends React.Component { + state = window?.base?.themeConfig || { + algorithm: window.process.env.app.antd.algorithm, + borderRadius: window.process.env.app.antd.borderRadius, + colorPrimary: window.process.env.app.antd.colorPrimary, + }; + + get token() { + const { + colorPrimary, + borderRadius, + } = this.state; + return { + fontFamily: window.process.env.app.antd.fontFamily, + colorPrimary, + borderRadius, + }; + } + + get algorithm() { + return antdTheme[this.state.algorithm]; + } + + componentDidMount() { + if (window.__IN_BASE__) { + // eslint-disable-next-line react-web-api/no-leaked-event-listener + window.base.addEventListener("EVENT_THEME_CONTROL", (e) => { + const config = e.data; + this.setState({ [config.field]: config.value }); + }); + } + } + + render() { + return ( + + + + + + ); + } +} + +function AppMiddle(props) { + return ( + + {process.env.NODE_ENV === "development" + ? props.children + : ( + + {props.children} + + )} + + ); +} + +class Interceptor extends React.Component { + state = { + Component: undefined, + }; + + componentDidMount() { + if (process.env.app.appKey) { + ImportCore({ + name: "$", + from: "https://cdn.cqjjb.cn/jcloud/use/plugin/b31c9840a57f11ef91cf7f3cabbb7484/latest", + }).then(async (res) => { + if (res.status) { + this.setState({ Component: res.module?.PageCover }); + } + }); + } + } + + render() { + const { Component } = this.state; + return (Component && process.env.app.appKey && process.env.NODE_ENV === "development") + ? ( + + {this.props.children} + + ) + : this.props.children; + } +} diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..64c36bb --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,8 @@ +export default function () { + return ( +

+ 底座微应用模板，技术文档： + https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko +

+ ); +} diff --git a/webstorm.config.js b/webstorm.config.js new file mode 100644 index 0000000..ca262cd --- /dev/null +++ b/webstorm.config.js @@ -0,0 +1,16 @@ +"use strict"; +const path = require("node:path"); + +function resolve(dir) { + return path.join(__dirname, ".", dir); +} + +module.exports = { + context: path.resolve(__dirname, "./"), + resolve: { + extensions: [".js"], + alias: { + "~": resolve("src/"), + }, + }, +};