331 lines
9.4 KiB
Vue
331 lines
9.4 KiB
Vue
<template>
|
|
<ThemeProvider is-root v-bind="themeConfig" :apply-style="false">
|
|
<stepin-view system-name="抖小云" :class="`${contentClass}`" :user="user" :navMode="navigation" :useTabs="useTabs" :themeList="themeList" v-model:show-setting="showSetting" v-model:theme="theme" @themeSelect="configTheme" logo-src="@/assets/logo.png" v-model:collapsed="open">
|
|
<template #headerActions>
|
|
<HeaderActions @showSetting="showSetting = true" />
|
|
</template>
|
|
<template #pageFooter>
|
|
<PageFooter />
|
|
</template>
|
|
<template #themeEditorTab>
|
|
<a-tab-pane tab="其它" key="other">
|
|
<Setting />
|
|
</a-tab-pane>
|
|
</template>
|
|
|
|
</stepin-view>
|
|
</ThemeProvider>
|
|
<my-personal ref="personalRef" />
|
|
<MobileTopBar v-if="showMobileNav" @profile="openPersonalSettings" />
|
|
<MobileBottomNav v-if="showMobileNav" @profile="openPersonalSettings" />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAccountStore, useMenuStore, useSettingStore, storeToRefs, useApiStore } from '@/store';
|
|
import avatar from '@/assets/avatar.png';
|
|
import { PageFooter, HeaderActions } from '@/components/layout';
|
|
import Setting from './components/setting';
|
|
import { LoginModal } from '@/pages/login';
|
|
import { MyPersonal } from '@/pages/personal';
|
|
import { configTheme, themeList } from '@/theme';
|
|
import { ThemeProvider } from 'stepin';
|
|
import MobileBottomNav from '@/components/layout/MobileBottomNav.vue';
|
|
import MobileTopBar from '@/components/layout/MobileTopBar.vue';
|
|
import { useMobileViewport } from '@/utils/useMobileViewport';
|
|
// logout,profile
|
|
const { logout } = useAccountStore();
|
|
const showPersonalDrawer = ref<boolean>(false);
|
|
const personalRef = ref<any>(null);
|
|
const emailRef = ref(null);
|
|
const open = ref(false);
|
|
|
|
const showSetting = ref(false);
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { isMobileViewport } = useMobileViewport();
|
|
const showMobileNav = computed(() =>
|
|
isMobileViewport.value && !['/login', '/init', '/mobile'].includes(route.path)
|
|
);
|
|
const openPersonalSettings = () => personalRef.value?.show(true);
|
|
|
|
watch(showMobileNav, (visible) => {
|
|
document.body.classList.toggle('has-mobile-bottom-nav', visible);
|
|
document.body.classList.toggle('mobile-app-shell', visible);
|
|
}, { immediate: true });
|
|
|
|
watch(() => route.fullPath, () => {
|
|
open.value = false;
|
|
showSetting.value = false;
|
|
});
|
|
|
|
// useMenuStore().getMenuList();
|
|
|
|
const { navigation, useTabs, theme, contentClass } = storeToRefs(useSettingStore());
|
|
const themeConfig = computed(() => themeList.find((item) => item.key === theme.value)?.config ?? {});
|
|
|
|
const user = reactive({
|
|
name: 'douyin',
|
|
avatar: avatar,
|
|
menuList: [
|
|
// { title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/profile') },
|
|
// { title: '设置', key: 'setting', icon: 'SettingOutlined', onClick: () => (showSetting.value = true) },
|
|
// { type: 'divider' },
|
|
{
|
|
title: '个人设置',
|
|
key: 'seting',
|
|
icon: 'SmileOutlined',
|
|
onClick: () => {
|
|
personalRef.value.show(true);
|
|
},
|
|
},
|
|
{ type: 'divider' },
|
|
|
|
// {
|
|
// title: '邮件通知',
|
|
// key: 'email',
|
|
// icon: 'BellOutlined',
|
|
// onClick: () => {
|
|
// emailRef.value.showEmail(true);
|
|
// },
|
|
// },
|
|
{ type: 'divider' },
|
|
{
|
|
title: '退出登录',
|
|
key: 'logout',
|
|
icon: 'LogoutOutlined',
|
|
onClick: () => logout().then(() => router.push('/login')),
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
useApiStore()
|
|
.apiUserInfo()
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
user.name = res.data?.userName;
|
|
}
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.body.classList.remove('has-mobile-bottom-nav');
|
|
document.body.classList.remove('mobile-app-shell');
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.stepin-view {
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 4px;
|
|
background-color: theme('colors.primary.500');
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 4px;
|
|
background-color: theme('colors.primary.400');
|
|
|
|
&:hover {
|
|
background-color: theme('colors.primary.500');
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
|
|
border-radius: 4px;
|
|
background: theme('backgroundColor.layout');
|
|
}
|
|
.system-name {
|
|
color: #722ed1 !important;
|
|
margin-left: 0em !important;
|
|
}
|
|
.ant-tabs-extra-content {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
html,
|
|
body,
|
|
#stepin-app,
|
|
.stepin-view {
|
|
width: 100%;
|
|
height: var(--app-viewport-height, 100dvh) !important;
|
|
min-height: 0;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
body.mobile-app-shell {
|
|
--mobile-surface: #f6f7fb;
|
|
--mobile-card: #fff;
|
|
--mobile-border: #e9eaf2;
|
|
--mobile-text: #172033;
|
|
--mobile-subtext: #667085;
|
|
--mobile-primary: #722ed1;
|
|
background: var(--mobile-surface);
|
|
}
|
|
|
|
body.mobile-app-shell .stepin-layout {
|
|
grid-template-columns: minmax(0, 1fr) !important;
|
|
grid-template-rows: minmax(0, 1fr) !important;
|
|
}
|
|
|
|
body.mobile-app-shell .stepin-layout-header,
|
|
body.mobile-app-shell .stepin-layout-side,
|
|
body.mobile-app-shell .stepin-tabs-view-head,
|
|
body.mobile-app-shell .stepin-tabs-view-content-footer {
|
|
display: none !important;
|
|
}
|
|
|
|
body.mobile-app-shell .stepin-layout-content {
|
|
grid-row: 1 !important;
|
|
grid-column: 1 !important;
|
|
height: var(--app-viewport-height, 100dvh);
|
|
padding-top: calc(54px + env(safe-area-inset-top));
|
|
padding-bottom: calc(66px + env(safe-area-inset-bottom));
|
|
background: var(--mobile-surface);
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
body.mobile-app-shell .stepin-view-main,
|
|
body.mobile-app-shell .stepin-tabs-view,
|
|
body.mobile-app-shell .stepin-tabs-view-content {
|
|
height: auto !important;
|
|
min-height: 100%;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
body.mobile-app-shell .stepin-tabs-view-content-main {
|
|
min-height: 100%;
|
|
padding: 10px !important;
|
|
border-radius: 0 !important;
|
|
background: var(--mobile-surface) !important;
|
|
}
|
|
|
|
body.mobile-app-shell button,
|
|
body.mobile-app-shell a,
|
|
body.mobile-app-shell .ant-btn,
|
|
body.mobile-app-shell .ant-switch,
|
|
body.mobile-app-shell .ant-checkbox-wrapper,
|
|
body.mobile-app-shell .ant-radio-wrapper {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
body.mobile-app-shell .ant-btn:not(.ant-btn-circle) {
|
|
min-height: 44px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
body.mobile-app-shell .ant-modal,
|
|
body.mobile-app-shell .ant-drawer-content-wrapper {
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
body.mobile-app-shell .ant-drawer-left .ant-drawer-content-wrapper,
|
|
body.mobile-app-shell .ant-drawer-right .ant-drawer-content-wrapper {
|
|
width: 100vw !important;
|
|
}
|
|
|
|
body.mobile-app-shell .ant-modal {
|
|
width: calc(100vw - 20px) !important;
|
|
min-width: 0 !important;
|
|
margin: 10px auto;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
}
|
|
|
|
body.mobile-app-shell .ant-drawer-header {
|
|
padding-top: max(16px, env(safe-area-inset-top));
|
|
}
|
|
|
|
body.mobile-app-shell .ant-drawer-body {
|
|
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
body.mobile-app-shell .mobile-full-modal .ant-modal {
|
|
top: 0 !important;
|
|
width: 100vw !important;
|
|
max-width: none !important;
|
|
height: var(--app-viewport-height, 100dvh);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body.mobile-app-shell .mobile-full-modal .ant-modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: var(--app-viewport-height, 100dvh);
|
|
border-radius: 0;
|
|
}
|
|
|
|
body.mobile-app-shell .mobile-full-modal .ant-modal-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
html.dark-mode body.mobile-app-shell {
|
|
--mobile-surface: #11121d;
|
|
--mobile-card: #1a1b2b;
|
|
--mobile-border: #303247;
|
|
--mobile-text: rgba(255, 255, 255, 0.9);
|
|
--mobile-subtext: rgba(255, 255, 255, 0.58);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
html.dark-mode body.mobile-app-shell .mobile-task-card,
|
|
html.dark-mode body.mobile-app-shell .mobile-record-card,
|
|
html.dark-mode body.mobile-app-shell .mobile-cookie-card,
|
|
html.dark-mode body.mobile-app-shell .custom-card,
|
|
html.dark-mode body.mobile-app-shell .query-container--mobile,
|
|
html.dark-mode body.mobile-app-shell .search-tab-container {
|
|
border-color: var(--mobile-border) !important;
|
|
background: var(--mobile-card) !important;
|
|
color: var(--mobile-text) !important;
|
|
}
|
|
|
|
html.dark-mode body.mobile-app-shell .mobile-record-title,
|
|
html.dark-mode body.mobile-app-shell .mobile-cookie-header h3,
|
|
html.dark-mode body.mobile-app-shell .mobile-cookie-paths dd,
|
|
html.dark-mode body.mobile-app-shell .card-name {
|
|
color: var(--mobile-text) !important;
|
|
}
|
|
|
|
html.dark-mode body.mobile-app-shell .filter-switch,
|
|
html.dark-mode body.mobile-app-shell .mobile-filter-trigger,
|
|
html.dark-mode body.mobile-app-shell .mobile-task-filter-trigger {
|
|
border-color: var(--mobile-border) !important;
|
|
background: #242538 !important;
|
|
color: #c4b5fd !important;
|
|
}
|
|
}
|
|
|
|
.stepin-img-checkbox {
|
|
@apply transition-transform;
|
|
&:hover {
|
|
@apply scale-105 ~"-translate-y-[2px]";
|
|
}
|
|
img {
|
|
@apply shadow-low rounded-md transition-transform;
|
|
}
|
|
}
|
|
</style>
|