youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化全局样式与类型，新增四川母暴龙代理配置

Browse Source 
- 调整全站毛玻璃背景、光晕与渐变的透明度，降低色彩饱和度使视觉更柔和
- 替换 $http 全局类型声明，改用具体模块类型替代 any
- 增强 API 请求函数类型，使用 Record<string, unknown> 替代 any，新增泛型响应接口
- 修复热搜标题与热度数字颜色，支持 hover 变色
- 新增四川母暴龙自定义代理配置文件
This commit is contained in:
youzi
2026-08-07 11:29:59 +08:00
parent 549d85162d
commit 88999c4961
17 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/blog/index.ts
+3 -3
View File
@@ -1,11 +1,11 @@
import request from "@/util/request";
//getBlogList
export function getBlogList(params: any) {
export function getBlogList(params: Record<string, string | number>) {
return request({
url: "/art",
method: "get",
params
params,
});
}
//getBlogDetail
@@ -21,4 +21,4 @@ export function getCateList() {
url: `/art/category`,
method: "get",
});
}
}
src/api/file/index.ts
+2 -3
View File
@@ -1,7 +1,7 @@
import request from "@/util/request";
//getFileList
export function getFileList(params: Record<string, string>) {
export function getFileList(params: Record<string, string | number>) {
return request({
url: "/files/search",
method: "get",
@@ -9,7 +9,7 @@ export function getFileList(params: Record<string, string>) {
});
}
//getMyList
export function getMyList(params: Record<string, string>) {
export function getMyList(params: Record<string, string | number>) {
return request({
url: "/files/myfile",
method: "get",
@@ -24,4 +24,3 @@ export function putShare(data: Record<string, string>) {
data,
});
}
src/api/mix/index.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import request from "@/util/request";
//getWeather
export function getWeather(params: Record<string, string>) {
export function getWeather(params: Record<string, string | number>) {
return request({
url: "/mix/wea",
method: "get",
@@ -9,7 +9,7 @@ export function getWeather(params: Record<string, string>) {
});
}
//getLocation
export function getLocation(params: Record<string, string>) {
export function getLocation(params: Record<string, string | number>) {
return request({
url: "/mix/location",
method: "get",
@@ -25,7 +25,7 @@ export function getIp() {
}
//getIcon
export function getIcon(data: any) {
export function getIcon(data: Record<string, string | number>) {
return request({
url: "/mix/ico",
method: "post",
src/api/nav/index.ts
+4 -4
View File
@@ -8,7 +8,7 @@ export function getNavList() {
});
}
// addNav
export function addNav(data: any) {
export function addNav(data: Record<string, unknown>) {
return request({
url: "/navi",
method: "post",
@@ -17,7 +17,7 @@ export function addNav(data: any) {
}
// editNav
export function editNav(id: string,data: any) {
export function editNav(id: string | number, data: Record<string, unknown>) {
return request({
url: `/navi/${id}`,
method: "put",
@@ -26,9 +26,9 @@ export function editNav(id: string,data: any) {
}
// deleteNav
export function deleteNav(id: string) {
export function deleteNav(id: string | number | undefined) {
return request({
url: `/navi/${id}`,
method: "delete",
});
}
}
src/api/plink/index.ts
+3 -3
View File
@@ -8,10 +8,10 @@ export function getPlinkList() {
});
}
// addPlink
export function addPlink(data: any) {
export function addPlink(data: Record<string, unknown>) {
return request({
url: "/plink",
method: "post",
data
data,
});
}
}
src/components/Login.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.04),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.03),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<n-tabs class="bg-transparent" v-model:value="tid" justify-content="space-evenly" animated>
<n-tab-pane name="tab1" tab="登录">
<n-form ref="formLogin" layout="vertical" :model="loginData" :rules="rules">
src/components/homeSide.vue
+4 -4
View File
@@ -73,13 +73,13 @@
<span
class="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[11px] font-bold"
:class="i.index <= 3
? 'bg-[linear-gradient(135deg,#D71A44,#DB5F51)] text-white shadow-[0_3px_8px_rgba(215,26,68,0.28)]'
? 'bg-[linear-gradient(135deg,#DB5F51,#F99A9F)] text-white shadow-[0_3px_8px_rgba(219,95,81,0.28)] transition-[box-shadow] duration-200 group-hover:bg-[linear-gradient(135deg,#D71A44,#DB5F51)] group-hover:shadow-[0_3px_8px_rgba(215,26,68,0.28)]'
: 'bg-slate-700/6 text-slate-400'"
>{{ i.index }}</span>
<span class="truncate transition-colors duration-200 group-hover:text-primary">{{ i.title }}</span>
<span class="truncate text-[#DB5F51] transition-colors duration-200 group-hover:text-[#D71A44]">{{ i.title }}</span>
<icon-hot v-show="i.index < 4" class="ml-2 inline-block w-4 shrink-0 text-[red]"></icon-hot>
</span>
<span class="shrink-0 text-[13px] font-medium text-primary/85">{{ i.hot }}</span>
<span class="shrink-0 text-[13px] font-medium text-[#DB5F51]/85 transition-colors duration-200 group-hover:text-[#D71A44]/85">{{ i.hot }}</span>
</a>
</div>
<div class="mt-1.5 flex items-center justify-between">
@@ -177,7 +177,7 @@ function getTime() {
async function getJq() {
try {
const res = await $http.mix.getJq({
date: formatTime(new Date(), 'YYYYMMDD')
date: formatTime(new Date(), 'YYYYMMDD') || ''
})
jq.value = res.data
const j = res.data.solarTerms.slice(0, 2)
src/components/menuH.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<div
ref="nav"
class="relative hidden items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.08),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.06),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.82)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.28)_100%)] px-4 py-1.5 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-28px] after:h-[34px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:flex"
class="relative hidden items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.04),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.03),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.82)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.28)_100%)] px-4 py-1.5 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-28px] after:h-[34px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:flex"
>
<div
class="menu-pill-glass flex ml-4 cursor-pointer items-center rounded-full px-4 py-1 transition-colors duration-200"
@@ -66,7 +66,7 @@
</masked>
</div>
<div class="relative flex items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.08),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.06),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.84)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.32)_100%)] px-3 py-2 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-24px] after:h-[30px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:hidden">
<div class="relative flex items-center justify-between bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.04),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.03),transparent_24%),linear-gradient(180deg,rgba(242,232,214,0.84)_0%,rgba(244,222,218,0.68)_46%,rgba(251,231,232,0.32)_100%)] px-3 py-2 shadow-[0_6px_16px_rgba(128,118,126,0.05)] backdrop-blur-[14px] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-24px] after:h-[30px] after:bg-[linear-gradient(180deg,rgba(240,236,226,0.58),rgba(244,222,218,0.22),transparent)] after:content-[''] lg:hidden">
<div class="menu-pill-glass flex items-center rounded-full px-3 py-1">
<img :src="logo" alt="柚子的网站" class="h-9 align-middle drop-shadow-[0_6px_14px_rgba(215,26,68,0.15)]" />
</div>
@@ -91,7 +91,7 @@
</div>
<masked v-if="usrLog.isLogin" :visible="editModal" :setVisible="handdleItemCancel">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.04),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.03),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_28px_60px_rgba(128,118,126,0.18)] backdrop-blur-[20px]">
<div class="mb-8 text-center text-xl font-bold tracking-[0.02em] text-slate-800">修改头像</div>
<n-upload
src/config/http.ts
+7 -10
View File
@@ -1,12 +1,9 @@
const files = import.meta.glob("@/api/*/index.ts", {
eager: true,
});
import * as blog from "@/api/blog/index";
import * as file from "@/api/file/index";
import * as mix from "@/api/mix/index";
import * as nav from "@/api/nav/index";
import * as plink from "@/api/plink/index";
import * as user from "@/api/user/index";
const http: Record<string, any> = {};
// console.log(files);
for (const i in files) {
const t = i.split("/");
const name = t[t.length - 2];
http[name] = files[i];
}
const http = { blog, file, mix, nav, plink, user };
export default http;
src/util/request.ts
+14 -2
View File
@@ -1,4 +1,4 @@
import type { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from "axios";
import type { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios";
import axios from "axios";
import { useCookies } from "vue3-cookies";
@@ -51,4 +51,16 @@ request.interceptors.response.use(
},
);
export default request;
// 统一响应结构：拦截器已返回 response.data（即 { code, msg, data }）
export interface ApiResponse<T = any> {
code: number;
msg: string;
data: T;
}
// 泛型请求函数：返回拦截器处理后的 Promise<ApiResponse<T>>，而非 AxiosResponse
function http<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
return request(config) as Promise<ApiResponse<T>>;
}
export default http;
src/views/Gallery.vue
+3 -3
View File
@@ -1,11 +1,11 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]">
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.05),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.04),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.03),transparent_28%),linear-gradient(180deg,#fcfaf6_0%,#fbf8f7_44%,#fefcfb_100%)]">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.10)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.08)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
src/views/Plink.vue
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.05),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.04),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.03),transparent_28%),linear-gradient(180deg,#fcfaf6_0%,#fbf8f7_44%,#fefcfb_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.10)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.08)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
src/views/blog/[bid].vue
+3 -3
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.05),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.04),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.03),transparent_28%),linear-gradient(180deg,#fcfaf6_0%,#fbf8f7_44%,#fefcfb_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.10)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.08)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
src/views/blog/index.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.05),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.04),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.03),transparent_28%),linear-gradient(180deg,#fcfaf6_0%,#fbf8f7_44%,#fefcfb_100%)]"
:style="boxStyle">
<div
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]">
class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.10)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]">
class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.08)] opacity-48 blur-[88px]">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]">
@@ -88,8 +88,8 @@
</aside>
<section class="blog-list-panel min-w-0 flex h-full flex-1 flex-col p-4 sm:p-6">
<div class="pointer-events-none absolute right-[-4rem] top-12 h-40 w-40 rounded-full bg-[rgba(219,95,81,0.07)] blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-3rem] bottom-10 h-36 w-36 rounded-full bg-[rgba(249,154,159,0.06)] blur-[82px]"></div>
<div class="pointer-events-none absolute right-[-4rem] top-12 h-40 w-40 rounded-full bg-[rgba(219,95,81,0.04)] blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-3rem] bottom-10 h-36 w-36 rounded-full bg-[rgba(249,154,159,0.03)] blur-[82px]"></div>
<div class="mb-5 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div class="relative z-[1]">
<div class="text-[0.82rem] font-semibold tracking-[0.16em] text-[#718195]">文章列表</div>
@@ -128,10 +128,10 @@
class="blog-list-card blog-card-animate group cursor-pointer"
:style="{ animationDelay: `${index * 90}ms` }" @click="$router.push(`/blog/${item.aid}`)">
<div
class="pointer-events-none absolute -right-10 top-[-2rem] h-28 w-28 rounded-full bg-[rgba(219,95,81,0.08)] transition duration-500 group-hover:scale-125 group-hover:opacity-100">
class="pointer-events-none absolute -right-10 top-[-2rem] h-28 w-28 rounded-full bg-[rgba(219,95,81,0.04)] transition duration-500 group-hover:scale-125 group-hover:opacity-100">
</div>
<div
class="pointer-events-none absolute -left-8 bottom-[-2rem] h-24 w-24 rounded-full bg-[rgba(219,95,81,0.07)] transition duration-500 group-hover:translate-x-2">
class="pointer-events-none absolute -left-8 bottom-[-2rem] h-24 w-24 rounded-full bg-[rgba(219,95,81,0.04)] transition duration-500 group-hover:translate-x-2">
</div>
<div class="pointer-events-none absolute inset-x-6 top-0 h-18 bg-[linear-gradient(180deg,rgba(255,255,255,0.24),transparent)] opacity-80 "></div>
src/views/index.vue
+5 -5
View File
@@ -1,10 +1,10 @@
<template>
<div
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.10),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.08),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.06),transparent_28%),linear-gradient(180deg,#faf6ee_0%,#f9f1ef_44%,#fdf7f6_100%)]"
class="relative overflow-hidden bg-[radial-gradient(circle_at_12%_18%,rgba(219,95,81,0.05),transparent_24%),radial-gradient(circle_at_86%_12%,rgba(249,154,159,0.04),transparent_24%),radial-gradient(circle_at_50%_100%,rgba(222,217,178,0.03),transparent_28%),linear-gradient(180deg,#fcfaf6_0%,#fbf8f7_44%,#fefcfb_100%)]"
:style="contentStyle"
>
<div class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.20)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.15)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute left-[-5rem] top-6 h-80 w-80 rounded-full bg-[rgba(219,95,81,0.10)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute right-[-5rem] top-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(222,217,178,0.08)] opacity-48 blur-[88px]"></div>
<div class="pointer-events-none absolute inset-y-0 left-5 right-5 opacity-14 [background-image:linear-gradient(rgba(255,255,255,0.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.18)_1px,transparent_1px)] [background-position:18px_0,18px_0] [background-size:36px_36px] [mask-image:linear-gradient(180deg,rgba(0,0,0,0.8),transparent_85%)]"></div>
<n-layout has-sider>
<n-layout-content class="relative !bg-transparent">
@@ -184,7 +184,7 @@
<maskX :visible="visible" :setVisible="navCancel">
<n-form
class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]"
class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.04),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.03),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]"
ref="formNav"
layout="vertical"
:data="navData"
@@ -264,7 +264,7 @@
</contextMenu>
<maskX :visible="editModal" :setVisible="handleItemCancel">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.07),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.06),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]">
<div class="w-[500px] rounded-[28px] border border-white/80 bg-[radial-gradient(circle_at_top_left,rgba(219,95,81,0.04),transparent_34%),radial-gradient(circle_at_top_right,rgba(249,154,159,0.03),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.84),rgba(255,239,234,0.78))] p-8 shadow-[0_4px_12px_rgba(128,118,126,0.08),0_20px_44px_rgba(128,118,126,0.12),0_64px_120px_rgba(215,26,68,0.08)] backdrop-blur-[20px]">
<div class="mb-8 flex items-center justify-center gap-2 text-center text-xl font-bold tracking-[0.02em] text-slate-800">
<icon-pen class="w-5 text-primary" />
修改导航内容