From 2ca3d89d1c2f9180b981518f0067ec7e0b087616 Mon Sep 17 00:00:00 2001
From: lyc <ly_cheng2023@163.com>
Date: Mon, 4 Nov 2024 15:45:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/PdfJs/index.vue   |  14 +-
 src/renderer/src/hooks/useGetSubject.js       |   1 +
 src/renderer/src/layout/components/Header.vue | 272 +++++-------------
 src/renderer/src/router/index.js              |   1 +
 .../container/pdf-template.vue                |  28 ++
 .../src/views/curriculum-standards/index.vue  |  62 ++--
 .../container/pdf-template.vue                |  28 ++
 .../container/question-answer.vue             | 153 ++++++++++
 .../container/read-result.vue                 | 174 +++++++++++
 .../container/read-template.vue               | 116 ++++++++
 .../src/views/examination-analysis/index.vue  | 168 ++++++++++-
 .../container/pdf-template.vue                |  28 ++
 .../container/question-answer.vue             | 152 ++++++++++
 .../container/read-result.vue                 | 193 +++++++++++++
 .../container/read-template.vue               | 157 ++++++++++
 .../src/views/teaching-material/index.vue     | 169 ++++++++++-
 16 files changed, 1480 insertions(+), 236 deletions(-)
 create mode 100644 src/renderer/src/views/curriculum-standards/container/pdf-template.vue
 create mode 100644 src/renderer/src/views/examination-analysis/container/pdf-template.vue
 create mode 100644 src/renderer/src/views/examination-analysis/container/question-answer.vue
 create mode 100644 src/renderer/src/views/examination-analysis/container/read-result.vue
 create mode 100644 src/renderer/src/views/examination-analysis/container/read-template.vue
 create mode 100644 src/renderer/src/views/teaching-material/container/pdf-template.vue
 create mode 100644 src/renderer/src/views/teaching-material/container/question-answer.vue
 create mode 100644 src/renderer/src/views/teaching-material/container/read-result.vue
 create mode 100644 src/renderer/src/views/teaching-material/container/read-template.vue

diff --git a/src/renderer/src/components/PdfJs/index.vue b/src/renderer/src/components/PdfJs/index.vue
index 0973e5e..f99aa83 100644
--- a/src/renderer/src/components/PdfJs/index.vue
+++ b/src/renderer/src/components/PdfJs/index.vue
@@ -16,6 +16,10 @@ const props = defineProps({
   isWin: {
     type: Boolean,
     default: false
+  },
+  showCatalog: {
+    type: Boolean,
+    default: true
   }
 })
 /**pdf文件地址 */
