通义灵码开发文本大小写转换器,结合 MCP Server 自动部署

简介: 在日常编码、写作或处理文本时,大小写格式混乱常影响阅读与排版。为此,我们设计了“文本大小写转换器”,支持一键转换全小写、全大写、首字母大写等格式,操作便捷高效。还可通过中文指令与 通义灵码交互,结合 EdgeOne Pages MCP 部署,快速生成公开访问链接。让格式不再拖慢你的效率。

在日常编码、写作、编辑资料或处理表格内容的过程中,我们经常会遇到一个非常常见但又容易被忽略的问题——文本的大小写格式不统一。有时候我们从网页上复制一段文字,有的是全大写、有的是全小写,还有些是首字母大小写混乱,看起来非常杂乱,不仅影响阅读,也不利于后续的排版与展示。而如果手动一个个修改,不仅枯燥,还容易出错。

为了处理这种琐碎但常见的需求,我们专门设计了一个小巧实用的工具:文本大小写转换器。它的目标很简单——一键转换文本大小写格式,让所有操作变得轻松、便捷、高效。

功能介绍:三种转换,一键搞定

这个工具的核心功能其实非常直白,正因为它专注、聚焦,所以用起来也格外顺手。目前支持的三种常用转换方式如下:

1. 全小写转换(lowercase)

将所有文本中的字母统一转换为小写格式,适用于需要统一命名风格(如变量名、文件名等)的场景。无论你粘贴进来的是大写、小写还是混合格式,一键点击后,所有英文字母都会变成小写,清爽整洁。

除了这三种主要模式,后续还可以拓展一些实用子功能,比如“句子首字母大写”、“驼峰命名法(camelCase)”、“蛇形命名(snake_case)”等,甚至根据语言环境智能判断格式要求,适应多种使用场景。

通义灵码的中文交互指令

为了进一步提升体验,我们还为这项功能配套了中文指令,让你在使用 通义灵码时可以像聊天一样进行交互,快速执行转换操作。以下是几条常用的中文指令示例:

使用HTML和JS实现文本大小写转换器:支持全小写、全大写、首字母大写等一键转换。

通义灵码在接收到这些自然语言指令后,会自动识别要操作的文本段,并执行相应的转换操作。

使用 EdgeOne Pages MCP 发布

因为我们的智能体中使用了 EdgeOne Pages MCP,生成工具后,会通过MCP实现自动部署;

当前端开发完成后,智能体就是将应用部署到一个公开的域名上,方便用户访问。腾讯云提供了一个非常方便的工具——EdgeOne Pages,它允许我们将 页面轻松发布并生成一个公开的 URL 地址。

  1. 将 项目通过 EdgeOne Pages 部署,几秒钟内就能获得一个公开的链接。
  2. 使用生成的链接,访问我们的页面,查看实际效果。

通过这个过程,用户就能够轻松 使用,并通过公开的链接访问。别让格式拖慢你的效率

虽然文本大小写看似是个不起眼的小问题,但实际工作中处理这类琐碎内容往往最消耗精力。通过 Trae 提供的“文本大小写转换器”,你可以用最简单的方式,快速实现文字格式的统一与规范,让注意力真正集中在内容本身、而不是格式上。

