[WIP] VerifyForm

src/components/AreaBlock.vue

@@ -4,8 +4,23 @@
   </div>
 </template>
 
+<script setup lang="ts">
+export interface AreaBlockProps {
+  bg?: string
+  border?: string
+}
+
+const props = withDefaults(defineProps<AreaBlockProps>(), {
+  bg: 'transparent',
+  border: 'var(--primary-bg)',
+})
+</script>
+
 <style scoped lang="postcss">
 .area-block {
-  @apply border-2 border-primary-bg p-[10px] rounded-sub;
+  @apply border-[1.5px] p-[20px] rounded-md;
+
+  background-color: v-bind(props.bg);
+  border-color: v-bind(props.border);
 }
 </style>

src/styles/naive-ui-theme-overrides.json

@@ -13,5 +13,8 @@
   "Button": {},
   "Input": {
     "border": "1px solid #6B7280"
+  },
+  "Form": {
+    "labelFontWeight": "600"
   }
 }

src/views/RegisterProfile/RegisterProfile.vue

@@ -7,7 +7,10 @@
         <n-icon size="50"><AirlineRapidBoard /></n-icon>
         <p class="topic-title">Shelter Verify</p>
       </div>
-      <n-divider />
+    </SZBlockContainer>
+    <n-divider />
+
+    <SZBlockContainer class="w-fit m-auto">
       <VerifyForm />
     </SZBlockContainer>
   </main>
@@ -18,6 +21,7 @@ import { SZBlockContainer } from '@shelter-zone/shelter-ui'
 import { AirlineRapidBoard } from '@vicons/carbon'
 import { NIcon, NDivider } from 'naive-ui'
 import VerifyForm from './components/VerifyForm.vue'
+import AreaBlock from '@/components/AreaBlock.vue'
 </script>
 
 <style scoped lang="postcss">

src/views/RegisterProfile/components/VerifyForm.vue

@@ -1,19 +1,24 @@
 <template>
   <n-form ref="formRef" class="verify-form">
-    <n-form-item label="避難者 ID" path="name">
-      <n-input placeholder="避難者 ID" />
-    </n-form-item>
-    <n-form-item label="來源" path="name">
-      <n-select :options="values(fromSourcesConfig)" placeholder="避難者 ID" />
-    </n-form-item>
+    <div class="grid grid-cols-2 gap-30px">
+      <n-form-item label="避難者 ID" path="name">
+        <n-input />
+      </n-form-item>
+      <n-form-item label="來源" path="name">
+        <n-select :options="values(fromSourcesConfig)" />
+      </n-form-item>
+    </div>
+
+    <n-button secondary block type="primary">進行驗證</n-button>
   </n-form>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
+import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui'
 import { useOauthStore } from '@/stores/oauth'
 import { fromSourcesConfig } from '@/configs/verifyForm'
+import { Tag } from '@vicons/carbon'
 import { values } from 'lodash-es'
 
 const formRef = ref<null>()
@@ -27,6 +32,6 @@ const formData = reactive({
 
 <style scoped lang="postcss">
 .verify-form {
-  @apply max-w-[500px] m-auto;
+  @apply max-w-[800px] w-full m-auto;
 }
 </style>