wenyongda/vhAstro-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

性能、冗余优化✅

Browse Source
This commit is contained in:
Han
2025-03-28 09:56:51 +08:00
parent 18722803e9
commit bdc6f747b8
45 changed files with 200 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Aside/Aside.astro
+3 -1
View File
@@ -1,5 +1,7 @@
---
// 静态图片
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
import { Image } from "astro:assets";
// 时间处理
import { fmtTime } from "@/utils/index";
@@ -30,7 +32,7 @@ import "./Aside.less";
{
WebSites.map(item => (
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
<Image src={item.icon} alt={item.text} width="1" height="1" />
<Svg src={item.icon} />
</a>
))
}
src/components/Aside/Aside.less
+2 -1
View File
@@ -125,10 +125,11 @@ aside.vh-aside {
z-index: -1;
}
&>img {
&>svg {
width: auto;
height: 1.18rem;
object-fit: contain;
stroke-width: 3px;
}
}
}
src/components/Comment/Comment.less
+21 -4
View File
@@ -1,6 +1,6 @@
.vh-comment {
box-sizing: border-box;
padding: 2rem 1rem 2.88rem;
padding: 2rem 1rem 6.88rem;
width: 100%;
height: max-content;
border-radius: 0.5rem;
@@ -326,6 +326,21 @@
--waline-avatar-radius: 0.58rem;
font-size: var(--vh-size-h2);
.wl-comment {
.wl-panel {
.wl-header {
label {
padding: 0.36rem 0.28rem;
font-size: 0.8rem;
}
}
.wl-input {
font-size: 0.688rem;
}
}
}
.wl-cards {
&>.wl-card-item {
padding-left: 0;
@@ -411,7 +426,7 @@
// 图片
img {
&:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion) {
&:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion, .wl-emoji, .wl-login-nick>img) {
box-sizing: border-box;
padding: 0.188rem;
margin: 0.188rem 0;
@@ -424,8 +439,10 @@
cursor: -webkit-zoom-in;
}
&.tk-owo-emotion {
max-height: 28px;
&.tk-owo-emotion,
&.wl-emoji {
height: 1.68rem;
object-fit: contain;
cursor: default;
}
}
src/components/Header/Header.astro
+4 -4
View File
@@ -1,8 +1,8 @@
---
import SITE_CONFIG from "@/config";
const { Navs } = SITE_CONFIG;
// 原生图片
import { Image } from "astro:assets";
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
// 搜索框组件
import Search from "@/components/Search/Search.astro";
// 顶部 Header 样式
@@ -12,7 +12,7 @@ import "./Header.less";
<header class="vh-header">
<section class="main">
<a href="/" class="index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1l32 0 0 160.4c0 35.3 28.7 64 64 64l102.3 0-31.3-52.2c-4.1-6.8-2.6-15.5 3.5-20.5L288 368l-60.2-82.8c-10.9-15 8.2-33.5 22.8-22l117.9 92.6c8 6.3 8.2 18.4 .4 24.9L288 448l38.4 64 122.1 0c35.5 0 64.2-28.8 64-64.3l-.7-160.2 32 0z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-smart-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0"></path></svg>
<span>Home</span>
</a>
<div class="link-list vh-link-list">
@@ -20,7 +20,7 @@ import "./Header.less";
Navs.map(i => (
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
{i.text}
<Image src={i.icon} alt={`${i.text}图标`} width="10" height="10" />
<Svg src={i.icon} />
</a>
))
}
src/components/Header/Header.less
+7 -3
View File
@@ -86,6 +86,7 @@ header.vh-header {
font-size: 1.088rem;
line-height: 1;
}
}
&.search-btn {
@@ -124,10 +125,13 @@ header.vh-header {
}
}
&>img {
width: 1.08rem;
height: 1.08rem;
&>svg {
pointer-events: none;
width: auto;
height: 1.18rem;
object-fit: contain;
stroke: var(--vh-black-88);
stroke-width: 2.88px;
}
}
}
src/components/MobileSidebar/MobileSidebar.astro
+3 -1
View File
@@ -1,6 +1,8 @@
---
import SITE_CONFIG from "@/config";
const { Navs, Title } = SITE_CONFIG;
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
// 侧边栏 MobileSidebar 样式
import "./MobileSidebar.less";
---
@@ -15,7 +17,7 @@ import "./MobileSidebar.less";
{
Navs.map(i => (
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
<object data={i.icon} type="image/svg+xml" />
<Svg src={i.icon} />
{i.text}
</a>
))
src/components/MobileSidebar/MobileSidebar.less
+7 -6
View File
@@ -90,15 +90,16 @@
color: #fff;
background-color: #3366FF;
&>object {
filter: brightness(0) invert(100%);
&>svg {
stroke: #fff;
}
}
&>object {
width: 0.875rem;
height: 0.875rem;
transition: filter 0.16s ease-in-out;
&>svg {
width: auto;
height: 0.888rem;
object-fit: contain;
transition: stroke 0.16s ease-in-out;
}
}
}
src/components/Pagination/Pagination.astro
+7 -7
View File
@@ -8,7 +8,7 @@ import "./Pagination.less";
<section class="vh-article-pagination">
<!-- 上一页 -->
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"}>
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"} title="上一页">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path>
</svg>
@@ -16,7 +16,7 @@ import "./Pagination.less";
<!-- 首页 -->
{
data.first && data.prev && (
<a class={`vh-pagination-item`} href={data.first}>
<a class={`vh-pagination-item`} href={data.first} title="第一页">
1
</a>
)
@@ -24,17 +24,17 @@ import "./Pagination.less";
<!-- 总页的前一页 -->
{
(!data.next || !data.last) && data.prev && data.current !== "/2" && (
<a class={`vh-pagination-item`} href={data.prev}>
<a class={`vh-pagination-item`} href={data.prev} title={`第${fmtPage(data.prev)}页`}>
{fmtPage(data.prev)}
</a>
)
}
<!-- 当前页 -->
<a class="vh-pagination-item active" href="javascript:;">{fmtPage(data.current) || "1"}</a>
<a class="vh-pagination-item active" href="javascript:;" title={`第${fmtPage(data.current)}页`}>{fmtPage(data.current) || "1"}</a>
<!-- 第一页的后一页 -->
{
(!data.prev || !data.first) && data.next && data.last !== "/2" && (
<a class="vh-pagination-item" href={data.next}>
<a class="vh-pagination-item" href={data.next} title={`第${fmtPage(data.next)}页`}>
{fmtPage(data.next)}
</a>
)
@@ -42,13 +42,13 @@ import "./Pagination.less";
<!-- 总页 -->
{
data.next && data.last && (
<a class={`vh-pagination-item`} href={data.last}>
<a class={`vh-pagination-item`} href={data.last} title={`第${fmtPage(data.last)}页`}>
{fmtPage(data.last)}
</a>
)
}
<!-- 下一页 -->
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"}>
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"} title="下一页">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path>
</svg>
src/components/Reward/Reward.less
+1
View File
@@ -24,6 +24,7 @@
justify-content: center;
gap: 1.18rem;
width: 100%;
z-index: 1;
&>span {
position: relative;
src/components/Search/Search.less
+1 -1
View File
@@ -14,7 +14,7 @@
transition: opacity 0.16s ease-in-out;
opacity: 0;
pointer-events: none;
z-index: 10;
z-index: 1;
&.active {
opacity: 1;
src/components/Svg/Svg.astro
+6
View File
@@ -0,0 +1,6 @@
---
const { src } = Astro.props;
const svgContent = await import(`../../../public/assets/images/svg/${src}.svg?raw`).then(m => m.default);
---
{svgContent && <Fragment set:html={svgContent} />}
src/config.ts
+20 -17
View File
@@ -13,30 +13,33 @@ export default {
CreateTime: '2021-09-01',
// 导航栏 (新窗口打开 newWindow: true)
Navs: [
{ text: '朋友', link: '/links', icon: '/assets/images/svg/Navs/links.svg' },
{ text: '圈子', link: '/friends', icon: '/assets/images/svg/Navs/friends.svg' },
{ text: '动态', link: '/talking', icon: '/assets/images/svg/Navs/talking.svg' },
{ text: '昔日', link: '/archives', icon: '/assets/images/svg/Navs/archives.svg' },
{ text: '留言', link: '/message', icon: '/assets/images/svg/Navs/message.svg' },
{ text: '关于', link: '/about', icon: '/assets/images/svg/Navs/about.svg' },
{ text: 'API', link: 'https://api.vvhan.com/', target: true, icon: '/assets/images/svg/Navs/link.svg' },
// 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下，填入文件名即可（封装了 SVG 组件 为了极致压缩 SVG）
// 建议使用 https://tabler.io/icons 直接下载 SVG
{ text: '朋友', link: '/links', icon: 'Nav_friends' },
{ text: '圈子', link: '/friends', icon: 'Nav_rss' },
{ text: '动态', link: '/talking', icon: 'Nav_talking' },
{ text: '昔日', link: '/archives', icon: 'Nav_archives' },
{ text: '留言', link: '/message', icon: 'Nav_message' },
{ text: '关于', link: '/about', icon: 'Nav_about' },
{ text: 'API', link: 'https://api.vvhan.com/', target: true, icon: 'Nav_link' },
],
// 侧边栏个人网站
WebSites: [
{ text: 'Github', link: 'https://github.com/uxiaohan', icon: '/assets/images/svg/WebSites/github.svg' },
{ text: '韩小韩API', link: 'https://api.vvhan.com', icon: '/assets/images/svg/WebSites/api.svg' },
{ text: '每日热榜', link: 'https://hot.vvhan.com', icon: '/assets/images/svg/WebSites/hot.svg' },
{ text: '骤雨重山图床', link: 'https://wp-cdn.4ce.cn', icon: '/assets/images/svg/WebSites/img.svg' },
{ text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: '/assets/images/svg/WebSites/analytics.svg' },
// 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下，填入文件名即可（封装了 SVG 组件 为了极致压缩 SVG）
// 建议使用 https://tabler.io/icons 直接下载 SVG
{ text: 'Github', link: 'https://github.com/uxiaohan', icon: 'WebSite_github' },
{ text: '韩小韩API', link: 'https://api.vvhan.com', icon: 'WebSite_api' },
{ text: '每日热榜', link: 'https://hot.vvhan.com', icon: 'WebSite_hot' },
{ text: '骤雨重山图床', link: 'https://wp-cdn.4ce.cn', icon: 'WebSite_img' },
{ text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: 'WebSite_analytics' },
],
// DNS预解析地址
DNSOptimization: [
'https://i0.wp.com',
'https://tools-api.vvhan.com',
'https://pagead2.googlesyndication.com',
'https://lf9-cdn-tos.bytecdntp.com',
'https://analytics.vvhan.com',
'https://vh-api.4ce.cn',
'https://registry.npmmirror.com',
'https://npm.elemecdn.com'
'https://pagead2.googlesyndication.com'
],
// 博客音乐组件解析接口
vhMusicApi: 'https://meting-dd.2333332.xyz/api',
@@ -57,7 +60,7 @@ export default {
HanAnalytics: { enable: true, server: 'https://analytics.vvhan.com', siteId: 'Hello-HanHexoBlog' },
// Google 广告
GoogleAds: {
ad_Client: 'ca-pub-xxxxxx',
ad_Client: '', //ca-pub-xxxxxx
// 侧边栏广告(不填不开启)
asideAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`,
// 文章页广告(不填不开启)
src/layouts/ToolLayout/ToolLayout.less
+2 -2
View File
@@ -325,11 +325,11 @@
align-items: center;
height: 1.68rem;
width: max-content;
border: 1px solid #3253b4;
border: 1px solid var(--vh-info);
border-radius: 0.88rem;
background-color: #fff;
font-size: 0.72rem;
color: #3253b4;
color: var(--vh-info);
transition: all .2s ease-in-out;
user-select: none;
cursor: pointer;
src/pages/article/[...article].astro
+2 -2
View File
@@ -46,13 +46,13 @@ import "@/styles/ArticleBase.less";
<h1>{post.data.title}</h1>
<div class="article-meta">
<span class="article-meta-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 12h3.5"></path><path d="M12 7v5"></path></svg>
<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
<span class="count"><strong>{article_word_count || "一点"}</strong>字</span>
<span class="time"><strong>{parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}</strong>分钟</span>
</span>
<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6h16"></path><path d="M7 12h13"></path><path d="M10 18h10"></path></svg>
<span>{post.data.categories}</span>
</a>
</div>
src/pages/rss.xml.ts
+6 -3
View File
@@ -1,13 +1,12 @@
import rss from '@astrojs/rss';
import { getRssString } from '@astrojs/rss';
import { getCollection } from 'astro:content';
import { getDescription } from '@/utils/index'
import SITE_CONFIG from '@/config';
const { Title, Description } = SITE_CONFIG;
export async function GET(context: any) {
const posts = await getCollection('blog');
return rss({
const res = await getRssString({
title: Title,
description: Description,
site: context.site,
@@ -18,4 +17,8 @@ export async function GET(context: any) {
link: `/article/${post.data.id}`
})).sort((a: any, b: any) => (new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())),
});
// 添加 XML 样式表指令
const xmlHead = '<?xml version="1.0" encoding="UTF-8"?>';
const xmlMain = res.replace(xmlHead, `${xmlHead}<?xml-stylesheet type="text/xsl" href="/rss.xsl" ?>`).replace(/\/<\/link>/g, '</link>');
return new Response(xmlMain, { headers: { 'Content-Type': 'application/xml' } });
}
src/scripts/Comment.ts
+1 -1
View File
@@ -15,7 +15,7 @@ const WalineFn = async (commentDOM: string, walineInit: any) => {
import('@waline/client/waline-meta.css');
const { init } = await import('@waline/client');
walineInit = init({
el: commentDOM, serverURL: SITE_INFO.Comment.Waline.serverURL, emoji: ['https://registry.npmmirror.com/@waline/emojis/1.3.0/files/alus', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bilibili', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bmoji', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/qq', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/weibo', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/soul-emoji'],
el: commentDOM, path: window.location.pathname.replace(/\/$/, ''), serverURL: SITE_INFO.Comment.Waline.serverURL, emoji: ['https://registry.npmmirror.com/@waline/emojis/1.3.0/files/alus', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bilibili', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/bmoji', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/qq', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/weibo', 'https://registry.npmmirror.com/@waline/emojis/1.3.0/files/soul-emoji'],
imageUploader: async (file: any) => {
const body = new FormData();
body.append('file', file);
src/scripts/Init.ts
+2 -2
View File
@@ -55,6 +55,8 @@ const indexInit = async (only: boolean = true) => {
only && initMobileSidebar();
// SmoothScroll 滚动优化
only && SmoothScroll();
// 图片灯箱
only && ViewImage();
// 顶部导航 Current 状态
initLinkCurrent()
// 初始化文章代码块
@@ -63,8 +65,6 @@ const indexInit = async (only: boolean = true) => {
checkComment() && commentInit(checkComment(), commentLIst)
// 图片懒加载初始化
vhLzImgInit();
// 图片灯箱
only && ViewImage();
// 友情链接初始化
initLinks();
// 朋友圈 RSS 初始化
src/scripts/ViewImage.ts
+2 -2
View File
@@ -8,9 +8,9 @@ const ViewImgList: string[] = [
// 动态页面图片
"main.talking-main>article>.main img",
// Twikoo 评论区图片
".vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)",
".vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.OwO-item img,.tk-owo-emotion)",
// Waline 评论区图片
".vh-comment div[data-waline] img:not(.wl-user-avatar,.tk-owo-emotion,.wl-avatar img,.wl-reaction-list img,.wl-panel img)"
".vh-comment div[data-waline] img:not(.wl-user-avatar,.wl-avatar img,.wl-reaction-list img,.wl-panel img,.tk-owo-emotion,.wl-emoji)"
];
// 初始化
export default async () => {
src/styles/Article.less
+4 -3
View File
@@ -24,18 +24,18 @@ section.vh-container {
&>.article-meta {
display: flex;
align-items: center;
gap: 1.18rem;
gap: 0.88rem;
font-size: 0.85rem;
&>.article-meta-item {
display: flex;
align-items: center;
gap: 0.38rem;
gap: 0.18rem;
width: max-content;
&>svg {
flex-shrink: 0;
height: 0.86rem;
height: 0.888rem;
width: auto;
}
@@ -45,6 +45,7 @@ section.vh-container {
&>span {
&.count {
padding-left: 0.38rem;
color: #3FA67F;
strong {
src/styles/ArticleBase.less
+68 -49
View File
@@ -208,37 +208,37 @@
background-color: #f7f7f7;
&.note-success {
border-color: #01C4B6;
border-left: 5px solid #01C4B6;
border-left-color: #01C4B6;
background-color: #01C4B618;
border-color: var(--vh-success);
border-left: 5px solid var(--vh-success);
border-left-color: var(--vh-success);
background-color: var(--vh-success-hover);
}
&.note-info {
border-color: #3253b4;
border-left: 5px solid #3253b4;
border-left-color: #3253b4;
background-color: #3253b418;
border-color: var(--vh-info);
border-left: 5px solid var(--vh-info);
border-left-color: var(--vh-info);
background-color: var(--vh-info-hover);
}
&.note-warning {
border-color: #DD8636;
border-left: 5px solid #DD8636;
border-left-color: #DD8636;
background-color: #DD863618;
border-color: var(--vh-warning);
border-left: 5px solid var(--vh-warning);
border-left-color: var(--vh-warning);
background-color: var(--vh-warning-hover);
}
&.note-error {
border-color: #DE3C3D;
border-left: 5px solid #DE3C3D;
border-left-color: #DE3C3D;
background-color: #DE3C3D18;
border-color: var(--vh-error);
border-left: 5px solid var(--vh-error);
border-left-color: var(--vh-error);
background-color: var(--vh-error-hover);
}
&.note-import {
border-left: 5px solid #B984DF;
border-left-color: #B984DF;
background-color: #B984DF18;
border-left: 5px solid var(--vh-import);
border-left-color: var(--vh-import);
background-color: var(--vh-import-hover);
}
p {
@@ -254,7 +254,7 @@
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.618rem;
gap: 0.58rem;
padding: 0 1.18rem;
width: max-content;
max-width: 100%;
@@ -269,36 +269,35 @@
overflow: hidden;
&:hover {
&::after {
&::before {
height: 100%;
}
}
&::before {
&::after {
flex-shrink: 0;
content: '';
background-color: #000;
mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
mask: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%22100%25%22%20%20height%3D%22100%25%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-unlink%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M17%2022v-2%22%20%2F%3E%3Cpath%20d%3D%22M9%2015l6%20-6%22%20%2F%3E%3Cpath%20d%3D%22M11%206l.463%20-.536a5%205%200%200%201%207.071%207.072l-.534%20.464%22%20%2F%3E%3Cpath%20d%3D%22M13%2018l-.397%20.534a5.068%205.068%200%200%201%20-7.127%200a4.972%204.972%200%200%201%200%20-7.071l.524%20-.463%22%20%2F%3E%3Cpath%20d%3D%22M20%2017h2%22%20%2F%3E%3Cpath%20d%3D%22M2%207h2%22%20%2F%3E%3Cpath%20d%3D%22M7%202v2%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center center;
background-size: contain;
width: 1rem;
height: 1rem;
width: 1.18rem;
height:1.18rem;
overflow: hidden;
}
&::after {
&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: var(--vh-black-default-66);
background-color: var(--vh-main-color);
transition: height 0.16s ease-in-out;
z-index: -1;
}
&>span {
box-sizing: border-box;
color: #000;
@@ -311,62 +310,82 @@
}
&.btn-success {
border-color: #01C4B6;
border-color: var(--vh-success);
&>span {
color: #01C4B6;
color: var(--vh-success);
}
&::before {
background-color: #01C4B6;
&::before{
background-color: var(--vh-success-hover);
}
&::after {
background-color: var(--vh-success);
}
}
&.btn-info {
border-color: #3253b4;
border-color: var(--vh-info);
&>span {
color: #3253b4;
color: var(--vh-info);
}
&::before {
background-color: #3253b4;
&::before{
background-color: var(--vh-info-hover);
}
&::after {
background-color: var(--vh-info);
}
}
&.btn-warning {
border-color: #DD8636;
border-color: var(--vh-warning);
&>span {
color: #DD8636;
color: var(--vh-warning);
}
&::before {
background-color: #DD8636;
&::before{
background-color: var(--vh-warning-hover);
}
&::after {
background-color: var(--vh-warning);
}
}
&.btn-error {
border-color: #DE3C3D;
border-color: var(--vh-error);
&>span {
color: #DE3C3D;
color: var(--vh-error);
}
&::before {
background-color: #DE3C3D;
&::before{
background-color: var(--vh-error-hover);
}
&::after {
background-color: var(--vh-error);
}
}
&.btn-import {
border-color: #B984DF;
border-color: var(--vh-import);
&>span {
color: #B984DF;
color: var(--vh-import);
}
&::before {
background-color: #B984DF;
&::before{
background-color: var(--vh-import-hover);
}
&::after {
background-color: var(--vh-import);
}
}
}
@@ -524,7 +543,7 @@
}
&::after {
background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
background: var(--vh-success) url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
background-size: 1.16rem 1.16rem;
}
src/styles/Base.less
+19
View File
@@ -28,6 +28,25 @@
--vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%);
--vh-main-color-16: rgb(from var(--vh-main-color) r g b / 16%);
--vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%);
// Info
--vh-info: #3253b4;
--vh-info-hover: #3253b418;
// Success
--vh-success: #01C4B6;
--vh-success-hover: #01C4B618;
// Warning
--vh-warning: #DD8636;
--vh-warning-hover: #DD863618;
// Error
--vh-error: #DE3C3D;
--vh-error-hover: #DE3C3D18;
// Import
--vh-import: #B984DF;
--vh-import-hover: #B984DF18;
// 尺寸
--vh-size-h1: 1.125rem;
--vh-size-h2: 0.88rem;