2.1除“未分组”以外的分组可以进行删除操作，删除分组后该分组内的所有船舶都被删除。 2.2除“未分组”以外的分组都可以编辑其名称。 3，关注船舶有展示/隐藏，编辑，删除按钮。 3.1展示/隐藏按钮，展示状态下按钮呈“张开的眼睛”状态，再次点击后，按钮变为“关闭的眼睛”，同时船舶隐藏。 3.2编辑按钮，点击编辑按钮可以调整船舶的分组，自定义名称，备注内容。 3.3删除按钮，点击删除按钮可以删除当前船舶数据条。这需求代码如何实现

以下是一个简单的船舶管理系统的代码实现，包括分组管理和船舶管理：

// 分组管理
class Group {
  constructor(name) {
    this.name = name; // 分组名称
    this.ships = []; // 分组内的船舶
  }

  // 添加船舶到分组
  addShip(ship) {
    this.ships.push(ship);
  }

  // 删除分组
  delete() {
    if (this.name === '未分组') {
      console.log('默认分组不能删除');
      return;
    }
    this.ships = []; // 删除分组内的所有船舶
    delete groups[this.name]; // 删除分组
  }

  // 编辑分组名称
  editName(name) {
    if (name === '未分组') {
      console.log('默认分组名称不能编辑');
      return;
    }
    groups[name] = groups[this.name];
    delete groups[this.name];
    this.name = name;
  }
}

// 船舶管理
class Ship {
  constructor(name, group, note) {
    this.name = name; // 船舶名称
    this.group = group; // 分组名称
    this.note = note; // 备注
    this.show = true; // 是否展示
  }

  // 展示/隐藏船舶
  toggleShow() {
    this.show = !this.show;
  }

  // 编辑船舶信息
  edit(name, group, note) {
    if (group !== this.group) {
      groups[group].addShip(this);
      groups[this.group].ships.splice(groups[this.group].ships.indexOf(this), 1);
      this.group = group;
    }
    this.name = name;
    this.note = note;
  }

  // 删除船舶
  delete() {
    groups[this.group].ships.splice(groups[this.group].ships.indexOf(this), 1);
  }
}

// 初始化分组
const groups = {
  '未分组': new Group('未分组')
};

// 创建新分组
function createGroup(name) {
  if (name in groups) {
    console.log('分组名称已存在');
    return;
  }
  groups[name] = new Group(name);
}

// 删除分组
function deleteGroup(name) {
  groups[name].delete();
}

// 编辑分组名称
function editGroupName(name, newName) {
  groups[name].editName(newName);
}

// 创建新船舶
function createShip(name, group, note) {
  if (!(group in groups)) {
    console.log('分组不存在');
    return;
  }
  const ship = new Ship(name, group, note);
  groups[group].addShip(ship);
}

// 展示/隐藏船舶
function toggleShowShip(ship) {
  ship.toggleShow();
}

// 编辑船舶信息
function editShip(ship, name, group, note) {
  ship.edit(name, group, note);
}

// 删除船舶
function deleteShip(ship) {
  ship.delete();
}

以上代码是一个简单的船舶管理系统的实现，其中包括分组管理和船舶管理两个部分。实现时，我们使用了类和对象来封装分组和船舶的相关操作。具体来说：

- 分组管理：通过 `Group` 类来实现分组的相关操作，包括添加船舶、删除分组、编辑分组名称等。

- 船舶管理：通过 `Ship` 类来实现船舶的相关操作，包括展示/隐藏船舶、编辑船舶信息、删除船舶等。

- 分组和船舶的创建：通过 `createGroup` 和 `createShip` 函数来创建新的分组和船舶。

- 分组和船舶的删除：通过 `deleteGroup` 和 `deleteShip` 函数来删除分组和船舶。

- 分组和船舶的编辑：通过 `editGroupName` 和 `editShip` 函数来编辑分组名称和船舶信息。

需要注意的是，在编辑分组名称和船舶信息时，需要对输入的名称和分组进行判断，避免出现重复或不存在的情况。同时，要注意分组名称为“未分组”的情况，该分组为默认分组，不能删除或编辑其名称。