options.css 内容优化2 --chatPGT

问：

options.css 内容优化,功能列表的li,设置成点击按钮的样式，需要有鼠标经过高亮，选中时按钮背景颜色和未选中时的背景色需要有肉眼可见的色差

gpt:

为了使左侧功能列表的每个 `<li>` 元素看起来像按钮，并且在鼠标经过时高亮显示，同时选中和未选中状态之间有明显的颜色差异，你可以使用以下样式规则：

```css
/* 设置功能列表项样式 */
.function-list li {
  margin-bottom: 10px;
  cursor: pointer;
  background-color: #333; /* 未选中时的背景色为深灰色 */
  padding: 10px 20px;
  border: 2px solid transparent; /* 添加透明边框，用于高亮效果 */
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标经过时高亮 */
.function-list li:hover {
  background-color: #555; /* 鼠标经过时的背景色为稍微亮一些的灰色 */
}

/* 选中时样式 */
.function-list li.selected {
  background-color: #0078d4; /* 选中时的背景色为蓝色 */
  color: #fff; /* 文字颜色为白色 */
  border-color: #005aa7; /* 边框颜色为深蓝色 */
}
```

上述样式规则将为功能列表的每个 `<li>` 元素添加了按钮样式，当鼠标经过时会高亮显示，选中时按钮的背景颜色、文字颜色和边框颜色都会有明显的变化。选中时的背景色为蓝色，未选中时的背景色为深灰色，这样就有了肉眼可见的色差。

然后，你可以在 JavaScript 中处理点击事件，以便在点击时切换按钮的选中状态并应用相应的样式。例如：

```javascript
// options.js

document.addEventListener("DOMContentLoaded", function () {
  const functionList = document.querySelector(".function-list");

  // 初始化默认选中的功能
  let selectedFunction = null;

  functionList.addEventListener("click", (event) => {
    if (event.target && event.target.tagName === "LI") {
      // 取消之前选中的功能的样式
      if (selectedFunction) {
        selectedFunction.classList.remove("selected");
      }

      // 设置新选中的功能样式
      selectedFunction = event.target;
      selectedFunction.classList.add("selected");
      
      // 处理选中的功能，你可以根据需要执行相应的操作
      const functionName = selectedFunction.dataset.function;
      handleSelectedFunction(functionName);
    }
  });

  // 处理选中的功能
  function handleSelectedFunction(functionName) {
    // 在这里可以根据选中的功能执行相应的操作
  }
});
```

这些样式和 JavaScript 代码将帮助你实现功能列表的按钮样式，包括鼠标经过高亮和选中时的颜色变化。你可以根据需要在 `handleSelectedFunction` 函数中添加具体的选中功能的操作逻辑。