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" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Known" Version="3.5.7" />
|
||||
</ItemGroup>
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net8.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
using CodePlay.WebUI.Components;
|
||||
using CodePlay.Core.Services;
|
||||
using Known.Extensions;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
@@ -10,6 +11,9 @@ builder.Services.AddRazorComponents()
|
||||
// 注册核心转换服务
|
||||
builder.Services.AddSingleton<ConversionService>();
|
||||
|
||||
// 添加 Known 服务
|
||||
builder.Services.AddKnown();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
// 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