feat(layout): 为多页面添加侧边栏布局组件
- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件 - 在LearningPlan和PlanTTS页面同样新增侧边栏布局 - 重构Header组件样式，采用fluent风格透明卡片和按钮样式 - 增加main.css中panel-shell的样式定义以支持新布局视觉效果 - 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验
This commit is contained in:
@@ -5,73 +5,70 @@
|
||||
<Header></Header>
|
||||
</el-header>
|
||||
|
||||
<el-main class="p-4">
|
||||
<el-card>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-input v-model="query.name" placeholder="姓名" clearable style="max-width:220px" />
|
||||
<el-button type="primary" class="ml-2" @click="fetchList">查询</el-button>
|
||||
<el-button class="ml-2" @click="resetSearch">重置</el-button>
|
||||
<el-button type="success" class="ml-2" @click="openCreate">新增用户</el-button>
|
||||
</div>
|
||||
<el-table :data="list" v-loading="loading" border stripe>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="phone" label="手机号" />
|
||||
<el-table-column prop="roleName" label="角色" />
|
||||
</el-table>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination
|
||||
background
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:total="totalCount"
|
||||
layout="prev, pager, next, sizes, total"
|
||||
@current-change="onPageChange"
|
||||
@size-change="onSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt-4">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>生成邀请码</span>
|
||||
<el-container>
|
||||
<el-main class="p-4">
|
||||
<el-card>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-input v-model="query.name" placeholder="姓名" clearable style="max-width:220px" />
|
||||
<el-button type="primary" class="ml-2" @click="fetchList">查询</el-button>
|
||||
<el-button class="ml-2" @click="resetSearch">重置</el-button>
|
||||
<el-button type="success" class="ml-2" @click="openCreate">新增用户</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="inviteForm" :rules="inviteRules" ref="inviteFormRef" label-width="120px">
|
||||
<el-form-item label="使用次数限制" prop="limit">
|
||||
<el-input-number v-model="inviteForm.limit" :min="1" :max="9999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期（天）" prop="expire">
|
||||
<el-input-number v-model="inviteForm.expire" :min="1" :max="3650" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="inviteLoading" @click="submitInvite">生成邀请码</el-button>
|
||||
<el-button class="ml-2" @click="resetInvite">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="inviteCode" class="mt-2">
|
||||
<el-alert type="success" :closable="false" :title="`邀请码：${inviteCode}`" show-icon />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-table :data="list" v-loading="loading" border stripe>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="phone" label="手机号" />
|
||||
<el-table-column prop="roleName" label="角色" />
|
||||
</el-table>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination background :current-page="page" :page-size="pageSize" :total="totalCount"
|
||||
layout="prev, pager, next, sizes, total" @current-change="onPageChange"
|
||||
@size-change="onSizeChange" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="createVisible" title="新增用户" width="420px">
|
||||
<el-form :model="createForm" :rules="rules" ref="createFormRef" label-width="80px">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="createForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="createForm.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="createForm.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createVisible=false">取消</el-button>
|
||||
<el-button type="primary" :loading="createLoading" @click="submitCreate">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-main>
|
||||
<el-card class="mt-4">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>生成邀请码</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="inviteForm" :rules="inviteRules" ref="inviteFormRef" label-width="120px">
|
||||
<el-form-item label="使用次数限制" prop="limit">
|
||||
<el-input-number v-model="inviteForm.limit" :min="1" :max="9999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期（天）" prop="expire">
|
||||
<el-input-number v-model="inviteForm.expire" :min="1" :max="3650" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="inviteLoading"
|
||||
@click="submitInvite">生成邀请码</el-button>
|
||||
<el-button class="ml-2" @click="resetInvite">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="inviteCode" class="mt-2">
|
||||
<el-alert type="success" :closable="false" :title="`邀请码：${inviteCode}`" show-icon />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="createVisible" title="新增用户" width="420px">
|
||||
<el-form :model="createForm" :rules="rules" ref="createFormRef" label-width="80px">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="createForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="createForm.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="createForm.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="createLoading" @click="submitCreate">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
</el-container>
|
||||
</div>
|
||||
@@ -82,6 +79,7 @@ import Header from '@/layouts/components/Header.vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { getUserList, createUser, createInvitationCode } from '@/api/admin'
|
||||
import { showMessage } from '@/composables/util.js'
|
||||
import Sidebar from '@/layouts/components/Sidebar.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
|
||||
Reference in New Issue
Block a user