diff --git a/src/api/media.ts b/src/api/media.ts
index 634bd13..59ed04e 100644
--- a/src/api/media.ts
+++ b/src/api/media.ts
@@ -3,8 +3,8 @@ import request, { IPage, IWorkspaceResponse } from '/@/api/http/request'
 const HTTP_PREFIX = '/media/api/v1'
 
 // Get Media Files
-export const getMediaFiles = async function (wid: string, pagination: IPage): Promise<IWorkspaceResponse<any>> {
-  const url = `${HTTP_PREFIX}/files/${wid}/files?page=${pagination.page}&page_size=${pagination.page_size}`
+export const getMediaFiles = async function (wid: string, pagination: IPage, pathId: string): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX}/files/${wid}/files?page=${pagination.page}&page_size=${pagination.page_size}&path_id=${pathId}`
   const result = await request.get(url)
   return result.data
 }
@@ -24,3 +24,10 @@ export const downloadMediaFile = async function (workspaceId: string, fileId: st
     return result.data
   }
 }
+
+// Get Media getFolder
+export const getFolder = async function (workspaceId: string, type: boolean): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX}/files/${workspaceId}/folder/${type}`
+  const result = await request.get(url)
+  return result.data
+}
diff --git a/src/assets/icons/cloudapi.png b/src/assets/icons/cloudapi.png
index c4e398b..0626bab 100644
Binary files a/src/assets/icons/cloudapi.png and b/src/assets/icons/cloudapi.png differ
diff --git a/src/assets/icons/dji_logo.png b/src/assets/icons/dji_logo.png
index c6d0e22..8bf5495 100644
Binary files a/src/assets/icons/dji_logo.png and b/src/assets/icons/dji_logo.png differ
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 0d1dedd..9e13a56 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -34,9 +34,11 @@ import { downloadMediaFile, getMediaFiles } from '/@/api/media'
 import { DownloadOutlined } from '@ant-design/icons-vue'
 import { message, Pagination } from 'ant-design-vue'
 import { load } from '@amap/amap-jsapi-loader'
+import EventBus from '/@/event-bus'
 
 const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
 const loading = ref(false)
