feat(ui): 详情抽屉全面美化(卡片式信息档案风格,覆盖8个页面的全字段抽屉)

- 头像区:渐变名片卡+玉绿头像框+身份绿点
- KV网格:双列卡片+行悬停高亮+分区玉绿竖条标题
- 顶栏:毛玻璃悬浮;图片:圆角阴影+悬停放大;背景:点阵纹理
- 零组件改动(纯CSS全局层,!important覆盖各页scoped样式)

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/style.css

@@ -478,3 +478,165 @@ h2 {
   background: #e2f5eb;
   box-shadow: inset 3px 0 0 var(--el-color-primary);
 }
+
+/* ═══════════════════ 详情抽屉美化层(2026-08-22) ═══════════════════
+   覆盖所有页面的全字段抽屉(客户/员工/群/通话/短信/搜索/聊天/员工详情)
+   —— 卡片式信息档案风格,玉绿主色系呼应全站主题。
+   使用 !important 覆盖各页面的 scoped 最小布局样式。 */
+
+/* ── 抽屉整体 ── */
+.el-drawer .el-drawer__body {
+  padding: 0 20px 24px !important;
+  background:
+    radial-gradient(circle at 1px 1px, rgba(23,29,43,.025) 1px, transparent 0) 0 0/18px 18px,
+    #fafbfc !important;
+}
+
+/* ── 顶部操作栏:悬浮毛玻璃 ── */
+.yk-drawer__topbar {
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 10 !important;
+  padding: 12px 0 !important;
+  margin: 0 -20px 16px !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+  background: rgba(250,251,252,.92) !important;
+  backdrop-filter: blur(8px) !important;
+  border-bottom: 1px solid rgba(23,29,43,.06) !important;
+}
+
+/* ── 头像区:渐变名片卡 ── */
+.yk-drawer__avatar {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+  margin: 0 -20px 20px !important;
+  padding: 20px !important;
+  background: linear-gradient(135deg, #e8f7ef 0%, #f0faf5 50%, #fafbfc 100%) !important;
+  border-radius: 12px !important;
+  border: 1px solid rgba(13,159,110,.1) !important;
+}
+.yk-drawer__avatar .el-avatar {
+  border: 3px solid rgba(13,159,110,.2) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 12px -4px rgba(13,159,110,.3) !important;
+  flex: none !important;
+}
+.yk-drawer__avatar-name {
+  font-size: 18px !important;
+  font-weight: 700 !important;
+  color: #1a2230 !important;
+  letter-spacing: .02em !important;
+}
+.yk-drawer__avatar-sub {
+  font-size: 12.5px !important;
+  color: #5a6472 !important;
+  margin-top: 4px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+}
+.yk-drawer__avatar-sub::before {
+  content: '' !important;
+  width: 6px !important;
+  height: 6px !important;
+  border-radius: 50% !important;
+  background: var(--el-color-primary) !important;
+  flex: none !important;
+}
+
+/* ── 分区标题:玉绿竖条+字距 ── */
+.yk-drawer .el-divider--horizontal {
+  margin: 20px 0 12px !important;
+}
+.yk-drawer .el-divider__text {
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  color: #3d4756 !important;
+  letter-spacing: .06em !important;
+  padding: 0 12px 0 0 !important;
+  background: transparent !important;
+}
+.yk-drawer .el-divider__text::before {
+  content: '' !important;
+  display: inline-block !important;
+  width: 3px !important;
+  height: 14px !important;
+  border-radius: 2px !important;
+  background: var(--el-color-primary) !important;
+  margin-right: 8px !important;
+  vertical-align: -2px !important;
+}
+.yk-drawer .el-divider__text.is-left {
+  left: 0 !important;
+  transform: none !important;
+}
+
+/* ── KV 网格:卡片行+悬停高亮 ── */
+.yk-drawer__kv {
+  margin: 0 !important;
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  gap: 1px !important;
+  background: rgba(23,29,43,.05) !important;
+  border-radius: 10px !important;
+  overflow: hidden !important;
+  border: 1px solid rgba(23,29,43,.05) !important;
+}
+.yk-drawer__kv-item {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 4px !important;
+  padding: 10px 14px !important;
+  background: #fff !important;
+  transition: background .18s ease !important;
+  grid-template-columns: none !important;
+}
+.yk-drawer__kv-item:hover {
+  background: #f2faf6 !important;
+}
+.yk-drawer__kv-item dt {
+  color: #8a94a4 !important;
+  font-size: 11.5px !important;
+  font-weight: 600 !important;
+  letter-spacing: .04em !important;
+  text-transform: none !important;
+}
+.yk-drawer__kv-item dd {
+  margin: 0 !important;
+  font-size: 13.5px !important;
+  color: #2b3240 !important;
+  word-break: break-all !important;
+  min-width: 0 !important;
+  line-height: 1.5 !important;
+}
+.yk-drawer__empty {
+  color: #c6cdd8 !important;
+}
+
+/* ── 图片单元格 ── */
+.yk-drawer__img .el-image {
+  width: 72px !important;
+  height: 72px !important;
+  border-radius: 10px !important;
+  border: 1px solid rgba(23,29,43,.08) !important;
+  box-shadow: 0 2px 8px -2px rgba(23,29,43,.15) !important;
+  transition: transform .2s ease !important;
+}
+.yk-drawer__img .el-image:hover {
+  transform: scale(1.04) !important;
+}
+
+/* ── 长文本值(如描述/签名)跨全宽 ── */
+.yk-drawer__kv-item:nth-child(n+3):has(dd[style*="grid-column"]) {
+  grid-column: 1 / -1 !important;
+}
+
+/* 员工独立详情页:同样的卡片化 */
+.yk-staff-detail__body .yk-drawer__avatar {
+  margin: 0 0 24px !important;
+}
+.yk-staff-detail__header {
+  margin-bottom: 16px !important;
+}