增加telegram bot推送

mock/test.ts

@@ -1,5 +1,5 @@
 import {MockMethod} from 'vite-plugin-mock';
-import {changeEmailApi, changePwdApi, sendCodeApi} from "../src/interface";
+import {changeEmailApi, changePwdApi, sendCodeApi, telegramBotApi} from "../src/interface";
 
 
 const Mock = require('mockjs')
@@ -45,6 +45,7 @@ export default [
         url: changePwdApi,
         method: 'post',
         response: ({query}) => {
+            debugger
             const result = Mock.mock({
                 'result': /OK|FAIL/,
             })
@@ -60,5 +61,49 @@ export default [
                 }
             }
         }
+    },
+    {
+        url: telegramBotApi,
+        method: 'get',
+        response: ({query}) => {
+            debugger
+            const result = Mock.mock({
+                'result': Math.random() < 0.9 ? 'OK' : "FAIL",
+            })
+
+            if (result.result === 'OK') {
+                result.message = '获取机器人信息成功'
+                result.bot = Mock.mock({
+                    name: /\w{5}/
+                })
+                return result
+            } else {
+                return {
+                    ...result, ...Mock.mock({
+                        'message': '获取机器人信息失败'
+                    })
+                }
+            }
+        }
+    },
+    {
+        url: telegramBotApi,
+        method: 'post',
+        response: ({body}) => {
+            debugger
+            const result = Mock.mock({
+                'result': Math.random() < 0.9 ? 'OK' : "FAIL",
+            })
+
+            if (result.res === 'OK') {
+                result.message = '机器人绑定成功'
+            } else {
+                return {
+                    ...result, ...Mock.mock({
+                        'message': /机器人绑定失败，(token不合法)/
+                    })
+                }
+            }
+        }
     }
 ] as MockMethod[];

package.json

@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "element3": "^0.0.39",
-    "mockjs": "^1.1.0",
     "vue": "^3.0.5",
     "vue-router": "4",
     "vuex": "^4.0.0"
@@ -19,6 +18,7 @@
     "@vuedx/typecheck": "^0.6.0",
     "@vuedx/typescript-plugin-vue": "^0.6.0",
     "cross-env": "^7.0.3",
+    "mockjs": "^1.1.0",
     "node-sass": "^5.0.0",
     "sass": "^1.32.7",
     "sass-loader": "^11.0.1",

src/App.vue

@@ -7,8 +7,15 @@
           </el-col>
           <el-col :span="20">
             <el-menu mode="horizontal" :router="true" :default-active="store.state.route">
-              <el-menu-item index="/home">主页</el-menu-item>
+
-              <el-submenu index="">
+
+              <el-submenu index="1">
+                <template v-slot:title>推送配置</template>
+                <el-menu-item index="/config">当前配置</el-menu-item>
+                <el-menu-item index="/config/telegram">修改telegram bot</el-menu-item>
+              </el-submenu>
+
+              <el-submenu index="2">
                 <template v-slot:title>个人信息</template>
                 <el-menu-item index="/password">修改密码</el-menu-item>
                 <el-menu-item index="/email">修改邮箱</el-menu-item>
@@ -19,7 +26,7 @@
         </el-row>
     </el-header>
     <el-main>
-      <Home v-if="$route.fullPath==='/'"/>
+      <Config v-if="$route.fullPath==='/'"/>
       <router-view v-else/>
     </el-main>
   </el-container>
