ali_ai_learn_web/src/pages/HomeOld.vue

<template>
  <div class="home-page container">
    <!-- 使用 BlockNote 编辑器 -->
    <BlockNoteEditor v-model="editorContent" @getHtml="getHtml" :editable="true"/>
    <!-- <div v-html="editorContent_html"></div> -->
    <div class="banner">
      <h1>欢迎来到视频学习平台</h1>
      <p>发现优质课程，提升你的技能</p>
    </div>
    
    <div class="course-list">
      <h2>热门课程</h2>
      <div class="course-grid">
        <div 
          v-for="course in courseList" 
          :key="course.id" 
          class="course-card"
          @click="goToCourseDetail(course.id, course.title)"
        >
          <img :src="course.cover" :alt="course.title" class="course-cover">
          <div class="course-info">
            <h3>{{ course.title }}</h3>
            <p>讲师：{{ course.teacher }}</p>
            <div class="course-price">¥{{ course.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCourseStore } from '../pinia/courseStore'

// 导入封装好的 BlockNote 组件
import BlockNoteEditor from '@/components/BlockNoteEditor.vue';

// 绑定编辑器内容
// [
//   {
//     type: "paragraph",
//     content: [{ type: "text", text: "只读模式" }]
//   }
// ]

const editorContent = ref(
  [
    {
      type: "paragraph",
      content: [{ type: "text", text: "只读模式" }]
    },
    {
    "id": "378ce968-02c2-4856-888b-c35a355aa84b",
    "type": "codeBlock",
    "props": {
        "language": "text"
    },
    "content": [],
    "children": []
    }
  ]
);
const editorContent_html = ref();

const router = useRouter()
const courseStore = useCourseStore()
const courseList = ref([])

onMounted(() => {
  console.log('Home mounted')
  courseStore.fetchCourseList()
  courseList.value = courseStore.courseList;
})

const getHtml = (html) => {
  editorContent_html.value = html
}

const goToCourseDetail = (id,title) => {
  //增加参数名称
  router.push({
    path: `/course/${id}`,
    query: {
      title: title
    }
  })
}

</script>

<style scoped lang="scss">

.banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 20px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 40px;
  
  h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  
  p {
    font-size: 1.2rem;
    opacity: 0.9;
  }
}

.course-list {
  h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
  }
  
  .course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .course-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .course-cover {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .course-info {
      padding: 15px;
      
      h3 {
        margin-bottom: 8px;
        font-size: 1.1rem;
      }
      
      p {
        color: #666;
        margin-bottom: 10px;
      }
      
      .course-price {
        color: #e63946;
        font-weight: bold;
      }
    }
  }
}
</style>