# 文件标签浏览器实现计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 构建一个基于WebDAV协议的多服务器文件管理系统，支持文件浏览、上传下载、预览、搜索排序等功能

**Architecture:** 前后端分离架构，Spring Boot 3后端作为WebDAV代理，Vue 3前端提供文件管理界面，MySQL存储服务器配置和文件元数据缓存

**Tech Stack:** Spring Boot 3, Spring Data JPA, Sardine WebDAV, MySQL 8, Vue 3, Element Plus, Pinia, Vite

---

## 文件结构映射

### 后端文件 (file-manager-backend/)

```
file-manager-backend/
├── pom.xml                                              # Maven配置
├── src/main/java/com/filemanager/
│   ├── FileManagerApplication.java                     # 主应用
│   ├── config/
│   │   ├── CorsConfig.java                            # 跨域配置
│   │   └── PasswordEncryptor.java                     # 密码加密
│   ├── entity/
│   │   ├── ServerConfig.java                          # 服务器配置实体
│   │   └── FileMetadata.java                          # 文件元数据实体
│   ├── repository/
│   │   ├── ServerConfigRepository.java
│   │   └── FileMetadataRepository.java
│   ├── dto/
│   │   ├── ApiResponse.java                           # 统一响应
│   │   ├── ServerConfigDTO.java
│   │   └── FileDTO.java
│   ├── service/
│   │   ├── WebDavService.java                         # WebDAV客户端
│   │   ├── ServerService.java                         # 服务器管理
│   │   └── FileService.java                           # 文件操作
│   ├── controller/
│   │   ├── ServerController.java                      # 服务器API
│   │   ├── FileController.java                        # 文件操作API
│   │   └── PreviewController.java                     # 文件预览API
│   └── exception/
│       ├── GlobalExceptionHandler.java
│       └── WebDavException.java
└── src/main/resources/
    └── application.yml                                # 应用配置
```

### 前端文件 (file-manager-frontend/)

```
file-manager-frontend/
├── package.json                                        # 依赖配置
├── vite.config.js                                     # Vite配置
├── index.html
└── src/
    ├── main.js                                        # 应用入口
    ├── App.vue                                        # 根组件
    ├── api/
    │   ├── request.js                                 # Axios封装
    │   ├── server.js                                  # 服务器API
    │   └── file.js                                    # 文件API
    ├── store/
    │   ├── index.js                                   # Pinia入口
    │   ├── server.js                                  # 服务器状态
    │   └── file.js                                    # 文件状态
    ├── utils/
    │   ├── file-type.js                               # 文件类型识别
    │   └── date-format.js                             # 日期格式化
    ├── components/
    │   ├── layout/
    │   │   ├── AppHeader.vue                          # 顶部导航
    │   │   └── MainLayout.vue                         # 主布局
    │   ├── server/
    │   │   ├── ServerSelect.vue                       # 服务器选择器
    │   │   └── ServerDialog.vue                       # 服务器配置弹窗
    │   ├── file/
    │   │   ├── FileTree.vue                           # 文件树
    │   │   ├── FileList.vue                           # 文件列表
    │   │   └── FileUpload.vue                         # 文件上传
    │   └── preview/
    │       └── FilePreview.vue                        # 文件预览弹窗
    └── views/
        └── Home.vue                                   # 主页面
```

---

## Phase 1: 后端基础搭建

### Task 1: 创建后端Maven项目

**Files:**
- Create: `file-manager-backend/pom.xml`
- Create: `file-manager-backend/src/main/java/com/filemanager/FileManagerApplication.java`
- Create: `file-manager-backend/src/main/resources/application.yml`

- [ ] **Step 1: 创建Maven项目目录**

```bash
mkdir -p file-manager-backend/src/main/java/com/filemanager
mkdir -p file-manager-backend/src/main/resources
```

- [ ] **Step 2: 编写pom.xml**

```xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
        <relativePath/>
    </parent>
    
    <groupId>com.filemanager</groupId>
    <artifactId>file-manager-backend</artifactId>
    <version>1.0.0</version>
    <name>file-manager-backend</name>
    <description>WebDAV File Manager Backend</description>
    
    <properties>
        <java.version>17</java.version>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        
        <dependency>
            <groupId>com.github.lookfirst</groupId>
            <artifactId>sardine</artifactId>
            <version>5.10</version>
        </dependency>
        
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
```

- [ ] **Step 3: 编写主应用类**

```java
package com.filemanager;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class FileManagerApplication {
    public static void main(String[] args) {
        SpringApplication.run(FileManagerApplication.class, args);
    }
}
```

- [ ] **Step 4: 编写配置文件**

```yaml
spring:
  application:
    name: file-manager-backend
  
  datasource:
    url: jdbc:mysql://localhost:3306/file_manager?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
  
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        format_sql: true
        dialect: org.hibernate.dialect.MySQLDialect
  
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

server:
  port: 8080

app:
  encryption:
    key: file-manager-secret-key-2026
```

- [ ] **Step 5: 提交代码**

```bash
cd file-manager-backend
git add .
git commit -m "feat(backend): initialize Spring Boot project with Maven"
```

---

### Task 2: 创建实体类和Repository

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/entity/ServerConfig.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/entity/FileMetadata.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/repository/ServerConfigRepository.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/repository/FileMetadataRepository.java`

- [ ] **Step 1: 创建ServerConfig实体**

```java
package com.filemanager.entity;

import jakarta.persistence.*;
import lombok.Data;
import java.time.LocalDateTime;

@Data
@Entity
@Table(name = "server_config")
public class ServerConfig {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(nullable = false, length = 100)
    private String name;
    
    @Column(nullable = false, length = 500)
    private String url;
    
    @Column(length = 100)
    private String username;
    
    @Column(length = 255)
    private String password;
    
    @Column(name = "created_at", updatable = false)
    private LocalDateTime createdAt;
    
    @Column(name = "updated_at")
    private LocalDateTime updatedAt;
    
    @PrePersist
    protected void onCreate() {
        createdAt = LocalDateTime.now();
        updatedAt = LocalDateTime.now();
    }
    
    @PreUpdate
    protected void onUpdate() {
        updatedAt = LocalDateTime.now();
    }
}
```

- [ ] **Step 2: 创建FileMetadata实体**

```java
package com.filemanager.entity;

import jakarta.persistence.*;
import lombok.Data;
import java.time.LocalDateTime;

@Data
@Entity
@Table(name = "file_metadata", indexes = {
    @Index(name = "idx_server_path", columnList = "server_id,path"),
    @Index(name = "idx_name", columnList = "name"),
    @Index(name = "idx_content_type", columnList = "content_type"),
    @Index(name = "idx_last_modified", columnList = "last_modified")
})
public class FileMetadata {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "server_id", nullable = false)
    private Long serverId;
    
    @Column(nullable = false, length = 1000)
    private String path;
    
    @Column(nullable = false, length = 255)
    private String name;
    
    @Column(name = "is_directory")
    private Boolean isDirectory = false;
    
    private Long size;
    
    @Column(name = "content_type", length = 100)
    private String contentType;
    
    @Column(name = "last_modified")
    private LocalDateTime lastModified;
    
    @Column(name = "created_at", updatable = false)
    private LocalDateTime createdAt;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "server_id", insertable = false, updatable = false)
    private ServerConfig server;
    
    @PrePersist
    protected void onCreate() {
        createdAt = LocalDateTime.now();
    }
}
```

- [ ] **Step 3: 创建ServerConfigRepository**

```java
package com.filemanager.repository;

import com.filemanager.entity.ServerConfig;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ServerConfigRepository extends JpaRepository<ServerConfig, Long> {
}
```

- [ ] **Step 4: 创建FileMetadataRepository**

```java
package com.filemanager.repository;

