feat: change the button and add new option of channels

src/components/infoButton.svelte

@@ -98,17 +98,17 @@
         on:click={() => check(record.id, record.tittle)}
         on:keypress
       >
+        <button class="chacha" on:click={() => deletenotice(record.id)}
+          >x</button
+        >
         <div class="title">{record.tittle}</div>
         <div class="content">#{record.tag}</div>
         <div class="author">from:{record.username}</div>
-      </div>
-      <div>
-        <button class="edit-btn" on:click={() => editnotice(record.id)}
-          >修改</button
-        >
-        <button class="delete-btn" on:click={() => deletenotice(record.id)}
-          >删除</button
-        >
+        <div>
+          <button class="edit-btn" on:click={() => editnotice(record.id)}
+            >修改</button
+          >
+        </div>
       </div>
     {/each}
   </div>
@@ -147,25 +147,30 @@
     color: #666;
   }
 
-  .edit-btn,
-  .delete-btn {
-    margin-left: 0.5rem;
-    padding: 0.3rem 0.6rem;
-    font-size: 0.8rem;
-    background-color: #4e4e4e; /* 按钮的背景颜色 */
+  .edit-btn {
+    background-color: #ffc107;
     color: white;
-    border: none;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
   }
 
   .edit-btn:hover {
-    background-color: #5c5c5c; /* 修改按钮悬停时的背景颜色 */
+    background-color: #e0a800;
   }
 
-  .delete-btn:hover {
+  .chacha {
+    background-color: white;
+    width: 20px;
+    color: #a3a1a1;
+    float: right;
+    text-align: center;
+  }
+  .edit-btn {
+    background-color: #ffc107;
     color: white;
-    background-color: #a54444; /* 删除按钮悬停时的背景颜色 */
+    padding: 0.5rem 1rem; /* Adjusted for consistency */
+    font-size: 14px; /* Adjusted for consistency */
+    border-radius: 5px; /* Consistent with other elements */
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-top: 10px; /* Added space above the button */
   }
 </style>

src/routes/myChannels.svelte

@@ -9,11 +9,14 @@
     username,
     originChannelID,
     channelName,
+    currentchannelName,
   } from "../store.js";
 
   const pb = new PocketBase(PocketBase_URL);
   let src = "userPicture.jpeg";
   let channels = [];
+  let createdChannels = [];
+  let currentView = "joined"; // 'joined' 或 'created'
 
   async function getChannels() {
     const useremail = $currentUserEmail;
@@ -23,13 +26,100 @@
     });
     channels = response_;
   }
+  async function getCreatedChannels() {
+    const useremail = $currentUserEmail;
+    const response = await pb.collection("channels").getFullList({
+      sort: "-created",
+      filter: `useremail="${useremail}"`,
+    });
+    createdChannels = response;
+  }
+
+  function editChannel(channelName) {
+    currentchannelName.set(channelName);
+    push("/updateChannel");
+  }
+
+  async function leftChannel(channelname) {
+    const currentUseremail = $currentUserEmail; // 确保这里正确获取当前用户邮箱
+    if (!confirm("确定要退出这个频道吗？")) {
+      return; // 用户取消操作，直接返回
+    }
+    try {
+      // 使用 useremail 和 channelname 作为过滤条件
+      const userChannels = await pb.collection("users_channels").getFullList({
+        filter: `useremail="${currentUseremail}" && channelname="${channelname}"`,
+      });
+
+      for (const userChannel of userChannels) {
+        await pb.collection("users_channels").delete(userChannel.id);
+      }
+      // 从本地列表中移除
+      channels = channels.filter(
+        (channel) => channel.channelname !== channelname,
+      );
+
+      // 重新获取频道列表，如果这是必要的
+      getChannels();
+
+      alert("成功退出频道。");
+    } catch (error) {
+      console.error("退出频道失败：", error);
+      alert("退出频道失败。");
+    }
+  }
+
+  async function deleteChannel(channelName) {
+    if (!confirm("确定要删除这个频道吗？")) {
+      return; // 用户取消操作，直接返回
+    }
+    try {
+      // 查找channels集合中的指定频道
+      const channels = await pb.collection("channels").getFullList({
+        filter: `channelName="${channelName}"`,
+      });
+      for (const channel of channels) {
+        // 删除找到的频道
+        await pb.collection("channels").delete(channel.id);
+      }
+
+      // 查找并删除users_channels集合中所有与该频道相关的条目
+      const userChannels = await pb.collection("users_channels").getFullList({
+        filter: `channelname="${channelName}"`,
+      });
+      for (const userChannel of userChannels) {
+        await pb.collection("users_channels").delete(userChannel.id);
+      }
+      // 使用.filter()方法移除条目后直接赋值
+      createdChannels = createdChannels.filter(
+        (channel) => channel.channelName !== channelName,
+      );
+      getCreatedChannels(); // 重新获取频道列表
+      getChannels();
+      alert("频道及相关数据删除成功。");
+    } catch (error) {
+      console.error("删除频道及相关数据失败：", error);
+      alert("删除频道及相关数据失败。");
+    }
+  }
+
+  function switchView(view) {
+    currentView = view;
+    if (view === "joined") {
+      getChannels();
+    } else {
+      getCreatedChannels();
+    }
+  }
+
   function jumpnew(origin, name) {
     channelName.set(name);
     originChannelID.set(origin);
     push("/chantemplate");
   }
   onMount(() => {
     getChannels();
+    getCreatedChannels();
   });
 </script>
 
