fix: improve meteor effects and fix document management add functionality
Docker Build / Build and Push Docker Image (push) Successful in 3m45s
Docker Build / Build and Push Docker Image (push) Successful in 3m45s
This commit is contained in:
+7
-3
@@ -76,14 +76,18 @@ export function DocCategories() {
|
|||||||
try {
|
try {
|
||||||
const payload = {
|
const payload = {
|
||||||
name: form.name,
|
name: form.name,
|
||||||
slug: form.slug || form.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
|
slug: form.slug || form.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\u4e00-\u9fff-]/g, ''),
|
||||||
parent_id: form.parent_id ? parseInt(form.parent_id) : null,
|
parent_id: form.parent_id ? parseInt(form.parent_id) : null,
|
||||||
sort_order: form.sort_order,
|
sort_order: form.sort_order,
|
||||||
}
|
}
|
||||||
|
let res
|
||||||
if (editingCategory) {
|
if (editingCategory) {
|
||||||
await api.put(`/api/admin/docs/categories/${editingCategory.id}`, payload)
|
res = await api.put(`/api/admin/docs/categories/${editingCategory.id}`, payload)
|
||||||
} else {
|
} else {
|
||||||
await api.post('/api/admin/docs/categories', payload)
|
res = await api.post('/api/admin/docs/categories', payload)
|
||||||
|
}
|
||||||
|
if (res.data?.success === false) {
|
||||||
|
return
|
||||||
}
|
}
|
||||||
setDialogOpen(false)
|
setDialogOpen(false)
|
||||||
fetchCategories()
|
fetchCategories()
|
||||||
|
|||||||
+6
-2
@@ -113,10 +113,14 @@ export function DocsManagement() {
|
|||||||
visibility: form.visibility,
|
visibility: form.visibility,
|
||||||
sort_order: form.sort_order,
|
sort_order: form.sort_order,
|
||||||
}
|
}
|
||||||
|
let res
|
||||||
if (editingDoc) {
|
if (editingDoc) {
|
||||||
await api.put(`/api/admin/docs/${editingDoc.id}`, payload)
|
res = await api.put(`/api/admin/docs/${editingDoc.id}`, payload)
|
||||||
} else {
|
} else {
|
||||||
await api.post('/api/admin/docs/', payload)
|
res = await api.post('/api/admin/docs/', payload)
|
||||||
|
}
|
||||||
|
if (res.data?.success === false) {
|
||||||
|
return
|
||||||
}
|
}
|
||||||
setDialogOpen(false)
|
setDialogOpen(false)
|
||||||
fetchData()
|
fetchData()
|
||||||
|
|||||||
+16
-6
@@ -279,6 +279,11 @@ export function Docs() {
|
|||||||
<div className='meteor meteor-1' />
|
<div className='meteor meteor-1' />
|
||||||
<div className='meteor meteor-2' />
|
<div className='meteor meteor-2' />
|
||||||
<div className='meteor meteor-3' />
|
<div className='meteor meteor-3' />
|
||||||
|
<div className='meteor meteor-4' />
|
||||||
|
<div className='meteor meteor-5' />
|
||||||
|
<div className='meteor meteor-6' />
|
||||||
|
<div className='meteor meteor-7' />
|
||||||
|
<div className='meteor meteor-8' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='relative mx-auto w-full max-w-6xl px-6 pt-20 pb-12'>
|
<div className='relative mx-auto w-full max-w-6xl px-6 pt-20 pb-12'>
|
||||||
@@ -504,16 +509,21 @@ export function Docs() {
|
|||||||
.dark .meteor::after {
|
.dark .meteor::after {
|
||||||
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
||||||
}
|
}
|
||||||
.meteor-1 { left: 15%; top: -2%; animation-duration: 1.8s; animation-delay: 3s; }
|
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 1s; }
|
||||||
.meteor-2 { left: 50%; top: -2%; animation-duration: 1.6s; animation-delay: 10s; }
|
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 5s; }
|
||||||
.meteor-3 { left: 80%; top: -2%; animation-duration: 2.0s; animation-delay: 18s; }
|
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 9s; }
|
||||||
|
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 13s; }
|
||||||
|
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 17s; }
|
||||||
|
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 21s; }
|
||||||
|
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 25s; }
|
||||||
|
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 29s; }
|
||||||
@keyframes meteor-fall {
|
@keyframes meteor-fall {
|
||||||
0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
|
0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
|
||||||
8% { opacity: 1; }
|
8% { opacity: 1; }
|
||||||
20% { height: 100px; opacity: 0.9; }
|
20% { height: 120px; opacity: 0.9; }
|
||||||
50% { height: 160px; opacity: 0.5; }
|
50% { height: 180px; opacity: 0.5; }
|
||||||
80% { height: 60px; opacity: 0.15; }
|
80% { height: 60px; opacity: 0.15; }
|
||||||
100% { height: 0; opacity: 0; transform: translateY(700px) translateX(-200px) rotate(220deg); }
|
100% { height: 0; opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }
|
.nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }
|
||||||
|
|||||||
+17
-9
@@ -175,6 +175,10 @@ export function Hero(props: HeroProps) {
|
|||||||
<div className='meteor meteor-4' />
|
<div className='meteor meteor-4' />
|
||||||
<div className='meteor meteor-5' />
|
<div className='meteor meteor-5' />
|
||||||
<div className='meteor meteor-6' />
|
<div className='meteor meteor-6' />
|
||||||
|
<div className='meteor meteor-7' />
|
||||||
|
<div className='meteor meteor-8' />
|
||||||
|
<div className='meteor meteor-9' />
|
||||||
|
<div className='meteor meteor-10' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Section navigation dots (desktop only) */}
|
{/* Section navigation dots (desktop only) */}
|
||||||
@@ -469,12 +473,16 @@ export function Hero(props: HeroProps) {
|
|||||||
transparent 100%
|
transparent 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
.meteor-1 { left: 8%; top: -2%; animation-duration: 1.8s; animation-delay: 1s; }
|
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
|
||||||
.meteor-2 { left: 30%; top: -2%; animation-duration: 1.5s; animation-delay: 5s; }
|
.meteor-2 { left: 15%; top: -2%; animation-duration: 1.7s; animation-delay: 3s; }
|
||||||
.meteor-3 { left: 52%; top: -2%; animation-duration: 2.0s; animation-delay: 9s; }
|
.meteor-3 { left: 25%; top: -2%; animation-duration: 2.2s; animation-delay: 6s; }
|
||||||
.meteor-4 { left: 75%; top: -2%; animation-duration: 1.6s; animation-delay: 14s; }
|
.meteor-4 { left: 35%; top: -2%; animation-duration: 1.8s; animation-delay: 9s; }
|
||||||
.meteor-5 { left: 20%; top: -2%; animation-duration: 1.9s; animation-delay: 19s; }
|
.meteor-5 { left: 48%; top: -2%; animation-duration: 2.1s; animation-delay: 12s; }
|
||||||
.meteor-6 { left: 65%; top: -2%; animation-duration: 1.7s; animation-delay: 24s; }
|
.meteor-6 { left: 58%; top: -2%; animation-duration: 1.6s; animation-delay: 15s; }
|
||||||
|
.meteor-7 { left: 68%; top: -2%; animation-duration: 1.9s; animation-delay: 18s; }
|
||||||
|
.meteor-8 { left: 78%; top: -2%; animation-duration: 2.3s; animation-delay: 21s; }
|
||||||
|
.meteor-9 { left: 88%; top: -2%; animation-duration: 1.7s; animation-delay: 24s; }
|
||||||
|
.meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 27s; }
|
||||||
@keyframes meteor-fall {
|
@keyframes meteor-fall {
|
||||||
0% {
|
0% {
|
||||||
height: 0;
|
height: 0;
|
||||||
@@ -485,11 +493,11 @@ export function Hero(props: HeroProps) {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
height: 100px;
|
height: 120px;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
height: 160px;
|
height: 180px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
@@ -499,7 +507,7 @@ export function Hero(props: HeroProps) {
|
|||||||
100% {
|
100% {
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(700px) translateX(-200px) rotate(220deg);
|
transform: translateY(800px) translateX(-120px) rotate(220deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+16
-6
@@ -197,6 +197,11 @@ export function Pricing() {
|
|||||||
<div className='meteor meteor-1' />
|
<div className='meteor meteor-1' />
|
||||||
<div className='meteor meteor-2' />
|
<div className='meteor meteor-2' />
|
||||||
<div className='meteor meteor-3' />
|
<div className='meteor meteor-3' />
|
||||||
|
<div className='meteor meteor-4' />
|
||||||
|
<div className='meteor meteor-5' />
|
||||||
|
<div className='meteor meteor-6' />
|
||||||
|
<div className='meteor meteor-7' />
|
||||||
|
<div className='meteor meteor-8' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PageTransition className='relative mx-auto w-full max-w-6xl px-6 pt-20 pb-12'>
|
<PageTransition className='relative mx-auto w-full max-w-6xl px-6 pt-20 pb-12'>
|
||||||
@@ -388,16 +393,21 @@ export function Pricing() {
|
|||||||
.dark .meteor::after {
|
.dark .meteor::after {
|
||||||
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
background: linear-gradient(to bottom, oklch(0.78 0.15 210 / 0.7) 0%, oklch(0.78 0.15 210 / 0.35) 15%, oklch(0.78 0.15 210 / 0.1) 50%, transparent 100%);
|
||||||
}
|
}
|
||||||
.meteor-1 { left: 15%; top: -2%; animation-duration: 1.8s; animation-delay: 2s; }
|
.meteor-1 { left: 5%; top: -2%; animation-duration: 2.0s; animation-delay: 0s; }
|
||||||
.meteor-2 { left: 50%; top: -2%; animation-duration: 1.6s; animation-delay: 9s; }
|
.meteor-2 { left: 20%; top: -2%; animation-duration: 1.7s; animation-delay: 4s; }
|
||||||
.meteor-3 { left: 80%; top: -2%; animation-duration: 2.0s; animation-delay: 16s; }
|
.meteor-3 { left: 38%; top: -2%; animation-duration: 2.2s; animation-delay: 8s; }
|
||||||
|
.meteor-4 { left: 52%; top: -2%; animation-duration: 1.8s; animation-delay: 12s; }
|
||||||
|
.meteor-5 { left: 65%; top: -2%; animation-duration: 2.1s; animation-delay: 16s; }
|
||||||
|
.meteor-6 { left: 78%; top: -2%; animation-duration: 1.6s; animation-delay: 20s; }
|
||||||
|
.meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 24s; }
|
||||||
|
.meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 28s; }
|
||||||
@keyframes meteor-fall {
|
@keyframes meteor-fall {
|
||||||
0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
|
0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
|
||||||
8% { opacity: 1; }
|
8% { opacity: 1; }
|
||||||
20% { height: 100px; opacity: 0.9; }
|
20% { height: 120px; opacity: 0.9; }
|
||||||
50% { height: 160px; opacity: 0.5; }
|
50% { height: 180px; opacity: 0.5; }
|
||||||
80% { height: 60px; opacity: 0.15; }
|
80% { height: 60px; opacity: 0.15; }
|
||||||
100% { height: 0; opacity: 0; transform: translateY(700px) translateX(-200px) rotate(220deg); }
|
100% { height: 0; opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }
|
.nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }
|
||||||
|
|||||||
Reference in New Issue
Block a user