xiaoxian521
8 months ago
31 changed files with 1464 additions and 1250 deletions
-
4.eslintignore
-
8.lintstagedrc
-
2build/info.ts
-
44package.json
-
2205pnpm-lock.yaml
-
3public/platform-config.json
-
17src/components/ReDialog/index.vue
-
15src/components/ReDialog/type.ts
-
16src/components/ReSegmented/src/index.css
-
24src/components/ReSegmented/src/index.tsx
-
25src/layout/components/appMain.vue
-
1src/layout/components/keepAliveFrame/index.vue
-
8src/layout/components/navbar.vue
-
92src/layout/components/setting/index.vue
-
70src/layout/components/sidebar/centerCollapse.vue
-
30src/layout/components/sidebar/fullScreen.vue
-
7src/layout/components/sidebar/horizontal.vue
-
4src/layout/components/sidebar/leftCollapse.vue
-
7src/layout/components/sidebar/mixNav.vue
-
13src/layout/components/sidebar/vertical.vue
-
29src/layout/components/tag/index.vue
-
3src/layout/hooks/useLayout.ts
-
8src/layout/hooks/useNav.ts
-
9src/layout/hooks/useTag.ts
-
1src/style/login.css
-
1src/style/reset.scss
-
17src/style/sidebar.scss
-
3src/utils/responsive.ts
-
7tailwind.config.ts
-
11types/global.d.ts
2205
pnpm-lock.yaml
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,70 @@ |
|||
<script setup lang="ts"> |
|||
import { computed } from "vue"; |
|||
import { useGlobal } from "@pureadmin/utils"; |
|||
import { useNav } from "@/layout/hooks/useNav"; |
|||
|
|||
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill"; |
|||
|
|||
interface Props { |
|||
isActive: boolean; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
isActive: false |
|||
}); |
|||
|
|||
const { tooltipEffect } = useNav(); |
|||
|
|||
const iconClass = computed(() => { |
|||
return ["w-[16px]", "h-[16px]"]; |
|||
}); |
|||
|
|||
const { $storage } = useGlobal<GlobalPropertiesApi>(); |
|||
const themeColor = computed(() => $storage.layout?.themeColor); |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: "toggleClick"): void; |
|||
}>(); |
|||
|
|||
const toggleClick = () => { |
|||
emit("toggleClick"); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div |
|||
v-tippy="{ |
|||
content: props.isActive ? '点击折叠' : '点击展开', |
|||
theme: tooltipEffect, |
|||
hideOnClick: 'toggle', |
|||
placement: 'right' |
|||
}" |
|||
class="center-collapse" |
|||
@click="toggleClick" |
|||
> |
|||
<IconifyIconOffline |
|||
:icon="ArrowLeft" |
|||
:class="[iconClass, themeColor === 'light' ? '' : 'text-primary']" |
|||
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.center-collapse { |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 2px; |
|||
z-index: 1002; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 24px; |
|||
height: 34px; |
|||
cursor: pointer; |
|||
background: var(--el-bg-color); |
|||
border: 1px solid var(--pure-border-color); |
|||
border-radius: 4px; |
|||
transform: translate(12px, -50%); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<script setup lang="ts"> |
|||
import { ref, watch } from "vue"; |
|||
import { useNav } from "@/layout/hooks/useNav"; |
|||
|
|||
const screenIcon = ref(); |
|||
const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav(); |
|||
|
|||
isFullscreen.value = !!( |
|||
document.fullscreenElement || |
|||
document.webkitFullscreenElement || |
|||
document.mozFullScreenElement || |
|||
document.msFullscreenElement |
|||
); |
|||
|
|||
watch( |
|||
isFullscreen, |
|||
full => { |
|||
screenIcon.value = full ? ExitFullscreen : Fullscreen; |
|||
}, |
|||
{ |
|||
immediate: true |
|||
} |
|||
); |
|||
</script> |
|||
|
|||
<template> |
|||
<span class="fullscreen-icon navbar-bg-hover" @click="toggle"> |
|||
<IconifyIconOffline :icon="screenIcon" /> |
|||
</span> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue