feat(web-admin): add page variant for product form in mp webview.

Co-authored-by: Cursor <cursoragent@cursor.com>

web-admin/src/views/m/crm/product/form.vue

@@ -2,16 +2,97 @@
   <MpWebviewShell>
     <header class="mp-wv-header">
       <div class="mp-wv-header__row">
-        <h1 class="mp-wv-header__title">{{ title }}</h1>
+        <button class="mp-wv-header__back" type="button" aria-label="返回列表" @click="goList">
+          ←
+        </button>
+        <h1 class="mp-wv-header__title">{{ pageTitle }}</h1>
       </div>
     </header>
-    <div class="mp-wv-empty">页面建设中</div>
+    <div
+      v-if="contentLoading"
+      class="mp-plan-form-loading mp-plan-form-loading--page"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div class="mp-plan-form-loading__orb" aria-hidden="true">
+        <span class="mp-plan-form-loading__dot" />
+      </div>
+      <p class="mp-plan-form-loading__title">{{ loadingCopy.title }}</p>
+      <p class="mp-plan-form-loading__desc">{{ loadingCopy.desc }}</p>
+      <div class="mp-plan-form-loading__skel" aria-hidden="true">
+        <div class="mp-wv-skel mp-wv-skel--block" />
+        <div class="mp-wv-skel mp-wv-skel--mid" />
+        <div class="mp-wv-skel mp-wv-skel--line" />
+        <div class="mp-wv-skel mp-wv-skel--short" />
+      </div>
+    </div>
+    <ProductFormDialog
+      v-show="!contentLoading"
+      :key="formKey"
+      variant="page"
+      :model-value="true"
+      :product-id="productId"
+      @loading-change="onLoadingChange"
+      @success="onSuccess"
+      @close="goList"
+    />
   </MpWebviewShell>
 </template>
+
 <script setup lang="ts">
+  import { computed, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
   import MpWebviewShell from '@/layouts/MpWebviewShell.vue'
+  import ProductFormDialog from '@/components/business/product-form-dialog/index.vue'
+  import { MP_CRM_PRODUCT_LIST_PATH } from '@/utils/mp-webview'
   import '@/styles/mp-webview.scss'
 
   const route = useRoute()
-  const title = computed(() => String(route.meta.title || '产品'))
+  const router = useRouter()
+  const contentLoading = ref(true)
+
+  const pageTitle = computed(() => String(route.meta.title || '产品'))
+
+  const productId = computed(() => {
+    if (route.name === 'MpCrmProductNew') return undefined
+    const id = String(route.params.id || '').trim()
+    return id || undefined
+  })
+
+  const formKey = computed(() => `${String(route.name || '')}-${productId.value || ''}`)
+
+  const loadingCopy = computed(() => {
+    if (productId.value) {
+      return {
+        title: '正在加载产品',
+        desc: '请稍候，正在获取产品详情…'
+      }
+    }
+    return {
+      title: '正在准备表单',
+      desc: '请稍候，正在初始化分类等主数据…'
+    }
+  })
+
+  watch(formKey, () => {
+    contentLoading.value = true
+  })
+
+  function onLoadingChange(loading: boolean) {
+    contentLoading.value = loading
+  }
+
+  function goList() {
+    void router.replace(MP_CRM_PRODUCT_LIST_PATH)
+  }
+
+  function onSuccess(product?: Record<string, any>) {
+    const id = String(product?.id || '').trim()
+    if (id) {
+      void router.replace(`/m/crm/product/${id}`)
+      return
+    }
+    goList()
+  }
 </script>