@@ -25,7 +29,15 @@ const fileUrl = props.isWin ? props.url : getAppInstallUrl('pdfjs-dist/web/viewe
 onMounted(() => {
     /** 将传入的pdf地址进行编码，防止中文识别错误 */
     if(props.isWin) pdfUrl.value = fileUrl
-    else pdfUrl.value = fileUrl + encodeURIComponent(props.url) + '#pageMode=outline'
+    else{
+      let url = fileUrl + encodeURIComponent(props.url)
+      if(props.showCatalog){
+        pdfUrl.value = url + '#pageMode=outline'
+      }
+      else{
+        pdfUrl.value = url
+      }
+    }
 })
 </script>
 
diff --git a/src/renderer/src/hooks/useGetSubject.js b/src/renderer/src/hooks/useGetSubject.js
index 2b61a08..b25b4b1 100644
--- a/src/renderer/src/hooks/useGetSubject.js
+++ b/src/renderer/src/hooks/useGetSubject.js
@@ -51,6 +51,7 @@ export const useGetSubject = async () =>{
       }
       const { rows } = await listEvaluation(subjectParams)
       subjectList = rows
+      sessionStore.set('subject.curBook', rows[0])
       sessionStore.set('subject.bookList', rows)
       treeData = getTreeData(subjectList[0].id)
       // 设置一个默认的curNode
diff --git a/src/renderer/src/layout/components/Header.vue b/src/renderer/src/layout/components/Header.vue
index eebff93..bc94c34 100644
--- a/src/renderer/src/layout/components/Header.vue
+++ b/src/renderer/src/layout/components/Header.vue
@@ -1,234 +1,63 @@
 <template>
   <div class="page-header">
-    <div class="header-center">文枢{{ version }}</div>
+    <div class="header-left" v-if="isShowBack">
+      <div class="back" @click="onBack">
+        <i class="iconfont icon-fanhui"></i>
+        <span>返回</span>
+      </div>
+      <el-breadcrumb :separator-icon="ArrowRight">
+        <el-breadcrumb-item v-for="item in breadList"> {{ item.title }} </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="header-center" v-else>
+      AI文枢{{ version }}
+    </div>
     <div class="header-right">
       <WindowTools />
     </div>
   </div>
-  <!-- <div class="title-bar flex">
-    <div class="left-section">
-      <div class="flex title-box">
-        <el-image style="width: 23px; height: 23px" :src="logoIco" />
-        <span class="title" @click="changeTab">{{homeTitle}}</span>
-      </div>
-      <div class="change-tab">
-        <ul class="flex">
-          <li class="flex" :class="[activeId == menu.path ? 'active-li' : '', menu.disabled ? 'disabled' : '']"
-            v-for="menu in headerMenus" :key="menu.id" @click="clickMenu(menu)">
-            <div class="icon-box">
 
-
-                <svg class="icon iconfont" aria-hidden="true">
-                  <use :xlink:href="menu.icon"></use>
-                </svg>
-
-            </div>
-            <span class="text">{{ menu.name }}</span>
-          </li>
-        </ul>
-      </div>
-    </div> -->
-
-    <!-- <div class="right-section flex">
-      <WindowTools />
-      <div class="user flex">
-        <div class="avatar-container">
-          <div class="avatar-wrapper flex">
-            <el-dropdown class="right-menu-item hover-effect" @command="handleCommand">
-              <img :src="dev_api + userStore.user.avatar" class="user-avatar" style="float: left" />
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click="changePage('/profile')">个人中心</el-dropdown-item>
-                  <el-dropdown-item @click="changePage('/class')">班级中心</el-dropdown-item>
-                  <el-dropdown-item divided command="logout">
-                    <span>退出登录</span>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-            <div class="user-info flex">
-              <span class="user-name">{{ userStore.user.nickName }}</span>
-              <div class="flex">
-
-                <el-dropdown @command="changeSubject" max-height="500">
-                  <div class="user-subject">{{ userStore.user.edusubject }}
-                    <el-icon class="el-icon--right"><arrow-down />
-                    </el-icon>
-                  </div>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="item in userSubjectList" :key="item.id" :command="item">
-                        {{ item.edustage }}-{{ item.edusubject }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-              <div class="user-depname">{{ userStore.user.deptName }}</div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </div> -->
-  <!-- </div> -->
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import { ArrowDown } from '@element-plus/icons-vue'
+import { ArrowRight } from '@element-plus/icons-vue'
 import WindowTools from '@/components/window-tools/index.vue'
-import useUserStore from '@/store/modules/user'
-import { updateUserInfo } from '@/api/system/user'
-import logoIco from '@/assets/images/logo.png'
-import { listEvaluation } from '@/api/classManage/index'
-import { sessionStore } from '@/utils/store'
 import pkc from "../../../../../package.json"
 const version = ref(pkc.version)
-// import Chat from '@/utils/chat' // im 登录初始化
-// if (!Chat.imChat) Chat.init()
 
-let homeTitle = ref(import.meta.env.VITE_APP_TITLE)
-const { ipcRenderer } = window.electron || {}
-const userStore = useUserStore()
+// 返回
 const router = useRouter()
-const currentRoute = ref('')
-const dev_api = ref(import.meta.env.VITE_APP_BASE_API)
-const userSubjectList = ref([])
-
-const activeId = ref('/home')
-const headerMenus = [
-  {
-    name: '工作台',
-    id: 1,
-    icon: '#icon-gongzuotai_xuanzhong',
-    path: '/home'
-  },
-  {
-    name: '研究室',
-    id: 2,
-    icon: '#icon-yanjiushi-2',
-    disabled: true
-  },
-  {
-    name: '资源库',
-    id: 3,
-    icon: '#icon-ziyuanku',
-    path: '/resource'
-  },
-  {
-    name: '朋友圈',
-    id: 4,
-    icon: '#icon-iconfontzhizuobiaozhunbduan3-1',
-    disabled: true
-  }
-]
-
-const clickMenu = ({ id, disabled, path }) => {
-  if (disabled) return
-  activeId.value = id
-  router.push(path)
+const onBack = () => {
+  router.go(-1)
 }
 
 // 监听当前路由
+const isShowBack = ref(false)
+const breadList = ref([])
 watch(
   () => router.currentRoute.value,
   (newValue) => {
-    currentRoute.value = newValue
-    activeId.value = newValue.path
+    let path = newValue.path
+    console.log(newValue);
+
+    if (path.includes('/model') && path !== ('/model/index')) {
+      isShowBack.value = true
+      breadList.value = newValue.matched.map(item => item.meta)
+
+    }
+    else {
+      isShowBack.value = false
+    }
   },
   { immediate: true }
 )
 
-const changePage = (url) => {
-  router.push(url)
-}
-function handleCommand(command) {
-  switch (command) {
-    case 'setLayout':
-      setLayout()
-      break
-    case 'logout':
-      logout()
-      // Chat?.logout() // im 退出登录
-      break
-    default:
-      break
-  }
-}
-
-function logout() {
-  const hasClass = sessionStore.has('activeClass.id')
-  const  hasTool = sessionStore.get('isToolWin')
-  if (hasClass || hasTool) return ElMessage.warning('当前正在上课，请先结束上课')
-  ElMessageBox.confirm('确认退出系统吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(async () => {
-      const Chat = (await import('@/utils/chat')).default
-      if (!!Chat.imChat) Chat.logout()
-      userStore
-        .logOut()
-        .then(() => {
-          // router.replace('/login')
-          ipcRenderer && ipcRenderer.send('openLoginWindow')
-        })
-        .catch(() => {
-          // router.replace('/login')
-          ipcRenderer && ipcRenderer.send('openLoginWindow')
-        })
-    }).catch(()=>{})
-}
-
-const emits = defineEmits(['setLayout'])
-function setLayout() {
-  emits('setLayout')
-}
-// 切换学科
-const changeSubject = async (command) =>{
-  let sessionSubject = {
-    bookList: null,
-    curBook: null,
-    curNode: null,
-    defaultExpandedKeys: [],
-    subjectTree: []
-  }
-  sessionStore.set( 'subject', sessionSubject)
-  const { userId, userName, plainpwd  } = userStore.user
-  const data = {
-    userId,
-    userName,
-    edustage: command.edustage,
-    edusubject:  command.edusubject
-  }
-  await updateUserInfo(data)
-  await userStore.login({username: userName, password: plainpwd})
-  await userStore.getInfo()
-  router.go()
-}
-
-// 获取学科
-const getAllSubject = async () => {
-  const { rows } = await listEvaluation({ itemkey: "subject", pageSize: 500 })
-  if(!userStore.user.subject) return
-  const subject = userStore.user.subject.split(',')
-  userSubjectList.value = rows.filter(item =>
-    subject.some(el => item.id == el)
-  )
-}
-
-
-onMounted(() => {
-  getAllSubject()
-})
 </script>
 
 <style lang="scss" scoped>
-.page-header{
+.page-header {
   height: 100%;
   background-color: #fff;
   display: flex;
@@ -236,16 +65,47 @@ onMounted(() => {
   align-items: center;
   width: 100%;
   -webkit-app-region: drag;
-  .header-center{
+
+  .header-left {
+    padding-left: 20px;
+    font-size: 13px;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
+    display: flex;
+    align-items: center;
+
+    .back {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+      cursor: pointer;
+      color: #409EFF;
+      font-weight: bold;
+
+      .icon-fanhui {
+        margin-top: -2px;
+        margin-right: 3px;
+      }
+
+    }
+
+    :deep(.el-breadcrumb) {
+      font-size: 13px !important;
+    }
+  }
+
+  .header-center {
     margin-left: auto;
     margin-right: auto;
   }
-  .header-right{
+
+  .header-right {
     height: 100%;
     display: flex;
     align-items: center;
   }
 }
+
 .title-bar {
   height: 80px;
   justify-content: space-between;
@@ -284,13 +144,15 @@ onMounted(() => {
         padding: 5px 8px;
         height: 60px;
         align-items: center;
-        .icon-box{
+
+        .icon-box {
           width: 100%;
           height: 35px;
           display: flex;
           align-items: center;
           justify-content: center;
         }
+
         .text {
           margin-top: 3px;
           font-size: 13px;
diff --git a/src/renderer/src/router/index.js b/src/renderer/src/router/index.js
index 89fb03e..b976cf5 100644
--- a/src/renderer/src/router/index.js
+++ b/src/renderer/src/router/index.js
@@ -30,6 +30,7 @@ export const constantRoutes = [
     path: '/model',
     component: Layout,
     name: 'model',
+    meta: { title: '教学大模型' },
     children: [
       {
         path: 'index',
diff --git a/src/renderer/src/views/curriculum-standards/container/pdf-template.vue b/src/renderer/src/views/curriculum-standards/container/pdf-template.vue
new file mode 100644
index 0000000..ceba60f
--- /dev/null
+++ b/src/renderer/src/views/curriculum-standards/container/pdf-template.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container-pdf">
+    <PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
+  </div>
+  
+
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import PDF from '@/components/PdfJs/index.vue'
+import { sessionStore } from '@/utils/store'
+
+
+const pdfUrl = ref('')
+
+onMounted(async () =>{
+  await nextTick()
+  const { fileurl } = sessionStore.get('subject.curBook')
+  pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
+})
+</script>
+
+<style lang="scss" scoped>
+.container-pdf{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/curriculum-standards/index.vue b/src/renderer/src/views/curriculum-standards/index.vue
index 37d5396..61fa22a 100644
--- a/src/renderer/src/views/curriculum-standards/index.vue
+++ b/src/renderer/src/views/curriculum-standards/index.vue
@@ -3,25 +3,31 @@
     <el-row>
       <el-col :span="12" class="flex">
         <div class="page-left">
-          <div class="page-title">课程标准研读</div>
-          <el-radio-group v-model="radio" @change="changeRadio">
-            <el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <div class="list">
-            <ul>
-              <li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
-                @click="clickItem(index)">
-                <el-image class="img" :src="item.url" />
-                <span>{{ item.name }}</span>
-              </li>
-            </ul>
-          </div>
+          <template v-if="activeMenu == 1">
+            <div class="page-title">课程标准研读</div>
+            <el-radio-group v-model="radio" @change="changeRadio">
+              <el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
+            </el-radio-group>
+            <div class="list">
+              <ul>
+                <li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
+                  @click="clickItem(index)">
+                  <el-image class="img" :src="item.url" />
+                  <span>{{ item.name }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+          <template v-if="activeMenu != 1">
+            <PdfTemplate/>
+          </template>
         </div>
       </el-col>
       <el-col :span="12" class="flex">
         <div class="page-right">
           <div class="right-header">
-            <el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu" @click="onClickMenu(item)">{{ item.label
+            <el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
+              @click="onClickMenu(item)">{{ item.label
               }}</el-button>
           </div>
           <div class="right-con">
@@ -40,9 +46,12 @@ import { ref } from 'vue'
 import ReadTemplate from './container/read-template.vue';
 import QuestionAnswer from './container/question-answer.vue'
 import ReadResult from './container/read-result.vue'
+import PdfTemplate from './container/pdf-template.vue'
 
 const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11044b08-04c1-41a0-a453-1fd20b58a614%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732953359&t=7ab1d1b3a903db85b1149914407aea35'
 
+/************************左侧************* */
+const radio = ref(1)
 const radioList = ref([
   { label: '浏览研读', value: 1 },
   { label: '跨学科研读', value: 2 },
@@ -50,22 +59,12 @@ const radioList = ref([
   { label: '课标修订研读', value: 4 },
   { label: '自由研读', value: 5 },
 ])
-
-const radio = ref(1)
-// 当前选中
-const activeIndex = ref(-1)
-// 列表
 const list = ref([
   {
     name: '高中语文课程标准',
     url
   }
 ])
-
-const clickItem = (index) => {
-  activeIndex.value = index
-}
-
 const changeRadio = () => {
   list.value = []
   for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
@@ -75,6 +74,14 @@ const changeRadio = () => {
     })
   }
 }
+const activeIndex = ref(-1)
+
+const clickItem = (index) => {
+  activeIndex.value = index
+}
+
+
+/************************右侧************* */
 
 const contentMenu = [
   { label: '研读模板', value: 1 },
@@ -82,10 +89,11 @@ const contentMenu = [
   { label: '研读结果', value: 3 }
 ]
 const activeMenu = ref(1)
-const onClickMenu = (item) =>{
+const onClickMenu = (item) => {
   activeMenu.value = item.value
 }
 
+
 </script>
 
 <style lang="scss" scoped>
@@ -150,6 +158,7 @@ const onClickMenu = (item) =>{
       border-left: solid #ececec 1px;
       display: flex;
       flex-direction: column;
+
       .right-header {
         padding-left: 30px;
         height: 45px;
@@ -158,7 +167,8 @@ const onClickMenu = (item) =>{
         background: #fff;
         border-bottom: solid #ececec 1px;
       }
-      .right-con{
+
+      .right-con {
         flex: 1;
       }
     }
diff --git a/src/renderer/src/views/examination-analysis/container/pdf-template.vue b/src/renderer/src/views/examination-analysis/container/pdf-template.vue
new file mode 100644
index 0000000..ceba60f
--- /dev/null
+++ b/src/renderer/src/views/examination-analysis/container/pdf-template.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container-pdf">
+    <PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
+  </div>
+  
+
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import PDF from '@/components/PdfJs/index.vue'
+import { sessionStore } from '@/utils/store'
+
+
+const pdfUrl = ref('')
+
+onMounted(async () =>{
+  await nextTick()
+  const { fileurl } = sessionStore.get('subject.curBook')
+  pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
+})
+</script>
+
+<style lang="scss" scoped>
+.container-pdf{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/examination-analysis/container/question-answer.vue b/src/renderer/src/views/examination-analysis/container/question-answer.vue
new file mode 100644
index 0000000..1a99ab2
--- /dev/null
+++ b/src/renderer/src/views/examination-analysis/container/question-answer.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="question-container">
+    <div class="question-main">
+      <div class="question-item">
+        <div class="item-con">
+          <div class="item-q flex">
+            <div class="q-user">
+              <i class="iconfont icon-touxiang"></i>
+            </div>
+            <div class="q-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
+          </div>
+          <div class="item-a flex">
+            <div class="a-user">
+              语
+            </div>
+            <div class="a-text">
+              <p> 语言的建构与运用：学生在丰富的语言实践中，通过主动的积累、梳理和整合，逐步掌握祖国语言文字特点及其规律，形成个体言语经验，发展在具体语言情境中正确有效地运用祖国语言文字进行交流沟通的能力。</p>
+              <a class="" href="">来自《高中语文课程标准2020》，点击查看原文：第4页</a>
+              <p>语言建构有两方面的内涵：第一是指出于表达思想的目的，按照语言内部系统来建构话语-用词汇组构句子，用句子组构段落和篇章。第二是指每个人在个人言语经验的基础上，逐步建构起自己的言语表达体系，包括每个人的言语心理词典、句典和表达习惯。</p>
+              <a href="">来自《高中语文课程标准解读》，点击查看原文：第58页</a>
+              <p>高中语文课程标准2003版本中没有核心素养相关表达。 </p>
+              <a href="">来自《高中语文课程标准2003》 </a>
+            </div>
+          </div>
+        </div>
+        <div class="item-icon flex">
+          <div class="flex">
+            <span>
+              <i class="iconfont icon-fuzhi"></i>
+              复制
+            </span>
+            <span>
+              <i class="iconfont icon-bianji-gangbi"></i>
+              写评价
+            </span>
+            <span>
+              <i class="iconfont icon-rss-line"></i>
+              添加到微教研
+            </span>
+          </div>
+          <div>
+            <span>
+              <i class="iconfont icon-tianjia"></i>
+              保存
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-input v-model="textarea" class="question-textarea" resize="none"  :rows="2" type="textarea" placeholder="在这里输入发消息，输入@或/选择" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const textarea = ref('')
+</script>
+
+<style lang="scss" scoped>
+.question-container {
+  padding: 10px 15px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .question-item {
+    display: flex;
+    flex-direction: column;
+
+    .item-con {
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px;
+
+      .item-q {
+        align-items: center;
+        width: 100%;
+        margin-bottom: 10px;
+
+        .q-user {
+          width: 30px;
+          height: 30px;
+          background: #F6F6F6;
+          border-radius: 50%;
+          margin-right: 10px;
+
+          .icon-touxiang {
+            font-size: 18px;
+            font-weight: bold;
+          }
+        }
+
+        .q-text {
+          color: #409eff;
+          font-size: 13px;
+        }
+      }
+
+      .item-a {
+        color: #3D3D3D;
+        font-size: 13px;
+
+        .a-user {
+          width: 30px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          background: #F6F6F6;
+          border-radius: 50%;
+          margin-right: 10px;
+          flex-shrink: 0;
+
+        }
+
+        .a-text {
+          text-align: left;
+          a{
+            color: #409eff;
+            text-decoration: underline;
+            margin-bottom: 15px;
+            display: block;
+          }
+        }
+      }
+    }
+    .item-icon{
+      justify-content: space-between;
+      align-items: center;
+      color: #3D3D3D;
+      margin-top: 10px;
+      font-size: 13px;
+      span{
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 10px;
+    
+        &:hover{
+          background: #F5F7FA
+        }
+      }
+      .iconfont{
+        margin-right: 3px;
+        color: #3498fc;
+      }
+    }
+  }
+
+  .question-textarea {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/examination-analysis/container/read-result.vue b/src/renderer/src/views/examination-analysis/container/read-result.vue
new file mode 100644
index 0000000..aa3bd2d
--- /dev/null
+++ b/src/renderer/src/views/examination-analysis/container/read-result.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="read-container">
+
+    <div class="template-list">
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>历年高考真题分析</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>新课标与新高考改革分析</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>模拟命题</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.read-container {
+  padding: 15px;
+
+  .el-dropdown-link {
+    font-weight: bold;
+
+    .el-icon--right {
+      font-weight: bold;
+    }
+  }
+
+  .read-header {
+    justify-content: space-between;
+    align-items: center;
+
+    .add-btn {
+      font-size: 13px;
+
+      .icon-jiahao {
+        margin-right: 3px;
+        font-size: 14px;
+      }
+    }
+
+  }
+
+  .template-list {
+
+    .template-item {
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+
+        .blue {
+          font-size: 22px;
+          color: #409eff;
+          margin-right: 5px;
+        }
+      }
+
+      .item-text {
+        display: flex;
+        color: #409eff;
+        font-size: 13px;
+        padding-left: 20px;
+        text-align: left;
+      }
+    }
+  }
+
+  .template-item-result {
+    background: #DDEAFD !important;
+
+    .result-item-header {
+      display: flex;
+      align-items: flex-start;
+      text-align: left;
+      font-size: 16px;
+      font-weight: bold;
+      color: #3D3D3D;
+
+      .icon-xiaoxi {
+        color: #5881D5;
+        font-weight: bold;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+    }
+
+    .result-icon-btn {
+      justify-content: space-between;
+      font-size: 13px;
+      margin-top: 5px;
+
+      span {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 10px;
+
+        &:hover {
+          background: #cfe0fa
+        }
+      }
+
+      .iconfont {
+        margin-right: 3px;
+        color: #3498fc;
+      }
+    }
+
+    .line {
+      height: 1px;
+      background: #D8D8D8;
+      margin: 10px 0;
+    }
+
+    .other-msg {
+      font-size: 13px;
+
+      .other-user {
+        align-items: center;
+        color: #BA4B0F;
+        font-size: 12px;
+
+        .icon-touxiang {
+          color: #BA4B0F;
+          font-weight: bold;
+          font-size: 16px;
+          margin-right: 5px;
+        }
+      }
+
+      .other-text {
+        color: #191919;
+        text-align: left;
+      }
+    }
+
+
+  }
+}
+
+.pl-25 {
+  padding-left: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/examination-analysis/container/read-template.vue b/src/renderer/src/views/examination-analysis/container/read-template.vue
new file mode 100644
index 0000000..0b2c218
--- /dev/null
+++ b/src/renderer/src/views/examination-analysis/container/read-template.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="read-container">
+    <div class="read-header flex">
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          课标研读模板
+          <i class="iconfont icon-xiangxia" </i>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>考试分析模板一</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <el-button text class="add-btn">
+        <i class="iconfont icon-jiahao"></i>
+        添加
+      </el-button>
+    </div>
+    <div class="template-list">
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>历年高考真题分析</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>新课标与新高考改革分析</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>模拟命题</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.read-container {
+  padding: 15px;
+
+  .el-dropdown-link {
+    font-weight: bold;
+
+    .el-icon--right {
+      font-weight: bold;
+    }
+  }
+
+  .read-header {
+    justify-content: space-between;
+    align-items: center;
+
+    .add-btn {
+      font-size: 13px;
+
+      .icon-jiahao {
+        margin-right: 3px;
+        font-size: 14px;
+      }
+    }
+
+  }
+
+  .template-list {
+    margin-top: 15px;
+
+    .template-item {
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: #3D3D3D;
+
+        .blue {
+          font-size: 22px;
+          color: #409eff;
+          margin-right: 5px;
+        }
+      }
+
+      .item-text {
+        display: flex;
+        color: #409eff;
+        font-size: 13px;
+        padding-left: 20px;
+        text-align: left;
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/examination-analysis/index.vue b/src/renderer/src/views/examination-analysis/index.vue
index 07dc820..9d0044d 100644
--- a/src/renderer/src/views/examination-analysis/index.vue
+++ b/src/renderer/src/views/examination-analysis/index.vue
@@ -1,13 +1,177 @@
 <template>
-  <div>
-    考试分析
+  <div class="page-curriculum flex">
+    <el-row>
+      <el-col :span="12" class="flex">
+        <div class="page-left">
+          <template v-if="activeMenu == 1">
+            <div class="page-title">考试分析</div>
+            <el-radio-group v-model="radio" @change="changeRadio">
+              <el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
+            </el-radio-group>
+            <div class="list">
+              <ul>
+                <li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
+                  @click="clickItem(index)">
+                  <el-image class="img" :src="item.url" />
+                  <span>{{ item.name }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+          <template v-if="activeMenu != 1">
+            <PdfTemplate/>
+          </template>
+        </div>
+      </el-col>
+      <el-col :span="12" class="flex">
+        <div class="page-right">
+          <div class="right-header">
+            <el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
+              @click="onClickMenu(item)">{{ item.label
+              }}</el-button>
+          </div>
+          <div class="right-con">
+            <ReadTemplate v-if="activeMenu == 1" />
+            <QuestionAnswer v-if="activeMenu == 2" />
+            <ReadResult v-if="activeMenu == 3" />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import ReadTemplate from './container/read-template.vue';
+import QuestionAnswer from './container/question-answer.vue'
+import ReadResult from './container/read-result.vue'
+import PdfTemplate from './container/pdf-template.vue'
+
+const url = 'http://t13.baidu.com/it/u=3055765737,2452458153&fm=224&app=112&f=JPEG?w=500&h=500'
+
+/************************左侧************* */
+const radio = ref(1)
+const radioList = ref([
+  { label: '浏览研读', value: 1 },
+  { label: '跨学科研读', value: 2 },
+  { label: '文献研读', value: 3 },
+  { label: '模拟命题', value: 4 },
+])
+const list = ref([
+  {
+    name: '2021年高考真题',
+    url
+  }
+])
+const changeRadio = () => {
+  list.value = []
+  for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
+    list.value.push({
+      name: '2021年高考真题',
+      url
+    })
+  }
+}
+const activeIndex = ref(-1)
+
+const clickItem = (index) => {
+  activeIndex.value = index
+}
+
+
+/************************右侧************* */
+
+const contentMenu = [
+  { label: '分析模板', value: 1 },
+  { label: '问答分析', value: 2 },
+  { label: '分析结果', value: 3 }
+]
+const activeMenu = ref(1)
+const onClickMenu = (item) => {
+  activeMenu.value = item.value
+}
+
 
 </script>
 
 <style lang="scss" scoped>
+.page-curriculum {
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
+  overflow: hidden;
 
+  .el-row {
+    width: 100%;
+
+    .page-left {
+      width: 100%;
+      padding: 0 20px;
+      box-sizing: border-box;
+
+      .page-title {
+        font-size: 20px;
+        padding: 20px 0;
+      }
+
+      .list {
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            display: flex;
+            flex-direction: column;
+            font-size: 13px;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            overflow: hidden;
+            margin-right: 20px;
+            margin-bottom: 10px;
+
+            .img {
+              width: 100px;
+              height: 130px;
+              border: solid #ccc 1px;
+              margin-bottom: 10px;
+            }
+
+            &:hover {
+              background: #E0EAFF;
+            }
+          }
+
+          .li-active {
+            background: #E0EAFF;
+          }
+
+        }
+      }
+    }
+
+    .page-right {
+      width: 100%;
+      background: #F6F6F6;
+      border-left: solid #ececec 1px;
+      display: flex;
+      flex-direction: column;
+
+      .right-header {
+        padding-left: 30px;
+        height: 45px;
+        display: flex;
+        align-items: center;
+        background: #fff;
+        border-bottom: solid #ececec 1px;
+      }
+
+      .right-con {
+        flex: 1;
+      }
+    }
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/renderer/src/views/teaching-material/container/pdf-template.vue b/src/renderer/src/views/teaching-material/container/pdf-template.vue
new file mode 100644
index 0000000..ceba60f
--- /dev/null
+++ b/src/renderer/src/views/teaching-material/container/pdf-template.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container-pdf">
+    <PDF :url="pdfUrl" :showCatalog="false" v-if="pdfUrl" />
+  </div>
+  
+
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import PDF from '@/components/PdfJs/index.vue'
+import { sessionStore } from '@/utils/store'
+
+
+const pdfUrl = ref('')
+
+onMounted(async () =>{
+  await nextTick()
+  const { fileurl } = sessionStore.get('subject.curBook')
+  pdfUrl.value = import.meta.env.VITE_APP_RES_FILE_PATH + fileurl.replace('.txt','.pdf')
+})
+</script>
+
+<style lang="scss" scoped>
+.container-pdf{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/teaching-material/container/question-answer.vue b/src/renderer/src/views/teaching-material/container/question-answer.vue
new file mode 100644
index 0000000..bb27c86
--- /dev/null
+++ b/src/renderer/src/views/teaching-material/container/question-answer.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="question-container">
+    <div class="question-main">
+      <div class="question-item">
+        <div class="item-con">
+          <div class="item-q flex">
+            <div class="q-user">
+              <i class="iconfont icon-touxiang"></i>
+            </div>
+            <div class="q-text">总结“沁园春·长沙”一课的教学目标</div>
+          </div>
+          <div class="item-a flex">
+            <div class="a-user">
+              语
+            </div>
+            <div class="a-text">
+              <p>本单元属于必修课程“文学阅读与写作”任务群。课标指出：文学阅读与写作任务群旨在引导学生阅读古今中外诗歌、散文、小说、剧本等不同体裁的优秀文学作品，使学生在感受形象、品味语言、体验情感的过程中提升文学欣赏能力，并尝试文学写作，撰写文学评论，借以提高审美鉴赏能力和表达交流能力。
+毛泽东《沁园春·长沙》，作者充满激情地回忆了青年时期“粪土当年万户侯”的岁月，词作豪迈大气，洋溢着不可抗拒的青春热情，特别是对当时社会的思考和改造世界的雄心斗志有着强烈的感染力，可以激励学生坚定不断进取、奉献社会的决心和信心。
+</p>
+              <a class="" href="">来自《教师用书高中语文》，点击查看原文：第22页</a>
+              
+            </div>
+          </div>
+        </div>
+        <div class="item-icon flex">
+          <div class="flex">
+            <span>
+              <i class="iconfont icon-fuzhi"></i>
+              复制
+            </span>
+            <span>
+              <i class="iconfont icon-bianji-gangbi"></i>
+              写评价
+            </span>
+            <span>
+              <i class="iconfont icon-rss-line"></i>
+              添加到微教研
+            </span>
+          </div>
+          <div>
+            <span>
+              <i class="iconfont icon-tianjia"></i>
+              保存
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-input v-model="textarea" class="question-textarea" resize="none"  :rows="2" type="textarea" placeholder="在这里输入发消息，输入@或/选择" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const textarea = ref('')
+</script>
+
+<style lang="scss" scoped>
+.question-container {
+  padding: 10px 15px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .question-item {
+    display: flex;
+    flex-direction: column;
+
+    .item-con {
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px;
+
+      .item-q {
+        align-items: center;
+        width: 100%;
+        margin-bottom: 10px;
+
+        .q-user {
+          width: 30px;
+          height: 30px;
+          background: #F6F6F6;
+          border-radius: 50%;
+          margin-right: 10px;
+
+          .icon-touxiang {
+            font-size: 18px;
+            font-weight: bold;
+          }
+        }
+
+        .q-text {
+          color: #409eff;
+          font-size: 13px;
+        }
+      }
+
+      .item-a {
+        color: #3D3D3D;
+        font-size: 13px;
+
+        .a-user {
+          width: 30px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          background: #F6F6F6;
+          border-radius: 50%;
+          margin-right: 10px;
+          flex-shrink: 0;
+
+        }
+
+        .a-text {
+          text-align: left;
+          a{
+            color: #409eff;
+            text-decoration: underline;
+            margin-bottom: 15px;
+            display: block;
+          }
+        }
+      }
+    }
+    .item-icon{
+      justify-content: space-between;
+      align-items: center;
+      color: #3D3D3D;
+      margin-top: 10px;
+      font-size: 13px;
+      span{
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 10px;
+    
+        &:hover{
+          background: #F5F7FA
+        }
+      }
+      .iconfont{
+        margin-right: 3px;
+        color: #3498fc;
+      }
+    }
+  }
+
+  .question-textarea {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/teaching-material/container/read-result.vue b/src/renderer/src/views/teaching-material/container/read-result.vue
new file mode 100644
index 0000000..d5729c4
--- /dev/null
+++ b/src/renderer/src/views/teaching-material/container/read-result.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="read-container">
+
+    <div class="template-list">
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>教学目标研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>教学重点与难点</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的课程内容要求
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>前置知识分析研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的学业水平要求，包括水平一、水平二、水平三各自的要求描述
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>课文情境研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的教学实施建议
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>例题、习题研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的教学实施建议
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.read-container {
+  padding: 15px;
+
+  .el-dropdown-link {
+    font-weight: bold;
+
+    .el-icon--right {
+      font-weight: bold;
+    }
+  }
+
+  .read-header {
+    justify-content: space-between;
+    align-items: center;
+
+    .add-btn {
+      font-size: 13px;
+
+      .icon-jiahao {
+        margin-right: 3px;
+        font-size: 14px;
+      }
+    }
+
+  }
+
+  .template-list {
+
+    .template-item {
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+
+        .blue {
+          font-size: 22px;
+          color: #409eff;
+          margin-right: 5px;
+        }
+      }
+
+      .item-text {
+        display: flex;
+        color: #409eff;
+        font-size: 13px;
+        padding-left: 20px;
+        text-align: left;
+      }
+    }
+  }
+
+  .template-item-result {
+    background: #DDEAFD !important;
+
+    .result-item-header {
+      display: flex;
+      align-items: flex-start;
+      text-align: left;
+      font-size: 16px;
+      font-weight: bold;
+      color: #3D3D3D;
+
+      .icon-xiaoxi {
+        color: #5881D5;
+        font-weight: bold;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+    }
+
+    .result-icon-btn {
+      justify-content: space-between;
+      font-size: 13px;
+      margin-top: 5px;
+
+      span {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 10px;
+
+        &:hover {
+          background: #cfe0fa
+        }
+      }
+
+      .iconfont {
+        margin-right: 3px;
+        color: #3498fc;
+      }
+    }
+
+    .line {
+      height: 1px;
+      background: #D8D8D8;
+      margin: 10px 0;
+    }
+
+    .other-msg {
+      font-size: 13px;
+
+      .other-user {
+        align-items: center;
+        color: #BA4B0F;
+        font-size: 12px;
+
+        .icon-touxiang {
+          color: #BA4B0F;
+          font-weight: bold;
+          font-size: 16px;
+          margin-right: 5px;
+        }
+      }
+
+      .other-text {
+        color: #191919;
+        text-align: left;
+      }
+    }
+
+
+  }
+}
+
+.pl-25 {
+  padding-left: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/teaching-material/container/read-template.vue b/src/renderer/src/views/teaching-material/container/read-template.vue
new file mode 100644
index 0000000..1972c09
--- /dev/null
+++ b/src/renderer/src/views/teaching-material/container/read-template.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="read-container">
+    <div class="read-header flex">
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          课标研读模板
+          <i class="iconfont icon-xiangxia" </i>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>课标研读模板一</el-dropdown-item>
+            <el-dropdown-item>课标研读模板二</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <el-button text class="add-btn">
+        <i class="iconfont icon-jiahao"></i>
+        添加
+      </el-button>
+    </div>
+    <div class="template-list">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>教学目标研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的核心素养与课程目标</div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>教学重点与难点</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的课程内容要求</div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>课程内容要求</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的课程内容要求
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>前置知识分析研读</div>
+            <div class="item-text">
+              研读课程标准，提取出与本课相关的学业水平要求，包括水平一、水平二、水平三各自的要求描述
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>例题、习题研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的教学实施建议
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>插图素材研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的教学实施建议
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="template-item">
+            <div class="item-header"><span class="blue">#</span>拓展知识研读</div>
+            <div class="item-text">研读课程标准，提取出与本课相关的教学实施建议
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.read-container {
+  padding: 15px;
+
+  .el-dropdown-link {
+    font-weight: bold;
+
+    .el-icon--right {
+      font-weight: bold;
+    }
+  }
+
+  .read-header {
+    justify-content: space-between;
+    align-items: center;
+
+    .add-btn {
+      font-size: 13px;
+
+      .icon-jiahao {
+        margin-right: 3px;
+        font-size: 14px;
+      }
+    }
+
+  }
+
+  .template-list {
+    margin-top: 15px;
+
+    .template-item {
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: #3D3D3D;
+
+        .blue {
+          font-size: 22px;
+          color: #409eff;
+          margin-right: 5px;
+        }
+      }
+
+      .item-text {
+        display: flex;
+        color: #409eff;
+        font-size: 13px;
+        padding-left: 20px;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* 将对象作为弹性伸缩盒子模型显示 */
+        display: -webkit-box;
+        /* 限制在一个块元素显示的文本的行数 */
+        /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
+        -webkit-line-clamp: 2;
+        /* 设置或检索伸缩盒对象的子元素的排列方式 */
+        -webkit-box-orient: vertical;
+
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/views/teaching-material/index.vue b/src/renderer/src/views/teaching-material/index.vue
index da0bd6e..ba787fb 100644
--- a/src/renderer/src/views/teaching-material/index.vue
+++ b/src/renderer/src/views/teaching-material/index.vue
@@ -1,13 +1,178 @@
 <template>
-  <div>
-    教材研读
+  <div class="page-curriculum flex">
+    <el-row>
+      <el-col :span="12" class="flex">
+        <div class="page-left">
+          <template v-if="activeMenu == 1">
+            <div class="page-title">教材研读</div>
+            <el-radio-group v-model="radio" @change="changeRadio">
+              <el-radio :value="item.value" v-for="item in radioList">{{ item.label }}</el-radio>
+            </el-radio-group>
+            <div class="list">
+              <ul>
+                <li v-for="(item, index) in list" :class="activeIndex == index ? 'li-active' : ''"
+                  @click="clickItem(index)">
+                  <el-image class="img" :src="item.url" />
+                  <span>{{ item.name }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+          <template v-if="activeMenu != 1">
+            <PdfTemplate/>
+          </template>
+        </div>
+      </el-col>
+      <el-col :span="12" class="flex">
+        <div class="page-right">
+          <div class="right-header">
+            <el-button text :type="activeMenu == item.value ? 'primary' : ''" v-for="item in contentMenu"
+              @click="onClickMenu(item)">{{ item.label
+              }}</el-button>
+          </div>
+          <div class="right-con">
+            <ReadTemplate v-if="activeMenu == 1" />
+            <QuestionAnswer v-if="activeMenu == 2" />
+            <ReadResult v-if="activeMenu == 3" />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import ReadTemplate from './container/read-template.vue';
+import QuestionAnswer from './container/question-answer.vue'
+import ReadResult from './container/read-result.vue'
+import PdfTemplate from './container/pdf-template.vue'
+
+const url = 'https://p5.itc.cn/images01/20220529/f30e3c4164dc4f7495ed196577a2a312.jpeg'
+
+/************************左侧************* */
+const radio = ref(1)
+const radioList = ref([
+  { label: '浏览研读', value: 1 },
+  { label: '跨学科研读', value: 2 },
+  { label: '跨学段研读', value: 3 },
+  { label: '课标修订研读', value: 4 },
+  { label: '自由研读', value: 5 },
+])
+const list = ref([
+  {
+    name: '高中语文必修上',
+    url
+  }
+])
+const changeRadio = () => {
+  list.value = []
+  for (let i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
+    list.value.push({
+      name: '高中语文必修上',
+      url
+    })
+  }
+}
+const activeIndex = ref(-1)
+
+const clickItem = (index) => {
+  activeIndex.value = index
+}
+
+
+/************************右侧************* */
+
+const contentMenu = [
+  { label: '研读模板', value: 1 },
+  { label: '问答模板', value: 2 },
+  { label: '研读结果', value: 3 }
+]
+const activeMenu = ref(1)
+const onClickMenu = (item) => {
+  activeMenu.value = item.value
+}
+
 
 </script>
 
 <style lang="scss" scoped>
+.page-curriculum {
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
+  overflow: hidden;
 
+  .el-row {
+    width: 100%;
+
+    .page-left {
+      width: 100%;
+      padding: 0 20px;
+      box-sizing: border-box;
+
+      .page-title {
+        font-size: 20px;
+        padding: 20px 0;
+      }
+
+      .list {
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            display: flex;
+            flex-direction: column;
+            font-size: 13px;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            overflow: hidden;
+            margin-right: 20px;
+            margin-bottom: 10px;
+
+            .img {
+              width: 100px;
+              height: 130px;
+              border: solid #ccc 1px;
+              margin-bottom: 10px;
+            }
+
+            &:hover {
+              background: #E0EAFF;
+            }
+          }
+
+          .li-active {
+            background: #E0EAFF;
+          }
+
+        }
+      }
+    }
+
+    .page-right {
+      width: 100%;
+      background: #F6F6F6;
+      border-left: solid #ececec 1px;
+      display: flex;
+      flex-direction: column;
+
+      .right-header {
+        padding-left: 30px;
+        height: 45px;
+        display: flex;
+        align-items: center;
+        background: #fff;
+        border-bottom: solid #ececec 1px;
+      }
+
+      .right-con {
+        flex: 1;
+      }
+    }
+  }
+
+}
 </style>
\ No newline at end of file