fix: 样式优化套餐分配生效条件选择

src/types/api/packageManagement.ts

@@ -102,7 +102,7 @@ export interface CommissionTierInfo {
 export type ExpiryBase = 'from_activation' | 'from_purchase'
 
 // 套餐分配生效条件覆盖值
-export type PackageAllocationExpiryBaseOverride = 'from_purchase' | 'from_realname'
+export type PackageAllocationExpiryBaseOverride = 'from_purchase' | 'from_activation'
 
 // 店铺套餐分配生效条件字段
 export interface PackageAllocationExpiryBaseFields {

src/views/package-management/series-grants/detail.vue

@@ -275,11 +275,15 @@
             </div>
           </ElFormItem>
           <ElFormItem label="生效条件">
-            <ElRadioGroup v-model="packageForm.expiry_base_override">
+            <ElSelect
-              <ElRadio value="default">跟随套餐默认</ElRadio>
+              v-model="packageForm.expiry_base_override"
-              <ElRadio value="from_purchase">购买即生效</ElRadio>
+              placeholder="请选择生效条件"
-              <ElRadio value="from_realname">实名即生效</ElRadio>
+              style="width: 100%"
-            </ElRadioGroup>
+            >
+              <ElOption label="跟随套餐默认" value="default" />
+              <ElOption label="购买即生效" value="from_purchase" />
+              <ElOption label="实名激活时生效" value="from_activation" />
+            </ElSelect>
             <div class="form-tip">仅影响后续新订单，不影响已购买套餐</div>
           </ElFormItem>
           <template v-if="packageDialogType === 'edit'">
@@ -329,8 +333,6 @@
     ElInputNumber,
     ElForm,
     ElFormItem,
-    ElRadioGroup,
-    ElRadio,
     FormInstance,
     FormRules
   } from 'element-plus'

src/views/package-management/series-grants/index.vue

@@ -146,7 +146,7 @@
                   </ElFormItem>
 
                   <!-- 套餐成本价 -->
-                  <ElFormItem label="套餐成本价" v-if="form.packages.length > 0">
+                  <ElFormItem label="套餐配置" v-if="form.packages.length > 0">
                     <div class="package-list">
                       <div
                         v-for="(pkg, index) in form.packages"
@@ -155,6 +155,7 @@
                       >
                         <span class="package-name">{{ getPackageName(pkg.package_id) }}</span>
                         <div class="cost-price-input-wrapper">
+                          <div class="package-field-label">套餐成本价（元）</div>
                           <ElInputNumber
                             v-model="pkg.cost_price"
                             :min="pkg.original_cost_price || 0"
@@ -171,11 +172,16 @@
                           </span>
                         </div>
                         <div class="expiry-base-input-wrapper">
-                          <ElRadioGroup v-model="pkg.expiry_base_override">
+                          <div class="expiry-base-label">生效条件</div>
-                            <ElRadio value="default">跟随套餐默认</ElRadio>
+                          <ElSelect
-                            <ElRadio value="from_purchase">购买即生效</ElRadio>
+                            v-model="pkg.expiry_base_override"
-                            <ElRadio value="from_realname">实名即生效</ElRadio>
+                            class="expiry-base-select"
-                          </ElRadioGroup>
+                            placeholder="请选择生效条件"
+                          >
+                            <ElOption label="跟随套餐默认" value="default" />
+                            <ElOption label="购买即生效" value="from_purchase" />
+                            <ElOption label="实名激活时生效" value="from_activation" />
+                          </ElSelect>
                         </div>
                         <ElButton type="danger" size="small" @click="removePackage(index)"
                           >删除</ElButton
@@ -567,7 +573,9 @@
     ElRow,
     ElCol,
     ElSteps,
-    ElStep
+    ElStep,
+    ElSelect,
+    ElOption
   } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
