diff --git a/src/App.vue b/src/App.vue
index e94754b..06f5dbe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@ import { useFileTree } from "./composables/useFileTree";
 import { useConfig } from "./composables/useConfig";
 import { useTheme } from "./composables/useTheme";
 import { ConfigProvider } from 'ant-design-vue';
-import { SettingOutlined } from '@ant-design/icons-vue';
+import { SettingOutlined, DeleteOutlined, FolderOpenOutlined } from '@ant-design/icons-vue';
 
 const { setRootPath } = useFileTree();
 const { loadConfig } = useConfig();
@@ -222,6 +222,14 @@ const handleSelectDirectory = async () => {
     }
 };
 
+const removeHistoryDir = async (path) => {
+  const index = historyDirs.value.indexOf(path);
+  if (index > -1) {
+    historyDirs.value.splice(index, 1);
+    await saveGlobalConfig();
+  }
+};
+
 const handleHistorySelect = (path) => {
   openDirectory(path);
   showHistory.value = false;
@@ -313,12 +321,25 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
       </a-modal>
 
       <!-- 历史记录弹窗 -->
-      <a-modal v-model:open="showHistory" title="选择历史目录" :footer="null">
-        <a-list :data-source="historyDirs">
+      <a-modal v-model:open="showHistory" title="选择历史目录" :footer="null" width="600px">
+        <div v-if="historyDirs.length === 0" class="empty-history">
+          暂无历史记录
+        </div>
+        <a-list v-else :data-source="historyDirs" size="small" :split="false">
           <template #renderItem="{ item }">
-            <a-list-item>
-              <a-button type="link" @click="handleHistorySelect(item)">
-                {{ item }}
+            <a-list-item class="history-item">
+              <div class="history-content" @click="handleHistorySelect(item)">
+                <FolderOpenOutlined class="history-icon" />
+                <span class="history-text" :title="item">{{ item }}</span>
+              </div>
+              <a-button 
+                type="text" 
+                danger 
+                size="small"
+                class="delete-btn"
+                @click.stop="removeHistoryDir(item)"
+              >
+                <DeleteOutlined />
               </a-button>
             </a-list-item>
           </template>
@@ -419,4 +440,55 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
   border-color: var(--text-color);
   box-shadow: 0 0 0 2px var(--primary-color-bg);
 }
+
+.history-item {
+  padding: 4px 8px !important;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.history-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.history-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.history-icon {
+  margin-right: 8px;
+  color: var(--primary-color, #1890ff);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.history-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color);
+}
+
+.delete-btn {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.history-item:hover .delete-btn {
+  opacity: 1;
+}
+
+.empty-history {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+}
 </style>