Skip to content

Commit cb62e50

Browse files
sherloc512sherloc512
committed
version before experiment
1 parent a3db27b commit cb62e50

File tree

5 files changed

+367
-233
lines changed

5 files changed

+367
-233
lines changed

‎structeval/render_engine/react_render/161101/index.html‎

Lines changed: 171 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -17,116 +17,186 @@
1717
<script type="text/babel">
1818
const { useState, useEffect, useRef, useContext, useReducer, useMemo, useCallback } = React;
1919

20-
21-
const VisualLayout = () => {
22-
const details = {
23-
title: "Visual Conversion Task",
24-
version: "1.0.0",
25-
status: "Active"
26-
};
27-
const configuration = {
28-
A: "Enabled",
29-
B: "Disabled",
30-
C: "Pending"
31-
};
32-
33-
return (
34-
<div id="app">
35-
<header>
36-
<h1>My Vue Visual Layout</h1>
37-
<p>This page demonstrates a detailed structure with headings, sections, and labeled values.</p>
38-
</header>
39-
40-
<section className="overview">
41-
<h2>Overview</h2>
42-
<p>The following sections are designed to showcase the structural layout and visual hierarchy.</p>
20+
<template>
21+
<div id="app">
22+
<header>
23+
<h1>My Vue Visual Layout</h1>
24+
<p>This page demonstrates a detailed structure with headings, sections, and labeled values.</p>
25+
</header>
26+
27+
<section class="overview">
28+
<h2>Overview</h2>
29+
<p>The following sections are designed to showcase the structural layout and visual hierarchy.</p>
30+
<ul>
31+
<li>Introduction</li>
32+
<li>Details</li>
33+
<li>Summary</li>
34+
</ul>
35+
</section>
36+
37+
<section class="introduction">
38+
<h2>Introduction</h2>
39+
<div class="content">
40+
<p>This introduction explains the overall purpose of the visual conversion task.</p>
4341
<ul>
44-
<li>Introduction</li>
45-
<li>Details</li>
46-
<li>Summary</li>
42+
<li><strong>Purpose:</strong> To test structural layout.</li>
43+
<li><strong>Focus:</strong> Visible structure and formatted content.</li>
44+
<li><strong>Constraints:</strong> No external resources, only valid Vue code.</li>
4745
</ul>
48-
</section>
49-
50-
<section className="introduction">
51-
<h2>Introduction</h2>
52-
<div className="content">
53-
<p>This introduction explains the overall purpose of the visual conversion task.</p>
54-
<ul>
55-
<li><strong>Purpose:</strong> To test structural layout.</li>
56-
<li><strong>Focus:</strong> Visible structure and formatted content.</li>
57-
<li><strong>Constraints:</strong> No external resources, only valid Vue code.</li>
58-
</ul>
46+
</div>
47+
</section>
48+
49+
<section class="details">
50+
<h2>Details</h2>
51+
<article>
52+
<header>
53+
<h3>Section Details</h3>
54+
</header>
55+
<div class="info-block">
56+
<p>This block contains descriptive content for the details section.</p>
57+
<table>
58+
<thead>
59+
<tr>
60+
<th>Label</th>
61+
<th>Value</th>
62+
</tr>
63+
</thead>
64+
<tbody>
65+
<tr>
66+
<td>Title</td>
67+
<td>{{ details.title }}</td>
68+
</tr>
69+
<tr>
70+
<td>Version</td>
71+
<td>{{ details.version }}</td>
72+
</tr>
73+
<tr>
74+
<td>Status</td>
75+
<td>{{ details.status }}</td>
76+
</tr>
77+
</tbody>
78+
</table>
5979
</div>
60-
</section>
61-
62-
<section className="details">
63-
<h2>Details</h2>
64-
<article>
65-
<header>
66-
<h3>Section Details</h3>
67-
</header>
68-
<div className="info-block">
69-
<p>This block contains descriptive content for the details section.</p>
70-
<table>
71-
<thead>
72-
<tr>
73-
<th>Label</th>
74-
<th>Value</th>
75-
</tr>
76-
</thead>
77-
<tbody>
78-
<tr>
79-
<td>Title</td>
80-
<td>{details.title}</td>
81-
</tr>
82-
<tr>
83-
<td>Version</td>
84-
<td>{details.version}</td>
85-
</tr>
86-
<tr>
87-
<td>Status</td>
88-
<td>{details.status}</td>
89-
</tr>
90-
</tbody>
91-
</table>
92-
</div>
93-
</article>
94-
95-
<article>
96-
<header>
97-
<h3>Configuration List</h3>
98-
</header>
99-
<div className="configuration">
100-
<ol>
101-
<li>Configuration A: {configuration.A}</li>
102-
<li>Configuration B: {configuration.B}</li>
103-
<li>Configuration C: {configuration.C}</li>
104-
</ol>
105-
</div>
106-
</article>
107-
</section>
108-
109-
<section className="summary">
110-
<h2>Summary</h2>
111-
<div className="conclusion">
112-
<p>The above sections demonstrate a clear visual hierarchy. All content is statically rendered in one page without interactive elements.</p>
113-
<blockquote>
114-
"A well-organized layout leads to a better user experience."
115-
</blockquote>
116-
<p>Thank you for reviewing our demonstration of Vue structural layout.</p>
80+
</article>
81+
82+
<article>
83+
<header>
84+
<h3>Configuration List</h3>
85+
</header>
86+
<div class="configuration">
87+
<ol>
88+
<li>Configuration A: {{ configuration.A }}</li>
89+
<li>Configuration B: {{ configuration.B }}</li>
90+
<li>Configuration C: {{ configuration.C }}</li>
91+
</ol>
11792
</div>
118-
</section>
93+
</article>
94+
</section>
95+
96+
<section class="summary">
97+
<h2>Summary</h2>
98+
<div class="conclusion">
99+
<p>The above sections demonstrate a clear visual hierarchy. All content is statically rendered in one page without interactive elements.</p>
100+
<blockquote>
101+
"A well-organized layout leads to a better user experience."
102+
</blockquote>
103+
<p>Thank you for reviewing our demonstration of Vue structural layout.</p>
104+
</div>
105+
</section>
106+
107+
<footer>
108+
<p>&copy; 2023 My Vue Application</p>
109+
</footer>
110+
</div>
111+
</template>
119112

120-
<footer>
121-
<p>&copy; 2023 My Vue Application</p>
122-
</footer>
123-
</div>
124-
);
113+
<script>
114+
name: "VisualLayout",
115+
data() {
116+
return {
117+
details: {
118+
title: "Visual Conversion Task",
119+
version: "1.0.0",
120+
status: "Active"
121+
},
122+
configuration: {
123+
A: "Enabled",
124+
B: "Disabled",
125+
C: "Pending"
126+
}
127+
};
128+
}
125129
};
130+
</script>
131+
132+
<style scoped>
133+
#app {
134+
font-family: Arial, sans-serif;
135+
margin: 20px;
136+
color: #333;
137+
}
138+
139+
header, footer {
140+
background-color: #f5f5f5;
141+
padding: 15px;
142+
text-align: center;
143+
}
144+
145+
h1 {
146+
margin-bottom: 10px;
147+
}
148+
149+
h2 {
150+
color: #444;
151+
margin-top: 20px;
152+
border-bottom: 1px solid #ccc;
153+
padding-bottom: 5px;
154+
}
155+
156+
h3 {
157+
color: #555;
158+
margin: 15px 0 10px 0;
159+
}
160+
161+
section {
162+
margin-bottom: 30px;
163+
}
164+
165+
ul, ol {
166+
margin-left: 20px;
167+
}
168+
169+
table {
170+
width: 100%;
171+
border-collapse: collapse;
172+
margin-top: 10px;
173+
}
174+
175+
table, th, td {
176+
border: 1px solid #ddd;
177+
}
178+
179+
th, td {
180+
padding: 8px;
181+
text-align: left;
182+
}
183+
184+
blockquote {
185+
margin: 15px 20px;
186+
padding-left: 15px;
187+
border-left: 4px solid #ccc;
188+
font-style: italic;
189+
}
126190

191+
.conclusion {
192+
background-color: #fafafa;
193+
padding: 15px;
194+
border: 1px solid #e0e0e0;
195+
}
196+
</style>
127197

128198
// Auto‑generated mount
129-
ReactDOM.createRoot(document.getElementById('root')).render(<VisualLayout />);
199+
ReactDOM.createRoot(document.getElementById('root')).render(<{ />);
130200

131201
</script>
132202
</body>

0 commit comments

Comments
 (0)