登录

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "i18n-ally.localesPaths": [
         "src/locales"
-    ]
+    ],
+    "vue-i18n.i18nPaths": "src/locales"
 }

src/hooks/useTheme.ts

@@ -20,7 +20,17 @@ export function useTheme() {
     const themeOverrides = computed<GlobalThemeOverrides>(() => {
         if (isDark.value) {
             return {
-                common: {}
+                common: {
+                    primaryColor: '#B17DFF',
+                    primaryColorHover: '#B17DFF',
+                    primaryColorPressed: '#9265D5'
+                },
+                Button: {
+                    heightLarge: '38px'
+                },
+                Input: {
+                    textColor: '#ffffff'
+                }
             }
         }
         return {}

src/router/index.ts

@@ -19,6 +19,18 @@ const routes: RouteRecordRaw[] = [
         ]
     },
 
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('@/views/page/Login.vue')
+    },
+
+    {
+        path: '/vip',
+        name: 'vip',
+        component: () => import('@/views/page/Vip.vue')
+    },
+
     {
         path: '/404',
         name: '404',

src/store/modules/app/helper.ts

@@ -13,12 +13,12 @@ export interface AppState {
 }
 
 export function defaultSetting(): AppState {
-    return { siderCollapsed: false, theme: 'light', language: 'zh-CN' }
+    return { siderCollapsed: false, theme: 'dark', language: 'zh-CN' }
 }
 
 export function getLocalSetting(): AppState {
     const localSetting: AppState | undefined = ss.get(LOCAL_NAME)
-    return { ...defaultSetting(), ...localSetting }
+    return { ...defaultSetting(), ...localSetting, theme: 'dark' }
 }
 
 export function setLocalSetting(setting: AppState): void {

src/styles/global.less

@@ -8,3 +8,18 @@ body {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
 }
+
+:root {
+    --prim: #b17dff;
+}
+
+.n-button--primary-type {
+    background: #26f50d linear-gradient(307deg, #c072ff 0%, #f9d6ff 45%, #dfffff 89%, #f5ffff 100%);
+    font-weight: bold !important;
+    .n-button__border {
+        border-width: 0 !important;
+    }
+    .n-button__state-border {
+        border-width: 0 !important;
+    }
+}

src/views/page/Login.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="page">
+        <div class="back">
+            <img src="@/assets/icon_fanhui.png" alt="" />
+        </div>
+        <div class="title">
+            <div class="text1">登陆ChillgGPT</div>
+            <div class="text2">未注册手机验证后自动注册登陆</div>
+        </div>
+
+        <n-form ref="formRef" :model="form" :rules="rules" :show-label="false">
+            <n-form-item path="phone" label="">
+                <n-input :input-props="{ type: 'tel' }" v-model:value="form.phone" clearable />
+            </n-form-item>
+            <div class="submit">
+                <n-button block type="primary" size="large" circle @click="send"> 获取验证码 </n-button>
+            </div>
+
+            <div class="check">
+                <n-checkbox v-model::checked="checked">
+                    已阅读同意 <span class="prim" @click.stop="">《用户服务协议》</span>和<span
+                        class="prim"
+                        @click.stop=""
+                        >《平台隐私协》</span
+                    >
+                </n-checkbox>
+            </div>
+        </n-form>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { FormItemRule, NForm, NFormItem, NInput, NButton, NCheckbox, useMessage, FormInst } from 'naive-ui'
+export default defineComponent({
+    components: {
+        NForm,
+        NFormItem,
+        NInput,
+        NButton,
+        NCheckbox
+    },
+    data() {
+        return {
+            rules: {
+                phone: [
+                    {
+                        validator(rule: FormItemRule, value: string) {
+                            if (!value) {
+                                return new Error('请输入手机号')
+                            } else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
+                                return new Error('手机号格式错误')
+                            }
+
+                            return true
+                        },
+                        trigger: ['blur']
+                    }
+                ]
+            }
+        }
+    },
+    setup() {
+        const form = ref({
+            phone: ''
+        })
+        const checked = ref(false)
+        const message = useMessage()
+        const formRef = ref<FormInst | null>(null)
+        function send(e: MouseEvent) {
+            e.preventDefault()
+            formRef.value?.validate(errors => {
+                if (!errors) {
+                    if (!checked.value) {
+                        message.error('请先阅读并同意协议')
+                    }
+                }
+            })
+        }
+
+        return {
+            send,
+            form,
+            formRef,
+            message,
+            checked
+        }
+    }
+})
+</script>
+
+<style lang="less" scoped>
+.page {
+    padding: 80px 48px;
+}
+.title {
+    .text1 {
+        font-size: 24px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+    }
+
+    .text2 {
+        font-size: 12px;
+        color: #939599;
+        line-height: 24px;
+        margin-top: 8px;
+    }
+}
+
+.back {
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    top: 13px;
+    left: 20px;
+}
+
+:deep(.n-form) {
+    padding: 38px 0;
+
+    .n-input {
+        --n-border-radius: 0 !important;
+        --n-color: rgba(255, 255, 255, 0) !important;
+        font-size: 24px;
+        font-weight: bold;
+        .n-input__input-el {
+            --n-height: 44px;
+        }
+    }
+    .n-input-wrapper {
+        --n-padding-left: 0;
+        --n-padding-right: 0;
+    }
+    .n-input__border {
+        border-top-width: 0px !important;
+        border-left-width: 0px !important;
+        border-right-width: 0px !important;
+    }
+    .n-input__state-border {
+        border-top-width: 0px !important;
+        border-left-width: 0px !important;
+        border-right-width: 0px !important;
+    }
+}
+
+.submit {
+    padding: 15px 0;
+}
+
+:deep(.n-checkbox) {
+    --n-font-size: 12px !important;
+    --n-text-color: #939599 !important;
+    .n-checkbox-box {
+        --n-size: 16px;
+        --n-border-radius: 100px;
+        --n-border: 1px solid #c8c9cc;
+        --n-check-mark-color: #fff;
+    }
+
+    .prim {
+        color: var(--prim);
+    }
+}
+
+.check {
+    padding: 25px 0;
+}
+</style>

src/views/page/Vip.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="page">
+        <div class="vip">
+            <div class="vip-top">
+                <img src="@/assets/png-huiyuan.png" alt="" />
+
+                <div class="vip-text"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts"></script>
+
+<style lang="less" scoped>
+.vip {
+    padding: 5px 20px;
+}
+.vip-top {
+    position: relative;
+    img {
+        width: 100%;
+        display: block;
+    }
+}
+</style>