WebDict

WebDict 是一款基于 Web 的词典管理工具，支持用户创建、编辑、导出和导入词典。通过简洁的界面，用户可以轻松管理单词及其释义，并支持多词典切换和本地存储。

---

功能特性

1. 词典管理:

   • 支持添加、删除和切换多个词典。
   • 词典数据自动保存到浏览器的 localStorage，无需重复加载。

2. 单词管理:

   • 添加单词及其详细释义（包括音标、词性、中文释义和例句）。
   • 支持搜索功能，快速查找单词。

3. 格式化显示:

   • 详细释义以结构化方式展示，支持音标、词性标注、中文释义和例句的解析与渲染。

4. 文件导入/导出:

   • 支持从 JSON 文件导入词典。
   • 支持将当前词典导出为 JSON 文件。

5. 用户友好设计:

   • 界面简洁直观，操作便捷。
   • 提供实时提示消息，提升用户体验。

---

使用方法

1. 启动页面

• 打开应用后，默认进入启动页。
• 点击“+”按钮上传一个 JSON 格式的词典文件，或直接添加新词典。

2. 添加词典

• 点击“+”按钮，选择 JSON 文件上传。
• 输入词典名称，确认后即可加载词典。

3. 添加单词

• 在主界面中，输入单词和定义，点击“添加”按钮即可将单词加入当前词典。
• 定义支持多行文本，建议按照以下格式输入：

  /ˈlæŋɡwɪdʒ/ (BrE) /ˈlæŋɡwɪdʒ/ (AmE)
  
  1. [noun] 语言：人类用来交流的声音符号系统。
  - 中文释义：用于表达思想、情感和信息的符号体系。
  
  2. [noun] 语言风格：某种特定领域或群体使用的表达方式。
  - 中文释义：特定领域或群体特有的表达习惯。
  
  例句：
  - English is one of the most widely spoken languages in the world. （英语是世界上使用最广泛的语言之一。）
  - The language of poetry is often more expressive than everyday speech. （诗歌的语言通常比日常语言更具表现力。）
  

4. 查看单词详细释义

• 在左侧导航栏中点击单词，右侧会显示其详细释义。
• 音标、词性、中文释义和例句以结构化方式呈现。

5. 导出词典

• 点击右上角的“>”按钮，将当前词典导出为 JSON 文件。

6. 搜索功能

• 在左侧导航栏顶部的搜索框中输入关键词，可快速过滤单词列表。

---

技术实现

Vanilla JS

• HTML: 构建页面结构。
• CSS: 实现美观的界面设计。
• JavaScript: 处理交互逻辑、数据管理和动态渲染。
• localStorage: 用于保存词典数据，确保数据在页面刷新后不丢失。

主要功能

1. 词典管理:

   • 使用 Map 数据结构存储多个词典及其单词。
   • 通过 localStorage 实现数据持久化。

2. 单词定义解析:

   • 使用正则表达式解析音标、词性、中文释义和例句。
   • 动态生成 HTML 结构，优化显示效果。

3. 词库文件导入/导出:

   • 使用 FileReader 解析上传的 JSON 文件。
   • 使用 Blob 和 URL.createObjectURL 实现文件下载。

4. 搜索功能:

   • 对单词列表进行实时过滤，支持模糊匹配。

---

许可证

本项目采用 MIT License，您可以自由使用、修改和分发本软件。