在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

Stirling-Tools/Stirling-PDF

菜单

用户界面

相关源文件

本文详细概述了 Stirling-PDF 用户界面系统、其关键组件以及它们如何协同工作以提供连贯的用户体验。它涵盖了核心 UI 架构、组件结构、文件处理机制和主题系统。

有关驱动 UI 的底层架构信息，请参阅架构。

UI 架构概览

Stirling-PDF 结合使用 Thymeleaf 模板进行服务器端渲染和客户端 JavaScript 实现动态交互。UI 基于 Bootstrap 构建，并通过 CSS 进行了广泛定制。

UI 架构遵循模块化设计，可重用片段组合起来创建完整的页面模板。这种方法允许在整个应用程序中实现一致的样式和行为，同时简化维护。

来源

核心 UI 组件

文件选择界面

文件选择组件是 Stirling-PDF 的核心元素，为整个应用程序的文件上传提供了一致的界面。

文件选择组件的特点

  1. 带有视觉反馈的**拖放界面**
  2. **多文件支持**和单独的文件预览
  3. 适当情况下 ZIP 文件的**自动解压缩**
  4. 基于当前操作的**文件类型验证**
  5. 加密 PDF 的**密码检测**
  6. **Google 云端硬盘集成**（高级功能）
  7. 文件大小限制执行

来源

导航系统通过带有分类下拉菜单的响应式导航栏提供对所有应用程序功能的访问。它包括一个智能搜索功能，可帮助用户快速找到特定操作。

导航系统的主要特点

  1. 带有视觉分组的**分类操作**
  2. 用于快速查找工具的**即时搜索**
  3. 适应屏幕尺寸的**响应式设计**
  4. 支持 30 多种语言的**语言选择**
  5. 具有类别特定颜色和图标的**视觉样式**

来源

处理和下载系统

处理和下载组件负责文件提交、操作执行、进度跟踪和文件交付。

处理和下载系统的主要特点

  1. **进度指示**，用于长时间操作
  2. **多文件处理**和统一下载
  3. 多个输出文件的**自动 ZIP 打包**
  4. 具有清晰用户反馈的**错误处理**
  5. 长时间操作期间的**交互元素**（游戏选项）
  6. 带有密码提示的**加密文件处理**

来源

主题系统

Stirling-PDF 包含一个全面的主题系统，支持浅色和深色模式。主题控制整个应用程序的颜色、阴影、组件样式和视觉反馈。

主题系统的主要方面

  1. 用于一致样式的**基于 CSS 变量的设计**
  2. **浅色和深色主题**，可无缝切换
  3. 用于视觉分组的**类别特定颜色**
  4. 针对不同屏幕尺寸的**响应式适配**
  5. 操作页面上**一致的组件样式**
  6. 受 Material Design 影响，带有图标系统和高程

来源

页面特定界面

主页界面

主页提供了一个可搜索、分类的所有可用操作网格。

主页的主要特点

  1. 具有即时过滤功能的**可搜索操作目录**
  2. **基于类别的操作组织**
  3. 带有描述性图标和文本的**视觉卡片界面**
  4. 用于快速访问常用操作的**收藏夹系统**
  5. 适应屏幕尺寸的**响应式网格布局**

来源

操作特定界面

Stirling-PDF 中的每个操作都拥有一个根据其特定功能定制的专用界面，同时保持一致的 UI 模式。

操作页面的通用元素

  1. 支持拖放的**标准化文件输入**
  2. 用于配置进程的**操作特定控件**
  3. 一致的提交和下载按钮
  4. 较长操作的**进度指示**
  5. 错误处理和反馈

多工具界面

多工具界面允许对多个 PDF 进行操作，并提供额外的文件组织功能。

多工具界面的主要特点

  1. 支持拖放的**可重新排序文件列表**
  2. 包括页数的**文件元数据显示**
  3. 按名称或修改日期**排序选项**
  4. 单独文件删除
  5. **重置功能**以清除所有选定文件

来源

UI 与外部工具集成

Stirling-PDF 与多种外部工具集成，以提供增强的功能。UI 会根据这些工具的可用性进行调整。

UI 在启动时检测所需外部工具的可用性，并且只显示可以使用可用工具执行的操作。这提供了无缝的用户体验，而不会暴露无法正常工作的功能。

来源

UI 中的高级功能

Stirling-PDF 包含高级功能，启用后可增强 UI 体验。

Google 云端硬盘集成等高级功能根据许可证状态和配置设置在 UI 中有条件地呈现。

来源

文件处理 UI 示例

以下是 PDF 对比度调整的 UI 流程具体示例，展示了 UI 组件如何协同工作以完成操作

此示例展示了当用户调整设置时界面如何提供即时视觉反馈，然后在用户对结果满意时处理整个文档。

来源

响应式设计

Stirling-PDF 的 UI 旨在适应不同屏幕尺寸，并针对移动和桌面视图进行特定调整。

响应式设计的主要特点

  1. 根据视口宽度调整的**灵活卡片网格**
  2. 在小屏幕上**可折叠的导航**
  3. 针对触摸设备**优化的文件输入**
  4. 适用于不同设备的**适当大小控件**
  5. 用于调整布局以适应屏幕尺寸的**媒体查询**

来源