wip: v2 coding
This commit is contained in:
kailong321200875
parent
a43e286186
commit
15be32df99
|
|
@ -29,7 +29,7 @@ onMounted(() => {
|
|||
<div
|
||||
:class="[
|
||||
`${prefixCls}-header`,
|
||||
'flex border-bottom-1 h-50px items-center text-center bg-white pr-10px'
|
||||
'flex b-b-1 h-50px items-center text-center bg-white pr-10px'
|
||||
]"
|
||||
>
|
||||
<div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const toggleClick = () => {
|
|||
v-if="title"
|
||||
:class="[
|
||||
`${prefixCls}-header`,
|
||||
'h-50px flex justify-between items-center border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
|
||||
'h-50px flex justify-between items-center b-b-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
|
||||
]"
|
||||
@click="toggleClick"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ defineExpose({
|
|||
<Toolbar
|
||||
:editor="editorRef"
|
||||
:editorId="editorId"
|
||||
class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"
|
||||
class="b-b-1 border-solid border-[var(--tags-view-border-color)]"
|
||||
/>
|
||||
<!-- 编辑器 -->
|
||||
<Editor
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const setLang = (lang: LocaleType) => {
|
|||
<Icon
|
||||
:size="18"
|
||||
icon="ion:language-sharp"
|
||||
class="cursor-pointer"
|
||||
class="cursor-pointer !p-0"
|
||||
:class="$attrs.class"
|
||||
:color="color"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default defineComponent({
|
|||
</div>
|
||||
<Menu
|
||||
class={[
|
||||
'!absolute top-0 border-left-1 border-solid border-[var(--left-menu-bg-light-color)]',
|
||||
'!absolute top-0 b-l-1 border-solid border-[var(--left-menu-bg-light-color)]',
|
||||
{
|
||||
'!left-[var(--tab-menu-min-width)]': unref(collapse),
|
||||
'!left-[var(--tab-menu-max-width)]': !unref(collapse),
|
||||
|
|
|
|||
|
|
@ -48,25 +48,25 @@ export default defineComponent({
|
|||
{layout.value !== 'top' ? (
|
||||
<div class="h-full flex items-center">
|
||||
{hamburger.value && layout.value !== 'cutMenu' ? (
|
||||
<Collapse class="hover-trigger" color="var(--top-header-text-color)"></Collapse>
|
||||
<Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
|
||||
) : undefined}
|
||||
{breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
<div class="h-full flex items-center">
|
||||
{screenfull.value ? (
|
||||
<Screenfull class="hover-trigger" color="var(--top-header-text-color)"></Screenfull>
|
||||
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
|
||||
) : undefined}
|
||||
{size.value ? (
|
||||
<SizeDropdown class="hover-trigger" color="var(--top-header-text-color)"></SizeDropdown>
|
||||
<SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
|
||||
) : undefined}
|
||||
{locale.value ? (
|
||||
<LocaleDropdown
|
||||
class="hover-trigger"
|
||||
class="custom-hover"
|
||||
color="var(--top-header-text-color)"
|
||||
></LocaleDropdown>
|
||||
) : undefined}
|
||||
<UserInfo class="hover-trigger"></UserInfo>
|
||||
<UserInfo class="custom-hover"></UserInfo>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const useRenderLayout = () => {
|
|||
{logo.value ? (
|
||||
<Logo
|
||||
class={[
|
||||
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
|
||||
'bg-[var(--left-menu-bg-color)] relative dark:custom-b-b-1',
|
||||
{
|
||||
'!pl-0': mobile.value && collapse.value,
|
||||
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
|
||||
|
|
@ -92,10 +92,10 @@ export const useRenderLayout = () => {
|
|||
]}
|
||||
style="transition: all var(--transition-time-02);"
|
||||
>
|
||||
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
|
||||
<ToolHeader class="border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
|
||||
|
||||
{tagsView.value ? (
|
||||
<TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
|
||||
<TagsView class="b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
|
|
@ -109,8 +109,8 @@ export const useRenderLayout = () => {
|
|||
const renderTopLeft = () => {
|
||||
return (
|
||||
<>
|
||||
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
|
||||
<div class="flex items-center bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
|
||||
|
||||
<ToolHeader class="flex-1"></ToolHeader>
|
||||
</div>
|
||||
|
|
@ -142,7 +142,7 @@ export const useRenderLayout = () => {
|
|||
{tagsView.value ? (
|
||||
<TagsView
|
||||
class={[
|
||||
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
'b-b-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
{
|
||||
'!fixed top-0 left-0 z-10': fixedHeader.value,
|
||||
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
|
||||
|
|
@ -166,8 +166,8 @@ export const useRenderLayout = () => {
|
|||
const renderTop = () => {
|
||||
return (
|
||||
<>
|
||||
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="hover-trigger"></Logo> : undefined}
|
||||
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="custom-hover"></Logo> : undefined}
|
||||
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
|
||||
<ToolHeader></ToolHeader>
|
||||
</div>
|
||||
|
|
@ -186,7 +186,7 @@ export const useRenderLayout = () => {
|
|||
{tagsView.value ? (
|
||||
<TagsView
|
||||
class={[
|
||||
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
{
|
||||
'!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
|
||||
}
|
||||
|
|
@ -205,8 +205,8 @@ export const useRenderLayout = () => {
|
|||
const renderCutMenu = () => {
|
||||
return (
|
||||
<>
|
||||
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
|
||||
<div class="flex items-center bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
|
||||
{logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
|
||||
|
||||
<ToolHeader class="flex-1"></ToolHeader>
|
||||
</div>
|
||||
|
|
@ -242,7 +242,7 @@ export const useRenderLayout = () => {
|
|||
{tagsView.value ? (
|
||||
<TagsView
|
||||
class={[
|
||||
'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
|
||||
{
|
||||
'!fixed top-0 left-0 z-10': fixedHeader.value,
|
||||
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@
|
|||
|
||||
--top-tool-p-x: 0;
|
||||
|
||||
--custom-border-color-light: #eee;
|
||||
|
||||
--top-tool-border-color: #eee;
|
||||
|
||||
--tags-view-height: 35px;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const toLogin = () => {
|
|||
<template>
|
||||
<div
|
||||
:class="prefixCls"
|
||||
class="h-[100%] relative lt-xl:v-dark lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
|
||||
class="h-[100%] relative lt-xl:bg-[var(--dark-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
|
||||
>
|
||||
<div class="relative h-full flex mx-auto">
|
||||
<div
|
||||
|
|
@ -54,7 +54,7 @@ const toLogin = () => {
|
|||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-30px lt-sm:p-10px dark:v-dark relative">
|
||||
<div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--dark-bg-color)] relative">
|
||||
<div
|
||||
class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,47 @@
|
|||
import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
|
||||
// color: ${JSON.stringify(rules)} ${JSON.stringify(variantHandlers)};
|
||||
|
||||
const POSITION_MAP = {
|
||||
t: 'top',
|
||||
b: 'bottom',
|
||||
l: 'left',
|
||||
r: 'right',
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
left: 'left',
|
||||
right: 'right'
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
// ...UnoCSS options
|
||||
rules: [
|
||||
[
|
||||
'v-dark',
|
||||
{
|
||||
'background-color': 'var(--dark-bg-color)'
|
||||
/^custom-b-(.+)-(\d+)$/,
|
||||
([_, position, count], { rawSelector, rules, variantHandlers }) => {
|
||||
// custom-b-bottom-1 或者 custom-b-b-1
|
||||
const selector = e(rawSelector)
|
||||
const newPosition = POSITION_MAP[position]
|
||||
return `
|
||||
${selector}:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: ${newPosition === 'bottom' || newPosition === 'top' ? '100%' : count + 'px'};
|
||||
height: ${newPosition === 'left' || newPosition === 'right' ? '100%' : count + 'px'};
|
||||
${newPosition === 'bottom' ? 'bottom' : 'top'}: 0px;
|
||||
${newPosition === 'right' ? 'right' : 'left'}: 0px;
|
||||
background-color: var(--custom-border-color-light);
|
||||
}
|
||||
|
||||
.dark ${selector}:after {
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
`
|
||||
}
|
||||
],
|
||||
[/^border-top-(\d+)$/, (match) => ({ 'border-top-width': `${match[1]}px` })],
|
||||
[/^border-left-(\d+)$/, (match) => ({ 'border-left-width': `${match[1]}px` })],
|
||||
[/^border-right-(\d+)$/, (match) => ({ 'border-right-width': `${match[1]}px` })],
|
||||
[/^border-bottom-(\d+)$/, (match) => ({ 'border-bottom-width': `${match[1]}px` })],
|
||||
[
|
||||
/^hover-trigger(.+)$/,
|
||||
([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
|
||||
console.log(variantHandlers)
|
||||
// if you want, you can disable the variants for this rule
|
||||
if (variantHandlers.length) return
|
||||
/^custom-hover$/,
|
||||
([], { rawSelector }) => {
|
||||
const selector = e(rawSelector)
|
||||
// return a string instead of an object
|
||||
return `
|
||||
${selector} {
|
||||
display: flex;
|
||||
|
|
@ -34,7 +55,7 @@ ${selector} {
|
|||
${selector}:hover {
|
||||
background-color: var(--top-header-hover-color);
|
||||
}
|
||||
.dark ${selector} {
|
||||
.dark ${selector}:hover {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue