🎨
This commit is contained in:
		
							parent
							
								
									29f6f5fa5c
								
							
						
					
					
						commit
						58ae2ccbfa
					
				
					 3 changed files with 37 additions and 29 deletions
				
			
		|  | @ -141,8 +141,8 @@ export default defineComponent({ | |||
| 						margin-right: 0; | ||||
| 						margin-bottom: 6px; | ||||
| 						font-size: 1.5em; | ||||
| 						width: 54px; | ||||
| 						height: 54px; | ||||
| 						width: 60px; | ||||
| 						height: 60px; | ||||
| 						aspect-ratio: 1; | ||||
| 						background: var(--panel); | ||||
| 						border-radius: 100%; | ||||
|  |  | |||
|  | @ -11,20 +11,25 @@ | |||
| 	@ok="ok()" | ||||
| > | ||||
| 	<template #header>{{ title || $ts.generateAccessToken }}</template> | ||||
| 	<div v-if="information" class="_section"> | ||||
| 		<MkInfo warn>{{ information }}</MkInfo> | ||||
| 	</div> | ||||
| 	<div class="_section"> | ||||
| 		<MkInput v-model="name"> | ||||
| 			<template #label>{{ $ts.name }}</template> | ||||
| 		</MkInput> | ||||
| 	</div> | ||||
| 	<div class="_section"> | ||||
| 		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div> | ||||
| 		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> | ||||
| 		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton> | ||||
| 		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> | ||||
| 	</div> | ||||
| 
 | ||||
| 	<MkSpacer :margin-min="20" :margin-max="28"> | ||||
| 		<div class="_formRoot"> | ||||
| 			<div v-if="information" class="_formBlock"> | ||||
| 				<MkInfo warn>{{ information }}</MkInfo> | ||||
| 			</div> | ||||
| 			<div class="_formBlock"> | ||||
| 				<MkInput v-model="name"> | ||||
| 					<template #label>{{ $ts.name }}</template> | ||||
| 				</MkInput> | ||||
| 			</div> | ||||
| 			<div class="_formBlock"><b>{{ $ts.permission }}</b></div> | ||||
| 			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> | ||||
| 				<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton> | ||||
| 				<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton> | ||||
| 			</div> | ||||
| 			<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]" class="_formBlock">{{ $t(`_permissions.${kind}`) }}</MkSwitch> | ||||
| 		</div> | ||||
| 	</MkSpacer> | ||||
| </XModalWindow> | ||||
| </template> | ||||
| 
 | ||||
|  | @ -36,6 +41,7 @@ import MkSwitch from './form/switch.vue'; | |||
| import MkButton from './MkButton.vue'; | ||||
| import MkInfo from './MkInfo.vue'; | ||||
| import XModalWindow from '@/components/MkModalWindow.vue'; | ||||
| import { i18n } from '@/i18n'; | ||||
| 
 | ||||
| const props = withDefaults(defineProps<{ | ||||
| 	title?: string | null; | ||||
|  |  | |||
|  | @ -8,28 +8,28 @@ | |||
| 			</div> | ||||
| 		</template> | ||||
| 		<template #default="{items}"> | ||||
| 			<div v-for="token in items" :key="token.id" class="_panel bfomjevm"> | ||||
| 			<div v-for="token in items" :key="token.id" class="_panel _formBlock bfomjevm"> | ||||
| 				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/> | ||||
| 				<div class="body"> | ||||
| 					<div class="name">{{ token.name }}</div> | ||||
| 					<div class="description">{{ token.description }}</div> | ||||
| 					<div class=""> | ||||
| 						<div>{{ i18n.ts.installedDate }}:</div> | ||||
| 						<div><MkTime :time="token.createdAt"/></div> | ||||
| 					</div> | ||||
| 					<div class=""> | ||||
| 						<div>{{ i18n.ts.lastUsedDate }}:</div> | ||||
| 						<div><MkTime :time="token.lastUsedAt"/></div> | ||||
| 					</div> | ||||
| 					<div class="actions"> | ||||
| 						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button> | ||||
| 					</div> | ||||
| 					<details> | ||||
| 					<MkKeyValue class="_formBlock" oneline> | ||||
| 						<template #key>{{ i18n.ts.installedDate }}</template> | ||||
| 						<template #value><MkTime :time="token.createdAt"/></template> | ||||
| 					</MkKeyValue> | ||||
| 					<MkKeyValue class="_formBlock" oneline> | ||||
| 						<template #key>{{ i18n.ts.lastUsedDate }}</template> | ||||
| 						<template #value><MkTime :time="token.lastUsedAt"/></template> | ||||
| 					</MkKeyValue> | ||||
| 					<details class="_formBlock"> | ||||
| 						<summary>{{ i18n.ts.details }}</summary> | ||||
| 						<ul> | ||||
| 							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li> | ||||
| 						</ul> | ||||
| 					</details> | ||||
| 					<div class="actions"> | ||||
| 						<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</template> | ||||
|  | @ -43,6 +43,8 @@ import FormPagination from '@/components/MkPagination.vue'; | |||
| import * as os from '@/os'; | ||||
| import { i18n } from '@/i18n'; | ||||
| import { definePageMetadata } from '@/scripts/page-metadata'; | ||||
| import MkKeyValue from '@/components/MkKeyValue.vue'; | ||||
| import MkButton from '@/components/MkButton.vue'; | ||||
| 
 | ||||
| const list = ref<any>(null); | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue