kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 样式布局调整完成

This commit is contained in:
kailong321200875 2023-04-18 17:09:03 +08:00
parent 15be32df99
commit 719317694f
12 changed files with 146 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -67,6 +67,7 @@
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"@unocss/preset-wind": "^0.51.4",
"@unocss/transformer-variant-group": "^0.51.4",
"@vitejs/plugin-legacy": "^4.0.2",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",

3
src/components/Logo/src/Logo.vue
View File

@ -60,8 +60,7 @@ watch(
:class="[
prefixCls,
layout !== 'classic' ? `${prefixCls}__Top` : '',
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative',
'dark:bg-[var(--el-bg-color)]'
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none'
]"
to="/"
>

17
src/components/Menu/src/Menu.vue
View File

@ -138,14 +138,15 @@ export default defineComponent({
position: relative;
transition: width var(--transition-time-02);
&:after {
position: absolute;
top: 0;
right: 0;
height: 100%;
border-left: 1px solid var(--left-menu-border-color);
content: '';
}
// &:after {
// position: absolute;
// top: 0;
// right: 0;
// height: 100%;
// width: 1px;
// background-color: var(--el-border-color);
// content: '';
// }
:deep(.@{elNamespace}-menu) {
width: 100% !important;

4
src/components/TabMenu/src/TabMenu.vue
View File

@ -141,7 +141,7 @@ export default defineComponent({
id={`${variables.namespace}-menu`}
class={[
prefixCls,
'relative bg-[var(--left-menu-bg-color)] top-1px z-3000',
'relative bg-[var(--left-menu-bg-color)] top-1px z-3000 layout-border__right',
{
'w-[var(--tab-menu-max-width)]': !unref(collapse),
'w-[var(--tab-menu-min-width)]': unref(collapse)
@ -197,7 +197,7 @@ export default defineComponent({
</div>
<Menu
class={[
'!absolute top-0 b-l-1 border-solid border-[var(--left-menu-bg-light-color)]',
'!absolute top-0',
{
'!left-[var(--tab-menu-min-width)]': unref(collapse),
'!left-[var(--tab-menu-max-width)]': !unref(collapse),

59
src/components/TagsView/src/TagsView.vue
View File

@ -264,8 +264,8 @@ watch(
class="flex w-full relative bg-[#fff] dark:bg-[var(--el-bg-color)]"
>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
:class="`${prefixCls}__tool ${prefixCls}__tool--first`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="move(-200)"
>
<Icon
@ -381,7 +381,7 @@ watch(
</div>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="move(200)"
>
<Icon
@ -391,7 +391,7 @@ watch(
</span>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
@click="refreshSelectedTag(selectedTag)"
>
<Icon
@ -455,7 +455,7 @@ watch(
>
<span
:class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer block"
>
<Icon
icon="ant-design:setting-outlined"
@ -476,34 +476,48 @@ watch(
&__tool {
position: relative;
&:hover {
:deep(span) {
color: var(--el-color-black) !important;
}
}
&:after {
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
border-right: 1px solid var(--tags-view-border-color);
border-left: 1px solid var(--tags-view-border-color);
content: '';
}
&--first {
&:after {
display: none;
}
&:before {
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
border-right: 1px solid var(--tags-view-border-color);
content: '';
}
}
&:hover {
:deep(span) {
color: var(--el-color-black) !important;
}
}
}
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(~'100% - 6px');
padding-right: 25px;
margin-left: 4px;
font-size: 12px;
cursor: pointer;
border: 1px solid #d9d9d9;
border-radius: 2px;
&--close {
position: absolute;
@ -547,18 +561,20 @@ watch(
}
&:after {
border-right: 1px solid var(--el-border-color);
border-left: 1px solid var(--el-border-color);
}
&--first {
&:before {
border-right: 1px solid var(--el-border-color);
}
&:after {
display: none;
}
}
}
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
padding-right: 25px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--el-border-color);
}
@ -571,6 +587,7 @@ watch(
&__item.is-active {
color: var(--el-color-white);
background-color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
.@{prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;

29
src/layout/components/AppView.vue
View File

@ -17,26 +17,37 @@ const tagsViewStore = useTagsViewStore()
const getCaches = computed((): string[] => {
return tagsViewStore.getCachedViews
})
const tagsView = computed(() => appStore.getTagsView)
</script>
<template>
<section
:class="[
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
{
'!min-h-[calc(100%-var(--app-footer-height))]':
((fixedHeader && (layout === 'classic' || layout === 'topLeft')) || layout === 'top') &&
footer,
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
(fixedHeader &&
(layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
footer) ||
(!tagsView && layout === 'top' && footer),
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
tagsView && layout === 'top' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
!fixedHeader && layout === 'classic' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
!fixedHeader && (layout === 'topLeft' || layout === 'top') && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
!fixedHeader && layout === 'topLeft' && footer,
'!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
// '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height)-var(--top-tool-height))]':
// !fixedHeader && layout === 'top' && footer,
'!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
'!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
fixedHeader && layout === 'cutMenu' && footer,
'!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
!fixedHeader && layout === 'cutMenu' && footer
}
]"

72
src/layout/components/useRenderLayout.tsx
View File

@ -39,11 +39,16 @@ export const useRenderLayout = () => {
const renderClassic = () => {
return (
<>
<div class={['absolute top-0 left-0 h-full', { '!fixed z-3000': mobile.value }]}>
<div
class={[
'absolute top-0 left-0 h-full layout-border__right',
{ '!fixed z-3000': mobile.value }
]}
>
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)] relative dark:custom-b-b-1',
'bg-[var(--left-menu-bg-color)] relative',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
@ -92,10 +97,17 @@ export const useRenderLayout = () => {
]}
style="transition: all var(--transition-time-02);"
>
<ToolHeader class="border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
<ToolHeader
class={[
'bg-[var(--top-header-bg-color)]',
{
'layout-border__bottom': !tagsView.value
}
]}
></ToolHeader>
{tagsView.value ? (
<TagsView class="b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
<TagsView class="layout-border__bottom layout-border__top"></TagsView>
) : undefined}
</div>
@ -109,13 +121,13 @@ export const useRenderLayout = () => {
const renderTopLeft = () => {
return (
<>
<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}
<div class="flex items-center bg-[var(--top-header-bg-color)] relative layout-border__bottom dark:bg-[var(--el-bg-color)]">
{logo.value ? <Logo class="custom-hover"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
<div class="absolute top-[var(--logo-height)+1px] left-0 w-full h-[calc(100%-1px-var(--logo-height))] flex">
<Menu class="!h-full"></Menu>
<Menu class="!h-full relative layout-border__right"></Menu>
<div
class={[
`${prefixCls}-content`,
@ -142,12 +154,12 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'b-b-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
'layout-border__bottom absolute',
{
'!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)]':
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[calc(var(--logo-height)+1px)]':
collapse.value && fixedHeader.value,
'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[calc(var(--logo-height)+1px)]':
!collapse.value && fixedHeader.value
}
]}
@ -166,12 +178,28 @@ export const useRenderLayout = () => {
const renderTop = () => {
return (
<>
<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)]">
<div
class={[
'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
{
'layout-border__bottom': !tagsView.value
}
]}
>
{logo.value ? <Logo class="custom-hover"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
</div>
<div class={[`${prefixCls}-content`, 'h-full w-full']}>
<div
class={[
`${prefixCls}-content`,
'w-full',
{
'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value,
'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
}
]}
>
<ElScrollbar
v-loading={pageLoading.value}
class={[
@ -186,9 +214,9 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
'layout-border__bottom layout-border__top relative',
{
'!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
'!fixed w-full top-[calc(var(--top-tool-height)+1px)] left-0': fixedHeader.value
}
]}
style="transition: width var(--transition-time-02), left var(--transition-time-02);"
@ -205,12 +233,12 @@ export const useRenderLayout = () => {
const renderCutMenu = () => {
return (
<>
<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)]">
<div class="flex items-center bg-[var(--top-header-bg-color)] relative layout-border__bottom">
{logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
<div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
<div class="absolute top-[var(--logo-height)] left-0 w-[calc(100%-2px)] h-[calc(100%-var(--logo-height))] flex">
<TabMenu></TabMenu>
<div
class={[
@ -242,18 +270,18 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
'relative layout-border__bottom layout-border__top',
{
'!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)]':
'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value,
'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value,
'!fixed top-0 left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
'!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value && fixedMenu.value
}
]}

10
src/styles/var.css
View File

@ -1,5 +1,5 @@
:root {
--dark-bg-color: #293146;
--login-bg-color: #293146;
/* left menu start */
--left-menu-border-color: '#eee';
@ -40,7 +40,7 @@
--top-tool-p-x: 0;
--custom-border-color-light: #eee;
--layout-border-color: #eee;
--top-tool-border-color: #eee;
@ -67,3 +67,9 @@
--transition-time-02: 0.2s;
}
.dark {
--layout-border-color: var(--el-border-color);
--app-content-bg-color: var(--el-bg-color);
}

4
src/views/Login/Login.vue
View File

@ -30,7 +30,7 @@ const toLogin = () => {
<template>
<div
:class="prefixCls"
class="h-[100%] relative lt-xl:bg-[var(--dark-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
class="h-[100%] relative lt-xl:bg-[var(--login-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:bg-[var(--dark-bg-color)] relative">
<div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
<div
class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
>

2
src/views/Login/components/LoginForm.vue
View File

@ -191,7 +191,7 @@ const toRegister = () => {
label-position="top"
hide-required-asterisk
size="large"
class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
@register="register"
>
<template #title>

2
src/views/Login/components/RegisterForm.vue
View File

@ -116,7 +116,7 @@ const loginRegister = async () => {
label-position="top"
hide-required-asterisk
size="large"
class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
@register="register"
>
<template #title>

37
uno.config.ts
View File

@ -1,4 +1,5 @@
import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'
// color: ${JSON.stringify(rules)} ${JSON.stringify(variantHandlers)};
const POSITION_MAP = {
@ -15,29 +16,6 @@ const POSITION_MAP = {
export default defineConfig({
// ...UnoCSS options
rules: [
[
/^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);
}
`
}
],
[
/^custom-hover$/,
([], { rawSelector }) => {
@ -62,5 +40,16 @@ ${selector}:hover {
}
]
],
presets: [presetUno({ dark: 'class', attributify: false })]
presets: [presetUno({ dark: 'class', attributify: false })],
transformers: [transformerVariantGroup()],
shortcuts: {
'layout-border__left':
'before:(content-none absolute top-0 left-0 w-1px h-full bg-[var(--layout-border-color)]) z-10',
'layout-border__right':
'after:(content-none absolute top-0 right-0 w-1px h-full bg-[var(--layout-border-color)]) z-10',
'layout-border__top':
'before:(content-none absolute top-0 left-0 w-full h-1px bg-[var(--layout-border-color)]) z-10',
'layout-border__bottom':
'after:(content-none absolute bottom-0 left-0 w-full h-1px bg-[var(--layout-border-color)]) z-10'
}
})