统一客户端采购与运输新增页样式及必填提示

AGENTS.md

@@ -73,11 +73,12 @@
 
 ## UI 与交互
 
+- 后续客户端新增、新建、下单操作统一执行 [Client 界面样式规范](../../docs/Client界面样式规范.md) 的“新增页面”章节，作为当前通用外观依据；列表按同文列表条款。只读取本轮适用章节，不因规范更新批量改造其他操作或公共外框。
 - 视觉还原、布局/交互承载方式变更或真实页面验收时读取 `../../docs/Admin-Client前端原型还原验收规则.md`，只为受影响操作形成原型核对矩阵；纯文案、逻辑或测试修改不自动读取。自动检查与人工视觉验收分开报告，无视觉变化时标记“无需视觉验收”。
-- 已向客户讲解或确认过的产品原型是页面视觉与布局实现的直接事实来源。字段顺序、字段分组、字段摆放、列宽、控件宽高、对齐方式、换行方式、区块层级、上下左右边距、内边距、间隙、留白、圆角、边框、阴影、背景色、文字颜色和字号均必须按原型还原，不得只参考大致风格后自行重新排版。
+- 已向客户讲解或确认过的产品原型是页面字段、分组、摆放及承载方式的直接依据；新增页的通用外观以当前 Client 样式规范明确替代的条款为准。未被替代的列宽、控件宽高、对齐方式、换行方式、区块层级、边距、圆角、边框、阴影、背景色、文字颜色和字号仍按原型还原，不得只参考大致风格后自行重新排版。
 - 原型中的按钮位置、顺序、尺寸、圆角、边框、背景色、文字色、图标、悬停态、激活态、禁用态和危险语义必须直接按原型实现；不得擅自改为文字链接、不同颜色、不同按钮类型、折叠菜单或自创交互效果，也不得增加原型没有的上浮、缩放、渐变线、装饰图标或其他视觉元素。
 - 原型已经给出明确图标、字符图标、图片资源或按钮内图标时，直接使用原型中的同一方案和资源，不得以 Lucide、Element Plus 默认图标、手绘图标或个人偏好替换。仅当原型没有定义对应图标时，才按本节的默认图标语义补齐。
-- 上述原型还原规则优先于本文件中“延续现有视觉体系”、默认组件样式和默认图标库等一般性规则。只有用户当前明确要求、阶段范围、真实字段长度、响应式、可访问性或接口事实与原型冲突时才允许做最小调整，并须在修改前说明具体差异、原因和影响范围；不得以技术实现方便为由偏离原型。
+- 当前 Client 样式规范明确替代的外观及上述原型还原规则，优先于本文件中“延续现有视觉体系”、默认组件样式和默认图标库等一般性规则。后续用户明确确认的例外优先；阶段范围、真实字段长度、响应式、可访问性或接口事实与原型冲突时只做最小调整，并须在修改前说明具体差异、原因和影响范围，不得以技术实现方便为由偏离。
 - 详情、新增、编辑、审核等操作采用独立页面、居中弹框、侧滑面板或其他承载方式，必须逐页面按对应原型确认，不得全局写死为某一种容器。原型为独立页面时使用正式路由和页面布局；原型为居中弹框时使用模态弹框；只有原型明确为侧滑面板时才使用抽屉。不得因为已有公共组件或改动方便，把原型中的独立页面改成弹框、把弹框改成抽屉，或反向替换。
 - 延续现有客户工作台的可信、简洁和服务型视觉语言，与内部管理后台保持品牌关联但不照搬高密度管理界面。
 - 优先使用 Element Plus 和 Lucide 图标；不使用表情符号代替功能图标，不引入第二套组件库。

src/modules/cross-border/components/BusinessOrdersView.vue

@@ -281,8 +281,8 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 </script>
 
 <template>
