fix: 优化代码

src/constant.ts

@@ -59,6 +59,7 @@ export const COMMON_URL = {
   admin: `https://live-admin.${prodDomain}`,
   bilibiliCollectiondetail: `https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070&ctype=0`,
   payCoursesArticle: `https://www.${prodDomain}/article/151`,
+  desk: `https://desk.${prodDomain}`,
   download: {
     live: {
       flutter: {
@@ -79,13 +80,14 @@ export const COMMON_URL = {
         macOS: ``,
       },
     },
-    remoteDesktop: {
+    desk: {
       electron: {
-        windows: `${QINIU_RESOURCE.url}/test/billd-desk-Win-0.0.1-Installer.exe`,
-        github: 'https://github.com/galaxy-s10/billd-desk',
-        macOS: `${QINIU_RESOURCE.url}/test/billd-desk-Mac-0.0.1-Installer.dmg`,
+        windows: `${QINIU_RESOURCE.url}/test/billd-desk-win-darwin-0.0.36-x64-Installer.exe`,
+        macOS: `${QINIU_RESOURCE.url}/test/billd-desk-mac-darwin-0.0.36-arm64-Installer.dmg`,
+        github: 'https://github.com/galaxy-s10/billd-desk-electron',
       },
       flutter: {
+        ios: ``,
         android: ``,
         github: 'https://github.com/galaxy-s10/billd-desk-flutter',
       },

src/layout/pc/head/index.vue

@@ -74,12 +74,12 @@
 
           <a
             class="item"
-            @click.prevent="router.push({ name: routerName.remoteDesktop })"
+            @click.prevent="openToTarget(COMMON_URL.desk)"
           >
             {{ t('layout.remoteDesktop') }}
-            <div class="badge">
+            <!-- <div class="badge">
               <div class="txt">stage</div>
-            </div>
+            </div> -->
           </a>
         </div>
       </div>
@@ -487,8 +487,8 @@ const resource = ref([
     url: 'https://github.com/galaxy-s10/billd-live',
   },
   {
-    label: 'billd-desk',
-    url: 'https://github.com/galaxy-s10/billd-desk',
+    label: 'billd-live-electron',
+    url: 'https://github.com/galaxy-s10/billd-live-electron',
   },
   {
     label: 'billd-live-server',
@@ -510,6 +510,18 @@ const resource = ref([
     label: 'billd-live-react-native',
     url: 'https://github.com/galaxy-s10/billd-live-react-native',
   },
+  {
+    label: 'billd-desk',
+    url: 'https://github.com/galaxy-s10/billd-desk',
+  },
+  {
+    label: 'billd-desk-electron',
+    url: 'https://github.com/galaxy-s10/billd-desk-electron',
+  },
+  {
+    label: 'billd-desk-flutter',
+    url: 'https://github.com/galaxy-s10/billd-desk-flutter',
+  },
 ]);
 
 const plugins = ref([
@@ -521,10 +533,6 @@ const plugins = ref([
     label: 'billd-cli',
     url: 'https://github.com/galaxy-s10/billd-cli',
   },
-  {
-    label: 'billd-deploy',
-    url: 'https://github.com/galaxy-s10/billd-deploy',
-  },
   {
     label: 'billd-utils',
     url: 'https://github.com/galaxy-s10/billd-utils',
@@ -533,6 +541,10 @@ const plugins = ref([
     label: 'billd-scss',
     url: 'https://github.com/galaxy-s10/billd-scss',
   },
+  {
+    label: 'billd-deploy',
+    url: 'https://github.com/galaxy-s10/billd-deploy',
+  },
   {
     label: 'billd-html-webpack-plugin',
     url: 'https://github.com/galaxy-s10/billd-html-webpack-plugin',

src/router/index.ts

@@ -35,7 +35,6 @@ export const routerName = {
   order: 'order',
   wallet: 'wallet',
   shop: 'shop',
-  remoteDesktop: 'remoteDesktop',
   link: 'link',
   ad: 'ad',
   faq: 'faq',
@@ -125,11 +124,6 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: '/shop',
         component: () => import('@/views/shop/index.vue'),
       },
-      {
-        name: routerName.remoteDesktop,
-        path: '/remoteDesktop',
-        component: () => import('@/views/remoteDesktop/index.vue'),
-      },
       {
         name: routerName.profile,
         path: '/profile/:userId',
@@ -137,8 +131,8 @@ export const defaultRoutes: RouteRecordRaw[] = [
       },
       {
         name: routerName.downloadRemoteDesktop,
-        path: '/download/remoteDesktop',
-        component: () => import('@/views/download/remoteDesktop/index.vue'),
+        path: '/download/desk',
+        component: () => import('@/views/download/desk/index.vue'),
       },
       {
         name: routerName.downloadLive,

src/views/download/remoteDesktop/index.vue → src/views/download/desk/index.vue

@@ -9,20 +9,30 @@
           <span>
             代码仓库：<span
               class="link"
-              @click="
-                openToTarget(COMMON_URL.download.remoteDesktop.electron.github)
-              "
+              @click="openToTarget(COMMON_URL.download.desk.electron.github)"
             >
-              {{ COMMON_URL.download.remoteDesktop.electron.github }}
+              {{ COMMON_URL.download.desk.electron.github }}
             </span>
           </span>
           <h3>Windows</h3>
           <div>
-            <span>最新版本：<span>自行构建</span></span>
+            <span
+              >最新版本：<span
+                class="link"
+                @click="openToTarget(COMMON_URL.download.desk.electron.windows)"
+                >下载</span
+              ></span
+            >
           </div>
           <h3>macOS</h3>
           <div>
-            <span>最新版本：<span>自行构建</span></span>
+            <span
+              >最新版本：<span
+                class="link"
+                @click="openToTarget(COMMON_URL.download.desk.electron.macOS)"
+                >下载</span
+              ></span
+            >
           </div>
           <h3>Linux</h3>
           <div>
@@ -35,11 +45,9 @@
           <span>
             代码仓库：<span
               class="link"
-              @click="
-                openToTarget(COMMON_URL.download.remoteDesktop.flutter.github)
-              "
+              @click="openToTarget(COMMON_URL.download.desk.flutter.github)"
             >
-              {{ COMMON_URL.download.remoteDesktop.flutter.github }}
+              {{ COMMON_URL.download.desk.flutter.github }}
             </span>
           </span>
           <h3>安卓</h3>

src/views/remoteDesktop/index.vue

@@ -1,340 +0,0 @@
-<template>
-  <div>
-    <h1 v-if="NODE_ENV === 'development'">
-      我的id：{{ mySocketId }}，<n-button @click="copyToClipBoard(mySocketId)">
-        复制
-      </n-button>
-    </h1>
-    <div>
-      <n-input-group>
-        <n-input-group-label>被控id</n-input-group-label>
-        <n-input
-          :style="{ width: '200px' }"
-          placeholder="请输入被控id"
-          v-model:value="receiverId"
-        />
-
-        <n-button
-          type="error"
-          @click="handleClose"
-          v-if="appStore.remoteDesk.isRemoteing"
-        >
-          结束控制
-        </n-button>
-        <n-button
-          v-else
-          type="primary"
-          @click="handleRemote"
-        >
-          开始远程
-        </n-button>
-      </n-input-group>
-    </div>
-
-    <div
-      class="wrap"
-      ref="remoteVideoRef"
-      @mousedown="handleMouseDown"
-      @mousemove="handleMouseMove"
-      @mouseup="handleMouseUp"
-      @dblclick="handleDoublelclick"
-      @contextmenu="handleContextmenu"
-    ></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Key } from '@nut-tree/shared';
-import { copyToClipBoard, getRandomString } from 'billd-utils';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-
-import { usePull } from '@/hooks/use-pull';
-import { useTip } from '@/hooks/use-tip';
-import { useAppStore } from '@/store/app';
-import { useNetworkStore } from '@/store/network';
-import {
-  RemoteDeskBehaviorEnum,
-  WsMsgTypeEnum,
-  WsRemoteDeskBehaviorType,
-  WsStartRemoteDesk,
-} from '@/types/websocket';
-import { NODE_ENV } from 'script/constant';
-
-const num = '123456';
-const appStore = useAppStore();
-const networkStore = useNetworkStore();
-const { videoWrapRef, initPull } = usePull(num);
-
-const roomId = ref(num);
-const receiverId = ref('');
-const remoteVideoRef = ref<HTMLDivElement>();
-const isDown = ref(false);
-let clickTimer;
-let isLongClick = false;
-const mySocketId = computed(() => {
-  return networkStore.wsMap.get(roomId.value)?.socketIo?.id || '-1';
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
-  handleClose();
-});
-
-onMounted(() => {
-  initPull({
-    isRemoteDesk: true,
-  });
-  videoWrapRef.value = remoteVideoRef.value;
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-watch(
-  () => appStore.remoteDesk.isClose,
-  (newval) => {
-    if (newval) {
-      networkStore.removeRtc(receiverId.value);
-      useTip({
-        content: '远程连接断开',
-        hiddenCancel: true,
-        hiddenClose: true,
-      }).catch();
-    }
-  }
-);
-
-function handleKeyDown(e: KeyboardEvent) {
-  // console.log(e.key, e.code);
-  const keyMap = {
-    Delete: Key.Delete,
-    Enter: Key.Enter,
-    Space: Key.Space,
-    Backspace: Key.Backspace,
-    ShiftLeft: Key.LeftShift,
-    ShiftRight: Key.RightShift,
-    AltLeft: Key.LeftAlt,
-    AltRight: Key.RightAlt,
-    Tab: Key.Tab,
-    Backquote: Key.Quote,
-    Backslash: Key.Backslash,
-    ArrowUp: Key.Up,
-    ArrowDown: Key.Down,
-    ArrowLeft: Key.Left,
-    ArrowRight: Key.Right,
-    CapsLock: Key.CapsLock,
-    ControlLeft: Key.LeftControl,
-    ControlRight: Key.RightControl,
-    MetaLeft: Key.LeftCmd,
-    LeftWin: Key.LeftCmd,
-    MetaRight: Key.RightCmd,
-    RightWin: Key.RightCmd,
-    Fn: Key.Fn,
-    F1: Key.F1,
-    F2: Key.F2,
-    F3: Key.F3,
-    F4: Key.F4,
-    F5: Key.F5,
-    F6: Key.F6,
-    F7: Key.F7,
-    F8: Key.F8,
-    F9: Key.F9,
-    F10: Key.F10,
-    F11: Key.F11,
-    F12: Key.F12,
-    F13: Key.F13,
-    F14: Key.F14,
-    F15: Key.F15,
-    F16: Key.F16,
-    F17: Key.F17,
-    F18: Key.F18,
-    F19: Key.F19,
-    F20: Key.F20,
-    F21: Key.F21,
-    F22: Key.F22,
-    F23: Key.F23,
-    F24: Key.F24,
-  };
-
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        type: RemoteDeskBehaviorEnum.keyboardType,
-        keyboardtype: keyMap[e.code] || e.key,
-        x: 0,
-        y: 0,
-      },
-    });
-}
-
-function handleDoublelclick() {
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        type: RemoteDeskBehaviorEnum.doubleClick,
-        keyboardtype: 0,
-        x: 0,
-        y: 0,
-      },
-    });
-}
-
-function handleContextmenu() {
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        type: RemoteDeskBehaviorEnum.rightClick,
-        keyboardtype: 0,
-        x: 0,
-        y: 0,
-      },
-    });
-}
-
-function handleMouseDown(event: MouseEvent) {
-  isDown.value = true;
-  clickTimer = setTimeout(function () {
-    console.log('长按');
-    isLongClick = true;
-    clearTimeout(clickTimer);
-  }, 300);
-  // 获取点击相对于视窗的位置
-  const clickX = event.clientX;
-  const clickY = event.clientY;
-
-  // 获取目标元素的位置和尺寸信息
-  // @ts-ignore
-  const rect: DOMRect = event.target.getBoundingClientRect();
-  // 计算点击位置相对于元素的坐标
-  const xInsideElement = clickX - rect.left;
-  const yInsideElement = clickY - rect.top;
-  const x = (xInsideElement / rect.width) * 1000;
-  const y = (yInsideElement / rect.height) * 1000;
-  console.log('handleMouseDown', x, y, xInsideElement, yInsideElement);
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        keyboardtype: 0,
-        type: isLongClick
-          ? RemoteDeskBehaviorEnum.pressButtonLeft
-          : RemoteDeskBehaviorEnum.pressButtonLeft,
-        x,
-        y,
-      },
-    });
-}
-
-function handleMouseMove(event: MouseEvent) {
-  // 获取点击相对于视窗的位置
-  const clickX = event.clientX;
-  const clickY = event.clientY;
-
-  // 获取目标元素的位置和尺寸信息
-  // @ts-ignore
-  const rect: DOMRect = event.target.getBoundingClientRect();
-  // 计算点击位置相对于元素的坐标
-  const xInsideElement = clickX - rect.left;
-  const yInsideElement = clickY - rect.top;
-  const x = (xInsideElement / rect.width) * 1000;
-  const y = (yInsideElement / rect.height) * 1000;
-  console.log('handleMouseMove', x, y, xInsideElement, yInsideElement);
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        type: RemoteDeskBehaviorEnum.move,
-        keyboardtype: 0,
-        x,
-        y,
-      },
-    });
-}
-
-function handleMouseUp(event: MouseEvent) {
-  if (clickTimer) {
-    clearTimeout(clickTimer);
-  }
-  isDown.value = false;
-  // 获取点击相对于视窗的位置
-  const clickX = event.clientX;
-  const clickY = event.clientY;
-
-  // 获取目标元素的位置和尺寸信息
-  // @ts-ignore
-  const rect: DOMRect = event.target.getBoundingClientRect();
-  // 计算点击位置相对于元素的坐标
-  const xInsideElement = clickX - rect.left;
-  const yInsideElement = clickY - rect.top;
-  const x = (xInsideElement / rect.width) * 1000;
-  const y = (yInsideElement / rect.height) * 1000;
-  console.log('handleMouseUp', x, y, xInsideElement, yInsideElement);
-  networkStore.rtcMap
-    .get(receiverId.value)
-    ?.dataChannelSend<WsRemoteDeskBehaviorType['data']>({
-      requestId: getRandomString(8),
-      msgType: WsMsgTypeEnum.remoteDeskBehavior,
-      data: {
-        roomId: roomId.value,
-        sender: mySocketId.value,
-        receiver: receiverId.value,
-        keyboardtype: 0,
-        type: isLongClick
-          ? RemoteDeskBehaviorEnum.releaseButtonLeft
-          : RemoteDeskBehaviorEnum.releaseButtonLeft,
-        x,
-        y,
-      },
-    });
-  isLongClick = false;
-}
-
-function handleClose() {
-  networkStore.removeRtc(receiverId.value);
-}
-
-function handleRemote() {
-  networkStore.wsMap.get(roomId.value)?.send<WsStartRemoteDesk['data']>({
-    requestId: getRandomString(8),
-    msgType: WsMsgTypeEnum.startRemoteDesk,
-    data: {
-      roomId: roomId.value,
-      sender: mySocketId.value,
-      receiver: receiverId.value,
-    },
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.wrap {
-  line-height: 0;
-  cursor: none;
-}
-</style>