红绿统一

src/App.vue

@@ -3,7 +3,7 @@
     <el-config-provider :locale="zhCn">
       <router-view/>
     </el-config-provider>
-    <CzrConfirm :global="true"/>
+    <CzrConfirm/>
   </div>
 </template>
 

src/components/czr-ui/CzrButton.vue

@@ -18,7 +18,7 @@
     </template>
     <template v-else-if="type == 'del'">
       <div class="czr-button __hover del">
-        <SvgIcon :name="icon || 'czr_del'" color="#FF5454"/>{{title || '删除'}}
+        <SvgIcon :name="icon || 'czr_del'" color="var(--czr-error-color)"/>{{title || '删除'}}
       </div>
     </template>
     <template v-else-if="type == 'primary'">
@@ -65,9 +65,9 @@ const props = defineProps({
     margin-right: var(--czr-gap);
   }
   &.del {
-    background: rgba(255, 84, 84, 0.1);
-    border-color: rgba(255, 84, 84, 1);
-    color: #FF5454;
+    background: rgba(var(--czr-error-color-rgb), 0.1);
+    border-color: rgba(var(--czr-error-color-rgb), 1);
+    color: var(--czr-error-color);
   }
   &._add {
     color: #ffffff;
@@ -92,7 +92,7 @@ const props = defineProps({
   font-size: 14px;
   color: var(--czr-main-color);
   &._del {
-    color: #FF5454;
+    color: var(--czr-error-color);
   }
 }
 </style>

src/components/czr-ui/CzrConfirm.vue

@@ -6,7 +6,7 @@
     align-center
     :show-close="false"
     :append-to-body="true"
-    :width="width"
+    :width="DialogStore.confirmParam.width"
   >
     <div class="__czr-confirm">
       <div class="__czr-confirm-head">
@@ -30,25 +30,17 @@
 </template>
 
 <script setup lang="ts">
-import {useDialogStore} from "@/stores";
-
 defineOptions({
   name: 'CzrConfirm',
 });
+import {useDialogStore} from "@/stores";
 import {
   reactive,
 } from 'vue'
 
 const DialogStore = useDialogStore()
-const props = defineProps({
-  global: {default: false},
-  show: {type: Boolean},
-  title: {default: ''},
-  width: {default: '31.25rem'},
-})
-const state = reactive({
-})
-
+const props = defineProps({})
+const state = reactive({})
 const CDClose = () => {
   DialogStore.$patch((s: any) => {
     s.confirmParam.show = false

src/stores/modules/dialog.ts

@@ -4,6 +4,7 @@ export const useDialogStore = defineStore('dialog', {
   state: () => ({
     dialogShows: <any>[],
     confirmParam: <any>{
+      width: '31.25rem',
       show: false,
       title: '提示',
       content: '',
@@ -28,8 +29,9 @@ export const useDialogStore = defineStore('dialog', {
         newDom.style.display = 'unset'
       }
     },
-    confirm({title = '提示', content, onSubmit, onCancel = () => {}}) {
+    confirm({width = '31.25rem',title = '提示', content, onSubmit, onCancel = () => {}}) {
       this.confirmParam = {
+        width,
         show: true,
         title: title,
         content,

src/style/czr.scss

@@ -1,6 +1,10 @@
 :root {
   --czr-main-color: rgba(47, 130, 255, 1);
   --czr-main-color-rgb: 47, 130, 255;
+  --czr-error-color: rgba(255, 84, 84, 1);
+  --czr-error-color-rgb: 255, 84, 84;
+  --czr-success-color: rgba(28, 199, 141, 1);
+  --czr-success-color-rgb: 28, 199, 141;
   --czr-gap: 0.63rem;
   --czr-border-color: #10182814;
   --czr-border: 1px solid #10182814;

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

@@ -8,8 +8,8 @@
     })"><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"/>
-        <CzrButton :type="state.uploadType == UploadTypeEnum.QA ? 'primary' : 'normal'" title="QA问答" @click="state.uploadType = UploadTypeEnum.QA, state.step = 1"/>
+        <CzrButton :type="state.uploadType == UploadTypeEnum.Text ? 'primary' : 'normal'" title="文本文件" @click="state.uploadType = UploadTypeEnum.Text, state.step = 1, state.uploadFiles.clear()"/>
+        <CzrButton :type="state.uploadType == UploadTypeEnum.QA ? 'primary' : 'normal'" title="QA问答" @click="state.uploadType = UploadTypeEnum.QA, state.step = 1, state.uploadFiles.clear()"/>
       </div>
       <div class="mt-[1.75rem] flex justify-center items-center gap-[1rem]">
         <template v-for="(item, index) in (state.uploadType == UploadTypeEnum.Text ? TextSteps : QASteps)">
@@ -68,7 +68,7 @@
                   </template>
                   <template v-else>
                     <template v-if="file.success">
-                      <SvgIcon name="success" color="#1CC78D"/>
+                      <SvgIcon name="success" color="var(--czr-success-color)"/>
                     </template>
                     <template v-else>
                       {{file.process}}%
@@ -84,6 +84,12 @@
             </div>
           </template>
         </div>
+        <div class="mt-[1rem] w-full flex justify-end" v-if="state.uploadFiles.size > 0">
+          <CzrButton type="primary" title="下一步" @click="onNextOne"></CzrButton>
+        </div>
+      </template>
+      <template v-if="state.uploadType === UploadTypeEnum.Text && state.step === 2">
+        
       </template>
     </div>
   </div>
@@ -95,7 +101,9 @@ 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";
 
+const DialogStore = useDialogStore()
 const route = useRoute();
 const router = useRouter();
 const emits = defineEmits([])
@@ -110,6 +118,7 @@ const state: any = reactive({
   uploadType: UploadTypeEnum.Text,
   step: 1,
   uploadFiles: new Map(),
+  uploadFileList: []
 })
 const UploadConfig = {
   limit: 2,
@@ -171,6 +180,27 @@ const handleHttpRequest = (options) => {
     }
   })
 }
+const onNextOne = () => {
+  state.uploadFileList = Array.from(state.uploadFiles.values()).filter((v: any) => v.success)
+  if (state.uploadFileList.length === 0) {
+    DialogStore.confirm({
+      title: '上传确认',
+      content: '未发现上传成功的文件，请稍后！',
+      onSubmit: () => {}
+    })
+  } else if (state.uploadFileList.length !== state.uploadFiles.size) {
+    DialogStore.confirm({
+      width: '32rem',
+      title: '上传确认',
+      content: `仍有 <span style="color: var(--czr-error-color)">${state.uploadFiles.size - state.uploadFileList.length}</span> 个文件未上传成功，请确认是否跳转到下一步！`,
+      onSubmit: () => {
+        state.step = 2
+      }
+    })
+  } else {
+    state.step = 2
+  }
+}
 onMounted(() => {
   initDetail()
 })