实现动态字段级权限：JavaScript UI与后端API的协同设计

{
  "fields": [
    {
      "name": "id",
      "type": "number",
      "label": "ID",
      "visible": true,
      "editable": false,
      "defaultValue": null
    },
    {
      "name": "name",
      "type": "text",
      "label": "名称",
      "visible": true,
      "editable": true,
      "defaultValue": ""
    },
    {
      "name": "description",
      "type": "textarea",
      "label": "描述",
      "visible": true,
      "editable": true,
      "defaultValue": ""
    },
    {
      "name": "position",
      "type": "number",
      "label": "排序位置",
      "visible": false, // 当前用户无权查看
      "editable": false,
      "defaultValue": 0
    },
    {
      "name": "imageUrl",
      "type": "url",
      "label": "图片链接",
      "visible": true,
      "editable": true,
      "defaultValue": ""
    }
  ]
}

async function renderFieldsBasedOnPermissions(resourceType, containerElement) {
  try {
    const response = await fetch(`/api/${resourceType}/schema`);
    if (!response.ok) {
      throw new Error('Failed to fetch field schema.');
    }
    const schema = await response.json();

    containerElement.innerHTML = ''; // 清空现有内容

    schema.fields.forEach(field => {
      if (field.visible) {
        const fieldContainer = document.createElement('div');
        fieldContainer.className = 'form-group';

        const label = document.createElement('label');
        label.textContent = field.label;
        fieldContainer.appendChild(label);

        let inputElement;
        switch (field.type) {
          case 'text':
          case 'number':
          case 'url':
            inputElement = document.createElement('input');
            inputElement.type = field.type;
            break;
          case 'textarea':
            inputElement = document.createElement('textarea');
            break;
          // ... 其他字段类型
          default:
            inputElement = document.createElement('input'); // 默认文本输入
            inputElement.type = 'text';
        }

        inputElement.name = field.name;
        inputElement.value = field.defaultValue || '';
        if (!field.editable) {
          inputElement.disabled = true; // 或 inputElement.readOnly = true;
          inputElement.classList.add('read-only-field');
        }

        fieldContainer.appendChild(inputElement);
        containerElement.appendChild(fieldContainer);
      }
    });
  } catch (error) {
    console.error("Error rendering fields:", error);
    // 显示错误消息给用户
  }
}

// 示例用法：当点击“新建图片”按钮时
document.getElementById('newImageButton').addEventListener('click', () => {
  const formContainer = document.getElementById('imageFormContainer');
  renderFieldsBasedOnPermissions('image', formContainer);
});