2025/3/7

修改了请求的逻辑为进入分组后再请求数据
为部分函数添加了文档注释

src/components/General.vue

@@ -18,7 +18,6 @@
     <div class="card-container">
       <div class="card" v-for="i in Url" :key="i">
         <GeneralCard
-          :url="i.url"
           :name="i.name"
           @toSubscribeItem="(url, name) => $emit('toSubscribeItem', url, name)"
         />
@@ -121,13 +120,12 @@ onMounted(() => {
   //   });
   // }
   Url.value.push({
-    name: "all",
+    name: "all"
-    url: "vmess://ew0KICAidiI6ICIyIiwNCiAgInBzIjogInRrIiwNCiAgImFkZCI6ICI0My4xNTMuMTg0LjkxIiwNCiAgInBvcnQiOiAiNDczNTkiLA0KICAiaWQiOiAiMzAxYzgyMWEtODljOS00ZWI0LTlmYmYtYWIwMjgyNjMxZTJhIiwNCiAgImFpZCI6ICIwIiwNCiAgInNjeSI6ICJhdXRvIiwNCiAgIm5ldCI6ICJrY3AiLA0KICAidHlwZSI6ICJkdGxzIiwNCiAgImhvc3QiOiAiIiwNCiAgInBhdGgiOiAiIiwNCiAgInRscyI6ICIiLA0KICAic25pIjogIiIsDQogICJhbHBuIjogIiIsDQogICJmcCI6ICIiDQp9"
   })
   console.log(Url);
 });
 