这种小工具,不一定花哨,但用起来舒服。它既适合写文案的你,也适合整理表格的你,更适合写代码的你。你会发现,把一件小事做到极致,本身就是一种高效的体现。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能文本大小写转换器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        /* 动态背景粒子 */
        .bg-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
        }
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        .main-content {
            padding: 40px;
        }
        .conversion-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }
        .input-section, .output-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .section-title {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .textarea {
            width: 100%;
            height: 300px;
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            font-size: 16px;
            font-family: 'Courier New', monospace;
            resize: vertical;
            transition: border-color 0.3s ease;
            background: white;
        }
        .textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);
        }
        .controls-panel {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .conversion-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        .convert-btn {
            padding: 15px 20px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .convert-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }
        .convert-btn:active {
            transform: translateY(0);
        }
        .convert-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        .convert-btn:hover::before {
            left: 100%;
        }
        .special-functions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        .special-btn {
            padding: 12px 18px;
            border: 2px solid #667eea;
            border-radius: 8px;
            background: transparent;
            color: #667eea;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .special-btn:hover {
            background: #667eea;
            color: white;
            transform: scale(1.05);
        }
        .stats-panel {
            background: #e9ecef;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
            display: block;
        }
        .stat-label {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }
        .utility-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .utility-btn {
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 25px;
            background: white;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .utility-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        .history-panel {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            max-height: 300px;
            overflow-y: auto;
        }
        .history-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid #667eea;
        }
        .history-item:hover {
            transform: translateX(5px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        .history-type {
            font-weight: bold;
            color: #667eea;
            font-size: 0.9em;
        }
        .history-text {
            margin-top: 5px;
            color: #666;
            font-size: 0.9em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .preview-mode {
            background: #e3f2fd;
            border: 2px dashed #2196f3;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        .preview-text {
            font-size: 1.2em;
            color: #1976d2;
            font-weight: bold;
        }
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4caf50;
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transform: translateX(400px);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        .toast.show {
            transform: translateX(0);
        }
        @media (max-width: 768px) {
            .conversion-area {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .main-content {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .conversion-buttons {
                grid-template-columns: 1fr;
            }
        }
        /* 自定义滚动条 */
        .history-panel::-webkit-scrollbar {
            width: 6px;
        }
        .history-panel::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        .history-panel::-webkit-scrollbar-thumb {
            background: #667eea;
            border-radius: 3px;
        }
        .character-count {
            font-size: 0.9em;
            color: #666;
            margin-top: 10px;
            text-align: right;
        }
        .mode-indicator {
            display: inline-block;
            padding: 4px 8px;
            background: #667eea;
            color: white;
            border-radius: 4px;
            font-size: 0.8em;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="bg-particles" id="particles"></div>
    
    <div class="container">
        <div class="header">
            <h1>🔄 智能文本大小写转换器</h1>
            <p>支持多种转换模式,智能识别,一键转换文本格式</p>
        </div>
        <div class="main-content">
            <div class="conversion-area">
                <div class="input-section">
                    <div class="section-title">
                        📝 输入文本
                        <span class="mode-indicator" id="modeIndicator">实时模式</span>
                    </div>
                    <textarea 
                        id="inputText" 
                        class="textarea" 
                        placeholder="在此输入需要转换的文本...支持中英文混排处理"
                        oninput="handleInput()"
                        onpaste="handlePaste()"
                    ></textarea>
                    <div class="character-count" id="inputCount">字符数: 0</div>
                </div>
                <div class="output-section">
                    <div class="section-title">
                        ✨ 转换结果
                        <button class="utility-btn" onclick="copyOutput()" style="margin-left: auto;">
                            📋 复制结果
                        </button>
                    </div>
                    <textarea 
                        id="outputText" 
                        class="textarea" 
                        readonly
                        placeholder="转换结果将在此显示..."
                    ></textarea>
                    <div class="character-count" id="outputCount">字符数: 0</div>
                </div>
            </div>
            <div class="controls-panel">
                <div class="section-title">🛠️ 转换操作</div>
                
                <div class="conversion-buttons">
                    <button class="convert-btn" onclick="convertCase('lowercase')" title="将所有字母转为小写">
                        🔤 全小写 (lowercase)
                    </button>
                    <button class="convert-btn" onclick="convertCase('uppercase')" title="将所有字母转为大写">
                        🔠 全大写 (UPPERCASE)
                    </button>
                    <button class="convert-btn" onclick="convertCase('capitalize')" title="每个单词首字母大写">
                        🎯 首字母大写 (Capitalize)
                    </button>
                    <button class="convert-btn" onclick="convertCase('sentence')" title="句子首字母大写">
                        📝 句式大写 (Sentence case)
                    </button>
                    <button class="convert-btn" onclick="convertCase('camelcase')" title="驼峰命名法">
                        🐫 驼峰式 (camelCase)
                    </button>
                    <button class="convert-btn" onclick="convertCase('pascalcase')" title="帕斯卡命名法">
                        🏛️ 帕斯卡式 (PascalCase)
                    </button>
                    <button class="convert-btn" onclick="convertCase('snakecase')" title="下划线命名法">
                        🐍 蛇形式 (snake_case)
                    </button>
                    <button class="convert-btn" onclick="convertCase('kebabcase')" title="短横线命名法">
                        🍢 烤串式 (kebab-case)
                    </button>
                </div>
                <div class="special-functions">
                    <button class="special-btn" onclick="convertCase('inverse')" title="大小写反转">
                        🔄 大小写反转
                    </button>
                    <button class="special-btn" onclick="convertCase('alternating')" title="交替大小写">
                        🎪 交替大小写
                    </button>
                    <button class="special-btn" onclick="convertCase('random')" title="随机大小写">
                        🎲 随机大小写
                    </button>
                    <button class="special-btn" onclick="removeSpaces()" title="移除所有空格">
                        🚫 移除空格
                    </button>
                    <button class="special-btn" onclick="removeExtraSpaces()" title="移除多余空格">
                        ✂️ 清理空格
                    </button>
                    <button class="special-btn" onclick="addSpaces()" title="在每个字符间添加空格">
                        ➕ 添加空格
                    </button>
                </div>
            </div>
            <div class="stats-panel">
                <div class="section-title">📊 文本统计</div>
                <div class="stats-grid">
                    <div class="stat-item">
                        <span class="stat-number" id="charCount">0</span>
                        <div class="stat-label">总字符数</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="wordCount">0</span>
                        <div class="stat-label">单词数</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="lineCount">0</span>
                        <div class="stat-label">行数</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="upperCount">0</span>
                        <div class="stat-label">大写字母</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="lowerCount">0</span>
                        <div class="stat-label">小写字母</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="numberCount">0</span>
                        <div class="stat-label">数字</div>
                    </div>
                </div>
            </div>
            <div class="utility-buttons">
                <button class="utility-btn" onclick="clearAll()">🗑️ 清空所有</button>
                <button class="utility-btn" onclick="swapTexts()">🔄 交换文本</button>
                <button class="utility-btn" onclick="togglePreviewMode()">👁️ 预览模式</button>
                <button class="utility-btn" onclick="downloadResult()">💾 下载结果</button>
                <button class="utility-btn" onclick="toggleRealTimeMode()">⚡ 实时转换</button>
                <button class="utility-btn" onclick="showHelp()">❓ 使用帮助</button>
            </div>
            <div class="history-panel">
                <div class="section-title">📚 转换历史</div>
                <div id="historyContainer">
                    <div style="text-align: center; color: #999; padding: 20px;">
                        暂无转换历史
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="toast" class="toast"></div>
    <script>
        // 全局变量
        let isRealTimeMode = true;
        let isPreviewMode = false;
        let conversionHistory = [];
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            createParticles();
            loadHistory();
            updateStats();
        });
        // 创建背景粒子
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 30;
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const size = Math.random() * 8 + 3;
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
                container.appendChild(particle);
            }
        }
        // 输入处理
        function handleInput() {
            updateStats();
            updateCharacterCount();
            
            if (isRealTimeMode) {
                // 在实时模式下,延迟执行转换以避免频繁操作
                clearTimeout(window.inputTimeout);
                window.inputTimeout = setTimeout(() => {
                    const lastConversion = localStorage.getItem('lastConversion');
                    if (lastConversion) {
                        convertCase(lastConversion);
                    }
                }, 300);
            }
        }
        // 粘贴处理
        function handlePaste() {
            setTimeout(() => {
                handleInput();
                showToast('文本已粘贴');
            }, 100);
        }
        // 大小写转换核心函数
        function convertCase(type) {
            const input = document.getElementById('inputText').value;
            if (!input.trim()) {
                showToast('请先输入文本', 'warning');
                return;
            }
            let result = '';
            
            switch (type) {
                case 'lowercase':
                    result = input.toLowerCase();
                    break;
                case 'uppercase':
                    result = input.toUpperCase();
                    break;
                case 'capitalize':
                    result = input.replace(/\b\w+/g, word => 
                        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
                    );
                    break;
                case 'sentence':
                    result = input.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, match => 
                        match.toUpperCase()
                    );
                    break;
                case 'camelcase':
                    result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => 
                        index === 0 ? word.toLowerCase() : word.toUpperCase()
                    ).replace(/\s+/g, '');
                    break;
                case 'pascalcase':
                    result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, word => 
                        word.toUpperCase()
                    ).replace(/\s+/g, '');
                    break;
                case 'snakecase':
                    result = input.toLowerCase().replace(/\s+/g, '_');
                    break;
                case 'kebabcase':
                    result = input.toLowerCase().replace(/\s+/g, '-');
                    break;
                case 'inverse':
                    result = input.split('').map(char => 
                        char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase()
                    ).join('');
                    break;
                case 'alternating':
                    result = input.split('').map((char, index) => 
                        index % 2 === 0 ? char.toLowerCase() : char.toUpperCase()
                    ).join('');
                    break;
                case 'random':
                    result = input.split('').map(char => 
                        Math.random() > 0.5 ? char.toUpperCase() : char.toLowerCase()
                    ).join('');
                    break;
                default:
                    result = input;
            }
            document.getElementById('outputText').value = result;
            updateCharacterCount();
            addToHistory(type, input, result);
            localStorage.setItem('lastConversion', type);
            
            showToast(`已转换为${getConversionName(type)}`);
        }
        // 特殊功能
        function removeSpaces() {
            const input = document.getElementById('inputText').value;
            const result = input.replace(/\s/g, '');
            document.getElementById('outputText').value = result;
            updateCharacterCount();
            showToast('已移除所有空格');
        }
        function removeExtraSpaces() {
            const input = document.getElementById('inputText').value;
            const result = input.replace(/\s+/g, ' ').trim();
            document.getElementById('outputText').value = result;
            updateCharacterCount();
            showToast('已清理多余空格');
        }
        function addSpaces() {
            const input = document.getElementById('inputText').value;
            const result = input.split('').join(' ');
            document.getElementById('outputText').value = result;
            updateCharacterCount();
            showToast('已在字符间添加空格');
        }
        // 工具函数
        function getConversionName(type) {
            const names = {
                'lowercase': '全小写',
                'uppercase': '全大写',
                'capitalize': '首字母大写',
                'sentence': '句式大写',
                'camelcase': '驼峰式',
                'pascalcase': '帕斯卡式',
                'snakecase': '蛇形式',
                'kebabcase': '烤串式',
                'inverse': '大小写反转',
                'alternating': '交替大小写',
                'random': '随机大小写'
            };
            return names[type] || type;
        }
        // 更新统计信息
        function updateStats() {
            const text = document.getElementById('inputText').value;
            
            document.getElementById('charCount').textContent = text.length;
            document.getElementById('wordCount').textContent = text.trim() ? text.trim().split(/\s+/).length : 0;
            document.getElementById('lineCount').textContent = text ? text.split('\n').length : 0;
            document.getElementById('upperCount').textContent = (text.match(/[A-Z]/g) || []).length;
            document.getElementById('lowerCount').textContent = (text.match(/[a-z]/g) || []).length;
            document.getElementById('numberCount').textContent = (text.match(/[0-9]/g) || []).length;
        }
        // 更新字符计数
        function updateCharacterCount() {
            const input = document.getElementById('inputText').value;
            const output = document.getElementById('outputText').value;
            
            document.getElementById('inputCount').textContent = `字符数: ${input.length}`;
            document.getElementById('outputCount').textContent = `字符数: ${output.length}`;
        }
        // 历史记录管理
        function addToHistory(type, input, output) {
            const historyItem = {
                type: type,
                typeName: getConversionName(type),
                input: input.substring(0, 100),
                output: output.substring(0, 100),
                timestamp: new Date().toLocaleString()
            };
            conversionHistory.unshift(historyItem);
            if (conversionHistory.length > 10) {
                conversionHistory.pop();
            }
            updateHistoryDisplay();
            saveHistory();
        }
        function updateHistoryDisplay() {
            const container = document.getElementById('historyContainer');
            
            if (conversionHistory.length === 0) {
                container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无转换历史</div>';
                return;
            }
            container.innerHTML = conversionHistory.map((item, index) => `
                <div class="history-item" onclick="restoreFromHistory(${index})">
                    <div class="history-type">${item.typeName} - ${item.timestamp}</div>
                    <div class="history-text">输入: ${item.input}${item.input.length > 100 ? '...' : ''}</div>
                </div>
            `).join('');
        }
        function restoreFromHistory(index) {
            const item = conversionHistory[index];
            // 这里我们只能恢复原始输入,因为我们只保存了截断的版本
            // 在实际应用中,你可能想要保存完整的文本
            showToast('历史记录功能:点击可查看转换详情');
        }
        function saveHistory() {
            localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory));
        }
        function loadHistory() {
            const saved = localStorage.getItem('conversionHistory');
            if (saved) {
                conversionHistory = JSON.parse(saved);
                updateHistoryDisplay();
            }
        }
        // 实用功能
        function copyOutput() {
            const output = document.getElementById('outputText');
            if (!output.value.trim()) {
                showToast('没有可复制的内容', 'warning');
                return;
            }
            output.select();
            document.execCommand('copy');
            showToast('结果已复制到剪贴板');
        }
        function clearAll() {
            document.getElementById('inputText').value = '';
            document.getElementById('outputText').value = '';
            updateStats();
            updateCharacterCount();
            showToast('已清空所有内容');
        }
        function swapTexts() {
            const input = document.getElementById('inputText');
            const output = document.getElementById('outputText');
            
            const temp = input.value;
            input.value = output.value;
            output.value = temp;
            
            updateStats();
            updateCharacterCount();
            showToast('文本已交换');
        }
        function togglePreviewMode() {
            isPreviewMode = !isPreviewMode;
            const button = event.target;
            
            if (isPreviewMode) {
                button.textContent = '👁️ 退出预览';
                button.style.background = '#ff9800';
                showToast('预览模式已开启');
            } else {
                button.textContent = '👁️ 预览模式';
                button.style.background = '';
                showToast('预览模式已关闭');
            }
        }
        function downloadResult() {
            const content = document.getElementById('outputText').value;
            if (!content.trim()) {
                showToast('没有可下载的内容', 'warning');
                return;
            }
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'converted_text.txt';
            a.click();
            URL.revokeObjectURL(url);
            
            showToast('文件下载已开始');
        }
        function toggleRealTimeMode() {
            isRealTimeMode = !isRealTimeMode;
            const indicator = document.getElementById('modeIndicator');
            const button = event.target;
            
            if (isRealTimeMode) {
                indicator.textContent = '实时模式';
                button.textContent = '⚡ 实时转换';
                button.style.background = '';
                showToast('实时转换已开启');
            } else {
                indicator.textContent = '手动模式';
                button.textContent = '⚡ 手动模式';
                button.style.background = '#ff9800';
                showToast('已切换到手动模式');
            }
        }
        function showHelp() {
            const helpText = `
🔄 智能文本大小写转换器使用说明:
📝 基础功能:
• 全小写:将所有字母转为小写
• 全大写:将所有字母转为大写  
• 首字母大写:每个单词首字母大写
• 句式大写:每句话首字母大写
🛠️ 编程格式:
• 驼峰式:firstName (首字母小写)
• 帕斯卡式:FirstName (首字母大写)
• 蛇形式:first_name (下划线分隔)
• 烤串式:first-name (短横线分隔)
🎯 特殊功能:
• 大小写反转:大写变小写,小写变大写
• 交替大小写:字符间交替变换
• 随机大小写:随机转换字符大小写
⚡ 实用工具:
• 实时转换:输入时自动应用上次转换
• 预览模式:可视化转换效果
• 转换历史:查看最近的转换记录
• 文本统计:字符、单词、行数统计
💡 快捷键:
• Ctrl+A:全选文本
• Ctrl+C:复制选中内容
• Ctrl+V:粘贴文本
            `;
            alert(helpText);
        }
        // 提示消息
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = 'toast show';
            
            if (type === 'warning') {
                toast.style.background = '#ff9800';
            } else if (type === 'error') {
                toast.style.background = '#f44336';
            } else {
                toast.style.background = '#4caf50';
            }
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                const lastConversion = localStorage.getItem('lastConversion');
                if (lastConversion) {
                    convertCase(lastConversion);
                }
            }
        });
    </script>
