[Feature][SolidUI] Dev0.3.0 Business test List

Search before asking

[X] I had searched in the issues and found no similar feature requirement.

Problem Description

[x] html gen @15100399015

prompt: 提供一个使用D3.js库生成柱状图的HTML代码片段

<DOCTYPE html>
<html>
<head>
    <title>D3.js Bar Chart</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <script>
        var data = [
            {"x": "A", "y": 5},
            {"x": "B", "y": 8},
            {"x": "C", "y": 12},
            {"x": "D", "y": 6},
            {"x": "E", "y": 15},
            {"x": "F", "y": 10}
        ];

        var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 600 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;

        var x = d3.scaleBand()
            .range([0, width])
            .padding(0.1);

        var y = d3.scaleLinear()
            .range([height, 0]);

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        x.domain(data.map(function(d) { return d.x; }));
        y.domain([0, d3.max(data, function(d) { return d.y; })]);

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.x); })
            .attr("width", x.bandwidth())
            .attr("y", function(d) { return y(d.y); })
            .attr("height", function(d) { return height - y(d.y); });

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        svg.append("g")
            .call(d3.axisLeft(y));
    </script>
</body>
</html>

[x] html gen @15100399015

prompt : 提供一个使用echarts库生成柱状图的HTML代码片段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>柱状图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [5, 8, 12, 6, 15, 10],
        type: 'bar'
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

[ ] html 生成不需要轮询solidui/models/api/api 接口 @15100399015

[x] html 生成后，渲染图片成功后，save按钮保存接口/solidui/job/update/page ，得保存html代码 @15100399015

参考生成python code 方式保存

[x] html gen @15100399015 提示词：three.js 生成蓝色背景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blue Background with Three.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
</script>
</body>
</html>

[x] 不要出滚动条，里面内容长和宽，外部边框动态扩展 @15100399015

[x] 边框问题 @15100399015 屏幕录制2023-09-13 下午10.49.52.mov.zip

Description

No response

Use case

No response

Solutions

No response

Anything else

No response

Are you willing to submit a PR?

[ ] Yes I am willing to submit a PR!

CloudOrc / SolidUI

[Feature][SolidUI] Dev0.3.0 Business test List #130

Search before asking

Problem Description

Description

Use case

Solutions

Anything else

Are you willing to submit a PR?