# herodotus-cloud-ui-vuetify **Repository Path**: dante-compass/herodotus-cloud-ui-vuetify ## Basic Information - **Project Name**: herodotus-cloud-ui-vuetify - **Description**: 🐉 Dante Cloud 国内首个支持阻塞式和响应式服务并行的微服务云原生基座。采用领域驱动模型(DDD)设计思想，以「高质量代码、低安全漏洞」为核心，高度模块化和组件化设计，支持IoT等物联网设备认证，满足国家三级等保要求、支持接口国密数字信封加解密等系列安全体系的多租户微服务解决方案。独创的“一套代码实现微服务和单体两种架构灵活切换”的企业级微服务平台。🔝 点个star 持续关注更新！ - **Primary Language**: TypeScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://www.herodotus.vip - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-10-22 - **Last Updated**: 2026-04-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

简洁优雅 · 稳定高效 | 宁静致远 · 精益求精

“一套代码、两种架构，可以灵活切换微服务和单体两种架构”的企业级云原生微服务基座

---

GitCode 仓库 | Github 仓库 | Gitee 仓库 | 在线文档

如果您觉得有帮助，请点右上角 "Star" 支持一下，谢谢！

--- ## 项目介绍 Herodotus Cloud UI Vuetify 为 Dante Cloud 微服务项目新版前端项目。 > 自 Dante Cloud v4.0.5.2 版本起，为了提升维护的效率，将企业版前端与开源版前端合并，新版本前端（Vuetify 版）也一并开源。 ## 项目特点 Herodotus Cloud UI Vuetify 是 Dante Cloud 4.0.X 基于 Vuetify 组件全新构建的新版本前端工程，该版本的特点是： 1. 基于 Vuetify `Material Design 3` 蓝图风格以及 Vue 3 组合式 API，全新编写新版管理界面，更符合目前主流设计风格。 2. 采用 monorepo 模块化设计，原版前端 (Quasar 版) 和前端新版 (Vuetify 版)，共享通用化代码模块，提升代码维护的便捷性 3. 前端菜单权限大幅调整，支持根据多角色动态获取菜单。 4. 支持多类型动态菜单，个人页面菜单从静态化菜单变更为支持动态化配置管理 5. 大幅提升前端代码 Tree shaking 能力和性能 6. 前端组件库模块新增组件 Resolver 支持，方便 IDE 更好的识别组件及其定义 ## 项目地址 ### 1. Dante Cloud 主工程 - **Gitee**：[https://gitee.com/dromara/dante-cloud](https://gitee.com/dromara/dante-cloud) - **Github**：[https://github.com/dromara/dante-cloud](https://github.com/dromara/dante-cloud) - **AtomGit**：[https://atomgit.com/dromara/dante-cloud](https://atomgit.com/dromara/dante-cloud) ### 2. Dante Engine 核心组件库 - **Gitee**：[https://gitee.com/dante-compass/dante-engine](https://gitee.com/dante-compass/dante-engine) - **Github**：[https://github.com/dante-compass/dante-engine](https://github.com/dante-compass/dante-engine) - **AtomGit**：[https://atomgit.com/dante-compass/dante-engine](https://atomgit.com/dante-compass/dante-engine) ### 3. UI 前端工程（旧版） - **Gitee**：[https://gitee.com/dante-compass/dante-cloud-ui](https://gitee.com/dante-compass/dante-cloud-ui) - **Github**：[https://github.com/dante-compass/dante-cloud-ui](https://github.com/dante-compass/dante-cloud-ui) - **AtomGit**：[https://atomgit.com/dante-compass/dante-cloud-ui](https://atomgit.com/dante-compass/dante-cloud-ui) ### 4. UI 前端工程（新版） - **Gitee**：[https://gitee.com/dante-compass/herodotus-cloud-ui-vuetify](https://gitee.com/dante-compass/dante-cloud-ui) - **Github**：[https://github.com/dante-compass/herodotus-cloud-ui-vuetify](https://github.com/dante-compass/dante-cloud-ui) ## 开发模式使用方法 ### [1]检出代码在合适位置上，使用 Git 检出前端工程代码。 ```shell 1. 推荐使用：`herodotus-cloud-ui-vuetify` 2. 也可以选择原版 `dante-cloud-ui` ``` ### [2]修改配置在前端工程的 packages/ui 目录下，找到 `.env.development` 文件。修改其中的参数参数说明： - **VITE_BASE_PATH**：基础路径，默认为根目录 `/` 可以根据你的部署需求修改。主要用于有路径映射需求的场景。 - **VITE_PROJECT**：工程名称。通过该参数以实现单体版和微服务版使用同一套操作界面。`dante`指定是微服务版，其它任意字符串或者空值指定是单体版 - **VITE_APPLICATION_NAME**：界面显示的系统名称 - **VITE_API_URL**：后端服务网关访问地址 - **VITE_WS_URL**：后端服务 WebSocket 访问地址 - **VITE_OAUTH_CLIENT_ID**：OAuth2 密码模式 Client Id。 - **VITE_OAUTH_CLIENT_SECRET**：OAuth2 密码模式 Client 密码 - **VITE_OAUTH2_REDIRECT_URI**：授权码模式登录前端回调地址 - **VITE_AUTO_REFRESH_TOKEN**：开启自动刷新 Token 机制 - **VITE_USE_CRYPTO**：是否开启前后端数据加密 - **VITE_USE_WEBSOCKET**：是否开启 WebSocket - **VITE_USE_OIDC**：是否使用 OpenID Connect（OIDC）协议 - **VITE_SECRET_KEY**：前端关键信息 SM4 加密秘钥 - **VITE_MULTI_TENANCY_ID**：当前应用租户 ID，需要后台进行租户配置，空值为不启用租户模式。 - **VITE_USE_DISABLE_DEVTOOL**：是否开启调试防护工具，开启后浏览器 F12、邮件等操作将被屏蔽。开发环境可以关闭，生产环境建议开启说明: `VITE_SECRET_KEY` 秘钥，并不是本系统前后端数据加密传输使用的秘钥，只是对前端临时存储的关键信息加密的秘钥。本系统前后端数据加密传输，是基于自主设计的自定义数据传输 Session，实现国密 SM4 加密秘钥的动态生成，加密传输，一人一钥机制。每次使用系统都会动态重新生成，采用 SM2 前后端加密传输，临时存储至前端。缓存时间与 `OAuth 2 Token` 设置时间相同，正常退出系统后，会清除前端临时存储数据。详情参见：[【数字信封】](https://www.herodotus.vip/user-guide/security/security-extend.md#二-数字信封) > 并没有绝对安全的加密措施，前后端数据加密传输也仅仅是相对提升安全性。毕竟不管如何处理，前端都要存储一定的关键信息，而且前端是最容易破解的。正式环境使用还是要配合 `Https` 以及其它安全防护措施。 ### [3]编译运行前面配置配置完成之后，在运行之前，需要进行依赖下载，以及模块编译等操作。 #### (1)首次检出如果你是首次检出前端工程，使用以下命令下载依赖，并运行工程 ```shell // 进入目录 cd herodotus-cloud-ui-vuetify // 安装依赖 pnpm install // 使用 `.env.development` 中的配置值，使用下面命令 pnpm dev ``` #### (2)非首次检出（使用 Git 更新代码方式）当你采用更新代码的方式，那么更新下来的可能不仅仅是新的代码，还包含依赖的模块的更新。所以需要采用以下命令： ```shell // 更新代码（如果已经采用其它方式更新了代码，可以忽略该操作） git pull // 1. 更新主工程依赖模块 pnpm update --latest // 2. 更新 monorepo 模块依赖模块 pnpm -r update --latest // 3. 重新编译模块 pnpm shared:build // 4. 再次运行。使用 `.env.development` 中的配置值，使用下面命令 pnpm dev ``` ### [4]运行验证 > 通过前端界面进行操作，是对的整个系统最好的验证方式之一。打开浏览器，输入：。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功 > 系统登录默认的账户和密码是：**system/123456**。测试账号的账户和密码是：**test/123456** 为了方便使用和部署，Dante Cloud 对企业版前端做了专门的改造。打包完成之后，可以直接部署至 Nginx 下，并以 Docker 的方式运行。一些应用相关的必要参数，例如：应用名称等，支持以 Docker 环境变量的方式，在 Docker 外部系统通过环境变量进行修改。 ## 生产模式使用方法(手动部署方式) ### [1]编译代码 1. 根据实际使用情况，修改 `.env.production` 中的配置值 2. 使用下面命令，编译工程代码 ```shell // 编译组件库。升级过依赖版本或者修改过模块代码，需要重新编译组件 pnpm shared:build // 编译代码 pnpm prod ``` ### [2]安装 Nginx 安装 Nginx 用于部署编译后的前端代码。需要修改 Nginx 配置，参考配置如下： ```shell worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; #gzip on; map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream herodotus.cn { server 192.168.101.10:8847; } server { listen 8000; server_name localhost; location / { root /etc/nginx/html/ui; index index.html index.htm; # 解决刷新页面变成404问题的代码 try_files $uri $uri/ @router; # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; #gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间 gzip_comp_level 6; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png image/avif image/webp image/apng image/svg+xml image/x-icon application/vnd.ms-fontobject font/ttf font/opentype font/x-woff font/woff2 font/eot; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\."; # 设置压缩所需要的缓冲区大小 gzip_buffers 32 16k; # 设置gzip压缩针对的HTTP协议版本 gzip_http_version 1.1; gzip_static on; gzip_proxied expired no-cache no-store private auth; } location @router { rewrite ^.*$ /index.html last; } location /api/ { proxy_pass http://herodotus.cn/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /socket/ { proxy_pass http://herodotus.cn/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } location /reactive/ { proxy_pass http://herodotus.cn/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } } ``` ### [3]拷贝代码将在第一步编译好的代码，放置在 Nginx 对应目录中。例如：上一步 Nginx 配置的目录为 `/etc/nginx/html/ui`，将所有编译好的代码放置在该目录即可。 ## 生产模式使用方法(容器部署方式) 为了方便使用和部署，Dante Cloud 对企业版前端做了专门的改造。打包完成之后，可以直接部署至 Nginx 下，并以 Docker 的方式运行。一些应用相关的必要参数，例如：应用名称等，支持以 Docker 环境变量的方式，在 Docker 外部系统通过环境变量进行修改。 ### [1]编译代码按照以下命令，编译工程代码，并生成可部署至生产换的的代码。 ```shell // 编译组件库。 pnpm shared:build // 编译代码 pnpm prod ``` ### [2]打包Docker镜像手动部署前端代码，需要自己搭建 Nginx 以及拷贝代码，操作略显繁琐。Dante Cloud 提供了直接将前端打包为可运行的 Docker 镜像。通过修改 Docker 环境变量可以动态修改内部参数。 > 这里假设，你本地就有 Docker 环境，如果你的 Docker 环境是在其它服务器中，需要拷贝 `build` 目录下的文件到服务器中，然后注意修改命令以及调整目录 #### 1. Dockerfile 使用命令行工具，进入到 `build` 目录下，执行以下命令，利用 Dockerfile 进行打包。 ```shell docker buildx build --platform linux/amd64,linux/arm64 -t quay.io/herodotus-cloud/herodotus-cloud-preview:latest . ``` 注意： 1. 注意前面命令中，结尾的 `.` 2. 修改 `-t` 后面的名称为你想要的名称 #### 2. Docker Compose 使用下面的 Docker Compose 脚本，可以将前面已经编译完成的生产环境代码以及 Nginx 打包为可以直接运行的 Docker 镜像。 ```yaml services: ui: image: herodotus/herodotus-cloud-ui:3.3.0.0 container_name: herodotus-cloud-ui environment: HERODOTUS_SERVER_PROJECT: herodotus HERODOTUS_SERVER_ADDR: 192.168.101.10:8847 HERODOTUS_PROJECT_NAME: Dante\ Cloud HERODOTUS_OAUTH2_CLIENT_ID: 14a9cf797931430896ad13a6b1855611 HERODOTUS_OAUTH2_CLIENT_SECRET: a05fe1fc50ed42a4990c6c6fc4bec398 HERODOTUS_OAUTH2_REDIRECT_URI: http://192.168.101.10:4000/authorization-code ports: - '8888:8000' ``` #### 3. 参数说明 1. HERODOTUS_SERVER_PROJECT(可选) 工程类型。Dante Cloud 前端工程和后端工程使用的是同一套前端，通过修改这个参数来适配不同的后端。 - 微服务版：将该值设置为 `herodotus` (企业版)， `dante` (开源版) - 单体版：将该值设置为 `athena` 默认值为： `herodotus`。如果后端是微服务版，无需修改该参数。 2. HERODOTUS_SERVER_ADDR(可选) 后端服务的访问地址 - 微服务版：即网关服务的访问地址，IP + 端口，例如：192.168.101.10:8847 3. HERODOTUS_PROJECT_NAME(可选) 系统名称。可通过该参数修改系统名称，当前默认名称为 `Herodotus Cloud` > 注意：当前还不支持系统名称中包含空格。如果包含空格将不会生效，还是显示默认系统名称 4. HERODOTUS_OAUTH2_CLIENT_ID(可选) 前端系统的 Client Id，默认值：`14a9cf797931430896ad13a6b1855611` 5. HERODOTUS_OAUTH2_CLIENT_SECRET(可选) 前端系统的 Client Secret，默认值：`a05fe1fc50ed42a4990c6c6fc4bec398` 6. HERODOTUS_OAUTH2_REDIRECT_URI(可选) 前端使用 OAuth2 授权码授权模式进行登录，需要指定具体的 `redirect_uri`。当前默认值为：`http://192.168.101.10:3000/authorization-code` > 请根据实际部署情况修改这个值。该值需要与数据表 `oauth2_registered_client` 中对应 Client 的配置对应，否则将会出现参数错误无法登录。因为配置了缓存，所以不建议直接手动在数据库中修改这个值，修改了也不会马上生效。建议通过系统界面进行修改。 **以上参数都是可选参数，仅在你在 Docker 已经打包完成，需要动态修改参数时使用。如果不设置这些环境变量，默认使用 `.env.production` 中的配置。**