init

2026-02-02 08:43:26 +08:00 · 2026-02-02 08:43:26 +08:00 · e487599478
commit e487599478
24 changed files with 1106 additions and 0 deletions
--- a/.editorconfig
+++ 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
--- a/.gitignore
+++ 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
--- a/.vscode/settings.json
+++ 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"
+  ]
+}
--- a/README.md
+++ 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:<env>
+# 或
+npm run serve:<env>
+
+# 开发环境打包
+yarn build:<env>
+# 或
+npm run build:<env>
+```
+
+## 路由配置&路由访问&自动化路由
+所有页面必须放在`src/pages/container`目录下，启动访问页面请在浏览器地址栏输入`/<appIdentifier>/container/<你的路由页面文件名称>`
+解释：
+1. 所有页面组件命名为`index.js`或`index.jsx`，必须放在一个首字母大写的文件中。
+2. `container`为固定路径访问格式
+3. `<appIdentifier>`为应用的唯一标识符，也是应用路由的`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`。
--- a/blessed_by_buddha.js
+++ 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");
--- a/eslint.config.js
+++ 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"],
+  },
+});
--- a/jjb.babel.js
+++ 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",
+    }],
+  ],
+};
--- a/jjb.config.js
+++ b/jjb.config.js
@ -0,0 +1,77 @@
+module.exports = {
+  // 应用后端git地址，部署上线需要
+  javaGit: "<git-url>",
+  // 应用后端仓库名称，部署上线需要
+  javaGitName: "<git-name>",
+  // 环境配置
+  environment: {
+    development: {
+      // 应用后端分支名称，部署上线需要
+      javaGitBranch: "<branch-name>",
+      // 接口服务地址
+      API_HOST: "https://gbs-gateway.qhdsafety.com",
+      // API_HOST: "http://192.168.20.100:30140",
+    },
+    production: {
+      // 应用后端分支名称，部署上线需要
+      javaGitBranch: "<branch-name>",
+      // 接口服务地址
+      API_HOST: "",
+    },
+  },
+  // 应用唯一标识符
+  appIdentifier: "appmenu",
+  // 应用上下文注入全局变量
+  contextInject: {
+    // 应用Key
+    appKey: "",
+    // fileUrl: "http://192.168.20.240:9787/mnt/",
+    fileUrl: "https://jpfz.qhdsafety.com/gbsFileTest/",
+  },
+  // public/index.html注入全局变量
+  windowInject: {
+    // 应用标题
+    title: "微应用模板",
+    // 注入css链接集合
+    links: [],
+    element: {
+      root: {
+        // 挂载DOM元素ID
+        id: "root",
+      },
+    },
+    // 注入js链接集合
+    scripts: [],
+  },
+  // 开发服务
+  server: {
+    // 监听端口号
+    port: "8086",
+    // 服务地址
+    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,
+    },
+  },
+};
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "~/*": ["*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,48 @@
+{
+  "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": {
+    "@ahooksjs/use-url-state": "^3.5.1",
+    "@ant-design/icons": "^5.6.1",
+    "@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": "^5.27.6",
+    "dayjs": "^1.11.7",
+    "lodash-es": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zy-react-library": "latest"
+  },
+  "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"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,54 @@
+<!--BEGIN-->
+<!--<% var { env: $env, process: $process, mode: $mode, builtInfo: $builtInfo, links: $links, redirectLogin: $redirectLogin, framework: $framework, scripts: $scripts, element: $element } = htmlWebpackPlugin.options %>-->
+<!--<% var { appKey: $appKey, antd: $antd, basename: $basename, API_HOST: $API_HOST } = $process %>-->
+<!--<% var { ['ant-prefix']: $antPrefix, fontFamily: $fontFamily, colorPrimary: $colorPrimary, borderRadius: $borderRadius } = $antd %>-->
+<!--NED-->
+<!DOCTYPE html>
+<html lang="zh">
+<head data-built-info="<%= $builtInfo %>">
+  <meta charset="UTF-8"/>
+  <meta name="renderer" content="webkit"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
+  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
+  <% for (const item of $links) { %>
+  <link type="text/css" rel="stylesheet" href="<%= item %>"></link>
+  <% } %>
+  <title>--</title>
+  <script>
+    (function () {
+      const APP_ENV = {
+        antd: {
+          'ant-prefix': '<%= $antPrefix %>',
+          fontFamily: '<%= $fontFamily %>',
+          colorPrimary: '<%= $colorPrimary %>',
+          borderRadius: parseInt('<%= $borderRadius %>')
+        },
+        appKey: '<%= $appKey %>',
+        basename: '<%= $basename %>',
+        API_HOST: '<%= $API_HOST %>'
+      };
+      APP_ENV.API_HOST = sessionStorage.API_HOST || APP_ENV.API_HOST || window.location.origin;
+      window.process = {
+        env: { app: APP_ENV },
+        NODE_ENV: '<%= $mode %>'
+      };
+      window.__JJB_ENVIRONMENT__ = {
+        API_HOST: APP_ENV.API_HOST,
+        redirect: '<%= $redirectLogin %>',
+        FRAMEWORK: APP_ENV.antd
+      };
+    })();
+  </script>
+  <!--  SCRIPTS  -->
+  <% for (const item of $scripts) { %>
+  <script src="<%= item %>" type="text/javascript"></script>
+  <% } %>
+</head>
+<body>
+  <!-- NOSCRIPT -->
+  <noscript>此网页需要开启JavaScript功能。</noscript>
+  <!-- MAIN -->
+  <% const { root } = $element; %>
+  <div id="<%= root.id %>" style="width: 100%; height: 100%; position: relative;overflow-y: auto"></div>
+</body>
+</html>
--- a/src/api/appMenu/index.js
+++ b/src/api/appMenu/index.js
@ -0,0 +1,34 @@
+import { declareRequest } from "@cqsjjb/jjb-dva-runtime";
+
+export const appMenuListTree = declareRequest(
+  "appMenuLoading",
+  `Get > /appmenu/appMenu/listTree`,
+);
+export const appMenuAdd = declareRequest(
+  "appMenuLoading",
+  `Post > @/appmenu/appMenu/save`,
+);
+export const appMenuDelete = declareRequest(
+  "appMenuLoading",
+  `Delete > @/appmenu/appMenu/{id}`,
+);
+export const appMenuUpdate = declareRequest(
+  "appMenuLoading",
+  `Put > @/appmenu/appMenu/edit`,
+);
+export const appMenuInfo = declareRequest(
+  "appMenuLoading",
+  `Get > /appmenu/appMenu/{id}`,
+);
+export const appMenuPermsGroupsList = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /system/operation/perms-groups`,
+);
+export const appMenuDistributionMenu = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Post > @/appmenu/roleMenu/saveBatch`,
+);
+export const appMenuGetAlreadyDistributionMenu = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/roleMenu/listAllByRoleIdByPc`,
+);
--- a/src/api/global/index.js
+++ 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}",
+// );
--- a/src/components/index.js
+++ b/src/components/index.js
@ -0,0 +1 @@
+export {};
--- a/src/enumerate/constant/index.js
+++ b/src/enumerate/constant/index.js
@ -0,0 +1,5 @@
+/**
+ * 全局常量定义
+ */
+
+export {};
--- a/src/enumerate/context/index.js
+++ b/src/enumerate/context/index.js
@ -0,0 +1,8 @@
+/**
+ * 全局上下文定义
+ */
+
+import React from "react";
+
+// 获取antd全局静态方法
+export const InjectContext = React.createContext({});
--- a/src/enumerate/namespace/index.js
+++ b/src/enumerate/namespace/index.js
@ -0,0 +1,8 @@
+/**
+ * 全局数据状态管理模块定义
+ */
+
+import { defineNamespace } from "@cqsjjb/jjb-dva-runtime";
+
+export const NS_GLOBAL = defineNamespace("global");
+export const NS_APP_MENU = defineNamespace("appMenu");
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,48 @@
+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");
+require("zy-react-library/css/common.less");
+
+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);
--- a/src/pages/Container/AppMenu/DistributionMenu/index.js
+++ b/src/pages/Container/AppMenu/DistributionMenu/index.js
@ -0,0 +1,125 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Button, message, Modal, Space, Tree } from "antd";
+import { useEffect, useRef, useState } from "react";
+import Page from "zy-react-library/components/Page";
+import Table from "zy-react-library/components/Table";
+import useTable from "zy-react-library/hooks/useTable";
+import { NS_APP_MENU } from "~/enumerate/namespace";
+
+function DistributionMenu(props) {
+  const [currentId, setCurrentId] = useState("");
+  const [distributionMenuModalVisible, setDistributionMenuModalVisible] = useState(false);
+
+  const { tableProps, getData } = useTable(props["appMenuPermsGroupsList"]);
+
+  return (
+    <Page isShowAllAction={false}>
+      <Table
+        columns={[
+          { title: "权限组名称", dataIndex: "permsGroupName" },
+          { title: "权限类型", dataIndex: ["groupTypeEnum", "label"] },
+          { title: "启用状态", dataIndex: ["statusEnum", "label"] },
+          {
+            title: "操作",
+            width: 200,
+            fixed: "right",
+            render: (_, record) => (
+              <Space>
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setCurrentId(record.id);
+                    setDistributionMenuModalVisible(true);
+                  }}
+                >
+                  分配菜单
+                </Button>
+              </Space>
+            ),
+          },
+        ]}
+        {...tableProps}
+      />
+      {
+        distributionMenuModalVisible && (
+          <DistributionMenuModal
+            id={currentId}
+            onCancel={() => {
+              setDistributionMenuModalVisible(false);
+              setCurrentId("");
+            }}
+            getData={getData}
+          />
+        )
+      }
+    </Page>
+  );
+}
+
+const DistributionMenuModalComponent = (props) => {
+  const [menuListTree, setMenuListTree] = useState([]);
+  const [checkedKeys, setCheckedKeys] = useState([]);
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+  const halfCheckedKeys = useRef([]);
+
+  const getData = async () => {
+    const { data: menuListTree } = await props["appMenuListTree"]({ eqMenuAttribution: "gwjapp" });
+    setMenuListTree(menuListTree);
+
+    const { data } = await props["appMenuGetAlreadyDistributionMenu"]({ roleId: props.id });
+    setCheckedKeys(data.map(item => item.menuId));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const onSubmit = async () => {
+    const { success } = await props["appMenuDistributionMenu"]({
+      roleId: props.id,
+      menuIdList: checkedKeys,
+      halfCheckMenuIdList: halfCheckedKeys.current,
+    });
+    if (success) {
+      message.success("分配成功");
+      props.onCancel();
+      props.getData();
+    }
+  };
+
+  return (
+    <Modal
+      open
+      title="分配菜单"
+      maskClosable={false}
+      width={600}
+      onCancel={props.onCancel}
+      onOk={onSubmit}
+      confirmLoading={props.appMenu.appMenuDistributionMenuLoading}
+    >
+      <Tree
+        checkable
+        onCheck={(checkedKeysValue, event) => {
+          setCheckedKeys(checkedKeysValue);
+          halfCheckedKeys.current = event.halfCheckedKeys;
+        }}
+        onExpand={(expandedKeysValue) => {
+          setExpandedKeys(expandedKeysValue);
+          setAutoExpandParent(false);
+        }}
+        autoExpandParent={autoExpandParent}
+        expandedKeys={expandedKeys}
+        checkedKeys={checkedKeys}
+        treeData={menuListTree}
+        fieldNames={{ title: "menuName", key: "id", children: "children" }}
+        titleRender={nodeData => `${nodeData.menuName}（${nodeData.menuType === 1 ? "菜单" : "按钮"}）`}
+      />
+    </Modal>
+  );
+};
+
+const DistributionMenuModal = Connect([NS_APP_MENU], true)(DistributionMenuModalComponent);
+
+export default Connect([NS_APP_MENU], true)(DistributionMenu);
--- a/src/pages/Container/AppMenu/Menu/index.js
+++ b/src/pages/Container/AppMenu/Menu/index.js
@ -0,0 +1,236 @@
+import useUrlState from "@ahooksjs/use-url-state";
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Button, Form, message, Modal, Space, Tabs, Tag } from "antd";
+import { useEffect, useState } from "react";
+import FormBuilder from "zy-react-library/components/FormBuilder";
+import AddIcon from "zy-react-library/components/Icon/AddIcon";
+import Page from "zy-react-library/components/Page";
+import Table from "zy-react-library/components/Table";
+import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
+import useTable from "zy-react-library/hooks/useTable";
+import { getLabelName } from "zy-react-library/utils";
+import { NS_APP_MENU } from "~/enumerate/namespace";
+
+const MENU_TYPE_ENUM = [
+  { bianma: 1, name: "菜单" },
+  { bianma: 2, name: "按钮" },
+];
+const MENU_ATTRIBUTION_ENUM = [
+  { bianma: "gwjapp", name: "港务局app" },
+];
+
+function Menu(props) {
+  const [currentId, setCurrentId] = useState("");
+  const [currentSort, setCurrentSort] = useState(0);
+  const [addModalVisible, setAddModalVisible] = useState(false);
+  const [parentId, setParentId] = useState(0);
+  const [parentName, setParentName] = useState("");
+
+  const [urlState, setUrlState] = useUrlState({
+    menuAttribution: MENU_ATTRIBUTION_ENUM[0].bianma,
+  }, {
+    navigateMode: "replace",
+  });
+  const { tableProps, getData } = useTable(props["appMenuListTree"], {
+    params: { eqMenuAttribution: urlState.menuAttribution },
+    usePagination: false,
+  });
+
+  const onDelete = (id) => {
+    Modal.confirm({
+      title: "删除",
+      content: "确定要删除吗？",
+      okText: "确定",
+      cancelText: "取消",
+      onOk: async () => {
+        const { success } = await props["appMenuDelete"]({ id });
+        if (success) {
+          message.success("删除成功");
+          getData();
+        }
+      },
+    });
+  };
+
+  return (
+    <Page isShowAllAction={false}>
+      <Table
+        showIndexColumn={false}
+        toolBarRender={() => (
+          <Space>
+            <Button
+              type="primary"
+              icon={(<AddIcon />)}
+              onClick={() => {
+                setAddModalVisible(true);
+                setParentId(0);
+                setParentName("");
+                setCurrentSort(tableProps.dataSource.length + 1);
+              }}
+            >
+              新增一级菜单
+            </Button>
+          </Space>
+        )}
+        headerTitle={(
+          <Tabs
+            activeKey={urlState.menuAttribution}
+            items={MENU_ATTRIBUTION_ENUM.map(item => ({ key: item.bianma, label: item.name }))}
+            onChange={(event) => {
+              setUrlState({ menuAttribution: event });
+              getData();
+            }}
+          />
+        )}
+        columns={[
+          { title: "名称", dataIndex: "menuName" },
+          { title: "路径", dataIndex: "menuUrl" },
+          { title: "标识", dataIndex: "menuPerms" },
+          {
+            title: "类型",
+            dataIndex: "menuType",
+            render: (_, record) => (
+              <Tag color="#108ee9">{getLabelName({ list: MENU_TYPE_ENUM, status: record.menuType })}</Tag>
+            ),
+          },
+          {
+            title: "操作",
+            width: 200,
+            fixed: "right",
+            render: (_, record) => (
+              <Space>
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setAddModalVisible(true);
+                    setParentId(record.id);
+                    setParentName(record.menuName);
+                    setCurrentSort(record.children.length + 1);
+                  }}
+                >
+                  新增子级
+                </Button>
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setAddModalVisible(true);
+                    setParentId(record.id);
+                    setCurrentId(record.id);
+                    setParentName(record.menuName);
+                  }}
+                >
+                  修改
+                </Button>
+                <Button
+                  type="link"
+                  danger
+                  onClick={() => {
+                    onDelete(record.id);
+                  }}
+                >
+                  删除
+                </Button>
+              </Space>
+            ),
+          },
+        ]}
+        {...tableProps}
+      />
+      {
+        addModalVisible && (
+          <AddModal
+            onCancel={() => {
+              setAddModalVisible(false);
+              setCurrentId("");
+              setParentId(0);
+              setParentName("");
+              setCurrentSort(0);
+            }}
+            getData={getData}
+            id={currentId}
+            parentId={parentId}
+            parentName={parentName}
+            sort={currentSort}
+            menuAttribution={urlState.menuAttribution}
+          />
+        )
+      }
+    </Page>
+  );
+}
+
+const AddModalComponent = (props) => {
+  const [form] = Form.useForm();
+
+  const getData = async () => {
+    const { data } = await props["appMenuInfo"]({ id: props.id });
+    form.setFieldsValue(data);
+  };
+
+  useEffect(() => {
+    if (props.id) {
+      getData();
+    }
+  }, [props.id]);
+
+  const onSubmit = async (values) => {
+    const { success } = await props[props.id ? "appMenuUpdate" : "appMenuAdd"]({
+      ...values,
+      id: props.id,
+      parentId: props.parentId,
+      menuAttribution: props.menuAttribution,
+    });
+    if (success) {
+      message.success("保存成功");
+      props.onCancel();
+      props.getData();
+    }
+  };
+
+  return (
+    <Modal
+      open
+      title={props.id ? "修改" : "新增"}
+      maskClosable={false}
+      width={600}
+      onCancel={props.onCancel}
+      onOk={form.submit}
+      confirmLoading={props.appMenu.appMenuLoading}
+    >
+      <FormBuilder
+        showActionButtons={false}
+        span={24}
+        labelCol={{ span: 6 }}
+        loading={props.appMenu.appMenuLoading}
+        form={form}
+        onFinish={onSubmit}
+        values={{
+          menuType: 1,
+          sort: props.sort,
+        }}
+        options={[
+          {
+            name: "parentName",
+            label: "父级",
+            required: false,
+            render: (<Tag color="#108ee9">{props.parentName || "无（此项为顶级）"}</Tag>),
+          },
+          { name: "menuName", label: "名称" },
+          { name: "menuUrl", label: "路径" },
+          { name: "menuPerms", label: "标识" },
+          { name: "menuType", label: "类型", render: FORM_ITEM_RENDER_ENUM.RADIO, items: MENU_TYPE_ENUM },
+          {
+            name: "sort",
+            label: "排序",
+            render: FORM_ITEM_RENDER_ENUM.NUMBER,
+            rules: [{ pattern: /^\d*$/, message: "请输入整数" }],
+          },
+        ]}
+      />
+    </Modal>
+  );
+};
+
+const AddModal = Connect([NS_APP_MENU], true)(AddModalComponent);
+
+export default Connect([NS_APP_MENU], true)(Menu);
--- a/src/pages/Container/Entry/index.js
+++ 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) && (
+      <Component
+        detail={{ componentKey: process.env.app.appKey }}
+        appKey={process.env.app.appKey}
+      />
+    );
+  }
+}
--- a/src/pages/Container/index.js
+++ 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 (
+      <ConfigProvider
+        theme={{
+          token: this.token,
+          algorithm: this.algorithm,
+        }}
+        locale={language}
+        prefixCls={window.process.env.app.antd["ant-prefix"]}
+      >
+        <App style={{ height: "100%" }}>
+          <AppMiddle {...this.props} />
+        </App>
+      </ConfigProvider>
+    );
+  }
+}
+
+function AppMiddle(props) {
+  return (
+    <InjectContext.Provider value={App.useApp()}>
+      {process.env.NODE_ENV === "development"
+        ? props.children
+        : (
+            <Interceptor>
+              {props.children}
+            </Interceptor>
+          )}
+    </InjectContext.Provider>
+  );
+}
+
+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")
+      ? (
+          <Component appKey={process.env.app.appKey}>
+            {this.props.children}
+          </Component>
+        )
+      : this.props.children;
+  }
+}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -0,0 +1,8 @@
+export default function () {
+  return (
+    <h1>
+      底座微应用模板，技术文档：
+      <a rel="noreferrer noopener" target="_blank" href="https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko">https://www.yuque.com/buhangjiecheshen-ymbtb/qc0093/gxdun1dphetcurko</a>
+    </h1>
+  );
+}
--- a/webstorm.config.js
+++ 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/"),
+    },
+  },
+};