From c4f1b2818bf00c6f1b737e1fe08af28140a98a58 Mon Sep 17 00:00:00 2001
From: GoCo <guochen0829@163.com>
Date: Sat, 26 Jul 2025 00:27:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=A7=86=E9=A2=91=E4=B8=8A=E4=BC=A0=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/admin/common/upload.go         |  11 +-
 web/src/views/lessonSection/edit.vue          | 195 ++++++++++--------
 2 files changed, 119 insertions(+), 87 deletions(-)

diff --git a/server/internal/controller/admin/common/upload.go b/server/internal/controller/admin/common/upload.go
index f8c8022..d4713f8 100644
--- a/server/internal/controller/admin/common/upload.go
+++ b/server/internal/controller/admin/common/upload.go
@@ -56,20 +56,21 @@ func (c *cUpload) UploadVideo(ctx context.Context, _ *common.UploadVideoReq) (re
 		return
 	}
 
+	m3u8UUID := uuid.New().String()
+
 	// 1. 保存上传视频到本地临时目录
 	tmpDir := "./tmp/video"
-	_, _ = file.Save(tmpDir)
-	tmpFile := tmpDir + "/" + file.Filename
+	_, _ = file.Save(tmpDir + "/" + m3u8UUID)
+	tmpFile := tmpDir + "/" + m3u8UUID + "/" + file.Filename
 
 	// 2. 用ffmpeg切片为m3u8和ts文件
 
-	m3u8UUID := uuid.New().String()
-
 	hlsDir := "./tmp/hls/" + m3u8UUID
 	_ = os.MkdirAll(hlsDir, 0755)
 
 	defer func() {
 		os.RemoveAll(hlsDir)
+		os.RemoveAll(tmpDir + "/" + m3u8UUID)
 	}()
 
 	m3u8File := m3u8UUID + ".m3u8"
@@ -99,6 +100,8 @@ func (c *cUpload) UploadVideo(ctx context.Context, _ *common.UploadVideoReq) (re
 		}
 	}
 
+	m3u8MinioPath = storager.LastUrl(ctx, m3u8MinioPath, "minio")
+
 	// 4. 返回m3u8文件的minio路径
 	return common.UploadVideoRes{
 		Path: m3u8MinioPath,
diff --git a/web/src/views/lessonSection/edit.vue b/web/src/views/lessonSection/edit.vue
index 5849d8c..54c6409 100644
--- a/web/src/views/lessonSection/edit.vue
+++ b/web/src/views/lessonSection/edit.vue
@@ -1,25 +1,13 @@
 <template>
   <div>
-    <n-modal
-      v-model:show="showModal"
-      :mask-closable="false"
-      :show-icon="false"
-      preset="dialog"
-      transform-origin="center"
-      :title="formValue.id > 0 ? '编辑课程章节 #' + formValue.id : '添加课程章节'"
-      :style="{
+    <n-modal v-model:show="showModal" :mask-closable="false" :show-icon="false" preset="dialog"
+      transform-origin="center" :title="formValue.id > 0 ? '编辑课程章节 #' + formValue.id : '添加课程章节'" :style="{
         width: dialogWidth,
-      }"
-    >
+      }">
       <n-scrollbar style="max-height: 87vh" class="pr-5">
         <n-spin :show="loading" description="请稍候...">
-          <n-form
-            ref="formRef"
-            :model="formValue"
-            :label-placement="settingStore.isMobile ? 'top' : 'left'"
-            :label-width="100"
-            class="py-4"
-          >
+          <n-form ref="formRef" :model="formValue" :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100" class="py-4">
             <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
               <n-gi span="1">
                 <n-form-item label="课程id" path="lessonId">
@@ -28,7 +16,16 @@
               </n-gi>
               <n-gi span="1">
                 <n-form-item label="视频url" path="videoUrl">
-                  <n-input placeholder="请输入视频url" v-model:value="formValue.videoUrl" />
+                  <n-upload
+                    :action="`${uploadUrl}${urlPrefix}/upload/video`"
+                    :max="1"
+                    :show-file-list="false"
+                    :headers="uploadHeaders"
+                    @finish="handleVideoUpload"
+                    @before-upload="handleVideoUploadStart"
+                  >
+                    <n-button :loading="uploadingVideo">上传视频</n-button>
+                  </n-upload>
                 </n-form-item>
               </n-gi>
               <n-gi span="1">
