diff --git a/Merge/front/src/style/Admin.css b/Merge/front/src/style/Admin.css
new file mode 100644
index 0000000..4a5bcb7
--- /dev/null
+++ b/Merge/front/src/style/Admin.css
@@ -0,0 +1,389 @@
+@import "~antd/dist/antd.css";
+
+/* 整体容器背景，弱化底层 */
+.admin-container {
+  background-color: #f5f6f8;
+}
+
+.admin-container {
+  padding: 24px;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* 页眉分层：白底 + 圆角 + 阴影 */
+.page-header {
+  background: #fff;
+  padding: 12px 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.admin-title {
+  font-size: 24px;
+  color: #e61515;
+  margin-bottom: 16px;
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.admin-table th,
+.admin-table td {
+  border: 1px solid #f0f0f0;
+  padding: 12px 16px;
+  text-align: left;
+}
+
+.admin-table th {
+  background-color: #fafafa;
+  color: #333;
+  font-weight: 500;
+}
+
+.status {
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.status.pending {
+  color: #f29900;
+}
+
+.status.approved {
+  color: #28a745;
+}
+
+.status.banned {
+  color: #d73a49;
+}
+
+.btn {
+  padding: 6px 12px;
+  margin-right: 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-approve {
+  background-color: #e61515;
+  color: #fff;
+}
+
+.btn-ban {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+/* 1. 瀑布流容器 */
+.admin-grid {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  margin-top: 16px;
+}
+
+/* 2. 卡片 */
+.admin-card {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  overflow: hidden;
+  transition: transform 0.2s;
+}
+.admin-card:hover {
+  transform: translateY(-4px);
+}
+
+/* 3. 头部：用户名 + 状态 */
+.card-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .username {
+  font-weight: 500;
+  color: #333;
+}
+.card-header .status {
+  font-weight: 500;
+  text-transform: capitalize;
+}
+.card-header .status.pending { color: #f29900; }
+.card-header .status.approved { color: #28a745; }
+.card-header .status.banned   { color: #d73a49; }
+
+/* 4. 操作按钮区 */
+.card-actions {
+  display: flex;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  gap: 8px;
+}
+.card-actions .btn {
+  flex: 1;
+}
+.card-actions .btn-approve { background-color: #e61515; color: #fff; }
+.card-actions .btn-ban     { background-color: #f5f5f5; color: #333; }
+
+/* —— Admin.js 专用布局 —— */
+.admin-layout {
+  display: flex;
+  gap: 16px;
+}
+
+/* 左侧列表区 */
+.list-panel {
+  width: 320px;
+  border-right: 1px solid #f0f0f0;
+  padding-right: 16px;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* 顶部标签切换 */
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 8px;
+  background: #fafafa;
+  padding: 0 16px;
+  border-radius: 8px 8px 0 0;
+}
+.tab-btn {
+  flex: 1;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 14px;
+}
+.tab-btn.active {
+  border-color: #e61515;
+  color: #e61515;
+}
+
+/* 帖子列表 */
+.post-list {
+  /* 可根据需要添加滚动或间距 */
+}
+.post-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+  border-bottom: 1px solid #f5f5f5;
+  background: #fff;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+.post-item:hover {
+  background-color: #fafafa;
+}
+.post-item.selected {
+  background: #e6f1ff;
+}
+.thumb {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+.info {
+  flex: 1;
+}
+.info .title {
+  font-weight: 500;
+  color: #333;
+}
+.info .meta {
+  font-size: 12px;
+  color: #888;
+}
+
+/* 状态标签 */
+.status-tag {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  text-transform: capitalize;
+}
+.status-tag.pending {
+  background-color: #fff4e5;
+  color: #f29900;
+}
+.status-tag.approved {
+  background-color: #e6f9f0;
+  color: #28a745;
+}
+.status-tag.rejected {
+  background-color: #fceaea;
+  color: #d73a49;
+}
+
+/* 右侧详情面板 */
+.detail-panel {
+  flex: 1;
+  padding-left: 16px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  padding: 24px;
+  margin-left: 8px;
+}
+
+/* 卡片阴影微调 */
+.admin-card {
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+}
+
+.detail-meta {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 8px;
+}
+.detail-content {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+.detail-actions {
+  margin-bottom: 16px;
+  background: #f9f9fb;
+  padding: 12px;
+  border-radius: 4px;
+}
+
+/* 操作按钮 */
+.btn-reject {
+  background-color: #f5f5f5;
+  color: #333;
+}
+.rejected-label {
+  color: #d73a49;
+  font-weight: 500;
+}
+
+/* 加载与空状态 */
+.loading,
+.empty-state {
+  text-align: center;
+  padding: 16px;
+  color: #888;
+}
+
+/* 合规性指引 */
+.compliance-guidelines {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 12px;
+  margin-top: 12px;
+  background: #f9f9fb;
+  padding: 12px;
+  border-radius: 4px;
+}
+.compliance-guidelines h4 {
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+.compliance-guidelines ul {
+  padding-left: 20px;
+}
+.compliance-guidelines li {
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+/* 管理员导航栏样式 */
+.admin-nav {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin: 1rem 0 2rem;
+  border-bottom: 2px solid #e5e5e5;
+}
+
+.admin-nav button {
+  background: none;
+  border: none;
+  padding: 0.5rem 0;
+  font-size: 1rem;
+  color: #555;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.3s ease;
+}
+
+.admin-nav button:hover {
+  color: #000;
+}
+
+.admin-nav button.active {
+  color: #0078d4;
+}
+
+.admin-nav button.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: #0078d4;
+  border-radius: 2px 2px 0 0;
+}
+
+/* 页面头部：标题 + 搜索框 */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  background: #fff;
+  padding: 12px 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.main-title {
+  font-size: 28px;
+  color: #e61515;
+  margin: 0;
+}
+.search-input {
+  width: 240px;
+  padding: 6px 12px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: border-color 0.2s;
+  background: #fafafa;
+}
+.search-input:focus {
+  outline: none;
+  border-color: #e61515;
+}
+
+/* 小红书品牌红 */
+:root {
+  --xiaohongshu-red: #e2204f;
+}
+
+/* Antd 表格表头背景小红书红，文字白色 */
+.ant-table-thead > tr > th {
+  background-color: var(--xiaohongshu-red) !important;
+  color: #fff;
+}
+
+/* 侧栏前两项文字变小红书红 */
+.ant-layout-sider .ant-menu-item:nth-child(1),
+.ant-layout-sider .ant-menu-item:nth-child(2) {
+  color: var(--xiaohongshu-red) !important;
+}
\ No newline at end of file
diff --git a/Merge/front/src/style/CreatePost.css b/Merge/front/src/style/CreatePost.css
new file mode 100644
index 0000000..4868132
--- /dev/null
+++ b/Merge/front/src/style/CreatePost.css
@@ -0,0 +1,98 @@
+/* src/style/CreatePost.css */
+.create-post {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+/* 预览区 */
+.preview-media {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.preview-item {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.preview-item img,
+.preview-item video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 表单项 */
+label {
+  display: block;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #333;
+}
+label input[type="text"],
+label textarea,
+label select {
+  width: 100%;
+  padding: 8px;
+  margin-top: 6px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+label textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+.char-count {
+  float: right;
+  font-size: 12px;
+  color: #999;
+}
+
+/* 发布状态 */
+.status-group {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.status-group label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+}
+
+/* 按钮组 */
+.btn-group {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+}
+.btn-primary {
+  background: #ff4757;
+  color: #fff;
+}
+.btn-secondary {
+  background: #f0f0f0;
+  color: #333;
+}
+
+/* 错误信息 */
+.error {
+  color: #d9534f;
+  margin-bottom: 12px;
+}
diff --git a/Merge/front/src/style/HomeFeed.css b/Merge/front/src/style/HomeFeed.css
new file mode 100644
index 0000000..f1bf75d
--- /dev/null
+++ b/Merge/front/src/style/HomeFeed.css
@@ -0,0 +1,116 @@
+/* --------- 容器 & Tabs --------- */
+.home-feed {
+  padding: 20px;
+}
+
+.feed-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.feed-tabs .tab {
+  padding: 6px 12px;
+  border: none;
+  background: #f0f0f0;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.feed-tabs .tab.active {
+  background: #ff4757;
+  color: #fff;
+}
+
+/* --------- 瀑布流布局 --------- */
+.feed-grid {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}
+
+/* --------- 卡片样式及最大高度限制 --------- */
+.feed-card {
+  display: flex;
+  flex-direction: column;
+  max-height: 360px;      /* 卡片最大高度 */
+  overflow: hidden;       /* 超出部分隐藏 */
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+  transition: transform 0.2s;
+}
+
+.feed-card:hover {
+  transform: translateY(-4px);
+}
+
+/* 封面图固定高度 */
+.card-img {
+  width: 100%;
+  height: 180px;         /* 固定图片区域高度 */
+  object-fit: cover;
+  flex-shrink: 0;        /* 不随容器收缩 */
+}
+
+/* 标题填充剩余空间 */
+.card-title {
+  font-size: 14px;
+  color: #333;
+  margin: 12px;
+  line-height: 1.4;
+  flex: 1;               /* 占满中间区域 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 最多两行 */
+  -webkit-box-orient: vertical;
+}
+
+/* --------- 底部：作者 + 点赞 --------- */
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+  flex-shrink: 0;        /* 保持在底部 */
+}
+
+/* 作者区域 */
+.card-author {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-author .avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.card-author .username {
+  font-size: 13px;
+  color: #333;
+}
+
+/* 点赞区域 */
+.card-likes {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-likes svg {
+  color: #ff4757;
+}
+
+.card-likes .likes-count {
+  font-size: 13px;
+  color: #666;
+}
\ No newline at end of file
diff --git a/Merge/front/src/style/SuperAdmin.css b/Merge/front/src/style/SuperAdmin.css
new file mode 100644
index 0000000..2295f8b
--- /dev/null
+++ b/Merge/front/src/style/SuperAdmin.css
@@ -0,0 +1,30 @@
+.super-admin-container {
+  display: flex;
+  height: 100vh;
+}
+
+.super-admin-sidebar {
+  width: 200px;
+  padding: 20px;
+  background: #f5f5f5;
+}
+
+.super-admin-sidebar ul {
+  list-style: none;
+  padding: 0;
+}
+
+.super-admin-sidebar li {
+  margin-bottom: 10px;
+}
+
+.super-admin-sidebar .active {
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.super-admin-content {
+  flex: 1;
+  padding: 20px;
+  background: #fff;
+}
\ No newline at end of file
diff --git a/Merge/front/src/style/UploadPage.css b/Merge/front/src/style/UploadPage.css
new file mode 100644
index 0000000..138b0c1
--- /dev/null
+++ b/Merge/front/src/style/UploadPage.css
@@ -0,0 +1,70 @@
+.upload-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 16px;
+  font-family: sans-serif;
+  color: #333;
+}
+
+.upload-tabs {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.upload-tab {
+  flex: 1;
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  cursor: pointer;
+  text-align: center;
+}
+
+.upload-tab.active {
+  background: #fff;
+  border-bottom: 2px solid #1890ff;
+  color: #1890ff;
+}
+
+.upload-area {
+  border: 2px dashed #ccc;
+  padding: 40px;
+  text-align: center;
+  transition: background 0.3s;
+}
+
+.upload-area.drag-over {
+  background: #eef6ff;
+}
+
+.upload-btn {
+  margin-top: 16px;
+  padding: 8px 24px;
+  border: none;
+  background: #1890ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.upload-btn:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+
+/* 如果有 upload-table 相关，用类似方式定义 */
+.upload-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 24px;
+}
+
+.upload-table th,
+.upload-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.upload-table th {
+  background: #f5f5f5;
+}
diff --git a/Merge/front/src/style/index.css b/Merge/front/src/style/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/Merge/front/src/style/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}