yoe-crm-web/src/views/customer/valid/edit.vue

<template>
  <el-drawer
    v-model="visible"
    size="90%"
    title="编辑客户"
    direction="rtl"
    @close="handleBack"
    destroy-on-close
    class="form-drawer custom-edit-drawer"
  >
    <template #header>
      <div class="drawer-header-custom">
        <div class="header-left">
           <el-button link icon="ArrowLeft" @click="handleBack">返回</el-button>
           <span class="header-divider">|</span>
           <span class="header-title">基本信息 / <span class="customer-no">客户编号：{{ form.customerNo }}</span></span>
        </div>
        <div class="header-ops">
          <el-button type="primary" icon="Check" @click="handleSubmit" class="submit-btn" :loading="submitting">提交</el-button>
        </div>
      </div>
    </template>

    <div class="add-customer-container" v-loading="loading">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="custom-form" label-position="right" label-suffix="：">
        <div class="form-title">基本信息</div>
        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="工商名称">
                <el-input :model-value="rawCustomerData.businessCustomerName || form.businessCustomerName || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="归属公司">
                <el-select :model-value="rawCustomerData.companyName || rawCustomerData.customerBusinessVo?.companyName || ''" class="w100" disabled>
                  <el-option :label="rawCustomerData.companyName || rawCustomerData.customerBusinessVo?.companyName || ''" :value="rawCustomerData.companyName || rawCustomerData.customerBusinessVo?.companyName || ''" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户来源" prop="customerSourceId">
                <el-select v-model="form.customerSourceId" placeholder="请选择" class="w100">
                  <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业类型" prop="enterpriseTypeId">
                <el-select v-model="form.enterpriseTypeId" placeholder="请选择" class="w100">
                  <el-option v-for="item in corpTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="客户等级">
                <el-select :model-value="rawCustomerData.customerLevelName || rawCustomerData.customerBusinessVo?.customerLevelName || ''" class="w100" disabled>
                  <el-option :label="rawCustomerData.customerLevelName || rawCustomerData.customerBusinessVo?.customerLevelName || ''" :value="rawCustomerData.customerLevelName || rawCustomerData.customerBusinessVo?.customerLevelName || ''" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业规模">
                <el-select :model-value="rawCustomerData.enterpriseScale || ''" class="w100" disabled>
                  <el-option :label="rawCustomerData.enterpriseScale || ''" :value="rawCustomerData.enterpriseScale || ''" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业邮箱">
                <el-input :model-value="rawCustomerData.email || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="办公电话">
                <el-input :model-value="rawCustomerData.landline || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行业">
                <el-select :model-value="rawCustomerData.industryName || ''" class="w100" disabled>
                  <el-option :label="rawCustomerData.industryName || ''" :value="rawCustomerData.industryName || ''" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="国家">
                <el-input :model-value="'中国'" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="省份">
                <el-input :model-value="rawCustomerData.regProvincialName || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-input :model-value="rawCustomerData.regCityName || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="办公地址">
                <el-input :model-value="rawCustomerData.address || rawCustomerData.customerBusinessVo?.address || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-title">工商信息</div>
        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="工商名称">
                <el-input :model-value="rawCustomerData.businessCustomerName || form.businessCustomerName || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="社会信用代码">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.socialCreditCode || rawCustomerData.customerBusinessInfoVo?.socialCreditCode || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法定代表人">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.legalPersonName || rawCustomerData.customerBusinessInfoVo?.legalPersonName || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册资本">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.registeredCapital || rawCustomerData.customerBusinessInfoVo?.registeredCapital || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="成立日期">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.establishmentDate || rawCustomerData.customerBusinessInfoVo?.establishmentDate || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="吊销日期">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.revocationDate || rawCustomerData.customerBusinessInfoVo?.revocationDate || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记状态">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.registrationStatusName || rawCustomerData.customerBusinessInfoVo?.registrationStatus || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="注册地址">
                <el-input :model-value="rawCustomerData.customerBusinessVo?.businessAddress || rawCustomerData.customerBusinessInfoVo?.businessAddress || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mt-20">
            <el-col :span="8">
              <el-form-item label="营业执照">
                <image-upload v-model="form.businessLicense" :limit="1" :is-show-tip="false" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="正面身份证">
                <image-upload v-model="form.legalPersonCardFront" :limit="1" :is-show-tip="false" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="反面身份证">
                <image-upload v-model="form.legalPersonCardBack" :limit="1" :is-show-tip="false" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="form-title">销售信息</div>
        <div class="form-section">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="合作状况">
                <el-select v-model="form.status" placeholder="请选择" class="w100" clearable>
                  <el-option v-for="item in cooperationOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开票类型">
                <el-input :model-value="rawCustomerData.sellInvoiceType || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属部门">
                <el-input :model-value="rawCustomerData.belongingDepartmentName || rawCustomerData.deptName || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="采购规模(万)">
                <el-input v-model="form.annualProcurementScale" placeholder="请输入采购规模" class="w100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售目标(万)">
                <el-input v-model="form.salesTarget" placeholder="请输入销售目标" class="w100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购方式">
                <el-select v-model="form.procurementMethod" placeholder="请选择" class="w100" clearable multiple>
                  <el-option v-for="item in purchaseWayOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="信用等级">
                <el-input :model-value="rawCustomerData.customerSalesInfoVo?.creditLevel || rawCustomerData.customerLevelName || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授信额度">
                <el-input :model-value="rawCustomerData.customerSalesInfoVo?.creditAmount || '0.00'" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应收账款">
                <el-input :model-value="rawCustomerData.customerSalesInfoVo?.accountsReceivable || ''" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="预收账款">
                <el-input :model-value="rawCustomerData.customerSalesInfoVo?.prepaidAmount || rawCustomerData.deptCredit || ''" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="剩余额度">
                <el-input :model-value="rawCustomerData.customerSalesInfoVo?.remainingQuota || '0.00'" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>

