更新
This commit is contained in:
@@ -45,7 +45,7 @@ class Role extends Controller
|
||||
return response()->json([
|
||||
'code' => 200,
|
||||
'message' => 'success',
|
||||
'data' => ['list' => $result],
|
||||
'data' => $result,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -88,6 +88,14 @@ class User extends Authenticatable implements JWTSubject
|
||||
return $this->roles()->where('code', $roleCode)->exists();
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断用户是否为超级管理员
|
||||
*/
|
||||
public function isSuperAdmin(): bool
|
||||
{
|
||||
return $this->hasRole('super_admin');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 JWT 标识符
|
||||
*
|
||||
|
||||
@@ -9,237 +9,252 @@ use Illuminate\Validation\ValidationException;
|
||||
|
||||
class AuthService
|
||||
{
|
||||
protected $permissionService;
|
||||
protected $permissionService;
|
||||
|
||||
public function __construct(PermissionService $permissionService)
|
||||
{
|
||||
$this->permissionService = $permissionService;
|
||||
}
|
||||
public function __construct(PermissionService $permissionService)
|
||||
{
|
||||
$this->permissionService = $permissionService;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理员登录
|
||||
*/
|
||||
public function login(array $credentials): array
|
||||
{
|
||||
$user = User::where('username', $credentials['username'])->first();
|
||||
/**
|
||||
* 管理员登录
|
||||
*/
|
||||
public function login(array $credentials): array
|
||||
{
|
||||
$user = User::where('username', $credentials['username'])->first();
|
||||
|
||||
if (!$user || !Hash::check($credentials['password'], $user->password)) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['用户名或密码错误'],
|
||||
]);
|
||||
}
|
||||
if (!$user || !Hash::check($credentials['password'], $user->password)) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['用户名或密码错误'],
|
||||
]);
|
||||
}
|
||||
|
||||
if ($user->status !== 1) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['账号已被禁用'],
|
||||
]);
|
||||
}
|
||||
if ($user->status !== 1) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['账号已被禁用'],
|
||||
]);
|
||||
}
|
||||
|
||||
// 更新登录信息
|
||||
$user->update([
|
||||
'last_login_at' => now(),
|
||||
'last_login_ip' => request()->ip(),
|
||||
]);
|
||||
// 更新登录信息
|
||||
$user->update([
|
||||
'last_login_at' => now(),
|
||||
'last_login_ip' => request()->ip(),
|
||||
]);
|
||||
|
||||
// 生成token
|
||||
$token = auth('admin')->login($user);
|
||||
// 生成token
|
||||
$token = auth('admin')->login($user);
|
||||
|
||||
// 获取用户菜单
|
||||
$menu = $this->getUserMenu($user);
|
||||
// 获取用户菜单
|
||||
$menu = $this->getUserMenu($user);
|
||||
|
||||
// 获取用户权限列表
|
||||
$permissions = $this->getUserPermissions($user);
|
||||
// 获取用户权限列表
|
||||
$permissions = $this->getUserPermissions($user);
|
||||
|
||||
return [
|
||||
'token' => $token,
|
||||
'expires_in' => auth('admin')->factory()->getTTL() * 60,
|
||||
'user' => $this->getUserInfo($user),
|
||||
'menu' => $menu,
|
||||
'permissions' => $permissions,
|
||||
];
|
||||
}
|
||||
return [
|
||||
'token' => $token,
|
||||
'expires_in' => auth('admin')->factory()->getTTL() * 60,
|
||||
'user' => $this->getUserInfo($user),
|
||||
'menu' => $menu,
|
||||
'permissions' => $permissions,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理员登出
|
||||
*/
|
||||
public function logout(): void
|
||||
{
|
||||
auth('admin')->logout();
|
||||
}
|
||||
/**
|
||||
* 管理员登出
|
||||
*/
|
||||
public function logout(): void
|
||||
{
|
||||
auth('admin')->logout();
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新token
|
||||
*/
|
||||
public function refresh(): array
|
||||
{
|
||||
$newToken = auth('admin')->refresh();
|
||||
$user = auth('admin')->user();
|
||||
/**
|
||||
* 刷新token
|
||||
*/
|
||||
public function refresh(): array
|
||||
{
|
||||
$newToken = auth('admin')->refresh();
|
||||
$user = auth('admin')->user();
|
||||
|
||||
// 生成新的refresh token
|
||||
$newRefreshToken = auth('admin')->refresh();
|
||||
// 生成新的refresh token
|
||||
$newRefreshToken = auth('admin')->refresh();
|
||||
|
||||
// 获取用户菜单
|
||||
$menu = $this->getUserMenu($user);
|
||||
// 获取用户菜单
|
||||
$menu = $this->getUserMenu($user);
|
||||
|
||||
// 获取用户权限列表
|
||||
$permissions = $this->getUserPermissions($user);
|
||||
// 获取用户权限列表
|
||||
$permissions = $this->getUserPermissions($user);
|
||||
|
||||
return [
|
||||
'token' => $newToken,
|
||||
'refreshToken' => $newRefreshToken,
|
||||
'user' => $this->getUserInfo($user),
|
||||
'menu' => $menu,
|
||||
'permissions' => $permissions,
|
||||
];
|
||||
}
|
||||
return [
|
||||
'token' => $newToken,
|
||||
'refreshToken' => $newRefreshToken,
|
||||
'user' => $this->getUserInfo($user),
|
||||
'menu' => $menu,
|
||||
'permissions' => $permissions,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前用户信息
|
||||
*/
|
||||
public function me(): array
|
||||
{
|
||||
$user = auth('admin')->user();
|
||||
return $this->getUserInfo($user);
|
||||
}
|
||||
/**
|
||||
* 获取当前用户信息
|
||||
*/
|
||||
public function me(): array
|
||||
{
|
||||
$user = auth('admin')->user();
|
||||
return $this->getUserInfo($user);
|
||||
}
|
||||
|
||||
/**
|
||||
* 找回密码
|
||||
*/
|
||||
public function resetPassword(array $data): void
|
||||
{
|
||||
$user = User::where('username', $data['username'])
|
||||
->orWhere('email', $data['username'])
|
||||
->orWhere('phone', $data['username'])
|
||||
->first();
|
||||
/**
|
||||
* 找回密码
|
||||
*/
|
||||
public function resetPassword(array $data): void
|
||||
{
|
||||
$user = User::where('username', $data['username'])
|
||||
->orWhere('email', $data['username'])
|
||||
->orWhere('phone', $data['username'])
|
||||
->first();
|
||||
|
||||
if (!$user) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['用户不存在'],
|
||||
]);
|
||||
}
|
||||
if (!$user) {
|
||||
throw ValidationException::withMessages([
|
||||
'username' => ['用户不存在'],
|
||||
]);
|
||||
}
|
||||
|
||||
$user->update([
|
||||
'password' => Hash::make($data['password']),
|
||||
]);
|
||||
}
|
||||
$user->update([
|
||||
'password' => Hash::make($data['password']),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
public function changePassword(array $data): void
|
||||
{
|
||||
$user = auth('admin')->user();
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
public function changePassword(array $data): void
|
||||
{
|
||||
$user = auth('admin')->user();
|
||||
|
||||
if (!Hash::check($data['old_password'], $user->password)) {
|
||||
throw ValidationException::withMessages([
|
||||
'old_password' => ['原密码错误'],
|
||||
]);
|
||||
}
|
||||
if (!Hash::check($data['old_password'], $user->password)) {
|
||||
throw ValidationException::withMessages([
|
||||
'old_password' => ['原密码错误'],
|
||||
]);
|
||||
}
|
||||
|
||||
$user->update([
|
||||
'password' => Hash::make($data['password']),
|
||||
]);
|
||||
}
|
||||
$user->update([
|
||||
'password' => Hash::make($data['password']),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息详情
|
||||
*/
|
||||
private function getUserInfo(User $user): array
|
||||
{
|
||||
$user->load(['department', 'roles.permissions']);
|
||||
/**
|
||||
* 获取用户信息详情
|
||||
*/
|
||||
private function getUserInfo(User $user): array
|
||||
{
|
||||
$user->load(['department', 'roles.permissions']);
|
||||
|
||||
return [
|
||||
'id' => $user->id,
|
||||
'username' => $user->username,
|
||||
'real_name' => $user->real_name,
|
||||
'email' => $user->email,
|
||||
'phone' => $user->phone,
|
||||
'avatar' => $user->avatar,
|
||||
'department' => $user->department ? [
|
||||
'id' => $user->department->id,
|
||||
'name' => $user->department->name,
|
||||
] : null,
|
||||
'roles' => $user->roles->pluck('name')->toArray(),
|
||||
'permissions' => $this->getUserPermissions($user),
|
||||
'status' => $user->status,
|
||||
'last_login_at' => $user->last_login_at ? $user->last_login_at->toDateTimeString() : null,
|
||||
];
|
||||
}
|
||||
return [
|
||||
'id' => $user->id,
|
||||
'username' => $user->username,
|
||||
'real_name' => $user->real_name,
|
||||
'email' => $user->email,
|
||||
'phone' => $user->phone,
|
||||
'avatar' => $user->avatar,
|
||||
'department' => $user->department ? [
|
||||
'id' => $user->department->id,
|
||||
'name' => $user->department->name,
|
||||
] : null,
|
||||
'roles' => $user->roles->pluck('name')->toArray(),
|
||||
'permissions' => $this->getUserPermissions($user),
|
||||
'status' => $user->status,
|
||||
'last_login_at' => $user->last_login_at ? $user->last_login_at->toDateTimeString() : null,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户菜单
|
||||
*/
|
||||
private function getUserMenu(User $user): array
|
||||
{
|
||||
// 获取用户的所有权限
|
||||
$permissionIds = [];
|
||||
foreach ($user->roles as $role) {
|
||||
foreach ($role->permissions as $permission) {
|
||||
$permissionIds[] = $permission->id;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取用户菜单
|
||||
*/
|
||||
private function getUserMenu(User $user): array
|
||||
{
|
||||
// 超级管理员获取所有菜单
|
||||
if ($user->isSuperAdmin()) {
|
||||
$menuPermissions = \App\Models\Auth\Permission::where('type', 'menu')
|
||||
->where('status', 1)
|
||||
->orderBy('sort', 'asc')
|
||||
->get();
|
||||
} else {
|
||||
// 获取用户的所有权限
|
||||
$permissionIds = [];
|
||||
foreach ($user->roles as $role) {
|
||||
foreach ($role->permissions as $permission) {
|
||||
$permissionIds[] = $permission->id;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询菜单类型的权限
|
||||
$menuPermissions = \App\Models\Auth\Permission::whereIn('id', $permissionIds)
|
||||
->where('type', 'menu')
|
||||
->where('status', 1)
|
||||
->orderBy('sort', 'asc')
|
||||
->get();
|
||||
// 查询菜单类型的权限
|
||||
$menuPermissions = \App\Models\Auth\Permission::whereIn('id', $permissionIds)
|
||||
->where('type', 'menu')
|
||||
->where('status', 1)
|
||||
->orderBy('sort', 'asc')
|
||||
->get();
|
||||
}
|
||||
|
||||
// 构建菜单树
|
||||
return $this->buildMenuTree($menuPermissions);
|
||||
}
|
||||
// 构建菜单树
|
||||
return $this->buildMenuTree($menuPermissions);
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建菜单树
|
||||
*/
|
||||
private function buildMenuTree($permissions, $parentId = 0): array
|
||||
{
|
||||
$tree = [];
|
||||
foreach ($permissions as $permission) {
|
||||
if ($permission->parent_id == $parentId) {
|
||||
$node = [
|
||||
'path' => $permission->path,
|
||||
'name' => $permission->name,
|
||||
'title' => $permission->title,
|
||||
'meta' => $permission->meta ? json_decode($permission->meta, true) : [],
|
||||
];
|
||||
/**
|
||||
* 构建菜单树
|
||||
*/
|
||||
private function buildMenuTree($permissions, $parentId = 0): array
|
||||
{
|
||||
$tree = [];
|
||||
foreach ($permissions as $permission) {
|
||||
if ($permission->parent_id == $parentId) {
|
||||
$node = [
|
||||
'path' => $permission->path,
|
||||
'name' => $permission->name,
|
||||
'title' => $permission->title,
|
||||
'meta' => $permission->meta ? json_decode($permission->meta, true) : [],
|
||||
];
|
||||
|
||||
// 添加组件路径
|
||||
if ($permission->component) {
|
||||
$node['component'] = $permission->component;
|
||||
}
|
||||
// 添加组件路径
|
||||
if ($permission->component) {
|
||||
$node['component'] = $permission->component;
|
||||
}
|
||||
|
||||
// 添加重定向
|
||||
if (!empty($node['meta']['redirect'])) {
|
||||
$node['redirect'] = $node['meta']['redirect'];
|
||||
}
|
||||
// 添加重定向
|
||||
if (!empty($node['meta']['redirect'])) {
|
||||
$node['redirect'] = $node['meta']['redirect'];
|
||||
}
|
||||
|
||||
// 递归构建子菜单
|
||||
$children = $this->buildMenuTree($permissions, $permission->id);
|
||||
if (!empty($children)) {
|
||||
$node['children'] = $children;
|
||||
}
|
||||
// 递归构建子菜单
|
||||
$children = $this->buildMenuTree($permissions, $permission->id);
|
||||
if (!empty($children)) {
|
||||
$node['children'] = $children;
|
||||
}
|
||||
|
||||
$tree[] = $node;
|
||||
}
|
||||
}
|
||||
return $tree;
|
||||
}
|
||||
$tree[] = $node;
|
||||
}
|
||||
}
|
||||
return $tree;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户权限列表
|
||||
*/
|
||||
private function getUserPermissions(User $user): array
|
||||
{
|
||||
$permissions = [];
|
||||
foreach ($user->roles as $role) {
|
||||
foreach ($role->permissions as $permission) {
|
||||
if (!in_array($permission->name, $permissions)) {
|
||||
$permissions[] = $permission->name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return $permissions;
|
||||
}
|
||||
/**
|
||||
* 获取用户权限列表
|
||||
*/
|
||||
private function getUserPermissions(User $user): array
|
||||
{
|
||||
// 超级管理员获取所有权限
|
||||
if ($user->isSuperAdmin()) {
|
||||
return \App\Models\Auth\Permission::where('status', 1)
|
||||
->pluck('name')
|
||||
->toArray();
|
||||
}
|
||||
|
||||
$permissions = [];
|
||||
foreach ($user->roles as $role) {
|
||||
foreach ($role->permissions as $permission) {
|
||||
if (!in_array($permission->name, $permissions)) {
|
||||
$permissions[] = $permission->name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return $permissions;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -659,112 +659,114 @@ class SystemSeeder extends Seeder
|
||||
{
|
||||
$configs = [
|
||||
[
|
||||
'group' => 'basic',
|
||||
'group' => 'site',
|
||||
'key' => 'site_name',
|
||||
'name' => '网站名称',
|
||||
'value' => 'Laravel Swoole 管理系统',
|
||||
'default_value' => 'Laravel Swoole 管理系统',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '系统显示的网站名称',
|
||||
'sort' => 1,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'basic',
|
||||
'group' => 'site',
|
||||
'key' => 'site_logo',
|
||||
'name' => '网站Logo',
|
||||
'value' => '',
|
||||
'default_value' => '',
|
||||
'type' => 'image',
|
||||
'type' => 'file',
|
||||
'description' => '系统Logo图片地址',
|
||||
'sort' => 2,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'basic',
|
||||
'group' => 'site',
|
||||
'key' => 'site_copyright',
|
||||
'name' => '版权信息',
|
||||
'value' => '© 2024 Laravel Swoole Admin',
|
||||
'default_value' => '© 2024 Laravel Swoole Admin',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '网站底部版权信息',
|
||||
'sort' => 3,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'basic',
|
||||
'group' => 'site',
|
||||
'key' => 'site_icp',
|
||||
'name' => '备案号',
|
||||
'value' => '',
|
||||
'default_value' => '',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '网站备案号',
|
||||
'sort' => 4,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'upload',
|
||||
'key' => 'upload_max_size',
|
||||
'name' => '上传最大限制',
|
||||
'value' => '10',
|
||||
'default_value' => '10',
|
||||
'type' => 'number',
|
||||
'description' => '文件上传最大限制（MB）',
|
||||
'sort' => 1,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'upload',
|
||||
'key' => 'upload_allowed_types',
|
||||
'name' => '允许上传类型',
|
||||
'value' => 'jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx',
|
||||
'default_value' => 'jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '允许上传的文件扩展名',
|
||||
'sort' => 2,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'system',
|
||||
'key' => 'user_default_avatar',
|
||||
'name' => '默认头像',
|
||||
'value' => '',
|
||||
'default_value' => '',
|
||||
'type' => 'image',
|
||||
'type' => 'file',
|
||||
'description' => '用户默认头像地址',
|
||||
'sort' => 1,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'system',
|
||||
'key' => 'system_timezone',
|
||||
'name' => '系统时区',
|
||||
'value' => 'Asia/Shanghai',
|
||||
'default_value' => 'Asia/Shanghai',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '系统默认时区',
|
||||
'sort' => 2,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'system',
|
||||
'key' => 'system_language',
|
||||
'name' => '系统语言',
|
||||
'value' => 'zh-CN',
|
||||
'default_value' => 'zh-CN',
|
||||
'type' => 'input',
|
||||
'type' => 'string',
|
||||
'description' => '系统默认语言',
|
||||
'sort' => 3,
|
||||
'is_system' => true,
|
||||
'status' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
[
|
||||
'group' => 'system',
|
||||
'key' => 'enable_register',
|
||||
'name' => '开启注册',
|
||||
'value' => '1',
|
||||
'type' => 'boolean',
|
||||
'description' => '是否开启用户注册功能',
|
||||
'sort' => 4,
|
||||
'is_system' => true,
|
||||
'status' => 1,
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sc-icon-picker">
|
||||
<a-input :value="selectedIcon ? '' : ''" :placeholder="placeholder" readonly @click="handleOpenPicker">
|
||||
<a-input :value="selectedIcon || ''" :placeholder="placeholder" readonly @click="handleOpenPicker">
|
||||
<template #prefix v-if="selectedIcon">
|
||||
<component :is="selectedIcon" />
|
||||
</template>
|
||||
@@ -10,51 +10,65 @@
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<a-modal v-model:open="visible" title="选择图标" :width="800" :footer="null" @cancel="handleCancel">
|
||||
<a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
|
||||
<a-tab-pane key="antd" tab="Ant Design">
|
||||
<div class="icon-search">
|
||||
<a-input v-model:value="searchAntdValue" placeholder="搜索图标..." allow-clear>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<a-modal v-model:open="visible" title="选择图标" :width="900" :footer="null" @cancel="handleCancel">
|
||||
<div class="icon-picker-content">
|
||||
<!-- 搜索框 -->
|
||||
<div class="icon-search">
|
||||
<a-input
|
||||
v-model:value="searchValue"
|
||||
placeholder="搜索图标名称..."
|
||||
allow-clear
|
||||
@change="handleSearchChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<div class="icon-categories" v-if="!searchValue">
|
||||
<a-tag
|
||||
v-for="category in iconCategories"
|
||||
:key="category.key"
|
||||
:class="['category-tag', { active: activeCategory === category.key }]"
|
||||
@click="handleCategoryChange(category.key)"
|
||||
>
|
||||
{{ category.label }}
|
||||
</a-tag>
|
||||
</div>
|
||||
|
||||
<!-- 最近使用 -->
|
||||
<div v-if="!searchValue && activeCategory === 'recent' && recentIcons.length > 0" class="recent-section">
|
||||
<div class="section-title">最近使用</div>
|
||||
<div class="icon-list">
|
||||
<div
|
||||
v-for="icon in filteredAntdIcons"
|
||||
v-for="icon in recentIcons"
|
||||
:key="icon"
|
||||
:class="['icon-item', { active: tempIcon === icon }]"
|
||||
@click="handleSelectIcon(icon)"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<div class="icon-name">{{ icon }}</div>
|
||||
<CloseCircleFilled class="recent-remove" @click.stop="handleRemoveRecent(icon)" />
|
||||
</div>
|
||||
<a-empty v-if="filteredAntdIcons.length === 0" description="暂无图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="element" tab="Element Plus">
|
||||
<div class="icon-search">
|
||||
<a-input v-model:value="searchElementValue" placeholder="搜索图标..." allow-clear>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
|
||||
<!-- 图标列表 -->
|
||||
<div class="icon-list" v-show="activeCategory !== 'recent' || searchValue || (activeCategory === 'recent' && recentIcons.length === 0)">
|
||||
<div
|
||||
v-for="icon in filteredIcons"
|
||||
:key="icon"
|
||||
:class="['icon-item', { active: tempIcon === icon }]"
|
||||
@click="handleSelectIcon(icon)"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<div class="icon-name">{{ icon }}</div>
|
||||
</div>
|
||||
<div class="icon-list">
|
||||
<div
|
||||
v-for="icon in filteredElementIcons"
|
||||
:key="icon"
|
||||
:class="['icon-item', { active: tempIcon === icon }]"
|
||||
@click="handleSelectIcon(icon)"
|
||||
>
|
||||
<component :is="icon" />
|
||||
<div class="icon-name">{{ icon.replace('El', '') }}</div>
|
||||
</div>
|
||||
<a-empty v-if="filteredElementIcons.length === 0" description="暂无图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-empty v-if="filteredIcons.length === 0" description="暂无图标" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,8 +76,9 @@
|
||||
<script setup>
|
||||
/**
|
||||
* @component scIconPicker
|
||||
* @description 图标选择器组件，支持 Ant Design Vue 图标库
|
||||
*/
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue'
|
||||
|
||||
@@ -81,323 +96,214 @@ const props = defineProps({
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const visible = ref(false)
|
||||
const activeTab = ref('antd')
|
||||
const searchAntdValue = ref('')
|
||||
const searchElementValue = ref('')
|
||||
const activeCategory = ref('all')
|
||||
const searchValue = ref('')
|
||||
const tempIcon = ref('')
|
||||
const recentIcons = ref([])
|
||||
const RECENT_ICONS_KEY = 'sc-icon-picker-recent'
|
||||
const MAX_RECENT_ICONS = 12
|
||||
|
||||
// Ant Design 图标列表（常用图标）
|
||||
const antdIcons = [
|
||||
'HomeOutlined',
|
||||
'UserOutlined',
|
||||
'SettingOutlined',
|
||||
'EditOutlined',
|
||||
'DeleteOutlined',
|
||||
'PlusOutlined',
|
||||
'MinusOutlined',
|
||||
'CheckOutlined',
|
||||
'CloseOutlined',
|
||||
'SearchOutlined',
|
||||
'FilterOutlined',
|
||||
'ReloadOutlined',
|
||||
'DownloadOutlined',
|
||||
'UploadOutlined',
|
||||
'FileTextOutlined',
|
||||
'FolderOutlined',
|
||||
'PictureOutlined',
|
||||
'VideoCameraOutlined',
|
||||
'AudioOutlined',
|
||||
'FileOutlined',
|
||||
'CalendarOutlined',
|
||||
'ClockCircleOutlined',
|
||||
'HeartOutlined',
|
||||
'StarOutlined',
|
||||
'ThumbUpOutlined',
|
||||
'MessageOutlined',
|
||||
'PhoneOutlined',
|
||||
'MailOutlined',
|
||||
'EnvironmentOutlined',
|
||||
'GlobalOutlined',
|
||||
'LinkOutlined',
|
||||
'LockOutlined',
|
||||
'UnlockOutlined',
|
||||
'EyeOutlined',
|
||||
'EyeInvisibleOutlined',
|
||||
'ArrowLeftOutlined',
|
||||
'ArrowRightOutlined',
|
||||
'ArrowUpOutlined',
|
||||
'ArrowDownOutlined',
|
||||
'CaretLeftOutlined',
|
||||
'CaretRightOutlined',
|
||||
'CaretUpOutlined',
|
||||
'CaretDownOutlined',
|
||||
'LeftOutlined',
|
||||
'RightOutlined',
|
||||
'UpOutlined',
|
||||
'DownOutlined',
|
||||
'MenuFoldOutlined',
|
||||
'MenuUnfoldOutlined',
|
||||
'BarsOutlined',
|
||||
'MoreOutlined',
|
||||
'EllipsisOutlined',
|
||||
'DashboardOutlined',
|
||||
'AppstoreOutlined',
|
||||
'LaptopOutlined',
|
||||
'DesktopOutlined',
|
||||
'TabletOutlined',
|
||||
'MobileOutlined',
|
||||
'WifiOutlined',
|
||||
'BluetoothOutlined',
|
||||
'ThunderboltOutlined',
|
||||
'BulbOutlined',
|
||||
'SoundOutlined',
|
||||
'NotificationOutlined',
|
||||
'BellOutlined',
|
||||
'AlertOutlined',
|
||||
'WarningOutlined',
|
||||
'InfoCircleOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'CheckCircleOutlined',
|
||||
'CloseCircleOutlined',
|
||||
'StopOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'SafetyOutlined',
|
||||
'ShieldCheckOutlined',
|
||||
'SecurityScanOutlined',
|
||||
'KeyOutlined',
|
||||
'IdcardOutlined',
|
||||
'ProfileOutlined',
|
||||
'SolutionOutlined',
|
||||
'ContactsOutlined',
|
||||
'TeamOutlined',
|
||||
'UsergroupAddOutlined',
|
||||
'UsergroupDeleteOutlined',
|
||||
'CrownOutlined',
|
||||
'GoldOutlined',
|
||||
'MoneyCollectOutlined',
|
||||
'BankOutlined',
|
||||
'PayCircleOutlined',
|
||||
'CreditCardOutlined',
|
||||
'WalletOutlined',
|
||||
'ShoppingCartOutlined',
|
||||
'ShoppingOutlined',
|
||||
'GiftOutlined',
|
||||
'HddOutlined',
|
||||
'DatabaseOutlined',
|
||||
'CloudOutlined',
|
||||
'CloudUploadOutlined',
|
||||
'CloudDownloadOutlined',
|
||||
'ServerOutlined',
|
||||
'AuditOutlined',
|
||||
'NodeIndexOutlined',
|
||||
'ReconciliationOutlined',
|
||||
'PartitionOutlined',
|
||||
'AccountBookOutlined',
|
||||
'ProjectOutlined',
|
||||
'ControlOutlined',
|
||||
'MonitorOutlined',
|
||||
'TagsOutlined',
|
||||
'TagOutlined',
|
||||
'BookOutlined',
|
||||
'ReadOutlined',
|
||||
'ExperimentOutlined',
|
||||
'FireOutlined',
|
||||
'RocketOutlined',
|
||||
'TrophyOutlined',
|
||||
'MedalOutlined',
|
||||
'DiamondOutlined',
|
||||
'ThunderboltTwoTone',
|
||||
// 图标分类
|
||||
const iconCategories = [
|
||||
{ key: 'recent', label: '最近使用' },
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'direction', label: '方向' },
|
||||
{ key: 'edit', label: '编辑' },
|
||||
{ key: 'data', label: '数据' },
|
||||
{ key: 'media', label: '媒体' },
|
||||
{ key: 'user', label: '用户' },
|
||||
{ key: 'system', label: '系统' },
|
||||
{ key: 'commerce', label: '商务' },
|
||||
]
|
||||
|
||||
// Element Plus 图标列表（常用图标）
|
||||
const elementIcons = [
|
||||
'ElIconEdit',
|
||||
'ElIconDelete',
|
||||
'ElIconSearch',
|
||||
'ElIconClose',
|
||||
'ElIconCheck',
|
||||
'ElIconPlus',
|
||||
'ElIconMinus',
|
||||
'ElIconUpload',
|
||||
'ElIconDownload',
|
||||
'ElIconSetting',
|
||||
'ElIconRefresh',
|
||||
'ElIconRefreshLeft',
|
||||
'ElIconRefreshRight',
|
||||
'ElIconMenu',
|
||||
'ElIconMore',
|
||||
'ElIconMoreFilled',
|
||||
'ElIconStar',
|
||||
'ElIconStarFilled',
|
||||
'ElIconSunny',
|
||||
'ElIconMoon',
|
||||
'ElIconBell',
|
||||
'ElIconBellFilled',
|
||||
'ElIconMessage',
|
||||
'ElIconMessageFilled',
|
||||
'ElIconChatDotRound',
|
||||
'ElIconChatLineSquare',
|
||||
'ElIconChatDotSquare',
|
||||
'ElIconPhone',
|
||||
'ElIconPhoneFilled',
|
||||
'ElIconLocation',
|
||||
'ElIconLocationFilled',
|
||||
'ElIconLocationInformation',
|
||||
'ElIconView',
|
||||
'ElIconHide',
|
||||
'ElIconLock',
|
||||
'ElIconUnlock',
|
||||
'ElIconKey',
|
||||
'ElIconTickets',
|
||||
'ElIconDocument',
|
||||
'ElIconDocumentAdd',
|
||||
'ElIconDocumentDelete',
|
||||
'ElIconDocumentCopy',
|
||||
'ElIconDocumentChecked',
|
||||
'ElIconDocumentRemove',
|
||||
'ElIconFolder',
|
||||
'ElIconFolderOpened',
|
||||
'ElIconFolderAdd',
|
||||
'ElIconFolderDelete',
|
||||
'ElIconFolderChecked',
|
||||
'ElIconFiles',
|
||||
'ElIconPicture',
|
||||
'ElIconPictureRounded',
|
||||
'ElIconPictureFilled',
|
||||
'ElIconVideoCamera',
|
||||
'ElIconVideoCameraFilled',
|
||||
'ElIconMicrophone',
|
||||
'ElIconMicrophoneFilled',
|
||||
'ElIconHeadset',
|
||||
'ElIconHeadsetFilled',
|
||||
'ElIconMuteNotification',
|
||||
'ElIconNotification',
|
||||
'ElIconWarning',
|
||||
'ElIconWarningFilled',
|
||||
'ElIconInfoFilled',
|
||||
'ElIconSuccessFilled',
|
||||
'ElIconCircleCheck',
|
||||
'ElIconCircleCheckFilled',
|
||||
'ElIconCircleClose',
|
||||
'ElIconCircleCloseFilled',
|
||||
'ElIconCirclePlus',
|
||||
'ElIconCirclePlusFilled',
|
||||
'ElIconCircleMinus',
|
||||
'ElIconCircleMinusFilled',
|
||||
'ElIconAim',
|
||||
'ElIconPosition',
|
||||
'ElIconCompass',
|
||||
'ElIconMapLocation',
|
||||
'ElIconPromotion',
|
||||
'ElIconDownload',
|
||||
'ElIconUploadFilled',
|
||||
'ElIconShare',
|
||||
'ElIconConnection',
|
||||
'ElIconLink',
|
||||
'ElIconUnlink',
|
||||
'ElIconOperation',
|
||||
'ElIconDataAnalysis',
|
||||
'ElIconDataLine',
|
||||
'ElIconDataBoard',
|
||||
'ElIconHistogram',
|
||||
'ElIconTrendCharts',
|
||||
'ElIconPieChart',
|
||||
'ElIconOdometer',
|
||||
'ElIconMonitor',
|
||||
'ElIconTimer',
|
||||
'ElIconClock',
|
||||
'ElIconAlarmClock',
|
||||
'ElIconCalendar',
|
||||
'ElIconDate',
|
||||
'ElIconSwitch',
|
||||
'ElIconSwitchButton',
|
||||
'ElIconTools',
|
||||
'ElIconScrewdriver',
|
||||
'ElIconHammer',
|
||||
'ElIconBrush',
|
||||
'ElIconEditPen',
|
||||
'ElIconBriefcase',
|
||||
'ElIconWallet',
|
||||
'ElIconGoods',
|
||||
'ElIconShoppingCart',
|
||||
'ElIconShoppingCartFull',
|
||||
'ElIconShoppingBag',
|
||||
'ElIconPresent',
|
||||
'ElIconSoldOut',
|
||||
'ElIconSell',
|
||||
'ElIconDiscount',
|
||||
'ElIconTicket',
|
||||
'ElIconCoin',
|
||||
'ElIconMoney',
|
||||
'ElIconWalletFilled',
|
||||
'ElIconCreditCard',
|
||||
'ElIconUser',
|
||||
'ElIconUserFilled',
|
||||
'ElIconAvatar',
|
||||
'ElIconSuitcase',
|
||||
'ElIconGrid',
|
||||
'ElIconMenuFilled',
|
||||
'ElIconHomeFilled',
|
||||
'ElIconHouse',
|
||||
'ElIconOfficeBuilding',
|
||||
'ElIconSchool',
|
||||
'ElIconReading',
|
||||
'ElIconReadingLamp',
|
||||
'ElIconNotebook',
|
||||
'ElIconNotebookFilled',
|
||||
'ElIconFinished',
|
||||
'ElIconCollection',
|
||||
'ElIconCollectionTag',
|
||||
'ElIconFiles',
|
||||
'ElIconPostcard',
|
||||
'ElIconMemo',
|
||||
'ElIconStamp',
|
||||
'ElIconPriceTag',
|
||||
'ElIconMedal',
|
||||
'ElIconTrophy',
|
||||
'ElIconTrophyBase',
|
||||
'ElIconFirstAidKit',
|
||||
'ElIconToiletPaper',
|
||||
'ElIconAim',
|
||||
'ElIconSFlag',
|
||||
'ElIconSOpportunity',
|
||||
'ElIconMagicStick',
|
||||
'ElIconHelp',
|
||||
'ElIconQuestionFilled',
|
||||
'ElIconWarning',
|
||||
'ElIconWarningFilled',
|
||||
]
|
||||
// Ant Design 图标分类列表
|
||||
const iconCategoriesMap = {
|
||||
direction: [
|
||||
'ArrowLeftOutlined', 'ArrowRightOutlined', 'ArrowUpOutlined', 'ArrowDownOutlined',
|
||||
'LeftOutlined', 'RightOutlined', 'UpOutlined', 'DownOutlined',
|
||||
'CaretLeftOutlined', 'CaretRightOutlined', 'CaretUpOutlined', 'CaretDownOutlined',
|
||||
'BackwardOutlined', 'ForwardOutlined', 'FastBackwardOutlined', 'FastForwardOutlined',
|
||||
'ShrinkOutlined', 'ArrowsAltOutlined', 'VerticalAlignTopOutlined', 'VerticalAlignBottomOutlined',
|
||||
'RollbackOutlined', 'EnterOutlined', 'RetweetOutlined', 'SwapOutlined',
|
||||
'SwapLeftOutlined', 'SwapRightOutlined', 'UpCircleOutlined', 'DownCircleOutlined',
|
||||
'LeftCircleOutlined', 'RightCircleOutlined', 'ArrowRightOutlined', 'ArrowLeftOutlined',
|
||||
],
|
||||
edit: [
|
||||
'EditOutlined', 'DeleteOutlined', 'PlusOutlined', 'MinusOutlined',
|
||||
'CheckOutlined', 'CloseOutlined', 'FormOutlined', 'CopyOutlined',
|
||||
'ScissorOutlined', 'SnippetsOutlined', 'DiffOutlined', 'HighlightOutlined',
|
||||
'AlignLeftOutlined', 'AlignCenterOutlined', 'AlignRightOutlined', 'AlignCenterOutlined',
|
||||
'BoldOutlined', 'ItalicOutlined', 'UnderlineOutlined', 'StrikethroughOutlined',
|
||||
'RedoOutlined', 'UndoOutlined', 'FileAddOutlined', 'FileSyncOutlined',
|
||||
],
|
||||
data: [
|
||||
'DatabaseOutlined', 'CloudOutlined', 'CloudServerOutlined', 'CloudUploadOutlined',
|
||||
'CloudDownloadOutlined', 'DatabaseOutlined', 'HddOutlined', 'ServerOutlined',
|
||||
'ReconciliationOutlined', 'AccountBookOutlined', 'AuditOutlined', 'BarChartOutlined',
|
||||
'AreaChartOutlined', 'DotChartOutlined', 'LineChartOutlined', 'PieChartOutlined',
|
||||
'FundOutlined', 'SlidersOutlined', 'ControlOutlined', 'ExperimentOutlined',
|
||||
'ProjectOutlined', 'NodeIndexOutlined', 'PartitionOutlined', 'ApartmentOutlined',
|
||||
],
|
||||
media: [
|
||||
'PictureOutlined', 'VideoCameraOutlined', 'AudioOutlined', 'FileImageOutlined',
|
||||
'FilePdfOutlined', 'FileWordOutlined', 'FileExcelOutlined', 'FileZipOutlined',
|
||||
'FolderOutlined', 'FolderOpenOutlined', 'FileTextOutlined', 'FileOutlined',
|
||||
'FileMarkdownOutlined', 'FileUnknownOutlined', 'FilePptOutlined', 'FileAddOutlined',
|
||||
'CameraOutlined', 'QrcodeOutlined', 'BarcodeOutlined', 'ScanOutlined',
|
||||
'MusicOutlined', 'SoundOutlined', 'CustomerServiceOutlined', 'MessageOutlined',
|
||||
],
|
||||
user: [
|
||||
'UserOutlined', 'UsergroupAddOutlined', 'UsergroupDeleteOutlined', 'TeamOutlined',
|
||||
'SolutionOutlined', 'ContactsOutlined', 'IdcardOutlined', 'ProfileOutlined',
|
||||
'AliwangwangOutlined', 'SmileOutlined', 'MehOutlined', 'FrownOutlined',
|
||||
'HeartOutlined', 'StarOutlined', 'LikeOutlined', 'DislikeOutlined',
|
||||
'ThumbUpOutlined', 'SkypeOutlined', 'GithubOutlined', 'WechatOutlined',
|
||||
'TwitterOutlined', 'WeiboOutlined', 'FacebookOutlined', 'GoogleOutlined',
|
||||
],
|
||||
system: [
|
||||
'SettingOutlined', 'HomeOutlined', 'DashboardOutlined', 'AppstoreOutlined',
|
||||
'MenuFoldOutlined', 'MenuUnfoldOutlined', 'BarsOutlined', 'MoreOutlined',
|
||||
'BellOutlined', 'NotificationOutlined', 'AlertOutlined', 'WarningOutlined',
|
||||
'CheckCircleOutlined', 'CloseCircleOutlined', 'ExclamationCircleOutlined', 'InfoCircleOutlined',
|
||||
'QuestionCircleOutlined', 'SafetyOutlined', 'SecurityScanOutlined', 'ShieldCheckOutlined',
|
||||
'LockOutlined', 'UnlockOutlined', 'KeyOutlined', 'EyeOutlined', 'EyeInvisibleOutlined',
|
||||
'LogoutOutlined', 'LoginOutlined', 'MobileOutlined', 'LaptopOutlined', 'DesktopOutlined',
|
||||
'ThunderboltOutlined', 'WifiOutlined', 'BluetoothOutlined', 'ApiOutlined',
|
||||
'BugOutlined', 'BuildOutlined', 'CodeOutlined', 'CodeSandboxOutlined',
|
||||
'FunctionOutlined', 'ConsoleSqlOutlined', 'ApiOutlined',
|
||||
],
|
||||
commerce: [
|
||||
'ShoppingCartOutlined', 'ShoppingOutlined', 'GiftOutlined', 'GoldOutlined',
|
||||
'CrownOutlined', 'MedalOutlined', 'TrophyOutlined', 'DiamondOutlined',
|
||||
'BankOutlined', 'CreditCardOutlined', 'PayCircleOutlined', 'WalletOutlined',
|
||||
'MoneyCollectOutlined', 'TransactionOutlined', 'DollarOutlined', 'EuroOutlined',
|
||||
'PoundOutlined', 'YenOutlined', 'GiftFilledOutlined', 'RocketOutlined',
|
||||
'FireOutlined', 'ThunderboltTwoTone', 'BulbOutlined', 'SafetyCertificateOutlined',
|
||||
],
|
||||
all: [
|
||||
'HomeOutlined', 'DashboardOutlined', 'AppstoreOutlined', 'BarsOutlined',
|
||||
'MenuFoldOutlined', 'MenuUnfoldOutlined', 'MoreOutlined', 'EllipsisOutlined',
|
||||
'UserOutlined', 'TeamOutlined', 'UsergroupAddOutlined', 'UsergroupDeleteOutlined',
|
||||
'SettingOutlined', 'ControlOutlined', 'ToolOutlined', 'BuildOutlined',
|
||||
'SearchOutlined', 'FilterOutlined', 'SortAscendingOutlined', 'SortDescendingOutlined',
|
||||
'ReloadOutlined', 'SyncOutlined', 'RedoOutlined', 'UndoOutlined',
|
||||
'EditOutlined', 'DeleteOutlined', 'PlusOutlined', 'MinusOutlined',
|
||||
'CheckOutlined', 'CloseOutlined', 'CheckCircleOutlined', 'CloseCircleOutlined',
|
||||
'ArrowLeftOutlined', 'ArrowRightOutlined', 'ArrowUpOutlined', 'ArrowDownOutlined',
|
||||
'LeftOutlined', 'RightOutlined', 'UpOutlined', 'DownOutlined',
|
||||
'FileTextOutlined', 'FileOutlined', 'FolderOutlined', 'FolderOpenOutlined',
|
||||
'PictureOutlined', 'VideoCameraOutlined', 'AudioOutlined', 'CameraOutlined',
|
||||
'CalendarOutlined', 'ClockCircleOutlined', 'HistoryOutlined', 'FieldTimeOutlined',
|
||||
'HeartOutlined', 'StarOutlined', 'LikeOutlined', 'DislikeOutlined',
|
||||
'MessageOutlined', 'MailOutlined', 'PhoneOutlined', 'WechatOutlined',
|
||||
'EnvironmentOutlined', 'GlobalOutlined', 'CompassOutlined', 'MapOutlined',
|
||||
'LockOutlined', 'UnlockOutlined', 'KeyOutlined', 'SafetyOutlined',
|
||||
'EyeOutlined', 'EyeInvisibleOutlined', 'VisibilityOutlined', 'EyeFilled',
|
||||
'BellOutlined', 'NotificationOutlined', 'AlertOutlined', 'WarningOutlined',
|
||||
'InfoCircleOutlined', 'QuestionCircleOutlined', 'ExclamationCircleOutlined', 'StopOutlined',
|
||||
'DatabaseOutlined', 'CloudOutlined', 'HddOutlined', 'ServerOutlined',
|
||||
'WifiOutlined', 'BluetoothOutlined', 'ApiOutlined', 'CodeOutlined',
|
||||
'LaptopOutlined', 'MobileOutlined', 'TabletOutlined', 'DesktopOutlined',
|
||||
'ThunderboltOutlined', 'BulbOutlined', 'FireOutlined', 'ExperimentOutlined',
|
||||
'ShoppingCartOutlined', 'ShoppingOutlined', 'GiftOutlined', 'WalletOutlined',
|
||||
'CreditCardOutlined', 'BankOutlined', 'PayCircleOutlined', 'MoneyCollectOutlined',
|
||||
'MedalOutlined', 'TrophyOutlined', 'CrownOutlined', 'GoldOutlined',
|
||||
'RocketOutlined', 'FundOutlined', 'PieChartOutlined', 'BarChartOutlined',
|
||||
'AreaChartOutlined', 'LineChartOutlined', 'DotChartOutlined',
|
||||
'FileAddOutlined', 'FileExcelOutlined', 'FilePdfOutlined', 'FileWordOutlined',
|
||||
'UploadOutlined', 'DownloadOutlined', 'ImportOutlined', 'ExportOutlined',
|
||||
'CopyOutlined', 'ScanOutlined', 'QrcodeOutlined', 'BarcodeOutlined',
|
||||
'PrinterOutlined', 'RetweetOutlined', 'SwapOutlined', 'ShareAltOutlined',
|
||||
'ApiOutlined', 'CodeSandboxOutlined', 'ConsoleSqlOutlined', 'FunctionOutlined',
|
||||
],
|
||||
}
|
||||
|
||||
// 加载最近使用的图标
|
||||
const loadRecentIcons = () => {
|
||||
try {
|
||||
const stored = localStorage.getItem(RECENT_ICONS_KEY)
|
||||
if (stored) {
|
||||
recentIcons.value = JSON.parse(stored)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载最近使用图标失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存最近使用的图标
|
||||
const saveRecentIcons = (icon) => {
|
||||
if (!icon) return
|
||||
|
||||
// 移除已存在的相同图标
|
||||
const index = recentIcons.value.indexOf(icon)
|
||||
if (index > -1) {
|
||||
recentIcons.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 添加到开头
|
||||
recentIcons.value.unshift(icon)
|
||||
|
||||
// 限制数量
|
||||
if (recentIcons.value.length > MAX_RECENT_ICONS) {
|
||||
recentIcons.value = recentIcons.value.slice(0, MAX_RECENT_ICONS)
|
||||
}
|
||||
|
||||
// 保存到本地存储
|
||||
try {
|
||||
localStorage.setItem(RECENT_ICONS_KEY, JSON.stringify(recentIcons.value))
|
||||
} catch (error) {
|
||||
console.error('保存最近使用图标失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 移除最近使用的图标
|
||||
const handleRemoveRecent = (icon) => {
|
||||
const index = recentIcons.value.indexOf(icon)
|
||||
if (index > -1) {
|
||||
recentIcons.value.splice(index, 1)
|
||||
try {
|
||||
localStorage.setItem(RECENT_ICONS_KEY, JSON.stringify(recentIcons.value))
|
||||
} catch (error) {
|
||||
console.error('保存最近使用图标失败:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 当前选中的图标
|
||||
const selectedIcon = ref(props.modelValue)
|
||||
|
||||
// 过滤后的 Ant Design 图标
|
||||
const filteredAntdIcons = computed(() => {
|
||||
if (!searchAntdValue.value) {
|
||||
return antdIcons
|
||||
// 获取当前分类的图标
|
||||
const currentCategoryIcons = computed(() => {
|
||||
if (activeCategory.value === 'all') {
|
||||
return iconCategoriesMap.all
|
||||
}
|
||||
return antdIcons.filter((icon) =>
|
||||
icon.toLowerCase().includes(searchAntdValue.value.toLowerCase()),
|
||||
)
|
||||
return iconCategoriesMap[activeCategory.value] || []
|
||||
})
|
||||
|
||||
// 过滤后的 Element 图标
|
||||
const filteredElementIcons = computed(() => {
|
||||
if (!searchElementValue.value) {
|
||||
return elementIcons
|
||||
// 过滤后的图标
|
||||
const filteredIcons = computed(() => {
|
||||
let icons = []
|
||||
|
||||
if (searchValue.value) {
|
||||
// 搜索时从所有图标中筛选
|
||||
const allIcons = iconCategoriesMap.all
|
||||
icons = allIcons.filter((icon) =>
|
||||
icon.toLowerCase().includes(searchValue.value.toLowerCase())
|
||||
)
|
||||
} else if (activeCategory.value === 'recent') {
|
||||
// 最近使用时不显示其他图标
|
||||
icons = []
|
||||
} else {
|
||||
// 根据分类显示
|
||||
icons = currentCategoryIcons.value
|
||||
}
|
||||
return elementIcons.filter((icon) =>
|
||||
icon.toLowerCase().includes(searchElementValue.value.toLowerCase()),
|
||||
)
|
||||
|
||||
return icons
|
||||
})
|
||||
|
||||
// 打开选择器
|
||||
const handleOpenPicker = () => {
|
||||
tempIcon.value = props.modelValue
|
||||
// 根据当前图标设置默认标签页
|
||||
if (props.modelValue) {
|
||||
activeTab.value = props.modelValue.startsWith('El') ? 'element' : 'antd'
|
||||
}
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
@@ -407,9 +313,17 @@ const handleClear = () => {
|
||||
emit('change', '')
|
||||
}
|
||||
|
||||
// 切换标签页
|
||||
const handleTabChange = (key) => {
|
||||
activeTab.value = key
|
||||
// 切换分类
|
||||
const handleCategoryChange = (key) => {
|
||||
activeCategory.value = key
|
||||
}
|
||||
|
||||
// 搜索变化
|
||||
const handleSearchChange = () => {
|
||||
// 搜索时重置分类
|
||||
if (searchValue.value) {
|
||||
activeCategory.value = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
// 选择图标（直接确认并关闭）
|
||||
@@ -417,6 +331,10 @@ const handleSelectIcon = (icon) => {
|
||||
emit('update:modelValue', icon)
|
||||
emit('change', icon)
|
||||
selectedIcon.value = icon
|
||||
|
||||
// 添加到最近使用
|
||||
saveRecentIcons(icon)
|
||||
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
@@ -425,13 +343,18 @@ const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 监听props变化，更新本地状态
|
||||
// 监听 props 变化，更新本地状态
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedIcon.value = newVal
|
||||
}
|
||||
)
|
||||
|
||||
// 组件挂载时加载最近使用的图标
|
||||
onMounted(() => {
|
||||
loadRecentIcons()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -439,18 +362,61 @@ watch(
|
||||
:deep(.ant-input) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-picker-content {
|
||||
.icon-search {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.icon-categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
|
||||
.category-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recent-section {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
padding: 4px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -466,6 +432,7 @@ watch(
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -475,10 +442,17 @@ watch(
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
|
||||
|
||||
.recent-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -488,7 +462,7 @@ watch(
|
||||
}
|
||||
|
||||
:deep(svg) {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -501,8 +475,29 @@ watch(
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.recent-remove {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 14px;
|
||||
color: #ff4d4f;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 77, 95, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -83,7 +83,7 @@ const rules = {
|
||||
// 部门数据
|
||||
const departments = ref([])
|
||||
const departmentFieldNames = {
|
||||
title: 'name',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑配置' : '新增配置'"
|
||||
:width="600"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="配置分组" name="group">
|
||||
<a-select v-model:value="formData.group" placeholder="请选择配置分组" allow-show-search>
|
||||
<a-select-option value="system">系统设置</a-select-option>
|
||||
<a-select-option value="site">站点配置</a-select-option>
|
||||
<a-select-option value="upload">上传配置</a-select-option>
|
||||
<a-select-option value="email">邮件配置</a-select-option>
|
||||
<a-select-option value="sms">短信配置</a-select-option>
|
||||
<a-select-option value="other">其他</a-select-option>
|
||||
<template #notFoundContent>
|
||||
<div style="text-align: center">
|
||||
<a-input v-model:value="customGroup" placeholder="输入新分组" style="margin-bottom: 8px" />
|
||||
<a-button type="primary" size="small" @click="handleAddCustomGroup">添加</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="配置键" name="key">
|
||||
<a-input v-model:value="formData.key" placeholder="请输入配置键，如：site_name" :disabled="isEdit && formData.is_system" />
|
||||
<div style="color: #999; font-size: 12px; margin-top: 4px">唯一标识，建议使用英文下划线命名</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="配置名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入配置名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="数据类型" name="type">
|
||||
<a-select v-model:value="formData.type" placeholder="请选择数据类型">
|
||||
<a-select-option value="string">字符串</a-select-option>
|
||||
<a-select-option value="text">文本</a-select-option>
|
||||
<a-select-option value="number">数字</a-select-option>
|
||||
<a-select-option value="boolean">布尔值</a-select-option>
|
||||
<a-select-option value="select">下拉框</a-select-option>
|
||||
<a-select-option value="radio">单选框</a-select-option>
|
||||
<a-select-option value="checkbox">多选框</a-select-option>
|
||||
<a-select-option value="file">文件</a-select-option>
|
||||
<a-select-option value="json">JSON</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="['select', 'radio', 'checkbox'].includes(formData.type)"
|
||||
label="可选值"
|
||||
name="options"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="optionsText"
|
||||
placeholder="每行一个选项，格式：label:value 例如： 正常:1 禁用:0"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="配置值" name="value">
|
||||
<!-- 字符串输入 -->
|
||||
<a-input
|
||||
v-if="formData.type === 'string'"
|
||||
v-model:value="formData.value"
|
||||
placeholder="请输入配置值"
|
||||
/>
|
||||
|
||||
<!-- 文本域 -->
|
||||
<a-textarea
|
||||
v-else-if="formData.type === 'text'"
|
||||
v-model:value="formData.value"
|
||||
placeholder="请输入配置值"
|
||||
:rows="4"
|
||||
/>
|
||||
|
||||
<!-- 数字输入 -->
|
||||
<a-input-number
|
||||
v-else-if="formData.type === 'number'"
|
||||
v-model:value="formData.value"
|
||||
placeholder="请输入数字"
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
||||
<!-- 布尔值 -->
|
||||
<a-switch
|
||||
v-else-if="formData.type === 'boolean'"
|
||||
v-model:checked="formData.value"
|
||||
checked-children="是"
|
||||
un-checked-children="否"
|
||||
/>
|
||||
|
||||
<!-- 下拉框/单选框/多选框 -->
|
||||
<a-select
|
||||
v-else-if="['select', 'radio'].includes(formData.type)"
|
||||
v-model:value="formData.value"
|
||||
placeholder="请选择配置值"
|
||||
allow-clear
|
||||
>
|
||||
<a-select-option v-for="opt in parsedOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-checkbox-group
|
||||
v-else-if="formData.type === 'checkbox'"
|
||||
v-model:value="formData.value"
|
||||
>
|
||||
<a-checkbox v-for="opt in parsedOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<sc-upload
|
||||
v-else-if="formData.type === 'file'"
|
||||
v-model="formData.value"
|
||||
:limit="1"
|
||||
accept="*/*"
|
||||
list-type="picture-card"
|
||||
/>
|
||||
|
||||
<!-- JSON编辑器 -->
|
||||
<a-textarea
|
||||
v-else-if="formData.type === 'json'"
|
||||
v-model:value="formData.value"
|
||||
placeholder='请输入JSON格式数据，例如：{"key": "value"}'
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" placeholder="请输入排序" :min="0" style="width: 100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-textarea v-model:value="formData.description" placeholder="请输入配置描述" :rows="2" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { systemApi } from '@/api/system'
|
||||
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
record: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const customGroup = ref('')
|
||||
const optionsText = ref('')
|
||||
|
||||
// 是否编辑模式
|
||||
const isEdit = computed(() => !!props.record?.id)
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
group: 'system',
|
||||
key: '',
|
||||
name: '',
|
||||
type: 'string',
|
||||
value: '',
|
||||
options: null,
|
||||
sort: 0,
|
||||
status: 1,
|
||||
description: '',
|
||||
is_system: false
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
group: [{ required: true, message: '请选择配置分组', trigger: 'change' }],
|
||||
key: [{ required: true, message: '请输入配置键', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
|
||||
value: [{ required: true, message: '请输入配置值', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 解析选项
|
||||
const parsedOptions = computed(() => {
|
||||
if (!optionsText.value) return []
|
||||
try {
|
||||
return optionsText.value
|
||||
.split('\n')
|
||||
.filter((line) => line.trim())
|
||||
.map((line) => {
|
||||
const [label, value] = line.split(':').map((s) => s.trim())
|
||||
return { label, value: value || label }
|
||||
})
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
// 监听record变化，初始化表单
|
||||
watch(
|
||||
() => props.record,
|
||||
(newRecord) => {
|
||||
if (newRecord) {
|
||||
// 编辑模式
|
||||
Object.assign(formData, {
|
||||
group: newRecord.group || 'system',
|
||||
key: newRecord.key || '',
|
||||
name: newRecord.name || '',
|
||||
type: newRecord.type || 'string',
|
||||
value: parseValueByType(newRecord.value, newRecord.type),
|
||||
options: newRecord.options,
|
||||
sort: newRecord.sort || 0,
|
||||
status: newRecord.status ?? 1,
|
||||
description: newRecord.description || '',
|
||||
is_system: newRecord.is_system || false
|
||||
})
|
||||
|
||||
// 解析选项
|
||||
if (newRecord.options && typeof newRecord.options === 'object') {
|
||||
optionsText.value = newRecord.options
|
||||
.map((opt) => {
|
||||
if (typeof opt === 'object') {
|
||||
return `${opt.label}:${opt.value}`
|
||||
}
|
||||
return opt
|
||||
})
|
||||
.join('\n')
|
||||
}
|
||||
} else {
|
||||
// 新增模式，重置表单
|
||||
resetForm()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 根据类型解析值
|
||||
const parseValueByType = (value, type) => {
|
||||
if (!value) return value
|
||||
switch (type) {
|
||||
case 'number':
|
||||
return Number(value)
|
||||
case 'boolean':
|
||||
return value === 'true' || value === true || value === 1
|
||||
case 'checkbox':
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
return JSON.parse(value)
|
||||
} catch {
|
||||
return value.split(',')
|
||||
}
|
||||
}
|
||||
return value
|
||||
default:
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
group: 'system',
|
||||
key: '',
|
||||
name: '',
|
||||
type: 'string',
|
||||
value: '',
|
||||
options: null,
|
||||
sort: 0,
|
||||
status: 1,
|
||||
description: '',
|
||||
is_system: false
|
||||
})
|
||||
optionsText.value = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 添加自定义分组
|
||||
const handleAddCustomGroup = () => {
|
||||
if (!customGroup.value) {
|
||||
message.warning('请输入分组名称')
|
||||
return
|
||||
}
|
||||
formData.group = customGroup.value
|
||||
customGroup.value = ''
|
||||
message.success('分组已添加')
|
||||
}
|
||||
|
||||
// 处理确定按钮
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
const submitData = { ...formData }
|
||||
|
||||
// 处理选项
|
||||
if (['select', 'radio', 'checkbox'].includes(formData.type) && optionsText.value) {
|
||||
submitData.options = parsedOptions.value
|
||||
}
|
||||
|
||||
// 处理值类型转换
|
||||
if (formData.type === 'number') {
|
||||
submitData.value = Number(submitData.value)
|
||||
} else if (formData.type === 'boolean') {
|
||||
submitData.value = submitData.value ? '1' : '0'
|
||||
} else if (formData.type === 'checkbox' && Array.isArray(submitData.value)) {
|
||||
submitData.value = submitData.value.join(',')
|
||||
} else if (formData.type === 'json') {
|
||||
// 验证JSON格式
|
||||
try {
|
||||
JSON.parse(submitData.value)
|
||||
} catch (e) {
|
||||
throw new Error('JSON格式不正确')
|
||||
}
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await systemApi.configs.edit.put(formData.id, submitData)
|
||||
message.success('更新成功')
|
||||
} else {
|
||||
await systemApi.configs.add.post(submitData)
|
||||
message.success('创建成功')
|
||||
}
|
||||
|
||||
emit('success')
|
||||
emit('update:visible', false)
|
||||
resetForm()
|
||||
} catch (error) {
|
||||
if (error.message) {
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消按钮
|
||||
const handleCancel = () => {
|
||||
resetForm()
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.ant-modal-body) {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-select-dropdown) {
|
||||
.ant-input {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
423
resources/admin/src/pages/system/config/index.vue
Normal file
423
resources/admin/src/pages/system/config/index.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div class="pages system-configs-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="searchForm.keyword"
|
||||
placeholder="配置名称/键名"
|
||||
allow-clear
|
||||
style="width: 180px"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="searchForm.group"
|
||||
placeholder="配置分组"
|
||||
allow-clear
|
||||
style="width: 140px"
|
||||
:options="groupOptions"
|
||||
/>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-dropdown>
|
||||
<a-button>
|
||||
批量操作
|
||||
<down-outlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="handleBatchDelete">
|
||||
<delete-outlined />
|
||||
批量删除
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleBatchStatus(1)">
|
||||
<check-outlined />
|
||||
批量启用
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleBatchStatus(0)">
|
||||
<stop-outlined />
|
||||
批量禁用
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-content">
|
||||
<scTable
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
:row-key="(record) => record.id"
|
||||
@refresh="refreshTable"
|
||||
@paginationChange="handlePaginationChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="getTypeColor(record.type)">{{ getTypeText(record.type) }}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'value'">
|
||||
<span v-if="['string', 'number', 'boolean'].includes(record.type)" class="value-text">
|
||||
{{ formatValue(record.value, record.type) }}
|
||||
</span>
|
||||
<span v-else-if="record.type === 'file'" class="file-value">
|
||||
<file-outlined />
|
||||
{{ record.value }}
|
||||
</span>
|
||||
<a v-else-if="record.type === 'image'" :href="record.value" target="_blank" class="image-value">
|
||||
<img :src="record.value" alt="预览" class="config-image" />
|
||||
</a>
|
||||
<span v-else class="json-value">{{ record.value }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-badge :status="record.status ? 'success' : 'default'" :text="record.status ? '启用' : '禁用'" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">
|
||||
<edit-outlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
:disabled="record.is_system"
|
||||
@click="handleDelete(record)"
|
||||
>
|
||||
<delete-outlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<SaveDialog v-model:visible="showSaveDialog" :record="currentRecord" @success="handleSaveSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, h } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
StopOutlined,
|
||||
EditOutlined,
|
||||
FileOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
import { systemApi } from '@/api/system'
|
||||
import SaveDialog from './components/SaveDialog.vue'
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
group: undefined
|
||||
})
|
||||
|
||||
// 分组选项
|
||||
const groupOptions = ref([])
|
||||
|
||||
// 当前记录
|
||||
const currentRecord = ref(null)
|
||||
|
||||
// 显示新增/编辑弹窗
|
||||
const showSaveDialog = ref(false)
|
||||
|
||||
// 使用 useTable Hook
|
||||
const { tableData, loading, pagination, rowSelection, handleSearch, handleReset, handlePaginationChange, refreshTable } =
|
||||
useTable({
|
||||
api: systemApi.configs.list.get,
|
||||
searchForm,
|
||||
needPagination: true
|
||||
})
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '配置分组',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '配置键',
|
||||
dataIndex: 'key',
|
||||
key: 'key',
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '配置名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '配置值',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
ellipsis: true,
|
||||
width: 250
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
key: 'sort',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
// 获取类型颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
string: 'blue',
|
||||
text: 'cyan',
|
||||
number: 'green',
|
||||
boolean: 'orange',
|
||||
select: 'purple',
|
||||
radio: 'purple',
|
||||
checkbox: 'purple',
|
||||
file: 'pink',
|
||||
json: 'geekblue'
|
||||
}
|
||||
return colors[type] || 'default'
|
||||
}
|
||||
|
||||
// 获取类型文本
|
||||
const getTypeText = (type) => {
|
||||
const texts = {
|
||||
string: '字符串',
|
||||
text: '文本',
|
||||
number: '数字',
|
||||
boolean: '布尔值',
|
||||
select: '下拉框',
|
||||
radio: '单选框',
|
||||
checkbox: '多选框',
|
||||
file: '文件',
|
||||
json: 'JSON'
|
||||
}
|
||||
return texts[type] || type
|
||||
}
|
||||
|
||||
// 格式化值
|
||||
const formatValue = (value, type) => {
|
||||
if (type === 'boolean') {
|
||||
return value === 'true' || value === true ? '是' : '否'
|
||||
}
|
||||
if (type === 'number') {
|
||||
return Number(value)
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
// 获取分组列表
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
const res = await systemApi.configs.groups.get()
|
||||
groupOptions.value = res.data.map((item) => ({ label: item, value: item }))
|
||||
} catch (error) {
|
||||
console.error('获取分组列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const handleAdd = () => {
|
||||
currentRecord.value = null
|
||||
showSaveDialog.value = true
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (record) => {
|
||||
currentRecord.value = { ...record }
|
||||
showSaveDialog.value = true
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = (record) => {
|
||||
if (record.is_system) {
|
||||
message.warning('系统配置不能删除')
|
||||
return
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除配置"${record.name}"吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await systemApi.configs.delete.delete(record.id)
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} catch (error) {
|
||||
message.error(error.message || '删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
const selectedRowKeys = rowSelection.selectedRowKeys
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.warning('请先选择要删除的配置')
|
||||
return
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除选中的 ${selectedRowKeys.length} 条配置吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await systemApi.configs.batchDelete.post({ ids: selectedRowKeys })
|
||||
message.success('批量删除成功')
|
||||
rowSelection.selectedRowKeys = []
|
||||
refreshTable()
|
||||
} catch (error) {
|
||||
message.error(error.message || '批量删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 批量更新状态
|
||||
const handleBatchStatus = (status) => {
|
||||
const selectedRowKeys = rowSelection.selectedRowKeys
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.warning('请先选择要操作的配置')
|
||||
return
|
||||
}
|
||||
Modal.confirm({
|
||||
title: status === 1 ? '确认启用' : '确认禁用',
|
||||
content: `确定要${status === 1 ? '启用' : '禁用'}选中的 ${selectedRowKeys.length} 条配置吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await systemApi.configs.batchStatus.post({ ids: selectedRowKeys, status })
|
||||
message.success(`${status === 1 ? '启用' : '禁用'}成功`)
|
||||
rowSelection.selectedRowKeys = []
|
||||
refreshTable()
|
||||
} catch (error) {
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功
|
||||
const handleSaveSuccess = () => {
|
||||
showSaveDialog.value = false
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadGroups()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-configs-page {
|
||||
@extend .pages-base-layout;
|
||||
|
||||
.value-text {
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.file-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.image-value {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.config-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:hover .config-image {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.json-value {
|
||||
color: #999;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user