mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-04 04:57:53 +08:00
更新依赖,eslint 增加 unocss 配置
This commit is contained in:
parent
f31c69a557
commit
9e3797c05c
@ -2,6 +2,7 @@ import antfu from '@antfu/eslint-config'
|
||||
|
||||
export default antfu(
|
||||
{
|
||||
unocss: true,
|
||||
ignores: [
|
||||
'public',
|
||||
'dist*',
|
||||
|
13
package.json
13
package.json
@ -28,10 +28,10 @@
|
||||
"dayjs": "^1.11.10",
|
||||
"defu": "^6.1.3",
|
||||
"echarts": "^5.4.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",
|
||||
@ -58,8 +58,8 @@
|
||||
"xe-utils": "^3.5.14"
|
||||
},
|
||||
"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",
|
||||
@ -67,13 +67,14 @@
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/qs": "^6.9.10",
|
||||
"@types/splitpanes": "^2.2.6",
|
||||
"@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",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"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",
|
||||
@ -97,7 +98,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",
|
||||
|
488
pnpm-lock.yaml
488
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -15,19 +15,19 @@ 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">
|
||||
{{ 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>
|
||||
@ -38,11 +38,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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -45,7 +45,7 @@ onUnmounted(() => {
|
||||
<SvgIcon name="icon-park-twotone:components" />
|
||||
<span class="title">切换<br>组件库</span>
|
||||
<HDialog v-model="UIdialog" title="切换组件库" overlay>
|
||||
<div class="px-4 py-2 rounded-2 text-sm/6 c-green-6 bg-green/20">
|
||||
<div class="rounded-2 bg-green/20 px-4 py-2 text-sm/6 c-green-6">
|
||||
<p class="my-1">
|
||||
为了视觉风格统一,同时也能服务于更多开发者,本框架从 v4.0.0 版本开始,与 Element Plus 组件库进行了解耦,意味着可以轻松将 Element Plus 组件库替换成其他 UI 组件库,并且不会影响框架原本的功能。
|
||||
</p>
|
||||
@ -53,7 +53,7 @@ onUnmounted(() => {
|
||||
演示站挑选了以下 5 款组件库作为示例,你可以点击访问并预览。
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-center flex-wrap gap-4">
|
||||
<div class="mt-4 flex flex-wrap justify-center gap-4">
|
||||
<HButton @click="open('https://fantastic-admin.github.io/antd-example/')">
|
||||
访问 Ant Design Vue 演示站
|
||||
</HButton>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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="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"
|
||||
>
|
||||
<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]',
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
@ -87,8 +87,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" />
|
||||
|
@ -59,7 +59,7 @@ 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()">
|
||||
<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">
|
||||
|
@ -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 }}
|
||||
|
@ -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 }}
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
}"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -43,7 +43,7 @@ function formatTooltip(val: number) {
|
||||
<ElDivider content-position="left">
|
||||
范围选择
|
||||
</ElDivider>
|
||||
<ElSlider v-model="value8" range show-stops :max="10" />
|
||||
<ElSlider v-model="value8" show-stops range :max="10" />
|
||||
<ElDivider content-position="left">
|
||||
竖向模式
|
||||
</ElDivider>
|
||||
|
@ -11,7 +11,7 @@ const toggle = ref(false)
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader title="内建组件" content="内建组件仅服务于框架自身,不建议在业务页面内使用,业务页面内请使用专业的 UI 组件库。" />
|
||||
<div class="flex flex-wrap flex-col lg:flex-row gap-4 px-4">
|
||||
<div class="flex flex-col flex-wrap gap-4 px-4 lg:flex-row">
|
||||
<PageMain title="Button">
|
||||
<HButton>
|
||||
按钮
|
||||
@ -22,7 +22,7 @@ const toggle = ref(false)
|
||||
<HButton disabled>
|
||||
按钮
|
||||
</HButton>
|
||||
<HButton outline disabled>
|
||||
<HButton disabled outline>
|
||||
按钮
|
||||
</HButton>
|
||||
</PageMain>
|
||||
@ -50,7 +50,7 @@ const toggle = ref(false)
|
||||
<SvgIcon name="ep:caret-bottom" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<div class="w-60 h-30 flex justify-center items-center">
|
||||
<div class="h-30 w-60 flex items-center justify-center">
|
||||
下拉内容
|
||||
</div>
|
||||
</template>
|
||||
|
@ -116,7 +116,7 @@ const dataList = ref([
|
||||
<div class="absolute-container">
|
||||
<PageHeader title="表格高度自适应" />
|
||||
<PageMain>
|
||||
<ElTable :data="dataList" border stripe highlight-current-row height="100%">
|
||||
<ElTable :data="dataList" stripe highlight-current-row border height="100%">
|
||||
<ElTableColumn type="index" width="50" />
|
||||
<ElTableColumn prop="date" label="日期" width="180" />
|
||||
<ElTableColumn prop="name" label="姓名" width="180" />
|
||||
|
@ -103,10 +103,10 @@ function open(url: string) {
|
||||
</HButton>
|
||||
</HDropdownMenu>
|
||||
</PageHeader>
|
||||
<PageMain class="text-white rounded-lg" style="background: linear-gradient(50deg, rgb(14 76 253), rgb(106 142 255));">
|
||||
全新版本 V4.0 正式发布,支持替换 UI 组件库,点击查看<span class="cursor-pointer text-yellow font-bold px-1 hover:op-70" @click="open('https://fantastic-admin.gitee.io/guide/v4.html')">V4.0 更新介绍</span>。
|
||||
<PageMain class="rounded-lg text-white" style="background: linear-gradient(50deg, rgb(14 76 253), rgb(106 142 255));">
|
||||
全新版本 V4.0 正式发布,支持替换 UI 组件库,点击查看<span class="cursor-pointer px-1 font-bold text-yellow hover:op-70" @click="open('https://fantastic-admin.gitee.io/guide/v4.html')">V4.0 更新介绍</span>。
|
||||
</PageMain>
|
||||
<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">
|
||||
|
@ -98,8 +98,8 @@ function open(url: string) {
|
||||
</PageHeader>
|
||||
<PageMain>
|
||||
<VxeTable
|
||||
border
|
||||
stripe
|
||||
|
||||
stripe border
|
||||
height="400"
|
||||
:loading="demo1.loading"
|
||||
:column-config="{ resizable: true }"
|
||||
|
Loading…
Reference in New Issue
Block a user