上传文件

src/components/czr-ui/CzrButton.vue

@@ -22,14 +22,20 @@
       </div>
     </template>
     <template v-else-if="type == 'primary'">
-      <div class="czr-button __hover primary">{{title}}</div>
+      <div class="czr-button __hover primary">
+        <SvgIcon v-if="icon" :name="icon" color="#ffffff" :rotate="rotate" :size="12"/>
+        {{title}}
+      </div>
     </template>
     <template v-else-if="type == 'normal'">
-      <div class="czr-button __hover normal">{{title}}</div>
+      <div class="czr-button __hover normal">
+        <SvgIcon v-if="icon" :name="icon" color="var(--czr-main-color)" :rotate="rotate" :size="12"/>
+        {{title}}
+      </div>
     </template>
     <template v-else>
       <div class="czr-button __hover">
-        <SvgIcon v-if="icon" :name="icon"/>{{ title }}
+        <SvgIcon v-if="icon" :name="icon" :rotate="rotate"/>{{ title }}
       </div>
     </template>
   </div>
@@ -42,7 +48,9 @@ defineOptions({
 const props = defineProps({
   type: {},
   title: {},
-  icon: {}
+  icon: {},
+  rotate: {default: 0},
+  size: {default: 12},
 })
 </script>
 

src/style/czr.scss

@@ -3,6 +3,8 @@
   --czr-main-color-rgb: 47, 130, 255;
   --czr-error-color: rgba(255, 84, 84, 1);
   --czr-error-color-rgb: 255, 84, 84;
+  --czr-warning-color: rgba(255, 153, 2, 1);
+  --czr-warning-color-rgb: 255, 153, 2;
   --czr-success-color: rgba(28, 199, 141, 1);
   --czr-success-color-rgb: 28, 199, 141;
   --czr-default-color: rgba(246, 248, 252, 1);

src/views/manage/knowledge/upload/index.vue

@@ -1,11 +1,8 @@
  <template>
   <div class="w-full h-full flex flex-col">
-    <div class="__hover text-[var(--czr-main-color)] text-[0.88rem] flex items-center ml-[var(--czr-gap)]" @click="$router.push({
-      name: '78430247-a531-4c8f-8a08-c88e93a836e2',
-      params: {
-        id: state.ID
-      }
-    })"><SvgIcon name="czr_arrow" :rotate="180" size="12" :active="true"/>文档列表</div>
+    <div class="__hover text-[var(--czr-main-color)] text-[0.88rem] flex items-center ml-[var(--czr-gap)]" @click="toBack">
+      <SvgIcon name="czr_arrow" :rotate="180" size="12" :active="true"/>文档列表
+    </div>
     <div class="bm-main-box mt-[1.25rem]">
       <div class="flex gap-[1rem]">
         <CzrButton :type="state.uploadType == UploadTypeEnum.Text ? 'primary' : 'normal'" title="文本文件" @click="state.uploadType = UploadTypeEnum.Text, state.step = 1, state.uploadFiles.clear()"/>
@@ -90,8 +87,18 @@
       </template>
       <template v-if="state.uploadType === UploadTypeEnum.Text && state.step === 2">
         <div class="flex-1 flex gap-[1rem] overflow-hidden">
-          <div class="flex-1">
+          <div class="flex-1 flex flex-col overflow-hidden">
             <div class="__czr-title_1">分段设置</div>
+            <div class="flex-1 flex flex-col rounded-[0.25rem] border border-[var(--czr-main-color)] p-[1rem] overflow-hidden">
+              <div class="flex-1"></div>
+              <div>
+                <CzrButton type="normal" title="预览块"/>
+              </div>
+            </div>
+            <div class="mt-[1.5rem] flex justify-end gap-[var(--czr-gap)]">
+              <CzrButton type="normal" title="返回上一步" icon="czr_arrow" :rotate="180" @click="state.step = 1"/>
+              <CzrButton type="primary" title="保存并处理" @click="state.step = 3"/>
+            </div>
           </div>
           <div class="flex-1 flex flex-col overflow-hidden">
             <div class="__czr-title_1">预览</div>
@@ -137,17 +144,85 @@
           </div>
         </div>
       </template>
