attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: aside搭建

Browse Source
This commit is contained in:
wf 2024-04-02 13:49:09 +08:00
parent 6a3e34538a
commit 69fe08d773
8 changed files with 131 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.husky/_/.gitignore vendored
View File

@ -0,0 +1 @@
*

4
.husky/_/commit-msg
View File

@ -1,4 +1,2 @@
#!/usr/bin/env sh #!/usr/bin/env sh
. "$(dirname -- "$0")/husky.sh" . "${0%/*}/h"
npx --no-install commitlint --edit $1

4
.husky/_/pre-commit
View File

@ -1,4 +1,2 @@
#!/usr/bin/env sh #!/usr/bin/env sh
. "$(dirname "$0")/husky.sh" . "${0%/*}/h"
npm run lint-staged

BIN
src/assets/img/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

130
src/auto-import.d.ts vendored
View File

@ -5,79 +5,67 @@
// Generated by unplugin-auto-import // Generated by unplugin-auto-import
export {} export {}
declare global { declare global {
const EffectScope: (typeof import("vue"))["EffectScope"]; const EffectScope: typeof import('vue')['EffectScope']
const computed: (typeof import("vue"))["computed"]; const computed: typeof import('vue')['computed']
const createApp: (typeof import("vue"))["createApp"]; const createApp: typeof import('vue')['createApp']
const customRef: (typeof import("vue"))["customRef"]; const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"]; const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: (typeof import("vue"))["defineComponent"]; const defineComponent: typeof import('vue')['defineComponent']
const effectScope: (typeof import("vue"))["effectScope"]; const effectScope: typeof import('vue')['effectScope']
const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"]; const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: (typeof import("vue"))["getCurrentScope"]; const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: (typeof import("vue"))["h"]; const h: typeof import('vue')['h']
const inject: (typeof import("vue"))["inject"]; const inject: typeof import('vue')['inject']
const isProxy: (typeof import("vue"))["isProxy"]; const isProxy: typeof import('vue')['isProxy']
const isReactive: (typeof import("vue"))["isReactive"]; const isReactive: typeof import('vue')['isReactive']
const isReadonly: (typeof import("vue"))["isReadonly"]; const isReadonly: typeof import('vue')['isReadonly']
const isRef: (typeof import("vue"))["isRef"]; const isRef: typeof import('vue')['isRef']
const markRaw: (typeof import("vue"))["markRaw"]; const markRaw: typeof import('vue')['markRaw']
const nextTick: (typeof import("vue"))["nextTick"]; const nextTick: typeof import('vue')['nextTick']
const onActivated: (typeof import("vue"))["onActivated"]; const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: (typeof import("vue"))["onBeforeMount"]; const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"]; const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"]; const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"]; const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"]; const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: (typeof import("vue"))["onDeactivated"]; const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"]; const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: (typeof import("vue"))["onMounted"]; const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: (typeof import("vue"))["onRenderTracked"]; const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"]; const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: (typeof import("vue"))["onScopeDispose"]; const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"]; const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: (typeof import("vue"))["onUnmounted"]; const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: (typeof import("vue"))["onUpdated"]; const onUpdated: typeof import('vue')['onUpdated']
const provide: (typeof import("vue"))["provide"]; const provide: typeof import('vue')['provide']
const reactive: (typeof import("vue"))["reactive"]; const reactive: typeof import('vue')['reactive']
const readonly: (typeof import("vue"))["readonly"]; const readonly: typeof import('vue')['readonly']
const ref: (typeof import("vue"))["ref"]; const ref: typeof import('vue')['ref']
const resolveComponent: (typeof import("vue"))["resolveComponent"]; const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: (typeof import("vue"))["shallowReactive"]; const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: (typeof import("vue"))["shallowReadonly"]; const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: (typeof import("vue"))["shallowRef"]; const shallowRef: typeof import('vue')['shallowRef']
const toRaw: (typeof import("vue"))["toRaw"]; const toRaw: typeof import('vue')['toRaw']
const toRef: (typeof import("vue"))["toRef"]; const toRef: typeof import('vue')['toRef']
const toRefs: (typeof import("vue"))["toRefs"]; const toRefs: typeof import('vue')['toRefs']
const toValue: (typeof import("vue"))["toValue"]; const toValue: typeof import('vue')['toValue']
const triggerRef: (typeof import("vue"))["triggerRef"]; const triggerRef: typeof import('vue')['triggerRef']
const unref: (typeof import("vue"))["unref"]; const unref: typeof import('vue')['unref']
const useAttrs: (typeof import("vue"))["useAttrs"]; const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: (typeof import("vue"))["useCssModule"]; const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: (typeof import("vue"))["useCssVars"]; const useCssVars: typeof import('vue')['useCssVars']
const useLink: (typeof import("vue-router"))["useLink"]; const useLink: typeof import('vue-router')['useLink']
const useRoute: (typeof import("vue-router"))["useRoute"]; const useRoute: typeof import('vue-router')['useRoute']
const useRouter: (typeof import("vue-router"))["useRouter"]; const useRouter: typeof import('vue-router')['useRouter']
const useSlots: (typeof import("vue"))["useSlots"]; const useSlots: typeof import('vue')['useSlots']
const watch: (typeof import("vue"))["watch"]; const watch: typeof import('vue')['watch']
const watchEffect: (typeof import("vue"))["watchEffect"]; const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: (typeof import("vue"))["watchPostEffect"]; const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"]; const watchSyncEffect: typeof import('vue')['watchSyncEffect']
} }
// for type re-export // for type re-export
declare global { declare global {
// @ts-ignore // @ts-ignore
export type { export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
Component, import('vue')
ComponentPublicInstance,
ComputedRef,
ExtractDefaultPropTypes,
ExtractPropTypes,
ExtractPublicPropTypes,
InjectionKey,
PropType,
Ref,
VNode,
WritableComputedRef
} from "vue";
import("vue");
} }

