diff --git a/src/assets/images/recharge/lb.png b/src/assets/images/recharge/lb.png
new file mode 100644
index 0000000..cd8aa8c
Binary files /dev/null and b/src/assets/images/recharge/lb.png differ
diff --git a/src/assets/images/recharge/quity.png b/src/assets/images/recharge/quity.png
new file mode 100644
index 0000000..9290732
Binary files /dev/null and b/src/assets/images/recharge/quity.png differ
diff --git a/src/assets/images/recharge/vip.png b/src/assets/images/recharge/vip.png
new file mode 100644
index 0000000..f13ec26
Binary files /dev/null and b/src/assets/images/recharge/vip.png differ
diff --git a/src/assets/images/recharge/zk.png b/src/assets/images/recharge/zk.png
new file mode 100644
index 0000000..c788132
Binary files /dev/null and b/src/assets/images/recharge/zk.png differ
diff --git a/src/assets/images/recharge/zs.png b/src/assets/images/recharge/zs.png
new file mode 100644
index 0000000..4a9298c
Binary files /dev/null and b/src/assets/images/recharge/zs.png differ
diff --git a/src/assets/images/recharge/zz.png b/src/assets/images/recharge/zz.png
new file mode 100644
index 0000000..3acd2c1
Binary files /dev/null and b/src/assets/images/recharge/zz.png differ
diff --git a/src/components/AppRecharge/index.vue b/src/components/AppRecharge/index.vue
index fe5b434..9189a22 100644
--- a/src/components/AppRecharge/index.vue
+++ b/src/components/AppRecharge/index.vue
@@ -1,54 +1,234 @@
 <script lang="ts" setup>
-import {
-  CloseOutlined,
-} from '@ant-design/icons-vue'
-import { Button, QRCode } from 'ant-design-vue'
+import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
+import { Button, Carousel } from 'ant-design-vue'
 import { ref } from 'vue'
+import trumpet from '@/assets/images/recharge/lb.png'
 
-defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-})
-const emits = defineEmits(['update:show'])
-// 关闭弹窗
+import { useRechargeStore } from '@/store/moules/rechareStore'
+
+const rechargeStore = useRechargeStore()
+const carouselRef = ref()
+
+// 关闭充值弹窗
 function handleClose() {
-  emits('update:show', false)
-}
-// 下载二维码
-const qrcodeCanvasRef = ref()
-async function dowloadChange() {
-  const url = await qrcodeCanvasRef.value.toDataURL()
-  const a = document.createElement('a')
-  a.download = 'QRCode.png'
-  a.href = url
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
+  rechargeStore.rechargeClose()
+}
+// 选项卡目录
+const tabs = ref([
+  { title: '日套餐', active: true },
+  { title: '七日套餐', active: false },
+  { title: '月套餐', active: false },
+  { title: '年套餐', active: false },
+  { title: '至尊礼遇卡', active: false },
+])
+// 选项卡索引
+const activeTab = ref(0)
+const items = ref(['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8'])
+
+// 选中选项卡
+function selectTab(index: number) {
+  activeTab.value = index
+}
+// 选项卡样式
+function tabClass(index: number) {
+  if (index === activeTab.value) {
+    if (index === 0 || index === tabs.value.length - 1) {
+      return 'tab active triangle'
+    }
+    else {
+      return 'tab active square'
+    }
+  }
+  else {
+    return 'tab'
+  }
+}
+// 至尊权益
+const extreme = ref([{
+  num: 10000,
+  unit: '点数',
+  name: '同聪点数',
+}, {
+  num: '无限',
+  unit: '',
+  name: '可回答3.5版本问题',
+}, {
+  num: 5000,
+  unit: '条',
+  name: '可回答4.0版本问题',
+}, {
+  num: 10000,
+  unit: '幅',
+  name: '可生成图片',
+}])
+// 走马灯向上
+function onPrevClick() {
+  carouselRef.value.prev()
+}
+// 走马灯向下
+function onNextClick() {
+  carouselRef.value.next()
 }
 </script>
 
 <template>
   <transition name="modal">
-    <div v-if="show" class="modal-mask">
+    <div v-if="rechargeStore.getStatus" class="modal-mask">
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-body">
-            <div class="closeIcon" @click="handleClose">
-              <CloseOutlined style="color: #fff;" />
+            <div class="top">
+              <div class="tabs">
+                <div
+                  v-for="(tab, index) in tabs"
+                  :key="index"
+                  :class="tabClass(index)"
+                  @click="selectTab(index)"
+                >
+                  {{ tab.title }}
+                </div>
+              </div>
             </div>