<script setup name="CustomerValidEdit">
import { ref, reactive, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { listCompanyOption, getCustomerInfo, updateCustomerInfo } from "@/api/customer/customerPool";
import { listIndustryCategory } from "@/api/customer/industryCategory";
import { listLevel } from "@/api/customer/customerLevel";
import { listComStaff } from "@/api/system/comStaff/index";
import { listCustomerTypeOption } from "@/api/customer/customerDict";
import { listEnterpriseScale } from "@/api/customer/enterpriseScale";
import { listProvinceWithCities } from "@/api/customer/addressArea";
import { deptTreeSelect } from "@/api/system/dept";

const proxy = getCurrentInstance().proxy;
const { K0001: sourceOptions, Q0001: corpTypeOptions, cooperation_status: cooperationOptions, X0001: purchaseWayOptions } = toRefs(reactive(proxy.useDict("K0001", "Q0001", "cooperation_status", "X0001")));
const route = useRoute();
const router = useRouter();

const formRef = ref(null);
const loading = ref(false);
const visible = ref(false);
const submitting = ref(false);
const rawCustomerData = ref({});
const form = reactive({
  id: undefined,
  customerNo: '',
  belongCompanyId: undefined,
  customerName: '',
  businessCustomerName: '',
  customerSourceId: undefined,
  enterpriseTypeId: undefined,
  enterpriseScaleId: undefined,
  customerTypeId: undefined,
  industryCategoryId: undefined,
  customerLevelId: undefined,
  landline: '',
  fax: '',
  url: '',
  postCode: '',
  email: '',
  regProvincialNo: '',
  regCityNo: '',
  regCountyNo: '',
  areaArray: [],
  provincialCityCounty: '',
  address: '',
  salesPersonId: undefined,
  serviceStaffId: undefined,
  belongingDepartmentId: undefined,
  idCardFront: '',
  idCardBack: '',
  customerBusinessBo: {
    businessCustomerName: '', socialCreditCode: '', legalPersonName: '',
    registeredCapital: '', establishmentDate: '', registrationStatus: '',
    registrationAuthority: '', paidInCapital: '', revocationDate: '',
    businessAddress: '', businessLicense: '', legalPersonCardUrl: ''
  },
  customerSalesInfoBo: { procurementScale: '', salesTarget: '' },
  status: undefined,
  procurementMethod: undefined
});

const rules = reactive({
  belongCompanyId: [{ required: true, message: "所属公司不能为空", trigger: "change" }],
  customerName: [
    { required: true, message: "客户名称不能为空", trigger: "blur" },
    { max: 100, message: "客户名称不能超过100个字符", trigger: "blur" }
  ],
  businessCustomerName: [
    { required: true, message: "工商名称不能为空", trigger: "blur" },
    { max: 100, message: "工商名称不能超过100个字符", trigger: "blur" }
  ],
  customerSourceId: [{ required: true, message: "客户来源不能为空", trigger: "change" }],
  enterpriseTypeId: [{ required: true, message: "企业类型不能为空", trigger: "change" }],
  enterpriseScaleId: [{ required: true, message: "企业规模不能为空", trigger: "change" }],
  customerTypeId: [{ required: true, message: "客户类别不能为空", trigger: "change" }],
  industryCategoryId: [{ required: true, message: "所属行业不能为空", trigger: "change" }],
  customerLevelId: [{ required: true, message: "客户等级不能为空", trigger: "change" }],
  landline: [
    { required: true, message: "固定电话不能为空", trigger: "blur" },
    { pattern: /^([0-9-]{7,20})$/, message: "请输入正确的电话号码", trigger: "blur" }
  ],
  fax: [
    { pattern: /^([0-9-]{7,20})$/, message: "请输入正确的传真号码", trigger: "blur" }
  ],
  url: [
    { pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/, message: "请输入正确的网址", trigger: "blur" }
  ],
  postCode: [
    { pattern: /^\d{6}$/, message: "请输入正确的6位邮政编码", trigger: "blur" }
  ],
  email: [
    { pattern: /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/, message: "请输入正确的邮箱地址", trigger: "blur" }
  ],
  areaArray: [{ required: true, message: "详细地区不能为空", trigger: "change", type: 'array' }],
  'customerBusinessBo.businessCustomerName': [{ max: 100, message: "企业工商名称不能超过100个字符", trigger: "blur" }],
  'customerBusinessBo.socialCreditCode': [
    { pattern: /^[A-Za-z0-9]{18}$/, message: "请输入正确的18位统一社会信用代码", trigger: "blur" }
  ],
  'customerBusinessBo.legalPersonName': [{ max: 50, message: "法人姓名不能超过50个字符", trigger: "blur" }],
  'customerBusinessBo.registeredCapital': [{ max: 50, message: "注册资本不能超过50个字符", trigger: "blur" }],
  'customerBusinessBo.registrationAuthority': [{ max: 100, message: "登记机关不能超过100个字符", trigger: "blur" }],
  'customerBusinessBo.registrationStatus': [{ max: 50, message: "登记状态不能超过50个字符", trigger: "blur" }],
  'customerBusinessBo.paidInCapital': [{ max: 50, message: "实缴资本不能超过50个字符", trigger: "blur" }],
  'customerBusinessBo.businessAddress': [{ max: 200, message: "详细地址不能超过200个字符", trigger: "blur" }]
});

const companyOptions = ref([]);
const industryOptions = ref([]);
const levelOptions = ref([]);
const staffOptions = ref([]);
const scaleOptions = ref([]);
const categoryOptions = ref([]);
const areaOptions = ref([]);
const deptOptions = ref([]);

const initOptions = async () => {
  listCompanyOption().then(res => companyOptions.value = res.data || []).catch(e => console.error("公司选项接口404或出错", e));
  listIndustryCategory().then(res => industryOptions.value = res.data || res.rows || []).catch(e => console.error("行业类别接口404或出错", e));
  listLevel().then(res => levelOptions.value = res.rows || []).catch(e => console.error("客户等级接口404或出错", e));
  listComStaff({ pageSize: 1000 }).then(res => staffOptions.value = res.rows || res.data || []).catch(e => console.error("员工选项接口404或出错", e));
  listEnterpriseScale().then(res => scaleOptions.value = res.data || res.rows || []).catch(e => console.error("企业规模接口404或出错", e));
  listCustomerTypeOption().then(res => {
    categoryOptions.value = res.data || res.rows || [];
  }).catch(e => {
    console.error("客户类别接口加载失败:", e);
  });
  listProvinceWithCities().then(res => {
    const list = res.rows || [];
    areaOptions.value = handleTree(list, "id", "parentId");
  }).catch(e => console.error("省市联动接口出错", e));
  deptTreeSelect().then(res => {
    const data = res.data || res.rows || [];
    deptOptions.value = proxy.handleTree(data, "deptId");
  }).catch(e => console.error("部门树接口404或出错", e));
};

const loadData = (id) => {
  loading.value = true;
  getCustomerInfo(id).then(res => {
    const data = res.data;
    if (!data) return;
    rawCustomerData.value = data;
    Object.assign(form, data);
    
    const biz = data.customerBusinessVo || data.customerBusinessInfoVo || {};
    form.customerBusinessBo = {
      customerId: data.id,
      businessCustomerName: biz.businessCustomerName || data.businessCustomerName,
      socialCreditCode: biz.socialCreditCode,
      legalPersonName: biz.legalPersonName,
      registeredCapital: biz.registeredCapital,
      registrationAuthority: biz.registrationAuthority,
      establishmentDate: biz.establishmentDate,
      revocationDate: biz.revocationDate,
      registrationStatus: biz.registrationStatus,
      paidInCapital: biz.paidInCapital,
      businessAddress: biz.businessAddress || data.address,
      businessLicense: biz.businessLicense,
      legalPersonCardUrl: biz.legalPersonCardUrl
    };

    const sales = data.customerSalesInfoVo || data.customerSalesVo || {};
    form.customerSalesInfoBo = {
      id: sales.id,
      customerId: data.id,
      procurementScale: sales.procurementScale || data.annualProcurementScale,
      salesTarget: sales.salesTarget || data.salesTarget,
      creditLevel: sales.creditLevel,
      creditAmount: sales.creditAmount,
      accountsReceivable: sales.accountsReceivable,
      prepaidAmount: sales.prepaidAmount || data.deptCredit,
      remainingQuota: sales.remainingQuota
    };
    
    form.status = data.status || data.cooperationStatus;
    form.procurementMethod = data.procurementMethod;

    // 解析身份证回显
    const cardUrls = biz.legalPersonCardUrl ? biz.legalPersonCardUrl.split(',') : [];
    form.idCardFront = cardUrls[0] || '';
    form.idCardBack = cardUrls[1] || '';

    // 显式处理字典项回显和类型转换
    const sourceVal = data.customerSourceId || sales.customerSource || sales.customerSourceId;
    form.customerSourceId = sourceVal ? String(sourceVal).split(',')[0] : undefined;
    
    const typeVal = data.enterpriseTypeId || data.enterpriseType;
    form.enterpriseTypeId = typeVal ? String(typeVal) : undefined;

    const scaleVal = data.enterpriseScaleId || data.enterpriseScale || data.scaleId;
    form.enterpriseScaleId = scaleVal ? String(scaleVal) : undefined;

    form.customerTypeId = data.customerTypeId ? String(data.customerTypeId) : undefined;

    const industryVal = data.industryCategoryId || data.industryId;
    form.industryCategoryId = industryVal ? Number(industryVal) : undefined;

    const levelVal = data.customerLevelId || data.levelId || data.customerLevel;
    form.customerLevelId = levelVal ? String(levelVal) : undefined;
    
    // 地区回显处理
    if (data.regProvincialNo && data.regCityNo && data.regCountyNo) {
      form.areaArray = [Number(data.regProvincialNo), Number(data.regCityNo), Number(data.regCountyNo)];
    } else {
      form.areaArray = [];
    }

    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

const handleAreaChange = (val) => {
  if (val && val.length === 3) {
    form.regProvincialNo = val[0];
    form.regCityNo = val[1];
    form.regCountyNo = val[2];
    // 同步到 provincialCityCounty 以防后端其他地方用到
    form.provincialCityCounty = val.join(',');
  } else {
    form.regProvincialNo = '';
    form.regCityNo = '';
    form.regCountyNo = '';
    form.provincialCityCounty = '';
  }
};

const handleBack = () => { 
  visible.value = false;
  setTimeout(() => {
    router.push('/customer/valid');
  }, 300);
};

const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      submitting.value = true;
      // 提交前合并身份证地址
      const cards = [];
      if (form.idCardFront) cards.push(form.idCardFront);
      if (form.idCardBack) cards.push(form.idCardBack);
      form.customerBusinessBo.legalPersonCardUrl = cards.join(',');

      updateCustomerInfo(form).then(() => {
        proxy.$modal.msgSuccess("修改成功");
        handleBack();
      }).finally(() => {
        submitting.value = false;
      });
    }
  });
};

