add items page, fix an error when tag with blank string

Signed-off-by: Puqns67 <me@puqns67.icu>

src/main/kotlin/team8/fruitable/controller/action/editor/ItemEditorAction.kt

@@ -56,7 +56,7 @@ class ItemEditorAction(
     }
 
     private fun autoCreateTag(tags: String?): MutableList<Tag> {
-        return this.autoCreateTag(tags?.split(" "))
+        return this.autoCreateTag(tags?.split(" ")?.filter { it.isEmpty() })
     }
 
     private fun uploadPicture(file: MultipartFile?): String? {

src/main/kotlin/team8/fruitable/controller/page/Pages.kt

@@ -17,7 +17,8 @@ class Pages(
     private val cartRepository: CartRepository,
     private val itemRepository: ItemRepository,
     private val bannerRepository: BannerRepository,
-    private val recommendRepository: RecommendRepository
+    private val recommendRepository: RecommendRepository,
+    private val tagRepository: TagRepository
 ) {
     private fun getCurrentUser(token: String?): User? {
         return token?.let(accountRepository::findByToken)
@@ -81,6 +82,24 @@ class Pages(
     ): String {
         model["isItems"] = true
         this.getCurrentUser(token)?.let { model["user"] = it }
+        model["items"] = itemRepository.findAll().filter { !it.isRevoked }
+        model["tags"] = tagRepository.findAll()
+        return "items"
+    }
+
+    @RequestMapping("/items/{tag_id}")
+    fun items(
+        model: Model,
+        attributes: RedirectAttributes,
+        @CookieValue("TOKEN", required = false) token: String?,
+        @PathVariable("tag_id") id: Long
+    ): String {
+        model["isItems"] = true
+        this.getCurrentUser(token)?.let { model["user"] = it }
+        val tag =
+            tagRepository.findById(id).orElse(null) ?: return error(attributes, "查找物品", "未知的标签", "/items")
+        model["items"] = tag.items.filter { !it.isRevoked }
+        model["tags"] = tagRepository.findAll()
         return "items"
     }
 

src/main/resources/static/styles/base.less

@@ -33,9 +33,3 @@ div {
     color: wheat;
     font-family: "Normal", system-ui;
 }
-
-@media (min-width: 640px) {
-    #Contents {
-        width: 640px;
-    }
-}

src/main/resources/static/styles/cart.less

@@ -52,3 +52,9 @@
         }
     }
 }
+
+@media (min-width: 640px) {
+    #Contents {
+        width: 640px;
+    }
+}

src/main/resources/static/styles/items.less

@@ -0,0 +1,145 @@
+@color_1: rgba(21, 255, 172, 0.8);
+@color_2: rgba(0, 225, 145, 0.8);
+@color_3: rgb(220, 220, 255);
+@color_4: red;
+@color_5: grey;
+@color_6: gold;
+@color_7: rgb(175, 175, 255);
+@font_family_1: "Normal", system-ui;
+@background_color_1: rgba(0, 60, 130, 0.8);
+@background_color_2: rgba(0, 84, 181, 0.8);
+@background_color_3: rgba(40, 150, 40, 0.2);
+
+.Taber {
+    flex-direction: column;
+    margin: 10px;
+    padding: 5px;
+    height: 80px;
+    width: 100%;
+    background-color: teal;
+    border: 3px @color_1 solid;
+    border-radius: 15px;
+
+    > .Tab {
+        flex-direction: row;
+        overflow: hidden;
+
+        > .TabTitle {
+            flex: 1;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        > .Tags {
+            flex: 9;
+            flex-wrap: wrap;
+
+            > .Tag {
+                margin: 4px 5px;
+                padding: 2px 5px;
+                border: 2px @color_2 solid;
+                border-radius: 10px;
+                background-color: @background_color_1;
+                color: wheat;
+            }
+        }
+    }
+}
+
+.Items {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    > .Item {
+        flex: 0 0 32%;
+        flex-direction: row;
+        margin: 5px;
+        background-color: @background_color_1;
+        border-radius: 15px;
+        height: 110px;
+
+        > .Picture {
+            align-items: center;
+            justify-content: center;
+            height: 110px;
+            width: 110px;
+
+            > img {
+                max-width: 100px;
+                max-height: 100px;
+                object-fit: cover;
+                margin: 5px;
+                border-radius: 10px;
+            }
+        }
+
+        > .Descriptions {
+            flex: 1 0;
+            flex-direction: column;
+            padding: 5px;
+
+            > span {
+                font-family: @font_family_1;
+            }
+
+            > .TitlePrices {
+                justify-content: space-between;
+                height: 30px;
+
+                > .Title {
+                    color: @color_3;
+                    font-size: 20px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                > .Price {
+                    color: @color_4;
+                    font-size: 18px;
+                    font-weight: bold;
+                }
+            }
+
+            > .Description {
+                color: @color_7;
+                font-size: 16px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        > .Buttons {
+            padding-left: 10px;
+            padding-right: 10px;
+            flex-direction: column;
+            justify-content: space-around;
+
+            > .Button {
+                width: 40px;
+                height: 40px;
+                background-repeat: no-repeat;
+                background-color: @background_color_3;
+                border: 1px solid rgba(100, 255, 100, 0.8);
+                border-radius: 15px;
+            }
+
+            > .AddToCart {
+                background-image: url("../images/add_to_cart.svg");
+            }
+
+            > .PlaceAnOrder {
+                background-image: url("../images/place_an_order.svg");
+            }
+        }
+    }
+}
+
+@media (min-width: 1280px) {
+    #Contents {
+        width: 1280px;
+    }
+}

src/main/resources/static/styles/order.less

@@ -37,3 +37,9 @@
         }
     }
 }
