refactor(inbox): 侧边栏素材列表改为轻量 Flex 布局 — Card→Flex, 新增状态 Tag, hover 切换删除按钮, 左侧竖线选中态

src/web/styles.css

@@ -286,7 +286,6 @@ body {
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: var(--ant-margin-xs);
   min-height: 0;
   overflow-y: auto;
 }
@@ -304,3 +303,65 @@ body {
 .app-inbox-datepicker {
   width: 100%;
 }
+
+/* Inbox material list items */
+.material-list-item {
+  border-left: 3px solid transparent;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+  padding: var(--ant-padding-xs) 0;
+  padding-left: var(--ant-padding-sm);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.material-list-item:last-child {
+  border-bottom: none;
+}
+
+.material-list-item:hover {
+  background: var(--ant-color-fill-tertiary);
+}
+
+.material-list-item--selected {
+  border-left-color: var(--ant-color-primary);
+}
+
+.material-list-item--selected:hover {
+  background: var(--ant-color-fill-tertiary);
+}
+
+.material-item-right {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.material-item-tag,
+.material-item-actions {
+  transition: opacity 0.15s ease;
+}
+
+.material-item-tag {
+  opacity: 1;
+}
+
+.material-item-actions {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.material-list-item:hover .material-item-tag {
+  opacity: 0;
+}
+
+.material-list-item:hover .material-item-actions {
+  opacity: 1;
+}
+
+.material-item-time {
+  font-size: var(--ant-font-size-sm);
+}