完成大量美化，zustand迁移，动态表格修复

frontend/src/components/SideBarLeft/tabs/CharacterCard/CharacterCard.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 6px;
+  padding: 0; /* sidebar-content已有padding，这里不需要 */
   gap: 6px;
   background: var(--color-bg-primary);
   overflow-y: auto;
@@ -101,8 +101,8 @@
   flex: 1;
   overflow-y: auto;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 6px;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* 减小最小宽度，让窄屏也能显示2列 */
+  gap: 8px; /* 增加间距，让卡片更有呼吸感 */
   padding: 2px;
 }
 
@@ -110,8 +110,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 140px; /* 固定宽度 */
-  height: 200px; /* 固定高度 */
+  width: 100%; /* 改为自适应宽度 */
+  height: 170px; /* 减小高度，从200px降到170px */
   background: var(--color-bg-secondary);
   border: 2px solid var(--color-border);
   border-radius: 6px;
@@ -140,7 +140,7 @@
 /* 角色头像 */
 .character-avatar-wrapper {
   width: 100%;
-  aspect-ratio: 3/4;
+  aspect-ratio: 3/4; /* 保持3:4比例 */
   position: relative;
   background: var(--color-bg-tertiary);
   overflow: hidden;
@@ -170,24 +170,24 @@
 
 /* 角色信息 */
 .character-info {
-  padding: 6px;
+  padding: 5px; /* 减小padding，从6px降到5px */
   flex: 1;
-  min-height: 50px;
+  min-height: 40px; /* 减小最小高度，从50px降到40px */
   /* 移除 user-select，因为已经在父元素设置了 */
 }
 
 .character-name {
-  font-size: 12px;
+  font-size: 11px; /* 稍微减小字体，从12px降到11px */
   font-weight: 600;
   color: var(--color-text-primary);
-  margin-bottom: 3px;
+  margin-bottom: 2px; /* 减小间距 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .character-desc {
-  font-size: 10px;
+  font-size: 9px; /* 减小字体，从10px降到9px */
   color: var(--color-text-muted);
   line-height: 1.3;
   display: -webkit-box;
@@ -200,7 +200,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 2px;
-  margin-top: 3px;
+  margin-top: 2px; /* 减小间距，从3px降到2px */
 }
 
 .tag {
@@ -280,18 +280,26 @@
   background: var(--color-bg-tertiary);
   border-radius: 4px;
   border: 1px solid var(--color-border-light);
+  flex-wrap: wrap; /* 允许换行 */
+  gap: 6px; /* 添加间距 */
 }
 
 .edit-title {
   font-size: 12px;
   font-weight: 600;
   color: var(--color-text-primary);
+  flex: 1; /* 占据剩余空间 */
+  min-width: 120px; /* 最小宽度，防止过度压缩 */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 超出隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }
 
 .edit-actions {
   display: flex;
   gap: 6px;
   align-items: center;
+  flex-wrap: wrap; /* 按钮也可以换行 */
 }
 
 .export-format-selector {
@@ -409,6 +417,12 @@
   min-height: 60px;
 }
 
+.form-hint {
+  font-size: 10px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+
 /* 聊天选择器弹窗 */
 .chat-selector-overlay {
   position: fixed;