feat: add basic form

eslint.config.js

@@ -9,6 +9,9 @@ export default antfu({
 }, {
   rules: {
     'style/brace-style': ['warn', '1tbs', { allowSingleLine: true }],
+    'vue/block-order': ['error', {
+      order: ['template', 'script', 'style'],
+    }],
   },
   ignores: ['components/ui/**', '.github/**/*'],
 });

src/App.vue

@@ -1,47 +1,82 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
-import TheWelcome from './components/TheWelcome.vue';
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125">
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+  <div class="ml-auto mr-auto w-80%">
+    <FormItem :msg="form.name.msg" label="姓名">
+      <input v-model="form.name.val" @input="onUpdate">
+    </FormItem>
+    <FormItem :msg="form.id.msg" label="身份证">
+      <input v-model="form.id.val" @input="onUpdate">
+    </FormItem>
+    <FormItem :msg="form.phone.msg" label="手机">
+      <input v-model="form.phone.val" @input="onUpdate">
+    </FormItem>
 
-  <main>
-    <TheWelcome />
-  </main>
+    <button @click="onSubmit">
+      submit
+    </button>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import FormItem from './components/FormItem.vue';
+import type { TForm, TFormFields } from './types';
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+const form: TForm = reactive({
+  name: {
+    val: '',
+    msg: '',
+  },
+  id: {
+    val: '',
+    msg: '',
+  },
+  phone: {
+    val: '',
+    msg: '',
+  },
+});
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+const formRule = {
+  name: {
+    reg: /.{2,5}/,
+    msg: '姓名长度应在2~5',
+  },
+  id: {
+    reg: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+    msg: '请输入正确的身份证号',
+  },
+  phone: {
+    reg: /^[1][3,4,5,7,8][0-9]{9}$/,
+    msg: '请输入正确的手机号',
+  },
+};
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+const ticketOpen = ref(false);
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+function checkFormRule() {
+  let success = true;
+  for (const field of ['name', 'id', 'phone'] as TFormFields[]) {
+    const { reg, msg } = formRule[field];
+    if (reg.test(form[field].val)) {
+      form[field].msg = '';
+      success = true && success;
+    } else {
+      form[field].msg = msg;
+      success = false;
+    }
   }
+  return success;
+};
+
+function onUpdate() {
+  checkFormRule();
 }
-</style>
+
+function onSubmit() {
+  const valid = checkFormRule();
+  if (!valid)
+    return;
+
+  ticketOpen.value = true;
+}
+</script>

src/assets/main.css

@@ -1,35 +1,6 @@
-@import './base.css';
-
 #app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+}

src/components/FormItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    {{ label }}
+  </div>
+  <slot />
+  <div class="text-red-400">
+    {{ msg }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  msg: string
+}>();
+</script>