fix: fixed bug #70, XunFei 1.5 url version map error

web/src/views/mobile/Apps.vue

@@ -0,0 +1,15 @@
+<template>
+<div class="app-background">
+  <div class="mobile-setting container">
+    <div class="title" style="padding-top: 50px">应用广场</div>
+    <div class="title" style="padding-top: 200px">视频生成器即将开启……敬请期待</div>
+  </div>
+</div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="stylus">
+@import "@/assets/css/mobile-apps.styl"
+</style>

web/src/views/mobile/ChatList.vue

@@ -1,9 +1,12 @@
 <template>
+<div class="app-background">
   <div v-if="isLogin" class="container mobile-chat-list">
     <van-nav-bar
         :title="title"
         left-text="新建会话"
-        @click-left="showPicker = true">
+        @click-left="showPicker = true"
+        custom-class="navbar"
+        >
       <template #right>
         <van-icon name="delete-o" @click="clearAllChatHistory"/>
       </template>
@@ -14,6 +17,7 @@
           v-model="chatName"
           input-align="center"
           placeholder="请输入会话标题"
+          custom-class="van-search"
           @input="search"
       />
 
@@ -42,8 +46,9 @@
         </van-swipe-cell>
       </van-list>
     </div>
+  </div>
 
-    <van-popup v-model:show="showPicker" position="bottom">
+    <van-popup v-model:show="showPicker" position="bottom" class="popup">
       <van-picker
           :columns="columns"
           title="选择模型和角色"
@@ -64,13 +69,13 @@
       </van-picker>
     </van-popup>
 
-    <van-dialog v-model:show="showEditChat" title="修改对话标题" show-cancel-button @confirm="saveTitle">
-      <van-field v-model="tmpChatTitle" label="" placeholder="请输入对话标题"/>
+    <van-dialog v-model:show="showEditChat" title="修改对话标题" show-cancel-button class="dialog" @confirm="saveTitle">
+      <van-field v-model="tmpChatTitle" label="" placeholder="请输入对话标题" class="field"/>
     </van-dialog>
 
     <bind-mobile v-if="isLogin" :show="showBindMobileDialog" :mobile="loginUser.mobile"
                  @hide="showBindMobileDialog = false"/>
-  </div>
+</div>
 </template>
 
 <script setup>
