fix Bug or esLink formatting

src/views/form/basicForm/index.vue

@@ -9,35 +9,35 @@
       <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
         <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
           <n-form
-              :label-width="80"
-              :model="formValue"
-              :rules="rules"
-              label-placement="left"
-              ref="formRef"
-              class="py-8"
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+            label-placement="left"
+            ref="formRef"
+            class="py-8"
           >
             <n-form-item label="预约姓名1" path="name">
-              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
+              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
             </n-form-item>
             <n-form-item label="预约号码" path="mobile">
-              <n-input placeholder="电话号码" v-model:value="formValue.mobile"/>
+              <n-input placeholder="电话号码" v-model:value="formValue.mobile" />
             </n-form-item>
             <n-form-item label="预约时间" path="datetime">
-              <n-date-picker type="datetime" v-model:value="formValue.datetime"/>
+              <n-date-picker type="datetime" v-model:value="formValue.datetime" />
             </n-form-item>
             <n-form-item label="预约医生" path="doctor">
               <n-select
-                  placeholder="请选择预约医生"
-                  :options="doctorList"
-                  v-model:value="formValue.doctor"
+                placeholder="请选择预约医生"
+                :options="doctorList"
+                v-model:value="formValue.doctor"
               />
             </n-form-item>
             <n-form-item label="预约事项" path="matter">
               <n-select
-                  placeholder="请选择预约事项"
-                  :options="matterList"
-                  v-model:value="formValue.matter"
-                  multiple
+                placeholder="请选择预约事项"
+                :options="matterList"
+                v-model:value="formValue.matter"
+                multiple
               />
             </n-form-item>
             <n-form-item label="性别" path="sex">
@@ -50,24 +50,25 @@
             </n-form-item>
             <n-form-item label="预约备注" path="remark">
               <n-input
-                  v-model:value="formValue.remark"
-                  type="textarea"
-                  placeholder="请输入预约备注"
+                v-model:value="formValue.remark"
+                type="textarea"
+                placeholder="请输入预约备注"
               />
             </n-form-item>
             <n-form-item label="图片" path="img">
               <BasicUpload
-                  :action="`${uploadUrl}/v1.0/files`"
-                  :headers="uploadHeaders"
-                  :data="{ type: 0 }"
-                  name="files"
-                  :width="100"
-                  :height="100"
-                  @uploadChange="uploadChange"
-                  v-model:value="uploadList"
-                  helpText="单个文件不超过20MB，最多只能上传10个文件"/>
+                :action="`${uploadUrl}/v1.0/files`"
+                :headers="uploadHeaders"
+                :data="{ type: 0 }"
+                name="files"
+                :width="100"
+                :height="100"
+                @uploadChange="uploadChange"
+                v-model:value="uploadList"
+                helpText="单个文件不超过20MB，最多只能上传10个文件"
+              />
             </n-form-item>
-            <div style="margin-left:80px">
+            <div style="margin-left: 80px">
               <n-space>
                 <n-button type="primary" @click="formSubmit">提交预约</n-button>
                 <n-button @click="resetForm">重置</n-button>
