feat: aside搭建
This commit is contained in:
wf
parent
6a3e34538a
commit
69fe08d773
1
.husky/_/.gitignore
vendored
1
.husky/_/.gitignore
vendored
@ -0,0 +1 @@
|
||||
*
|
||||
@ -1,4 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/husky.sh"
|
||||
|
||||
npx --no-install commitlint --edit $1
|
||||
. "${0%/*}/h"
|
||||
@ -1,4 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname "$0")/husky.sh"
|
||||
|
||||
npm run lint-staged
|
||||
. "${0%/*}/h"
|
||||
BIN
src/assets/img/logo.jpg
Normal file
BIN
src/assets/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
130
src/auto-import.d.ts
vendored
130
src/auto-import.d.ts
vendored
@ -5,79 +5,67 @@
|
||||
// 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')
|
||||
}
|
||||
|
||||
12
src/components.d.ts
vendored
12
src/components.d.ts
vendored
@ -5,12 +5,12 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module "vue" {
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Aaa: (typeof import("./components/aaa.vue"))["default"];
|
||||
HelloWorld: (typeof import("./components/HelloWorld.vue"))["default"];
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
|
||||
Aaa: typeof import('./components/aaa.vue')['default']
|
||||
HelloWorld: (typeof import("./components/HelloWorld.vue"))["default"]
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,76 @@
|
||||
<template>
|
||||
<a-layout-sider :width="220">
|
||||
<div class="logo_head"></div>
|
||||
<a-layout-sider collapsible breakpoint="xl" @collapse="onCollapse">
|
||||
<div class="logo_head">
|
||||
<img :src="Logo" class="logo" />
|
||||
<span class="logo_title" v-if="!collapse">dc admin</span>
|
||||
</div>
|
||||
<a-scrollbar outer-class="aside_scroll">
|
||||
<div class="aside_menu"></div>
|
||||
<a-menu :default-open-keys="['0']" :default-selected-keys="['0_2']" breakpoint="xl" :collapsed="collapse">
|
||||
<a-sub-menu key="0">
|
||||
<template #icon><icon-apps></icon-apps></template>
|
||||
<template #title>Navigation 1</template>
|
||||
<a-menu-item key="0_0">Menu 1</a-menu-item>
|
||||
<a-menu-item key="0_1">Menu 2</a-menu-item>
|
||||
<a-menu-item key="0_2">Menu 3</a-menu-item>
|
||||
<a-menu-item key="0_3">Menu 4</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="1">
|
||||
<template #icon><icon-bug></icon-bug></template>
|
||||
<template #title>Navigation 2</template>
|
||||
<a-menu-item key="1_0">Menu 1</a-menu-item>
|
||||
<a-menu-item key="1_1">Menu 2</a-menu-item>
|
||||
<a-menu-item key="1_2">Menu 3</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="2">
|
||||
<template #icon><icon-bulb></icon-bulb></template>
|
||||
<template #title>Navigation 3</template>
|
||||
<a-menu-item key="2_0">Menu 1</a-menu-item>
|
||||
<a-menu-item key="2_1">Menu 2</a-menu-item>
|
||||
<a-sub-menu key="2_2" title="Navigation 4">
|
||||
<a-menu-item key="2_2_0">Menu 1</a-menu-item>
|
||||
<a-menu-item key="2_2_1">Menu 2</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-scrollbar>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import Logo from "@/assets/img/logo.jpg";
|
||||
import { Message } from "@arco-design/web-vue";
|
||||
|
||||
const collapse = ref<boolean>(false);
|
||||
const onCollapse = (val: boolean, type: string) => {
|
||||
console.log("收缩", val, type);
|
||||
collapse.value = val;
|
||||
const content = type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
|
||||
Message.info({
|
||||
content,
|
||||
duration: 2000
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logo_head {
|
||||
height: 60px;
|
||||
box-shadow: inset 0 0 0 1px red;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.logo {
|
||||
width: 50px;
|
||||
}
|
||||
.logo_title {
|
||||
font-weight: bold;
|
||||
font-size: $font-size-title-2;
|
||||
}
|
||||
}
|
||||
|
||||
.aside_scroll {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
box-shadow: inset 0 0 0 1px black;
|
||||
.aside_menu {
|
||||
box-shadow: inset 0 0 0 1px cyan;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,15 +40,16 @@ $shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1
|
||||
$shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
|
||||
$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-标题-小
|
||||
$font-size-title-2: 20px; // h2-标题-中
|
||||
$font-size-title-2: 20px; // 常规-h2-标题-中
|
||||
$font-size-title-3: 24px; // h1-标题-大
|
||||
// 运营标题
|
||||
$font-size-display-1: 36px; // 运营标题-小
|
||||
$font-size-display-2: 48px; // 运营标题-中
|
||||
$font-size-display-2: 48px; // 常规-运营标题-中
|
||||
$font-size-display-3: 56px; // 运营标题-大
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user