README

能力越大，责任越大。

一个交互式、实时用户界面的 Symfony Console。

🚧 我们处于开发阶段，每个方面的每个贡献都将受到欢迎并获得适当的认可。

测试操作系统

🐧 Linux
- Ubuntu 20.04 + PHP 8.1
- Ubuntu 20.04 + Symfony Docker
🍏 Mac OS
- M1 2020 + PHP 8.1
- M1 2020 + Docker（进行中）
🪟 Windows

如果您尝试了它，我们鼓励您在 GitHub 上创建一个 issue，让我们知道您的体验

功能

执行单个命令
接受输入参数
接受输入选项
接受全局输入参数
接受全局输入选项
将命令行复制到剪贴板
Symfony Messenger 支持
终止命令执行
灵活的食谱 - 安装程序 - 即用型使用

待办事项

🛣️ 重新整理套接字连接以避免 http1 的 6 个并发连接限制

PHP

📢 公开
🔼 上传到 packagist
🧟 测试套件中的 X-Men 正在出问题

TypeScript

📢 公开
🔼 将 Web 组件提取为 NPM 包
🛠️ 用单元测试覆盖

依赖关系

系统

PHP 8.1 或 Docker
NPM + Yarn

我们正在开发一个 Docker 版本，只需一个命令即可安装系统依赖项

应用程序构建

symfony/symfony/webpack-encore-bundle: 默认

Socket 服务器

symfony/mercure: 必需

队列系统

enqueue/enqueue-bundle: 默认
enqueue/enqueue-fs: 默认

安装

确保已全局安装 Composer，如 Composer 文档中的安装章节所述。

使用 Symfony Flex 的应用程序

我们尚未创建任何 Flex 食谱，请查看“不使用 Symfony Flex 的应用程序”部分以获取包配置。

打开命令控制台，进入您的项目目录并执行

# We add all deps to ensure we dispatch every flex events. 
composer require --dev symfony/webpack-encore-bundle mercure enqueue/enqueue-bundle enqueue/fs drinksco/console-ui-bundle

如果使用 Symfony Docker：跳转到步骤 4：配置 webpack。

如果使用本地配置，请检查如何在“安装 Symfony Mercure 组件和 Hub”部分设置 Mercure Hub。

不使用 Symfony Flex 的应用程序

步骤 1：配置依赖项

安装 Symfony Webpack Encore Bundle

Webpack Encore Bundle 允许我们在 PHP 应用程序中使用现代前端语言。按照官方文档进行操作。

# If not installed yet
composer require --dev symfony/webpack-encore-bundle

安装 Symfony Mercure 组件和 Hub

Mercure 是一个高性能套接字服务器，它允许我们在 UI 中获取实时控制台输出。按照官方文档进行操作。

使用 flex，Mercure 将自动为我们进行配置。

# If not installed yet
composer require --dev mercure

使用 Symfony docker 包，我们可以跳到下一步。

Mercure 需要一个专门的 Hub。您可以使用从 Mercure.Rocks 获得的开源版本。

从发布页面安装它：https://github.com/dunglas/mercure/releases，目前我们将为您的操作系统选择传统版本。

下载二进制文件并将其放入项目根目录。

为什么选择Mercure？它允许我们在后台运行命令和前端之间进行通信。我们可以搜索其他“更友好”的替代方案，比如在'HTTP'请求中运行命令，但这将直接降低控制台工具的性能，或者无法运行长时间的过程。

安装 Forma-Pro Enqueue Bundle

Enqueue Bundle允许我们在自己的进程中运行命令，当与Mercure Sockets结合使用时，它为我们提供了实时执行流程。

按照官方文档进行操作，以使其运行。

然后安装Filesystem Transport，它将完成其余的工作😉。

# If not installed yet
composer require --dev enqueue/enqueue-bundle enqueue/fs

第二步：下载Bundle

打开命令行，进入项目目录，并执行以下命令以下载此Bundle的最新稳定版本

由于尚无配方，我们需要声明一些环境变量以供控制台UI使用

# Local Config
CONSOLE_API_URL=https://:3000
CONSOLE_UI_MERCURE_URL=https://:3001/.well-known/mercure
CONSOLE_UI_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"

# Symfony Docker Config
CONSOLE_API_URL=https://caddy:3000
CONSOLE_QUEUE_DSN=file:///srv/app/var/queue/enqueue?pre_fetch_count=1&polling_interval=100
CONSOLE_UI_MERCURE_URL=https://caddy/.well-known/mercure
CONSOLE_UI_MERCURE_PUBLIC_URL=https://caddy/.well-known/mercure

不要忘记设置队列dsn的绝对路径，并具有读写权限。同时，请再次检查Mercure环境变量中的主机或端口是否匹配

$ composer require --dev drinksco/console-ui-bundle

第三步：启用Bundle

然后，通过将其添加到项目中config/bundles.php文件中注册的Bundle列表中，启用该Bundle

// config/bundles.php

return [
    // ...
    Drinksco\ConsoleUiBundle\ConsoleUiBundle::class => ['dev' => true],
];

第四步：配置Webpack

Console UI Web组件应更新到npm

然后启用TypeScript支持。最后添加一个条目用于console-ui Web组件。

由于我们无法通过npm访问console-ui组件，我们需要安装和配置它。

// webpack.config.js
const Dotenv = require('dotenv-webpack');
...
    .addEntry('component-loader', './node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js')
    .addEntry('console-ui', './vendor/drinksco/console-ui-bundle/assets/app.js')
    ...
    // uncomment if you use TypeScript
    .enableTypeScriptLoader()
    ...
    .addPlugin(new Dotenv())
...

在package.json文件中

...
    "main": "./vendor/drinksco/console-ui-bundle/main.js",
    "scripts": {
        ...
        "console-ui-start": "electron ."
    }

安装NPM依赖项

yarn add --dev @hotwired/stimulus @symfony/stimulus-bridge @symfony/webpack-encore core-js dotenv dotenv-webpack electron regenerator-runtime ts-loader typescript webpack-notifier @material/card @material/mwc-button @material/mwc-checkbox @material/mwc-circular-progress @material/mwc-dialog @material/mwc-formfield @material/mwc-icon @material/mwc-list @material/mwc-textfield @material/mwc-top-app-bar-fixed @webcomponents/webcomponentsjs lit material-components-web

然后构建Web组件

yarn encore production

第五步：导入路由

# config/routes/console-ui.yaml
when@dev:
    cli:
      resource: '@ConsoleUiBundle/Resources/config/console-ui/routes.yaml'
      prefix: /cli

清除缓存以加载新添加的路由。

bin/console cache:clear

第六步：执行Electron App

现在，我们已经配置了一切😉，是时候运行我们的Symfony控制台UI🚀

# Local
bin/console _ui
# Symfony Docker
bin/console _ui docker

如果您遇到问题或想给我们反馈，我们鼓励您在GitHub上创建一个问题或错误报告。

drinksco / console-ui-bundle

维护者

详细信息