-  <section v-loading="loading" class="business-orders client-ui" :aria-busy="loading">
+  <section v-loading="loading" class="business-orders client-ui" :class="{ 'business-orders--create': mode === 'create' }" :aria-busy="loading">
-    <header v-if="mode === 'create'" class="page-head" :class="{ 'looseboard-page-head': props.kind === 'looseboard' }">
+    <header v-if="mode === 'create'" class="page-head">
       <div>
         <h2>{{ configuration.title }}下单</h2>
 
@@ -344,7 +344,6 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 <style scoped>
 .business-orders { display: grid; gap: var(--client-section-gap); }
 .page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
-.looseboard-page-head { max-width: 1180px; padding-right: 30px; box-sizing: border-box; }
 .page-head h2 { margin: 0; color: #111827; font-size: 26px; }
 .page-head p { margin: 7px 0 0; color: #64748b; font-size: 14px; }
 .business-table-card { overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
@@ -369,6 +368,11 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .arrangement-grid dt { white-space: normal; overflow-wrap: anywhere; }
 .detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; }
 .form-card :deep(.el-card__body) { padding: 0; }
+.business-orders--create { --client-action: #2f7bff; --client-action-hover: #1d5fe0; --client-border: #d5dce8; --client-control-height: 44px; --client-font-size: 14px; width: 100%; min-width: 0; gap: 12px; background: #f4f7fc; }
+.business-orders--create .page-head { flex-wrap: wrap; gap: 16px; }
+.business-orders--create .page-head h2 { color: #1f2937; font-weight: 700; }
+.business-orders--create .page-head :deep(.el-button) { height: auto; min-height: 44px; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; }
+.business-orders--create .form-card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
 
 @media (max-width: 767px) {
   .business-orders { gap: 14px; }

src/modules/cross-border/components/TransportDemandForm.vue

@@ -14,6 +14,8 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{ submit: []; cancel: [] }>()
 const formRef = ref<FormInstance>()
 const rules = computed(() => transportDemandRules(props.kind, props.model))
+const isCreate = computed(() => !props.editing)
+const createPopperClass = computed(() => isCreate.value ? 'transport-create-popper' : undefined)
 defineExpose({
   validate: () => formRef.value?.validate() ?? Promise.resolve(false),
   clearValidate: (fields?: string | string[]) => formRef.value?.clearValidate(fields),
@@ -21,50 +23,54 @@ defineExpose({
 </script>
 
 <template>
-  <el-form ref="formRef" class="transport-demand-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
+  <el-form ref="formRef" class="transport-demand-form" :class="{ 'transport-demand-form--create': isCreate }" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
     <slot name="customer" />
     <section class="transport-demand-section">
       <h3>运输信息</h3>
-      <div class="transport-demand-grid">
+      <div class="transport-demand-grid transport-demand-route-grid">
-        <el-form-item v-if="kind === 'truck'" class="transport-demand-wide" label="车辆类型" prop="vehicleType">
+        <el-form-item v-if="kind === 'truck'" class="transport-demand-wide transport-demand-vehicle" label="车辆类型" prop="vehicleType">
-          <el-select v-model="model.vehicleType" placeholder=""><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
+          <el-select v-model="model.vehicleType" :popper-class="createPopperClass" :placeholder="isCreate ? '请选择车辆类型' : ''"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
         </el-form-item>
         <el-form-item :label="kind === 'truck' ? '取货地' : '起运地'" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
+        <el-form-item v-if="!isCreate" :label="kind === 'truck' ? '送达地' : '目的地'" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货联系人' : '起运地联系人'" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入取货联系人姓名' : '请输入起运地联系人姓名') : ''" /></el-form-item>
+        <el-form-item v-if="!isCreate" :label="kind === 'truck' ? '送达联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" placeholder="" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货联系电话' : '起运地联系电话'" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入取货联系电话' : '请输入起运地联系电话') : ''" /></el-form-item>
+        <template v-if="isCreate">
           <el-form-item :label="kind === 'truck' ? '送达地' : '目的地'" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '取货联系人' : '起运地联系人'" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" placeholder="" /></el-form-item>
+          <el-form-item :label="kind === 'truck' ? '送达联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" :placeholder="kind === 'truck' ? '请输入送达联系人姓名' : '请输入目的地联系人姓名'" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '送达联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" placeholder="" /></el-form-item>
+        </template>
-        <el-form-item :label="kind === 'truck' ? '取货联系电话' : '起运地联系电话'" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" placeholder="" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '送达联系电话' : '目的地联系电话'" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入送达联系电话' : '请输入目的地联系电话') : ''" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '送达联系电话' : '目的地联系电话'" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" placeholder="" /></el-form-item>
+        <el-form-item class="transport-demand-address" :label="kind === 'truck' ? '取货地址' : '起运详细地址'"><el-input v-model.trim="model.originAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '取货地址' : '起运详细地址'"><el-input v-model.trim="model.originAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
+        <el-form-item class="transport-demand-address" :label="kind === 'truck' ? '送达地址' : '目的详细地址'"><el-input v-model.trim="model.destinationAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '送达地址' : '目的详细地址'"><el-input v-model.trim="model.destinationAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
       </div>
     </section>
     <section class="transport-demand-section">
       <h3>货物信息</h3>
-      <div class="transport-demand-grid" :class="kind === 'looseboard' ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
+      <div class="transport-demand-grid" :class="kind === 'looseboard' && !isCreate ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
-        <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" placeholder="" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" :placeholder="isCreate ? '请输入商品名称（选填）' : ''" /></el-form-item>
-        <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" placeholder="" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入预计托数' : ''" /></el-form-item>
-        <el-form-item v-if="kind === 'truck'" label="托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="1" :precision="0" controls-position="right" placeholder="" /></el-form-item>
+        <el-form-item v-if="kind === 'truck'" label="托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="1" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入托数' : ''" /></el-form-item>
-        <el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" placeholder="" /></el-form-item>
+        <el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" :placeholder="isCreate ? '请输入总重量' : ''" /></el-form-item>
-        <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" placeholder="" /></el-form-item>
+        <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" :placeholder="isCreate ? '请输入总体积' : ''" /></el-form-item>
-        <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" placeholder="" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入件数' : ''" /></el-form-item>
       </div>
     </section>
     <section class="transport-demand-section">
       <h3>费用与时效</h3>
       <div class="transport-demand-grid">
         <el-form-item label="预算总价" prop="budgetAmount"><div class="transport-demand-budget">
-          <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" placeholder="" />
+          <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" :placeholder="isCreate ? (kind === 'truck' ? '请输入预算总价' : '请输入预算总价（选填）') : ''" />
-          <el-select v-model="model.currency" aria-label="预算币种" placeholder=""><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
+          <el-select v-model="model.currency" :popper-class="createPopperClass" aria-label="预算币种" placeholder=""><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
         </div></el-form-item>
         <div />
-        <el-form-item :label="kind === 'truck' ? '取货时间' : '取货时间'" prop="pickupAt"><el-date-picker v-model="model.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货时间' : '取货时间'" prop="pickupAt"><el-date-picker v-model="model.pickupAt" :popper-class="createPopperClass" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" :placeholder="isCreate ? '请选择取货日期和时间' : ''" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
-        <el-form-item :label="kind === 'truck' ? '送达时间' : '送货时间'" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '送达时间' : '送货时间'" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" :popper-class="createPopperClass" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" :placeholder="isCreate ? (kind === 'truck' ? '请选择送达日期和时间' : '请选择送货日期和时间') : ''" /></el-form-item>
-        <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="" /></el-form-item>
+        <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" :show-word-limit="!isCreate" :placeholder="isCreate ? '请输入运输要求或其他补充信息（选填）' : ''" /><span v-if="isCreate" class="transport-demand-character-count">{{ model.remark.length }} / 1000</span></el-form-item>
       </div>
     </section>
     <footer class="transport-demand-actions">
-      <el-button :disabled="submitting" @click="emit('cancel')">取消</el-button>
+      <el-button :disabled="submitting" @click="emit('cancel')">{{ isCreate ? '返回列表' : '取消' }}</el-button>
       <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="disabled" @click="emit('submit')">{{ editing ? '保存修改' : '提交订单' }}</el-button>
     </footer>
   </el-form>
@@ -84,4 +90,49 @@ defineExpose({
 .transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
 .transport-demand-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
 .transport-demand-actions :deep(.el-button + .el-button) { margin-left: 0; }
+
+.transport-demand-form--create {
+  --el-component-size: 44px;
+  --el-color-primary: #2f7bff;
+  --el-text-color-regular: #1f2937;
+  --el-text-color-placeholder: #b0b7c3;
+  max-width: none;
+  min-width: 0;
+  background: transparent;
+  color: #1f2937;
+  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+}
+.transport-demand-form--create .transport-demand-section { margin-bottom: 12px; padding: 0; border: 0; }
+.transport-demand-form--create .transport-demand-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #1f2937; font-size: 18px; font-weight: 700; }
+.transport-demand-form--create .transport-demand-section h3::before { content: ''; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #2f7bff; }
+.transport-demand-form--create .transport-demand-section:nth-of-type(2) h3::before { background: #0ea5a4; }
+.transport-demand-form--create .transport-demand-grid { min-width: 0; gap: 12px 20px; padding: 16px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.transport-demand-form--create .transport-demand-route-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.transport-demand-form--create .transport-demand-route-grid > .el-form-item { grid-column: span 2; }
+.transport-demand-form--create .transport-demand-route-grid > .transport-demand-vehicle { grid-column: 1 / -1; }
+.transport-demand-form--create .transport-demand-route-grid > .transport-demand-address { grid-column: span 3; }
+.transport-demand-form--create :deep(.el-form-item) { margin: 0; }
+.transport-demand-form--create .transport-demand-vehicle { width: calc((100% - 40px) / 3); }
+.transport-demand-form--create :deep(.el-form-item__label) { height: auto; margin-bottom: 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.transport-demand-form--create :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
+/* Show validation beside the label without adding height below the control. */
+.transport-demand-form--create :deep(.el-form-item__content) { min-width: 0; line-height: 20px; }
+.transport-demand-form--create :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: auto; max-width: calc(100% - 120px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
+.transport-demand-form--create :deep(.el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper), .transport-demand-form--create :deep(.el-textarea__inner) { border: 1px solid #d5dce8; border-radius: 6px; background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; }
+.transport-demand-form--create :deep(.el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper) { min-height: 44px; padding: 10px 14px; }
+.transport-demand-form--create :deep(.el-input__inner) { height: 22px; color: #1f2937; line-height: 22px; }
+.transport-demand-form--create :deep(.el-input-number .el-input__wrapper) { padding-right: 40px; }
+.transport-demand-form--create :deep(.el-input-number.is-controls-right .el-input-number__increase), .transport-demand-form--create :deep(.el-input-number.is-controls-right .el-input-number__decrease) { width: 32px; }
+.transport-demand-form--create :deep(.el-textarea__inner) { min-height: 110px; padding: 11px 14px; color: #1f2937; line-height: 20px; resize: vertical; }
+.transport-demand-form--create :deep(.el-input__inner::placeholder), .transport-demand-form--create :deep(.el-textarea__inner::placeholder) { color: var(--el-text-color-placeholder); opacity: 1; }
+.transport-demand-form--create :deep(.el-input__wrapper.is-focus), .transport-demand-form--create :deep(.el-select__wrapper.is-focused), .transport-demand-form--create :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.transport-demand-form--create :deep(.el-form-item.is-error .el-input__wrapper), .transport-demand-form--create :deep(.el-form-item.is-error .el-select__wrapper), .transport-demand-form--create :deep(.el-form-item.is-error .el-textarea__inner) { border-color: #e5484d; box-shadow: none; }
+.transport-demand-form--create :deep(.el-input.is-disabled .el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper.is-disabled), .transport-demand-form--create :deep(.el-textarea.is-disabled .el-textarea__inner) { background: #f6f9ff; }
+.transport-demand-form--create :deep(.el-input.is-disabled .el-input__inner), .transport-demand-form--create :deep(.el-textarea.is-disabled .el-textarea__inner) { color: #98a2b3; -webkit-text-fill-color: #98a2b3; }
+.transport-demand-character-count { width: 100%; margin-top: 4px; color: #6b7280; font-size: 13px; text-align: right; }
+.transport-demand-form--create .transport-demand-actions { flex-wrap: wrap; gap: 12px; padding: 0; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button) { height: auto; min-height: 44px; margin-left: 0; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button--primary) { padding: 12px 28px; color: #fff; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button.is-disabled) { color: #98a2b3; }
+:global(.transport-create-popper.el-popper) { --el-color-primary: #2f7bff; border: 1px solid #d5dce8; box-shadow: none; }
 </style>

src/modules/cross-border/procurement.test.mjs

@@ -1,11 +1,14 @@
 import assert from 'node:assert/strict'
 import test from 'node:test'
 import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import { runInNewContext } from 'node:vm'
 import ts from 'typescript'
 import * as vue from 'vue'
 import { parse, compileScript } from 'vue/compiler-sfc'
 
+const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+
 let nextKey = 0
 const crypto = { randomUUID: () => `test-key-${++nextKey}` }
 function moduleFrom(source, require = () => { throw new Error('unexpected import') }) {
@@ -86,9 +89,36 @@ function viewHarness({ createPage = false, detailPage = false, api = {}, storage
   }
   runInNewContext(ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS } }).outputText, context)
   const state = context.exports.default.setup(props, { expose: () => {} })
+  state.formRef.value = {
+    validate: async () => { await new Schema(state.formRules).validate(state.form); return true },
+    clearValidate: () => {},
+  }
   return { state, props, route, auth, pushes, storage, dispose: () => dispose.forEach(callback => callback()) }
 }
 
+test('procurement required fields validate individually and blank submissions never call the API', async () => {
+  const calls = []
+  const harness = viewHarness({ createPage: true, api: { createProcurement: async payload => { calls.push(payload); return { order: { orderNo: 'PO-VALID' } } } } })
+  try {
+    const fields = ['procurementDirection', 'productName', 'purchaseQuantity', 'budgetUnitPrice', 'currency', 'contactName', 'contactPhone', 'receivingAddress']
+    const source = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')
+    for (const field of fields) {
+      assert.match(source, new RegExp(`<el-form-item[^>]*prop="${field}"`))
+      const schema = new Schema({ [field]: harness.state.formRules[field] })
+      await assert.rejects(schema.validate({ [field]: '' }), error => Boolean(error.fields[field]))
+    }
+    await assert.rejects(new Schema(harness.state.formRules).validate({ ...draft(), productName: '   ' }))
+    await harness.state.submit()
+    assert.equal(calls.length, 0)
+    assert.equal(harness.state.submitting.value, false)
+    assert.equal(harness.state.submitError.value, '')
+    Object.assign(harness.state.form, draft(), { budgetUnitPrice: '0' })
+    await harness.state.submit()
+    assert.equal(calls.length, 1)
+    assert.equal(calls[0].budgetUnitPrice, 0)
+  } finally { harness.dispose() }
+})
+
 test('create summary follows the current form, preserves cents and clears with the draft', () => {
   const harness = viewHarness({ createPage: true })
   try {
@@ -166,7 +196,7 @@ test('submission double-click sends once and definitive validation rejection per
   let reject, calls = 0
   const harness = viewHarness({ createPage: true, api: { createProcurement: () => { calls++; return new Promise((_, failure) => { reject = failure }) } } })
   try {
-    Object.assign(harness.state.form, draft()); const first = harness.state.submit(); await harness.state.submit(); assert.equal(calls, 1)
+    Object.assign(harness.state.form, draft()); const first = harness.state.submit(); await harness.state.submit(); await flush(); assert.equal(calls, 1)
     reject(new ApiError('invalid', 'A0422')); await first
     assert.equal(harness.state.submitting.value, false); assert.equal(harness.storage.size, 0)
   } finally { harness.dispose() }

src/modules/cross-border/views/ProcurementView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { ApiError } from '@/api/types'
 import { accessTokenIdentity } from '@/api/session'
 import { useAuthStore } from '@/modules/auth/public'
@@ -23,6 +23,17 @@ const canList = computed(() => auth.hasPermission('merchant:cross-border:procure
 const identity = computed(() => auth.token ? accessTokenIdentity(auth.token) : null)
 const companyName = computed(() => auth.profile.tenantName || (auth.user?.tenantName && !/^企业租户 \d+$/.test(auth.user.tenantName) ? auth.user.tenantName : ''))
 const form = reactive(emptyProcurementDraft())
+const formRef = ref<FormInstance>()
+const formRules: FormRules<typeof form> = {
+  procurementDirection: [{ required: true, message: '请选择采购方向', trigger: 'change' }],
+  productName: [{ required: true, whitespace: true, message: '请输入商品名称', trigger: 'blur' }],
+  purchaseQuantity: [{ required: true, whitespace: true, message: '请输入采购数量', trigger: 'blur' }],
+  budgetUnitPrice: [{ required: true, whitespace: true, message: '请输入预算单价', trigger: 'blur' }],
+  currency: [{ required: true, message: '请选择预算币种', trigger: 'change' }],
+  contactName: [{ required: true, whitespace: true, message: '请输入收件人姓名', trigger: 'blur' }],
+  contactPhone: [{ required: true, whitespace: true, message: '请输入联系电话', trigger: 'blur' }],
+  receivingAddress: [{ required: true, whitespace: true, message: '请输入完整收货地址', trigger: 'blur' }],
+}
 const summaryQuantity = computed(() => /^\d+$/.test(form.purchaseQuantity) && Number.isSafeInteger(Number(form.purchaseQuantity)) && Number(form.purchaseQuantity) > 0 ? String(Number(form.purchaseQuantity)) : '—')
 const summaryUnitPrice = computed(() => draftBudgetTotal({ ...form, purchaseQuantity: '1' }) ?? '—')
 const summaryCurrencyName = computed(() => form.currency === 'USD' ? '美元' : '人民币')
@@ -119,11 +130,13 @@ async function rejectReceived() {
 }
 function search() { if (query.page === 1) void loadList(); else query.page = 1 }
 function resetQuery() { const reload = query.page === 1; Object.assign(query, { page: 1, orderNo: '', purchaseCategory: '', productName: '', status: '' }); if (reload) void loadList() }
-function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()); createAttempt = null }
+function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()); formRef.value?.clearValidate(); createAttempt = null }
 async function submit() {
   if (submitting.value || !canCreate.value || !identity.value || submittedOrder.value) return
   const owner = identity.value; submitting.value = true; submitError.value = ''
   try {
+    if (!formRef.value || !await formRef.value.validate().catch(() => false)) return
+    if (!active || owner !== identity.value) return
     const payload = buildProcurementCreate(form, companyName.value, '')
     const fingerprint = JSON.stringify([owner, payload])
     if (createAttempt?.fingerprint !== fingerprint) createAttempt = { fingerprint, key: procurementRequestKey() }
@@ -200,18 +213,18 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
             <div class="procurement-summary-value">{{ form.currency }}<small>{{ summaryCurrencyName }}</small></div>
           </article>
         </section>
-        <el-form :model="form" label-position="top" :disabled="submitting" @submit.prevent="submit">
+        <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" :disabled="submitting" scroll-to-error @submit.prevent="submit">
           <section class="procurement-form-section" aria-labelledby="procurement-product-heading">
             <h3 id="procurement-product-heading"><span class="procurement-section-dot" aria-hidden="true" />商品与预算</h3>
             <div class="procurement-form-card">
-              <el-form-item class="procurement-direction" label="采购方向" for="procurement-direction" required><el-select id="procurement-direction" v-model="form.procurementDirection" popper-class="procurement-create-select"><el-option v-for="(label, value) in procurementDirections" :key="value" :label="label" :value="value" /></el-select></el-form-item>
+              <el-form-item class="procurement-direction" label="采购方向" for="procurement-direction" prop="procurementDirection" required><el-select id="procurement-direction" v-model="form.procurementDirection" popper-class="procurement-create-select"><el-option v-for="(label, value) in procurementDirections" :key="value" :label="label" :value="value" /></el-select></el-form-item>
               <div class="procurement-form-grid">
                 <el-form-item label="采购品类" for="procurement-category"><el-input id="procurement-category" v-model.trim="form.purchaseCategory" maxlength="128" placeholder="请输入品类" /></el-form-item>
-                <el-form-item label="商品名称" for="procurement-product" required><el-input id="procurement-product" v-model.trim="form.productName" maxlength="255" placeholder="请输入商品名称" /></el-form-item>
+                <el-form-item label="商品名称" for="procurement-product" prop="productName" required><el-input id="procurement-product" v-model.trim="form.productName" maxlength="255" placeholder="请输入商品名称" /></el-form-item>
                 <el-form-item label="商品规格" for="procurement-specification"><el-input id="procurement-specification" v-model.trim="form.productSpecification" maxlength="500" placeholder="规格、型号" /></el-form-item>
-                <el-form-item label="采购数量（件）" for="procurement-quantity" required><el-input id="procurement-quantity" v-model.trim="form.purchaseQuantity" inputmode="numeric" maxlength="18" placeholder="正整数" /></el-form-item>
+                <el-form-item label="采购数量（件）" for="procurement-quantity" prop="purchaseQuantity" required><el-input id="procurement-quantity" v-model.trim="form.purchaseQuantity" inputmode="numeric" maxlength="18" placeholder="正整数" /></el-form-item>
-                <el-form-item label="预算单价" for="procurement-price" required><el-input id="procurement-price" v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="请明确填写；免费样品填 0" /></el-form-item>
+                <el-form-item label="预算单价" for="procurement-price" prop="budgetUnitPrice" required><el-input id="procurement-price" v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="请明确填写；免费样品填 0" /></el-form-item>
-                <el-form-item label="预算币种" for="procurement-currency" required><el-select id="procurement-currency" v-model="form.currency" popper-class="procurement-create-select"><el-option label="美元 USD" value="USD" /><el-option label="人民币 CNY" value="CNY" /></el-select></el-form-item>
+                <el-form-item label="预算币种" for="procurement-currency" prop="currency" required><el-select id="procurement-currency" v-model="form.currency" popper-class="procurement-create-select"><el-option label="美元 USD" value="USD" /><el-option label="人民币 CNY" value="CNY" /></el-select></el-form-item>
                 <el-form-item class="full" label="商品链接" for="procurement-url"><el-input id="procurement-url" v-model.trim="form.productUrl" maxlength="2000" placeholder="https://..." /></el-form-item>
               </div>
               <div class="procurement-budget-total">货款预算总上限：{{ money(budgetTotal, form.currency) }}</div>
@@ -220,9 +233,9 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
           <section class="procurement-form-section" aria-labelledby="procurement-recipient-heading">
             <h3 id="procurement-recipient-heading"><span class="procurement-section-dot procurement-section-dot--recipient" aria-hidden="true" />{{ regionText('最终国内收件资料', form.procurementDirection) }}</h3>
             <div class="procurement-form-card procurement-form-grid">
-              <el-form-item label="收件人" for="procurement-contact" required><el-input id="procurement-contact" v-model.trim="form.contactName" maxlength="128" placeholder="实际收件人姓名" /></el-form-item>
+              <el-form-item label="收件人" for="procurement-contact" prop="contactName" required><el-input id="procurement-contact" v-model.trim="form.contactName" maxlength="128" placeholder="实际收件人姓名" /></el-form-item>
-              <el-form-item label="联系电话" for="procurement-phone" required><el-input id="procurement-phone" v-model.trim="form.contactPhone" maxlength="64" type="tel" placeholder="快递可联系的电话" /></el-form-item>
+              <el-form-item label="联系电话" for="procurement-phone" prop="contactPhone" required><el-input id="procurement-phone" v-model.trim="form.contactPhone" maxlength="64" type="tel" placeholder="快递可联系的电话" /></el-form-item>
-              <el-form-item class="full" :label="regionText('完整国内地址', form.procurementDirection)" for="procurement-address" required><el-input id="procurement-address" v-model.trim="form.receivingAddress" maxlength="1000" :placeholder="form.procurementDirection === 'DOMESTIC_TO_OVERSEAS' ? '国家、州/省、市、邮编及详细地址' : '省、市、区县、街道及详细门牌'" /></el-form-item>
+              <el-form-item class="full" :label="regionText('完整国内地址', form.procurementDirection)" for="procurement-address" prop="receivingAddress" required><el-input id="procurement-address" v-model.trim="form.receivingAddress" maxlength="1000" :placeholder="form.procurementDirection === 'DOMESTIC_TO_OVERSEAS' ? '国家、州/省、市、邮编及详细地址' : '省、市、区县、街道及详细门牌'" /></el-form-item>
               <el-form-item class="full" label="采购要求" for="procurement-requirements">
                 <el-input id="procurement-requirements" v-model="form.remark" type="textarea" :rows="4" maxlength="1000" resize="vertical" aria-describedby="procurement-requirements-count" />
                 <div id="procurement-requirements-count" class="procurement-character-count">{{ form.remark.length }} / 1000</div>
@@ -254,7 +267,7 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
   --client-font-size: 14px;
   --el-color-primary: #2f7bff;
   --el-text-color-regular: #1f2937;
-  --el-text-color-placeholder: #6b7280;
+  --el-text-color-placeholder: #b0b7c3;
   min-width: 0;
   color: #1f2937;
   font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
@@ -283,14 +296,16 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
 .procurement-create :deep(.el-form-item__label) { height: auto; margin-bottom: 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
 .procurement-create :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
 .procurement-create :deep(.el-form-item__content) { min-width: 0; line-height: 20px; }
+.procurement-create :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: auto; max-width: calc(100% - 120px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
 .procurement-create :deep(.procurement-direction) { width: calc((100% - 40px) / 3); margin-bottom: 12px; }
 .procurement-create :deep(.el-select) { width: 100%; }
 .procurement-create :deep(.el-input__wrapper), .procurement-create :deep(.el-select__wrapper), .procurement-create :deep(.el-textarea__inner) { border: 1px solid #d5dce8; border-radius: 6px; background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; }
 .procurement-create :deep(.el-input__wrapper), .procurement-create :deep(.el-select__wrapper) { min-height: 44px; padding: 10px 14px; }
 .procurement-create :deep(.el-input__inner) { height: 22px; color: #1f2937; line-height: 22px; }
 .procurement-create :deep(.el-textarea__inner) { min-height: 110px !important; padding: 11px 14px; color: #1f2937; line-height: 20px; }
-.procurement-create :deep(.el-input__inner::placeholder), .procurement-create :deep(.el-textarea__inner::placeholder) { color: #6b7280; }
+.procurement-create :deep(.el-input__inner::placeholder), .procurement-create :deep(.el-textarea__inner::placeholder) { color: var(--el-text-color-placeholder); opacity: 1; }
 .procurement-create :deep(.el-input__wrapper.is-focus), .procurement-create :deep(.el-select__wrapper.is-focused), .procurement-create :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.procurement-create :deep(.el-form-item.is-error .el-input__wrapper), .procurement-create :deep(.el-form-item.is-error .el-select__wrapper), .procurement-create :deep(.el-form-item.is-error .el-textarea__inner) { border-color: #e5484d; box-shadow: none; }
 .procurement-create :deep(.el-input.is-disabled .el-input__wrapper), .procurement-create :deep(.el-select__wrapper.is-disabled), .procurement-create :deep(.el-textarea.is-disabled .el-textarea__inner) { background: #f6f9ff; }
 .procurement-character-count { width: 100%; margin-top: 4px; color: #6b7280; font-size: 13px; text-align: right; }
 .procurement-budget-total { margin-top: 10px; color: #6b7280; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }