diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/controller/AppletApiBooksController.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/controller/AppletApiBooksController.java
index a40b7dc..cea158a 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/controller/AppletApiBooksController.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/controller/AppletApiBooksController.java
@@ -12,6 +12,7 @@ import org.jeecg.modules.demo.appletBookStand.entity.AppletBookStand;
 import org.jeecg.modules.demo.appletBooks.entity.AppletBooks;
 import org.jeecg.modules.demo.appletCategorize.entity.AppletCategorize;
 import org.jeecg.modules.demo.appletCourse.entity.AppletCourse;
+import org.jeecg.modules.demo.appletCoursePage.entity.AppletCoursePage;
 import org.jeecg.modules.demo.appletLabel.entity.AppletLabel;
 import org.springframework.beans.factory.annotation.Autowired;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -154,4 +155,22 @@ public class AppletApiBooksController {
         return Result.OK(Courses);
     }
 
+
+    @IgnoreAuth
+    @Operation(summary = "获取课程页面列表", description = "根据课程id获取页面列表")
+    @GetMapping(value = "/coursePage")
+    public Result<List<AppletCoursePage>> coursePage(@Parameter(description = "课程id") String id) {
+        List<AppletCoursePage> Courses = appletApiBooksService.getCoursesPage(id);
+        return Result.OK(Courses);
+    }
+
+
+    @IgnoreAuth
+    @Operation(summary = "获取课程页面详情", description = "页面id")
+    @GetMapping(value = "/coursesPageDetail")
+    public Result<AppletCoursePage> getCoursesPageDetail(@Parameter(description = "页面id") String id) {
+        AppletCoursePage Courses = appletApiBooksService.getCoursesPageDetail(id);
+        return Result.OK(Courses);
+    }
+
 }
\ No newline at end of file
diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/AppletApiBooksService.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/AppletApiBooksService.java
index ddb60ea..5dca954 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/AppletApiBooksService.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/AppletApiBooksService.java
@@ -6,6 +6,7 @@ import org.jeecg.modules.demo.appletBookStand.entity.AppletBookStand;
 import org.jeecg.modules.demo.appletBooks.entity.AppletBooks;
 import org.jeecg.modules.demo.appletCategorize.entity.AppletCategorize;
 import org.jeecg.modules.demo.appletCourse.entity.AppletCourse;
+import org.jeecg.modules.demo.appletCoursePage.entity.AppletCoursePage;
 import org.jeecg.modules.demo.appletLabel.entity.AppletLabel;
 
 import java.util.List;
@@ -47,6 +48,10 @@ public interface AppletApiBooksService {
      */
     IPage<AppletCourse> getCourses(Page<AppletCourse> coursePage, String id);
 
+    List<AppletCoursePage> getCoursesPage(String id);
+
+    AppletCoursePage getCoursesPageDetail(String id);
+
     List<AppletLabel> getLabel();
 
     List<AppletCategorize> category();
diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/impl/AppletApiBooksServiceImpl.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/impl/AppletApiBooksServiceImpl.java
index 2aa4a57..fb92bde 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/impl/AppletApiBooksServiceImpl.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/applet/service/impl/AppletApiBooksServiceImpl.java
@@ -18,6 +18,8 @@ import org.jeecg.modules.demo.appletCategorize.entity.AppletCategorize;
 import org.jeecg.modules.demo.appletCategorize.service.IAppletCategorizeService;
 import org.jeecg.modules.demo.appletCourse.entity.AppletCourse;
 import org.jeecg.modules.demo.appletCourse.service.IAppletCourseService;
+import org.jeecg.modules.demo.appletCoursePage.entity.AppletCoursePage;
+import org.jeecg.modules.demo.appletCoursePage.service.IAppletCoursePageService;
 import org.jeecg.modules.demo.appletLabel.entity.AppletLabel;
 import org.jeecg.modules.demo.appletLabel.service.IAppletLabelService;
 import org.jeecg.modules.demo.appletVip.service.IAppletVipService;
@@ -45,6 +47,8 @@ public class AppletApiBooksServiceImpl implements AppletApiBooksService {
     private IAppletCategorizeService appletCategorizeService;
     @Autowired
     private IAppletVipService appletVipService;
+    @Autowired
+    private IAppletCoursePageService appletCoursePageService;
 
     /**
      * 查询书籍列表
@@ -236,4 +240,22 @@ public class AppletApiBooksServiceImpl implements AppletApiBooksService {
         return book;
     }
 
+    @Override
+    public List<AppletCoursePage> getCoursesPage(String id){
+        return appletCoursePageService.lambdaQuery()
+                .eq(AppletCoursePage::getCourseId, id)
+                .eq(AppletCoursePage::getStatus, "Y")
+                .orderByAsc(AppletCoursePage::getSort)
+                .select(AppletCoursePage::getId,
+                        AppletCoursePage::getTitle,
+                        AppletCoursePage::getPay
+                )
+                .list();
+    }
+
+    @Override
+    public AppletCoursePage getCoursesPageDetail(String id){
+        return appletCoursePageService.getById(id);
+    }
+
 }
diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCourse/controller/AppletCourseController.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCourse/controller/AppletCourseController.java
index 15720ef..7fcbc6c 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCourse/controller/AppletCourseController.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCourse/controller/AppletCourseController.java
@@ -110,7 +110,7 @@ public class AppletCourseController extends JeecgController<AppletCourse, IApple
 	@RequestMapping(value = "/edit", method = {RequestMethod.PUT,RequestMethod.POST})
 	public Result<String> edit(@RequestBody AppletCourse appletCourse) {
 		appletCourseService.updateById(appletCourse);
-		return Result.OK("编辑成功!");
+		return Result.OK("保存成功!");
 	}
 	
 	/**
diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/controller/AppletCoursePageController.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/controller/AppletCoursePageController.java
index 967ac86..6af67bb 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/controller/AppletCoursePageController.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/controller/AppletCoursePageController.java
@@ -86,10 +86,9 @@ public class AppletCoursePageController extends JeecgController<AppletCoursePage
 	@Operation(summary="课程分页-添加")
 	@RequiresPermissions("appletCoursePage:applet_course_page:add")
 	@PostMapping(value = "/add")
-	public Result<String> add(@RequestBody AppletCoursePage appletCoursePage) {
+	public Result<AppletCoursePage> add(@RequestBody AppletCoursePage appletCoursePage) {
 		appletCoursePageService.save(appletCoursePage);
-
-		return Result.OK("添加成功！");
+		return Result.OK(appletCoursePage);
 	}
 	
 	/**
diff --git a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/entity/AppletCoursePage.java b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/entity/AppletCoursePage.java
index 665f323..0380aaf 100644
--- a/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/entity/AppletCoursePage.java
+++ b/jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletCoursePage/entity/AppletCoursePage.java
@@ -64,13 +64,18 @@ public class AppletCoursePage implements Serializable {
     @Excel(name = "付费", width = 15,replace = {"是_Y","否_N"} )
     @Schema(description = "付费")
     private java.lang.String pay;
-	/**内容*/
-	@Excel(name = "内容", width = 15)
+	/**标题*/
+	@Excel(name = "标题", width = 15)
+    @Schema(description = "标题")
+    private java.lang.String title;
+    /**内容*/
+    @Excel(name = "内容", width = 15)
     @Schema(description = "内容")
     private java.lang.String content;
 	/**类型*/
 	@Excel(name = "类型", width = 15)
     @Schema(description = "类型")
+    @Dict(dicCode = "applet_course_page_type")
     private java.lang.String type;
 	/**课程*/
 	@Excel(name = "课程", width = 15)
diff --git a/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePage.api.ts b/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePage.api.ts
index 816766d..0182fc6 100644
--- a/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePage.api.ts
+++ b/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePage.api.ts
@@ -52,6 +52,20 @@ export const batchDelete = (params, handleSuccess) => {
     }
   });
 }
