Development
Web 制品构建器
构建交互式 Web 制品和组件。当用户需要自包含的 HTML、React 组件或交互式 Web 元素时使用。
构建交互式 Web 制品和自包含组件。
自包含 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artifact Title</title>
<style>
/* All styles inline */
</style>
</head>
<body>
<!-- Content -->
<script>
// All JavaScript inline
</script>
</body>
</html>
组件结构：
function MyComponent({ prop1, prop2 }) {
const [state, setState] = useState(initialValue);
return (
<div className="container">
{/* Component content */}
</div>
);
}
定义制品：
组件架构：
HTML 制品：
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
padding: 2rem;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
// Interactive logic
</script>
</body>
</html>
React 制品：
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
跨浏览器测试：
性能优化：
<!DOCTYPE html>
<html>
<head>
<style>
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.card {
padding: 1.5rem;
border: 1px solid #e5e5e5;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<div class="dashboard" id="dashboard"></div>
<script>
// Dashboard logic
</script>
</body>
</html>
function Form() {
const [formData, setFormData] = useState({
name: '',
email: ''
});
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
placeholder="Name"
/>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
}