@@ -81,133 +82,133 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRefs, } from 'vue'
-import { useMessage } from 'naive-ui'
-import { BasicUpload } from '@/components/Upload'
-import { useGlobSetting } from '@/hooks/setting'
+  import { defineComponent, ref, reactive, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { BasicUpload } from '@/components/Upload';
+  import { useGlobSetting } from '@/hooks/setting';
 
-const globSetting = useGlobSetting()
+  const globSetting = useGlobSetting();
 
-const matterList = [
-  {
-    label: '种牙',
-    value: 1
-  },
-  {
-    label: '补牙',
-    value: 2
-  },
-  {
-    label: '根管',
-    value: 3
-  }
-]
+  const matterList = [
+    {
+      label: '种牙',
+      value: 1,
+    },
+    {
+      label: '补牙',
+      value: 2,
+    },
+    {
+      label: '根管',
+      value: 3,
+    },
+  ];
 
-const doctorList = [
-  {
-    label: '李医生',
-    value: 1
-  },
-  {
-    label: '黄医生',
-    value: 2
-  },
-  {
-    label: '张医生',
-    value: 3
-  }
-]
+  const doctorList = [
+    {
+      label: '李医生',
+      value: 1,
+    },
+    {
+      label: '黄医生',
+      value: 2,
+    },
+    {
+      label: '张医生',
+      value: 3,
+    },
+  ];
 
-const rules = {
-  name: {
-    required: true,
-    message: '请输入预约姓名',
-    trigger: 'blur'
-  },
-  remark: {
-    required: true,
-    message: '请输入预约备注',
-    trigger: 'blur'
-  },
-  mobile: {
-    required: true,
-    message: '请输入预约电话号码',
-    trigger: ['input']
-  },
-  datetime: {
-    required: true,
-    type: 'number',
-    message: '请选择预约时间',
-    trigger: ['blur', 'change'],
-  },
-  doctor: {
-    required: true,
-    type: 'number',
-    message: '请选择预约医生',
-    trigger: 'change'
-  },
-}
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入预约姓名',
+      trigger: 'blur',
+    },
+    remark: {
+      required: true,
+      message: '请输入预约备注',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入预约电话号码',
+      trigger: ['input'],
+    },
+    datetime: {
+      required: true,
+      type: 'number',
+      message: '请选择预约时间',
+      trigger: ['blur', 'change'],
+    },
+    doctor: {
+      required: true,
+      type: 'number',
+      message: '请选择预约医生',
+      trigger: 'change',
+    },
+  };
 