+/**
+ * 新增
+ */
+export const add = (params) => {
+  return defHttp.post({url: Api.save, params});
+}
+
+/**
+ * 编辑
+ */
+export const edit = (params) => {
+  return defHttp.post({url: Api.edit, params});
+}
+
 /**
  * 保存或者更新
  */
diff --git a/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePageList.vue b/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePageList.vue
index e273d93..9055b29 100644
--- a/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePageList.vue
+++ b/jeecgboot-vue3/src/views/applet/course-page/AppletCoursePageList.vue
@@ -23,26 +23,18 @@
 
     <!-- 上方：课程页面列表（横向滑动） -->
     <div class="page-list-container">
-      <div class="page-list-header">
-        <span class="list-title">课程页面列表</span>
-        <span class="page-count">共 {{ pageList.length }} 个页面</span>
-      </div>
       <div class="page-list-scroll">
         <div class="page-list">
-          <div 
-            v-for="(page, index) in pageList" 
-            :key="page.id"
-            :class="['page-item', { active: currentPageId === page.id }]"
-            @click="selectPage(page)"
-          >
+          <div v-for="(page, index) in pageList" :key="page.id"
+            :class="['page-item', { active: currentPageId === page.id }]" @click="selectPage(page)">
             <div class="page-thumbnail">
               <Icon :icon="getPageTypeIcon(page.type)" class="page-icon" />
             </div>
             <div class="page-info">
-              <div class="page-title">{{ page.title || `页面 ${index + 1}` }}</div>
+              <div class="page-title">{{ page.title || `${index + 1}` }}</div>
               <div class="page-meta">
                 <span class="page-type">{{ getPageTypeName(page.type) }}</span>
-                <span class="page-sort">排序: {{ page.sort || 0 }}</span>
+                <!-- <span class="page-sort">排序: {{ page.sort || 0 }}</span> -->
               </div>
             </div>
             <div class="page-actions">
@@ -68,15 +60,9 @@
       <!-- 左侧：内容编辑区域 -->
       <div class="editor-left">
         <div class="editor-panel">
-          <div class="panel-header">
-            <span>内容编辑</span>
-          </div>
           <div class="panel-content">
             <a-form :model="currentPage" layout="vertical" class="page-form">
-              <a-form-item label="页面标题" name="title">
-                <a-input v-model:value="currentPage.title" placeholder="请输入页面标题" />
-              </a-form-item>
-
+              
               <!-- 内容编辑区域 -->
               <div class="content-editor-section">
                 <div class="section-header">
