diff --git a/src/assets/less/Header/header.less b/src/assets/less/Header/header.less
index 39f4adc..5f606c8 100644
--- a/src/assets/less/Header/header.less
+++ b/src/assets/less/Header/header.less
@@ -12,8 +12,9 @@
   justify-content: space-between;
   align-items: center;
   padding-right: 2rem;
-  background: rgba(10, 14, 20, 0.8);
-  backdrop-filter: blur(12px);
+  background: rgba(10, 12, 18, 0.74);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 
   @media (max-width: 768px) {
     padding: 0 1rem;
@@ -37,11 +38,9 @@
   .header-title {
     font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
     font-size: 28px;
-    font-weight: 600;
+    font-weight: 700;
     color: #fff;
-    transform: skew(-8deg);
-    -webkit-transform: skew(-12deg);
-    text-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
+    letter-spacing: 0.04em;
 
     @media (max-width: 768px) {
       font-size: 24px;
@@ -53,7 +52,7 @@
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 14px;
 
   @media (max-width: 768px) {
     gap: 12px;
@@ -64,60 +63,112 @@
 // 【一体化】余额 + 充值按钮（核心修改）
 // ==============================================
 .balance-recharge-combo {
-  height: 44px;
-  padding: 0 20px;
+  height: 52px;
+  padding: 0 10px 0 12px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   font-size: 15px;
   font-weight: 500;
   color: #fff;
-  background: rgba(255, 142, 83, 0.1);
-  border: 1px solid rgba(255, 142, 83, 0.4);
-  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(31, 35, 46, 0.95), rgba(18, 21, 30, 0.96));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
+
+  .balance-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .balance-icon-wrap {
+    width: 32px;
+    height: 32px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(139, 124, 255, 0.22), rgba(246, 184, 106, 0.18));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
 
-  // 图标
   .iconfont {
     font-size: 16px;
-    color: #ff8e53;
+    color: #f6b86a;
+  }
+
+  .balance-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .balance-label {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.48);
+    letter-spacing: 0.08em;
   }
 
-  // 余额数字
   .balance-text {
-    font-weight: 600;
-    color: #ff8e53;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1.1;
+  }
+
+  .combo-divider {
+    width: 1px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.08);
   }
 
-  // 充值文字
   .recharge-text {
-    height: 100%;
-    width: 60px;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-    border-radius: 10px;
+    min-width: 72px;
+    height: 36px;
+    padding: 0 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
     font-size: 13px;
-    color: #ff8e53;
+    color: #fff;
     font-weight: 600;
+    background: linear-gradient(135deg, #6e5cff, #8b7cff);
+    box-shadow: 0 10px 24px rgba(110, 92, 255, 0.3);
   }
 
   &:hover {
-    background: rgba(255, 142, 83, 0.15);
-    box-shadow: 0 4px 12px rgba(255, 142, 83, 0.2);
-
-
+    transform: translateY(-1px);
+    border-color: rgba(139, 124, 255, 0.26);
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
   }
 
   @media (max-width: 768px) {
-    height: 36px;
-    padding: 0 14px;
+    height: 42px;
+    padding: 0 8px 0 10px;
     font-size: 13px;
     gap: 6px;
 
+    .balance-icon-wrap {
+      width: 28px;
+      height: 28px;
+      border-radius: 10px;
+    }
+
+    .balance-label {
+      display: none;
+    }
+
+    .combo-divider {
+      height: 18px;
+    }
+
     .recharge-text {
-      padding: 1px 6px;
+      min-width: 60px;
+      height: 30px;
+      padding: 0 10px;
       font-size: 12px;
     }
   }
@@ -128,21 +179,21 @@
   min-width: 120px;
   height: 48px;
   font-size: 16px;
-  background-image: linear-gradient(270deg, #00f2fe 11.11%, #4facfe);
-  border-radius: 24px;
+  background-image: linear-gradient(135deg, #6e5cff, #8b7cff);
+  border-radius: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 600;
-  color: #0a1428;
+  color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(0, 242, 254, 0.3);
+  box-shadow: 0 12px 28px rgba(110, 92, 255, 0.3);
 
   &:hover {
-    background-image: linear-gradient(270deg, #4facfe 11.11%, #00f2fe);
+    background-image: linear-gradient(135deg, #7d6dff, #978bff);
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.4);
+    box-shadow: 0 16px 36px rgba(110, 92, 255, 0.34);
   }
 
   @media (max-width: 768px) {
@@ -158,35 +209,48 @@
   display: inline-block;
 }
 
-// 下拉菜单打开时，箭头保持指向上
 .user-profile.dropdown-open .user-trigger .dropdown-icon {
   transform: rotate(180deg);
-  color: #00ffcc;
+  color: #8b7cff;
 }
 
-// 用户触发区域
 .user-trigger {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 20px;
-  height: 44px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 22px;
+  gap: 10px;
+  padding: 0 16px 0 12px;
+  height: 52px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
   color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
-  border: 1px solid transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
 
   &:hover {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(0, 255, 204, 0.3);
-    box-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
+    background: rgba(255, 255, 255, 0.07);
+    border-color: rgba(139, 124, 255, 0.2);
+    transform: translateY(-1px);
+  }
+
+  .user-avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    color: #fff;
+    background: linear-gradient(135deg, rgba(139, 124, 255, 0.9), rgba(246, 184, 106, 0.72));
+    flex-shrink: 0;
   }
 
   .user-name {
     font-size: 15px;
-    font-weight: 500;
+    font-weight: 600;
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -197,17 +261,19 @@
     width: 16px;
     height: 16px;
     transition: transform 0.3s ease;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &:hover .dropdown-icon {
-    transform: rotate(180deg);
-    color: #00ffcc;
+    color: rgba(255, 255, 255, 0.56);
   }
 
   @media (max-width: 768px) {
     height: 36px;
-    padding: 0 14px;
+    padding: 0 12px;
+
+    .user-avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 8px;
+      font-size: 11px;
+    }
 
     .user-name {
       max-width: 80px;
@@ -223,11 +289,11 @@
   right: 0;
   margin-top: 8px;
   width: 220px;
-  background: rgba(10, 14, 20, 0.95);
-  backdrop-filter: blur(12px);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  background: rgba(16, 19, 28, 0.98);
+  backdrop-filter: blur(14px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   z-index: 1000;
 
@@ -240,7 +306,7 @@
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-bottom: 8px solid rgba(10, 14, 20, 0.95);
+    border-bottom: 8px solid rgba(16, 19, 28, 0.98);
   }
 }
 
@@ -254,7 +320,7 @@
   cursor: pointer;
 
   &:hover {
-    background: rgba(0, 255, 204, 0.1);
+    background: rgba(255, 255, 255, 0.05);
   }
 
   &.user-id {
@@ -266,7 +332,7 @@
     }
 
     .item-value {
-      color: #00ffcc;
+      color: #8b7cff;
       font-family: monospace;
       font-size: 13px;
     }
@@ -295,7 +361,7 @@
 // 下拉菜单分隔线
 .dropdown-divider {
   height: 1px;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.06);
   margin: 4px 0;
 }
 
diff --git a/src/assets/less/Recharge/Recharge.less b/src/assets/less/Recharge/Recharge.less
new file mode 100644
index 0000000..f3c7243
--- /dev/null
+++ b/src/assets/less/Recharge/Recharge.less
@@ -0,0 +1,547 @@
+@primary: #8b7cff;
+@primary-dark: #6e5cff;
+@accent: #f6b86a;
+@bg-dark: rgba(10, 12, 18, 0.94);
+@glass-bg: linear-gradient(180deg, rgba(24, 28, 39, 0.96), rgba(15, 18, 27, 0.98));
+@panel-bg: rgba(255, 255, 255, 0.04);
+@panel-hover: rgba(255, 255, 255, 0.08);
+@border-color: rgba(255, 255, 255, 0.08);
+@text-light: #f7f8fb;
+@text-secondary: rgba(255, 255, 255, 0.64);
+@text-muted: rgba(255, 255, 255, 0.44);
+
+// 通用动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// 主弹窗遮罩层
+.recharge-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    radial-gradient(circle at top, rgba(139, 124, 255, 0.2), transparent 35%),
+    rgba(0, 0, 0, 0.68);
+  backdrop-filter: blur(14px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: all 0.3s;
+}
+
+// 主弹窗容器
+.recharge-container {
+  width: 520px;
+  max-width: 90vw;
+  background: @glass-bg;
+  backdrop-filter: blur(20px);
+  border-radius: 28px;
+  padding: 30px 30px 24px;
+  transition: transform 0.2s ease;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 28px;
+
+  .header-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  h2 {
+    font-size: 28px;
+    font-weight: 700;
+    color: @text-light;
+    margin: 0;
+    letter-spacing: 0.02em;
+  }
+
+  .header-desc {
+    margin: 0;
+    max-width: 360px;
+    font-size: 14px;
+    line-height: 1.65;
+    color: @text-secondary;
+  }
+
+  .close-btn {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid @border-color;
+    font-size: 18px;
+    cursor: pointer;
+    color: @text-secondary;
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+.provider-section {
+  margin-bottom: 24px;
+
+  .section-title {
+    font-size: 13px;
+    letter-spacing: 0.08em;
+    color: @text-secondary;
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+}
+
+.provider-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+.provider-btn {
+  background: @panel-bg;
+  border: 1px solid @border-color;
+  border-radius: 18px;
+  padding: 16px 18px;
+  font-size: 16px;
+  font-weight: 600;
+  color: @text-light;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+
+  .provider-name {
+    font-size: 16px;
+  }
+
+  .provider-tag {
+    margin-left: auto;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(246, 184, 106, 0.14);
+    color: @accent;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: rgba(139, 124, 255, 0.4);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+    background: @panel-hover;
+  }
+
+  &.active {
+    background: linear-gradient(135deg, rgba(139, 124, 255, 0.18), rgba(246, 184, 106, 0.08));
+    border-color: rgba(139, 124, 255, 0.45);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    color: #fff;
+  }
+
+  .iconfont {
+    font-size: 22px;
+    color: #165dff;
+  }
+}
+
+.amount-section {
+  margin-bottom: 32px;
+
+  .section-title {
+    font-size: 13px;
+    letter-spacing: 0.08em;
+    color: @text-secondary;
+    margin-bottom: 16px;
+    font-weight: 500;
+  }
+}
+
+.amount-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+
+  @media (min-width: 480px) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.amount-btn {
+  min-height: 76px;
+  background: @panel-bg;
+  border: 1px solid @border-color;
+  border-radius: 18px;
+  padding: 12px 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: @text-light;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  .currency {
+    font-size: 15px;
+    font-weight: 400;
+    color: @text-secondary;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: rgba(139, 124, 255, 0.4);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+    background: @panel-hover;
+  }
+
+  &.active {
+    background: linear-gradient(180deg, rgba(139, 124, 255, 0.24), rgba(139, 124, 255, 0.12));
+    border-color: rgba(139, 124, 255, 0.48);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    color: #fff;
+  }
+}
+
+.custom-btn {
+  font-size: 16px;
+  flex-direction: column;
+  gap: 6px;
+
+  .currency {
+    font-size: 18px;
+    color: @accent;
+  }
+}
+
+.selected-info {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding-top: 2px;
+
+  .selected-info__item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 16px 18px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid @border-color;
+  }
+
+  .selected-info__item--highlight {
+    background: linear-gradient(135deg, rgba(139, 124, 255, 0.16), rgba(246, 184, 106, 0.08));
+  }
+
+  .selected-info__label {
+    font-size: 12px;
+    letter-spacing: 0.06em;
+    color: @text-muted;
+  }
+
+  .selected-info__value {
+    font-size: 18px;
+    font-weight: 600;
+    color: @text-light;
+  }
+
+  .selected-amount {
+    font-size: 28px;
+    font-weight: 700;
+    color: #fff;
+  }
+}
+
+.confirm-btn {
+  width: 100%;
+  background: linear-gradient(135deg, @primary-dark, @primary);
+  border: none;
+  border-radius: 18px;
+  padding: 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  transition: all 0.3s;
+  box-shadow: 0 16px 36px rgba(110, 92, 255, 0.32);
+  letter-spacing: 0.06em;
+
+  .btn-icon {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.2s;
+
+    &.loading {
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 20px 42px rgba(110, 92, 255, 0.38);
+    filter: brightness(1.06);
+
+    .btn-icon:not(.loading) {
+      transform: translateX(4px);
+    }
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+}
+
+.recharge-tips {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 14px;
+  font-size: 12px;
+  color: @text-muted;
+
+  span:last-child {
+    text-align: right;
+  }
+}
+
+.custom-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.76);
+  backdrop-filter: blur(16px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+}
+
+.custom-dialog {
+  width: 100%;
+  max-width: 420px;
+  background: linear-gradient(180deg, rgba(23, 26, 37, 0.98), rgba(15, 18, 27, 0.99));
+  backdrop-filter: blur(18px);
+  border-radius: 24px;
+  border: 1px solid @border-color;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  animation: slideUp 0.25s ease;
+
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+
+    h3 {
+      font-size: 22px;
+      font-weight: 600;
+      color: @text-light;
+      margin: 0;
+    }
+
+    .close-btn {
+      width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      border: 1px solid @border-color;
+      background: rgba(255, 255, 255, 0.04);
+      font-size: 18px;
+      cursor: pointer;
+      color: @text-secondary;
+      transition: all 0.2s;
+
+      &:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+
+  .dialog-body {
+    padding:20px 30px;
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      background: rgba(255, 255, 255, 0.04);
+      border-radius: 18px;
+      border: 1px solid @border-color;
+      transition: all 0.2s;
+
+      &:focus-within {
+        border-color: rgba(139, 124, 255, 0.46);
+        box-shadow: 0 0 0 4px rgba(139, 124, 255, 0.12);
+      }
+
+      .input-currency {
+        font-size: 28px;
+        font-weight: 600;
+        padding: 0 16px;
+        color: @accent;
+      }
+
+      .custom-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        padding: 16px 16px 16px 0;
+        font-size: 26px;
+        font-weight: 600;
+        color: @text-light;
+        outline: none;
+
+        &::placeholder {
+          color: rgba(255, 255, 255, 0.28);
+          font-size: 20px;
+          font-weight: 400;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        -moz-appearance: textfield;
+      }
+    }
+
+    .error-msg {
+      color: #ff6b6b;
+      font-size: 13px;
+      margin-top: 12px;
+      padding-left: 4px;
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    padding: 12px 24px 28px;
+
+    .dialog-btn {
+      flex: 1;
+      padding: 13px 0;
+      border-radius: 16px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: none;
+      background: transparent;
+
+      &.cancel {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid @border-color;
+        color: @text-light;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      &.confirm {
+        background: linear-gradient(135deg, @primary-dark, @primary);
+        color: #fff;
+        box-shadow: 0 12px 28px rgba(110, 92, 255, 0.28);
+
+        &:hover {
+          transform: translateY(-1px);
+          filter: brightness(1.05);
+        }
+      }
+    }
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  .recharge-container {
+    padding: 24px 20px 20px;
+    border-radius: 24px;
+  }
+
+  .modal-header {
+    .header-desc {
+      max-width: none;
+      font-size: 13px;
+    }
+  }
+
+  .amount-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .selected-info {
+    grid-template-columns: 1fr;
+  }
+
+  .recharge-tips {
+    flex-direction: column;
+
+    span:last-child {
+      text-align: left;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue
index a5aa9ef..27139fb 100644
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -13,14 +13,23 @@
         <template v-if="loginStore.isLoggedIn">
           <!-- 一体化：余额 + 充值按钮 -->
           <div class="balance-recharge-combo" @click="showRechargeModal = true">
-            <i class="iconfont icon-yue"></i>
-            <span class="balance-text">{{ balances }}</span>
+            <div class="balance-main">
+              <span class="balance-icon-wrap">
+                <i class="iconfont icon-yue"></i>
+              </span>
+              <div class="balance-copy">
+                <span class="balance-label">账户余额</span>
+                <span class="balance-text">{{ formattedBalance }}</span>
+              </div>
+            </div>
+            <span class="combo-divider"></span>
             <span class="recharge-text">充值</span>
           </div>
 
           <!-- 用户信息 -->
           <div class="user-profile" :class="{ 'dropdown-open': userDropdownVisible }">
             <div class="user-trigger" @click="toggleUserDropdown">
+              <div class="user-avatar">{{ userInitial }}</div>
               <div class="user-name">{{ loginStore.userInfo?.user?.name || loginStore.userInfo?.user?.username }}</div>
               <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M6 9l6 6 6-6" />
@@ -59,7 +68,7 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import Recharge from '@/components/Recharge/Recharge.vue';
 import { useLoginStore } from '@/store/LoginStore';
 import { useRouter } from 'vue-router';
@@ -75,6 +84,9 @@ const showRechargeModal = ref(false);
 const userDropdownVisible = ref(false);
 // 余额
 const balances = ref(0);
+const userDisplayName = computed(() => loginStore.userInfo?.user?.name || loginStore.userInfo?.user?.username || '用户');
+const userInitial = computed(() => userDisplayName.value.trim().charAt(0).toUpperCase() || 'U');
+const formattedBalance = computed(() => Number(balances.value || 0).toLocaleString('zh-CN'));
 
 // 切换下拉菜单
 const toggleUserDropdown = () => {
diff --git a/src/components/LoginPrompt/LoginPrompt.vue b/src/components/LoginPrompt/LoginPrompt.vue
new file mode 100644
index 0000000..aafd1b8
--- /dev/null
+++ b/src/components/LoginPrompt/LoginPrompt.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="login-prompt" :class="{ 'is-full-height': fullHeight }">
+    <div class="login-prompt__content">
+      <div class="login-prompt__title">{{ title }}</div>
+      <div v-if="description" class="login-prompt__description">{{ description }}</div>
+      <el-button type="primary" class="login-prompt__button" @click="handleLogin">
+        {{ buttonText }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+interface Props {
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  fullHeight?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '请先登录',
+  description: '',
+  buttonText: '去登录',
+  fullHeight: false,
+});
+
+const router = useRouter();
+
+const handleLogin = () => {
+  router.push('/login');
+};
+</script>
+
+<style scoped lang="less">
+.login-prompt {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  box-sizing: border-box;
+
+  &.is-full-height {
+    height: 100%;
+  }
+}
+
+.login-prompt__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+}
+
+.login-prompt__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.login-prompt__description {
+  max-width: 520px;
+  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.login-prompt__button {
+  min-width: 120px;
+}
+</style>
diff --git a/src/components/Recharge/Recharge.vue b/src/components/Recharge/Recharge.vue
index db4972c..a47cd2c 100644
--- a/src/components/Recharge/Recharge.vue
+++ b/src/components/Recharge/Recharge.vue
@@ -3,7 +3,10 @@
     <div class="recharge-container">
       <!-- 头部 -->
       <div class="modal-header">
-        <h2>充值账户</h2>
+        <div class="header-copy">
+          <h2>充值账户</h2>
+          <p class="header-desc">选择金额后跳转到安全支付页面，余额到账后可立即使用。</p>
+        </div>
         <button class="close-btn" @click="closeModal">✕</button>
       </div>
 
@@ -20,6 +23,7 @@
           >
             <span class="iconfont icon-zhifubaozhifu"></span>
             <span class="provider-name">{{ provider.name }}</span>
+            <span class="provider-tag">推荐</span>
           </button>
         </div>
       </div>
@@ -49,8 +53,14 @@
 
         <!-- 当前选中金额展示 -->
         <div class="selected-info" v-if="selectedAmount">
-          <span>充值金额：</span>
-          <strong class="selected-amount">¥{{ selectedAmount }}</strong>
+          <div class="selected-info__item">
+            <span class="selected-info__label">充值渠道</span>
+            <strong class="selected-info__value">支付宝</strong>
+          </div>
+          <div class="selected-info__item selected-info__item--highlight">
+            <span class="selected-info__label">到账金额</span>
+            <strong class="selected-amount">¥{{ selectedAmount }}</strong>
+          </div>
         </div>
       </div>
 
@@ -66,6 +76,11 @@
           <path d="M12 6v6l4 2" />
         </svg>
       </button>
+
+      <div class="recharge-tips">
+        <span>支付由第三方渠道完成</span>
+        <span>如长时间未到账，请刷新余额或联系客服</span>
+      </div>
     </div>
 
     <!-- 自定义金额弹窗 (独立遮罩) -->
@@ -277,448 +292,5 @@ const closeModal = () => {
 </script>
 
 <style scoped lang="less">
-// 科技感色调
-@primary: #00f2fe;
-@primary-dark: #4facfe;
-@bg-dark: rgba(10, 20, 40, 0.92);
-@glass-bg: rgba(20, 30, 55, 0.75);
-@border-glow: 0 0 10px rgba(0, 242, 254, 0.3);
-@text-light: #eef5ff;
-@text-secondary: #b0c4ff;
-
-// 通用动画
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-// 主弹窗遮罩层
-.recharge-modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  transition: all 0.3s;
-}
-
-// 主弹窗容器
-.recharge-container {
-  width: 520px;
-  max-width: 90vw;
-  background: @glass-bg;
-  backdrop-filter: blur(12px);
-  border-radius: 32px;
-  padding: 28px 32px 36px;
-  // box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 242, 254, 0.2), 0 0 20px rgba(0, 242, 254, 0.3);
-  transition: transform 0.2s ease;
-  // border: 1px solid rgba(0, 242, 254, 0.4);
-}
-
-// 头部
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 28px;
-  h2 {
-    font-size: 28px;
-    font-weight: 600;
-    background: linear-gradient(135deg, #fff, @primary);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    letter-spacing: 1px;
-    margin: 0;
-    text-shadow: 0 0 5px rgba(0, 242, 254, 0.3);
-  }
-  .close-btn {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-    color: @text-secondary;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    &:hover {
-      background: rgba(255, 255, 255, 0.25);
-      color: #fff;
-      transform: rotate(90deg);
-    }
-  }
-}
-
-// 充值渠道区域
-.provider-section {
-  margin-bottom: 24px;
-  .section-title {
-    font-size: 14px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: @text-secondary;
-    margin-bottom: 16px;
-    font-weight: 400;
-  }
-}
-
-.provider-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.provider-btn {
-  background: rgba(15, 25, 45, 0.7);
-  border: 1px solid rgba(0, 242, 254, 0.3);
-  border-radius: 20px;
-  padding: 16px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: @text-light;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  
-  .provider-icon {
-    font-size: 24px;
-  }
-  
-  .provider-name {
-    font-size: 16px;
-  }
-  
-  &:hover {
-    transform: translateY(-2px);
-    border-color: @primary;
-    box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
-    background: rgba(0, 242, 254, 0.15);
-  }
-  
-  &.active {
-    background: linear-gradient(135deg, rgba(0, 242, 254, 0.3), rgba(79, 172, 254, 0.3));
-    border-color: @primary;
-    box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
-    color: #fff;
-    // text-shadow: 0 0 4px rgba(0, 242, 254, 0.8);
-  }
-  .iconfont{
-    color: #00f2fe;
-  }
-}
-
-// 金额区域
-.amount-section {
-  margin-bottom: 32px;
-  .section-title {
-    font-size: 14px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: @text-secondary;
-    margin-bottom: 16px;
-    font-weight: 400;
-  }
-}
-
-.amount-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  margin-bottom: 24px;
-  
-  @media (min-width: 480px) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.amount-btn {
-  background: rgba(15, 25, 45, 0.7);
-  border: 1px solid rgba(0, 242, 254, 0.3);
-  border-radius: 20px;
-  padding: 12px 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: @text-light;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  
-  .currency {
-    font-size: 16px;
-    font-weight: 400;
-    opacity: 0.8;
-  }
-  
-  &:hover {
-    transform: translateY(-2px);
-    border-color: @primary;
-    box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
-    background: rgba(0, 242, 254, 0.15);
-  }
-  
-  &.active {
-    background: linear-gradient(135deg, rgba(0, 242, 254, 0.3), rgba(79, 172, 254, 0.3));
-    border-color: @primary;
-    box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
-    color: #fff;
-    text-shadow: 0 0 4px rgba(0, 242, 254, 0.8);
-  }
-}
-
-.custom-btn {
-  .currency {
-    font-size: 18px;
-  }
-}
-
-.selected-info {
-  text-align: right;
-  padding: 12px 8px 0;
-  border-top: 1px dashed rgba(0, 242, 254, 0.3);
-  font-size: 16px;
-  color: @text-secondary;
-  .selected-amount {
-    font-size: 24px;
-    font-weight: 700;
-    color: @primary;
-    margin-left: 8px;
-    text-shadow: 0 0 6px rgba(0, 242, 254, 0.5);
-  }
-}
-
-// 确认按钮
-.confirm-btn {
-  width: 100%;
-  background: linear-gradient(90deg, @primary-dark, @primary);
-  border: none;
-  border-radius: 40px;
-  padding: 14px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #0a1428;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  transition: all 0.3s;
-  box-shadow: 0 4px 12px rgba(0, 242, 254, 0.3);
-  letter-spacing: 2px;
-  
-  .btn-icon {
-    width: 20px;
-    height: 20px;
-    transition: transform 0.2s;
-    
-    &.loading {
-      animation: spin 1s linear infinite;
-    }
-  }
-  
-  &:hover:not(:disabled) {
-    transform: scale(1.02);
-    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.5);
-    filter: brightness(1.05);
-    .btn-icon:not(.loading) {
-      transform: translateX(4px);
-    }
-  }
-  
-  &:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-  
-  &:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: none !important;
-  }
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-}
-
-// 自定义弹窗遮罩层 (更高层级)
-.custom-modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.75);
-  backdrop-filter: blur(12px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1100;
-}
-
-.custom-dialog {
-  width: 100%;
-  max-width: 25vw;
-  background: rgba(12, 22, 40, 0.95);
-  backdrop-filter: blur(16px);
-  border-radius: 28px;
-  border: 1px solid rgba(0, 242, 254, 0.5);
-  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 242, 254, 0.2);
-  overflow: hidden;
-  animation: slideUp 0.25s ease;
-  
-  .dialog-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 24px 12px;
-    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
-    h3 {
-      font-size: 22px;
-      font-weight: 500;
-      color: @text-light;
-      margin: 0;
-      background: linear-gradient(135deg, #fff, @primary);
-      background-clip: text;
-      -webkit-background-clip: text;
-      color: transparent;
-    }
-    .close-btn {
-      background: transparent;
-      border: none;
-      font-size: 24px;
-      cursor: pointer;
-      color: @text-secondary;
-      transition: all 0.2s;
-      &:hover {
-        color: @primary;
-        transform: rotate(90deg);
-      }
-    }
-  }
-  
-  .dialog-body {
-    padding: 28px 24px 20px;
-    .input-group {
-      display: flex;
-      align-items: center;
-      background: rgba(0, 0, 0, 0.4);
-      border-radius: 48px;
-      border: 1px solid rgba(0, 242, 254, 0.4);
-      transition: all 0.2s;
-      &:focus-within {
-        border-color: @primary;
-        box-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
-      }
-      .input-currency {
-        font-size: 28px;
-        font-weight: 500;
-        padding: 0 16px;
-        color: @primary;
-      }
-      .custom-input {
-        flex: 1;
-        background: transparent;
-        border: none;
-        padding: 16px 16px 16px 0;
-        font-size: 26px;
-        font-weight: 500;
-        color: @text-light;
-        outline: none;
-        &::placeholder {
-          color: rgba(176, 196, 255, 0.5);
-          font-size: 20px;
-          font-weight: 400;
-        }
-        /* 去除 number 箭头 */
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-        -moz-appearance: textfield;
-      }
-    }
-    .error-msg {
-      color: #ff6b6b;
-      font-size: 13px;
-      margin-top: 12px;
-      padding-left: 16px;
-      text-shadow: 0 0 2px rgba(0,0,0,0.5);
-    }
-  }
-  
-  .dialog-footer {
-    display: flex;
-    gap: 16px;
-    padding: 12px 24px 28px;
-    .dialog-btn {
-      flex: 1;
-      padding: 12px 0;
-      border-radius: 40px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      border: none;
-      background: transparent;
-      &.cancel {
-        background: rgba(255, 255, 255, 0.08);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        color: @text-secondary;
-        &:hover {
-          background: rgba(255, 255, 255, 0.15);
-          color: #fff;
-        }
-      }
-      &.confirm {
-        background: linear-gradient(90deg, @primary-dark, @primary);
-        color: #0a1428;
-        box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
-        &:hover {
-          transform: scale(1.02);
-          filter: brightness(1.05);
-        }
-      }
-    }
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+@import url('@/assets/less/Recharge/Recharge.less');
 </style>
\ No newline at end of file
diff --git a/src/components/RightResult/RightResult.vue b/src/components/RightResult/RightResult.vue
index 2071966..8e03e44 100644
--- a/src/components/RightResult/RightResult.vue
+++ b/src/components/RightResult/RightResult.vue
@@ -2,14 +2,12 @@
   <div>
     <el-card class="rig">
       <!-- 未登录状态 -->
-      <div v-if="!isLoggedIn" class="login-require">
-        <div class="login-require-content">
-          <div class="message">请登录后再进行创作哦~</div>
-          <el-button type="primary" class="login-btn" @click="handleLogin">
-            登录
-          </el-button>
-        </div>
-      </div>
+      <LoginPrompt
+        v-if="!isLoggedIn"
+        class="login-require"
+        title="请登录后再进行创作哦~"
+        button-text="登录"
+      />
 
       <!-- 已登录状态 -->
       <template v-else>
@@ -144,15 +142,14 @@
 
 <script setup lang='ts'>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
 import { ElLoading, ElMessage } from 'element-plus';
 import { Loading } from '@element-plus/icons-vue';
 import { useLoginStore } from '@/store/LoginStore';
 import { getAsyncTaskStatus, getTodayTask } from '@/apis/Model';
 import type { TaskItem, TaskResult } from '@/types/model';
+import LoginPrompt from '@/components/LoginPrompt/LoginPrompt.vue';
 
 // ==================== 实例和状态 ====================
-const router = useRouter();
 const loginStore = useLoginStore();
 
 // ==================== 响应式数据 ====================
@@ -211,13 +208,6 @@ const filteredTasks = computed(() => {
 });
 
 // ==================== 事件处理 ====================
-/**
- * 处理登录按钮点击
- */
-const handleLogin = () => {
-  router.push('/login');
-};
-
 /**
  * 处理筛选变化
  */
diff --git a/src/components/video/ReferenceVideo.vue b/src/components/video/ReferenceVideo.vue
index bc189c0..5489ec1 100644
--- a/src/components/video/ReferenceVideo.vue
+++ b/src/components/video/ReferenceVideo.vue
@@ -3,78 +3,75 @@
     <!-- 顶部卡片 -->
     <el-card class="card">
       <div class="reference-container">
-        <!-- 上传模块 -->
-        <div class="upload-section">
-          <!-- 上传视频 -->
-          <div class="upload-item">
-            <!-- 已上传时显示预览 -->
-            <div v-if="videoBase64" class="uploaded-preview">
-              <img :src="videoBase64" alt="视频预览" class="uploaded-image" />
-              <div class="uploaded-actions">
-                <span class="uploaded-action" @click="handlePreview('video')">
-                  <el-icon><ZoomIn /></el-icon>
-                </span>
-                <span class="uploaded-action" @click="handleRemoveVideo">
-                  <el-icon><Delete /></el-icon>
-                </span>
-              </div>
-            </div>
-            <!-- 未上传时显示上传框 -->
-            <div v-else class="upload-placeholder">
-              <div class="upload-icon">
-                <svg width="1em" height="1em" fill="none" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12.28 5.96875L12.2617 19.9688" stroke="currentColor" stroke-linecap="round"
-                    stroke-linejoin="round" stroke-width="2"></path>
-                  <path d="M5.25 12.9688H19.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                    stroke-width="2"></path>
-                </svg>
-              </div>
-              <div class="upload-text">
-                <span class="upload-title">上传视频 / 主体</span>
-                <span class="upload-desc">最多可上传1个视频</span>
-              </div>
-              <el-upload action="#" :auto-upload="false" :show-file-list="false" accept="video/*"
-                :on-change="handleVideoChange" class="upload-button">
-                <el-button type="primary" size="small">选择文件</el-button>
-              </el-upload>
+        <div class="reference-header">
+          <div class="reference-header__copy">
+            <div class="reference-header__title">参考多张图片中的主体生成视频</div>
+            <div class="reference-header__desc">
+              你可以上传图片选择主体，或者直接使用已保存的主体
             </div>
           </div>
 
-          <!-- 分割线 -->
-          <div class="divider"></div>
+          <div class="reference-header__actions">
+            <input
+              ref="imageInputRef"
+              class="hidden-upload-input"
+              type="file"
+              accept="image/*"
+              @change="handleImageSelect"
+            />
+            <input
+              ref="videoInputRef"
+              class="hidden-upload-input"
+              type="file"
+              accept="video/*"
+              @change="handleVideoSelect"
+            />
 
-          <!-- 上传图片 -->
-          <div class="upload-item">
-            <!-- 已上传时显示预览 -->
-            <div v-if="imageBase64" class="uploaded-preview">
-              <img :src="imageBase64" alt="图片预览" class="uploaded-image" />
-              <div class="uploaded-actions">
-                <span class="uploaded-action" @click="handlePreview('image')">
-                  <el-icon><ZoomIn /></el-icon>
-                </span>
-                <span class="uploaded-action" @click="handleRemoveImage">
-                  <el-icon><Delete /></el-icon>
-                </span>
+            <button class="reference-action-btn" type="button" @click="triggerImageUpload">
+              <span class="reference-action-btn__icon">+</span>
+              <span>图片</span>
+            </button>
+            <button class="reference-action-btn" type="button" @click="triggerSubjectUpload">
+              <span class="reference-action-btn__icon">+</span>
+              <span>视频</span>
+            </button>
+          </div>
+
+          <div v-if="imageBase64 || videoBase64" class="reference-assets">
+            <div v-if="imageBase64" class="reference-asset-card">
+              <img :src="imagePreviewUrl" alt="图片预览" class="reference-asset-card__image" />
+              <div class="reference-asset-card__meta">
+                <span class="reference-asset-card__label">图片</span>
+                <div class="reference-asset-card__actions">
+                  <span class="uploaded-action" @click="handlePreview('image')">
+                    <el-icon><ZoomIn /></el-icon>
+                  </span>
+                  <span class="uploaded-action" @click="handleRemoveImage">
+                    <el-icon><Delete /></el-icon>
+                  </span>
+                </div>
               </div>
             </div>
-            <!-- 未上传时显示上传框 -->
-            <div v-else class="upload-placeholder">
-              <div class="upload-icon">
-                <svg width="1em" height="1em" fill="none" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12.28 5.96875L12.2617 19.9688" stroke="currentColor" stroke-linecap="round"
-                    stroke-linejoin="round" stroke-width="2"></path>
-                  <path d="M5.25 12.9688H19.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                    stroke-width="2"></path>
-                </svg>
+
+            <div v-if="videoBase64" class="reference-asset-card">
+              <video
+                :src="videoPreviewUrl"
+                class="reference-asset-card__image"
+                muted
+                playsinline
+                preload="metadata"
+              />
+              <div class="reference-asset-card__meta">
+                <span class="reference-asset-card__label">视频</span>
+                <div class="reference-asset-card__actions">
+                  <span class="uploaded-action" @click="handlePreview('video')">
+                    <el-icon><ZoomIn /></el-icon>
+                  </span>
+                  <span class="uploaded-action" @click="handleRemoveVideo">
+                    <el-icon><Delete /></el-icon>
+                  </span>
+                </div>
               </div>
-              <div class="upload-text">
-                <span class="upload-title">上传图片 / 主体</span>
-                <span class="upload-desc">最多可上传1张图片</span>
-              </div>
-              <el-upload action="#" :auto-upload="false" :show-file-list="false" accept="image/*"
-                :on-change="handleImageChange" class="upload-button">
-                <el-button type="primary" size="small">选择文件</el-button>
-              </el-upload>
             </div>
           </div>
         </div>
@@ -181,7 +178,14 @@
   </div>
 <!-- 图片预览对话框 -->
     <el-dialog v-model="dialogVisible">
-      <img w-full :src="dialogImageUrl" alt="Preview Image" />
+      <video
+        v-if="dialogPreviewType === 'video'"
+        class="dialog-preview-media"
+        :src="dialogPreviewUrl"
+        controls
+        autoplay
+      />
+      <img v-else class="dialog-preview-media" :src="dialogPreviewUrl" alt="Preview Image" />
     </el-dialog>
 </template>
 
@@ -189,7 +193,6 @@
 import { ref, computed, watch, defineEmits } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Delete, ZoomIn } from '@element-plus/icons-vue'
-import type { UploadFile } from 'element-plus'
 
 // 定义 emit 事件
 const emit = defineEmits(['price-update', 'prompt-change', 'task-created'])
@@ -212,10 +215,18 @@ const promptText = ref('')
 // 上传文件的base64
 const videoBase64 = ref('')
 const imageBase64 = ref('')
+const videoMimeType = ref('')
+const imageMimeType = ref('')
+const imageInputRef = ref<HTMLInputElement | null>(null)
+const videoInputRef = ref<HTMLInputElement | null>(null)
 
 // 预览对话框
 const dialogVisible = ref(false)
-const dialogImageUrl = ref('')
+const dialogPreviewType = ref<'image' | 'video'>('image')
+
+const imagePreviewUrl = computed(() => toDataUrl(imageMimeType.value, imageBase64.value))
+const videoPreviewUrl = computed(() => toDataUrl(videoMimeType.value, videoBase64.value))
+const dialogPreviewUrl = computed(() => dialogPreviewType.value === 'video' ? videoPreviewUrl.value : imagePreviewUrl.value)
 
 // 价格计算
 const price = computed(() => {
@@ -249,57 +260,143 @@ const handlePromptInput = (value: string) => {
   promptText.value = value
 }
 
+const triggerImageUpload = () => {
+  imageInputRef.value?.click()
+}
+
+const triggerSubjectUpload = () => {
+  videoInputRef.value?.click()
+}
+
+const toDataUrl = (mimeType: string, base64: string) => {
+  if (!mimeType || !base64) {
+    return ''
+  }
+
+  return `data:${mimeType};base64,${base64}`
+}
+
+const normalizeBase64 = (result: string) => {
+  const [, pureBase64 = ''] = result.split(',')
+  return pureBase64
+}
+
+const readFileAsBase64 = (file: File) => {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = (event) => {
+      const result = event.target?.result
+      if (typeof result !== 'string') {
+        reject(new Error('文件读取失败'))
+        return
+      }
+
+      resolve(normalizeBase64(result))
+    }
+
+    reader.onerror = () => reject(new Error('文件读取失败'))
+    reader.readAsDataURL(file)
+  })
+}
+
+const resetInputValue = (inputRef: typeof imageInputRef | typeof videoInputRef) => {
+  if (inputRef.value) {
+    inputRef.value.value = ''
+  }
+}
+
+const handleImageSelect = async (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+
+  if (!file) {
+    return
+  }
+
+  await handleImageChange(file)
+  resetInputValue(imageInputRef)
+}
+
+const handleVideoSelect = async (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+
+  if (!file) {
+    return
+  }
+
+  await handleVideoChange(file)
+  resetInputValue(videoInputRef)
+}
+
 // 处理视频上传
-const handleVideoChange = (file: UploadFile) => {
+const handleVideoChange = async (file: File) => {
   if (videoBase64.value) {
     ElMessage.warning('只能上传一个视频，请先删除已有视频')
     return
   }
 
-  const rawFile = file.raw as File
-  const reader = new FileReader()
-  reader.onload = (e) => {
-    const base64 = e.target?.result as string
+  if (!file.type.startsWith('video/')) {
+    ElMessage.warning('请上传视频文件')
+    return
+  }
+
+  try {
+    const base64 = await readFileAsBase64(file)
     videoBase64.value = base64
+    videoMimeType.value = file.type
     console.log('视频上传成功，Base64长度:', base64.length)
     ElMessage.success('视频上传成功')
+  } catch (error) {
+    console.error('视频上传失败:', error)
+    ElMessage.error('视频上传失败，请重试')
   }
-  reader.readAsDataURL(rawFile)
 }
 
 // 处理图片上传
-const handleImageChange = (file: UploadFile) => {
+const handleImageChange = async (file: File) => {
   if (imageBase64.value) {
     ElMessage.warning('只能上传一张图片，请先删除已有图片')
     return
   }
 
-  const rawFile = file.raw as File
-  const reader = new FileReader()
-  reader.onload = (e) => {
-    const base64 = e.target?.result as string
+  if (!file.type.startsWith('image/')) {
+    ElMessage.warning('请上传图片文件')
+    return
+  }
+
+  try {
+    const base64 = await readFileAsBase64(file)
     imageBase64.value = base64
+    imageMimeType.value = file.type
     console.log('图片上传成功，Base64长度:', base64.length)
     ElMessage.success('图片上传成功')
+  } catch (error) {
+    console.error('图片上传失败:', error)
+    ElMessage.error('图片上传失败，请重试')
   }
-  reader.readAsDataURL(rawFile)
 }
 
 // 删除视频
 const handleRemoveVideo = () => {
   videoBase64.value = ''
+  videoMimeType.value = ''
+  resetInputValue(videoInputRef)
   ElMessage.info('已删除视频')
 }
 
 // 删除图片
 const handleRemoveImage = () => {
   imageBase64.value = ''
+  imageMimeType.value = ''
+  resetInputValue(imageInputRef)
   ElMessage.info('已删除图片')
 }
 
 // 预览
 const handlePreview = (type: 'video' | 'image') => {
-  dialogImageUrl.value = type === 'video' ? videoBase64.value : imageBase64.value
+  dialogPreviewType.value = type
   dialogVisible.value = true
 }
 
@@ -319,12 +416,14 @@ const buildSubmitParams = () => {
   // 添加视频base64
   if (videoBase64.value) {
     params.video = videoBase64.value
+    params.videoMimeType = videoMimeType.value
     console.log('添加视频参数，Base64长度:', videoBase64.value.length)
   }
 
   // 添加图片base64
   if (imageBase64.value) {
     params.image = imageBase64.value
+    params.imageMimeType = imageMimeType.value
     console.log('添加图片参数，Base64长度:', imageBase64.value.length)
   }
 
@@ -357,6 +456,10 @@ const resetForm = () => {
   promptText.value = ''
   videoBase64.value = ''
   imageBase64.value = ''
+  videoMimeType.value = ''
+  imageMimeType.value = ''
+  resetInputValue(imageInputRef)
+  resetInputValue(videoInputRef)
   selectedDuration.value = 5
   selectedCount.value = 1
   emit('prompt-change', true)
@@ -448,85 +551,115 @@ defineExpose({
   color: #fff;
 }
 
-.upload-section {
-  border: 1px dashed #35383F;
+.reference-header {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 8px 0 4px;
+}
+
+.reference-header__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.reference-header__title {
+  font-size: 22px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: #fff;
+}
+
+.reference-header__desc {
+  font-size: 15px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.reference-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.hidden-upload-input {
+  display: none;
+}
+
+.reference-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 46px;
+  padding: 0 22px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+}
+
+.reference-action-btn__icon {
+  font-size: 26px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.reference-assets {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.reference-asset-card {
+  width: 180px;
+  overflow: hidden;
   border-radius: 12px;
-  background-color: rgba(0, 0, 0, 0.36);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
 
-  .upload-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 16px 0 16px 24px;
-    height: 88px;
-    cursor: pointer;
-    transition: background-color 0.2s;
+.reference-asset-card__image {
+  display: block;
+  width: 100%;
+  height: 110px;
+  object-fit: cover;
+  background: rgba(0, 0, 0, 0.24);
+}
 
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.08);
-    }
+.dialog-preview-media {
+  display: block;
+  width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
 
-    &:first-child {
-      border-radius: 12px 12px 0 0;
-    }
+.reference-asset-card__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+}
 
-    &:last-child {
-      border-radius: 0 0 12px 12px;
-    }
+.reference-asset-card__label {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+}
 
-    .upload-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background-color: rgba(255, 255, 255, 0.08);
-      font-size: 20px;
-      color: #fff;
-      flex-shrink: 0;
-    }
-
-    .upload-text {
-      display: flex;
-      flex-direction: column;
-      z-index: 10;
-
-      .upload-title {
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 1.25;
-        color: #fff;
-        margin-bottom: 2px;
-      }
-
-      .upload-desc {
-        font-size: 12px;
-        line-height: 1.25;
-        color: rgba(255, 255, 255, 0.48);
-      }
-    }
-
-    .upload-preview {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 148px;
-      aspect-ratio: 185/75;
-      object-fit: cover;
-
-      @media (max-width: 768px) {
-        width: 185px;
-      }
-    }
-  }
-
-  .divider {
-    height: 1px;
-    margin: 0 24px;
-    background-color: rgba(255, 255, 255, 0.08);
-  }
+.reference-asset-card__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .input {
@@ -633,79 +766,24 @@ defineExpose({
   font-weight: 600;
 }
 
-// 上传预览相关样式
-.uploaded-preview {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 185/75;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: #1a1c20;
-
-  .uploaded-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .uploaded-actions {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    .uploaded-action {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background-color: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-
-      .el-icon {
-        font-size: 18px;
-      }
-    }
-  }
-}
-
-.upload-placeholder {
-  position: relative;
+.uploaded-action {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px 24px;
-  height: 88px;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: #fff;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s ease;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: rgba(255, 255, 255, 0.24);
   }
 
-  .upload-button {
-    position: absolute;
-    right: 24px;
+  .el-icon {
+    font-size: 16px;
   }
 }
 </style>
diff --git a/src/components/video/VideoLeft.vue b/src/components/video/VideoLeft.vue
index 4b6a90c..c4f74d2 100644
--- a/src/components/video/VideoLeft.vue
+++ b/src/components/video/VideoLeft.vue
@@ -217,7 +217,6 @@ onUnmounted(() => {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: 96px;
 }
 .create-button-container {
   z-index: 999;
diff --git a/src/views/APiKey/apikey.vue b/src/views/APiKey/apikey.vue
index ed9e8a0..766d284 100644
--- a/src/views/APiKey/apikey.vue
+++ b/src/views/APiKey/apikey.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="apikey-page">
-    <el-card class="apikey-card">
+    <LoginPrompt
+      v-if="!isLoggedIn"
+      class="login-fullscreen"
+      title="请先登录后管理 API Key"
+      description="登录后可创建、复制、查看和删除自己的访问令牌。"
+      full-height
+    />
+
+    <el-card v-else class="apikey-card">
       <div class="page-header">
         <div class="header-main">
           <div class="title-row">
@@ -26,44 +34,33 @@
         </div>
       </div>
 
-      <div v-if="!isLoggedIn" class="login-require">
-        <div class="login-require-content">
-          <img src="../../assets/images/preparation.png" alt="">
-          <div class="login-title">请先登录后管理 API Key</div>
-          <div class="login-desc">登录后可创建、复制、查看和删除自己的访问令牌。</div>
-          <el-button type="primary" @click="handleLogin">去登录</el-button>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-label">令牌总数</div>
+          <div class="stat-value">{{ stats.total }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">启用中</div>
+          <div class="stat-value success">{{ stats.active }}</div>
         </div>
       </div>
 
-      <template v-else>
-        <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-label">令牌总数</div>
-            <div class="stat-value">{{ stats.total }}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-label">启用中</div>
-            <div class="stat-value success">{{ stats.active }}</div>
-          </div>
-        </div>
-
-        <div class="table-wrapper">
-          <el-table :data="keys" class="apikey-table" stripe v-loading="loading">
-            <el-table-column prop="name" label="令牌名称" min-width="150" />
-            <!-- <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip /> -->
-            <el-table-column label="id" min-width="220">
-              <template #default="{ row }">
-                <code class="key-mask">{{ maskKey(row.key || '') }}</code>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="180" fixed="right">
-              <template #default="{ row }">
-                <el-button link type="primary" size="small" @click="openViewDialog(row)">查看</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </template>
+      <div class="table-wrapper">
+        <el-table :data="keys" class="apikey-table" stripe v-loading="loading">
+          <el-table-column prop="name" label="令牌名称" min-width="150" />
+          <!-- <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip /> -->
+          <el-table-column label="id" min-width="220">
+            <template #default="{ row }">
+              <code class="key-mask">{{ maskKey(row.key || '') }}</code>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="openViewDialog(row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </el-card>
 
     <!-- 创建 API Key 对话框 -->
@@ -117,12 +114,11 @@
 import { computed, reactive, ref, watch, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
-import { useRouter } from 'vue-router';
 import { useLoginStore } from '@/store/LoginStore';
 import { applyApiKey, getApiKeyList, getApiKeyDetail } from '@/apis/apiKey';
 import type { AddParams, AddResult, DetailResult, ListApikeys } from '@/types/apiKey';
+import LoginPrompt from '@/components/LoginPrompt/LoginPrompt.vue';
 
-const router = useRouter();
 const loginStore = useLoginStore();
 const isLoggedIn = computed(() => loginStore.isLoggedIn);
 
@@ -277,11 +273,6 @@ const handleViewDialogClose = () => {
   viewingKey.value = null;
 };
 
-// 去登录
-const handleLogin = () => {
-  router.push('/login');
-};
-
 // 监听登录状态变化
 watch(
   () => loginStore.isLoggedIn,
@@ -303,6 +294,10 @@ onMounted(() => {
 </script>
 <style scoped lang='less'>
 @import url('@/assets/less/apiKey/apikey.less');
+
+.login-fullscreen {
+  height: 100%;
+}
 </style>
 
 <style lang='less'>
diff --git a/src/views/Bill/Bill.vue b/src/views/Bill/Bill.vue
index 0aa4b1f..31304c1 100644
--- a/src/views/Bill/Bill.vue
+++ b/src/views/Bill/Bill.vue
@@ -30,14 +30,11 @@
 
       <!-- 内容区 -->
       <div class="bill-content">
-        <div v-if="!isLoggedIn" class="login-require">
-          <div class="login-require-content">
-            <div class="login-require-text">请先登录后查看消费记录</div>
-            <el-button type="primary" class="login-btn" @click="handleLogin">
-              去登录
-            </el-button>
-          </div>
-        </div>
+        <LoginPrompt
+          v-if="!isLoggedIn"
+          class="login-require"
+          title="请先登录后查看消费记录"
+        />
 
         <!-- 加载中 -->
         <div v-else-if="isLoading" class="loading-container">
@@ -127,7 +124,7 @@ import { ref, onMounted, computed, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { consumptionRecord } from '@/apis/home';
 import { useLoginStore } from '@/store/LoginStore';
-import router from '@/router';
+import LoginPrompt from '@/components/LoginPrompt/LoginPrompt.vue';
 
 // ==================== 实例和状态 ====================
 const loginStore = useLoginStore();
@@ -286,10 +283,6 @@ const handleFilterChange = () => {
   updatePaginatedList(); // 重新筛选和分页
 };
 
-const handleLogin = () => {
-  router.push('/login');
-};
-
 // ==================== 数据加载 ====================
 /**
  * 加载订单列表