Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

✨ Utility: Ports

未关闭
  • 哪里不对？
#1,833 6 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
30/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
swift
领域
desktop, devtools

调研方向

首先定位 Utility Area，并查看 #1798 中引入的端口转发功能。围绕列出的表格、上下文菜单操作、过滤、转发状态和错误来定义 Ports utility；对于零状态使用 ContentUnavailableView。当端口被转发或停止时该 utility 会更新，并支持所述验收标准，即表示完成。

由索引模型根据 Issue 内容生成。

描述

enhancement navigator
Description:

We should add a Ports utility to the Utility Area in CodeEdit that allows users to manage port forwarding within their development environment. This utility will make it easy for users to forward ports, monitor active ports, and configure various port-related settings from within the editor. The functionality will be visually displayed in a table where users can see port numbers, forwarded addresses, and port visibility (private or public). The user will also be able to interact with individual ports through a context menu.

Expected Behavior
  1. Ports Management Interface:
    • A dedicated utility within the Utility Area that lists forwarded ports in a table format.
    • The table should include columns for:
    • Port number
    • Forwarded address
    • Port visibility (Private or Public)
    • Origin (how the port was forwarded)
    • Status (running or stopped)
  2. Context Menu for Each Port:
    • Right-clicking (or Control-clicking) a port should bring up a context menu with the following actions:
      • Open in Browser: Opens the forwarded port in the default web browser.
      • Preview in Editor: If applicable, open the forwarded address in the editor’s built-in preview.
      • Set Port Label: Allows the user to assign a label or name to the port for easier identification.
      • Copy Local Address: Copies the local IP/hostname and port to the clipboard.
      • Port Visibility: Toggle between Private (accessible only to the local machine) and Public (accessible externally).
      • Change Port Protocol: Allow users to change the protocol used for the port (e.g., HTTP, HTTPS).
      • Stop Forwarding Port: Stops forwarding the selected port.
      • Forward a Port: Manually forward a new port by specifying the port number and address.
  3. Port Visibility and Protocol:
    • Ports can be toggled between Private (only accessible locally) and Public (accessible to other devices).
    • Users should be able to modify the protocol for a forwarded port (e.g., switching between HTTP and HTTPS).
  4. Filter/Search Ports:
    • A filter or search input should be provided at the bottom of the table to quickly find ports by number or address.
  5. Keyboard Shortcuts:
    • Consider adding keyboard shortcuts for key actions, such as stopping a port or toggling visibility.
  6. Error Handling:
    • If a port fails to forward or an error occurs during interaction, display a clear error message (e.g., “Port forwarding failed”).
    • Gracefully handle cases where a forwarded port is no longer available or conflicts arise.
Acceptance Criteria
  1. A new Ports Management Utility is available in the Utility Area where users can see and manage their forwarded ports.
  2. Users can forward new ports, stop forwarding, and toggle visibility between private and public with ease.
  3. Right-clicking a port shows a context menu with actions like Open in Browser, Preview in Editor, and Change Port Protocol.
  4. Ports can be filtered or searched for using a filter input in the interface.
  5. If a forwarded port encounters an error, the system displays a meaningful error message.
  6. The interface updates dynamically as ports are forwarded or stopped.
Screenshots

image

image

[!NOTE]
Please use the ContentUnavailableView for the zero-state.

Original Issue

I have just built the latest CodeEdit build and used the new feature introduced in #1798, and I noticed that there was no menu to manage open ports. For example, if I ran a web server on http://localhost:3000, an editor like VSCode would show that there is an open port in it's status bar:

image

What if CodeEdit had open ports in the navigator?

Screenshot 2024-08-01 at 10 13 43 AM

主要语言
Swift
星标
23k
派生
1.2k
30 天内没有已合并 PR

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

CodeEditApp/CodeEdit 的其他 Issue

查看 CodeEditApp/CodeEdit 的全部 Issue

相似的 Issue

更多 Swift Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。