AE Finder 是一款为 Adobe After Effects 设计的 CEP 扩展，提供在 AE 内部浏览本地文件、预览媒体、管理文件的功能。采用灰度配色，简约风格。

AE_Finder/
├── index.html          # 主界面HTML
├── css/
│   └── style.css       # 样式表
├── js/
│   ├── main.js         # 主逻辑
│   └── CSInterface.js  # Adobe CEP接口
├── host/
│   └── index.jsx       # ExtendScript脚本
├── CSXS/
│   └── manifest.xml    # 扩展配置
└── README.md           # 本文档

┌─────────────────────────────────────────────────────┐
│                    标题栏 (title-bar)                │
├─────────────────────────────────────────────────────┤
│              工具栏 (toolbar) - 搜索框               │
├─────────────────────────────────────────────────────┤
│                   工具栏分隔条                        │
├────────────────────┬────┬───────────────────────────┤
│   磁盘栏+标签+默认  │    │     磁盘栏+默认按钮        │
│   面包屑路径导航    │ 分 │     面包屑路径导航          │
│   列表头（排序）    │ 隔 │     列表头（排序）          │
│                    │ 条 │                           │
│   左侧文件列表      │    │      右侧预览区            │
│   (file-list)      │    │    (preview-panel)        │
│                    │    │                           │
├────────────────────┴────┴───────────────────────────┤
│                   水平分隔条                         │
├─────────────────────────────────────────────────────┤
│                底部编辑/详情区 (editor-panel)         │
├─────────────────────────────────────────────────────┤
│                   状态栏 (status-bar)                │
└─────────────────────────────────────────────────────┘

• 位置: 顶部第一行
• 背景色: --bg-secondary
• 内容: 标题文字 "AE Finder"
• 交互: 单击标题刷新当前目录

• 位置: 标题栏下方
• 背景色: --bg-secondary

• placeholder: "搜索或输入路径..."
• 功能:
  • 输入路径格式（含 \ 或 /）实时导航到指定路径
  • 输入普通文字进行模糊搜索，支持拼音首字母匹配
  • 实时过滤左右两侧容器内容
• 交互:
  • 获得焦点（空输入时）显示历史下拉
  • 双击打开系统文件夹选择器
  • ESC 清空搜索
  • 右键显示剪切/复制/粘贴菜单
• 清除按钮: 输入内容时显示 × 按钮

• 显示: 输入框为空且获得焦点时
• 内容: 历史访问路径（排除磁盘根目录和系统目录），显示时间戳
• 交互:
  • 点击跳转（同时更新左右两侧）
  • 右键可删除单条记录

• 图标: ↗
• 功能: 打开系统文件夹选择器，选中后左右两侧同步导航

• 触发: 悬浮或点击 ☆ 按钮
• 内容: 已添加的标签文件夹列表
• 空状态: "拖拽文件夹到此添加标签"
• 交互:
  • 点击跳转（同时更新左右两侧）
  • × 按钮删除标签
  • 支持从文件列表拖拽文件夹添加
  • 右键删除标签

• 默认宽度: 260px
• 范围: 180px - 400px
• 背景色: --bg-primary

• 背景: --bg-secondary
• 内容:
  • 磁盘按钮栏（C: D: E: 等）
  • ☆ 标签文件夹按钮
  • ⌂ 默认文件夹按钮

• 背景: --bg-secondary
• 内容: 可点击的路径段，如 D: ▸ Adobe After Effects 2023 ▸ ae ▸
• 交互:
  • 点击路径段导航到该路径
  • 点击 ▸ 箭头显示同级子文件夹下拉菜单
  • 右键复制当前路径
  • 自动滚动到最右侧
  • 末尾始终保持 60px 空隙

• 背景: --bg-secondary
• 列结构:
  • 名称 (.col-name): flex: 1
  • 分隔线 (.col-divider): 可拖拽调整列宽
  • 类型 (.col-type): 50px（默认）
  • 分隔线
  • 修改日期 (.col-date): 80px（默认）
  • 视图切换按钮
• 排序: 点击列头切换排序（▲升序 / ▼降序）
• 右键菜单: 排序选项、刷新

• 图标: ☰ (列表) / ▦ (网格)

• 列表视图: 行显示，含图标、名称、类型、修改日期
• 网格视图: 68px × 68px 方格，图标 + 名称

• 图标: ↑
• 文字: ..
• 固定: sticky 定位在顶部
• 根目录时: 透明度 0.4，禁用点击

• 标识: 左侧 2px 灰色竖线 + 微弱背景
• 排序: 始终显示在最前

• 宽度: 3px
• 悬停: --accent 色
• 功能: 拖拽调整左右面板宽度

• 宽度: flex: 1（自适应）
• 背景: --bg-primary
• 最小宽度: 100px

• 内容: 磁盘按钮栏 + ⌂ 设为默认按钮
• 磁盘按钮点击：在右侧显示该磁盘内容

• 功能: 与左侧相同，独立导航