@@ -260,49 +265,5 @@ const removeChat = (item) => {
 </script>
 
 <style lang="stylus" scoped>
-$fontSize = 16px;
-.mobile-chat-list {
-
-  .content {
-    .van-cell__value {
-      .chat-list-item {
-        display flex
-        font-size $fontSize
-
-        .van-image {
-          min-width 32px
-          width 32px
-          height 32px
-        }
-
-        .van-ellipsis {
-          margin-top 5px;
-          margin-left 10px;
-        }
-      }
-    }
-  }
-
-  .van-picker-column {
-    .picker-option {
-      display flex
-      width 100%
-      padding 0 10px
-
-      .van-image {
-        width 20px;
-        height 20px;
-        margin-right 5px
-      }
-    }
-  }
-
-  .van-nav-bar {
-    .van-nav-bar__right {
-      .van-icon {
-        font-size 20px;
-      }
-    }
-  }
-}
+@import "@/assets/css/mobile-chat-list.styl"
 </style>

web/src/views/mobile/ChatSession.vue

@@ -1,8 +1,9 @@
 <template>
-  <van-config-provider :theme="getMobileTheme()">
+  <div class="app-background">
+  <van-config-provider theme="dark">
     <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
-      <van-sticky ref="navBarRef" :offset-top="0" position="top">
-        <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
+  <van-sticky ref="navBarRef" :offset-top="0" position="top">
+    <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
           <template #title>
             <van-dropdown-menu>
               <van-dropdown-item :title="title">
@@ -15,6 +16,7 @@
           <template #right>
             <van-icon name="share-o" @click="showShare = true"/>
           </template>
+
         </van-nav-bar>
       </van-sticky>
 
@@ -25,7 +27,8 @@
           @select="shareChat"
       />
 
-      <div id="message-list-box" :style="{height: winHeight+'px'}" class="message-list-box">
+      <div class="chat-list-wrapper">  
+      <div id="message-list-box" :style="{height: winHeight + 'px'}" class="message-list-box">
         <van-list
             v-model:error="error"
             :finished="finished"
@@ -57,32 +60,34 @@
           </van-cell>
         </van-list>
       </div>
-
+      </div>
+      <div class="chat-box-wrapper">
       <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
-        <div class="chat-box">
-          <van-cell-group>
-            <van-field
-                v-model="prompt"
-                center
-                clearable
-                placeholder="输入你的问题"
-            >
-              <template #button>
-                <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
-              </template>
-              <template #extra>
-                <div class="icon-box">
-                  <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
-                  <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
-                </div>
-              </template>
-            </van-field>
-          </van-cell-group>
-        </div>
+
+        <van-cell-group inset>
+          <van-field
+          v-model="prompt"
+          center
+          clearable
+          placeholder="输入你的问题"
+          >
+            <template #button>
+              <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
+            </template>
+            <template #extra>
+              <div class="icon-box">
+                <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
+                <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
+              </div>
+            </template>
+          </van-field>
+        </van-cell-group>
+
       </van-sticky>
     </div>
+  </div>
   </van-config-provider>
-
+</div>
 </template>
 
 <script setup>
@@ -101,6 +106,11 @@ import {checkSession} from "@/action/session";
 import {getMobileTheme} from "@/store/system";
 import ChatMidJourney from "@/components/mobile/ChatMidJourney.vue";
 
+import QRCode from "qrcode";
+import {ElMessage} from "element-plus";
+import Clipboard from "clipboard";
+import InviteList from "@/components/InviteList.vue";
+
 const winHeight = ref(0)
 const navBarRef = ref(null)
 const bottomBarRef = ref(null)
@@ -114,6 +124,16 @@ const title = chatConfig.title
 const chatId = chatConfig.chatId
 const loginUser = ref(null)
 
+const listBoxHeight = window.innerHeight
+const inviteURL = ref("")
+const qrImg = ref("")
+const inviteChatCalls = ref(0)
+const inviteImgCalls = ref(0)
+const hits = ref(0)
+const regNum = ref(0)
+const rate = ref(0)
+const isLogin = ref(false)
+
 onMounted(() => {
   winHeight.value = document.body.offsetHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
 })
@@ -385,59 +405,10 @@ const shareOptions = [
 ]
 const shareChat = () => {
   showShare.value = false
-  showToast('功能待开发')
+  router.push('/mobile/Invitation');
 }
 </script>
 
 <style lang="stylus" scoped>
-.mobile-chat {
-  .message-list-box {
-    padding-top 50px
-    padding-bottom 10px
-    overflow-x auto
-    background #F5F5F5;
-
-    .van-cell {
-      background none
-      font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    }
-  }
-
-  .chat-box {
-    .icon-box {
-      .van-icon {
-        font-size 24px
-        margin-left 10px;
-      }
-    }
-  }
-}
-
-.van-theme-dark {
-  .mobile-chat {
-    .message-list-box {
-      background #232425;
-    }
-  }
-}
-</style>
-
-<style lang="stylus">
-.mobile-chat {
-  .van-nav-bar__title {
-    .van-dropdown-menu__title {
-      margin-right 10px
-    }
-
-    .van-cell__title {
-      text-align left
-    }
-  }
-
-  .van-nav-bar__right {
-    .van-icon {
-      font-size 20px
-    }
-  }
-}
+@import "@/assets/css/mobile-chat-session.css"
 </style>

web/src/views/mobile/Home.vue

@@ -1,17 +1,26 @@
 <template>
-  <van-config-provider :theme="getMobileTheme()">
+<div class="banner">
+  <h1 class="banner-title">ChatPuls-V3 智能助理</h1>
+</div>
+  <van-config-provider theme="dark">
     <div class="mobile-home">
       <router-view/>
-
-      <van-tabbar route v-model="active" @change="onChange">
-        <van-tabbar-item to="/mobile/chat/list" name="home" icon="chat-o"></van-tabbar-item>
-        <van-tabbar-item to="/mobile/setting" name="setting" icon="setting-o"></van-tabbar-item>
-        <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o"></van-tabbar-item>
+      <van-tabbar 
+        fixed
+        route 
+        v-model="active"
+        active-color="#F5F5F5" 
+        inactive-color="#2CC995" 
+        class="my-tabbar"
+      >
+        <van-tabbar-item to="/mobile/chat/list" name="home" icon="chat-o">对话</van-tabbar-item>
+        <van-tabbar-item to="/mobile/imageSd" name="imageSd" icon="photo-o">绘图</van-tabbar-item>
+        <van-tabbar-item to="/mobile/apps" name="apps" icon="apps-o">应用</van-tabbar-item>
+        <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
+        <van-tabbar-item to="/mobile/invitation" name="invitation" icon="share-o">分享</van-tabbar-item>
       </van-tabbar>
-
     </div>
   </van-config-provider>
-
 </template>
 
 <script setup>
@@ -38,33 +47,6 @@ const onChange = (index) => {
 
 </script>
 
-<style lang="stylus">
-.mobile-home {
-  .container {
-    .van-nav-bar {
-      position fixed
-      width 100%
-    }
-
-    .content {
-      padding 46px 10px 0 10px;
-    }
-  }
-
-}
-
-// 黑色主题
-.van-theme-dark body {
-  background #1c1c1e
-}
-
-.van-toast--fail {
-  background #fef0f0
-  color #f56c6c
-}
-
-.van-nav-bar {
-  position fixed
-  width 100%
-}
-</style>
+<style lang="stylus" scoped>
+@import "@/assets/css/mobile-home.css"
+</style>

web/src/views/mobile/ImageSd.vue

@@ -0,0 +1,657 @@
+<template>
+  <div class="page-sd" theme="dark">
+    <div class="inner">
+      <div class="sd-box" style="padding-top: 35px">
+        <h2>Ai绘图</h2>
+        <div class="sd-params" :style="{ height: mjBoxHeight + 'px' }">
+          <el-form :model="params" label-width="80px" label-position="left">
+            <div class="param-line" style="padding-top: 10px">
+              <el-form-item label="采样方法">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-select v-model="params.sampler" size="small">
+                      <el-option v-for="item in samplers" :label="item" :value="item" :key="item"/>
+                    </el-select>
+                    <el-tooltip
+                        effect="light"
+                        content="出图效果比较好的一般是 Euler 和 DPM 系列算法"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="图片尺寸">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-row :gutter="20">
+                      <el-col :span="12">
+                        <el-input v-model.number="params.width" size="small" placeholder="图片宽度"/>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-input v-model.number="params.height" size="small" placeholder="图片高度"/>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+<!-- 这是一个示例注释
+            <div class="param-line">
+              <el-form-item label="迭代步数">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model.number="params.steps" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="值越大则代表细节越多，同时也意味着出图速度越慢"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="引导系数">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model.number="params.cfg_scale" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="随机因子">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model.number="params.seed" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+
+                    <el-tooltip
+                        effect="light"
+                        content="使用随机数"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon @click="params.seed = -1">
+                        <Orange/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+ -->
+ <!-- 这是一个示例注释
+            <div class="param-line">
+              <el-form-item label="面部修复">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-switch v-model="params.face_fix" style="--el-switch-on-color: #47fff1;"/>
+                    <el-tooltip
+                        effect="light"
+                        content="仅对绘制人物图像有效果。"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon style="margin-top: 6px">
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="高清修复">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
+                    <el-tooltip
+                        effect="light"
+                        content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon style="margin-top: 6px">
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div v-show="params.hd_fix">
+              <div class="param-line">
+                <el-form-item label="重绘幅度">
+                  <template #default>
+                    <div class="form-item-inner">
+                      <el-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
+                                 style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
+                      <el-tooltip
+                          effect="light"
+                          content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
+                          raw-content
+                          placement="right"
+                      >
+                        <el-icon style="margin-top: 6px">
+                          <InfoFilled/>
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-form-item>
+              </div>
+
+              <div class="param-line">
+                <el-form-item label="放大算法">
+                  <template #default>
+                    <div class="form-item-inner">
+                      <el-select v-model="params.hd_scale_alg" size="small">
+                        <el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
+                      </el-select>
+                      <el-tooltip
+                          effect="light"
+                          content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
+                          raw-content
+                          placement="right"
+                      >
+                        <el-icon>
+                          <InfoFilled/>
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-form-item>
+              </div>
+
+              <div class="param-line">
+                <el-form-item label="放大倍数">
+                  <template #default>
+                    <div class="form-item-inner">
+                      <el-input v-model.number="params.hd_scale" size="small"/>
+                      <el-tooltip
+                          effect="light"
+                          content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
+                          raw-content
+                          placement="right"
+                      >
+                        <el-icon>
+                          <InfoFilled/>
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-form-item>
+              </div>
+
+              <div class="param-line">
+                <el-form-item label="迭代步数">
+                  <template #default>
+                    <div class="form-item-inner">
+                      <el-input v-model.number="params.hd_steps" size="small"/>
+                      <el-tooltip
+                          effect="light"
+                          content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
+                          raw-content
+                          placement="right"
+                      >
+                        <el-icon>
+                          <InfoFilled/>
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-form-item>
+              </div>
+            </div>
+ -->
+            <div class="param-line" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
+              <el-input
+                  v-model="params.prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  ref="promptRef"
+                  placeholder="正向提示词，例如：“一个中国女孩，黑色的长发，穿着职业女装走在深圳夜晚的街头，看着街上的车流”，输入后点击翻译或翻译并重写按钮后点击生成。"
+              />
+            </div>
+
+            <div style="padding: 10px">
+              <el-button type="primary" @click="translatePrompt" size="small">
+                <el-icon style="margin-right: 6px;font-size: 18px;">
+                  <Refresh/>
+                </el-icon>
+                翻译
+              </el-button>
+
+              <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  raw-content
+                  content="使用 AI 翻译并重写提示词，<br/>增加更多细节，风格等描述"
+                  placement="top-end"
+              >
+                <el-button type="success" @click="rewritePrompt" size="small">
+                  <el-icon style="margin-right: 6px;font-size: 18px;">
+                    <Refresh/>
+                  </el-icon>
+                  翻译并重写
+                </el-button>
+              </el-tooltip>
+              <el-tag type="success"  style="margin-left: 12px;">绘图可用额度：{{ imgCalls }}</el-tag>
+            </div>
+<!--
+            <div class="param-line pt">
+              <span>反向提示词：</span>
+              <el-tooltip
+                  effect="light"
+                  content="不希望出现的元素，下面给了默认的起手式"
+                  placement="right"
+              >
+                <el-icon>
+                  <InfoFilled/>
+                </el-icon>
+              </el-tooltip>
+            </div>
+            <div class="param-line">
+              <el-input
+                  v-model="params.negative_prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  placeholder="反向提示词"
+              />
+            </div>
+-->
+          </el-form>
+        </div>
+        <div class="submit-btn">
+          <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
+        </div>
+        <div class="task-list-box">
+        <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
+          <h2>任务列表</h2>
+          <div class="running-job-list">
+            <ItemList :items="runningJobs" v-if="runningJobs.length > 0" width="240">
+              <template #default="scope">
+                <div class="job-item">
+                  <div v-if="scope.item.progress > 0" class="job-item-inner">
+                    <el-image :src="scope.item['img_url']"
+                              fit="cover"
+                              loading="lazy">
+                      <template #placeholder>
+                        <div class="image-slot">
+                          正在加载图片
+                        </div>
+                      </template>
+
+                      <template #error>
+                        <div class="image-slot">
+                          <el-icon v-if="scope.item['img_url'] !== ''">
+                            <Picture/>
+                          </el-icon>
+                        </div>
+                      </template>
+                    </el-image>
+
+                    <div class="progress">
+                      <el-progress type="circle" :percentage="scope.item.progress" :width="100" color="#47fff1"/>
+                    </div>
+                  </div>
+                  <el-image fit="cover" v-else>
+                    <template #error>
+                      <div class="image-slot">
+                        <i class="iconfont icon-quick-start"></i>
+                        <span>任务正在排队中</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </template>
+            </ItemList>
+            <el-empty :image-size="100" v-else/>
+          </div>
+          <h2>创作记录</h2>
+          <div class="finish-job-list">
+            <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0" width="480" :gap="20">
+              <template #default="scope">
+                <div class="job-item animate" @click="showTask(scope.item)">
+                  <el-image
+                      :src="scope.item['img_url']+'?imageView2/1/w/480/h/480/q/75'"
+                      fit="cover"
+                      loading="lazy">
+                    <template #placeholder>
+                      <div class="image-slot">
+                        正在加载图片
+                      </div>
+                    </template>
+
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon>
+                          <Picture/>
+                        </el-icon>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </template>
+            </ItemList>
+            <el-empty :image-size="100" v-else/>
+          </div> <!-- end finish job list-->
+        </div>
+      </div><!-- end task list box -->
+      </div>
+    </div>
+    <el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
+      <el-row class="mobile-form-row">
+        <el-col :span="24" class="mobile-form-col">
+          <div class="img-container" :style="{maxHeight: fullImgHeight+'px'}">
+            <el-image :src="item['img_url']" fit="contain"/>
+          </div>
+          <el-col :span="50">
+          <div class="task-info">
+            <div class="info-line">
+              <el-divider>
+                正向提示词
+              </el-divider>
+              <div class="prompt">
+                <span>{{ item.prompt }}</span>
+                <el-icon class="copy-prompt" :data-clipboard-text="item.prompt">
+                  <DocumentCopy/>
+                </el-icon>
+              </div>
+
+            </div>
+
+            <div class="info-line">
+              <el-divider>
+                反向提示词
+              </el-divider>
+              <div class="prompt">
+                <span>{{ item.params.negative_prompt }}</span>
+                <el-icon class="copy-prompt" :data-clipboard-text="item.params.negative_prompt">
+                  <DocumentCopy/>
+                </el-icon>
+              </div>
+            </div>
+            <div class="info-line">
+              <div class="wrapper">
+                <label>采样方法：</label>
+                <div class="item-value">{{ item.params.sampler }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>图片尺寸：</label>
+                <div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>迭代步数：</label>
+                <div class="item-value">{{ item.params.steps }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>引导系数：</label>
+                <div class="item-value">{{ item.params.cfg_scale }}</div>
+              </div>
+            </div>
+
+            <div class="info-line">
+              <div class="wrapper">
+                <label>随机因子：</label>
+                <div class="item-value">{{ item.params.seed }}</div>
+              </div>
+            </div>
+
+            <div v-if="item.params.hd_fix">
+              <el-divider>
+                高清修复
+              </el-divider>
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>重绘幅度：</label>
+                  <div class="item-value">{{ item.params.hd_redraw_rate }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>放大算法：</label>
+                  <div class="item-value">{{ item.params.hd_scale_alg }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>放大倍数：</label>
+                  <div class="item-value">{{ item.params.hd_scale }}</div>
+                </div>
+              </div>
+
+              <div class="info-line">
+                <div class="wrapper">
+                  <label>迭代步数：</label>
+                  <div class="item-value">{{ item.params.hd_steps }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="copy-params">
+              <el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
+            </div>
+
+          </div>
+        </el-col>
+        </el-col>
+      </el-row>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue"
+import {DocumentCopy, InfoFilled, Orange, Picture, Refresh} from "@element-plus/icons-vue";
+import {httpGet, httpPost} from "@/utils/http";
+import {ElMessage, ElNotification} from "element-plus";
+import ItemList from "@/components/ItemList.vue";
+import Clipboard from "clipboard";
+import {checkSession} from "@/action/session";
+import {useRouter} from "vue-router";
+import {getSessionId} from "@/store/session";
+
+const listBoxHeight = ref(window.innerHeight - 40)
+// const mjBoxHeight = ref(window.innerHeight - 150)
+const fullImgHeight = ref(window.innerHeight - 60)
+const showTaskDialog = ref(false)
+const item = ref({})
+const loading = ref(false)
+
+window.onresize = () => {
+  listBoxHeight.value = window.innerHeight - 40
+//   mjBoxHeight.value = window.innerHeight - 150
+}
+const samplers = ["Euler a", "Euler", "DPM2 a Karras", "DPM++ 2S a Karras", "DPM++ 2M Karras", "DPM++ SDE Karras", "DPM2", "DPM2 a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM fast", "DPM adaptive",
+  "LMS Karras", "DPM2 Karras", "DDIM", "PLMS", "UniPC", "LMS", "Heun",]
+const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"]
+const params = ref({
+  width: 768,
+  height: 1024,
+  sampler: samplers[0],
+  seed: -1,
+  steps: 20,
+  cfg_scale: 7,
+  face_fix: false,
+  hd_fix: false,
+  hd_redraw_rate: 0.7,
+  hd_scale: 2,
+  hd_scale_alg: scaleAlg[0],
+  hd_steps: 10,
+  prompt: "",
+  negative_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
+})
+
+const runningJobs = ref([])
+const finishedJobs = ref([])
+const router = useRouter()
+// 检查是否有画同款的参数
+const _params = router.currentRoute.value.params["copyParams"]
+if (_params) {
+  params.value = JSON.parse(_params)
+}
+
+const imgCalls = ref(0)
+
+const rewritePrompt = () => {
+  loading.value = true
+  httpPost("/api/prompt/rewrite", {"prompt": params.value.prompt}).then(res => {
+    params.value.prompt = res.data
+    loading.value = false
+  }).catch(e => {
+    loading.value = false
+    ElMessage.error("翻译失败：" + e.message)
+  })
+}
+
+const translatePrompt = () => {
+  loading.value = true
+  httpPost("/api/prompt/translate", {"prompt": params.value.prompt}).then(res => {
+    params.value.prompt = res.data
+    loading.value = false
+  }).catch(e => {
+    loading.value = false
+    ElMessage.error("翻译失败：" + e.message)
+  })
+}
+
+onMounted(() => {
+  checkSession().then(user => {
+    imgCalls.value = user['img_calls']
+
+    fetchRunningJobs(user.id)
+    fetchFinishJobs(user.id)
+
+  }).catch(() => {
+    router.push('/login')
+  });
+
+  const fetchRunningJobs = (userId) => {
+    // 获取运行中的任务
+    httpGet(`/api/sd/jobs?status=0&user_id=${userId}`).then(res => {
+      const jobs = res.data
+      const _jobs = []
+      for (let i = 0; i < jobs.length; i++) {
+        if (jobs[i].progress === -1) {
+          ElNotification({
+            title: '任务执行失败',
+            message: "任务ID：" + jobs[i]['task_id'],
+            type: 'error',
+          })
+          continue
+        }
+        _jobs.push(jobs[i])
+      }
+      runningJobs.value = _jobs
+
+      setTimeout(() => fetchRunningJobs(userId), 5000)
+    }).catch(e => {
+      ElMessage.error("获取任务失败：" + e.message)
+    })
+  }
+
+  // 获取已完成的任务
+  const fetchFinishJobs = (userId) => {
+    httpGet(`/api/sd/jobs?status=1&user_id=${userId}`).then(res => {
+      finishedJobs.value = res.data
+      setTimeout(() => fetchFinishJobs(userId), 5000)
+    }).catch(e => {
+      ElMessage.error("获取任务失败：" + e.message)
+    })
+  }
+
+  const clipboard = new Clipboard('.copy-prompt');
+  clipboard.on('success', () => {
+    ElMessage.success("复制成功！");
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+
+// 创建绘图任务
+const promptRef = ref(null)
+const generate = () => {
+  if (params.value.prompt === '') {
+    promptRef.value.focus()
+    return ElMessage.error("请输入绘画提示词！")
+  }
+  if (params.value.seed === '') {
+    params.value.seed = -1
+  }
+  params.value.session_id = getSessionId()
+  httpPost("/api/sd/image", params.value).then(() => {
+    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
+    imgCalls.value -= 1
+  }).catch(e => {
+    ElMessage.error("任务推送失败：" + e.message)
+  })
+}
+
+const showTask = (row) => {
+  item.value = row
+  showTaskDialog.value = true
+}
+
+const copyParams = (row) => {
+  params.value = row.params
+  showTaskDialog.value = false
+}
+
+</script>
+
+<style lang="stylus">
+@import "@/assets/css/image-mobile-sd.css"
+</style>

web/src/views/mobile/Invitation.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="page-invitation" :style="{height: listBoxHeight + 'px'}">
+      <div class="inner">
+        <div class="title" style="padding-top: 50px">会员推广计划</div>
+        <div class="share-box">
+          <div class="info">
+            感谢您把此应用分享给您身边的朋友，分享成功注册后您将获得 <strong>{{ inviteChatCalls }}</strong>
+            次对话额度以及
+            <strong>{{ inviteImgCalls }}</strong> 次AI绘画额度作为奖励。
+            你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
+          </div>
+
+          <div class="invite-qrcode">
+            <el-image :src="qrImg" fit="contain" />
+          </div>
+          <div class="invite-url">
+            <span>{{ inviteURL }}</span>
+            <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
+          </div>
+        </div>
+
+        <div class="invite-stats">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="item-box yellow">
+                <el-row :gutter="10">
+                  <el-col :span="10">
+                    <div class="item-icon">
+                      <i class="iconfont icon-role"></i>
+                    </div>
+                  </el-col>
+                  <el-col :span="14">
+                    <div class="item-info">
+                      <div class="num">{{ hits }}</div>
+                      <div class="text">点击量</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-box blue">
+                <el-row :gutter="10">
+                  <el-col :span="10">
+                    <div class="item-icon">
+                      <i class="iconfont icon-order"></i>
+                    </div>
+                  </el-col>
+                  <el-col :span="14">
+                    <div class="item-info">
+                      <div class="num">{{ regNum }}</div>
+                      <div class="text">注册量</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="item-box green">
+                <el-row :gutter="10">
+                  <el-col :span="10">
+                    <div class="item-icon">
+                      <i class="iconfont icon-chart"></i>
+                    </div>
+                  </el-col>
+                  <el-col :span="14">
+                    <div class="item-info">
+                      <div class="num">{{ rate }}%</div>
+                      <div class="text">转化率</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="title" style="padding: 20px">您推荐的用户</div>
+            <div class="invite-logs" style="padding-bottom: 50px">
+              <invite-list v-if="isLogin"/>
+            </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue"
+import QRCode from "qrcode";
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import Clipboard from "clipboard";
+import InviteList from "@/components/InviteList.vue";
+import {checkSession} from "@/action/session";
+import {useRouter} from "vue-router";
+
+const listBoxHeight = window.innerHeight
+const inviteURL = ref("")
+const qrImg = ref("")
+const inviteChatCalls = ref(0)
+const inviteImgCalls = ref(0)
+const hits = ref(0)
+const regNum = ref(0)
+const rate = ref(0)
+const router = useRouter()
+const isLogin = ref(false)
+
+onMounted(() => {
+  checkSession().then(() => {
+    isLogin.value = true
+    httpGet("/api/invite/code").then(res => {
+      const text = `${location.protocol}//${location.host}/register?invite_code=${res.data.code}`
+      hits.value = res.data["hits"]
+      regNum.value = res.data["reg_num"]
+      if (hits.value > 0) {
+        rate.value = ((regNum.value / hits.value) * 100).toFixed(2)
+      }
+      QRCode.toDataURL(text, {width: 300, height: 300, margin: 2}, (error, url) => {
+        if (error) {
+          console.error(error)
+        } else {
+          qrImg.value = url;
+        }
+      });
+      inviteURL.value = text
+    }).catch(e => {
+      ElMessage.error("获取邀请码失败：" + e.message)
+    })
+
+    httpGet("/api/admin/config/get?key=system").then(res => {
+      inviteChatCalls.value = res.data["invite_chat_calls"]
+      inviteImgCalls.value = res.data["invite_img_calls"]
+    }).catch(e => {
+      ElMessage.error("获取系统配置失败：" + e.message)
+    })
+  }).catch(() => {
+    router.push('/login')
+  });
+
+  // 复制链接
+  const clipboard = new Clipboard('.copy-link');
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！');
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+</script>
+
+<style lang="stylus" scoped>
+@import "@/assets/css/mobile-invitation.styl"
+</style>

web/src/views/mobile/Profile.vue

@@ -1,128 +1,294 @@
 <template>
-  <div class="mobile-user-profile container">
-    <van-nav-bar :title="title"/>
-
-    <div class="content">
-      <van-form @submit="save">
-        <van-cell-group inset v-model="form">
-          <van-field
-              v-model="form.mobile"
-              name="手机号"
-              label="手机号"
-              readonly
-              disabled
-              placeholder="手机号"
-          />
-          <van-field label="头像">
-            <template #input>
-              <van-uploader v-model="fileList"
-                            reupload max-count="1"
-                            :deletable="false"
-                            :after-read="afterRead"/>
-            </template>
-          </van-field>
-
-          <van-field label="剩余对话次数">
-            <template #input>
-              <van-tag type="primary">{{ form.calls }}</van-tag>
-            </template>
-          </van-field>
-
-          <van-field label="剩余绘图次数">
-            <template #input>
-              <van-tag type="primary">{{ form.img_calls }}</van-tag>
-            </template>
-          </van-field>
-
-          <van-field label="累计消耗tokens">
-            <template #input>
-              <van-tag type="primary">{{ form.total_tokens }}</van-tag>
-            </template>
-          </van-field>
-        </van-cell-group>
-        <div style="margin: 16px;">
-          <van-button round block type="primary" native-type="submit">
-            提交
-          </van-button>
-        </div>
-      </van-form>
+  <div class="app-background" theme="dark">
+  <div class="member">
+    <div class="title" style="padding-top: 50px">
+      会员中心
     </div>
+    <div class="inner" :style="{height: listBoxHeight + 'px'}">
+      <div class="product-box">
+            <ItemList :items="list" v-if="list.length > 0" :gap="30" >
+              <template #default="scope">
+                <div class="product-item" :style="{width: scope.width+'px'}">
+                  <div class="image-container">
+                    <el-image :src="vipImg" fit="cover"/>
+                  </div>
+                  <div class="product-title">
+                    <span class="name">{{ scope.item.name }}</span>
+                  </div>
+                  <div class="product-info">
+                    <div class="info-line">
+                      <span class="label">商品原价：</span>
+                      <span class="price">￥{{ scope.item.price }}</span>
+                    </div>
+                    <div class="info-line">
+                      <span class="label">促销立减：</span>
+                      <span class="price">￥{{ scope.item.discount }}</span>
+                    </div>
+                    <div class="info-line">
+                      <span class="label">有效期：</span>
+                      <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
+                      <span class="expire" v-else>当月有效</span>
+                    </div>
+
+                    <div class="pay-way">
+                      <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
+                        <i class="iconfont icon-alipay"></i> 支付宝
+                      </el-button>
+                      <el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
+                        <span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
+                        <span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </ItemList>
+          </div>
+      <el-row>
+          <div class="user-profile">
+            <user-profile/>
+            <el-row class="user-opt" :gutter="20">
+              <el-col :span="12">
+                <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
+              </el-col>
+              <el-col :span="12">
+                <el-button type="primary" @click="showBindMobileDialog = true">绑定手机号</el-button>
+              </el-col>
+              <el-col :span="12">
+                <el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
+              </el-col>
+              <el-col :span="12">
+                <el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
+                </el-button>
+              </el-col>
+              <el-col :span="24" style="padding-bottom: 50px;">
+                <el-button type="danger" round @click="logout">退出登录</el-button>
+              </el-col>
+            </el-row>
+          </div>
+      </el-row>
+    </div>
+    <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
+    <password-dialog v-if="isLogin" :show="showPasswordDialog" width="100%" @hide="showPasswordDialog = false"
+                     @logout="logout"/>
+    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" width="100%" :mobile="user.mobile"
+                 @hide="showBindMobileDialog = false"/>
+    <reward-verify v-if="isLogin" :show="showRewardVerifyDialog" @hide="showRewardVerifyDialog = false"/>
+    <el-dialog
+        v-model="showRewardDialog"
+        :show-close="true"
+        width="100%"
+        title="参与众筹"
+    >
+      <el-alert type="info" :closable="false">
+        <div style="font-size: 14px">您好，众筹 9.9元，就可以兑换 100 次对话，以此来覆盖我们的 OpenAI
+          账单和服务器的费用。<strong
+              style="color: #f56c6c">由于本人没有开通微信支付，付款后请凭借转账单号,点击【众筹核销】按钮手动核销。</strong>
+        </div>
+      </el-alert>
+      <div style="text-align: center;padding-top: 10px;">
+        <el-image v-if="enableReward" :src="rewardImg"/>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+        v-model="showPayDialog"
+        :close-on-click-modal="false"
+        :show-close="true"
+        :width="400"
+        title="充值订单支付">
+      <div class="pay-container">
+        <div class="count-down">
+          <count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
+        </div>
+
+        <div class="pay-qrcode" v-loading="loading">
+          <el-image :src="qrcode"/>
+        </div>
+
+        <div class="tip success" v-if="text !== ''">
+          <el-icon>
+            <SuccessFilled/>
+          </el-icon>
+          <span class="text">{{ text }}</span>
+        </div>
+        <div class="tip" v-else>
+          <el-icon>
+            <InfoFilled/>
+          </el-icon>
+          <span class="text">请打开手机{{ payName }}扫码支付</span>
+        </div>
+      </div>
+    </el-dialog>
   </div>
+</div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {showFailToast, showNotify, showSuccessToast} from "vant";
+import {onMounted, ref} from "vue"
+import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
-import Compressor from 'compressorjs';
+import ItemList from "@/components/ItemList.vue";
+import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue";
+import LoginDialog from "@/components/LoginDialog.vue";
+import {checkSession} from "@/action/session";
+import UserProfile from "@/components/UserProfile.vue";
+import PasswordDialog from "@/components/PasswordDialog.vue";
+import BindMobile from "@/components/BindMobile.vue";
+import RewardVerify from "@/components/RewardVerify.vue";
+import {useRouter} from "vue-router";
+import {removeUserToken} from "@/store/session";
+import UserOrder from "@/components/UserOrder.vue";
+import CountDown from "@/components/CountDown.vue";
+
+const listBoxHeight = window.innerHeight - 97
+const list = ref([])
+const showLoginDialog = ref(false)
+const showPayDialog = ref(false)
+const vipImg = ref("/images/vip.png")
+const enableReward = ref(false) // 是否启用众筹功能
+const rewardImg = ref('/images/reward.png')
+const qrcode = ref("")
+const showPasswordDialog = ref(false);
+const showBindMobileDialog = ref(false);
+const showRewardDialog = ref(false);
+const showRewardVerifyDialog = ref(false);
+const text = ref("")
+const user = ref(null)
+const isLogin = ref(false)
+const router = useRouter()
+const curPayProduct = ref(null)
+const activeOrderNo = ref("")
+const countDownRef = ref(null)
+const orderTimeout = ref(1800)
+const loading = ref(true)
+const orderPayInfoText = ref("")
+
+const payWays = ref({})
+const payName = ref("支付宝")
+const curPay = ref("alipay") // 当前支付方式
 
-const title = ref('用户设置')
-const form = ref({
-  username: '',
-  nickname: '',
-  mobile: '',
-  avatar: '',
-  calls: 0,
-  tokens: 0
-})
-const fileList = ref([
-  {
-    url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
-    message: '上传中...',
-  }
-]);
 
 onMounted(() => {
-  httpGet('/api/user/profile').then(res => {
-    form.value = res.data
-    fileList.value[0].url = form.value.avatar
-  }).catch((e) => {
-    console.log(e.message)
-    showFailToast('获取用户信息失败')
-  });
+  checkSession().then(_user => {
+    user.value = _user
+    isLogin.value = true
+    httpGet("/api/product/list").then((res) => {
+      list.value = res.data
+    }).catch(e => {
+      ElMessage.error("获取产品套餐失败：" + e.message)
+    })
+  }).catch(() => {
+    router.push("/login")
+  })
+
+  httpGet("/api/admin/config/get?key=system").then(res => {
+    rewardImg.value = res.data['reward_img']
+    enableReward.value = res.data['enabled_reward']
+    orderPayInfoText.value = res.data['order_pay_info_text']
+    if (res.data['order_pay_timeout'] > 0) {
+      orderTimeout.value = res.data['order_pay_timeout']
+    }
+  }).catch(e => {
+    ElMessage.error("获取系统配置失败：" + e.message)
+  })
+
+  httpGet("/api/payment/payWays").then(res => {
+    payWays.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取支付方式失败：" + e.message)
+  })
 })
 
-const afterRead = (file) => {
-  file.status = 'uploading';
-  file.message = '上传中...';
-  // 压缩图片并上传
-  new Compressor(file.file, {
-    quality: 0.6,
-    success(result) {
-      const formData = new FormData();
-      formData.append('file', result, result.name);
-      // 执行上传操作
-      httpPost('/api/upload', formData).then((res) => {
-        form.value.avatar = res.data
-        file.status = 'success'
-        showNotify({type: 'success', message: '上传成功'})
-      }).catch((e) => {
-        console.log(e.message)
-        showNotify({type: 'danger', message: '上传失败'})
-      })
-    },
-    error(err) {
-      console.log(err.message);
-    },
-  });
-};
+// refresh payment qrcode
+const refreshPayCode = () => {
+  if (curPay.value === 'alipay') {
+    alipay()
+  } else if (curPay.value === 'hupi') {
+    huPiPay()
+  }
+}
 
-const save = () => {
-  httpPost('/api/user/profile/update', form.value).then(() => {
-    showSuccessToast('保存成功')
-  }).catch(() => {
-    showFailToast('保存失败')
+const genPayQrcode = () => {
+  loading.value = true
+  text.value = ""
+  httpPost("/api/payment/qrcode", {
+    pay_way: curPay.value,
+    product_id: curPayProduct.value.id,
+    user_id: user.value.id
+  }).then(res => {
+    showPayDialog.value = true
+    qrcode.value = res.data['image']
+    activeOrderNo.value = res.data['order_no']
+    queryOrder(activeOrderNo.value)
+    loading.value = false
+    // 重置计数器
+    if (countDownRef.value) {
+      countDownRef.value.resetTimer()
+    }
+  }).catch(e => {
+    ElMessage.error("生成支付订单失败：" + e.message)
   })
 }
+
+const alipay = (row) => {
+  payName.value = "支付宝"
+  curPay.value = "alipay"
+  if (!user.value.id) {
+    showLoginDialog.value = true
+    return
+  }
+  if (row) {
+    curPayProduct.value = row
+  }
+  genPayQrcode()
+}
+
+// 虎皮椒支付
+const huPiPay = (row) => {
+  payName.value = payWays.value["hupi"]["name"] === "wechat" ? '微信' : '支付宝'
+  curPay.value = "hupi"
+  if (!user.value.id) {
+    showLoginDialog.value = true
+    return
+  }
+  if (row) {
+    curPayProduct.value = row
+  }
+  genPayQrcode()
+
+}
+
+const queryOrder = (orderNo) => {
+  httpPost("/api/payment/query", {order_no: orderNo}).then(res => {
+    if (res.data.status === 1) {
+      text.value = "扫码成功，请在手机上进行支付！"
+      queryOrder(orderNo)
+    } else if (res.data.status === 2) {
+      text.value = "支付成功，正在刷新页面"
+      setTimeout(() => location.reload(), 500)
+    } else {
+      // 如果当前订单没有过期，继续等待订单的下一个状态
+      if (activeOrderNo.value === orderNo) {
+        queryOrder(orderNo)
+      }
+    }
+  }).catch(e => {
+    ElMessage.error("查询支付状态失败：" + e.message)
+  })
+}
+
+const logout = function () {
+  httpGet('/api/user/logout').then(() => {
+    removeUserToken();
+    router.push('/login');
+  }).catch(() => {
+    ElMessage.error('注销失败！');
+  })
+}
+
 </script>
 
 <style lang="stylus">
-.mobile-user-profile {
-  .content {
-    .van-field__label {
-      width 100px
-      text-align right
-    }
-  }
-}
-</style>
+@import "@/assets/css/mobile-profile.styl"
+</style>