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