Initial project

src/components/authorize-form/index.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="tui-authorize-form">
+		<t-tabs class="tab" v-model="tabValue">
+			<t-tab-panel :value="Tab.LOGIN" label="登录" />
+			<t-tab-panel :value="Tab.REGISTER" label="注册" />
+		</t-tabs>
+		<div class="content">
+			<login v-if="tabValue == Tab.LOGIN" @login-success="onLoginSuccess" />
+			<register v-if="tabValue == Tab.REGISTER" @register-success="onRegisterSuccess" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Login from "./login.vue";
+import Register from "./register.vue";
+import { Emits, useHandler } from "~/components/authorize-form/emits";
+import { ref } from "vue";
+
+defineOptions({
+	name: "AuthorizeForm"
+});
+
+enum Tab {
+	LOGIN    = "LOGIN",
+	REGISTER = "REGISTER"
+}
+
+const emits = defineEmits<Emits>();
+const { onLoginSuccess, onRegisterSuccess } = useHandler(emits);
+
+const tabValue = ref(Tab.LOGIN);
+</script>
+
+<style lang="less" scoped>
+.tui-authorize-form {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+
+	.tab {
+		width: 16rem;
+		background: transparent;
+		margin-bottom: 1rem;
+
+		:deep(.t-tabs__nav-wrap) {
+			width: 100%;
+
+			.t-tabs__nav-item {
+				width: 50%;
+
+				.t-tabs__nav-item-wrapper {
+					width: 100%;
+					justify-content: center;
+				}
+			}
+		}
+	}
+
+	.content {
+		width: 20rem;
+	}
+}
+</style>