feat(ui): standardize button styles and sizes across components (#771)

* feat(ui): standardize button styles and sizes across components

Implements consistent button styling system with sm/md/lg/xl/2xl sizes, adds flex layout and gaps for icons, updates button classes in AddToCollections, EmptyCommunity, NewCommunityDiscussion, TheNavbar and RepoClone components

* remove portal file

frontend/src/assets/stylesheets/element-plus/button.css

@@ -337,20 +337,6 @@
   color: var(--Gray-400);
 } 
 
-/* md size button */
-.btn-primary,
-.btn-secondary-gray,
-.btn-secondary-color,
-.btn-tertiary-gray,
-.btn-tertiary-color,
-.btn-link-gray,
-.btn-link-color {
-  /* 默认尺寸（可以认为是 md 尺寸） */
-  padding: 10px 16px;
-  font-size: 14px;
-  border-radius: var(--border-radius-lg);
-}
-
 /* sm size button */
 .btn-primary.btn-sm,
 .btn-secondary-gray.btn-sm,
@@ -359,11 +345,36 @@
 .btn-tertiary-color.btn-sm,
 .btn-link-gray.btn-sm,
 .btn-link-color.btn-sm {
-  padding: 8px 14px;
+  padding: 8px 12px;
   font-size: 12px;
+  transform: scale(1);
+  -webkit-transform: scale(1);
   border-radius: var(--border-radius-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
+/* md size button */
+.btn-primary.btn-md,
+.btn-secondary-gray.btn-md,
+.btn-secondary-color.btn-md,
+.btn-tertiary-gray.btn-md,
+.btn-tertiary-color.btn-md,
+.btn-link-gray.btn-md,
+.btn-link-color.btn-md {
+  /* 默认尺寸（可以认为是 md 尺寸） */
+  padding: 10px 14px;
+  font-size: var(--font-size-sm);
+  transform: scale(1);
+  -webkit-transform: scale(1);
+  border-radius: var(--border-radius-lg);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+
 /* lg size button */
 .btn-primary.btn-lg,
 .btn-secondary-gray.btn-lg,
@@ -372,9 +383,14 @@
 .btn-tertiary-color.btn-lg,
 .btn-link-gray.btn-lg,
 .btn-link-color.btn-lg {
-  padding: 10px 18px;
-  font-size: 16px;
+  padding: 10px 16px;
+  font-size: var(--font-size-md);
+  transform: scale(1);
+  -webkit-transform: scale(1);
   border-radius: var(--border-radius-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 /* xl size button */
@@ -385,9 +401,14 @@
 .btn-tertiary-color.btn-xl,
 .btn-link-gray.btn-xl,
 .btn-link-color.btn-xl {
-  padding: 12px 20px;
-  font-size: 16px;
+  padding: 12px 18px;
+  font-size: var(--font-size-md);
+  transform: scale(1);
+  -webkit-transform: scale(1);
   border-radius: var(--border-radius-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 /* 2xl size button */
@@ -398,7 +419,12 @@
 .btn-tertiary-color.btn-2xl,
 .btn-link-gray.btn-2xl,
 .btn-link-color.btn-2xl {
-  padding: 16px 24px;
-  font-size: 18px;
+  padding: 16px 22px;
+  font-size: var(--font-size-lg);
+  transform: scale(1);
+  -webkit-transform: scale(1);
   border-radius: var(--border-radius-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
 }

frontend/src/components/collections/AddToCollections.vue

@@ -4,7 +4,7 @@
   >
     <div
       @click="openAddCollections"
-      class="flex max-w-[max-content] px-3 py-[5px] text-sm leading-[20px] bg-white border border-gray-300 justify-center items-center gap-[6px] rounded-lg shadow-sm hover:bg-slate-50 cursor-pointer"
+      class="btn btn-secondary-gray btn-sm"
     >
       <SvgIcon
         name="collections"

frontend/src/components/community/EmptyCommunity.vue

@@ -10,7 +10,7 @@
       </span>
     </div>
     <div class="flex justify-center">
-      <div class="cursor-pointer flex items-center gap-[8px] bg-brand-500 px-[20px] py-[9px] text-sm text-white font-medium leading-[22px]" @click="creatDiscussion">
+      <div class="btn btn-primary btn-md" @click="creatDiscussion">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.33337 7.99967H8.00004M12.6667 7.99967H8.00004M8.00004 7.99967V3.33301M8.00004 7.99967V12.6663" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         {{ $t('community.empty.new') }}
       </div>

frontend/src/components/community/NewCommunityDiscussion.vue

@@ -26,15 +26,16 @@
     <CommunityMDTextarea
       :desc="desc"
       @inputChange="handleInputChange"></CommunityMDTextarea>
-    <div>
-      <el-button
-        type="primary"
+    <div class="flex gap-[8px]">
+      <button
+        class="btn btn-primary btn-sm"
         @click="create"
-        >{{ $t('community.newDiscussion.create') }}</el-button
-      >
-      <el-button @click="cancel">{{
+        >{{ $t('community.newDiscussion.create') }}</button>
+      <button 
+        class="btn btn-secondary-gray btn-sm"
+        @click="cancel">{{
         $t('community.newDiscussion.cancel')
-      }}</el-button>
+      }}</button>
     </div>
   </div>
 </template>

frontend/src/components/navbar/TheNavbar.vue

@@ -175,8 +175,8 @@
         <!-- not logged in -->
         <template v-else>
           <div
-            class="px-[14px] py-[10px] text-md font-500 leading-[24px] md:hidden btn btn-primary">
-            <a href="/login">{{ $t('navbar.loginRegister') }}</a>
+            class="md:hidden">
+            <a href="/login" class="btn btn-primary btn-md">{{ $t('navbar.loginRegister') }}</a>
           </div>
           <a
             class="hidden md:block text-sm font-500"

frontend/src/components/shared/RepoClone.vue

@@ -37,7 +37,7 @@
 
     <!-- finetune deploy button -->
     <div
-      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-white border border-gray-300 shadow-sm hover:bg-slate-50 cursor-pointer"
+      class="btn btn-secondary-gray btn-sm"
       v-if="repoType === 'model' && enableFinetune && !!httpCloneUrl"
       @click="handleButtonClick"
     >
@@ -51,14 +51,14 @@
     <!-- repo download clone button -->
     <div
       v-if="!!httpCloneUrl"
-      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-brand-600 shadow-sm hover:bg-blue-800 cursor-pointer"
+      class="btn btn-primary btn-sm"
       @click="cloneRepositoryVisible = true"
     >
       <SvgIcon
         name="download"
         class="mr-0"
       />
-      <div class="text-white text-sm">{{ $t(downloadButtonKey) }}</div>
+      <div>{{ $t(downloadButtonKey) }}</div>
     </div>
 
     <!-- clone dialog -->