fix: UI 优化和功能修复

- 修复了搜索组件的样式和交互问题
- 优化了 Market 组件的布局和样式
- 修正了 theme.scss 中的拼写错误 (seach -> search)
- 优化了 SurveyItem 组件的样式和功能
- 改进了 Analysis 组件的图表显示
- 增强了 HomeSearch 的用户体验
- 修复了 useSurveySearch 中的数据加载逻辑

src/assets/css/theme.scss

@@ -4,6 +4,6 @@ $gap: 10px;
 $nav-header-color: #f2f2f2;
 $nav-color: #eefde8;
 
-%seach-gradient {
+%search-gradient {
   background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
 }

src/components/Analysis/Index.vue

@@ -79,7 +79,7 @@ const changeChart = (i: number) => {
         margin: '16px 0'
       }"
     >
-      <span ref="pieChart" style="width: 100%; height: v-bind(chartHeight)"></span>
+      <span ref="pieChart" style="width: 100%; height: v-bind(chartHeight + 'px')"></span>
     </div>
   </section>
 </template>

src/components/MarketItem/MarketItem.vue

@@ -132,9 +132,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$gap: 10px;
+@use '@/assets/css/theme' as *;
 
 .mark_container {
+  background-color: $nav-header-color;
   display: grid;
   grid-gap: $gap;
   grid-template-columns: repeat(2, 1fr);

src/components/Search/Index.vue

@@ -6,6 +6,7 @@
       :placeholder="placeholder"
       style="--van-search-padding: 0"
       @search="handleSearchAction"
+      @cancel="handleCancelClick"
     >
     </van-search>
     <p class="search" @click="handleSearchAction">搜索</p>
@@ -32,18 +33,23 @@ const placeholder = defineModel('placeholder', {
   default: '请输入搜索关键词'
 });
 
-const emit = defineEmits(['search']);
+const emit = defineEmits(['search', 'cancel']);
 
 function handleSearchAction() {
   emit('search');
   searchMethod.value && searchMethod.value();
 }
+
+function handleCancelClick() {
+  emit('cancel');
+}
 </script>
 
 <style scoped lang="scss">
 @use '@/assets/css/theme';
 
 .search-container {
+  position: relative;
   :deep(.van-search) {
     padding: 0;
     //margin: 0 10px;
@@ -63,7 +69,7 @@ function handleSearchAction() {
     &::after {
       content: '|';
       position: absolute;
-      right: 9vh;
+      right: 18%;
       top: 1vh;
       //transform: translateY(-50%);
       font-weight: bold;

src/views/Home/Index.vue

@@ -83,7 +83,7 @@ function handleSearchClick() {
 .search {
   margin: 0 -10px 0 -10px;
   padding: 10px;
-  @extend %seach-gradient;
+  @extend %search-gradient;
 }
 
 .slider {

src/views/Home/components/Market/Index.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 模板 -->
   <div class="market">
-    <search></search>
-    <van-tabs v-model:active="active" class="px-1" @change="getMarketInfo">
+    <search :value="searchValue"></search>
+    <van-tabs style="margin-top: 15px" v-model:active="active" class="px-1" @change="getMarketInfo">
       <section>
         <van-tab v-for="item in marketList" :key="item.title" :title="item.h5Title">
           <template #title>
@@ -29,7 +29,7 @@ const marketIndex = ref(0);
 const marketInfo = ref([]);
 // 当前激活的 item 信息
 const marketItem = ref();
-
+const searchValue = ref('');
 const getTableList = async () => {
   const res = await getListScene();
   if (res.data.code === 0) {
@@ -85,7 +85,7 @@ onMounted(() => {
 }
 
 .market {
-  padding-top: 10px;
+  padding: 10px;
   border-radius: 0 0 16px 16px;
   background-color: white;
   overflow: hidden;

src/views/HomeSearch/Hooks/useSurveySearch.ts

@@ -90,7 +90,9 @@ function updatePageCount(value: number) {
 watch(keyword, async () => {
   dirty.value = true;
   // 重新获取数据
-  await handleSearch();
+  // await handleSearch();
+  // 重置状态
+  loading.value = false
 });
 
 // 索引变动之后，立刻进行搜索 （没有进行防抖）

src/views/HomeSearch/Index.vue

@@ -12,6 +12,10 @@ import { banners } from '@/views/HomeSearch/Hooks/useSurveySearch';
 
 const searchKeyword = keyword as Ref<string>;
 
+function handleSearchCancel() {
+  loading.value = false;
+}
+
 onMounted(() => {
   // 当页面取消挂载时，重置页面展示的状态
   loading.value = false;
@@ -21,12 +25,17 @@ onMounted(() => {
 <template>
   <section class="search-container">
     <div class="search">
-      <search :focus="true" v-model:value="searchKeyword" :search="updateKeyword" />
+      <search
+        @cancel="handleSearchCancel"
+        :focus="true"
+        v-model:value="searchKeyword"
+        :search="updateKeyword"
+      />
     </div>
     <!--  广告区域  -->
     <image-slider :banners="banners" v-if="banners?.length > 0 && keyword" />
 
-    <section class="result" v-if="loading">
+    <section class="result" v-if="loading && searchKeyword">
       <!--  我的任务区域  -->
       <layout v-if="visible.mineSurvey" title="我的任务">
         <template #title>
@@ -69,7 +78,7 @@ onMounted(() => {
     padding: 10px;
     padding-bottom: 20px;
     // background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
-    @extend %seach-gradient;
+    @extend %search-gradient;
   }
 
   // 搜索结果外部布局

src/views/Survey/Index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="survey-search">
-    <!-- <nav-search v-model:value="searchValue" @search="blurs" /> -->
-    <nav-search v-model:value="searchValue" @click="() => $router.push({ name: 'search' })" />
+    <nav-search v-model:value="searchValue" @search="blurs" />
+    <!-- <nav-search
+      placeholder="请输入关键词"
+      v-model:value="searchValue"
+      @click="() => $router.push({ name: 'search' })"
+    /> -->
   </div>
   <div class="new-survey-container">
     <div style="margin-bottom: 80px">
@@ -66,8 +70,8 @@ onMounted(() => {
 }
 
 .survey-search {
-  @extend %seach-gradient;
-  padding: 0 10px;
+  @extend %search-gradient;
+  padding: 10px 10px;
   position: sticky;
   top: 0;
   z-index: 1000;

src/views/Survey/components/SurveyItem.vue

@@ -217,12 +217,9 @@ function copyItem(item: SurveyItem) {
           </el-text>
         </el-button>
       </div>
-      <el-dropdown
-        v-if="survey.source === 1"
-        placement="top-end"
-        trigger="click"
-        active-color="#71b73c"
-      >
+      <!-- 移除 PC 端不能操作 -->
+      <!-- v-if="survey.source === 1" -->
+      <el-dropdown placement="top-end" trigger="click" active-color="#71b73c">
         <van-icon class-prefix="mobilefont" name="gengduo" size="0.7rem"></van-icon>
         <template #dropdown>
           <el-dropdown-menu
@@ -259,8 +256,8 @@ function copyItem(item: SurveyItem) {
 
   .survey_item_status {
     position: absolute;
-    top: -16px;
-    right: -10px;
+    top: -20px;
+    right: -20px;
   }
 
   .survey_item_info_title {

src/views/Survey/views/Analysis/Index.vue

@@ -32,6 +32,7 @@ useFetchAnalysis(sn.value);
 
 <template>
   <search-bar
+    placeholder="请输入关键词"
     v-if="!disableSearch"
     :value="''"
     style="margin: 15px 10px 5px 10px"