Skip to content

Commit acd61c6

Browse files
sparrow-jssparrow-js
committed
fix
1 parent 1a04e6a commit acd61c6

File tree

6 files changed

+160
-303
lines changed

6 files changed

+160
-303
lines changed

‎components/components/CodePreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function CodePreview({ code }: Props) {
1616
return (
1717
<div
1818
ref={scrollRef}
19-
className="w-full px-2 bg-black text-green-400 whitespace-nowrap flex
19+
className="w-full px-2 py-1 bg-black text-green-400 whitespace-nowrap flex
2020
overflow-x-auto font-mono text-[10px] my-2"
2121
>
2222
{code}

‎components/components/chatInput/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useContext, useEffect, useRef, useState, useMemo } from 'react';
22
import {UploadFileContext} from '../../contexts/UploadFileContext'
33
import { SettingContext } from '../../contexts/SettingContext';
4-
import { useRouter } from 'next/navigation';
4+
import { useRouter } from 'next/router';
55
import { LiaPencilRulerSolid } from "react-icons/lia";
66
import classNames from "classnames";
77
import { GoArrowUpRight } from "react-icons/go";
@@ -42,6 +42,8 @@ export default function ChatInput({openWhiteboard, showAnim}: props) {
4242
getInputProps,
4343
open,
4444
} = useContext(UploadFileContext);
45+
46+
4547

4648
const [loading, setLoading] = useState<boolean>(false);
4749

@@ -61,11 +63,11 @@ export default function ChatInput({openWhiteboard, showAnim}: props) {
6163
if (initCreateText) {
6264
setLoading(true);
6365
setInitCreate(true);
64-
router.push('/editor', { scroll: false });
66+
router.push('/editor');
6567
// setLoading(false);
6668
}
6769
}
68-
70+
6971
return (
7072
<div
7173
className="relative"

‎components/contexts/HistoryContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default function SettingProvider({ children }: { children: ReactNode }) {
7979
setHistory((prevState) => {
8080
const newHistory = [...prevState];
8181
const index = version || currentVersion || 0;
82-
if (index !== -1 && newHistory) {
82+
if (index !== -1 && newHistory && newHistory[index]) {
8383
newHistory[index].screenshot = img;
8484
}
8585
return newHistory;

‎example/test.html‎

Lines changed: 38 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,38 @@
1-
<html>
2-
<head>
3-
<title>E-commerce Dashboard</title>
4-
<script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
5-
<script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
6-
<script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
7-
<script src="https://cdn.tailwindcss.com"></script>
8-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
10-
</head>
11-
<body>
12-
<div id="app"></div>
13-
14-
<script type="text/babel">
15-
const Dashboard = () => {
16-
return (
17-
<div className="flex h-screen bg-gray-100">
18-
<div className="flex flex-col w-64 bg-white shadow-lg">
19-
<div className="flex items-center justify-center h-20 shadow-md">
20-
<h1 className="text-3xl uppercase text-indigo-500">Logo</h1>
21-
</div>
22-
<ul className="flex flex-col py-4">
23-
<li>
24-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
25-
<i className="fas fa-tachometer-alt pr-2"></i>
26-
Dashboard
27-
</a>
28-
</li>
29-
<li>
30-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
31-
<i className="fas fa-box pr-2"></i>
32-
Products
33-
</a>
34-
</li>
35-
<li>
36-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
37-
<i className="fas fa-users pr-2"></i>
38-
Customers
39-
</a>
40-
</li>
41-
<li>
42-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
43-
<i className="fas fa-file-invoice-dollar pr-2"></i>
44-
Orders
45-
</a>
46-
</li>
47-
<li>
48-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
49-
<i className="fas fa-chart-line pr-2"></i>
50-
Reports
51-
</a>
52-
</li>
53-
<li>
54-
<a href="#" className="flex items-center pl-6 p-2 text-gray-600 hover:bg-indigo-500 hover:text-white">
55-
<i className="fas fa-cog pr-2"></i>
56-
Settings
57-
</a>
58-
</li>
59-
</ul>
60-
</div>
61-
<div className="flex-1 flex flex-col overflow-hidden">
62-
<header className="flex justify-between items-center p-6 bg-white border-b-2 border-gray-200">
63-
<div className="flex items-center space-x-4">
64-
<i className="fas fa-bars text-gray-600 text-2xl"></i>
65-
<h1 className="text-2xl text-gray-700 font-semibold">Dashboard</h1>
66-
</div>
67-
<div className="flex items-center space-x-4">
68-
<i className="fas fa-bell text-gray-600 text-2xl"></i>
69-
<i className="fas fa-user-circle text-gray-600 text-2xl"></i>
70-
</div>
71-
</header>
72-
<main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
73-
<div className="container mx-auto px-6 py-8">
74-
<h3 className="text-gray-700 text-3xl font-medium">Recent Orders</h3>
75-
<div className="mt-8">
76-
<div className="flex flex-col">
77-
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
78-
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
79-
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
80-
<table className="min-w-full divide-y divide-gray-200">
81-
<thead className="bg-gray-50">
82-
<tr>
83-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
84-
Order ID
85-
</th>
86-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
87-
Product
88-
</th>
89-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
90-
Customer
91-
</th>
92-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
93-
Status
94-
</th>
95-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
96-
Total
97-
</th>
98-
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
99-
Date
100-
</th>
101-
<th scope="col" className="relative px-6 py-3">
102-
<span className="sr-only">Edit</span>
103-
</th>
104-
</tr>
105-
</thead>
106-
<tbody className="bg-white divide-y divide-gray-200">
107-
<tr>
108-
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
109-
#001
110-
</td>
111-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
112-
Product Name 1
113-
</td>
114-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
115-
Customer Name 1
116-
</td>
117-
<td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
118-
Completed
119-
</td>
120-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
121-
$100.00
122-
</td>
123-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
124-
01/01/2021
125-
</td>
126-
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
127-
<a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
128-
</td>
129-
</tr>
130-
{/* Repeat for each order */}
131-
{/* ... other orders ... */}
132-
</tbody>
133-
</table>
134-
</div>
135-
</div>
136-
</div>
137-
</div>
138-
</div>
139-
</div>
140-
</main>
141-
</div>
142-
</div>
143-
);
144-
};
145-
146-
ReactDOM.render(<Dashboard />, document.getElementById('app'));
147-
</script>
148-
</body>
149-
</html>
1+
<title>Vue/Tailwind App</title>
2+
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
3+
<script src="https://cdn.tailwindcss.com"></script>
4+
<style> body { font-family: 'Inter', sans-serif; } </style>
5+
<body>
6+
<div id="app"></div>
7+
</body>
8+
<script type="module">
9+
const { createApp } = Vue;
10+
createApp({
11+
template: `
12+
<div class="bg-white shadow rounded-lg p-6 w-full max-w-sm mx-auto mt-12">
13+
<div class="flex justify-between items-center border-b pb-4">
14+
<div class="text-lg font-semibold">全部</div>
15+
<div class="text-sm">44</div>
16+
<button class="text-gray-400 hover:text-gray-600">
17+
<i class="fas fa-ellipsis-h"></i>
18+
</button>
19+
</div>
20+
<div class="flex items-center justify-between py-4 border-b">
21+
<button class="text-blue-600 text-lg font-semibold flex items-center">
22+
<i class="fas fa-plus mr-2"></i>新建分组
23+
</button>
24+
<button class="text-gray-500 px-4 py-2 rounded-lg border bg-gray-200
25+
hover:bg-gray-300 text-sm font-semibold">
26+
Shift + N
27+
</button>
28+
</div>
29+
<div class="flex items-center justify-between py-4">
30+
<button class="text-gray-500 text-lg font-semibold flex items-center">
31+
<i class="far fa-folder mr-2"></i>未分组
32+
</button>
33+
<div class="text-sm">44</div>
34+
</div>
35+
</div>
36+
`
37+
}).mount('#app');
38+
</script>

‎pages/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import OnboardingNote from "../components/components/OnboardingNote";
55
import {SettingContext} from '../components/contexts/SettingContext';
66
import {UploadFileContext} from '../components/contexts/UploadFileContext'
77
import { IS_RUNNING_ON_CLOUD } from "../components/config";
8-
import { useRouter } from 'next/navigation';
8+
import { useRouter } from 'next/router';
99
import classNames from 'classnames';
1010

1111
import dynamic from "next/dynamic";
@@ -57,7 +57,7 @@ export default function Dashboard() {
5757
useEffect(() => {
5858
setUploadComplete(() => {
5959
setInitCreate(true);
60-
router.push('/editor', { scroll: false })
60+
router.push('/editor')
6161
})
6262
}, []);
6363

@@ -71,6 +71,12 @@ export default function Dashboard() {
7171
[isFocused, isDragAccept, isDragReject]
7272
);
7373

74+
useEffect(() => {
75+
// Prefetch the dashboard page
76+
router.prefetch('/editor')
77+
}, [router])
78+
79+
7480
return (
7581
<div
7682
{...getRootProps({ style: style as any })}
@@ -137,7 +143,7 @@ export default function Dashboard() {
137143
setOpenWhiteboard(false);
138144
setDataUrls(urls);
139145
setInitCreate(true);
140-
router.push('/editor', { scroll: false })
146+
router.push('/editor')
141147
}}
142148
closeWhiteboard={() => {
143149
setOpenWhiteboard(false);

0 commit comments

Comments
 (0)