1

src/views/HomeView.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+
+const router = useRouter();
+const auth = useAuthStore();
+
+function onLogout() {
+  auth.logout();
+  router.push({ name: "login" });
+}
+</script>
+
+<template>
+  <div
+    class="flex h-full flex-col items-center justify-center gap-6 bg-bg-base p-8"
+    style="
+      background:
+        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 229, 255, 0.08), transparent),
+        var(--color-bg-base);
+    "
+  >
+    <div class="text-center">
+      <p class="font-mono text-xs tracking-widest text-text-muted uppercase">
+        已连接
+      </p>
+      <h1 class="gradient-text mt-2 text-2xl font-bold">
+        欢迎，{{ auth.currentUser?.username }}
+      </h1>
+      <p class="mt-3 max-w-sm text-sm text-text-muted">
+        主界面开发中。当前为登录成功占位页。
+      </p>
+    </div>
+
+    <Button label="退出登录" severity="secondary" outlined @click="onLogout" />
+  </div>
+</template>

src/views/LoginView.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+import AuthLayout from "../components/AuthLayout.vue";
+
+const router = useRouter();
+const auth = useAuthStore();
+
+const username = ref("");
+const password = ref("");
+const loading = ref(false);
+const feedback = ref({ severity: "", message: "" });
+
+async function onSubmit() {
+  feedback.value = { severity: "", message: "" };
+  loading.value = true;
+
+  const result = auth.login({
+    username: username.value,
+    password: password.value,
+  });
+
+  loading.value = false;
+
+  if (result.ok) {
+    router.push({ name: "home" });
+    return;
+  }
+
+  feedback.value = { severity: "error", message: result.message };
+}
+</script>
+
+<template>
+  <AuthLayout title="登录" subtitle="连接你的 AI 工作空间">
+    <form class="flex flex-col gap-5" @submit.prevent="onSubmit">
+      <Message
+        v-if="feedback.message"
+        :severity="feedback.severity"
+        :closable="false"
+        class="w-full"
+      >
+        {{ feedback.message }}
+      </Message>
+
+      <div class="flex flex-col gap-2">
+        <label for="login-username" class="font-mono text-xs text-text-muted uppercase">
+          用户名
+        </label>
+        <InputText
+          id="login-username"
+          v-model="username"
+          placeholder="请输入用户名"
+          autocomplete="username"
+          class="w-full"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label for="login-password" class="font-mono text-xs text-text-muted uppercase">
+          密码
+        </label>
+        <Password
+          id="login-password"
+          v-model="password"
+          placeholder="请输入密码"
+          :feedback="false"
+          toggle-mask
+          fluid
+          input-class="w-full"
+          autocomplete="current-password"
+        />
+      </div>
+
+      <Button
+        type="submit"
+        label="登录"
+        :loading="loading"
+        class="w-full"
+      />
+
+      <p class="text-center text-sm text-text-muted">
+        还没有账号？
+        <RouterLink to="/register" class="auth-link">立即注册</RouterLink>
+      </p>
+    </form>
+  </AuthLayout>
+</template>

src/views/RegisterView.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+import AuthLayout from "../components/AuthLayout.vue";
+
+const router = useRouter();
+const auth = useAuthStore();
+
+const username = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+const loading = ref(false);
+const feedback = ref({ severity: "", message: "" });
+
+async function onSubmit() {
+  feedback.value = { severity: "", message: "" };
+  loading.value = true;
+
+  const result = auth.register({
+    username: username.value,
+    password: password.value,
+    confirmPassword: confirmPassword.value,
+  });
+
+  loading.value = false;
+
+  if (result.ok) {
+    router.push({ name: "home" });
+    return;
+  }
+
+  feedback.value = { severity: "error", message: result.message };
+}
+</script>
+
+<template>
+  <AuthLayout title="注册" subtitle="创建你的 AI 客户端账号">
+    <form class="flex flex-col gap-5" @submit.prevent="onSubmit">
+      <Message
+        v-if="feedback.message"
+        :severity="feedback.severity"
+        :closable="false"
+        class="w-full"
+      >
+        {{ feedback.message }}
+      </Message>
+
+      <div class="flex flex-col gap-2">
+        <label for="reg-username" class="font-mono text-xs text-text-muted uppercase">
+          用户名
+        </label>
+        <InputText
+          id="reg-username"
+          v-model="username"
+          placeholder="请输入用户名"
+          autocomplete="username"
+          class="w-full"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label for="reg-password" class="font-mono text-xs text-text-muted uppercase">
+          密码
+        </label>
+        <Password
+          id="reg-password"
+          v-model="password"
+          placeholder="至少 6 位"
+          :feedback="false"
+          toggle-mask
+          fluid
+          autocomplete="new-password"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label for="reg-confirm" class="font-mono text-xs text-text-muted uppercase">
+          确认密码
+        </label>
+        <Password
+          id="reg-confirm"
+          v-model="confirmPassword"
+          placeholder="再次输入密码"
+          :feedback="false"
+          toggle-mask
+          fluid
+          autocomplete="new-password"
+        />
+      </div>
+
+      <Button
+        type="submit"
+        label="注册"
+        :loading="loading"
+        class="w-full"
+      />
+
+      <p class="text-center text-sm text-text-muted">
+        已有账号？
+        <RouterLink to="/login" class="auth-link">返回登录</RouterLink>
+      </p>
+    </form>
+  </AuthLayout>
+</template>