master

分支 (1)

管理

管理

master

Wetemp
/
segmentation-conforms.html

<!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="css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #fff;
            color: #333;
            line-height: 1.6;
        }

        .container {
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .main-content {
            display: flex;
            flex-wrap: wrap;
        }

        .editor-panel, .preview-panel {
            flex: 1;
            padding: 25px;
        }

        .editor-panel {
            border-right: 1px solid #eaeaea;
            background-color: #fafbfc;
        }

        .panel-title {
            font-size: 20px;
            margin-bottom: 20px;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }

        .panel-title i {
            margin-right: 10px;
            color: #07c160;
        }

        .control-group {
            margin-bottom: 25px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .control-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
        }

        .icon-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .category-btn {
            padding: 8px 15px;
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .category-btn.active {
            background: #07c160;
            color: white;
        }

        .icon-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .icon-option {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.2s;
            background: white;
        }

        .icon-option:hover {
            border-color: #07c160;
            transform: translateY(-2px);
        }

        .icon-option.active {
            border-color: #07c160;
            background-color: #e8f7ee;
        }

        .style-controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .style-control {
            flex: 1;
            min-width: 120px;
        }

        input,select{
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
        }

        .preview-content {
            background: white;
            padding: 0px 5px 0px 5px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .divider {
            text-align: center;
            margin: 25px 0;
            position: relative;
            width: 100%;
        }

        .divider-line {
            height: 1px;
            background-color: #e0e0e0;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
        }

        .divider-content {
            display: inline-block;
            background: white;
            padding: 0 15px;
            position: relative;
            z-index: 1;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eaeaea;
        }

        button {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
        }

        .btn-primary {
            background: #07c160;
            color: white;
        }

        .btn-primary:hover {
            background: #06ae56;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #e0e0e0;
            color: #333;
        }

        .btn-secondary:hover {
            background: #d0d0d0;
        }

        .color-picker {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .color-input {
            width: 50px;
            height: 40px;
            padding: 0;
            border: none;
            cursor: pointer;
        }

        .line-style-options {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .line-style-option {
            flex: 1;
            padding: 8px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .line-style-option:hover {
            border-color: #07c160;
        }

        .line-style-option.active {
            border-color: #07c160;
            background-color: #e8f7ee;
        }

        .line-style-preview {
            height: 4px;
            margin-bottom: 5px;
        }

        .text-input-group {
            margin-top: 15px;
        }

        .text-input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .text-input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
        }

        .text-style-controls {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .text-style-control {
            flex: 1;
        }

        .text-style-control label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .preview-examples {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .example-btn {
            padding: 8px 15px;
            background: #f0f0f0;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .example-btn:hover {
            background: #07c160;
            color: white;
        }

        .main-content {
            max-height: 100vh;
            overflow: hidden;
        }

        .editor-panel {
            max-height: 100vh;
            overflow-y: auto;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="main-content">
            <div class="editor-panel">
                <h2 class="panel-title">
                    <i class="fas fa-sliders-h"></i> 编辑设置
                </h2>

                <div class="control-group">
                    <label class="control-label">选择图标</label>
                    <div class="icon-categories">
                        <button class="category-btn active" data-category="all">全部</button>
                        <button class="category-btn" data-category="solid">实心</button>
                        <button class="category-btn" data-category="regular">空心</button>
                        <button class="category-btn" data-category="shapes">形状</button>
                    </div>

                    <div class="icon-grid" id="icon-grid">
                        <!-- 图标将通过JavaScript动态生成 -->
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">文字内容</label>
                    <div class="text-input-group">
                        <input type="text" id="divider-text" placeholder="输入分隔符文字内容（可选）">
                    </div>

                    <div class="text-style-controls">
                        <div class="text-style-control">
                            <label>文字颜色</label>
                            <div class="color-picker">
                                <input type="color" class="color-input" id="text-color" value="#07c160">
                                <span id="text-color-value">#07c160</span>
                            </div>
                        </div>

                        <div class="text-style-control">
                            <label>文字大小</label>
                            <select id="text-size">
                                <option value="14px">小</option>
                                <option value="16px" selected>中</option>
                                <option value="18px">大</option>
                                <option value="20px">特大</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">图标样式设置</label>
                    <div class="style-controls">
                        <div class="style-control">
                            <label>图标颜色</label>
                            <div class="color-picker">
                                <input type="color" class="color-input" id="icon-color" value="#07c160">
                                <span id="color-value">#07c160</span>
                            </div>
                        </div>

                        <div class="style-control">
                            <label>图标大小</label>
                            <select id="icon-size">
                                <option value="16px">小</option>
                                <option value="20px" selected>中</option>
                                <option value="24px">大</option>
                                <option value="28px">特大</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">线条样式设置</label>
                    <div class="style-controls">
                        <div class="style-control">
                            <label>线条颜色</label>
                            <div class="color-picker">
                                <input type="color" class="color-input" id="line-color" value="#e0e0e0">
                                <span id="line-color-value">#e0e0e0</span>
                            </div>
                        </div>

                        <div class="style-control">
                            <label>线条粗细</label>
                            <select id="line-width">
                                <option value="1px">细</option>
                                <option value="2px" selected>中等</option>
                                <option value="3px">粗</option>
                                <option value="4px">特粗</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-label" style="margin-top: 15px;">线条样式</div>
                    <div class="line-style-options">
                        <div class="line-style-option active" data-style="solid">
                            <div class="line-style-preview" style="border-bottom: 2px solid #e0e0e0;"></div>
                            <span>实线</span>
                        </div>
                        <div class="line-style-option" data-style="dashed">
                            <div class="line-style-preview" style="border-bottom: 2px dashed #e0e0e0;"></div>
                            <span>虚线</span>
                        </div>
                        <div class="line-style-option" data-style="dotted">
                            <div class="line-style-preview" style="border-bottom: 2px dotted #e0e0e0;"></div>
                            <span>点线</span>
                        </div>
                        <div class="line-style-option" data-style="double">
                            <div class="line-style-preview" style="border-bottom: 6px double #e0e0e0;"></div>
                            <span>双线</span>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">快速示例</label>
                    <div class="preview-examples">
                        <button class="example-btn" data-example="wechat">微信风格</button>
                        <button class="example-btn" data-example="minimal">简约风格</button>
                        <button class="example-btn" data-example="elegant">优雅风格</button>
                        <button class="example-btn" data-example="colorful">多彩风格</button>
                    </div>
                </div>
            </div>

            <div class="preview-panel">
                <h2 class="panel-title">
                    <i class="fas fa-eye"></i> 实时预览
                </h2>

                <div class="preview-content" id="preview-content">
                    <!-- 分割线将通过JavaScript动态生成 -->
                </div>

                <div class="actions">
                    <button class="btn-primary" id="generate-image">生成图片</button>
                    <button class="btn-secondary" id="reset-settings">重置设置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入html2canvas库用于生成图片 -->
    <script src="js/html2canvas.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const categoryBtns = document.querySelectorAll('.category-btn');
            const iconGrid = document.getElementById('icon-grid');
            const iconColorInput = document.getElementById('icon-color');
            const colorValue = document.getElementById('color-value');
            const iconSizeSelect = document.getElementById('icon-size');
            const lineColorInput = document.getElementById('line-color');
            const lineColorValue = document.getElementById('line-color-value');
            const lineWidthSelect = document.getElementById('line-width');
            const lineStyleOptions = document.querySelectorAll('.line-style-option');
            const previewContent = document.getElementById('preview-content');
            const generateImageBtn = document.getElementById('generate-image');
            const resetSettingsBtn = document.getElementById('reset-settings');
            const dividerText = document.getElementById('divider-text');
            const textColorInput = document.getElementById('text-color');
            const textColorValue = document.getElementById('text-color-value');
            const textSizeSelect = document.getElementById('text-size');
            const exampleBtns = document.querySelectorAll('.example-btn');

            // 当前选中的图标和线条样式
            let currentIcon = 'fas fa-asterisk';
            let currentCategory = 'all';
            let currentLineStyle = 'solid';

            // Font Awesome 6免费图标示例
            const icons = {
                all: [
                    'fas fa-asterisk', 'fas fa-star', 'fas fa-heart', 'fas fa-circle', 'fas fa-square',
                    'far fa-star', 'far fa-heart', 'far fa-circle', 'far fa-square', 'fas fa-leaf',
                    'fas fa-snowflake', 'fas fa-feather', 'fas fa-gem', 'fas fa-certificate', 'fas fa-bolt',
                    'fas fa-infinity', 'fas fa-atom', 'fas fa-paw', 'fas fa-diamond', 'fas fa-cloud'
                ],
                solid: [
                    'fas fa-asterisk', 'fas fa-star', 'fas fa-heart', 'fas fa-circle', 'fas fa-square',
                    'fas fa-leaf', 'fas fa-snowflake', 'fas fa-feather', 'fas fa-gem', 'fas fa-certificate'
                ],
                regular: [
                    'far fa-star', 'far fa-heart', 'far fa-circle', 'far fa-square', 'far fa-moon',
                    'far fa-sun', 'far fa-flag', 'far fa-bell', 'far fa-bookmark', 'far fa-comment'
                ],
                shapes: [
                    'fas fa-circle', 'fas fa-square', 'fas fa-diamond', 'fas fa-heart', 'fas fa-star',
                    'fas fa-infinity', 'fas fa-asterisk', 'fas fa-certificate', 'fas fa-cloud', 'fas fa-bolt'
                ]
            };

            // 初始化图标网格
            populateIconGrid('all');

            // 初始化预览
            updatePreview();

            // 分类按钮点击事件
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentCategory = this.getAttribute('data-category');
                    populateIconGrid(currentCategory);
                });
            });

            // 图标点击事件
            iconGrid.addEventListener('click', function(e) {
                if (e.target.classList.contains('icon-option') ||
                    e.target.parentElement.classList.contains('icon-option')) {

                    const iconOption = e.target.classList.contains('icon-option') ?
                                      e.target : e.target.parentElement;

                    document.querySelectorAll('.icon-option').forEach(opt => {
                        opt.classList.remove('active');
                    });

                    iconOption.classList.add('active');
                    currentIcon = iconOption.querySelector('i').className;

                    updatePreview();
                }
            });

            // 线条样式选择事件
            lineStyleOptions.forEach(option => {
                option.addEventListener('click', function() {
                    lineStyleOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    currentLineStyle = this.getAttribute('data-style');
                    updatePreview();
                });
            });

            // 颜色选择器事件
            iconColorInput.addEventListener('input', function() {
                colorValue.textContent = this.value;
                updatePreview();
            });

            lineColorInput.addEventListener('input', function() {
                lineColorValue.textContent = this.value;
                updatePreview();
            });

            textColorInput.addEventListener('input', function() {
                textColorValue.textContent = this.value;
                updatePreview();
            });

            // 图标大小选择事件
            iconSizeSelect.addEventListener('change', updatePreview);

            // 文字大小选择事件
            textSizeSelect.addEventListener('change', updatePreview);

            // 线条粗细选择事件
            lineWidthSelect.addEventListener('change', updatePreview);

            // 文字输入事件
            dividerText.addEventListener('input', updatePreview);

            // 示例按钮点击事件
            exampleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const exampleType = this.getAttribute('data-example');
                    applyExample(exampleType);
                });
            });

            // 生成图片按钮事件
            generateImageBtn.addEventListener('click', function() {
                // 使用html2canvas将预览内容转换为图片
                html2canvas(previewContent, {
                    backgroundColor: '#ffffff',
                    scale: 2 // 提高图片质量
                }).then(canvas => {
                    // 创建下载链接
                    const link = document.createElement('a');
                    link.download = '分割符号预览.png';
                    link.href = canvas.toDataURL('image/png');
                    link.click();

                    // 显示成功提示
                    generateImageBtn.textContent = '图片已生成!';
                    setTimeout(() => {
                        generateImageBtn.textContent = '生成图片';
                    }, 2000);
                });
            });

            // 重置设置按钮事件
            resetSettingsBtn.addEventListener('click', function() {
                categoryBtns.forEach(btn => btn.classList.remove('active'));
                document.querySelector('[data-category="all"]').classList.add('active');
                currentCategory = 'all';
                populateIconGrid('all');

                currentIcon = 'fas fa-asterisk';
                iconColorInput.value = '#07c160';
                colorValue.textContent = '#07c160';
                iconSizeSelect.value = '20px';
                lineColorInput.value = '#e0e0e0';
                lineColorValue.textContent = '#e0e0e0';
                lineWidthSelect.value = '2px';

                lineStyleOptions.forEach(opt => opt.classList.remove('active'));
                document.querySelector('[data-style="solid"]').classList.add('active');
                currentLineStyle = 'solid';

                // 重置文字设置
                dividerText.value = '';
                textColorInput.value = '#07c160';
                textColorValue.textContent = '#07c160';
                textSizeSelect.value = '16px';

                updatePreview();
            });

            // 填充图标网格函数
            function populateIconGrid(category) {
                iconGrid.innerHTML = '';

                icons[category].forEach(iconClass => {
                    const iconOption = document.createElement('div');
                    iconOption.className = 'icon-option';
                    if (iconClass === currentIcon) {
                        iconOption.classList.add('active');
                    }

                    iconOption.innerHTML = `<i class="${iconClass}"></i>`;
                    iconGrid.appendChild(iconOption);
                });
            }

            // 应用示例设置函数
            function applyExample(exampleType) {
                switch(exampleType) {
                    case 'wechat':
                        currentIcon = 'fas fa-comment';
                        iconColorInput.value = '#07c160';
                        colorValue.textContent = '#07c160';
                        dividerText.value = '微信风格分隔符';
                        textColorInput.value = '#07c160';
                        textColorValue.textContent = '#07c160';
                        lineColorInput.value = '#e0e0e0';
                        lineColorValue.textContent = '#e0e0e0';
                        currentLineStyle = 'solid';
                        break;

                    case 'minimal':
                        currentIcon = 'fas fa-minus';
                        iconColorInput.value = '#666';
                        colorValue.textContent = '#666';
                        dividerText.value = '';
                        lineColorInput.value = '#ccc';
                        lineColorValue.textContent = '#ccc';
                        currentLineStyle = 'solid';
                        break;

                    case 'elegant':
                        currentIcon = 'fas fa-gem';
                        iconColorInput.value = '#9b59b6';
                        colorValue.textContent = '#9b59b6';
                        dividerText.value = '优雅分隔';
                        textColorInput.value = '#9b59b6';
                        textColorValue.textContent = '#9b59b6';
                        lineColorInput.value = '#d5b8e6';
                        lineColorValue.textContent = '#d5b8e6';
                        currentLineStyle = 'dashed';
                        break;

                    case 'colorful':
                        currentIcon = 'fas fa-palette';
                        iconColorInput.value = '#e74c3c';
                        colorValue.textContent = '#e74c3c';
                        dividerText.value = '多彩分隔';
                        textColorInput.value = '#e74c3c';
                        textColorValue.textContent = '#e74c3c';
                        lineColorInput.value = '#f39c12';
                        lineColorValue.textContent = '#f39c12';
                        currentLineStyle = 'dotted';
                        break;
                }

                // 更新UI
                populateIconGrid(currentCategory);
                lineStyleOptions.forEach(opt => opt.classList.remove('active'));
                document.querySelector(`[data-style="${currentLineStyle}"]`).classList.add('active');

                updatePreview();
            }

            // 更新预览函数
            function updatePreview() {
                // 获取线条样式
                let lineStyle;
                switch(currentLineStyle) {
                    case 'solid':
                        lineStyle = 'solid';
                        break;
                    case 'dashed':
                        lineStyle = 'dashed';
                        break;
                    case 'dotted':
                        lineStyle = 'dotted';
                        break;
                    case 'double':
                        lineStyle = 'double';
                        break;
                    default:
                        lineStyle = 'solid';
                }

                // 生成分割线预览
                const textContent = dividerText.value.trim();
                let contentHTML = '';

                if (textContent) {
                    contentHTML = `
                        <i class="${currentIcon}" style="margin-right: 8px; font-size: ${iconSizeSelect.value}; color: ${iconColorInput.value};"></i>
                        <span style="font-size: ${textSizeSelect.value}; color: ${textColorInput.value};">${textContent}</span>
                    `;
                } else {
                    contentHTML = `<i class="${currentIcon}" style="font-size: ${iconSizeSelect.value}; color: ${iconColorInput.value};"></i>`;
                }

                const previewHTML = `
                <div class="divider">
                    <div class="divider-line" style="background-color: ${lineColorInput.value}; height: ${lineWidthSelect.value}; border: none;"></div>
                    <div class="divider-content" style="color: ${iconColorInput.value};">
                        ${contentHTML}
                    </div>
                </div>`;

                previewContent.innerHTML = previewHTML;

                // 应用线条样式
                const dividerLine = previewContent.querySelector('.divider-line');
                if (currentLineStyle === 'double') {
                    dividerLine.style.background = 'none';
                    dividerLine.style.borderTop = `${parseInt(lineWidthSelect.value)}px ${lineStyle} ${lineColorInput.value}`;
                    dividerLine.style.borderBottom = `${parseInt(lineWidthSelect.value)}px ${lineStyle} ${lineColorInput.value}`;
                    dividerLine.style.height = `${parseInt(lineWidthSelect.value) * 3}px`;
                } else {
                    dividerLine.style.border = 'none';
                    dividerLine.style.background = `${lineColorInput.value}`;
                    dividerLine.style.backgroundImage = `linear-gradient(to right, transparent 0%, ${lineColorInput.value} 20%, ${lineColorInput.value} 80%, transparent 100%)`;

                    if (currentLineStyle === 'dashed') {
                        dividerLine.style.background = `repeating-linear-gradient(to right, ${lineColorInput.value}, ${lineColorInput.value} 5px, transparent 5px, transparent 10px)`;
                    } else if (currentLineStyle === 'dotted') {
                        dividerLine.style.background = `radial-gradient(circle, ${lineColorInput.value} 1px, transparent 1px)`;
                        dividerLine.style.backgroundSize = '10px 100%';
                    }
                }
            }
        });
    </script>
</body>
</html>