# like-mac

**Repository Path**: ai-project_7/like-mac

## Basic Information

- **Project Name**: like-mac
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-18
- **Last Updated**: 2025-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 文件压缩网站

生成一个文件压缩网站，将文件进行高品质压缩或者压缩成zip

# 技术依赖
- nuxt3
- typescript
- unocss
- pnpm
- node:20.18.0

# 功能特性
一、核心压缩与处理功能
广泛的格式支持：
文档： PDF、DOC/DOCX、PPT/PPTX、XLS/XLSX、TXT
图片： JPG/JPEG、PNG、GIF、SVG、BMP、TIFF
视频： MP4、MOV、AVI、MKV（压缩或降低分辨率）
音频： MP3、WAV、M4A
压缩包： ZIP、RAR、7Z、TAR、GZ（支持压缩与解压）
智能压缩算法：
有损/无损压缩： 图片可选择“有损压缩”（文件更小）或“无损压缩”（质量不变）；PDF可选择优化质量或最小体积。
预设优化场景： 如“适用于网页”、“适用于邮件发送”、“高质量打印”。
批量处理： 允许用户一次性上传并压缩多个文件，最终打包成一个ZIP文件下载。
基础文件操作：
转换与压缩结合： 如上传PNG图片，选择压缩为JPG格式。
简单编辑： 图片压缩前可进行裁剪、旋转、调整尺寸。
支持文件夹压缩
二、用户体验流程功能
极简的上传方式：
拖拽上传： 将文件拖入浏览器窗口。
文件选择器： 传统的点击选择。
清晰的处理状态反馈：
实时显示上传进度、压缩进度、预估剩余时间。
压缩完成后，清晰展示压缩效果对比（如：原文件 5.2MB → 压缩后 1.8MB，节省了65%）。
对于图片等格式，可提供在浏览器内完成压缩的选项，文件不上传服务器，最大程度保护隐私。这是强大的卖点。
便捷的下载与管理：
提供醒目的下载按钮。
三、网站基础与高级功能
强大的后端架构：
分布式任务队列，处理高并发请求。
使用高效的压缩库（如针对图片的MozJPEG、pngquant，针对PDF的ghostscript）。
响应式设计：
在手机、平板、电脑上均有良好的操作体验。
完整产品 (应该有)​
核心​
支持JPG、PNG、PDF的压缩；单文件上传
支持视频、音频、压缩包等20+格式；批量处理；格式转换
体验​
拖拽上传；显示压缩比；基础UI

# 规范

### 1. Props 规范

// ✅ 推荐：使用 TypeScript interface
interface Props {
  // 必需属性
  title: string
  count: number
  
  // 可选属性
  description?: string
  
  // 联合类型
  size?: 'small' | 'medium' | 'large'
  
  // 对象类型
  user?: {
    id: number
    name: string
  }
  
  // 数组类型
  items?: Array<{ id: number; text: string }>
}

// 使用默认值
const props = withDefaults(defineProps<Props>(), {
  description: '',
  size: 'medium',
  items: () => []
})

### 2. 组件命名

// ✅ 多单词组件名（避免与 HTML 元素冲突）
components/UserProfile.vue
components/ImageUploader.vue
components/PaymentDialog.vue

// ❌ 避免单个单词
components/User.vue
components/Image.vue
components/Dialog.vue

// ✅ 组件文件使用 PascalCase
components/ai-video/TemplateCard.vue

// ❌ 避免 kebab-case 文件名
components/ai-video/template-card.vue

### 3. UnoCSS 优先

<template>
  <!-- ✅ 优先使用 UnoCSS 原子类 -->
  <div class="flex items-center justify-between px-4 py-2 bg-blue-500 text-white">
    内容
  </div>
  
  <!-- ✅ 复杂样式使用 scoped CSS -->
  <div class="custom-component">
    特殊样式
  </div>
</template>

<style scoped>
.custom-component {
  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}
</style>

---

### 4. 响应式设计

<template>
  <!-- ✅ 使用 UnoCSS 响应式前缀 -->
  <div class="px-4 sm:px-6 md:px-8 lg:px-12">
    <!-- 移动端 16px, 小屏 24px, 中屏 32px, 大屏 48px -->
  </div>
  
  <!-- ✅ 使用响应式类 -->
  <div class="flex-col sm:flex-row">
    <!-- 移动端垂直，桌面端水平 -->
  </div>
</template>


### 5. 文件命名

# ✅ 组件文件 - PascalCase
components/UserProfile.vue
components/ImageUploader.vue
components/PaymentDialog.vue

# ✅ Composables - camelCase
composables/useImageUpload.ts
composables/useFacebookPixel.ts

# ✅ Utils - camelCase
utils/formatDate.ts
utils/validateEmail.ts

# ✅ Stores - camelCase
stores/globalStore.ts
stores/paymentStore.ts

# ✅ 类型定义 - PascalCase 或 camelCase
types/User.ts
types/api.d.ts

## 注释规范

### 1. 文件头注释

/**
 * @file 用户资料组件
 * @description 显示和编辑用户个人信息
 * @author Your Name
 * @date 2025-10-17
 */

### 2. 函数注释
/**
 * 格式化日期为指定格式
 * @param date - 要格式化的日期
 * @param format - 日期格式，默认 'YYYY-MM-DD'
 * @returns 格式化后的日期字符串
 * @example
 * formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
 * // => '2025-10-17 14:30:00'
 */
const formatDate = (date: Date, format = 'YYYY-MM-DD'): string => {
  // 实现...
}

### 3. 复杂逻辑注释

// ✅ 为复杂逻辑添加注释
const processImage = async (file: File) => {
  // 1. 验证文件格式和大小
  if (!validateFile(file)) {
    throw new Error('Invalid file')
  }
  
  // 2. 压缩图片（如果超过 2MB）
  const compressedFile = file.size > 2 * 1024 * 1024
    ? await compressImage(file)
    : file
  
  // 3. 上传到服务器
  const uploadResult = await uploadFile(compressedFile)
  
  // 4. 返回处理结果
  return uploadResult
}

// ❌ 避免显而易见的注释
const count = 0  // 定义 count 变量

---