Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Mark24Code/sliceway

Open more actions menu

Repository files navigation

Sliceway

中文版 | English Version

Sliceway Logo

现代化的 Photoshop 文件处理和导出工具

Ruby React Docker

🚀 功能特性

核心功能

  • 智能 PSD 解析: 自动解析 Photoshop 文件中的图层、切片、组和文字
  • 批量导出: 支持多倍率导出 (1x, 2x, 4x)
  • 项目管理: 完整的项目生命周期管理
  • 实时预览: 图层预览和属性查看
  • 主题切换: 支持明暗主题一键切换,自动保存偏好设置

高级特性

  • 增量更新: 基于内容哈希的智能导出,只导出有变化的内容
  • 批量操作: 支持批量选择、删除和导出
  • 文件追踪: 导出历史记录和文件变更检测
  • 多格式支持: 支持 PSD 和 PSB 文件格式

🛠️ 快速启动

使用预构建镜像

Linux/MacOS

# 从 Docker Hub 拉取并运行预构建镜像
docker run -d \
  -p 4567:4567 \
  -v /path/to/data:/data \
  mark24code/sliceway:latest

Windows

docker run -d ^
  -p 4567:4567 ^
  -v "C:\path\to\exports:/data" ^
  mark24code/sliceway:latest

开发环境启动

1. 一键初始化

# 安装所有依赖并初始化数据库
rake project:init

2. 启动后端服务

# 启动 Sinatra 服务器 (端口 4567)
rake server:start

3. 启动前端开发服务器

# 启动前端开发服务器 (端口 5173)
rake server:frontend

4. 访问应用

生产环境启动

构建前端

cd frontend
npm run build

启动生产服务器

RACK_ENV=production bundle exec ruby app.rb

🐳 Docker 使用方法

构建镜像

docker build -t sliceway .

运行容器

docker run -d \
  --name sliceway \
  -p 4567:4567 \
  -v /path/to/data:/data \
  sliceway

数据持久化

  • 上传文件: /data/uploads
  • 导出文件: /data/exports
  • 数据库: /data/db
  • 处理文件: /data/public/processed

📖 使用方法

0. PSD 文件预处理(推荐)

为了获得更好的解析效果,建议在上传 PSD 文件前使用 Photoshop 脚本进行预处理:

  1. 运行脚本进行图层处理

    • 使用脚本: ps-plugins/convert_effects_to_smart_object/convert_effects_to_smart_object.jsx
    • 该脚本会将图层效果转换为智能对象,确保更好的兼容性
  2. 如何运行 Photoshop 脚本

    • 在 Photoshop 中打开您的 PSD 文件
    • 点击菜单栏: 文件脚本浏览...
    • 选择并导入上述 .jsx 脚本文件
    • 等待脚本执行完成
  3. 保存处理后的文件

    • 将处理后的 PSD 文件另存为副本
    • 使用这个副本文件上传到平台

提示: 虽然预处理不是必须的,但强烈建议对包含复杂效果的 PSD 文件进行预处理,以确保最佳的解析和导出效果。

1. 创建项目

  1. 打开前端界面
  2. 点击 "新建项目" 按钮
  3. 上传 PSD/PSB 文件(建议使用预处理后的文件)
  4. 设置项目名称和导出路径

2. 处理文件

  • 系统自动解析 PSD 文件
  • 查看解析出的图层、切片和组
  • 支持按类型筛选和搜索

3. 导出图片

  1. 选择需要导出的图层
  2. 设置导出倍率 (1x, 2x, 4x)
  3. 点击导出按钮
  4. 导出的图片保存到指定目录

4. 批量操作

  • 支持多项目批量删除
  • 状态感知的确认对话框
  • 实时进度显示

5. 主题切换

  • 在项目列表页面右上角找到主题切换按钮(灯泡图标)
  • 支持浅色模式和深色模式
  • 主题偏好会自动保存到浏览器本地存储
  • Ant Design 组件会自动适配当前主题

🔧 配置说明

环境变量

# 服务器配置
RACK_ENV=production
UPLOADS_PATH=/data/uploads
PUBLIC_PATH=/data/public
DB_PATH=/data/db/production.sqlite3
EXPORTS_PATH=/data/exports
STATIC_PATH=/app/dist

端口配置

  • 后端服务: 4567
  • 前端开发: 5173
  • Docker 容器: 4567

📋 系统要求

开发环境

  • Ruby 3.0+
  • Node.js 18+
  • SQLite3

生产环境

  • Docker 20.10+
  • 2GB+ 内存
  • 10GB+ 磁盘空间

🐛 故障排除

常见问题

  1. 端口冲突: 检查 4567 和 5173 端口是否被占用
  2. 文件权限: 确保数据目录有读写权限
  3. 内存不足: 处理大文件时确保有足够内存

调试模式

DEBUG=true bundle exec ruby app.rb

Made with ❤️ for designers and developers

About

一剪没 sliceway:✨ PS切图助手 - 自动化导出多倍率图片资源,真正所见即所得的切图体验。告别手动切图,让设计到开发的流程更顺畅。

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.