diff --git a/app/globals.css b/app/globals.css
index 13d40b8..68aecaf 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -25,3 +25,73 @@ body {
     text-wrap: balance;
   }
 }
+
+/* globals.css */
+
+:root {
+  --max-width: 800px;
+  --page-padding: 16px;
+  --heading-font-size: 28px;
+  --heading-font-weight: 700;
+  --heading-margin-bottom: 16px;
+  --card-border: 1px solid #eee;
+  --card-radius: 8px;
+  --card-padding: 16px;
+  --list-gap: 12px;
+}
+
+/* 全局 main 容器 */
+.main-container {
+  max-width: var(--max-width);
+  margin: 40px auto;
+  padding: var(--page-padding);
+}
+
+/* 标题 */
+.page-title {
+  font-size: var(--heading-font-size);
+  font-weight: var(--heading-font-weight);
+  margin-bottom: var(--heading-margin-bottom);
+}
+
+/* 列表 */
+.doc-list {
+  display: grid;
+  gap: var(--list-gap);
+  list-style: none;
+  padding: 0;
+}
+
+/* 卡片 */
+.doc-card {
+  border: var(--card-border);
+  border-radius: var(--card-radius);
+  padding: var(--card-padding);
+}
+
+/* 链接 */
+.doc-link {
+  font-weight: 600;
+  text-decoration: none;
+}
+.doc-link:hover {
+  text-decoration: underline;
+}
+
+input[type="text"] {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+button {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #eee;
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 95b21d3..fcc1922 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,12 +7,12 @@ export default function DocsIndex() {
   )
 
   return (
-    <main style={{ maxWidth: 800, margin: '40px auto', padding: 16 }}>
-      <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Docs</h1>
-      <ul style={{ display: 'grid', gap: 12 }}>
+    <main className="main-container">
+      <h1 className="page-title">Docs</h1>
+      <ul className="doc-list">
         {docs.map((d) => (
-          <li key={d._id} style={{ border: '1px solid #eee', borderRadius: 8, padding: 16 }}>
-            <Link href={`/docs/${d.slug}`} style={{ fontWeight: 600 }}>
+          <li key={d._id} className="doc-card">
+            <Link href={`/docs/${d.slug}`} className="doc-link">
               {d.title}
             </Link>
             {d.description && <p style={{ opacity: 0.8 }}>{d.description}</p>}
@@ -21,4 +21,4 @@ export default function DocsIndex() {
       </ul>
     </main>
   )
-}
+}
\ No newline at end of file
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
new file mode 100644
index 0000000..83c58a6
--- /dev/null
+++ b/app/upload/page.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function UploadPage() {
+  const [value, setValue] = useState('')
+
+  const handleClick = () => {
+    console.log('输入内容：', value)
+  }
+
+  return (
+    <main className="main-container">
+      <h1 className="page-title">Upload</h1>
+
+      <div className="doc-card" style={{ display: 'flex', gap: 8 }}>
+        <input
+          type="text"
+          placeholder="公众号url"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <button
+          onClick={handleClick}
+        >
+          上传
+        </button>
+      </div>
+    </main>
+  )
+}
\ No newline at end of file