diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
index b5b365a2..31e74a4e 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
 import { getPremiumTokenPackage } from '@/api/user';
+import { showProductPackage } from '@/utils/product-package.ts';
 
 // 尊享服务数据
 const loading = ref(false);
@@ -70,7 +71,6 @@ async function fetchPremiumTokenPackage() {
   loading.value = true;
   try {
     const res = await getPremiumTokenPackage();
-    console.log('尊享服务Token包数据:', res);
     if (res.data) {
       // 适配新的接口字段名
       const data = res.data;
@@ -109,6 +109,10 @@ function refreshData() {
 onMounted(() => {
   fetchPremiumTokenPackage();
 });
+
+function onProductPackage() {
+  showProductPackage();
+}
 </script>
 
 <template>
@@ -205,7 +209,7 @@ onMounted(() => {
 
           <div class="progress-legend">
             <div class="legend-item">
-              <span class="legend-dot used-dot" />
+              <span class="legend-dot " :style="{ background: progressColor }" />
               <span class="legend-text">已使用: {{ usagePercent }}%</span>
             </div>
             <div class="legend-item">
@@ -215,6 +219,25 @@ onMounted(() => {
           </div>
         </div>
 
+        <!-- 购买提示卡片（额度不足时显示） -->
+        <el-card
+          v-if="remainingPercent < 20"
+          class="warning-card"
+          shadow="hover"
+        >
+          <div class="warning-content">
+            <el-icon class="warning-icon" color="#e6a23c">
+              <WarningFilled />
+            </el-icon>
+            <div class="warning-text">
+              <h3>额度即将用完</h3>
+              <p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
+            </div>
+            <el-button type="warning" @click="onProductPackage()">
+              立即充值
+            </el-button>
+          </div>
+        </el-card>
         <!-- 过期时间 -->
         <div v-if="packageData.expireDate" class="expire-info">
           <el-icon><Clock /></el-icon>
@@ -241,26 +264,6 @@ onMounted(() => {
         </el-alert>
       </div>
     </el-card>
-
-    <!-- 购买提示卡片（额度不足时显示） -->
-    <el-card
-      v-if="remainingPercent < 20"
-      class="warning-card"
-      shadow="hover"
-    >
-      <div class="warning-content">
-        <el-icon class="warning-icon" color="#e6a23c">
-          <WarningFilled />
-        </el-icon>
-        <div class="warning-text">
-          <h3>额度即将用完</h3>
-          <p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
-        </div>
-        <el-button type="warning" @click="$router.push('/products')">
-          立即充值
-        </el-button>
-      </div>
-    </el-card>
   </div>
 </template>
 
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
index 481098b2..787c4dfb 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
@@ -374,7 +374,7 @@ onMounted(() => {
 }
 
 .recharge-log-container {
-  padding: 30px;
+  padding: 10px;
   background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);