import com.filemanager.entity.FileMetadata;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.stereotype.Repository;
import java.util.List;
import java.util.Optional;

@Repository
public interface FileMetadataRepository extends JpaRepository<FileMetadata, Long>, 
                                                JpaSpecificationExecutor<FileMetadata> {
    List<FileMetadata> findByServerIdAndPath(Long serverId, String path);
    Optional<FileMetadata> findByServerIdAndPathAndName(Long serverId, String path, String name);
    void deleteByServerId(Long serverId);
    Page<FileMetadata> findByServerIdAndIsDirectoryFalse(Long serverId, Pageable pageable);
}
```

- [ ] **Step 5: 提交代码**

```bash
git add .
git commit -m "feat(backend): add entity classes and repositories"
```

---

### Task 3: 创建DTO和异常处理

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/dto/ApiResponse.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/dto/ServerConfigDTO.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/dto/FileDTO.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/exception/WebDavException.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/exception/GlobalExceptionHandler.java`

- [ ] **Step 1: 创建统一响应DTO**

```java
package com.filemanager.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ApiResponse<T> {
    private Integer code;
    private String message;
    private T data;
    
    public static <T> ApiResponse<T> success(T data) {
        return new ApiResponse<>(200, "success", data);
    }
    
    public static <T> ApiResponse<T> success(String message, T data) {
        return new ApiResponse<>(200, message, data);
    }
    
    public static <T> ApiResponse<T> error(String message) {
        return new ApiResponse<>(500, message, null);
    }
    
    public static <T> ApiResponse<T> error(Integer code, String message) {
        return new ApiResponse<>(code, message, null);
    }
}
```

- [ ] **Step 2: 创建ServerConfigDTO**

```java
package com.filemanager.dto;

import lombok.Data;

@Data
public class ServerConfigDTO {
    private Long id;
    private String name;
    private String url;
    private String username;
    private String password;
}
```

- [ ] **Step 3: 创建FileDTO**

```java
package com.filemanager.dto;

import lombok.Data;
import java.time.LocalDateTime;

@Data
public class FileDTO {
    private Long id;
    private Long serverId;
    private String path;
    private String name;
    private Boolean isDirectory;
    private Long size;
    private String contentType;
    private LocalDateTime lastModified;
    private String fileType;
    private String icon;
    private String color;
}
```

- [ ] **Step 4: 创建WebDavException**

```java
package com.filemanager.exception;

public class WebDavException extends RuntimeException {
    public WebDavException(String message) {
        super(message);
    }
    
    public WebDavException(String message, Throwable cause) {
        super(message, cause);
    }
}
```

- [ ] **Step 5: 创建GlobalExceptionHandler**

```java
package com.filemanager.exception;

import com.filemanager.dto.ApiResponse;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class GlobalExceptionHandler {
    
    @ExceptionHandler(WebDavException.class)
    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
    public ApiResponse<Void> handleWebDavException(WebDavException e) {
        return ApiResponse.error(e.getMessage());
    }
    
    @ExceptionHandler(Exception.class)
    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
    public ApiResponse<Void> handleException(Exception e) {
        e.printStackTrace();
        return ApiResponse.error("系统错误: " + e.getMessage());
    }
}
```

- [ ] **Step 6: 提交代码**

```bash
git add .
git commit -m "feat(backend): add DTO classes and exception handler"
```

---

### Task 4: 创建配置类

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/config/CorsConfig.java`
- Create: `file-manager-backend/src/main/java/com/filemanager/config/PasswordEncryptor.java`

- [ ] **Step 1: 创建跨域配置**

```java
package com.filemanager.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*");
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        
        return new CorsFilter(source);
    }
}
```

- [ ] **Step 2: 创建密码加密器**

```java
package com.filemanager.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;
import java.util.Base64;

@Component
public class PasswordEncryptor {
    
    @Value("${app.encryption.key}")
    private String encryptionKey;
    
    private static final String ALGORITHM = "AES";
    
    public String encrypt(String plainText) {
        try {
            SecretKeySpec key = new SecretKeySpec(encryptionKey.getBytes(StandardCharsets.UTF_8), ALGORITHM);
            Cipher cipher = Cipher.getInstance(ALGORITHM);
            cipher.init(Cipher.ENCRYPT_MODE, key);
            byte[] encrypted = cipher.doFinal(plainText.getBytes(StandardCharsets.UTF_8));
            return Base64.getEncoder().encodeToString(encrypted);
        } catch (Exception e) {
            throw new RuntimeException("密码加密失败", e);
        }
    }
    
    public String decrypt(String encrypted) {
        try {
            SecretKeySpec key = new SecretKeySpec(encryptionKey.getBytes(StandardCharsets.UTF_8), ALGORITHM);
            Cipher cipher = Cipher.getInstance(ALGORITHM);
            cipher.init(Cipher.DECRYPT_MODE, key);
            byte[] decrypted = cipher.doFinal(Base64.getDecoder().decode(encrypted));
            return new String(decrypted, StandardCharsets.UTF_8);
        } catch (Exception e) {
            throw new RuntimeException("密码解密失败", e);
        }
    }
}
```

- [ ] **Step 3: 提交代码**

```bash
git add .
git commit -m "feat(backend): add CORS config and password encryptor"
```

---

### Task 5: 创建WebDAV服务

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/service/WebDavService.java`

- [ ] **Step 1: 创建WebDavService**

```java
package com.filemanager.service;

import com.filemanager.entity.ServerConfig;
import com.filemanager.exception.WebDavException;
import com.github.sardine.Sardine;
import com.github.sardine.SardineFactory;
import com.github.sardine.DavResource;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;

@Service
public class WebDavService {
    
    public Sardine createSardine(String username, String password) {
        return SardineFactory.begin(username, password);
    }
    
    public boolean testConnection(ServerConfig server) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            return sardine.exists(server.getUrl());
        } catch (Exception e) {
            return false;
        }
    }
    
    public List<DavResource> listFiles(ServerConfig server, String path) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String url = server.getUrl() + path;
            return sardine.list(url);
        } catch (IOException e) {
            throw new WebDavException("获取文件列表失败: " + e.getMessage(), e);
        }
    }
    
    public InputStream downloadFile(ServerConfig server, String path) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String url = server.getUrl() + path;
            return sardine.get(url);
        } catch (IOException e) {
            throw new WebDavException("下载文件失败: " + e.getMessage(), e);
        }
    }
    
    public void uploadFile(ServerConfig server, String path, InputStream data) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String url = server.getUrl() + path;
            sardine.put(url, data);
        } catch (IOException e) {
            throw new WebDavException("上传文件失败: " + e.getMessage(), e);
        }
    }
    
    public void createDirectory(ServerConfig server, String path) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String url = server.getUrl() + path;
            sardine.createDirectory(url);
        } catch (IOException e) {
            throw new WebDavException("创建目录失败: " + e.getMessage(), e);
        }
    }
    
    public void delete(ServerConfig server, String path) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String url = server.getUrl() + path;
            sardine.delete(url);
        } catch (IOException e) {
            throw new WebDavException("删除失败: " + e.getMessage(), e);
        }
    }
    
    public void move(ServerConfig server, String from, String to) {
        try {
            Sardine sardine = createSardine(server.getUsername(), server.getPassword());
            String fromUrl = server.getUrl() + from;
            String toUrl = server.getUrl() + to;
            sardine.move(fromUrl, toUrl);
        } catch (IOException e) {
            throw new WebDavException("移动/重命名失败: " + e.getMessage(), e);
        }
    }
}
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(backend): add WebDAV service with CRUD operations"
```

---

### Task 6: 创建Server服务

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/service/ServerService.java`

- [ ] **Step 1: 创建ServerService**

```java
package com.filemanager.service;

