feature(StreamOnServer.vue): add a user-friend error message when can…

…not connect MediaServer

feature(CloseStreamProxy.vue): when no video selected, disable the OK button
feature(About.vue): version and homepage URL on the page get from package.json

package.json

@@ -1,8 +1,9 @@
 {
   "name": "zlmediakit-frontend",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
+  "homepage": "https://github.com/xubeiyan/ZLMediaKit-Manager",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/components/CloseStreamProxy.vue

@@ -102,6 +102,12 @@ const closeMutation = useMutation({
     snackbar.open = true;
   }
 });
+
+// 已选择视频数
+const selecedVideoLength = computed(() => {
+  const filtered = dialog.streamList.filter(one => one.selected);
+  return filtered.length;
+})
 </script>
 
 <template>
@@ -123,7 +129,7 @@ const closeMutation = useMutation({
       </v-card-text>
       <v-card-actions class="justify-end">
         <v-btn variant="tonal" @click="dialog.open = false">取消</v-btn>
-        <v-btn variant="tonal" color="primary" @click="closeMutation.mutate()">确认</v-btn>
+        <v-btn variant="tonal" color="primary" :disabled="selecedVideoLength == 0" @click="closeMutation.mutate()">确认</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

src/components/StreamOnServer.vue

@@ -16,7 +16,7 @@ const store = useGlobalStore();
 const mediaList = ref(null);
 
 // 获取媒体列表
-const { error, mutate } = useMutation({
+const { isError, error, mutate } = useMutation({
   mutationFn: async () => {
     const backEndpoint = computed(() => store.storage.backEndpoint).value;
     const apiPrefix = computed(() => store.storage.apiPrefix).value;
@@ -92,7 +92,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <v-alert v-if="error" type="error">{{ error }}</v-alert>
+  <v-alert v-if="isError" type="error">{{ error.message }}：请检查右上角配置填写是否正确</v-alert>
   <v-alert v-if="mediaList?.length == 0" border="start" border-color="warning">当前没有视频流</v-alert>
   <div class="video-container">
     <VideoCard v-for="one in mediaList" :origin-url="one.originUrl" :origin-type="one.originType"

src/views/About.vue

@@ -1,5 +1,5 @@
 <script setup>
-
+import { version, homepage } from '../../package.json';
 </script>
 
 <template>
@@ -8,9 +8,9 @@
       <v-card-title>关于此工具</v-card-title>
       <v-card-subtitle>基于 MIT 协议开源的 <a href="https://github.com/ZLMediaKit/ZLMediaKit" target="_blank">ZLMediaKit</a>
         前端框架</v-card-subtitle>
-      <v-card-text>当前版本：ver 0.2.0</v-card-text>
+      <v-card-text>当前版本：ver {{ version }}</v-card-text>
       <v-card-actions>
-        <a href="https://github.com/xubeiyan/ZLMediaKit-Manager" target="_blank">
+        <a :href="homepage" target="_blank">
           <v-btn icon="mdi-github" class="text-black"></v-btn>
           <v-tooltip activator="parent" location="bottom">GitHub</v-tooltip>
         </a>