更新依赖，修改 unocss 写法

package.json

@@ -24,11 +24,11 @@
  "@headlessui/vue": "^1.7.22",
  "@imengyu/vue3-context-menu": "^1.4.1",
  "@tinymce/tinymce-vue": "^5.1.1",
- "@visactor/vchart": "^1.11.0",
+ "@visactor/vchart": "^1.11.1",
  "@vueuse/core": "^10.9.0",
  "@vueuse/integrations": "^10.9.0",
  "animate.css": "^4.1.1",
- "axios": "^1.7.0",
+ "axios": "^1.7.2",
  "bytemd": "^1.21.0",
  "dayjs": "^1.11.11",
  "defu": "^6.1.4",
@@ -41,7 +41,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",
@@ -61,12 +61,12 @@
  "vue-m-message": "^4.0.2",
  "vue-router": "^4.3.2",
  "vue3-count-to": "^1.1.2",
- "vxe-table": "^4.6.13",
+ "vxe-table": "^4.6.16",
  "xe-utils": "^3.5.26"
  },
  "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",
@@ -76,7 +76,7 @@
  "@types/qrcode": "^1.5.5",
  "@types/qs": "^6.9.15",
  "@types/splitpanes": "^2.2.6",
- "@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",
@@ -102,7 +102,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",

src/assets/styles/globals.scss

@@ -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,

src/components/NotAllowed/index.vue

@@ -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

src/components/PageHeader/index.vue

@@ -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>

src/components/PageMain/index.vue

@@ -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>

src/components/SystemInfo/index.vue

@@ -27,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>
@@ -42,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>

src/layouts/components/AppSetting/index.vue

@@ -351,15 +351,15 @@ 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;
  }
 }
 
 .menu-mode {
  --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;

src/layouts/components/BackTop/index.vue

@@ -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>

src/layouts/components/Breadcrumb/item.vue

@@ -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 />

src/layouts/components/Copyright/index.vue

@@ -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>

src/layouts/components/Header/index.vue

@@ -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>

src/layouts/components/HotkeysIntro/index.vue

@@ -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">
  全局

src/layouts/components/MainSidebar/index.vue

@@ -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>

src/layouts/components/Menu/item.vue

@@ -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="{

src/layouts/components/Menu/sub.vue

@@ -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),
  }"
  >

src/layouts/components/Search/index.vue

@@ -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>