feat(auth): 更新门户认证页面布局和样式

云

17 小时以前 91bfcf61f44f353dfebc54a57b5b774721de3e9a

 src/packages/effects/layouts/src/basic/header/header.vue

@@ -1,14 +1,15 @@
<script lang="ts" setup>
import { computed, useSlots } from 'vue';

import { useRefresh } from '..\..\..\..\hooks\src';
import { RotateCw } from '..\..\..\..\..\icons\src';
import { preferences, usePreferences } from '..\..\..\..\..\preferences\src';
import { useAccessStore } from '..\..\..\..\..\stores\src';
import { useRefresh } from '../../../../hooks/src';
import { RotateCw } from '../../../../../icons/src';
import { preferences, usePreferences } from '../../../../../preferences/src';
import { useAccessStore } from '../../../../../stores/src';

import { VbenFullScreen, VbenIconButton } from '..\..\..\..\..\@core\ui-kit\shadcn-ui\src';
import { VbenFullScreen, VbenIconButton } from '../../../../../@core/ui-kit/shadcn-ui/src';

import {
  DatabaseBackupButton,
  GlobalSearch,
  LanguageToggle,
  PreferencesButton,
@@ -47,6 +48,9 @@

const rightSlots = computed(() => {
  const list: Array<SlotItem> = [];
  if (preferences.widget.refresh) {
    list.push({ index: REFERENCE_VALUE - 10, name: 'refresh' });
  }
  // 全局搜索
  if (preferences.widget.globalSearch) {
    list.push({
@@ -56,6 +60,12 @@
  }
  // 偏好设置快捷功能
  if (preferencesButtonPosition.value.header) {
    // 数据库备份按钮
    list.push({
      index: REFERENCE_VALUE + 5,
      name: 'database-backup',
    });

    list.push({
      index: REFERENCE_VALUE + 10,
      name: 'preferences',
@@ -113,14 +123,6 @@

const leftSlots = computed(() => {
  const list: Array<SlotItem> = [];
  // 刷新
  if (preferences.widget.refresh) {
    list.push({
      index: 0,
      name: 'refresh',
    });
  }

  Object.keys(slots).forEach((key) => {
    // 适配插槽名称，例如第一个插槽名：header-left-1
    if (key.startsWith('header-left')) {
@@ -154,17 +156,12 @@
    v-for="slot in leftSlots.filter((item) => item.index < REFERENCE_VALUE)"
    :key="slot.name"
  >
    <slot :name="slot.name">
      <template v-if="slot.name === 'refresh'">
        <VbenIconButton class="my-0 mr-1 rounded-md" @click="refresh">
          <RotateCw class="size-4" />
        </VbenIconButton>
      </template>
    </slot>
    <slot :name="slot.name"></slot>
  </template>
  <div class="flex-center hidden lg:block">
    <slot name="breadcrumb"></slot>
  </div>
  <div v-if="preferences.app.layout === 'mixed-nav'" class="portal-header-motto">开放协作　学术研究　服务发展</div>
  <template
    v-for="slot in leftSlots.filter((item) => item.index > REFERENCE_VALUE)"
    :key="slot.name"
@@ -173,21 +170,31 @@
  </template>
  <div
    :class="`menu-align-${preferences.header.menuAlign}`"
    class="flex h-full min-w-0 flex-1 items-center"
    class="portal-header-navigation flex h-full min-w-0 flex-1 items-center"
  >
    <slot name="menu"></slot>
  </div>
  <div class="flex h-full min-w-0 shrink-0 items-center">
  <div class="portal-header-tools flex h-full min-w-0 shrink-0 items-center">
    <template v-for="slot in rightSlots" :key="slot.name">
      <slot :name="slot.name">
        <template v-if="slot.name === 'global-search'">
        <template v-if="slot.name === 'refresh'">
          <VbenIconButton aria-label="刷新当前页面" title="刷新当前页面" class="my-0 mr-1 rounded-md" @click="refresh">
            <RotateCw class="size-4" />
          </VbenIconButton>
        </template>
        <template v-else-if="slot.name === 'global-search'">
          <div class="portal-header-search">
          <GlobalSearch
            :presentation="preferences.app.layout === 'mixed-nav' ? 'portal' : 'compact'"
            :enable-shortcut-key="globalSearchShortcutKey"
            :menus="accessStore.accessMenus"
            class="mr-1 sm:mr-4"
          />
          </div>
        </template>

        <template v-else-if="slot.name === 'database-backup'">
          <DatabaseBackupButton class="mr-1" />
        </template>
        <template v-else-if="slot.name === 'preferences'">
          <PreferencesButton
            class="mr-1"