🎨 优化点亮页按钮细节

src/common/components/FrameButton.vue

@@ -12,6 +12,7 @@
     @click="emit('click')"
   >
     <ActivityIndicator v-if="loading" :size="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
+    <Icon v-if="icon" :icon="icon" :size="size === 'large' ? 32 : 26" :color="primary ? 'white' : 'text.content'" />
     <Text :text="text" :wrap="false" fontConfig="lightTitle" :fontSize="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
   </BackgroundImageButton>
 </template>
@@ -19,6 +20,7 @@
 <script setup lang="ts">
 import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
 import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
+import Icon from '@/components/basic/Icon.vue';
 import Text from '@/components/basic/Text.vue';
 import { computed } from 'vue';
 
@@ -30,6 +32,7 @@ const props = withDefaults(defineProps<{
   innerStyle?: object;
   loading?: boolean;
   touchable?: boolean;
+  icon?: string;
 }>(), {
   text: '去发布',
   primary: false,

src/pages/home/light/submit-map.vue

@@ -13,12 +13,10 @@ import Text from '@/components/basic/Text.vue';
 import Image from '@/components/basic/Image.vue';
 import BoxMid from '@/common/components/box/BoxMid.vue';
 import JoinDialog from '../village/dialogs/JoinDialog.vue';
-import Touchable from '@/components/feedback/Touchable.vue';
-import Icon from '@/components/basic/Icon.vue';
 import CitySelect from '../components/CitySelect.vue';
 import Popup from '@/components/dialog/Popup.vue';
+import FrameButton from '@/common/components/FrameButton.vue';
 import type { RegionItem } from '@/api/map/RegionApi';
-import Button from '@/components/basic/Button.vue';
 
 const { querys } = useLoadQuerys({
   latitude: AppCofig.defaultLonLat[1],
@@ -116,11 +114,8 @@ defineExpose({
           <Text text="请选择您要点亮的村社" fontConfig="primaryTitle" />
         </FlexCol>
         <FlexRow gap="gap.md">
-          <Button type="text" icon="search" text="点击搜索" @click="lightMap?.showSearch()" />
-          <Touchable direction="row" align="center" gap="gap.md" @click="navTo('/pages/home/light/create-village')">
-            <Icon icon="home-filling" size="40" />
-            <Text text="没有我的家乡？点击这里一键建村！" fontConfig="contentText" />
-          </Touchable>
+          <FrameButton size="small" icon="search" text="点击搜索" @click="lightMap?.showSearch()" />
+          <FrameButton size="small" icon="home-filling" text="没有我的家乡？点这里建村" @click="navTo('/pages/home/light/create-village')" />
         </FlexRow>
       </BoxMid>
     </FlexRow>