🎈 perf: 优化了若干内容

src/components/userCard/userCard.vue

@@ -0,0 +1,152 @@
+<template>
+  <a-card class="card">
+    <a-space size="large">
+      <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" animation show-group-separator />
+      <a-button type="primary" size="large" @click="$router.push('/store/goodsList')" style="margin-left: 20px;"
+        v-if="props.type === 'lepao'">
+        <span><icon-fire /> 去购买</span>
+      </a-button>
+      <a-button type="primary" size="large" @click="$router.push('/lepao/accountList')" style="margin-left: 20px;"
+        v-else>
+        <span><icon-thunderbolt /> 去乐跑</span>
+      </a-button>
+      <a-button type="primary" size="large" @click="SendCount()">
+        <span><icon-gift /> 赠送次数</span>
+      </a-button>
+    </a-space>
+  </a-card>
+
+  <a-modal v-model:visible="visible" title="赠送乐跑次数" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
+    :ok-loading="ok_loading" esc-to-close closable>
+    <a-form :model="sendform">
+      <a-form-item field="username" label="接收人">
+        <a-input v-model="sendform.username" placeholder="请填写接收人用户名，如：用户adfg45g" :max-length="20" />
+      </a-form-item>
+      <a-form-item field="count" label="赠送次数">
+        <a-input-number v-model="sendform.count" placeholder="请填写要赠送的次数" mode="button" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, onUnmounted, onMounted } from 'vue'
+import { getCount, sendCount } from '@/api/goods'
+import { Notification, Message } from '@arco-design/web-vue'
+
+const props = defineProps({
+  "type": {
+    type: String,
+    default: 'lepao'
+  }
+})
+
+const userCount = ref({
+  lepao_count: 0
+})
+const loading = ref(false)
+
+const visible = ref(false)
+const ok_loading = ref(false)
+const sendform = reactive({
+  username: '',
+  count: 1
+})
+
+const handleBeforeOk = async (done) => {
+  try {
+    ok_loading.value = true
+    if (!sendform.username) {
+      Message.error('请填写接收人用户名！')
+      return false
+    }
+
+    if (!sendform.count || sendform.count < 1 || sendform.count > 9999) {
+      Notification.error({
+        title: '赠送次数失败！',
+        content: '超出赠送的次数范围，请重新选择赠送次数！'
+      })
+      return false
+    }
+
+    const res = await sendCount({ username: sendform.username, count: sendform.count })
+    if (!res || res.code !== 0) {
+      Notification.error({
+        title: '赠送次数失败！',
+        content: res?.msg ?? '请稍后再试'
+      })
+      return false
+    }
+
+    Message.success('赠送成功！')
+    done()
+    GetCount()
+  } catch (error) {
+    Notification.error({
+      title: '赠送次数失败！',
+      content: error.message || '请稍后再试'
+    })
+    return false
+  } finally {
+    ok_loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+
+const SendCount = async () => {
+  sendform.username = ''
+  sendform.count = 1
+  visible.value = true
+}
+
+const GetCount = async () => {
+  try {
+    const res = await getCount()
+    if (!res || res.code !== 0)
+      return Notification.error({
+        title: '获取用户数据失败！',
+        content: res?.msg ?? '请稍后再试'
+      })
+    userCount.value = res.data
+  } catch (error) {
+    Notification.error({
+      title: '获取用户数据失败！',
+      content: error.message || '请稍后再试'
+    })
+  }
+}
+
+let timer = null
+
+// 轮询
+const startPolling = () => {
+    if (!timer) {
+        timer = setInterval(async () => {
+            await GetCount()
+        }, 5000)
+    }
+}
+
+// 停止轮询
+const stopPolling = () => {
+    if (timer) {
+        clearInterval(timer)
+        timer = null
+    }
+}
+
+onMounted(async () => {
+    loading.value = true
+    await GetCount()
+    loading.value = false
+    startPolling()
+})
+
+// 组件销毁时停止轮询
+onUnmounted(() => {
+    stopPolling()
+})
+</script>

src/pages/admin/lepaoAccount/accountList.vue

@@ -453,14 +453,14 @@ const ChangeAutoRun = async (record) => {
 
 const SingleRun = async (item) => {
     if (item.state !== 1)
-        return Notification.error({
+        return Notification.warning({
             title: '当前乐跑账号需登录，请登录后再试',
             content: '如有疑问请联系RunForge客服'
         })
     Modal.confirm({
         title: '开始乐跑',
         content: () => h('div', [
-            h('p', `您是否要为${item.name}乐跑？若乐跑成功将扣减乐跑次数`)
+            h('p', `您是否要为${item.name}(${item.student_num})乐跑？若乐跑成功将扣减乐跑次数`)
         ]),
         onOk: async () => {
             const res = await singleRun({ student_num: item.student_num })

src/pages/admin/reqLog/index.vue

@@ -83,7 +83,7 @@
         </a-card>
     </div>
 
-    <a-modal v-model:visible="showModal" @cancel="handleCancel" width="auto" draggable>
+    <a-modal v-model:visible="showModal" hide-cancel width="auto" style="min-width: 500px;" draggable>
         <template #title>
             日志详情
         </template>
@@ -162,11 +162,6 @@ const reset = () => {
     getLogList()
 }
 
-const handleCancel = () => {
-    showModal.value = false
-    modalData.value = []
-}
-
 const showDetail = async (record) => {
     try {
         loading.value = true
@@ -196,14 +191,14 @@ const showDetail = async (record) => {
         }, {
             label: 'IP属地',
             value: res.data.location
-        },{
+        }, {
             label: 'UA',
             value: res.data.ua
         },
         {
             label: '客户端类型',
             value: res.data.deviceType
-        },  {
+        }, {
             label: '请求数据',
             value: JSON.stringify(res.data.reqData)
         }, {

src/pages/lepao/accountList/components/userCard.vue

@@ -1,43 +0,0 @@
-<template>
-  <a-card class="card">
-    <a-space size="large">
-      <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" animation show-group-separator />
-      <a-button type="primary" size="large" @click="$router.push('/store/goodsList')" style="margin-left: 20px;">
-        <span><icon-fire /> 去购买</span>
-      </a-button>
-    </a-space>
-  </a-card>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { getCount } from '@/api/goods'
-import { Notification } from '@arco-design/web-vue'
-
-const userCount = ref({})
-const loading = ref(false)
-
-const GetCount = async () => {
-  try {
-    loading.value = true
-    const res = await getCount()
-    if (!res || res.code !== 0)
-      return Notification.error({
-        title: '获取用户数据失败！',
-        content: res?.msg ?? '请稍后再试'
-      })
-    userCount.value = res.data
-  } catch (error) {
-    Notification.error({
-      title: '获取用户数据失败！',
-      content: error.message || '请稍后再试'
-    })
-  } finally {
-    loading.value = false
-  }
-}
-
-GetCount()
-</script>
-
-<style scoped lang="less"></style>

src/pages/lepao/accountList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <Breadcrumb :items="['校园乐跑', '账号管理']" />
+    <Breadcrumb :items="['校园乐跑', '乐跑账号']" />
 
     <userCard />
 
@@ -207,8 +207,8 @@
         <a-select v-model="form.auto_time" placeholder="请选择每天自动乐跑的时段" :options="auto_time" />
       </a-form-item>
       <a-form-item field="notes" label="备注">
-        <a-textarea v-model="form.notes" placeholder="添加对账号的备注（非必填）" :max-length="{length:50}" allow-clear
-                show-word-limit />
+        <a-textarea v-model="form.notes" placeholder="添加对账号的备注（非必填）" :max-length="{ length: 50 }" allow-clear
+          show-word-limit />
       </a-form-item>
       <!-- <a-form-item field="distance" label="距离区间">
         <a-select v-model="form.distance" placeholder="请选择距离区间">
@@ -231,7 +231,7 @@ import { useUserStore } from '@/store/modules/user'
 import { accountList, deleteAccount, addAccount, changeAutoRun, singleRun } from '@/api/lepao'
 import { Modal, Notification, Message } from '@arco-design/web-vue'
 import { IconSearch } from '@arco-design/web-vue/es/icon'
-import userCard from './components/userCard.vue'
+import userCard from '@/components/userCard/userCard.vue'
 import { isElectron } from '@/utils/electron'
 
 const area = ["兰花湖校区跑区", "主校区北跑区", "主校区南跑区"]
@@ -376,14 +376,14 @@ const getAccounts = async () => {
 
 const SingleRun = async (item) => {
   if (item.state !== 1)
-    return Notification.error({
+    return Notification.warning({
       title: '当前乐跑账号需登录，请登录后再试',
       content: '如有疑问请联系RunForge客服'
     })
   Modal.confirm({
     title: '开始乐跑',
     content: () => h('div', [
-      h('p', `您是否要为${item.name}乐跑？若乐跑成功将扣减乐跑次数`)
+      h('p', `您是否要为 ${item.name}(${item.student_num}) 乐跑？若乐跑成功将扣减乐跑次数`)
     ]),
     onOk: async () => {
       const res = await singleRun({ student_num: item.student_num })

src/pages/store/goodsList/index.vue

@@ -1,15 +1,9 @@
 <template>
     <div class="container">
         <Breadcrumb :items="['云商城', '商品列表']" />
-        <a-card>
-            <a-space size="large">
-                <a-statistic title="剩余乐跑次数" :value="userCount?.lepao_count" :loading="loading" animation
-                    show-group-separator />
-                <a-button type="primary" size="large" @click="SendCount()" style="margin-left: 20px;">
-                    <span><icon-gift /> 赠送次数</span>
-                </a-button>
-            </a-space>
-        </a-card>
+
+        <userCard type="goods"/>
+
         <a-card title="商品列表" style="margin-top: 20px;">
             <a-list hoverable :loading="loading">
                 <a-list-item v-for="(item, index) in data" :key="index">
@@ -35,82 +29,17 @@
             </a-list>
         </a-card>
     </div>
-
-    <a-modal v-model:visible="visible" title="赠送乐跑次数" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
-        :ok-loading="ok_loading" esc-to-close closable>
-        <a-form :model="sendform">
-            <a-form-item field="username" label="接收人">
-                <a-input v-model="sendform.username" placeholder="请填写接收人用户名，如：用户adfg45g" :max-length="20"/>
-            </a-form-item>
-            <a-form-item field="count" label="赠送次数">
-                <a-input-number v-model="sendform.count" placeholder="请填写要赠送的次数"  mode="button" />
-            </a-form-item>
-        </a-form>
-    </a-modal>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { getGoodsList, getCount, sendCount } from '@/api/goods'
-import { Notification, Message } from '@arco-design/web-vue'
+import { ref } from 'vue'
+import { getGoodsList } from '@/api/goods'
+import { Notification } from '@arco-design/web-vue'
+import userCard from '@/components/userCard/userCard.vue'
 
 const data = ref([])
-const userCount = ref({})
 const loading = ref(false)
 
-const visible = ref(false)
-const ok_loading = ref(false)
-const sendform = reactive({
-    username: '',
-    count: 1
-})
-
-const handleBeforeOk = async (done) => {
-    try {
-        ok_loading.value = true
-        if (!sendform.username) {
-            Message.error('请填写接收人用户名！')
-            return false
-        }
-
-        if (!sendform.count || sendform.count < 1 || sendform.count > 9999) {
-            Message.error('超出赠送的次数范围，请重新选择赠送次数！')
-            return false
-        }
-
-        const res = await sendCount({ username: sendform.username, count: sendform.count })
-        if (!res || res.code !== 0) {
-            Notification.error({
-                title: '赠送次数失败！',
-                content: res?.msg ?? '请稍后再试'
-            })
-            return false
-        }
-
-        Message.success('赠送成功！')
-        done()
-        GetCount()
-    } catch (error) {
-        Notification.error({
-            title: '赠送次数失败！',
-            content: error.message || '请稍后再试'
-        })
-        return false
-    } finally {
-        ok_loading.value = false
-    }
-}
-
-const handleCancel = () => {
-    visible.value = false
-}
-
-const SendCount = async () => {
-    sendform.username = ''
-    sendform.count = 1
-    visible.value = true
-}
-
 const getGoods = async () => {
     try {
         loading.value = true
@@ -131,28 +60,7 @@ const getGoods = async () => {
     }
 }
 
-const GetCount = async () => {
-    try {
-        loading.value = true
-        const res = await getCount()
-        if (!res || res.code !== 0)
-            return Notification.error({
-                title: '获取用户数据失败！',
-                content: res?.msg ?? '请稍后再试'
-            })
-        userCount.value = res.data
-    } catch (error) {
-        Notification.error({
-            title: '获取用户数据失败！',
-            content: error.message || '请稍后再试'
-        })
-    } finally {
-        loading.value = false
-    }
-}
-
 getGoods()
-GetCount()
 </script>
 
 <style lang="less" scoped>

src/router/index.js

@@ -124,7 +124,7 @@ const routes = [
                 name: 'lepao.accountList',
                 component: () => import('../pages/lepao/accountList/index.vue'),
                 meta: {
-                    title: '账号管理'
+                    title: '乐跑账号'
                 }
             },
             {