-export default defineComponent({
-  components: { BasicUpload },
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
-    const { uploadUrl } = globSetting
+  export default defineComponent({
+    components: { BasicUpload },
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+      const { uploadUrl } = globSetting;
 
-    const defaultValueRef = () => ({
-      name: '',
-      mobile: '',
-      remark: '',
-      sex: 1,
-      matter: null,
-      doctor: null,
-      datetime: [],
-    })
+      const defaultValueRef = () => ({
+        name: '',
+        mobile: '',
+        remark: '',
+        sex: 1,
+        matter: null,
+        doctor: null,
+        datetime: [],
+      });
 
-    const state = reactive({
-      formValue: defaultValueRef(),
-      //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-      uploadList: [
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      ],
-      uploadHeaders: {
-        platform: "miniPrograms",
-        timestamp: new Date().getTime(),
-        token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+      const state = reactive({
+        formValue: defaultValueRef(),
+        //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
+        uploadList: [
+          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        ],
+        uploadHeaders: {
+          platform: 'miniPrograms',
+          timestamp: new Date().getTime(),
+          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+        },
+      });
+
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
       }
-    })
 
-    function formSubmit() {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
+      function resetForm() {
+        formRef.value.restoreValidation();
+        state.formValue = Object.assign(state.formValue, defaultValueRef());
+      }
 
-    function resetForm() {
-      formRef.value.restoreValidation()
-      state.formValue = Object.assign(state.formValue, defaultValueRef())
-    }
+      function uploadChange(list: string[]) {
+        console.log(list);
+      }
 
-    function uploadChange(list: string[]) {
-      console.log(list)
-    }
-
-    return {
-      ...toRefs(state),
-      formRef,
-      uploadUrl,
-      rules,
-      doctorList,
-      matterList,
-      formSubmit,
-      resetForm,
-      uploadChange
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        formRef,
+        uploadUrl,
+        rules,
+        doctorList,
+        matterList,
+        formSubmit,
+        resetForm,
+        uploadChange,
+      };
+    },
+  });
 </script>

src/views/form/detail/index.vue

@@ -5,7 +5,13 @@
         表单除了提交数据，有时也用于显示只读信息。
       </n-card>
     </div>
-    <n-card :bordered="false" title="基本信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+    <n-card
+      :bordered="false"
+      title="基本信息"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
       <n-descriptions label-placement="left" class="py-2">
         <n-descriptions-item>
           <template #label>收款人姓名</template>
@@ -20,7 +26,13 @@
         </n-descriptions-item>
       </n-descriptions>
     </n-card>
-    <n-card :bordered="false" title="其它信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+    <n-card
+      :bordered="false"
+      title="其它信息"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
       <n-descriptions label-placement="left" class="py-2">
         <n-descriptions-item>
           <template #label>城市</template>
@@ -35,66 +47,72 @@
         </n-descriptions-item>
       </n-descriptions>
     </n-card>
-    <n-card :bordered="false" title="表格信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+    <n-card
+      :bordered="false"
+      title="表格信息"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
       <n-table :bordered="false" :single-line="false">
         <thead>
-        <tr>
-          <th>姓名</th>
-          <th>性别</th>
-          <th>城市</th>
-          <th>生日</th>
-          <th width="150">操作</th>
-        </tr>
+          <tr>
+            <th>姓名</th>
+            <th>性别</th>
+            <th>城市</th>
+            <th>生日</th>
+            <th width="150">操作</th>
+          </tr>
         </thead>
         <tbody>
-        <tr>
-          <td>Ah jung</td>
-          <td>男</td>
-          <td>深圳</td>
-          <td>1993-11-09</td>
-          <td>
-            <n-space>
-              <n-button size="small" type="error">删除</n-button>
-              <n-button size="small" type="info">查看</n-button>
-            </n-space>
-          </td>
-        </tr>
-        <tr>
-          <td>西门飞雪</td>
-          <td>男</td>
-          <td>广州</td>
-          <td>1991-09-11</td>
-          <td>
-            <n-space>
-              <n-button size="small" type="error">删除</n-button>
-              <n-button size="small" type="info">查看</n-button>
-            </n-space>
-          </td>
-        </tr>
-        <tr>
-          <td>泰坦巨人</td>
-          <td>男</td>
-          <td>北京</td>
-          <td>1990-11-03</td>
-          <td>
-            <n-space>
-              <n-button size="small" type="error">删除</n-button>
-              <n-button size="small" type="info">查看</n-button>
-            </n-space>
-          </td>
-        </tr>
-        <tr>
-          <td>猎魔人</td>
-          <td>女</td>
-          <td>上海</td>
-          <td>1992-03-11</td>
-          <td>
-            <n-space>
-              <n-button size="small" type="error">删除</n-button>
-              <n-button size="small" type="info">查看</n-button>
-            </n-space>
-          </td>
-        </tr>
+          <tr>
+            <td>Ah jung</td>
+            <td>男</td>
+            <td>深圳</td>
+            <td>1993-11-09</td>
+            <td>
+              <n-space>
+                <n-button size="small" type="error">删除</n-button>
+                <n-button size="small" type="info">查看</n-button>
+              </n-space>
+            </td>
+          </tr>
+          <tr>
+            <td>西门飞雪</td>
+            <td>男</td>
+            <td>广州</td>
+            <td>1991-09-11</td>
+            <td>
+              <n-space>
+                <n-button size="small" type="error">删除</n-button>
+                <n-button size="small" type="info">查看</n-button>
+              </n-space>
+            </td>
+          </tr>
+          <tr>
+            <td>泰坦巨人</td>
+            <td>男</td>
+            <td>北京</td>
+            <td>1990-11-03</td>
+            <td>
+              <n-space>
+                <n-button size="small" type="error">删除</n-button>
+                <n-button size="small" type="info">查看</n-button>
+              </n-space>
+            </td>
+          </tr>
+          <tr>
+            <td>猎魔人</td>
+            <td>女</td>
+            <td>上海</td>
+            <td>1992-03-11</td>
+            <td>
+              <n-space>
+                <n-button size="small" type="error">删除</n-button>
+                <n-button size="small" type="info">查看</n-button>
+              </n-space>
+            </td>
+          </tr>
         </tbody>
       </n-table>
     </n-card>
@@ -102,15 +120,13 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  setup() {
-    return {}
-  }
-})
+  export default defineComponent({
+    setup() {
+      return {};
+    },
+  });
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/form/stepForm/Step1.vue

@@ -1,34 +1,36 @@
 <template>
   <n-form
-      :label-width="90"
-      :model="formValue"
-      :rules="rules"
-      label-placement="left"
-      ref="form1Ref"
-      style="max-width: 500px; margin: 40px auto 0;"
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form1Ref"
+    style="max-width: 500px; margin: 40px auto 0"
   >
     <n-form-item label="付款账户" path="myAccount">
       <n-select
