道

工具的本质是经验的固化与能力的延伸。当分散的知识点和重复的操作被凝练为可复用的工具时，个体的智慧便转化为群体的效率。一个工具集合的价值不在于其中某个工具的强弱，而在于工具之间能否形成互补，共同覆盖工作流中的各个环节。

工具的发现与组织本身也是一门学问。面对众多的工具，如何让使用者快速找到所需、理解其用途、掌握其用法，决定了工具能否真正发挥价值。好的工具组织体系应当降低认知负荷，让使用者的心智资源集中于要解决的问题本身，而非寻找"该用哪个工具"。

法

工具分类与组织

1. 按功能域分类：将工具按照应用领域分组，如空间数据处理、文档生成、数据查询等。同域工具聚合在一起，降低跨域查找的认知成本。

2. 统一入口与导航：所有工具共享一致的导航结构，使用者只需学习一次交互模式，即可触达所有工具。多级导航（分类→工具→功能面板）形成清晰的层级关系。

3. 可搜索性：提供基于名称、描述、标签的多维度搜索，让使用者在不确定工具归属分类时，仍能通过关键词快速定位。

4. 标签体系：为每个工具标注多维标签，覆盖功能类型、数据格式、使用场景。标签既是搜索的索引，也是理解工具用途的快速参考。

5. 文档伴随：每个工具附赠道法术器四层文档，从抽象理念到具体操作层层递进，兼顾"知其然"和"知其所以然"。

设计原则

• 低认知负荷：减少使用者在寻找和理解工具上的心智消耗
• 一致性优先：同类操作的交互模式保持一致，学一知十
• 渐进式揭示：先展示概要，再按需展开细节，避免信息过载

术

工具动态加载系统

工具页面采用按需加载架构，每个工具独立打包为异步模块，仅在用户首次访问时加载。

// 使用 Vite 的 import.meta.glob 实现工具页面的按需懒加载
const pagesGlob = import.meta.glob('@/tools/*/*Page.vue')

// 每个工具页面通过 defineAsyncComponent 包装为异步组件
for (const [path, loader] of Object.entries(pagesGlob)) {
  const match = path.match(/@\/tools\/([^/]+)\/([^/]+)Page\.vue$/)
  if (match && match[1]) {
    componentMap[match[1]] = defineAsyncComponent(loader)
  }
}

每个工具页面的路由也是动态的：

{
  path: 'tools/:toolId',
  name: 'ToolDetail',
  component: () => import('@/views/layouts/ToolDetailView.vue'),
}

工具配置声明式注册

所有工具通过统一的配置数组注册，包括名称、描述、图标、标签和文档类型：

• @phosphor-icons/vue：提供 PhMapPin、PhArrowsOutCardinal 等图标，每个工具独立按需引入
• nav.ts 类型系统：定义 NavItem、ComponentMap 等接口，确保工具注册的类型安全

工具详情页组件映射

ToolDetailView 根据路由参数 toolId 从配置中查找工具信息，再通过组件映射表加载对应的页面组件。createToolNavItems 函数为每个工具生成"道法术器"导航标签，包含 MdPage（文档渲染）、ToolWithMdPage（工具+文档）和 Moment（动态）等多种布局模板。