Repository navigation
Expand file tree
/
Copy pathpage.tsx
More file actions
212 lines (207 loc) · 7.26 KB
/
Copy pathpage.tsx
File metadata and controls
212 lines (207 loc) · 7.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
'use client';
import '#/styles/page.scss';
import { useState } from 'react';
import Image from 'next/image';
import Folder from '../public/images/folder.png';
export default function Home() {
const [visible, setVisible] = useState(true);
const [name, setName] = useState('');
const [icon, setIcon] = useState('');
const [link, setLink] = useState('');
const [width, setWidth] = useState('');
const [height, setHeight] = useState('');
const [shortcut, setShortcut] = useState<any[]>([]);
const [header, setHeader] = useState('');
const [fullscreen, setFullscreen] = useState('');
const handleVisible = () => {
setVisible(!visible);
console.log('submit', {
name,
icon,
link,
width,
height,
shortcut,
header,
fullscreen,
});
};
const handleKeyDown = (event: any) => {
if (shortcut.length >= 3) {
return;
}
const { key, keyCode } = event;
setShortcut([...shortcut, { key, keyCode }]);
event.preventDefault();
};
return (
<div className="py-14">
<div className="flex justify-center">
<div
className={`page-form flex-1 ${visible ? '' : 'page-form-compiling'}`}
>
{/* name */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-markup-line"></i>
</div>
<input
type="text"
placeholder="输入应用名称"
value={name}
target: { value } }) => setName(value)}
className="page-input input-bordered input w-full"
/>
</div>
{/* application icon */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-meteor-line"></i>
</div>
<input
type="text"
placeholder="上传应用图标"
value={icon}
target: { value } }) => setIcon(value)}
className="page-input input-bordered input w-full"
/>
<div className="page-input-suffix">upload</div>
</div>
{/* link */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-link-unlink"></i>
</div>
<input
type="text"
placeholder="输入目标地址"
value={link}
target: { value } }) => setLink(value)}
className="page-input input-bordered input w-full"
/>
</div>
{/* resolution ratio */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-merge-cells-horizontal"></i>
</div>
<input
type="number"
placeholder="输入窗口长度"
value={width}
target: { value } }) => setWidth(value)}
className="page-input input-bordered input w-full"
/>
<i className="ri-close-line self-center pl-5 pr-5"></i>
<input
type="number"
placeholder="输入窗口宽度"
value={height}
target: { value } }) => setHeight(value)}
className="page-input-normal input-bordered input w-full"
/>
</div>
{/* shortcut */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-keyboard-box-line"></i>
</div>
<input
placeholder="请设置唤醒快捷键"
className="page-input-transparent input-bordered input flex w-full items-center"
>
value={shortcut}
readOnly
/>
<div className="page-shortcut flex">
{shortcut.map((element: any, index: number) => (
<div className="flex items-center" key={index}>
{index ? <i className="ri-add-line pl-1 pr-1"></i> : ''}
<kbd className="kbd">{element.key}</kbd>
</div>
))}
</div>
{shortcut.length ? (
<div
className="page-input-suffix"
=> setShortcut([])}
>
clear
</div>
) : (
''
)}
</div>
{/* header */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-layout-top-2-line"></i>
</div>
<select
value={header}
className="page-select select-bordered select w-full"
target: { value } }) => setHeader(value)}
>
<option disabled value={''}>
是否开启沉浸头部
</option>
<option value={1}>是</option>
<option value={0}>否</option>
</select>
</div>
{/* full screen */}
<div className="page-item flex">
<div className="page-icon flex items-center justify-center">
<i className="ri-aspect-ratio-line"></i>
</div>
<select
value={fullscreen}
className="page-select select-bordered select w-full"
target: { value } }) => setFullscreen(value)}
>
<option disabled value={''}>
是否开启全屏
</option>
<option value={1}>是</option>
<option value={0}>否</option>
</select>
</div>
{/* compiling */}
<button className="page-button">
立即编译
</button>
</div>
<div className="page-card flex items-center justify-center">
<div className="page-card-control flex">
<div></div>
<div></div>
<div></div>
</div>
<div className="page-card-icon flex items-center justify-center">
<Image
className="page-card-image"
src={Folder}
width={500}
height={500}
alt={''}
></Image>
</div>
<i className="ri-arrow-right-line pl-20 pr-20 text-3xl"></i>
<Image className="page-card-folder" src={Folder} alt={''} />
<div
className={`page-card-footer flex items-center justify-between ${
visible ? '' : 'page-card-footer-compiling'
}`}
>
<div>应用正在编译，激动的心颤抖的手</div>
<div className="flex items-center">
<i className="ri-arrow-drop-left-line font-bold"></i>
<div className="pl-4 pr-4 font-semibold italic">8/8</div>
<i className="ri-arrow-drop-right-line font-bold"></i>
</div>
</div>
</div>
</div>
</div>
);
}