feat(projects): 迁移登录完成

src/components/business/LoginAgreement/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="w-full text-14px">
+    <n-checkbox v-model:checked="checked">我已经仔细阅读并接受</n-checkbox>
+    <n-button :text="true" type="primary" @click="handleClickProtocol">《用户协议》</n-button>
+    <n-button :text="true" type="primary" @click="handleClickPolicy">《隐私权政策》</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NCheckbox, NButton } from 'naive-ui';
+
+interface Props {
+  /** 是否勾选 */
+  value?: boolean;
+}
+
+interface Emits {
+  (e: 'update:value', value: boolean): void;
+  /** 点击协议 */
+  (e: 'click-protocol'): void;
+  /** 点击隐私政策 */
+  (e: 'click-policy'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: true
+});
+
+const emit = defineEmits<Emits>();
+
+const checked = computed({
+  get() {
+    return props.value;
+  },
+  set(newValue: boolean) {
+    emit('update:value', newValue);
+  }
+});
+
+function handleClickProtocol() {
+  emit('click-protocol');
+}
+function handleClickPolicy() {
+  emit('click-policy');
+}
+</script>
+<style scoped></style>

src/components/business/index.ts

@@ -0,0 +1,3 @@
+import LoginAgreement from './LoginAgreement/index.vue';
+
+export { LoginAgreement };

src/components/common/DarkModeSwitch/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="text-18px hover:text-primary cursor-pointer" @click="handleSwitch">
+    <icon-mdi-moon-waning-crescent v-if="darkMode" />
+    <icon-mdi-white-balance-sunny v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 暗黑模式 */
+  dark?: boolean;
+}
+
+interface Emits {
+  (e: 'update:dark', darkMode: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dark: false
+});
+
+const emit = defineEmits<Emits>();
+
+const darkMode = computed({
+  get() {
+    return props.dark;
+  },
+  set(newValue: boolean) {
+    emit('update:dark', newValue);
+  }
+});
+
+function handleSwitch() {
+  darkMode.value = !darkMode.value;
+}
+</script>
+<style scoped></style>

src/components/common/index.ts

@@ -1,3 +1,4 @@
 import SystemLogo from './SystemLogo/index.vue';
+import DarkModeSwitch from './DarkModeSwitch/index.vue';
 
-export { SystemLogo };
+export { SystemLogo, DarkModeSwitch };

src/components/custom/ImageVerify/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <canvas ref="domRef" width="152" height="40" class="cursor-pointer" @click="getImgCode"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useImageVerify } from '@/hooks';
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: 'update:code', code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ''
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit('update:code', newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+<style scoped></style>

src/components/custom/index.ts

@@ -0,0 +1,3 @@
+import ImageVerify from './ImageVerify/index.vue';
+
+export { ImageVerify };

src/components/index.ts

@@ -1 +1,3 @@
 export * from './common';
+export * from './custom';
+export * from './business';