style: recover the background color (#59)

* feat: add notices to a new collection the new collection named todolist, and there are small changes about how the pages look like. * feat: add notices to a new collection * style: update npm and run format * style: run npm format again * style: channel and notice style * feat: useremail is added automatically * ci: format-check * css: pass the lint * style: recover the background color --------- Co-authored-by: sheeplin <1270610465@qq.com> Co-authored-by: My Go！ <118411001+Clear1oveE@users.noreply.github.com>
frog-software · Mar 13, 2024 · 578af9b · 578af9b
1 parent addadd0
commit 578af9b
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 37 deletions.
diff --git a/src/app.css b/src/app.css
@@ -41,6 +41,7 @@ h1 {
 }
 
 #app {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;

diff --git a/src/routes/chantemplate.svelte b/src/routes/chantemplate.svelte
@@ -8,14 +8,17 @@
 
   const pb = new PocketBase(PocketBase_URL);
   let records = [];
+  let tags = [];
   async function noticedisplay() {
     try {
       const channel = $currentchannelid;
-      const response = await pb.collection("notices").getFullList({
+      const responses = await pb.collection("notices").getFullList({
         sort: "-created",
         filter: `channelid="${channel}"`,
       });
-      records = response;
+      const names = responses.map((response) => response.tag);
+      tags = [...new Set(names)];
+      records = responses;
     } catch (error) {
       alert("fail to find");
     }
@@ -37,30 +40,59 @@
 
 <button on:click={send}>发送通知</button>
 
-{#each records as record}
-  <div
-    class="record"
-    role="button"
-    tabindex="0"
-    on:click={() => check(record.id)}
-    on:keypress
-  >
-    <div class="title">{record.tittle}</div>
-    <div class="content">#{record.tag}</div>
-    <div class="author">from:{record.useremail}</div>
+<div class="container">
+  <div class="left">
+    {#each records as record}
+      <div
+        class="record"
+        role="button"
+        tabindex="0"
+        on:click={() => check(record.id)}
+        on:keypress
+      >
+        <a href="#/checknotice" class="title">{record.tittle}</a>
+        <div class="author">#{record.tag} from:{record.username}</div>
+        <div class="content">
+          {record.body.length > 10
+            ? `${record.body.substring(0, 10)}...`
+            : record.body}
+        </div>
+      </div>
+    {/each}
   </div>
-{/each}
+  <div class="right">
+    <h2 class="h2">Tags</h2>
+    {#each tags as tag}
+      <div class="tag">{tag}</div>
+    {/each}
+  </div>
+</div>
 
 <style>
+  .h2 {
+    text-align: left;
+    color: #ffffff;
+  }
   .record {
-    margin-bottom: 20px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    width: 80%;
+    padding: 40px;
     background-color: #ffffff;
+    text-align: left;
+  }
+  .record:hover,
+  .tag:hover {
+    color: #ffffff;
+    opacity: 1;
+    background-color: #e9ebeb;
+  }
+  .tag {
+    width: 20%;
+    padding: 10px;
+    color: #ffffff;
   }
-
   .title {
+    text-decoration: underline; /* 为标题添加下划线 */
+    color: #0000ee;
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 10px;
@@ -74,4 +106,17 @@
     font-size: 14px;
     color: #666;
   }
+  .container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between; /* 两侧对齐 */
+    align-items: flex-start; /* 顶部对齐 */
+    padding: 10px;
+  }
+  .left {
+    flex-grow: 1; /* 让两边占据相等的空间，也可以根据需要调整 */
+  }
+  .right {
+    flex-basis: 20%;
+  }
 </style>
diff --git a/src/routes/checknotice.svelte b/src/routes/checknotice.svelte
@@ -1,7 +1,7 @@
 <!-- 显示通知具体内容 -->
 
 <script>
-  import { currentnoticeid } from "../store.js";
+  import { currentUserEmail, currentnoticeid } from "../store.js";
   import PocketBase from "pocketbase";
   import { PocketBase_URL } from "../utils/api/index";
   import { onMount } from "svelte";
@@ -20,26 +20,41 @@
       alert("fail to find");
     }
   }
-
+  async function copy(check) {
+    try {
+      const userEmail = $currentUserEmail;
+      const newRecord = {
+        tittle: check.tittle,
+        body: check.body,
+        tag: check.tag,
+        year: check.year,
+        month: check.month,
+        day: check.day,
+        useremail: userEmail,
+        noticeid: check.id,
+        username: check.username,
+      };
+      await pb.collection("todolist").create(newRecord);
+      alert("添加成功！");
+    } catch (error) {
+      alert("添加失败。");
+    }
+  }
   onMount(() => {
     noticedisplay();
   });
 </script>
 
-<body class="bodydiv">
-  <div class="noticeSize">
-    {#each records as record}
-      <div class="record">
-        <div class="tittle">{record.tittle}</div>
-        <div class="meta">
-          <span class="date">{record.year}.{record.month}.{record.day}</span>
-          <!-- {record.year}.{record.month}.{record.day}/#{record.tag}/from:{record.username} -->
-          <span class="tag">/ #{record.tag}</span>
-          <div class="from">from: {record.username}</div>
-        </div>
-        <div class="noticeBody">{record.body}</div>
-      </div>
-    {/each}
+
+{#each records as record}
+  <div class="record">
+    <div class="tittle">{record.tittle}</div>
+    <div class="meta">
+      {record.year}.{record.month}.{record.day}/#{record.tag}/from:{record.username}
+    </div>
+    <div>{record.body}</div>
+    <button class="but" on:click={() => copy(record)}>+ todolist</button>
+
   </div>
 </body>
 
@@ -76,8 +91,12 @@
   }
 
   .record {
-    border-bottom: 1px solid #eee; /* 每条记录之间用细线分隔，清晰区分 */
-    padding: 15px 0; /* 增加记录内的上下边距 */
+    width: auto;
+    border: 1px solid #ccc;
+    padding: 15px;
+    margin: 10px 0;
+    background-color: #f9f9f9;
+
   }
 
   .tittle {
@@ -98,4 +117,8 @@
     line-height: 1.6; /* 增加行高，提高阅读舒适度 */
     color: #444; /* 正文颜色，深于元数据，浅于标题 */
   }
+
+  .but {
+    color: black; /* 设置字体颜色为黑色 */
+  }
 </style>
diff --git a/src/routes/selectTags.svelte b/src/routes/selectTags.svelte
@@ -73,6 +73,7 @@
         day: check.day,
         useremail: userEmail,
         noticeid: check.id,
+        username: check.username,
       };
       await pb.collection("todolist").create(newRecord);
       alert("添加成功！");