优化结果

InfoGenie-frontend/public/60sapi/实用功能/配色方案/background.css

@@ -0,0 +1,187 @@
+/* 背景样式文件 - 单独管理所有背景相关样式 */
+
+/* 主体背景 */
+body {
+    background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 50%, #f0fff4 100%);
+    background-attachment: fixed;
+    position: relative;
+}
+
+/* 背景装饰元素 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 20% 80%, rgba(104, 211, 145, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(72, 187, 120, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(56, 161, 105, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* 容器背景 */
+.container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 输入区域背景 */
+.input-section {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(104, 211, 145, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.input-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #48bb78, #68d391, #9ae6b4);
+}
+
+/* 配色方案卡片背景 */
+.palette {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(104, 211, 145, 0.15);
+    position: relative;
+    overflow: hidden;
+}
+
+.palette::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #68d391, transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.palette:hover::before {
+    opacity: 1;
+}
+
+/* 颜色信息背景 */
+.color-info {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(104, 211, 145, 0.2);
+}
+
+/* 颜色项背景 */
+.color-item {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(104, 211, 145, 0.15);
+    position: relative;
+}
+
+.color-item::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 48%, rgba(104, 211, 145, 0.05) 50%, transparent 52%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.color-item:hover::after {
+    opacity: 1;
+}
+
+/* 颜色详情背景 */
+.color-detail {
+    background: rgba(104, 211, 145, 0.08);
+    border: 1px solid rgba(104, 211, 145, 0.1);
+    position: relative;
+}
+
+.color-detail::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
+    pointer-events: none;
+}
+
+/* 按钮背景 */
+.generate-btn {
+    background: linear-gradient(135deg, #48bb78 0%, #68d391 50%, #9ae6b4 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.generate-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;
+}
+
+.generate-btn:hover::before {
+    left: 100%;
+}
+
+/* 加载动画背景 */
+.loading {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    border: 1px solid rgba(104, 211, 145, 0.2);
+}
+
+/* 响应式背景调整 */
+@media (max-width: 768px) {
+    body {
+        background: linear-gradient(180deg, #f0fff4 0%, #e6fffa 100%);
+    }
+    
+    .container {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(5px);
+    }
+    
+    .input-section,
+    .palette,
+    .color-info {
+        backdrop-filter: blur(10px);
+    }
+}
+
+@media (max-width: 480px) {
+    body::before {
+        background-image: 
+            radial-gradient(circle at 50% 50%, rgba(104, 211, 145, 0.08) 0%, transparent 70%);
+    }
+    
+    .container {
+        background: transparent;
+        backdrop-filter: none;
+        border: none;
+    }
+}

InfoGenie-frontend/public/60sapi/实用功能/配色方案/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>配色方案生成器</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="background.css">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>配色方案生成器</h1>
+            <p class="subtitle">输入颜色值，获取专业的配色方案</p>
+        </header>
+
+        <main class="main-content">
+            <section class="input-section">
+                <div class="color-input-group">
+                    <label for="colorInput">颜色值</label>
+                    <div class="input-wrapper">
+                        <input type="text" id="colorInput" placeholder="#33AAFF" value="#DE4F99">
+                        <input type="color" id="colorPicker" value="#DE4F99">
+                    </div>
+                </div>
+                
+                <div class="format-select">
+                    <label for="formatSelect">输出格式</label>
+                    <select id="formatSelect">
+                        <option value="json">JSON</option>
+                        <option value="text">文本</option>
+                        <option value="html">HTML</option>
+                    </select>
+                </div>
+
+                <button id="generateBtn" class="generate-btn">生成配色方案</button>
+            </section>
+
+            <section class="result-section" id="resultSection">
+                <div class="loading" id="loading" style="display: none;">
+                    <div class="spinner"></div>
+                    <p>正在生成配色方案...</p>
+                </div>
+
+                <div class="color-info" id="colorInfo" style="display: none;">
+                    <h3>输入颜色信息</h3>
+                    <div class="color-preview" id="colorPreview"></div>
+                    <div class="color-details" id="colorDetails"></div>
+                </div>
+
+                <div class="palettes-container" id="palettesContainer">
+                    <!-- 配色方案将在这里动态生成 -->
+                </div>
+            </section>
+        </main>
+
+        <footer class="footer">
+            <p>基于色彩理论的专业配色方案生成</p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

InfoGenie-frontend/public/60sapi/实用功能/配色方案/script.js

@@ -0,0 +1,315 @@
+// 配色方案生成器 JavaScript
+class ColorPaletteGenerator {
+    constructor() {
+        this.apiUrl = 'https://60s.api.shumengya.top/v2/color/palette';
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.loadDefaultPalette();
+    }
+
+    bindEvents() {
+        const colorInput = document.getElementById('colorInput');
+        const colorPicker = document.getElementById('colorPicker');
+        const generateBtn = document.getElementById('generateBtn');
+        const formatSelect = document.getElementById('formatSelect');
+
+        // 颜色输入框事件
+        colorInput.addEventListener('input', (e) => {
+            const color = e.target.value;
+            if (this.isValidColor(color)) {
+                colorPicker.value = color;
+            }
+        });
+
+        // 颜色选择器事件
+        colorPicker.addEventListener('change', (e) => {
+            colorInput.value = e.target.value;
+        });
+
+        // 生成按钮事件
+        generateBtn.addEventListener('click', () => {
+            this.generatePalette();
+        });
+
+        // 回车键生成
+        colorInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.generatePalette();
+            }
+        });
+
+        // 格式选择事件
+        formatSelect.addEventListener('change', () => {
+            const currentColor = colorInput.value;
+            if (currentColor && this.isValidColor(currentColor)) {
+                this.generatePalette();
+            }
+        });
+    }
+
+    // 验证颜色格式
+    isValidColor(color) {
+        const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        return hexRegex.test(color);
+    }
+
+    // 显示加载状态
+    showLoading() {
+        const loading = document.getElementById('loading');
+        const colorInfo = document.getElementById('colorInfo');
+        const palettesContainer = document.getElementById('palettesContainer');
+        
+        loading.style.display = 'block';
+        colorInfo.style.display = 'none';
+        palettesContainer.innerHTML = '';
+    }
+
+    // 隐藏加载状态
+    hideLoading() {
+        const loading = document.getElementById('loading');
+        loading.style.display = 'none';
+    }
+
+    // 生成配色方案
+    async generatePalette() {
+        const colorInput = document.getElementById('colorInput');
+        const formatSelect = document.getElementById('formatSelect');
+        const color = colorInput.value.trim();
+        const format = formatSelect.value;
+
+        if (!color) {
+            this.showError('请输入颜色值');
+            return;
+        }
+
+        if (!this.isValidColor(color)) {
+            this.showError('请输入有效的十六进制颜色值（如：#33AAFF）');
+            return;
+        }
+
+        this.showLoading();
+
+        try {
+            const url = new URL(this.apiUrl);
+            url.searchParams.append('color', color);
+            url.searchParams.append('encoding', format);
+
+            const response = await fetch(url);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            
+            if (data.code === 200) {
+                this.displayResults(data.data);
+            } else {
+                throw new Error(data.message || '获取配色方案失败');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            this.showError('获取配色方案失败，请检查网络连接或稍后重试');
+        } finally {
+            this.hideLoading();
+        }
+    }
+
+    // 显示错误信息
+    showError(message) {
+        const palettesContainer = document.getElementById('palettesContainer');
+        palettesContainer.innerHTML = `
+            <div class="error-message" style="
+                background: rgba(254, 226, 226, 0.9);
+                border: 1px solid #feb2b2;
+                color: #c53030;
+                padding: 20px;
+                border-radius: 8px;
+                text-align: center;
+                font-weight: 500;
+            ">
+                <p>❌ ${message}</p>
+            </div>
+        `;
+    }
+
+    // 显示结果
+    displayResults(data) {
+        this.displayColorInfo(data.input);
+        this.displayPalettes(data.palettes);
+    }
+
+    // 显示颜色信息
+    displayColorInfo(inputData) {
+        const colorInfo = document.getElementById('colorInfo');
+        const colorPreview = document.getElementById('colorPreview');
+        const colorDetails = document.getElementById('colorDetails');
+
+        colorPreview.style.backgroundColor = inputData.hex;
+        
+        colorDetails.innerHTML = `
+            <div class="color-detail">
+                <strong>HEX</strong>
+                <span>${inputData.hex}</span>
+            </div>
+            <div class="color-detail">
+                <strong>RGB</strong>
+                <span>rgb(${inputData.rgb.r}, ${inputData.rgb.g}, ${inputData.rgb.b})</span>
+            </div>
+            <div class="color-detail">
+                <strong>HSL</strong>
+                <span>hsl(${inputData.hsl.h}°, ${inputData.hsl.s}%, ${inputData.hsl.l}%)</span>
+            </div>
+            <div class="color-detail">
+                <strong>色系</strong>
+                <span>${inputData.name}</span>
+            </div>
+        `;
+
+        colorInfo.style.display = 'block';
+    }
+
+    // 显示配色方案
+    displayPalettes(palettes) {
+        const palettesContainer = document.getElementById('palettesContainer');
+        
+        palettesContainer.innerHTML = palettes.map(palette => `
+            <div class="palette">
+                <div class="palette-header">
+                    <h3 class="palette-name">${palette.name}</h3>
+                    <p class="palette-description">${palette.description}</p>
+                </div>
+                <div class="colors-grid">
+                    ${palette.colors.map(color => `
+                        <div class="color-item">
+                            <div class="color-swatch" 
+                                 style="background-color: ${color.hex}" 
+                                 onclick="copyToClipboard('${color.hex}')"
+                                 title="点击复制 ${color.hex}">
+                            </div>
+                            <div class="color-name">${color.name}</div>
+                            <div class="color-hex">${color.hex}</div>
+                            <div class="color-role">${color.role} • ${color.theory}</div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `).join('');
+    }
+
+    // 加载默认配色方案
+    async loadDefaultPalette() {
+        const colorInput = document.getElementById('colorInput');
+        const defaultColor = colorInput.value;
+        
+        if (defaultColor && this.isValidColor(defaultColor)) {
+            await this.generatePalette();
+        }
+    }
+}
+
+// 复制到剪贴板功能
+function copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(() => {
+            showToast(`已复制 ${text} 到剪贴板`);
+        }).catch(err => {
+            console.error('复制失败:', err);
+            fallbackCopyTextToClipboard(text);
+        });
+    } else {
+        fallbackCopyTextToClipboard(text);
+    }
+}
+
+// 备用复制方法
+function fallbackCopyTextToClipboard(text) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    
+    try {
+        document.execCommand('copy');
+        showToast(`已复制 ${text} 到剪贴板`);
+    } catch (err) {
+        console.error('复制失败:', err);
+        showToast('复制失败，请手动复制');
+    }
+    
+    document.body.removeChild(textArea);
+}
+
+// 显示提示信息
+function showToast(message) {
+    // 移除已存在的toast
+    const existingToast = document.querySelector('.toast');
+    if (existingToast) {
+        existingToast.remove();
+    }
+
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.textContent = message;
+    toast.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: rgba(45, 90, 39, 0.95);
+        color: white;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        z-index: 10000;
+        box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        backdrop-filter: blur(10px);
+    `;
+
+    document.body.appendChild(toast);
+
+    // 动画显示
+    setTimeout(() => {
+        toast.style.transform = 'translateX(0)';
+    }, 100);
+
+    // 3秒后隐藏
+    setTimeout(() => {
+        toast.style.transform = 'translateX(100%)';
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 300);
+    }, 3000);
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', () => {
+    new ColorPaletteGenerator();
+});
+
+// 添加移动端优化
+if ('ontouchstart' in window) {
+    // 移动端触摸优化
+    document.addEventListener('touchstart', function() {}, {passive: true});
+    
+    // 防止双击缩放
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', function (event) {
+        const now = (new Date()).getTime();
+        if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+        }
+        lastTouchEnd = now;
+    }, false);
+}