12
src/components.d.ts vendored
View File

@ -5,12 +5,12 @@
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
export {} export {}
declare module "vue" { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Aaa: (typeof import("./components/aaa.vue"))["default"]; Aaa: typeof import('./components/aaa.vue')['default']
HelloWorld: (typeof import("./components/HelloWorld.vue"))["default"]; HelloWorld: (typeof import("./components/HelloWorld.vue"))["default"]
RouterLink: (typeof import("vue-router"))["RouterLink"]; RouterLink: typeof import('vue-router')['RouterLink']
RouterView: (typeof import("vue-router"))["RouterView"]; RouterView: typeof import('vue-router')['RouterView']
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"]; SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
} }
} }

67
src/layout/components/Aside/index.vue
View File

@ -1,25 +1,76 @@
<template> <template>
<a-layout-sider :width="220"> <a-layout-sider collapsible breakpoint="xl" @collapse="onCollapse">
<div class="logo_head"></div> <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"> <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-scrollbar>
</a-layout-sider> </a-layout-sider>
</template> </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> <style lang="scss" scoped>
.logo_head { .logo_head {
height: 60px; height: 60px;
box-shadow: inset 0 0 0 1px red; 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 { .aside_scroll {
height: 100%; width: 100%;
height: calc(100% - 60px);
box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black;
.aside_menu {
box-shadow: inset 0 0 0 1px cyan;
}
} }
</style> </style>

7
src/style/variable.scss
View File

@ -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 $shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
$shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3 $shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
// 常规大小为字体对应的首选项
// 字体大小 // 字体大小
$font-size-body-3: 14px; // 默认大小-正文-常规 $font-size-body-3: 14px; // 默认大小-正文-常规
$font-size-body-2: 13px; // 常规大小的小号字体 $font-size-body-2: 13px; // 默认的小号字体
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案 $font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
// 标题 // 标题
$font-size-title-1: 16px; // h3-标题-小 $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-title-3: 24px; // h1-标题-大
// 运营标题 // 运营标题
$font-size-display-1: 36px; // 运营标题-小 $font-size-display-1: 36px; // 运营标题-小
$font-size-display-2: 48px; // 运营标题-中 $font-size-display-2: 48px; // 常规-运营标题-中
$font-size-display-3: 56px; // 运营标题-大 $font-size-display-3: 56px; // 运营标题-大