diff --git a/README.md b/README.md
index 82d3e630922b606c072bf12017c812b827c37aa0..3a1061b7ba8db152133da1f52683a948b24cedc8 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,13 @@ go-admin-web 是 go-admin-server 项目的前端部分，采用 Vue3 + ElementPl
 - GitHub: https://github.com/MarchGe/go-admin-web
 - Gitee: https://gitee.com/go-admin_1/go-admin-web
 
+#### 在线体验
+- https://go-admin.dy-technology.com
+  ```text
+  账号：root@example.com
+  密码：123456
+  ```
+  
 #### 安装教程
 1. 修改src/config-dev.js
    ```javascript
@@ -70,6 +77,12 @@ server {
         proxy_pass http://go-admin-server;
         rewrite ^\/bg-(.*)$ /$1 break;
     }
+    location /bg-admin/devops/explorer/upload {
+        client_max_body_size 1g;
+        client_body_buffer_size 2m;
+        proxy_pass http://go-admin-server;
+        rewrite ^\/bg-(.*)$ /$1 break;
+    }
 }
 ```
 5. 启动nginx服务即可。
\ No newline at end of file
diff --git a/src/assets/alibaba_icons/iconfont.css b/src/assets/alibaba_icons/iconfont.css
index f181128dc7616b779684b00a2bdda45164b1f443..acf7f4ac92c0d369d07503f51d02b09fde1b8db9 100644
--- a/src/assets/alibaba_icons/iconfont.css
+++ b/src/assets/alibaba_icons/iconfont.css
@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4456016 */
-  src: url('iconfont.woff2?t=1712210434520') format('woff2');
+  src: url('iconfont.woff2?t=1716392144388') format('woff2');
 }
 
 .iconfont {
@@ -11,6 +11,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-arrow-right:before {
+  content: "\e622";
+}
+
+.icon-arrow-left:before {
+  content: "\eac4";
+}
+
+.icon-ex-file:before {
+  content: "\eac3";
+}
+
+.icon-ex-dir:before {
+  content: "\e676";
+}
+
 .icon-fenxiang1:before {
   content: "\e606";
 }
diff --git a/src/assets/alibaba_icons/iconfont.woff2 b/src/assets/alibaba_icons/iconfont.woff2
index 615fc5ff648797b17ef34631d33638a43d21e209..f11e19d15dc6ac3907929a1b728f8dcf916da188 100644
Binary files a/src/assets/alibaba_icons/iconfont.woff2 and b/src/assets/alibaba_icons/iconfont.woff2 differ
diff --git a/src/assets/css/devops/explorer.css b/src/assets/css/devops/explorer.css
new file mode 100644
index 0000000000000000000000000000000000000000..3671e477dfa9ca4391548c35872707a8014a85d9
--- /dev/null
+++ b/src/assets/css/devops/explorer.css
@@ -0,0 +1,85 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+.head {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 10px;
+    border-bottom: 1px solid #cccccc;
+}
+.head .arrow-icon {
+    margin: 0 6px;
+}
+.head .arrow {
+    font-size: 20px;
+    cursor: pointer;
+    color: #333333;
+}
+.head .arrow.disable {
+    color: #a8a8a8;
+}
+.head .path {
+    margin-left: 10px;
+    font-size: 16px;
+    color: #a8a8a8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.head .refresh {
+    margin: 0 15px;
+    cursor: pointer;
+}
+.head .upload_btn {
+    margin-right: 20px;
+}
+.list {
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+.item_v {
+    width: 100px;
+    height: 100px;
+    margin: 5px;
+}
+.item_v .item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.item .name {
+    width: 100%;
+    height: 34px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
+    text-align: center;
+}
+
+.dir {
+    font-size: 60px;
+    color: #F5D471;
+}
+.file {
+    font-size: 50px;
+    color: #c8c8c8;
+}
+
+.empty-dir {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #c8c8c8;
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 0f1c3b72ac5c119b71c1a24c9b203db6566cdc3f..9778c5062b8c6d8ab2a8db224d319c5de59d008d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -13,6 +13,7 @@ import OpLog from "./views/system/log/op/index.vue"
 import ExceptionLog from "./views/system/log/exception/index.vue"
 // 运维工具
 import Xterm from "./views/devops/xterm/index.vue"
+import Explorer from "./views/devops/explorer/index.vue"
 import Performance from "./views/devops/monitor/performance/index.vue"
 import PerformanceDetail from "./views/devops/monitor/performance/detail.vue"
 import Host from "./views/devops/host/index.vue"
@@ -37,6 +38,7 @@ const router = [
             {path: "/sys/log/exception", component: ExceptionLog},
             // 运维工具
             {path: "/devops/terminal", component: Xterm},
+            {path: "/devops/explorer", component: Explorer},
             {path: "/devops/monitor/performance", component: Performance},
             {path: "/devops/monitor/performance/detail", component: PerformanceDetail},
             {path: "/devops/host", component: Host},
diff --git a/src/settings.js b/src/settings.js
index 6d7b6ef337c62c03262a29e27778a2b4ee20bf81..5e3c25a8ddc1faa9fde497531a51aa2bd665be8f 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -116,6 +116,11 @@ const serverPaths = {
     ssePush: serverContextPath + "/sse/message-push",
     taskManifestLog: taskId => serverContextPath + "/sse/task/" + taskId + "/manifest-log",
     taskHostLog: taskId => serverContextPath + "/sse/task/" + taskId + "/host-log",
+    // explorer
+    explorerEntries: serverContextPath + "/devops/explorer/entries",
+    explorerDelete: serverContextPath + "/devops/explorer/entry",
+    explorerUpload: serverContextPath + "/devops/explorer/upload",
+    explorerDownload: serverContextPath + "/devops/explorer/download",
 }
 export {
     serverPaths,
diff --git a/src/views/devops/explorer/index.vue b/src/views/devops/explorer/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c72460b1550524dfa25e656ccbcf4e70b56c0303
--- /dev/null
+++ b/src/views/devops/explorer/index.vue
@@ -0,0 +1,273 @@
+<template>
+  <div id="container" class="container">
+    <div class="head">
+      <el-icon class="arrow-icon" size="24" @click="goBack" style="margin-left: 10px;"><i class="iconfont icon-arrow-left arrow" :class="x.pathStack.length === 0 ? 'disable': ''"></i></el-icon>
+      <span class="path">{{x.crumbs}}</span>
+      <span style="flex: auto;"></span>
+      <div class="refresh" @click="refresh">
+        <el-icon :class="x.isRefreshing ? 'is-loading' : ''" color="#8a8a8a" size="18">
+          <Refresh/>
+        </el-icon>
+      </div>
+      <el-button class="upload_btn" type="primary" size="small" @click="uploadDialog" :disabled="!hasPermission('explorer:upload')">上传</el-button>
+    </div>
+    <div class="list" v-if="x.entries.length > 0">
+      <div class="item_v" v-for="item in x.entries" :key="item.name">
+        <div class="item" v-if="item.type === 'd'">
+          <el-dropdown trigger="contextmenu" @command="handleCommand">
+            <el-icon size="60" @dblclick="openDir(item.name)"><i class="iconfont icon-ex-dir dir"></i></el-icon>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :command="'OPEN:'+item.name">打开</el-dropdown-item>
+                <el-dropdown-item :command="'DELETE:'+item.name" :disabled="!hasPermission('explorer:delete')">删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <span :title="item.name" class="name">{{item.name}}</span>
+        </div>
+        <div class="item" v-else>
+          <el-dropdown trigger="contextmenu" @command="handleCommand">
+            <el-icon size="60"><i class="iconfont icon-ex-file file"></i></el-icon>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :command="'DELETE:'+item.name" :disabled="!hasPermission('explorer:delete')">删除</el-dropdown-item>
+                <el-dropdown-item :command="'DOWNLOAD:'+item.name" :disabled="!hasPermission('explorer:download')">下载</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <span :title="item.name" class="name">{{item.name}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="empty-dir" v-else>空目录</div>
+    <!--删除弹框-->
+    <el-dialog v-model="x.showDeleteDialog" title="操作提示" width="30%">
+      <span>删除后不可恢复，是否确定删除 ？</span>
+      <template #footer>
+        <el-button @click="x.showDeleteDialog = false">取消</el-button>
+        <el-button type="primary" :loading="x.btnState.isLoading" @click="doDelete">确定</el-button>
+      </template>
+    </el-dialog>
+    <!--上传弹框-->
+    <el-dialog v-model="x.showUploadDialog" title="上传提示" width="30%">
+      <el-upload ref="upload" drag :action="x.uploadUrl" name="file" method="post" v-model:file-list="x.uploadFileList" :data="x.formUploadData" :auto-upload="true" :limit="1" :on-exceed="handleExceed" :before-upload="beforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError">
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          拖拽上传或 <em>点击上传</em>
+          <div style="margin-top: 10px; color: #e6a23c; font-size: 12px;">注意：上传重名文件会自动覆盖</div>
+        </div>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {onMounted, reactive, ref} from "vue"
+import {hasPermission} from "@/utils/permissions"
+import "@xterm/xterm/css/xterm.css"
+import {serverPaths, config} from "@/settings"
+import uiUtils from "@/utils/ui-utils"
+import httpUtils from "@/utils/http-utils"
+import {ElLoading} from "element-plus"
+
+const loadingConfig = {
+  background: "rgba(255,255,255,0.3)",
+  target: "#container"
+}
+const x = reactive({
+  btnState: uiUtils.buttonState(),
+  root: "/",
+  crumbs: "",
+  uploadUrl: serverPaths.explorerUpload,
+  formUploadData: {
+    dir: ""
+  },
+  uploadFileList: [],
+  pathStack: [],
+  searchItems: {
+    dir: "",
+    keyword: ""
+  },
+  entries: [],
+  showDeleteDialog: false,
+  showUploadDialog: false,
+  opFileName: "",
+  isRefreshing: false
+})
+const upload = ref()
+
+onMounted(() => {
+  let parentDir = getParentDir();
+  search(parentDir, () => {
+    showCrumbs()
+  })
+})
+
+function showCrumbs() {
+  x.crumbs = getParentDir().replaceAll("/", " / ")
+}
+
+function search(parentDir, successCallback) {
+  x.searchItems.dir = parentDir
+  let params = x.searchItems
+  const loadingInstance = ElLoading.service(loadingConfig)
+  httpUtils.get(serverPaths.explorerEntries, params, function (resList) {
+    if (resList) {
+      x.entries = resList
+    } else {
+      x.entries = []
+    }
+    loadingInstance.close()
+    if (typeof successCallback === "function") {
+      successCallback()
+    }
+  }, () => {
+    loadingInstance.close()
+  })
+}
+
+function refresh() {
+  if (x.isRefreshing) {
+    return
+  }
+  x.isRefreshing = true
+  let parentDir = getParentDir();
+  search(parentDir, () => {
+    showCrumbs()
+    x.isRefreshing = false
+    uiUtils.showToast("success", "刷新成功")
+  })
+}
+
+function handleCommand(command) {
+  let parts = command.split(":");
+  let op = parts[0]
+  x.opFileName = parts[1]
+  if (op === "OPEN") {
+    openDir(x.opFileName)
+    return
+  }
+  if (op === "DELETE") {
+    x.showDeleteDialog = true
+    return
+  }
+  if (op === "DOWNLOAD") {
+    downloadFile(x.opFileName)
+  }
+}
+
+function openDir(dirName) {
+  let parentDir = getParentDir();
+  if (parentDir === x.root) {
+    search(parentDir + dirName, () => {
+      x.pathStack.push({
+        index: x.pathStack.length + 1,
+        name: dirName
+      })
+      showCrumbs()
+    })
+  } else {
+    search(parentDir + "/" + dirName, () => {
+      x.pathStack.push({
+        index: x.pathStack.length + 1,
+        name: dirName
+      })
+      showCrumbs()
+    })
+  }
+}
+
+function downloadFile(fileName) {
+  let parentDir = getParentDir();
+  let filePath = ""
+  if (parentDir === x.root) {
+    filePath = parentDir + fileName
+  } else {
+    filePath = parentDir + "/" + fileName
+  }
+  const link = document.createElement("a")
+  link.href = serverPaths.explorerDownload + "?path=" + filePath
+  document.body.appendChild(link);
+  link.click()
+  document.body.removeChild(link);
+}
+
+function getParentDir() {
+  if (x.pathStack.length === 0) {
+    return x.root
+  }
+  let names = []
+  for (const item of x.pathStack) {
+    names.push(item.name)
+  }
+  return x.root + names.join("/")
+}
+
+function doDelete() {
+  let parentDir = getParentDir();
+  let filePath = ""
+  if (parentDir === x.root) {
+    filePath = parentDir + x.opFileName
+  } else {
+    filePath = parentDir + "/" + x.opFileName
+  }
+  let params = {
+    path: filePath
+  }
+  httpUtils.delete(serverPaths.explorerDelete, params, function () {
+    x.showDeleteDialog = false
+    uiUtils.showToast("success", "删除成功")
+    search(parentDir)
+  })
+}
+
+function goBack() {
+  if (x.pathStack.length > 0) {
+    let parentDir = getParentDir();
+    let backDir = parentDir.substring(0, parentDir.lastIndexOf("/"))
+    if (backDir + "/" === x.root) {
+      backDir = x.root
+    }
+    search(backDir, () => {
+      x.pathStack.pop()
+      showCrumbs()
+    })
+  }
+}
+
+function uploadDialog() {
+  if (upload.value) {
+    upload.value.clearFiles()
+  }
+  x.showUploadDialog = true
+}
+
+function beforeUpload () {
+  x.formUploadData.dir = getParentDir()
+  return true
+}
+
+function handleExceed(files) {
+  upload.value.clearFiles()
+  upload.value.handleStart(files[0])
+  upload.value.submit()
+}
+
+function handleUploadSuccess(res) {
+  if (res.code === 200) {
+    x.showUploadDialog = false
+    uiUtils.showToast("success", "上传成功")
+    search(getParentDir())
+  } else {
+    uiUtils.showToast("error", res.message)
+  }
+}
+
+function handleUploadError(err) {
+  console.error(err)
+  uiUtils.showToast("error", err.toString())
+}
+
+</script>
+<style scoped src="../../../assets/css/devops/explorer.css">
+
+</style>
\ No newline at end of file