前端配置调整

This commit is contained in:
zhonghua 2026-03-26 14:02:08 +08:00
parent de264d3298
commit a8931c8708
11 changed files with 280 additions and 301 deletions

3
.gitignore vendored
View File

@ -42,6 +42,7 @@ build/
# === 前端自动生成 === # === 前端自动生成 ===
**/components.d.ts **/components.d.ts
**/typed-router.d.ts **/typed-router.d.ts
**/pnpm-lock.yaml
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
@ -57,8 +58,6 @@ target/
# === 测试结果 === # === 测试结果 ===
screenshots/ screenshots/
*.png
*.webm
test-results/ test-results/
playwright-report/ playwright-report/

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<link rel="icon" href="/logo/logo.png" /> <link rel="icon" href="/logo/logo/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>少儿智慧阅读</title> <title>少儿智慧阅读</title>
<!-- 阿里云IMM --> <!-- 阿里云IMM -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1,13 +1,8 @@
<template> <template>
<a-layout :class="['admin-layout', { 'is-collapsed': collapsed }]"> <a-layout :class="['admin-layout', { 'is-collapsed': collapsed }]">
<a-layout-sider <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="admin-sider">
v-model:collapsed="collapsed"
:trigger="null"
collapsible
class="admin-sider"
>
<div class="logo"> <div class="logo">
<img src="/logo.png" alt="Logo" class="logo-img" /> <img src="/logo/logo.png" alt="Logo" class="logo-img" />
<div v-if="!collapsed" class="logo-text"> <div v-if="!collapsed" class="logo-text">
<span class="logo-title">少儿智慧阅读</span> <span class="logo-title">少儿智慧阅读</span>
<span class="logo-subtitle">服务管理后台</span> <span class="logo-subtitle">服务管理后台</span>
@ -15,14 +10,8 @@
</div> </div>
<div class="sider-menu-wrapper"> <div class="sider-menu-wrapper">
<a-menu <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light" :inline-collapsed="collapsed"
v-model:selectedKeys="selectedKeys" @select="handleMenuSelect" class="side-menu">
mode="inline"
theme="light"
:inline-collapsed="collapsed"
@select="handleMenuSelect"
class="side-menu"
>
<a-menu-item key="dashboard"> <a-menu-item key="dashboard">
<template #icon> <template #icon>
<LayoutDashboard :size="18" :stroke-width="1.5" /> <LayoutDashboard :size="18" :stroke-width="1.5" />
@ -78,16 +67,8 @@
<a-layout> <a-layout>
<a-layout-header class="admin-header"> <a-layout-header class="admin-header">
<div class="header-left"> <div class="header-left">
<MenuUnfoldOutlined <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="collapsed = !collapsed" />
v-if="collapsed" <MenuFoldOutlined v-else class="trigger" @click="collapsed = !collapsed" />
class="trigger"
@click="collapsed = !collapsed"
/>
<MenuFoldOutlined
v-else
class="trigger"
@click="collapsed = !collapsed"
/>
</div> </div>
<div class="header-right"> <div class="header-right">
@ -95,7 +76,9 @@
<a-dropdown> <a-dropdown>
<a-space class="user-info" style="cursor: pointer;"> <a-space class="user-info" style="cursor: pointer;">
<a-avatar :size="32" class="user-avatar"> <a-avatar :size="32" class="user-avatar">
<template #icon><UserOutlined /></template> <template #icon>
<UserOutlined />
</template>
</a-avatar> </a-avatar>
<span class="user-name">{{ userStore.user?.name }}</span> <span class="user-name">{{ userStore.user?.name }}</span>
<DownOutlined /> <DownOutlined />

View File

