diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..106de11
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>对象存储管理</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; padding: 20px; }
+    .container { max-width: 800px; margin: 0 auto; }
+    h1 { text-align: center; margin-bottom: 20px; color: #333; }
+    .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .card h2 { margin-bottom: 15px; color: #444; font-size: 18px; }
+    .form-group { margin-bottom: 15px; }
+    label { display: block; margin-bottom: 5px; color: #666; }
+    input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
+    button { background: #007aff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; }
+    button:hover { background: #005bb5; }
+    button:disabled { background: #ccc; cursor: not-allowed; }
+    .btn-secondary { background: #34c759; }
+    .btn-secondary:hover { background: #28a745; }
+    .btn-danger { background: #ff3b30; }
+    .btn-danger:hover { background: #dc3545; }
+    .row { display: flex; gap: 10px; }
+    .row input { flex: 1; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
+    th { color: #666; font-weight: 500; }
+    .file-key { font-family: monospace; font-size: 12px; color: #666; }
+    .actions { display: flex; gap: 8px; }
+    .actions a, .actions button { padding: 6px 12px; font-size: 12px; text-decoration: none; border-radius: 4px; }
+    .actions a { background: #007aff; color: white; }
+    .actions button.danger { background: #ff3b30; color: white; border: none; }
+    .api-key-box { background: #f0f0f0; padding: 15px; border-radius: 4px; word-break: break-all; font-family: monospace; }
+    .empty { text-align: center; color: #999; padding: 20px; }
+    .hidden { display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>对象存储管理</h1>
+    
+    <div class="card" id="setup-card">
+      <h2>初始化</h2>
+      <div class="form-group">
+        <label>名称</label>
+        <input type="text" id="setup-name" placeholder="输入名称" value="root">
+      </div>
+      <button onclick="setup()">创建首个 API Key</button>
+    </div>
+
+    <div class="card hidden" id="main-card">
+      <h2>当前 API Key</h2>
+      <div class="api-key-box" id="current-key"></div>
+      <div style="margin-top: 10px;">
+        <button class="btn-secondary" onclick="createKey()">创建新 Key</button>
+        <button class="btn-danger" onclick="switchKey()">切换 Key</button>
+      </div>
+    </div>
+
+    <div class="card hidden" id="upload-card">
+      <h2>上传文件</h2>
+      <div class="form-group">
+        <input type="file" id="file-input" multiple>
+      </div>
+      <button onclick="uploadFile()">上传</button>
+    </div>
+
+    <div class="card hidden" id="files-card">
+      <h2>文件列表</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>文件名</th>
+            <th>大小</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="files-tbody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    let apiKey = localStorage.getItem('myoss_api_key');
+    const API_BASE = '';
+
+    async function request(path, options = {}) {
+      const headers = { ...options.headers };
+      if (apiKey) headers['X-API-Key'] = apiKey;
+      const res = await fetch(API_BASE + path, { ...options, headers });
+      if (res.status === 401) {
+        alert('API Key 无效');
+        localStorage.removeItem('myoss_api_key');
+        apiKey = null;
+        location.reload();
+        return null;
+      }
+      return res.json();
+    }
+
+    async function setup() {
+      const name = document.getElementById('setup-name').value;
+      const res = await fetch(API_BASE + '/api/keys/bootstrap', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name })
+      });
+      const data = await res.json();
+      apiKey = data.key;
+      localStorage.setItem('myoss_api_key', apiKey);
+      location.reload();
+    }
+
+    async function createKey() {
+      const name = prompt('输入名称', 'new-key');
+      if (!name) return;
+      const data = await request('/api/keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name })
+      });
+      alert('新 Key: ' + data.key);
+      apiKey = data.key;
+      localStorage.setItem('myoss_api_key', apiKey);
+      location.reload();
+    }
+
+    function switchKey() {
+      const key = prompt('输入 API Key', apiKey);
+      if (key) {
+        apiKey = key;
+        localStorage.setItem('myoss_api_key', apiKey);
+        location.reload();
+      }
+    }
+
+    async function uploadFile() {
+      const input = document.getElementById('file-input');
+      const files = input.files;
+      if (!files.length) return alert('请选择文件');
+      
+      for (const file of files) {
+        const formData = new FormData();
+        formData.append('file', file);
+        await request('/api/files', {
+          method: 'POST',
+          body: formData
+        });
+      }
+      alert('上传成功');
+      loadFiles();
+    }
+
+    async function loadFiles() {
+      const files = await request('/api/files');
+      const tbody = document.getElementById('files-tbody');
+      if (!files || !files.length) {
+        tbody.innerHTML = '<tr><td colspan="3" class="empty">暂无文件</td></tr>';
+        return;
+      }
+      tbody.innerHTML = files.map(f => `
+        <tr>
+          <td>
+            <div>${f.filename}</div>
+            <div class="file-key">${f.fileKey}</div>
+          </td>
+          <td>${formatSize(f.size)}</td>
+          <td class="actions">
+            <a href="${API_BASE}/api/files/${f.fileKey}/download" target="_blank">下载</a>
+            <button class="danger" onclick="deleteFile('${f.fileKey}')">删除</button>
+          </td>
+        </tr>
+      `).join('');
+    }
+
+    async function deleteFile(fileKey) {
+      if (!confirm('确定删除?')) return;
+      await request(`/api/files/${fileKey}`, { method: 'DELETE' });
+      loadFiles();
+    }
+
+    function formatSize(bytes) {
+      if (bytes < 1024) return bytes + ' B';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+      if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+      return (bytes / 1024 / 1024 / 1024).toFixed(1) + ' GB';
+    }
+
+    async function init() {
+      if (!apiKey) {
+        document.getElementById('setup-card').classList.remove('hidden');
+        return;
+      }
+      
+      const res = await fetch(API_BASE + '/api/files', { 
+        headers: { 'X-API-Key': apiKey } 
+      });
+      
+      document.getElementById('main-card').classList.remove('hidden');
+      document.getElementById('upload-card').classList.remove('hidden');
+      document.getElementById('files-card').classList.remove('hidden');
+      document.getElementById('current-key').textContent = apiKey;
+      
+      loadFiles();
+    }
+
+    init();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f4428aa..8398abb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,8 @@ const path = require('path');
 const app = express();
 app.use(express.json());
 
+app.use(express.static('public'));
+
 const routes = require('./routes');
 
 app.use('/api', routes);
