test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-11-29 18:48:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: 更新依赖，修改 unocss 写法

Browse Source
This commit is contained in:
Hooray Hu 2024-05-22 14:52:16 +08:00
parent b639b487db
commit fda48176ee
35 changed files with 315 additions and 548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -27,7 +27,7 @@
"@imengyu/vue3-context-menu": "^1.4.1",
"@vueuse/core": "^10.9.0",
"@vueuse/integrations": "^10.9.0",
"axios": "^1.7.0",
"axios": "^1.7.2",
"dayjs": "^1.11.11",
"defu": "^6.1.4",
"element-plus": "^2.7.3",
@ -38,7 +38,7 @@
"mitt": "^3.0.1",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"overlayscrollbars": "^2.8.0",
"overlayscrollbars": "^2.8.1",
"overlayscrollbars-vue": "^0.5.9",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.2",
@ -52,7 +52,7 @@
},
"devDependencies": {
"@antfu/eslint-config": "2.18.1",
"@iconify/json": "^2.2.211",
"@iconify/json": "^2.2.212",
"@iconify/vue": "^4.1.2",
"@stylistic/stylelint-config": "^1.0.1",
"@types/lodash-es": "^4.17.12",
@ -60,7 +60,7 @@
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.2",
"@types/qs": "^6.9.15",
"@unocss/eslint-plugin": "^0.59.4",
"@unocss/eslint-plugin": "^0.60.3",
"@vitejs/plugin-legacy": "^5.4.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0",
@ -88,7 +88,7 @@
"stylelint-scss": "^6.3.0",
"svgo": "^3.3.2",
"typescript": "^5.4.5",
"unocss": "^0.59.4",
"unocss": "^0.60.3",
"unplugin-auto-import": "^0.17.6",
"unplugin-turbo-console": "^1.8.6",
"unplugin-vue-components": "^0.27.0",

676
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

4
src/assets/styles/globals.scss
View File

@ -115,7 +115,7 @@ textarea {
.v-popper--theme-dropdown .v-popper__inner,
.v-popper--theme-tooltip .v-popper__inner {
--at-apply: bg-white dark:bg-stone-8 text-dark dark:text-white rounded shadow ring-1 ring-gray-200 dark:ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
--at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
}
@ -124,7 +124,7 @@ textarea {
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--at-apply: border-white dark:border-stone-8;
--at-apply: border-white dark-border-stone-8;
}
.v-popper--theme-tooltip .v-popper__arrow-outer,

4
src/components/NotAllowed/index.vue
View File

@ -34,8 +34,8 @@ function goBack() {
</script>
<template>
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
<SvgIcon name="403" class="text-[300px] lg:text-[400px]" />
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
<SvgIcon name="403" class="text-[300px] lg-text-[400px]" />
<div class="flex flex-col gap-4">
<h1 class="m-0 text-6xl font-sans">
403

2
src/components/PageHeader/index.vue
View File

@ -19,7 +19,7 @@ const slots = useSlots()
{{ title }}
</slot>
</div>
<div class="mt-2 text-sm text-stone-5 empty:hidden">
<div class="mt-2 text-sm text-stone-5 empty-hidden">
<slot name="content">
{{ content }}
</slot>

2
src/components/PageMain/index.vue
View File

@ -41,7 +41,7 @@ function unCollaspe() {
<slot />
</div>
<div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
<SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
<SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover-op-100" />
</div>
</div>
</template>

12
src/components/SystemInfo/index.vue
View File

@ -14,14 +14,6 @@ onMounted(() => {
<template>
<HSlideover v-model="isShow" title="系统信息">
<div class="px-4">
<h2 class="m-0 text-lg font-bold">
版本号
</h2>
<div class="my-4 text-center text-lg font-sans">
{{ pkg.version }}
</div>
</div>
<div class="px-4">
<h2 class="m-0 text-lg font-bold">
最后编译时间
@ -35,7 +27,7 @@ onMounted(() => {
生产环境依赖
</h2>
<ul class="list-none pl-0 text-sm">
<li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
<li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover-bg-stone-1 dark-hover-bg-stone-9">
<div class="font-bold">
{{ key }}
</div>
@ -50,7 +42,7 @@ onMounted(() => {
开发环境依赖
</h2>
<ul class="list-none pl-0 text-sm">
<li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
<li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover-bg-stone-1 dark-hover-bg-stone-9">
<div class="font-bold">
{{ key }}
</div>

6
src/layouts/components/AppSetting/index.vue
View File

@ -351,7 +351,7 @@ function handleCopy() {
&::before,
&::after {
--at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
--at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
}
}
@ -359,7 +359,7 @@ function handleCopy() {
--at-apply: flex items-center justify-center gap-4 pb-4;
.mode {
--at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
--at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
&.active {
--at-apply: ring-ui-primary ring-2;
@ -428,7 +428,7 @@ function handleCopy() {
}
.setting-item {
--at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover:bg-stone-1 dark:hover:bg-stone-9;
--at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
.label {
--at-apply: flex items-center flex-shrink-0 gap-2 text-sm;

10
src/layouts/components/BackTop/index.vue
View File

@ -5,11 +5,11 @@ defineOptions({
const transitionClass = {
enterActiveClass: 'ease-out duration-300',
enterFromClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterToClass: 'opacity-100 translate-y-0 lg:scale-100',
enterFromClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterToClass: 'opacity-100 translate-y-0 lg-scale-100',
leaveActiveClass: 'ease-in duration-200',
leaveFromClass: 'opacity-100 translate-y-0 lg:scale-100',
leaveToClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFromClass: 'opacity-100 translate-y-0 lg-scale-100',
leaveToClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
onMounted(() => {
@ -37,7 +37,7 @@ function handleClick() {
<template>
<Teleport to="body">
<Transition v-bind="transitionClass">
<div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
<div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark-bg-dark hover-bg-stone-1 dark-ring-stone-7 dark-hover-bg-dark/50" @click="handleClick">
<SvgIcon name="i-icon-park-outline:to-top-one" :size="24" />
</div>
</Transition>

4
src/layouts/components/Breadcrumb/item.vue
View File

@ -22,14 +22,14 @@ function onClick() {
</script>
<template>
<div class="breadcrumb-item flex items-center text-dark dark:text-white">
<div class="breadcrumb-item flex items-center text-dark dark-text-white">
<span class="separator mx-2">
{{ separator }}
</span>
<span
class="text flex items-center opacity-60"
:class="{
'is-link cursor-pointer transition-opacity hover:opacity-100': !!props.to,
'is-link cursor-pointer transition-opacity hover-opacity-100': !!props.to,
}" @click="onClick"
>
<slot />

2
src/layouts/components/Copyright/index.vue
View File

@ -31,7 +31,7 @@ const settingsStore = useSettingsStore()
}
a {
--at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
--at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
}
}
</style>

4
src/layouts/components/Header/index.vue
View File

@ -40,12 +40,12 @@ function handlerMouserScroll(event: WheelEvent) {
}"
>
<div
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>

2
src/layouts/components/HotkeysIntro/index.vue
View File

@ -20,7 +20,7 @@ onMounted(() => {
<template>
<HDialog v-model="isShow" title="快捷键介绍">
<div class="px-4">
<div class="grid gap-2 sm:grid-cols-2">
<div class="grid gap-2 sm-grid-cols-2">
<div>
<h2 class="m-0 text-lg font-bold">
全局

4
src/layouts/components/MainSidebar/index.vue
View File

@ -26,12 +26,12 @@ const { switchTo } = useMenu()
}"
>
<div
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover:(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>

4
src/layouts/components/Menu/item.vue
View File

@ -52,7 +52,7 @@ defineExpose({
target: item.meta?.link ? '_blank' : '_self',
class: 'no-underline',
}),
}" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
}" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
'px-3!': rootMenu.isMenuPopup && level === 0,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
@ -68,7 +68,7 @@ defineExpose({
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
}" :style="indentStyle"
>
<SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
:class="{

2
src/layouts/components/Menu/sub.vue
View File

@ -184,7 +184,7 @@ function handleMouseleave() {
<OverlayScrollbarsComponent
v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
'ring-1 ring-stone-2 dark:ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
}"
>

26
src/layouts/components/Search/index.vue
View File

@ -28,11 +28,11 @@ const overlayTransitionClass = ref({
const transitionClass = computed(() => {
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterTo: 'opacity-100 translate-y-0 lg:scale-100',
enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterTo: 'opacity-100 translate-y-0 lg-scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
})
@ -245,23 +245,23 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<TransitionRoot as="template" :show="isShow">
<Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow && eventBus.emit('global-search-toggle')">
<TransitionChild as="template" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
<div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark-bg-stone-8/75" />
</TransitionChild>
<div class="fixed inset-0">
<div class="h-full flex items-end justify-center p-4 text-center lg:items-center">
<div class="h-full flex items-end justify-center p-4 text-center lg-items-center">
<TransitionChild as="template" v-bind="transitionClass">
<DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg:max-w-2xl">
<div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
<div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
<DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg-max-w-2xl">
<div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark-bg-stone-8">
<div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark-stone-7">
<SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark-text-white focus-outline-none placeholder-stone-4 dark-placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
</div>
<DialogDescription class="relative m-0 of-y-hidden">
<OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
<template v-if="resultList.length > 0">
<a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
<a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark-bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
<SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
<div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
<div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark-stone-7">
<div class="truncate text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
<Breadcrumb v-if="item.breadcrumb.length" class="truncate">
<BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
@ -281,7 +281,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
</template>
</OverlayScrollbarsComponent>
</DialogDescription>
<div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark:stone-7">
<div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark-stone-7">
<div class="flex gap-8">
<div class="inline-flex items-center gap-1 text-xs">
<HKbd>

2
src/layouts/components/SubSidebar/index.vue
View File

@ -68,7 +68,7 @@ onMounted(() => {
</div>
</div>
<div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
<span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark:bg-stone-9 hover:bg-stone-2 dark:hover:bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark-bg-stone-9 hover-bg-stone-2 dark-hover-bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<SvgIcon name="toolbar-collapse" />
</span>
</div>

10
src/layouts/components/Topbar/Tabbar/index.vue
View File

@ -205,7 +205,7 @@ onUnmounted(() => {
z-index: 1000;
.mx-context-menu {
--at-apply: fixed ring-1 ring-stone-2 dark:ring-stone-7 shadow-2xl;
--at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
background-color: var(--g-container-bg);
@ -213,7 +213,7 @@ onUnmounted(() => {
--at-apply: transition-background-color;
&:not(.disabled):hover {
--at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
--at-apply: cursor-pointer bg-stone-1 dark-bg-stone-9;
}
span {
@ -234,7 +234,7 @@ onUnmounted(() => {
background-color: var(--g-container-bg);
&::after {
--at-apply: bg-stone-2 dark:bg-stone-7;
--at-apply: bg-stone-2 dark-bg-stone-7;
}
}
}
@ -412,14 +412,14 @@ onUnmounted(() => {
transform: translateY(-50%);
&:hover {
--at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
--at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
background-color: var(--g-bg);
}
}
.hotkey-number {
--at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
--at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
position: absolute;
top: 50%;

4
src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
View File

@ -12,9 +12,9 @@ const settingsStore = useSettingsStore()
<template>
<span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
<SvgIcon v-if="settingsStore.mode === 'mobile'" name="i-ri:search-line" />
<span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark:bg-stone-9 dark:text-white hover:ring-1 dark:ring-stone-7">
<span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark-bg-stone-9 dark-text-white hover-ring-1 dark-ring-stone-7">
<SvgIcon name="i-ri:search-line" />
<span class="text-sm text-stone-5 transition group-hover:text-dark dark:group-hover:text-white">搜索</span>
<span class="text-sm text-stone-5 transition group-hover-text-dark dark-group-hover-text-white">搜索</span>
<HKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="ml-2">{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
</span>
</span>

1
src/layouts/components/Topbar/Toolbar/rightSide.vue
View File

@ -34,6 +34,7 @@ watch(() => userStore.avatar, () => {
:items="[
[
{ label: settingsStore.settings.home.title, handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
{ label: '个人设置', handle: () => router.push({ name: 'personalSetting' }) },
],
[
{ label: '快捷键介绍', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },

2
src/layouts/components/views/link.vue
View File

@ -26,7 +26,7 @@ function open() {
<PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
<div class="flex flex-col items-center">
<SvgIcon name="i-icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
<div class="my-2 text-xl text-dark dark:text-white">
<div class="my-2 text-xl text-dark dark-text-white">
是否访问此链接
</div>
<div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">

2
src/layouts/index.vue
View File

@ -240,7 +240,7 @@ header:not(.header-leave-active) + .wrapper {
}
.app-setting {
--at-apply: text-white dark:text-dark bg-ui-primary;
--at-apply: text-white dark-text-dark bg-ui-primary;
position: fixed;
top: calc(50% + 250px);

6
src/layouts/ui-kit/HButton.vue
View File

@ -13,11 +13,11 @@ const props = withDefaults(
)
const buttonClass = computed(() => [
'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
'focus-outline-none focus-visible-outline-0 cursor-pointer disabled-cursor-not-allowed disabled-opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
props.outline
? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
: 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark-bg-dark hover-not-disabled-bg-ui-primary/10 dark-hover-not-disabled-bg-ui-primary/10 focus-visible-ring-2'
: 'shadow-sm text-ui-text bg-ui-primary hover-bg-ui-primary/75 disabled-bg-ui-primary/90 focus-visible-ring-inset focus-visible-ring-2',
])
</script>

4
src/layouts/ui-kit/HCheckList.vue
View File

@ -26,8 +26,8 @@ watch(value, (val) => {
</script>
<template>
<div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
<button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
<div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark-bg-stone-7">
<button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled-cursor-not-allowed disabled-opacity-50 hover-not-disabled-(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
<SvgIcon v-if="option.icon" :name="option.icon" />
<template v-else>
{{ option.label }}

16
src/layouts/ui-kit/HDialog.vue
View File

@ -37,11 +37,11 @@ const overlayTransitionClass = ref({
const transitionClass = computed(() => {
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterTo: 'opacity-100 translate-y-0 lg:scale-100',
enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterTo: 'opacity-100 translate-y-0 lg-scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
})
@ -55,14 +55,14 @@ function close() {
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
<TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="min-h-full flex items-end justify-center p-4 text-center lg:items-center">
<div class="min-h-full flex items-end justify-center p-4 text-center lg-items-center">
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg:my-8 lg:max-w-lg dark:bg-stone-8">
<DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg-my-8 lg-max-w-lg dark-bg-stone-8">
<div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
<DialogTitle m-0 text-lg text-dark dark:text-white>
<DialogTitle m-0 text-lg text-dark dark-text-white>
{{ title }}
</DialogTitle>
<SvgIcon name="i-carbon:close" cursor-pointer @click="close" />

4
src/layouts/ui-kit/HDropdownMenu.vue
View File

@ -19,8 +19,8 @@ const myItems = computed(() => {
<VMenu :show-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover', 'click']" :delay="200" v-bind="$attrs">
<slot />
<template #popper>
<div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark:stone-7 last:size-0">
<button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" @click="v.handle">
<div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark-stone-7 last:size-0">
<button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled-cursor-not-allowed dark-text-white disabled-opacity-50 hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" @click="v.handle">
{{ v.label }}
</button>
</div>

4
src/layouts/ui-kit/HInput.vue
View File

@ -19,7 +19,7 @@ defineExpose({
</script>
<template>
<div class="relative w-full lg:w-48">
<input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5">
<div class="relative w-full lg-w-48">
<input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
</div>
</template>

2
src/layouts/ui-kit/HKbd.vue
View File

@ -1,5 +1,5 @@
<template>
<kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark:bg-dark-9 dark:text-white dark:ring-stone-7">
<kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark-bg-dark-9 dark-text-white dark-ring-stone-7">
<slot />
</kbd>
</template>

6
src/layouts/ui-kit/HSelect.vue
View File

@ -28,7 +28,7 @@ const selected = computed({
<template>
<VMenu :triggers="['click']" :popper-triggers="['click']" :delay="0" :disabled="disabled" v-bind="$attrs">
<div class="w-full inline-flex">
<button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg:w-48 disabled:cursor-not-allowed dark:bg-dark focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary" :disabled="disabled">
<button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg-w-48 disabled-cursor-not-allowed dark-bg-dark focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary" :disabled="disabled">
<span class="block truncate">
{{ selected.label }}
</span>
@ -38,8 +38,8 @@ const selected = computed({
</button>
</div>
<template #popper>
<div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg:w-48 focus:outline-none">
<button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled:cursor-not-allowed hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
<div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg-w-48 focus-outline-none">
<button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled-cursor-not-allowed hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
{{ option.label }}
</button>
</div>

6
src/layouts/ui-kit/HSlideover.vue
View File

@ -58,12 +58,12 @@ function close() {
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 z-2000 flex" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
<TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
</TransitionChild>
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark:bg-stone-8 focus:outline-none>
<DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark-bg-stone-8 focus-outline-none>
<div flex="~ items-center justify-between" p-4 border-b="~ solid stone/15" text-6>
<DialogTitle m-0 text-lg text-dark dark:text-white>
<DialogTitle m-0 text-lg text-dark dark-text-white>
{{ title }}
</DialogTitle>
<SvgIcon name="i-carbon:close" cursor-pointer @click="close" />

8
src/layouts/ui-kit/HTabList.vue
View File

@ -35,12 +35,12 @@ function handleChange(index: number) {
<template>
<TabGroup :selected-index="selectedIndex" @change="handleChange">
<TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark:bg-stone-9 dark:ring-stone-8">
<TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark-bg-stone-9 dark-ring-stone-8">
<Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
<button
class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8" :class="{
'cursor-default bg-white dark:bg-dark-9': selected,
'cursor-pointer opacity-50 hover:(opacity-100)': !selected,
class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8" :class="{
'cursor-default bg-white dark-bg-dark-9': selected,
'cursor-pointer opacity-50 hover-(opacity-100)': !selected,
}"
>
<SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />

6
src/layouts/ui-kit/HToggle.vue
View File

@ -16,10 +16,10 @@ const enabled = defineModel<boolean>()
</script>
<template>
<Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark:bg-stone-7']">
<span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
<Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled-cursor-not-allowed disabled-opacity-50 focus-outline-none focus-visible-ring-2 focus-visible-ring-offset-2 focus-visible-ring-offset-white dark-focus-visible-ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark-bg-stone-7']">
<span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark-bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
<span class="absolute inset-0 h-full w-full flex items-center justify-center">
<SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark:text-stone-3" />
<SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark-text-stone-3" />
</span>
</span>
</Switch>

2
src/router/index.ts
View File

@ -84,7 +84,7 @@ router.beforeEach(async (to, from, next) => {
// 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
const removeRoutes: (() => void)[] = []
routeStore.flatRoutes.forEach((route) => {
if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
}
})

4
src/views/[...all].vue
View File

@ -38,8 +38,8 @@ function goBack() {
</script>
<template>
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
<SvgIcon name="404" class="text-[300px] lg:text-[400px]" />
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
<SvgIcon name="404" class="text-[300px] lg-text-[400px]" />
<div class="flex flex-col gap-4">
<h1 class="m-0 text-6xl font-sans">
404