<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>btcli - 命令行翻译工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #fff8e1, #ffecb3, #ffcc80);
min-height: 100vh;
position: relative;
}
.draggable-ball {
position: fixed;
top: 50%;
left: 20px;
transform: translateY(-50%);
z-index: 10000;
width: 40px;
height: 40px;
cursor: grab;
}
.draggable-ball:active {
cursor: grabbing;
}
.draggable-ball-canvas {
width: 100%;
height: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #ff8f00;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: white;
}
main {
padding: 2rem 0;
}
.hero {
background: linear-gradient(135deg, #ff8f00, #ff6f00);
color: white;
padding: 4rem 0;
text-align: center;
margin-bottom: 3rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.button-container {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.external-link-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background-color: #ff8f00;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
font-weight: 500;
}
.external-link-btn:hover {
background-color: #e65100;
}
.btn-icon {
width: 16px;
height: 16px;
vertical-align: middle;
}
.features {
padding: 2rem 0;
}
.features h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #ff8f00;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.feature-card {
background-color: #ffecb3;
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(255, 143, 0, 0.1);
transition: transform 0.3s;
border: 1px solid rgba(255, 143, 0, 0.2);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(255, 143, 0, 0.2);
}
.feature-card h3 {
color: #ff8f00;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.feature-card p {
color: #5d4037;
}
.osc_pro_color {color: #5d4037 !important;}
.osc_panel_color {background-color: #ffecb3 !important;}
.osc_background_color {background-color: #fff8e1 !important;}
.osc_border_color {border-color: #ffca28 !important;}
.osc_desc_color {color: #5d4037 !important;}
.osc_link_color * {color: #ff8f00 !important;}
.installation {
padding: 3rem 0;
background-color: #fff3e0;
}
.installation h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
color: #ff8f00;
}
.install-steps {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.step {
margin-bottom: 2rem;
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(255, 143, 0, 0.1);
border-left: 4px solid #ff8f00;
}
.step h3 {
margin-bottom: 1rem;
color: #ff8f00;
}
pre {
background-color: #333;
color: #fff;
padding: 1rem;
border-radius: 5px;
overflow-x: auto;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.usage {
padding: 3rem 0;
}
.usage h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
color: #ff8f00;
}
.usage-examples {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.example {
margin-bottom: 2rem;
background: #ffecb3;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(255, 143, 0, 0.1);
}
.example h3 {
margin-bottom: 0.8rem;
color: #ff8f00;
}
.about {
padding: 5rem 0;
background-color: #ffecb3;
}
.about h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
color: #ff8f00;
}
.about p {
margin-bottom: 1rem;
font-size: 1.1rem;
text-align: center;
color: #5d4037;
}
footer {
background-color: #ff8f00;
color: white;
padding: 3rem 0;
text-align: center;
}
footer p {
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2rem;
}
.hero {
padding: 3rem 0;
}
.feature-grid {
grid-template-columns: 1fr;
}
nav {
flex-direction: column;
padding: 1rem;
}
.logo {
margin-bottom: 1rem;
}
}
</style>
</head>
<body>
<div class="draggable-ball">
<canvas id="draggableBall" class="draggable-ball-canvas"></canvas>
</div>
<header>
<nav>
<div class="logo">btcli</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#features">特性</a></li>
<li><a href="#installation">安装</a></li>
<li><a href="#usage">使用</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="container">
<h1>btcli</h1>
<p>一款在线命令行翻译工具，支持中文及其他语言，配备TUI界面</p>
</div>
</section>
<div class="container button-container">
<a href="https://gitee.com/Ironbayberry/btcli" target="_blank" class="external-link-btn">
<img src="https://gitee.com/favicon.ico" alt="Gitee Icon" class="btn-icon">
Gitee
</a>
<a href="https://crates.io/crates/btcli" target="_blank" class="external-link-btn">
<img src="https://crates.io/favicon.ico" alt="Crates.io Icon" class="btn-icon">
Crates.io
</a>
</div>
<section id="features" class="features">
<div class="container">
<h2>功能特性</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>命令行界面 (CLI)</h3>
<p>支持丰富的命令行参数，可直接在终端中快速翻译，无需打开图形界面，提高工作效率</p>
<ul style="text-align: left; margin-top: 10px;">
<li>支持 -s/--source 指定源语言</li>
<li>支持 -t/--target 指定目标语言</li>
<li>支持 -h/--help 查看帮助信息</li>
<li>支持 -v/--version 查看版本信息</li>
</ul>
</div>
<div class="feature-card">
<h3>文本用户界面 (TUI)</h3>
<p>直观的文本用户界面，提供友好的交互体验，支持多窗口操作和实时翻译</p>
<ul style="text-align: left; margin-top: 10px;">
<li>支持多语言配置</li>
<li>支持设置页面</li>
<li>支持快捷键操作</li>
<li>支持剪贴板功能</li>
</ul>
</div>
<div class="feature-card">
<h3>多语言支持</h3>
<p>支持中文、英文及多种国际语言之间的互译，覆盖全球主要语系</p>
<ul style="text-align: left; margin-top: 10px;">
<li>自动检测源语言</li>
<li>支持主流语种翻译</li>
<li>持续添加新语言</li>
<li>高质量翻译引擎</li>
</ul>
</div>
<div class="feature-card">
<h3>纯CLI模式</h3>
<p>支持纯命令行操作，适合脚本集成和自动化任务，可无缝集成到各类工作流中</p>
<ul style="text-align: left; margin-top: 10px;">
<li>无头模式运行</li>
<li>支持管道输入</li>
<li>支持批处理操作</li>
<li>适合CI/CD集成</li>
</ul>
</div>
<div class="feature-card">
<h3>安全可靠</h3>
<p>采用百度翻译API，保障翻译质量和数据安全，本地配置文件加密存储</p>
<ul style="text-align: left; margin-top: 10px;">
<li>API密钥本地存储</li>
<li>HTTPS加密传输</li>
<li>无数据记录</li>
<li>开源可验证</li>
</ul>
</div>
<div class="feature-card">
<h3>跨平台支持</h3>
<p>基于Rust开发，支持Windows、macOS、Linux等多种操作系统</p>
<ul style="text-align: left; margin-top: 10px;">
<li>Windows x86_64</li>
<li>Linux x86_64</li>
<li>macOS Intel/Apple Silicon</li>
<li>ARM架构支持</li>
</ul>
</div>
</div>
</div>
</section>
<section id="installation" class="installation">
<div class="container">
<h2>安装</h2>
<div class="install-steps">
<div class="step">
<h3>通过Cargo安装</h3>
<pre><code>cargo install btcli</code></pre>
</div>
<div class="step">
<h3>从源码构建</h3>
<pre><code>git clone https://gitee.com/Ironbayberry/btcli.git
cd btcli
cargo build --release</code></pre>
</div>
</div>
</div>
</section>
<section id="usage" class="usage">
<div class="container">
<h2>使用方法</h2>
<div class="usage-examples">
<div class="example">
<h3>基础翻译</h3>
<pre><code>btcli "Hello, world!"</code></pre>
</div>
<div class="example">
<h3>指定语言</h3>
<pre><code>btcli -s en -t zh "Hello, world!"
（默认会保存到设置）</code></pre>
</div>
<div class="example">
<h3>启动TUI界面</h3>
<pre><code>btcli</code></pre>
</div>
<div class="example">
<h3>显示帮助</h3>
<pre><code>btcli --help</code></pre>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>关于项目</h2>
<p>btcli是一个开源的命令行翻译工具，专为中文和其他语言的翻译而设计。项目采用Rust语言编写，注重性能和安全性。</p>
<p>作者: S.A. (@snoware)</p>
<p>许可证: MPL-2.0</p>
<p>项目主页: <a href="https://gitee.com/Ironbayberry/btcli" style="color: #ff8f00; text-decoration: underline;" target="_blank">https://gitee.com/Ironbayberry/btcli</a></p>
</div>
</section>
<div class="container">
<div id="osc-gitee-widget-tag"></div>
</div>
</main>
<footer>
<div class="container">
<p>© 2026 S.A. (@snoware). 使用 MPL-2.0 许可证发布.</p>
<p>项目主页: <a href="https://swe-iss{$rthSuffix}/softwares/btcli" style="color: white; text-decoration: underline;" target="_blank">https://swe-iss{$rthSuffix}/softwares/btcli</a></p>
</div>
</footer>
<script>
(function() {
var origin = 'https://gitee.com';
var widgetUrl = origin + '/Ironbayberry/btcli/widget_preview';
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = widgetUrl;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
<script>
const canvas = document.getElementById('draggableBall');
const ctx = canvas.getContext('2d');
canvas.width = 40;
canvas.height = 40;
function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 15;
const gradient = ctx.createRadialGradient(
centerX - 5, centerY - 5, 1,
centerX, centerY, radius
);
gradient.addColorStop(0, '#ffeb3b'); gradient.addColorStop(1, '#ff9800');
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
ctx.strokeStyle = '#e65100';
ctx.lineWidth = 1;
ctx.stroke();
ctx.font = 'bold 12px Arial';
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('(¬‿¬)', centerX, centerY + 2);
}
drawBall();
let isDragging = false;
let offsetX, offsetY;
canvas.parentElement.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
canvas.parentElement.addEventListener('touchstart', touchStart);
document.addEventListener('touchmove', touchMove);
document.addEventListener('touchend', touchEnd);
function startDrag(e) {
e.preventDefault();
isDragging = true;
const rect = canvas.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
}
function drag(e) {
if (!isDragging) return;
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
canvas.parentElement.style.left = `${x}px`;
canvas.parentElement.style.top = `${y}px`;
canvas.parentElement.style.transform = 'none'; }
function stopDrag() {
isDragging = false;
}
function touchStart(e) {
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousedown', {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}
function touchMove(e) {
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
document.dispatchEvent(mouseEvent);
}
function touchEnd() {
const mouseEvent = new MouseEvent('mouseup', {});
document.dispatchEvent(mouseEvent);
}
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80, behavior: 'smooth'
});
}
});
});
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-links a');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 100)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
document.addEventListener('DOMContentLoaded', function() {
console.log('btcli 详情页面已加载');
});
</script>
</body>
</html>