如何在Confluence中点击Web Item时弹出带输入框的对话框？

1. 调整Web-item配置 #

修改atlassian-plugin.xml中的Web-item定义，将链接改为触发前端逻辑的方式，并添加标识类方便JS绑定事件：

<web-item key="aad-permissions-web-item" name="AAD Permissions" section="system.space.permissions/tabs" weight="100">
    <description>Manage AAD Permissions for the space</description>
    <link linkId="aad-permissions-link">javascript:void(0)</link>
    <param name="class" value="aad-permissions-trigger"/>
</web-item>

2. 引入前端依赖资源 #

在atlassian-plugin.xml中注册Web资源，依赖Confluence内置的AUI对话框组件，并绑定到空间权限页面：

<web-resource key="aad-permissions-resources" name="AAD Permissions Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:aui-dialog2</dependency>
    <resource type="download" name="aad-permissions.js" location="/js/aad-permissions.js"/>
    <resource type="download" name="aad-permissions.css" location="/css/aad-permissions.css"/>
    <context>space-permissions</context>
</web-resource>

3. 编写前端对话框逻辑 #

在aad-permissions.js中实现点击事件监听、对话框创建及表单提交逻辑：

AJS.toInit(function() {
    // 绑定Web-item点击事件
    AJS.$('.aad-permissions-trigger').on('click', function() {
        // 构建对话框内的表单内容
        const dialogContent = `
            <div class="aui-dialog2-content">
                <form class="aui" id="aad-permissions-form">
                    <div class="field-group">
                        <label for="aad-principal-id">AAD Principal ID</label>
                        <input type="text" id="aad-principal-id" name="aadPrincipalId" class="text" placeholder="输入AAD主体ID">
                    </div>
                    <div class="field-group">
                        <label for="aad-permission-level">权限等级</label>
                        <select id="aad-permission-level" name="aadPermissionLevel" class="select">
                            <option value="read">只读</option>
                            <option value="edit">编辑</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                </form>
            </div>
        `;

        // 初始化AUI对话框
        const dialog = AJS.dialog2({
            width: 500,
            title: "配置AAD权限",
            body: dialogContent,
            buttons: [
                {
                    text: "取消",
                    handler: () => dialog.hide()
                },
                {
                    text: "保存",
                    primary: true,
                    handler: function() {
                        // 获取表单输入值
                        const principalId = AJS.$('#aad-principal-id').val();
                        const permissionLevel = AJS.$('#aad-permission-level').val();

                        // 提交数据到后端REST接口（示例）
                        AJS.$.ajax({
                            url: `${AJS.contextPath()}/rest/aad-permissions/1.0/space/${AJS.params.spaceKey}/permissions`,
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({principalId, permissionLevel}),
                            success: () => {
                                AJS.messages.success({title: "成功", body: "AAD权限配置完成"});
                                dialog.hide();
                            },
                            error: (xhr) => {
                                AJS.messages.error({title: "失败", body: `配置失败：${xhr.responseText}`});
                            }
                        });
                    }
                }
            ]
        });

        // 显示对话框
        dialog.show();
    });
});

4. （可选）实现后端REST接口 #

如果需要持久化权限数据，编写Java REST资源类，并在atlassian-plugin.xml中注册：

REST资源类示例 #

package com.example.aadpermissions.rest;

import com.atlassian.confluence.spaces.Space;
import com.atlassian.confluence.spaces.SpaceManager;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import org.springframework.beans.factory.annotation.Autowired;

@Path("/permissions")
public class AadPermissionsResource {

    private final SpaceManager spaceManager;

    @Autowired
    public AadPermissionsResource(SpaceManager spaceManager) {
        this.spaceManager = spaceManager;
    }

    @POST
    @Path("/space/{spaceKey}")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Response savePermissions(@PathParam("spaceKey") String spaceKey, AadPermissionRequest request) {
        Space space = spaceManager.getSpace(spaceKey);
        if (space == null) {
            return Response.status(Response.Status.NOT_FOUND).entity("空间不存在").build();
        }

        // 此处添加业务逻辑：如关联权限到空间、同步到AAD等
        // ...

        return Response.ok().entity("权限已保存").build();
    }

    // 请求数据传输类
    public static class AadPermissionRequest {
        private String principalId;
        private String permissionLevel;

        // Getter和Setter方法
        public String getPrincipalId() { return principalId; }
        public void setPrincipalId(String principalId) { this.principalId = principalId; }
        public String getPermissionLevel() { return permissionLevel; }
        public void setPermissionLevel(String permissionLevel) { this.permissionLevel = permissionLevel; }
    }
}

注册REST资源 #

<rest-resource key="aad-permissions-rest" name="AAD Permissions REST Resource" path="/aad-permissions/1.0">
    <description>管理AAD权限的REST端点</description>
    <resource-class>com.example.aadpermissions.rest.AadPermissionsResource</resource-class>
</rest-resource>

5. （可选）自定义对话框样式 #

在aad-permissions.css中添加样式调整：

#aad-permissions-form .field-group {
    margin-bottom: 16px;
}

内容的提问来源于stack exchange，提问作者Preethi H R