-          placeholder="请选择付款账户"
-          :options="myAccountList"
-          v-model:value="formValue.myAccount"
+        placeholder="请选择付款账户"
+        :options="myAccountList"
+        v-model:value="formValue.myAccount"
       />
     </n-form-item>
     <n-form-item label="收款账户" path="account">
       <n-input-group>
         <n-select
-            placeholder="请选择"
-            :options="accountTypeList"
-            :style="{ width: '20%' }"
-            v-model:value="formValue.accountType"
+          placeholder="请选择"
+          :options="accountTypeList"
+          :style="{ width: '20%' }"
+          v-model:value="formValue.accountType"
+        />
+        <n-input
+          placeholder="请输入收款账户"
+          :style="{ width: '80%' }"
+          v-model:value="formValue.account"
         />
-        <n-input placeholder="请输入收款账户" :style="{ width: '80%' }" v-model:value="formValue.account"/>
       </n-input-group>
-
-
     </n-form-item>
     <n-form-item label="收款人姓名" path="name">
-      <n-input placeholder="请输入收款人姓名" v-model:value="formValue.name"/>
+      <n-input placeholder="请输入收款人姓名" v-model:value="formValue.name" />
     </n-form-item>
     <n-form-item label="转账金额" path="money">
       <n-input placeholder="请输入转账金额" v-model:value="formValue.money">
@@ -37,7 +39,7 @@
         </template>
       </n-input>
     </n-form-item>
-    <div style="margin-left:80px">
+    <div style="margin-left: 80px">
       <n-space>
         <n-button type="primary" @click="formSubmit">下一步</n-button>
       </n-space>
