Prompts related optimization (#984)

* feat(prompts): enhance button visibility and layout

- Show button only if user is logged in
- Add gap between items in prompts list
- Clean up unnecessary whitespace in styles

* fix(prompts): adjust layout and overflow styles

- Update height calculation in PromptsHub
- Add overflow-y-auto to PromptsLibrary
- Remove fixed positioning in PromptsMenu

Author: hiveer

frontend/src/components/prompts/PromptsHub.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full min-h-[calc(100vh-153px)] flex md:flex-col text-[#101828] relative">
+  <div class="w-full h-[calc(100vh-153px)] flex md:flex-col text-[#101828] relative">
     <PromptsMenu />
     <PromptsLibrary
       :current-component="currentComponent"

frontend/src/components/prompts/PromptsIndex.vue

@@ -19,7 +19,7 @@
           @change="filterChange"
         />
         <CsgButton
-          v-if="!actionLimited"
+          v-if="isLoggedIn && !actionLimited"
           :loading="loading"
           class="btn btn-secondary-gray btn-lg"
           @click="changeCurrentComponent('newPromptsList')"
@@ -77,7 +77,7 @@
   const promptsData = ref([])
   const totalPrompts = ref(0)
 
-  const { actionLimited } = storeToRefs(userStore)
+  const { actionLimited, isLoggedIn } = storeToRefs(userStore)
 
   const emit = defineEmits(['changeCurrentComponent'])
   const changeCurrentComponent = (currentComponent) => {

frontend/src/components/prompts/PromptsLibrary.vue

@@ -1,7 +1,7 @@
 <!-- 提示词库根页面 -->
 <template>
-  <div class="grow text-[#101828] w-full">
-    <PromptsIndex 
+  <div class="grow text-[#101828] w-full overflow-y-auto">
+    <PromptsIndex
       v-if="theCurrentComponent === 'PromptsIndex'"
       @changeCurrentComponent="changeCurrentComponent"
     />

frontend/src/components/prompts/PromptsList.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="text-sm text-gray-500">{{ repo.description }}</div>
       <div
-        class="flex text-sm text-gray-500 items-center"
+        class="flex gap-3 text-sm text-gray-500 items-center"
         v-if="theModels.length"
       >
         <span class="min-w-[max-content] text-md text-gray-700">
@@ -326,35 +326,35 @@ import CsgButton from '../shared/CsgButton.vue'
       ) !important;
     }
   }
-  
+
   :deep(.el-select) {
     --el-component-size-large: 44px !important;
   }
-  
+
   :deep(.el-select .el-input) {
     height: 44px !important;
   }
-  
+
   :deep(.el-select .el-input__wrapper) {
     height: 44px !important;
     line-height: 44px !important;
     padding: 0 16px !important;
   }
-  
+
   :deep(.el-select .el-input__inner) {
     height: 44px !important;
     line-height: 44px !important;
   }
-  
+
   :deep(.el-select:not(.el-select--large) .el-input__wrapper) {
     height: 44px !important;
   }
-  
+
   :deep(.el-select__popper .el-select-dropdown__item) {
     height: 44px !important;
     line-height: 44px !important;
   }
-  
+
   :deep(.btn-prev) {
     border-radius: 6px 0 0 6px;
     margin: 0 !important;

frontend/src/components/prompts/PromptsMenu.vue

@@ -3,7 +3,7 @@
     class="w-[240px] md:hidden md:w-full px-5 pt-[24px] font-medium text-[#475467] border-r"
     :style="`background:linear-gradient(270deg, #FCFCFC 0%, #FFF 100%)`"
   >
-    <div class="flex flex-col fixed top-[104px] gap-1 md:flex-row text-[14px] leading-[24px]">
+    <div class="flex flex-col top-[104px] gap-1 md:flex-row text-[14px] leading-[24px]">
       <a
         href="/prompts/library"
         class="p-3 hover:bg-[#F9FAFB] rounded-[8px] cursor-pointer"