feat: update searchChannel

src/routes/createChannel.svelte

@@ -1,30 +1,115 @@
 <script>
   import { push } from "svelte-spa-router";
   import PocketBase from "pocketbase";
+  import { PocketBase_URL } from "../utils/api/index";
 
-  const pb = new PocketBase("http://127.0.0.1:8090");
+  const pb = new PocketBase(PocketBase_URL);
   let channelName = "";
+  let channelDescription = "";
+  let isLoading = false; // 新增：用于跟踪提交状态
 
   async function handleCreate() {
+    isLoading = true;
+
+    // 检查频道名是否已存在
+    const existingChannels = await pb
+      .collection("channels")
+      .getFullList({ filter: `channelName = "${channelName}"` });
+    if (existingChannels.length > 0) {
+      alert(
+        "A channel with this name already exists. Please choose a different name.",
+      );
+      isLoading = false;
+      return;
+    }
+
     const data = {
       channelName: channelName,
+      channelDescription: channelDescription,
     };
+
     try {
       await pb.collection("channels").create(data);
-      push("/yourChannel");
+      alert("Channel created successfully");
+      isLoading = false;
+      push("/main");
     } catch (error) {
       alert("ERROR: " + error.message);
+      isLoading = false;
     }
   }
 </script>
 
-<h1>Create your channel</h1>
+<h1>Create Your Channel</h1>
 
-<form on:submit|preventDefault={handleCreate}>
-  <div class="content-box">
-    <div class="item-box">
-      <input type="text" bind:value={channelName} placeholder="Channel Name" />
-    </div>
+<form on:submit|preventDefault={handleCreate} class="channel-form">
+  <div class="form-group">
+    <input
+      type="text"
+      bind:value={channelName}
+      placeholder="Channel Name"
+      class="form1-control"
+    />
   </div>