• 结构: 与左侧相同
• 独立排序: 有自己的 previewSortBy, previewSortAsc 状态

• 显示: 未选择任何内容时
• 内容: "选择文件夹以预览"

• 显示: 选中文件夹时
• 结构:
  • 文件夹项（folder-item）：列表显示
  • 文件项（file-grid-item）：
    • 媒体文件：带缩略图/控件的卡片
    • 其他文件：行显示

• 显示: 选中媒体文件时
• 背景: --bg-tertiary
• 功能: 显示图片/视频/音频/文本预览

• 高度: 3px
• 功能: 拖拽调整主区域与编辑区高度

• 默认高度: 130px
• 最小高度: 80px
• 背景: --bg-primary

• 背景: --bg-secondary
• 内容: "文件详情" 标题 + 保存按钮（编辑模式时显示）

• 显示: 选中可编辑文本文件时
• 功能: 编辑并保存文本文件
• 支持编码: UTF-8, UTF-16, GBK 自动检测

• 左侧: 状态文本（操作反馈）
• 右侧: 项目数量 + 加载耗时

:root {
    --bg-primary: #1e1e1e;    /* 最深 - 内容区背景 */
    --bg-secondary: #252526;  /* 中等 - 头部/工具栏 */
    --bg-tertiary: #2d2d2d;   /* 最浅 - 特殊元素 */
    --text-primary: #cccccc;  /* 主要文字 */
    --text-secondary: #808080;/* 次要文字 */
    --accent: #555555;        /* 强调色（灰色） */
    --border: #3c3c3c;        /* 边框 */
    --hover: #2a2d2e;         /* 悬停背景 */
    --selected: rgba(255, 255, 255, 0.08); /* 选中背景 */
}

• 触发: Ctrl + 滚轮
• 范围: 70% - 150%
• 独立区域:
  • --zoom-list: 左侧列表
  • --zoom-preview: 右侧预览
  • --zoom-editor: 编辑器

• 触发: 在搜索框输入普通文字（非路径格式）
• 实时过滤: 左右两侧容器同时过滤
• 匹配方式:
  • 直接包含匹配
  • 拼音首字母匹配（如输入 "wjj" 匹配 "文件夹"）
  • 首字母连续匹配
• 高亮: 匹配文字高亮显示（灰色背景）
• 重置: 清空搜索框、按 ESC、或输入路径格式

• 触发: 输入以 \ 或 / 开头，或盘符格式（如 D:\）
• 实时导航: 300ms 防抖，路径有效时自动跳转

• 新建文件夹: 内联编辑命名
• 新建文本文件: 创建 .txt 文件
• 新建 JSX 脚本: 创建 .jsx 文件，带默认注释

• 触发: 右键菜单 → 重命名
• 方式: 内联编辑（直接在列表项中编辑）
• 选中: 文件名自动选中（不含扩展名），文件夹全选
• 确认: Enter 或失去焦点
• 取消: Escape

• 触发: 右键菜单 → 删除
• 确认: 弹出确认对话框
• 支持: 递归删除文件夹

• 触发: 右键菜单 → 置顶/取消置顶
• 效果: 置顶项显示在列表最前，带左侧灰色竖线标识
• 存储: 按目录存储置顶项

• 触发: 双击文件 / 右键菜单
• 支持: 单文件导入、多选批量导入、文件夹递归导入
• 文件夹导入: 递归扫描所有可导入文件，在 AE 项目中创建对应目录结构

• 导入到 AE（文件夹会递归导入所有内容）
• 置顶 / 取消置顶
• 重命名（内联编辑）
• 删除
• 复制路径
• 在资源管理器中显示

• 刷新
• 新建文件夹
• 新建文本文件
• 新建 JSX 脚本
• 在资源管理器中打开

• 按名称排序
• 按类型排序
• 按日期排序
• 刷新

• 剪切
• 复制
• 粘贴
• 全选
• 清空

• 复制路径

png, jpg, jpeg, gif, bmp, tiff, tif, webp, ico

mp4, webm, mov, avi, mkv, wmv, flv, m4v, mxf

mp3, wav, aac, flac, ogg, m4a, wma, aiff

aep, aepx (After Effects), psd, psb, ai, eps (Photoshop/Illustrator)

txt, json, jsx, js, md, csv, xml, html, css, srt, ass, log, ini, cfg

localStorage 键名: ae_finder_data

{
    history: [],        // 历史记录 (最近50条)
    tagFolders: [],     // 标签文件夹 (最多20个)
    pinnedItems: {},    // 置顶项 { 目录路径: [文件名数组] }
    lastPath: "",       // 上次路径
    defaultPath: "",    // 默认文件夹
    viewMode: "list",   // 视图模式 (list/grid)
    sortBy: "name",     // 排序字段 (name/type/mtime)
    sortAsc: true       // 排序方向
}

• 扩展名称: AE Finder
• 版本: 1.0.0
• 支持 AE: CC 2018+ (15.0+)
• CEP 版本: 9.0+
• 主题: 灰度配色，简约风格