import com.filemanager.config.PasswordEncryptor;
import com.filemanager.dto.ServerConfigDTO;
import com.filemanager.entity.ServerConfig;
import com.filemanager.repository.FileMetadataRepository;
import com.filemanager.repository.ServerConfigRepository;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
import java.util.stream.Collectors;

@Service
public class ServerService {
    
    @Autowired
    private ServerConfigRepository serverConfigRepository;
    
    @Autowired
    private FileMetadataRepository fileMetadataRepository;
    
    @Autowired
    private WebDavService webDavService;
    
    @Autowired
    private PasswordEncryptor passwordEncryptor;
    
    public List<ServerConfigDTO> getAllServers() {
        return serverConfigRepository.findAll().stream()
                .map(this::toDTO)
                .collect(Collectors.toList());
    }
    
    public ServerConfigDTO getServerById(Long id) {
        ServerConfig server = serverConfigRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("服务器不存在"));
        return toDTO(server);
    }
    
    @Transactional
    public ServerConfigDTO addServer(ServerConfigDTO dto) {
        ServerConfig server = new ServerConfig();
        server.setName(dto.getName());
        server.setUrl(dto.getUrl());
        server.setUsername(dto.getUsername());
        if (dto.getPassword() != null) {
            server.setPassword(passwordEncryptor.encrypt(dto.getPassword()));
        }
        
        ServerConfig saved = serverConfigRepository.save(server);
        return toDTO(saved);
    }
    
    @Transactional
    public ServerConfigDTO updateServer(Long id, ServerConfigDTO dto) {
        ServerConfig server = serverConfigRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("服务器不存在"));
        
        server.setName(dto.getName());
        server.setUrl(dto.getUrl());
        server.setUsername(dto.getUsername());
        if (dto.getPassword() != null) {
            server.setPassword(passwordEncryptor.encrypt(dto.getPassword()));
        }
        
        ServerConfig saved = serverConfigRepository.save(server);
        return toDTO(saved);
    }
    
    @Transactional
    public void deleteServer(Long id) {
        fileMetadataRepository.deleteByServerId(id);
        serverConfigRepository.deleteById(id);
    }
    
    public boolean testConnection(Long id) {
        ServerConfig server = serverConfigRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("服务器不存在"));
        
        String password = server.getPassword() != null ? 
                passwordEncryptor.decrypt(server.getPassword()) : null;
        server.setPassword(password);
        
        return webDavService.testConnection(server);
    }
    
    private ServerConfigDTO toDTO(ServerConfig server) {
        ServerConfigDTO dto = new ServerConfigDTO();
        BeanUtils.copyProperties(server, dto);
        dto.setPassword(null);
        return dto;
    }
}
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(backend): add server management service"
```

---

### Task 7: 创建File服务

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/service/FileService.java`

- [ ] **Step 1: 创建FileService**

```java
package com.filemanager.service;

import com.filemanager.config.PasswordEncryptor;
import com.filemanager.dto.FileDTO;
import com.filemanager.entity.FileMetadata;
import com.filemanager.entity.ServerConfig;
import com.filemanager.repository.FileMetadataRepository;
import com.filemanager.repository.ServerConfigRepository;
import com.github.sardine.DavResource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.io.InputStream;
import java.time.LocalDateTime;
import java.time.ZoneId;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

@Service
public class FileService {
    
    @Autowired
    private ServerConfigRepository serverConfigRepository;
    
    @Autowired
    private FileMetadataRepository fileMetadataRepository;
    
    @Autowired
    private WebDavService webDavService;
    
    @Autowired
    private PasswordEncryptor passwordEncryptor;
    
    private static final Map<String, Map<String, String>> FILE_TYPE_MAP = new HashMap<>();
    
    static {
        FILE_TYPE_MAP.put("pdf", Map.of("icon", "pdf", "color", "#E74C3C", "type", "document"));
        FILE_TYPE_MAP.put("doc", Map.of("icon", "word", "color", "#3498DB", "type", "document"));
        FILE_TYPE_MAP.put("docx", Map.of("icon", "word", "color", "#3498DB", "type", "document"));
        FILE_TYPE_MAP.put("xls", Map.of("icon", "excel", "color", "#27AE60", "type", "document"));
        FILE_TYPE_MAP.put("xlsx", Map.of("icon", "excel", "color", "#27AE60", "type", "document"));
        FILE_TYPE_MAP.put("jpg", Map.of("icon", "image", "color", "#9B59B6", "type", "image"));
        FILE_TYPE_MAP.put("jpeg", Map.of("icon", "image", "color", "#9B59B6", "type", "image"));
        FILE_TYPE_MAP.put("png", Map.of("icon", "image", "color", "#9B59B6", "type", "image"));
        FILE_TYPE_MAP.put("gif", Map.of("icon", "image", "color", "#9B59B6", "type", "image"));
        FILE_TYPE_MAP.put("mp4", Map.of("icon", "video", "color", "#E91E63", "type", "video"));
        FILE_TYPE_MAP.put("avi", Map.of("icon", "video", "color", "#E91E63", "type", "video"));
        FILE_TYPE_MAP.put("mp3", Map.of("icon", "audio", "color", "#00BCD4", "type", "audio"));
        FILE_TYPE_MAP.put("wav", Map.of("icon", "audio", "color", "#00BCD4", "type", "audio"));
        FILE_TYPE_MAP.put("zip", Map.of("icon", "archive", "color", "#FF9800", "type", "archive"));
        FILE_TYPE_MAP.put("txt", Map.of("icon", "text", "color", "#95A5A6", "type", "document"));
        FILE_TYPE_MAP.put("md", Map.of("icon", "markdown", "color", "#34495E", "type", "document"));
    }
    
    public List<FileDTO> getFileTree(Long serverId, String path) {
        ServerConfig server = getServer(serverId);
        List<DavResource> resources = webDavService.listFiles(server, path);
        
        return resources.stream()
                .filter(r -> !r.getPath().equals(path))
                .map(r -> toDTO(r, serverId))
                .collect(Collectors.toList());
    }
    
    public Page<FileDTO> getFileList(Long serverId, String path, String name, String type,
                                      String startDate, String endDate,
                                      String sortBy, String sortOrder,
                                      int page, int size) {
        Specification<FileMetadata> spec = Specification.where(null);
        
        if (serverId != null) {
            spec = spec.and((root, query, cb) -> cb.equal(root.get("serverId"), serverId));
        }
        
        if (path != null) {
            spec = spec.and((root, query, cb) -> cb.equal(root.get("path"), path));
        }
        
        if (name != null && !name.isEmpty()) {
            spec = spec.and((root, query, cb) -> cb.like(root.get("name"), "%" + name + "%"));
        }
        
        if (type != null && !type.isEmpty()) {
            spec = spec.and((root, query, cb) -> cb.like(root.get("contentType"), type + "%"));
        }
        
        Sort sort = Sort.by("asc".equalsIgnoreCase(sortOrder) ? Sort.Direction.ASC : Sort.Direction.DESC,
                            sortBy != null ? sortBy : "name");
        Pageable pageable = PageRequest.of(page, size, sort);
        
        return fileMetadataRepository.findAll(spec, pageable)
                .map(this::toDTO);
    }
    
    @Transactional
    public void syncFiles(Long serverId, String path) {
        ServerConfig server = getServer(serverId);
        List<DavResource> resources = webDavService.listFiles(server, path);
        
        for (DavResource resource : resources) {
            if (resource.getPath().equals(path)) continue;
            
            FileMetadata metadata = new FileMetadata();
            metadata.setServerId(serverId);
            metadata.setPath(resource.getPath());
            metadata.setName(resource.getName());
            metadata.setIsDirectory(resource.isDirectory());
            metadata.setSize(resource.getContentLength());
            metadata.setContentType(resource.getContentType());
            
            if (resource.getModified() != null) {
                metadata.setLastModified(LocalDateTime.ofInstant(
                        resource.getModified().toInstant(), ZoneId.systemDefault()));
            }
            
            fileMetadataRepository.save(metadata);
        }
    }
    
    @Transactional
    public void uploadFile(Long serverId, String path, String filename, InputStream data) {
        ServerConfig server = getServer(serverId);
        String fullPath = path.endsWith("/") ? path + filename : path + "/" + filename;
        webDavService.uploadFile(server, fullPath, data);
    }
    
    public InputStream downloadFile(Long serverId, String path) {
        ServerConfig server = getServer(serverId);
        return webDavService.downloadFile(server, path);
    }
    
    @Transactional
    public void renameFile(Long serverId, String oldPath, String newPath) {
        ServerConfig server = getServer(serverId);
        webDavService.move(server, oldPath, newPath);
    }
    
    @Transactional
    public void deleteFile(Long serverId, String path) {
        ServerConfig server = getServer(serverId);
        webDavService.delete(server, path);
    }
    
    @Transactional
    public void createFolder(Long serverId, String path) {
        ServerConfig server = getServer(serverId);
        webDavService.createDirectory(server, path);
    }
    
    private ServerConfig getServer(Long serverId) {
        ServerConfig server = serverConfigRepository.findById(serverId)
                .orElseThrow(() -> new RuntimeException("服务器不存在"));
        
        if (server.getPassword() != null) {
            server.setPassword(passwordEncryptor.decrypt(server.getPassword()));
        }
        
        return server;
    }
    
    private FileDTO toDTO(DavResource resource, Long serverId) {
        FileDTO dto = new FileDTO();
        dto.setServerId(serverId);
        dto.setPath(resource.getPath());
        dto.setName(resource.getName());
        dto.setIsDirectory(resource.isDirectory());
        dto.setSize(resource.getContentLength());
        dto.setContentType(resource.getContentType());
        
        if (resource.getModified() != null) {
            dto.setLastModified(LocalDateTime.ofInstant(
                    resource.getModified().toInstant(), ZoneId.systemDefault()));
        }
        
        setFileType(dto);
        return dto;
    }
    
    private FileDTO toDTO(FileMetadata metadata) {
        FileDTO dto = new FileDTO();
        dto.setId(metadata.getId());
        dto.setServerId(metadata.getServerId());
        dto.setPath(metadata.getPath());
        dto.setName(metadata.getName());
        dto.setIsDirectory(metadata.getIsDirectory());
        dto.setSize(metadata.getSize());
        dto.setContentType(metadata.getContentType());
        dto.setLastModified(metadata.getLastModified());
        setFileType(dto);
        return dto;
    }
    
    private void setFileType(FileDTO dto) {
        if (Boolean.TRUE.equals(dto.getIsDirectory())) {
            dto.setFileType("folder");
            dto.setIcon("folder");
            dto.setColor("#FFA726");
            return;
        }
        
        String filename = dto.getName();
        if (filename == null) return;
        
        int lastDot = filename.lastIndexOf('.');
        if (lastDot > 0) {
            String ext = filename.substring(lastDot + 1).toLowerCase();
            Map<String, String> typeInfo = FILE_TYPE_MAP.getOrDefault(ext, 
                    Map.of("icon", "file", "color", "#95A5A6", "type", "other"));
            dto.setFileType(typeInfo.get("type"));
            dto.setIcon(typeInfo.get("icon"));
            dto.setColor(typeInfo.get("color"));
        }
    }
}
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(backend): add file service with sync and CRUD operations"
```

