refactor: 拆分小程序 vue 结构

src/pages/profile/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="page-shell profile-page">
+    <PageHero title="我的" subtitle="管理联系人、地址和常用信息">
+      <view class="profile-page__hero-row">
+        <view>
+          <text class="profile-page__hero-label">联系人</text>
+          <text class="profile-page__hero-value">{{ customerStore.name || '未填写' }}</text>
+        </view>
+        <view>
+          <text class="profile-page__hero-label">手机号</text>
+          <text class="profile-page__hero-value">{{ customerStore.phone || '未填写' }}</text>
+        </view>
+      </view>
+    </PageHero>
+
+    <view class="surface-card">
+      <text class="section-title">顾客信息</text>
+      <input class="field-input" :value="draftName" placeholder="请输入顾客姓名" @input="handleNameInput" />
+      <input class="field-input profile-page__field-gap" :value="draftPhone" type="number" placeholder="请输入手机号" @input="handlePhoneInput" />
+      <view class="profile-page__action-row">
+        <NutButton type="primary" block @click="saveProfile">保存信息</NutButton>
+      </view>
+    </view>
+
+    <view class="surface-card">
+      <view class="row-between">
+        <view>
+          <text class="section-title">常用信息</text>
+          <text class="section-subtitle">提前填写地址或桌号，下单时更方便。</text>
+        </view>
+      </view>
+      <view class="profile-page__kv-list">
+        <view class="profile-page__kv-item">
+          <text class="caption-text">配送地址</text>
+          <text class="value-text profile-page__break-all">{{ fulfillmentStore.addressText || '暂未填写' }}</text>
+        </view>
+        <view class="profile-page__kv-item">
+          <text class="caption-text">堂食桌号</text>
+          <text class="value-text">{{ fulfillmentStore.tableNo || '暂未填写' }}</text>
+        </view>
+      </view>
+      <view class="profile-page__action-grid">
+        <NutButton block plain @click="goAddress">编辑地址</NutButton>
+        <NutButton block plain @click="goDineIn">编辑桌号</NutButton>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { Button as NutButton } from '@nutui/nutui-taro'
+import PageHero from '@/components/page-hero/index.vue'
+import { useProfilePage } from './composables/useProfilePage'
+
+const {
+  customerStore,
+  draftName,
+  draftPhone,
+  fulfillmentStore,
+  goAddress,
+  goDineIn,
+  handleNameInput,
+  handlePhoneInput,
+  saveProfile
+} = useProfilePage()
+</script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>