@ -11,7 +11,7 @@
<div class="login-card"> <div class="login-card">
<!-- Logo区域 --> <!-- Logo区域 -->
<div class="logo-section"> <div class="logo-section">
<img src="/logo.png" alt="Logo" class="logo-img" /> <img src="/logo/logo.png" alt="Logo" class="logo-img" />
<div class="brand-info"> <div class="brand-info">
<h1>少儿智慧阅读</h1> <h1>少儿智慧阅读</h1>
<p>读启智慧阅见未来</p> <p>读启智慧阅见未来</p>
@ -20,54 +20,33 @@
<!-- 角色选择 --> <!-- 角色选择 -->
<div class="role-section"> <div class="role-section">
<div <div v-for="role in roles" :key="role.value" :class="['role-btn', { active: formState.role === role.value }]"
v-for="role in roles" @click="selectRole(role.value)">
:key="role.value"
:class="['role-btn', { active: formState.role === role.value }]"
@click="selectRole(role.value)"
>
<component :is="role.icon" /> <component :is="role.icon" />
<span>{{ role.label }}</span> <span>{{ role.label }}</span>
</div> </div>
</div> </div>
<!-- 登录表单 --> <!-- 登录表单 -->
<a-form <a-form :model="formState" @finish="handleLogin" layout="vertical" class="login-form">
:model="formState"
@finish="handleLogin"
layout="vertical"
class="login-form"
>
<a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]"> <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
<a-input <a-input v-model:value="formState.account" placeholder="请输入账号" size="large" allow-clear>
v-model:value="formState.account" <template #prefix>
placeholder="请输入账号" <UserOutlined />
size="large" </template>
allow-clear
>
<template #prefix><UserOutlined /></template>
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]"> <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
<a-input-password <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large">
v-model:value="formState.password" <template #prefix>
placeholder="请输入密码" <LockOutlined />
size="large" </template>
>
<template #prefix><LockOutlined /></template>
</a-input-password> </a-input-password>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button type="primary" html-type="submit" size="large" block :loading="loading" class="login-btn">
type="primary"
html-type="submit"
size="large"
block
:loading="loading"
class="login-btn"
>
登录 登录
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -77,12 +56,7 @@
<div class="test-section"> <div class="test-section">
<div class="test-title">快速体验</div> <div class="test-title">快速体验</div>
<div class="test-list"> <div class="test-list">
<span <span v-for="acc in testAccounts" :key="acc.role" class="test-item" @click="fillAccount(acc)">
v-for="acc in testAccounts"
:key="acc.role"
class="test-item"
@click="fillAccount(acc)"
>
{{ acc.label }}: {{ acc.account }} {{ acc.label }}: {{ acc.account }}
</span> </span>
</div> </div>

View File

@ -4,7 +4,7 @@
<a-layout-sider v-if="!isMobile" v-model:collapsed="collapsed" :trigger="null" collapsible class="parent-sider" <a-layout-sider v-if="!isMobile" v-model:collapsed="collapsed" :trigger="null" collapsible class="parent-sider"
:width="220"> :width="220">
<div class="logo"> <div class="logo">
<img src="/logo.png" alt="Logo" class="logo-img" /> <img src="/logo/logo.png" alt="Logo" class="logo-img" />
<div v-if="!collapsed" class="logo-text"> <div v-if="!collapsed" class="logo-text">
<span class="logo-title">少儿智慧阅读</span> <span class="logo-title">少儿智慧阅读</span>
<span class="logo-subtitle">家长端</span> <span class="logo-subtitle">家长端</span>
@ -53,7 +53,7 @@
class="mobile-drawer"> class="mobile-drawer">
<template #title> <template #title>
<div class="drawer-header"> <div class="drawer-header">
<img src="/logo.png" alt="Logo" class="drawer-logo" /> <img src="/logo/logo.png" alt="Logo" class="drawer-logo" />
<div class="drawer-title"> <div class="drawer-title">
<span class="title-main">少儿智慧阅读</span> <span class="title-main">少儿智慧阅读</span>
<span class="title-sub">家长端</span> <span class="title-sub">家长端</span>

View File