+            <div class="bottom">
+              <div v-if="activeTab !== 4" class="basic-meal">
+                <div class="prev-button prev" @click="onPrevClick">
+                  <LeftOutlined />
+                </div>
+                <Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="3" :slides-to-scroll="1">
+                  <div v-for="(item, index) in items" :key="index" class="carouse-box">
+                    <div class="carouse-item">
+                      <div class="dotnumbox">
+                        <div class="dotnum">
+                          100点数
+                        </div>
+                        <div class="discount">
+                          限时折扣
+                        </div>
+                      </div>
+                      <div class="deadline">
+                        使用期限1个月
+                      </div>
+                      <div class="equitiesbox">
+                        <div class="equities">
+                          <div class="left">
+                            GPT3.5版本
+                          </div>
+                          <div class="right">
+                            250条
+                          </div>
+                        </div>
 
-            <div class="close" @click="handleClose">
-            </div>
-            <div class="qr">
-              <QRCode ref="qrcodeCanvasRef" :size="145" value="http://www.antdv.com" />
+                        <div class="equities">
+                          <div class="left">
+                            GPT4.0版本
+                          </div>
+                          <div class="right">
+                            25条
+                          </div>
+                        </div>
+                        <div class="equities">
+                          <div class="left">
+                            AI绘图
+                          </div>
+                          <div class="right">
+                            50幅
+                          </div>
+                        </div>
+                      </div>
+                      <div class="price">
+                        <div class="nowprice">
+                          ¥39.9
+                        </div>
+                        <div class="oldprice">
+                          ¥50.00
+                        </div>
+                      </div>
+                      <div class="payBtn">
+                        <Button class="customBtn">
+                          立即充值
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </Carousel>
+                <div class="next-button next" @click="onNextClick">
+                  <RightOutlined />
+                </div>
+                <div class="line">
+                  <div class="colorLine"></div>
+                </div>
+                <div class="broadcastBox">
+                  <div class="broadcast">
+                    <div class="trumpet">
+                      <img :src="trumpet" alt="">
+                    </div>
+                    <div class="marquee">
+                      <div class="content">
+                        <span>这是第一条滚动的公告</span>
+                        <span>这是第二条滚动的公告</span>
+                        <span>这是第三条滚动的公告</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="extreme-box">
+                <div class="extreme">
+                  <div class="extremebg">
+                    <div class="extremename">
+                      <div class="bigname">
+                        至尊礼遇卡
+                      </div>
+                      <div class="smallname">
+                        让生活更简单，让灵感转化更高效
+                      </div>
+                    </div>
+                  </div>
+                  <div class="extremeequity">
+                    <div class="quitytitle">
+                      <div class="quitytitle-left">
+                        畅享至尊权益
+                      </div>
+                      <div class="quitytitle-right">
+                        开通至尊礼遇卡，畅快协作，使用无忧
+                      </div>
+                    </div>
+
+                    <div class="extremeequitynum">
+                      <div v-for="(item, index) in extreme" :key="index" class="extremeequitynum-box">
+                        <div class="extremeequitynum-box-top">
+                          <span class="num">{{ item.num }}</span>
+                          <span class="unit">{{ item.unit }}</span>
+                        </div>
+                        <div class="extremeequitynum-box-bottom">
+                          {{ item.name }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="extremeopen">
+                    <div class="openleft">
+                      <span class="freeprice">畅享价：</span>
+                      <span class="newprice">¥2999</span>
+                      <span class="oldprice">¥4999</span>
+                    </div>
+                    <div class="openright">
+                      <div class="year">
+                        使用期限1年
+                      </div>
+                      <div class="immediately">
+                        立即开通
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-            <Button type="primary" class="save-qr" @click="dowloadChange">
-              保存二维码
-            </Button>
           </div>
         </div>
+        <div class="close" @click="handleClose">
+          <CloseOutlined />
+        </div>
       </div>
     </div>
   </transition>
@@ -57,70 +237,346 @@ async function dowloadChange() {
   <style scoped lang="scss">
   .modal-mask {
   position: fixed;
-  z-index: 9999;
+
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
+  background-color: rgba(0, 0, 0, 0.1);
+  .close {
+    position: absolute;
+    top: 5px;
+    right: -40px;
+    width: 27px;
+    height: 27px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    line-height: 27px;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+  }
   .modal-wrapper {
+    width: 60%;
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    transform: translateX(-50%);
     background-color: #fff;
-  }
+    box-shadow: 0px 4px 10px 0px rgba(163, 163, 163, 0.6);
+    border-radius: 22px;
+    .modal-body {
+      position: relative;
+      .top {
+        width: 100%;
+        background-color: #fff2e1;
+        border-top-left-radius: 22px;
+        border-top-right-radius: 22px;
+      }
 
-  .modal-body {
-    width: 530px;
-    height: 300px;
-    background-image: url('@/assets/images/task/invite.png');
-    background-size: 100% 100%;
-    position: relative;
-    .closeIcon {
-      position: absolute;
-      top: 0;
-      right: 5px;
-      z-index: 2;
-      cursor: pointer;
-    }
-    .close {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      right: 0;
-      width: 35px;
-      height: 35px;
-      background-image: linear-gradient(180deg, #5c94f7 0%, #4060e0 100%);
-      clip-path: polygon(100% 100%, 100% 0, 0 0);
-      z-index: 1;
-    }
-    .qr {
-      position: absolute;
-      top: 93px;
-      left: 50%;
-      transform: translate(-50%);
-    }
-    .save-qr {
-      cursor: pointer;
-      width: 130px;
-      height: 32px;
-      background: #4670e3;
-      border-radius: 20px;
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-
-      text-align: center;
-      font-size: 13px;
-      font-family:
-        PingFangSC,
-        PingFang SC;
-      font-weight: 400;
-      color: #ffffff;
+      .bottom {
+        width: 100%;
+        // 基础套餐
+        .basic-meal {
+          width: 90%;
+          margin: 30px auto 0;
+          position: relative;
+          padding-bottom: 30px;
+          .prev-button,
+          .next-button {
+            width: 25px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.68);
+            box-shadow: 0px 0px 6px 0px rgba(166, 166, 166, 0.5);
+            border-radius: 5px;
+            line-height: 35px;
+            text-align: center;
+            cursor: pointer;
+            position: absolute;
+            z-index: 1;
+            top: 35%;
+            &.prev {
+              left: 5px;
+            }
+            &.next {
+              right: 5px;
+            }
+          }
+
+          .line {
+            width: 95%;
+            margin: 20px auto;
+            height: 1px;
+            border: 1px solid #ede0d9;
+            .colorLine {
+              width: 17%;
+              height: 1px;
+              background-color: #a46443;
+            }
+          }
+          .broadcastBox {
+            width: 95%;
+            margin: 0 auto;
+
+            .broadcast {
+              width: 100%;
+              height: 30px;
+              background: #fff5e5;
+              border-radius: 3px;
+              border: 1px solid #ff9b00;
+              display: flex;
+              align-items: center;
+              .marquee {
+                width: 90%;
+                overflow: hidden;
+
+                .content {
+                  display: flex;
+                  white-space: nowrap;
+                  animation: scrolling 10s linear infinite;
+                  span {
+                    display: inline-block;
+                    margin-right: 100px;
+                    padding: 0 20px;
+                    background: #fbe6c4;
+                    border-radius: 4px;
+                    font-size: 12px;
+                    font-family: PingFang-SC, PingFang-SC;
+                    letter-spacing: 1px;
+                    color: #a16242;
+                  }
+                  @keyframes scrolling {
+                    0% {
+                      transform: translateX(100%);
+                    }
+                    100% {
+                      transform: translateX(-100%);
+                    }
+                  }
+                }
+              }
+              .trumpet {
+                width: 10%;
+                text-align: center;
+              }
+            }
+          }
+        }
+        // 至尊vip
+        .extreme-box {
+          width: 100%;
+          height: 400px;
+          background-image: url(@/assets/images/recharge/zz.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+
+          .extreme {
+            width: 85%;
+            height: 100%;
+            margin: 0 auto;
+            padding: 30px 0;
+            .extremebg {
+              width: 97%;
+              height: 140px;
+              margin: 0 auto;
+              background-image: url(@/assets/images/recharge/zs.png);
+              background-size: cover;
+              background-position: center;
+              background-repeat: no-repeat;
+              position: relative;
+              z-index: 4;
+              .extremename {
+                position: absolute;
+                top: 30px;
+                left: 40px;
+                .bigname {
+                  font-size: 30px;
+                  font-family: FZQKBYSJW--GB1, FZQKBYSJW--GB1;
+                  font-weight: normal;
+                  color: #141c3b;
+                  letter-spacing: 9px;
+                  -webkit-text-stroke: 1px #141c3b;
+                }
+                .smallname {
+                  font-size: 14px;
+                  font-family:
+                    PingFangSC,
+                    PingFang SC;
+                  font-weight: 400;
+                  color: #212a4b;
+                  line-height: 25px;
+                }
+              }
+            }
+
+            .extremeequity {
+              position: relative;
+              width: 100%;
+              // height: 150px;
+              background-image: url(@/assets/images/recharge/quity.png);
+              background-size: cover;
+              margin-top: -16px;
+              z-index: 5;
+              padding-bottom: 20px;
+              .quitytitle {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                padding-top: 17px;
+                &-left {
+                  font-size: 17px;
+                  font-family: PingFang-SC, PingFang-SC;
+                  font-weight: 600;
+                  color: #fffaf6;
+                  padding-left: 40px;
+                  letter-spacing: 2px;
+                }
+                &-right {
+                  font-size: 14px;
+                  font-family:
+                    PingFangSC,
+                    PingFang SC;
+                  font-weight: 400;
+                  color: #78d6fe;
+                  line-height: 22px;
+                  letter-spacing: 1px;
+                  padding-left: 30px;
+                }
+              }
+              .extremeequitynum {
+                width: 100%;
 
-      letter-spacing: 1px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                &-box {
+                  width: 20%;
+                  height: 100px;
+                  background-color: #1d134e;
+                  background: rgba(233, 230, 255, 0.06);
+                  border-radius: 8px;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  margin-top: 10px;
+
+                  &-top {
+                    font-family: DingTalk, DingTalk;
+                    font-weight: normal;
+                    color: #ffe9d5;
+                    .num {
+                      font-size: 25px;
+                    }
+                    .unit {
+                      font-size: 15px;
+                    }
+                  }
+                  &-bottom {
+                    font-size: 12px;
+                    font-family:
+                      PingFangSC,
+                      PingFang SC;
+                    font-weight: 400;
+                    color: #fcf9f6;
+                    line-height: 20px;
+                    letter-spacing: 1px;
+                  }
+                }
+              }
+            }
+            .extremeopen {
+              width: 97%;
+              height: 50px;
+              display: flex;
+              margin: 10px auto;
+              background: linear-gradient(90deg, #4e3f92 0%, #1b084a 100%);
+              border-radius: 20px;
+              border-image: linear-gradient(
+                  133deg,
+                  rgba(137, 104, 228, 1),
+                  rgba(121, 85, 185, 1)
+                )
+                1 1;
+              .openleft {
+                width: 50%;
+                height: 100%;
+                .freeprice {
+                  font-size: 15px;
+                  font-family: PingFang-SC, PingFang-SC;
+                  font-weight: 800;
+                  color: #ffffff;
+                  padding-left: 20px;
+                  letter-spacing: 1px;
+                }
+                .newprice {
+                  font-size: 30px;
+                  font-family: PingFang-SC, PingFang-SC;
+                  font-weight: 800;
+                  color: #70d2ff;
+                  letter-spacing: 4px;
+                  -webkit-text-stroke: 1px #41d5ff;
+                  padding-left: 20px;
+                }
+                .oldprice {
+                  font-size: 13px;
+                  font-family:
+                    PingFangSC,
+                    PingFang SC;
+                  font-weight: 400;
+                  color: #ffffff;
+                  text-decoration: line-through;
+                  padding-left: 10px;
+                }
+              }
+              .openright {
+                width: 50%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                .year {
+                  flex: 1;
+                  font-size: 10px;
+                  font-family:
+                    PingFangSC,
+                    PingFang SC;
+                  font-weight: 400;
+                  color: #78d6fe;
+                  letter-spacing: 1px;
+                }
+                .immediately {
+                  cursor: pointer;
+                  flex: 3;
+                  align-items: center;
+                  height: 100%;
+                  background: linear-gradient(
+                    135deg,
+                    #69cfff 0%,
+                    #b4f2fd 38%,
+                    #c7c8fe 62%,
+                    #c8a1fd 100%
+                  );
+                  border-radius: 60px;
+                  border-image: linear-gradient(
+                      133deg,
+                      rgba(137, 104, 228, 1),
+                      rgba(121, 85, 185, 1)
+                    )
+                    1 1;
+                  font-size: 18px;
+                  font-family: PingFang-SC, PingFang-SC;
+                  font-weight: 800;
+                  color: #212a4b;
+                  line-height: 50px;
+                  text-align: center;
+
+                  letter-spacing: 1px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -139,3 +595,177 @@ async function dowloadChange() {
   opacity: 1;
 }
 </style>
+
+<!-- tabs -->
+<style scoped>
+.tabs {
+  display: flex;
+  border-top-left-radius: 22px;
+  border-top-right-radius: 22px;
+  overflow: hidden;
+}
+
+.tab {
+  flex: 1;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff2e1;
+  font-size: 14px;
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: bold;
+  color: #6b2d01;
+  overflow: hidden;
+  letter-spacing: 2px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+.tab:not(:last-child)::after {
+  content: '';
+  border-right: 1px solid #f1d7b6;
+  position: absolute;
+  top: 0;
+  bottom: 6px;
+  right: 0;
+}
+.tab:last-child::before {
+  content: '';
+  display: inline-block;
+  width: 30px; /* 调整宽度 */
+  height: 30px; /* 调整高度 */
+  background-image: url('@/assets/images/recharge/vip.png');
+  background-size: contain; /* 背景图片保持比例填充 */
+  background-repeat: no-repeat; /* 防止背景图片重复 */
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.tab.active.square {
+  background-color: white;
+}
+
+.tab.active.triangle:first-child {
+  border-top-left-radius: 12px;
+  background-color: white;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+}
+
+.tab.active.triangle:last-child {
+  background-color: #0f0745;
+  color: #ffac72;
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
+}
+</style>
+
+<!-- 走马灯 -->
+<style scoped lang="scss">
+.carouse-box {
+  padding: 0 20px;
+  .carouse-item {
+    width: 100%;
+    padding: 10px 20px;
+    background: linear-gradient(118deg, #f9f5e6 0%, #f1d7b6 100%);
+    border-radius: 15px;
+    border-image: linear-gradient(
+        135deg,
+        rgba(255, 240, 206, 1),
+        rgba(213, 170, 139, 1)
+      )
+      3 3;
+    justify-content: center;
+    height: 260px;
+    cursor: pointer;
+    align-items: center;
+    .dotnumbox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .dotnum {
+        font-size: 20px;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 800;
+        color: #6b2d01;
+        letter-spacing: 1px;
+      }
+      .discount {
+        margin-right: -20px;
+        width: 80px;
+        height: 22px;
+        background-image: url('@/assets/images/recharge/zk.png');
+        background-size: 100% 100%;
+        font-size: 12px;
+        text-align: center;
+        padding-left: 5px;
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+      }
+    }
+    .deadline {
+      font-size: 12px;
+      font-family:
+        PingFangSC,
+        PingFang SC;
+      font-weight: 400;
+      color: #d39764;
+    }
+    .equitiesbox {
+      margin-top: 10px;
+      .equities {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 12px;
+        padding: 5px 0;
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 400;
+        color: #6b2d01;
+        line-height: 20px;
+      }
+    }
+    .price {
+      margin-top: 5px;
+      display: flex;
+      align-items: flex-end;
+      .nowprice {
+        font-size: 27px;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 800;
+        color: #6b2d01;
+
+        letter-spacing: 4px;
+      }
+      .oldprice {
+        margin-left: 10px;
+        font-size: 14px;
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 400;
+        color: #b38d6a;
+        padding-bottom: 5px;
+        letter-spacing: 1px;
+        text-decoration: line-through;
+      }
+    }
+    .payBtn {
+      margin-top: 5px;
+      .customBtn {
+        width: 100%;
+        height: 35px;
+        background: linear-gradient(135deg, #ab6745 0%, #6b4831 100%);
+        border-radius: 8px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/AppUserInfo/index.vue b/src/components/AppUserInfo/index.vue
index a1ddf42..8938589 100644
--- a/src/components/AppUserInfo/index.vue
+++ b/src/components/AppUserInfo/index.vue
@@ -1,11 +1,18 @@
 <!-- 子菜单与内容容器布局组件 -->
 <script setup lang="ts">
 import { Divider } from 'ant-design-vue'
+
 import money from '@/assets/images/money.png'
 import { useUserStore } from '@/store/moules/userStore/index'
+import { useRechargeStore } from '@/store/moules/rechareStore'
 
+const rechargeStore = useRechargeStore()
 const userStore = useUserStore()
-console.log(userStore.getChatInfo)
+const info = userStore.getChatInfo
+
+function handleRecharge() {
+  rechargeStore.rechargeOpen()
+}
 </script>
 
 <template>
@@ -18,16 +25,16 @@ console.log(userStore.getChatInfo)
         </div>
       </div>
       <div class="num">
-        99
+        {{ info.questionCount > 0 ? info?.questionCount : 0 }}
       </div>
-      <div class="pay">
+      <div class="pay" @click="handleRecharge">
         充值
       </div>
     </div>
     <div class="app-user-info-bottom">
       <div>
         <div class="accumulative">
-          1321
+          {{ info?.messageCount }}
         </div>
         <div class="accumulativename">
           累计提问
@@ -36,7 +43,7 @@ console.log(userStore.getChatInfo)
       <Divider type="vertical" style="height: 30px; background-color: #e1e9f9" />
       <div>
         <div class="accumulative">
-          3415天
+          {{ info?.createdDay }}天
         </div>
         <div class="accumulativename">
           来到同聪
@@ -101,6 +108,7 @@ console.log(userStore.getChatInfo)
       font-weight: 400;
       color: #ffffff;
       line-height: 20px;
+      cursor: pointer;
     }
   }
   &-bottom {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index dba5755..51725d9 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import AppMain from './AppMain/index.vue'
 import AppMenu from './AppMenu/index.vue'
+import { AppRecharge } from '@/components/AppRecharge/index'
 </script>
 
 <template>
   <div class="app-wrapper flex justify-between items-center">
     <AppMenu />
     <AppMain />
+    <AppRecharge />
   </div>
 </template>
 
diff --git a/src/store/moules/rechareStore/index.ts b/src/store/moules/rechareStore/index.ts
new file mode 100644
index 0000000..0c6dc5f
--- /dev/null
+++ b/src/store/moules/rechareStore/index.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+
+export const useRechargeStore = defineStore('useRechargeStore', {
+  state: () => {
+    return {
+      show: false,
+    }
+  },
+  getters: {
+    getStatus(): boolean {
+      return this.show
+    },
+  },
+  actions: {
+    rechargeOpen() {
+      this.show = true
+    },
+    rechargeClose() {
+      this.show = false
+    },
+  },
+
+})
diff --git a/src/store/moules/userStore/index.d.ts b/src/store/moules/userStore/index.d.ts
index ad58d7f..c55dae8 100644
--- a/src/store/moules/userStore/index.d.ts
+++ b/src/store/moules/userStore/index.d.ts
@@ -19,4 +19,7 @@ export interface UserInfoType {
 export interface ChatInfoType {
   id: string
   chatCode: string
+  questionCount: number
+  messageCount: number
+  createdDay: number
 }
diff --git a/src/views/conversation/index.vue b/src/views/conversation/index.vue
index 516b689..7fd60d2 100644
--- a/src/views/conversation/index.vue
+++ b/src/views/conversation/index.vue
@@ -14,6 +14,7 @@ import { useMessageStore } from '@/store/moules/messageStore/index'
 import { MessageStatusEnum, MessageTypeEnum } from '@/enums/messageEnum'
 import { conversationList, historyMessage } from '@/api/base/message'
 import { useMqtt } from '@/hooks/useMqtt'
+import { AppUserInfo } from '@/components/AppUserInfo'
 
 const messageStore = useMessageStore()
 
@@ -174,6 +175,7 @@ onBeforeRouteLeave(() => {
         @change="handleSubMenuChange"
       >
       </AppSubMenuList>
+      <AppUserInfo />
     </template>
     <template #content>
       <!-- 默认导语 -->
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
index b19692c..af46799 100644
--- a/src/views/role/index.vue
+++ b/src/views/role/index.vue
@@ -6,6 +6,7 @@ import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
 import { AppSubMenuList } from '@/components/AppSubMenuList'
 import { AppRoleDefault } from '@/components/AppRoleDefault'
 import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
+import { AppUserInfo } from '@/components/AppUserInfo'
 
 const subMenuActive = ref(0)
 const subMenuList = ref<SubMenuItem[]>([
@@ -36,6 +37,7 @@ function handleSubMenuChange(index: number) {
         </Button>
       </div> -->
       <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
+      <AppUserInfo />
     </template>
     <template #content>
       <AppRoleDefault></AppRoleDefault>
diff --git a/src/views/textToPicture/index.vue b/src/views/textToPicture/index.vue
index 512b931..b7b4bd8 100644
--- a/src/views/textToPicture/index.vue
+++ b/src/views/textToPicture/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { AppContainerBox } from '@/components/AppContainerBox'
+import { AppUserInfo } from '@/components/AppUserInfo'
 </script>
 
 <template>
   <AppContainerBox>
     <template #subMenu>
       我是子菜单
+
+      <AppUserInfo />
     </template>
     <template #content>
       我是文生图区域