前端启动成功

schoolNewsWeb/src/components/Breadcrumb.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="breadcrumb" v-if="items && items.length > 0">
+    <span v-for="(item, index) in items" :key="index" class="breadcrumb-wrapper">
+      <span class="breadcrumb-item">
+        <!-- 最后一个项目不可点击 -->
+        <template v-if="index === items.length - 1">
+          <span class="breadcrumb-text current">{{ item.title }}</span>
+        </template>
+        
+        <!-- 其他项目可点击 -->
+        <template v-else>
+          <router-link 
+            :to="item.path" 
+            class="breadcrumb-link"
+            v-if="item.path"
+          >
+            {{ item.title }}
+          </router-link>
+          <span class="breadcrumb-text" v-else>{{ item.title }}</span>
+        </template>
+      </span>
+      
+      <!-- 分隔符 -->
+      <span class="breadcrumb-separator" v-if="index < items.length - 1">
+        <i class="separator-icon"></i>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 面包屑项目接口
+interface BreadcrumbItem {
+  title: string;
+  path?: string;
+}
+
+// Props
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  separator: '/'
+});
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb-link {
+  color: #1890ff;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  
+  &:hover {
+    color: #40a9ff;
+  }
+}
+
+.breadcrumb-text {
+  color: inherit;
+  
+  &.current {
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 8px;
+  color: #ccc;
+}
+
+.separator-icon::before {
+  content: "/";
+  font-size: 12px;
+}
+</style>

schoolNewsWeb/src/components/HelloWorld.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

schoolNewsWeb/src/components/MenuItem.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="menu-item">
+    <!-- 有子菜单的情况 -->
+    <template v-if="hasChildren">
+      <div 
+        class="menu-item-content" 
+        :class="{ 
+          'active': isActive,
+          'collapsed': collapsed 
+        }"
+        @click="toggleExpanded"
+      >
+        <div class="menu-item-inner">
+          <i class="menu-icon" :class="menu.icon || 'icon-folder'"></i>
+          <span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
+          <i 
+            class="expand-icon" 
+            :class="{ 'expanded': expanded }"
+            v-if="!collapsed"
+          ></i>
+        </div>
+      </div>
+      
+      <!-- 子菜单 -->
+      <transition name="submenu">
+        <div 
+          class="submenu" 
+          v-if="expanded && !collapsed"
+        >
+          <MenuItem 
+            v-for="child in menu.children"
+            :key="child.menuID"
+            :menu="child" 
+            :collapsed="false"
+            :level="level + 1"
+            @menu-click="$emit('menu-click', $event)"
+          />
+        </div>
+      </transition>
+    </template>
+    
+    <!-- 没有子菜单的情况 -->
+    <template v-else>
+      <div 
+        class="menu-item-content" 
+        :class="{ 
+          'active': isActive,
+          'collapsed': collapsed 
+        }"
+        @click="handleClick"
+      >
+        <div class="menu-item-inner">
+          <i class="menu-icon" :class="menu.icon || 'icon-file'"></i>
+          <span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import type { SysMenu } from '@/types';
+import { MenuType } from '@/types/enums';
+
+// 递归组件需要声明名称（Vue 3.5+）
+defineOptions({
+  name: 'MenuItem'
+});
+
+// Props
+interface Props {
+  menu: SysMenu;
+  collapsed?: boolean;
+  level?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 0
+});
+
+// Emits
+const emit = defineEmits<{
+  'menu-click': [menu: SysMenu];
+}>();
+
+// 状态
+const expanded = ref(false);
+
+// Composition API
+const route = useRoute();
+
+// 计算属性
+const hasChildren = computed(() => {
+  return props.menu.children && props.menu.children.length > 0;
+});
+
+const isActive = computed(() => {
+  // 检查当前路由是否匹配此菜单
+  return route.path === props.menu.url;
+});
+
+// 方法 - 使用 function 声明
+function toggleExpanded() {
+  if (hasChildren.value) {
+    expanded.value = !expanded.value;
+  }
+}
+
+function handleClick() {
+  if (props.menu.type === MenuType.MENU && props.menu.url) {
+    emit('menu-click', props.menu);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-item {
+  margin: 2px 8px;
+}
+
+.menu-item-content {
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  &.active {
+    background-color: #1890ff;
+    
+    .menu-item-inner {
+      color: white;
+    }
+  }
+  
+  &.collapsed {
+    margin: 4px 0;
+    text-align: center;
+  }
+}
+
+.menu-item-inner {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+  line-height: 1;
+  
+  .collapsed & {
+    justify-content: center;
+    padding: 12px 8px;
+  }
+}
+
+.menu-icon {
+  font-size: 16px;
+  width: 16px;
+  text-align: center;
+  margin-right: 12px;
+  
+  .collapsed & {
+    margin-right: 0;
+  }
+}
+
+.menu-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.expand-icon {
+  font-size: 12px;
+  transition: transform 0.2s ease;
+  margin-left: auto;
+  
+  &::before {
+    content: "▶";
+  }
+  
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.submenu {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin: 4px 0;
+  overflow: hidden;
+  
+  .menu-item-content {
+    margin: 0 4px;
+    
+    .menu-item-inner {
+      padding-left: 48px;
+      font-size: 13px;
+    }
+  }
+}
+
+/* 动画效果 */
+.submenu-enter-active,
+.submenu-leave-active {
+  transition: all 0.3s ease;
+}
+
+.submenu-enter-from,
+.submenu-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* 图标字体类（简单实现，实际项目中使用图标库） */
+.icon-folder::before { content: "📁"; }
+.icon-file::before { content: "📄"; }
+.icon-dashboard::before { content: "📊"; }
+.icon-user::before { content: "👤"; }
+.icon-news::before { content: "📰"; }
+.icon-settings::before { content: "⚙️"; }
+</style>

schoolNewsWeb/src/components/MenuNav.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="menu-nav">
+    <MenuItem 
+      v-for="menu in menus"
+      :key="menu.menuID"
+      :menu="menu" 
+      :collapsed="collapsed"
+      @menu-click="$emit('menu-click', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SysMenu } from '@/types';
+// @ts-ignore - Vue 3.5 defineOptions支持递归组件
+import MenuItem from './MenuItem.vue';
+
+// Props
+interface Props {
+  menus: SysMenu[];
+  collapsed?: boolean;
+}
+
+defineProps<Props>();
+
+// Emits
+defineEmits<{
+  'menu-click': [menu: SysMenu];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.menu-nav {
+  padding: 8px 0;
+}
+</style>

schoolNewsWeb/src/components/UserDropdown.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="user-dropdown" @click="toggleDropdown" v-click-outside="closeDropdown">
+    <!-- 用户头像和信息 -->
+    <div class="user-info">
+      <div class="user-avatar">
+        <img :src="userAvatar" :alt="user?.username" v-if="userAvatar">
+        <span class="avatar-placeholder" v-else>{{ avatarText }}</span>
+      </div>
+      <div class="user-details" v-if="!collapsed">
+        <div class="user-name">{{ user?.realName || user?.username }}</div>
+        <div class="user-role">{{ primaryRole }}</div>
+      </div>
+      <i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
+    </div>
+    
+    <!-- 下拉菜单 -->
+    <transition name="dropdown">
+      <div class="dropdown-menu" v-if="dropdownVisible">
+        <div class="dropdown-item" @click="goToProfile">
+          <i class="item-icon icon-profile"></i>
+          <span>个人资料</span>
+        </div>
+        <div class="dropdown-item" @click="goToSettings">
+          <i class="item-icon icon-settings"></i>
+          <span>账户设置</span>
+        </div>
+        <div class="dropdown-divider"></div>
+        <div class="dropdown-item danger" @click="handleLogout">
+          <i class="item-icon icon-logout"></i>
+          <span>退出登录</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import type { UserVO } from '@/types';
+
+// Props
+interface Props {
+  user?: UserVO | null;
+  collapsed?: boolean;
+}
+
+const props = defineProps<Props>();
+
+// Emits
+const emit = defineEmits<{
+  logout: [];
+}>();
+
+// 状态
+const dropdownVisible = ref(false);
+
+// Composition API
+const router = useRouter();
+
+// 计算属性
+const userAvatar = computed(() => {
+  return props.user?.avatar || '';
+});
+
+const avatarText = computed(() => {
+  const name = props.user?.realName || props.user?.username || '';
+  return name.charAt(0).toUpperCase();
+});
+
+const primaryRole = computed(() => {
+  // 这里可以从store中获取用户角色信息
+  return '管理员'; // 暂时硬编码
+});
+
+// 方法 - 使用 function 声明
+function toggleDropdown() {
+  dropdownVisible.value = !dropdownVisible.value;
+}
+
+function closeDropdown() {
+  dropdownVisible.value = false;
+}
+
+function goToProfile() {
+  closeDropdown();
+  router.push('/profile');
+}
+
+function goToSettings() {
+  closeDropdown();
+  router.push('/profile/settings');
+}
+
+function handleLogout() {
+  closeDropdown();
+  emit('logout');
+}
+
+// 点击外部关闭指令
+const vClickOutside = {
+  mounted(el: any, binding: any) {
+    el._clickOutside = (event: Event) => {
+      if (!(el === event.target || el.contains(event.target as Node))) {
+        binding.value();
+      }
+    };
+    document.addEventListener('click', el._clickOutside);
+  },
+  unmounted(el: any) {
+    document.removeEventListener('click', el._clickOutside);
+    delete el._clickOutside;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.user-dropdown {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 12px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.user-details {
+  flex: 1;
+  min-width: 0;
+  
+  .user-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .user-role {
+    font-size: 12px;
+    color: #666;
+    margin-top: 2px;
+    line-height: 1;
+  }
+}
+
+.dropdown-icon {
+  margin-left: 8px;
+  font-size: 12px;
+  color: #666;
+  transition: transform 0.2s ease;
+  
+  &::before {
+    content: "▼";
+  }
+  
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 160px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e8e8e8;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-size: 14px;
+  color: #333;
+  
+  &:hover {
+    background-color: #f5f5f5;
+  }
+  
+  &.danger {
+    color: #ff4d4f;
+    
+    &:hover {
+      background-color: #fff2f0;
+    }
+  }
+}
+
+.item-icon {
+  width: 16px;
+  margin-right: 12px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background-color: #e8e8e8;
+  margin: 4px 0;
+}
+
+/* 动画效果 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* 图标字体类 */
+.icon-profile::before { content: "👤"; }
+.icon-settings::before { content: "⚙️"; }
+.icon-logout::before { content: "🚪"; }
+</style>