初始化
This commit is contained in:
25
easyflow-ui-admin/app/src/layouts/auth.vue
Normal file
25
easyflow-ui-admin/app/src/layouts/auth.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { AuthPageLayout } from '@easyflow/layouts';
|
||||
import { preferences } from '@easyflow/preferences';
|
||||
|
||||
const appName = computed(() => preferences.app.name);
|
||||
const logo = computed(() => preferences.logo.source);
|
||||
const logoDark = computed(() => preferences.logo.sourceDark);
|
||||
const pageDescription = computed(() => preferences.auth.pageDescription);
|
||||
const pageTitle = computed(() => preferences.auth.pageTitle);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AuthPageLayout
|
||||
:app-name="appName"
|
||||
:logo="logo"
|
||||
:logo-dark="logoDark"
|
||||
:page-description="pageDescription || $t('authentication.pageDesc')"
|
||||
:page-title="pageTitle || $t('authentication.pageTitle')"
|
||||
>
|
||||
<!-- 自定义工具栏 -->
|
||||
<!-- <template #toolbar></template> -->
|
||||
</AuthPageLayout>
|
||||
</template>
|
||||
197
easyflow-ui-admin/app/src/layouts/basic.vue
Normal file
197
easyflow-ui-admin/app/src/layouts/basic.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<script lang="ts" setup>
|
||||
// import type { NotificationItem } from '@easyflow/layouts';
|
||||
|
||||
import { computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { AuthenticationLoginExpiredModal } from '@easyflow/common-ui';
|
||||
import { useWatermark } from '@easyflow/hooks';
|
||||
import { BasicLayout, LockScreen, UserDropdown } from '@easyflow/layouts';
|
||||
import { preferences } from '@easyflow/preferences';
|
||||
import { useAccessStore, useUserStore } from '@easyflow/stores';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
import { useAuthStore } from '#/store';
|
||||
import LoginForm from '#/views/_core/authentication/login.vue';
|
||||
|
||||
// const notifications = ref<NotificationItem[]>([
|
||||
// {
|
||||
// id: 1,
|
||||
// avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
|
||||
// date: '3小时前',
|
||||
// isRead: true,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '收到了 14 份新周报',
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// avatar: 'https://avatar.vercel.sh/1',
|
||||
// date: '刚刚',
|
||||
// isRead: false,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '朱偏右 回复了你',
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// avatar: 'https://avatar.vercel.sh/1',
|
||||
// date: '2024-01-01',
|
||||
// isRead: false,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '曲丽丽 评论了你',
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// avatar: 'https://avatar.vercel.sh/satori',
|
||||
// date: '1天前',
|
||||
// isRead: false,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '代办提醒',
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// avatar: 'https://avatar.vercel.sh/satori',
|
||||
// date: '1天前',
|
||||
// isRead: false,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '跳转Workspace示例',
|
||||
// link: '/workspace',
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// avatar: 'https://avatar.vercel.sh/satori',
|
||||
// date: '1天前',
|
||||
// isRead: false,
|
||||
// message: '描述信息描述信息描述信息',
|
||||
// title: '跳转外部链接示例',
|
||||
// link: 'https://doc.easyflow.tech',
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const authStore = useAuthStore();
|
||||
const accessStore = useAccessStore();
|
||||
const { destroyWatermark, updateWatermark } = useWatermark();
|
||||
// const showDot = computed(() =>
|
||||
// notifications.value.some((item) => !item.isRead),
|
||||
// );
|
||||
|
||||
const menus = computed(() => [
|
||||
{
|
||||
handler: () => {
|
||||
router.push({ name: 'Profile' });
|
||||
},
|
||||
icon: 'lucide:user',
|
||||
text: $t('page.auth.profile'),
|
||||
},
|
||||
{
|
||||
handler: () => {
|
||||
router.push({ name: 'Profile', query: { tab: 'password' } });
|
||||
},
|
||||
icon: 'lucide:lock',
|
||||
text: $t('settingsConfig.updatePwd'),
|
||||
},
|
||||
// 品牌外链入口（文档）已隐藏
|
||||
// {
|
||||
// handler: () => {
|
||||
// openWindow(APP_GITHUB_URL, {
|
||||
// target: '_blank',
|
||||
// });
|
||||
// },
|
||||
// icon: SvgGithubIcon,
|
||||
// text: 'GitHub',
|
||||
// },
|
||||
// {
|
||||
// handler: () => {
|
||||
// openWindow(`${APP_GITHUB_URL}/issues`, {
|
||||
// target: '_blank',
|
||||
// });
|
||||
// },
|
||||
// icon: CircleHelp,
|
||||
// text: $t('ui.widgets.qa'),
|
||||
// },
|
||||
]);
|
||||
|
||||
const avatar = computed(() => {
|
||||
return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
|
||||
});
|
||||
|
||||
async function handleLogout() {
|
||||
await authStore.logout(false);
|
||||
}
|
||||
|
||||
// function handleNoticeClear() {
|
||||
// notifications.value = [];
|
||||
// }
|
||||
//
|
||||
// function markRead(id: number | string) {
|
||||
// const item = notifications.value.find((item) => item.id === id);
|
||||
// if (item) {
|
||||
// item.isRead = true;
|
||||
// }
|
||||
// }
|
||||
|
||||
// function remove(id: number | string) {
|
||||
// notifications.value = notifications.value.filter((item) => item.id !== id);
|
||||
// }
|
||||
//
|
||||
// function handleMakeAll() {
|
||||
// notifications.value.forEach((item) => (item.isRead = true));
|
||||
// }
|
||||
watch(
|
||||
() => ({
|
||||
enable: preferences.app.watermark,
|
||||
content: preferences.app.watermarkContent,
|
||||
}),
|
||||
async ({ enable, content }) => {
|
||||
if (enable) {
|
||||
await updateWatermark({
|
||||
content:
|
||||
content ||
|
||||
`${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
|
||||
});
|
||||
} else {
|
||||
destroyWatermark();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicLayout @clear-preferences-and-logout="handleLogout">
|
||||
<template #user-dropdown>
|
||||
<UserDropdown
|
||||
:avatar
|
||||
:menus
|
||||
:text="userStore.userInfo?.nickname"
|
||||
:description="userStore.userInfo?.loginName"
|
||||
tag-text="Pro"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</template>
|
||||
<!--<template #notification>
|
||||
<Notification
|
||||
:dot="showDot"
|
||||
:notifications="notifications"
|
||||
@clear="handleNoticeClear"
|
||||
@read="(item) => item.id && markRead(item.id)"
|
||||
@remove="(item) => item.id && remove(item.id)"
|
||||
@make-all="handleMakeAll"
|
||||
/>
|
||||
</template>-->
|
||||
<template #extra>
|
||||
<AuthenticationLoginExpiredModal
|
||||
v-model:open="accessStore.loginExpired"
|
||||
:avatar
|
||||
>
|
||||
<LoginForm />
|
||||
</AuthenticationLoginExpiredModal>
|
||||
</template>
|
||||
<template #lock-screen>
|
||||
<LockScreen :avatar @to-login="handleLogout" />
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
6
easyflow-ui-admin/app/src/layouts/index.ts
Normal file
6
easyflow-ui-admin/app/src/layouts/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
const BasicLayout = () => import('./basic.vue');
|
||||
const AuthPageLayout = () => import('./auth.vue');
|
||||
|
||||
const IFrameView = () => import('@easyflow/layouts').then((m) => m.IFrameView);
|
||||
|
||||
export { AuthPageLayout, BasicLayout, IFrameView };
|
||||
Reference in New Issue
Block a user