/ 自定义样式补充 /

.container {

margin-top: 2rem;

roleList li {

display: flex;

justify-content: space-between;

align-items: center;

padding: 0.75rem 1rem;

background-color: f8fafc;

border-radius: 0.375rem;

transition: background-color 0.2s;

roleList li:hover {

background-color: e2e8f0;

.delete-btn {

color: ef4444;

cursor: pointer;

font-weight: bold;

padding: 0.25rem 0.5rem;

border-radius: 0.25rem;

.delete-btn:hover {

background-color: fee2e2;

document.addEventListener('DOMContentLoaded', => {

const roleForm = document.getElementById('roleForm');

const roleNameInput = document.getElementById('roleName');

const roleList = document.getElementById('roleList');

// 从localStorage加载角色

loadRoles;

// 表单提交处理

roleForm.addEventListener('submit', (e) => {

e.preventDefault;

const roleName = roleNameInput.value.trim;

if (roleName) {

addRole(roleName);

roleNameInput.value = '';

});

// 添加角色

function addRole(name) {

let roles = getRoles;

roles.push(name);

saveRoles(roles);

renderRoles;

// 删除角色

function deleteRole(index) {

let roles = getRoles;

roles.splice(index, 1);

saveRoles(roles);

renderRoles;

// 渲染角色列表

function renderRoles {

const roles = getRoles;

roleListnerHTML = '';

if (roles.length === 0) {

roleListnerHTML = '

暂无角色

';

return;

roles.forEach((role, index) => {

const li = document.createElement('li');

linerHTML = `

${role}

删除

`;

roleList.appendChild(li);

});

// 添加删除按钮

document.querySelectorAll('.delete-btn').forEach(btn => {

btn.addEventListener('click', => {

deleteRole(parseInt(btn.datasetdex));

});

});

// 从localStorage获取角色

function getRoles {

const roles = localStorage.getItem('robotRoles');

return roles ? JSON.parse(roles) : [];

// 保存角色到localStorage

function saveRoles(roles) {

localStorage.setItem('robotRoles', JSON.stringify(roles));

// 加载角色

function loadRoles {

renderRoles;

});