</body>
</html>
相关文章
人工智能 安全 IDE
369 31
|
18天前
|
人工智能 API 开发者
揭秘大模型工具调用的核心:上下文工程+MCP
本文系统解析模型上下文协议(MCP)与大模型工具调用的关系,澄清“大模型需理解MCP”的常见误解。MCP实为开发者服务的标准化接口,简化工具集成,提升开发效率,而大模型仅需识别工具列表,无需感知MCP存在。助力高效构建AI智能体。
617 52
|
3月前
|
自然语言处理 UED
通义灵码实现大海、日出与白云的动态首页背景设计,MCP一键部署在线预览。
自然与意象融合的动态背景设计,以大海、日出和白云为核心元素,通过视觉心理与创意分层打造沉浸式网页体验。借助通义灵码,用自然语言即可快速生成复杂动画,实现“指令即搭建”的智能开发流程,让设计更高效且富有情感表达。
|
29天前
|
机器学习/深度学习 人工智能 机器人
AI Compass前沿速览:Nano Bananary、MCP Registry、通义DeepResearch 、VoxCPM、InternVLA·M1具身机器人
AI Compass前沿速览:Nano Bananary、MCP Registry、通义DeepResearch 、VoxCPM、InternVLA·M1具身机器人
|
4月前
|
人工智能 运维 监控
基于魔搭MCP广场的AI效率革命:在通义灵码中一键调用2400+工具的开发指南
MCP广场技术架构解析与效率优化全攻略。通过统一工具接入规范、智能路由引擎及Serverless执行器,显著降低集成成本,提升AI开发效率。实战演示从环境配置到工具调用全流程,并深入讲解异步处理、成本控制、安全接入等企业级方案。实测数据显示,工具接入周期缩短93%,年节省超85万元。适合追求高效AI研发的团队参考。
230 0
|
1月前
|
IDE 开发工具 Python
通义灵码+支付 MCP:30 分钟实现创作打赏智能体
本文介绍如何使用通义灵码智能体与 qwen3 和支付 MCP 编写创作打赏智能体,该智能体能够完成日常聊天、诗词创作和请求打赏并生成支付链接功能。
132 1
|
3月前
|
SQL 人工智能 搜索推荐
MCP这个协议,如何让大模型从‘能说’迈向‘能做’?
本文由三桥君撰写,深入解析MCP(模型上下文协议)如何助力大模型从“能说”到“能做”,涵盖其核心原理、工作机制与多场景应用,为AI产品经理提供系统化知识与实践指导。
532 61
|
2月前
|
弹性计算 开发工具 git
通义灵码助你打造专属高德 MCP 服务
如果现有的MCP服务不满足您的需求,通义灵码智能体能够帮助您开发专属MCP服务,直达业务目标。本案例以高德提供的基础MCP服务为基础,借助智能体开发一个订制旅游攻略的高级MCP服务。
|
4月前
|
人工智能 搜索推荐 测试技术
通义灵码 Agent+MCP:打造自动化菜品推荐平台,从需求到部署实现全流程创新
通过通义灵码编程智能体模式和 MCP 的集成,开发者可以高效构建在线菜品推荐网站。智能体模式大幅提升了开发效率,MCP 服务则为功能扩展提供了无限可能。

热门文章

最新文章

下一篇
oss教程