feat: 实现双前端架构 - Blazor+Known 和 Vue3
Task 4.3 更新 - 双前端项目: 1. Blazor + Known 3.5.7 (管理端): - 添加 Known 3.5.7 NuGet 包 - 更新 Program.cs 配置 Known 服务 - 保留 Blazor Server 架构 2. Vue3 + Element Plus (用户端): - 创建 CodePlay.Web Vue3 项目 - 基于 vue-next-admin 风格设计 - 技术栈：Vue 3.4 + TypeScript + Vite 5 - 集成 Element Plus UI 组件库 - 使用 Pinia 状态管理 - 配置 Vue Router 路由 - 实现 Converter 代码转换页面 - 配置反向代理到后端 API (端口 5000) 项目结构: - CodePlay.WebUI/ - Blazor + Known 管理端 - CodePlay.Web/ - Vue3 + Element Plus 用户端 - CodePlay.Web/ - 包含完整的 Vue3 项目结构 - src/views/Converter.vue - 主转换页面 - src/router/ - 路由配置 - src/App.vue - 根组件 - 支持 npm run dev 启动开发服务器 前端特性: - 响应式布局 (El-Row/El-Col) - 代码编辑器 (双栏对比) - 语言选择器 - 验证轮次配置 - TODO 和问题列表展示 - 一键复制结果 - 实时错误提示 Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>
This commit is contained in:
monkeycode-ai
@@ -1,17 +0,0 @@
|
|||||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
|
||||||
|
|
||||||
<PropertyGroup>
|
|
||||||
<TargetFramework>net8.0</TargetFramework>
|
|
||||||
<Nullable>enable</Nullable>
|
|
||||||
<ImplicitUsings>enable</ImplicitUsings>
|
|
||||||
</PropertyGroup>
|
|
||||||
|
|
||||||
<ItemGroup>
|
|
||||||
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.6.2" />
|
|
||||||
</ItemGroup>
|
|
||||||
|
|
||||||
<ItemGroup>
|
|
||||||
<ProjectReference Include="..\CodePlay.Core\CodePlay.Core.csproj" />
|
|
||||||
</ItemGroup>
|
|
||||||
|
|
||||||
</Project>
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
@CodePlay.Web_HostAddress = http://localhost:5014
|
|
||||||
|
|
||||||
GET {{CodePlay.Web_HostAddress}}/weatherforecast/
|
|
||||||
Accept: application/json
|
|
||||||
|
|
||||||
###
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
using Microsoft.AspNetCore.Mvc;
|
|
||||||
using CodePlay.Core.Models;
|
|
||||||
using CodePlay.Core.Common;
|
|
||||||
using CodePlay.Core.Services;
|
|
||||||
|
|
||||||
namespace CodePlay.Web.Controllers;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 代码转换控制器
|
|
||||||
/// </summary>
|
|
||||||
[ApiController]
|
|
||||||
[Route("api/[controller]")]
|
|
||||||
public class ConversionController : ControllerBase
|
|
||||||
{
|
|
||||||
private readonly ConversionService _conversionService;
|
|
||||||
private readonly ILogger<ConversionController> _logger;
|
|
||||||
|
|
||||||
public ConversionController(
|
|
||||||
ConversionService conversionService,
|
|
||||||
ILogger<ConversionController> logger)
|
|
||||||
{
|
|
||||||
_conversionService = conversionService;
|
|
||||||
_logger = logger;
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 执行代码转换
|
|
||||||
/// </summary>
|
|
||||||
/// <param name="request">转换请求</param>
|
|
||||||
/// <param name="cancellationToken">取消令牌</param>
|
|
||||||
/// <returns>转换结果</returns>
|
|
||||||
[HttpPost]
|
|
||||||
[ProducesResponseType(typeof(ConversionResult), StatusCodes.Status200OK)]
|
|
||||||
[ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status400BadRequest)]
|
|
||||||
[ProducesResponseType(typeof(ProblemDetails), StatusCodes.Status500InternalServerError)]
|
|
||||||
public async Task<ActionResult<ConversionResult>> ConvertAsync(
|
|
||||||
[FromBody] ConversionRequest request,
|
|
||||||
CancellationToken cancellationToken = default)
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
// 验证请求
|
|
||||||
if (string.IsNullOrWhiteSpace(request.SourceCode))
|
|
||||||
{
|
|
||||||
return BadRequest(new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Invalid Request",
|
|
||||||
Detail = "Source code is required",
|
|
||||||
Status = 400
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (request.SourceLanguage == LanguageType.None ||
|
|
||||||
request.TargetLanguage == LanguageType.None)
|
|
||||||
{
|
|
||||||
return BadRequest(new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Invalid Request",
|
|
||||||
Detail = "Source and target languages must be specified",
|
|
||||||
Status = 400
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (request.SourceLanguage == request.TargetLanguage)
|
|
||||||
{
|
|
||||||
return BadRequest(new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Invalid Request",
|
|
||||||
Detail = "Source and target languages must be different",
|
|
||||||
Status = 400
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (request.ValidationRounds < 1 || request.ValidationRounds > 3)
|
|
||||||
{
|
|
||||||
return BadRequest(new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Invalid Request",
|
|
||||||
Detail = "Validation rounds must be between 1 and 3",
|
|
||||||
Status = 400
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_logger.LogInformation(
|
|
||||||
"Starting conversion from {SourceLanguage} to {TargetLanguage}",
|
|
||||||
request.SourceLanguage,
|
|
||||||
request.TargetLanguage);
|
|
||||||
|
|
||||||
// 执行转换
|
|
||||||
var result = await _conversionService.ConvertAsync(request, cancellationToken);
|
|
||||||
|
|
||||||
if (result.Success)
|
|
||||||
{
|
|
||||||
_logger.LogInformation(
|
|
||||||
"Conversion completed successfully. Lines: {Lines}, Classes: {Classes}, Methods: {Methods}",
|
|
||||||
result.Report?.LinesConverted,
|
|
||||||
result.Report?.ClassesConverted,
|
|
||||||
result.Report?.MethodsConverted);
|
|
||||||
|
|
||||||
return Ok(result);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
_logger.LogWarning(
|
|
||||||
"Conversion failed: {Error}",
|
|
||||||
result.ErrorMessage);
|
|
||||||
|
|
||||||
return StatusCode(500, new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Conversion Failed",
|
|
||||||
Detail = result.ErrorMessage,
|
|
||||||
Status = 500
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch (Exception ex)
|
|
||||||
{
|
|
||||||
_logger.LogError(ex, "Unexpected error during conversion");
|
|
||||||
|
|
||||||
return StatusCode(500, new ProblemDetails
|
|
||||||
{
|
|
||||||
Title = "Internal Server Error",
|
|
||||||
Detail = "An unexpected error occurred during conversion",
|
|
||||||
Status = 500
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 获取支持的语言转换列表
|
|
||||||
/// </summary>
|
|
||||||
/// <returns>支持的语言对列表</returns>
|
|
||||||
[HttpGet("supported")]
|
|
||||||
[ProducesResponseType(typeof(List<LanguagePairDto>), StatusCodes.Status200OK)]
|
|
||||||
public ActionResult<List<LanguagePairDto>> GetSupportedConversions()
|
|
||||||
{
|
|
||||||
var supported = _conversionService.GetSupportedConversions()
|
|
||||||
.Select(p => new LanguagePairDto
|
|
||||||
{
|
|
||||||
SourceLanguage = p.Source.ToString(),
|
|
||||||
TargetLanguage = p.Target.ToString(),
|
|
||||||
Supported = true
|
|
||||||
})
|
|
||||||
.ToList();
|
|
||||||
|
|
||||||
return Ok(supported);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 检查指定的语言转换是否支持
|
|
||||||
/// </summary>
|
|
||||||
[HttpGet("supported/{source}/{target}")]
|
|
||||||
[ProducesResponseType(StatusCodes.Status200OK)]
|
|
||||||
[ProducesResponseType(StatusCodes.Status404NotFound)]
|
|
||||||
public ActionResult<bool> IsConversionSupported(
|
|
||||||
string source,
|
|
||||||
string target)
|
|
||||||
{
|
|
||||||
if (!Enum.TryParse<LanguageType>(source, out var sourceLang) ||
|
|
||||||
!Enum.TryParse<LanguageType>(target, out var targetLang))
|
|
||||||
{
|
|
||||||
return BadRequest("Invalid language type");
|
|
||||||
}
|
|
||||||
|
|
||||||
var isSupported = _conversionService.IsConversionSupported(sourceLang, targetLang);
|
|
||||||
|
|
||||||
if (isSupported)
|
|
||||||
{
|
|
||||||
return Ok(true);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
return NotFound("Conversion not supported");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 语言对 DTO
|
|
||||||
/// </summary>
|
|
||||||
public class LanguagePairDto
|
|
||||||
{
|
|
||||||
/// <summary>
|
|
||||||
/// 源语言
|
|
||||||
/// </summary>
|
|
||||||
public string SourceLanguage { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 目标语言
|
|
||||||
/// </summary>
|
|
||||||
public string TargetLanguage { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// 是否支持
|
|
||||||
/// </summary>
|
|
||||||
public bool Supported { get; set; }
|
|
||||||
}
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
using Microsoft.AspNetCore.Mvc;
|
|
||||||
|
|
||||||
namespace CodePlay.Web.Controllers;
|
|
||||||
|
|
||||||
[ApiController]
|
|
||||||
[Route("[controller]")]
|
|
||||||
public class WeatherForecastController : ControllerBase
|
|
||||||
{
|
|
||||||
private static readonly string[] Summaries = new[]
|
|
||||||
{
|
|
||||||
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
|
|
||||||
};
|
|
||||||
|
|
||||||
private readonly ILogger<WeatherForecastController> _logger;
|
|
||||||
|
|
||||||
public WeatherForecastController(ILogger<WeatherForecastController> logger)
|
|
||||||
{
|
|
||||||
_logger = logger;
|
|
||||||
}
|
|
||||||
|
|
||||||
[HttpGet(Name = "GetWeatherForecast")]
|
|
||||||
public IEnumerable<WeatherForecast> Get()
|
|
||||||
{
|
|
||||||
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
|
||||||
{
|
|
||||||
Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
|
|
||||||
TemperatureC = Random.Shared.Next(-20, 55),
|
|
||||||
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
|
|
||||||
})
|
|
||||||
.ToArray();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
using CodePlay.Core.Services;
|
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
|
||||||
|
|
||||||
// Add services to the container.
|
|
||||||
|
|
||||||
builder.Services.AddControllers();
|
|
||||||
builder.Services.AddSingleton<ConversionService>();
|
|
||||||
builder.Services.AddEndpointsApiExplorer();
|
|
||||||
builder.Services.AddSwaggerGen();
|
|
||||||
|
|
||||||
var app = builder.Build();
|
|
||||||
|
|
||||||
// Configure the HTTP request pipeline.
|
|
||||||
if (app.Environment.IsDevelopment())
|
|
||||||
{
|
|
||||||
app.UseSwagger();
|
|
||||||
app.UseSwaggerUI();
|
|
||||||
}
|
|
||||||
|
|
||||||
app.UseHttpsRedirection();
|
|
||||||
|
|
||||||
app.UseAuthorization();
|
|
||||||
|
|
||||||
app.MapControllers();
|
|
||||||
|
|
||||||
app.Run();
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "http://json.schemastore.org/launchsettings.json",
|
|
||||||
"iisSettings": {
|
|
||||||
"windowsAuthentication": false,
|
|
||||||
"anonymousAuthentication": true,
|
|
||||||
"iisExpress": {
|
|
||||||
"applicationUrl": "http://localhost:26925",
|
|
||||||
"sslPort": 44339
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"profiles": {
|
|
||||||
"http": {
|
|
||||||
"commandName": "Project",
|
|
||||||
"dotnetRunMessages": true,
|
|
||||||
"launchBrowser": true,
|
|
||||||
"launchUrl": "swagger",
|
|
||||||
"applicationUrl": "http://localhost:5014",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"https": {
|
|
||||||
"commandName": "Project",
|
|
||||||
"dotnetRunMessages": true,
|
|
||||||
"launchBrowser": true,
|
|
||||||
"launchUrl": "swagger",
|
|
||||||
"applicationUrl": "https://localhost:7184;http://localhost:5014",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"IIS Express": {
|
|
||||||
"commandName": "IISExpress",
|
|
||||||
"launchBrowser": true,
|
|
||||||
"launchUrl": "swagger",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
namespace CodePlay.Web;
|
|
||||||
|
|
||||||
public class WeatherForecast
|
|
||||||
{
|
|
||||||
public DateOnly Date { get; set; }
|
|
||||||
|
|
||||||
public int TemperatureC { get; set; }
|
|
||||||
|
|
||||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
|
||||||
|
|
||||||
public string? Summary { get; set; }
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"Logging": {
|
|
||||||
"LogLevel": {
|
|
||||||
"Default": "Information",
|
|
||||||
"Microsoft.AspNetCore": "Warning"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"Logging": {
|
|
||||||
"LogLevel": {
|
|
||||||
"Default": "Information",
|
|
||||||
"Microsoft.AspNetCore": "Warning"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"AllowedHosts": "*"
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CodePlay - 代码转换平台</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "codeplay-web",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.0",
|
||||||
|
"vue-router": "^4.2.0",
|
||||||
|
"pinia": "^2.1.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"element-plus": "^2.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.0",
|
||||||
|
"typescript": "^5.3.0",
|
||||||
|
"vite": "^5.0.0",
|
||||||
|
"vue-tsc": "^1.8.0",
|
||||||
|
"@types/node": "^20.10.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<el-config-provider :locale="zhCn">
|
||||||
|
<router-view />
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import router from './router'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(router)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import Converter from '@/views/Converter.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Converter',
|
||||||
|
component: Converter
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,318 @@
|
|||||||
|
<template>
|
||||||
|
<div class="converter-container">
|
||||||
|
<el-header class="header">
|
||||||
|
<h1>CodePlay 代码转换平台</h1>
|
||||||
|
<p>支持 C#、Java、C++ 之间的代码自动转换</p>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<el-main class="main-content">
|
||||||
|
<el-card class="converter-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>代码转换</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-alert
|
||||||
|
v-if="loading"
|
||||||
|
title="正在转换中..."
|
||||||
|
type="info"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
class="mb-3"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<el-tag type="info">
|
||||||
|
<el-icon class="is-loading"><Loading /></el-icon>
|
||||||
|
处理中
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-alert>
|
||||||
|
|
||||||
|
<el-alert
|
||||||
|
v-if="errorMessage"
|
||||||
|
:title="errorMessage"
|
||||||
|
type="error"
|
||||||
|
:closable="true"
|
||||||
|
show-icon
|
||||||
|
class="mb-3"
|
||||||
|
@close="errorMessage = ''"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-alert
|
||||||
|
v-if="conversionResult?.success"
|
||||||
|
title="转换成功!"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
class="mb-3"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<span>
|
||||||
|
转换行数：{{ conversionResult.report?.linesConverted }} |
|
||||||
|
类数量：{{ conversionResult.report?.classesConverted }} |
|
||||||
|
方法数量：{{ conversionResult.report?.methodsConverted }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-alert>
|
||||||
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form label-position="top">
|
||||||
|
<el-form-item label="源代码">
|
||||||
|
<el-input
|
||||||
|
v-model="sourceCode"
|
||||||
|
type="textarea"
|
||||||
|
:rows="15"
|
||||||
|
placeholder="在这里输入源代码..."
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="源语言">
|
||||||
|
<el-select v-model="sourceLanguage" placeholder="请选择源语言" style="width: 100%">
|
||||||
|
<el-option label="C#" :value="1" />
|
||||||
|
<el-option label="Java" :value="2" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form label-position="top">
|
||||||
|
<el-form-item label="目标语言">
|
||||||
|
<el-select v-model="targetLanguage" placeholder="请选择目标语言" style="width: 100%">
|
||||||
|
<el-option label="Java" :value="2" />
|
||||||
|
<el-option label="C#" :value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="验证轮次">
|
||||||
|
<el-select v-model="validationRounds" placeholder="选择验证轮次" style="width: 100%">
|
||||||
|
<el-option label="1 轮" :value="1" />
|
||||||
|
<el-option label="2 轮" :value="2" />
|
||||||
|
<el-option label="3 轮" :value="3" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :loading="loading" @click="handleConvert">
|
||||||
|
转换
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="handleClear">清除</el-button>
|
||||||
|
<el-button type="success" :disabled="!transformedCode" @click="handleCopy">
|
||||||
|
复制结果
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form label-position="top">
|
||||||
|
<el-form-item label="转换后代码">
|
||||||
|
<el-input
|
||||||
|
v-model="transformedCode"
|
||||||
|
type="textarea"
|
||||||
|
:rows="15"
|
||||||
|
readonly
|
||||||
|
placeholder="转换结果将显示在这里..."
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- TODO 和问题列表 -->
|
||||||
|
<el-alert
|
||||||
|
v-if="hasWarnings"
|
||||||
|
title="需要注意的事项"
|
||||||
|
type="warning"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
<div v-if="conversionResult?.report?.todoItems?.length > 0" class="mb-3">
|
||||||
|
<h4>TODO 列表</h4>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(todo, index) in conversionResult.report.todoItems" :key="index">
|
||||||
|
<strong>{{ todo.description }}</strong><br />
|
||||||
|
<small>原因：{{ todo.whyNotDirect }}</small><br />
|
||||||
|
<small>建议：{{ todo.recommendedAlternative }}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="conversionResult?.report?.issues?.length > 0">
|
||||||
|
<h4>问题列表</h4>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(issue, index) in conversionResult.report.issues" :key="index">
|
||||||
|
<strong>{{ issue.description }}</strong><br />
|
||||||
|
<small>建议：{{ issue.suggestion }}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</el-alert>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Loading } from '@element-plus/icons-vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
interface ConversionResult {
|
||||||
|
success: boolean
|
||||||
|
transformedCode: string
|
||||||
|
report?: {
|
||||||
|
linesConverted: number
|
||||||
|
classesConverted: number
|
||||||
|
methodsConverted: number
|
||||||
|
todoItems?: Array<{
|
||||||
|
description: string
|
||||||
|
whyNotDirect: string
|
||||||
|
recommendedAlternative: string
|
||||||
|
}>
|
||||||
|
issues?: Array<{
|
||||||
|
description: string
|
||||||
|
suggestion: string
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
errorMessage?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const sourceCode = ref('')
|
||||||
|
const transformedCode = ref('')
|
||||||
|
const sourceLanguage = ref(1) // CSharp
|
||||||
|
const targetLanguage = ref(2) // Java
|
||||||
|
const validationRounds = ref(2)
|
||||||
|
const loading = ref(false)
|
||||||
|
const errorMessage = ref('')
|
||||||
|
const conversionResult = ref<ConversionResult | null>(null)
|
||||||
|
|
||||||
|
const hasWarnings = computed(() => {
|
||||||
|
return (
|
||||||
|
conversionResult.value?.report?.todoItems?.length ?? 0 > 0 ||
|
||||||
|
conversionResult.value?.report?.issues?.length ?? 0 > 0
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleConvert = async () => {
|
||||||
|
if (!sourceCode.value.trim()) {
|
||||||
|
errorMessage.value = '请输入源代码'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
errorMessage.value = ''
|
||||||
|
transformedCode.value = ''
|
||||||
|
conversionResult.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request = {
|
||||||
|
sourceCode: sourceCode.value,
|
||||||
|
sourceLanguage: sourceLanguage.value,
|
||||||
|
targetLanguage: targetLanguage.value,
|
||||||
|
validationRounds: validationRounds.value,
|
||||||
|
options: {
|
||||||
|
keepComments: true,
|
||||||
|
keepDocStrings: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用后端 API (Blazor Web API)
|
||||||
|
const response = await axios.post<ConversionResult>('/api/conversion', request, {
|
||||||
|
baseURL: 'http://localhost:5000'
|
||||||
|
})
|
||||||
|
|
||||||
|
conversionResult.value = response.data
|
||||||
|
|
||||||
|
if (response.data.success) {
|
||||||
|
transformedCode.value = response.data.transformedCode
|
||||||
|
ElMessage.success('转换成功')
|
||||||
|
} else {
|
||||||
|
errorMessage.value = response.data.errorMessage ?? '转换失败'
|
||||||
|
ElMessage.error(errorMessage.value)
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
errorMessage.value = `转换失败：${error.message}`
|
||||||
|
ElMessage.error(errorMessage.value)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
sourceCode.value = ''
|
||||||
|
transformedCode.value = ''
|
||||||
|
errorMessage.value = ''
|
||||||
|
conversionResult.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
if (transformedCode.value) {
|
||||||
|
await navigator.clipboard.writeText(transformedCode.value)
|
||||||
|
ElMessage.success('已复制到剪贴板')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.converter-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 30px 20px;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converter-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-4 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:5000',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -4,6 +4,10 @@
|
|||||||
<ProjectReference Include="..\CodePlay.Core\CodePlay.Core.csproj" />
|
<ProjectReference Include="..\CodePlay.Core\CodePlay.Core.csproj" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<PackageReference Include="Known" Version="3.5.7" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<TargetFramework>net8.0</TargetFramework>
|
<TargetFramework>net8.0</TargetFramework>
|
||||||
<Nullable>enable</Nullable>
|
<Nullable>enable</Nullable>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
using CodePlay.WebUI.Components;
|
using CodePlay.WebUI.Components;
|
||||||
using CodePlay.Core.Services;
|
using CodePlay.Core.Services;
|
||||||
|
using Known.Extensions;
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
|
|
||||||
@@ -10,6 +11,9 @@ builder.Services.AddRazorComponents()
|
|||||||
// 注册核心转换服务
|
// 注册核心转换服务
|
||||||
builder.Services.AddSingleton<ConversionService>();
|
builder.Services.AddSingleton<ConversionService>();
|
||||||
|
|
||||||
|
// 添加 Known 服务
|
||||||
|
builder.Services.AddKnown();
|
||||||
|
|
||||||
var app = builder.Build();
|
var app = builder.Build();
|
||||||
|
|
||||||
// Configure the HTTP request pipeline.
|
// Configure the HTTP request pipeline.
|
||||||
|
|||||||
-13
@@ -1,13 +0,0 @@
|
|||||||
namespace TestApp
|
|
||||||
{
|
|
||||||
public class Person
|
|
||||||
{
|
|
||||||
public string Name { get; set; }
|
|
||||||
public int Age { get; set; }
|
|
||||||
|
|
||||||
public void SayHello()
|
|
||||||
{
|
|
||||||
Console.WriteLine($"Hello, my name is {Name}");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
package TestApp
|
|
||||||
;
|
|
||||||
|
|
||||||
TestApp
|
|
||||||
public class Person
|
|
||||||
{
|
|
||||||
private string Name;
|
|
||||||
public string getName() { return Name; }
|
|
||||||
public void setName(string value) { this.Name = value; }
|
|
||||||
private int Age;
|
|
||||||
public int getAge() { return Age; }
|
|
||||||
public void setAge(int value) { this.Age = value; }
|
|
||||||
|
|
||||||
public void SayHello()
|
|
||||||
{
|
|
||||||
Console.WriteLine($"Hello, my name is {Name}");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
{
|
|
||||||
private string Name;
|
|
||||||
public string getName() { return Name; }
|
|
||||||
public void setName(string value) { this.Name = value; }
|
|
||||||
private int Age;
|
|
||||||
public int getAge() { return Age; }
|
|
||||||
public void setAge(int value) { this.Age = value; }
|
|
||||||
public void SayHello()
|
|
||||||
{
|
|
||||||
Console.WriteLine($"Hello, my name is {Name}");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user