feat: udpate ui

frontend/wechat/src/components/ArticleListItem.vue

@@ -30,37 +30,42 @@ const showArticle = (article) => {
 </script>
 
 <template>
-    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
+    <div class="bg-white shadow overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer flex h-32"
         @click="showArticle(article)">
+        <!-- Left side - Image -->
         <div v-if="article.head_images && article.head_images.length > 0"
-            class="relative w-full h-24 bg-gray-100 overflow-hidden">
+            class="relative w-32 flex-shrink-0 bg-gray-100 overflow-hidden">
             <img :src="article.head_images[0]"
-                class="absolute inset-0 w-full object-cover transition-transform duration-300 hover:scale-105"
+                class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 hover:scale-105"
                 :alt="article.title" />
-            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
+            <div class="absolute inset-0 bg-gradient-to-r from-transparent to-black/20"></div>
         </div>
-        <div class="p-4 space-y-3">
-            <h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
-                {{ article.title }}
-            </h3>
 
-            <p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
+        <!-- Right side - Content -->
-                {{ article.description }}
+        <div class="flex-1 p-4 flex flex-col justify-between min-w-0">
-            </p>
+            <div class="space-y-2">
+                <h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
+                    {{ article.title }}
+                </h3>
 
-            <div class="flex flex-wrap gap-2">
+                <p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
-                <span v-for="tag in article.tags" :key="tag"
+                    {{ article.description }}
-                    class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">
+                </p>
-                    {{ tag }}
+
-                </span>
+                <div class="flex flex-wrap gap-1">
+                    <span v-for="tag in article.tags" :key="tag"
+                        class="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">
+                        {{ tag }}
+                    </span>
+                </div>
             </div>
 
-            <div class="flex items-center justify-between pt-2 text-sm">
+            <div class="flex items-center justify-between pt-1 text-sm">
                 <div class="flex items-center gap-2 text-gray-500">
                     <AiOutlineEye class="w-4 h-4" />
                     <span>{{ article.view_count || 0 }}</span>
                 </div>
-                <div class="text-orange-600 font-mono text-xl" v-if="!article.bought">
+                <div class="text-orange-600 font-mono text-lg" v-if="!article.bought">
                     ¥{{ discountPrice }}
                 </div>
             </div>

frontend/wechat/src/views/ArticleList.vue

@@ -73,17 +73,13 @@ onMounted(() => {
         <div class="flex-none bg-white border-b border-gray-200 sticky top-0 z-40 shadow-sm">
             <div class="p-4">
                 <div class="relative">
-                    <input type="search"
+                    <input type="search" v-model="searchInput" @keyup="handleKeyup" placeholder="搜索曲谱..." class="w-full pl-10 pr-4 py-2.5 text-gray-600 bg-gray-50 border border-gray-200 rounded-full
-                        v-model="searchInput"
-                        @keyup="handleKeyup"
-                        placeholder="搜索曲谱..."
-                        class="w-full pl-10 pr-4 py-2.5 text-gray-600 bg-gray-50 border border-gray-200 rounded-full
                                focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
                                placeholder:text-gray-400">
                     <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                     </span>
                 </div>
@@ -91,16 +87,12 @@ onMounted(() => {
         </div>
 
         <div class="flex-1 overflow-y-auto">
-            <div class="container max-w-2xl mx-auto p-4">
+            <div class="container max-w-2xl mx-auto py-4">
                 <div class="grid gap-4">
-                    <ArticleListItem v-for="article in articles"
+                    <ArticleListItem v-for="article in articles" :key="article.id" :article="article" />
-                        :key="article.id"
-                        :article="article" />
                 </div>
 
-                <div ref="loadingTrigger"
+                <div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
-                    class="py-4 text-center"
-                    v-show="hasMore || loading">
                     <div v-if="loading"
                         class="w-8 h-8 mx-auto border-2 border-gray-200 border-t-primary-500 rounded-full animate-spin">
                     </div>
@@ -109,13 +101,11 @@ onMounted(() => {
                     </div>
                 </div>
 
-                <div v-if="!hasMore && articles.length > 0"
+                <div v-if="!hasMore && articles.length > 0" class="text-center text-gray-500 py-4">
-                    class="text-center text-gray-500 py-4">
                     没有更多曲谱了
                 </div>
 
-                <div v-if="!hasMore && articles.length === 0"
+                <div v-if="!hasMore && articles.length === 0" class="text-center text-gray-500 py-12">
-                    class="text-center text-gray-500 py-12">
                     暂无曲谱
                 </div>
             </div>

frontend/wechat/src/views/UserProfile.vue

@@ -41,9 +41,7 @@ const menuGroups = [
             <div class="max-w-2xl mx-auto">
                 <div class="flex items-center gap-4 p-6">
                     <div class="w-20 h-20 rounded-full border-2 border-white shadow-lg overflow-hidden bg-gray-100">
-                        <img :src="userInfo.avatar"
+                        <img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
-                            :alt="userInfo.username"
-                            class="w-full h-full object-cover" />
                     </div>
 
                     <div class="space-y-1">
@@ -62,20 +60,16 @@ const menuGroups = [
         </div>
 
         <!-- 菜单列表 -->
-        <div class="max-w-2xl mx-auto px-4 py-6 space-y-4">
+        <div class="max-w-2xl mx-auto px-4 py-6 space-y-4 hidden">
-            <div v-for="(group, groupIndex) in menuGroups"
+            <div v-for="(group, groupIndex) in menuGroups" :key="groupIndex"
-                :key="groupIndex"
                 class="bg-white rounded-xl overflow-hidden shadow-sm">
                 <div class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-50">
                     {{ group.title }}
                 </div>
                 <div class="divide-y divide-gray-100">
-                    <div v-for="(item, itemIndex) in group.items"
+                    <div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
-                        :key="itemIndex"
-                        class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
                                cursor-pointer transition-colors duration-150">
-                        <component :is="item.icon"
+                        <component :is="item.icon" class="mr-3 text-xl text-gray-500" />
-                            class="mr-3 text-xl text-gray-500" />
                         <span class="flex-1 text-gray-700">{{ item.label }}</span>
                         <span class="text-gray-400">
                             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">