InfoGenie-frontend/public/60sapi/实用功能/配色方案/styles.css

@@ -0,0 +1,422 @@
+/* 基础样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    line-height: 1.6;
+    color: #2d3748;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 头部样式 */
+.header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 30px 0;
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    color: #2d5a27;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    color: #68d391;
+    font-weight: 400;
+}
+
+/* 主内容区域 */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+/* 输入区域 */
+.input-section {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 30px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(45, 90, 39, 0.1);
+    border: 1px solid rgba(104, 211, 145, 0.2);
+}
+
+.color-input-group {
+    margin-bottom: 20px;
+}
+
+.color-input-group label,
+.format-select label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #2d5a27;
+    font-size: 0.95rem;
+}
+
+.input-wrapper {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+#colorInput {
+    flex: 1;
+    padding: 12px 16px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: white;
+}
+
+#colorInput:focus {
+    outline: none;
+    border-color: #68d391;
+    box-shadow: 0 0 0 3px rgba(104, 211, 145, 0.1);
+}
+
+#colorPicker {
+    width: 50px;
+    height: 44px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    cursor: pointer;
+    background: none;
+}
+
+.format-select {
+    margin-bottom: 25px;
+}
+
+#formatSelect {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 1rem;
+    background: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+#formatSelect:focus {
+    outline: none;
+    border-color: #68d391;
+    box-shadow: 0 0 0 3px rgba(104, 211, 145, 0.1);
+}
+
+.generate-btn {
+    width: 100%;
+    padding: 14px 24px;
+    background: linear-gradient(135deg, #48bb78, #68d391);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
+}
+
+.generate-btn:hover {
+    background: linear-gradient(135deg, #38a169, #48bb78);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
+}
+
+.generate-btn:active {
+    transform: translateY(0);
+}
+
+/* 结果区域 */
+.result-section {
+    min-height: 200px;
+}
+
+.loading {
+    text-align: center;
+    padding: 40px;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e2e8f0;
+    border-top: 4px solid #68d391;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading p {
+    color: #68d391;
+    font-weight: 500;
+}
+
+/* 颜色信息 */
+.color-info {
+    background: rgba(255, 255, 255, 0.9);
+    padding: 25px;
+    border-radius: 12px;
+    margin-bottom: 25px;
+    box-shadow: 0 2px 10px rgba(45, 90, 39, 0.1);
+    border: 1px solid rgba(104, 211, 145, 0.2);
+}
+
+.color-info h3 {
+    color: #2d5a27;
+    margin-bottom: 15px;
+    font-size: 1.3rem;
+}
+
+.color-preview {
+    width: 100%;
+    height: 60px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border: 2px solid rgba(104, 211, 145, 0.3);
+}
+
+.color-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 15px;
+}
+
+.color-detail {
+    text-align: center;
+    padding: 10px;
+    background: rgba(104, 211, 145, 0.1);
+    border-radius: 6px;
+}
+
+.color-detail strong {
+    display: block;
+    color: #2d5a27;
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+}
+
+.color-detail span {
+    color: #4a5568;
+    font-size: 0.95rem;
+}
+
+/* 配色方案容器 */
+.palettes-container {
+    display: grid;
+    gap: 25px;
+}
+
+.palette {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: 0 4px 15px rgba(45, 90, 39, 0.1);
+    border: 1px solid rgba(104, 211, 145, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.palette:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(45, 90, 39, 0.15);
+}
+
+.palette-header {
+    margin-bottom: 20px;
+}
+
+.palette-name {
+    font-size: 1.4rem;
+    color: #2d5a27;
+    margin-bottom: 8px;
+    font-weight: 600;
+}
+
+.palette-description {
+    color: #68d391;
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.colors-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+
+.color-item {
+    background: white;
+    border-radius: 8px;
+    padding: 15px;
+    border: 1px solid rgba(104, 211, 145, 0.2);
+    transition: all 0.3s ease;
+}
+
+.color-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.1);
+}
+
+.color-swatch {
+    width: 100%;
+    height: 50px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.color-swatch::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.color-swatch:hover::after {
+    opacity: 1;
+}
+
+.color-name {
+    font-weight: 600;
+    color: #2d5a27;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+}
+
+.color-hex {
+    font-family: 'Courier New', monospace;
+    color: #4a5568;
+    font-size: 0.85rem;
+    margin-bottom: 3px;
+}
+
+.color-role {
+    font-size: 0.8rem;
+    color: #68d391;
+    font-style: italic;
+}
+
+/* 底部 */
+.footer {
+    text-align: center;
+    padding: 30px 0;
+    margin-top: 40px;
+    color: #68d391;
+    font-size: 0.9rem;
+}
+
+/* 平板端适配 */
+@media (max-width: 1024px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .header h1 {
+        font-size: 2.2rem;
+    }
+    
+    .colors-grid {
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    }
+}
+
+/* 手机端适配 */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .header {
+        margin-bottom: 25px;
+        padding: 20px 0;
+    }
+    
+    .header h1 {
+        font-size: 1.8rem;
+    }
+    
+    .subtitle {
+        font-size: 1rem;
+    }
+    
+    .input-section {
+        padding: 20px;
+    }
+    
+    .input-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    #colorPicker {
+        width: 100%;
+        height: 44px;
+    }
+    
+    .colors-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .color-details {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .palette {
+        padding: 20px;
+    }
+    
+    .palette-name {
+        font-size: 1.2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.6rem;
+    }
+    
+    .input-section {
+        padding: 15px;
+    }
+    
+    .palette {
+        padding: 15px;
+    }
+    
+    .color-details {
+        grid-template-columns: 1fr;
+    }
+}

InfoGenie-frontend/public/60sapi/实用功能/配色方案/返回接口.json

@@ -0,0 +1,273 @@
+{
+  "code": 200,
+  "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
+  "data": {
+    "input": {
+      "hex": "#DE4F99",
+      "rgb": {
+        "r": 222,
+        "g": 79,
+        "b": 153
+      },
+      "hsl": {
+        "h": 329,
+        "s": 68,
+        "l": 59
+      },
+      "name": "红色系"
+    },
+    "palettes": [
+      {
+        "name": "单色配色",
+        "description": "基于同一色相，通过调整明度和饱和度创建的和谐配色方案，适合营造统一、专业的视觉效果",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#7C184C",
+            "name": "深色变体",
+            "role": "dark",
+            "theory": "降低明度"
+          },
+          {
+            "hex": "#EEA5CB",
+            "name": "浅色变体",
+            "role": "light",
+            "theory": "提高明度"
+          },
+          {
+            "hex": "#C96498",
+            "name": "柔和变体",
+            "role": "muted",
+            "theory": "降低饱和度"
+          },
+          {
+            "hex": "#ED4099",
+            "name": "鲜艳变体",
+            "role": "vibrant",
+            "theory": "提高饱和度"
+          }
+        ]
+      },
+      {
+        "name": "互补配色",
+        "description": "使用色轮上相对的颜色，创造强烈对比和视觉冲击力，适用于需要突出重点的设计",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#4FDE94",
+            "name": "互补色",
+            "role": "complementary",
+            "theory": "色轮对面 +180°"
+          },
+          {
+            "hex": "#F2BAD7",
+            "name": "主色浅调",
+            "role": "primary-light",
+            "theory": "主色提高明度"
+          },
+          {
+            "hex": "#BAF2D5",
+            "name": "互补色浅调",
+            "role": "complementary-light",
+            "theory": "互补色提高明度"
+          }
+        ]
+      },
+      {
+        "name": "邻近配色",
+        "description": "使用色轮上相邻的颜色，创造自然和谐的渐变效果，常见于自然景观中",
+        "colors": [
+          {
+            "hex": "#DB4FDE",
+            "name": "邻近色1",
+            "role": "analogous-1",
+            "theory": "色相 -30°"
+          },
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#DE4F52",
+            "name": "邻近色2",
+            "role": "analogous-2",
+            "theory": "色相 +30°"
+          },
+          {
+            "hex": "#DE944F",
+            "name": "邻近色3",
+            "role": "analogous-3",
+            "theory": "色相 +60°"
+          }
+        ]
+      },
+      {
+        "name": "三角配色",
+        "description": "在色轮上形成等边三角形的三种颜色，提供丰富对比的同时保持和谐平衡",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#99DE4F",
+            "name": "三角色1",
+            "role": "triadic-1",
+            "theory": "色相 +120°"
+          },
+          {
+            "hex": "#4F99DE",
+            "name": "三角色2",
+            "role": "triadic-2",
+            "theory": "色相 +240°"
+          }
+        ]
+      },
+      {
+        "name": "分裂互补配色",
+        "description": "使用互补色两侧的颜色，比纯互补配色更柔和，同时保持强烈的视觉对比",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#52DE4F",
+            "name": "分裂互补色1",
+            "role": "split-comp-1",
+            "theory": "互补色 -30°"
+          },
+          {
+            "hex": "#4FDEDB",
+            "name": "分裂互补色2",
+            "role": "split-comp-2",
+            "theory": "互补色 +30°"
+          }
+        ]
+      },
+      {
+        "name": "四边形配色",
+        "description": "在色轮上形成正方形的四种颜色，提供最丰富的颜色变化，适合复杂的设计项目",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主色",
+            "role": "primary",
+            "theory": "基础色相"
+          },
+          {
+            "hex": "#DEDB4F",
+            "name": "四边形色1",
+            "role": "square-1",
+            "theory": "色相 +90°"
+          },
+          {
+            "hex": "#4FDE94",
+            "name": "四边形色2",
+            "role": "square-2",
+            "theory": "色相 +180°"
+          },
+          {
+            "hex": "#4F52DE",
+            "name": "四边形色3",
+            "role": "square-3",
+            "theory": "色相 +270°"
+          }
+        ]
+      },
+      {
+        "name": "Web 设计配色",
+        "description": "专为 Web 界面设计优化的配色方案，考虑了可访问性和用户体验",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "品牌主色",
+            "role": "brand-primary",
+            "theory": "品牌识别色"
+          },
+          {
+            "hex": "#982F65",
+            "name": "按钮悬停",
+            "role": "hover-state",
+            "theory": "主色加深变体"
+          },
+          {
+            "hex": "#F6E9F0",
+            "name": "背景浅色",
+            "role": "background",
+            "theory": "高明度低饱和度"
+          },
+          {
+            "hex": "#1BDE7A",
+            "name": "强调色",
+            "role": "accent",
+            "theory": "互补色系强调"
+          },
+          {
+            "hex": "#6B7280",
+            "name": "文本辅助",
+            "role": "text-secondary",
+            "theory": "中性灰色文本"
+          }
+        ]
+      },
+      {
+        "name": "暖色调配色",
+        "description": "基于暖色系的配色方案，营造温暖、活力和友好的氛围，适合餐饮、儿童产品等",
+        "colors": [
+          {
+            "hex": "#DE4F99",
+            "name": "主暖色",
+            "role": "warm-primary",
+            "theory": "暖色系基调"
+          },
+          {
+            "hex": "#DE4FC8",
+            "name": "暖色变体1",
+            "role": "warm-variant-1",
+            "theory": "暖色范围内调整"
+          },
+          {
+            "hex": "#DE4F5E",
+            "name": "暖色变体2",
+            "role": "warm-variant-2",
+            "theory": "暖色范围内调整"
+          },
+          {
+            "hex": "#EEA5CB",
+            "name": "暖色浅调",
+            "role": "warm-tint",
+            "theory": "提高明度的暖色"
+          }
+        ]
+      }
+    ],
+    "metadata": {
+      "color_theory": "基于色彩理论生成的专业配色方案",
+      "total_palettes": 8,
+      "applications": [
+        "Web 设计",
+        "UI/UX",
+        "品牌设计",
+        "室内设计",
+        "服装搭配"
+      ]
+    }
+  }
+}