Azion Console Kit 💻🚀🧡

一个现代化、可定制的前端开发套件，用于构建边缘计算界面

简介 • 技术栈 • 快速开始 • 项目结构 • 配置 • 测试 • 贡献

  ## 简介 📖 **Azion Console Kit** 是一个使用 Vue/Vite 以及 PrimeVue 和 Tailwind 框架构建的前端开发套件，它允许您运行一个定制的 [Azion Console](https://console.azion.com/) 界面。 该项目由 [Azion](https://www.azion.com/) 开发，这是一个边缘计算平台，允许您在任何地方构建和运行应用程序。您可以在上面找到我们的产品和服务。🚀 ## 技术栈 🛠️ | 技术 | 用途 | |------------|---------| | [Vue 3](https://vuejs.org/) | 渐进式 JavaScript 框架 | | [Vite](https://vitejs.dev/) | 下一代前端工具 | | [PrimeVue](https://primevue.org/) | UI 组件库 | | [Tailwind CSS](https://tailwindcss.com/) | 实用优先的 CSS 框架 | | [Pinia](https://pinia.vuejs.org/) | 状态管理 | | [Vue Router](https://router.vuejs.org/) | Vue.js 官方路由 | | [Axios](https://axios-http.com/) | HTTP 客户端 | | [Vitest](https://vitest.dev/) | 单元测试框架 | | [Cypress](https://www.cypress.io/) | E2E 测试框架 | | [VeeValidate](https://vee-validate.logaretm.com/v4/) + [Yup](https://github.com/jquense/yup) | 表单验证 | ## 快速开始 🔛 ### 环境要求 开始之前，请确保您具备以下条件： - [Node.js](https://nodejs.org/) 版本 **22.18.0** 或更高 - [Yarn](https://yarnpkg.com/) 版本 **1.22.22** 或更高 #### 使用 Docker (替代方案) 如果您不想在本地安装 Node.js 和 Yarn，可以使用 Docker： ``` alias yarn="docker run -it --rm -p 5173:5173 -v $HOME:/root -v $PWD:/usr/src/app -w /usr/src/app node:22 yarn" ``` ### 设置 1. **克隆仓库：** git clone git@github.com:aziontech/azion-console-kit.git cd azion-console-kit 2. **安装依赖：** yarn install 3. **启动开发服务器：** yarn dev --host 4. **访问应用：** 在浏览器中打开 [http://localhost:5173](http://localhost:5173)。 ## 项目结构 🏗 ``` src/ ├── assets/ # Static files (CSS, images, themes) ├── components/ # Reusable Vue components ├── composables/ # Vue 3 composition API utilities ├── helpers/ # Utility functions and helpers ├── layout/ # Layout components (header, sidebar, etc.) ├── modules/ # Feature modules ├── plugins/ # Vue plugins configuration ├── router/ # Route definitions ├── services/ # API service layer (Axios calls) ├── stores/ # Pinia state management stores ├── templates/ # Reusable page templates/blocks ├── tests/ # Unit tests ├── utils/ # General utilities └── views/ # Page components (organized by feature) ``` ### 核心目录说明 | 目录 | 描述 | |-----------|-------------| | `services/` | API 集成层。每个功能都有其自己的服务文件夹，包含 CRUD 操作 | | `views/` | 按模块组织的页面组件（例如 `EdgeApplications/`、`Variables/`） | | `templates/` | 用于常见 UI 模式（列表表格、表单等）的预构建块 | | `stores/` | 使用 Pinia 在组件之间共享状态 | | `router/` | 集中式路由，包含 `index.js` 和特定功能的路由文件 | ## 配置 💻 ### 环境变量 在项目根目录创建一个 `.env` 文件： ``` # API 环境 (stage 或 production) VITE_ENVIRONMENT=stage # Stripe Keys (用于支付处理) VITE_STRIPE_TOKEN_DEV=pk_test_yourDevApiKeyHere VITE_STRIPE_TOKEN_STAGE=pk_test_yourStageApiKeyHere VITE_STRIPE_TOKEN_PROD=pk_live_yourProductionApiKeyHere # Sentry 配置 (替换为有效的 auth token) VITE_SENTRY_AUTH_TOKEN=sntrys_QsVsYXQiOjE3MDAwMDAwMDAuMDAkOllfMCJ1cmwiOiJodHRwczovL3NlbnRyeS5pbyIsInJlZ2lvbl91cmwiOiJodHRwczovL3Vz123456789195byIsIm9yZyI6InlvdXItb3JnYW5pemF0aW9uIn0_xXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXx VITE_SENTRY_UPLOAD=false # SSO Provider IDs (替换为您的 SSO 配置中的有效 keys) VITE_SSO_AZURE=f47ac10b-58cc-4372-a567-0e02b2c3d479 VITE_SSO_IDP_SCIM_E2E=6ba7b810-9dad-11d1-80b4-00c04fd430c8 VITE_SSO_GITHUB=550e8400-e29b-41d4-a716-446655440000 VITE_SSO_GOOGLE=7c9e6679-7425-40de-944b-e07fc1f90ae7 ``` | 变量 | 描述 | |----------|-------------| | `VITE_ENVIRONMENT` | 要使用的 API 栈：`stage` (默认) 或 `production` | | `VITE_STRIPE_TOKEN_DEV` | 用于本地开发的 Stripe API 密钥 | | `VITE_STRIPE_TOKEN_STAGE` | 用于预发布环境的 Stripe API 密钥 | | `VITE_STRIPE_TOKEN_PROD` | 用于生产环境的 Stripe API 密钥 | | `VITE_SENTRY_UPLOAD` | 启用/禁用 Sentry 源映射上传 (`true`/`false`) | | `VITE_SENTRY_AUTH_TOKEN` | 用于源映射上传的 Sentry 认证令牌 | | `VITE_SSO_AZURE` | Azure AD SSO 提供商标识 | | `VITE_SSO_IDP_SCIM_E2E` | SCIM E2E 身份提供商标识 | | `VITE_SSO_GITHUB` | GitHub SSO 提供商标识 | | `VITE_SSO_GOOGLE` | Google SSO 提供商标识 | ### IDE 设置 (推荐) 为了获得最佳的 VSCode 开发体验： 1. 安装推荐的扩展： - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (禁用 Vetur) - [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 2. 在 `.vscode/settings.json` 中启用保存时格式化： ``` { "editor.tabSize": 2, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ``` ## 测试 🧪 ### 单元测试 ``` # 使用 UI 运行测试 yarn test:unit # 无头模式运行测试 yarn test:unit:headless # 运行测试并生成覆盖率报告 yarn test:unit:coverage ``` ### E2E 测试 (Cypress) 在运行 E2E 测试之前，请根据示例文件创建 `cypress.env.json` 并填写有效的凭据。 ``` # 打开 Cypress UI (开发环境) yarn test:e2e:open:dev # 无头模式运行测试 (开发环境) yarn test:e2e:run:dev # 针对 staging 环境运行 yarn test:e2e:run:stage # 针对 production 环境运行 yarn test:e2e:run:prod ``` ### Linting 与格式化 ``` # Lint 并修复问题 yarn lint # 使用 Prettier 格式化代码 yarn format # 安全检查 yarn security-check ``` ## 在边缘运行 🚀 使用 Azion CLI 部署到 Azion 的边缘平台： 1. **安装并配置 Azion CLI：** [下载 Azion CLI](https://www.azion.com/en/documentation/products/azion-cli/overview/) 并进行认证： azion -t ${PERSONAL_TOKEN} 2. **链接项目：** azion link 在提示时选择 **Vue** 预设。 3. **部署：** azion deploy ## 可用脚本 📜 | 脚本 | 描述 | |--------|-------------| | `yarn dev` | 启动开发服务器 | | `yarn build` | 为生产环境构建 | | `yarn preview` | 在本地预览生产构建 | | `yarn test:unit` | 使用 UI 运行单元测试 | | `yarn test:e2e:open:dev` | 打开 Cypress 进行 E2E 测试 | | `yarn lint` | Lint 并修复代码 | | `yarn format` | 使用 Prettier 格式化代码 | ## 功能特性 🧩 - **多租户：** 通过消费 [Azion Public API](https://api.azion.com/) 的端点来构建您的 Azion Console - **可定制 UI：** 配置主题令牌或通过 Builder 自动生成 - **简单结构：** 块、组件和服务的分层分离，便于构建路由 - **边缘就绪：** 直接部署到 Azion 的边缘网络 ## 故障排除 🔧 ### 常见问题 **端口 5173 已被占用：** ``` # 查找并终止进程 lsof -ti:5173 | xargs kill -9 ``` **Node 版本不匹配：** ``` # 使用 nvm 切换到正确的版本 nvm use ``` **依赖不同步：** ``` # 全新安装 rm -rf node_modules yarn.lock yarn install ``` ## 贡献 🤝 我们欢迎各种贡献！在开始之前，请阅读： | 资源 | 描述 | |----------|-------------| | [CONTRIBUTING.md](CONTRIBUTING.md) | 如何贡献并提交 PR | | [DEVELOPER.md](DEVELOPER.md) | 开发环境设置与架构 | | [SECURITY.md](SECURITY.md) | 安全验证流程 | | [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) | 社区准则 | ### 贡献者快速入门 1. Fork 本仓库 2. 创建一个功能分支：`git checkout -b feature/my-feature` 3. 进行更改并添加测试 4. 运行 `yarn lint` 和 `yarn test:unit` 5. 使用 [conventional commits](https://www.conventionalcommits.org/) 进行提交 6. 推送并打开一个 Pull Request ## 社区 💬 加入我们的社区： - [Discord](https://discord.com/invite/Yp9N7RMVZy) - 与团队和社区聊天 - [X (Twitter)](https://twitter.com/aziontech) - 最新动态 - [LinkedIn](https://www.linkedin.com/company/aziontech) - 公司新闻 - [YouTube](https://www.youtube.com/aziontech) - 教程和演示 ## 许可证 📄 本项目根据 [LICENSE](LICENSE) 文件中指定的条款进行许可。

标签：Azion, Cypress, DNS解析, JavaScript框架, MITM代理, Pinia, PrimeVue, Syscall, Tailwind CSS, UI组件库, Vite, Vitest, Vue 3, Web开发, 前端工程化, 前端开发套件, 单页应用, 响应式设计, 威胁情报, 开发者工具, 开源项目, 控制台, 状态管理, 用户界面, 端到端测试, 请求拦截, 边缘计算