@@ -96,14 +82,10 @@
                     </a-button>
                   </a-button-group>
                 </div>
-                
+
                 <!-- 内容组件列表 -->
                 <div class="content-components">
-                  <div 
-                    v-for="(component, index) in contentComponents" 
-                    :key="index"
-                    class="content-component"
-                  >
+                  <div v-for="(component, index) in contentComponents" :key="index" class="content-component">
                     <!-- 文本组件 -->
                     <div v-if="component.type === 'text'" class="text-component">
                       <div class="component-header">
@@ -113,11 +95,14 @@
                           <Icon icon="ant-design:delete-outlined" />
                         </a-button>
                       </div>
-                      <a-textarea 
-                        v-model:value="component.content" 
-                        :rows="4" 
-                        placeholder="请输入文本内容"
-                      />
+                      <!-- 语言选择 -->
+                      <div class="language-selector">
+                        <a-radio-group v-model:value="component.language" size="small">
+                          <a-radio value="zh">中文</a-radio>
+                          <a-radio value="en">英文</a-radio>
+                        </a-radio-group>
+                      </div>
+                      <a-textarea v-model:value="component.content" :rows="4" placeholder="请输入文本内容" />
                     </div>
 
                     <!-- 图片组件 -->
@@ -129,15 +114,9 @@
                           <Icon icon="ant-design:delete-outlined" />
                         </a-button>
                       </div>
-                      <a-upload
-                        v-model:file-list="component.fileList"
-                        name="file"
-                        list-type="picture-card"
-                        class="image-uploader"
-                        :show-upload-list="false"
-                        :before-upload="beforeUpload"
-                        @change="handleImageChange($event, component)"
-                      >
+                      <a-upload v-model:file-list="component.fileList" name="file" list-type="picture-card"
+                        class="image-uploader" :show-upload-list="false" :before-upload="beforeUpload"
+                        @change="handleImageChange($event, component)">
                         <div v-if="component.imageUrl" class="uploaded-image">
                           <img :src="component.imageUrl" alt="uploaded" />
                         </div>
@@ -146,11 +125,7 @@
                           <div>上传图片</div>
                         </div>
                       </a-upload>
-                      <a-input 
-                        v-model:value="component.alt" 
-                        placeholder="图片描述（可选）"
-                        style="margin-top: 8px;"
-                      />
+                      <a-input v-model:value="component.alt" placeholder="图片描述（可选）" style="margin-top: 8px;" />
                     </div>
 
                     <!-- 视频组件 -->
@@ -162,18 +137,10 @@
                           <Icon icon="ant-design:delete-outlined" />
                         </a-button>
                       </div>
-                      <a-input 
-                        v-model:value="component.url" 
-                        placeholder="请输入视频URL或上传视频文件"
-                      />
-                      <a-upload
-                        v-model:file-list="component.fileList"
-                        name="file"
-                        :show-upload-list="false"
-                        :before-upload="beforeUpload"
-                        @change="handleVideoChange($event, component)"
-                        style="margin-top: 8px;"
-                      >
+                      <a-input v-model:value="component.url" placeholder="请输入视频URL或上传视频文件" />
+                      <a-upload v-model:file-list="component.fileList" name="file" :show-upload-list="false"
+                        :before-upload="beforeUpload" @change="handleVideoChange($event, component)"
+                        style="margin-top: 8px;">
                         <a-button>
                           <Icon icon="ant-design:upload-outlined" />
                           上传视频
@@ -181,7 +148,7 @@
                       </a-upload>
                     </div>
                   </div>
-                  
+
                   <!-- 空状态 -->
                   <div v-if="contentComponents.length === 0" class="empty-content">
                     <Icon icon="ant-design:plus-circle-outlined" class="empty-icon" />
@@ -203,88 +170,68 @@
             <div class="panel-header">
               <span>页面设置</span>
             </div>
