Просмотр исходного кода

```
feat(router): 添加学习笔记路由配置

- 新增 '/learn-note' 路由路径
- 配置 LearnNoteHome 路由名称
- 导入学习笔记页面组件
- 设置路由标题元数据

feat(menu): 更新导航菜单国际化和路由链接

- 将学习笔记菜单项链接从 '/my-learning' 改为 '/learn-note'
- 使用国际化标签 'common.xuxibiji' 替代硬编码文本
- 注释掉米币商城菜单项以临时隐藏该功能
- 保持工作流交易菜单项的国际化支持
```

zhangningning 1 месяц назад
Родитель
Сommit
06500c8440
4 измененных файлов с 173 добавлено и 1 удалено
  1. 2 1
      src/App.vue
  2. 63 0
      src/pages/LearnNote/LearnNote.vue
  3. 101 0
      src/pages/LearnNote/components/noteList.vue
  4. 7 0
      src/router/index.js

+ 2 - 1
src/App.vue

@@ -10,8 +10,9 @@
             <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
             <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
             <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
             <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
             <el-menu-item index="3" @click="$router.push('/learning-system')">{{ $t('route.learning_system') }}</el-menu-item>
             <el-menu-item index="3" @click="$router.push('/learning-system')">{{ $t('route.learning_system') }}</el-menu-item>
-            <el-menu-item index="4" @click="$router.push('/my-learning')">学习笔记</el-menu-item>
+            <el-menu-item index="4" @click="$router.push('/learn-note')">{{ $t('common.xuxibiji') }}</el-menu-item>
             <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
             <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
+            <!-- <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item> -->
           </el-menu>
           </el-menu>
           <div class="header-right">
           <div class="header-right">
             <el-avatar :size="32" :src="appStore.avatar" />
             <el-avatar :size="32" :src="appStore.avatar" />

+ 63 - 0
src/pages/LearnNote/LearnNote.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="LearnNote container-height">
+    <Breadcrumb />
+    <div class="flex-between">
+      <div class="detail_right">
+        <div class="padding16 bg_color_fff border_radius_10">
+          <div class="gap10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">课程笔记列表</div>
+          </div>
+          <div class="flex-between mt10 course_List" 
+          :class="{'active': item === 1}"
+          v-for="item in 5" :key="item">
+            <img src="" alt="" style="width: 160px; height: 90px;" class="border_radius_8 bg_color_f5">
+            <div class="flex_1 ml20">
+              <div class="font_size18 bold">课程笔记标题</div>
+              <div class="font_size14 line2 gray mt10">- 本文介绍两款开源的密码破解工具John the Ripp...</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex_1 ml20 fit_content">
+        <noteList />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+
+import noteList from '@/pages/LearnNote/components/noteList.vue'
+
+
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from '@/pinia/appStore'
+const appStore = useAppStore()
+const route = useRoute()
+const query = route.query;
+const learnNoteId = ref(query.learnNoteId || '');
+const learnNoteDetail = ref({})
+onMounted(() => {
+  // getLearnNoteDetailFn();
+});
+const getLearnNoteDetailFn = async () => {
+   getLearnNoteDetail({learnNoteId: learnNoteId.value}).then(res => {
+    if(res.code === 200){
+      console.log(res)
+      learnNoteDetail.value = res.data || {};
+    }
+  })
+};
+</script>
+<style lang="scss">
+.LearnNote{
+  .course_List{
+    padding: 16px;
+    border-radius: 16px;
+    &.active{
+      background-color: rgba(45, 113, 255, 0.10) ;
+    }
+  }
+}
+</style>

+ 101 - 0
src/pages/LearnNote/components/noteList.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="xuxibiji">
+    <div class="list_item padding16 border_radius_16 flex-center-between bg_color_fff mb20" 
+    v-for="(item, index) in 4" :key="index">
+      <div class="flex_1">
+        <div class="bold font_size18">这是笔记名称</div>
+        <div class="gray999 mt5">{{$t('common.genxinyu')}} 2025-11-08 03:26</div>
+      </div>
+      <div>
+        <el-button type="primary" plain size="large" @click="openAddDialog()">
+          <el-icon><EditPen /></el-icon>
+          <span class="ml10">{{$t('common.edit')}}</span>
+        </el-button>
+        <el-button type="danger" plain size="large" @click="del(index)">
+          <el-icon><Delete /></el-icon>
+          <span class="ml10">{{$t('common.delete')}}</span>
+        </el-button>
+      </div>
+    </div>
+    <Pagination 
+      :total="listTotal"
+      :page-size="searchFom.pageSize"
+      :current-page="searchFom.pageNum"
+      @page-change="handlePageChange"
+    />
+    <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" />
+  </div>
+</template>
+<script setup>
+import { ElMessageBox } from 'element-plus'
+import addIcon from '@/assets/imgs/add.png'
+import BlockNoteEditorDialog from '@/components/BlockNoteEditorDialog.vue'
+import Pagination from '@/components/Pagination.vue'
+import { getCourseList } from '@/api/course.js'
+import { ref, onMounted,reactive } from 'vue'
+import { useAppStore } from '@/pinia/appStore'
+const appStore = useAppStore()
+defineProps({
+  info: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const comments = ref('');
+const listTotal = ref(0);
+const searchFom = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const list = ref([]);
+
+onMounted(() => {
+  getList();
+});
+
+const handlePageChange = (page) => {
+  searchFom.pageNum = page
+  // 这里可以添加获取数据的逻辑
+  console.log('当前页:', page);
+  getList();
+}
+// 查询寻找工作流列表
+const getList = async (type) => {
+  if(type === 'init'){
+    searchFom.pageNum = 1
+  }
+  // const res = await getQuestList(searchFom)
+  // if(res.code === 200){
+  //   listTotal.value = res.total
+  //   list.value = res.rows
+  // }
+};
+// 打开添加对话框
+const blockNoteEditorDialogRef = ref(null)
+const openAddDialog = () => {
+  blockNoteEditorDialogRef.value.openDialog();
+};
+// 删除笔记
+const del = (index) => {
+  // list.value.splice(index, 1)
+  ElMessageBox.confirm('确定删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    getList();
+  }).catch(() => {
+    // 取消删除
+  });
+};
+</script>
+<style scoped lang="scss">
+.xuxibiji{
+  .addBtn{
+    cursor: pointer;
+    margin-top: 20px;
+    padding: 10px 20px;
+    color: #fff;
+  }
+}
+</style>

+ 7 - 0
src/router/index.js

@@ -107,6 +107,13 @@ const routes = [
     component: () => import('@/pages/order/orderConfirm.vue'),
     component: () => import('@/pages/order/orderConfirm.vue'),
     meta: { title: 'route.orderConfirm' }
     meta: { title: 'route.orderConfirm' }
   },
   },
+  {
+    path: '/learn-note',
+    name: 'LearnNoteHome',
+    component: () => import('@/pages/LearnNote/LearnNote.vue'),
+    meta: { title: 'common.xuxibiji' }
+  },
+