3179 lines
101 KiB
Vue
3179 lines
101 KiB
Vue
<script setup>
|
|
import { Teleport, computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import Sortable from 'sortablejs'
|
|
import { api } from '../lib/api'
|
|
import { toApiUrl } from '../lib/runtime'
|
|
import lockResetIcon from '../assets/icons/lock_reset.svg'
|
|
import deleteIcon from '../assets/icons/delete.svg'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { useToast } from '../composables/useToast'
|
|
|
|
const auth = useAuthStore()
|
|
const toast = useToast()
|
|
const globalRightRailOpen = inject('rightRailOpen', ref(true))
|
|
const localRightRailTarget = inject('localRightRailTarget', '#local-right-rail-root')
|
|
const isAdmin = computed(() => !!auth.user?.isAdmin)
|
|
|
|
const activeTab = ref('featured')
|
|
const tierlistsMode = ref('requests')
|
|
|
|
const games = ref([])
|
|
const selectedGameId = ref('')
|
|
const selectedGame = ref(null)
|
|
const featuredGameIds = ref([])
|
|
|
|
const customItems = ref([])
|
|
const customItemQuery = ref('')
|
|
const customItemPage = ref(1)
|
|
const customItemLimit = ref(50)
|
|
const customItemTotal = ref(0)
|
|
const customItemOrphanOnly = ref(false)
|
|
const customItemTargetGameId = ref('')
|
|
const customItemModalTargetGameId = ref('')
|
|
|
|
const adminTierLists = ref([])
|
|
const adminTierListQuery = ref('')
|
|
const adminTierListPage = ref(1)
|
|
const adminTierListLimit = ref(50)
|
|
const adminTierListTotal = ref(0)
|
|
const templateRequests = ref([])
|
|
const importModalOpen = ref(false)
|
|
const importModalMode = ref('existing')
|
|
const importModalTierList = ref(null)
|
|
const importModalItems = ref([])
|
|
const importModalTargetGameId = ref('')
|
|
const importModalNewGameId = ref('')
|
|
const importModalNewGameName = ref('')
|
|
const previewModalOpen = ref(false)
|
|
const previewTierList = ref(null)
|
|
const userPasswordModalOpen = ref(false)
|
|
const userDeleteModalOpen = ref(false)
|
|
const userRoleModalOpen = ref(false)
|
|
const customItemModalOpen = ref(false)
|
|
const customItemDeleteModalOpen = ref(false)
|
|
const modalTargetUser = ref(null)
|
|
const modalPasswordDraft = ref('')
|
|
const modalRoleNextAdmin = ref(false)
|
|
const modalTargetCustomItem = ref(null)
|
|
|
|
const users = ref([])
|
|
|
|
const error = ref('')
|
|
const success = ref('')
|
|
|
|
const newGameId = ref('')
|
|
const newGameName = ref('')
|
|
|
|
const uploadFiles = ref([])
|
|
const thumbFile = ref(null)
|
|
const itemPreviewUrls = ref([])
|
|
const isItemDragOver = ref(false)
|
|
const isThumbDragOver = ref(false)
|
|
const thumbPreviewUrl = ref('')
|
|
const itemFileInput = ref(null)
|
|
const thumbFileInput = ref(null)
|
|
const featuredListEl = ref(null)
|
|
const featuredSortable = ref(null)
|
|
const userAvatarInputs = ref({})
|
|
const isGameLoading = ref(false)
|
|
const gameCreateModalOpen = ref(false)
|
|
|
|
const hasSelectedGame = computed(() => !!selectedGame.value?.game?.id)
|
|
const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedGameId.value)
|
|
const canAddItem = computed(() => uploadFiles.value.length > 0 && !!selectedGameId.value)
|
|
const customItemPageCount = computed(() => Math.max(1, Math.ceil(customItemTotal.value / customItemLimit.value)))
|
|
const adminTierListPageCount = computed(() => Math.max(1, Math.ceil(adminTierListTotal.value / adminTierListLimit.value)))
|
|
const featuredGames = computed(() =>
|
|
featuredGameIds.value
|
|
.map((gameId) => games.value.find((game) => game.id === gameId))
|
|
.filter(Boolean)
|
|
)
|
|
const availableGamesForFeatured = computed(() => games.value.filter((game) => !featuredGameIds.value.includes(game.id)))
|
|
const importModalItemCount = computed(() => importModalItems.value.length)
|
|
const activeTabTitle = computed(() => {
|
|
if (activeTab.value === 'featured') return '목록 관리'
|
|
if (activeTab.value === 'game-admin') return '게임 관리'
|
|
if (activeTab.value === 'items') return '아이템 관리'
|
|
if (activeTab.value === 'tierlists') {
|
|
return tierlistsMode.value === 'requests' ? '템플릿 요청 관리' : '전체 티어표 관리'
|
|
}
|
|
return '회원 관리'
|
|
})
|
|
const activeTabDescription = computed(() => {
|
|
if (activeTab.value === 'featured') {
|
|
return '홈 화면 상단에 고정 노출되는 게임 순서를 따로 관리합니다.'
|
|
}
|
|
if (activeTab.value === 'game-admin') {
|
|
return '게임 생성, 선택, 썸네일, 기본 아이템 관리를 전용 작업 화면으로 분리했습니다.'
|
|
}
|
|
if (activeTab.value === 'items') {
|
|
return '사용자 커스텀 이미지를 검색하고, 미사용 이미지를 정리하거나 템플릿으로 승격할 수 있어요.'
|
|
}
|
|
if (activeTab.value === 'tierlists') {
|
|
return tierlistsMode.value === 'requests'
|
|
? '사용자 요청 기반으로 새 템플릿 생성이나 템플릿 업데이트를 승인합니다.'
|
|
: '공개/비공개 포함 전체 티어표를 확인하고, 추가 아이템을 템플릿으로 가져올 수 있어요.'
|
|
}
|
|
return '계정 정보, 권한, 비밀번호와 최근 활동을 더 가볍게 확인하고 수정합니다.'
|
|
})
|
|
const adminOverviewStats = computed(() => {
|
|
const publishedTierLists = adminTierLists.value.filter((tierList) => tierList.isPublic).length
|
|
const pendingRequests = templateRequests.value.length
|
|
const orphanItems = customItems.value.filter((item) => item.usageCount === 0).length
|
|
const adminCount = users.value.filter((user) => user.isAdmin || user.draftIsAdmin).length
|
|
|
|
if (activeTab.value === 'featured') {
|
|
return [
|
|
{ label: '전체 게임', value: `${games.value.length}` },
|
|
{ label: '상단 고정', value: `${featuredGameIds.value.length}/50` },
|
|
{ label: '추가 가능', value: `${Math.max(0, 50 - featuredGameIds.value.length)}` },
|
|
]
|
|
}
|
|
if (activeTab.value === 'game-admin') {
|
|
return [
|
|
{ label: '전체 게임', value: `${games.value.length}` },
|
|
{ label: '선택 상태', value: hasSelectedGame.value ? '활성' : '대기' },
|
|
{ label: '기본 아이템', value: `${selectedGame.value?.items?.length || 0}` },
|
|
]
|
|
}
|
|
if (activeTab.value === 'items') {
|
|
return [
|
|
{ label: '검색 결과', value: `${customItemTotal.value}` },
|
|
{ label: '미사용', value: `${orphanItems}` },
|
|
{ label: '대상 게임', value: customItemTargetGameId.value ? '선택됨' : '미선택' },
|
|
]
|
|
}
|
|
if (activeTab.value === 'tierlists') {
|
|
return tierlistsMode.value === 'requests'
|
|
? [
|
|
{ label: '대기 요청', value: `${pendingRequests}` },
|
|
{ label: '생성 요청', value: `${templateRequests.value.filter((request) => request.type === 'create').length}` },
|
|
{ label: '업데이트 요청', value: `${templateRequests.value.filter((request) => request.type === 'update').length}` },
|
|
]
|
|
: [
|
|
{ label: '검색 결과', value: `${adminTierListTotal.value}` },
|
|
{ label: '공개 티어표', value: `${publishedTierLists}` },
|
|
{ label: '현재 페이지', value: `${adminTierListPage.value}/${adminTierListPageCount.value}` },
|
|
]
|
|
}
|
|
return [
|
|
{ label: '가입 회원', value: `${users.value.length}` },
|
|
{ label: '관리자', value: `${adminCount}` },
|
|
{ label: '활동 계정', value: `${users.value.filter((user) => user.tierListCount > 0).length}` },
|
|
]
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await auth.refresh()
|
|
await Promise.all([refreshGames(), refreshCustomItems(), refreshAdminTierLists(), refreshUsers(), refreshTemplateRequests()])
|
|
await syncFeaturedSortable()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearPreviewUrl('item')
|
|
clearPreviewUrl('thumb')
|
|
destroyFeaturedSortable()
|
|
})
|
|
|
|
function clearPreviewUrl(kind) {
|
|
if (kind === 'item') {
|
|
itemPreviewUrls.value.forEach((url) => {
|
|
if (url) URL.revokeObjectURL(url)
|
|
})
|
|
itemPreviewUrls.value = []
|
|
return
|
|
}
|
|
|
|
if (thumbPreviewUrl.value) {
|
|
URL.revokeObjectURL(thumbPreviewUrl.value)
|
|
thumbPreviewUrl.value = ''
|
|
}
|
|
}
|
|
|
|
function resetFileInput(kind) {
|
|
if (kind === 'item') {
|
|
if (itemFileInput.value) itemFileInput.value.value = ''
|
|
return
|
|
}
|
|
|
|
if (thumbFileInput.value) thumbFileInput.value.value = ''
|
|
}
|
|
|
|
watch(error, (message) => {
|
|
if (!message) return
|
|
toast.error(message)
|
|
error.value = ''
|
|
})
|
|
|
|
watch(success, (message) => {
|
|
if (!message) return
|
|
toast.success(message)
|
|
success.value = ''
|
|
})
|
|
|
|
watch(
|
|
() => activeTab.value,
|
|
async (tab) => {
|
|
if (tab === 'game-admin' && selectedGameId.value && !selectedGame.value?.game?.id) {
|
|
await loadGame()
|
|
}
|
|
}
|
|
)
|
|
|
|
function resetMessages() {
|
|
error.value = ''
|
|
success.value = ''
|
|
}
|
|
|
|
function setTab(tab) {
|
|
resetMessages()
|
|
activeTab.value = tab
|
|
if (tab === 'tierlists') {
|
|
tierlistsMode.value = 'requests'
|
|
}
|
|
}
|
|
|
|
function setTierlistsMode(mode) {
|
|
resetMessages()
|
|
tierlistsMode.value = mode
|
|
}
|
|
|
|
function openGameCreateModal() {
|
|
resetMessages()
|
|
newGameId.value = ''
|
|
newGameName.value = ''
|
|
gameCreateModalOpen.value = true
|
|
}
|
|
|
|
function closeGameCreateModal() {
|
|
gameCreateModalOpen.value = false
|
|
}
|
|
|
|
async function handleSelectedGameChange(event) {
|
|
selectedGameId.value = event?.target?.value || ''
|
|
await loadGame()
|
|
}
|
|
|
|
async function refreshGames() {
|
|
try {
|
|
const data = await api.listGames()
|
|
games.value = data.games || []
|
|
featuredGameIds.value = games.value
|
|
.filter((game) => game.displayRank != null)
|
|
.sort((a, b) => a.displayRank - b.displayRank)
|
|
.map((game) => game.id)
|
|
await syncFeaturedSortable()
|
|
} catch (e) {
|
|
error.value = '게임 목록을 불러오지 못했어요.'
|
|
}
|
|
}
|
|
|
|
function setUserAvatarInput(userId, el) {
|
|
if (!userId) return
|
|
if (!el) {
|
|
delete userAvatarInputs.value[userId]
|
|
return
|
|
}
|
|
userAvatarInputs.value[userId] = el
|
|
}
|
|
|
|
function isUserDirty(user) {
|
|
if (!user) return false
|
|
return user.draftEmail !== user.email || (user.draftNickname || '') !== (user.nickname || '') || !!user.draftIsAdmin !== !!user.isAdmin
|
|
}
|
|
|
|
function openUserAvatarPicker(user) {
|
|
userAvatarInputs.value[user?.id]?.click()
|
|
}
|
|
|
|
async function uploadUserAvatar(user, file, { remove = false } = {}) {
|
|
resetMessages()
|
|
if (!user?.id) return
|
|
|
|
try {
|
|
user.isAvatarBusy = true
|
|
const data = await api.updateAdminUserAvatar(user.id, { file, removeAvatar: remove })
|
|
const updated = data.user
|
|
users.value = users.value.map((entry) =>
|
|
entry.id === updated.id
|
|
? {
|
|
...entry,
|
|
avatarSrc: updated.avatarSrc || '',
|
|
email: updated.email,
|
|
nickname: updated.nickname || '',
|
|
isAdmin: !!updated.isAdmin,
|
|
draftEmail: updated.email,
|
|
draftNickname: updated.nickname || '',
|
|
draftIsAdmin: !!updated.isAdmin,
|
|
isAvatarBusy: false,
|
|
}
|
|
: entry
|
|
)
|
|
if (updated.id === auth.user?.id) await auth.refresh()
|
|
await refreshUsers()
|
|
success.value = remove ? '회원 썸네일을 삭제했어요.' : '회원 썸네일을 업데이트했어요.'
|
|
} catch (e) {
|
|
error.value = remove ? '회원 썸네일 삭제에 실패했어요.' : '회원 썸네일 변경에 실패했어요.'
|
|
} finally {
|
|
const target = users.value.find((entry) => entry.id === user.id)
|
|
if (target) target.isAvatarBusy = false
|
|
}
|
|
}
|
|
|
|
async function onUserAvatarChange(user, event) {
|
|
const file = event.target.files && event.target.files[0] ? event.target.files[0] : null
|
|
event.target.value = ''
|
|
if (!file) return
|
|
await uploadUserAvatar(user, file)
|
|
}
|
|
|
|
async function removeUserAvatar(user) {
|
|
if (!user?.avatarSrc) return
|
|
await uploadUserAvatar(user, null, { remove: true })
|
|
}
|
|
|
|
function destroyFeaturedSortable() {
|
|
if (featuredSortable.value) {
|
|
featuredSortable.value.destroy()
|
|
featuredSortable.value = null
|
|
}
|
|
}
|
|
|
|
async function syncFeaturedSortable() {
|
|
await nextTick()
|
|
destroyFeaturedSortable()
|
|
if (!featuredListEl.value) return
|
|
|
|
featuredSortable.value = Sortable.create(featuredListEl.value, {
|
|
animation: 160,
|
|
draggable: '[data-featured-id]',
|
|
handle: '[data-featured-handle]',
|
|
ghostClass: 'ghost',
|
|
chosenClass: 'chosen',
|
|
onEnd: (evt) => {
|
|
if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
|
|
const nextIds = [...featuredGameIds.value]
|
|
const [moved] = nextIds.splice(evt.oldIndex, 1)
|
|
nextIds.splice(evt.newIndex, 0, moved)
|
|
featuredGameIds.value = nextIds
|
|
},
|
|
})
|
|
}
|
|
|
|
async function refreshCustomItems() {
|
|
if (!auth.user?.isAdmin) return
|
|
try {
|
|
const data = await api.listAdminCustomItems({
|
|
q: customItemQuery.value,
|
|
page: customItemPage.value,
|
|
limit: customItemLimit.value,
|
|
orphanOnly: customItemOrphanOnly.value,
|
|
})
|
|
customItems.value = data.items || []
|
|
customItemTotal.value = data.total || 0
|
|
customItemPage.value = data.page || 1
|
|
customItemLimit.value = data.limit || customItemLimit.value
|
|
} catch (e) {
|
|
error.value = '사용자 커스텀 아이템을 불러오지 못했어요.'
|
|
}
|
|
}
|
|
|
|
async function refreshAdminTierLists() {
|
|
if (!auth.user?.isAdmin) return
|
|
try {
|
|
const data = await api.listAdminTierLists({
|
|
q: adminTierListQuery.value,
|
|
page: adminTierListPage.value,
|
|
limit: adminTierListLimit.value,
|
|
})
|
|
adminTierLists.value = data.tierLists || []
|
|
adminTierListTotal.value = data.total || 0
|
|
adminTierListPage.value = data.page || 1
|
|
adminTierListLimit.value = data.limit || adminTierListLimit.value
|
|
} catch (e) {
|
|
error.value = '관리자 티어표 목록을 불러오지 못했어요.'
|
|
}
|
|
}
|
|
|
|
async function refreshTemplateRequests() {
|
|
if (!auth.user?.isAdmin) return
|
|
try {
|
|
const data = await api.listAdminTemplateRequests()
|
|
templateRequests.value = (data.requests || []).map((request) => ({
|
|
...request,
|
|
draftGameId:
|
|
request.type === 'create'
|
|
? (request.sourceTierListTitle || '')
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
.slice(0, 80) || 'new-template'
|
|
: request.targetGameId || request.sourceGameId || '',
|
|
draftGameName:
|
|
request.type === 'create'
|
|
? `${request.sourceTierListTitle || request.sourceGameName || '새 템플릿'}`
|
|
: request.targetGameName || request.sourceGameName || '',
|
|
}))
|
|
} catch (e) {
|
|
error.value = '템플릿 요청 목록을 불러오지 못했어요.'
|
|
}
|
|
}
|
|
|
|
async function refreshUsers() {
|
|
if (!auth.user?.isAdmin) return
|
|
try {
|
|
const data = await api.listAdminUsers()
|
|
users.value = (data.users || []).map((user) => ({
|
|
...user,
|
|
draftEmail: user.email,
|
|
draftNickname: user.nickname || '',
|
|
draftIsAdmin: !!user.isAdmin,
|
|
isAvatarBusy: false,
|
|
}))
|
|
} catch (e) {
|
|
error.value = '회원 목록을 불러오지 못했어요.'
|
|
}
|
|
}
|
|
|
|
function resetUploadState() {
|
|
uploadFiles.value = []
|
|
thumbFile.value = null
|
|
resetFileInput('item')
|
|
resetFileInput('thumb')
|
|
clearPreviewUrl('item')
|
|
clearPreviewUrl('thumb')
|
|
}
|
|
|
|
async function loadGame() {
|
|
resetMessages()
|
|
resetUploadState()
|
|
|
|
if (!selectedGameId.value) {
|
|
selectedGame.value = null
|
|
return
|
|
}
|
|
|
|
try {
|
|
isGameLoading.value = true
|
|
const data = await api.getGame(selectedGameId.value)
|
|
selectedGame.value = {
|
|
...data,
|
|
items: (data.items || []).map((item) => ({
|
|
...item,
|
|
draftLabel: item.label,
|
|
})),
|
|
}
|
|
} catch (e) {
|
|
console.error('[AdminView] loadGame failed', selectedGameId.value, e)
|
|
selectedGame.value = null
|
|
error.value = '게임 정보를 불러오지 못했어요.'
|
|
} finally {
|
|
isGameLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function createGame() {
|
|
resetMessages()
|
|
try {
|
|
const res = await fetch(toApiUrl('/api/admin/games'), {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: newGameId.value.trim(), name: newGameName.value.trim() }),
|
|
})
|
|
if (!res.ok) throw new Error('failed')
|
|
|
|
const data = await res.json()
|
|
await refreshGames()
|
|
selectedGameId.value = data.game.id
|
|
closeGameCreateModal()
|
|
await loadGame()
|
|
success.value = '게임이 생성됐어요. 이어서 썸네일과 기본 아이템을 관리할 수 있어요.'
|
|
} catch (e) {
|
|
error.value = '게임 생성 실패(관리자 권한/중복 ID 확인)'
|
|
}
|
|
}
|
|
|
|
function handleThumbFile(file) {
|
|
const nextFile = file && (file.type || '').startsWith('image/') ? file : null
|
|
thumbFile.value = nextFile
|
|
clearPreviewUrl('thumb')
|
|
if (thumbFile.value) thumbPreviewUrl.value = URL.createObjectURL(thumbFile.value)
|
|
}
|
|
|
|
function onThumb(event) {
|
|
handleThumbFile(event.target.files && event.target.files[0] ? event.target.files[0] : null)
|
|
}
|
|
|
|
function openThumbFilePicker() {
|
|
thumbFileInput.value?.click()
|
|
}
|
|
|
|
function onThumbDragEnter(event) {
|
|
event.preventDefault()
|
|
isThumbDragOver.value = true
|
|
}
|
|
|
|
function onThumbDragOver(event) {
|
|
event.preventDefault()
|
|
isThumbDragOver.value = true
|
|
}
|
|
|
|
function onThumbDragLeave(event) {
|
|
if (event.currentTarget === event.target) isThumbDragOver.value = false
|
|
}
|
|
|
|
function onThumbDrop(event) {
|
|
event.preventDefault()
|
|
isThumbDragOver.value = false
|
|
handleThumbFile(event.dataTransfer?.files?.[0] || null)
|
|
}
|
|
|
|
function onFile(event) {
|
|
handleItemFiles(event.target.files)
|
|
}
|
|
|
|
function handleItemFiles(fileList) {
|
|
const files = Array.from(fileList || []).filter((file) => (file.type || '').startsWith('image/'))
|
|
uploadFiles.value = files
|
|
clearPreviewUrl('item')
|
|
if (!files.length) return
|
|
itemPreviewUrls.value = files.map((file) => URL.createObjectURL(file))
|
|
resetFileInput('item')
|
|
}
|
|
|
|
function openItemFilePicker() {
|
|
itemFileInput.value?.click()
|
|
}
|
|
|
|
function clearItemFiles() {
|
|
uploadFiles.value = []
|
|
clearPreviewUrl('item')
|
|
resetFileInput('item')
|
|
}
|
|
|
|
function onItemDragEnter(event) {
|
|
event.preventDefault()
|
|
isItemDragOver.value = true
|
|
}
|
|
|
|
function onItemDragOver(event) {
|
|
event.preventDefault()
|
|
isItemDragOver.value = true
|
|
}
|
|
|
|
function onItemDragLeave(event) {
|
|
if (event.currentTarget === event.target) isItemDragOver.value = false
|
|
}
|
|
|
|
function onItemDrop(event) {
|
|
event.preventDefault()
|
|
isItemDragOver.value = false
|
|
handleItemFiles(event.dataTransfer?.files)
|
|
}
|
|
|
|
async function uploadThumbnail() {
|
|
resetMessages()
|
|
if (!thumbFile.value || !selectedGameId.value) {
|
|
error.value = '썸네일 파일을 선택해주세요.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
const fd = new FormData()
|
|
fd.append('thumbnail', thumbFile.value)
|
|
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/thumbnail`), {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: fd,
|
|
})
|
|
if (!res.ok) throw new Error('failed')
|
|
|
|
thumbFile.value = null
|
|
resetFileInput('thumb')
|
|
clearPreviewUrl('thumb')
|
|
await refreshGames()
|
|
await loadGame()
|
|
success.value = '썸네일이 반영됐어요.'
|
|
} catch (e) {
|
|
error.value = '썸네일 업로드 실패(관리자 권한/파일 크기 확인)'
|
|
}
|
|
}
|
|
|
|
async function uploadItem() {
|
|
resetMessages()
|
|
if (!uploadFiles.value.length || !selectedGameId.value) {
|
|
error.value = '아이템 파일을 선택해주세요.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
const fd = new FormData()
|
|
uploadFiles.value.forEach((file) => fd.append('images', file))
|
|
const uploadCount = uploadFiles.value.length
|
|
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/images`), {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: fd,
|
|
})
|
|
if (!res.ok) throw new Error('failed')
|
|
|
|
resetUploadState()
|
|
await loadGame()
|
|
success.value = `게임 기본 아이템 ${uploadCount}개 추가를 완료했어요.`
|
|
} catch (e) {
|
|
error.value = '아이템 추가 실패(관리자 권한/파일 크기 확인)'
|
|
}
|
|
}
|
|
|
|
async function removeGameItem(itemId) {
|
|
resetMessages()
|
|
try {
|
|
const res = await fetch(
|
|
toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}/items/${encodeURIComponent(itemId)}`),
|
|
{
|
|
method: 'DELETE',
|
|
credentials: 'include',
|
|
}
|
|
)
|
|
if (!res.ok) throw new Error('failed')
|
|
|
|
await loadGame()
|
|
success.value = '게임 기본 아이템을 삭제했어요.'
|
|
} catch (e) {
|
|
error.value = '게임 기본 아이템 삭제에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
async function saveGameItemLabel(item) {
|
|
resetMessages()
|
|
if (!selectedGameId.value) return
|
|
const nextLabel = (item.draftLabel || '').trim()
|
|
if (!nextLabel) {
|
|
error.value = '아이템 이름을 입력해주세요.'
|
|
return
|
|
}
|
|
if (nextLabel === item.label) return
|
|
|
|
try {
|
|
item.isSavingLabel = true
|
|
const data = await api.updateAdminGameItem(selectedGameId.value, item.id, { label: nextLabel })
|
|
item.label = data.item.label
|
|
item.draftLabel = data.item.label
|
|
success.value = '기본 아이템 이름을 수정했어요.'
|
|
} catch (e) {
|
|
error.value = '기본 아이템 이름 수정에 실패했어요.'
|
|
} finally {
|
|
item.isSavingLabel = false
|
|
}
|
|
}
|
|
|
|
async function removeGame() {
|
|
resetMessages()
|
|
if (!selectedGameId.value || !selectedGame.value?.game) return
|
|
|
|
const ok = window.confirm(`"${selectedGame.value.game.name}" 게임을 삭제할까요? 관련 기본 아이템과 티어표도 함께 삭제됩니다.`)
|
|
if (!ok) return
|
|
|
|
try {
|
|
const res = await fetch(toApiUrl(`/api/admin/games/${encodeURIComponent(selectedGameId.value)}`), {
|
|
method: 'DELETE',
|
|
credentials: 'include',
|
|
})
|
|
if (!res.ok) throw new Error('failed')
|
|
|
|
const deletedName = selectedGame.value.game.name
|
|
selectedGameId.value = ''
|
|
selectedGame.value = null
|
|
resetUploadState()
|
|
await refreshGames()
|
|
success.value = `${deletedName} 게임을 삭제했어요.`
|
|
} catch (e) {
|
|
error.value = '게임 삭제에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
async function saveUser(user) {
|
|
resetMessages()
|
|
try {
|
|
const data = await api.updateAdminUser(user.id, {
|
|
email: user.draftEmail,
|
|
nickname: user.draftNickname,
|
|
isAdmin: !!user.draftIsAdmin,
|
|
})
|
|
const updated = data.user
|
|
users.value = users.value.map((entry) =>
|
|
entry.id === updated.id
|
|
? {
|
|
...entry,
|
|
email: updated.email,
|
|
nickname: updated.nickname || '',
|
|
isAdmin: !!updated.isAdmin,
|
|
draftEmail: updated.email,
|
|
draftNickname: updated.nickname || '',
|
|
draftIsAdmin: !!updated.isAdmin,
|
|
}
|
|
: entry
|
|
)
|
|
if (updated.id === auth.user?.id) await auth.refresh()
|
|
await refreshUsers()
|
|
success.value = '회원 정보를 저장했어요.'
|
|
} catch (e) {
|
|
error.value = '회원 정보 저장에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
function openUserPasswordModal(user) {
|
|
resetMessages()
|
|
modalTargetUser.value = user || null
|
|
modalPasswordDraft.value = ''
|
|
userPasswordModalOpen.value = true
|
|
}
|
|
|
|
function closeUserPasswordModal() {
|
|
userPasswordModalOpen.value = false
|
|
modalTargetUser.value = null
|
|
modalPasswordDraft.value = ''
|
|
}
|
|
|
|
async function confirmUserPasswordReset() {
|
|
resetMessages()
|
|
if (!modalTargetUser.value?.id) return
|
|
|
|
const password = modalPasswordDraft.value.trim()
|
|
if (!password) {
|
|
error.value = '초기화할 비밀번호를 입력해주세요.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
await api.updateAdminUserPassword(modalTargetUser.value.id, { password })
|
|
success.value = `${userDisplayName(modalTargetUser.value)} 계정 비밀번호를 초기화했어요.`
|
|
closeUserPasswordModal()
|
|
} catch (e) {
|
|
error.value = '비밀번호 초기화에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
function openUserDeleteModal(user) {
|
|
resetMessages()
|
|
modalTargetUser.value = user || null
|
|
userDeleteModalOpen.value = true
|
|
}
|
|
|
|
function closeUserDeleteModal() {
|
|
userDeleteModalOpen.value = false
|
|
modalTargetUser.value = null
|
|
}
|
|
|
|
async function confirmUserDelete() {
|
|
resetMessages()
|
|
if (!modalTargetUser.value?.id) return
|
|
|
|
try {
|
|
const deletingSelf = modalTargetUser.value.id === auth.user?.id
|
|
const deletedName = userDisplayName(modalTargetUser.value)
|
|
await api.deleteAdminUser(modalTargetUser.value.id)
|
|
users.value = users.value.filter((entry) => entry.id !== modalTargetUser.value.id)
|
|
closeUserDeleteModal()
|
|
success.value = `${deletedName} 계정을 삭제했어요.`
|
|
if (deletingSelf) await auth.refresh()
|
|
} catch (e) {
|
|
error.value = '회원 삭제에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
|
|
function openUserRoleModal(user) {
|
|
resetMessages()
|
|
modalTargetUser.value = user || null
|
|
modalRoleNextAdmin.value = !user?.draftIsAdmin
|
|
userRoleModalOpen.value = true
|
|
}
|
|
|
|
function closeUserRoleModal() {
|
|
userRoleModalOpen.value = false
|
|
modalTargetUser.value = null
|
|
modalRoleNextAdmin.value = false
|
|
}
|
|
|
|
function confirmUserRoleDraft() {
|
|
if (!modalTargetUser.value?.id) return
|
|
users.value = users.value.map((entry) =>
|
|
entry.id === modalTargetUser.value.id
|
|
? {
|
|
...entry,
|
|
draftIsAdmin: modalRoleNextAdmin.value,
|
|
}
|
|
: entry
|
|
)
|
|
const targetLabel = modalRoleNextAdmin.value ? '관리자로 지정했어요. 저장하면 반영됩니다.' : '관리자 권한 해제로 표시했어요. 저장하면 반영됩니다.'
|
|
closeUserRoleModal()
|
|
success.value = targetLabel
|
|
}
|
|
|
|
function submitCustomItemSearch() {
|
|
customItemPage.value = 1
|
|
refreshCustomItems()
|
|
}
|
|
|
|
function toggleCustomItemOrphanOnly() {
|
|
customItemPage.value = 1
|
|
refreshCustomItems()
|
|
}
|
|
|
|
function changeCustomItemLimit(limit) {
|
|
customItemLimit.value = limit
|
|
customItemPage.value = 1
|
|
refreshCustomItems()
|
|
}
|
|
|
|
function submitAdminTierListSearch() {
|
|
adminTierListPage.value = 1
|
|
refreshAdminTierLists()
|
|
}
|
|
|
|
function changeAdminTierListLimit(limit) {
|
|
adminTierListLimit.value = limit
|
|
adminTierListPage.value = 1
|
|
refreshAdminTierLists()
|
|
}
|
|
|
|
function moveAdminTierListPage(direction) {
|
|
const nextPage = adminTierListPage.value + direction
|
|
if (nextPage < 1 || nextPage > adminTierListPageCount.value) return
|
|
adminTierListPage.value = nextPage
|
|
refreshAdminTierLists()
|
|
}
|
|
|
|
function moveCustomItemPage(direction) {
|
|
const nextPage = customItemPage.value + direction
|
|
if (nextPage < 1 || nextPage > customItemPageCount.value) return
|
|
customItemPage.value = nextPage
|
|
refreshCustomItems()
|
|
}
|
|
|
|
function openCustomItemModal(item) {
|
|
modalTargetCustomItem.value = item || null
|
|
customItemModalTargetGameId.value = ''
|
|
customItemModalOpen.value = true
|
|
}
|
|
|
|
function closeCustomItemModal() {
|
|
customItemModalOpen.value = false
|
|
modalTargetCustomItem.value = null
|
|
customItemModalTargetGameId.value = ''
|
|
}
|
|
|
|
function openCustomItemDeleteModal(item) {
|
|
if (!item) return
|
|
if (item.usageCount > 0) {
|
|
error.value = '사용 중인 커스텀 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
|
|
return
|
|
}
|
|
modalTargetCustomItem.value = item
|
|
customItemDeleteModalOpen.value = true
|
|
}
|
|
|
|
function closeCustomItemDeleteModal() {
|
|
customItemDeleteModalOpen.value = false
|
|
}
|
|
|
|
async function removeCustomItem(item = modalTargetCustomItem.value) {
|
|
resetMessages()
|
|
if (!item) return
|
|
if (item.usageCount > 0) {
|
|
error.value = '사용 중인 커스텀 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
await api.deleteAdminCustomItem(item.id)
|
|
closeCustomItemDeleteModal()
|
|
closeCustomItemModal()
|
|
await refreshCustomItems()
|
|
success.value = '미사용 커스텀 이미지를 삭제했어요.'
|
|
} catch (e) {
|
|
error.value = '커스텀 이미지 삭제에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
async function removeUnusedCustomItems() {
|
|
resetMessages()
|
|
const ok = window.confirm('현재 검색 조건에 맞는 미사용 커스텀 이미지를 모두 삭제할까요?')
|
|
if (!ok) return
|
|
|
|
try {
|
|
const data = await api.deleteAdminUnusedCustomItems({ q: customItemQuery.value })
|
|
await refreshCustomItems()
|
|
success.value = `${data.deletedCount || 0}개의 미사용 커스텀 이미지를 삭제했어요.`
|
|
} catch (e) {
|
|
error.value = '미사용 커스텀 이미지 일괄 삭제에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
async function promoteCustomItem(item) {
|
|
resetMessages()
|
|
if (!customItemModalTargetGameId.value) {
|
|
error.value = '가져올 게임을 먼저 선택해주세요.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
item.isPromoting = true
|
|
await api.promoteAdminCustomItem(item.id, { gameId: customItemModalTargetGameId.value })
|
|
const targetGameName = games.value.find((game) => game.id === customItemModalTargetGameId.value)?.name || customItemModalTargetGameId.value
|
|
if (selectedGameId.value === customItemModalTargetGameId.value) await loadGame()
|
|
closeCustomItemModal()
|
|
success.value = `"${item.label}" 아이템을 ${targetGameName} 기본 템플릿으로 추가했어요.`
|
|
} catch (e) {
|
|
error.value = '커스텀 아이템을 기본 템플릿으로 가져오지 못했어요.'
|
|
} finally {
|
|
item.isPromoting = false
|
|
}
|
|
}
|
|
|
|
function tierListThumbUrl(tierList) {
|
|
return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
|
|
}
|
|
|
|
function tierListAuthorDisplayName(tierList) {
|
|
return tierList.authorName || '알 수 없음'
|
|
}
|
|
|
|
function tierListVisibilityLabel(tierList) {
|
|
return tierList.isPublic ? '공개' : '비공개'
|
|
}
|
|
|
|
function openAdminTierList(tierList) {
|
|
previewTierList.value = tierList
|
|
previewModalOpen.value = true
|
|
}
|
|
|
|
function closePreviewModal() {
|
|
previewModalOpen.value = false
|
|
previewTierList.value = null
|
|
}
|
|
|
|
function previewTierListUrl(tierList) {
|
|
if (!tierList?.gameId || !tierList?.id) return ''
|
|
return `/editor/${tierList.gameId}/${tierList.id}?preview=1`
|
|
}
|
|
|
|
function openTierListImportModal(tierList, items) {
|
|
resetMessages()
|
|
const nextItems = (items || []).filter(Boolean)
|
|
if (!nextItems.length) {
|
|
error.value = '가져올 아이템이 없어요.'
|
|
return
|
|
}
|
|
|
|
importModalTierList.value = tierList
|
|
importModalItems.value = nextItems
|
|
importModalMode.value = 'existing'
|
|
importModalTargetGameId.value = ''
|
|
importModalNewGameId.value = tierList.gameId === 'freeform' ? '' : `${tierList.gameId}-copy`
|
|
importModalNewGameName.value =
|
|
tierList.gameId === 'freeform' ? `${tierList.title} 템플릿` : `${tierList.gameName || tierList.gameId} 파생 템플릿`
|
|
importModalOpen.value = true
|
|
}
|
|
|
|
function closeTierListImportModal() {
|
|
importModalOpen.value = false
|
|
importModalTierList.value = null
|
|
importModalItems.value = []
|
|
}
|
|
|
|
async function confirmTierListImport() {
|
|
resetMessages()
|
|
if (!importModalTierList.value || !importModalItems.value.length) {
|
|
error.value = '가져올 티어표 정보를 확인하지 못했어요.'
|
|
return
|
|
}
|
|
|
|
const tierList = importModalTierList.value
|
|
const itemIds = importModalItems.value.map((item) => item.id)
|
|
|
|
try {
|
|
if (importModalMode.value === 'existing') {
|
|
if (!importModalTargetGameId.value) {
|
|
error.value = '아이템을 추가할 기존 게임을 선택해주세요.'
|
|
return
|
|
}
|
|
|
|
const data = await api.promoteAdminTierListItems(tierList.id, {
|
|
gameId: importModalTargetGameId.value,
|
|
itemIds,
|
|
})
|
|
if (selectedGameId.value === importModalTargetGameId.value) await loadGame()
|
|
success.value = `${data.items?.length || 0}개의 아이템을 기존 템플릿에 추가했어요.`
|
|
} else {
|
|
const nextGameId = (importModalNewGameId.value || '').trim()
|
|
const nextGameName = (importModalNewGameName.value || '').trim()
|
|
if (!nextGameId || !nextGameName) {
|
|
error.value = '새 게임 ID와 이름을 모두 입력해주세요.'
|
|
return
|
|
}
|
|
|
|
const data = await api.createAdminGameTemplateFromTierList(tierList.id, {
|
|
gameId: nextGameId,
|
|
name: nextGameName,
|
|
itemIds,
|
|
})
|
|
await refreshGames()
|
|
success.value = `"${data.game?.name || nextGameName}" 템플릿을 생성했어요.`
|
|
}
|
|
|
|
closeTierListImportModal()
|
|
} catch (e) {
|
|
error.value = '티어표 아이템 가져오기에 실패했어요.'
|
|
}
|
|
}
|
|
|
|
function templateRequestTypeLabel(request) {
|
|
return request.type === 'create' ? '템플릿 등록 요청' : '템플릿 업데이트 요청'
|
|
}
|
|
|
|
function templateRequestTargetLabel(request) {
|
|
return request.type === 'create' ? '새 게임 템플릿 생성' : request.targetGameName || request.targetGameId || request.sourceGameName
|
|
}
|
|
|
|
async function approveTemplateRequest(request) {
|
|
resetMessages()
|
|
try {
|
|
request.isHandling = true
|
|
if (request.type === 'create') {
|
|
const nextGameId = (request.draftGameId || '').trim()
|
|
const nextGameName = (request.draftGameName || '').trim()
|
|
if (!nextGameId || !nextGameName) {
|
|
error.value = '새 게임 ID와 이름을 모두 입력해주세요.'
|
|
return
|
|
}
|
|
await api.approveAdminTemplateRequest(request.id, {
|
|
gameId: nextGameId,
|
|
name: nextGameName,
|
|
})
|
|
await refreshGames()
|
|
success.value = `"${nextGameName}" 템플릿 생성을 승인했어요.`
|
|
} else {
|
|
const data = await api.approveAdminTemplateRequest(request.id)
|
|
if (selectedGameId.value === (request.targetGameId || request.sourceGameId)) await loadGame()
|
|
success.value = `${data.items?.length || 0}개의 아이템 추가 요청을 승인했어요.`
|
|
}
|
|
await refreshTemplateRequests()
|
|
await refreshAdminTierLists()
|
|
} catch (e) {
|
|
error.value = request.type === 'create' ? '템플릿 등록 요청 승인에 실패했어요.' : '템플릿 업데이트 요청 승인에 실패했어요.'
|
|
} finally {
|
|
request.isHandling = false
|
|
}
|
|
}
|
|
|
|
async function rejectTemplateRequest(request) {
|
|
resetMessages()
|
|
try {
|
|
request.isHandling = true
|
|
await api.rejectAdminTemplateRequest(request.id)
|
|
await refreshTemplateRequests()
|
|
success.value = '요청을 반려했어요.'
|
|
} catch (e) {
|
|
error.value = '요청 반려에 실패했어요.'
|
|
} finally {
|
|
request.isHandling = false
|
|
}
|
|
}
|
|
|
|
const displayThumbnailUrl = computed(() => {
|
|
if (thumbPreviewUrl.value) return thumbPreviewUrl.value
|
|
if (selectedGame.value?.game?.thumbnailSrc) return toApiUrl(selectedGame.value.game.thumbnailSrc)
|
|
return ''
|
|
})
|
|
|
|
function fmt(ts) {
|
|
return new Date(ts).toLocaleString(undefined, {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
function userAvatarUrl(user) {
|
|
return user?.avatarSrc ? toApiUrl(user.avatarSrc) : ''
|
|
}
|
|
|
|
function userDisplayName(user) {
|
|
return user?.nickname || user?.email?.split('@')[0] || '알 수 없음'
|
|
}
|
|
|
|
function userAvatarFallback(user) {
|
|
return (user?.email?.trim()?.[0] || '?').toUpperCase()
|
|
}
|
|
|
|
function addFeaturedGame(gameId) {
|
|
resetMessages()
|
|
if (!gameId || featuredGameIds.value.includes(gameId)) return
|
|
if (featuredGameIds.value.length >= 50) {
|
|
error.value = '상단 고정 게임은 최대 50개까지만 설정할 수 있어요.'
|
|
return
|
|
}
|
|
featuredGameIds.value = [...featuredGameIds.value, gameId]
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
function removeFeaturedGame(gameId) {
|
|
resetMessages()
|
|
featuredGameIds.value = featuredGameIds.value.filter((id) => id !== gameId)
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
function moveFeaturedGame(gameId, direction) {
|
|
const currentIndex = featuredGameIds.value.indexOf(gameId)
|
|
const nextIndex = currentIndex + direction
|
|
if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredGameIds.value.length) return
|
|
const nextIds = [...featuredGameIds.value]
|
|
const [moved] = nextIds.splice(currentIndex, 1)
|
|
nextIds.splice(nextIndex, 0, moved)
|
|
featuredGameIds.value = nextIds
|
|
syncFeaturedSortable()
|
|
}
|
|
|
|
async function saveFeaturedOrder() {
|
|
resetMessages()
|
|
try {
|
|
const data = await api.updateAdminGameDisplayOrder({ gameIds: featuredGameIds.value })
|
|
games.value = data.games || []
|
|
featuredGameIds.value = games.value
|
|
.filter((game) => game.displayRank != null)
|
|
.sort((a, b) => a.displayRank - b.displayRank)
|
|
.map((game) => game.id)
|
|
success.value = '홈 화면 게임 순서를 저장했어요.'
|
|
} catch (e) {
|
|
error.value = '게임 순서 저장에 실패했어요.'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="wrap">
|
|
<!-- <h2 class="title">관리자</h2> -->
|
|
<div class="card">
|
|
<!-- <div class="desc">기능이 많아진 만큼 관리 영역을 게임, 아이템, 회원 관리로 나눠서 정리합니다.</div> -->
|
|
<div v-if="!auth.user" class="warn">로그인이 필요해요.</div>
|
|
<div v-else-if="!isAdmin" class="warn">이 계정은 관리자 권한이 없어요.</div>
|
|
|
|
<template v-else>
|
|
<div class="adminWorkspace">
|
|
<div class="adminMain">
|
|
<header class="adminHero">
|
|
<div class="adminHero__eyebrow">Admin Workspace</div>
|
|
<h2 class="adminHero__title">{{ activeTabTitle }}</h2>
|
|
<p class="adminHero__desc">{{ activeTabDescription }}</p>
|
|
<div class="adminHero__stats">
|
|
<article v-for="stat in adminOverviewStats" :key="stat.label" class="adminHeroStat">
|
|
<span class="adminHeroStat__label">{{ stat.label }}</span>
|
|
<strong class="adminHeroStat__value">{{ stat.value }}</strong>
|
|
</article>
|
|
</div>
|
|
</header>
|
|
|
|
<template v-if="activeTab === 'featured'">
|
|
<div class="panel">
|
|
<div class="sectionHeader">
|
|
<div>
|
|
<div class="panel__title">홈 화면 상단 고정 순서</div>
|
|
<div class="hint hint--tight">여기에 넣은 게임은 지정한 순서대로 먼저 노출되고, 나머지 게임은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
|
|
</div>
|
|
<button class="btn btn--primary" @click="saveFeaturedOrder">순서 저장</button>
|
|
</div>
|
|
|
|
<div class="featuredOrderPanel">
|
|
<div class="featuredOrderPanel__list">
|
|
<div class="section__title">상단 고정 목록</div>
|
|
<div v-if="!featuredGames.length" class="hint">아직 상단 고정 게임이 없어요.</div>
|
|
<div v-else ref="featuredListEl" class="featuredList">
|
|
<article v-for="(game, index) in featuredGames" :key="game.id" class="featuredCard" :data-featured-id="game.id">
|
|
<div class="featuredCard__meta">
|
|
<span class="featuredCard__rank">{{ index + 1 }}</span>
|
|
<div>
|
|
<div class="featuredCard__title">{{ game.name }}</div>
|
|
<div class="featuredCard__id">{{ game.id }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="featuredCard__actions">
|
|
<button class="btn btn--ghost btn--small" data-featured-handle>드래그</button>
|
|
<button class="btn btn--ghost btn--small" :disabled="index === 0" @click="moveFeaturedGame(game.id, -1)">위로</button>
|
|
<button class="btn btn--ghost btn--small" :disabled="index === featuredGames.length - 1" @click="moveFeaturedGame(game.id, 1)">아래로</button>
|
|
<button class="btn btn--danger btn--small" @click="removeFeaturedGame(game.id)">제외</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="featuredOrderPanel__picker">
|
|
<div class="section__title">게임 추가</div>
|
|
<div class="featuredPickerList">
|
|
<button
|
|
v-for="game in availableGamesForFeatured"
|
|
:key="game.id"
|
|
class="featuredPickerItem"
|
|
:disabled="featuredGameIds.length >= 50"
|
|
@click="addFeaturedGame(game.id)"
|
|
>
|
|
<span>{{ game.name }}</span>
|
|
<span class="featuredPickerItem__id">{{ game.id }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'game-admin'">
|
|
<div class="panel">
|
|
<div class="sectionHeader">
|
|
<div>
|
|
<div class="panel__title">게임 관리</div>
|
|
<div class="hint hint--tight">등록된 게임을 선택하면 아래에서 썸네일과 기본 아이템을 바로 수정할 수 있어요.</div>
|
|
</div>
|
|
<button class="btn btn--primary" @click="openGameCreateModal">새 게임 생성</button>
|
|
</div>
|
|
|
|
<div class="gameManagerGrid">
|
|
<section class="adminCard">
|
|
<div class="section__title">등록된 게임 선택</div>
|
|
<div class="gameManagerCard__body">
|
|
<select :value="selectedGameId" class="select" @change="handleSelectedGameChange">
|
|
<option value="">게임을 선택해주세요</option>
|
|
<option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }} ({{ game.id }})</option>
|
|
</select>
|
|
<div class="hint hint--tight">선택하면 아래 상세 영역에서 썸네일과 기본 아이템을 바로 수정할 수 있어요.</div>
|
|
<div v-if="selectedGameId && !hasSelectedGame && !isGameLoading" class="hint hint--tight">선택된 게임 ID: {{ selectedGameId }}</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isGameLoading" class="panel panel--empty">
|
|
<div class="emptyState">
|
|
<div class="emptyState__title">게임 정보를 불러오는 중이에요.</div>
|
|
<div class="emptyState__desc">선택한 게임의 썸네일과 기본 아이템을 곧 표시합니다.</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="hasSelectedGame" class="panel">
|
|
<div class="detailHead">
|
|
<div>
|
|
<div class="panel__title">선택된 게임 정보</div>
|
|
<div class="selectedGame__name">{{ selectedGame.game.name }}</div>
|
|
<div class="selectedGame__id">{{ selectedGame.game.id }}</div>
|
|
</div>
|
|
<div class="detailHead__actions">
|
|
<button class="btn btn--danger" @click="removeGame">게임 삭제</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section section--topGrid">
|
|
<section class="adminCard">
|
|
<div class="section__title">썸네일 적용</div>
|
|
<input ref="thumbFileInput" type="file" accept="image/*" class="srOnlyInput" @change="onThumb" />
|
|
<button
|
|
class="thumbDropZone"
|
|
:class="{ 'thumbDropZone--active': isThumbDragOver }"
|
|
type="button"
|
|
@click="openThumbFilePicker"
|
|
@dragenter="onThumbDragEnter"
|
|
@dragover="onThumbDragOver"
|
|
@dragleave="onThumbDragLeave"
|
|
@drop="onThumbDrop"
|
|
>
|
|
<img v-if="displayThumbnailUrl" class="selectedThumb" :src="displayThumbnailUrl" :alt="selectedGame.game.name" />
|
|
<div v-else class="selectedThumb selectedThumb--empty">대표 썸네일</div>
|
|
<div class="thumbDropZone__copy">
|
|
<div class="thumbDropZone__title">클릭하거나 드래그해서 썸네일 추가</div>
|
|
<div class="thumbDropZone__desc">다른 업로드 화면처럼 이미지 한 장을 바로 지정할 수 있어요.</div>
|
|
</div>
|
|
</button>
|
|
<div class="uploadControls">
|
|
<button class="btn" :disabled="!canApplyThumbnail" @click="uploadThumbnail">썸네일 적용</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="adminCard">
|
|
<div class="section__title">기본 아이템 추가</div>
|
|
<div class="itemComposer">
|
|
<div class="itemComposer__form">
|
|
<input ref="itemFileInput" type="file" accept="image/*" multiple class="srOnlyInput" @change="onFile" />
|
|
<div
|
|
class="dropZone"
|
|
:class="{ 'dropZone--active': isItemDragOver }"
|
|
@dragenter="onItemDragEnter"
|
|
@dragover="onItemDragOver"
|
|
@dragleave="onItemDragLeave"
|
|
@drop="onItemDrop"
|
|
>
|
|
<div class="dropZone__title">이미지를 드래그해서 기본 아이템으로 추가</div>
|
|
<div class="dropZone__desc">여러 파일을 한 번에 올릴 수 있고, 저장 라벨은 파일명으로 자동 생성됩니다.</div>
|
|
<div class="dropZone__actions">
|
|
<button class="btn btn--ghost btn--small" type="button" @click="openItemFilePicker">파일 선택</button>
|
|
<button class="btn btn--danger btn--small" type="button" :disabled="!uploadFiles.length" @click="clearItemFiles">선택 비우기</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn" :disabled="!canAddItem" @click="uploadItem">
|
|
아이템 {{ uploadFiles.length || 0 }}개 추가
|
|
</button>
|
|
</div>
|
|
<div class="itemPreviewCard">
|
|
<div v-if="itemPreviewUrls.length" class="itemPreviewGrid">
|
|
<div v-for="(previewUrl, index) in itemPreviewUrls.slice(0, 6)" :key="previewUrl" class="itemPreviewFrame">
|
|
<img class="itemPreviewImage" :src="previewUrl" :alt="uploadFiles[index]?.name || 'item preview'" />
|
|
</div>
|
|
</div>
|
|
<div v-else class="itemPreviewEmpty">선택한 기본 아이템 미리보기가 여기에 표시됩니다.</div>
|
|
<div class="thumbLabel thumbLabel--preview">
|
|
{{ uploadFiles.length ? `선택된 파일 ${uploadFiles.length}개` : '아직 선택된 파일이 없어요.' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section__title">현재 기본 아이템 목록</div>
|
|
<div v-if="!selectedGame?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
|
|
<div v-else class="thumbGrid">
|
|
<div v-for="item in selectedGame.items" :key="item.id" class="thumbCard">
|
|
<img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" />
|
|
<input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" />
|
|
<div class="thumbCard__actions">
|
|
<button
|
|
class="btn btn--ghost btn--small"
|
|
:disabled="item.isSavingLabel || !item.draftLabel?.trim() || item.draftLabel.trim() === item.label"
|
|
@click="saveGameItemLabel(item)"
|
|
>
|
|
{{ item.isSavingLabel ? '저장중...' : '이름 저장' }}
|
|
</button>
|
|
<button class="btn btn--danger btn--small" @click="removeGameItem(item.id)">아이템 삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="panel panel--empty">
|
|
<div class="emptyState">
|
|
<div class="emptyState__title">게임을 선택하면 상세 관리가 열려요.</div>
|
|
<div class="emptyState__desc">
|
|
위에서 기존 게임을 선택하거나 새 게임을 만든 뒤, 같은 화면에서 바로 썸네일과 기본 아이템을 정리할 수 있어요.
|
|
</div>
|
|
<div v-if="selectedGameId" class="hint hint--tight">선택한 게임을 찾지 못했거나 로딩 중 오류가 발생했어요. 다시 선택해보세요.</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'items'">
|
|
<div class="panel">
|
|
<div v-if="!customItems.length" class="hint">조건에 맞는 커스텀 아이템이 없어요.</div>
|
|
<div v-else class="customItemGrid">
|
|
<button v-for="item in customItems" :key="item.id" type="button" class="customItemCard" @click="openCustomItemModal(item)">
|
|
<img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
|
|
<div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<button class="btn btn--ghost" :disabled="customItemPage <= 1" @click="moveCustomItemPage(-1)">이전</button>
|
|
<div class="pager__info">{{ customItemPage }} / {{ customItemPageCount }} 페이지 · 총 {{ customItemTotal }}개</div>
|
|
<button class="btn btn--ghost" :disabled="customItemPage >= customItemPageCount" @click="moveCustomItemPage(1)">다음</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'tierlists'">
|
|
<div v-if="tierlistsMode === 'requests'" class="panel">
|
|
<div class="sectionHeader">
|
|
<div>
|
|
<div class="panel__title">사용자 템플릿 요청</div>
|
|
<div class="hint hint--tight">freeform 템플릿 등록 요청과 기존 게임 템플릿 업데이트 요청을 여기서 승인하거나 반려할 수 있어요. 반려한 요청은 대기 목록에서 바로 제외됩니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!templateRequests.length" class="hint">현재 처리 대기 중인 템플릿 요청이 없어요.</div>
|
|
<div v-else class="templateRequestList">
|
|
<article v-for="request in templateRequests" :key="request.id" class="templateRequestCard">
|
|
<div class="templateRequestCard__head">
|
|
<div>
|
|
<div class="templateRequestCard__title">{{ request.sourceTierListTitle }}</div>
|
|
<div class="templateRequestCard__meta">
|
|
{{ templateRequestTypeLabel(request) }} · {{ request.requesterName }} · {{ fmt(request.createdAt) }}
|
|
</div>
|
|
<div class="templateRequestCard__meta">{{ templateRequestTargetLabel(request) }}</div>
|
|
</div>
|
|
<button class="btn btn--ghost btn--small" @click="openAdminTierList({ id: request.sourceTierListId, gameId: request.sourceGameId })">
|
|
원본 보기
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="request.items?.length" class="templateRequestItems">
|
|
<div v-for="item in request.items" :key="item.id" class="templateRequestItem">
|
|
<img class="templateRequestItem__thumb" :src="toApiUrl(item.src)" :alt="item.label" />
|
|
<div class="templateRequestItem__label">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="request.type === 'create'" class="templateRequestCard__form">
|
|
<label class="templateRequestField">
|
|
<span class="templateRequestField__label">게임 이름</span>
|
|
<input v-model="request.draftGameName" class="input" placeholder="새 게임 이름" />
|
|
</label>
|
|
<label class="templateRequestField">
|
|
<span class="templateRequestField__label">게임 ID</span>
|
|
<input v-model="request.draftGameId" class="input" placeholder="새 게임 ID" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="templateRequestCard__actions">
|
|
<button class="btn btn--primary" :disabled="request.isHandling" @click="approveTemplateRequest(request)">
|
|
{{ request.isHandling ? '처리중...' : '승인' }}
|
|
</button>
|
|
<button class="btn btn--danger" :disabled="request.isHandling" @click="rejectTemplateRequest(request)">반려 후 숨김</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="panel">
|
|
<div class="sectionHeader">
|
|
<div>
|
|
<div class="panel__title">전체 티어표 관리</div>
|
|
<div class="hint hint--tight">공개/비공개를 포함한 최근 티어표를 모두 확인하고, 추가 아이템을 기존 게임 템플릿으로 승격하거나 커스텀 티어표를 새 게임 템플릿으로 만들 수 있어요. 여기는 요청 목록과 별개로 전체 저장 티어표를 보는 영역입니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!adminTierLists.length" class="hint">조건에 맞는 티어표가 없어요.</div>
|
|
<div v-else class="tierAdminList">
|
|
<article v-for="tierList in adminTierLists" :key="tierList.id" class="tierAdminCard">
|
|
<div class="tierAdminCard__preview" @click="openAdminTierList(tierList)">
|
|
<img v-if="tierListThumbUrl(tierList)" class="tierAdminCard__thumb" :src="tierListThumbUrl(tierList)" :alt="tierList.title" />
|
|
<div v-else class="tierAdminCard__thumb tierAdminCard__thumb--empty"></div>
|
|
</div>
|
|
|
|
<div class="tierAdminCard__body">
|
|
<div class="tierAdminCard__head">
|
|
<div>
|
|
<div class="tierAdminCard__title">{{ tierList.title }}</div>
|
|
<div v-if="tierList.description" class="tierAdminCard__desc">{{ tierList.description }}</div>
|
|
<div class="tierAdminCard__meta">
|
|
{{ tierList.gameName || tierList.gameId }} · {{ tierListAuthorDisplayName(tierList) }} · {{ tierListVisibilityLabel(tierList) }}
|
|
</div>
|
|
<div class="tierAdminCard__meta">{{ fmt(tierList.updatedAt) }}</div>
|
|
</div>
|
|
<button class="btn btn--ghost btn--small" @click="openAdminTierList(tierList)">완성본 보기</button>
|
|
</div>
|
|
|
|
<div class="tierAdminCard__stats">
|
|
<span class="pill">전체 아이템 {{ tierList.itemCount }}개</span>
|
|
<span class="pill" :class="{ 'pill--accent': tierList.extraItemCount > 0 }">추가 아이템 {{ tierList.extraItemCount }}개</span>
|
|
</div>
|
|
|
|
<div v-if="tierList.extraItems?.length" class="tierAdminSection">
|
|
<div class="tierAdminSection__title">추가로 넣은 아이템</div>
|
|
<div class="tierAdminItemList">
|
|
<button v-for="item in tierList.extraItems" :key="item.id" class="tierAdminItem" @click="openTierListImportModal(tierList, [item])">
|
|
<img class="tierAdminItem__thumb" :src="toApiUrl(item.src)" :alt="item.label" />
|
|
<div class="tierAdminItem__title">{{ item.label }}</div>
|
|
</button>
|
|
</div>
|
|
<div class="tierAdminSection__actions">
|
|
<button class="btn btn--ghost btn--small" @click="openTierListImportModal(tierList, tierList.extraItems)">추가 아이템 전체 가져오기</button>
|
|
<button v-if="tierList.gameId === 'freeform'" class="btn btn--primary btn--small" @click="openTierListImportModal(tierList, tierList.extraItems)">
|
|
새 템플릿으로 가져오기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<button class="btn btn--ghost" :disabled="adminTierListPage <= 1" @click="moveAdminTierListPage(-1)">이전</button>
|
|
<div class="pager__info">{{ adminTierListPage }} / {{ adminTierListPageCount }} 페이지 · 총 {{ adminTierListTotal }}개</div>
|
|
<button class="btn btn--ghost" :disabled="adminTierListPage >= adminTierListPageCount" @click="moveAdminTierListPage(1)">다음</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="panel">
|
|
<div class="sectionHeader">
|
|
<div>
|
|
<div class="panel__title">회원 관리</div>
|
|
<div class="hint hint--tight">회원 프로필을 정리하고, 필요한 경우에만 권한 변경과 비밀번호 초기화를 진행할 수 있어요.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!users.length" class="hint">아직 가입한 회원이 없어요.</div>
|
|
<div v-else class="userList">
|
|
<article v-for="user in users" :key="user.id" class="userCard">
|
|
<div class="userCard__head">
|
|
<div class="userCard__identity">
|
|
<input
|
|
:ref="(el) => setUserAvatarInput(user.id, el)"
|
|
type="file"
|
|
accept="image/*"
|
|
class="srOnlyInput"
|
|
@change="onUserAvatarChange(user, $event)"
|
|
/>
|
|
<div class="userAvatarWrap">
|
|
<button class="userAvatar userAvatarButton" type="button" :disabled="user.isAvatarBusy" @click="openUserAvatarPicker(user)">
|
|
<img v-if="userAvatarUrl(user)" class="userAvatar__image" :src="userAvatarUrl(user)" :alt="userDisplayName(user)" />
|
|
<span v-else class="userAvatar__fallback">{{ userAvatarFallback(user) }}</span>
|
|
<span class="userAvatarButton__overlay">{{ user.isAvatarBusy ? '업데이트중...' : '수정' }}</span>
|
|
</button>
|
|
<button
|
|
v-if="user?.avatarSrc"
|
|
class="userAvatarRemoveButton"
|
|
type="button"
|
|
title="회원 썸네일 삭제"
|
|
:disabled="user.isAvatarBusy"
|
|
@click.stop="removeUserAvatar(user)"
|
|
>
|
|
<img :src="deleteIcon" alt="" />
|
|
</button>
|
|
</div>
|
|
<div class="userCard__identityMeta">
|
|
<div class="userCard__title">{{ userDisplayName(user) }}</div>
|
|
<div class="userCard__meta">{{ user.email }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="user.draftIsAdmin" class="roleBadge userCard__roleBadge">Administrator</div>
|
|
|
|
<div class="userInfoList">
|
|
<div class="userInfoLine"><span>가입일</span><strong>{{ fmt(user.createdAt) }}</strong></div>
|
|
<div class="userInfoLine"><span>작성 티어표</span><strong>{{ user.tierListCount }}개</strong></div>
|
|
<div class="userInfoLine"><span>최근 활동</span><strong>{{ fmt(user.recentActivityAt || user.createdAt) }}</strong></div>
|
|
</div>
|
|
|
|
<input v-model="user.draftEmail" class="input" placeholder="이메일" />
|
|
<input v-model="user.draftNickname" class="input" placeholder="닉네임" />
|
|
<button
|
|
class="userRoleAction"
|
|
type="button"
|
|
:disabled="user.id === auth.user?.id"
|
|
@click="openUserRoleModal(user)"
|
|
>
|
|
{{ user.draftIsAdmin ? '관리자 권한 해제' : '관리자 권한 임명' }}
|
|
</button>
|
|
|
|
<div class="userCard__actions userCard__actions--compact">
|
|
<button class="iconActionButton" type="button" title="비밀번호 초기화" @click="openUserPasswordModal(user)">
|
|
<img :src="lockResetIcon" alt="" />
|
|
</button>
|
|
<button class="iconActionButton iconActionButton--danger" type="button" title="회원 삭제" @click="openUserDeleteModal(user)">
|
|
<img :src="deleteIcon" alt="" />
|
|
</button>
|
|
<button class="btn btn--ghost userSaveButton" :disabled="!isUserDirty(user)" @click="saveUser(user)">회원정보 저장</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="gameCreateModalOpen" class="modalOverlay" @click.self="closeGameCreateModal">
|
|
<div class="modalCard" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">새 게임 만들기</div>
|
|
<div class="modalCard__desc">게임 이름과 고유 ID를 입력한 뒤 생성하면 바로 아래 상세 관리 화면으로 이어집니다.</div>
|
|
<div class="modalCard__form">
|
|
<input v-model="newGameName" class="input" placeholder="게임 이름" />
|
|
<input v-model="newGameId" class="input" placeholder="game id (영문/숫자)" @keydown.enter.prevent="createGame" />
|
|
</div>
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeGameCreateModal">취소</button>
|
|
<button class="btn btn--primary" :disabled="!newGameId.trim() || !newGameName.trim()" @click="createGame">게임 생성</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="userPasswordModalOpen" class="modalOverlay" @click.self="closeUserPasswordModal">
|
|
<div class="modalCard" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">비밀번호 초기화</div>
|
|
<div class="modalCard__desc">{{ modalTargetUser ? `${userDisplayName(modalTargetUser)} 계정에 설정할 새 비밀번호를 입력해주세요.` : '' }}</div>
|
|
<div class="modalCard__form">
|
|
<input v-model="modalPasswordDraft" class="input" type="password" placeholder="초기화할 비밀번호 입력" @keydown.enter.prevent="confirmUserPasswordReset" />
|
|
</div>
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeUserPasswordModal">취소</button>
|
|
<button class="btn btn--primary" :disabled="!modalPasswordDraft.trim()" @click="confirmUserPasswordReset">초기화</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="userDeleteModalOpen" class="modalOverlay" @click.self="closeUserDeleteModal">
|
|
<div class="modalCard" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">회원 삭제</div>
|
|
<div class="modalCard__desc">{{ modalTargetUser ? `${modalTargetUser.email} 계정을 삭제할까요? 작성한 티어표와 커스텀 이미지도 함께 삭제됩니다.` : '' }}</div>
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeUserDeleteModal">취소</button>
|
|
<button class="btn btn--danger" @click="confirmUserDelete">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="userRoleModalOpen" class="modalOverlay" @click.self="closeUserRoleModal">
|
|
<div class="modalCard" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">관리자 권한 변경</div>
|
|
<div class="modalCard__desc">
|
|
{{
|
|
modalTargetUser
|
|
? modalRoleNextAdmin
|
|
? `${userDisplayName(modalTargetUser)} 사용자를 관리자로 임명할까요?`
|
|
: `${userDisplayName(modalTargetUser)} 사용자의 관리자 권한을 해제할까요?`
|
|
: ''
|
|
}}
|
|
</div>
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeUserRoleModal">취소</button>
|
|
<button class="btn btn--primary" @click="confirmUserRoleDraft">확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="importModalOpen" class="modalOverlay" @click.self="closeTierListImportModal">
|
|
<div class="modalCard modalCard--import" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">티어표 아이템 가져오기</div>
|
|
<div class="modalCard__desc">
|
|
"{{ importModalTierList?.title }}"의 아이템 {{ importModalItemCount }}개를 어디로 가져올지 선택해주세요.
|
|
</div>
|
|
|
|
<div class="importModeTabs">
|
|
<button class="modeTab" :class="{ 'modeTab--active': importModalMode === 'existing' }" @click="importModalMode = 'existing'">
|
|
기존 템플릿에 추가
|
|
</button>
|
|
<button class="modeTab" :class="{ 'modeTab--active': importModalMode === 'new' }" @click="importModalMode = 'new'">
|
|
새 템플릿 만들기
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="importModalMode === 'existing'" class="modalCard__form">
|
|
<select v-model="importModalTargetGameId" class="select">
|
|
<option value="">기존 게임 선택</option>
|
|
<option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div v-else class="modalCard__form">
|
|
<input v-model="importModalNewGameId" class="input" placeholder="새 게임 ID" />
|
|
<input v-model="importModalNewGameName" class="input" placeholder="새 게임 이름" />
|
|
</div>
|
|
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeTierListImportModal">취소</button>
|
|
<button class="btn btn--primary" @click="confirmTierListImport">
|
|
{{ importModalMode === 'existing' ? '여기로 가져오기' : '새 템플릿 생성' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="customItemModalOpen" class="modalOverlay" @click.self="closeCustomItemModal">
|
|
<div class="modalCard modalCard--customItem" role="dialog" aria-modal="true">
|
|
<div class="modalCard__titleRow">
|
|
<div class="modalCard__title">커스텀 아이템 상세</div>
|
|
<button class="btn btn--ghost btn--small" @click="closeCustomItemModal">닫기</button>
|
|
</div>
|
|
<div v-if="modalTargetCustomItem" class="customItemModal">
|
|
<div class="customItemModal__side">
|
|
<img class="customItemModal__image" :src="toApiUrl(modalTargetCustomItem.src)" :alt="modalTargetCustomItem.label" />
|
|
<div class="customItemModal__selector">
|
|
<span class="customItemModal__label">기본 템플릿에 추가</span>
|
|
<select v-model="customItemModalTargetGameId" class="select">
|
|
<option value="">게임 선택</option>
|
|
<option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="customItemModal__linked">
|
|
<span class="customItemModal__label">이미 사용 중인 게임</span>
|
|
<div v-if="modalTargetCustomItem.linkedGames?.length" class="customItemModal__chips">
|
|
<span v-for="game in modalTargetCustomItem.linkedGames" :key="game.id" class="pill">{{ game.name }}</span>
|
|
</div>
|
|
<div v-else class="hint hint--tight">아직 연결된 게임이 없어요.</div>
|
|
</div>
|
|
</div>
|
|
<div class="customItemModal__body">
|
|
<div class="customItemModal__title">{{ modalTargetCustomItem.label }}</div>
|
|
<div class="customItemModal__metaList">
|
|
<div class="customItemModal__metaRow"><span>파일</span><strong :title="modalTargetCustomItem.src.split('/').pop()">{{ modalTargetCustomItem.src.split('/').pop() }}</strong></div>
|
|
<div class="customItemModal__metaRow"><span>업로더</span><strong :title="modalTargetCustomItem.ownerName">{{ modalTargetCustomItem.ownerName }}</strong></div>
|
|
<div class="customItemModal__metaRow"><span>사용 중</span><strong>{{ modalTargetCustomItem.usageCount }}개 티어표</strong></div>
|
|
<div class="customItemModal__metaRow"><span>등록일</span><strong>{{ fmt(modalTargetCustomItem.createdAt) }}</strong></div>
|
|
</div>
|
|
<div class="customItemModal__actions">
|
|
<a class="btn btn--ghost" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
|
|
<button class="btn btn--ghost" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
|
|
{{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
|
|
</button>
|
|
<button class="btn btn--danger" :disabled="modalTargetCustomItem.usageCount > 0" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="customItemDeleteModalOpen" class="modalOverlay" @click.self="closeCustomItemDeleteModal">
|
|
<div class="modalCard" role="dialog" aria-modal="true">
|
|
<div class="modalCard__title">커스텀 아이템 삭제</div>
|
|
<div class="modalCard__desc">{{ modalTargetCustomItem ? '"' + modalTargetCustomItem.label + '" 이미지를 삭제할까요? 미사용 상태의 이미지에만 삭제를 허용합니다.' : '' }}</div>
|
|
<div class="modalCard__actions">
|
|
<button class="btn btn--ghost" @click="closeCustomItemDeleteModal">취소</button>
|
|
<button class="btn btn--danger" @click="removeCustomItem()">삭제</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="previewModalOpen" class="modalOverlay" @click.self="closePreviewModal">
|
|
<div class="modalCard modalCard--preview" role="dialog" aria-modal="true">
|
|
<div class="modalCard__titleRow">
|
|
<div class="modalCard__title">{{ previewTierList?.title || '티어표 미리보기' }}</div>
|
|
<button class="btn btn--ghost btn--small" @click="closePreviewModal">닫기</button>
|
|
</div>
|
|
<iframe
|
|
v-if="previewTierList"
|
|
class="previewFrame"
|
|
:src="previewTierListUrl(previewTierList)"
|
|
title="티어표 미리보기"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<Teleport :to="localRightRailTarget">
|
|
<aside v-show="globalRightRailOpen" class="adminSidebar">
|
|
<section class="adminSidebar__panel">
|
|
<div class="adminSidebar__label">Mode</div>
|
|
<div class="adminSidebar__tabs">
|
|
<button class="tab" :class="{ 'tab--active': activeTab === 'featured' }" @click="setTab('featured')">목록 관리</button>
|
|
<button class="tab" :class="{ 'tab--active': activeTab === 'game-admin' }" @click="setTab('game-admin')">게임 관리</button>
|
|
<button class="tab" :class="{ 'tab--active': activeTab === 'items' }" @click="setTab('items')">아이템 관리</button>
|
|
<button class="tab" :class="{ 'tab--active': activeTab === 'tierlists' }" @click="setTab('tierlists')">티어표 관리</button>
|
|
<button class="tab" :class="{ 'tab--active': activeTab === 'users' }" @click="setTab('users')">회원 관리</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="activeTab === 'items'" class="adminSidebar__panel">
|
|
<div class="adminSidebar__label">Filters</div>
|
|
<div class="adminSidebar__group">
|
|
<input v-model="customItemQuery" class="input" placeholder="파일명, 라벨, 업로더 검색" @keydown.enter.prevent="submitCustomItemSearch" />
|
|
<button class="btn btn--ghost" @click="submitCustomItemSearch">검색</button>
|
|
</div>
|
|
<div class="adminSidebar__group">
|
|
<select :value="customItemLimit" class="select" @change="changeCustomItemLimit(Number($event.target.value))">
|
|
<option :value="50">50개씩 보기</option>
|
|
<option :value="200">200개씩 보기</option>
|
|
</select>
|
|
<select v-model="customItemTargetGameId" class="select">
|
|
<option value="">가져올 게임 선택</option>
|
|
<option v-for="game in games" :key="game.id" :value="game.id">{{ game.name }}</option>
|
|
</select>
|
|
<label class="checkRow checkRow--compact">
|
|
<input v-model="customItemOrphanOnly" type="checkbox" @change="toggleCustomItemOrphanOnly" />
|
|
<span>미사용 커스텀 이미지만 보기</span>
|
|
</label>
|
|
</div>
|
|
<div class="adminSidebar__actions">
|
|
<button class="btn btn--ghost" @click="refreshCustomItems">새로고침</button>
|
|
<button class="btn btn--danger" :disabled="!customItems.length" @click="removeUnusedCustomItems">미사용 이미지 일괄 삭제</button>
|
|
</div>
|
|
<div class="adminSidebar__stats">
|
|
<div class="sidebarStat">
|
|
<span class="sidebarStat__label">현재 페이지</span>
|
|
<strong class="sidebarStat__value">{{ customItemPage }}/{{ customItemPageCount }}</strong>
|
|
</div>
|
|
<div class="sidebarStat">
|
|
<span class="sidebarStat__label">검색 결과</span>
|
|
<strong class="sidebarStat__value">{{ customItemTotal }}</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-else-if="activeTab === 'tierlists'" class="adminSidebar__panel">
|
|
<div class="adminSidebar__label">Tierlists</div>
|
|
<div class="modeTabs modeTabs--stack">
|
|
<button class="modeTab" :class="{ 'modeTab--active': tierlistsMode === 'requests' }" @click="setTierlistsMode('requests')">
|
|
템플릿 요청 관리
|
|
</button>
|
|
<button class="modeTab" :class="{ 'modeTab--active': tierlistsMode === 'lists' }" @click="setTierlistsMode('lists')">
|
|
전체 티어표 관리
|
|
</button>
|
|
</div>
|
|
<template v-if="tierlistsMode === 'requests'"></template>
|
|
<template v-else>
|
|
<div class="adminSidebar__group">
|
|
<input
|
|
v-model="adminTierListQuery"
|
|
class="input"
|
|
placeholder="제목, 작성자, 게임 이름 검색"
|
|
@keydown.enter.prevent="submitAdminTierListSearch"
|
|
/>
|
|
<button class="btn btn--ghost" @click="submitAdminTierListSearch">검색</button>
|
|
<select :value="adminTierListLimit" class="select" @change="changeAdminTierListLimit(Number($event.target.value))">
|
|
<option :value="50">50개씩 보기</option>
|
|
<option :value="200">200개씩 보기</option>
|
|
</select>
|
|
</div>
|
|
<div class="adminSidebar__actions">
|
|
<button class="btn btn--ghost" @click="refreshAdminTierLists">새로고침</button>
|
|
</div>
|
|
<div class="adminSidebar__stats">
|
|
<div class="sidebarStat">
|
|
<span class="sidebarStat__label">현재 페이지</span>
|
|
<strong class="sidebarStat__value">{{ adminTierListPage }}/{{ adminTierListPageCount }}</strong>
|
|
</div>
|
|
<div class="sidebarStat">
|
|
<span class="sidebarStat__label">검색 결과</span>
|
|
<strong class="sidebarStat__value">{{ adminTierListTotal }}</strong>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
</aside>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
.adminWorkspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
.adminMain {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
.adminHero {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 22px 24px;
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
|
|
rgba(255, 255, 255, 0.02);
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
|
|
}
|
|
.adminHero__eyebrow {
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.42);
|
|
}
|
|
.adminHero__title {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
line-height: 1.05;
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.adminHero__desc {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.66);
|
|
line-height: 1.6;
|
|
}
|
|
.adminHero__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 6px;
|
|
}
|
|
.adminHeroStat {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 14px 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(7, 7, 7, 0.18);
|
|
}
|
|
.adminHeroStat__label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.46);
|
|
}
|
|
.adminHeroStat__value {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.adminSidebar {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
.adminSidebar__panel {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border-radius: 22px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
|
|
rgba(13, 13, 13, 0.94);
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.adminSidebar__label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.42);
|
|
}
|
|
.adminSidebar__tabs,
|
|
.adminSidebar__group,
|
|
.adminSidebar__actions,
|
|
.adminSidebar__stats {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.adminSidebar__groupTitle {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: rgba(255, 255, 255, 0.84);
|
|
}
|
|
.sidebarStat {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 12px 14px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
.sidebarStat__label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.56);
|
|
}
|
|
.sidebarStat__value {
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
.card {
|
|
border: 0;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.desc {
|
|
opacity: 0.82;
|
|
line-height: 1.5;
|
|
}
|
|
.warn,
|
|
.error,
|
|
.success {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
}
|
|
.warn {
|
|
border: 1px solid rgba(245, 158, 11, 0.35);
|
|
background: rgba(245, 158, 11, 0.14);
|
|
}
|
|
.error {
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
background: rgba(239, 68, 68, 0.12);
|
|
}
|
|
.success {
|
|
border: 1px solid rgba(52, 211, 153, 0.32);
|
|
background: rgba(52, 211, 153, 0.14);
|
|
}
|
|
.tabs,
|
|
.modeTabs {
|
|
margin-top: 0;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modeTabs--stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.tab,
|
|
.modeTab {
|
|
padding: 12px 14px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
transition:
|
|
border-color 0.16s ease,
|
|
background 0.16s ease,
|
|
transform 0.16s ease;
|
|
}
|
|
.tab:hover,
|
|
.modeTab:hover {
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.07);
|
|
transform: translateY(-1px);
|
|
}
|
|
.tab--active,
|
|
.modeTab--active {
|
|
background: rgba(96, 165, 250, 0.14);
|
|
border-color: rgba(96, 165, 250, 0.28);
|
|
color: rgba(239, 246, 255, 0.98);
|
|
}
|
|
.adminSidebar__tabs .tab,
|
|
.modeTabs--stack .modeTab {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
.panel {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
|
|
rgba(34, 34, 34, 0.84);
|
|
border-radius: 24px;
|
|
padding: 18px;
|
|
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.panel--empty {
|
|
min-height: 240px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.panel--compact {
|
|
max-width: 520px;
|
|
}
|
|
.emptyState {
|
|
max-width: 520px;
|
|
display: grid;
|
|
gap: 8px;
|
|
text-align: center;
|
|
}
|
|
.emptyState__title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
}
|
|
.emptyState__desc {
|
|
color: rgba(255, 255, 255, 0.66);
|
|
line-height: 1.6;
|
|
}
|
|
.featuredOrderPanel {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
|
|
gap: 16px;
|
|
}
|
|
.featuredOrderPanel__list,
|
|
.featuredOrderPanel__picker {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.025);
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
}
|
|
.featuredList,
|
|
.featuredPickerList {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 10px;
|
|
max-height: 420px;
|
|
overflow: auto;
|
|
}
|
|
.featuredCard {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(0, 0, 0, 0.22);
|
|
}
|
|
.featuredCard__meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.featuredCard__rank {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: rgba(96, 165, 250, 0.18);
|
|
font-weight: 900;
|
|
flex: 0 0 auto;
|
|
}
|
|
.featuredCard__title {
|
|
font-weight: 900;
|
|
}
|
|
.featuredCard__id {
|
|
margin-top: 4px;
|
|
opacity: 0.68;
|
|
font-size: 12px;
|
|
word-break: break-all;
|
|
}
|
|
.featuredCard__actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.featuredCard [data-featured-handle] {
|
|
cursor: grab;
|
|
}
|
|
.featuredPickerItem {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(0, 0, 0, 0.16);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.featuredPickerItem:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.featuredPickerItem__id {
|
|
opacity: 0.64;
|
|
font-size: 12px;
|
|
}
|
|
.panel__title,
|
|
.section__title {
|
|
font-weight: 900;
|
|
}
|
|
.section {
|
|
margin-top: 18px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
.section--topGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.gameManagerGrid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.gameManagerCard__body {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.adminCard {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.025);
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
min-width: 0;
|
|
}
|
|
.sectionHeader {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.toolbar {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
.toolbar--secondary {
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
}
|
|
.toolbar__search,
|
|
.toolbar__select {
|
|
margin-top: 0;
|
|
}
|
|
.toolbar__button {
|
|
margin-top: 0;
|
|
}
|
|
.uploadPreviewCard {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.uploadControls {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 12px;
|
|
justify-items: center;
|
|
}
|
|
.select,
|
|
.input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 11px 13px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.18);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
outline: none;
|
|
/* margin-top: 10px; */
|
|
}
|
|
.input--compact {
|
|
max-width: 320px;
|
|
}
|
|
.input--labelEdit {
|
|
margin-top: 10px;
|
|
}
|
|
.hint {
|
|
margin-top: 10px;
|
|
opacity: 0.78;
|
|
font-size: 13px;
|
|
}
|
|
.hint--tight {
|
|
margin-top: 6px;
|
|
}
|
|
.inputFile {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
}
|
|
.inputFile--tight {
|
|
margin-top: 0;
|
|
}
|
|
.srOnlyInput {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.btn {
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
margin-top: 12px;
|
|
padding: 11px 13px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition:
|
|
background 0.16s ease,
|
|
border-color 0.16s ease,
|
|
transform 0.16s ease;
|
|
}
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255, 255, 255, 0.22);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.btn--small {
|
|
margin-top: 0;
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
}
|
|
.ghost {
|
|
opacity: 0.4;
|
|
}
|
|
.chosen {
|
|
outline: 2px solid rgba(96, 165, 250, 0.45);
|
|
}
|
|
.btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
.btn--primary {
|
|
background: rgba(96, 165, 250, 0.2);
|
|
border-color: rgba(96, 165, 250, 0.26);
|
|
}
|
|
.btn--danger {
|
|
background: rgba(239, 68, 68, 0.14);
|
|
border-color: rgba(239, 68, 68, 0.28);
|
|
}
|
|
.btn--ghost {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
.detailHead {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.detailHead__actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.selectedGame__name {
|
|
margin-top: 8px;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
}
|
|
.selectedGame__id {
|
|
margin-top: 6px;
|
|
opacity: 0.72;
|
|
word-break: break-all;
|
|
}
|
|
.selectedThumb {
|
|
width: min(100%, 256px);
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.selectedThumb--empty {
|
|
display: grid;
|
|
place-items: center;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
.thumbDropZone {
|
|
width: 100%;
|
|
display: grid;
|
|
gap: 14px;
|
|
justify-items: start;
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
border: 1px dashed rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
text-align: left;
|
|
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
|
|
}
|
|
.thumbDropZone--active {
|
|
border-color: rgba(96, 165, 250, 0.56);
|
|
background: rgba(96, 165, 250, 0.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
.thumbDropZone__copy {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.thumbDropZone__title {
|
|
font-weight: 900;
|
|
}
|
|
.thumbDropZone__desc {
|
|
color: rgba(255, 255, 255, 0.68);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.itemComposer {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(160px, 192px);
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
.itemComposer__form {
|
|
display: grid;
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
.dropZone {
|
|
padding: 18px;
|
|
border-radius: 16px;
|
|
border: 1px dashed rgba(255, 255, 255, 0.2);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
transition:
|
|
border-color 0.16s ease,
|
|
background 0.16s ease,
|
|
transform 0.16s ease;
|
|
}
|
|
.dropZone--active {
|
|
border-color: rgba(96, 165, 250, 0.56);
|
|
background: rgba(96, 165, 250, 0.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
.dropZone__title {
|
|
font-weight: 900;
|
|
}
|
|
.dropZone__desc {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
opacity: 0.74;
|
|
line-height: 1.5;
|
|
}
|
|
.dropZone__actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.itemPreviewCard {
|
|
padding: 12px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.itemPreviewGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.itemPreviewFrame {
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
.itemPreviewImage {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.itemPreviewEmpty {
|
|
min-height: 192px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
.thumbGrid {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.thumbCard {
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
padding: 12px;
|
|
min-width: 0;
|
|
}
|
|
.thumb {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
.thumb--game {
|
|
max-width: 150px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
.thumbLabel {
|
|
margin-top: 8px;
|
|
font-weight: 900;
|
|
font-size: 13px;
|
|
opacity: 0.9;
|
|
word-break: break-word;
|
|
}
|
|
.thumbCard__actions {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.thumbLabel--preview {
|
|
text-align: center;
|
|
}
|
|
.customItemGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.customItemCard {
|
|
appearance: none;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
overflow: hidden;
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
min-width: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
|
|
}
|
|
.customItemCard:hover {
|
|
border-color: rgba(126, 162, 255, 0.42);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
transform: translateY(-1px);
|
|
}
|
|
.customItemCard__image {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 14px;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
.customItemCard__title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
color: #ffffff;
|
|
}
|
|
.customItemModal {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
.customItemModal__side {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.customItemModal__image {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
.customItemModal__body {
|
|
display: grid;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
.customItemModal__selector,
|
|
.customItemModal__linked {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.customItemModal__label {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.52);
|
|
}
|
|
.customItemModal__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.customItemModal__title {
|
|
font-size: 19px;
|
|
font-weight: 900;
|
|
line-height: 1.35;
|
|
word-break: break-word;
|
|
}
|
|
.customItemModal__metaList {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.customItemModal__metaRow {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.customItemModal__metaRow span {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.46);
|
|
}
|
|
.customItemModal__metaRow strong {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.84);
|
|
}
|
|
.customItemModal__actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modalCard--customItem {
|
|
width: min(760px, 100%);
|
|
}
|
|
.pager {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pager__info {
|
|
opacity: 0.82;
|
|
font-size: 14px;
|
|
}
|
|
.userList {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.userCard {
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
padding: 24px 16px 16px;
|
|
overflow: visible;
|
|
}
|
|
.userCard__head {
|
|
display: block;
|
|
}
|
|
.userCard__identityMeta {
|
|
min-width: 0;
|
|
}
|
|
.userCard__identity {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.userAvatarWrap {
|
|
position: relative;
|
|
width: 56px;
|
|
height: 56px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.userCard__title {
|
|
font-weight: 900;
|
|
}
|
|
.userCard__meta {
|
|
margin-top: 4px;
|
|
opacity: 0.72;
|
|
font-size: 13px;
|
|
}
|
|
.userAvatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(96, 165, 250, 0.18);
|
|
}
|
|
.userAvatarButton {
|
|
position: relative;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
.userAvatarButton:disabled {
|
|
cursor: wait;
|
|
}
|
|
.userAvatarRemoveButton {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(10, 14, 22, 0.96);
|
|
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translateY(2px) scale(0.96);
|
|
transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, visibility 160ms ease;
|
|
}
|
|
.userAvatarRemoveButton img {
|
|
width: 12px;
|
|
height: 12px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.userAvatarRemoveButton:disabled {
|
|
opacity: 0.45;
|
|
cursor: wait;
|
|
}
|
|
.userAvatarRemoveButton:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
.userAvatarButton__overlay {
|
|
position: absolute;
|
|
inset: auto 0 0 0;
|
|
padding: 10px 0 6px;
|
|
background: linear-gradient(180deg, rgba(7, 10, 18, 0), rgba(7, 10, 18, 0.88));
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
transition: opacity 160ms ease, transform 160ms ease;
|
|
}
|
|
.userAvatarWrap:hover .userAvatarButton__overlay,
|
|
.userAvatarWrap:focus-within .userAvatarButton__overlay {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.userAvatarWrap:hover .userAvatarRemoveButton,
|
|
.userAvatarWrap:focus-within .userAvatarRemoveButton {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.userAvatar__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.userAvatar__fallback {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
}
|
|
.userInfoList {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.userInfoLine {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
.userInfoLine span {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.56);
|
|
}
|
|
.userInfoLine strong {
|
|
min-width: 0;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
.userCard__actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.userCard__actions--compact {
|
|
grid-template-columns: auto auto minmax(0, 1fr);
|
|
align-items: center;
|
|
}
|
|
.roleBadge {
|
|
width: fit-content;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(96, 165, 250, 0.28);
|
|
background: rgba(96, 165, 250, 0.1);
|
|
color: rgba(191, 219, 254, 0.92);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.userCard__roleBadge {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
z-index: 2;
|
|
box-shadow: 0 10px 24px rgba(7, 10, 18, 0.28);
|
|
}
|
|
.iconActionButton {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
cursor: pointer;
|
|
}
|
|
.iconActionButton img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.iconActionButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
.iconActionButton--danger {
|
|
border-color: rgba(239, 68, 68, 0.24);
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
.userSaveButton:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
.userRoleAction {
|
|
width: fit-content;
|
|
margin-top: 8px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.46);
|
|
font-size: 9px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.01em;
|
|
cursor: pointer;
|
|
}
|
|
.userRoleAction:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
.templateRequestList {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
.templateRequestCard {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 18px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
.templateRequestCard__head {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.templateRequestCard__title {
|
|
font-weight: 900;
|
|
font-size: 18px;
|
|
}
|
|
.templateRequestCard__meta {
|
|
margin-top: 4px;
|
|
font-size: 13px;
|
|
opacity: 0.72;
|
|
}
|
|
.templateRequestItems {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.templateRequestItem {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.templateRequestItem__thumb {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.templateRequestItem__label {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.templateRequestCard__form {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.templateRequestField {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.templateRequestField__label {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.52);
|
|
}
|
|
.templateRequestCard__actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tierAdminList {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
.tierAdminCard {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
|
|
gap: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
padding: 16px;
|
|
}
|
|
.tierAdminCard__preview {
|
|
cursor: pointer;
|
|
}
|
|
.tierAdminCard__thumb {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.tierAdminCard__thumb--empty {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
|
|
}
|
|
.tierAdminCard__body {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
.tierAdminCard__head {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
.tierAdminCard__title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
}
|
|
.tierAdminCard__desc {
|
|
margin-top: 6px;
|
|
color: rgba(255, 255, 255, 0.74);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.tierAdminCard__meta {
|
|
margin-top: 4px;
|
|
opacity: 0.74;
|
|
font-size: 13px;
|
|
word-break: break-word;
|
|
}
|
|
.tierAdminCard__stats {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 7px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
.pill--accent {
|
|
border-color: rgba(251, 191, 36, 0.32);
|
|
background: rgba(251, 191, 36, 0.12);
|
|
color: rgba(253, 230, 138, 0.96);
|
|
}
|
|
.tierAdminSection {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(0, 0, 0, 0.14);
|
|
}
|
|
.tierAdminSection__title {
|
|
font-weight: 800;
|
|
}
|
|
.tierAdminSection__actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tierAdminItemList {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.tierAdminItem {
|
|
display: grid;
|
|
gap: 8px;
|
|
justify-items: center;
|
|
padding: 12px 10px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
min-width: 0;
|
|
}
|
|
.tierAdminItem__thumb {
|
|
width: min(100%, 72px);
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
.tierAdminItem__title {
|
|
width: 100%;
|
|
font-weight: 800;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
}
|
|
.modalOverlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 20px;
|
|
background: rgba(3, 7, 18, 0.66);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.modalCard {
|
|
width: min(560px, 100%);
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 20px;
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(11, 18, 32, 0.96);
|
|
}
|
|
.modalCard--preview {
|
|
width: min(1200px, 100%);
|
|
}
|
|
.modalCard__titleRow {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modalCard__title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
}
|
|
.modalCard__desc {
|
|
opacity: 0.78;
|
|
line-height: 1.5;
|
|
}
|
|
.modalCard__form {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.modalCard__actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.previewFrame {
|
|
width: 100%;
|
|
min-height: min(80vh, 820px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.importModeTabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.checkRow {
|
|
margin-top: 12px;
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
opacity: 0.88;
|
|
}
|
|
.checkRow--compact {
|
|
margin-top: 0;
|
|
}
|
|
.checkRow--toolbar {
|
|
margin-top: 0;
|
|
}
|
|
@media (max-width: 980px) {
|
|
.adminHero__stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.customItemModal {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.adminSidebar {
|
|
display: none;
|
|
}
|
|
.featuredOrderPanel,
|
|
.section--topGrid,
|
|
.gameManagerGrid,
|
|
.toolbar,
|
|
.itemComposer,
|
|
.tierAdminCard,
|
|
.templateRequestCard__form,
|
|
.toolbar--secondary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.itemPreviewCard {
|
|
max-width: none;
|
|
}
|
|
.userCard__identity {
|
|
width: 100%;
|
|
}
|
|
.userInfoLine {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
.userInfoLine strong {
|
|
text-align: left;
|
|
}
|
|
.userCard__actions--compact {
|
|
grid-template-columns: repeat(3, minmax(0, auto));
|
|
}
|
|
.userSaveButton {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
.adminHero {
|
|
padding: 16px;
|
|
}
|
|
.adminHero__title {
|
|
font-size: 24px;
|
|
}
|
|
.thumbGrid,
|
|
.userList {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.customItemGrid {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
}
|
|
.tierAdminCard__head {
|
|
display: grid;
|
|
}
|
|
.customItemCard {
|
|
align-items: stretch;
|
|
padding: 10px;
|
|
}
|
|
.customItemCard__image {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
}
|
|
</style>
|