@@ -28,13 +35,13 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import Home from "./components/Home.vue";
+import Config from "./components/Config.vue";
 import {useStore} from "vuex";
 
 
 export default defineComponent({
   name: 'App',
-  components: {Home},
+  components: {Config},
   setup() {
     const store = useStore()
 

src/components/Config.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-row type="flex" justify="center">
+    <el-col :span="8">
+      <el-input v-model="botName" :disabled="true">
+        <template v-slot:prepend>Telegram Bot</template>
+      </el-input>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import {defineComponent, onMounted, ref} from "vue";
+import {useStore} from "vuex";
+import {getTelegramBot, message} from "../request";
+
+export default defineComponent({
+  name: "Config",
+  setup() {
+
+    const store = useStore()
+
+    onMounted(() => {
+      store.commit('updateRoute', '/config')
+    })
+
+    const botName = ref('')
+
+    getTelegramBot(store.state.user.email).then(res => res.json())
+        .then(res => {
+          if (res.result === 'OK') {
+            botName.value = res.bot.name
+          } else {
+            message(res)
+          }
+        })
+
+    return {botName}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/Email.vue

@@ -30,7 +30,7 @@
     </el-col>
     <el-col :span="2"/>
     <el-col :span="2">
-      <el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
+      <el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
     </el-col>
   </el-row>
 </template>
@@ -80,7 +80,7 @@ export default defineComponent({
         res => {
           message(res)
           if (res.result === 'OK') {
-            router.replace('/home')
+            router.replace('/config')
           }
         }
     )

src/components/Home.vue

@@ -1,24 +0,0 @@
-<template>
-  <h1>主页</h1>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted} from "vue";
-import {useStore} from "vuex";
-
-export default defineComponent({
-  name: "Home",
-  setup() {
-
-    const store = useStore()
-
-    onMounted(() => {
-      store.commit('updateRoute', '/home')
-    })
-  }
-})
-</script>
-
-<style scoped>
-
-</style>

src/components/Password.vue

@@ -24,7 +24,7 @@
     </el-col>
     <el-col :span="2"/>
     <el-col :span="2">
-      <el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
+      <el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
     </el-col>
   </el-row>
 </template>
@@ -55,7 +55,7 @@ export default defineComponent({
         .then(res => {
           message(res)
           if (res.result === 'OK') {
-            router.replace('/home')
+            router.replace('/config')
           }
         })
 

src/components/TelegramBot.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-row type="flex" justify="center">
+    <el-col :span="12">
+      <el-input v-model="newBotToken">
+        <template v-slot:prepend>机器人Api Token</template>
+      </el-input>
+    </el-col>
+  </el-row>
+  <el-row type="flex" justify="center" class="mt-1">
+    <el-col :span="2">
+      <el-button type="primary" class="btn-block" @click="openBot" v-loading.fullscreen.lock="fullscreenLoading">
+        测试token
+      </el-button>
+    </el-col>
+  </el-row>
+  <template v-if="botName!==''">
+    <el-row type="flex" justify="center" class="mt-1">
+      <el-col :span="12">
+        <el-input v-model="botName" :disabled="true">
+          <template v-slot:prepend>即将绑定的机器人</template>
+        </el-input>
+      </el-col>
+    </el-row>
+    <el-row type="flex" justify="center" class="mt-1">
+      <el-col :span="2">
+        <el-button type="primary" class="btn-block" @click="bindBot">绑定</el-button>
+      </el-col>
+    </el-row>
+  </template>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+import {updateRoute} from "../router";
+import {bindTelegramBot, message, testTelegramBot} from "../request";
+import {useStore} from "vuex";
+import {useRouter} from "vue-router";
+
+export default defineComponent({
+  name: "TelegramBot",
+  setup() {
+    updateRoute()
+
+    const fullscreenLoading = ref<boolean>(false)
+
+    const newBotToken = ref<string>('')
+
+    const botName = ref<string>('')
+
+    const openBot = () => {
+      fullscreenLoading.value = true
+      testTelegramBot(newBotToken.value)
+          .then(res => res.json()).then(res => {
+        fullscreenLoading.value = false
+        if (res.ok) {
+          botName.value = res.result.username
+        } else {
+          message({result: 'FAIL', message: '无法获取机器人信息，请确认token输入正确'})
+        }
+      })
+    }
+
+    const store = useStore()
+    const router = useRouter()
+
+    const bindBot = () => bindTelegramBot(store.state.user.email, newBotToken.value)
+        .then(res => res.json())
+        .then(res => {
+          message(res)
+          if (res.result === 'OK') {
+            router.replace('/config')
+          }
+        })
+
+    return {newBotToken, openBot, botName, fullscreenLoading, bindBot}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/Vue3.vue

@@ -1,49 +0,0 @@
-<template>
-  <h1>{{num}}*2={{double}}</h1>
-  <h1>{{num2.count}}*3={{triple}}</h1>
-  <button @click="add">累加</button>
-
-  <button @click="insert">插入</button>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, reactive, ref} from 'vue'
-
-
-export default defineComponent({
-  name: "Vue3",
-
-  setup:()=>{
-    const num=ref<number>(1)
-
-    const isAdd=ref<boolean>(false)
-
-    const num2=reactive<{count:number}>({
-      count:1
-    })
-
-    function add() {
-      num.value++
-      num2.count++
-    }
-
-    function insert(){
-      isAdd.value=true
-    }
-
-    function cancel(){
-      isAdd.value=false
-    }
-
-    const double=computed<number>(()=>num.value*2)
-
-    const triple=computed<number>(()=>num2.count*3)
-
-    return {num,add,double,num2,triple,isAdd,insert,cancel}
-  }
-})
-</script>
-
-<style scoped>
-
-</style>

src/interface.ts

@@ -1,3 +1,5 @@
 export const sendCodeApi = '/api/change/email/code'
 export const changeEmailApi = '/api/change/email'
-export const changePwdApi = '/api/change/pwd'
+export const changePwdApi = '/api/change/pwd'
+export const telegramBotApi = '/api/telegram/bot'
+export const testTelegramBotApi = (token: string) => `https://api.telegram.org/bot${token}/getMe`

src/request.ts

@@ -1,4 +1,4 @@
-import {changeEmailApi, changePwdApi, sendCodeApi} from "./interface";
+import {changeEmailApi, changePwdApi, sendCodeApi, telegramBotApi, testTelegramBotApi} from "./interface";
 // @ts-ignore
 import {Message} from 'element3/src/components/Message'
 
@@ -29,6 +29,26 @@ export function changePwd(userEmail: string, password: string) {
     return fetch(new Request(changePwdApi, {method: 'POST', body: JSON.stringify({userEmail, password})}))
 }
 
+/**
+ * 获取telegram bot
+ * @param userEmail
+ */
+export function getTelegramBot(userEmail: string) {
+    return fetch(new Request(`${telegramBotApi}?userEmail=${userEmail}`))
+}
+
+/**
+ * 测试机器人token
+ * @param token
+ */
+export function testTelegramBot(token: string) {
+    return fetch(new Request(testTelegramBotApi(token)))
+}
+
+export function bindTelegramBot(userEmail: string, token: string) {
+    return fetch(new Request(telegramBotApi), {method: 'POST', body: JSON.stringify({userEmail, token})})
+}
+
 export function message(res: any) {
     new Message({
         showClose: true,

src/router.ts

@@ -1,13 +1,15 @@
 import {createRouter, createWebHashHistory, useRoute} from "vue-router";
 import Email from "./components/Email.vue";
-import Home from "./components/Home.vue";
+import Config from "./components/Config.vue";
 import {useStore} from "vuex";
 import {onMounted} from "vue";
 import Password from "./components/Password.vue";
+import TelegramBot from "./components/TelegramBot.vue";
 
 
 const routes = [
-    {path: '/home', component: Home},
+    {path: '/config', component: Config},
+    {path: '/config/telegram', component: TelegramBot},
     {path: '/email', component: Email},
     {path: '/password', component: Password}
 ]

src/store.ts

@@ -5,7 +5,7 @@ export const store = createStore({
         user: {
             email: '1029559041@qq.com'
         },
-        route: '/home'
+        route: '/config'
     }),
     mutations: {
         setUser(state, user) {