@@ -1927,9 +1935,10 @@
   }
 
   .package-item {
-    display: flex;
+    display: grid;
-    gap: 12px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
-    align-items: center;
+    gap: 16px;
+    align-items: start;
     padding: 8px;
     margin-bottom: 8px;
     background-color: var(--el-fill-color-light);
@@ -1944,20 +1953,98 @@
     }
 
     .package-name {
-      flex: 1;
+      grid-column: 1 / 3;
+      grid-row: 1;
+      min-width: 0;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--el-border-color-lighter);
       font-size: 14px;
       color: var(--el-text-color-regular);
     }
 
     .cost-price-input-wrapper {
+      grid-column: 1;
+      grid-row: 2;
       display: flex;
-      gap: 8px;
+      flex-direction: column;
-      align-items: center;
+      gap: 6px;
+      align-items: flex-start;
+      width: 100%;
+
+      :deep(.el-input-number) {
+        width: 100% !important;
+      }
+
+      .package-field-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--el-text-color-regular);
+      }
 
       .min-cost-hint {
         font-size: 12px;
         color: var(--el-text-color-secondary);
-        white-space: nowrap;
+        line-height: 1.4;
+      }
+    }
+
+    .expiry-base-input-wrapper {
+      grid-column: 2;
+      grid-row: 2;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+      width: 100%;
+      align-self: start;
+
+      .expiry-base-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--el-text-color-regular);
+      }
+
+      .expiry-base-select {
+        width: 100%;
+        max-width: none;
+      }
+    }
+
+    :deep(.el-button) {
+      grid-column: 3;
+      grid-row: 1;
+      align-self: start;
+      justify-self: end;
+      width: 56px;
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+  }
+
+  @media (width <= 1000px) {
+    .package-item {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
+    }
+  }
+
+  @media (width <= 640px) {
+    .package-item {
+      grid-template-columns: 1fr;
+
+      .expiry-base-input-wrapper {
+        grid-column: 1 / -1;
+        grid-row: 3;
+      }
+
+      .cost-price-input-wrapper {
+        grid-column: 1 / -1;
+        grid-row: 2;
+      }
+
+      :deep(.el-button) {
+        grid-column: 3;
+        grid-row: 1;
+        justify-self: start;
       }
     }
   }

src/views/package-management/series-grants/packages.vue

@@ -76,11 +76,11 @@
       <ElDialog
         v-model="packageDialogVisible"
         :title="packageDialogType === 'add' ? '添加套餐' : '编辑套餐'"
-        width="500px"
+        width="40%"
         :close-on-click-modal="false"
         @closed="handlePackageDialogClosed"
       >
-        <ElForm ref="packageFormRef" :model="packageForm" :rules="packageRules" label-width="100px">
+        <ElForm ref="packageFormRef" :model="packageForm" :rules="packageRules" label-width="140px">
           <ElFormItem label="选择套餐" prop="package_id" v-if="packageDialogType === 'add'">
             <ElSelect
               v-model="packageForm.package_id"
@@ -128,11 +128,15 @@
             </div>
           </ElFormItem>
           <ElFormItem label="生效条件">
-            <ElRadioGroup v-model="packageForm.expiry_base_override">
+            <ElSelect
-              <ElRadio value="default">跟随套餐默认</ElRadio>
+              v-model="packageForm.expiry_base_override"
-              <ElRadio value="from_purchase">购买即生效</ElRadio>
+              placeholder="请选择生效条件"
-              <ElRadio value="from_realname">实名即生效</ElRadio>
+              style="width: 100%"
-            </ElRadioGroup>
+            >
+              <ElOption label="跟随套餐默认" value="default" />
+              <ElOption label="购买即生效" value="from_purchase" />
+              <ElOption label="实名激活时生效" value="from_activation" />
+            </ElSelect>
             <div class="form-tip">仅影响后续新订单，不影响已购买套餐</div>
           </ElFormItem>
           <template v-if="packageDialogType === 'edit'">
@@ -176,8 +180,6 @@
     ElInputNumber,
     ElForm,
     ElFormItem,
-    ElRadioGroup,
-    ElRadio,
     ElMessage,
     FormInstance,
     FormRules