feat: 中心的空隙以及头部结构
This commit is contained in:
wang_fan_w
parent
2c272b47ab
commit
94212b4d5b
@ -1,2 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname -- "$0")/husky.sh"
|
||||
|
||||
npx --no-install commitlint --edit $1
|
||||
@ -1,2 +1,5 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
#!/bin/sh
|
||||
|
||||
. "$(dirname "$0")/husky.sh"
|
||||
|
||||
npm run lint-staged
|
||||
130
src/auto-import.d.ts
vendored
130
src/auto-import.d.ts
vendored
@ -5,67 +5,79 @@
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const EffectScope: (typeof import("vue"))["EffectScope"];
|
||||
const computed: (typeof import("vue"))["computed"];
|
||||
const createApp: (typeof import("vue"))["createApp"];
|
||||
const customRef: (typeof import("vue"))["customRef"];
|
||||
const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
|
||||
const defineComponent: (typeof import("vue"))["defineComponent"];
|
||||
const effectScope: (typeof import("vue"))["effectScope"];
|
||||
const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
|
||||
const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
|
||||
const h: (typeof import("vue"))["h"];
|
||||
const inject: (typeof import("vue"))["inject"];
|
||||
const isProxy: (typeof import("vue"))["isProxy"];
|
||||
const isReactive: (typeof import("vue"))["isReactive"];
|
||||
const isReadonly: (typeof import("vue"))["isReadonly"];
|
||||
const isRef: (typeof import("vue"))["isRef"];
|
||||
const markRaw: (typeof import("vue"))["markRaw"];
|
||||
const nextTick: (typeof import("vue"))["nextTick"];
|
||||
const onActivated: (typeof import("vue"))["onActivated"];
|
||||
const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
|
||||
const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
|
||||
const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
|
||||
const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
|
||||
const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
|
||||
const onDeactivated: (typeof import("vue"))["onDeactivated"];
|
||||
const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
|
||||
const onMounted: (typeof import("vue"))["onMounted"];
|
||||
const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
|
||||
const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
|
||||
const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
|
||||
const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
|
||||
const onUnmounted: (typeof import("vue"))["onUnmounted"];
|
||||
const onUpdated: (typeof import("vue"))["onUpdated"];
|
||||
const provide: (typeof import("vue"))["provide"];
|
||||
const reactive: (typeof import("vue"))["reactive"];
|
||||
const readonly: (typeof import("vue"))["readonly"];
|
||||
const ref: (typeof import("vue"))["ref"];
|
||||
const resolveComponent: (typeof import("vue"))["resolveComponent"];
|
||||
const shallowReactive: (typeof import("vue"))["shallowReactive"];
|
||||
const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
|
||||
const shallowRef: (typeof import("vue"))["shallowRef"];
|
||||
const toRaw: (typeof import("vue"))["toRaw"];
|
||||
const toRef: (typeof import("vue"))["toRef"];
|
||||
const toRefs: (typeof import("vue"))["toRefs"];
|
||||
const toValue: (typeof import("vue"))["toValue"];
|
||||
const triggerRef: (typeof import("vue"))["triggerRef"];
|
||||
const unref: (typeof import("vue"))["unref"];
|
||||
const useAttrs: (typeof import("vue"))["useAttrs"];
|
||||
const useCssModule: (typeof import("vue"))["useCssModule"];
|
||||
const useCssVars: (typeof import("vue"))["useCssVars"];
|
||||
const useLink: (typeof import("vue-router"))["useLink"];
|
||||
const useRoute: (typeof import("vue-router"))["useRoute"];
|
||||
const useRouter: (typeof import("vue-router"))["useRouter"];
|
||||
const useSlots: (typeof import("vue"))["useSlots"];
|
||||
const watch: (typeof import("vue"))["watch"];
|
||||
const watchEffect: (typeof import("vue"))["watchEffect"];
|
||||
const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
|
||||
const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
export type {
|
||||
Component,
|
||||
ComponentPublicInstance,
|
||||
ComputedRef,
|
||||
ExtractDefaultPropTypes,
|
||||
ExtractPropTypes,
|
||||
ExtractPublicPropTypes,
|
||||
InjectionKey,
|
||||
PropType,
|
||||
Ref,
|
||||
VNode,
|
||||
WritableComputedRef
|
||||
} from "vue";
|
||||
import("vue");
|
||||
}
|
||||
|
||||
8
src/components.d.ts
vendored
8
src/components.d.ts
vendored
@ -5,10 +5,10 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
|
||||
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
|
||||
<a-menu show-collapse-button @collapse="onCollapse">
|
||||
<a-menu show-collapse-button breakpoint="xl" @collapse="onCollapse">
|
||||
<a-menu-item key="0_0_0" data-obj="1">Menu 1</a-menu-item>
|
||||
<a-sub-menu :key="item" v-for="item in 20">
|
||||
<template #icon><icon-apps></icon-apps></template>
|
||||
@ -41,7 +41,7 @@ const onCollapse = (type: boolean) => {
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-1;
|
||||
border-right: $border-1 solid $color-border-2;
|
||||
.logo {
|
||||
width: 30px;
|
||||
}
|
||||
@ -62,4 +62,9 @@ const onCollapse = (type: boolean) => {
|
||||
width: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
// 去掉右侧阴影并替换为边线
|
||||
:deep(.arco-layout-sider-light) {
|
||||
box-shadow: unset;
|
||||
border-right: $border-1 solid $color-border-2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-layout-footer class="footer">
|
||||
<div class="footer_title">dc-admin by 兔子先森</div>
|
||||
<div class="footer_title">DC-Admin by 兔子先森</div>
|
||||
</a-layout-footer>
|
||||
</template>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
.footer {
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
border-top: $border-1 solid $color-border-1;
|
||||
border-top: $border-1 solid $color-border-2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,13 +1,113 @@
|
||||
<template>
|
||||
<a-layout-header class="header">Header</a-layout-header>
|
||||
<a-layout-header class="header">
|
||||
<div class="header_crumb">
|
||||
<div class="menu_fold"><icon-menu-fold style="font-size: 18px; stroke-width: 3" /></div>
|
||||
<div class="breadcrumb">
|
||||
<a-space direction="vertical">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<icon-home />
|
||||
首页
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>
|
||||
<icon-at />
|
||||
常用组件
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>
|
||||
<icon-at />
|
||||
文件上传
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_setting">
|
||||
<a-tooltip content="语言">
|
||||
<div>
|
||||
<icon-language />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="切换黑夜模式">
|
||||
<div>
|
||||
<icon-sun-fill />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="通知">
|
||||
<div>
|
||||
<icon-notification />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="全屏">
|
||||
<div>
|
||||
<icon-fullscreen />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="系统设置">
|
||||
<div>
|
||||
<icon-settings />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip content="主题设置">
|
||||
<div>
|
||||
<icon-skin />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="my_image"><a-image width="32" :src="Tom" /></div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import Tom from "@/assets/img/tom.jpg";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-1;
|
||||
border-bottom: $border-1 solid $color-border-2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.header_crumb {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.menu_fold {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-left: $margin;
|
||||
}
|
||||
}
|
||||
.header_setting {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
// border: $border-1 solid $color-border-1;
|
||||
margin-left: $margin;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
> div:hover {
|
||||
background: $color-fill-1;
|
||||
}
|
||||
.my_image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,31 @@
|
||||
<template>
|
||||
<a-layout-content class="content">
|
||||
<Tabs />
|
||||
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
|
||||
<div style="height: 2000px; background: #eee"></div>
|
||||
<div class="main">
|
||||
<div class="main_box"></div>
|
||||
</div>
|
||||
</a-scrollbar>
|
||||
</a-layout-content>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import Tabs from "@/layout/components/Tabs/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
|
||||
}
|
||||
.scrollbar {
|
||||
height: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.main {
|
||||
padding: $padding;
|
||||
.main_box {
|
||||
height: 1000px;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
// 修改左侧滚动条宽度
|
||||
:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div>tabs栏</div>
|
||||
<div class="tabs">tabs栏</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: $border-1 solid $color-border-2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,20 +5,32 @@ $padding: 16px; // 盒子和内容的间距
|
||||
$radius-box: 2px; // 边框圆角
|
||||
|
||||
// 边框宽度
|
||||
$border-1: 1px; // 常规
|
||||
$border-1: 1px; // 常规-主要
|
||||
$border-2: 2px; // 较粗
|
||||
$border-3: 3px; // 粗
|
||||
|
||||
// 边框色
|
||||
$color-border-1: var(--color-border-1); // 浅色
|
||||
$color-border-2: var(--color-border-2); // 常规-主要边框色
|
||||
$color-border-3: var(--color-border-3); // 深/悬浮
|
||||
$color-border-4: var(--color-border-4); // 重/按钮描边
|
||||
|
||||
// 默认不占位边框
|
||||
$border-no-1: inset 0 0 0 1px red;
|
||||
$border-no-2: inset 0 0 0 1px cyan;
|
||||
$border-no-3: inset 0 0 0 1px blue;
|
||||
$border-no-4: inset 0 0 0 1px gold;
|
||||
$border-no-5: inset 0 0 0 1px violet;
|
||||
$border-no-6: inset 0 0 0 1px green;
|
||||
$shadow-border-1: inset 0 0 0 1px red;
|
||||
$shadow-border-2: inset 0 0 0 1px cyan;
|
||||
$shadow-border-3: inset 0 0 0 1px blue;
|
||||
$shadow-border-4: inset 0 0 0 1px gold;
|
||||
$shadow-border-5: inset 0 0 0 1px violet;
|
||||
$shadow-border-6: inset 0 0 0 1px green;
|
||||
|
||||
// 填充色
|
||||
$color-fill-1: #eeeeee; // 常规填充色/白底悬浮
|
||||
$color-fill-2: #d1d1d1; // 深/灰底悬浮
|
||||
$color-fill-3: #b6b6b6; // 重/特殊场景
|
||||
$color-fill-4: #9b9b9b; // 浅/禁用
|
||||
|
||||
// 设置全局主题色：https://arco.design/vue/docs/token
|
||||
$color-primary: rgb(var(--primary-6)); // 主题色
|
||||
$color-primary: rgb(var(--primary-6)); // 主题色-主要
|
||||
$color-success: rgb(var(--success-6)); // 成功色
|
||||
$color-warning: rgb(var(--warning-6)); // 警示色
|
||||
$color-danger: rgb(var(--danger-6)); // 错误色
|
||||
@ -30,12 +42,6 @@ $color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
|
||||
$color-text-3: var(--color-text-3); // 次要信息 二级字体色
|
||||
$color-text-4: var(--color-text-4); // 置灰信息
|
||||
|
||||
// 边框色
|
||||
$color-border-1: var(--color-border-1); // 浅色-主要边框色
|
||||
$color-border-2: var(--color-border-2); // 一般
|
||||
$color-border-3: var(--color-border-3); // 深/悬浮
|
||||
$color-border-4: var(--color-border-4); // 重/按钮描边
|
||||
|
||||
// 背景色
|
||||
$color-bg-1: var(--color-bg-1); // 整体背景色
|
||||
$color-bg-2: var(--color-bg-2); // 一级容器背景
|
||||
@ -51,7 +57,7 @@ $shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
|
||||
// 常规大小为字体对应的首选项
|
||||
// 字体大小
|
||||
$font-size-body-3: 14px; // 默认大小-正文-常规
|
||||
$font-size-body-2: 13px; // 默认的小号字体
|
||||
$font-size-body-2: 13px; // 小号字体
|
||||
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
|
||||
// 标题
|
||||
$font-size-title-1: 16px; // h3-标题-小
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user