github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 17:08:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新依赖，修改 unocss 写法

Browse Source
This commit is contained in:
Hooray Hu
2024-05-22 15:42:37 +08:00
parent 7f7536c466
commit 7e3ee34ef3
38 changed files with 444 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/globals.scss
+2 -2
View File
@@ -115,7 +115,7 @@ textarea {
.v-popper--theme-dropdown .v-popper__inner,
.v-popper--theme-tooltip .v-popper__inner {
--at-apply: bg-white dark:bg-stone-8 text-dark dark:text-white rounded shadow ring-1 ring-gray-200 dark:ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
--at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
}
@@ -124,7 +124,7 @@ textarea {
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--at-apply: border-white dark:border-stone-8;
--at-apply: border-white dark-border-stone-8;
}
.v-popper--theme-tooltip .v-popper__arrow-outer,
src/components/NotAllowed/index.vue
+2 -2
View File
@@ -34,8 +34,8 @@ function goBack() {
</script>
<template>
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
<SvgIcon name="403" class="text-[300px] lg:text-[400px]" />
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
<SvgIcon name="403" class="text-[300px] lg-text-[400px]" />
<div class="flex flex-col gap-4">
<h1 class="m-0 text-6xl font-sans">
403
src/components/PageHeader/index.vue
+1 -1
View File
@@ -19,7 +19,7 @@ const slots = useSlots()
{{ title }}
</slot>
</div>
<div class="mt-2 text-sm text-stone-5 empty:hidden">
<div class="mt-2 text-sm text-stone-5 empty-hidden">
<slot name="content">
{{ content }}
</slot>
src/components/PageMain/index.vue
+1 -1
View File
@@ -41,7 +41,7 @@ function unCollaspe() {
<slot />
</div>
<div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
<SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
<SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover-op-100" />
</div>
</div>
</template>
src/components/SystemInfo/index.vue
+2 -2
View File
@@ -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
+3 -3
View File
@@ -351,7 +351,7 @@ function handleCopy() {
&::before,
&::after {
--at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
--at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
}
}
@@ -359,7 +359,7 @@ function handleCopy() {
--at-apply: flex items-center justify-center gap-4 pb-4;
.mode {
--at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
--at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
&.active {
--at-apply: ring-ui-primary ring-2;
@@ -428,7 +428,7 @@ function handleCopy() {
}
.setting-item {
--at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover:bg-stone-1 dark:hover:bg-stone-9;
--at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
.label {
--at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
src/layouts/components/BackTop/index.vue
+5 -5
View File
@@ -5,11 +5,11 @@ defineOptions({
const transitionClass = {
enterActiveClass: 'ease-out duration-300',
enterFromClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterToClass: 'opacity-100 translate-y-0 lg:scale-100',
enterFromClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterToClass: 'opacity-100 translate-y-0 lg-scale-100',
leaveActiveClass: 'ease-in duration-200',
leaveFromClass: 'opacity-100 translate-y-0 lg:scale-100',
leaveToClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFromClass: 'opacity-100 translate-y-0 lg-scale-100',
leaveToClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
onMounted(() => {
@@ -37,7 +37,7 @@ function handleClick() {
<template>
<Teleport to="body">
<Transition v-bind="transitionClass">
<div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
<div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark-bg-dark hover-bg-stone-1 dark-ring-stone-7 dark-hover-bg-dark/50" @click="handleClick">
<SvgIcon name="i-icon-park-outline:to-top-one" :size="24" />
</div>
</Transition>
src/layouts/components/Breadcrumb/item.vue
+2 -2
View File
@@ -22,14 +22,14 @@ function onClick() {
</script>
<template>
<div class="breadcrumb-item flex items-center text-dark dark:text-white">
<div class="breadcrumb-item flex items-center text-dark dark-text-white">
<span class="separator mx-2">
{{ separator }}
</span>
<span
class="text flex items-center opacity-60"
:class="{
'is-link cursor-pointer transition-opacity hover:opacity-100': !!props.to,
'is-link cursor-pointer transition-opacity hover-opacity-100': !!props.to,
}" @click="onClick"
>
<slot />
src/layouts/components/Copyright/index.vue
+1 -1
View File
@@ -31,7 +31,7 @@ const settingsStore = useSettingsStore()
}
a {
--at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
--at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
}
}
</style>
src/layouts/components/Header/index.vue
+2 -2
View File
@@ -40,12 +40,12 @@ function handlerMouserScroll(event: WheelEvent) {
}"
>
<div
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div class="inline-flex flex-1 items-center justify-center gap-1">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>
src/layouts/components/HotkeysIntro/index.vue
+1 -1
View File
@@ -20,7 +20,7 @@ onMounted(() => {
<template>
<HDialog v-model="isShow" title="快捷键介绍">
<div class="px-4">
<div class="grid gap-2 sm:grid-cols-2">
<div class="grid gap-2 sm-grid-cols-2">
<div>
<h2 class="m-0 text-lg font-bold">
全局
src/layouts/components/MainSidebar/index.vue
+2 -2
View File
@@ -26,12 +26,12 @@ const { switchTo } = useMenu()
}"
>
<div
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover:(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
>
<div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
</span>
src/layouts/components/Menu/item.vue
+2 -2
View File
@@ -52,7 +52,7 @@ defineExpose({
target: item.meta?.link ? '_blank' : '_self',
class: 'no-underline',
}),
}" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
}" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
'px-3!': rootMenu.isMenuPopup && level === 0,
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
@@ -68,7 +68,7 @@ defineExpose({
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
}" :style="indentStyle"
>
<SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
<span
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
:class="{
src/layouts/components/Menu/sub.vue
+1 -1
View File
@@ -184,7 +184,7 @@ function handleMouseleave() {
<OverlayScrollbarsComponent
v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
'ring-1 ring-stone-2 dark:ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
}"
>
src/layouts/components/Search/index.vue
+13 -13
View File
@@ -28,11 +28,11 @@ const overlayTransitionClass = ref({
const transitionClass = computed(() => {
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterTo: 'opacity-100 translate-y-0 lg:scale-100',
enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterTo: 'opacity-100 translate-y-0 lg-scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
})
@@ -245,23 +245,23 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<TransitionRoot as="template" :show="isShow">
<Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow && eventBus.emit('global-search-toggle')">
<TransitionChild as="template" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
<div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark-bg-stone-8/75" />
</TransitionChild>
<div class="fixed inset-0">
<div class="h-full flex items-end justify-center p-4 text-center lg:items-center">
<div class="h-full flex items-end justify-center p-4 text-center lg-items-center">
<TransitionChild as="template" v-bind="transitionClass">
<DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg:max-w-2xl">
<div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
<div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
<DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg-max-w-2xl">
<div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark-bg-stone-8">
<div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark-stone-7">
<SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark-text-white focus-outline-none placeholder-stone-4 dark-placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
</div>
<DialogDescription class="relative m-0 of-y-hidden">
<OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
<template v-if="resultList.length > 0">
<a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
<a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark-bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
<SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
<div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
<div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark-stone-7">
<div class="truncate text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
<Breadcrumb v-if="item.breadcrumb.length" class="truncate">
<BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
@@ -281,7 +281,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
</template>
</OverlayScrollbarsComponent>
</DialogDescription>
<div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark:stone-7">
<div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark-stone-7">
<div class="flex gap-8">
<div class="inline-flex items-center gap-1 text-xs">
<HKbd>
src/layouts/components/SubSidebar/index.vue
+1 -1
View File
@@ -68,7 +68,7 @@ onMounted(() => {
</div>
</div>
<div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
<span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark:bg-stone-9 hover:bg-stone-2 dark:hover:bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark-bg-stone-9 hover-bg-stone-2 dark-hover-bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<SvgIcon name="toolbar-collapse" />
</span>
</div>
src/layouts/components/Topbar/Tabbar/index.vue
+5 -5
View File
@@ -205,7 +205,7 @@ onUnmounted(() => {
z-index: 1000;
.mx-context-menu {
--at-apply: fixed ring-1 ring-stone-2 dark:ring-stone-7 shadow-2xl;
--at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
background-color: var(--g-container-bg);
@@ -213,7 +213,7 @@ onUnmounted(() => {
--at-apply: transition-background-color;
&:not(.disabled):hover {
--at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
--at-apply: cursor-pointer bg-stone-1 dark-bg-stone-9;
}
span {
@@ -234,7 +234,7 @@ onUnmounted(() => {
background-color: var(--g-container-bg);
&::after {
--at-apply: bg-stone-2 dark:bg-stone-7;
--at-apply: bg-stone-2 dark-bg-stone-7;
}
}
}
@@ -412,14 +412,14 @@ onUnmounted(() => {
transform: translateY(-50%);
&:hover {
--at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
--at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
background-color: var(--g-bg);
}
}
.hotkey-number {
--at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
--at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
position: absolute;
top: 50%;
src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
+2 -2
View File
@@ -12,9 +12,9 @@ const settingsStore = useSettingsStore()
<template>
<span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
<SvgIcon v-if="settingsStore.mode === 'mobile'" name="i-ri:search-line" />
<span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark:bg-stone-9 dark:text-white hover:ring-1 dark:ring-stone-7">
<span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark-bg-stone-9 dark-text-white hover-ring-1 dark-ring-stone-7">
<SvgIcon name="i-ri:search-line" />
<span class="text-sm text-stone-5 transition group-hover:text-dark dark:group-hover:text-white">搜索</span>
<span class="text-sm text-stone-5 transition group-hover-text-dark dark-group-hover-text-white">搜索</span>
<HKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="ml-2">{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
</span>
</span>
src/layouts/components/views/link.vue
+1 -1
View File
@@ -26,7 +26,7 @@ function open() {
<PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
<div class="flex flex-col items-center">
<SvgIcon name="i-icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
<div class="my-2 text-xl text-dark dark:text-white">
<div class="my-2 text-xl text-dark dark-text-white">
是否访问此链接
</div>
<div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">
src/layouts/index.vue
+1 -1
View File
@@ -242,7 +242,7 @@ header:not(.header-leave-active) + .wrapper {
}
.app-setting {
--at-apply: text-white dark:text-dark bg-ui-primary;
--at-apply: text-white dark-text-dark bg-ui-primary;
position: fixed;
top: calc(50% + 250px);
src/layouts/ui-kit/HButton.vue
+3 -3
View File
@@ -13,11 +13,11 @@ const props = withDefaults(
)
const buttonClass = computed(() => [
'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
'focus-outline-none focus-visible-outline-0 cursor-pointer disabled-cursor-not-allowed disabled-opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
props.outline
? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
: 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark-bg-dark hover-not-disabled-bg-ui-primary/10 dark-hover-not-disabled-bg-ui-primary/10 focus-visible-ring-2'
: 'shadow-sm text-ui-text bg-ui-primary hover-bg-ui-primary/75 disabled-bg-ui-primary/90 focus-visible-ring-inset focus-visible-ring-2',
])
</script>
src/layouts/ui-kit/HCheckList.vue
+2 -2
View File
@@ -26,8 +26,8 @@ watch(value, (val) => {
</script>
<template>
<div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
<button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
<div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark-bg-stone-7">
<button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled-cursor-not-allowed disabled-opacity-50 hover-not-disabled-(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
<SvgIcon v-if="option.icon" :name="option.icon" />
<template v-else>
{{ option.label }}
src/layouts/ui-kit/HDialog.vue
+8 -8
View File
@@ -37,11 +37,11 @@ const overlayTransitionClass = ref({
const transitionClass = computed(() => {
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
enterTo: 'opacity-100 translate-y-0 lg:scale-100',
enterFrom: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
enterTo: 'opacity-100 translate-y-0 lg-scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
leaveFrom: 'opacity-100 translate-y-0 lg-scale-100',
leaveTo: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
}
})
@@ -55,14 +55,14 @@ function close() {
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
<TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="min-h-full flex items-end justify-center p-4 text-center lg:items-center">
<div class="min-h-full flex items-end justify-center p-4 text-center lg-items-center">
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg:my-8 lg:max-w-lg dark:bg-stone-8">
<DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg-my-8 lg-max-w-lg dark-bg-stone-8">
<div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
<DialogTitle m-0 text-lg text-dark dark:text-white>
<DialogTitle m-0 text-lg text-dark dark-text-white>
{{ title }}
</DialogTitle>
<SvgIcon name="i-carbon:close" cursor-pointer @click="close" />
src/layouts/ui-kit/HDropdownMenu.vue
+2 -2
View File
@@ -19,8 +19,8 @@ const myItems = computed(() => {
<VMenu :show-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover', 'click']" :delay="200" v-bind="$attrs">
<slot />
<template #popper>
<div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark:stone-7 last:size-0">
<button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled:cursor-not-allowed dark:text-white disabled:opacity-50 hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" @click="v.handle">
<div v-for="(item, index) in myItems" :key="index" class="p-1" border-b="~ solid stone-2 dark-stone-7 last:size-0">
<button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled-cursor-not-allowed dark-text-white disabled-opacity-50 hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" @click="v.handle">
{{ v.label }}
</button>
</div>
src/layouts/ui-kit/HInput.vue
+2 -2
View File
@@ -19,7 +19,7 @@ defineExpose({
</script>
<template>
<div class="relative w-full lg:w-48">
<input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5">
<div class="relative w-full lg-w-48">
<input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
</div>
</template>
src/layouts/ui-kit/HKbd.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark:bg-dark-9 dark:text-white dark:ring-stone-7">
<kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark-bg-dark-9 dark-text-white dark-ring-stone-7">
<slot />
</kbd>
</template>
src/layouts/ui-kit/HSelect.vue
+3 -3
View File
@@ -28,7 +28,7 @@ const selected = computed({
<template>
<VMenu :triggers="['click']" :popper-triggers="['click']" :delay="0" :disabled="disabled" v-bind="$attrs">
<div class="w-full inline-flex">
<button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg:w-48 disabled:cursor-not-allowed dark:bg-dark focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary" :disabled="disabled">
<button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg-w-48 disabled-cursor-not-allowed dark-bg-dark focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary" :disabled="disabled">
<span class="block truncate">
{{ selected.label }}
</span>
@@ -38,8 +38,8 @@ const selected = computed({
</button>
</div>
<template #popper>
<div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg:w-48 focus:outline-none">
<button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled:cursor-not-allowed hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
<div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg-w-48 focus-outline-none">
<button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled-cursor-not-allowed hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
{{ option.label }}
</button>
</div>
src/layouts/ui-kit/HSlideover.vue
+3 -3
View File
@@ -58,12 +58,12 @@ function close() {
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<Dialog class="fixed inset-0 z-2000 flex" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
<TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
<div class="fixed inset-0 bg-stone-2/75 transition-opacity dark-bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
</TransitionChild>
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark:bg-stone-8 focus:outline-none>
<DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark-bg-stone-8 focus-outline-none>
<div flex="~ items-center justify-between" p-4 border-b="~ solid stone/15" text-6>
<DialogTitle m-0 text-lg text-dark dark:text-white>
<DialogTitle m-0 text-lg text-dark dark-text-white>
{{ title }}
</DialogTitle>
<SvgIcon name="i-carbon:close" cursor-pointer @click="close" />
src/layouts/ui-kit/HTabList.vue
+4 -4
View File
@@ -35,12 +35,12 @@ function handleChange(index: number) {
<template>
<TabGroup :selected-index="selectedIndex" @change="handleChange">
<TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark:bg-stone-9 dark:ring-stone-8">
<TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark-bg-stone-9 dark-ring-stone-8">
<Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
<button
class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark:text-white focus:outline-none focus:ring-2 dark:ring-stone-8" :class="{
'cursor-default bg-white dark:bg-dark-9': selected,
'cursor-pointer opacity-50 hover:(opacity-100)': !selected,
class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8" :class="{
'cursor-default bg-white dark-bg-dark-9': selected,
'cursor-pointer opacity-50 hover-(opacity-100)': !selected,
}"
>
<SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />
src/layouts/ui-kit/HToggle.vue
+3 -3
View File
@@ -16,10 +16,10 @@ const enabled = defineModel<boolean>()
</script>
<template>
<Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark:bg-stone-7']">
<span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
<Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled-cursor-not-allowed disabled-opacity-50 focus-outline-none focus-visible-ring-2 focus-visible-ring-offset-2 focus-visible-ring-offset-white dark-focus-visible-ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark-bg-stone-7']">
<span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark-bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
<span class="absolute inset-0 h-full w-full flex items-center justify-center">
<SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark:text-stone-3" />
<SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark-text-stone-3" />
</span>
</span>
</Switch>
src/router/index.ts
+1 -1
View File
@@ -84,7 +84,7 @@ router.beforeEach(async (to, from, next) => {
// 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
const removeRoutes: (() => void)[] = []
routeStore.flatRoutes.forEach((route) => {
if (!/^(https?:|mailto:|tel:)/.test(route.path)) {
if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
}
})
src/views/[...all].vue
+2 -2
View File
@@ -38,8 +38,8 @@ function goBack() {
</script>
<template>
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
<SvgIcon name="404" class="text-[300px] lg:text-[400px]" />
<div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
<SvgIcon name="404" class="text-[300px] lg-text-[400px]" />
<div class="flex flex-col gap-4">
<h1 class="m-0 text-6xl font-sans">
404
src/views/component_built_in_example/index.vue
+1 -1
View File
@@ -11,7 +11,7 @@ const toggle = ref(false)
<template>
<div>
<PageHeader title="内建组件" content="内建组件仅服务于框架自身，不建议在业务页面内使用，业务页面内请使用专业的 UI 组件库。" />
<div class="flex flex-col flex-wrap gap-4 px-4 lg:flex-row">
<div class="flex flex-col flex-wrap gap-4 px-4 lg-flex-row">
<PageMain title="Button">
<HButton>
按钮
src/views/feature_example/rules.vue
+45 -44
View File
@@ -9,6 +9,7 @@ import { ElMessage } from 'element-plus'
const { text, copy, copied } = useClipboard()
/* eslint-disable regexp/no-super-linear-backtracking, regexp/no-dupe-disjunctions, regexp/optimal-quantifier-concatenation, regexp/no-useless-assertions, regexp/no-contradiction-with-assertion, regexp/no-misleading-capturing-group */
const rules = ref([
{
title: '火车车次',
@@ -32,7 +33,7 @@ const rules = ref([
// https://baike.baidu.com/item/%E9%A1%B6%E7%BA%A7%E5%9F%9F%E5%90%8D#7
// 也参考谷歌浏览器的地址栏, 如果输入非字母不会被识别为域名
title: '网址(URL)',
rule: /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
rule: /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{1,64})?\.)+[a-z]{2,6}\/?/,
examples: ['www.qq.com', 'https://vuejs.org/v2/api/#v-model', 'www.qq.99', '//www.qq.com', 'www.腾讯.cs', 'ftp://baidu.qq', 'http://baidu.com', 'https://www.amap.com/search?id=BV10060895&city=420111&geoobj=113.207951%7C29.992557%7C115.785782%7C31.204369&query_type=IDQ&query=%E5%85%89%E8%B0%B7%E5%B9%BF%E5%9C%BA(%E5%9C%B0%E9%93%81%E7%AB%99)&zoom=10.15', '360.com:8080/vue/#/a=1&b=2'],
counterExamples: ['....'],
},
@@ -43,7 +44,7 @@ const rules = ref([
},
{
title: '统一社会信用代码(宽松匹配)(15位/18位/20位数字/字母)',
rule: /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/,
rule: /^(([0-9A-Z]{15})|([0-9A-Z]{18})|([0-9A-Z]{20}))$/i,
examples: ['91110108772551611J', '911101085923662400'],
},
{
@@ -60,7 +61,7 @@ const rules = ref([
{
title: '磁力链接(宽松匹配)',
rule: /^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/,
rule: /^magnet:\?xt=urn:btih:[0-9a-fA-F]{40}.*$/,
examples: ['magnet:?xt=urn:btih:40A89A6F4FB1498A98087109D012A9A851FBE0FC'],
},
{
@@ -85,17 +86,17 @@ const rules = ref([
},
{
title: 'window"文件夹"路径',
rule: /^[a-zA-Z]:\\(?:\w+\\?)*$/,
rule: /^[a-z]:\\(?:\w+\\?)*$/i,
examples: ['C:\\Users\\Administrator\\Desktop', 'e:\\m\\'],
},
{
title: 'window下"文件"路径',
rule: /^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/,
rule: /^[a-z]:\\(?:\w+\\)*\w+\.\w+$/i,
examples: ['C:\\Users\\Administrator\\Desktop\\qq.link', 'e:\\m\\vscode.exe'],
},
{
title: '股票代码(A股)',
rule: /^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/,
rule: /^(s[hz]|S[HZ])(000\d{3}|002\d{3}|300\d{3}|600\d{3}|60\d{4})$/,
examples: ['sz000858', 'SZ002136', 'sz300675', 'SH600600', 'sh601155'],
},
{
@@ -110,7 +111,7 @@ const rules = ref([
},
{
title: 'md5格式(32位)',
rule: /^[a-fA-F0-9]{32}$/,
rule: /^[a-f0-9]{32}$/i,
examples: ['21fe181c5bfc16306a6828c1f7b762e8'],
},
{
@@ -146,7 +147,7 @@ const rules = ref([
},
{
title: 'base64格式',
rule: /^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*?)\s*$/i,
rule: /^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([\w!$&',()*+;=\-.~:@/?%\s]*?)\s*$/i,
examples: ['data:image/gif;base64,xxxx=='],
},
{
@@ -161,17 +162,17 @@ const rules = ref([
},
{
title: '中文姓名',
rule: /^(?:[\u4E00-\u9FA5·]{2,16})$/,
rule: /^[\u4E00-\u9FA5·]{2,16}$/,
examples: ['葛二蛋', '凯文·杜兰特', '德克·维尔纳·诺维茨基'],
},
{
title: '英文姓名',
rule: /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/,
rule: /(^[a-z][a-z\s]{0,20}[a-z]$)/i,
examples: ['James', 'Kevin Wayne Durant', 'Dirk Nowitzki'],
},
{
title: '车牌号(新能源)',
rule: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))$/,
rule: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))\d{4})|(\d{5}[DF]))$/,
examples: ['京AD92035', '甘G23459F', '京A19203D'],
},
{
@@ -187,7 +188,7 @@ const rules = ref([
},
{
title: '手机号(mobile phone)中国(严谨), 根据工信部最新公布的手机号段',
rule: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[01256789]))\d{8}$/,
rule: /^(?:(?:\+|00)86)?1(?:3\d|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8\d|9[0125-9])\d{8}$/,
examples: ['008618311006933', '+8617888829981', '19119255642', '19519255642'],
},
{
@@ -202,14 +203,14 @@ const rules = ref([
},
{
title: '日期(宽松)',
rule: /^\d{1,4}(-)(1[0-2]|0?[1-9])\1(0?[1-9]|[1-2]\d|30|31)$/,
rule: /^\d{1,4}(-)(1[0-2]|0?[1-9])\1(0?[1-9]|[12]\d|30|31)$/,
examples: ['1990-12-12', '1-1-1', '0000-1-1'],
counterExamples: ['2020-00-01'],
},
{
title: '日期(严谨, 支持闰年判断)',
rule: /^(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/,
rule: /^((\d{3}[1-9]|\d{2}[1-9]\d|\d[1-9]\d{2}|[1-9]\d{3})-(((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30))|(02-(0[1-9]|1\d|2[0-8]))))|(((\d{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/,
examples: ['1990-12-12', '2000-02-29'],
counterExamples: ['2021-02-29'],
},
@@ -223,13 +224,13 @@ const rules = ref([
{
title: '可以被moment转化成功的时间 YYYYMMDD HH:mm:ss',
rule: /^\d{4}([/:-\S])(1[0-2]|0?[1-9])\1(0?[1-9]|[1-2]\d|30|31) (?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/,
rule: /^\d{4}(\S)(1[0-2]|0?[1-9])\1(0?[1-9]|[12]\d|30|31) (?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/,
examples: ['2020/01/01 23:59:59', '2020-01-01 00:00:00', '20200101 11:11:11'],
counterExamples: ['2020/00/01 23:59:59', '2020-01/01 23:59:59', '2020-01-01 23:59:61', '2020-01-0100:00:00'],
},
{
title: 'email(邮箱)',
rule: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
rule: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/i,
examples: ['90203918@qq.com', 'nbilly@126.com', '汉字@qq.com'],
},
@@ -241,27 +242,27 @@ const rules = ref([
{
title: '身份证号(1代,15位数字)',
rule: /^[1-9]\d{7}(?:0\d|10|11|12)(?:0[1-9]|[1-2][\d]|30|31)\d{3}$/,
rule: /^[1-9]\d{7}(?:0\d|10|11|12)(?:0[1-9]|[12]\d|30|31)\d{3}$/,
examples: ['123456991010193'],
},
{
title: '身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X',
rule: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
rule: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[12]\d|30|31)\d{3}[\dX]$/i,
examples: ['12345619991205131x'],
},
{
title: '身份证号, 支持1/2代(15位/18位数字)',
rule: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
rule: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))([\dX])$/i,
examples: ['622223199912051311', '12345619991205131x', '123456991010193'],
},
{
title: '护照（包含香港、澳门）',
rule: /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/,
rule: /(^[EKGDSPH]\d{8}$)|(^((E[a-f])|([DSP]E)|(KJ)|(MA)|(1[45]))\d{7}$)/i,
examples: ['s28233515', '141234567', '159203084', 'MA1234567', 'K25345719'],
},
{
title: '帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合',
rule: /^[a-zA-Z]\w{4,15}$/,
rule: /^[a-z]\w{4,15}$/i,
examples: ['justin', 'justin1989', 'justin_666'],
},
{
@@ -272,7 +273,7 @@ const rules = ref([
},
{
title: '小数(支持科学计数)',
rule: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
rule: /^[+-]?(\d+(\.\d*)?(e[+-]?\d+)?|\.\d+(e[+-]?\d+)?)$/i,
examples: ['0.0', '0.09', '4E+4'],
},
{
@@ -288,23 +289,23 @@ const rules = ref([
{
title: '匹配中文汉字和中文标点',
rule: /[\u4E00-\u9FA5|\u3002|\uFF1F|\uFF01|\uFF0C|\u3001|\uFF1B|\uFF1A|\u201C|\u201D|\u2018|\u2019|\uFF08|\uFF09|\u300A|\u300B|\u3008|\u3009|\u3010|\u3011|\u300E|\u300F|\u300C|\u300D|\uFE43|\uFE44|\u3014|\u3015|\u2026|\u2014|\uFF5E|\uFE4F|\uFFE5]/,
rule: /[\u4E00-\u9FA5|\u3002\uFF1F\uFF01\uFF0C\u3001\uFF1B\uFF1A\u201C\u201D\u2018\u2019\uFF08\uFF09\u300A\u300B\u3008\u3009\u3010\u3011\u300E\u300F\u300C\u300D\uFE43\uFE44\u3014\u3015\u2026\u2014\uFF5E\uFE4F\uFFE5]/,
examples: ['匹配中文汉字以及中文标点符号 。 ？ ！ ， 、 ； ： “ ” ‘ \' （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥'],
},
{
title: 'qq号格式正确',
rule: /^[1-9][0-9]{4,10}$/,
rule: /^[1-9]\d{4,10}$/,
examples: [903013545, 9020304],
},
{
title: '数字和字母组成',
rule: /^[A-Za-z0-9]+$/,
rule: /^[A-Z0-9]+$/i,
examples: ['james666', 'haha233hi'],
},
{
title: '英文字母',
rule: /^[a-zA-Z]+$/,
rule: /^[a-z]+$/i,
examples: ['Russel'],
},
{
@@ -319,7 +320,7 @@ const rules = ref([
},
{
title: '密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符',
rule: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
rule: /^\S*(?=\S{6})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
examples: ['Kd@curry666'],
},
{
@@ -329,17 +330,17 @@ const rules = ref([
},
{
title: 'ip-v4[:端口]',
rule: /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/,
rule: /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))?$/,
examples: ['172.16.0.0', '172.16.0.0:8080', '127.0.0.0', '127.0.0.0:998'],
},
{
title: '16进制颜色',
rule: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3}|[a-fA-F0-9]{8}|[a-fA-F0-9]{4})$/,
rule: /^#?([a-f0-9]{6}|[a-f0-9]{3}|[a-f0-9]{8}|[a-f0-9]{4})$/i,
examples: ['#f00', '#F90', '#000', '#fe9de8', '#f8f8f8ff', '#f003'],
},
{
title: '微信号(wx)，6至20位，以字母开头，字母，数字，减号，下划线',
rule: /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/,
rule: /^[a-z][-\w]{5,19}$/i,
examples: ['github666', 'kd_-666'],
},
{
@@ -349,22 +350,22 @@ const rules = ref([
},
{
title: '中文和数字',
rule: /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/,
rule: /^([\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|(\d))+$/,
examples: ['哈哈哈', '你好6啊'],
},
{
title: '不能包含字母',
rule: /^[^A-Za-z]*$/,
rule: /^[^A-Z]*$/i,
examples: ['你好6啊', '@¥()！'],
},
{
title: 'java包名',
rule: /^([a-zA-Z_]\w*)+([.][a-zA-Z_]\w*)+$/,
rule: /^([a-z_]\w*)+(\.[a-z_]\w*)+$/i,
examples: ['com.bbb.name'],
},
{
title: 'mac地址',
rule: /^(([a-f0-9][0,2,4,6,8,a,c,e]:([a-f0-9]{2}:){4})|([a-f0-9][0,2,4,6,8,a,c,e]-([a-f0-9]{2}-){4}))[a-f0-9]{2}$/i,
rule: /^(([a-f0-9][0,2468ace]:([a-f0-9]{2}:){4})|([a-f0-9][0,2468ace]-([a-f0-9]{2}-){4}))[a-f0-9]{2}$/i,
examples: ['38:f9:d3:4b:f5:51', '00-0C-29-CA-E4-66'],
},
{
@@ -374,7 +375,7 @@ const rules = ref([
},
{
title: '数字和英文字母组成，并且同时含有数字和英文字母',
rule: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
rule: /^(?=.*[a-z])(?=.*\d).+$/i,
examples: ['我a我1我', 'a对1'],
},
{
@@ -386,17 +387,17 @@ const rules = ref([
// 参考:
// https://baike.baidu.com/item/%E6%BE%B3%E9%97%A8%E5%B1%85%E6%B0%91%E8%BA%AB%E4%BB%BD%E8%AF%81/12509098?fr=aladdin#5
title: '澳门身份证 ',
rule: /^[1|5|7]\d{6}\(\d\)$/,
rule: /^[1|57]\d{6}\(\d\)$/,
examples: ['5686611(1)'],
},
{
title: '台湾身份证 ',
rule: /^[a-zA-Z][0-9]{9}$/,
rule: /^[a-z]\d{9}$/i,
examples: ['U193683453'],
},
{
title: '大写字母，小写字母，数字，特殊符号 `@#$%^&*`~()-+=` 中任意3项密码',
rule: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/,
rule: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[\s\S]/,
examples: ['a1@', 'A1@', 'Aa@'],
},
{
@@ -416,13 +417,13 @@ const rules = ref([
},
{
title: '整数',
rule: /^(?:0|(?:-?[1-9]\d*))$/,
rule: /^(?:0|-?[1-9]\d*)$/,
examples: [-1231, 123, 0],
counterExamples: ['01'],
},
{
title: '浮点数',
rule: /^(-?[1-9]\d*\.\d+|-?0\.\d*[1-9]\d*|0\.0+)$/,
rule: /^(-?[1-9]\d*\.\d+|-?0\.0*[1-9]\d*|0\.0+)$/,
examples: ['1.23', '-1.01', '0.00'],
// allow "1.23", allow "-0.1", allow "0.00", ban "-0.00", ban "2.", allow "2.0"
},
@@ -434,13 +435,13 @@ const rules = ref([
},
{
title: 'email(支持中文邮箱)',
rule: /^[A-Za-z0-9\u4E00-\u9FA5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
rule: /^[A-Z0-9\u4E00-\u9FA5]+@[\w-]+(\.[\w-]+)+$/i,
examples: ['90203918@qq.com', 'nbilly@126.com', '啦啦啦@126.com'],
},
{
title: '域名(非网址, 不包含协议)',
rule: /^([0-9a-zA-Z-]{1,}\.)+([a-zA-Z]{2,})$/,
rule: /^([0-9a-z-]+\.)+([a-z]{2,})$/i,
examples: ['www.baidu.com',
'baidu.com',
'baidu.com.cn',
@@ -452,12 +453,12 @@ const rules = ref([
{
title: '军官/士兵证',
rule: /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/,
rule: /^[\u4E00-\u9FA5](字第)([0-9a-z]{4,8})(号?)$/i,
examples: ['军字第2001988号', '士字第P011816X号'],
},
{
title: '户口薄',
rule: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
rule: /(^\d{15}$)|(^\d{18}$)|(^\d{17}([\dX])$)/i,
examples: ['441421999707223115'],
},
])
src/views/index.vue
+1 -1
View File
@@ -239,7 +239,7 @@ function open(url: string) {
}
span {
--at-apply: text-stone-7 dark:text-stone-3 font-bold;
--at-apply: text-stone-7 dark-text-stone-3 font-bold;
}
}
}
src/views/plugin_example/currency.input.vue
+2 -2
View File
@@ -162,7 +162,7 @@ function open(url: string) {
</ElButton>
</PageHeader>
<PageMain>
<div class="grid items-center gap-y-4 md:grid-cols-2 md:gap-x-8">
<div class="grid items-center gap-y-4 md-grid-cols-2 md-gap-x-8">
<el-input ref="inputRef" v-model="formattedValue" />
<div>
数值：<code class="ml-2">{{ numberValue != null ? numberValue : 'null' }}</code>
@@ -178,7 +178,7 @@ function open(url: string) {
</el-button>
</div>
</template>
<div class="grid grid-cols-1 gap-x-8 md:grid-cols-2">
<div class="grid grid-cols-1 gap-x-8 md-grid-cols-2">
<div>
<Option.reuse label="地理位置">
<template #switch>