diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index ffa3ea53e97cb4bafa9917f83f462c42d8b3bc5d..11652e551cf955d13449aabc4830dfc331473617 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -91,6 +91,10 @@ export default defineConfig({
             text: '图片搜索框',
             link: '/guide/custom-image-search-box',
           },
+          {
+            text: '标签墙',
+            link: '/guide/tagged-wall',
+          },
         ],
       },
     ],
diff --git a/docs/guide/tagged-wall.md b/docs/guide/tagged-wall.md
new file mode 100644
index 0000000000000000000000000000000000000000..f0ccf45e538457947d484f525a3931722b28e05d
--- /dev/null
+++ b/docs/guide/tagged-wall.md
@@ -0,0 +1,33 @@
+# 标签墙
+
+标签墙为大屏列表呈现模式，是列表的一种增强，要达到该目标，需要在列表上绑定标签墙。
+
+## 效果呈现
+
+![效果呈现](../public/img/tagged-wall.png)
+
+## 主要内容
+标签墙由多个标签组件(customTag)组成。首先通过函数$RandomSplit获取一组和为列表长度的数组，后通过函数将$RandomSplit将列表数组随机排列为菱形(中间多两头少的列表)。最后通过customTag绘制。标签的字体大小和颜色由函数$Normal和函数$RandomColor随机生成。
+
+## 插件
+
+该插件隶属于列表绘制插件（基于列表进行扩展），下方数据导入应用即可使用
+
+::: details 点我查看代码
+```json
+[
+  {
+    "plugintype": "LIST_RENDER",
+    "codename": "UsrPFPlugin0816463041",
+    "plugintag": "TAGGED_WALL",
+    "pssyspfpluginname": "标签墙"
+  }
+]
+```
+:::
+
+## 配置
+
+大屏门户插件配置
+
+![配置](../public/img/tagged-wall_config.png)
diff --git a/docs/public/img/tagged-wall.png b/docs/public/img/tagged-wall.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf04cc2196f18f823138e89ffd5159deac174dd4
Binary files /dev/null and b/docs/public/img/tagged-wall.png differ
diff --git a/docs/public/img/tagged-wall_config.png b/docs/public/img/tagged-wall_config.png
new file mode 100644
index 0000000000000000000000000000000000000000..dae6e21a3e56c5fe869caa45dc2b109bf3369bf2
Binary files /dev/null and b/docs/public/img/tagged-wall_config.png differ
diff --git a/src/custom-image-search-box/custom-image-search-box.scss b/src/custom-image-search-box/custom-image-search-box.scss
index 29b96607df23a0ea7f5289c6d354ed34a7283420..45a3865f0db4a59ffe8d97fbffc6ed278e525a3b 100644
--- a/src/custom-image-search-box/custom-image-search-box.scss
+++ b/src/custom-image-search-box/custom-image-search-box.scss
@@ -13,8 +13,6 @@
     left: 0;
 
     .el-input__wrapper {
-      box-shadow: unset;
-
       .el-input__suffix::before {
         position: absolute;
         top: 9px;
@@ -35,6 +33,12 @@
         box-shadow: unset;
       }
     }
+
+    &.has-image {
+      .el-input__wrapper {
+        box-shadow: unset;
+      }
+    }
   }
 
   @include e(search-icon) {
@@ -43,8 +47,8 @@
   }
 }
 
-.cockpit-large-screen{
-  .ibiz-custom-image-search-box{
+.cockpit-large-screen {
+  .ibiz-custom-image-search-box {
     position: absolute;
   }
-}
\ No newline at end of file
+}
diff --git a/src/custom-image-search-box/custom-image-search-box.tsx b/src/custom-image-search-box/custom-image-search-box.tsx
index 10f4418a47d0256af00c759e62943b6c119c55f7..2683885135eecfe80c32ab3d95ed923db5e49f7b 100644
--- a/src/custom-image-search-box/custom-image-search-box.tsx
+++ b/src/custom-image-search-box/custom-image-search-box.tsx
@@ -29,6 +29,8 @@ export const CustomImageSearchBox = defineComponent({
     };
   },
   render() {
+    const data = this.c.model.sysImage?.rawContent;
+
     return (
       <div
         class={[
@@ -37,12 +39,9 @@ export const CustomImageSearchBox = defineComponent({
           this.readonly ? this.ns.m('readonly') : '',
         ]}
       >
-        <img
-          class={this.ns.e('image')}
-          src={this.c.model.sysImage?.rawContent}
-        ></img>
+        {data ? <img class={this.ns.e('image')} src={data}></img> : null}
         <el-input
-          class={this.ns.e('input')}
+          class={[this.ns.e('input'), data ? 'has-image' : '']}
           v-model={this.searchValue}
           placeholder={'请输入学生姓名或学号'}
           clearable={false}