-  <button type="submit">Create Channel</button>
+  <div class="form-group">
+    <textarea
+      bind:value={channelDescription}
+      placeholder="Channel Description"
+      class="form-control"
+    ></textarea>
+  </div>
+  {#if isLoading}
+    <p>Loading...</p>
+  {:else}
+    <button type="submit" class="btn-submit">Create Channel</button>
+  {/if}
 </form>
+
+<style>
+  .channel-form {
+    max-width: 500px;
+    margin: auto;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+  }
+  .form1-control {
+    max-width: 500px;
+    max-height: 200px;
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  .form-control {
+    max-width: 500px;
+    max-height: 200px;
+    min-width: 300px;
+    min-height: 100px;
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .btn-submit {
+    margin: auto;
+    width: 100%;
+    padding: 10px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .btn-submit:hover {
+    background-color: #0056b3;
+  }
+</style>

src/routes/login.svelte

@@ -3,6 +3,7 @@
   import { onDestroy } from "svelte";
   import PocketBase from "pocketbase";
   import { PocketBase_URL } from "../utils/api/index";
+  import { currentUserEmail } from "../store.js";
 
   const pb = new PocketBase(PocketBase_URL);
   let username = "";
@@ -14,6 +15,9 @@
         .collection("users")
         .authWithPassword(username, password);
       if (userData) {
+        currentUserEmail.set(username);
+        const userEmail = $currentUserEmail;
+        console.log("当前用户的电子邮件:", userEmail);
         push("/main");
       }
     } catch (error) {

src/routes/searchChannel.svelte

@@ -1,21 +1,32 @@
 <script>
   import PocketBase from "pocketbase";
   import { push } from "svelte-spa-router";
+  import { PocketBase_URL } from "../utils/api/index";
+  import { currentUserEmail } from "../store.js";
 
   // 实例化 PocketBase
-  const pb = new PocketBase("http://127.0.0.1:8090");
+  const pb = new PocketBase(PocketBase_URL);
 
-  let name = ""; // 绑定到输入框的变量，用于存储用户输入的频道名称
+  let channelNameInput = ""; // 用于存储用户输入的频道名称
   let searchResults = []; // 存储搜索结果的数组
   let errorMessage = ""; // 存储错误信息
 
+  // 搜索频道的函数
   async function searchChannel() {
     try {
       errorMessage = "";
+      const userEmail = $currentUserEmail;
       const records = await pb
         .collection("channels")
-        .getFullList({ filter: `channelName="${name}"` });
-      searchResults = records;
+        .getFullList({ filter: `channelName="${channelNameInput}"` });
+      searchResults = await Promise.all(
+        records.map((channel) =>
+          checkUserJoinedChannel(channel.channelName, userEmail).then(
+            (isJoined) => ({ ...channel, isJoined }),
+          ),
+        ),
+      );
+
       if (records.length === 0) {
         errorMessage = "没有找到相关频道。";
       }
@@ -25,12 +36,40 @@
     }
   }
 
+  // 检查用户是否加入了频道
+  async function checkUserJoinedChannel(channelName, userEmail) {
+    try {
+      const records = await pb.collection("users_channels").getFullList({
+        filter: `useremail="${userEmail}" && channelname="${channelName}"`,
+      });
+      return records.length > 0;
+    } catch (error) {
+      console.error("检查用户频道时发生错误：", error);
+      return false;
+    }
+  }
+
+  // 用户加入频道
+  async function joinChannel(channelname) {
+    try {
+      const userEmail = $currentUserEmail;
+      await pb.collection("users_channels").create({
+        useremail: userEmail,
+        channelname: channelname,
+      });
+      alert("已成功加入频道");
+    } catch (error) {
+      console.error("加入频道时发生错误：", error);
+      alert("加入频道时发生错误：" + error.message);
+    }
+  }
+
   // 导航到频道详情页
-  function ToChannel(channelName) {
+  function navigateToChannelDetail(channelName) {
     push(`/channelDetail/${channelName}`);
   }
 
-  // 按下 Enter 键时触发搜索
+  // 处理 Enter 键触发的搜索
   function handleKeyPress(event) {
     if (event.key === "Enter") {
       searchChannel();
@@ -39,11 +78,12 @@
 </script>
 
 <h1>查找频道</h1>
+
 <div class="search-container">
   <input
     type="text"
     placeholder="输入频道名称"
-    bind:value={name}
+    bind:value={channelNameInput}
     on:keypress={handleKeyPress}
   />
   <button on:click={searchChannel}>搜索</button>
@@ -52,54 +92,66 @@
 {#if errorMessage}
   <p class="error-message">{errorMessage}</p>
 {:else if searchResults.length > 0}
-  <ul class="results-list">
-    {#each searchResults as channel}
-      <li>
-        <strong>{channel.channelName}</strong>
-        <button on:click={() => ToChannel(channel.channelName)}>访问频道</button
+  {#each searchResults as channel}
+    <li>
+      <strong>{channel.channelName}</strong> - {channel.channelDescription}
+      {#if channel.isJoined}
+        <span>已加入</span>
+      {:else}
+        <button on:click={() => joinChannel(channel.channelName)}
+          >加入频道</button
         >
-      </li>
-    {/each}
-  </ul>
-{:else if name !== ""}
+      {/if}
+      <button on:click={() => navigateToChannelDetail(channel.channelName)}
+        >访问频道</button
+      >
+    </li>
+  {/each}
+{:else if channelNameInput !== ""}
   <p>没有找到相关频道。</p>
 {/if}
 
 <style>
+  .search-container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 1rem;
+    background-color: #f3f4f6;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* 确保元素之间有适当的间距 */
+  }
+
   input[type="text"],
   button {
-    /* 共用的输入框和按钮样式 */
-    margin-bottom: 10px;
-    padding: 8px;
+    padding: 0.8rem;
+    border-radius: 6px;
     border: 1px solid #ccc;
-    border-radius: 4px;
+    outline: none; /* 移除焦点时的轮廓 */
+  }
+
+  input[type="text"] {
+    font-size: 1rem;
+    margin-bottom: 0.5rem; /* 减小与下一个元素的距离 */
   }
 
   button {
-    cursor: pointer;
-    background-color: #007bff;
+    background-color: #0056b3;
     color: white;
     border: none;
-    transition: background-color 0.3s;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: background-color 0.3s ease; /* 平滑的背景色过渡效果 */
   }
 
   button:hover {
-    background-color: #0056b3;
-  }
-
-  .results-list {
-    list-style: none;
-    padding-left: 0;
-  }
-
-  .results-list li {
-    margin-top: 10px;
-    padding: 10px;
-    background-color: #f8f9fa;
-    border-radius: 4px;
+    background-color: #003d82; /* 鼠标悬停时的背景色 */
   }
 
   .error-message {
-    color: red;
+    color: #d32f2f;
   }
 </style>

src/store.js

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const currentUserEmail = writable("");
+//在不同的组件间共享当前用户的电子邮件地址。