+
+@media (min-width: 640px) {
+    #Contents {
+        width: 640px;
+    }
+}

src/main/resources/templates/header.mustache

@@ -4,7 +4,7 @@
     <div class="List Link" {{#isIndex}}this{{/isIndex}}{{^isIndex}}href="/"{{/isIndex}}>
         <span class="Text">首页</span>
     </div>
-    <div class="List Link" {{#isItem}}this{{/isItem}}{{^isItem}}href="/items"{{/isItem}}>
+    <div class="List Link" {{#isItems}}this{{/isItems}}{{^isItems}}href="/items"{{/isItems}}>
         <span class="Text">商品</span>
     </div>
     <div class="List Blank"></div>

src/main/resources/templates/items.mustache

@@ -6,19 +6,27 @@
     <script type="text/javascript" src="/scripts/header.js"></script>
     <script type="text/javascript" src="/scripts/clock.js"></script>
     <script type="text/javascript" src="/scripts/top.js"></script>
-    <script type="text/javascript" src="/scripts/footer.js"></script>
     <link type="image/x-icon" rel="icon" href="/images/favicon.ico">
     <!-- 页面公共的样式表 -->
     <link type="text/css" rel="stylesheet/less" href="/styles/header.less">
     <link type="text/css" rel="stylesheet" href="/styles/clock.css">
     <link type="text/css" rel="stylesheet" href="/styles/top.css">
-    <link type="text/css" rel="stylesheet/less" href="/styles/footer.less">
+    <link type="text/css" rel="stylesheet/less" href="/styles/base.less">
     <!-- 页面特定的样式表 -->
-    <link type="text/css" rel="stylesheet/less" href="/styles/item.less">
+    <link type="text/css" rel="stylesheet/less" href="/styles/items.less">
     <!-- 外部小组件 -->
     <script src="/scripts/lib/less.min.js"></script>
     <script src="/scripts/lib/anime.min.js"></script>
     <script async src="/scripts/lib/explosion.min.js"></script>
+    <script>
+        window.addEventListener("DOMContentLoaded", () => {
+            document.querySelectorAll("*[tagid]").forEach((v) => {
+                v.addEventListener("click", function () {
+                    window.location.href = `/items/${v.getAttribute("tagid")}`
+                })
+            });
+        });
+    </script>
 </head>
 
 <body>
@@ -27,9 +35,39 @@
 
 <!-- 页面内容 -->
 <div id="Contents">
+    <div class="Taber">
+        <div class="Tab">
+            <div class="TabTitle">标签</div>
+            <div class="Tags">
+                {{#tags}}
+                    <span class="Tag" tagid="{{id}}">{{name}}</span>
+                {{/tags}}
+            </div>
+        </div>
     </div>
 
-{{>footer}}
+    <!-- 内容本身 -->
+    <div class="Items">
+        {{#items}}
+            <div class="Item" itemid="{{id}}">
+                <div class="Picture">
+                    <img alt="商品图片" src="{{pictureLink}}"/>
+                </div>
+                <div class="Descriptions">
+                    <div class="TitlePrices">
+                        <span class="Title">{{name}}</span>
+                        <span class="Price">{{price}}￥</span>
+                    </div>
+                    <div class="Description">{{description}}</div>
+                </div>
+                <div class="Buttons">
+                    <div class="Button PlaceAnOrder"></div>
+                    <div class="Button AddToCart"></div>
+                </div>
+            </div>
+        {{/items}}
+    </div>
+</div>
 
 </body>
 </html>