feat: lead Profile to the mainpage (#74)

* add a new page to search channels

* Updated createchannel

* feat: refine createchannel

* feat: refine createchannel

* feat: update searchChannel

* refactor: refactor createChannel

* feat: add useremail for a channel

* feat: can choose the channels your created

* refactor: Refactor the code

* feat: Added channel deletion and modification

* feat: lead Profile to the mainpage

* feat: lead Profile to the mainpage

---------

Co-authored-by: My Go！ <[email protected]>

src/components/Navbar.svelte

@@ -81,7 +81,7 @@
               >{$username}</a
             >
           </li>
-          <li><a class="justify-between" href="/#/profile">Profile</a></li>
+          <li><a href="/#/main1">Profile</a></li>
           <li><a href="/#/myChannels">Mychannels</a></li>
           <li><a href="/#/login">Logout</a></li>
         </ul>

src/router.js

@@ -1,5 +1,6 @@
 import Login from "./routes/login.svelte";
 import MainPage from "./routes/mainpage.svelte";
+import MainPage1 from "./routes/mainpage1.svelte";
 import DoorPage from "./routes/doorPage.svelte";
 import Register from "./routes/register.svelte";
 import CreateChannel from "./routes/createChannel.svelte";
@@ -20,6 +21,7 @@ export default {
   "/": DoorPage,
   "/login": Login,
   "/main": MainPage,
+  "/main1": MainPage1,
   "/register": Register,
   "/createChannel": CreateChannel,
   "/checkInformation": CheckInformation,

src/routes/mainpage1.svelte

@@ -0,0 +1,135 @@
+<script>
+  import { push } from "svelte-spa-router";
+  import PocketBase from "pocketbase";
+  import { PocketBase_URL } from "../utils/api/index";
+  import { onMount } from "svelte";
+  import Navbar from "../components/Navbar.svelte";
+  import { currentUserEmail, username } from "../store.js";
+
+  const pb = new PocketBase(PocketBase_URL);
+  let channels = []; // 存储频道数据
+  let todos = []; // 存储待办事项数据
+
+  // 假设有异步函数来获取当前用户的频道和待办事项
+  async function fetchChannels() {
+    try {
+      const userEmail = $currentUserEmail;
+      const response = await pb.collection("users_channels").getFullList({
+        sort: "-created",
+        filter: `useremail="${userEmail}"`,
+      });
+      channels = response;
+    } catch (error) {
+      alert("fail to find");
+    }
+  }
+
+  async function fetchTodos() {
+    try {
+      const userEmail = $currentUserEmail;
+      const response = await pb.collection("todolist").getFullList({
+        sort: "-created",
+        filter: `useremail="${userEmail}"`,
+      });
+      todos = response;
+    } catch (error) {
+      alert("fail to find");
+    }
+  }
+
+  onMount(async () => {
+    await fetchChannels();
+    await fetchTodos();
+  });
+
+  function logout() {
+    // 登出逻辑，这里简单地跳转到登录页面
+    push("/login");
+  }
+
+  function navigateToChannelDetail(channelId) {
+    push(`/channel-detail/${channelId}`);
+  }
+
+  function navigateToTodoDetail(todoId) {
+    push(`/todo-detail/${todoId}`);
+  }
+</script>
+
+<Navbar />
+
+<div class="flex h-screen">
+  <!-- 左侧用户信息 -->
+  <div
+    class="flex flex-col w-2/5 items-center space-y-10 py-10"
+    style="padding-top: 90px;"
+  >
+    <img
+      src="userPicture.jpeg"
+      alt="User Profile"
+      style="width: 300px; height: 300px; object-fit: cover;"
+      class="rounded-full"
+    />
+    <p class="text-4xl text-black">{$username}</p>
+    <button class="btn" on:click={logout}>登出</button>
+  </div>
+
+  <!-- 右侧内容区 -->
+  <div class="w-3/5 p-4">
+    <!-- 频道列表 -->
+    <div class="channels h-3/5 overflow-y-auto p-2">
+      <h2 class="text-2xl font-semibold mb-4 text-black">Channels</h2>
+      <div class="grid grid-cols-2 gap-4">
+        {#each channels as channel}
+          <button
+            class="channel-box"
+            on:click={() => navigateToChannelDetail(channel.channelname)}
+          >
+            {channel.channelname}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- 待办事项列表 -->
+    <div class="todos h-2/5 overflow-y-auto p-2 mt-4">
+      <h2 class="text-2xl font-semibold mb-4 text-black">Todos</h2>
+      <div class="grid grid-cols-2 gap-4">
+        {#each todos as todo}
+          <button
+            class="todo-box"
+            on:click={() => navigateToTodoDetail(todo.tittle)}
+          >
+            {todo.tittle}
+          </button>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .channel-box {
+    border: 1px solid #ccc;
+    padding: 8px 16px;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    height: 100px; /* 或者根据内容调整 */
+    color: black; /* 将文字颜色设置为黑色 */
+  }
+
+  .todo-box {
+    border: 1px solid #ddd;
+    padding: 8px 16px;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    height: 100px; /* 或者根据内容调整 */
+    color: black; /* 将文字颜色设置为黑色 */
+  }
+</style>