temu-create-goods/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>商品信息生成器</title>
    <style>
        body { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; }
        .container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        textarea { width: 100%; height: 300px; margin: 10px 0; }
        button { padding: 10px 20px; margin: 10px 0; }
        .error { color: red; }
        .field-info {
            background: #f5f5f5;
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>商品信息生成器</h1>

    <div class="container">
        <div>
            <h2>1. 输入样例JSON创建模板</h2>
            <textarea id="sampleJson" placeholder="粘贴示例商品JSON..."></textarea>
            <button onclick="generateTemplate()">生成模板</button>
            <div id="templateError" class="error"></div>
        </div>

        <div>
            <h2>2. 生成的模板和Schema</h2>
            <textarea id="template" readonly></textarea>
            <h3>Schema定义：</h3>
            <div id="schemaDisplay"></div>
        </div>

        <div>
            <h2>3. 输入新商品数据</h2>
            <textarea id="productData" placeholder="输入要替换的数据，每行一个值..."></textarea>
            <button onclick="generateProduct()">生成商品信息</button>
            <div id="productError" class="error"></div>
        </div>

        <div>
            <h2>4. 生成的商品信息</h2>
            <textarea id="output" readonly></textarea>
        </div>
    </div>

    <script>
        let currentTemplate = null;
        let templateFields = [];
        let schemaInfo = {};

        function generateTemplate() {
            const sampleJson = document.getElementById('sampleJson').value;
            const templateError = document.getElementById('templateError');

            try {
                const sample = JSON.parse(sampleJson);
                currentTemplate = sample;
                templateFields = extractFields(sample);
                generateSchema(sample);

                document.getElementById('template').value = JSON.stringify(sample, null, 2);
                displaySchema();
                templateError.textContent = `模板已生成，需要填充的字段：\n${templateFields.join(', ')}`;
                templateError.style.color = 'green';
            } catch (e) {
                templateError.textContent = '无效的JSON格式';
                templateError.style.color = 'red';
            }
        }

        function extractFields(obj, prefix = '', fields = []) {
            for (let key in obj) {
                const value = obj[key];
                const fullPath = prefix ? `${prefix}.${key}` : key;

                if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
                    fields.push(value.slice(2, -2).trim());
                } else if (typeof value === 'object' && value !== null) {
                    extractFields(value, fullPath, fields);
                }
            }
            return fields;
        }

        function generateSchema(obj, path = '') {
            for (let key in obj) {
                const value = obj[key];
                const currentPath = path ? `${path}.${key}` : key;

                if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
                    const fieldName = value.slice(2, -2).trim();
                    schemaInfo[fieldName] = {
                        path: currentPath,
                        type: inferType(key),
                        description: `${key}的值`
                    };
                } else if (typeof value === 'object' && value !== null) {
                    generateSchema(value, currentPath);
                }
            }
        }

        function inferType(key) {
            const pricePattern = /(price|费用|价格|金额)/i;
            const numberPattern = /(count|数量|个数|数字|number)/i;
            const datePattern = /(date|时间|日期)/i;

            if (pricePattern.test(key)) return 'price';
            if (numberPattern.test(key)) return 'number';
            if (datePattern.test(key)) return 'date';
            return 'string';
        }

        function displaySchema() {
            const schemaDisplay = document.getElementById('schemaDisplay');
            schemaDisplay.innerHTML = '';

            for (const [field, info] of Object.entries(schemaInfo)) {
                const fieldDiv = document.createElement('div');
                fieldDiv.className = 'field-info';
                fieldDiv.innerHTML = `
                    <strong>字段名：</strong> ${field}<br>
                    <strong>路径：</strong> ${info.path}<br>
                    <strong>类型：</strong> ${info.type}<br>
                    <strong>描述：</strong> ${info.description}
                `;
                schemaDisplay.appendChild(fieldDiv);
            }
        }

        function generateProduct() {
            if (!currentTemplate) {
                document.getElementById('productError').textContent = '请先生成模板';
                return;
            }

            const productData = document.getElementById('productData').value;
            const values = productData.trim().split('\n');

            if (values.length !== templateFields.length) {
                document.getElementById('productError').textContent =
                    `需要 ${templateFields.length} 个值，但提供了 ${values.length} 个`;
                return;
            }

            const fieldValues = {};
            templateFields.forEach((field, index) => {
                fieldValues[field] = values[index];
            });

            const result = JSON.parse(JSON.stringify(currentTemplate));
            fillTemplate(result, fieldValues);

            document.getElementById('output').value = JSON.stringify(result, null, 2);
            document.getElementById('productError').textContent = '商品信息已生成';
            document.getElementById('productError').style.color = 'green';
        }

        function fillTemplate(obj, values) {
            for (let key in obj) {
                const value = obj[key];
                if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
                    const field = value.slice(2, -2).trim();
                    obj[key] = values[field];
                } else if (typeof value === 'object' && value !== null) {
                    fillTemplate(value, values);
                }
            }
        }
    </script>
</body>
</html>