novel-app/RuoYi-App/pages/search/index.vue

<!-- src/views/search/index.vue -->
<template>
  <div class="app-container">
    <el-input
      v-model="keyword"
      placeholder="请输入搜索内容"
      clearable
      @keyup.enter.native="handleSearch"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="handleSearch"
      />
    </el-input>
    
    <!-- 搜索结果展示 -->
    <div v-if="results.length > 0" class="search-results">
      <el-card v-for="item in results" :key="item.id">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import { searchNovels } from '@/api/novel'

export default {
  name: 'Search',
  data() {
    return {
      keyword: '',
      results: []
    }
  },
  methods: {
    handleSearch() {
      if (!this.keyword.trim()) {
        this.$message.warning('请输入搜索关键词')
        return
      }
      
      searchNovels(this.keyword).then(response => {
        this.results = response.data
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.search-results {
  margin-top: 20px;
}
</style>