chore: init read-star monorepo

2026-01-16 13:06:44 +08:00
commit 1e510efe8e
508 changed files with 44803 additions and 0 deletions
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { $t } from '@/locales'
+import { useAppStore } from '@/store/modules/app'
+
+defineOptions({
+  name: 'ThemeButton',
+})
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <ButtonIcon
+    icon="majesticons:color-swatch-line"
+    :tooltip-content="$t('icon.themeConfig')"
+    @click="appStore.openThemeDrawer"
+  />
+</template>
+
+<style scoped></style>
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import { computed } from 'vue'
+import { useSvgIcon } from '@/hooks/common/icon'
+import { useRouterPush } from '@/hooks/common/router'
+import { $t } from '@/locales'
+import { useAuthStore } from '@/store/modules/auth'
+
+defineOptions({
+  name: 'UserAvatar',
+})
+
+const authStore = useAuthStore()
+const { routerPushByKey, toLogin } = useRouterPush()
+const { SvgIconVNode } = useSvgIcon()
+
+function loginOrRegister() {
+  toLogin()
+}
+
+type DropdownKey = 'logout'
+
+type DropdownOption =
+  | {
+    key: DropdownKey
+    label: string
+    icon?: () => VNode
+  }
+  | {
+    type: 'divider'
+    key: string
+  }
+
+const options = computed(() => {
+  const opts: DropdownOption[] = [
+    {
+      label: $t('common.logout'),
+      key: 'logout',
+      icon: SvgIconVNode({ icon: 'ph:sign-out', fontSize: 18 }),
+    },
+  ]
+
+  return opts
+})
+
+function logout() {
+  window.$dialog?.info({
+    title: $t('common.tip'),
+    content: $t('common.logoutConfirm'),
+    positiveText: $t('common.confirm'),
+    negativeText: $t('common.cancel'),
+    onPositiveClick: () => {
+      authStore.resetStore()
+    },
+  })
+}
+
+function handleDropdown(key: DropdownKey) {
+  if (key === 'logout') {
+    logout()
+  }
+  else {
+    // If your other options are jumps from other routes, they will be directly supported here
+    routerPushByKey(key)
+  }
+}
+</script>
+
+<template>
+  <NButton v-if="!authStore.isLogin" quaternary @click="loginOrRegister">
+    {{ $t('page.login.common.loginOrRegister') }}
+  </NButton>
+  <NDropdown v-else placement="bottom" trigger="click" :options="options" @select="handleDropdown">
+    <div>
+      <ButtonIcon>
+        <SvgIcon icon="ph:user-circle" class="text-icon-large" />
+        <span class="text-16px font-medium">{{ authStore.userInfo.userName }}</span>
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core'
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app'
+import { useAppStore } from '@/store/modules/app'
+import { useThemeStore } from '@/store/modules/theme'
+import GlobalBreadcrumb from '../global-breadcrumb/index.vue'
+import GlobalLogo from '../global-logo/index.vue'
+import GlobalSearch from '../global-search/index.vue'
+import ThemeButton from './components/theme-button.vue'
+import UserAvatar from './components/user-avatar.vue'
+
+defineOptions({
+  name: 'GlobalHeader',
+})
+
+defineProps<Props>()
+
+interface Props {
+  /** Whether to show the logo */
+  showLogo?: App.Global.HeaderProps['showLogo']
+  /** Whether to show the menu toggler */
+  showMenuToggler?: App.Global.HeaderProps['showMenuToggler']
+  /** Whether to show the menu */
+  showMenu?: App.Global.HeaderProps['showMenu']
+}
+
+const appStore = useAppStore()
+const themeStore = useThemeStore()
+const { isFullscreen, toggle } = useFullscreen()
+</script>
+
+<template>
+  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
+    <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: `${themeStore.sider.width}px` }" />
+    <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+    <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden" />
+    <div v-else class="h-full flex-y-center flex-1-hidden">
+      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
+    </div>
+    <div class="h-full flex-y-center justify-end">
+      <GlobalSearch v-if="themeStore.header.globalSearch.visible" />
+      <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
+      <LangSwitch
+        v-if="themeStore.header.multilingual.visible"
+        :lang="appStore.locale"
+        :lang-options="appStore.localeOptions"
+        @change-lang="appStore.changeLocale"
+      />
+      <ThemeSchemaSwitch
+        :theme-schema="themeStore.themeScheme"
+        :is-dark="themeStore.darkMode"
+        @switch="themeStore.toggleThemeScheme"
+      />
+      <ThemeButton />
+      <UserAvatar />
+    </div>
+  </DarkModeContainer>
+</template>
+
+<style scoped></style>