readme改了一下

README.md

@@ -9,6 +9,8 @@
 - [x] <a href="#添加自动保存笔记信息">添加自动保存笔记信息</a>
 - [x] <a href="#官狼各游戏版型选择">官狼各游戏版型选择</a>
 - [x] <a href="#快捷记录起跳关键信息">快捷记录起跳关键信息</a>
+- [ ] pc端可自定义布局
+- [ ] 添加重置功能
 - [ ] 计时器功能
 - [ ] 玩家号码可以是6-12人之间
 - [ ] 可以另外写一个给法官用的页面
@@ -84,7 +86,7 @@
 
 #### 补充说明
 
-`CC`：Choose Claim（起跳声称某种身份）
+`CC`：Choose Claim （选择起跳声称某种身份）
 
 `CA`：Choose Abandon（放弃起跳或声称某种身份）
 
@@ -98,4 +100,45 @@
 
 ## 引用说明
 
-部分图标素材取自阿里巴巴矢量图标库 [https://www.iconfont.cn/]
+部分图标素材取自阿里巴巴矢量图标库 [https://www.iconfont.cn/]
+
+## 项目背景
+
+这个小项目源于我观看狼人杀游戏直播时的一个发现。我注意到大多数主播用记事本等工具记录游戏中的发言信息，觉得不太方便。于是我在网上查找有关狼人杀的笔记工具，但遗憾的是，那时的我并没有找到特别合适的工具。
+
+2024年6月初，实习结束后，我决定自己尝试制作一个专门的狼人杀在线笔记页面。作为前端小白，借助AI工具，我花了两周时间东拼西凑做了一个简易版本，那时候只会用基础的`HTML`、`CSS`
+和一点点`JavaScript`
+，连怎么修改角色标记都不会，最后不得不暂时搁置。虽然做得很不专业，但那个简易的版本见证了新版本的起点。我把它保存在了`old`
+分支里，作为我学习历程的一个纪念。
+
+2024年7月初，因工作需要，我开始学习`Vue3`的基础，以及`Echarts`和`Element Plus`的简单使用。
+
+2024年8月初，因试用期能力不足，我从公司离职，这次经历让我认识到自己还有很多需要学习的地方。离职后，我决定重新投入到这个项目中，借此机会提升自己的技能。我用`Vue3`
+框架重写了这个项目，新版本放在了`main`分支。借助`Claude`等AI工具的帮助，我逐步改进了这个小项目。虽然比最初的尝试有所进步，但我清楚还有很大的提升空间。
+
+## 开发者说明
+
+这个小项目采用了MIT协议开源。如果您觉得它有任何可取之处：
+
+- 欢迎Fork去自由修改，也许您能把它变得更好。
+- [MIT许可证](./LICENSE)允许您在遵守协议的前提下自由使用和分发。
+
+由于我的技术水平还很有限，可能无法处理复杂的改动，但非常欢迎：
+
+- 在Issues中分享您的想法或建议，无论大小。
+- 如果您做了什么有趣的改进，也欢迎在Issues里告诉大家。
+
+您的每一个反馈都可能成为这个小工具进步的契机，我会非常感激。
+
+## 反馈与交流
+
+如果您在使用过程中有任何问题、建议或想法，欢迎提Issue交流。
+
+Issue：[点击跳转](https://github.com/syhy0612/lrsNotes/issues)
+
+Email：syhy0612@163.com
+
+感谢您对这个小项目的关注，祝您游戏愉快！
+
+如果您觉得这个项目对您有所帮助，欢迎点个star⭐支持一下。您的每一个星星都是我继续改进的动力！
+

src/components/searchTypes.vue

@@ -1,5 +1,7 @@
 <template>
+  <!-- 搜索容器的主要div，使用ref获取DOM引用，用于处理外部点击 -->
   <div class="search-container" ref="containerRef">
+    <!-- 使用Element Plus的el-input组件作为搜索输入框 -->
     <el-input
         v-model="searchTerm"
         placeholder="搜索版型..."
@@ -9,23 +11,28 @@
         class="custom-input"
         clearable
     >
+      <!-- 自定义输入框后缀图标，用于切换下拉框的显示状态 -->
       <template #suffix>
         <el-icon class="dropdown-icon" @click="toggleDropdown">
           <ArrowDown :class="{ 'is-reverse': showDropdown }" />
         </el-icon>
       </template>
     </el-input>
 
+    <!-- 下拉框，使用v-show控制显示/隐藏 -->
     <div v-show="showDropdown" class="dropdown">
+      <!-- 收藏部分 -->
       <div v-if="filteredFavorites.length > 0" class="favorites-section">
         <div class="section-title">收藏</div>
+        <!-- 遍历显示收藏的项目 -->
         <div
             v-for="item in filteredFavorites"
             :key="item.id"
             class="dropdown-item favorite"
             @click="selectItem(item)"
         >
           <span>{{ item.name }}</span>
+          <!-- 收藏图标，点击可切换收藏状态 -->
           <el-icon
               class="favorite-icon"
               @click.stop="toggleFavorite(item)"
@@ -35,15 +42,18 @@
         </div>
       </div>
 
+      <!-- 其他项目部分 -->
       <div v-if="filteredOthers.length > 0" class="others-section">
         <div class="section-title">其他</div>
+        <!-- 遍历显示非收藏的项目 -->
         <div
             v-for="item in filteredOthers"
             :key="item.id"
             class="dropdown-item"
             @click="selectItem(item)"
         >
           <span>{{ item.name }}</span>
+          <!-- 收藏图标，点击可添加到收藏 -->
           <el-icon
               class="favorite-icon"
               @click.stop="toggleFavorite(item)"
@@ -53,6 +63,7 @@
         </div>
       </div>
 
+      <!-- 没有搜索结果时显示的信息 -->
       <div v-if="filteredFavorites.length === 0 && filteredOthers.length === 0" class="no-results">
         没有匹配结果
       </div>
@@ -61,14 +72,18 @@
 </template>
 
 <script setup>
+// 导入Vue 3的组合式API
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+// 导入Element Plus的图标组件
 import { Search, Star, StarFilled, ArrowDown } from '@element-plus/icons-vue';
 
-const searchTerm = ref('');
-const showDropdown = ref(false);
-const selectedItem = ref(null);
-const containerRef = ref(null);
+// 定义响应式变量
+const searchTerm = ref(''); // 搜索输入
+const showDropdown = ref(false); // 控制下拉框显示
+const selectedItem = ref(null); // 当前选中的项目
+const containerRef = ref(null); // 容器的DOM引用
 
+// 定义所有可选项
 const allItems = ref([
   { id: 1, name: '狼美人骑士', pinyin: 'lmrqs' },
   { id: 2, name: '觉醒之夜', pinyin: 'jxzy' },
@@ -99,8 +114,10 @@ const allItems = ref([
   { id: 27, name: '丘比特场', pinyin: 'qbtc' }
 ]);
 
+// 收藏列表
 const favorites = ref([]);
 
+// 切换收藏状态的函数
 const toggleFavorite = (item) => {
   const index = favorites.value.findIndex(fav => fav.id === item.id);
   if (index > -1) {
@@ -110,32 +127,38 @@ const toggleFavorite = (item) => {
   }
 };
 
+// 处理输入事件
 const handleInput = () => {
   if (searchTerm.value) {
     showDropdown.value = true;
   }
 };
 
+// 处理聚焦事件
 const handleFocus = () => {
   showDropdown.value = true;
 };
 
+// 处理清除事件
 const handleClear = () => {
   searchTerm.value = '';
   selectedItem.value = null;
   // 保持下拉框的当前状态
 };
 
+// 切换下拉框显示状态
 const toggleDropdown = () => {
   showDropdown.value = !showDropdown.value;
 };
 
+// 选择项目的函数
 const selectItem = (item) => {
   selectedItem.value = item;
   searchTerm.value = item.name;
   showDropdown.value = false;
 };
 
+// 计算属性：过滤后的项目列表
 const filteredItems = computed(() => {
   const term = searchTerm.value.toLowerCase();
   return allItems.value.filter(item =>
@@ -144,29 +167,33 @@ const filteredItems = computed(() => {
   );
 });
 
+// 计算属性：过滤后的收藏项目
 const filteredFavorites = computed(() => {
   return filteredItems.value.filter(item => favorites.value.some(fav => fav.id === item.id));
 });
 
+// 计算属性：过滤后的非收藏项目
 const filteredOthers = computed(() => {
   return filteredItems.value.filter(item => !favorites.value.some(fav => fav.id === item.id));
 });
 
+// 处理外部点击事件，关闭下拉框
 const handleClickOutside = (event) => {
   if (containerRef.value && !containerRef.value.contains(event.target)) {
     showDropdown.value = false;
   }
 };
 
+// 组件挂载时添加点击事件监听器
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
 });
 
+// 组件卸载时移除点击事件监听器
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
 });
 </script>
-
 <style scoped>
 .search-container {
   position: relative;
@@ -201,7 +228,7 @@ onUnmounted(() => {
   background-color: white;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   z-index: 1;
 }