codeplay/CodePlay.Web/src/views/ProjectView.vue

<template>
  <div class="project-view">
    <el-container>
      <el-header class="header">
        <el-row :gutter="20" align="middle">
          <el-col :span="12">
            <h2>项目管理</h2>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button type="primary" icon="Plus" @click="showCreateDialog = true">
              新建项目
            </el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <!-- 项目列表 -->
        <el-table :data="projects" v-loading="loading" stripe style="width: 100%">
          <el-table-column prop="id" label="ID" width="150" />
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="totalConversions" label="转换次数" width="100" />
          <el-table-column label="编程语言" width="200">
            <template #default="{ row }">
              <el-tag v-for="lang in row.languages" :key="lang" size="small" style="margin-right: 5px">
                {{ lang }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="viewProject(row)">查看</el-button>
              <el-button size="small" type="primary" @click="convertProject(row)">转换</el-button>
              <el-button size="small" type="danger" @click="deleteProject(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 新建项目对话框 -->
    <el-dialog v-model="showCreateDialog" title="新建项目" width="600px">
      <el-form :model="newProject" label-width="100px">
        <el-form-item label="项目名称">
          <el-input v-model="newProject.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input
            v-model="newProject.description"
            type="textarea"
            :rows="3"
            placeholder="请输入项目描述"
          />
        </el-form-item>
        <el-form-item label="编程语言">
          <el-checkbox-group v-model="newProject.languages">
            <el-checkbox label="CSharp">C#</el-checkbox>
            <el-checkbox label="Java">Java</el-checkbox>
            <el-checkbox label="CPlusPlus">C++</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="createProject">创建</el-button>
      </template>
    </el-dialog>

    <!-- 项目详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="selectedProject?.name" width="900px">
      <el-descriptions :column="2" border v-if="selectedProject">
        <el-descriptions-item label="项目 ID">{{ selectedProject.id }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ selectedProject.name }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">{{ selectedProject.description }}</el-descriptions-item>
        <el-descriptions-item label="转换次数">{{ selectedProject.totalConversions }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(selectedProject.createdAt) }}</el-descriptions-item>
      </el-descriptions>

      <h4 style="margin-top: 20px">转换历史</h4>
      <el-table :data="conversionHistory" stripe>
        <el-table-column prop="id" label="报告 ID" width="150" />
        <el-table-column prop="sourceLanguage" label="源语言" width="100" />
        <el-table-column prop="targetLanguage" label="目标语言" width="100" />
        <el-table-column prop="linesConverted" label="行数" width="80" />
        <el-table-column prop="classesConverted" label="类数" width="80" />
        <el-table-column prop="createdAt" label="转换时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button size="small" @click="viewReport(row)">查看报告</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const projects = ref<any[]>([])
const conversionHistory = ref<any[]>([])
const showCreateDialog = ref(false)
const showDetailDialog = ref(false)
const selectedProject = ref<any>(null)

const newProject = ref({
  name: '',
  description: '',
  languages: [] as string[]
})

onMounted(async () => {
  await loadProjects()
})

const loadProjects = async () => {
  loading.value = true
  try {
    // TODO: 实现 API 调用
    // const response = await fetch('/api/project')
    // projects.value = await response.json()
    
    // 模拟数据
    projects.value = [
      {
        id: 'proj-001',
        name: '用户管理系统',
        description: '从 C# 迁移到 Java 的用户管理系统',
        totalConversions: 15,
        languages: ['CSharp', 'Java'],
        createdAt: new Date().toISOString()
      }
    ]
  } catch (error: any) {
    ElMessage.error(`加载项目失败：${error.message}`)
  } finally {
    loading.value = false
  }
}

const createProject = async () => {
  try {
    // TODO: 实现 API 调用
    const newProj = {
      id: 'proj-' + Date.now(),
      ...newProject.value,
      totalConversions: 0,
      createdAt: new Date().toISOString()
    }
    
    projects.value.push(newProj)
    ElMessage.success('项目创建成功')
    showCreateDialog.value = false
    newProject.value = { name: '', description: '', languages: [] }
  } catch (error: any) {
    ElMessage.error(`创建失败：${error.message}`)
  }
}

const viewProject = (project: any) => {
  selectedProject.value = project
  showDetailDialog.value = true
  
  // TODO: 加载转换历史
  conversionHistory.value = []
}

const convertProject = (project: any) => {
  // 跳转到转换页面
  window.location.href = '/converter'
}

const deleteProject = async (project: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除项目 "${project.name}" 吗？`, '确认删除', {
      type: 'warning'
    })
    
    // TODO: 实现 API 调用
    projects.value = projects.value.filter(p => p.id !== project.id)
    ElMessage.success('删除成功')
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(`删除失败：${error.message}`)
    }
  }
}

const viewReport = (report: any) => {
  // TODO: 查看报告详情
  ElMessage.info('查看报告功能开发中')
}

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleString('zh-CN')
}
</script>

<style scoped>
.project-view {
  height: 100vh;
  background: #f5f7fa;
}

.header {
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
}

.el-main {
  padding: 20px;
}
</style>