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

更新依赖，eslint 增加 unocss 配置

Browse Source
This commit is contained in:
Hooray Hu 2023-11-28 16:02:42 +08:00
parent b96e9dc4c9
commit b5b5a8e873
32 changed files with 422 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
eslint.config.js
View File

@ -2,6 +2,7 @@ import antfu from '@antfu/eslint-config'
export default antfu(
{
unocss: true,
ignores: [
'public',
'dist*',

13
package.json
View File

@ -26,10 +26,10 @@
"axios": "^1.6.2",
"dayjs": "^1.11.10",
"defu": "^6.1.3",
"element-plus": "^2.4.2",
"element-plus": "^2.4.3",
"eruda": "^3.0.1",
"floating-vue": "2.0.0-beta.24",
"hotkeys-js": "^3.12.1",
"hotkeys-js": "^3.12.2",
"lodash-es": "^4.17.21",
"mitt": "^3.0.1",
"mockjs": "^1.1.0",
@ -47,13 +47,14 @@
"vue-router": "^4.2.5"
},
"devDependencies": {
"@antfu/eslint-config": "2.1.0",
"@iconify/json": "^2.2.146",
"@antfu/eslint-config": "2.1.1",
"@iconify/json": "^2.2.148",
"@iconify/vue": "^4.1.1",
"@types/lodash-es": "^4.17.12",
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.2",
"@types/qs": "^6.9.10",
"@unocss/eslint-plugin": "^0.57.7",
"@vitejs/plugin-legacy": "^5.2.0",
"@vitejs/plugin-vue": "^4.5.0",
"@vitejs/plugin-vue-jsx": "^3.1.0",
@ -62,7 +63,7 @@
"cz-git": "^1.7.1",
"eslint": "^8.54.0",
"esno": "^4.0.0",
"fs-extra": "^11.1.1",
"fs-extra": "^11.2.0",
"http-server": "^14.1.1",
"inquirer": "^9.2.12",
"lint-staged": "^15.1.0",
@ -86,7 +87,7 @@
"vite-plugin-banner": "^0.7.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-mock": "^2.9.8",
"vite-plugin-pages": "^0.31.0",
"vite-plugin-pages": "^0.32.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-inspector": "^4.0.0",
"vite-plugin-vue-meta-layouts": "^0.3.3",

477
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

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

@ -28,7 +28,7 @@ function onScroll() {
<template>
<div
class="z-4 bottom-0 p-5 text-center bg-[var(--g-container-bg)] transition" :class="[
class="bottom-0 z-4 bg-[var(--g-container-bg)] p-5 text-center transition" :class="[
isBottom ? 'shadow-[0_0_1px_0_var(--g-box-shadow-color)]' : 'shadow-[0_-10px_10px_-10px_var(--g-box-shadow-color)]',
]" data-fixed-calc-width
>

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

@ -30,13 +30,13 @@ function goBack() {
</script>
<template>
<div class="flex items-center justify-between flex-col lg:flex-row lg:gap-12 absolute left-[50%] top-[50%] -translate-x-50% -translate-y-50%">
<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
</h1>
<div class="desc mx-0 text-stone-5 text-xl">
<div class="desc mx-0 text-xl text-stone-5">
抱歉，你无权访问该页面
</div>
<div>

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

@ -12,7 +12,7 @@ const slots = useSlots()
</script>
<template>
<div class="page-header flex items-center justify-between flex-wrap gap-5 mb-5 px-5 py-4 bg-[var(--g-container-bg)] transition-background-color-300">
<div class="page-header mb-5 flex flex-wrap items-center justify-between gap-5 bg-[var(--g-container-bg)] px-5 py-4 transition-background-color-300">
<div class="main flex-[1_1_70%]">
<div class="text-2xl">
<slot name="title">
@ -25,7 +25,7 @@ const slots = useSlots()
</slot>
</div>
</div>
<div v-if="slots.default" class="flex-none ml-a">
<div v-if="slots.default" class="ml-a flex-none">
<slot />
</div>
</div>

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

@ -26,13 +26,13 @@ function unCollaspe() {
<template>
<div
class="page-main flex flex-col relative m-4 bg-[var(--g-container-bg)] transition-background-color-300" :class="{
class="page-main relative m-4 flex flex-col bg-[var(--g-container-bg)] transition-background-color-300" :class="{
'of-hidden': isCollaspe,
}" :style="{
height: isCollaspe ? height : '',
}"
>
<div v-if="titleSlot || title" class="title-container px-5 py-4 border-b-1 border-b-solid border-b-[var(--g-bg)] transition-border-color-300">
<div v-if="titleSlot || title" class="title-container border-b-1 border-b-[var(--g-bg)] border-b-solid px-5 py-4 transition-border-color-300">
<slot name="title">
{{ title }}
</slot>
@ -40,8 +40,8 @@ function unCollaspe() {
<div class="main-container p-5">
<slot />
</div>
<div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full pt-10 pb-2 text-center cursor-pointer bg-gradient-to-b from-transparent to-[var(--g-container-bg)]" @click="unCollaspe">
<SvgIcon name="ep:arrow-down" class="text-xl op-30 hover:op-100 transition-opacity" />
<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="ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
</div>
</div>
</template>

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

@ -46,8 +46,8 @@ function toggle() {
}"
>
<slot :fold="isFold" />
<div v-if="showToggle" class="absolute left-0 bottom-0 w-full text-center translate-y-1/2">
<button class="outline-none cursor-pointer inline-flex items-center px-2 h-5 border-size-0 font-medium text-xs rounded select-none bg-[var(--g-bg)]" @click="toggle">
<div v-if="showToggle" class="absolute bottom-0 left-0 w-full translate-y-1/2 text-center">
<button class="h-5 inline-flex cursor-pointer select-none items-center border-size-0 rounded bg-[var(--g-bg)] px-2 text-xs font-medium outline-none" @click="toggle">
<SvgIcon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
</button>
</div>

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

@ -68,7 +68,7 @@ const style = computed(() => {
</script>
<template>
<i class="h-[1em] w-[1em] leading-[1em] flex-inline justify-center items-center relative fill-current" :style="style">
<i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
<i v-if="outputType === 'css'" :class="outputName" />
<Icon v-else-if="outputType === 'svg'" :icon="outputName" />
<svg v-else h-1em w-1em aria-hidden="true">

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

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

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

@ -57,7 +57,7 @@ function handleCopy() {
<template>
<HSlideover v-model="isShow" title="应用配置">
<div class="px-4 py-2 rounded-2 text-sm/6 c-rose bg-rose/20 ">
<div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
<p class="my-1">
应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
</p>
@ -68,7 +68,7 @@ function handleCopy() {
<div class="divider">
颜色主题风格
</div>
<div class="flex justify-center items-center pb-4">
<div class="flex items-center justify-center pb-4">
<HToggle v-model="isDark" on-icon="ri:sun-line" off-icon="ri:moon-line" />
</div>
<div v-if="settingsStore.mode === 'pc'" class="divider">

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

@ -37,7 +37,7 @@ function handleClick() {
<template>
<Teleport to="body">
<Transition v-bind="transitionClass">
<div v-if="scrollTop && scrollTop >= 200" class="fixed z-1000 right-4 bottom-4 w-12 h-12 flex justify-center items-center rounded-full cursor-pointer shadow-lg ring-1 ring-inset ring-stone-3 dark:ring-stone-7 bg-white dark:bg-dark hover:bg-stone-1 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="icon-park-outline:to-top-one" :size="24" />
</div>
</Transition>

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

@ -39,13 +39,13 @@ function handlerMouserScroll(event: WheelEvent) {
}"
>
<div
v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-3 transition-all cursor-pointer group text-[var(--g-header-menu-color)] hover:(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])" :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 justify-center items-center gap-1 flex-1">
<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 />
<span class="flex-1 text-sm w-full truncate transition-width transition-height transition-opacity">
<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>
</div>

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

@ -20,9 +20,9 @@ onMounted(() => {
<template>
<HDialog v-model="isShow" title="快捷键介绍">
<div class="px-4">
<div class="grid md:grid-cols-2 gap-2">
<div class="grid gap-2 md:grid-cols-2">
<div>
<h2 class="text-lg font-bold m-0">
<h2 class="m-0 text-lg font-bold">
全局
</h2>
<ul class="list-none pl-4 text-sm">
@ -39,7 +39,7 @@ onMounted(() => {
</ul>
</div>
<div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
<h2 class="text-lg font-bold m-0">
<h2 class="m-0 text-lg font-bold">
主导航
</h2>
<ul class="list-none pl-4 text-sm">

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

@ -30,8 +30,8 @@ const to = computed(() => {
</script>
<template>
<RouterLink :to="to" class="flex-center gap-2 w-inherit h-[var(--g-sidebar-logo-height)] px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
<img v-if="showLogo" :src="logo" class="logo w-[30px] h-[30px] object-contain">
<span v-if="showTitle" class="block font-bold truncate">{{ title }}</span>
<RouterLink :to="to" class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
<img v-if="showLogo" :src="logo" class="logo h-[30px] w-[30px] object-contain">
<span v-if="showTitle" class="block truncate font-bold">{{ title }}</span>
</RouterLink>
</template>

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

@ -26,13 +26,13 @@ const { switchTo } = useMenu()
}"
>
<div
v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-2! py-4 transition-all cursor-pointer group text-[var(--g-main-sidebar-menu-color)] hover:(text-[var(--g-main-sidebar-menu-hover-color)] bg-[var(--g-main-sidebar-menu-hover-bg)])" :class="{
v-if="item.children && item.children.length !== 0" class="menu-item-container group 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="inline-flex flex-col justify-center items-center flex-1 gap-[2px] w-full">
<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 />
<span class="flex-1 text-sm w-full text-center truncate transition-width transition-height transition-opacity">
<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>
</div>

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

@ -44,13 +44,13 @@ defineExpose({
}"
>
<div
class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-5 py-4 transition-all cursor-pointer group text-[var(--g-sub-sidebar-menu-color)] hover:(text-[var(--g-sub-sidebar-menu-hover-color)] bg-[var(--g-sub-sidebar-menu-hover-bg)])" :class="{
class="menu-item-container group 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"
>
<div
class="inline-flex justify-center items-center gap-[12px] flex-1" :class="{
class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
@ -58,7 +58,7 @@ defineExpose({
>
<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="flex-1 text-sm w-0 truncate transition-width transition-height transition-opacity"
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
:class="{
'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
@ -68,7 +68,7 @@ defineExpose({
</span>
</div>
<i
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative w-[10px] ml-1 before:(content-empty absolute w-[6px] h-[1.5px] bg-current -translate-y-[1px] transition-transform-200) after:(content-empty absolute w-[6px] h-[1.5px] bg-current -translate-y-[1px] transition-transform-200)" :class="[
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
rootMenu.isMenuPopup && level === 0 && 'opacity-0',
rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',

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

@ -275,26 +275,26 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<template>
<TransitionRoot as="template" :show="isShow">
<Dialog :initial-focus="searchInputRef" class="fixed inset-0 flex z-2000" @close="isShow && eventBus.emit('global-search-toggle')">
<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 transition-opacity bg-stone-200/75 dark:bg-stone-8/75 backdrop-blur-sm" />
<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="flex h-full items-end sm:items-center justify-center text-center p-4 sm:p-0">
<div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild as="template" v-bind="transitionClass">
<DialogPanel class="relative text-left w-full sm:max-w-2xl h-full max-h-4/5 flex flex-col">
<div class="flex flex-col bg-white dark:bg-stone-8 rounded-xl shadow-xl overflow-y-auto">
<DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm: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="ep:search" :size="18" class="text-stone-5" />
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full focus:outline-none border-0 rounded-md placeholder-stone-4 dark:placeholder-stone-5 text-base px-3 bg-transparent text-dark dark:text-white" @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 items-center cursor-pointer" :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-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
<div class="text-base font-bold truncate">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
<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">
{{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
@ -306,14 +306,14 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<template v-else>
<div flex="center col" py-6 text-stone-5>
<SvgIcon name="tabler:mood-empty" :size="40" />
<p text-base m-2>
<p m-2 text-base>
没有找到你想要的
</p>
</div>
</template>
</OverlayScrollbarsComponent>
</DialogDescription>
<div v-if="settingsStore.mode === 'pc'" class="px-4 py-3 flex justify-between" 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>

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

@ -53,10 +53,10 @@ watch(() => userStore.avatar, () => {
</script>
<template>
<div class="tools flex items-center gap-4 px-4 whitespace-nowrap">
<span v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'" class="group inline-flex items-center gap-1 px-2 py-1.5 rounded-2 text-dark dark:text-white bg-stone-1 dark:bg-stone-9 ring-inset ring-stone-3 dark:ring-stone-7 hover:ring-1 cursor-pointer transition" @click="eventBus.emit('global-search-toggle')">
<div class="tools flex items-center gap-4 whitespace-nowrap px-4">
<span v-if="settingsStore.settings.navSearch.enable && settingsStore.mode === 'pc'" class="group inline-flex cursor-pointer items-center gap-1 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" @click="eventBus.emit('global-search-toggle')">
<SvgIcon name="ri:search-line" />
<span class="text-sm text-stone-5 group-hover:text-dark dark:group-hover:text-white transition">搜索</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>
<div class="flex items-center empty:hidden">
@ -86,8 +86,8 @@ watch(() => userStore.avatar, () => {
],
]"
>
<div flex-center gap-1 cursor-pointer>
<img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="w-[24px] h-[24px] rounded-full">
<div flex-center cursor-pointer gap-1>
<img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="h-[24px] w-[24px] rounded-full">
<SvgIcon v-else name="carbon:user-avatar-filled-alt" :size="24" class="text-gray-400" />
{{ userStore.account }}
<SvgIcon name="ep:caret-bottom" />

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

@ -59,8 +59,8 @@ function pathCompile(path: string) {
<template>
<div class="toolbar-container">
<div class="left-box">
<div v-if="enableSubMenuCollapseButton" class="flex-center px-2 py-1 cursor-pointer transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<SvgIcon name="toolbar-collapse" class="icon" />
<div v-if="enableSubMenuCollapseButton" class="flex-center cursor-pointer px-2 py-1 transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<SvgIcon name="toolbar-collapse" />
</div>
<Breadcrumb v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && settingsStore.settings.app.routeBaseOn !== 'filesystem'" class="breadcrumb">
<TransitionGroup name="breadcrumb">

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

@ -19,15 +19,15 @@ function open() {
</script>
<template>
<div class="flex flex-col absolute w-full h-full">
<div class="absolute h-full w-full flex flex-col">
<Transition name="slide-right" mode="out-in" appear>
<PageMain :key="route.meta.link" class="flex flex-col flex-1 justify-center">
<PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
<div class="flex flex-col items-center">
<SvgIcon name="icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
<div class="my-2 text-xl text-dark dark:text-white">
是否访问此链接
</div>
<div class="my-2 max-w-[300px] text-[14px] text-center text-stone-5 cursor-pointer" @click="route.meta.link && copy(route.meta.link)">
<div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">
<HTooltip text="复制链接">
<div class="line-clamp-3">
{{ route.meta.link }}

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

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

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

@ -61,21 +61,21 @@ function close() {
<template>
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 flex z-2000" @close="!preventClose && close()">
<Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
<TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
<div class="fixed inset-0 transition-opacity bg-stone-2/75 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="flex min-h-full items-end sm:items-center justify-center text-center p-4 sm:p-0">
<div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel class="relative text-left overflow-hidden sm:my-8 w-full flex flex-col sm:max-w-lg bg-white dark:bg-stone-8 rounded-xl shadow-xl">
<DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm: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>
{{ title }}
</DialogTitle>
<SvgIcon name="carbon:close" cursor-pointer @click="close" />
</div>
<DialogDescription m-0 p-4 overflow-y-auto>
<DialogDescription m-0 overflow-y-auto p-4>
<slot />
</DialogDescription>
<div v-if="!!slots.footer" flex="~ items-center justify-end" px-4 py-3 border-t="~ solid stone/15">

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

@ -20,7 +20,7 @@ const myItems = computed(() => {
<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="flex items-center gap-2 w-full px-2 py-1.5 border-size-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-sm rounded-md text-dark dark:text-white bg-inherit hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" @click="v.handle">
<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>

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

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

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

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

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

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

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

@ -64,19 +64,19 @@ function close() {
<template>
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 flex z-2000" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
<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 transition-opacity bg-stone-2/75 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 flex-1 flex flex-col w-full focus:outline-none w-screen max-w-md bg-white dark:bg-stone-8>
<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>
{{ title }}
</DialogTitle>
<SvgIcon name="carbon:close" cursor-pointer @click="close" />
</div>
<DialogDescription flex-1 m-0 of-y-hidden>
<DialogDescription m-0 flex-1 of-y-hidden>
<OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full p-4">
<slot />
</OverlayScrollbarsComponent>

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

@ -34,10 +34,10 @@ function handleChange(index: number) {
<template>
<TabGroup :selected-index="selectedIndex" @change="handleChange">
<TabList class="inline-flex items-center justify-center p-1 rounded-md bg-stone-1 dark:bg-stone-9 ring-1 ring-stone-2 dark:ring-stone-8 select-none">
<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="inline-flex items-center justify-center w-full px-2 py-1.5 border-size-0 text-sm rounded-md truncate text-dark dark:text-white bg-inherit focus:outline-none ring-inset ring-stone-2 dark:ring-stone-8 focus:ring-2" :class="{
class="w-full inline-flex items-center justify-center truncate 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 transition hover:(opacity-100)': !selected,
}"

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

@ -28,8 +28,8 @@ const enabled = computed({
</script>
<template>
<Switch v-model="enabled" :disabled="disabled" class="relative inline-flex vertical-middle h-5 w-10 p-0 flex-shrink-0 border-2 border-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none rounded-full 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 rounded-full bg-white dark:bg-dark shadow transform ring-0 transition ease-in-out duration-200" :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" />
</span>

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

@ -34,13 +34,13 @@ function goBack() {
</script>
<template>
<div class="flex items-center justify-between flex-col lg:flex-row lg:gap-12 absolute left-[50%] top-[50%] -translate-x-50% -translate-y-50%">
<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
</h1>
<div class="desc mx-0 text-stone-5 text-xl">
<div class="desc mx-0 text-xl text-stone-5">
抱歉，你访问的页面不存在
</div>
<div>

2
src/views/index.vue
View File

@ -89,7 +89,7 @@ function open(url: string) {
</HButton>
</HDropdownMenu>
</PageHeader>
<div class="w-full flex flex-col xl:flex-row gap-[20px] px-[20px]">
<div class="w-full flex flex-col gap-[20px] px-[20px] xl:flex-row">
<PageMain class="ecology">
<template #title>
<div class="title-info">