feat: 添加新图片资源及更新组件样式与功能

style: 调整CSS样式及优化布局
refactor: 重构组件逻辑及API调用
fix: 修复路径引用及图片加载问题
docs: 更新注释及文档内容

css/public.less

@@ -102,6 +102,67 @@ body {
             color: #aaaaaa;
         }
 
+        .anonymous-box {
+            background-color: #f2f2f2;
+            border-radius: 30px;
+            font-size: 14px;
+            color: #333;
+            height: 28px;
+            padding: 0 10px;
+            cursor: pointer;
+            margin-right: 15px;
+        }
+
+        .circlePen {
+            border-radius: 50%;
+            background-color: #f2f2f2;
+            margin-right: 10px;
+            width: 28px;
+            height: 28px;
+            cursor: pointer;
+
+            .icon {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .isPublicityBox {
+            width: 120px;
+            background-color: #fff;
+            position: absolute;
+            top: 34px;
+            left: 0;
+            border-radius: 8px;
+            box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
+            z-index: 89;
+
+            .isPublicity-item {
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                padding: 0 10px;
+                color: #555555;
+                font-size: 16px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                cursor: pointer;
+
+                &:first-child {
+                    border-bottom: 1px dotted #e3e3e3;
+                }
+
+                &.green {
+                    color: #26d79f;
+                }
+
+                .isPublicityIcon {
+                    width: 12px;
+                }
+            }
+        }
+
         .view {
             font-size: 12px;
             color: #aaaaaa;
@@ -1021,7 +1082,7 @@ body {
 .side-box .box {
     width: 272px;
     background-color: #ffffff;
-    border-radius: 8px;
+    border-radius: 0;
 }
 
 .side-box.thread-side-box .box .item {
@@ -1220,7 +1281,7 @@ body {
 }
 
 .side-box.newest-side-box .box .item .dot.dot-green {
-    background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-green.svg);
+    background-image: url(/img/dot-green.svg);
     background-repeat: no-repeat;
 }
 
@@ -1263,7 +1324,7 @@ body {
     width: 6px;
     height: 6px;
     margin-right: 10px;
-    background-image: url(https://app.gter.net/image/gter/forum/assets/forum/dot-blue.svg);
+    background-image: url(/img/dot-blue.svg);
     background-repeat: no-repeat;
 }
 
@@ -1650,6 +1711,11 @@ body {
         padding: 0 15px;
         justify-content: space-between;
         margin-right: 20px;
+        transition: all 0.3s;
+
+        &.pitch {
+            border-color: #000;
+        }
 
         .input {
             border: none;
@@ -1661,7 +1727,7 @@ body {
         .icon {
             width: 18px;
             height: 18px;
-            margin-left: 15rpx;
+            margin-left: 15px;
             cursor: pointer;
         }
     }
@@ -1882,7 +1948,6 @@ td {
     height: 8px;
 }
 
-
 .t_r {
     -moz-border-radius: 0 8px 0 0;
     -webkit-border-radius: 0 8px 0 0;
@@ -1891,4 +1956,53 @@ td {
 
 .templateValue {
     display: none;
-}
+}
+
+.list-load-box {
+    width: 100%;
+    height: 0;
+    background-color: #ffffff;
+    border: 0 solid #e9eef2;
+    border-radius: 10px;
+    flex-direction: column;
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+
+    &.show {
+        height: 100px;
+        border-width: 1px;
+
+        .list-load-icon {
+            width: 30px;
+            height: 30px;
+        }
+        .list-load-text {
+            font-size: 14px;
+        }
+    }
+
+    .list-load-icon {
+        width: 0;
+        height: 0;
+
+        animation: loadingRotate 1s linear infinite;
+        transition: all 0.3s ease-in-out;
+    }
+
+    .list-load-text {
+        color: #999999;
+        font-size: 0;
+
+        margin-top: 6px;
+        transition: all 0.3s ease-in-out;
+    }
+}
+
+@keyframes loadingRotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}