WIP: add file manager ui

Author: Agility6

console/atest-ui/src/App.vue

@@ -4,6 +4,7 @@ import {
   Menu as IconMenu,
   Location,
   Share,
+  Files,
   ArrowDown
 } from '@element-plus/icons-vue'
 import { ref, watch } from 'vue'
@@ -12,6 +13,7 @@ import { Cache } from './views/cache'
 import TestingPanel from './views/TestingPanel.vue'
 import MockManager from './views/MockManager.vue'
 import StoreManager from './views/StoreManager.vue'
+import FileManager from './views/FileManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
 import { useI18n } from 'vue-i18n'
@@ -116,6 +118,10 @@ const handleChangeLan = (command: string) => {
           <el-icon><location /></el-icon>
           <template #title>{{ t('title.stores') }}</template>
         </el-menu-item>
+        <el-menu-item index="file">
+          <el-icon><files /></el-icon>
+          <template #title>{{ t('title.files') }}</template>
+        </el-menu-item>
       </el-menu>
     </el-aside>
 
@@ -137,6 +143,7 @@ const handleChangeLan = (command: string) => {
       <TestingPanel v-if="panelName === 'testing'" />
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />
+      <FileManager v-else-if="panelName === 'file'" />
       <SecretManager v-else-if="panelName === 'secret'" />
       <WelcomePage v-else />
     </el-main>

console/atest-ui/src/locales/en.json

@@ -42,6 +42,7 @@
         "welcome": "Welcome",
         "secrets": "Secrets",
         "stores": "Stores",
+        "files": "Files",
         "templateQuery": "Template Functions Query",
         "output": "Output"
     },

console/atest-ui/src/locales/zh.json

@@ -36,6 +36,7 @@
         "welcome": "欢迎",
         "secrets": "凭据",
         "stores": "存储",
+        "files": "文件",
         "parameter": "参数",
         "templateQuery": "模板函数查询",
         "output": "输出"

console/atest-ui/src/views/FileManager.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const fileList = ref([])
+
+const handleFileUpload = (file) => {
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    const fileData = {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      content: e.target.result
+    }
+    fileList.value.push(fileData)
+    console.log('fileList', fileList.value)
+    ElMessage({
+      message: '文件上传成功',
+      type: 'success'
+    })
+  }
+  reader.readAsDataURL(file.raw)
+  return false // 阻止默认上传行为
+}
+
+const deleteFile = (file) => {
+  const index = fileList.value.findIndex(item => item.name === file.name)
+  if (index !== -1) {
+    fileList.value.splice(index, 1)
+    ElMessage({
+      message: '文件删除成功',
+      type: 'success'
+    })
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <h2>文件管理器</h2>
+    
+    <el-upload
+      action="#"
+      :auto-upload="false"
+      :on-change="handleFileUpload"
+      :on-remove="deleteFile"
+      :file-list="fileList"
+      multiple
+    >
+      <el-button type="primary">点击上传</el-button>
+      <template #tip>
+        <div class="el-upload__tip">
+          可以上传任意类型的文件
+        </div>
+      </template>
+    </el-upload>
+    
+  </div>
+</template>

console/atest-ui/src/views/TestCase.vue

@@ -704,6 +704,7 @@ Magic.Keys(() => {
             <el-radio :label="3">raw</el-radio>
             <el-radio :label="4">x-www-form-urlencoded</el-radio>
             <el-radio :label="5">JSON</el-radio>
+            <el-radio :label="6">file</el-radio>
           </el-radio-group>
 
           <div style="flex-grow: 1;">