xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-24 20:34:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix dark:

Browse Source
This commit is contained in:
Chuck1sn
2025-05-16 12:56:59 +08:00
parent b2e07d0227
commit 5b8f262450
35 changed files with 390 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/views/BindDepartmentView.vue
View File

@@ -2,34 +2,33 @@
<div class="relative overflow-x-auto px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['部门分配']" />
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl dark:text-white">部门分配</h1>
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl ">部门分配</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 grid grid-cols-5 gap-y-4">
<div class="col-span-3">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="departmentName"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="部门名称" required />
</div>
</div>
<select id="countries" v-model="bindState"
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 ">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</form>
<div class="flex items-center justify-end gap-2 absolute right-5 bottom-2">
@@ -64,13 +63,13 @@
</div>
</div>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" v-model="allChecked"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -81,19 +80,19 @@
</thead>
<tbody>
<tr v-for="department in departments" :key="department.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + department.id" :value="department.id" type="checkbox"
v-model="checkedDepartmentIds"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + department.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4whitespace-nowrap ">
{{ !department.parentName ? '无' : department.parentName }}
</td>
<td scope="row" class="px-6 py-4whitespace-nowrap font-medium text-gray-900 dark:text-white">
<td scope="row" class="px-6 py-4whitespace-nowrap font-medium text-gray-900 ">
{{ department.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">

33
frontend/src/views/BindPermissionView.vue
View File

@@ -2,35 +2,34 @@
<div class="relative overflow-x-auto px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['绑定权限']" />
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl dark:text-white">
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl ">
绑定权限</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 grid grid-cols-5 gap-y-4">
<div class="col-span-3">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="permissionName"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="权限名" required />
</div>
</div>
<select id="countries" v-model="bindState"
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 ">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</form>
<div class="flex items-center justify-end gap-2 absolute right-5 bottom-2">
@@ -65,13 +64,13 @@
</div>
</div>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" v-model="allChecked"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -82,19 +81,19 @@
</thead>
<tbody>
<tr v-for="permission in permissions" :key="permission.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + permission.id" :value="permission.id" type="checkbox"
v-model="checkedPermissionIds"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + permission.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ permission.code }}
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ permission.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
@@ -155,7 +154,7 @@ const handleBindPermissionSubmit = async () => {
level: "success",
});
clearCheckedRoleIds();
allChecked.value = false;
allChecked.value = false;
await fetchPermissionsWith({
name: permissionName.value,
roleId: Number($route.params.roleId),
@@ -174,7 +173,7 @@ const handleUnbindPermissionSubmit = async () => {
level: "success",
});
clearCheckedRoleIds();
allChecked.value = false;
allChecked.value = false;
await fetchPermissionsWith({
name: permissionName.value,
roleId: Number($route.params.roleId),

27
frontend/src/views/BindPositionView.vue
View File

@@ -2,34 +2,33 @@
<div class="relative overflow-x-auto px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['岗位分配']" />
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl dark:text-white">岗位分配</h1>
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl ">岗位分配</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 grid grid-cols-5 gap-y-4">
<div class="col-span-3">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="positionName"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="岗位名称" required />
</div>
</div>
<select id="countries" v-model="bindState"
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 ">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</form>
<div class="flex items-center justify-end gap-2 absolute right-5 bottom-2">
@@ -64,13 +63,13 @@
</div>
</div>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" v-model="allChecked"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -80,17 +79,17 @@
</thead>
<tbody>
<tr v-for="position in positions" :key="position.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + position.id" :value="position.id" type="checkbox"
v-model="checkedPositionIds"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + position.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ position.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">

30
frontend/src/views/BindRoleView.vue
View File

@@ -2,34 +2,33 @@
<div class="relative overflow-x-auto px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['角色分配']" />
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl dark:text-white">角色分配</h1>
<h1 class="text-xl mb-2 font-semibold text-gray-900 sm:text-2xl ">角色分配</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 grid grid-cols-5 gap-y-4">
<div class="col-span-3">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="roleName"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="角色名" required />
</div>
</div>
<select id="countries" v-model="bindState"
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
class="col-span-2 block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 ">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</form>
<div class="flex items-center justify-end gap-2 absolute right-5 bottom-2">
@@ -64,13 +63,13 @@
</div>
</div>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" v-model="allChecked"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -80,19 +79,18 @@
</tr>
</thead>
<tbody>
<tr v-for="role in roles" :key="role.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
<tr v-for="role in roles" :key="role.id" class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + role.id" :value="role.id" type="checkbox" v-model="checkedRoleIds"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + role.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ role.code }}
</td>
<td scope="row" class="px-6 py-4 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 whitespace-nowrap ">
{{ role.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">

29
frontend/src/views/DepartmentView.vue
View File

@@ -2,43 +2,42 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['部门管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">部门管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">部门管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="name"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="部门名称" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
<!-- Create Modal toggle -->
<button @click="handleUpsertDepartmentClick()"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 absolute right-5 bottom-2"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center absolute right-5 bottom-2"
type="button">
新增部门
</button>
</div>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -49,11 +48,11 @@
</thead>
<tbody>
<tr v-for="department in departments" :key="department.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + department.id" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + department.id" class="sr-only">checkbox</label>
</div>
</td>
@@ -66,7 +65,7 @@
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div class="flex items-center gap-x-2">
<button @click="handleUpsertDepartmentClick(department)"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 "
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 "
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -78,7 +77,7 @@
</button>
<button
class="flex items-center justify-center min-w-25 gap-x-1
bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700
bg-red-700 hover:bg-red-800
focus:ring-red-500 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5"
@click="handleDeleteDepartmentClick(department)" type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

17
frontend/src/views/LoginView.vue
View File

@@ -1,23 +1,22 @@
<template>
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div
class="w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 ">
<div class="w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6 md:p-8 ">
<form class="flex flex-col gap-y-4" action="#">
<h5 class="text-xl font-medium text-gray-900 dark:text-white">知路管理后台</h5>
<h5 class="text-xl font-medium text-gray-900 ">知路管理后台</h5>
<div>
<label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">用户名</label>
<label for="username" class="block mb-2 text-sm font-medium text-gray-900 ">用户名</label>
<input type="text" name="email" id="username" v-model="username"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
placeholder="输入任意值" required />
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 ">密码</label>
<input type="password" name="password" id="password" v-model="password" placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
required />
</div>
<button type="submit"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
@click.prevent="handleLogin">登录</button>
</form>
</div>

4
frontend/src/views/NotFound.vue
View File

@@ -9,7 +9,9 @@ import { RoutePath } from "../router/constants";
<h1 class="mt-4 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Page not found</h1>
<p class="mt-6 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">您访问的资源未找到，请点击浏览器后退按钮返回</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.OVERVIEW}`" class="rounded-md px-3.5 py-2.5 text-sm font-semibold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2">回到主页</RouterLink>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.OVERVIEW}`"
class="rounded-md px-3.5 py-2.5 text-sm font-semibold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2">
回到主页</RouterLink>
<a href="#" class="text-sm font-semibold text-gray-900">联系我们<span aria-hidden="true">&rarr;</span></a>
</div>
</div>

176
frontend/src/views/OverView.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="grid grid-cols-5 gap-4 p-4">
<div class="col-span-3 bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
<div class="flex justify-between pb-4 mb-4 border-b border-gray-200 dark:border-gray-700">
<div class="col-span-3 bg-white rounded-lg shadow-sm p-4 md:p-6">
<div class="flex justify-between pb-4 mb-4 border-b border-gray-200 ">
<div class="flex items-center">
<div class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center me-3">
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
<div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center me-3">
<svg class="w-6 h-6 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 19">
<path
d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
@@ -13,13 +13,13 @@
</svg>
</div>
<div>
<h5 class="leading-none text-2xl font-bold text-gray-900 dark:text-white pb-1">3.4k</h5>
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">Leads generated per week</p>
<h5 class="leading-none text-2xl font-bold text-gray-900 pb-1">3.4k</h5>
<p class="text-sm font-normal text-gray-500 ">Leads generated per week</p>
</div>
</div>
<div>
<span
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md ">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -32,21 +32,21 @@
<div class="grid grid-cols-2">
<dl class="flex items-center">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Money spent:</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">$3,232</dd>
<dt class="text-gray-500 text-sm font-normal me-1">Money spent:</dt>
<dd class="text-gray-900 text-sm font-semibold">$3,232</dd>
</dl>
<dl class="flex items-center justify-end">
<dt class="text-gray-500 dark:text-gray-400 text-sm font-normal me-1">Conversion rate:</dt>
<dd class="text-gray-900 text-sm dark:text-white font-semibold">1.2%</dd>
<dt class="text-gray-500 text-sm font-normal me-1">Conversion rate:</dt>
<dd class="text-gray-900 text-sm font-semibold">1.2%</dd>
</dl>
</div>
<div id="column-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="grid grid-cols-1 items-center border-gray-200 border-t justify-between">
<div class="flex justify-between items-center pt-5">
<!-- Button -->
<button id="dropdownDefaultButton" data-dropdown-toggle="lastDaysdropdown" data-dropdown-placement="bottom"
class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
class="text-sm font-medium text-gray-500 hover:text-gray-900 text-center inline-flex items-center "
type="button">
Last 7 days
<svg class="w-2.5 m-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -56,33 +56,30 @@
</svg>
</button>
<!-- Dropdown menu -->
<div id="lastDaysdropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
<div id="lastDaysdropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 ">
<ul class="py-2 text-sm text-gray-700 " aria-labelledby="dropdownDefaultButton">
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Yesterday</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Yesterday</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Today</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Today</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
7 days</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
30 days</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
90 days</a>
</li>
</ul>
</div>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 hover:bg-gray-100 px-3 py-2">
Leads Report
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
@@ -93,29 +90,28 @@
</div>
</div>
</div>
<div
class="col-span-1 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-8 dark:bg-gray-800 dark:border-gray-700">
<div class="col-span-1 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-8 ">
<div class="flex items-center justify-between mb-4">
<h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white">Latest Customers</h5>
<a href="#" class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">
<h5 class="text-xl font-bold leading-none text-gray-900 ">Latest Customers</h5>
<a href="#" class="text-sm font-medium text-blue-600 hover:underline ">
View all
</a>
</div>
<div class="flow-root">
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
<ul role="list" class="divide-y divide-gray-200 ">
<li class="py-3 sm:py-4">
<div class="flex items-center">
<div class="shrink-0">
<img src="/trump.jpg" class="w-8 h-8 rounded-full" </div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate ">
Neil Sims
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate ">
email@windster.com
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
$320
</div>
</div>
@@ -125,14 +121,14 @@
<div class="shrink-0">
<img src="/trump.jpg" class="w-8 h-8 rounded-full" </div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate ">
Bonnie Green
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate ">
email@windster.com
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
$3467
</div>
</div>
@@ -142,14 +138,14 @@
<div class="shrink-0">
<img src="/trump.jpg" class="w-8 h-8 rounded-full" </div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate ">
Michael Gough
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate ">
email@windster.com
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
$67
</div>
</div>
@@ -159,14 +155,14 @@
<div class="shrink-0">
<img src="/trump.jpg" class="w-8 h-8 rounded-full" </div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate ">
Lana Byrd
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate ">
email@windster.com
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
$367
</div>
</div>
@@ -176,14 +172,14 @@
<div class="shrink-0">
<img src="/trump.jpg" class="w-8 h-8 rounded-full" </div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate ">
Thomes Lean
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate ">
email@windster.com
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
<div class="inline-flex items-center text-base font-semibold text-gray-900 ">
$2367
</div>
</div>
@@ -191,30 +187,30 @@
</ul>
</div>
</div>
<div class="col-span-2 max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
<div class="col-span-2 max-w-sm w-full bg-white rounded-lg shadow-sm p-4 md:p-6">
<div class="flex justify-between items-start w-full">
<div class="flex-col items-center">
<div class="flex items-center mb-1">
<h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Website traffic</h5>
<h5 class="text-xl font-bold leading-none text-gray-900 me-1">Website traffic</h5>
<svg data-popover-target="chart-info" data-popover-placement="bottom"
class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-pointer ms-1"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
class="w-3.5 h-3.5 text-gray-500 hover:text-gray-900 cursor-pointer ms-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z" />
</svg>
<div data-popover id="chart-info" role="tooltip"
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 ">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Activity growth - Incremental</h3>
<h3 class="font-semibold text-gray-900 ">Activity growth - Incremental</h3>
<p>Report helps navigate cumulative growth of community activities. Ideally, the chart should have a
growing trend, as stagnating chart signifies a significant decrease of community activity.</p>
<h3 class="font-semibold text-gray-900 dark:text-white">Calculation</h3>
<h3 class="font-semibold text-gray-900 ">Calculation</h3>
<p>For each date bucket, the all-time volume of activities is calculated. This means that activities in
period n contain all activities up to period n, plus the activities generated by your community in
period.</p>
<a href="#"
class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline">Read
class="flex items-center font-medium text-blue-600 hover:text-blue-700 hover:underline">Read
more <svg class="w-2 h-2 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -226,7 +222,7 @@
</div>
<button id="dateRangeButton" data-dropdown-toggle="dateRangeDropdown"
data-dropdown-ignore-click-outside-class="datepicker" type="button"
class="inline-flex items-center text-blue-700 dark:text-blue-600 font-medium hover:underline">31 Nov - 31
class="inline-flex items-center text-blue-700 font-medium hover:underline">31 Nov - 31
Dev <svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -234,32 +230,32 @@
</svg>
</button>
<div id="dateRangeDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-80 lg:w-96 dark:bg-gray-700 dark:divide-gray-600">
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-80 lg:w-96 ">
<div class="p-3" aria-labelledby="dateRangeButton">
<div date-rangepicker datepicker-autohide class="flex items-center">
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</div>
<input name="start" type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 "
placeholder="Start date">
</div>
<span class="mx-2 text-gray-500 dark:text-gray-400">to</span>
<span class="mx-2 text-gray-500 ">to</span>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</div>
<input name="end" type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 "
placeholder="End date">
</div>
</div>
@@ -269,31 +265,26 @@
<div class="flex justify-end items-center">
<button id="widgetDropdownButton" data-dropdown-toggle="widgetDropdown" data-dropdown-placement="bottom"
type="button"
class="inline-flex items-center justify-center text-gray-500 w-8 h-8 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"><svg
class="w-3.5 h-3.5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
class="inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm"><svg
class="w-3.5 h-3.5 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 16 3">
<path
d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
</svg><span class="sr-only">Open dropdown</span>
</button>
<div id="widgetDropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="widgetDropdownButton">
<div id="widgetDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 ">
<ul class="py-2 text-sm text-gray-700 " aria-labelledby="widgetDropdownButton">
<li>
<a href="#"
class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><svg
class="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 21 21">
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-100 "><svg class="w-3 h-3 me-2"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7.418 17.861 1 20l2.139-6.418m4.279 4.279 10.7-10.7a3.027 3.027 0 0 0-2.14-5.165c-.802 0-1.571.319-2.139.886l-10.7 10.7m4.279 4.279-4.279-4.279m2.139 2.14 7.844-7.844m-1.426-2.853 4.279 4.279" />
</svg>Edit widget
</a>
</li>
<li>
<a href="#"
class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><svg
class="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-100 "><svg class="w-3 h-3 me-2"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
<path
@@ -302,20 +293,16 @@
</a>
</li>
<li>
<a href="#"
class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><svg
class="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 18 18">
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-100 "><svg class="w-3 h-3 me-2"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m5.953 7.467 6.094-2.612m.096 8.114L5.857 9.676m.305-1.192a2.581 2.581 0 1 1-5.162 0 2.581 2.581 0 0 1 5.162 0ZM17 3.84a2.581 2.581 0 1 1-5.162 0 2.581 2.581 0 0 1 5.162 0Zm0 10.322a2.581 2.581 0 1 1-5.162 0 2.581 2.581 0 0 1 5.162 0Z" />
</svg>Add to repository
</a>
</li>
<li>
<a href="#"
class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><svg
class="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 18 20">
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-100 "><svg class="w-3 h-3 me-2"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path
d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z" />
</svg>Delete widget
@@ -329,11 +316,11 @@
<!-- Line Chart -->
<div class="py-6" id="pie-chart"></div>
<div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
<div class="grid grid-cols-1 items-center border-gray-200 border-t justify-between">
<div class="flex justify-between items-center pt-5">
<!-- Button -->
<button id="dropdownDefaultButton" data-dropdown-toggle="lastDaysdropdown" data-dropdown-placement="bottom"
class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
class="text-sm font-medium text-gray-500 hover:text-gray-900 text-center inline-flex items-center "
type="button">
Last 7 days
<svg class="w-2.5 m-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -342,33 +329,30 @@
d="m1 1 4 4 4-4" />
</svg>
</button>
<div id="lastDaysdropdown"
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
<div id="lastDaysdropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 ">
<ul class="py-2 text-sm text-gray-700 " aria-labelledby="dropdownDefaultButton">
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Yesterday</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Yesterday</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Today</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Today</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
7 days</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
30 days</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Last
<a href="#" class="block px-4 py-2 hover:bg-gray-100 ">Last
90 days</a>
</li>
</ul>
</div>
<a href="#"
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 hover:bg-gray-100 px-3 py-2">
Traffic analysis
<svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
@@ -474,7 +458,7 @@ onMounted(() => {
show: true,
style: {
fontFamily: "Inter, sans-serif",
cssClass: "text-xs font-normal fill-gray-500 dark:fill-gray-400",
cssClass: "text-xs font-normal fill-gray-500 ",
},
},
axisBorder: {

33
frontend/src/views/PermissionView.vue
View File

@@ -2,43 +2,42 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['权限管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">权限管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">权限管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="permissionName"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="权限名" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
<!-- Create Modal toggle -->
<button @click="handleUpsertPermissionClick(undefined)"
class="flex items-center block gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 absolute right-5 bottom-2"
class="flex items-center block gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center absolute right-5 bottom-2"
type="button">
新增权限
</button>
</div>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -49,22 +48,22 @@
</thead>
<tbody>
<tr v-for="permission in permissions" :key="permission.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + permission.id" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + permission.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ permission.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">{{ permission.code }}</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div class="flex items-center gap-x-2">
<button @click="handleUpsertPermissionClick(permission)"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 "
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 "
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -76,7 +75,7 @@
</button>
<button
class="flex items-center justify-center min-w-25 gap-x-1
bg-red-700 hover:bg-red-800 focus:outline-none dark:bg-red-600 dark:hover:bg-red-700
bg-red-700 hover:bg-red-800 focus:outline-none
focus:ring-red-500 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 "
@click="handleDeletePermissionClick(permission)" type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -184,7 +183,7 @@ const handleDeleteModalSubmit = async () => {
content: "删除成功",
level: "success",
});
await fetchPermissionsWith({
await fetchPermissionsWith({
name: permissionName.value,
});
};

29
frontend/src/views/PositionView.vue
View File

@@ -2,44 +2,43 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['岗位管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">岗位管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">岗位管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 ">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="name"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="岗位名称" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
<!-- Create Modal toggle -->
<button @click="handleUpsertPositionClick()"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 absolute right-5 bottom-2"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center absolute right-5 bottom-2"
type="button">
新增岗位
</button>
</div>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 ">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -49,11 +48,11 @@
</thead>
<tbody>
<tr v-for="position in positions" :key="position.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + position.id" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + position.id" class="sr-only">checkbox</label>
</div>
</td>
@@ -63,7 +62,7 @@
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div class="flex items-center gap-x-2">
<button @click="handleUpsertPositionClick(position)"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 "
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 "
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -75,7 +74,7 @@
</button>
<button
class="flex items-center justify-center min-w-25 gap-x-1
bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700
bg-red-700 hover:bg-red-800
focus:ring-red-500 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center"
@click="handleDeletePositionClick(position)" type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

34
frontend/src/views/RoleView.vue
View File

@@ -2,43 +2,42 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['角色管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">角色管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">角色管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="roleName"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="角色名" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
<!-- Create Modal toggle -->
<button @click="handleUpsertRoleClick(undefined)"
class="flex items-center block gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 absolute right-5 bottom-2"
class="flex items-center block gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center absolute right-5 bottom-2"
type="button">
新增角色
</button>
</div>
<div class="relative overflow-x-auto ">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -49,23 +48,22 @@
</tr>
</thead>
<tbody>
<tr v-for="role in roles" :key="role.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
<tr v-for="role in roles" :key="role.id" class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + role.id" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + role.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
{{ role.name }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">{{ role.code }}</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div>
<button
class="flex itmes-center justify-center min-w-min text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
class="flex itmes-center justify-center min-w-min text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 "
@click="handleBindPermissionClick(role)" type="button">
<span>分配权限</span>
</button>
@@ -74,7 +72,7 @@
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div class="flex items-center gap-x-2">
<button @click="handleUpsertRoleClick(role)"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 "
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 "
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -86,7 +84,7 @@
</button>
<button
class="flex items-center justify-center min-w-25 block gap-x-1
bg-red-700 hover:bg-red-800 focus:outline-none dark:bg-red-600 dark:hover:bg-red-700
bg-red-700 hover:bg-red-800 focus:outline-none
focus:ring-red-500 block text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5"
@click="handleDeleteRoleClick(role)" type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

33
frontend/src/views/SchedulerView.vue
View File

@@ -2,25 +2,24 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['任务管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">任务管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">任务管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 ">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="jobName"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="任务名称" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
@@ -28,14 +27,13 @@
</div>
<div class="relative overflow-x-auto">
<table
class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400 overflow-x-auto">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 overflow-x-auto">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -53,16 +51,15 @@
</tr>
</thead>
<tbody>
<tr v-for="job in jobs" :key="job.triggerName"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
<tr v-for="job in jobs" :key="job.triggerName" class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + job.triggerName" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + job.triggerName" class="sr-only">checkbox</label>
</div>
</td>
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">{{
`${job.name}:${job.group}` }}</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">{{
`${job.triggerName}:${job.triggerGroup}` }}
@@ -87,7 +84,7 @@
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-x-2">
<button @click="handleCronUpdateClick(job)" :disabled="job.schedulerType !== 'CRON'"
:class="['flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800' , { 'opacity-50 cursor-not-allowed': job.schedulerType !== 'CRON' }]"
:class="['flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 ' , { 'opacity-50 cursor-not-allowed': job.schedulerType !== 'CRON' }]"
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -102,12 +99,12 @@
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center justify-center gap-x-2">
<button
:class="['text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-900 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center']"
:class="['text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center']"
@click="handleResumeJobClick(job)" type="button">
<span>恢复</span>
</button>
<button
:class="['bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center']"
:class="['bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center']"
@click="handlePauseJobClick(job)" type="button">
<span>暂停</span>
</button>

32
frontend/src/views/SettingsView.vue
View File

@@ -1,50 +1,46 @@
<template>
<div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900 ">
<div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 ">
<div class="mb-4 col-span-full xl:mb-2">
<Breadcrumbs :names="['用户设置']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">用户设置</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">用户设置</h1>
</div>
<!-- Right Content -->
<div class="col-span-full xl:col-auto">
</div>
<div class="col-span-1 row-start-3">
<div
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold dark:text-white">个人信息</h3>
<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 sm:p-6 ">
<h3 class="mb-4 text-xl font-semibold ">个人信息</h3>
<form action="#">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 ">
<label for="current-username"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">用户名</label>
<label for="current-username" class="block mb-2 text-sm font-medium text-gray-900 ">用户名</label>
<input type="text" name="current-username" id="current-username" v-model="userForm.username"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
required>
</div>
<div class="col-span-6 ">
<label for="current-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
<label for="current-password" class="block mb-2 text-sm font-medium text-gray-900 ">密码</label>
<input type="password" name="current-password" id="current-password" v-model="userForm.password"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
placeholder="非必填" required>
</div>
<div class="col-span-6 ">
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 ">确认密码</label>
<input type="password" id="password" v-model="userForm.confirmPassword"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
placeholder="非必填" required>
</div>
<div class="col-span-6 ">
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">状态</label>
<select id="category" disabled v-model="userForm.enable"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5
opacity-50 cursor-not-allowed dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 ">状态</label>
<select id="category" disabled v-model="userForm.enable" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5
opacity-50 cursor-not-allowed ">
<option :value=true>启用</option>
<option :value=false>禁用</option>
</select>
</div>
<div class="col-span-6 sm:col-full">
<button
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
@click.prevent="handleUpdateClick" type="submit">保存</button>
</div>
</div>

43
frontend/src/views/UserView.vue
View File

@@ -2,43 +2,42 @@
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full">
<Breadcrumbs :names="['用户管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">用户管理</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">用户管理</h1>
</div>
<div class="relative">
<form class="max-w-sm mb-4 ">
<label for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 20 20">
<svg class="w-4 h-4 text-gray-500 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="username"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
placeholder="用户名" required />
<button type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 "
@click.prevent="handleSearch">搜索</button>
</div>
</form>
<!-- Create Modal toggle -->
<button @click="handleUpsertUserClick(undefined)"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 absolute right-5 bottom-2"
class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center absolute right-5 bottom-2"
type="button">
新增用户
</button>
</div>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 dark:text-gray-400">
<thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<table class="w-full text-sm text-left rtl:text-right shadow-lg rounded-lg text-gray-500 ">
<thead class="text-xs uppercase bg-gray-50 ">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" disabled type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
@@ -50,17 +49,16 @@
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
<tr v-for="user in users" :key="user.id" class="bg-white border-b border-gray-200 hover:bg-gray-50 ">
<td class="w-4 p-4">
<div class="flex items-center">
<input :id="'checkbox-table-search-' + user.id" type="checkbox" disabled
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 ">
<label :for="'checkbox-table-search-' + user.id" class="sr-only">checkbox</label>
</div>
</td>
<td scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white max-w-sm overflow-hidden text-ellipsis">
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap max-w-sm overflow-hidden text-ellipsis">
{{ user.username }}
</td>
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
@@ -75,17 +73,17 @@
<td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
<div class="flex items-center gap-x-2">
<button
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 "
@click="handleBindRoleClick(user)" type="button">
分配角色
</button>
<button
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 "
@click="handleBindPositionClick(user)" type="button">
分配岗位
</button>
<button
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
class="text-gray-900 bg-white border min-w-25 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 "
@click="handleBindDepartmentClick(user)" type="button">
分配部门
</button>
@@ -95,7 +93,7 @@
<!-- Edit Modal toggle -->
<div class="flex items-center gap-x-2">
<button @click="handleUpsertUserClick(user)"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="flex items-center justify-center min-w-25 gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 "
type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
@@ -105,10 +103,9 @@
</svg>
<span>编辑</span>
</button>
<button
class="flex items-center justify-center min-w-25 gap-x-1
bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700
dark:focus:ring-red-900 text-white focus:ring-4 focus:outline-nonefont-medium rounded-lg text-sm px-4 py-2.5"
<button class="flex items-center justify-center min-w-25 gap-x-1
bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300
text-white focus:ring-4 focus:outline-nonefont-medium rounded-lg text-sm px-4 py-2.5"
@click="handleDeleteUserClick(user)" type="button">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"