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

<template>
  <div class="projects-view">
    <el-container>
      <el-header class="toolbar">
        <h2>项目管理</h2>
        <el-button type="primary" @click="showCreateDialog = true" icon="Plus">新建项目</el-button>
      </el-header>

      <el-main>
        <el-table :data="projects" stripe>
          <el-table-column prop="name" label="项目名称" />
          <el-table-column label="转换方向">
            <template #default="{ row }">
              <el-tag>{{ row.sourceLanguage }}</el-tag>
              <el-icon style="margin: 0 8px"><Right /></el-icon>
              <el-tag type="success">{{ row.targetLanguage }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="files" label="文件数" width="100">
            <template #default="{ row }">{{ row.files?.length || 0 }}</template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="180">
            <template #default="{ row }">{{ new Date(row.createdAt).toLocaleString() }}</template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button size="small" @click="viewProject(row)">查看</el-button>
              <el-button size="small" type="danger" @click="deleteProject(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 创建项目对话框 -->
    <el-dialog v-model="showCreateDialog" title="创建项目" width="500px">
      <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-select v-model="newProject.sourceLanguage">
            <el-option label="C#" value="CSharp" />
            <el-option label="Java" value="Java" />
            <el-option label="C++" value="CPlusPlus" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标语言">
          <el-select v-model="newProject.targetLanguage">
            <el-option label="Java" value="Java" />
            <el-option label="C#" value="CSharp" />
            <el-option label="C++" value="CPlusPlus" />
          </el-select>
        </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>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Right } from '@element-plus/icons-vue'
import { conversionApi } from '../services/api'

const projects = ref<any[]>([])
const showCreateDialog = ref(false)
const newProject = ref({ name: '', sourceLanguage: 'CSharp', targetLanguage: 'Java' })

const loadProjects = async () => {
  try { projects.value = await conversionApi.getProjects() }
  catch { ElMessage.error('加载项目失败') }
}

const createProject = async () => {
  try {
    await conversionApi.createProject(newProject.value.name, newProject.value.sourceLanguage, newProject.value.targetLanguage)
    ElMessage.success('项目创建成功')
    showCreateDialog.value = false
    loadProjects()
  } catch { ElMessage.error('创建失败') }
}

const deleteProject = async (id: string) => {
  try {
    await conversionApi.deleteProject(id)
    ElMessage.success('删除成功')
    loadProjects()
  } catch { ElMessage.error('删除失败') }
}

const viewProject = (project: any) => {
  ElMessage.info(`查看项目：${project.name}`)
}

onMounted(() => { loadProjects() })
</script>

<style scoped>
.projects-view { width: 100%; height: 100%; }
.toolbar { height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e0e0; }
.dark .toolbar { border-bottom-color: #434343; background: #1d1d1d; }
</style>