web-资源中心修改

schoolNewsWeb/src/components/base/FloatingSidebar.vue

@@ -8,7 +8,10 @@
           v-for="menu in menus"
           :key="menu.menuID || menu.url"
           class="sidebar-item"
-          :class="{ active: isActive(menu) }"
+          :class="{ 
+            active: isActive(menu),
+            'theme-resource': props.theme === 'resource'
+          }"
           @click="handleClick(menu)"
         >
           <div class="sidebar-link">
@@ -28,9 +31,12 @@ import { useRouter, useRoute } from 'vue-router';
 interface Props {
   menus: SysMenu[];
   activePath?: string;
+  theme?: 'default' | 'resource'; // 新增主题属性
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  theme: 'default'
+});
 
 // Emits
 const emit = defineEmits<{
@@ -113,7 +119,7 @@ function handleClick(menu: SysMenu) {
   display: flex;
   align-items: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s;
 
   &::before {
     content: '';
@@ -142,6 +148,42 @@ function handleClick(menu: SysMenu) {
       color: #C62828;
     }
   }
+  
+  // Resource theme - 红色背景高亮
+  &.theme-resource {
+    padding: 0 10px;
+    
+    &:hover {
+      background: rgba(198, 40, 40, 0.05);
+    }
+    
+    &.active {
+      background: #C62828;
+      border-radius: 8px;
+      margin: 5px 10px;
+      height: 44px;
+      
+      &::before {
+        display: none; // 隐藏左侧指示条
+      }
+      
+      .sidebar-link {
+        color: #FFFFFF;
+      }
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: -103px;
+        top: 3px;
+        width: 48.53px;
+        height: 50.54px;
+        background: linear-gradient(134deg, rgba(255, 255, 255, 1) 26%, rgba(255, 255, 255, 0) 86%);
+        opacity: 0.23;
+        pointer-events: none;
+      }
+    }
+  }
 }
 
 .sidebar-link {
@@ -156,12 +198,16 @@ function handleClick(menu: SysMenu) {
   font-weight: 500;
   font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   line-height: 1.5;
-  transition: color 0.2s;
+  transition: color 0.3s;
   user-select: none;
 
   .link-text {
     text-align: center;
   }
+  
+  .theme-resource & {
+    margin-left: 32px; // Resource theme 文字左移
+  }
 }
 
 /* 响应式设计 */

schoolNewsWeb/src/components/base/Search.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="resource-search">
+    <div class="search-box">
+      <input 
+        v-model="searchText" 
+        type="text" 
+        placeholder="搜索思政资源"
+        @keyup.enter="handleSearch"
+      />
+      <div class="search-button" @click="handleSearch">
+        <img src="@/assets/imgs/search-icon.svg" alt="search" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits<{
+  search: [keyword: string];
+}>();
+
+const searchText = ref('');
+
+function handleSearch() {
+  emit('search', searchText.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.resource-search {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 36px;
+  background: #FFFFFF;
+  border: 1px solid rgba(186, 192, 204, 0.5);
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+input {
+  flex: 1;
+  height: 100%;
+  padding: 0 90px 0 20px;
+  border: none;
+  outline: none;
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  color: #141F38;
+  
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.search-button {
+  position: absolute;
+  right: 0;
+  width: 60px;
+  height: 100%;
+  background: #C62828;
+  border-radius: 0 30px 30px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.3s;
+  
+  &:hover {
+    background: #B71C1C;
+  }
+  
+  img {
+    width: 18px;
+    height: 18px;
+    filter: brightness(0) invert(1);
+  }
+}
+</style>

schoolNewsWeb/src/components/base/TopNavigation.vue

@@ -47,20 +47,7 @@
       <!-- 右侧用户区域 -->
       <div class="nav-right">
               <!-- 搜索框 -->
-        <div class="nav-search">
-          <div class="search-box">
-            <input 
-              type="text" 
-              placeholder="搜索思政资源" 
-              class="search-input"
-              v-model="searchKeyword"
-              @keyup.enter="handleSearch"
-            />
-            <div class="search-icon">
-              <img src="../../assets/imgs/search-icon.svg" alt="搜索" />
-            </div>
-          </div>
-        </div>
+        <Search @search="handleSearch" />
         <UserDropdown :user="userInfo" @logout="handleLogout" />
       </div>
     </div>
@@ -74,7 +61,7 @@ import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 // @ts-ignore - Vue 3.5 组件导入兼容性
-import UserDropdown from './UserDropdown.vue';
+import {UserDropdown, Search} from '@/components/base';
 
 const router = useRouter();
 const route = useRoute();
@@ -475,6 +462,34 @@ function handleLogout() {
   margin-left: auto;
   display: flex;
   flex-shrink: 0; /* 防止右侧区域被压缩 */
+  gap: 20px;
+  align-items: center;
+  
+  // 添加搜索框样式
+  :deep(.resource-search) {
+    width: 221px;
+    height: 36px;
+    padding: 0;
+    
+    .search-box {
+      height: 36px;
+    }
+    
+    input {
+      font-size: 14px;
+      padding: 0 70px 0 20px;
+    }
+    
+    .search-button {
+      width: 48px;
+      height: 36px;
+      
+      img {
+        width: 17px;
+        height: 17px;
+      }
+    }
+  }
 }
 
 /* 响应式设计 */

schoolNewsWeb/src/components/base/index.ts

@@ -3,4 +3,5 @@ export { default as FloatingSidebar } from './FloatingSidebar.vue';
 export { default as MenuItem } from './MenuItem.vue';
 export { default as MenuNav } from './MenuNav.vue';
 export { default as TopNavigation } from './TopNavigation.vue';
-export { default as UserDropdown } from './UserDropdown.vue';
+export { default as UserDropdown } from './UserDropdown.vue';
+export { default as Search } from './Search.vue';