refactor login dialog for front page

web/src/App.vue

@@ -41,6 +41,8 @@ html, body {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+
+  --primary-color: #21aa93
 }
 
 .el-overlay-dialog {

web/src/assets/css/chat-app.styl

@@ -2,15 +2,6 @@
   background-color: #282c34;
   height 100%
 
-  .title {
-    text-align center
-    background-color #25272d
-    font-size 24px
-    color #ffffff
-    padding 10px
-    border-bottom 1px solid #3c3c3c
-  }
-
   .inner {
     display flex
     color #ffffff
@@ -19,52 +10,72 @@
     overflow-x hidden
 
     .list-box {
-      .app-item {
+      .item {
-        border 1px solid #666666
-        border-radius 6px
-        overflow hidden
-        transition: all 0.3s ease; /* 添加过渡效果 */
-
-        .el-image {
-          padding 6px
-
-          .el-image__inner {
-            border-radius 10px
-          }
-        }
-
-        .title {
         display flex
+        flex-flow row
+        border 1px solid #3c3c3c
         padding 10px
 
-          .name {
+        .image {
+          width 80px
+          height 80px
+          min-width 80px
+          border-radius 5px
+          overflow hidden
+        }
+
+        .inner {
+          display flex
+          flex-flow column
+          padding 0 0 0 10px
           width 100%
+
+          .info {
             text-align left
-            font-size 16px
+
-            font-weight bold
+            .info-title {
-            color #47fff1
+              color var(--el-text-color)
+              font-size 1.25rem
+              line-height 1.75rem
+              letter-spacing: .025em;
+              font-weight: 600;
+              word-break: break-all;
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
             }
 
-          .opt {
+            .info-text {
-            position: relative;
+              padding 8px 0
-            width 100%
+              overflow: hidden;
-            top -5px
+              display: -webkit-box;
-          }
+              -webkit-box-orient: vertical;
-        }
+              -webkit-line-clamp: 2;
-
+              word-break: break-all;
-        .hello-msg {
+              height 34px
-          height 60px
+              font-size: .875rem;
-          padding 10px
-          font-size 14px
               color #999999
             }
+          }
 
-        &:hover {
+          .btn {
-          box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
+            margin-top 10px
-          transform: translateY(-10px); /* 向上移动10像素 */
+            display flex
+            justify-content right
+
+            .el-button {
+              margin-left 10px
+
+              .el-icon {
+                margin-right 5px
               }
             }
           }
         }
+      }
+
+    }
+  }
 
 }

web/src/assets/css/home.styl

@@ -140,6 +140,7 @@
 
     .content {
       width: 100%
+      overflow auto
       box-sizing: border-box
       background-color #282c34
     }

web/src/assets/css/member.styl

@@ -65,9 +65,12 @@
     padding 15px 0 15px 15px;
     overflow-x hidden
     overflow-y visible
+    display flex
+    flex-flow row
 
     .user-profile {
       padding 10px 20px 20px 20px
+      width 300px
       background-color #393F4A
       color #ffffff
       border-radius 10px
@@ -91,12 +94,15 @@
 
 
     .product-box {
+      padding 0 20px
+      width 100%
+
       .info {
         .el-alert__description {
           font-size 14px !important
           margin 0
         }
-        padding 10px 20px 20px 0
+        padding 0 0 20px 0
       }
 
       .list-box {

web/src/components/ItemList.vue

@@ -1,19 +1,10 @@
 <template>
-  <div class="list-box" ref="container">
+  <div class="list-box" ref="containerRef">
-    <div class="list-inner">
+    <el-row :gutter="gap">
-      <div
+      <el-col v-for="item in items" :key="item.id" :span="span" :style="{marginBottom:gap+'px'} ">
-          class="list-item"
+        <slot :item="item"></slot>
-          v-for="(item, index) in items"
+      </el-col>
-          :key="index"
+    </el-row>
-          :style="{width:itemWidth + 'px'}"
-      >
-        <div class="item-inner" :style="{padding: gap/2+'px'}">
-          <div class="item-wrapper">
-            <slot :item="item" :index="index" :width="itemWidth"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -29,7 +20,7 @@ const props = defineProps({
   },
   gap: {
     type: Number,
-    default: 12
+    default: 10
   },
   width: {
     type: Number,
@@ -37,45 +28,35 @@ const props = defineProps({
   }
 });
 
-const container = ref(null)
+const containerRef = ref(null)
-const itemWidth = ref(props.width)
+const span = ref(12)
 
 onMounted(() => {
-  computeSize()
+  calcSpan()
 })
 
-const computeSize = () => {
+const calcSpan = () => {
-  const w = container.value.offsetWidth - 10 // 减去滚动条的宽度
+  let cols = Math.floor(containerRef.value.offsetWidth / props.width)
-  let cols = Math.floor(w / props.width)
+  if (cols >= 12) {
-  itemWidth.value = Math.floor(w / cols)
+    span.value = 1
-}
+    return
-
+  }
-window.onresize = () => {
+  console.log(cols)
-  computeSize()
+  while (cols > 1) {
+    if (24 % cols === 0) {
+      span.value = 24 / cols
+      return
+    }
+    cols -= 1
+  }
+  span.value = 12
 }
+window.onresize = () => calcSpan()
 </script>
 
 <style scoped lang="stylus">
 
 .list-box {
-
-  .list-inner {
-    display flex
-    flex-wrap wrap
-
-    .list-item {
-      .item-inner {
-        display flex
-
-        .item-wrapper {
-          height 100%
-          width 100%
-          display flex
-          justify-content center
-        }
-      }
-    }
-  }
 }
 
 </style>

web/src/views/ChatApps.vue

@@ -2,15 +2,21 @@
   <div>
     <div class="page-apps custom-scroll">
       <div class="inner" :style="{height: listBoxHeight + 'px'}">
-        <ItemList :items="list" v-if="list.length > 0" :gap="20" :width="250">
+        <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
           <template #default="scope">
-            <div class="app-item" :style="{width: scope.width+'px'}">
+            <div class="item">
-              <el-image :src="scope.item.icon" fit="cover" :style="{height: scope.width+'px'}"/>
+              <div class="image">
-              <div class="title">
+                <el-image :src="scope.item.icon" fit="cover"/>
-                <span class="name">{{ scope.item.name }}</span>
+              </div>
-                <div class="opt">
+
+              <div class="inner">
+                <div class="info">
+                  <div class="info-title">{{ scope.item.name }}</div>
+                  <div class="info-text">{{ scope.item.hello_msg }}</div>
+                </div>
+                <div class="btn">
                   <div v-if="hasRole(scope.item.key)">
-                    <el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>
+                    <el-button size="small" color="#21aa93" @click="useRole(scope.item)">使用</el-button>
                     <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>
                   </div>
                   <el-button v-else size="small"
@@ -23,15 +29,34 @@
                   </el-button>
                 </div>
               </div>
-              <div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>
+
+
             </div>
+            <!--            <div class="app-item">-->
+            <!--              <el-image :src="scope.item.icon" fit="cover"/>-->
+            <!--              <div class="title">-->
+            <!--                <span class="name">{{ scope.item.name }}</span>-->
+            <!--                <div class="opt">-->
+            <!--                  <div v-if="hasRole(scope.item.key)">-->
+            <!--                    <el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>-->
+            <!--                    <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>-->
+            <!--                  </div>-->
+            <!--                  <el-button v-else size="small"-->
+            <!--                             style="&#45;&#45;el-color-primary:#009999"-->
+            <!--                             @click="updateRole(scope.item, 'add')">-->
+            <!--                    <el-icon>-->
+            <!--                      <Plus/>-->
+            <!--                    </el-icon>-->
+            <!--                    <span>添加应用</span>-->
+            <!--                  </el-button>-->
+            <!--                </div>-->
+            <!--              </div>-->
+            <!--              <div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>-->
+            <!--            </div>-->
           </template>
         </ItemList>
       </div>
-
-
     </div>
-    <login-dialog :show="showLoginDialog" @hide="getRoles" @success=""/>
   </div>
 </template>
 
@@ -39,18 +64,18 @@
 import {onMounted, ref} from "vue"
 import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
-import ItemList from "@/components/ItemList.vue";
-import {Plus} from "@element-plus/icons-vue";
-import LoginDialog from "@/components/LoginDialog.vue";
 import {checkSession} from "@/action/session";
 import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
 import {useRouter} from "vue-router";
+import {useSharedStore} from "@/store/sharedata";
+import ItemList from "@/components/ItemList.vue";
+import {Plus} from "@element-plus/icons-vue";
 
-const listBoxHeight = window.innerHeight - 147
+const listBoxHeight = window.innerHeight - 87
 const list = ref([])
-const showLoginDialog = ref(false)
 const roles = ref([])
-const elements = ref(null)
+const store = useSharedStore();
+
 onMounted(() => {
   httpGet("/api/role/list?all=true").then((res) => {
     const items = res.data
@@ -67,7 +92,6 @@ onMounted(() => {
 })
 
 const getRoles = () => {
-  showLoginDialog.value = false
   checkSession().then(user => {
     roles.value = user.chat_roles
   }).catch(() => {
@@ -98,7 +122,7 @@ const updateRole = (row, opt) => {
       ElMessage.error(title.value + "失败：" + e.message)
     })
   }).catch(() => {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
   })
 }
 

web/src/views/ChatPlus.vue

@@ -99,7 +99,7 @@
 
                         <template #default>
                           <div class="chat-config">
-                            <el-select v-model="roleId" filterable placeholder="角色" @change="newChat"
+                            <el-select v-model="roleId" filterable placeholder="角色" @change="_newChat"
                                        class="role-select"
                                        style="width:150px">
                               <el-option
@@ -115,7 +115,7 @@
                               </el-option>
                             </el-select>
 
-                            <el-select v-model="modelID" filterable placeholder="模型" @change="newChat"
+                            <el-select v-model="modelID" filterable placeholder="模型" @change="_newChat"
                                        :disabled="disableModel"
                                        style="width:150px">
                               <el-option
@@ -144,7 +144,7 @@
                     </el-tooltip>
                   </span>
 
-                  <span class="tool-item">
+                  <span class="tool-item" v-if="isLogin">
                     <el-tooltip class="box-item" effect="dark" content="上传附件">
                       <file-select v-if="isLogin" :user-id="loginUser.id" @selected="insertURL"/>
                     </el-tooltip>
@@ -378,6 +378,11 @@ const resizeElement = function () {
   leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
 };
 
+const _newChat = () => {
+  if (isLogin.value) {
+    newChat()
+  }
+}
 const disableModel = ref(false)
 // 新建会话
 const newChat = () => {

web/src/views/Dalle.vue

@@ -221,7 +221,6 @@
 
     </div>
 
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog =  false" @success="initData"/>
     <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
   </div>
 </template>
@@ -233,16 +232,16 @@ import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import Clipboard from "clipboard";
 import {checkSession} from "@/action/session";
-import LoginDialog from "@/components/LoginDialog.vue";
+import {useSharedStore} from "@/store/sharedata";
 
 const listBoxHeight = ref(0)
 const paramBoxHeight = ref(0)
-const showLoginDialog = ref(false)
 const isLogin = ref(false)
 const loading = ref(true)
-const colWidth = ref(240)
+const colWidth = ref(220)
 const isOver = ref(false)
 const previewURL = ref("")
+const store = useSharedStore();
 
 const resizeElement = function () {
   listBoxHeight.value = window.innerHeight - 90
@@ -438,7 +437,7 @@ const generate = () => {
   }
 
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
   httpPost("/api/dall/image", params.value).then(() => {

web/src/views/Home.vue

@@ -14,7 +14,7 @@
 
         <el-tooltip
             class="box-item"
-            effect="dark"
+            effect="light"
             content="部署文档"
             placement="bottom">
           <a href="https://ai.r9it.com/docs/install/" class="link-button" target="_blank">
@@ -24,7 +24,7 @@
 
         <el-tooltip
             class="box-item"
-            effect="dark"
+            effect="light"
             content="项目源码"
             placement="bottom">
           <a href="https://github.com/yangjian102621/chatgpt-plus" class="link-button" target="_blank">
@@ -68,7 +68,7 @@
         </el-dropdown>
 
         <div v-else>
-          <el-button size="small" color="#21aa93" @click="show = true" round>登录</el-button>
+          <el-button size="small" color="#21aa93" @click="store.setShowLoginDialog(true)" round>登录</el-button>
           <el-button size="small" @click="router.push('/register')" round>注册</el-button>
         </div>
       </div>
@@ -113,7 +113,7 @@
         </ul>
       </div>
 
-      <div class="content" :style="{height: mainWinHeight+'px'}">
+      <div class="content custom-scroll" :style="{height: mainWinHeight+'px'}">
         <router-view :key="routerViewKey" v-slot="{ Component }">
           <transition name="move" mode="out-in">
             <component :is="Component"></component>
@@ -220,5 +220,6 @@ const loginCallback = () => {
 </script>
 
 <style lang="stylus" scoped>
+@import "@/assets/css/custom-scroll.styl"
 @import "@/assets/css/home.styl"
 </style>

web/src/views/ImageMj.vue

@@ -600,8 +600,6 @@
     </div>
 
     <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
-
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog =  false" @success="initData"/>
   </div>
 </template>
 
@@ -616,14 +614,14 @@ import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
 import {getSessionId} from "@/store/session";
 import {copyObj, removeArrayItem} from "@/utils/libs";
-import LoginDialog from "@/components/LoginDialog.vue";
+import {useSharedStore} from "@/store/sharedata";
 
 const listBoxHeight = ref(0)
 const paramBoxHeight = ref(0)
-const showLoginDialog = ref(false)
 const loading = ref(true)
-const colWidth = ref(240)
+const colWidth = ref(220)
 const previewURL = ref("")
+const store = useSharedStore();
 
 const resizeElement = function () {
   listBoxHeight.value = window.innerHeight - 80
@@ -903,7 +901,7 @@ const beforeUpload = (key) => {
 // 图片上传
 const uploadImg = (file) => {
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 
@@ -936,7 +934,7 @@ const uploadImg = (file) => {
 const promptRef = ref(null)
 const generate = () => {
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 

web/src/views/ImageSd.vue

@@ -497,8 +497,6 @@
 
       </el-dialog>
     </div>
-
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog =  false" @success="initData"/>
   </div>
 </template>
 
@@ -511,17 +509,17 @@ import Clipboard from "clipboard";
 import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
 import {getSessionId} from "@/store/session";
-import LoginDialog from "@/components/LoginDialog.vue";
+import {useSharedStore} from "@/store/sharedata";
 
 const listBoxHeight = ref(0)
 const paramBoxHeight = ref(0)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
 const item = ref({})
-const showLoginDialog = ref(false)
 const isLogin = ref(false)
 const loading = ref(true)
-const colWidth = ref(240)
+const colWidth = ref(220)
+const store = useSharedStore();
 
 const resizeElement = function () {
   listBoxHeight.value = window.innerHeight - 80
@@ -730,7 +728,7 @@ const generate = () => {
   }
 
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 

web/src/views/ImagesWall.vue

@@ -311,7 +311,7 @@ const loading = ref(true)
 const isOver = ref(false)
 const imgType = ref("mj") // 图片类别
 const listBoxHeight = window.innerHeight - 124
-const colWidth = ref(240)
+const colWidth = ref(220)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
 const item = ref({})

web/src/views/Invitation.vue

@@ -84,8 +84,6 @@
         </div>
       </div>
     </div>
-
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog =  false" @success="initData"/>
   </div>
 </template>
 
@@ -97,17 +95,17 @@ import {ElMessage} from "element-plus";
 import Clipboard from "clipboard";
 import InviteList from "@/components/InviteList.vue";
 import {checkSession} from "@/action/session";
-import LoginDialog from "@/components/LoginDialog.vue";
+import {useSharedStore} from "@/store/sharedata";
 
 const inviteURL = ref("")
-const qrImg = ref("")
+const qrImg = ref("/images/wx.png")
 const inviteChatCalls = ref(0)
 const inviteImgCalls = ref(0)
 const hits = ref(0)
 const regNum = ref(0)
 const rate = ref(0)
 const isLogin = ref(false)
-const showLoginDialog = ref(false)
+const store = useSharedStore()
 
 onMounted(() => {
   initData()
@@ -152,7 +150,7 @@ const initData = () => {
       ElMessage.error("获取系统配置失败：" + e.message)
     })
   }).catch(() => {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
   });
 }
 </script>

web/src/views/MarkMap.vue

@@ -90,13 +90,10 @@
       </div>
 
     </div>
-
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog =  false" @success="initData"/>
   </div>
 </template>
 
 <script setup>
-import LoginDialog from "@/components/LoginDialog.vue";
 import {nextTick, onMounted, onUnmounted, ref} from 'vue';
 import {Markmap} from 'markmap-view';
 import {Transformer} from 'markmap-lib';
@@ -105,6 +102,7 @@ import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {Download} from "@element-plus/icons-vue";
 import {Toolbar} from 'markmap-toolbar';
+import {useSharedStore} from "@/store/sharedata";
 
 const leftBoxHeight = ref(window.innerHeight - 105)
 const rightBoxHeight = ref(window.innerHeight - 115)
@@ -125,10 +123,10 @@ const md = require('markdown-it')({breaks: true});
 const content = ref(text.value)
 const html = ref("")
 
-const showLoginDialog = ref(false)
 const isLogin = ref(false)
 const loginUser = ref({power: 0})
 const transformer = new Transformer();
+const store = useSharedStore();
 
 
 const svgRef = ref(null)
@@ -150,10 +148,6 @@ onMounted(() => {
 });
 
 const initData = () => {
-  checkSession().then(user => {
-    loginUser.value = user
-    isLogin.value = true
-
   httpGet("/api/model/list").then(res => {
     for (let v of res.data) {
       if (v.platform === "OpenAI" && v.value.indexOf("gpt-4-gizmo") === -1) {
@@ -161,10 +155,14 @@ const initData = () => {
       }
     }
     modelID.value = models.value[0].id
-      connect(user.id)
   }).catch(e => {
     ElMessage.error("获取模型失败：" + e.message)
   })
+  
+  checkSession().then(user => {
+    loginUser.value = user
+    isLogin.value = true
+    connect(user.id)
   }).catch(() => {
   });
 }
@@ -205,7 +203,7 @@ window.onresize = () => {
 }
 
 const socket = ref(null)
-const heartbeatHandle = ref(null)
+const heartbeatHandle = ref(0)
 const connect = (userId) => {
   if (socket.value !== null) {
     socket.value.close()
@@ -292,7 +290,7 @@ const generateAI = () => {
     return ElMessage.error("请输入你的需求")
   }
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
   loading.value = true

web/src/views/Member.vue

@@ -2,8 +2,6 @@
   <div>
     <div class="member custom-scroll">
       <div class="inner" :style="{height: listBoxHeight + 'px'}">
-        <el-row :gutter="20">
-          <el-col :span="7">
         <div class="user-profile">
           <user-profile/>
 
@@ -27,9 +25,7 @@
             </el-col>
           </el-row>
         </div>
-          </el-col>
 
-          <el-col :span="17">
         <div class="product-box">
           <div class="info" v-if="orderPayInfoText !== ''">
             <el-alert type="success" show-icon :closable="false" effect="dark">
@@ -37,9 +33,9 @@
             </el-alert>
           </div>
 
-              <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
+          <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="240">
             <template #default="scope">
-                  <div class="product-item" :style="{width: scope.width+'px'}">
+              <div class="product-item">
                 <div class="image-container">
                   <el-image :src="vipImg" fit="cover"/>
                 </div>
@@ -72,7 +68,8 @@
                       <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-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>
 
@@ -91,9 +88,6 @@
             <user-order v-if="isLogin"/>
           </div>
         </div>
-          </el-col>
-        </el-row>
-
       </div>
 
       <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
@@ -154,7 +148,6 @@
       </el-dialog>
     </div>
 
-    <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="loginSuccess"/>
   </div>
 </template>
 
@@ -164,7 +157,6 @@ import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
 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";
@@ -174,10 +166,10 @@ import {useRouter} from "vue-router";
 import {removeUserToken} from "@/store/session";
 import UserOrder from "@/components/UserOrder.vue";
 import CountDown from "@/components/CountDown.vue";
+import {useSharedStore} from "@/store/sharedata";
 
 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) // 是否启用众筹功能
@@ -205,6 +197,7 @@ const amount = ref(0)
 const payName = ref("支付宝")
 const curPay = ref("alipay") // 当前支付方式
 const vipInfoText = ref("")
+const store = useSharedStore()
 
 
 onMounted(() => {
@@ -212,7 +205,7 @@ onMounted(() => {
     user.value = _user
     isLogin.value = true
   }).catch(() => {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
   })
 
   httpGet("/api/product/list").then((res) => {
@@ -278,7 +271,7 @@ const alipay = (row) => {
   curPay.value = "alipay"
   amount.value = (row.price - row.discount).toFixed(2)
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 
@@ -294,7 +287,7 @@ const huPiPay = (row) => {
   curPay.value = "hupi"
   amount.value = (row.price - row.discount).toFixed(2)
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 
@@ -310,7 +303,7 @@ const PayJs = (row) => {
   curPay.value = "payjs"
   amount.value = (row.price - row.discount).toFixed(2)
   if (!isLogin.value) {
-    showLoginDialog.value = true
+    store.setShowLoginDialog(true)
     return
   }
 

web/src/views/PowerLog.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="power-log" v-loading="loading">
+  <div class="power-log custom-scroll" v-loading="loading">
-    <div class="inner">
+    <div class="inner" :style="{height: listBoxHeight + 'px'}">
-      <div class="list-box" :style="{height: listBoxHeight + 'px'}">
+      <div class="list-box">
         <div class="handle-box">
           <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
           <el-date-picker
@@ -11,9 +11,9 @@
               end-placeholder="结束日期"
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD"
-              style="margin: 0 10px;width: 200px; position: relative;top:3px;"
+              style="margin: 0 10px;width: 200px;"
           />
-          <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
+          <el-button color="#21aa93" :icon="Search" @click="fetchData">搜索</el-button>
         </div>
 
         <el-row v-if="items.length > 0">
@@ -71,21 +71,25 @@ import {Search} from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
+import {checkSession} from "@/action/session";
 
 const items = ref([])
 const total = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 const loading = ref(false)
-const listBoxHeight = window.innerHeight - 117
+const listBoxHeight = window.innerHeight - 87
 const query = ref({
   model: "",
   date: []
 })
-const tagColors = ref(["", "success", "", "danger", "info", "warning"])
+const tagColors = ref(["primary", "success", "primary", "danger", "info", "warning"])
 
 onMounted(() => {
+  checkSession().then(() => {
     fetchData()
+  }).catch(() => {
+  })
   const clipboard = new Clipboard('.copy-order-no');
   clipboard.on('success', () => {
     ElMessage.success("复制成功！");
@@ -121,33 +125,12 @@ const fetchData = () => {
 </script>
 
 <style lang="stylus" scoped>
+@import "@/assets/css/custom-scroll.styl"
 .power-log {
   color #ffffff
   .inner {
     padding 0 20px 20px 20px
-
+    overflow auto
-    ::-webkit-scrollbar {
-      width: 8px; /* 滚动条宽度 */
-    }
-
-    /* 修改滚动条轨道的背景颜色 */
-
-    ::-webkit-scrollbar-track {
-      background-color: #ffffff;
-    }
-
-    /* 修改滚动条的滑块颜色 */
-
-    ::-webkit-scrollbar-thumb {
-      background-color: #cccccc;
-      border-radius 8px
-    }
-
-    /* 修改滚动条的滑块的悬停颜色 */
-
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: #999999;
-    }
 
     .list-box {
       overflow-x hidden