feat: 常用布局
This commit is contained in:
WANGFan
parent
8a57cdb442
commit
634dfafca7
35
src/components.d.ts
vendored
35
src/components.d.ts
vendored
@ -5,23 +5,24 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module "vue" {
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BarcodeDraw: (typeof import("./components/barcode-draw/index.vue"))["default"];
|
||||
CodeView: (typeof import("./components/code-view/index.vue"))["default"];
|
||||
ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
|
||||
FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
|
||||
InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
|
||||
LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
|
||||
MainTransition: (typeof import("./components/main-transition/index.vue"))["default"];
|
||||
PinyinPro: (typeof import("./components/pinyin-pro/index.vue"))["default"];
|
||||
QrcodeDraw: (typeof import("./components/qrcode-draw/index.vue"))["default"];
|
||||
RecorderPcm: (typeof import("./components/recorder-pcm/index.vue"))["default"];
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
|
||||
SvgAndIcon: (typeof import("./components/svg-and-icon/index.vue"))["default"];
|
||||
SvgIcon: (typeof import("./components/svg-icon/index.vue"))["default"];
|
||||
VerifyCode: (typeof import("./components/verify-code/index.vue"))["default"];
|
||||
BarcodeDraw: typeof import('./components/barcode-draw/index.vue')['default']
|
||||
CodeView: typeof import('./components/code-view/index.vue')['default']
|
||||
ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
|
||||
FillPage: (typeof import("./components/fill-page/index.vue"))["default"]
|
||||
FullScreen: typeof import('./components/full-screen/index.vue')['default']
|
||||
InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
|
||||
LangProvider: typeof import('./components/lang-provider/index.vue')['default']
|
||||
MainTransition: typeof import('./components/main-transition/index.vue')['default']
|
||||
PinyinPro: typeof import('./components/pinyin-pro/index.vue')['default']
|
||||
QrcodeDraw: typeof import('./components/qrcode-draw/index.vue')['default']
|
||||
RecorderPcm: typeof import('./components/recorder-pcm/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SelectIcon: typeof import('./components/select-icon/index.vue')['default']
|
||||
SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
|
||||
SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
|
||||
VerifyCode: typeof import('./components/verify-code/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="fill-page-size" :style="{ height: viewportHeight }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeConfig } from "@/store/modules/theme-config";
|
||||
const themeStore = useThemeConfig();
|
||||
let { isTabs, isFooter } = storeToRefs(themeStore);
|
||||
// footer: 30px
|
||||
// tabs: 40px
|
||||
// head: 60px
|
||||
const viewportHeight = computed(() => {
|
||||
// 有tabs、有footer
|
||||
if (isTabs.value && isFooter.value) {
|
||||
return `calc(100vh - 60px - 30px - 40px)`;
|
||||
} else if (!isTabs.value && isFooter.value) {
|
||||
// 无tabs，有footer
|
||||
return `calc(100vh - 60px - 30px)`;
|
||||
} else if (isTabs.value && !isFooter.value) {
|
||||
// 有tabs，无footer
|
||||
return `calc(100vh - 60px - 40px)`;
|
||||
} else {
|
||||
// 无tabs、无footer，直接减去顶部head
|
||||
return `calc(100vh - 60px)`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fill-page-size {
|
||||
box-sizing: border-box;
|
||||
|
||||
// box-shadow: $shadow-border-1;
|
||||
}
|
||||
</style>
|
||||
23
src/components/full-screen/index.vue
Normal file
23
src/components/full-screen/index.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="snow-page">
|
||||
<div class="external-link-page">
|
||||
<div class="external-link-inner-page">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.external-link-page {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
.external-link-inner-page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $color-bg-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -111,6 +111,7 @@ export default {
|
||||
["tree-tools"]: "tree-tools",
|
||||
["file-tools"]: "file-tools",
|
||||
["verify-tools"]: "verify tools",
|
||||
["common-layouts"]: "common layouts",
|
||||
["test"]: "test"
|
||||
}
|
||||
};
|
||||
|
||||
@ -111,6 +111,7 @@ export default {
|
||||
["tree-tools"]: "树处理工具类",
|
||||
["file-tools"]: "文件工具类",
|
||||
["verify-tools"]: "校验工具类",
|
||||
["common-layouts"]: "常用布局",
|
||||
["test"]: "测试"
|
||||
}
|
||||
};
|
||||
|
||||
@ -653,6 +653,27 @@ export const systemMenu = [
|
||||
},
|
||||
children: null
|
||||
},
|
||||
{
|
||||
id: "0614",
|
||||
parentId: "06",
|
||||
path: "/component/common-layouts",
|
||||
name: "common-layouts",
|
||||
component: "component/common-layouts/index",
|
||||
meta: {
|
||||
title: "common-layouts",
|
||||
hide: false,
|
||||
disable: false,
|
||||
keepAlive: true,
|
||||
affix: false,
|
||||
link: "",
|
||||
iframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "icon-menu",
|
||||
sort: 14,
|
||||
type: 2
|
||||
},
|
||||
children: null
|
||||
},
|
||||
{
|
||||
id: "07",
|
||||
parentId: "0",
|
||||
|
||||
50
src/views/component/common-layouts/index.vue
Normal file
50
src/views/component/common-layouts/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<full-screen>
|
||||
<a-layout class="layout">
|
||||
<a-layout-sider class="layout-sider" :collapsed-width="12" :collapsed="collapsed">
|
||||
<div class="packup-btn" @click="collapsed = !collapsed">
|
||||
<icon-left v-if="!collapsed" />
|
||||
<icon-right v-else />
|
||||
</div>
|
||||
<div v-show="!collapsed">sider</div>
|
||||
</a-layout-sider>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
</a-layout>
|
||||
</full-screen>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const collapsed = ref<boolean>(false);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
height: 100%;
|
||||
box-shadow: $shadow-border-1;
|
||||
.layout-sider {
|
||||
position: relative;
|
||||
border-right: 1px solid cyan;
|
||||
.packup-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(-24px / 2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: $color-bg-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px $color-border-2;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.1s;
|
||||
&:hover {
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.arco-layout-sider-light) {
|
||||
box-shadow: unset;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user