fix:bug

.eslintrc.js

@@ -14,8 +14,10 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    "@typescript-eslint/no-var-requires": 0,
-    "no-empty-function": "off",
-    "@typescript-eslint/no-empty-function": ["off"],
+    '@typescript-eslint/no-var-requires': 0,
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': ['off'],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    "no-non-null-assertion": true
   }
 }

README.md

@@ -1,24 +1,5 @@
 # zd-app-web
 
-## Project setup
-```
-yarn install
-```
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## 访问url
+  https://luojigou.vip/app_web/learn-plan/#/blue-light-tip

components.d.ts

@@ -7,7 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    LuojigouBoard: typeof import('./src/components/LuojigouBoard/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanOverlay: typeof import('vant/es')['Overlay']

package.json

@@ -6,21 +6,25 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "upload": "python upload.py /usr/share/nginx/html/luojigou/ app_web"
+    "upload:pro": "python upload.py /usr/share/nginx/html/luojigou/ app_web pro",
+    "upload:dev": "python upload.py /usr/share/nginx/html/ app_web dev"
   },
   "dependencies": {
     "@types/qrcode": "^1.5.0",
+    "axios": "^1.3.4",
     "dayjs": "^1.11.7",
     "html2canvas": "^1.4.1",
     "lib-flexible": "^0.3.2",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.0.34",
     "postcss-pxtorem": "5.1.1",
     "qrcode": "^1.5.1",
     "vant": "^4.0.10",
+    "vconsole": "^3.15.0",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vue-hooks-plus": "^1.6.5",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",

src/App.vue

@@ -2,6 +2,8 @@
   <router-view/>
 </template>
 
+<script>
+</script>
 <style lang="scss">
 
 </style>

src/api/learnPlan.ts

@@ -0,0 +1,30 @@
+import request from '@/service/index'
+
+
+
+/**
+ * 根据用户id获取用户学习报告情况
+ * @param data 
+ * @returns 
+ */
+ export const getReportByUser = (data: {itemId: string, userId: string}) => {
+  return request<API.LearnPlan.Task>({
+    url: '/app/game-course/data/task4',
+    method: 'post',
+    data
+  })
+}
+
+
+/**
+ * 分享用户的学习报告
+ * @param data 
+ * @returns 
+ */
+export const shareUserReport = (data: {itemId: string, userId: string}) => {
+  return request<API.LearnPlan.Task>({
+    url: '/app/game-course/data/task4/share',
+    method: 'post',
+    data
+  })
+}

src/components/HelloWorld.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/LuojigouBoard/README.md

@@ -0,0 +1,12 @@
+
+# 题卡组件
+  用在云大赛相关项目
+
+## 参数
+
+| 参数     | 类型                  | 描述                   |
+| -------- | --------------------- | ---------------------- |
+| Platform | 'h5' \| 'miniProgram' | 是小程序引入还会h5应用 |
+|          |                       |                        |
+|          |                       |                        |
+

src/components/LuojigouBoard/index.vue

@@ -0,0 +1,306 @@
+
+<template >
+  <div class="luojigou-board" >
+    <!-- navbar -->
+    <div class="navbar" >
+      <div class="" ></div>
+    </div>
+    <!-- 操作题卡区域 -->
+    <div class="opra"  >
+      <div class="board"  :style="{background: `url(${boardUrl})`}">
+        <div class="card" >
+          <div class="ques" >
+            <img :src="props.card.quesUrl" alt="">
+          </div>
+          <div class="ans" ref="ansEl" >
+            <div 
+              class="ans-item" 
+              :style="{height: ansItemHeight + 'px'}" 
+              v-for="item in props.card.ans" 
+              :key="item.color"
+            >
+              <img :src="item.url" alt="">
+            </div>
+          </div>
+        </div>
+          <div class="buttons" id="ans" ref="buttonEl" >
+            <img
+              :name="item.color"
+              v-for="(item, index) in buttons"
+              :key="item.url"
+              :src="item.url"
+              :cusAttr="JSON.stringify({
+                x: VSpace * index,
+                y: 426,
+                color: item.color
+              })"
+              :style="{
+                width: '46px',
+                height: '46px',
+                transform: `translate(${VSpace * index}px, 426px)`
+              }"
+            />
+            <!--  transform: `translate(${VSpace * index}px, ${426}px)` -->
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable vue/require-prop-type-constructor */
+import { defineProps, ref, onMounted, reactive } from 'vue'
+import { useDrag } from '@/hook/index'
+
+type Colors = 'red' | 'orange' | 'green' | 'purple' | 'blue' | 'yellow'
+
+interface IProps {
+  platform: 'h5' | 'miniProgram',
+  formwork: 'four' | 'six',
+  card: {
+    quesUrl: string,
+    ans: {url: string, color: Colors, button: string}[]
+    buttonsPos: {x: number, y: number, color: Colors}[]
+  }
+}
+
+const initProps: IProps = {
+  platform: 'h5',
+  formwork: "six",
+  card: {
+    quesUrl: 'https://app-resources-luojigou.luojigou.vip/FqGOmqXFXSp8D-PsxpbrmFTi5O-m',
+    ans: [
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FjLia9g1_NqKW0dzozRZPA-BOryq', color: 'red' },
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FubYgi_og7RI23MHPVhtm9kl-STW', color: 'green' },
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FlASX6RW3JFb9-FrBzLWPSHYuMGo', color: 'orange' },
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FtBZMPDRLLsIBQrTdTjtjPxI-rma', color: 'purple' },
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FtBZMPDRLLsIBQrTdTjtjPxI-rma', color: "yellow" },
+      {button: '', url: 'https://app-resources-luojigou.luojigou.vip/FtBZMPDRLLsIBQrTdTjtjPxI-rma', color: 'blue' }
+    ],
+    buttonsPos: [{ x: 0, y: 0, color: 'blue' }]
+  }
+}
+
+const staticImg = {
+  boardBg: require('@/assets/component/LuojigouBoard/board-bg.png'),
+  boardFour: require('@/assets/component/LuojigouBoard/board-four.png'),
+  boardSix: require('@/assets/component/LuojigouBoard/board-six.png'),
+  blue: require('@/assets/component/LuojigouBoard/blue.png'),
+  green: require('@/assets/component/LuojigouBoard/green.png'),
+  orange: require('@/assets/component/LuojigouBoard/orange.png'),
+  red: require('@/assets/component/LuojigouBoard/red.png'),
+  yellow: require('@/assets/component/LuojigouBoard/yellow.png'),
+  purple: require('@/assets/component/LuojigouBoard/purple.png')
+}
+
+const reg = new RegExp(/(-\d+)|(\d+)/g)
+
+const props = initProps
+
+// 答案区的份数
+const copies = props.formwork === 'four' ? 4 : 6
+
+// 按钮横向距离
+const VSpace = props.formwork === 'four' ? 27 : 53
+
+// 答案纵向高度
+const ansItemHeight = props.formwork === 'four' ? 95 : 64
+
+const buttons = ref([
+  { x: 0, y: 0, url: staticImg.red, color: 'red' },
+  { x: 0, y: 200, url: staticImg.blue, color: 'blue' },
+  { x: 0, y: 200, url: staticImg.green, color: 'green' },
+  { x: 0, y: 200, url: staticImg.orange, color: 'orange' },
+  { x: 0, y: 200, url: staticImg.yellow, color: "yellow" },
+  { x: 0, y: 200, url: staticImg.purple, color: 'purple' },
+])
+
+const boardUrl = props.formwork === 'four' ? staticImg.boardFour : staticImg.boardSix
+
+const ansEl = ref()
+const buttonEl = ref()
+
+const state = reactive({
+  cacheButtonPos: {x: 0, y: 0, copies: 0}
+})
+
+const getTransform = (ev: TouchEvent) => {
+  const target = ev.target as HTMLElement
+  if (!target) return {x: 0, y: 0}
+  const [x, y] = target.style.transform.match(reg)!
+  return {x: Number(x), y: Number(y)}
+}
+
+const onDragStart = (ev: TouchEvent) => {
+
+  const { x, y }= getTransform(ev)
+  const curCopies = Math.floor(y / ansItemHeight)
+  state.cacheButtonPos = {x, y, copies: curCopies >= 6 ? 5 : curCopies}
+
+}
+
+const getEleByColor = (color: Colors): HTMLElement => {
+  return Array.from(buttonEl.value.children).find( item => item.name == color ) as HTMLElement
+}
+
+/**
+ * 存在五种拖拽情况
+ * 1. 答案区为空， 按钮直接放在答案区
+ * 2. 答案区存在按钮 ， 两个按钮互换位置
+ * 3. 直接点击答案区的按钮，答案区按钮回到初始位置
+ * 4. 没有放在答案区， 按钮回到初始位置
+ * 5. 两个按钮都在答案区， 直接进行按钮之间的交换
+ * 6. 将在答案区的按钮直接拖动到另外一个答案区
+ * 7. 按钮没在答案区， 但是目标区域已经有按钮了
+ * @param ev 
+ * @param setPos 
+ */
+const onDragEnd = (ev: TouchEvent, setPos: any) => {
+
+  const target = ev.target as HTMLElement
+
+  const { x, y } = getTransform(ev)
+  console.log(x, y);
+  
+  const cusAttr = JSON.parse(target.attributes.getNamedItem('cusattr')!.value!)
+
+  //  3. 直接点击答案区的按钮，答案区按钮回到初始位置
+  if ( state.cacheButtonPos.x == x && state.cacheButtonPos.y == y) {
+    setPos(target, { x: cusAttr.x, y: cusAttr.y }, 0.2)
+    return
+  }
+  
+  let curCopies = Math.floor( y < 0 ? 0 / ansItemHeight : y / ansItemHeight) 
+ 
+  console.log(curCopies);
+  
+  // 按钮放置判断
+  if (ansEl.value.offsetLeft - 23 < x && curCopies < 6 && curCopies >= 0) {
+    curCopies = curCopies > 5 ? 5 : curCopies
+    // 拖拽的按钮已经在答案区了
+    if ( props.card.ans[curCopies].button ) {
+        // 5. true 两个按钮都在答案区， 直接进行按钮之间的交换 false 7. 按钮没在答案区， 但是目标区域已经有按钮了
+        const flag =props.card.ans[state.cacheButtonPos.copies].button 
+        const oldTarget = getEleByColor(props.card.ans[curCopies].button as Colors)
+        const oldCurAttr = JSON.parse(oldTarget.attributes.getNamedItem('cusattr')!.value!)
+        let pos = {x: 0, y : 0}
+        if (flag) {
+          pos = {x: state.cacheButtonPos.x, y: state.cacheButtonPos.y}
+        } else {
+          pos = {x: oldCurAttr.x, y: oldCurAttr.y}
+        }
+        setPos(
+          oldTarget,
+          pos,
+          0.2
+        )
+    }
+  
+    
+    // 按钮直接放在答案区
+    setPos(
+      target,
+      { x: ansEl.value.offsetLeft + ansEl.value.offsetWidth - 23,
+        y: curCopies * ansItemHeight + ansItemHeight / 2 - 20
+      }, 
+      0.2
+    )
+    props.card.ans[curCopies].button = cusAttr.color
+  } else {
+    setPos(target, { x: cusAttr.x, y: cusAttr.y }, 0.2)
+  }
+}
+
+onMounted(() => {
+  useDrag(buttonEl.value, { onDragEnd: onDragEnd, onDragStart:  onDragStart})
+})
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.luojigou-board {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  .navbar {
+    width: 100vw;
+    height: 104px;
+    background: #F9BF4F;
+  }
+  .opra {
+    width: 100vw;
+    height: 708px;
+    background: url('../../assets/component/LuojigouBoard/board-bg.png');
+    display: flex;
+    justify-content: center;
+    padding-top: 23px;
+    .board {
+      width: 357px;
+      height: 617px;
+      position: relative;
+
+      .card {
+        width: 303px;
+        height: 386px;
+        border-radius: 20px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: 103px;
+        left: 13px;
+      }
+      .ques {
+        width: 225px;
+        height: 386px;
+        border-right: 1px solid #006CAA;
+        // position: absolute;
+        // top: 103px;
+        // left: 13px;
+        img {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+      }
+      .ans {
+        width: 85px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+        overflow: hidden;
+        background-color: #fff;
+        .ans-item {
+          border-bottom: 1px solid #006CAA;
+          box-sizing: border-box;
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+
+      .ans .ans-item:last-child {
+        border-bottom: none
+      }
+      .buttons {
+        position: relative;
+        top: 100px;
+        left: 10px;
+        width: 340px;
+        height: 500px;
+        img {
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/dist/main.js

@@ -1,7 +1,7 @@
-"use strict";
-exports.__esModule = true;
-var vue_1 = require("vue");
-var App_vue_1 = require("./App.vue");
-var router_1 = require("./router");
-var store_1 = require("./store");
-vue_1.createApp(App_vue_1["default"]).use(store_1["default"]).use(router_1["default"]).mount('#app');
+'use strict'
+exports.__esModule = true
+var vue_1 = require('vue')
+var App_vue_1 = require('./App.vue')
+var router_1 = require('./router')
+var store_1 = require('./store')
+vue_1.createApp(App_vue_1.default).use(store_1.default).use(router_1.default).mount('#app')

src/enum/store.ts

@@ -0,0 +1,6 @@
+
+
+
+export enum StoreEnum {
+  'TOKEN' = 'TOKEN'
+}

src/hook/appHook.ts

@@ -1,20 +1,45 @@
 
 /**
- * @description 点击调用app返回
+ * @description 点击调用app方法
  */
 
+import { useTokenStore } from "@/store";
+
 const push = (path: string) => {
-  window.navAppPage.postMessage(JSON.stringify({ route: path }))
+  switch (path) {
+    case 'navigateExercise':
+      window.navigateExercise.postMessage(JSON.stringify({}))
+      break;
+    case 'navigateRecord':
+      window.navigateRecord.postMessage(JSON.stringify({}))
+      break;
+    case 'reloadGame':
+      window.reloadGame.postMessage(JSON.stringify({}))
+      break;
+  }
 }
 
 const back = (path = '') => {
   window.popPage.postMessage(path)
 }
 
+
+const getToken = () => {
+  window.returnToken = token => useTokenStore().set(token)
+  try {
+    window.getToken.postMessage(JSON.stringify({}))
+  } catch (error) {
+    
+  }
+  
+}
+
 export const useAppRouter = () => {
+  
   const router = {
     push: push,
-    back: back
+    back: back,
+    getToken
   }
 
   return router

src/hook/index.ts

@@ -44,6 +44,7 @@ export const useScheduler: UseScheduler = ({
 /**
  * @description 执行一定的定时器， 会在执行完后销毁
  */
+
 export const useSchedulerOnce = ({
   cb,
   delay
@@ -59,11 +60,13 @@ export const useSchedulerOnce = ({
  * @description 音频的duration 需要在oncanplay事件中才能获取到
  * @return [UseAudioFastCall, HTMLAudioElemen]
  */
+
 export const useAudioManager: UseAudioManager = ({
   url = '',
   format = ''
 }) => {
   const fco = reactive<UseAudioFastCall>({
+    src: '',
     playing: false,
     updateTime: '',
     duration: '',
@@ -74,10 +77,12 @@ export const useAudioManager: UseAudioManager = ({
   })
   if (typeof window.$audio === 'object') {
     window.$audio.src = url
-    fco.play = window.$audio.play
+    fco.play = window.$audio.play.bind(window.$audio)
     fco.pause = window.$audio.pause
     return [fco, window.$audio]
   } else {
+    console.log('initAudio');
+    
     const atx = new Audio(url)
 
     atx.onplaying = () => {
@@ -108,6 +113,16 @@ export const useAudioManager: UseAudioManager = ({
       fco.playing = false
     }
 
+    Object.defineProperty(fco, 'src', {
+      get() {
+        return atx.src
+      },
+      set (v) {
+        atx.src = v
+        return v
+      }
+    })
+
     window.$audio = atx
 
     onUnmounted(() => {
@@ -118,6 +133,10 @@ export const useAudioManager: UseAudioManager = ({
   }
 }
 
+/**
+ * 它返回一个以回调函数为参数的函数，回调函数将在设备方向改变时被调用。
+ * @returns 具有函数的数组。
+ */
 export const useDeviceDire = (): [(cb: (dire: 'H' | 'V') => void) => void ] => {
   let dire: 'H' | 'V' = 'H'
 
@@ -133,8 +152,6 @@ export const useDeviceDire = (): [(cb: (dire: 'H' | 'V') => void) => void ] => {
       _cb(dire)
     }
     if (window.orientation === 90 || window.orientation === -90) {
-      console.log('触发横屏')
-
       dire = 'H'
       _cb(dire)
     }
@@ -150,3 +167,136 @@ export const useDeviceDire = (): [(cb: (dire: 'H' | 'V') => void) => void ] => {
 
   return [direChange]
 }
+
+export const useDrag = (
+  el: HTMLElement,
+  options: {
+    onDragStart?: (ev: TouchEvent) => void,
+    onDraging?: (ev: TouchEvent) => void,
+    onDragEnd?: (ev: TouchEvent, setPos: any) => void,
+  }
+) => {
+  console.dir(el);
+  
+  const { onDragStart, onDraging, onDragEnd } = options
+  let startPos = { x: 0, y: 0 }
+
+  const getOffsetTopScreen = (ele: HTMLElement) => {
+
+    let _ele = ele
+    let T = _ele.offsetTop
+    while (_ele.offsetParent !== null) {
+      _ele = _ele.offsetParent  as HTMLElement
+      T += ele.offsetTop
+      return T
+    }
+  }
+
+  const getOffsetLeftScreen = (ele: HTMLElement) => {
+
+    let _ele = ele
+    let T = _ele.offsetLeft
+    while (_ele.offsetParent !== null) {
+      _ele = _ele.offsetParent  as HTMLElement
+      T += ele.offsetLeft
+      return T
+    }
+  }
+
+  const offsetTopScreen = getOffsetTopScreen(el)!
+  const offsetLeftScreen = getOffsetLeftScreen(el)!
+
+  const touchmove = (ev: TouchEvent) => {
+    const target = (<HTMLElement>ev.target)
+
+    if (target.id == el.id) return
+
+    let x = 0, y = 0
+
+    
+    const { clientX, clientY } = ev.touches[0]
+    if (clientY - startPos.y < 0) {
+      y = 0
+    } else if (clientY - startPos.y > 426) {
+      y = 426
+    } else {
+      y = clientY - startPos.y 
+    }
+    
+    if (clientX - startPos.x < 0) {
+      x = 0
+    } else if (clientX - startPos.x >  el.offsetWidth - 46) {
+      
+      x =  el.offsetWidth - 46 
+
+    } else {
+      x = clientX - startPos.x 
+    }
+
+    if ( (clientX > el.offsetLeft && clientX <el.offsetWidth) && clientY < offsetTopScreen + 46)  {
+      target.style.transform = `translate(${x}px, ${y}px)`
+    } else if ( (clientX > el.offsetLeft && clientX < el.offsetWidth) && clientY > offsetTopScreen + el.offsetHeight - 46 ) {
+      target.style.transform = `translate(${x}px, ${y}px)`
+    } else if ( clientX < offsetLeftScreen && clientY > offsetTopScreen &&  clientY < offsetTopScreen + el.offsetHeight) {
+      target.style.transform = `translate(${x}px, ${y}px)`
+    } else if (clientX > el.offsetWidth - 46 && clientY > offsetTopScreen &&  clientY < offsetTopScreen + el.offsetHeight) {
+      target.style.transform = `translate(${x}px, ${y}px)`
+    }
+    
+    else if (
+      clientX > offsetLeftScreen &&
+      clientX < offsetLeftScreen + el.offsetWidth  &&
+      clientY > offsetTopScreen  &&
+      clientY < offsetTopScreen + el.offsetHeight
+    ){
+
+      target.style.transform = `translate(${ x}px, ${ y}px)`
+      onDraging && onDraging(ev)
+    }
+  }
+
+  const touchstart = (ev: TouchEvent) => {
+    console.log(ev);
+
+    const target = (<HTMLElement>ev.target)
+
+    if (target.id == el.id) return
+    const deviationX = Number(target.style.width.replace(/px/, '')) / 2
+    const deviationY = Number(target.style.height.replace(/px/, '')) / 2
+    startPos = { x: (<any>target).x + deviationX, y: (<any>target).y + deviationY }
+    onDragStart && onDragStart!(ev)
+  }
+
+  const touchend = (ev: TouchEvent) => {
+    const target = (<HTMLElement>ev.target)
+    if (target.id == el.id) return
+    onDragEnd && onDragEnd!(ev, setPos)
+  }
+  
+  function setPos (
+    el: HTMLElement,
+    { x, y }: {x: number, y: number},
+    druation: number
+  ) {
+    el.style.transition = `transform ${druation}s`
+    el.style.transform = `translate(${x}px, ${y}px)`
+    const timeId = setTimeout(() => {
+      el.style.transition = 'none'
+      clearTimeout(timeId)
+    }, druation * 1000)
+  }
+
+  el.addEventListener('touchstart', touchstart)
+
+  el.addEventListener('touchmove', touchmove)
+
+  el.addEventListener('touchend', touchend)
+
+  onUnmounted(() => {
+    el.removeEventListener('touchmove', touchmove)
+    el.removeEventListener('touchstart', touchstart)
+    el.removeEventListener('touchend', touchend)
+  })
+
+  return []
+}

src/hook/types.d.ts

@@ -23,6 +23,7 @@ export interface UseSchedulerOnceProps {
 }
 
 export interface UseAudioFastCall {
+  src: string,
   playing: boolean,
   updateTime: string | number,
   duration: string | number,
@@ -51,6 +52,19 @@ declare global {
     popPage: {
       postMessage: (params?: string) => void,
     },
+    navigateExercise: {
+      postMessage: (params?: string) => void,
+    }
+    navigateRecord: {
+      postMessage: (params?: string) => void,
+    }
+    reloadGame: {
+      postMessage: (params?: string) => void,
+    },
+    getToken: {
+      postMessage: (params?: string) => void,
+    },
+    returnToken: (token: string) => void
     $audio: HTMLAudioElement
   }
 }

src/main.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 import 'lib-flexible'
 import 'normalize.css'
+import routerGuard from '@/router/routerGuard'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(router).use(routerGuard).mount('#app')

src/pages/LearnPlan/components/LearnPlanButton.vue

@@ -4,7 +4,7 @@
       <img :src="icon" alt="">
     </div>
     <div class="name" >
-      <span>{{title}} </span>
+      <span style="" >{{title}} </span>
       <span v-if="props.type == 'forward'">{{countDown}}s </span>
     </div>
   </div>
@@ -23,13 +23,16 @@ const staticImg = {
 
 interface IProps {
   title: string,
-  type: 'normal' | 'forward'
+  type: 'normal' | 'forward',
+  goPage: () => void
 }
 
 const router = useRouter()
 
 const props = defineProps<IProps>()
 
+const emit = defineEmits(['click'])
+
 const title = ref<string>('')
 
 const countDown = ref<number>(5)
@@ -68,9 +71,7 @@ const countDownFn = () => {
   stx.start()
 }
 
-const goPage = () => {
-  router.push('/learn-report')
-}
+const goPage = () => props.goPage()
 
 </script>
 

src/pages/LearnPlan/main.ts

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import 'lib-flexible'
 import 'normalize.css'
+import * as Pinia from 'pinia'
 // import store from './store'
 
-createApp(App).use(router).mount('#LearnPlan')
+createApp(App).use(router).use(Pinia.createPinia()).mount('#LearnPlan')

src/pages/LearnPlan/router/index.ts

@@ -10,6 +10,16 @@ const routes: Array<RouteRecordRaw> = [
     path: '/learn-report',
     name: 'learn-report',
     component: () => import('../views/LearnReport/index.vue')
+  },
+  {
+    path: '/distance-tip',
+    name: 'distance-tip',
+    component: () => import('../views/DistanceTip/index.vue')
+  },
+  {
+    path: '/blue-light-tip',
+    name: 'blue-light-tip',
+    component: () => import('../views/BlueLightTip/index.vue')
   }
 ]
 

src/pages/LearnPlan/views/BlueLightTip/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="blue-light-tip" >
+    <img :src="Bluelightfiltering" alt="">
+  </div>
+</template>
+
+<script lang="ts" setup >
+
+const Bluelightfiltering = require('@/assets/component/LuojigouBoard/Blue light filtering.png')
+
+</script>
+
+<style lang="scss" scoped >
+.blue-light-tip {
+  width: 100vw;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+</style>

src/pages/LearnPlan/views/DistanceTip/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="distance-tip" >
+    <img :src="DistanceTip" alt="">
+  </div>
+</template>
+
+<script lang="ts" setup >
+const DistanceTip = require('@/assets/component/LuojigouBoard/DistanceTip.png')
+
+</script>
+
+
+<style lang="scss" scoped >
+.distance-tip {
+  width: 100vw;
+  height: 100vh;
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+</style>

src/pages/LearnPlan/views/LearnReport/index.vue

@@ -4,19 +4,18 @@
     <div class="learn-report-bg">
       <img class="bg" :src="staticImg.learnReportBg" alt="">
       <img class="title-img" :src="staticImg.titleImg" alt="">
-      <div class="user-name" >纯爱战神</div>
+      <div class="user-name" >{{state.report?.userNickName || '逻辑狗'}}</div>
     </div>
 
     <div class="learn-report-content" >
-       <!-- 学习天数 -->
-       <!--  -->
+      <!-- 学习天数 -->
     <div class="learn-day" v-if="posterShowState" >
       <div class="user-ava" >
         <img :src="staticImg.learnReportBg" alt="">
       </div>
-      <div class="user-name" >萌萌</div>
+      <div class="user-name" >{{state.report?.userNickName}}</div>
       <div class="learn-day-desc" >
-        <div>我家宝贝已经连续学习<span>12</span>天了</div>
+        <div>我家宝贝已经连续学习<span>{{state.report?.totalStudyDays}}</span>天了</div>
         <div>快来一起学习吧</div>
       </div>
     </div>
@@ -24,21 +23,39 @@
     <!-- 学习展示 -->
     <div class="learn-preview" :style="{marginTop: posterShowState ? '16px' : '-16px'}" >
       <div class="learn-preview-data" >
-        <div class="data-item" v-for="item in 3" :key="item" >
+        <div class="data-item"  >
           <div class="staticsc" >
-            <span>4</span>
+            <span>{{ state.report?.totalStudyDays}}</span>
             <div class="unit" >分钟</div>
           </div>
           <div class="data-item-desc" >
             累计时长
           </div>
         </div>
+        <div class="data-item"  >
+          <div class="staticsc" >
+            <span>{{state.report?.totalStars}}</span>
+            <div class="unit" >颗</div>
+          </div>
+          <div class="data-item-desc" >
+            获得星数
+          </div>
+        </div>
+        <div class="data-item"  >
+          <div class="staticsc" >
+            <span>{{state.report?.totalQuantity}}</span>
+            <div class="unit" >%</div>
+          </div>
+          <div class="data-item-desc" >
+            正确率
+          </div>
+        </div>
       </div>
       <div class="decator" >
         <img :src="staticImg.decator" alt="">
       </div>
 
-      <div class="audio-play-container" >
+      <div class="audio-play-container" :style="{background: `url(${state.report?.task3Image}) no-repeat top left`}" >
         <div v-if="!fco.playing" class="audio-time-total" >
           {{fco.duration}}
         </div>
@@ -46,7 +63,7 @@
           <img :src="staticImg.playButton" alt="">
         </div>
 
-        <div class="play-process"  v-if="fco.playing" >
+        <div class="play-process"  v-show="fco.playing" >
           <van-progress
             class="van-progress"
             :percentage="Number(fco.percentage.toFixed(2)) * 100"
@@ -77,10 +94,10 @@
       <div class="able-any" >
         <able-chart
           style="margin-bottom: 12px;"
-          title="战斗能力"
-          :count="2"
-          v-for="item in 5"
-          :key="item"
+          :title="item.capability"
+          :count="item.correctQuantity"
+          v-for="item in state.report?.exerciseCardResultList"
+          :key="item.capability"
         />
       </div>
     </div>
@@ -92,11 +109,13 @@
         <div class="learn-title" >家园共育策略</div>
       </div>
       <div class="strategy" >
-        <div class="strategy-item" v-for="item in 2" :key="item" >
+        <div class="strategy-item" 
+          v-for="item in state.report?.teachDescription.split('\n').splice(0, state.report?.teachDescription.split('\n').length - 1 )" 
+          :key="item"
+        >
           <div class="dot" ></div>
           <div class="text-content" >
-            圆成指亲报需形路处龙民叫安导照真指事我反
-            圆成指亲报需形路处龙民叫安导照真指事我反
+            {{item}}
           </div>
         </div>
       </div>
@@ -113,9 +132,9 @@
 
     <!-- 生成报告 -->
     <div class="create-poster" v-if="!posterShowState" >
-      <div class="create-button" @click="createPoster">
-        <div class="text" >晒报告 +5 </div>
-        <img :src="staticImg.dogCoin" alt="">
+      <div class="create-button" @click="_shareUserReport">
+        <div class="text" >晒报告   <span v-if="!state.shared" >+5</span> </div>
+        <img v-if="!state.shared" :src="staticImg.dogCoin" alt="">
       </div>
     </div>
 
@@ -137,11 +156,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
-import { showLoadingToast } from 'vant'
+import { ref, nextTick, onMounted, computed, watch, reactive } from 'vue'
 import { useAudioManager } from '@/hook/index'
 import AbleChart from '../../components/AbleChart.vue'
 import { screenShot, createQrcode } from '@/utils/utils'
+import { getReportByUser, shareUserReport } from "@/api/learnPlan"
+import { useRoute } from 'vue-router'
+import { useAppRouter } from '@/hook/appHook'
+
+export interface P {
+  submitUrl: string,
+  data: {
+    collectionId: string,
+    cardId?: string,
+  },
+  attach: {
+    itemId: string,
+    recordId: string,
+    userId: string
+  }
+}
 
 const staticImg = {
   learnReportBg: require('@LP/assets/learn-report-bg.png'),
@@ -155,26 +189,45 @@ const staticImg = {
 }
 
 const [fco, atx] = useAudioManager({
-  url: 'https://app-resources-luojigou.luojigou.vip/voice_1453536037958721538.mp3',
+  url: '',
   format: 'mm:ss'
 })
 
+const queryParams = useRoute().query as unknown as P
+
+const appRouter = useAppRouter()
+
+appRouter.getToken()
+
 const qrcode = ref('')
 
 const posterShowState = ref(false)
 
 const learnReportRef = ref()
 
-const playAudio = () => fco.play()
+const playAudio = () => {
+  fco.play()
+}
+
+const state = reactive<Partial<API.LearnPlan.Task>>({})
+
+const _shareUserReport = async () => {
+  const data = await shareUserReport({ "itemId": queryParams.attach.itemId, "userId": queryParams.attach.userId })
+  console.log(data);
+  createPoster()
+}
+
+// 获取用户报告信息
+const _getReportByUser = async () => {
+  const { data } = await getReportByUser({ "itemId": queryParams.attach.itemId, "userId": queryParams.attach.userId })
+  fco.src = data.report.task3Audio
+  state.report = data.report
+}
 
 const createPoster = async () => {
-  // showLoadingToast({
-  //   message: '生成中...',
-  //   forbidClick: true,
-  // });
   posterShowState.value = true
   nextTick(async () => {
-    if (Array.from(learnReportRef.value.children).length == 0) {
+    if (Array.from(learnReportRef.value.children).length === 0) {
       const posterEl = await screenShot('learn-report')
       posterEl.style.transform = 'scale(0.8)'
       learnReportRef.value.append(posterEl)
@@ -183,11 +236,12 @@ const createPoster = async () => {
 }
 
 const getQrcodeUrl = async () => {
-  qrcode.value = await createQrcode('some text')
+  qrcode.value = await createQrcode(window.location.href)
 }
 
 onMounted(() => {
   getQrcodeUrl()
+  _getReportByUser()
 })
 
 </script>
@@ -350,7 +404,8 @@ onMounted(() => {
     .audio-play-container {
       width: 262px;
       height: 277px;
-      background-color: #F5F5F5;
+
+      // background-color: #F5F5F5;
       border-radius: 20px;
       margin-top: 30px;
       position: relative;
@@ -406,7 +461,6 @@ onMounted(() => {
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #FFFFFF;
-          color: red;
           margin-top: 4px;
           // position: absolute;
           // bottom: 0px;
@@ -494,6 +548,8 @@ onMounted(() => {
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #333333;
+          line-height: 22px;
+          margin-bottom: 8px;
         }
       }
     }

src/pages/LearnPlan/views/TPage/index.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="t-page-v t-page" v-if="dire == 'V'" :style="{background: `url(${staticImg.bgV})`}" >
-
     <div class="back-icon" >
       <img :src="staticImg.backIcon" alt="" @click="backAppPage" >
     </div>
-
     <div class="countdown-container" >
       <div class="countdown" >{{countDown}}s</div>
       <div class="desc" >即将进入下一个环节</div>
     </div>
-
     <div class="opra" >
-      <learn-plan-button style="margin-bottom: 27px;" title="再來一次" type="normal" />
-      <learn-plan-button title="讲一讲" type="forward" />
+      <learn-plan-button :goPage="pageInfo().reload" title="再來一次" style="margin-bottom: 27px;" type="normal" />
+      <learn-plan-button :goPage="pageInfo().next" :title="pageInfo().title" type="forward" />
     </div>
   </div>
   <div v-else class="t-page-h t-page" :style="{background: `url(${staticImg.bgH})`}">
@@ -24,8 +21,8 @@
       <div class="desc" >即将进入下一个环节</div>
     </div>
     <div class="opra" >
-      <learn-plan-button style="margin-right: 25px;" title="再來一次" type="normal" />
-      <learn-plan-button title="讲一讲" type="forward" />
+      <learn-plan-button :goPage="pageInfo().reload" style="margin-right: 25px;" title="再來一次" type="normal" />
+      <learn-plan-button :goPage="pageInfo().next" :title="pageInfo().title"  type="forward" />
     </div>
   </div>
 </template>
@@ -35,6 +32,8 @@ import { ref } from 'vue'
 import LearnPlanButton from '../../components/LearnPlanButton.vue'
 import { useAppRouter } from '@/hook/appHook'
 import { useDeviceDire, useScheduler } from '@/hook/index'
+import { onMounted } from 'vue';
+import { useRouter, useRoute } from "vue-router"
 
 const staticImg = {
   backIcon: require('@LP/assets/back-icon.png'),
@@ -42,6 +41,34 @@ const staticImg = {
   bgV: require('@LP/assets/TPage-bg-v.png')
 }
 
+const route = useRoute()
+
+let {from} = route.query
+
+
+
+// 来自动画游戏的 进入学一学
+// 来自学一学的 进入讲一讲
+// 来自讲一讲的 进入学习报告
+/**
+ * {
+ *  from: 'ani' | 'exercise' | 'audio' | 'report'
+ * }
+ */
+enum FromEnum  {
+  'ani' = 'ani',
+  'exercise' = 'exercise',
+  'audio' = 'audio',
+  'report' = 'report'
+}
+
+console.log("from:", from);
+
+if (!from) {
+  from = FromEnum.ani
+}
+
+console.log("from:", from);
 const appRouter = useAppRouter()
 
 const [direChange] = useDeviceDire()
@@ -72,6 +99,41 @@ const backAppPage = () => {
   appRouter.back()
 }
 
+// 跳转
+
+const pageInfo = () => {
+
+  let _reload, _next, _title;
+// navigateExercise
+// navigateRecord
+  switch (from) {
+    case FromEnum.ani:
+      _reload = () => appRouter.push("reloadGame")
+      _next = () => appRouter.push("navigateExercise")
+      _title = '练一练'
+      break;
+    case FromEnum.exercise:
+      _reload = () => appRouter.push("reloadGame")
+      _next = () => appRouter.push("navigateRecord")
+      _title = '讲一讲'
+      break;
+    default:
+      _reload = () => appRouter.push("reloadGame")
+      _next = () => appRouter.push("navigateRecord")
+      _title = '讲一讲'
+      break;
+  }
+
+
+
+  return {
+    reload: _reload,
+    next: _next,
+    title: _title
+  }
+}
+
+
 </script>
 
 <style scoped  lang="scss" >

src/pages/demo/App.vue

@@ -1,10 +1,12 @@
 <template>
-  <div id="nav">
-    77888
-  </div>
-  <router-view/>
+  <luojigou-board formwork="four" platform="h5" />
 </template>
 
+<script lang="ts" setup >
+import LuojigouBoard from '@/components/LuojigouBoard/index.vue'
+
+</script>
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/pages/demo/main.ts

@@ -3,4 +3,7 @@ import App from './App.vue'
 // import router from './router'
 // import store from './store'
 
+import 'lib-flexible'
+import 'normalize.css'
+
 createApp(App).mount('#demo')

src/pages/demo/src/view/demo.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="demo" >demo</div>
+  <div class="demo" >
+    <luojigou-board formwork="four" platform="h5" />
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-
-})
-
+<script lang="ts" setup >
+import LuojigouBoard from '@/components/LuojigouBoard/index.vue'
 </script>
+
+<style lang="scss" scoped>
+.demo {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

src/router/dist/index.js

@@ -1,24 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var vue_router_1 = require("vue-router");
-var Home_vue_1 = require("../views/Home.vue");
-var routes = [
-    {
-        path: '/',
-        name: 'Home',
-        component: Home_vue_1["default"]
-    },
-    {
-        path: '/about',
-        name: 'About',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "about" */ '../views/About.vue'); }); }
-    }
-];
-var router = vue_router_1.createRouter({
-    history: vue_router_1.createWebHashHistory(),
-    routes: routes
-});
-exports["default"] = router;

src/router/routerGuard.ts

@@ -0,0 +1,9 @@
+import router from './index'
+
+router.beforeEach((to, from, next) => {
+  console.log(to)
+  console.log(from)
+  console.log(to)
+})
+
+export default router

src/service/index.ts

@@ -0,0 +1,2 @@
+import instance from './request'
+export default instance

src/service/request.ts

@@ -0,0 +1,25 @@
+import { useTokenStore } from '@/store'
+import axios, { AxiosResponse } from 'axios'
+
+const instance = axios.create({
+  baseURL: '/api',
+  timeout: 1000
+})
+
+instance.interceptors.request.use((config) => {
+
+  config.headers['token'] = useTokenStore().get()
+
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+instance.interceptors.response.use(<T>(response: AxiosResponse<T>) => {
+  return response.data
+}, (error) => {
+  return Promise.reject(error)
+})
+
+export default instance

src/store/dist/index.js

@@ -1,9 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var vuex_1 = require("vuex");
-exports["default"] = vuex_1.createStore({
-    state: {},
-    mutations: {},
-    actions: {},
-    modules: {}
-});

src/store/index.ts

@@ -1,12 +1 @@
-import { createStore } from 'vuex'
-
-export default createStore({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
+export { useTokenStore } from './token'

src/store/token.ts

@@ -0,0 +1,19 @@
+import { StoreEnum } from '@/enum/store'
+import { defineStore } from 'pinia'
+import { useLocalStorageState } from "vue-hooks-plus"
+
+
+export const useTokenStore = defineStore(StoreEnum.TOKEN, () => {
+
+  const [ state, setState ] = useLocalStorageState(StoreEnum.TOKEN, {
+    defaultValue: ''
+  })
+
+  return {
+    get: () => state.value,
+    set: (token: string) => setState(token)
+  }
+
+})
+
+

src/typeing.d.ts

@@ -0,0 +1,44 @@
+declare namespace API {
+
+
+  type Response<T> = {
+    status: number,
+    data: T,
+    msg: string
+  }
+
+
+  export namespace LearnPlan {
+
+    type Report = {
+      userNickName: string,
+      profilePhoto: string,
+      totalStudyDays: number,
+      itemName: string,
+      totalDuration: number,
+      totalStars: number,
+      totalQuantity: number,
+      correctQuantity: number,
+      accuracy: number,
+      task3Image: string,
+      task3Audio: string,
+      userLearnShareAudio: string,
+      exerciseCardResultList: {
+        capability: string,
+        totalQuantity: number,
+        correctQuantity: number
+      }[],
+      teachDescription: string
+    }
+
+    type Task = {
+      id: string,
+      itemId: string,
+      userId: string,
+      shared: number,
+      report: Report
+    }
+
+  }
+
+}

src/utils/typing.d.ts

@@ -1,3 +1,3 @@
 export interface ScreenShot {
   (el: HTMLElement | string): Promise<HTMLImageElement>
-}
+}

src/views/Home.vue

@@ -1,23 +1,16 @@
 <template>
   <div class="home">
-    <img :src="staticImg.img" alt="">
+
   </div>
 </template>
 
 <script lang="ts" setup >
-const staticImg = {
-  img: require('@LP/assets/TPage-bg-v.png')
-}
+
 </script>
 
 <style scoped lang="scss" >
 .home {
   width: 100vw;
   height: 100vh;
-  img {
-    // width: 750px;
-    width: 375px;
-    display: block;
-  }
 }
 </style>

upload.py

@@ -4,11 +4,22 @@ import sys
 import time
 import zipfile
 
-hostname="000.luojigou.vip"
-username="admin"
-password='FUpnUQ8aLpngnEW'
-
+hostname=""
+username=""
+password=""
 port=222
+
+if sys.argv[3] == 'pro':
+ hostname="000.luojigou.vip"
+ username="admin"
+ password='FUpnUQ8aLpngnEW'
+else:
+ hostname="local.luojigou.vip"
+ username="root" 
+ password='RDefC4Rh&I0VN1j1'
+ port=22
+
+
 ############################## 
 ############################## 
 ############################## 

vue.config.js

@@ -3,7 +3,7 @@ const { VantResolver } = require('unplugin-vue-components/resolvers')
 const ComponentsPlugin = require('unplugin-vue-components/webpack')
 
 module.exports = {
-  publicPath: '/', // 打包后资源访问路径
+  publicPath: '/app_web', // 打包后资源访问路径
   lintOnSave: false, // eslint是否在保存的时候检查
   pages: {
     index: {
@@ -19,7 +19,7 @@ module.exports = {
     LearnPlan: {
       entry: 'src/pages/LearnPlan/main.ts',
       template: 'src/pages/LearnPlan/public/index.html',
-      filename: 'LearnPlan.html'
+      filename: 'learn-plan.html'
     }
   },
   chainWebpack: config => {
@@ -35,5 +35,18 @@ module.exports = {
         resolvers: [VantResolver()]
       })
     ]
-  }
+  },
+  devServer: {
+    proxy: {
+      "/api/": {
+        target: "http://local.luojigou.vip:8888/", 
+        ws: false,
+        secure: false,
+        changeOrigin: true,
+        pathRewrite: {
+          "^/api/": ""
+        }
+      },
+    }
+  },
 }

yarn.lock

@@ -170,6 +170,13 @@
   resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.20.15.tgz#eec9f36d8eaf0948bb88c87a46784b5ee9fd0c89"
   integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==
 
+"@babel/runtime@^7.17.2":
+  version "7.21.0"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/standalone@^7.20.12":
   version "7.20.15"
   resolved "https://registry.npmmirror.com/@babel/standalone/-/standalone-7.20.15.tgz#ef82f1a9789d21d8b23f74d9fa8acecbe6ced02c"
@@ -467,6 +474,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/js-cookie@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
+  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
+
 "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7":
   version "7.0.11"
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -857,7 +869,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.4.5", "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
@@ -1495,6 +1507,15 @@ aws4@^1.8.0:
   resolved "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
+axios@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz#f5760cefd9cfb51fd2481acf88c05f67c4523024"
+  integrity sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -2242,7 +2263,7 @@ colorette@^2.0.19:
   resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -2385,6 +2406,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npmmirror.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+copy-text-to-clipboard@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz#6bf40deef0a51ac6858efb0d76ded2c6d6a15059"
+  integrity sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==
+
 copy-webpack-plugin@^5.1.1:
   version "5.1.2"
   resolved "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
@@ -2403,6 +2429,11 @@ copy-webpack-plugin@^5.1.1:
     serialize-javascript "^4.0.0"
     webpack-log "^2.0.0"
 
+core-js@^3.11.0:
+  version "3.30.1"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.30.1.tgz#fc9c5adcc541d8e9fa3e381179433cbf795628ba"
+  integrity sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2755,7 +2786,7 @@ decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decode-uri-component@^0.2.0:
+decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
   integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
@@ -3870,6 +3901,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
 finalhandler@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
@@ -3965,7 +4001,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -4018,6 +4054,15 @@ fork-ts-checker-webpack-plugin@^3.1.1:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -4922,6 +4967,11 @@ interpret@^1.2.0:
   resolved "https://registry.npmmirror.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+intersection-observer@^0.12.2:
+  version "0.12.2"
+  resolved "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
+  integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -5378,6 +5428,11 @@ js-base64@^2.1.8:
   resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@@ -5858,6 +5913,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^4.0.17:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
+  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6182,6 +6242,11 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+  integrity sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.npmmirror.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -6913,6 +6978,14 @@ pify@^4.0.1:
   resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.0.34:
+  version "2.0.34"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.34.tgz#6c0c84f06b631c30c030633fa64e525c609105a9"
+  integrity sha512-cgOoGUiyqX0SSgX8XelK9+Ri4XA2/YyNtgjogwfzIx1g7iZTaZPxm7/bZYMCLU2qHRiHhxG7SuQO0eBacFNc2Q==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi "*"
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -7394,6 +7467,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -7483,6 +7561,13 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.11.0:
+  version "6.11.1"
+  resolved "https://registry.npmmirror.com/qs/-/qs-6.11.1.tgz#6c29dff97f0c0060765911ba65cbc9764186109f"
+  integrity sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.3"
   resolved "https://registry.npmmirror.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
@@ -7496,6 +7581,16 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^7.1.1:
+  version "7.1.3"
+  resolved "https://registry.npmmirror.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
+  integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==
+  dependencies:
+    decode-uri-component "^0.2.2"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.npmmirror.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -7628,6 +7723,11 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -7945,6 +8045,11 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.1, schema-utils@^2.7
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+screenfull@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.npmmirror.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -8342,6 +8447,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -8460,6 +8570,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
+
 string-argv@^0.3.0:
   version "0.3.1"
   resolved "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -9322,6 +9437,16 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vconsole@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.0.tgz#2383482b0a4106204090046ec128071284e04a90"
+  integrity sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    copy-text-to-clipboard "^3.0.1"
+    core-js "^3.11.0"
+    mutation-observer "^1.0.3"
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
@@ -9346,6 +9471,11 @@ vue-class-component@^8.0.0-0:
   resolved "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
   integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==
 
+vue-demi@*:
+  version "0.14.0"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.0.tgz#dcfd9a9cf9bb62ada1582ec9042372cf67ca6190"
+  integrity sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==
+
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -9359,6 +9489,20 @@ vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-hooks-plus@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.npmmirror.com/vue-hooks-plus/-/vue-hooks-plus-1.6.5.tgz#8f54056c9487d45ac0bdbbc35b41b2df36dcaea4"
+  integrity sha512-cnertUm686N3CNpmbycF4Y1lfCXVHZZkTXnXP0s2YPvB0vNWtla4Xb7WNwU3S5Ri/J5TAmZljN2ECut9Iyrr+g==
+  dependencies:
+    "@types/js-cookie" "^3.0.1"
+    intersection-observer "^0.12.2"
+    js-cookie "^3.0.1"
+    lodash "^4.17.21"
+    marked "^4.0.17"
+    qs "^6.11.0"
+    query-string "^7.1.1"
+    screenfull "^5.0.0"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -9415,13 +9559,6 @@ vue@^3.0.0:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
-vuex@^4.0.0-0:
-  version "4.1.0"
-  resolved "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
-  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"