当然可以。我们可以通过添加主题选择和布局调整功能来实现这一点。我们将创建几个预定义的主题，并允许用户选择主题和调整布局。以下是如何修改原有的计算器程序来实现这些功能：
- 修改
server.ts:
import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'
import { html } from '@elysiajs/html'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { Calculator } from './components/Calculator'
const app = new Elysia()
.use(staticPlugin())
.use(html())
app.get('/', ({ html }) => {
const calculatorHtml = renderToString(React.createElement(Calculator))
return html(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Calculator</title>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<div id="root">${calculatorHtml}</div>
<script type="text/babel" src="/static/client.js"></script>
</body>
</html>`
)
})
// ... 保留原有的 /calculate 路由和其他代码 ...
app.listen(3000)
console.log('Server is running on http://localhost:3000')- 修改
components/Calculator.tsx:
import React, { useState } from 'react'
const themes = {
light: {
backgroundColor: '#ffffff',
textColor: '#000000',
fontFamily: 'Arial, sans-serif',
},
dark: {
backgroundColor: '#333333',
textColor: '#ffffff',
fontFamily: 'Helvetica, sans-serif',
},
colorful: {
backgroundColor: '#f0f0f0',
textColor: '#ff5733',
fontFamily: 'Georgia, serif',
},
}
export const Calculator: React.FC = () => {
const [operation, setOperation] = useState('')
const [values, setValues] = useState('')
const [result, setResult] = useState<number | null>(null)
const [theme, setTheme] = useState('light')
const [layout, setLayout] = useState('vertical')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
const response = await fetch('/calculate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ operation, values: values.split(',').map(Number) }),
})
const data = await response.json()
setResult(data.result)
}
return (
<div style={{
...themes[theme as keyof typeof themes],
display: 'flex',
flexDirection: layout === 'vertical' ? 'column' : 'row',
padding: '20px',
}}>
<div>
<h1>Complex Calculator</h1>
<form onSubmit={handleSubmit}>
<select value={operation} onChange={(e) => setOperation(e.target.value)}>
<option value="">Select operation</option>
<option value="sin">Sin</option>
<option value="cos">Cos</option>
<option value="tan">Tan</option>
<option value="mean">Mean</option>
<option value="median">Median</option>
</select>
<input
type="text"
value={values}
onChange={(e) => setValues(e.target.value)}
placeholder="Enter values (comma-separated)"
/>
<button type="submit">Calculate</button>
</form>
{result !== null && <p>Result: {result}</p>}
</div>
<div>
<h2>Customize</h2>
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
<option value="colorful">Colorful Theme</option>
</select>
<select value={layout} onChange={(e) => setLayout(e.target.value)}>
<option value="vertical">Vertical Layout</option>
<option value="horizontal">Horizontal Layout</option>
</select>
</div>
</div>
)
}- 创建
static/styles.css:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
select, input, button {
margin: 5px;
padding: 5px;
}
h1, h2 {
margin-top: 0;
}- 修改
static/client.js:
ReactDOM.hydrate(
React.createElement(Calculator),
document.getElementById('root')
)这些修改添加了以下功能：
- 主题选择：用户可以在三个预定义的主题（亮色、暗色、彩色）之间切换。
- 布局调整：用户可以在垂直和水平布局之间切换。
- 样式应用：主题和布局变化会立即反映在页面上。
这个实现使用了 React 的 state 来管理主题和布局选择，并通过内联样式来应用这些选择。你可以根据需要进一步扩展这个功能，比如：
- 添加更多的主题选项
- 允许用户自定义颜色和字体
- 保存用户的主题和布局偏好到本地存储
- 添加更复杂的布局选项
记得更新你的 package.json 文件以包含所有必要的依赖，然后运行 bun install 来安装它们。之后，你可以使用 bun start 来运行这个增强版的计算器应用。