+const pathId = ref('')
 
 const columns = [
   {
@@ -109,11 +111,16 @@ const mediaData = reactive({
 })
 
 onMounted(() => {
-  getFiles()
+  // 订阅消息
+  EventBus.on('getFolderFiles', (val) => {
+    pathId.value = val
+
+    getFiles()
+  })
 })
 
 function getFiles () {
-  getMediaFiles(workspaceId, body).then(res => {
+  getMediaFiles(workspaceId, body, pathId.value).then(res => {
     mediaData.data = res.data.list
     paginationProp.total = res.data.pagination.total
     paginationProp.current = res.data.pagination.page
diff --git a/src/event-bus/index.ts b/src/event-bus/index.ts
index fbe0933..1f56d53 100644
--- a/src/event-bus/index.ts
+++ b/src/event-bus/index.ts
@@ -6,6 +6,7 @@ type Events = {
   flightTaskWs: any // 机场任务消息
   droneControlWs: any // 飞行指令信息
   droneControlMqttInfo: any // drc 链路通知
+  getFolderFiles: any // 获取文件列表
 };
 
 const emitter: Emitter<Events> = mitt<Events>()
diff --git a/src/pages/page-pilot/pilot-home.vue b/src/pages/page-pilot/pilot-home.vue
index 0b86139..45aa79b 100644
--- a/src/pages/page-pilot/pilot-home.vue
+++ b/src/pages/page-pilot/pilot-home.vue
@@ -210,6 +210,7 @@ const modules = [{
 
 const store = useMyStore()
 
+// 处理websocket消息
 const messageHandler = async (payload: any) => {
   if (!payload) {
     return
diff --git a/src/pages/page-web/projects/media.vue b/src/pages/page-web/projects/media.vue
index 6995bcd..e02e07b 100644
--- a/src/pages/page-web/projects/media.vue
+++ b/src/pages/page-web/projects/media.vue
@@ -1,10 +1,112 @@
 <template>
-  <div class="project-media-wrapper">
+  <div class="folder-herder">
+    <a-radio-group @change="changeType"  v-model:value="typeValue" button-style="solid">
+      <a-radio-button class="radio-button" :value="true"
+      >机场文件</a-radio-button
+      >
+      <a-radio-button class="radio-button" :value="false"
+      >普通文件</a-radio-button
+      >
+    </a-radio-group>
+  </div>
+  <div class="height-100 project-media-wrapper">
+    <div
+        class="folder-container"
+        v-for="(item, key) in folderData.data"
+        :key="key"
+        @click="selectFolder(key)"
+    >
+      <a-tag color="blue" v-if="folderData.id === item.id">now</a-tag>
+      <div>
+        <div class="title">{{ item.name }}</div>
+        <div style="font-size: 13px; margin-left: 12px">
+          时间-{{ item.time }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ELocalStorageKey } from '/@/types/enums'
+import { getFolder } from '/@/api/media'
+import EventBus from '/@/event-bus'
+
+const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+const typeValue = ref<boolean>(false)
+
+const folderData = reactive<any>({
+  data: [],
+  id: null,
+})
+
+onMounted(() => {
+  getFolderArr()
+})
+
+async function getFolderArr () {
+  folderData.data = []
+  const result = await getFolder(workspaceId, typeValue.value)
+  folderData.id = result.data[0].id
+  folderData.data = result.data
+  loadFiles()
+}
+
+function changeType (val: any) {
+  typeValue.value = val.target.value
+  getFolderArr()
+}
+
+function selectFolder (index: number) {
+  if (folderData.id !== folderData.data[index].id) {
+    folderData.id = folderData.data[index].id
+    loadFiles()
+  }
+}
+
+// 发布到 getFolderFiles 事件，数据为: id
+function loadFiles () {
+  EventBus.emit('getFolderFiles', folderData.id)
+}
+
 </script>
 
 <style lang="scss" scoped>
+.folder-herder {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  border-bottom: 0.2px solid rgb(183, 183, 183);
+
+  .radio-button {
+    width: 120px;
+    text-align: center;
+  }
+}
+
+.project-media-wrapper {
+  overflow-y: scroll;
+  margin-bottom: 20px;
+
+  .folder-container {
+    display: flex;
+    padding: 8px 15px;
+    justify-content: start;
+    align-items: center;
+    border-bottom: 0.2px solid rgb(183, 183, 183);
+    .title {
+      font-size: 15px;
+      margin-left: 10px;
+      width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
 </style>
diff --git a/src/pages/page-web/projects/workspace.vue b/src/pages/page-web/projects/workspace.vue
index 752f861..08f5e94 100644
--- a/src/pages/page-web/projects/workspace.vue
+++ b/src/pages/page-web/projects/workspace.vue
@@ -33,6 +33,7 @@ import EventBus from '/@/event-bus'
 const root = getRoot()
 const store = useMyStore()
 
+// 处理飞行器返回消息
 const messageHandler = async (payload: any) => {
   if (!payload) {
     return
diff --git a/yarn.lock b/yarn.lock
index 5d27955..309d798 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1500,9 +1500,9 @@
     "is-date-object" "^1.0.1"
     "is-symbol" "^1.0.2"
 
-"esbuild-darwin-64@0.13.15":
-  "integrity" "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ=="
-  "resolved" "https://registry.npmmirror.com/esbuild-darwin-64/download/esbuild-darwin-64-0.13.15.tgz"
+"esbuild-windows-64@0.13.15":
+  "integrity" "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ=="
+  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/download/esbuild-windows-64-0.13.15.tgz"
   "version" "0.13.15"
 
 "esbuild@^0.13.12":
@@ -1958,11 +1958,6 @@
   "resolved" "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.3.2":
-  "integrity" "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro="
-  "resolved" "https://registry.npmmirror.com/fsevents/download/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "fstream@^1.0.12":
   "integrity" "sha1-Touo7i1Ivk99DeUFRVVI6uWTIEU="
   "resolved" "https://registry.npm.taobao.org/fstream/download/fstream-1.0.12.tgz"