---

### Task 8: 创建Server Controller

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/controller/ServerController.java`

- [ ] **Step 1: 创建ServerController**

```java
package com.filemanager.controller;

import com.filemanager.dto.ApiResponse;
import com.filemanager.dto.ServerConfigDTO;
import com.filemanager.service.ServerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/api/servers")
public class ServerController {
    
    @Autowired
    private ServerService serverService;
    
    @GetMapping
    public ApiResponse<List<ServerConfigDTO>> getAllServers() {
        return ApiResponse.success(serverService.getAllServers());
    }
    
    @GetMapping("/{id}")
    public ApiResponse<ServerConfigDTO> getServerById(@PathVariable Long id) {
        return ApiResponse.success(serverService.getServerById(id));
    }
    
    @PostMapping
    public ApiResponse<ServerConfigDTO> addServer(@RequestBody ServerConfigDTO dto) {
        return ApiResponse.success("添加成功", serverService.addServer(dto));
    }
    
    @PutMapping("/{id}")
    public ApiResponse<ServerConfigDTO> updateServer(@PathVariable Long id, 
                                                       @RequestBody ServerConfigDTO dto) {
        return ApiResponse.success("更新成功", serverService.updateServer(id, dto));
    }
    
    @DeleteMapping("/{id}")
    public ApiResponse<Void> deleteServer(@PathVariable Long id) {
        serverService.deleteServer(id);
        return ApiResponse.success("删除成功", null);
    }
    
    @PostMapping("/{id}/test")
    public ApiResponse<Boolean> testConnection(@PathVariable Long id) {
        boolean result = serverService.testConnection(id);
        return ApiResponse.success(result ? "连接成功" : "连接失败", result);
    }
}
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(backend): add server management controller"
```

---

### Task 9: 创建File Controller

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/controller/FileController.java`

- [ ] **Step 1: 创建FileController**

```java
package com.filemanager.controller;

import com.filemanager.dto.ApiResponse;
import com.filemanager.dto.FileDTO;
import com.filemanager.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.InputStreamResource;
import org.springframework.core.io.Resource;
import org.springframework.data.domain.Page;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.List;

@RestController
@RequestMapping("/api/files")
public class FileController {
    
    @Autowired
    private FileService fileService;
    
    @GetMapping("/tree")
    public ApiResponse<List<FileDTO>> getFileTree(
            @RequestParam Long serverId,
            @RequestParam(defaultValue = "/") String path) {
        return ApiResponse.success(fileService.getFileTree(serverId, path));
    }
    
    @GetMapping
    public ApiResponse<Page<FileDTO>> getFileList(
            @RequestParam(required = false) Long serverId,
            @RequestParam(required = false) String path,
            @RequestParam(required = false) String name,
            @RequestParam(required = false) String type,
            @RequestParam(required = false) String startDate,
            @RequestParam(required = false) String endDate,
            @RequestParam(defaultValue = "name") String sortBy,
            @RequestParam(defaultValue = "asc") String sortOrder,
            @RequestParam(defaultValue = "0") int page,
            @RequestParam(defaultValue = "50") int size) {
        return ApiResponse.success(fileService.getFileList(
                serverId, path, name, type, startDate, endDate, sortBy, sortOrder, page, size));
    }
    
    @GetMapping("/{serverId}/download")
    public ResponseEntity<Resource> downloadFile(
            @PathVariable Long serverId,
            @RequestParam String path) {
        InputStream stream = fileService.downloadFile(serverId, path);
        
        String filename = path.substring(path.lastIndexOf('/') + 1);
        String encodedFilename = URLEncoder.encode(filename, StandardCharsets.UTF_8);
        
        return ResponseEntity.ok()
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .header(HttpHeaders.CONTENT_DISPOSITION, 
                        "attachment; filename=\"" + encodedFilename + "\"")
                .body(new InputStreamResource(stream));
    }
    
    @PostMapping("/upload")
    public ApiResponse<Void> uploadFile(
            @RequestParam Long serverId,
            @RequestParam String path,
            @RequestParam MultipartFile file) {
        try {
            fileService.uploadFile(serverId, path, file.getOriginalFilename(), file.getInputStream());
            return ApiResponse.success("上传成功", null);
        } catch (Exception e) {
            return ApiResponse.error("上传失败: " + e.getMessage());
        }
    }
    
    @PutMapping("/{serverId}/rename")
    public ApiResponse<Void> renameFile(
            @PathVariable Long serverId,
            @RequestParam String oldPath,
            @RequestParam String newPath) {
        fileService.renameFile(serverId, oldPath, newPath);
        return ApiResponse.success("重命名成功", null);
    }
    
    @DeleteMapping("/{serverId}")
    public ApiResponse<Void> deleteFile(
            @PathVariable Long serverId,
            @RequestParam String path) {
        fileService.deleteFile(serverId, path);
        return ApiResponse.success("删除成功", null);
    }
    
    @PostMapping("/create-folder")
    public ApiResponse<Void> createFolder(
            @RequestParam Long serverId,
            @RequestParam String path) {
        fileService.createFolder(serverId, path);
        return ApiResponse.success("创建成功", null);
    }
    
    @PostMapping("/sync")
    public ApiResponse<Void> syncFiles(
            @RequestParam Long serverId,
            @RequestParam(defaultValue = "/") String path) {
        fileService.syncFiles(serverId, path);
        return ApiResponse.success("同步成功", null);
    }
}
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(backend): add file operation controller"
```

