接口文档

接口名称

生成页面代码接口

接口地址

https://admin.scriptecho.cn/api/ai/chat/genPageComplete

请求方式

POST

请求头

请求体

{
    "projectId": "eb63b8d99d391c3eea858f3b2894f1e8",
    "prompt": "",
    "imgPrompt": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA40AAAQoCAYAAACuIjvqAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEAAACxABrSO9dQAAIABJhHfeOo7PfO4TEuSMlIgv4HDoq1YIAvEmjSxyoYXxm8xoHHPh7XuteLxyHTak2JEUNPaw4P+RErECWQsIjVk3j8oRIECAAAECBAgQIEAgrYDQmNZf6QQIECBAgAABAgQIEMhaQGjMunlUjgABAgQIECBAgAABAmkFhMa0/konQIAAAQIECBAgQIBA1gJCY9bNo3IECBAgQIAAAQIECBBIK/A/2oCLBCThvYsAAAAASUVORK5CYII=",
    "pageTitle": "TestPage1",
    "pageCode": "Tb891",
    "modelName": "gpt-4o-mini"
}

请求参数说明

响应示例

{
    "success": true,
    "message": "",
    "code": 200,
    "result": {
        "blockId": "d6fe14d885e4482d802d30a9ca593fec",
        "code": "<template>\n<div class=\"container mx-auto p-4\">\n  <div class=\"grid grid-cols-12 gap-4\">\n    <div class=\"col-start-1 col-span-8 row-start-1 row-span-4 bg-gray-200 shadow\">        <BlockStatus id=\"4bdadd58a5624ce48e03fd3a846a5b4e\" class=\"script-echo-block\" status=\"loading\" />\n    </div>\n    <div class=\"col-start-9 col-span-4 row-start-1 row-span-4 bg-gray-200 shadow\">        <BlockStatus id=\"02100a9f13a746c19ce26aadf907fbc0\" class=\"script-echo-block\" status=\"loading\" />\n    </div>\n    <div class=\"col-start-1 col-span-4 row-start-6 row-span-4 bg-gray-200 shadow\">        <BlockStatus id=\"62ec9a5d6d3246b7b0fa65b949da4800\" class=\"script-echo-block\" status=\"loading\" />\n    </div>\n    <div class=\"col-start-5 col-span-8 row-start-6 row-span-4 bg-gray-200 shadow\">        <BlockStatus id=\"d6fe14d885e4482d802d30a9ca593fec\" class=\"script-echo-block\" status=\"loading\" />\n    </div>\n  </div>\n</div></template>\n<script setup>\nimport { ref, h } from 'vue';\n\n</script>\n",
        "blocks": [
            {
                "code": "<template>\n  <div class=\"w-full p-0 m-0 bg-white\">\n    <div class=\"flex justify-between items-center mb-2\">\n      <h3 class=\"text-lg font-medium\">Profit Growth</h3>\n      <div class=\"flex items-center\">\n        <span class=\"text-red-500 font-medium mr-1\">8,550</span>\n        <span class=\"text-red-500\">↓25.36%</span>\n      </div>\n    </div>\n    <div class=\"flex justify-end mb-2\">\n      <div class=\"flex items-center\">\n        <span class=\"inline-block w-3 h-3 rounded-full bg-blue-500 mr-1\"></span>\n        <span class=\"text-xs\">Orders</span>\n        <span class=\"mx-2 inline-block w-3 h-3 rounded-full bg-purple-300\"></span>\n        <span class=\"text-xs\">Sales</span>\n      </div>\n    </div>\n    <div style=\"width: 100%; height: 200px;\">\n        <canvas id=\"myChart\"></canvas>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { onMounted, ref, h } from 'vue';\n\n\nimport { Chart, registerables } from 'chart.js';\n\nChart.register(...registerables);\n\n\nexport default {\n  setup() {\n    onMounted(() => {\n      const ctx = document.getElementById('myChart') as HTMLCanvasElement;\n      const myChart = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],\n          datasets: [{\n            label: 'Orders',\n            data: [10, 50, 35, 28, 38, 78, 32, 10, 50, 60],\n            backgroundColor: 'rgba(147, 197, 253, 0.5)',\n          },\n          {\n            label: 'Sales',\n            data: [28, 28, 35, 10, 4, 58, 8, 38, 28, 68],\n            backgroundColor: 'rgba(216, 191, 216, 0.5)',\n          }],\n        },\n        options: {\n          scales: {\n            y: {\n              beginAtZero: true,\n              max: 80,\n              ticks: {\n                  stepSize: 16,\n              }\n            }\n          },\n          plugins:{\n            legend:{\n                display:false\n            }\n          }\n        }\n      });\n    });\n    return {};\n  },\n};\n</script>\n",
                "name": "ProfitGrowthChart.vue"
            },
            {
                "code": "<template>\n  <div class=\"w-full p-0 m-0 bg-white\">\n    <div class=\"flex justify-between items-center px-4 py-2\">\n      <h2 class=\"text-lg font-medium\">Monthly Earning</h2>\n      <div class=\"flex space-x-2\">\n        <button class=\"bg-indigo-600 text-white px-3 py-1 rounded-md\">Today</button>\n        <button class=\"bg-gray-200 text-gray-700 px-3 py-1 rounded-md\">Week</button>\n        <button class=\"bg-gray-200 text-gray-700 px-3 py-1 rounded-md\">Month</button>\n      </div>\n    </div>\n    <div class=\"p-4\">\n      <div class=\"relative w-full h-[300px]\">\n        <canvas id=\"chart\"></canvas>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"tsx\">\nimport { onMounted, ref, h } from 'vue';\n\n\nimport { Chart, registerables } from 'chart.js';\n\nChart.register(...registerables);\n\nexport default {\n  setup() {\n    const chartData = ref({\n      labels: ['2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '24h'],\n      datasets: [\n        {\n          label: 'Earning',\n          data: [20000, 35000, 30000, 50000, 40000, 55000, 40000, 75000, 30000, 40000, 35000, 60000],\n          borderColor: '#6f42c1',\n          fill: true,\n          backgroundColor: 'rgba(111, 66, 193, 0.1)',\n          tension: 0.4\n        }\n      ]\n    });\n    const chartOptions = ref({\n      responsive: true,\n      scales: {\n        y: {\n          beginAtZero: true,\n          ticks: {\n            callback: function (value, index, values) {\n              return value / 1000 + 'k';\n            }\n          }\n        }\n      }\n    })\n\n    onMounted(() => {\n      const ctx = document.getElementById('chart') as HTMLCanvasElement;\n      new Chart(ctx, {\n        type: 'line',\n        data: chartData.value,\n        options: chartOptions.value\n      });\n    });\n\n    return {\n      chartData,\n      chartOptions\n    }\n  }\n};\n</script>\n\n<style scoped>\n\n</style>\n",
                "name": "MonthlyEarningChart.vue"
            },
            {
                "code": "<template>\n  <div class=\"w-full bg-white p-0 m-0\">\n    <div class=\"flex justify-between items-center px-4 py-2\">\n      <div class=\"text-lg font-medium\">Total Earning</div>\n      <div class=\"text-sm text-gray-500\">(Last) 10 Months</div>\n    </div>\n    <div class=\"flex justify-between items-center px-4 py-2\">\n      <div class=\"text-3xl font-bold text-green-500\">$8550</div>\n      <div class=\"text-sm text-green-500\">个25.36%</div>\n    </div>\n    <div id=\"chart\" class=\"min-h-[300px]\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted, ref, h } from 'vue';\n\n\nimport * as echarts from 'echarts';\n\nonMounted(() => {\n  const chart = echarts.init(document.getElementById('chart'));\n  const option = {\n    xAxis: {\n      type: 'category',\n      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct']\n    },\n    yAxis: {\n      type: 'value',\n      axisLabel: {\n        formatter: '{value}k'\n      }\n    },\n    series: [\n      {\n        data: [20000, 38000, 30000, 45000, 35000, 60000, 55000, 70000, 60000, 80000],\n        type: 'line',\n        lineStyle: {\n          color: '#8000ff'\n        }\n      }\n    ]\n  };\n  chart.setOption(option);\n});\n</script>\n",
                "name": "TotalEarningChart.vue"
            },
            {
                "code": "<template>\n  <div class=\"w-full p-0 m-0 bg-white\">\n    <div class=\"p-4\">\n      <h2 class=\"text-xl font-bold mb-4\">Active User</h2>\n      <div class=\"flex justify-end mb-4\">\n        <v-btn color=\"purple-darken-1\" variant=\"outlined\" class=\"mx-2\">Year</v-btn>\n        <v-btn color=\"purple-darken-1\" variant=\"outlined\" class=\"mx-2\">Week</v-btn>\n        <v-btn color=\"purple-darken-1\" variant=\"outlined\" class=\"mx-2\">Month</v-btn>\n      </div>\n      <v-table>\n        <thead>\n          <tr>\n            <th class=\"text-left\">USERNAME NAME</th>\n            <th class=\"text-left\">COMPANY</th>\n            <th class=\"text-left\">PRODUCT</th>\n            <th class=\"text-left\">REVENUE</th>\n            <th class=\"text-left\">STATUS</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-for=\"user in users\" :key=\"user.name\">\n            <td>\n              <div class=\"flex items-center\">\n                <v-avatar size=\"32\" color=\"grey lighten-2\">\n                  <span class=\"text-base text-gray-800 font-medium\">{{ user.name.charAt(0) }}</span>\n                </v-avatar>\n                <span class=\"ml-2\">{{ user.name }}</span>\n              </div>\n            </td>\n            <td>{{ user.company }}</td>\n            <td>{{ user.product }}</td>\n            <td>{{ user.revenue }}</td>\n            <td>{{ user.status }}</td>\n          </tr>\n        </tbody>\n      </v-table>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, h } from 'vue';\n\n\n\nconst users = ref([\n  { name: 'Robert Clinton', company: 'Samsung', product: 'Smart Phone', revenue: '$38,536', status: 'Done' },\n  { name: 'Michael Johnson', company: 'Asus', product: 'Laptop', revenue: '$20,573', status: 'Done' },\n  { name: 'Daniel White', company: 'Google', product: 'Watch', revenue: '$17,457', status: 'Pending' },\n  { name: 'Chris Barin', company: 'Apple', product: 'Computer', revenue: '$15,354', status: 'Done' },\n  { name: 'Daniel Pink', company: 'Panasonic', product: 'Sunglass', revenue: '$12,354', status: 'Done' },\n]);\n</script>\n",
                "name": "ActiveUserTable.vue"
            }
        ],
        "pageVersionId": "728b9691c05069a61969c5f66c901480",
        "name": "T904.vue",
        "pageId": "9d8980bc902ac147e86d166c9f0b9bc6",
        "blockVersionId": "1111cee83bdd9afa56e52da983c83c54"
    },
    "timestamp": 1740565593908
}

响应参数说明