-
+
+
+
@@ -59,6 +61,7 @@ $transition-time: 0.35s;
@extend %clearfix;
position: relative;
width: 100%;
+ height: 100%;
}
.drawer-bg {
@@ -70,65 +73,73 @@ $transition-time: 0.35s;
z-index: 2001;
}
-.sidebar-container {
- background-color: var(--v3-sidebar-menu-bg-color);
- transition: width $transition-time;
- width: var(--v3-sidebar-width);
- height: 100%;
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 2002;
- overflow: hidden;
- border-right: var(--v3-sidebar-border-right);
-}
-
-.main-container {
- min-height: 100%;
- transition: margin-left $transition-time;
- margin-left: var(--v3-sidebar-width);
+// 头部导航栏
+.layout-header {
position: relative;
+ z-index: 2003;
+ display: flex;
+ align-items: center;
+ height: var(--v3-navigationbar-height);
+ background-color: var(--v3-header-bg-color);
+ color: var(--v3-navigationbar-text-color);
+ box-shadow: var(--v3-header-box-shadow);
+ border-bottom: var(--v3-header-border-bottom);
+ .logo {
+ flex: none;
+ padding-left: 20px;
+ }
+ .navigation-bar {
+ flex: 1;
+ min-width: 0;
+ }
}
.fixed-header {
position: fixed !important;
top: 0;
+ left: 0;
right: 0;
- z-index: 9;
- width: calc(100% - var(--v3-sidebar-width));
+}
+
+// 左侧边栏
+.sidebar-container {
+ position: fixed;
+ top: var(--v3-navigationbar-height);
+ left: 0;
+ bottom: 0;
+ width: var(--v3-sidebar-width);
+ z-index: 2002;
+ overflow: hidden;
+ background-color: var(--v3-sidebar-menu-bg-color);
+ border-top-right-radius: 10px;
+ box-shadow: 0 0 10px rgba(32, 76, 131, 0.12);
transition: width $transition-time;
}
-.layout-header {
- position: relative;
- z-index: 9;
- background-color: var(--v3-header-bg-color);
- box-shadow: var(--v3-header-box-shadow);
- border-bottom: var(--v3-header-border-bottom);
+// 主容器
+.main-container {
+ height: 100vh;
+ margin-left: var(--v3-sidebar-width);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ transition: margin-left $transition-time;
+}
+
+.has-fixed-header {
+ padding-top: var(--v3-navigationbar-height);
+}
+
+.tags-view {
+ flex: none;
}
.app-main {
- min-height: calc(100vh - var(--v3-navigationbar-height));
- position: relative;
- overflow: hidden;
-}
-
-.fixed-header + .app-main {
- padding-top: var(--v3-navigationbar-height);
- height: 100vh;
- overflow: auto;
-}
-
-.has-tags-view {
- .app-main {
- min-height: calc(100vh - var(--v3-header-height));
- }
- .fixed-header + .app-main {
- padding-top: var(--v3-header-height);
- }
+ flex: 1;
+ min-height: 0;
}
+// 侧边栏折叠
.hide-sidebar {
.sidebar-container {
width: var(--v3-sidebar-hide-width);
@@ -136,9 +147,6 @@ $transition-time: 0.35s;
.main-container {
margin-left: var(--v3-sidebar-hide-width);
}
- .fixed-header {
- width: calc(100% - var(--v3-sidebar-hide-width));
- }
}
// 适配 mobile 端
@@ -150,12 +158,10 @@ $transition-time: 0.35s;
.main-container {
margin-left: 0px;
}
- .fixed-header {
- width: 100%;
- }
&.open-sidebar {
position: fixed;
top: 0;
+ width: 100%;
}
&.hide-sidebar {
.sidebar-container {
@@ -164,12 +170,6 @@ $transition-time: 0.35s;
transform: translate3d(calc(0px - var(--v3-sidebar-width)), 0, 0);
}
}
- // 既是 mobile 又是顶部或混合布局模式
- &.no-left {
- .sidebar-container {
- background-color: var(--el-bg-color);
- }
- }
}
.without-animation {
diff --git a/src/layouts/modes/LeftTopMode.vue b/src/layouts/modes/LeftTopMode.vue
index 3698b40..7c09d30 100644
--- a/src/layouts/modes/LeftTopMode.vue
+++ b/src/layouts/modes/LeftTopMode.vue
@@ -19,18 +19,17 @@ const layoutClasses = computed(() => {
-
+
-
+
-
-
+
+
@@ -44,70 +43,75 @@ $transition-time: 0.35s;
.app-wrapper {
@extend %clearfix;
width: 100%;
+ height: 100%;
}
.fixed-header {
position: fixed;
top: 0;
- z-index: 1002;
- width: 100%;
+ left: 0;
+ right: 0;
+ z-index: 2003;
display: flex;
+ align-items: center;
+ height: var(--v3-navigationbar-height);
.logo {
flex: none;
width: var(--v3-sidebar-width);
+ padding-left: 20px;
}
- .content {
+ .navigation-bar {
flex: 1;
- overflow: hidden;
+ min-width: 0;
}
}
.layout-header {
background-color: var(--v3-header-bg-color);
+ color: var(--v3-navigationbar-text-color);
box-shadow: var(--v3-header-box-shadow);
border-bottom: var(--v3-header-border-bottom);
}
.main-container {
- min-height: 100%;
+ height: 100vh;
+ margin-left: var(--v3-sidebar-width);
+ padding-top: var(--v3-navigationbar-height);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ transition: margin-left $transition-time;
}
.sidebar-container {
- background-color: var(--el-menu-bg-color);
- transition: width $transition-time;
- width: var(--v3-sidebar-width);
- height: 100%;
position: fixed;
+ top: var(--v3-navigationbar-height);
left: 0;
- z-index: 1001;
+ bottom: 0;
+ width: var(--v3-sidebar-width);
+ z-index: 2002;
overflow: hidden;
- border-right: var(--v3-sidebar-border-right);
- padding-top: var(--v3-navigationbar-height);
+ background-color: var(--v3-sidebar-menu-bg-color);
+ border-top-right-radius: 10px;
+ box-shadow: 0 0 10px rgba(32, 76, 131, 0.12);
+ transition: width $transition-time;
+}
+
+.tags-view {
+ flex: none;
}
.app-main {
- transition: padding-left $transition-time;
- padding-top: var(--v3-navigationbar-height);
- padding-left: var(--v3-sidebar-width);
- height: 100vh;
- overflow: auto;
+ flex: 1;
+ min-height: 0;
}
.hide-sidebar {
.sidebar-container {
width: var(--v3-sidebar-hide-width);
}
- .app-main {
- padding-left: var(--v3-sidebar-hide-width);
- }
-}
-
-.has-tags-view {
- .sidebar-container {
- padding-top: var(--v3-header-height);
- }
- .app-main {
- padding-top: var(--v3-header-height);
+ .main-container {
+ margin-left: var(--v3-sidebar-hide-width);
}
}
diff --git a/src/layouts/modes/TopMode.vue b/src/layouts/modes/TopMode.vue
index 12568bf..95e6530 100644
--- a/src/layouts/modes/TopMode.vue
+++ b/src/layouts/modes/TopMode.vue
@@ -9,16 +9,15 @@ const { showTagsView, showLogo } = storeToRefs(settingsStore)
-
+
({
- url: "auth/captcha",
- method: "get"
- })
+/** serverschool OAuth2 客户端信息（与 school-iot-admin 保持一致，公开客户端） */
+const OAUTH_CLIENT_ID = "client"
+const OAUTH_CLIENT_SECRET = "123456"
+const OAUTH_GRANT_TYPE = "password"
+
+/** serverschool 的 Result 信封（/wx、/sms 等老接口同样是这个结构） */
+export interface SchoolResult {
+ success: boolean
+ msg?: string
+ code?: number
+ data?: T
}
-/** 登录并返回 Token */
-export function loginApi(data: Auth.LoginRequestData) {
- return request({
- url: "auth/login",
- method: "post",
- data
- })
+const baseURL = import.meta.env.VITE_SCHOOL_BASE_URL
+
+/**
+ * 登录并返回 Token
+ * /oauth/token 返回的是 OAuth2 令牌结构（非 Result 信封格式），所以单独用 axios 请求
+ * 账号或密码错误时后端返回 400，axios 会直接 reject
+ */
+export function loginApi(data: Login.LoginRequestData) {
+ return axios
+ .get(`${baseURL}/oauth/token`, {
+ params: {
+ username: data.username,
+ password: data.password,
+ client_id: OAUTH_CLIENT_ID,
+ client_secret: OAUTH_CLIENT_SECRET,
+ grant_type: OAUTH_GRANT_TYPE
+ },
+ timeout: 10000
+ })
+ .then(res => res.data)
+}
+
+/**
+ * 根据手机号查询账号列表（对齐 school-iot-admin 的 /wx/getAccoutList）
+ * 返回 [{ userName, teamName, ... }]，查不到时 success=false
+ */
+export function getAccountListApi(phone: string) {
+ return axios
+ .get>(`${baseURL}/wx/getAccoutList`, {
+ params: { phone },
+ timeout: 10000
+ })
+ .then(res => res.data)
+}
+
+/** 发送短信验证码（POST /sms/sendCode?phone=） */
+export function sendSmsCodeApi(phone: string) {
+ return axios
+ .post>(`${baseURL}/sms/sendCode`, null, {
+ params: { phone },
+ timeout: 15000
+ })
+ .then(res => res.data)
+}
+
+/** 校验验证码并重置密码（POST /sms/verifyCode?userName=&newPwd=&phone=&code=） */
+export function verifySmsCodeApi(data: Login.ResetPasswordData) {
+ return axios
+ .post(`${baseURL}/sms/verifyCode`, null, {
+ params: {
+ userName: data.userName,
+ newPwd: data.newPassword,
+ phone: data.phone,
+ code: data.code
+ },
+ timeout: 15000
+ })
+ .then(res => res.data)
}
diff --git a/src/pages/login/apis/type.ts b/src/pages/login/apis/type.ts
index 86c0e2e..7c550fa 100644
--- a/src/pages/login/apis/type.ts
+++ b/src/pages/login/apis/type.ts
@@ -1,12 +1,36 @@
+/** 登录请求数据 */
export interface LoginRequestData {
- /** admin 或 editor */
- username: "admin" | "editor"
+ /** 用户名（输入 11 位手机号可查询对应账号） */
+ username: string
/** 密码 */
password: string
- /** 验证码 */
- code: string
}
-export type CaptchaResponseData = ApiResponseData
+/** OAuth2 令牌响应（/oauth/token） */
+export interface OAuthToken {
+ access_token: string
+ token_type: string
+ refresh_token?: string
+ expires_in: number
+ scope?: string
+}
-export type LoginResponseData = ApiResponseData<{ token: string }>
+/** 手机号查询出的账号（/wx/getAccoutList） */
+export interface AccountItem {
+ userName: string
+ /** 所属学校/分组名称 */
+ teamName?: string
+ [key: string]: unknown
+}
+
+/** 短信验证码重置密码（/sms/verifyCode） */
+export interface ResetPasswordData {
+ /** 用户名 */
+ userName: string
+ /** 新密码 */
+ newPassword: string
+ /** 手机号 */
+ phone: string
+ /** 短信验证码 */
+ code: string
+}
diff --git a/src/pages/login/components/Forget.vue b/src/pages/login/components/Forget.vue
new file mode 100644
index 0000000..3d9a1ef
--- /dev/null
+++ b/src/pages/login/components/Forget.vue
@@ -0,0 +1,278 @@
+
+
+
+
-
-
-
+
+
@@ -32,44 +31,49 @@ $transition-time: 0.35s;
.app-wrapper {
@extend %clearfix;
width: 100%;
+ height: 100%;
}
.fixed-header {
position: fixed;
top: 0;
- z-index: 1002;
- width: 100%;
+ left: 0;
+ right: 0;
+ z-index: 2003;
+ display: flex;
+ align-items: center;
+ height: var(--v3-navigationbar-height);
.logo {
- width: var(--v3-sidebar-width);
+ flex: none;
+ padding-left: 20px;
}
- .content {
- display: flex;
- .navigation-bar {
- flex: 1;
- }
+ .navigation-bar {
+ flex: 1;
+ min-width: 0;
}
}
.layout-header {
background-color: var(--v3-header-bg-color);
+ color: var(--v3-navigationbar-text-color);
box-shadow: var(--v3-header-box-shadow);
border-bottom: var(--v3-header-border-bottom);
}
.main-container {
- min-height: 100%;
+ height: 100vh;
+ padding-top: var(--v3-navigationbar-height);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.tags-view {
+ flex: none;
}
.app-main {
- transition: padding-left $transition-time;
- padding-top: var(--v3-navigationbar-height);
- height: 100vh;
- overflow: auto;
-}
-
-.has-tags-view {
- .app-main {
- padding-top: var(--v3-header-height);
- }
+ flex: 1;
+ min-height: 0;
}
diff --git a/src/pages/login/apis/index.ts b/src/pages/login/apis/index.ts
index 3c559a3..a3c6b3f 100644
--- a/src/pages/login/apis/index.ts
+++ b/src/pages/login/apis/index.ts
@@ -1,19 +1,75 @@
-import type * as Auth from "./type"
-import { request } from "@/http/axios"
+import type * as Login from "./type"
+import axios from "axios"
-/** 获取登录验证码 */
-export function getCaptchaApi() {
- return request
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ countdown > 0 ? `${countdown}s 后重试` : "获取验证码" }}
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+ 返回登录
+
+
+
+
+
+ 确 定
+
+
+
+
+
+
+
diff --git a/src/pages/login/images/login-background.png b/src/pages/login/images/login-background.png
new file mode 100644
index 0000000..b752f29
Binary files /dev/null and b/src/pages/login/images/login-background.png differ
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 1b48390..0be7882 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,13 +1,12 @@
+
+
+ 关联的小程序旧密码失效，用修改后的密码进行登入
+
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {{ LOGIN_TITLE }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- 登 录
-
-
+
+
+
+
+
+
+
+
+
+
+ 用户登录 +
+
+
+
+
+
+ {{ errorText }}
+
+
+ {{ item.userName }}
+ {{ item.teamName }}
+
+
+
+ 保持登录
+
+
+ 忘记密码
+
+
+
+
+
+
+
+
+
+ + 忘记密码 +
+
+
成都鸿兴运达科技公司 蜀ICP备19023702号-4
+