357 lines
15 KiB
TypeScript
357 lines
15 KiB
TypeScript
import {GeneratedCodeConfig} from '../types'
|
|
|
|
export default {
|
|
promptList: [
|
|
{
|
|
id: '64671b07-32e1-429c-83c1-0a4a17d0ece0',
|
|
name: 'show page',
|
|
des: 'show page',
|
|
imgUrl: 'https://i.ibb.co/Xzxry6n/inula-test.png',
|
|
prompt: `
|
|
Refer to the following code format to output the screenshot code.
|
|
<html>
|
|
<head>
|
|
<title>OpenInula Documentation</title>
|
|
<script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
|
|
<script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
|
|
<script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
|
|
<script src="https://registry.npmmirror.com/dayjs/1.11.10/files/dayjs.min.js"></script>
|
|
<script src="https://registry.npmmirror.com/antd/5.12.2/files/dist/antd.js"></script>
|
|
<script src="https://registry.npmmirror.com/@ant-design/icons/5.2.6/files/dist/index.umd.js"></script>
|
|
<script src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.43/files/dist/pro-components.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.12.2/antd.min.css" />
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#root {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
.sidebar {
|
|
background-color: #2b65d4;
|
|
padding: 20px;
|
|
color: white;
|
|
width: 200px;
|
|
}
|
|
.sidebar h1 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.sidebar ul {
|
|
list-style: none;
|
|
padding: 10px 0;
|
|
margin: 0;
|
|
}
|
|
.sidebar ul li {
|
|
margin: 10px 0;
|
|
}
|
|
.sidebar ul li a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
background-color: white;
|
|
padding: 20px;
|
|
}
|
|
.content .header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.content .header .title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.content .header .breadcrumb {
|
|
margin-left: 10px;
|
|
color: #888;
|
|
}
|
|
.content .header .search-bar {
|
|
margin-left: auto;
|
|
}
|
|
.content .header .search-bar input {
|
|
padding: 5px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.content .title {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
}
|
|
.content .text-section {
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
color: #333;
|
|
}
|
|
.content .code-section {
|
|
background-color: #f5f5f5;
|
|
border-left: 5px solid #e0e0e0;
|
|
padding: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
.content .code-section code {
|
|
font-family: Consolas, monospace;
|
|
}
|
|
.content .heading {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
}
|
|
.content .description {
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
color: #333;
|
|
}
|
|
.content .interface-definition {
|
|
background-color: #f5f5f5;
|
|
border-left: 5px solid #e0e0e0;
|
|
padding: 10px;
|
|
margin: 20px 0;
|
|
font-family: Consolas, monospace;
|
|
}
|
|
.sidebar .theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
}
|
|
.sidebar .theme-toggle svg {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel">
|
|
const {
|
|
Layout,
|
|
Breadcrumb,
|
|
Input,
|
|
Menu,
|
|
Typography,
|
|
Space,
|
|
Card
|
|
} = antd;
|
|
const { HomeOutlined, SearchOutlined, MenuOutlined } = icons;
|
|
const { Title, Text } = Typography;
|
|
|
|
const App = () => {
|
|
return (
|
|
<Layout style={{ height: "100vh" }}>
|
|
<Layout.Sider width={200} style={{ background: "#2b65d4", color: "white" }}>
|
|
<div style={{ padding: "20px", fontSize: "24px", fontWeight: "bold" }}>
|
|
openInula
|
|
</div>
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} style={{ background: "#2b65d4", color: "white" }}>
|
|
<Menu.Item key="1">
|
|
<a href="#">Inula</a>
|
|
</Menu.Item>
|
|
<Menu.Item key="2">
|
|
<a href="#">Inula-X</a>
|
|
</Menu.Item>
|
|
<Menu.Item key="3">
|
|
<a href="#">Inula-intl</a>
|
|
</Menu.Item>
|
|
<Menu.Item key="4">
|
|
<a href="#">Inula-router</a>
|
|
</Menu.Item>
|
|
<Menu.Item key="5">
|
|
<a href="#">Inula-request</a>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Layout.Sider>
|
|
|
|
<Layout>
|
|
<Layout.Content style={{ padding: "20px", background: "white" }}>
|
|
<div style={{ display: "flex", alignItems: "center", borderBottom: "1px solid #f0f0f0", paddingBottom: "10px" }}>
|
|
<Breadcrumb separator=">" style={{ marginLeft: "10px", color: "#888" }}>
|
|
<Breadcrumb.Item href="#"><HomeOutlined /></Breadcrumb.Item>
|
|
<Breadcrumb.Item>Inula-request</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div style={{ marginLeft: "auto" }}>
|
|
<Input prefix={<SearchOutlined />} placeholder="搜索" style={{ width: 200 }} />
|
|
</div>
|
|
</div>
|
|
<Title>Inula-request</Title>
|
|
<Text style={{ fontSize: "16px", color: "#333" }}>欢迎使用 inula-request 请求组件，接下来本文档将对 inula-request API 使用进行一个详细介绍，帮助您更便捷地发送网络请求!</Text>
|
|
<Title level={2} style={{ marginTop: "20px" }}>Inula-request 请求方法引入</Title>
|
|
<Text style={{ fontSize: "16px", color: "#333" }}>方便起见，该文档将使用 ir 别名介绍 inula-request 请求方法，即使用如下方式导入请求组件：</Text>
|
|
<div style={{ backgroundColor: "#f5f5f5", borderLeft: "5px solid #e0e0e0", padding: "10px", margin: "20px 0" }}>
|
|
<code>import ir from 'inula-request';</code>
|
|
</div>
|
|
<Title level={2} style={{ marginTop: "20px" }}>Inula-request 全局 API</Title>
|
|
<Title level={3} style={{ marginTop: "20px" }}>ir(config)</Title>
|
|
<Text style={{ fontSize: "16px", color: "#333" }}>功能介绍</Text>
|
|
<Text style={{ fontSize: "16px", color: "#333" }}>该请求方法为通用请求方法，可以通过配置 config 参数完成多种形式的网络请求，关于 config 具体参数配置将在 参数配置章节 详细介绍。</Text>
|
|
<div style={{ backgroundColor: "#f5f5f5", borderLeft: "5px solid #e0e0e0", padding: "10px", margin: "20px 0", fontFamily: "Consolas, monospace" }}>
|
|
<code>ir<T = unknown>(config: IrRequestConfig): Promise<IrResponse<T>>;</code>
|
|
</div>
|
|
</Layout.Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
`,
|
|
type: GeneratedCodeConfig.REACT_ANTD,
|
|
},
|
|
{
|
|
id: '64671b07-32e1-429c-83c1-0a4a17dkkce0',
|
|
name: 'login form',
|
|
des: 'login form',
|
|
imgUrl: 'https://i.ibb.co/XJtPfqh/195.png',
|
|
prompt: `
|
|
- Refer to example code format to output the screenshot code.
|
|
- Add logical code for operation columns
|
|
- If there is an edit in the operation, add form logic according to the example code
|
|
- If there is a new operator in the screenshot operation column, add it to the output code operation column.
|
|
- Must output code according to the example.
|
|
|
|
<!-- example code -->
|
|
<html>
|
|
<head>
|
|
<title>Ant Design Login Page</title>
|
|
<script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
|
|
<script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
|
|
<script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
|
|
<script src="https://registry.npmmirror.com/dayjs/1.11.10/files/dayjs.min.js"></script>
|
|
<script src="https://registry.npmmirror.com/antd/5.12.2/files/dist/antd.js"></script>
|
|
<script src="https://registry.npmmirror.com/@ant-design/icons/5.2.6/files/dist/index.umd.js"></script>
|
|
<script src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.43/files/dist/pro-components.min.js"></script>
|
|
<style>
|
|
body, html {
|
|
background-color: #f0f2f5;
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
.login-container {
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.login-card {
|
|
width: 320px;
|
|
padding: 45px 35px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
text-align: center;
|
|
}
|
|
.logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.ant-btn {
|
|
width: 100%;
|
|
}
|
|
.bottom-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.other-methods {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
.other-methods img {
|
|
margin: 0 8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
const { Layout, Form, Input, Button, Checkbox, Tabs } = antd;
|
|
const { UserOutlined, LockOutlined, AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } = icons;
|
|
|
|
function App() {
|
|
const onFinish = (values) => {
|
|
console.log('Received values from form: ', values);
|
|
};
|
|
|
|
return (
|
|
<div className="login-container">
|
|
<div className="login-card">
|
|
<img src="https://placehold.co/40x40" alt="Ant Design logo" className="logo"/>
|
|
<h2>Ant Design</h2>
|
|
<p>Ant Design 是西湖区最具影响力的 Web 设计规范</p>
|
|
<Tabs defaultActiveKey="1">
|
|
<Tabs.TabPane tab="账户密码登录" key="1">
|
|
<Form name="login_form" onFinish={onFinish} initialValues={{ remember: true }}>
|
|
<Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
|
|
<Input prefix={<UserOutlined />} placeholder="admin" />
|
|
</Form.Item>
|
|
<Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
|
|
<Input prefix={<LockOutlined />} type="password" placeholder="888888" />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Form.Item name="remember" valuePropName="checked" noStyle>
|
|
<Checkbox>自动登录</Checkbox>
|
|
</Form.Item>
|
|
<a href="" style={{ float: 'right' }}>忘记密码</a>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button type="primary" htmlType="submit">
|
|
登录
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="手机号登录" key="2">
|
|
手机号登录表单
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
<div className="other-methods">
|
|
<AlipayCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
|
|
<TaobaoCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
|
|
<WeiboCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
|
|
</div>
|
|
<a href="">注册账户</a>
|
|
<div className="footer">
|
|
©2017 蚂蚁金服体验技术部出品
|
|
</div>
|
|
<div className="bottom-links">
|
|
<a href="">帮助</a>
|
|
<a href="">隐私</a>
|
|
<a href="">条款</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`,
|
|
type: GeneratedCodeConfig.REACT_ANTD,
|
|
}
|
|
],
|
|
|
|
} |