feat: usage

src/views/rustdesk/control.vue

@@ -19,11 +19,12 @@
     >
       <el-tab-pane :label="T('Simple')" name="Simple">
         <el-space>
-          <RelayServers ref="rs" :can-send="canSendCmd(ID_TARGET)"></RelayServers>
-          <alwaysUseRelay :can-send="canSendCmd(ID_TARGET)" @success="handleAlwaysUseRelaySuccess"></alwaysUseRelay>
-          <mustLogin v-if="canControlMustLogin" :can-send="canSendCmd(ID_TARGET)"></mustLogin>
-          <blocklist :can-send="canSendCmd(RELAY_TARGET)"></blocklist>
-          <blacklist :can-send="canSendCmd(RELAY_TARGET)"></blacklist>
+          <RelayServers ref="rs" :can-send="canSendIdServerCmd"/>
+          <alwaysUseRelay :can-send="canSendIdServerCmd" @success="handleAlwaysUseRelaySuccess"/>
+          <mustLogin v-if="canControlMustLogin" :can-send="canSendIdServerCmd"/>
+          <blocklist :can-send="canSendRelayServerCmd"/>
+          <blacklist :can-send="canSendRelayServerCmd"/>
+          <usage :can-send="canSendRelayServerCmd"/>
         </el-space>
 
 
@@ -119,16 +120,16 @@
   import { onMounted, reactive, ref } from 'vue'
   import { T } from '@/utils/i18n'
   import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ID_TARGET, RELAY_TARGET } from '@/views/rustdesk/options'
   import blocklist from '@/views/rustdesk/blocklist.vue'
   import blacklist from '@/views/rustdesk/blacklist.vue'
   import alwaysUseRelay from '@/views/rustdesk/always_use_relay.vue'
   import RelayServers from '@/views/rustdesk/relay_servers.vue'
   import mustLogin from '@/views/rustdesk/must_login.vue'
-  import { ID_TARGET, RELAY_TARGET } from '@/views/rustdesk/options'
+  import usage from '@/views/rustdesk/usage.vue'
 
   const activeName = ref('Simple')
 
-
   const canSendIdServerCmd = ref(false)
   const checkCanSendIdServerCmd = async () => {
     const res = await sendCmd({ cmd: 'h', target: ID_TARGET }).catch(_ => false)

src/views/rustdesk/usage.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-card class="simple-card" shadow="hover" v-loading="form.loading">
+    <template #header>
+      <div class="card-header">
+        <span>USAGE</span>
+      </div>
+    </template>
+    <el-form :disabled="!canSend">
+      <el-form-item>
+        <el-input type="textarea" :model-value="form.list.join('|')" :rows="5" readonly></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList">{{ T('Refresh') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+<script setup>
+
+  import { T } from '@/utils/i18n'
+  import { reactive, watch } from 'vue'
+  import { sendCmd } from '@/api/rustdesk'
+  import { RELAY_TARGET } from '@/views/rustdesk/options'
+
+  const props = defineProps({
+    canSend: Boolean,
+  })
+
+  const form = reactive({
+    get_cmd: 'u',
+    list: [],
+    target: RELAY_TARGET,
+    loading: false,
+  })
+  const getList = async () => {
+    form.loading = true
+    const res = await sendCmd({ cmd: form.get_cmd, target: RELAY_TARGET }).catch(_ => false)
+    form.loading = false
+    if (res) {
+      form.list = res.data.split('\n').filter(i => i)
+    }
+  }
+  watch(() => props.canSend, (v) => {
+    if (v) {
+      getList()
+    }
+  })
+
+
+</script>
+<style scoped lang="scss">
+
+</style>