-// 过滤器
+//过滤器
 const filterUrl = computed(() => {
   if (searchText.value.length > 0) {
     return Url.value.filter((item) => {
@@ -143,7 +141,11 @@ const fromData = ref({
   labelAlign: "left",
 });
 
-// 换页
+/**
+ * 向服务器请求翻页数据
+ * @param index Int 页码
+ * @param pageInfo Int 卡片总数
+ */
 function onCurrentChange(index, pageInfo) {
   console.log(index, pageInfo);
 }

src/components/Main.vue

@@ -1,9 +1,16 @@
 <template>
   <t-layout class="main-layout">
     <t-aside>
-      <t-menu theme="light" default-value="General" :collapsed="collapsed" @change="changeHandler">
+      <t-menu
+        theme="light"
+        default-value="General"
+        :collapsed="collapsed"
+        @change="changeHandler"
+      >
         <template #logo>
-          <span style="font-size: larger">{{ collapsed? "PSH" : "Proxy Subscribe Hub" }}</span>
+          <span style="font-size: larger">{{
+            collapsed ? "PSH" : "Proxy Subscribe Hub"
+          }}</span>
         </template>
         <t-menu-item value="General">
           <template #icon>
@@ -17,7 +24,7 @@
             variant="text"
             shape="square"
             theme="default"
-            @click="collapsed = !collapsed;"
+            @click="collapsed = !collapsed"
             style="background-color: #fff"
           >
             <view-list-icon />
@@ -27,18 +34,20 @@
     </t-aside>
     <t-layout>
       <t-content style="overflow: auto">
-        <div>
+        <t-loading :loading="false" show-overlay style="height: 100vh;">
-          <General
+          <div>
-            @toSubscribeItem="(url, name) => toSubscribeItem(url, name)"
+            <General
-            v-if="menuValue === 'General'"
+              @toSubscribeItem="(url, name) => toSubscribeItem(url, name)"
-          />
+              v-if="menuValue === 'General'"
-          <SubscribeItem
+            />
-            @backToGeneral="menuValue = 'General'"
+            <SubscribeItem
-            :propsData="Url"
+              @backToGeneral="menuValue = 'General'"
-            :name="Name"
+              :propsData="Url"
-            v-if="menuValue === 'SubscribeItem'"
+              :name="Name"
-          />
+              v-if="menuValue === 'SubscribeItem'"
-        </div>
+            />
+          </div>
+        </t-loading>
       </t-content>
     </t-layout>
   </t-layout>
@@ -49,6 +58,10 @@
   height: 100vh;
   width: 100vw;
 }
+
+.t-layout__sider{
+  width: auto !important;
+}
 </style>
 
 <script setup>

src/components/SubscribeItem.vue

@@ -77,7 +77,6 @@ import { AddIcon, PasteIcon } from "tdesign-icons-vue-next";
 import { MessagePlugin } from "tdesign-vue-next";
 
 const props = defineProps({
-  propsData: String,
   name: String,
 });
 
@@ -98,27 +97,28 @@ let vemssProps = {
 };
 
 onMounted(() => {
-  if (props.propsData) {
+  //请求数据
-    if (props.propsData.length > 0) {
+  //测试数据
-      let propsDataSplit = props.propsData.split(",");
+  let req = '{"status":200,"data":["vmess://ew0KICAidiI6ICIyIiwNCiAgInBzIjogInRrIiwNCiAgImFkZCI6ICI0My4xNTMuMTg0LjkxIiwNCiAgInBvcnQiOiAiNDczNTkiLA0KICAiaWQiOiAiMzAxYzgyMWEtODljOS00ZWI0LTlmYmYtYWIwMjgyNjMxZTJhIiwNCiAgImFpZCI6ICIwIiwNCiAgInNjeSI6ICJhdXRvIiwNCiAgIm5ldCI6ICJrY3AiLA0KICAidHlwZSI6ICJkdGxzIiwNCiAgImhvc3QiOiAiIiwNCiAgInBhdGgiOiAiIiwNCiAgInRscyI6ICIiLA0KICAic25pIjogIiIsDQogICJhbHBuIjogIiIsDQogICJmcCI6ICIiDQp9"]}';
-      for (let i in propsDataSplit) {
+  if (JSON.parse(req).status === 200) {
-        let decodeData = JSON.parse(atob(propsDataSplit[i].split("://")[1])); //解码
+    let reqData = JSON.parse(req).data;
-        switch (propsDataSplit[i].split("://")[0]) {
+    for (let i in reqData) {
-          case "vmess":
+      let decodeData = JSON.parse(atob(reqData[i].split("://")[1])); //解码
-            data.value.push({
+      switch (reqData[i].split("://")[0]) {
-              key: i,
+        case "vmess":
-              name: decodeData.ps,
+          data.value.push({
-              url: propsDataSplit[i],
+            key: i,
-            });
+            name: decodeData.ps,
-            break;
+            url: reqData[i],
-          default:
+          });
-            data.value.push({
+          break;
-              key: i,
+        default:
-              name: "暂不支持",
+          data.value.push({
-              url: propsDataSplit[i],
+            key: i,
-            });
+            name: "暂不支持",
-            break;
+            url: reqData[i],
-        }
+          });
+          break;
       }
     }
   }
@@ -153,8 +153,11 @@ const columns = ref([
     ],
   },
 ]);
-// let data = ref([{ key: "1", name: "tk", url: "vmess://" }]);
 
+/**
+ * 复制文本到剪贴板
+ * @param text 复制的文本
+ */
 function copyToClipboard(text) {
   try {
     navigator.clipboard.writeText(text);
@@ -164,6 +167,9 @@ function copyToClipboard(text) {
   }
 }
 
+/**
+ * 从剪贴板读取文本
+ */
 function readByClipboard() {
   try {
     navigator.clipboard.readText().then((text) => {
@@ -176,6 +182,9 @@ function readByClipboard() {
   }
 }
 
+/**
+ * 添加节点
+ */
 function addNode() {
   vemssProps = {
     name: "",
@@ -193,6 +202,11 @@ function addNode() {
   dialogVisible.value = true;
 }
 
+/**
+ * 编辑节点
+ * @param arg string 协议类型 
+ * @param url string base64编码
+ */
 function editNode(arg, url) {
   // 测试
   switch (arg) {