@@ -46,86 +48,86 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
-import { useMessage } from 'naive-ui'
+  import { defineComponent, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
 
-const myAccountList = [
-  {
-    label: 'NaiveUiAdmin@163.com',
-    value: 1
-  },
-  {
-    label: 'NaiveUiAdmin@qq.com',
-    value: 2
-  },
-]
+  const myAccountList = [
+    {
+      label: 'NaiveUiAdmin@163.com',
+      value: 1,
+    },
+    {
+      label: 'NaiveUiAdmin@qq.com',
+      value: 2,
+    },
+  ];
 
-const accountTypeList = [
-  {
-    label: '微信',
-    value: 1
-  },
-  {
-    label: '支付宝',
-    value: 2
-  },
-]
+  const accountTypeList = [
+    {
+      label: '微信',
+      value: 1,
+    },
+    {
+      label: '支付宝',
+      value: 2,
+    },
+  ];
 
-export default defineComponent({
-  emits: ['nextStep'],
-  setup(_, { emit }) {
-    const form1Ref: any = ref(null)
-    const message = useMessage()
-    const current = ref(1)
+  export default defineComponent({
+    emits: ['nextStep'],
+    setup(_, { emit }) {
+      const form1Ref: any = ref(null);
+      const message = useMessage();
+      const current = ref(1);
 
-    return {
-      form1Ref,
-      current,
-      formValue: ref({
-        accountType: 1,
-        myAccount: null,
-        account: 'xioama@qq.com',
-        money: "1980",
-        name: 'Ah jung',
-      }),
-      rules: {
-        name: {
-          required: true,
-          message: '请输入收款人姓名',
-          trigger: 'blur'
+      return {
+        form1Ref,
+        current,
+        formValue: ref({
+          accountType: 1,
+          myAccount: null,
+          account: 'xioama@qq.com',
+          money: '1980',
+          name: 'Ah jung',
+        }),
+        rules: {
+          name: {
+            required: true,
+            message: '请输入收款人姓名',
+            trigger: 'blur',
+          },
+          account: {
+            required: true,
+            message: '请输入收款账户',
+            trigger: 'blur',
+          },
+          money: {
+            required: true,
+            message: '请输入转账金额',
+            trigger: 'blur',
+          },
+          myAccount: {
+            required: true,
+            type: 'number',
+            message: '请选择付款账户',
+            trigger: 'change',
+          },
         },
-        account: {
-          required: true,
-          message: '请输入收款账户',
-          trigger: 'blur'
+        myAccountList,
+        accountTypeList,
+        formSubmit() {
+          form1Ref.value.validate((errors) => {
+            if (!errors) {
+              emit('nextStep');
+            } else {
+              message.error('验证失败，请填写完整信息');
+            }
+          });
         },
-        money: {
-          required: true,
-          message: '请输入转账金额',
-          trigger: 'blur'
+        resetForm() {
+          form1Ref.value.restoreValidation();
         },
-        myAccount: {
-          required: true,
-          type: 'number',
-          message: '请选择付款账户',
-          trigger: 'change'
-        },
-      },
-      myAccountList,
-      accountTypeList,
-      formSubmit() {
-        form1Ref.value.validate((errors) => {
-          if (!errors) {
-            emit('nextStep')
-          } else {
-            message.error('验证失败，请填写完整信息')
-          }
-        })
-      },
-      resetForm() {
-        form1Ref.value.restoreValidation()
-      }
-    }
-  }
-})
+      };
+    },
+  });
 </script>

src/views/form/stepForm/Step2.vue

@@ -1,11 +1,11 @@
 <template>
   <n-form
-      :label-width="90"
-      :model="formValue"
-      :rules="rules"
-      label-placement="left"
-      ref="form2Ref"
-      style="max-width: 500px; margin: 40px auto 0;"
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form2Ref"
+    style="max-width: 500px; margin: 40px auto 0"
   >
     <n-form-item label="付款账户" path="myAccount">
       <span>NaiveUiAdmin@163.com</span>
@@ -19,11 +19,11 @@
     <n-form-item label="转账金额" path="money">
       <span>￥1980</span>
     </n-form-item>
-    <n-divider/>
+    <n-divider />
     <n-form-item label="支付密码" path="password">
-      <n-input type="password" v-model:value="formValue.password"/>
+      <n-input type="password" v-model:value="formValue.password" />
     </n-form-item>
-    <div style="margin-left:80px">
+    <div style="margin-left: 80px">
       <n-space>
         <n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
         <n-button @click="prevStep">上一步</n-button>
@@ -33,49 +33,49 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
-import { useMessage } from 'naive-ui'
+  import { defineComponent, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
 
-export default defineComponent({
-  emits: ['prevStep', 'nextStep'],
-  setup(_, { emit }) {
-    const form2Ref: any = ref(null)
-    const message = useMessage()
-    const loading = ref(false)
+  export default defineComponent({
+    emits: ['prevStep', 'nextStep'],
+    setup(_, { emit }) {
+      const form2Ref: any = ref(null);
+      const message = useMessage();
+      const loading = ref(false);
 
-    function prevStep() {
-      emit('prevStep')
-    }
+      function prevStep() {
+        emit('prevStep');
+      }
 
-    function formSubmit() {
-      loading.value = true
-      form2Ref.value.validate((errors) => {
-        if (!errors) {
-          setTimeout(() => {
-            emit('nextStep')
-          }, 1500)
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
+      function formSubmit() {
+        loading.value = true;
+        form2Ref.value.validate((errors) => {
+          if (!errors) {
+            setTimeout(() => {
+              emit('nextStep');
+            }, 1500);
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
+      }
 
-    return {
-      form2Ref,
-      loading,
-      formValue: ref({
-        password: '086611'
-      }),
-      rules: {
-        password: {
-          required: true,
-          message: '请输入支付密码',
-          trigger: 'blur'
+      return {
+        form2Ref,
+        loading,
+        formValue: ref({
+          password: '086611',
+        }),
+        rules: {
+          password: {
+            required: true,
+            message: '请输入支付密码',
+            trigger: 'blur',
+          },
         },
-      },
-      prevStep,
-      formSubmit,
-    }
-  }
-})
+        prevStep,
+        formSubmit,
+      };
+    },
+  });
 </script>

src/views/form/stepForm/Step3.vue

@@ -32,58 +32,58 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useRouter } from 'vue-router'
+  import { defineComponent } from 'vue';
+  import { useRouter } from 'vue-router';
 
-export default defineComponent({
-  emits: ['finish', 'prevStep'],
-  setup(_, { emit }) {
-    const router = useRouter()
+  export default defineComponent({
+    emits: ['finish', 'prevStep'],
+    setup(_, { emit }) {
+      const router = useRouter();
 
-    function prevStep() {
-      emit('prevStep')
-    }
+      function prevStep() {
+        emit('prevStep');
+      }
 
-    function finish() {
-      emit('finish')
-    }
+      function finish() {
+        emit('finish');
+      }
 
-    function toOrderList() {
-      router.push('/form/step-form')
-    }
+      function toOrderList() {
+        router.push('/form/step-form');
+      }
 
-    return {
-      prevStep,
-      finish,
-      toOrderList
-    }
-  }
-})
+      return {
+        prevStep,
+        finish,
+        toOrderList,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.step-result {
-  max-width: 560px;
-  margin: 40px auto 0;
+  .step-result {
+    max-width: 560px;
+    margin: 40px auto 0;
 
-  ::v-deep(.n-result-content) {
-    background-color: #fafafa;
-    padding: 24px 40px;
-  }
+    ::v-deep(.n-result-content) {
+      background-color: #fafafa;
+      padding: 24px 40px;
+    }
 
-  .information {
-    line-height: 22px;
+    .information {
+      line-height: 22px;
 
-    .ant-row:not(:last-child) {
-      margin-bottom: 24px;
+      .ant-row:not(:last-child) {
+        margin-bottom: 24px;
+      }
+    }
+
+    .money {
+      font-family: 'Helvetica Neue', sans-serif;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 14px;
     }
   }
-
-  .money {
-    font-family: "Helvetica Neue", sans-serif;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 14px;
-  }
-}
 </style>

src/views/form/stepForm/stepForm.vue

@@ -8,69 +8,60 @@
     <n-card :bordered="false" class="proCard mt-4">
       <n-space vertical class="steps">
         <n-steps :current="currentTab" :status="currentStatus">
-          <n-step
-              title="填写转账信息"
-              description="确保填写正确"
-          />
-          <n-step
-              title="确认转账信息"
-              description="确认转账信息"
-          />
-          <n-step
-              title="完成"
-              description="恭喜您，转账成功"
-          />
+          <n-step title="填写转账信息" description="确保填写正确" />
+          <n-step title="确认转账信息" description="确认转账信息" />
+          <n-step title="完成" description="恭喜您，转账成功" />
         </n-steps>
-        <step1 v-if="currentTab === 1" @nextStep="nextStep"/>
-        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
-        <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
+        <step1 v-if="currentTab === 1" @nextStep="nextStep" />
+        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" />
+        <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish" />
       </n-space>
     </n-card>
   </div>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
-import step1 from './Step1.vue'
-import step2 from './Step2.vue'
-import step3 from './Step3.vue'
+  import { defineComponent, ref } from 'vue';
+  import step1 from './Step1.vue';
+  import step2 from './Step2.vue';
+  import step3 from './Step3.vue';
 
-export default defineComponent({
-  components: { step1, step2, step3 },
-  setup() {
-    const currentTab = ref(1)
-    const currentStatus = ref('process')
+  export default defineComponent({
+    components: { step1, step2, step3 },
+    setup() {
+      const currentTab = ref(1);
+      const currentStatus = ref('process');
 
-    function nextStep() {
-      if (currentTab.value < 3) {
-        currentTab.value += 1
+      function nextStep() {
+        if (currentTab.value < 3) {
+          currentTab.value += 1;
+        }
       }
-    }
 
-    function prevStep() {
-      if (currentTab.value > 1) {
-        currentTab.value -= 1
+      function prevStep() {
+        if (currentTab.value > 1) {
+          currentTab.value -= 1;
+        }
       }
-    }
 
-    function finish() {
-      currentTab.value = 1
-    }
+      function finish() {
+        currentTab.value = 1;
+      }
 
-    return {
-      currentTab,
-      currentStatus,
-      nextStep,
-      prevStep,
-      finish
-    }
-  }
-})
+      return {
+        currentTab,
+        currentStatus,
+        nextStep,
+        prevStep,
+        finish,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.steps {
-  max-width: 750px;
-  margin: 16px auto;
-}
+  .steps {
+    max-width: 750px;
+    margin: 16px auto;
+  }
 </style>