-          <div class="panel-content">
-            <a-form :model="currentPage" layout="vertical" class="settings-form">
-              <a-row :gutter="16">
-                <a-col :span="12">
-                  <a-form-item label="排序" name="sort">
-                    <a-input-number 
-                      v-model:value="currentPage.sort" 
-                      :min="0" 
-                      placeholder="排序号" 
-                      style="width: 100%" 
-                    />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-item label="页面类型" name="type">
-                    <a-select v-model:value="currentPage.type" placeholder="选择类型">
-                      <a-select-option value="text">纯文本</a-select-option>
-                      <a-select-option value="image">图文混合</a-select-option>
-                      <a-select-option value="video">视频</a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-              </a-row>
-              <a-row :gutter="16">
-                <a-col :span="12">
-                  <a-form-item label="付费" name="pay">
-                    <a-switch 
-                      v-model:checked="currentPage.pay" 
-                      checked-children="是" 
-                      un-checked-children="否" 
-                    />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-item label="上架" name="status">
-                    <a-switch 
-                      v-model:checked="currentPage.status" 
-                      checked-children="是" 
-                      un-checked-children="否" 
-                    />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </a-form>
+            <div class="panel-content">
+              <a-form :model="currentPage" layout="vertical" class="settings-form">
+                <a-form-item label="页面标题" name="title">
+                  <a-input v-model:value="currentPage.title" placeholder="请输入页面标题" />
+                </a-form-item>
+                <a-form-item label="排序" name="sort">
+                  <a-input-number v-model:value="currentPage.sort" :min="0" placeholder="排序号" style="width: 100%" />
+                </a-form-item>
+                <a-form-item label="页面类型" name="type">
+                  <a-select v-model:value="currentPage.type" placeholder="选择类型">
+                    <a-select-option 
+                      v-for="option in pageTypeOptions" 
+                      :key="option.value" 
+                      :value="option.value"
+                    >
+                      {{ option.label }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item label="付费" name="pay">
+                  <a-switch v-model:checked="payChecked" checked-children="是" un-checked-children="否" />
+                </a-form-item>
+                <a-form-item label="上架" name="status">
+                  <a-switch v-model:checked="statusChecked" checked-children="是" un-checked-children="否" />
+                </a-form-item>
+              </a-form>
+            </div>
           </div>
-        </div>
 
-        <!-- 右侧：手机预览区域 -->
-        <div class="mobile-preview-section">
-          <div class="panel-header">
-            <span>手机预览</span>
-            <a-button size="small" @click="refreshPreview">
-              <Icon icon="ant-design:reload-outlined" />
-            </a-button>
-          </div>
-          <div class="panel-content">
-            <div class="mobile-preview-container">
-              <div class="mobile-screen">
-                <div class="preview-content">
-                  <div v-if="contentComponents.length === 0" class="empty-preview">
-                    <p>暂无内容，请在左侧添加内容组件</p>
-                  </div>
-                  <div v-else class="content-preview">
-                    <div 
-                      v-for="(component, index) in contentComponents" 
-                      :key="index"
-                      class="preview-component"
-                    >
-                      <!-- 文本预览 -->
-                      <div v-if="component.type === 'text'" class="text-preview">
-                        <pre>{{ component.content || '文本内容...' }}</pre>
-                      </div>
-                      <!-- 图片预览 -->
-                      <div v-else-if="component.type === 'image'" class="image-preview">
-                        <img v-if="component.imageUrl" :src="component.imageUrl" :alt="component.alt" />
-                        <div v-else class="placeholder-image">图片预览</div>
-                        <p v-if="component.alt" class="image-caption">{{ component.alt }}</p>
-                      </div>
-                      <!-- 视频预览 -->
-                      <div v-else-if="component.type === 'video'" class="video-preview">
-                        <video v-if="component.url" :src="component.url" controls></video>
-                        <div v-else class="placeholder-video">视频预览</div>
+          <!-- 右侧：手机预览区域 -->
+          <div class="mobile-preview-section">
+            <div class="panel-header">
+              <span>手机预览<span style="font-size: 12px; color: #999;">（该预览经供参考，请以实际手机为准）</span></span>
+              <a-button size="small" @click="refreshPreview">
+                <Icon icon="ant-design:reload-outlined" />
+              </a-button>
+            </div>
+            <div class="panel-content">
+              <div class="mobile-preview-container">
+                <div class="mobile-screen">
+                  <div class="preview-content">
+                    <div v-if="contentComponents.length === 0" class="empty-preview">
+                      <p>暂无内容，请在左侧添加内容组件</p>
+                    </div>
+                    <div v-else class="content-preview">
+                      <div v-for="(component, index) in contentComponents" :key="index" class="preview-component">
+                        <!-- 文本预览 -->
+                        <div v-if="component.type === 'text'" class="text-preview" :class="{ 'text-english': component.language === 'en' }">
+                          <div class="text-language-tag">{{ component.language === 'en' ? 'EN' : '中' }}</div>
+                          <pre>{{ component.content || '文本内容...' }}</pre>
+                        </div>
+                        <!-- 图片预览 -->
+                        <div v-else-if="component.type === 'image'" class="image-preview">
+                          <img v-if="component.imageUrl" :src="component.imageUrl" :alt="component.alt" />
+                          <div v-else class="placeholder-image">图片预览</div>
+                          <p v-if="component.alt" class="image-caption">{{ component.alt }}</p>
+                        </div>
+                        <!-- 视频预览 -->
+                        <div v-else-if="component.type === 'video'" class="video-preview">
+                          <video v-if="component.url" :src="component.url" controls></video>
+                          <div v-else class="placeholder-video">视频预览</div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -299,344 +246,454 @@
 </template>
 
 <script lang="ts" name="appletCoursePage-appletCoursePage" setup>
-  import {ref, reactive, computed, unref, onMounted, watch} from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Icon } from '/@/components/Icon';
-  import {saveOrUpdate, getById, list} from './AppletCoursePage.api';
-  
-  const route = useRoute();
-  const router = useRouter();
-  const { createMessage } = useMessage();
-  
-  // 课程页面列表
-  const pageList = ref([]);
-  const currentPageId = ref('');
-  
-  // 当前编辑的页面数据
-  const currentPage = reactive({
-    id: '',
-    courseId: '',
-    title: '',
-    type: 'text',
-    sort: 0,
-    pay: false,
-    status: true,
-  });
-  
-  // 内容组件列表
-  const contentComponents = ref([]);
-  
-  // 保存状态
-  const saving = ref(false);
-  
-  onMounted(async () => {
-    // 获取课程ID
-    if (route.query.courseId) {
-      currentPage.courseId = route.query.courseId as string;
-    }
-    
-    // 加载课程页面列表
-    await loadPageList();
-    
-    // 如果有页面ID，选择对应页面
-    if (route.query.id) {
-      currentPageId.value = route.query.id as string;
-      await loadPageData(route.query.id as string);
-    } else if (pageList.value.length > 0) {
-      // 默认选择第一个页面
-      selectPage(pageList.value[0]);
-    }
-  });
-  
-  /**
-   * 加载课程页面列表
-   */
-  async function loadPageList() {
-    try {
-      const params = {
-        courseId: currentPage.courseId,
-        pageNo: 1,
-        pageSize: 100
-      };
-      const result = await list(params);
-      if (result.success) {
-        pageList.value = result.result.records || [];
-      }
-    } catch (error) {
-      createMessage.error('加载页面列表失败');
-    }
+import { ref, reactive, computed, unref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Icon } from '/@/components/Icon';
+import { saveOrUpdate, getById, list, deleteOne, add, edit } from './AppletCoursePage.api';
+import { initDictOptions } from '/@/utils/dict/JDictSelectUtil';
+
+const route = useRoute();
+const router = useRouter();
+const { createMessage } = useMessage();
+
+// 课程页面列表
+const pageList = ref([]);
+const currentPageId = ref('');
+
+// 页面类型字典选项
+const pageTypeOptions = ref([]);
+
+// 当前编辑的页面数据
+const currentPage = reactive({
+  id: '',
+  courseId: '',
+  title: '',
+  type: '0',
+  sort: 0,
+  pay: 'N',
+  status: 'Y',
+});
+
+// 内容组件列表
+const contentComponents = ref([]);
+
+// 计算属性：处理付费开关的Y/N字符串与布尔值转换
+const payChecked = computed({
+  get: () => currentPage.pay === 'Y',
+  set: (value: boolean) => {
+    currentPage.pay = value ? 'Y' : 'N';
   }
-  
-  /**
-   * 选择页面
-   */
-  function selectPage(page: any) {
-    currentPageId.value = page.id;
-    loadPageData(page.id);
+});
+
+// 计算属性：处理上架开关的Y/N字符串与布尔值转换
+const statusChecked = computed({
+  get: () => currentPage.status === 'Y',
+  set: (value: boolean) => {
+    currentPage.status = value ? 'Y' : 'N';
+  }
+});
+
+// 保存状态
+const saving = ref(false);
+
+onMounted(async () => {
+  // 获取课程ID
+  if (route.query.courseId) {
+    currentPage.courseId = route.query.courseId as string;
+  }
+
+  // 加载页面类型字典数据
+  await loadPageTypeOptions();
+
+  // 加载课程页面列表
+  await loadPageList();
+
+  // 如果有页面ID，选择对应页面
+  if (route.query.id) {
+    currentPageId.value = route.query.id as string;
+    await loadPageData(route.query.id as string);
+  } else if (pageList.value.length > 0) {
+    // 默认选择第一个页面
+    selectPage(pageList.value[0]);
+  }
+  // 移除自动创建页面的逻辑，因为现在新增页面会立即保存到数据库
+});
+
+/**
+ * 加载页面类型字典数据
+ */
+async function loadPageTypeOptions() {
+  try {
+    const dictData = await initDictOptions('applet_course_page_type');
+    pageTypeOptions.value = dictData || [];
+  } catch (error) {
+    createMessage.error('加载页面类型字典失败');
+    // 如果字典加载失败，使用默认选项
+    pageTypeOptions.value = [
+      { label: '纯文本', value: 'text' },
+      { label: '图文混合', value: 'image' },
+      { label: '视频', value: 'video' }
+    ];
   }
+}
+
+/**
+ * 加载课程页面列表
+ */
+async function loadPageList() {
+  try {
+    const params = {
+      courseId: currentPage.courseId,
+      pageNo: 1,
+      pageSize: 9999999
+    };
+    const result = await list(params);
+    const records = result.records || [];
+    pageList.value = records
+  } catch (error) {
+    createMessage.error('加载页面列表失败', error);
+  }
+}
+
+/**
+ * 选择页面
+ */
+function selectPage(page: any) {
+  currentPageId.value = page.id;
   
-  /**
-   * 加载页面数据
-   */
-  async function loadPageData(id: string) {
-    try {
-      const result = await getById({id});
-      if (result.success) {
-        Object.assign(currentPage, result.result);
-        // 解析content字段为组件列表
-        parseContentToComponents(result.result.content);
-      }
-    } catch (error) {
-      createMessage.error('加载页面数据失败');
-    }
+  // 加载页面数据
+  loadPageData(page.id);
+}
+
+/**
+ * 加载页面数据
+ */
+async function loadPageData(id: string) {
+  if (!id) {
+    return;
   }
   
-  /**
-   * 解析content字段为组件列表
-   */
-  function parseContentToComponents(content: string) {
-    contentComponents.value = [];
-    if (!content) return;
-    
-    try {
-      const parsed = JSON.parse(content);
-      if (Array.isArray(parsed)) {
-        contentComponents.value = parsed;
-      } else {
-        // 如果是字符串，创建一个文本组件
-        contentComponents.value = [{
-          type: 'text',
-          content: content
-        }];
-      }
-    } catch (error) {
-      // 如果解析失败，作为纯文本处理
+  try {
+    const result = await getById({ id });
+    Object.assign(currentPage, result);
+    // 解析content字段为组件列表
+    parseContentToComponents(result.content);
+  } catch (error) {
+    createMessage.error('加载页面数据失败');
+  }
+}
+
+/**
+ * 解析content字段为组件列表
+ */
+function parseContentToComponents(content: string) {
+  contentComponents.value = [];
+  if (!content) return;
+
+  try {
+    const parsed = JSON.parse(content);
+    if (Array.isArray(parsed)) {
+      // 确保每个文本组件都有language字段
+      contentComponents.value = parsed.map(component => {
+        if (component.type === 'text' && !component.language) {
+          return { ...component, language: 'zh' }; // 默认中文
+        }
+        return component;
+      });
+    } else {
+      // 如果是字符串，创建一个文本组件
       contentComponents.value = [{
         type: 'text',
-        content: content
+        content: content,
+        language: 'zh' // 默认中文
       }];
     }
+  } catch (error) {
+    // 如果解析失败，作为纯文本处理
+    contentComponents.value = [{
+      type: 'text',
+      content: content,
+      language: 'zh' // 默认中文
+    }];
   }
-  
-  /**
-   * 将组件列表转换为content字段
-   */
-  function componentsToContent() {
-    return JSON.stringify(contentComponents.value);
-  }
-  
-  /**
-   * 返回课程列表
-   */
-  function goBack() {
-    router.back();
-  }
-  
-  /**
-   * 新增页面
-   */
-  function handleAddPage() {
+}
+
+/**
+ * 将组件列表转换为content字段
+ */
+function componentsToContent() {
+  return JSON.stringify(contentComponents.value);
+}
+
+/**
+ * 返回课程列表
+ */
+function goBack() {
+  router.back();
+}
+
+/**
+ * 新增页面
+ */
+async function handleAddPage() {
+  try {
     const newPage = {
-      id: '',
       courseId: currentPage.courseId,
       title: `新页面 ${pageList.value.length + 1}`,
-      type: 'text',
+      type: '0',
       sort: pageList.value.length,
-      pay: false,
-      status: true,
+      pay: 'N',
+      status: 'N',
+      content: '[]' // 默认空内容
     };
-    
-    Object.assign(currentPage, newPage);
-    contentComponents.value = [];
-    currentPageId.value = '';
-  }
-  
-  /**
-   * 编辑页面
-   */
-  function editPage(page: any) {
-    selectPage(page);
-  }
-  
-  /**
-   * 删除页面
-   */
-  async function deletePage(page: any) {
-    // TODO: 实现删除功能
-    createMessage.info('删除功能开发中...');
-  }
-  
-  /**
-   * 保存页面数据
-   */
-  async function handleSave() {
-    if (!currentPage.title) {
-      createMessage.warning('请输入页面标题');
-      return;
-    }
-    
-    saving.value = true;
-    try {
-      // 将组件列表转换为content字段
-      const pageData = {
-        ...currentPage,
-        content: componentsToContent()
-      };
+
+    // 调用API添加到数据库
+    const result = await add(newPage);
+    if (result.id) {
+      // 设置新页面的ID
+      newPage.id = result.id;
+      
+      // 将新页面添加到页面列表中
+      pageList.value.push(newPage);
+      
+      // 设置为当前编辑页面
+      Object.assign(currentPage, newPage);
+      contentComponents.value = [];
+      currentPageId.value = newPage.id;
       
-      const result = await saveOrUpdate(pageData, !!currentPage.id);
-      if (result.success) {
-        createMessage.success('保存成功');
-        if (!currentPage.id) {
-          currentPage.id = result.result.id;
-          currentPageId.value = result.result.id;
+      createMessage.success('新增页面成功');
+    } else {
+      createMessage.error(result.message || '新增页面失败');
+    }
+  } catch (error) {
+    console.error('新增页面失败:', error);
+    createMessage.error('新增页面失败');
+  }
+}
+
+/**
+ * 编辑页面
+ */
+function editPage(page: any) {
+  selectPage(page);
+}
+
+/**
+ * 删除页面
+ */
+async function deletePage(page: any) {
+  if (!page.id) {
+    // 如果是新页面（未保存），直接从列表中移除
+    const index = pageList.value.findIndex(p => p === page);
+    if (index > -1) {
+      pageList.value.splice(index, 1);
+      // 如果删除的是当前页面，选择其他页面
+      if (currentPageId.value === page.id || currentPageId.value === '') {
+        if (pageList.value.length > 0) {
+          selectPage(pageList.value[0]);
+        } else {
+          // 没有页面了，创建新页面
+          handleAddPage();
         }
-        // 重新加载页面列表
-        await loadPageList();
-      } else {
-        createMessage.error(result.message || '保存失败');
       }
-    } catch (error) {
-      createMessage.error('保存失败');
-    } finally {
-      saving.value = false;
     }
+    return;
   }
-  
-  /**
-   * 刷新预览
-   */
-  function refreshPreview() {
-    createMessage.info('预览已刷新');
-  }
-  
-  /**
-   * 添加文本内容
-   */
-  function addTextContent() {
-    contentComponents.value.push({
-      type: 'text',
-      content: ''
-    });
-  }
-  
-  /**
-   * 添加图片内容
-   */
-  function addImageContent() {
-    contentComponents.value.push({
-      type: 'image',
-      imageUrl: '',
-      alt: '',
-      fileList: []
+
+  try {
+    await deleteOne({ id: page.id }, () => {
+      createMessage.success('删除成功');
+      // 重新加载页面列表
+      loadPageList();
+      // 如果删除的是当前页面，选择其他页面
+      if (currentPageId.value === page.id) {
+        if (pageList.value.length > 1) {
+          const index = pageList.value.findIndex(p => p.id === page.id);
+          const nextPage = pageList.value[index === 0 ? 1 : index - 1];
+          selectPage(nextPage);
+        } else {
+          // 没有其他页面了，创建新页面
+          handleAddPage();
+        }
+      }
     });
+  } catch (error) {
+    console.error('删除页面失败:', error);
+    createMessage.error('删除失败');
   }
-  
-  /**
-   * 添加视频内容
-   */
-  function addVideoContent() {
-    contentComponents.value.push({
-      type: 'video',
-      url: '',
-      fileList: []
-    });
+}
+
+/**
+ * 保存页面数据
+ */
+async function handleSave() {
+  if (!currentPage.title) {
+    createMessage.warning('请输入页面标题');
+    return;
   }
-  
-  /**
-   * 移除组件
-   */
-  function removeComponent(index: number) {
-    contentComponents.value.splice(index, 1);
+
+  if (!currentPage.id) {
+    createMessage.warning('页面ID不存在，无法保存');
+    return;
   }
-  
-  /**
-   * 文件上传前处理
-   */
-  function beforeUpload(file: any) {
-    const isImage = file.type.indexOf('image/') === 0;
-    const isVideo = file.type.indexOf('video/') === 0;
-    
-    if (!isImage && !isVideo) {
-      createMessage.error('只能上传图片或视频文件!');
-      return false;
-    }
-    
-    const isLt10M = file.size / 1024 / 1024 < 10;
-    if (!isLt10M) {
-      createMessage.error('文件大小不能超过 10MB!');
-      return false;
+
+  saving.value = true;
+  try {
+    // 将组件列表转换为content字段
+    const pageData = {
+      ...currentPage,
+      content: componentsToContent()
+    };
+
+    // 只处理编辑操作，因为新增已在handleAddPage中处理
+    const result = await edit(pageData);
+    if (result) {
+      // createMessage.success('保存成功');
+      
+      // 重新加载页面列表以确保数据同步
+      await loadPageList();
+      
+      // 保持当前页面选中状态
+      if (currentPageId.value) {
+        const currentPageInList = pageList.value.find(p => p.id === currentPageId.value);
+        if (currentPageInList) {
+          selectPage(currentPageInList);
+        }
+      }
+    } else {
+      createMessage.error(result.message || '保存失败');
     }
-    
-    return true;
+  } catch (error) {
+    createMessage.error('保存失败');
+  } finally {
+    saving.value = false;
   }
-  
-  /**
-   * 图片上传变化处理
-   */
-  function handleImageChange(info: any, component: any) {
-    if (info.file.status === 'done') {
-      // 这里应该从服务器响应中获取图片URL
-      component.imageUrl = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
-    } else if (info.file.status === 'error') {
-      createMessage.error('图片上传失败');
-    }
+}
+
+/**
+ * 刷新预览
+ */
+function refreshPreview() {
+  createMessage.info('预览已刷新');
+}
+
+/**
+ * 添加文本内容
+ */
+function addTextContent() {
+  contentComponents.value.push({
+    type: 'text',
+    content: '',
+    language: 'zh' // 默认选择中文
+  });
+}
+
+/**
+ * 添加图片内容
+ */
+function addImageContent() {
+  contentComponents.value.push({
+    type: 'image',
+    imageUrl: '',
+    alt: '',
+    fileList: []
+  });
+}
+
+/**
+ * 添加视频内容
+ */
+function addVideoContent() {
+  contentComponents.value.push({
+    type: 'video',
+    url: '',
+    fileList: []
+  });
+}
+
+/**
+ * 移除组件
+ */
+function removeComponent(index: number) {
+  contentComponents.value.splice(index, 1);
+}
+
+/**
+ * 文件上传前处理
+ */
+function beforeUpload(file: any) {
+  const isImage = file.type.indexOf('image/') === 0;
+  const isVideo = file.type.indexOf('video/') === 0;
+
+  if (!isImage && !isVideo) {
+    createMessage.error('只能上传图片或视频文件!');
+    return false;
   }
-  
-  /**
-   * 视频上传变化处理
-   */
-  function handleVideoChange(info: any, component: any) {
-    if (info.file.status === 'done') {
-      // 这里应该从服务器响应中获取视频URL
-      component.url = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
-    } else if (info.file.status === 'error') {
-      createMessage.error('视频上传失败');
-    }
+
+  const isLt10M = file.size / 1024 / 1024 < 10;
+  if (!isLt10M) {
+    createMessage.error('文件大小不能超过 10MB!');
+    return false;
   }
-  
-  /**
-   * 获取页面类型图标
-   */
-  function getPageTypeIcon(type: string) {
-    const iconMap = {
-      text: 'ant-design:font-size-outlined',
-      image: 'ant-design:picture-outlined',
-      video: 'ant-design:video-camera-outlined'
-    };
-    return iconMap[type] || 'ant-design:file-outlined';
+
+  return true;
+}
+
+/**
+ * 图片上传变化处理
+ */
+function handleImageChange(info: any, component: any) {
+  if (info.file.status === 'done') {
+    // 这里应该从服务器响应中获取图片URL
+    component.imageUrl = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
+  } else if (info.file.status === 'error') {
+    createMessage.error('图片上传失败');
   }
-  
-  /**
-   * 获取页面类型名称
-   */
-  function getPageTypeName(type: string) {
-    const nameMap = {
-      text: '纯文本',
-      image: '图文混合',
-      video: '视频'
-    };
-    return nameMap[type] || '未知';
+}
+
+/**
+ * 视频上传变化处理
+ */
+function handleVideoChange(info: any, component: any) {
+  if (info.file.status === 'done') {
+    // 这里应该从服务器响应中获取视频URL
+    component.url = info.file.response?.url || URL.createObjectURL(info.file.originFileObj);
+  } else if (info.file.status === 'error') {
+    createMessage.error('视频上传失败');
   }
-  
-  /**
-   * 获取页面类型颜色
-   */
-  function getPageTypeColor(type: string) {
-    const colorMap = {
-      text: 'blue',
-      image: 'green',
-      video: 'orange'
-    };
-    return colorMap[type] || 'default';
+}
+
+/**
+ * 获取页面类型图标
+ */
+function getPageTypeIcon(type: string) {
+  const iconMap = {
+    0: 'ant-design:font-size-outlined',
+    1: 'ant-design:picture-outlined',
+    2: 'ant-design:video-camera-outlined'
+  };
+  return iconMap[type] || 'ant-design:file-outlined';
+}
+
+/**
+ * 获取页面类型名称
+ */
+function getPageTypeName(type: string) {
+  // 优先从字典数据中获取名称
+  const dictOption = pageTypeOptions.value.find(option => option.value === type);
+  if (dictOption) {
+    return dictOption.label;
   }
+}
+
 
 </script>
 
 <style scoped>
 /* 主容器 */
 .course-page-editor {
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: #f5f5f5;
@@ -685,7 +742,7 @@
 
 /* 页面列表容器 */
 .page-list-container {
-  padding: 18px 8px;
+  padding: 8px;
   background: #fff;
   border-bottom: 1px solid #e8e8e8;
   flex-shrink: 0;
@@ -716,7 +773,7 @@
 
 .page-list {
   display: flex;
-  gap: 16px;
+  gap: 12px;
   min-width: max-content;
 }
 
@@ -725,9 +782,9 @@
 }
 
 .page-item {
-  min-width: 160px;
-  width: 160px;
-  padding: 12px;
+  min-width: 140px;
+  width: 140px;
+  padding: 8px;
   background: #fff;
   border: 1px solid #d9d9d9;
   border-radius: 6px;
@@ -751,10 +808,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 50px;
+  height: 40px;
   background: #f5f5f5;
   border-radius: 4px;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 
 .page-icon {
@@ -763,7 +820,7 @@
 }
 
 .page-info {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 
 .page-title {
@@ -843,7 +900,7 @@
 }
 
 .settings-section {
-  flex: 0 0 400px;
+  flex: 0 0 280px;
   display: flex;
   flex-direction: column;
   border: 1px solid #e8e8e8;
@@ -915,7 +972,8 @@
 
 .mobile-screen .preview-content {
   padding: 16px;
-  height: calc(100% - 80px);
+  padding-top: 50px;
+  height: calc(100% - 30px);
   overflow-y: auto;
 }
 
@@ -1061,6 +1119,20 @@
   flex: 1;
 }
 
+/* 语言选择器样式 */
+.language-selector {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+}
+
+.language-selector .ant-radio-group {
+  display: flex;
+  gap: 16px;
+}
+
 .empty-content {
   display: flex;
   flex-direction: column;
@@ -1153,6 +1225,32 @@
   font-family: inherit;
 }
 
+/* 文本语言标签样式 */
+.text-language-tag {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: #1890ff;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-weight: bold;
+}
+
+.text-preview {
+  position: relative;
+}
+
+.text-preview.text-english pre {
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  font-style: italic;
+}
+
+.text-preview.text-english .text-language-tag {
+  background: #52c41a;
+}
+
 .image-preview img {
   max-width: 100%;
   height: auto;
@@ -1185,6 +1283,7 @@
 
 /* 响应式设计 */
 @media (max-width: 1200px) {
+
   .editor-left,
   .editor-right {
     width: 50%;
@@ -1195,21 +1294,21 @@
   .editor-main {
     flex-direction: column;
   }
-  
+
   .editor-left,
   .editor-right {
     width: 100%;
   }
-  
+
   .editor-right {
     border-right: none;
     border-top: 1px solid #e8e8e8;
   }
-  
+
   .page-list {
     flex-direction: column;
   }
-  
+
   .page-item {
     min-width: auto;
   }