@@ -40,28 +130,73 @@
     <p class="text-7xl text-black">{$username}</p>
   </div>
 
+  <div class="controls fixed right-12 top-14 p-4">
+    <button class="toggle-btn" on:click={() => switchView("joined")}
+      >已加入的频道</button
+    >
+    <button class="toggle-btn" on:click={() => switchView("created")}
+      >我创建的频道</button
+    >
+  </div>
+
   <div class="channel-container fixed right-0 top-0 w-3/5">
-    {#each channels as channel}
-      <div class="channel bg-transparent border-b border-gray-400 p-4">
-        <div
-          class="channel-name text-3xl mb-2"
-          on:click={() => jumpnew(channel.originid, channel.channelname)}
-          role="button"
-          tabindex="0"
-          on:keypress
-        >
-          {channel.channelname}
+    {#if currentView === "joined"}
+      {#each channels as channel}
+        <div class="channel bg-transparent border-b border-gray-400 p-4">
+          <div
+            class="channel-name text-3xl mb-2"
+            on:click={() => jumpnew(channel.originid, channel.channelname)}
+            role="button"
+            tabindex="0"
+            on:keypress
+          >
+            {channel.channelname}
+          </div>
+          <div class="channel-info flex justify-between items-center w-full">
+            <div class="channel-description text-sm">
+              {channel.channelDescription}
+            </div>
+            <button
+              class="exit-btn"
+              on:click={() => leftChannel(channel.channelname)}>退出</button
+            >
+            <div class="channel-date text-sm">
+              {channel.year}年{channel.month}月{channel.day}日加入
+            </div>
+          </div>
         </div>
-        <div class="channel-info flex justify-between items-center w-full">
-          <div class="channel-description text-sm">
-            {channel.channelDescription}
+      {/each}
+    {:else}
+      {#each createdChannels as channel}
+        <div class="channel bg-transparent border-b border-gray-400 p-4">
+          <div
+            class="channel-name text-3xl mb-2"
+            on:click={() => jumpnew(channel.originid, channel.channelname)}
+            role="button"
+            tabindex="0"
+            on:keypress
+          >
+            {channel.channelName}
           </div>
-          <div class="channel-date text-sm">
-            {channel.year}年{channel.month}月{channel.day}日加入
+          <div class="channel-info flex justify-between items-center w-full">
+            <div class="channel-description text-sm">
+              {channel.channelDescription}
+            </div>
+            <button
+              class="edit-btn"
+              on:click={() => editChannel(channel.channelName)}>修改</button
+            >
+            <button
+              class="delete-btn"
+              on:click={() => deleteChannel(channel.channelName)}>删除</button
+            >
+            <div class="channel-date text-sm">
+              {channel.year}年{channel.month}月{channel.day}日加入
+            </div>
           </div>
         </div>
-      </div>
-    {/each}
+      {/each}
+    {/if}
   </div>
 </body>
 
@@ -111,4 +246,57 @@
   .channel {
     height: 25%; /* 每个频道占容器高度的20% */
   }
+
+  .toggle-btn {
+    margin-left: 20px; /* 如果您希望按钮之间有间距 */
+    color: black;
+  }
+
+  .channel-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 10%; /* 或您想要的任何百分比 */
+  }
+
+  .exit-btn,
+  .edit-btn,
+  .delete-btn {
+    /* 删除 margin-top 并添加必要的右边距 */
+    padding: 5px 15px;
+
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    /* 如果需要按钮右对齐，删除margin-right并使用以下属性 */
+    margin-left: auto;
+  }
+
+  .exit-btn {
+    background-color: #dc3545;
+    color: white;
+  }
+
+  .exit-btn:hover {
+    background-color: #c82333;
+  }
+
+  .edit-btn {
+    background-color: #ffc107;
+    color: white;
+  }
+
+  .edit-btn:hover {
+    background-color: #e0a800;
+  }
+
+  .delete-btn {
+    background-color: #28a745;
+    color: white;
+  }
+
+  .delete-btn:hover {
+    background-color: #218838;
+  }
 </style>