@@ -70,79 +67,111 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  import { useDictStore } from '@/store/modules/dict';
-  import { Edit, View } from '@/api/lessonSection';
-  import { State, newState } from './model';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
-  import { useMessage } from 'naive-ui';
-  import { adaModalWidth } from '@/utils/hotgo';
+import { ref, computed, reactive } from 'vue';
+import { useDictStore } from '@/store/modules/dict';
+import { Edit, View } from '@/api/lessonSection';
+import { State, newState } from './model';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+import { useMessage } from 'naive-ui';
+import { adaModalWidth } from '@/utils/hotgo';
+import { useGlobSetting } from '@/hooks/setting';
+import { useUserStoreWidthOut } from '@/store/modules/user';
 
-  const emit = defineEmits(['reloadTable']);
-  const message = useMessage();
-  const settingStore = useProjectSettingStore();
-  const dict = useDictStore();
-  const loading = ref(false);
-  const showModal = ref(false);
-  const formValue = ref<State>(newState(null));
-  const formRef = ref<any>({});
-  const formBtnLoading = ref(false);
-  const dialogWidth = computed(() => {
-    return adaModalWidth(840);
+const globSetting = useGlobSetting();
+const urlPrefix = globSetting.urlPrefix || '';
+const { uploadUrl } = globSetting;
+
+const useUserStore = useUserStoreWidthOut();
+const uploadHeaders = reactive({
+    Authorization: useUserStore.token,
+    uploadType: 'default',
   });
 
-  // 提交表单
-  function confirmForm(e) {
-    e.preventDefault();
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        formBtnLoading.value = true;
-        Edit(formValue.value)
-          .then((_res) => {
-            message.success('操作成功');
-            closeForm();
-            emit('reloadTable');
-          })
-          .finally(() => {
-            formBtnLoading.value = false;
-          });
-      } else {
-        message.error('请填写完整信息');
-      }
-    });
-  }
+const emit = defineEmits(['reloadTable']);
+const message = useMessage();
+const settingStore = useProjectSettingStore();
+const dict = useDictStore();
+const loading = ref(false);
+const showModal = ref(false);
+const formValue = ref<State>(newState(null));
+const formRef = ref<any>({});
+const formBtnLoading = ref(false);
+const dialogWidth = computed(() => {
+  return adaModalWidth(840);
+});
+const uploadingVideo = ref(false);
 
-  // 关闭表单
-  function closeForm() {
-    showModal.value = false;
-    loading.value = false;
-  }
-
-  // 打开模态框
-  function openModal(state: State) {
-    showModal.value = true;
-
-    // 新增
-    if (!state || state.id < 1) {
-      formValue.value = newState(state);
-
-      return;
+// 提交表单
+function confirmForm(e) {
+  e.preventDefault();
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      formBtnLoading.value = true;
+      Edit(formValue.value)
+        .then((_res) => {
+          message.success('操作成功');
+          closeForm();
+          emit('reloadTable');
+        })
+        .finally(() => {
+          formBtnLoading.value = false;
+        });
+    } else {
+      message.error('请填写完整信息');
     }
+  });
+}
 
-    // 编辑
-    loading.value = true;
-    View({ id: state.id })
-      .then((res) => {
-        formValue.value = res;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
+// 关闭表单
+function closeForm() {
+  showModal.value = false;
+  loading.value = false;
+}
+
+// 打开模态框
+function openModal(state: State) {
+  showModal.value = true;
+
+  // 新增
+  if (!state || state.id < 1) {
+    formValue.value = newState(state);
+
+    return;
   }
 
-  defineExpose({
-    openModal,
-  });
+  // 编辑
+  loading.value = true;
+  View({ id: state.id })
+    .then((res) => {
+      formValue.value = res;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+// 上传完成回调
+function handleVideoUpload({ file, event }) {
+  uploadingVideo.value = false;
+  let res = event?.target?.response
+    ? JSON.parse(event.target.response)
+    : {};
+  if (res.code === 0 && res.data?.path) {
+    formValue.value.videoUrl = res.data.path;
+    message.success('视频上传成功');
+  } else {
+    message.error(res.message || '视频上传失败');
+  }
+}
+
+// 上传开始回调
+function handleVideoUploadStart() {
+  uploadingVideo.value = true;
+}
+
+defineExpose({
+  openModal,
+});
 </script>
 
 <style lang="less"></style>
\ No newline at end of file