@ -1,13 +1,8 @@
<template> <template>
<a-layout :class="['school-layout', { 'is-collapsed': collapsed }]"> <a-layout :class="['school-layout', { 'is-collapsed': collapsed }]">
<a-layout-sider <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="school-sider">
v-model:collapsed="collapsed"
:trigger="null"
collapsible
class="school-sider"
>
<div class="logo"> <div class="logo">
<img src="/logo.png" alt="Logo" class="logo-img" /> <img src="/logo/logo.png" alt="Logo" class="logo-img" />
<div v-if="!collapsed" class="logo-text"> <div v-if="!collapsed" class="logo-text">
<span class="logo-tenant">{{ tenantName }}</span> <span class="logo-tenant">{{ tenantName }}</span>
<span class="logo-title">少儿智慧阅读</span> <span class="logo-title">少儿智慧阅读</span>
@ -16,101 +11,134 @@
</div> </div>
<div class="sider-menu-wrapper"> <div class="sider-menu-wrapper">
<a-menu <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" mode="inline" theme="light"
v-model:selectedKeys="selectedKeys" :inline-collapsed="collapsed" @click="handleMenuClick" class="side-menu">
v-model:openKeys="openKeys"
mode="inline"
theme="light"
:inline-collapsed="collapsed"
@click="handleMenuClick"
class="side-menu"
>
<!-- 数据概览 - 独立一级菜单 --> <!-- 数据概览 - 独立一级菜单 -->
<a-menu-item key="dashboard"> <a-menu-item key="dashboard">
<template #icon><DashboardOutlined /></template> <template #icon>
<DashboardOutlined />
</template>
<span>数据概览</span> <span>数据概览</span>
</a-menu-item> </a-menu-item>
<!-- 人员管理 --> <!-- 人员管理 -->
<a-sub-menu key="staff"> <a-sub-menu key="staff">
<template #icon><TeamOutlined /></template> <template #icon>
<TeamOutlined />
</template>
<template #title>人员管理</template> <template #title>人员管理</template>
<a-menu-item key="teachers"> <a-menu-item key="teachers">
<template #icon><SolutionOutlined /></template> <template #icon>
<SolutionOutlined />
</template>
<span>教师管理</span> <span>教师管理</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="students"> <a-menu-item key="students">
<template #icon><UserOutlined /></template> <template #icon>
<UserOutlined />
</template>
<span>学生管理</span> <span>学生管理</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="parents"> <a-menu-item key="parents">
<template #icon><IdcardOutlined /></template> <template #icon>
<IdcardOutlined />
</template>
<span>家长管理</span> <span>家长管理</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="classes"> <a-menu-item key="classes">
<template #icon><HomeOutlined /></template> <template #icon>
<HomeOutlined />
</template>
<span>班级管理</span> <span>班级管理</span>
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
<!-- 教学管理 --> <!-- 教学管理 -->
<a-sub-menu key="teaching"> <a-sub-menu key="teaching">
<template #icon><BookOutlined /></template> <template #icon>
<BookOutlined />
</template>
<template #title>教学管理</template> <template #title>教学管理</template>
<a-menu-item key="courses"> <a-menu-item key="courses">
<template #icon><ReadOutlined /></template> <template #icon>
<ReadOutlined />
</template>
<span>课程中心</span> <span>课程中心</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="school-courses"> <a-menu-item key="school-courses">
<template #icon><FolderAddOutlined /></template> <template #icon>
<FolderAddOutlined />
</template>
<span>校本课程包</span> <span>校本课程包</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="schedule"> <a-menu-item key="schedule">
<template #icon><CalendarOutlined /></template> <template #icon>
<CalendarOutlined />
</template>
<span>课程排期</span> <span>课程排期</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="tasks"> <a-menu-item key="tasks">
<template #icon><CheckSquareOutlined /></template> <template #icon>
<CheckSquareOutlined />
</template>
<span>阅读任务</span> <span>阅读任务</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="task-templates"> <a-menu-item key="task-templates">
<template #icon><CopyOutlined /></template> <template #icon>
<CopyOutlined />
</template>
<span>任务模板</span> <span>任务模板</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="feedback"> <a-menu-item key="feedback">
<template #icon><MessageOutlined /></template> <template #icon>
<MessageOutlined />
</template>
<span>课程反馈</span> <span>课程反馈</span>
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
<!-- 数据中心 --> <!-- 数据中心 -->
<a-sub-menu key="data"> <a-sub-menu key="data">
<template #icon><BarChartOutlined /></template> <template #icon>
<BarChartOutlined />
</template>
<template #title>数据中心</template> <template #title>数据中心</template>
<a-menu-item key="reports"> <a-menu-item key="reports">
<template #icon><FileTextOutlined /></template> <template #icon>
<FileTextOutlined />
</template>
<span>数据报告</span> <span>数据报告</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="growth"> <a-menu-item key="growth">
<template #icon><FileImageOutlined /></template> <template #icon>
<FileImageOutlined />
</template>
<span>成长档案</span> <span>成长档案</span>
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
<!-- 系统管理 --> <!-- 系统管理 -->
<a-sub-menu key="system"> <a-sub-menu key="system">
<template #icon><SettingOutlined /></template> <template #icon>
<SettingOutlined />
</template>
<template #title>系统管理</template> <template #title>系统管理</template>
<a-menu-item key="packages"> <a-menu-item key="packages">
<template #icon><GiftOutlined /></template> <template #icon>
<GiftOutlined />
</template>
<span>套餐管理</span> <span>套餐管理</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="operation-logs"> <a-menu-item key="operation-logs">
<template #icon><HistoryOutlined /></template> <template #icon>
<HistoryOutlined />
</template>
<span>操作日志</span> <span>操作日志</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="settings"> <a-menu-item key="settings">
<template #icon><ToolOutlined /></template> <template #icon>
<ToolOutlined />
</template>
<span>系统设置</span> <span>系统设置</span>
</a-menu-item> </a-menu-item>
</a-sub-menu> </a-sub-menu>
@ -121,16 +149,8 @@
<a-layout> <a-layout>
<a-layout-header class="school-header"> <a-layout-header class="school-header">
<div class="header-left"> <div class="header-left">
<MenuUnfoldOutlined <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="collapsed = !collapsed" />
v-if="collapsed" <MenuFoldOutlined v-else class="trigger" @click="collapsed = !collapsed" />
class="trigger"
@click="collapsed = !collapsed"
/>
<MenuFoldOutlined
v-else
class="trigger"
@click="collapsed = !collapsed"
/>
</div> </div>
<div class="header-right"> <div class="header-right">
@ -138,7 +158,9 @@
<a-dropdown> <a-dropdown>
<a-space class="user-info" style="cursor: pointer;"> <a-space class="user-info" style="cursor: pointer;">
<a-avatar :size="32" class="user-avatar"> <a-avatar :size="32" class="user-avatar">
<template #icon><UserOutlined /></template> <template #icon>
<UserOutlined />
</template>
</a-avatar> </a-avatar>
<span class="user-name">{{ userName }}</span> <span class="user-name">{{ userName }}</span>
<DownOutlined /> <DownOutlined />