+      <template v-if="(state.uploadType === UploadTypeEnum.Text && state.step === 3) || (state.uploadType === UploadTypeEnum.QA && state.step === 2)">
+        <div class="flex-1 flex flex-col gap-[1rem] overflow-y-auto">
+          <div class="__czr-title_1">文件嵌入中</div>
+          <div class="flex flex-col gap-[var(--czr-gap)]">
+            <template v-for="[key, value] in state.taskFiles.waiting">
+              <div class="w-full h-[4.5rem] rounded-[0.25rem] flex items-center gap-[0.3rem] px-[1rem]" :style="`border: var(--czr-border); border-color: ${value.error ? 'var(--czr-error-color)' : ''}`">
+                <img class="w-[3rem] h-[3rem]" src="@/assets/images/file-word.png"/>
+                <div class="flex-1 flex flex-col gap-[0.5rem]">
+                  <div class="flex items-center gap-[0.5rem] text-[#303133] text-[0.88rem]" :class="{'text-[var(--czr-error-color)]': value.error}">
+                    <div class="font-bold">
+                      {{value.name}}
+                    </div>
+                    <template v-if="value.error">
+                      <el-tooltip :content="value.error" placement="top">
+                        <SvgIcon name="czr_tip" color="var(--czr-warning-color)"/>
+                      </el-tooltip>
+                      <div class="ml-auto flex items-center gap-[1rem] text-[#6F7889] text-[0.75rem]">
+                        <div class="__hover flex items-center gap-[0.25rem]">
+                          <SvgIcon name="refresh" size="14"/>重传
+                        </div>
+                        <div class="__hover flex items-center gap-[0.25rem]">
+                          <SvgIcon name="czr_del" size="14"/>删除
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                  <template v-if="!value.error">
+                    <div class="flex items-center gap-[0.25rem] text-[#909399] text-[0.75rem]">
+                      <div>{{value.date}}</div>
+                      <div>{{(value.size / 1024 / 1024).toFixed(2)}}MB</div>
+                      <div class="ml-auto">{{value.process}}%（剩余时间{{comTime(value.timestamp, true)}}）</div>
+                    </div>
+                    <div class="relative w-full h-[0.25rem] rounded-[0.25rem]" :style="{backgroundColor: `rgba(var(--czr-main-color-rgb), 0.3)`}">
+                      <div class="absolute h-[0.25rem] rounded-[0.25rem]" :style="{backgroundColor: `rgba(var(--czr-main-color-rgb), 1)`, width: `${value.process}%`}"/>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="__czr-title_1">文件嵌入完成</div>
+          <div class="flex flex-col gap-[var(--czr-gap)]">
+            <template v-for="[key, value] in state.taskFiles.success">
+              <div class="w-full h-[4.5rem] rounded-[0.25rem] flex items-center gap-[0.3rem] px-[1rem]" :style="`border: var(--czr-border);`">
+                <img class="w-[3rem] h-[3rem]" src="@/assets/images/file-word.png"/>
+                <div class="flex-1 flex flex-col gap-[0.5rem]">
+                  <div class="flex items-center gap-[0.5rem] text-[#303133] text-[0.88rem]">
+                    <div class="font-bold">
+                      {{value.name}}
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-[0.25rem] text-[#909399] text-[0.75rem]">
+                    <div>{{value.date}}</div>
+                    <div>{{(value.size / 1024 / 1024).toFixed(2)}}MB</div>
+                  </div>
+                </div>
+                <div class="text-[#6F7889] text-[0.75rem] flex items-center gap-[var(--czr-gap)]">
+                  处理完成<SvgIcon name="success" color="var(--czr-success-color)"/>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div class="mt-[1.5rem] flex justify-end">
+          <CzrButton type="primary" title="确认" @click="toBack"/>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, inject, onMounted, reactive, ref} from "vue";
+import {getCurrentInstance, inject, onMounted, reactive, ref, watch} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {ElMessage} from "element-plus";
 import {axUpload} from "@/api/modules/global/upload";
 import {v4} from "uuid";
 import {useDialogStore} from "@/stores";
+import {comTime} from "@/utils/czr-util";
 
 const DialogStore = useDialogStore()
 const route = useRoute();
@@ -162,7 +237,7 @@ enum UploadTypeEnum {
 const state: any = reactive({
   ID: route.params.id,
   uploadType: UploadTypeEnum.Text,
-  step: 2,
+  step: 1,
   uploadFiles: new Map(),
   uploadFileList: [],
   previewFile: '',
@@ -177,9 +252,44 @@ const state: any = reactive({
       data: []
     },
   },
+  taskFiles: {
+    waiting: new Map([
+      [1, {
+        name: '高效办成一件事视频脚本20250411-调整.docx',
+        date: '2022-09-17',
+        size: 123123132,
+        process: 80,
+        timestamp: 1000 * 60 * 23,
+        error: ''
+      }],
+      [2, {
+        name: '高效办成一件事视频脚本20250411-调整.docx',
+        date: '2022-09-17',
+        size: 1231231321,
+        process: 100,
+        timestamp: 1000 * 60 * 17,
+        error: ''
+      }],
+      [22, {
+        name: '高效办成一件事视频脚本20250411-调整.docx',
+        date: '2022-09-17',
+        size: 1231231321,
+        process: 100,
+        timestamp: 1000 * 60 * 17,
+        error: '123123123123123'
+      }],
+    ]),
+    success: new Map([
+      [3, {
+        name: '高效办成一件事视频脚本20250411-调整.docx',
+        date: '2022-09-17',
+        size: 1231231321,
+      }]
+    ]),
+  }
 })
 const UploadConfig = {
-  limit: 2,
+  limit: 50,
   maxSize: 100,
 }
 const TextSteps = [
@@ -203,6 +313,14 @@ const initDetail = () => {
   }
 }
 
+const toBack = () => {
+  router.push({
+    name: '78430247-a531-4c8f-8a08-c88e93a836e2',
+    params: {
+      id: state.ID
+    }
+  })
+}
 const handleBeforeUpload = (file) => {
   const suffix = file.name.split('.').pop().toUpperCase()
   const msg = `文件${file.name}上传失败`
@@ -242,6 +360,7 @@ const handleHttpRequest = (options) => {
 }
 const onNextOne = () => {
   state.uploadFileList = Array.from(state.uploadFiles.values()).filter((v: any) => v.success)
+  // state.previewFile = state.uploadFileList[0]
   if (state.uploadFileList.length === 0) {
     DialogStore.confirm({
       title: '上传确认',
@@ -303,6 +422,14 @@ const onPage = (pageNum, pageSize) => {
   //   state.query.loading = false
   // })
 }
+watch(() => state.step, (n) => {
+  if ((n === 2 && state.uploadType === UploadTypeEnum.QA) || (n && state.uploadType === UploadTypeEnum.Text)) {
+    initTask()
+  }
+})
+const initTask = () => {
+
+}
 onMounted(() => {
   initDetail()
   onPage(1, 10)