---

### Task 10: 创建Preview Controller

**Files:**
- Create: `file-manager-backend/src/main/java/com/filemanager/controller/PreviewController.java`

- [ ] **Step 1: 创建PreviewController**

```java
package com.filemanager.controller;

import com.filemanager.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.InputStreamResource;
import org.springframework.core.io.Resource;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.io.InputStream;

@RestController
@RequestMapping("/api/preview")
public class PreviewController {
    
    @Autowired
    private FileService fileService;
    
    @GetMapping("/{serverId}/text")
    public ResponseEntity<Resource> previewText(
            @PathVariable Long serverId,
            @RequestParam String path) {
        InputStream stream = fileService.downloadFile(serverId, path);
        return ResponseEntity.ok()
                .contentType(MediaType.TEXT_PLAIN)
                .body(new InputStreamResource(stream));
    }
    
    @GetMapping("/{serverId}/image")
    public ResponseEntity<Resource> previewImage(
            @PathVariable Long serverId,
            @RequestParam String path) {
        InputStream stream = fileService.downloadFile(serverId, path);
        return ResponseEntity.ok()
                .contentType(MediaType.IMAGE_JPEG)
                .body(new InputStreamResource(stream));
    }
    
    @GetMapping("/{serverId}/video")
    public ResponseEntity<Resource> previewVideo(
            @PathVariable Long serverId,
            @RequestParam String path) {
        InputStream stream = fileService.downloadFile(serverId, path);
        return ResponseEntity.ok()
                .contentType(MediaType VIDEO_MP4)
                .body(new InputStreamResource(stream));
    }
    
    @GetMapping("/{serverId}/audio")
    public ResponseEntity<Resource> previewAudio(
            @PathVariable Long serverId,
            @RequestParam String path) {
        InputStream stream = fileService.downloadFile(serverId, path);
        return ResponseEntity.ok()
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .body(new InputStreamResource(stream));
    }
}
```

- [ ] **Step 2: 修复编译错误**

```java
// 修改 PreviewController.java 中的第52行
.contentType(MediaType.valueOf("video/mp4"))
```

- [ ] **Step 3: 提交代码**

```bash
git add .
git commit -m "feat(backend): add file preview controller"
```

---

## Phase 2: 前端基础搭建

### Task 11: 创建前端Vue项目

**Files:**
- Create: `file-manager-frontend/package.json`
- Create: `file-manager-frontend/vite.config.js`
- Create: `file-manager-frontend/index.html`

- [ ] **Step 1: 创建前端项目目录**

```bash
mkdir -p file-manager-frontend/src/{api,store,utils,components/{layout,server,file,preview},views}
mkdir -p file-manager-frontend/public
```

- [ ] **Step 2: 编写package.json**

```json
{
  "name": "file-manager-frontend",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.5",
    "pinia": "^2.1.7",
    "axios": "^1.6.2",
    "element-plus": "^2.4.4",
    "@element-plus/icons-vue": "^2.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.8"
  }
}
```

- [ ] **Step 3: 编写vite.config.js**

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})
```

- [ ] **Step 4: 编写index.html**

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件标签浏览器</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
```

- [ ] **Step 5: 提交代码**

```bash
git add .
git commit -m "feat(frontend): initialize Vue 3 project with Vite"
```

---

### Task 12: 创建应用入口和根组件

**Files:**
- Create: `file-manager-frontend/src/main.js`
- Create: `file-manager-frontend/src/App.vue`

- [ ] **Step 1: 编写main.js**

```javascript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import './assets/styles/main.css'

const app = createApp(App)
const pinia = createPinia()

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(pinia)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')
```

- [ ] **Step 2: 创建样式文件**

```bash
mkdir -p file-manager-frontend/src/assets/styles
```

```css
/* file-manager-frontend/src/assets/styles/main.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
```

- [ ] **Step 3: 编写App.vue**

```vue
<template>
  <el-config-provider :locale="zhCn">
    <Home />
  </el-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Home from './views/Home.vue'
</script>

<style>
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
```

- [ ] **Step 4: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add app entry and root component"
```

---

由于篇幅限制，我将继续编写剩余的任务。让我继续：
### Task 13: 创建API封装

**Files:**
- Create: `file-manager-frontend/src/api/request.js`
- Create: `file-manager-frontend/src/api/server.js`
- Create: `file-manager-frontend/src/api/file.js`

- [ ] **Step 1: 编写request.js**

```javascript
import axios from 'axios'
import { ElMessage } from 'element-plus'

const request = axios.create({
  baseURL: '/api',
  timeout: 30000
})

request.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      ElMessage.error(res.message || '请求失败')
      return Promise.reject(new Error(res.message || '请求失败'))
    }
    return res.data
  },
  error => {
    ElMessage.error(error.message || '网络错误')
    return Promise.reject(error)
  }
)

export default request
```

- [ ] **Step 2: 编写server.js**

```javascript
import request from './request'

export function getServers() {
  return request.get('/servers')
}

export function getServer(id) {
  return request.get(`/servers/${id}`)
}

export function addServer(data) {
  return request.post('/servers', data)
}

export function updateServer(id, data) {
  return request.put(`/servers/${id}`, data)
}

export function deleteServer(id) {
  return request.delete(`/servers/${id}`)
}

export function testConnection(id) {
  return request.post(`/servers/${id}/test`)
}
```

- [ ] **Step 3: 编写file.js**

```javascript
import request from './request'

export function getFileTree(serverId, path = '/') {
  return request.get('/files/tree', { params: { serverId, path } })
}

export function getFileList(params) {
  return request.get('/files', { params })
}

export function downloadFile(serverId, path) {
  return `/api/files/${serverId}/download?path=${encodeURIComponent(path)}`
}

export function uploadFile(serverId, path, file, onProgress) {
  const formData = new FormData()
  formData.append('serverId', serverId)
  formData.append('path', path)
  formData.append('file', file)
  
  return request.post('/files/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress: onProgress
  })
}

export function renameFile(serverId, oldPath, newPath) {
  return request.put(`/files/${serverId}/rename`, null, {
    params: { oldPath, newPath }
  })
}

export function deleteFile(serverId, path) {
  return request.delete(`/files/${serverId}`, { params: { path } })
}

export function createFolder(serverId, path) {
  return request.post('/files/create-folder', null, {
    params: { serverId, path }
  })
}

export function syncFiles(serverId, path = '/') {
  return request.post('/files/sync', null, {
    params: { serverId, path }
  })
}
```

- [ ] **Step 4: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add API封装模块"
```

---