View File

@ -1,13 +1,8 @@
<template> <template>
<a-layout :class="['teacher-layout', { 'is-collapsed': collapsed }]"> <a-layout :class="['teacher-layout', { 'is-collapsed': collapsed }]">
<a-layout-sider <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="teacher-sider">
v-model:collapsed="collapsed"
:trigger="null"
collapsible
class="teacher-sider"
>
<div class="logo"> <div class="logo">
<img src="/logo.png" alt="Logo" class="logo-img" /> <img src="/logo/logo.png" alt="Logo" class="logo-img" />
<div v-if="!collapsed" class="logo-text"> <div v-if="!collapsed" class="logo-text">
<span class="logo-tenant">{{ tenantName }}</span> <span class="logo-tenant">{{ tenantName }}</span>
<span class="logo-title">少儿智慧阅读</span> <span class="logo-title">少儿智慧阅读</span>
@ -16,48 +11,60 @@
</div> </div>
<div class="sider-menu-wrapper"> <div class="sider-menu-wrapper">
<a-menu <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light" :inline-collapsed="collapsed"
v-model:selectedKeys="selectedKeys" @click="handleMenuClick" class="side-menu">
mode="inline"
theme="light"
:inline-collapsed="collapsed"
@click="handleMenuClick"
class="side-menu"
>
<a-menu-item key="dashboard"> <a-menu-item key="dashboard">
<template #icon><HomeOutlined /></template> <template #icon>
<HomeOutlined />
</template>
<span>首页</span> <span>首页</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="classes"> <a-menu-item key="classes">
<template #icon><TeamOutlined /></template> <template #icon>
<TeamOutlined />
</template>
<span>我的班级</span> <span>我的班级</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="courses"> <a-menu-item key="courses">
<template #icon><BookOutlined /></template> <template #icon>
<BookOutlined />
</template>
<span>课程中心</span> <span>课程中心</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="school-courses"> <a-menu-item key="school-courses">
<template #icon><FolderAddOutlined /></template> <template #icon>
<FolderAddOutlined />
</template>
<span>校本课程包</span> <span>校本课程包</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="lessons"> <a-menu-item key="lessons">
<template #icon><CalendarOutlined /></template> <template #icon>
<CalendarOutlined />
</template>
<span>上课记录</span> <span>上课记录</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="schedule"> <a-menu-item key="schedule">
<template #icon><ScheduleOutlined /></template> <template #icon>
<ScheduleOutlined />
</template>
<span>我的课表</span> <span>我的课表</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="tasks"> <a-menu-item key="tasks">
<template #icon><CheckSquareOutlined /></template> <template #icon>
<CheckSquareOutlined />
</template>
<span>阅读任务</span> <span>阅读任务</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="feedback"> <a-menu-item key="feedback">
<template #icon><FileTextOutlined /></template> <template #icon>
<FileTextOutlined />
</template>
<span>课程反馈</span> <span>课程反馈</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="growth"> <a-menu-item key="growth">
<template #icon><CameraOutlined /></template> <template #icon>
<CameraOutlined />
</template>
<span>成长档案</span> <span>成长档案</span>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
@ -67,16 +74,8 @@
<a-layout> <a-layout>
<a-layout-header class="teacher-header"> <a-layout-header class="teacher-header">
<div class="header-left"> <div class="header-left">
<MenuUnfoldOutlined <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="collapsed = !collapsed" />
v-if="collapsed" <MenuFoldOutlined v-else class="trigger" @click="collapsed = !collapsed" />
class="trigger"
@click="collapsed = !collapsed"
/>
<MenuFoldOutlined
v-else
class="trigger"
@click="collapsed = !collapsed"
/>
</div> </div>
<div class="header-right"> <div class="header-right">
@ -84,7 +83,9 @@
<a-dropdown> <a-dropdown>
<a-space class="user-info" style="cursor: pointer;"> <a-space class="user-info" style="cursor: pointer;">
<a-avatar :size="32" class="user-avatar"> <a-avatar :size="32" class="user-avatar">
<template #icon><UserOutlined /></template> <template #icon>
<UserOutlined />
</template>
</a-avatar> </a-avatar>
<span class="user-name">{{ userName }}</span> <span class="user-name">{{ userName }}</span>
<DownOutlined /> <DownOutlined />