初始化

easyflow-ui-usercenter/app/src/layouts/basic.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+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 router = useRouter();
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
+
+const menus = computed(() => [
+  {
+    handler: () => {
+      router.push({ path: '/personalCenter' });
+    },
+    icon: 'lucide:user',
+    text: $t('page.auth.profile'),
+  },
+  // 品牌外链入口（文档）已隐藏
+]);
+
+const avatar = computed(() => {
+  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
+});
+
+async function handleLogout() {
+  await authStore.logout(false);
+}
+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 #extra>
+      <AuthenticationLoginExpiredModal
+        v-model:open="accessStore.loginExpired"
+        :avatar
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
+    </template>
+    <template #lock-screen>
+      <LockScreen :avatar @to-login="handleLogout" />
+    </template>
+  </BasicLayout>
+</template>