xiaoming
6 months ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 1488 additions and 1262 deletions
-
4.eslintignore
-
8.lintstagedrc
-
20README.en-US.md
-
16README.md
-
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