### Task 14: 创建Pinia Store

**Files:**
- Create: `file-manager-frontend/src/store/index.js`
- Create: `file-manager-frontend/src/store/server.js`
- Create: `file-manager-frontend/src/store/file.js`

- [ ] **Step 1: 编写index.js**

```javascript
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia
```

- [ ] **Step 2: 编写server.js**

```javascript
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { getServers, addServer, updateServer, deleteServer, testConnection } from '@/api/server'

export const useServerStore = defineStore('server', () => {
  const servers = ref([])
  const currentServer = ref(null)
  const loading = ref(false)
  
  async function loadServers() {
    loading.value = true
    try {
      servers.value = await getServers()
      if (servers.value.length > 0 && !currentServer.value) {
        currentServer.value = servers.value[0]
      }
    } finally {
      loading.value = false
    }
  }
  
  async function add(data) {
    await addServer(data)
    await loadServers()
  }
  
  async function update(id, data) {
    await updateServer(id, data)
    await loadServers()
  }
  
  async function remove(id) {
    await deleteServer(id)
    if (currentServer.value?.id === id) {
      currentServer.value = servers.value[0] || null
    }
    await loadServers()
  }
  
  async function test(id) {
    return await testConnection(id)
  }
  
  function setCurrentServer(server) {
    currentServer.value = server
  }
  
  return {
    servers,
    currentServer,
    loading,
    loadServers,
    add,
    update,
    remove,
    test,
    setCurrentServer
  }
})
```

- [ ] **Step 3: 编写file.js**

```javascript
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { getFileTree, getFileList, uploadFile, deleteFile, renameFile, createFolder, syncFiles } from '@/api/file'

export const useFileStore = defineStore('file', () => {
  const treeData = ref([])
  const fileList = ref([])
  const currentPath = ref('/')
  const loading = ref(false)
  
  async function loadTree(serverId, path = '/') {
    loading.value = true
    try {
      treeData.value = await getFileTree(serverId, path)
    } finally {
      loading.value = false
    }
  }
  
  async function loadFileList(serverId, path = '/', filters = {}) {
    loading.value = true
    try {
      const result = await getFileList({
        serverId,
        path,
        ...filters
      })
      fileList.value = result.content
    } finally {
      loading.value = false
    }
  }
  
  async function upload(serverId, path, file, onProgress) {
    await uploadFile(serverId, path, file, onProgress)
  }
  
  async function remove(serverId, path) {
    await deleteFile(serverId, path)
  }
  
  async function rename(serverId, oldPath, newPath) {
    await renameFile(serverId, oldPath, newPath)
  }
  
  async function createDir(serverId, path) {
    await createFolder(serverId, path)
  }
  
  async function sync(serverId, path = '/') {
    await syncFiles(serverId, path)
  }
  
  function setPath(path) {
    currentPath.value = path
  }
  
  return {
    treeData,
    fileList,
    currentPath,
    loading,
    loadTree,
    loadFileList,
    upload,
    remove,
    rename,
    createDir,
    sync,
    setPath
  }
})
```

- [ ] **Step 4: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add Pinia stores for state management"
```

---

### Task 15: 创建工具函数

**Files:**
- Create: `file-manager-frontend/src/utils/file-type.js`
- Create: `file-manager-frontend/src/utils/date-format.js`

- [ ] **Step 1: 编写file-type.js**

```javascript
const FILE_TYPE_MAP = {
  pdf: { icon: 'Document', color: '#E74C3C', type: 'document' },
  doc: { icon: 'Document', color: '#3498DB', type: 'document' },
  docx: { icon: 'Document', color: '#3498DB', type: 'document' },
  xls: { icon: 'Document', color: '#27AE60', type: 'document' },
  xlsx: { icon: 'Document', color: '#27AE60', type: 'document' },
  jpg: { icon: 'Picture', color: '#9B59B6', type: 'image' },
  jpeg: { icon: 'Picture', color: '#9B59B6', type: 'image' },
  png: { icon: 'Picture', color: '#9B59B6', type: 'image' },
  gif: { icon: 'Picture', color: '#9B59B6', type: 'image' },
  mp4: { icon: 'VideoPlay', color: '#E91E63', type: 'video' },
  avi: { icon: 'VideoPlay', color: '#E91E63', type: 'video' },
  mp3: { icon: 'Headset', color: '#00BCD4', type: 'audio' },
  wav: { icon: 'Headset', color: '#00BCD4', type: 'audio' },
  zip: { icon: 'Files', color: '#FF9800', type: 'archive' },
  txt: { icon: 'Document', color: '#95A5A6', type: 'document' },
  md: { icon: 'Document', color: '#34495E', type: 'document' }
}

export function getFileTypeInfo(filename) {
  if (!filename) return { icon: 'Document', color: '#95A5A6', type: 'other' }
  
  const ext = filename.split('.').pop()?.toLowerCase()
  return FILE_TYPE_MAP[ext] || { icon: 'Document', color: '#95A5A6', type: 'other' }
}

export function formatFileSize(bytes) {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
```

- [ ] **Step 2: 编写date-format.js**

```javascript
export function formatDate(date) {
  if (!date) return '-'
  
  const d = new Date(date)
  const now = new Date()
  const diff = now - d
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
  if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
  if (diff < 604800000) return Math.floor(diff / 86400000) + '天前'
  
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hour = String(d.getHours()).padStart(2, '0')
  const minute = String(d.getMinutes()).padStart(2, '0')
  
  if (year === now.getFullYear()) {
    return `${month}-${day} ${hour}:${minute}`
  }
  
  return `${year}-${month}-${day} ${hour}:${minute}`
}
```

- [ ] **Step 3: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add utility functions for file type and date"
```

---

### Task 16: 创建主布局组件

**Files:**
- Create: `file-manager-frontend/src/views/Home.vue`
- Create: `file-manager-frontend/src/components/layout/AppHeader.vue`

- [ ] **Step 1: 编写AppHeader.vue**

```vue
<template>
  <div class="app-header">
    <div class="logo">
      <el-icon size="24"><FolderOpened /></el-icon>
      <span>文件标签浏览器</span>
    </div>
    
    <div class="server-select">
      <el-select
        v-model="serverStore.currentServer"
        placeholder="选择服务器"
        @change="handleServerChange"
      >
        <el-option
          v-for="server in serverStore.servers"
          :key="server.id"
          :label="server.name"
          :value="server"
        />
      </el-select>
      
      <el-button type="primary" @click="showServerDialog = true">
        <el-icon><Plus /></el-icon>
        添加服务器
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useServerStore } from '@/store/server'
import { useFileStore } from '@/store/file'
import ServerDialog from '@/components/server/ServerDialog.vue'

const serverStore = useServerStore()
const fileStore = useFileStore()
const showServerDialog = ref(false)

onMounted(() => {
  serverStore.loadServers()
})

function handleServerChange(server) {
  serverStore.setCurrentServer(server)
  fileStore.setPath('/')
  if (server) {
    fileStore.loadTree(server.id, '/')
    fileStore.loadFileList(server.id, '/')
  }
}
</script>

<style scoped>
.app-header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}

.server-select {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>
```

- [ ] **Step 2: 编写Home.vue**

```vue
<template>
  <div class="home-container">
    <AppHeader />
    <div class="main-content">
      <div class="sidebar">
        <FileTree />
      </div>
      <div class="content">
        <FileList />
      </div>
    </div>
    <ServerDialog v-model="showServerDialog" />
    <FilePreview v-model="showPreview" :file="previewFile" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import FileTree from '@/components/file/FileTree.vue'
import FileList from '@/components/file/FileList.vue'
import ServerDialog from '@/components/server/ServerDialog.vue'
import FilePreview from '@/components/preview/FilePreview.vue'

const showServerDialog = ref(false)
const showPreview = ref(false)
const previewFile = ref(null)
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 250px;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f5f7fa;
}
</style>
```

- [ ] **Step 3: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add main layout components"
```

---

### Task 17: 创建服务器管理组件

**Files:**
- Create: `file-manager-frontend/src/components/server/ServerDialog.vue`

- [ ] **Step 1: 编写ServerDialog.vue**

```vue
<template>
  <el-dialog
    v-model="visible"
    title="服务器配置"
    width="500px"
    @close="resetForm"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="服务器名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入服务器名称" />
      </el-form-item>
      
      <el-form-item label="WebDAV地址" prop="url">
        <el-input v-model="form.url" placeholder="例如: https://dav.example.com" />
      </el-form-item>
      
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useServerStore } from '@/store/server'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const serverStore = useServerStore()

const form = ref({
  name: '',
  url: '',
  username: '',
  password: ''
})

const rules = {
  name: [{ required: true, message: '请输入服务器名称', trigger: 'blur' }],
  url: [{ required: true, message: '请输入WebDAV地址', trigger: 'blur' }]
}

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

async function handleSubmit() {
  await formRef.value.validate()
  
  loading.value = true
  try {
    await serverStore.add(form.value)
    ElMessage.success('添加成功')
    visible.value = false
    resetForm()
  } catch (error) {
    ElMessage.error('添加失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

function resetForm() {
  form.value = {
    name: '',
    url: '',
    username: '',
    password: ''
  }
  formRef.value?.resetFields()
}
</script>
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add server dialog component"
```

---

### Task 18: 创建文件树组件

**Files:**
- Create: `file-manager-frontend/src/components/file/FileTree.vue`

- [ ] **Step 1: 编写FileTree.vue**

```vue
<template>
  <div class="file-tree">
    <div class="tree-header">
      <span>文件目录</span>
      <el-button link @click="handleRefresh">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </div>
    
    <el-tree
      :data="treeData"
      :props="defaultProps"
      node-key="path"
      @node-click="handleNodeClick"
      :expand-on-click-node="false"
      default-expand-all
    >
      <template #default="{ node, data }">
        <div class="tree-node">
          <el-icon :color="getIconColor(data)">
            <component :is="getIcon(data)" />
          </el-icon>
          <span class="node-label">{{ data.name }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useServerStore } from '@/store/server'
import { useFileStore } from '@/store/file'
import { Folder, Document, Picture, VideoPlay, Headset } from '@element-plus/icons-vue'
import { getFileTypeInfo } from '@/utils/file-type'

const serverStore = useServerStore()
const fileStore = useFileStore()

const defaultProps = {
  children: 'children',
  label: 'name'
}

const treeData = computed(() => {
  if (!serverStore.currentServer) return []
  return buildTree(fileStore.treeData)
})

function buildTree(files) {
  const root = { name: '根目录', path: '/', isDirectory: true, children: [] }
  
  files.forEach(file => {
    if (file.isDirectory) {
      root.children.push({
        ...file,
        children: []
      })
    }
  })
  
  return [root]
}

function getIcon(data) {
  if (data.isDirectory) return Folder
  const typeInfo = getFileTypeInfo(data.name)
  
  switch (typeInfo.type) {
    case 'image': return Picture
    case 'video': return VideoPlay
    case 'audio': return Headset
    default: return Document
  }
}

function getIconColor(data) {
  if (data.isDirectory) return '#FFA726'
  const typeInfo = getFileTypeInfo(data.name)
  return typeInfo.color
}

async function handleNodeClick(data) {
  if (serverStore.currentServer) {
    fileStore.setPath(data.path)
    await fileStore.loadFileList(serverStore.currentServer.id, data.path)
  }
}

async function handleRefresh() {
  if (serverStore.currentServer) {
    await fileStore.loadTree(serverStore.currentServer.id, fileStore.currentPath)
  }
}
</script>

<style scoped>
.file-tree {
  height: 100%;
  padding: 12px;
}

.tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-label {
  font-size: 14px;
}
</style>
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add file tree component"
```

---

### Task 19: 创建文件列表组件

**Files:**
- Create: `file-manager-frontend/src/components/file/FileList.vue`

- [ ] **Step 1: 编写FileList.vue**

```vue
<template>
  <div class="file-list">
    <div class="list-header">
      <div class="current-path">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>{{ currentPath }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      
      <div class="actions">
        <el-button type="primary" @click="showUploadDialog = true">
          <el-icon><Upload /></el-icon>
          上传文件
        </el-button>
        
        <el-button @click="showCreateFolderDialog = true">
          <el-icon><FolderAdd /></el-icon>
          新建文件夹
        </el-button>
      </div>
    </div>
    
    <el-table
      :data="fileStore.fileList"
      v-loading="fileStore.loading"
      @row-dblclick="handleRowDblClick"
      style="width: 100%"
    >
      <el-table-column width="60">
        <template #default="{ row }">
          <el-icon :color="getIconColor(row)" :size="24">
            <component :is="getIcon(row)" />
          </el-icon>
        </template>
      </el-table-column>
      
      <el-table-column prop="name" label="名称" sortable />
      
      <el-table-column prop="size" label="大小" width="120">
        <template #default="{ row }">
          {{ formatSize(row.size) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="lastModified" label="修改时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.lastModified) }}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button link @click="handlePreview(row)" v-if="!row.isDirectory">
            预览
          </el-button>
          <el-button link @click="handleDownload(row)" v-if="!row.isDirectory">
            下载
          </el-button>
          <el-button link @click="handleRename(row)">
            重命名
          </el-button>
          <el-button link type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <FileUpload
      v-model="showUploadDialog"
      :server-id="serverStore.currentServer?.id"
      :path="fileStore.currentPath"
      @success="handleUploadSuccess"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useServerStore } from '@/store/server'
import { useFileStore } from '@/store/file'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Folder, Document, Picture, VideoPlay, Headset } from '@element-plus/icons-vue'
import { getFileTypeInfo, formatFileSize } from '@/utils/file-type'
import { formatDate } from '@/utils/date-format'
import { downloadFile } from '@/api/file'
import FileUpload from './FileUpload.vue'

const serverStore = useServerStore()
const fileStore = useFileStore()

const showUploadDialog = ref(false)
const showCreateFolderDialog = ref(false)

const currentPath = computed(() => fileStore.currentPath)

function getIcon(row) {
  if (row.isDirectory) return Folder
  const typeInfo = getFileTypeInfo(row.name)
  
  switch (typeInfo.type) {
    case 'image': return Picture
    case 'video': return VideoPlay
    case 'audio': return Headset
    default: return Document
  }
}

function getIconColor(row) {
  if (row.isDirectory) return '#FFA726'
  const typeInfo = getFileTypeInfo(row.name)
  return typeInfo.color
}

function formatSize(size) {
  return formatFileSize(size)
}

function handleRowDblClick(row) {
  if (row.isDirectory) {
    fileStore.setPath(row.path)
    if (serverStore.currentServer) {
      fileStore.loadFileList(serverStore.currentServer.id, row.path)
    }
  }
}

function handlePreview(row) {
  // TODO: 打开预览弹窗
  ElMessage.info('预览功能开发中')
}

function handleDownload(row) {
  if (serverStore.currentServer) {
    const url = downloadFile(serverStore.currentServer.id, row.path)
    window.open(url, '_blank')
  }
}

async function handleRename(row) {
  const { value } = await ElMessageBox.prompt('请输入新名称', '重命名', {
    inputValue: row.name
  })
  
  if (value && value !== row.name) {
    const oldPath = row.path
    const newPath = row.path.replace(row.name, value)
    
    await fileStore.rename(serverStore.currentServer.id, oldPath, newPath)
    ElMessage.success('重命名成功')
    await fileStore.loadFileList(serverStore.currentServer.id, fileStore.currentPath)
  }
}

async function handleDelete(row) {
  await ElMessageBox.confirm('确定要删除吗?', '提示', { type: 'warning' })
  
  await fileStore.remove(serverStore.currentServer.id, row.path)
  ElMessage.success('删除成功')
  await fileStore.loadFileList(serverStore.currentServer.id, fileStore.currentPath)
}

function handleUploadSuccess() {
  if (serverStore.currentServer) {
    fileStore.loadFileList(serverStore.currentServer.id, fileStore.currentPath)
  }
}
</script>

<style scoped>
.file-list {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.current-path {
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 12px;
}
</style>
```

- [ ] **Step 2: 修复缺少的import**

```javascript
// 在FileList.vue的<script setup>开头添加
import { ref } from 'vue'
```

- [ ] **Step 3: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add file list component with CRUD operations"
```

---

### Task 20: 创建文件上传组件

**Files:**
- Create: `file-manager-frontend/src/components/file/FileUpload.vue`

- [ ] **Step 1: 编写FileUpload.vue**

```vue
<template>
  <el-dialog
    v-model="visible"
    title="上传文件"
    width="600px"
    @close="resetUpload"
  >
    <el-upload
      ref="uploadRef"
      :auto-upload="false"
      :on-change="handleFileChange"
      :file-list="fileList"
      drag
      multiple
    >
      <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
    </el-upload>
    
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleUpload" :loading="uploading">
        上传
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useFileStore } from '@/store/file'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean,
  serverId: Number,
  path: String
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const uploading = ref(false)
const fileList = ref([])
const fileStore = useFileStore()

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

function handleFileChange(file) {
  fileList.value.push(file)
}

async function handleUpload() {
  if (fileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }
  
  uploading.value = true
  
  try {
    for (const file of fileList.value) {
      await fileStore.upload(props.serverId, props.path, file.raw, (progress) => {
        file.percentage = Math.round((progress.loaded / progress.total) * 100)
      })
    }
    
    ElMessage.success('上传成功')
    emit('success')
    visible.value = false
    resetUpload()
  } catch (error) {
    ElMessage.error('上传失败: ' + error.message)
  } finally {
    uploading.value = false
  }
}

function resetUpload() {
  fileList.value = []
}
</script>

<style scoped>
.el-icon--upload {
  font-size: 67px;
  color: #409eff;
  margin: 40px 0 16px;
  line-height: 50px;
}
</style>
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add file upload component with drag and drop"
```

---

### Task 21: 创建文件预览组件

**Files:**
- Create: `file-manager-frontend/src/components/preview/FilePreview.vue`

- [ ] **Step 1: 编写FilePreview.vue**

```vue
<template>
  <el-dialog
    v-model="visible"
    :title="file?.name || '文件预览'"
    width="80%"
    top="5vh"
  >
    <div class="preview-container">
      <div v-if="fileType === 'image'" class="preview-image">
        <el-image :src="previewUrl" fit="contain" />
      </div>
      
      <div v-else-if="fileType === 'video'" class="preview-video">
        <video :src="previewUrl" controls style="width: 100%; max-height: 70vh" />
      </div>
      
      <div v-else-if="fileType === 'audio'" class="preview-audio">
        <audio :src="previewUrl" controls style="width: 100%" />
      </div>
      
      <div v-else class="preview-text">
        <el-empty description="暂不支持预览此类型文件">
          <el-button type="primary" @click="handleDownload">下载查看</el-button>
        </el-empty>
      </div>
    </div>
    
    <template #footer>
      <div class="file-info">
        <span>{{ file?.name }} | {{ formatSize(file?.size) }}</span>
      </div>
      <el-button @click="handleDownload">下载</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getFileTypeInfo, formatFileSize } from '@/utils/file-type'
import { downloadFile } from '@/api/file'

const props = defineProps({
  modelValue: Boolean,
  file: Object,
  serverId: Number
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(false)

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const fileType = computed(() => {
  if (!props.file) return 'other'
  const typeInfo = getFileTypeInfo(props.file.name)
  return typeInfo.type
})

const previewUrl = computed(() => {
  if (!props.file || !props.serverId) return ''
  return `/api/preview/${props.serverId}/${fileType.value}?path=${encodeURIComponent(props.file.path)}`
})

function formatSize(size) {
  return formatFileSize(size)
}

function handleDownload() {
  if (props.file && props.serverId) {
    const url = downloadFile(props.serverId, props.file.path)
    window.open(url, '_blank')
  }
}
</script>

<style scoped>
.preview-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image,
.preview-video,
.preview-audio {
  width: 100%;
}

.file-info {
  flex: 1;
  color: #909399;
  font-size: 14px;
}
</style>
```

- [ ] **Step 2: 提交代码**

```bash
git add .
git commit -m "feat(frontend): add file preview component for multiple file types"
```

---

## Phase 3: 集成和测试

### Task 22: 安装依赖并测试后端

**Files:**
- Modify: `file-manager-backend/pom.xml`

- [ ] **Step 1: 安装后端依赖**

```bash
cd file-manager-backend
mvn clean install
```

Expected: BUILD SUCCESS

- [ ] **Step 2: 创建MySQL数据库**

```sql
CREATE DATABASE IF NOT EXISTS file_manager DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

- [ ] **Step 3: 启动后端服务**

```bash
cd file-manager-backend
mvn spring-boot:run
```

Expected: 应用启动在 http://localhost:8080

- [ ] **Step 4: 测试API**

```bash
curl http://localhost:8080/api/servers
```

Expected: 返回空数组 []

---

### Task 23: 安装依赖并测试前端

**Files:**
- Modify: `file-manager-frontend/package.json`

- [ ] **Step 1: 安装前端依赖**

```bash
cd file-manager-frontend
npm install
```

Expected: 依赖安装成功

- [ ] **Step 2: 启动前端开发服务器**

```bash
cd file-manager-frontend
npm run dev
```

Expected: 应用启动在 http://localhost:3000

- [ ] **Step 3: 访问应用**

打开浏览器访问 http://localhost:3000

Expected: 看到文件管理器界面

---

### Task 24: 最终提交

- [ ] **Step 1: 提交所有代码**

```bash
git add .
git commit -m "feat: complete file manager application with WebDAV support

- Backend: Spring Boot 3 with WebDAV client
- Frontend: Vue 3 + Element Plus
- Features: file tree, file list, upload/download, preview, search
- Database: MySQL for server config and file metadata cache"
```

---

## 实现总结

### 已完成功能

✅ 后端Spring Boot项目搭建  
✅ 数据库实体和Repository  
✅ WebDAV服务封装  
✅ 服务器管理API  
✅ 文件操作API  
✅ 文件预览API  
✅ 前端Vue 3项目搭建  
✅ API封装  
✅ 状态管理  
✅ 主布局组件  
✅ 服务器管理组件  
✅ 文件树组件  
✅ 文件列表组件  
✅ 文件上传组件  
✅ 文件预览组件  

### 待优化功能

- 文件搜索过滤
- 文件列表分页
- 文件排序
- 文件元数据同步
- 错误处理优化
- 性能优化

### 部署说明

**后端部署:**
1. 确保MySQL数据库已创建
2. 修改application.yml中的数据库配置
3. 运行 `mvn clean package -DskipTests`
4. 运行 `java -jar target/file-manager-backend-1.0.0.jar`

**前端部署:**
1. 运行 `npm run build`
2. 将dist目录部署到Nginx或由Spring Boot提供静态文件服务

---

## Plan Complete

**Plan saved to:** `docs/superpowers/plans/2026-03-26-file-tag-browser.md`

**Two execution options:**

**1. Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration

**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints

**Which approach would you like to use?**