const open = (id) => {
  visible.value = true;
  loadData(id);
};

onMounted(() => {
  initOptions();
  const id = route.query.id;
  if (id) {
    loadData(id);
  }
});

defineExpose({ open });

/** 构造树型结构数据 */
function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let pId = d[config.parentId];
    if (childrenListMap[pId] == null) {
      childrenListMap[pId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[pId].push(d);
  }

  for (let d of data) {
    let pId = d[config.parentId];
    if (nodeIds[pId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}
</script>

<style lang="scss">
.el-overlay {
  .custom-edit-drawer {
    width: 90% !important;
    .el-drawer__header { margin-bottom: 0; padding: 0; }
    .el-drawer__body { padding: 24px; }

    .el-form-item__label {
      font-size: 13px;
      color: #606266;
      font-weight: normal !important;
      white-space: nowrap !important;
      overflow: visible !important;
      display: inline-block !important;
    }

    .form-title {
      font-weight: normal !important;
    }

    /* 隐藏上传组件提示语 */
    .el-upload__tip {
      display: none !important;
    }
  }
}

.drawer-header-custom {
  height: 64px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px; border-bottom: 1px solid #f1f5f9; background-color: #fff; width: 100%;
  .header-left {
    display: flex; align-items: center; gap: 12px;
    .header-divider { color: #e2e8f0; }
  }
  .header-title { font-size: 14px; color: #1e293b; }
}

.form-title { 
  font-size: 13px; 
  color: #64748b; 
  margin: 32px 0 16px; 
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.form-section { 
  padding: 8px 0; 
}

/* 统一输入组件宽度 */
.custom-form {
  .el-input, .el-select, .el-date-editor, .el-cascader, .el-tree-select {
    width: 100% !important;
  }
}
.upload-item { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}
.w100 { width: 100%; }
.static-text { color: #333; font-size: 14px; }
</style>