biji/biji-qianduan/src/components/home/HomeHeader.vue

<template>
  <div>
    <!-- Desktop Header -->
    <el-header class="header" v-if="!isMobile">
      <h1 @click="$emit('reset-view')" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
      <div class="actions">
        <el-input
            :model-value="searchKeyword"
            @update:model-value="$emit('update:searchKeyword', $event)"
            placeholder="搜索笔记标题"
            class="search-input"
            @keyup.enter="$emit('search')"
        >
          <template #append>
            <el-button @click="$emit('search')">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
        <div v-if="userStore.isLoggedIn" class="user-actions">
          <span class="welcome-text">欢迎, {{ userStore.userInfo?.username }}</span>
          <el-button type="danger" @click="$emit('logout')">退出</el-button>
          <el-button type="primary" @click="$emit('show-update-password')">修改密码</el-button>
          <el-button type="warning" @click="$emit('show-system-settings')">系统管理</el-button>
          <el-button type="primary" @click="$emit('show-create-note')">新建笔记</el-button>
          <el-upload
              class="upload-btn"
              action=""
              :show-file-list="false"
              :before-upload="handleUpload"
              accept=".md"
          >
            <el-button type="success">上传Markdown</el-button>
          </el-upload>
        </div>
        <div v-else class="guest-actions">
          <el-button type="primary" @click="goToLogin">登录</el-button>
          <el-button @click="goToRegister">注册</el-button>
        </div>
      </div>
    </el-header>

    <!-- Mobile Header -->
    <el-header class="header mobile-header" v-if="isMobile">
      <el-button @click="$emit('toggle-collapse')" text circle class="mobile-menu-toggle">
        <el-icon size="24"><Menu /></el-icon>
      </el-button>
      <h1 class="mobile-title" @click="$emit('reset-view')">我的笔记</h1>
      <el-button text circle class="mobile-search-toggle" @click="$emit('search')">
        <el-icon size="22"><Search /></el-icon>
      </el-button>
      <el-button v-if="!userStore.isLoggedIn" text circle class="mobile-login-toggle" @click="goToLogin">
        <el-icon size="24"><User /></el-icon>
      </el-button>
    </el-header>

    <!-- Mobile Search Bar -->
    <div v-if="isMobile" class="mobile-search-container">
      <el-input
          :model-value="searchKeyword"
          @update:model-value="$emit('update:searchKeyword', $event)"
          placeholder="搜索笔记标题"
          class="mobile-search-input"
          @keyup.enter="$emit('search')"
          size="large"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { Search, Menu, User } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const props = defineProps({
  isMobile: Boolean,
  searchKeyword: String,
});

const emit = defineEmits([
  'update:searchKeyword',
  'search',
  'reset-view',
  'logout',
  'show-update-password',
  'show-system-settings',
  'show-create-note',
  'upload-markdown',
  'toggle-collapse'
]);

const userStore = useUserStore();
const router = useRouter();

const goToLogin = () => router.push('/login');
const goToRegister = () => router.push('/register');

const handleUpload = (file) => {
  emit('upload-markdown', file);
  return false; // Prevent el-upload's default behavior
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  gap: 1rem;
}

.dark-theme .header {
  background-color: rgba(30, 30, 47, 0.8);
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.search-input .el-input__wrapper) {
  border-radius: var(--border-radius) !important;
}

.user-actions, .guest-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-text {
  white-space: nowrap;
  color: var(--text-color-secondary);
}

.upload-btn {
  display: inline-block;
}

.mobile-header {
  padding: 0 1rem;
}

.mobile-title {
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  margin: 0;
  font-size: 1.25rem;
}

.mobile-search-container {
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

:deep(.mobile-search-input .el-input__wrapper) {
  border-radius: 9999px !important;
}
</style>