fix: 移动端头像显示问题 #1023

Feature/user list and avatar

frontend_nuxt/assets/global.css

@@ -108,7 +108,6 @@ body {
 
 .vditor-toolbar--pin {
   top: calc(var(--header-height) + 1px) !important;
-  z-index: 20;
 }
 
 .vditor-panel {
@@ -134,26 +133,6 @@ body {
   animation: spin 1s linear infinite;
 }
 
-/* .vditor {
-  --textarea-background-color: transparent;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-.vditor-reset {
-  color: var(--text-color);
-}
-
-.vditor-toolbar {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-} */
-
-/* .vditor-toolbar {
-  position: relative !important;
-} */
-
 /*************************
  * Markdown 渲染样式
  *************************/
@@ -333,10 +312,6 @@ body {
     min-height: 100px;
   }
 
-  .vditor-toolbar {
-    overflow-x: auto;
-  }
-
   .about-content h1,
   .info-content-text h1 {
     font-size: 20px;
@@ -354,8 +329,8 @@ body {
     margin-bottom: 3px;
   }
 
-  .vditor-toolbar--pin {
+  .vditor-panel {
-    top: 0 !important;
+    min-width: 330px;
   }
 
   .about-content li,
@@ -367,11 +342,6 @@ body {
     line-height: 1.5;
   }
 
-  .vditor-panel {
-    position: relative;
-    min-width: 0;
-  }
-
   .d2h-file-name {
     font-size: 14px !important;
   }

frontend_nuxt/components/BaseUserAvatar.vue

@@ -6,8 +6,7 @@
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
   >
-    <BaseImage :src="currentSrc" :alt="altText" :class="imageClass" @error="onError" />
+    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-    <span v-if="showInitial" class="base-user-avatar-initial">{{ userInitial }}</span>
   </NuxtLink>
 </template>
 
@@ -70,121 +69,19 @@ const resolvedLink = computed(() => {
 
 const altText = computed(() => props.alt || '用户头像')
 
-const identifier = computed(() => {
-  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
-    return String(props.userId)
-  }
-  if (props.alt && props.alt.trim()) {
-    return props.alt.trim()
-  }
-  return altText.value
-})
-
-const initialSource = computed(() => {
-  if (props.alt && props.alt.trim() && props.alt.trim() !== '用户头像') {
-    return props.alt.trim()
-  }
-  if (attrs.title && typeof attrs.title === 'string' && attrs.title.trim()) {
-    return attrs.title.trim()
-  }
-  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
-    return String(props.userId)
-  }
-  return ''
-})
-
-const isDefaultAvatar = computed(() => currentSrc.value === DEFAULT_AVATAR)
-
-function parseCssSize(value) {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return { numeric: value, unit: 'px' }
-  }
-  if (typeof value !== 'string') return null
-  const trimmed = value.trim()
-  if (!trimmed) return null
-  const directNumber = Number(trimmed)
-  if (!Number.isNaN(directNumber)) {
-    return { numeric: directNumber, unit: 'px' }
-  }
-  const match = trimmed.match(/^(-?\d*\.?\d+)([a-z%]+)$/i)
-  if (!match) return null
-  return { numeric: Number(match[1]), unit: match[2] }
-}
-
 const sizeStyle = computed(() => {
   if (!props.width && props.width !== 0) return null
   const value = typeof props.width === 'number' ? `${props.width}px` : props.width
   if (!value) return null
-  const parsed = parseCssSize(value)
+  return { width: value, height: value }
-  const style = { width: value, height: value, '--avatar-size': value }
-  if (parsed && Number.isFinite(parsed.numeric)) {
-    const computedFont = (parsed.numeric * 0.42).toFixed(2)
-    const normalized = computedFont.replace(/\.00$/, '')
-    style['--avatar-font-size'] = `${normalized}${parsed.unit}`
-  }
-  return style
-})
-
-function stringToColorSeed(value) {
-  if (!value) return 0
-  let hash = 0
-  for (let i = 0; i < value.length; i += 1) {
-    hash = (hash << 5) - hash + value.charCodeAt(i)
-    hash |= 0
-  }
-  return Math.abs(hash)
-}
-
-const accentStyle = computed(() => {
-  if (!isDefaultAvatar.value) return null
-  const seed = stringToColorSeed(identifier.value)
-  const hue = seed % 360
-  const altHue = (hue + 37) % 360
-  const saturation = 72
-  const lightness = 78
-  const start = `hsl(${hue}, ${saturation}%, ${Math.min(lightness + 8, 95)}%)`
-  const end = `hsl(${altHue}, ${Math.max(saturation - 12, 45)}%, ${Math.max(lightness - 12, 48)}%)`
-  return {
-    '--avatar-background': `linear-gradient(135deg, ${start}, ${end})`,
-    '--avatar-border-color': `hsla(${hue}, ${Math.max(saturation - 24, 32)}%, ${Math.max(
-      lightness - 35,
-      28,
-    )}%, 0.55)`,
-    '--avatar-text-color': '#ffffff',
-  }
 })
 
 const wrapperStyle = computed(() => {
   const attrStyle = attrs.style
-  return [
+  return [sizeStyle.value, attrStyle]
-    { '--avatar-font-size': 'clamp(0.75rem, 0.6rem + 0.4vw, 1.75rem)' },
-    sizeStyle.value,
-    accentStyle.value,
-    attrStyle,
-  ]
 })
 
-const wrapperClass = computed(() => [
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
-  attrs.class,
-  {
-    'is-rounded': props.rounded,
-    'has-default': isDefaultAvatar.value,
-    'is-interactive': !props.disableLink && Boolean(resolvedLink.value),
-  },
-])
-
-const imageClass = computed(() => ['base-user-avatar-img', { 'is-default': isDefaultAvatar.value }])
-
-const userInitial = computed(() => {
-  const source = initialSource.value || ''
-  const trimmed = source.trim()
-  if (!trimmed) return ''
-  const match = trimmed.match(/[\p{L}\p{N}]/u)
-  if (match && match[0]) return match[0].toUpperCase()
-  return trimmed.charAt(0).toUpperCase()
-})
-
-const showInitial = computed(() => isDefaultAvatar.value && Boolean(userInitial.value))
 
 const wrapperAttrs = computed(() => {
   const { class: _class, style: _style, ...rest } = attrs
@@ -200,28 +97,24 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
-  --avatar-background: var(--avatar-placeholder-color, #f0f0f0);
-  --avatar-border-color: rgba(15, 23, 42, 0.08);
-  --avatar-text-color: rgba(255, 255, 255, 0.86);
-  --avatar-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
-  --avatar-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.16);
-  --avatar-size: 3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  position: relative;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
-  background: var(--avatar-background);
+  /* 先用box-sizing: border-box，保证加border后宽高不变，圆形不变形 */
-  border: 1px solid var(--avatar-border-color);
+  box-sizing: border-box;
-  border-radius: var(--avatar-border-radius, 16px);
+  border: 1.5px solid var(--normal-border-color);
-  box-shadow: var(--avatar-shadow);
+  transition: all 0.6s ease;
-  color: var(--avatar-text-color);
+}
-  transition:
+
-    transform 0.28s ease,
+.base-user-avatar:hover {
-    box-shadow 0.32s ease,
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
-    border-color 0.32s ease,
+  transform: scale(1.05);
-    filter 0.28s ease;
+}
-  isolation: isolate;
+
+.base-user-avatar:active {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
 }
 
 .base-user-avatar.is-rounded {
@@ -229,35 +122,7 @@ function onError() {
 }
 
 .base-user-avatar:not(.is-rounded) {
-  border-radius: var(--avatar-border-radius, 16px);
+  border-radius: 0;
-}
-
-.base-user-avatar.is-interactive {
-  cursor: pointer;
-}
-
-.base-user-avatar.is-interactive:hover,
-.base-user-avatar.is-interactive:focus-visible {
-  transform: translateY(-1px) scale(1.01);
-  box-shadow: var(--avatar-shadow-hover);
-  border-color: rgba(59, 130, 246, 0.4);
-}
-
-.base-user-avatar.has-default::after {
-  content: '';
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: rgba(15, 23, 42, 0.12);
-  mix-blend-mode: soft-light;
-  opacity: 0.25;
-  pointer-events: none;
-  transition: opacity 0.28s ease;
-}
-
-.base-user-avatar.has-default:hover::after,
-.base-user-avatar.has-default:focus-visible::after {
-  opacity: 0.18;
 }
 
 .base-user-avatar-img {
@@ -265,42 +130,5 @@ function onError() {
   height: 100%;
   object-fit: cover;
   display: block;
-  filter: saturate(108%);
-  transition:
-    opacity 0.35s ease,
-    transform 0.35s ease,
-    filter 0.35s ease;
-}
-
-.base-user-avatar-img.is-default {
-  opacity: 0.32;
-  filter: saturate(90%) brightness(1.05);
-  mix-blend-mode: multiply;
-}
-
-.base-user-avatar-initial {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: var(--avatar-font-size, calc(var(--avatar-size) * 0.42));
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  pointer-events: none;
-  user-select: none;
-  color: inherit;
-  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .base-user-avatar {
-    transition: none;
-  }
-
-  .base-user-avatar-img {
-    transition: none;
-  }
 }
 </style>

frontend_nuxt/components/MessageEditor.vue

@@ -159,12 +159,6 @@ export default {
   border: 1px solid var(--border-color);
   border-radius: 8px;
 }
-
-.vditor {
-  min-height: 50px;
-  max-height: 150px;
-}
-
 .message-bottom-container {
   display: flex;
   flex-direction: row;

frontend_nuxt/pages/index.vue

@@ -85,7 +85,7 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <div v-for="member in article.members">
+            <div v-for="member in article.members" class="article-member-avatar-item">
               <BaseUserAvatar
                 class="article-member-avatar-item-img"
                 :src="member.avatar"