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 {
-    top: 0 !important;
+  .vditor-panel {
+    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

@@ -1,18 +1,13 @@
 <template>
-  <component
-    :is="wrapperTag"
-    :to="isLink ? resolvedLink : undefined"
+  <NuxtLink
+    :to="resolvedLink"
     class="base-user-avatar"
     :class="wrapperClass"
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
-    :role="isLink ? undefined : 'img'"
-    :aria-label="altText"
-    :title="altText"
   >
-    <span class="base-user-avatar-backdrop" aria-hidden="true" />
     <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-  </component>
+  </NuxtLink>
 </template>
 
 <script setup>
@@ -81,45 +76,15 @@ const sizeStyle = computed(() => {
   return { width: value, height: value }
 })
 
-const accentHue = computed(() => {
-  const seed = props.userId ?? props.alt
-  const source = seed !== undefined && seed !== null ? String(seed) : ''
-  if (!source) return 198
-  let hash = 0
-  for (let index = 0; index < source.length; index += 1) {
-    hash = (hash << 5) - hash + source.charCodeAt(index)
-    hash |= 0
-  }
-  return Math.abs(hash) % 360
-})
-
-const accentStyles = computed(() => {
-  const hue = accentHue.value
-  return {
-    '--avatar-accent': `hsl(${hue}, 74%, 54%)`,
-    '--avatar-accent-light': `hsl(${hue}, 95%, 82%)`,
-    '--avatar-accent-soft': `hsl(${hue}, 96%, 95%)`,
-    '--avatar-accent-border': `hsla(${hue}, 70%, 48%, 0.28)`,
-    '--avatar-accent-shadow': `hsla(${hue}, 68%, 36%, 0.2)`,
-  }
-})
-
 const wrapperStyle = computed(() => {
   const attrStyle = attrs.style
-  return [accentStyles.value, sizeStyle.value, attrStyle]
+  return [sizeStyle.value, attrStyle]
 })
 
-const isLink = computed(() => !props.disableLink && !!resolvedLink.value)
-
-const wrapperTag = computed(() => (isLink.value ? 'NuxtLink' : 'div'))
-
-const wrapperClass = computed(() => [
-  attrs.class,
-  { 'is-rounded': props.rounded, 'is-interactive': isLink.value },
-])
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
 
 const wrapperAttrs = computed(() => {
-  const { class: _class, style: _style, to: _to, href: _href, ...rest } = attrs
+  const { class: _class, style: _style, ...rest } = attrs
   return rest
 })
 
@@ -132,26 +97,24 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 16px;
-  background: linear-gradient(
-    140deg,
-    var(--avatar-accent-soft, rgba(17, 182, 197, 0.12)) 0%,
-    var(--avatar-accent-light, rgba(17, 182, 197, 0.22)) 100%
-  );
-  border: 1px solid var(--avatar-accent-border, rgba(17, 182, 197, 0.2));
-  box-shadow:
-    0 1px 2px rgba(15, 52, 67, 0.08),
-    0 3px 8px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.18));
-  transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease,
-    border-color 0.3s ease,
-    background 0.3s ease;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
+  /* 先用box-sizing: border-box，保证加border后宽高不变，圆形不变形 */
+  box-sizing: border-box;
+  border: 1.5px solid var(--normal-border-color);
+  transition: all 0.6s ease;
+}
+
+.base-user-avatar:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.base-user-avatar:active {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
 }
 
 .base-user-avatar.is-rounded {
@@ -162,54 +125,10 @@ function onError() {
   border-radius: 0;
 }
 
-.base-user-avatar-backdrop {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72), transparent 62%),
-    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent),
-    linear-gradient(
-      140deg,
-      var(--avatar-accent-soft, rgba(17, 182, 197, 0.08)) 0%,
-      var(--avatar-accent-light, rgba(17, 182, 197, 0.18)) 100%
-    );
-  opacity: 0.75;
-  transition:
-    opacity 0.35s ease,
-    transform 0.35s ease;
-  z-index: 0;
-}
-
 .base-user-avatar-img {
-  position: relative;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  z-index: 1;
-  border-radius: inherit;
-  transition: transform 0.35s ease;
-}
-
-.base-user-avatar.is-interactive:hover,
-.base-user-avatar.is-interactive:focus-visible {
-  transform: translateY(-1px) scale(1.02);
-  border-color: var(--avatar-accent, var(--primary-color, #0a6e78));
-  box-shadow:
-    0 6px 16px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.24)),
-    0 3px 6px rgba(15, 52, 67, 0.18);
-  outline: none;
-}
-
-.base-user-avatar.is-interactive:hover .base-user-avatar-backdrop,
-.base-user-avatar.is-interactive:focus-visible .base-user-avatar-backdrop {
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.base-user-avatar.is-interactive:hover .base-user-avatar-img,
-.base-user-avatar.is-interactive:focus-visible .base-user-avatar-img {
-  transform: scale(1.02);
 }
 </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"